/*
 * PRESTKA V15 — Module Fichiers (J14)
 * Extrait du <style> inline de _panel.html.erb pour permettre le chargement
 * sur toutes les vues du module (notamment show.html.erb hors du panneau).
 * Aligné UI-REVIEW J14 (fixes #2, dette CSS).
 */

/* ===== A11y screen-reader only (helper global manquant) ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Bandeau de liaison événement (ex <style> inline de _panel — CSP) ===== */
.doc-tree__eventbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); margin-bottom: var(--space-4); color: var(--text-secondary); }
.doc-tree__eventbar .icon { width: 18px; height: 18px; color: var(--text-tertiary); flex: none; }
.doc-tree__eventbar-label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-tertiary); }
.doc-tree__eventbar-name { color: var(--text-primary); font-family: var(--font-display); font-style: italic; font-size: var(--text-md); }
.doc-tree__eventbar-link { margin-left: auto; color: var(--brand-primary); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.doc-tree__eventbar-link:hover { text-decoration: underline; }

/* ===== Toolbar ===== */
.doc-tree__toolbar {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.doc-tree__counter {
  /* tertiaire (pas gold — budget gold AUDIT-04) ; valeur alignée sur l'ex-inline qui primait */
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  margin-left: auto;
}

/* ===== Arborescence ===== */
.doc-tree__root {
  min-height: var(--space-9);
  padding: var(--space-3);
  border: 1px dashed var(--gold-stroke-soft);
  border-radius: var(--radius-lg);
}

.doc-tree__empty {
  color: var(--text-tertiary);
  font-style: italic;
  text-align: center;
  padding: var(--space-4);
  margin: 0;
}

.doc-tree__dropzone {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px dashed transparent;
  transition: background 120ms ease, border-color 120ms ease;
  min-height: var(--space-5);
}

.doc-tree__dropzone--over {
  border-color: var(--gold-accent);
  background: color-mix(in srgb, var(--gold) 5%, transparent);
}

.doc-tree__list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.doc-tree__list .doc-tree__list {
  padding-left: var(--space-4);
}

/* ===== Carte document ===== */
.doc-tree__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--surface-solid) 45%, transparent);
  border: 1px solid var(--gold-stroke-soft);
  border-radius: var(--radius-md);
  transition: opacity 120ms ease;
}

.doc-tree__item--folder {
  background: color-mix(in srgb, var(--prestka-primary) 14%, transparent);
}

.doc-tree__item--dragging {
  opacity: 0.4;
}

.doc-tree__item-icon {
  flex: none;
  font-size: var(--text-lg);
}

.doc-tree__item-name {
  flex: 1;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 120ms ease;
}

.doc-tree__item-name:hover {
  color: var(--gold-accent);
}

.doc-tree__item-name--missing {
  color: var(--text-tertiary);
  font-style: italic;
}

.doc-tree__item-meta {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
}

.doc-tree__item-actions {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.doc-tree__item-actions form {
  display: inline;
}

.doc-tree__item-action {
  background: transparent;
  color: var(--text-secondary);
  border: 0;
  cursor: pointer;
  font-size: var(--text-xs);
  text-decoration: underline;
  padding: var(--space-1) var(--space-2);
  min-height: 32px;
}

.doc-tree__item-action:hover {
  color: var(--gold-accent);
}

/* ===== Move via clavier (alternative DnD a11y) ===== */
.doc-tree__move {
  display: inline-block;
  margin-left: var(--space-1);
}

.doc-tree__move summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  text-decoration: underline;
  padding: var(--space-1) var(--space-2);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.doc-tree__move summary:hover {
  color: var(--gold-accent);
}

.doc-tree__move-form {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
  align-items: center;
}

.doc-tree__move-form select,
.doc-tree__move-form button {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  background: color-mix(in srgb, var(--surface-solid) 60%, transparent);
  color: var(--text-primary);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

/* ===== Modale de création (frame global "modal") ===== */
.doc-form-modal {
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  text-align: left;
}

.doc-form-modal__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--text-primary);
  margin: var(--space-1) 0 var(--space-4);
}

/* ===== Formulaire création/édition ===== */
.doc-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--surface-solid) 45%, transparent);
  border: 1px solid var(--gold-stroke-soft);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
}

.doc-form label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.doc-form input,
.doc-form select,
.doc-form textarea {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-solid) 60%, transparent);
  color: var(--text-primary);
  border: 1px solid var(--line-strong);
  font-family: var(--font-sans);
  transition: border-color var(--dur-fast) var(--ease-silk), box-shadow var(--dur-fast);
}

.doc-form input::placeholder,
.doc-form textarea::placeholder {
  color: var(--text-mute);
}

.doc-form input:focus,
.doc-form select:focus,
.doc-form textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

.doc-form textarea {
  min-height: var(--space-9);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  resize: vertical;
}

.doc-form__errors {
  color: var(--priority-urgent);
  font-size: var(--text-sm);
  margin: 0;
  padding-left: var(--space-4);
}

.doc-form__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 768px) {
  .doc-form__split {
    grid-template-columns: 1fr;
  }
}

.doc-form__actions {
  display: flex;
  gap: var(--space-2);
}

/* Les boutons secondaires du module Fichiers utilisent désormais le
   .btn--secondary global (budget gold AUDIT-04 §7.3 : plus de gold sur les
   boutons secondaires ; l'override scopé historique est retiré). */

/* ===== Preview Markdown (formulaire) ===== */
.doc-preview {
  padding: var(--space-3);
  background: color-mix(in srgb, var(--surface-solid) 45%, transparent);
  border: 1px solid var(--gold-stroke-soft);
  border-radius: var(--radius-md);
  min-height: var(--space-9);
  color: var(--text-primary);
  overflow: auto;
}

.doc-preview--full {
  padding: var(--space-5);
  max-width: 80ch;
  margin: 0 auto;
  min-height: 70vh;
}

.doc-preview__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

/* ===== Rendu Markdown (Kramdown GFM ou preview client) ===== */
.markdown-body,
.doc-preview {
  line-height: 1.6;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.doc-preview h1,
.doc-preview h2,
.doc-preview h3 {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-style: italic;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  line-height: 1.2;
}

.markdown-body h1, .doc-preview h1 { font-size: var(--text-2xl); }
.markdown-body h2, .doc-preview h2 { font-size: var(--text-xl); }
.markdown-body h3, .doc-preview h3 { font-size: var(--text-lg); }

.markdown-body p,
.doc-preview p {
  margin: 0 0 var(--space-3);
}

.markdown-body a,
.doc-preview a {
  color: var(--prestka-light);
  text-decoration: underline;
}

.markdown-body a:hover,
.doc-preview a:hover {
  color: var(--text-primary);
}

.markdown-body code,
.doc-preview code {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.markdown-body pre,
.doc-preview pre {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.markdown-body pre code,
.doc-preview pre code {
  background: transparent;
  padding: 0;
}

.markdown-body ul,
.markdown-body ol,
.doc-preview ul,
.doc-preview ol {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
}

.markdown-body li,
.doc-preview li {
  margin-bottom: var(--space-1);
}

.markdown-body blockquote,
.doc-preview blockquote {
  border-left: 3px solid var(--gold-accent);
  padding-left: var(--space-3);
  margin: var(--space-3) 0;
  color: var(--text-secondary);
  font-style: italic;
}

.markdown-body strong,
.doc-preview strong {
  color: var(--text-primary);
  font-weight: var(--weight-bold);
}

.markdown-body em,
.doc-preview em {
  font-style: italic;
}

/* =========================================================
   EXPLORATEUR « OneDrive » (revue DG 2026-07-10, LOT 7)
   Namespace .doc-explorer__* — navigation dossier + liste à colonnes.
   ========================================================= */
.doc-explorer { display: flex; flex-direction: column; gap: var(--space-4); }

/* ── Fil d'Ariane ── */
.doc-explorer__breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: var(--text-sm); }
.doc-explorer__crumb { display: inline-flex; align-items: center; gap: 6px; padding: 4px var(--space-2); border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); }
.doc-explorer__crumb .icon { width: 15px; height: 15px; }
.doc-explorer__crumb:hover { background: var(--surface); color: var(--text-primary); }
.doc-explorer__crumb--current { color: var(--text-primary); font-weight: var(--weight-medium); }
.doc-explorer__crumb-sep { width: 13px; height: 13px; color: var(--text-tertiary); flex: none; }

/* ── Barre d'outils ── */
.doc-explorer__toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.doc-explorer__toolbar-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.doc-explorer__toolbar .btn .icon { width: 15px; height: 15px; }
.doc-explorer__counter { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }

/* ── État vide ── */
.doc-explorer__empty { display: flex; align-items: center; gap: var(--space-3); justify-content: center; text-align: center; padding: var(--space-7) var(--space-4); color: var(--text-tertiary); font-style: italic; border: 1px dashed var(--line); border-radius: var(--radius-lg); }
.doc-explorer__empty .icon { width: 20px; height: 20px; flex: none; }

/* ── Liste à colonnes (Nom · Modifié · Type · Taille · Auteur · actions) ── */
.doc-explorer__list { display: flex; flex-direction: column; }
.doc-explorer__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 150px 100px 90px 130px 44px; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid transparent; }
.doc-explorer__row:not(.doc-explorer__row--head):hover { background: color-mix(in srgb, var(--surface-solid) 60%, transparent); border-color: var(--line); }
.doc-explorer__row--head { position: sticky; top: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.doc-explorer__col { min-width: 0; font-size: var(--text-sm); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-explorer__col--modified, .doc-explorer__col--type, .doc-explorer__col--size, .doc-explorer__col--author { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
.doc-explorer__col--actions { display: flex; justify-content: flex-end; }
.doc-explorer__row--head .doc-explorer__col { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-tertiary); }

.doc-explorer__col--name { display: flex; align-items: center; gap: var(--space-2); }
.doc-explorer__icon { flex: none; display: inline-flex; }
.doc-explorer__icon .icon { width: 20px; height: 20px; }
.doc-explorer__name { color: var(--text-primary); text-decoration: none; font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.doc-explorer__name:hover { color: var(--brand-primary); text-decoration: underline; }
.doc-explorer__name--missing { color: var(--priority-urgent); font-weight: var(--weight-regular); font-style: italic; }

/* Teintes d'icône par type de document */
.doc-icon--folder   { color: var(--prestka-primary); }
.doc-icon--markdown { color: var(--prestka-light); }
.doc-icon--pdf      { color: var(--priority-urgent); }
.doc-icon--image    { color: var(--status-booking-accepte); }
.doc-icon--sheet    { color: var(--gold); }
.doc-icon--word     { color: var(--brand-primary); }
.doc-icon--archive  { color: var(--gold); }
.doc-icon--video    { color: var(--prestka-light); }
.doc-icon--audio    { color: var(--prestka-light); }
.doc-icon--generic  { color: var(--text-tertiary); }

/* En-têtes triables */
.doc-explorer__sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.doc-explorer__sort:hover { color: var(--text-primary); }
.doc-explorer__sort .icon { width: 12px; height: 12px; }
.doc-explorer__sort--on { color: var(--brand-primary); }

/* ── Menu contextuel : formulaires inline (renommer / déplacer) ── */
.doc-menu .menu-list { gap: 2px; }
.doc-menu__sub { border-radius: var(--radius-sm); }
.doc-menu__sub > summary { list-style: none; cursor: pointer; }
.doc-menu__sub > summary::-webkit-details-marker { display: none; }
.doc-menu__sub[open] > summary { color: var(--text-primary); }
.doc-menu__form { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-3); }
.doc-menu__form .input, .doc-menu__form .select { width: 100%; }
.doc-menu form { margin: 0; }

/* ── Responsive : masque les colonnes secondaires en étroit ── */
@media (max-width: 767px) {
  .doc-explorer:not(.doc-explorer--grid) .doc-explorer__row { grid-template-columns: 28px minmax(0, 1fr) 44px; }
  .doc-explorer:not(.doc-explorer--grid) .doc-explorer__col--modified,
  .doc-explorer:not(.doc-explorer--grid) .doc-explorer__col--type,
  .doc-explorer:not(.doc-explorer--grid) .doc-explorer__col--size,
  .doc-explorer:not(.doc-explorer--grid) .doc-explorer__col--author { display: none; }
}

/* =========================================================
   EXPLORATEUR — 7C/7D : grille, sélection, DnD, upload, aperçu
   ========================================================= */
.doc-explorer { position: relative; }
.doc-explorer__toolbar-right { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.doc-explorer__toolbar-right .doc-explorer__counter { margin-left: 0; }

/* Case à cocher (sélection) */
.doc-explorer__col--check { display: flex; align-items: center; justify-content: center; }
.doc-explorer__checkbox { width: 16px; height: 16px; accent-color: var(--brand-primary); cursor: pointer; }
.doc-explorer__entry.is-selected { background: color-mix(in srgb, var(--brand-primary) 12%, transparent); border-color: color-mix(in srgb, var(--brand-primary) 35%, transparent); }
.doc-explorer__entry.is-dragging { opacity: 0.4; }
.doc-explorer__row.is-drop-target,
.doc-explorer__crumb.is-drop-target { outline: 2px dashed var(--gold-accent, var(--gold)); outline-offset: -2px; background: color-mix(in srgb, var(--gold) 8%, transparent); }
.doc-explorer__entry[draggable="true"] { cursor: grab; }

/* ── Vue GRILLE (reflow du même markup) ── */
.doc-explorer--grid .doc-explorer__row--head { display: none; }
.doc-explorer--grid .doc-explorer__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--space-3); }
.doc-explorer--grid .doc-explorer__entry { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-4) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface-solid) 45%, transparent); }
.doc-explorer--grid .doc-explorer__entry:hover { border-color: color-mix(in srgb, var(--brand-primary) 32%, transparent); }
.doc-explorer--grid .doc-explorer__col--modified,
.doc-explorer--grid .doc-explorer__col--size,
.doc-explorer--grid .doc-explorer__col--author { display: none; }
.doc-explorer--grid .doc-explorer__col--name { flex-direction: column; gap: var(--space-2); }
.doc-explorer--grid .doc-explorer__icon .icon { width: 44px; height: 44px; }
.doc-explorer--grid .doc-explorer__name { white-space: normal; word-break: break-word; text-align: center; }
.doc-explorer--grid .doc-explorer__col--type { font-size: 10px; }
.doc-explorer--grid .doc-explorer__col--check { position: absolute; top: 6px; left: 6px; }
.doc-explorer--grid .doc-explorer__col--actions { position: absolute; top: 4px; right: 4px; }

/* ── Barre d'actions groupées (sélection) ── */
.doc-explorer__selbar { position: sticky; bottom: var(--space-4); display: none; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-full); background: var(--surface-solid); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); z-index: var(--z-sticky, 30); }
.doc-explorer__selbar.is-active { display: flex; }
.doc-explorer__selcount { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); }
.doc-explorer__selcount strong { color: var(--brand-primary); font-size: var(--text-sm); }
.doc-explorer__selbar .select { min-width: 160px; }

/* ── Voile d'upload glisser-déposer ── */
.doc-explorer__dropveil { position: absolute; inset: 0; z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); border-radius: var(--radius-lg); border: 2px dashed var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface-solid)); color: var(--text-primary); font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); pointer-events: none; }
.doc-explorer__dropveil .icon { width: 40px; height: 40px; color: var(--brand-primary); }
.doc-explorer.is-file-dragover .doc-explorer__dropveil { display: flex; }

/* ── Aperçu inline image / PDF ── */
.doc-preview__header-actions { display: flex; gap: var(--space-2); }
.doc-preview__media { margin-top: var(--space-3); }
.doc-preview__media img { max-width: 100%; height: auto; border-radius: var(--radius-md); display: block; }
.doc-preview__media--pdf iframe { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: var(--radius-md); }

/* ── LOT F : panneau Propriétés + Qui a accès ── */
.doc-props { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.doc-props__title { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-tertiary); margin: 0 0 var(--space-3); }
.doc-props__grid { display: grid; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-5); }
.doc-props__row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.doc-props__row dt { font-size: var(--text-sm); color: var(--text-tertiary); margin: 0; }
.doc-props__row dd { font-size: var(--text-sm); color: var(--text-primary); margin: 0; text-align: right; }
.doc-access { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.doc-access__item { display: flex; align-items: center; gap: var(--space-3); }
.doc-access__main { display: flex; flex-direction: column; line-height: 1.25; }
.doc-access__name { font-size: var(--text-sm); color: var(--text-primary); }
.doc-access__role { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-tertiary); }
.doc-access__empty { font-size: var(--text-sm); color: var(--text-secondary); margin: 0 0 var(--space-3); }
.doc-access__note { font-size: var(--text-xs); color: var(--text-tertiary); margin: 0; }