/* =====================================================================
   GED-PRO UI 1B1 — Standard visuel compact professionnel
   PILOTE : Documents + Courriers uniquement
   Objectif : densite, lisibilite, exploitation de l'espace, sans toucher
   a la logique metier.
   ===================================================================== */

body[data-page="documents"],
body[data-page="courriers"] {
  --sidebar-width: 218px;
  --sidebar-collapsed-width: 64px;
  --topbar-height: 60px;
  --ui-radius: 10px;
  --ui-radius-sm: 7px;
  --ui-control-h: 34px;
  --ui-gap: 12px;
  font-size: 13px;
  background: #f4f6f9;
}

/* ---------- Shell / navigation ---------- */
body[data-page="documents"] .sidebar,
body[data-page="courriers"] .sidebar {
  width: var(--sidebar-width);
  padding: 14px 10px 12px;
  background: #0d2447;
  box-shadow: 5px 0 18px rgba(8, 24, 48, .08);
}
body[data-page="documents"] .sidebar .brand,
body[data-page="courriers"] .sidebar .brand {
  gap: 9px;
  padding: 0 7px 13px;
}
body[data-page="documents"] .sidebar .brand-mark,
body[data-page="courriers"] .sidebar .brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  font-size: 12px;
  box-shadow: none;
}
body[data-page="documents"] .sidebar .brand-copy strong,
body[data-page="courriers"] .sidebar .brand-copy strong {
  font-size: 14px;
  letter-spacing: -.01em;
}
body[data-page="documents"] .sidebar .brand-copy span,
body[data-page="courriers"] .sidebar .brand-copy span {
  margin-top: 1px;
  font-size: 9.5px;
}
body[data-page="documents"] .nav-label,
body[data-page="courriers"] .nav-label {
  padding: 11px 9px 6px;
  font-size: 8px;
  letter-spacing: .11em;
}
body[data-page="documents"] .nav,
body[data-page="courriers"] .nav { gap: 3px; }
body[data-page="documents"] .nav-link,
body[data-page="courriers"] .nav-link {
  min-height: 36px;
  gap: 8px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 650;
}
body[data-page="documents"] .nav-icon,
body[data-page="courriers"] .nav-icon {
  width: 25px;
  height: 25px;
  flex-basis: 25px;
  border-radius: 6px;
  font-size: 11px;
}
body[data-page="documents"] .sidebar-footer,
body[data-page="courriers"] .sidebar-footer { padding: 10px 6px 0; }
body[data-page="documents"] .sidebar-status,
body[data-page="courriers"] .sidebar-status {
  gap: 7px;
  padding: 8px;
  border-radius: 8px;
  font-size: 9px;
}
body[data-page="documents"] .sidebar-status .status-dot,
body[data-page="courriers"] .sidebar-status .status-dot {
  width: 7px;
  height: 7px;
}

/* ---------- Topbar ---------- */
body[data-page="documents"] .topbar,
body[data-page="courriers"] .topbar {
  height: var(--topbar-height);
  gap: 12px;
  padding: 0 18px;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
}
body[data-page="documents"] .topbar-left,
body[data-page="courriers"] .topbar-left { gap: 10px; min-width: 0; }
body[data-page="documents"] .mobile-menu,
body[data-page="courriers"] .mobile-menu {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-radius: 7px;
  font-size: 18px;
}
body[data-page="documents"] .page-heading,
body[data-page="courriers"] .page-heading { min-width: 0; }
body[data-page="documents"] .page-heading strong,
body[data-page="courriers"] .page-heading strong {
  font-size: 14px;
  line-height: 1.15;
}
body[data-page="documents"] .page-heading span,
body[data-page="courriers"] .page-heading span {
  margin-top: 2px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
}
body[data-page="documents"] .user-menu,
body[data-page="courriers"] .user-menu { gap: 8px; min-width: 0; }
body[data-page="documents"] .user-avatar,
body[data-page="courriers"] .user-avatar {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-radius: 8px;
  font-size: 10px;
}
body[data-page="documents"] .user-copy strong,
body[data-page="courriers"] .user-copy strong {
  max-width: 165px;
  font-size: 10.5px;
  line-height: 1.15;
}
body[data-page="documents"] .user-copy span,
body[data-page="courriers"] .user-copy span {
  margin-top: 1px;
  max-width: 165px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8.5px;
}
body[data-page="documents"] .logout-btn,
body[data-page="courriers"] .logout-btn {
  min-height: 31px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 9.5px;
  font-weight: 700;
}

/* ---------- Espace principal ---------- */
body[data-page="documents"] .content,
body[data-page="courriers"] .content {
  padding: 16px 18px 26px;
}

/* ---------- Boutons / controles communs ---------- */
body[data-page="documents"] .btn,
body[data-page="courriers"] .btn,
body[data-page="documents"] .btn-secondary,
body[data-page="courriers"] .btn-secondary,
body[data-page="documents"] .btn-soft,
body[data-page="courriers"] .btn-soft {
  min-height: var(--ui-control-h);
  padding: 0 11px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 750;
  box-shadow: none;
}
body[data-page="documents"] .btn:hover:not(:disabled),
body[data-page="courriers"] .btn:hover:not(:disabled) { transform: none; }

/* =====================================================================
   DOCUMENTS
   ===================================================================== */
body[data-page="documents"] .documents-hero {
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border-radius: var(--ui-radius);
  box-shadow: none;
}
body[data-page="documents"] .documents-hero .page-kicker {
  font-size: 8px;
  letter-spacing: .06em;
}
body[data-page="documents"] .documents-hero h1 {
  margin: 2px 0 3px;
  font-size: 18px;
  letter-spacing: -.02em;
}
body[data-page="documents"] .documents-hero p {
  max-width: 720px;
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
}
body[data-page="documents"] .documents-hero-actions { gap: 6px; }

body[data-page="documents"] .document-kpis {
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  margin: 10px 0;
}
body[data-page="documents"] .document-kpis article {
  min-height: 54px;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  box-shadow: none;
}
body[data-page="documents"] .document-kpis span { font-size: 8px; }
body[data-page="documents"] .document-kpis strong { font-size: 16px; }

body[data-page="documents"] .document-filter-card,
body[data-page="documents"] .document-list-card {
  border-radius: var(--ui-radius);
  box-shadow: none;
}
body[data-page="documents"] .document-filter-card {
  margin-bottom: 10px;
  padding: 11px 12px;
}
body[data-page="documents"] .document-filter-head { align-items: center; gap: 10px; }
body[data-page="documents"] .document-filter-head h2 { font-size: 12px; }
body[data-page="documents"] .document-filter-head p { margin-top: 2px; font-size: 8.5px; }
body[data-page="documents"] .document-filter-head > span { font-size: 8.5px; }
body[data-page="documents"] .document-filter-grid {
  grid-template-columns: minmax(230px,1.7fr) minmax(150px,.8fr) minmax(120px,.65fr) minmax(120px,.65fr) 82px auto;
  gap: 7px;
  margin-top: 9px;
  align-items: end;
}
body[data-page="documents"] .doc-field { gap: 4px; }
body[data-page="documents"] .doc-field > span { font-size: 8.5px; }
body[data-page="documents"] .doc-field input,
body[data-page="documents"] .doc-field select {
  height: var(--ui-control-h);
  padding: 0 9px;
  border-radius: 7px;
  font-size: 10px;
}
body[data-page="documents"] .document-filter-actions { gap: 5px; }
body[data-page="documents"] .document-filter-actions .btn,
body[data-page="documents"] .document-filter-actions .btn-secondary { min-height: var(--ui-control-h); }

body[data-page="documents"] .document-table-wrap { overflow-x: auto; }
body[data-page="documents"] .document-table { min-width: 720px; table-layout: fixed; }
body[data-page="documents"] .document-table th {
  padding: 7px 9px;
  font-size: 7.5px;
  letter-spacing: .035em;
}
body[data-page="documents"] .document-table td {
  padding: 7px 9px;
  font-size: 9.5px;
  line-height: 1.25;
}
body[data-page="documents"] .document-table th:nth-child(1),
body[data-page="documents"] .document-table td:nth-child(1){width:34%}
body[data-page="documents"] .document-table th:nth-child(2),
body[data-page="documents"] .document-table td:nth-child(2){width:14%}
body[data-page="documents"] .document-table th:nth-child(3),
body[data-page="documents"] .document-table td:nth-child(3){width:12%}
body[data-page="documents"] .document-table th:nth-child(4),
body[data-page="documents"] .document-table td:nth-child(4){width:13%}
body[data-page="documents"] .document-table th:nth-child(5),
body[data-page="documents"] .document-table td:nth-child(5){width:11%}
body[data-page="documents"] .document-table th:nth-child(6),
body[data-page="documents"] .document-table td:nth-child(6){width:10%}
body[data-page="documents"] .document-table th:nth-child(7),
body[data-page="documents"] .document-table td:nth-child(7){width:70px}
body[data-page="documents"] .doc-link-button { gap: 1px; max-width: none; }
body[data-page="documents"] .doc-link-button strong { font-size: 9px; }
body[data-page="documents"] .doc-link-button span { font-size: 10px; }
body[data-page="documents"] .doc-row-action { font-size: 9px; }
body[data-page="documents"] .document-pagination {
  min-height: 44px;
  gap: 8px;
  padding: 7px 10px;
}
body[data-page="documents"] .document-pagination > span { min-width: 80px; font-size: 8.5px; }

/* =====================================================================
   COURRIERS
   ===================================================================== */
body[data-page="courriers"] .mail-hero {
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border-radius: var(--ui-radius);
  box-shadow: none;
}
body[data-page="courriers"] .mail-hero .page-kicker { font-size: 8px; }
body[data-page="courriers"] .mail-hero h1 {
  margin: 2px 0 3px;
  font-size: 18px;
  letter-spacing: -.02em;
}
body[data-page="courriers"] .mail-hero p {
  max-width: 720px;
  font-size: 10px;
  line-height: 1.4;
}
body[data-page="courriers"] .mail-hero-actions { gap: 6px; }
body[data-page="courriers"] .page-status {
  min-height: 26px;
  padding: 0 8px;
  font-size: 8px;
}

body[data-page="courriers"] .mail-kpis {
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 7px;
  margin: 9px 0;
}
body[data-page="courriers"] .mail-kpis article {
  min-height: 54px;
  gap: 1px;
  padding: 7px 9px;
  border-radius: 8px;
  box-shadow: none;
}
body[data-page="courriers"] .mail-kpis span { font-size: 7.5px; }
body[data-page="courriers"] .mail-kpis strong { font-size: 17px; }
body[data-page="courriers"] .mail-kpis small { font-size: 7.5px; }

body[data-page="courriers"] .mail-filter-card,
body[data-page="courriers"] .mail-list-card {
  border-radius: var(--ui-radius);
  box-shadow: none;
}
body[data-page="courriers"] .mail-filter-card {
  margin-bottom: 10px;
  padding: 10px 12px;
}
body[data-page="courriers"] .mail-filter-head,
body[data-page="courriers"] .mail-list-head { align-items: center; gap: 10px; }
body[data-page="courriers"] .mail-filter-head h2,
body[data-page="courriers"] .mail-list-head h2 { font-size: 12px; }
body[data-page="courriers"] .mail-filter-head p,
body[data-page="courriers"] .mail-list-head p { margin-top: 2px; font-size: 8.5px; }
body[data-page="courriers"] .mail-filter-head > span { font-size: 8.5px; }
body[data-page="courriers"] .mail-filter-grid {
  grid-template-columns: minmax(250px,1.7fr) minmax(110px,.55fr) minmax(120px,.62fr) 82px auto;
  gap: 7px;
  margin-top: 9px;
}
body[data-page="courriers"] .mail-field { gap: 4px; }
body[data-page="courriers"] .mail-field > span { font-size: 8.5px; }
body[data-page="courriers"] .mail-field input,
body[data-page="courriers"] .mail-field select {
  height: var(--ui-control-h);
  padding: 0 9px;
  border-radius: 7px;
  font-size: 10px;
}
body[data-page="courriers"] .mail-filter-actions { gap: 5px; }
body[data-page="courriers"] .mail-list-head { padding: 10px 12px 8px; }
body[data-page="courriers"] .mail-volume-summary { gap: 4px; }
body[data-page="courriers"] .mail-volume-summary span {
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 7.5px;
}
body[data-page="courriers"] .mail-table {
  min-width: 760px;
  table-layout: fixed;
}
body[data-page="courriers"] .mail-table th {
  padding: 7px 8px;
  font-size: 7.5px;
}
body[data-page="courriers"] .mail-table td {
  padding: 7px 8px;
  font-size: 9.5px;
  line-height: 1.25;
}
body[data-page="courriers"] .mail-table th:nth-child(1),
body[data-page="courriers"] .mail-table td:nth-child(1){width:30%}
body[data-page="courriers"] .mail-table th:nth-child(2),
body[data-page="courriers"] .mail-table td:nth-child(2){width:9%}
body[data-page="courriers"] .mail-table th:nth-child(3),
body[data-page="courriers"] .mail-table td:nth-child(3){width:20%}
body[data-page="courriers"] .mail-table th:nth-child(4),
body[data-page="courriers"] .mail-table td:nth-child(4){width:9%}
body[data-page="courriers"] .mail-table th:nth-child(5),
body[data-page="courriers"] .mail-table td:nth-child(5){width:8%}
body[data-page="courriers"] .mail-table th:nth-child(6),
body[data-page="courriers"] .mail-table td:nth-child(6){width:10%}
body[data-page="courriers"] .mail-table th:nth-child(7),
body[data-page="courriers"] .mail-table td:nth-child(7){width:150px}
body[data-page="courriers"] .mail-primary { gap: 1px; max-width: none; }
body[data-page="courriers"] .mail-primary strong { font-size: 9.5px; }
body[data-page="courriers"] .mail-primary span { font-size: 9px; }
body[data-page="courriers"] .mail-primary small { font-size: 8px; }
body[data-page="courriers"] .mail-badge {
  min-height: 21px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 7.5px;
}
body[data-page="courriers"] .mail-row-action {
  min-height: 25px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 7.8px;
}
body[data-page="courriers"] .mail-row-action + .mail-row-action { margin-left: 2px; }
body[data-page="courriers"] .mail-pagination {
  padding: 7px 10px;
  gap: 8px;
}
body[data-page="courriers"] .mail-pagination span { font-size: 8.5px; }

/* ---------- Modales : compactes mais lisibles ---------- */
body[data-page="documents"] .modal-card,
body[data-page="courriers"] .modal-card {
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(19,38,68,.18);
}
body[data-page="documents"] .modal-head,
body[data-page="courriers"] .modal-head {
  padding: 11px 13px;
  gap: 10px;
}
body[data-page="documents"] .modal-head h2,
body[data-page="courriers"] .modal-head h2 { font-size: 14px; }
body[data-page="documents"] .modal-head p,
body[data-page="courriers"] .modal-head p { font-size: 9px; }
body[data-page="documents"] .modal-close,
body[data-page="courriers"] .modal-close {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: 7px;
}

/* Les sous-panneaux 3C / 3D1 conservent leur structure, avec une
   typographie lisible : pas de miniaturisation a 7px. */
body[data-page="courriers"] .mail-cycle-panel,
body[data-page="courriers"] .mail-timeline-panel,
body[data-page="courriers"] .mail-assignment-panel {
  gap: 8px;
  padding: 10px 11px;
  border-radius: 8px;
}
body[data-page="courriers"] .mail-cycle-head h3,
body[data-page="courriers"] .mail-timeline-head h3,
body[data-page="courriers"] .mail-assignment-head h3 { font-size: 11px; }
body[data-page="courriers"] .mail-cycle-status-card,
body[data-page="courriers"] .mail-assignment-item {
  padding: 8px 9px;
  border-radius: 7px;
}
body[data-page="courriers"] .mail-cycle-status-card > strong,
body[data-page="courriers"] .mail-assignment-item-head strong { font-size: 9.5px; }
body[data-page="courriers"] .mail-assignment-help,
body[data-page="courriers"] .mail-assignment-instruction,
body[data-page="courriers"] .mail-cycle-terminal { font-size: 8.8px; }

/* ---------- Largeur intermediaire : ne pas basculer trop tot en cartes ---------- */
@media (min-width: 841px) and (max-width: 1100px) {
  body[data-page="documents"] .document-table th:nth-child(4),
  body[data-page="documents"] .document-table td:nth-child(4),
  body[data-page="documents"] .document-table th:nth-child(5),
  body[data-page="documents"] .document-table td:nth-child(5) { display:none; }
  body[data-page="documents"] .document-table { min-width: 590px; }

  body[data-page="courriers"] .mail-table th:nth-child(4),
  body[data-page="courriers"] .mail-table td:nth-child(4) { display:none; }
  body[data-page="courriers"] .mail-table { min-width: 650px; }
}

/* Reprend le layout desktop entre 841 et 980px. L'ancien responsive
   transformait trop tot l'application en tablette. */
@media (min-width: 841px) and (max-width: 980px) {
  body[data-page="documents"] .app-shell,
  body[data-page="courriers"] .app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0,1fr);
  }
  body[data-page="documents"] .sidebar,
  body[data-page="courriers"] .sidebar {
    transform: none;
  }
  body[data-page="documents"] .app-main,
  body[data-page="courriers"] .app-main { grid-column: 2; }
  body[data-page="documents"] .sidebar-overlay,
  body[data-page="courriers"] .sidebar-overlay { display:none!important; }
  body[data-page="documents"] .topbar,
  body[data-page="courriers"] .topbar { padding: 0 14px; }
  body[data-page="documents"] .content,
  body[data-page="courriers"] .content { padding: 14px 14px 22px; }
}

/* Les tableaux restent utilises jusqu'a 640px. */
@media (min-width: 641px) {
  body[data-page="documents"] .document-table-wrap { display:block!important; }
  body[data-page="documents"] .doc-mobile-list { display:none!important; }
  body[data-page="courriers"] .mail-table-wrap { display:block!important; }
  body[data-page="courriers"] .mail-mobile-list { display:none!important; }
}

@media (max-width: 1100px) {
  body[data-page="documents"] .document-filter-grid {
    grid-template-columns: minmax(220px,1.4fr) repeat(2,minmax(110px,.65fr)) 82px auto;
  }
  body[data-page="documents"] .document-filter-grid .doc-field:nth-of-type(4) { display:none; }
  body[data-page="documents"] .doc-field-search { grid-column:auto; }
  body[data-page="documents"] .document-filter-actions { grid-column:auto; }

  body[data-page="courriers"] .mail-filter-grid {
    grid-template-columns: minmax(220px,1.5fr) minmax(105px,.55fr) minmax(115px,.6fr) 76px auto;
  }
  body[data-page="documents"] .user-copy strong,
  body[data-page="documents"] .user-copy span,
  body[data-page="courriers"] .user-copy strong,
  body[data-page="courriers"] .user-copy span { max-width: 125px; }
}

@media (max-width: 840px) {
  body[data-page="documents"],
  body[data-page="courriers"] { --sidebar-width: 220px; }
  body[data-page="documents"] .content,
  body[data-page="courriers"] .content { padding: 12px 12px 20px; }
  body[data-page="documents"] .documents-hero,
  body[data-page="courriers"] .mail-hero { padding: 11px 12px; }
  body[data-page="documents"] .documents-hero p,
  body[data-page="courriers"] .mail-hero p { display:none; }
  body[data-page="documents"] .document-kpis,
  body[data-page="courriers"] .mail-kpis { gap: 5px; }
  body[data-page="documents"] .document-filter-grid,
  body[data-page="courriers"] .mail-filter-grid {
    grid-template-columns: minmax(180px,1fr) minmax(100px,.5fr) minmax(110px,.55fr) auto;
  }
  body[data-page="documents"] .document-filter-grid .doc-field:nth-of-type(4),
  body[data-page="documents"] .document-filter-grid .doc-field:nth-of-type(5),
  body[data-page="courriers"] .mail-field-small { display:none; }
}

@media (max-width: 640px) {
  body[data-page="documents"],
  body[data-page="courriers"] { --topbar-height: 56px; }
  body[data-page="documents"] .topbar,
  body[data-page="courriers"] .topbar { padding: 0 9px; }
  body[data-page="documents"] .user-avatar,
  body[data-page="courriers"] .user-avatar { display:none; }
  body[data-page="documents"] .logout-btn,
  body[data-page="courriers"] .logout-btn { min-height: 29px; padding:0 8px; }
  body[data-page="documents"] .documents-hero,
  body[data-page="courriers"] .mail-hero { align-items:flex-start; flex-direction:column; }
  body[data-page="documents"] .documents-hero-actions,
  body[data-page="courriers"] .mail-hero-actions { width:100%; justify-content:flex-start; }
  body[data-page="documents"] .document-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body[data-page="courriers"] .mail-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body[data-page="courriers"] .mail-kpis article:nth-child(4),
  body[data-page="courriers"] .mail-kpis article:nth-child(5) { display:none; }
  body[data-page="documents"] .document-filter-grid,
  body[data-page="courriers"] .mail-filter-grid { grid-template-columns:1fr; }
  body[data-page="documents"] .document-filter-grid .doc-field,
  body[data-page="courriers"] .mail-filter-grid .mail-field { display:grid; }
  body[data-page="documents"] .document-filter-actions,
  body[data-page="courriers"] .mail-filter-actions { display:grid; grid-template-columns:1fr 1fr; }

  body[data-page="documents"] .doc-mobile-list,
  body[data-page="courriers"] .mail-mobile-list { gap:6px; padding:7px; }
  body[data-page="documents"] .doc-mobile-card,
  body[data-page="courriers"] .mail-mobile-card {
    gap:7px;
    padding:9px 10px;
    border-radius:8px;
  }
  body[data-page="documents"] .doc-mobile-card-head strong,
  body[data-page="courriers"] .mail-mobile-head strong { font-size:10px; }
  body[data-page="documents"] .doc-mobile-meta,
  body[data-page="courriers"] .mail-mobile-meta { font-size:8.5px; }
}