* { box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

.nav-btn { color: #c7d2fe; transition: background .15s, color .15s; }
.nav-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.nav-btn-active { background: #fff !important; color: #3730a3 !important; font-weight: 600; }

/* Dropdown-based nav groups (Familles, Listes, Paramètres, Statistiques, Configuration) */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-toggle { cursor: pointer; border: none; background: none; }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  min-width: 240px;
  z-index: 50;
  padding: 4px;
}
.nav-dropdown.nav-dropdown-open .nav-dropdown-menu { display: block; }
.nav-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #1f2937;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.nav-dropdown-item:hover { background: #eef2ff; color: #3730a3; }

.panel { background: #fff; border: 1px solid #d1d5db; border-radius: 6px; }

table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data-table th {
  background: #eef2ff; color: #374151; font-weight: 600; text-align: center;
  border: 1px solid #d1d5db; padding: 4px 6px; white-space: nowrap; position: sticky; top: 0;
}
table.data-table td {
  border: 1px solid #e5e7eb; padding: 3px 6px; text-align: right; white-space: nowrap;
}
table.data-table td.text-left { text-align: left; }
table.data-table tbody tr:hover { background: #f9fafb; cursor: default; }
table.data-table tr.row-selected { background: #bfdbfe !important; }
table.data-table td.col-usd { background: #fde8cf; }
th.col-usd { background: #fbd9ab; }

.parent-list-item { padding: 3px 6px; font-size: 13px; cursor: pointer; display: flex; gap: 6px; border-bottom: 1px solid #f1f5f9; }
.parent-list-item:hover { background: #eff6ff; }
.parent-list-item.selected { background: #2563eb; color: #fff; }
.parent-list-item .code { width: 62px; flex-shrink: 0; font-weight: 600; }
.parent-list-item .ln { flex: 1; }
.parent-list-item .fn { flex: 1; opacity: .85; }

.field-label { font-size: 12px; font-weight: 600; color: #1d4ed8; }
.field-label.red { color: #dc2626; }
.form-input {
  width: 100%; border: 1px solid #cbd5e1; border-radius: 4px; padding: 4px 8px; font-size: 13px; text-align: right;
}
.form-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.2); }

.summary-box { background: #dcfce7; border: 1px solid #86efac; border-radius: 4px; padding: 6px 10px; font-weight: 700; font-size: 15px; text-align: right; color: #166534; }
.summary-box.balance { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }

.btn { padding: 6px 14px; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: filter .1s; }
.btn:hover { filter: brightness(0.95); }
.btn-primary { background: #16a34a; color: #fff; }
.btn-secondary { background: #6b7280; color: #fff; }
.btn-orange { background: #fdba74; color: #7c2d12; border: 1px solid #f97316; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-outline { background: #fff; border: 1px solid #cbd5e1; color: #334155; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 60; }
.modal-box { background: #fff; border-radius: 8px; padding: 20px; min-width: 380px; max-width: 90vw; max-height: 90vh; overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,.25); }

/* customConfirm()/customAlert() (app.js) — replaces native window.confirm()/
   alert(), whose title bar shows the raw page hostname and cannot be
   relabeled. Stacked ABOVE .modal-overlay (z-index 70 > 60) so a
   confirmation raised from inside an already-open modal (e.g. saving the
   Teacher form) doesn't need to close that modal first. */
.confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 70; }
.confirm-box { background: #fff; border-radius: 8px; min-width: 340px; max-width: 90vw; width: 440px; box-shadow: 0 10px 40px rgba(0,0,0,.3); overflow: hidden; }
.confirm-box-title { background: #1e3a8a; color: #fff; font-weight: 700; font-size: 14px; padding: 10px 16px; }
.confirm-box-body { padding: 16px; font-size: 13.5px; color: #1f2937; white-space: pre-wrap; line-height: 1.6; max-height: 55vh; overflow-y: auto; }
.confirm-box-actions { padding: 10px 16px 16px; display: flex; justify-content: flex-end; gap: 8px; }

/* ------------------------------------------------------------------
   PRINT ISOLATION — window.print() by default would print the WHOLE
   page (nav, sidebar, other hidden tabs, modal action buttons...), and
   a fixed-position modal often gets clipped/loses its top content
   (including the report header) once the browser lays out print pages.
   printReport() (app.js) sets body[data-print-root] right before calling
   window.print() so these rules can isolate exactly one printable root:
   "modal" -> the currently open report modal (#modal-root), with its
   action buttons (.no-print) hidden and repositioned to fill the page;
   "tab"   -> the currently visible .tab-panel (Statistiques Ecole/Budget,
   which already embed reportHeaderHtml() at their own top).
   ------------------------------------------------------------------ */
@media print {
  body * { visibility: hidden; }
  body[data-print-root="modal"] #modal-root,
  body[data-print-root="modal"] #modal-root * { visibility: visible; }
  body[data-print-root="modal"] #modal-root {
    position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important;
  }
  body[data-print-root="modal"] .modal-overlay {
    position: absolute !important; top: 0 !important; left: 0 !important; inset: auto !important;
    background: none !important; display: block !important; z-index: auto !important;
  }
  body[data-print-root="modal"] .modal-box {
    position: absolute !important; top: 0; left: 0; width: 100% !important; max-width: 100% !important;
    max-height: none !important; overflow: visible !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
  }
  body[data-print-root="modal"] .modal-box > div {
    width: 100% !important; max-width: 100% !important;
  }
  body[data-print-root="tab"] .tab-panel:not(.hidden),
  body[data-print-root="tab"] .tab-panel:not(.hidden) * { visibility: visible; }
  body[data-print-root="tab"] .tab-panel:not(.hidden) {
    position: absolute !important; top: 0; left: 0; width: 100% !important;
    padding: 0 !important; margin: 0 !important;
  }
  .no-print { display: none !important; }
}

/* Forces landscape A4 for wide reports (e.g. Bulletin de classe, whose
   column count grows with the number of courses) on the native "Imprimer"
   button path (window.print(), see printReport() above). Without this,
   only the "Télécharger PDF" button (exportElementToPdf(), which measures
   content width itself) ever picks landscape — window.print() always used
   the browser's default page orientation regardless of content width.
   Uses CSS Paged Media named pages: an element opts in with
   `page: landscape`, and the matching `@page landscape` rule sets the
   physical page orientation for it (supported by Chrome/Edge, the
   browsers this app is printed from). */
@page landscape { size: landscape; margin: 10mm; }
.print-landscape { page: landscape; }

/* Forces portrait A4 for certificates/attestations, regardless of the
   browser's/printer's last-used orientation, on the native "Imprimer"
   button path (window.print()). Explicit even though portrait is already
   the default @page orientation, so a printer/driver that was last used
   in landscape mode (e.g. right after printing a "Bulletin de classe")
   doesn't silently carry that setting over to the next certificate. */
@page portrait { size: portrait; margin: 15mm 25mm; }
.print-portrait { page: portrait; }

/* Certificates/attestations: pins the school-info footer to the bottom of
   a single A4-portrait page, both on the native "Imprimer" (window.print())
   path and on the "Télécharger PDF" export path (exportElementToPdf()'s
   forceOrientation branch uses the same 267mm figure — 297mm page height
   minus 15mm top/bottom margins — for its min-height). The container is a
   flex column so the footer (margin-top:auto) is pushed to the bottom of
   that page height; if the certificate's own content is ever taller than
   one page, this has no visible effect and the footer simply follows the
   content as before. */
.attestation-page { display: flex; flex-direction: column; min-height: 250mm; }
.attestation-page > .attestation-footer { margin-top: auto; }

.toast { padding: 10px 16px; border-radius: 6px; color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,.2); min-width: 220px; }
.toast-success { background: #16a34a; }
.toast-error { background: #dc2626; }
.toast-info { background: #2563eb; }

.section-title { font-size: 14px; font-weight: 700; color: #1e3a8a; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }

.simple-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.simple-table th { background: #f3f4f6; border: 1px solid #d1d5db; padding: 6px 8px; text-align: left; }
.simple-table td { border: 1px solid #e5e7eb; padding: 5px 8px; }
.simple-table tbody tr:hover { background: #f9fafb; }

/* Report/print tables (Relevé, Fiche famille, listes de classe/escomptes/
   rites/nationalités, tableaux détaillés des Statistiques) — unlike
   .simple-table (used by the interactive CRUD lists, which benefit from
   stretching to the panel's full width), these size each column to the
   real width of its content (`width: auto` + `white-space: nowrap`
   everywhere except cells explicitly marked `.wrap` for free text that can
   be long, e.g. Adresse/Libellé) so no column is ever wider than it needs
   to be, and exportElementToPdf() can then size the PDF page to match. */
.report-table { width: auto; border-collapse: collapse; font-size: 12.5px; }
.report-table th { background: #f3f4f6; border: 1px solid #d1d5db; padding: 4px 8px; text-align: left; white-space: nowrap; }
.report-table td { border: 1px solid #e5e7eb; padding: 4px 8px; white-space: nowrap; }
.report-table td.wrap, .report-table th.wrap { white-space: normal; }
.report-table tbody tr:hover { background: #f9fafb; }
.report-table tfoot td { white-space: nowrap; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-gray { background: #f3f4f6; color: #4b5563; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-amber { background: #fef3c7; color: #92400e; }

/* Comptes Admin > permissions matrix (rows = NAV_REGISTRY menu/submenu
   pairs, columns = admin accounts) — sticky header row so column
   usernames stay visible while scrolling a long list of items. */
.admin-permissions-matrix thead th { position: sticky; top: 0; z-index: 1; }
.admin-permissions-matrix .admin-col-edit { background: none; border: none; cursor: pointer; font-weight: 600; color: #1e3a8a; padding: 2px 4px; }
.admin-permissions-matrix .admin-col-edit:hover { text-decoration: underline; }
.admin-permissions-matrix .perm-cb { width: 16px; height: 16px; cursor: pointer; }

.scroll-y { overflow-y: auto; }