/* ==========================================================================
   Bilan AI — THE DESIGN SYSTEM (Round 410)
   One stylesheet, loaded by layouts/base.html right after Bootstrap, so every
   screen inherits the same tokens and components. The written rules live in
   CLAUDE.md §7 ("Design system rules"); this file is their implementation.
   Benchmarks: a calm everyday ledger, a French document-first inbox, and
   consistent detail everywhere (CLAUDE.md §7 names them).

   1. Tokens          colour, type scale, 8-px spacing grid, radius, shadow
   2. Base            body, numbers (tabular), focus ring, links
   3. Buttons         three styles: primary · secondary · ghost
   4. Page header     title · status · breadcrumbs · actions/Tools, one place
   5. Table           one table look (header, rows, totals, drill links)
   6. Form            one form look (labels, inputs, required mark, help)
   7. Feedback        toasts with Undo, busy buttons, inline errors
   8. States          empty · loading (skeleton) · error
   9. Global chrome   + New menu, À valider pill, command palette (Ctrl+K)
  10. Daily inbox     À valider cards (document · bank/Mobile Money match)
  11. Dashboard       quiet cards
  12. Inline edit     click-to-edit cells
  13. Official print  SYSCOHADA statements ready to file (A4)
  14. Phone           ≤ 576 px: the jobs people do on phones
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
    /* colour */
    --pb-brand: #1a56db;          /* primary actions, links, focus */
    --pb-brand-ink: #1a3a8f;      /* top bar gradient end, pressed */
    --pb-brand-soft: #eef4ff;     /* selected rows, chips */
    --pb-ink: #0f172a;            /* titles, figures */
    --pb-text: #1e293b;           /* body text */
    --pb-muted: #64748b;          /* secondary text, labels */
    --pb-line: #e2e8f0;           /* borders, separators */
    --pb-canvas: #f8fafc;         /* page background */
    --pb-surface: #ffffff;        /* cards, tables */
    --pb-success: #047857;
    --pb-success-soft: #ecfdf5;
    --pb-warning: #b45309;
    --pb-warning-soft: #fffbeb;
    --pb-danger: #b91c1c;
    --pb-danger-soft: #fef2f2;
    /* type scale (1.125 ratio, 16 px base) */
    --pb-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --pb-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --pb-fs-xs: .75rem;           /* 12 captions, table headers */
    --pb-fs-sm: .875rem;          /* 14 table cells, help */
    --pb-fs-md: 1rem;             /* 16 body, inputs */
    --pb-fs-lg: 1.25rem;          /* 20 card figures */
    --pb-fs-xl: 1.5rem;           /* 24 page titles */
    --pb-fs-2xl: 2rem;            /* 32 dashboard figures */
    /* 8-px spacing grid */
    --pb-s1: 4px; --pb-s2: 8px; --pb-s3: 16px; --pb-s4: 24px; --pb-s5: 32px; --pb-s6: 48px;
    --pb-radius: 8px; --pb-radius-lg: 12px;
    --pb-shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --pb-shadow-2: 0 8px 24px rgba(15, 23, 42, .14);
    --pb-ring: 0 0 0 3px rgba(26, 86, 219, .25);
    /* Bootstrap bridge: its components read these */
    --bs-primary: var(--pb-brand);
    --bs-primary-rgb: 26, 86, 219;
    --bs-link-color: var(--pb-brand);
    --bs-link-color-rgb: 26, 86, 219;
    --bs-body-font-family: var(--pb-font);
    --bs-border-radius: var(--pb-radius);
}

/* 2. Base ------------------------------------------------------------------ */
body { font-family: var(--pb-font); color: var(--pb-text); background-color: var(--pb-canvas); }
.text-end, td.text-end, th.text-end, .pb-num, .font-monospace { font-variant-numeric: tabular-nums; }
:focus-visible { outline: none; box-shadow: var(--pb-ring); border-radius: 4px; }
.form-control:focus, .form-select:focus { border-color: var(--pb-brand); box-shadow: var(--pb-ring); }

/* 3. Buttons: primary · secondary · ghost --------------------------------- */
.btn { border-radius: var(--pb-radius); font-weight: 600; }
.btn-primary { background: var(--pb-brand); border-color: var(--pb-brand); }
.btn-primary:hover, .btn-primary:focus { background: var(--pb-brand-ink); border-color: var(--pb-brand-ink); }
.pb-btn-secondary { background: var(--pb-surface); color: var(--pb-ink); border: 1px solid var(--pb-line); }
.pb-btn-secondary:hover { background: var(--pb-canvas); color: var(--pb-ink); }
.pb-btn-ghost { background: transparent; border: 0; color: var(--pb-brand); padding-left: var(--pb-s2); padding-right: var(--pb-s2); }
.pb-btn-ghost:hover { background: var(--pb-brand-soft); color: var(--pb-brand-ink); }
.btn.pb-busy { pointer-events: none; opacity: .75; }
.btn.pb-busy .pb-spin { display: inline-block; width: 1em; height: 1em; margin-right: .4em; vertical-align: -.125em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pb-spin .7s linear infinite; }
@keyframes pb-spin { to { transform: rotate(360deg); } }

/* 4. Page header ----------------------------------------------------------- */
.pb-page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
    gap: var(--pb-s2) var(--pb-s3); margin-bottom: var(--pb-s3); }
.pb-page-header h1, .pb-page-header h2, .pb-page-header h3 { font-size: var(--pb-fs-xl); font-weight: 700; color: var(--pb-ink); margin: 0; }
.pb-page-header .pb-crumbs { font-size: var(--pb-fs-xs); color: var(--pb-muted); margin-bottom: 2px; }
.pb-page-header .pb-crumbs a { color: var(--pb-muted); text-decoration: none; }
.pb-page-header .pb-crumbs a:hover { color: var(--pb-brand); }
.pb-page-header .pb-sub { font-size: var(--pb-fs-sm); color: var(--pb-muted); }
.pb-status { display: inline-flex; align-items: center; gap: 4px; font-size: var(--pb-fs-xs); font-weight: 700;
    padding: 2px 8px; border-radius: 999px; background: var(--pb-brand-soft); color: var(--pb-brand-ink); vertical-align: middle; }
.pb-status.ok { background: var(--pb-success-soft); color: var(--pb-success); }
.pb-status.warn { background: var(--pb-warning-soft); color: var(--pb-warning); }
.pb-status.bad { background: var(--pb-danger-soft); color: var(--pb-danger); }

/* 5. Table ----------------------------------------------------------------- */
.table { --bs-table-hover-bg: var(--pb-brand-soft); color: var(--pb-text); }
.table > thead > tr > th, .table > thead.table-light > tr > th { font-size: var(--pb-fs-xs); font-weight: 700; color: var(--pb-muted);
    text-transform: none; letter-spacing: .01em; border-bottom: 1px solid var(--pb-line); background: var(--pb-canvas); }
.table td { border-color: var(--pb-line); }
.table a.pb-drill { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--pb-muted); }
.table a.pb-drill:hover { color: var(--pb-brand); border-bottom-color: var(--pb-brand); }
.table .table-secondary, .table tr.pb-total { font-weight: 700; }

/* 6. Form ------------------------------------------------------------------ */
.form-label { font-weight: 600; color: var(--pb-ink); font-size: var(--pb-fs-sm); margin-bottom: var(--pb-s1); }
.form-control, .form-select { border-radius: var(--pb-radius); border-color: #cbd5e1; }
.form-text { color: var(--pb-muted); }
.pb-required::after { content: " *"; color: var(--pb-danger); }

/* 7. Feedback: toasts (with Undo), inline errors ------------------------- */
#pb-toast-container .pb-toast-undo { margin-left: var(--pb-s2); font-weight: 700; color: #fff; background: transparent;
    border: 1px solid rgba(255, 255, 255, .6); border-radius: 6px; padding: 2px 10px; cursor: pointer; }
.pb-snack { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2100; display: flex; align-items: center;
    gap: var(--pb-s3); background: var(--pb-ink); color: #fff; padding: 10px 16px; border-radius: var(--pb-radius);
    box-shadow: var(--pb-shadow-2); font-size: var(--pb-fs-sm); max-width: min(92vw, 560px); }
.pb-snack.ok::before { content: "✓"; color: #34d399; font-weight: 800; }
.pb-snack.bad { background: var(--pb-danger); }
.pb-snack button { background: transparent; border: 0; color: #93c5fd; font-weight: 700; padding: 0; cursor: pointer; }
.pb-snack button:hover { text-decoration: underline; }

/* 8. States: empty · loading · error -------------------------------------- */
.pb-empty { text-align: center; padding: var(--pb-s6) var(--pb-s3); color: var(--pb-muted); }
.pb-empty .pb-empty-icon { font-size: 2rem; color: #cbd5e1; margin-bottom: var(--pb-s2); }
.pb-empty .pb-empty-title { font-weight: 700; color: var(--pb-ink); margin-bottom: var(--pb-s1); }
.pb-skeleton { display: block; height: 14px; border-radius: 6px; margin: 6px 0;
    background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 37%, #eef2f7 63%); background-size: 400% 100%; animation: pb-shimmer 1.2s ease infinite; }
@keyframes pb-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.pb-error-box { border: 1px solid #fecaca; background: var(--pb-danger-soft); color: var(--pb-danger); border-radius: var(--pb-radius); padding: var(--pb-s3); }

/* 9. Global chrome: + New, À valider, command palette -------------------- */
.pb-new-btn { background: #fff !important; color: var(--pb-brand-ink) !important; font-weight: 800 !important; }
.pb-new-menu { min-width: 250px; padding: var(--pb-s1) 0; }
.pb-new-menu .dropdown-header { font-size: var(--pb-fs-xs); text-transform: uppercase; letter-spacing: .04em; }
.pb-new-menu .dropdown-item { display: flex; align-items: center; gap: var(--pb-s2); font-size: var(--pb-fs-sm); }
.pb-new-menu .dropdown-item i { width: 18px; text-align: center; color: var(--pb-muted); }
.pb-av-pill .pb-av-count { background: #f59e0b; color: #111827; font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
#pb-cmdk { position: fixed; inset: 0; z-index: 2200; background: rgba(15, 23, 42, .45); display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; }
#pb-cmdk.open { display: flex; }
#pb-cmdk .pb-cmdk-box { width: min(640px, 94vw); background: var(--pb-surface); border-radius: var(--pb-radius-lg); box-shadow: var(--pb-shadow-2); overflow: hidden; }
#pb-cmdk input { width: 100%; border: 0; border-bottom: 1px solid var(--pb-line); padding: 16px 18px; font-size: 1.05rem; outline: none; }
#pb-cmdk .pb-cmdk-list { max-height: 56vh; overflow-y: auto; padding: var(--pb-s1) 0; }
#pb-cmdk .pb-cmdk-group { font-size: var(--pb-fs-xs); font-weight: 700; color: var(--pb-muted); padding: 8px 18px 4px; text-transform: uppercase; letter-spacing: .04em; }
#pb-cmdk .pb-cmdk-item { display: flex; align-items: center; gap: 10px; padding: 8px 18px; cursor: pointer; color: var(--pb-ink); text-decoration: none; }
#pb-cmdk .pb-cmdk-item small { color: var(--pb-muted); margin-left: auto; font-size: var(--pb-fs-xs); }
#pb-cmdk .pb-cmdk-item.active, #pb-cmdk .pb-cmdk-item:hover { background: var(--pb-brand-soft); }
#pb-cmdk .pb-cmdk-foot { border-top: 1px solid var(--pb-line); padding: 8px 18px; font-size: var(--pb-fs-xs); color: var(--pb-muted); display: flex; gap: var(--pb-s3); }
#pb-cmdk kbd, .pb-kbd { font-family: var(--pb-font-mono); font-size: 11px; background: var(--pb-canvas); border: 1px solid var(--pb-line);
    border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--pb-text); }

/* 10. Daily inbox: À valider ---------------------------------------------- */
.pb-av-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--pb-s3); align-items: center;
    padding: var(--pb-s3); border-bottom: 1px solid var(--pb-line); }
.pb-av-row:last-child { border-bottom: 0; }
.pb-av-row .pb-av-amount { font-weight: 800; color: var(--pb-ink); font-variant-numeric: tabular-nums; }
.pb-av-row .pb-av-amount.in { color: var(--pb-success); }
.pb-av-suggest { background: var(--pb-canvas); border: 1px dashed #cbd5e1; border-radius: var(--pb-radius); padding: var(--pb-s2) var(--pb-s3); }
.pb-av-suggest.strong { border-style: solid; border-color: #a7f3d0; background: var(--pb-success-soft); }
.pb-av-drop { border: 2px dashed #cbd5e1; border-radius: var(--pb-radius-lg); padding: var(--pb-s4); text-align: center; color: var(--pb-muted); background: var(--pb-surface); }
.pb-av-drop.drag { border-color: var(--pb-brand); background: var(--pb-brand-soft); }
.pb-av-done { opacity: .45; transition: opacity .3s; }

/* 11. Dashboard: quiet cards ---------------------------------------------- */
.pb-kpi { background: var(--pb-surface); border: 1px solid var(--pb-line); border-radius: var(--pb-radius-lg); padding: var(--pb-s3) var(--pb-s4);
    height: 100%; color: inherit; text-decoration: none; display: block; transition: box-shadow .15s; }
a.pb-kpi:hover { box-shadow: var(--pb-shadow-1); color: inherit; }
.pb-kpi .pb-kpi-label { font-size: var(--pb-fs-sm); color: var(--pb-muted); font-weight: 600; }
.pb-kpi .pb-kpi-value { font-size: var(--pb-fs-2xl); font-weight: 800; color: var(--pb-ink); font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: var(--pb-s1); }
.pb-kpi .pb-kpi-sub { font-size: var(--pb-fs-xs); color: var(--pb-muted); margin-top: var(--pb-s1); }
.pb-kpi .pb-kpi-value.neg { color: var(--pb-danger); }
.pb-todo li { padding: 6px 0; border-bottom: 1px solid var(--pb-line); font-size: var(--pb-fs-sm); display: flex; justify-content: space-between; gap: var(--pb-s2); }
.pb-todo li:last-child { border-bottom: 0; }

/* 12. Inline edit ---------------------------------------------------------- */
[data-pb-inline] { cursor: text; border-bottom: 1px dashed transparent; }
[data-pb-inline]:hover { border-bottom-color: #94a3b8; background: var(--pb-brand-soft); }
[data-pb-inline] input.pb-inline-input { width: 100%; min-width: 8rem; font: inherit; padding: 2px 6px; border: 1px solid var(--pb-brand); border-radius: 6px; box-shadow: var(--pb-ring); }
[data-pb-inline].pb-saving { opacity: .55; }

/* 13. Official print: SYSCOHADA statements ready to file ----------------- */
.pb-print-only { display: none; }
@media print {
    @page { size: A4 portrait; margin: 12mm 10mm; }
    .pb-print-only { display: block; }
    .pb-topbar, .pb-navrow, footer, .print-hide, #pb-toast-container, #pb-task-panel, .pb-hdr-tools, .pb-tools-dd { display: none !important; }
    body { background: #fff !important; font-size: 10pt; }
    .pb-official-ident { border: 1px solid #000; padding: 6px 8px; margin-bottom: 8px; font-size: 9pt; }
    .pb-official-ident td { padding: 1px 6px; }
    .pb-official-page { break-before: page; }
    .table { font-size: 9pt; }
    .table > thead > tr > th { background: #fff !important; color: #000 !important; border-bottom: 1px solid #000 !important; }
    .table-dark, .table-dark td { background: #fff !important; color: #000 !important; border-top: 2px solid #000 !important; }
    .collapse:not(.show) { display: none !important; }
}

/* 14. Phone (≤ 576 px) ----------------------------------------------------- */
@media (max-width: 576px) {
    .pb-page-header { flex-direction: column; align-items: stretch; }
    .pb-av-row { grid-template-columns: 1fr; }
    .pb-kpi .pb-kpi-value { font-size: var(--pb-fs-xl); }
    .form-control, .form-select { font-size: 16px; } /* no iOS zoom on focus */
    .btn-sm { min-height: 40px; min-width: 40px; }
}