/* ---------- Tokens ---------- */
:root{
  --paper:#eceff1; --surface:#ffffff; --ink:#0f1b2d; --muted:#5d6b7a; --line:#d5dbe1;
  --side:#ffffff; --side-ink:#3b4a5c; --side-active:#e6eef7;
  --mad:#0b7a5a; --mad-soft:#dcf1ea; --eur:#2f4fd8; --eur-soft:#e0e6fb;
  --ok:#157347; --ok-soft:#dcf1e4; --warn:#9a6700; --warn-soft:#fbefd0; --danger:#b42318; --danger-soft:#fbe0dd;
  --btn:#0f1b2d; --btn-ink:#ffffff;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0b121c; --surface:#131c29; --ink:#e8edf3; --muted:#92a0b0; --line:#25313f;
    --side:#070c13; --side-ink:#c4cfdb; --side-active:#16212f;
    --mad:#3fcf9f; --mad-soft:#12332a; --eur:#8fa6ff; --eur-soft:#1a2347;
    --ok:#4cd08a; --ok-soft:#12331f; --warn:#e7b24a; --warn-soft:#382b0e; --danger:#ff8a80; --danger-soft:#3b1714;
    --btn:#e8edf3; --btn-ink:#0b121c;
  }
}
:root[data-theme="dark"]{
  --paper:#0b121c; --surface:#131c29; --ink:#e8edf3; --muted:#92a0b0; --line:#25313f;
  --side:#070c13; --side-ink:#c4cfdb; --side-active:#16212f;
  --mad:#3fcf9f; --mad-soft:#12332a; --eur:#8fa6ff; --eur-soft:#1a2347;
  --ok:#4cd08a; --ok-soft:#12331f; --warn:#e7b24a; --warn-soft:#382b0e; --danger:#ff8a80; --danger-soft:#3b1714;
  --btn:#e8edf3; --btn-ink:#0b121c;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-variant-numeric:tabular-nums}
h1,h2,h3,h4,p{margin:0}

/* ---------- Layout (Client-First) ---------- */
.page-wrapper{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.main-wrapper{padding:32px 40px 72px;min-width:0}
.container-large{max-width:1240px;margin:0 auto}

/* Sidebar */
.sidebar_component{border-right:1px solid var(--line);background:var(--side);color:var(--side-ink);padding:24px 14px;display:flex;flex-direction:column;gap:20px;position:sticky;top:0;height:100vh;overflow:auto}
.sidebar_brand{padding:4px 10px 0}
.brand_logo{display:block;width:100%;max-width:190px;height:auto}
.brand_logo.is-dark{display:none}
:root[data-theme="dark"] .brand_logo.is-light{display:none}
:root[data-theme="dark"] .brand_logo.is-dark{display:block}
.sidebar_theme{margin:0 10px}
.sidebar_nav{display:flex;flex-direction:column;gap:2px}
.sidebar_link{all:unset;box-sizing:border-box;cursor:pointer;padding:9px 12px;border-radius:8px;font-size:14.5px;display:flex;align-items:center;gap:10px}
.sidebar_link:hover{background:var(--side-active)}
.sidebar_link.is-active{background:var(--side-active);color:var(--ink);font-weight:600}
.sidebar_link:focus-visible{outline:2px solid #8fa6ff;outline-offset:1px}
.sidebar_dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.45}
.sidebar_link.is-active .sidebar_dot{opacity:1}
.sidebar_theme{margin-top:auto}
.sidebar_foot{font-size:12.5px;opacity:.65;padding:0 10px}

/* Page header */
.page-header_component{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.heading-style-h1{font:700 32px/1.1 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.page-header_actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar_component{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}

/* Cards / stats */
.card_component{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px}
.card_component.is-flush{padding:0;overflow:hidden}
.card_title{font:600 16px/1.2 'Bricolage Grotesque',sans-serif;margin-bottom:12px}
.stat_grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.stat_item{padding:12px 0 0;border-top:1px solid var(--line)}
.stat_label{font-size:13px;color:var(--muted)}
.stat_value{font-size:22px;font-weight:600;letter-spacing:-.01em;margin-top:2px}
.stat_value.is-neg{color:var(--danger)}
.ledger_grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.ledger_component{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 22px;border-left:6px solid var(--cur)}
.ledger_component.is-mad{--cur:var(--mad)}
.ledger_component.is-eur{--cur:var(--eur)}
.ledger_head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.ledger_name{font:700 20px/1 'Bricolage Grotesque',sans-serif;color:var(--cur)}
.ledger_balance{font:700 34px/1.1 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;margin:4px 0 14px}

/* Tables */
.table_wrap{overflow-x:auto}
.table_component{width:100%;border-collapse:collapse;font-size:14px}
.table_component th{text-align:left;font-weight:500;font-size:13px;color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.table_component td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.table_component tr:last-child td{border-bottom:0}
.table_component .is-num{text-align:right;white-space:nowrap}
.table_component .is-actions{text-align:right;white-space:nowrap}
.table_component.is-form td{padding:6px 6px}
.table_component.is-form th{padding:6px}
.table_component.is-form{min-width:780px}
.table_empty{padding:36px 20px;text-align:center;color:var(--muted)}
.text-muted{color:var(--muted)}
.text-size-small{font-size:13px}

/* Badges */
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12.5px;font-weight:500;background:var(--line);color:var(--ink)}
.badge.is-ok{background:var(--ok-soft);color:var(--ok)}
.badge.is-warn{background:var(--warn-soft);color:var(--warn)}
.badge.is-danger{background:var(--danger-soft);color:var(--danger)}
.badge.is-mad{background:var(--mad-soft);color:var(--mad)}
.badge.is-eur{background:var(--eur-soft);color:var(--eur)}

/* Buttons */
.button{font:inherit;font-weight:500;padding:8px 15px;border-radius:8px;border:1px solid var(--btn);background:var(--btn);color:var(--btn-ink);cursor:pointer;line-height:1.3}
.button:hover{opacity:.88}
.button:focus-visible,.form_input:focus-visible{outline:2px solid var(--eur);outline-offset:1px}
.button.is-secondary{background:transparent;color:var(--ink);border-color:var(--line)}
.button.is-secondary:hover{background:var(--paper);opacity:1}
.button.is-small{padding:4px 10px;font-size:13px}
.button.is-danger{background:transparent;color:var(--danger);border-color:var(--line)}
.button.is-mad{background:var(--mad);border-color:var(--mad);color:#fff}
.button.is-eur{background:var(--eur);border-color:var(--eur);color:#fff}

/* Forms */
.form_input{font:inherit;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);min-width:0}
.form_input.is-num{text-align:right}
.form_input.is-search{max-width:280px}
.form_input.is-auto{width:auto}
textarea.form_input{resize:vertical}
.form_component{display:flex;flex-direction:column;gap:14px}
.form_grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form_grid.is-4{grid-template-columns:2fr 1fr 1fr 1fr}
.form_grid.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form_field{display:flex;flex-direction:column;gap:4px}
.form_field.is-full{grid-column:1/-1}
.form_label{font-size:13px;color:var(--muted)}
.form_check{display:flex;gap:8px;align-items:center}
.form_actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}

/* Totaux facture */
.totals_component{margin-left:auto;width:min(340px,100%);display:flex;flex-direction:column;gap:6px}
.totals_component>div{display:flex;justify-content:space-between}
.totals_component .is-total{border-top:1px solid var(--line);padding-top:8px;font-size:18px;font-weight:600}

/* Modal */
.modal_component{border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);padding:0;width:min(580px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:hidden}
.modal_component[open]{display:flex;flex-direction:column}
.modal_component.is-wide{width:min(1000px,calc(100% - 24px))}
.modal_component::backdrop{background:rgba(7,12,19,.6)}
.modal_header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal_title{font:700 19px/1.2 'Bricolage Grotesque',sans-serif}
.modal_body{padding:20px;overflow:auto}
.confirm_component{border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:20px;width:min(380px,calc(100% - 24px))}
.confirm_component::backdrop{background:rgba(7,12,19,.6)}
.confirm_component form{display:flex;flex-direction:column;gap:16px}

/* Toast */
.toast_component{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;z-index:99;max-width:calc(100% - 24px)}
.toast_component.is-visible{opacity:1;transform:translate(-50%,0)}

/* Facture imprimable (toujours clair) */
.pay_list{margin-top:18px}
.pay_row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}

@media (max-width:900px){
  .page-wrapper{grid-template-columns:1fr}
  .sidebar_component{position:static;height:auto;flex-direction:column;padding:14px}
  .sidebar_nav{flex-direction:row;overflow-x:auto;gap:4px}
  .sidebar_link{white-space:nowrap}
  .sidebar_foot,.sidebar_brand-sub{display:none}
  .main-wrapper{padding:20px 16px 56px}
  .ledger_grid{grid-template-columns:1fr}
  .form_grid,.form_grid.is-4,.form_grid.is-3{grid-template-columns:1fr}
}

.sidebar_logout{margin:0 10px;text-align:center;text-decoration:none;display:block}
.login_wrapper{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,rgba(8,45,100,.9),rgba(20,110,190,.7)),url('login-bg.webp') center/cover no-repeat}
:root[data-theme="dark"] .login_wrapper{background:linear-gradient(135deg,rgba(4,16,40,.92),rgba(10,60,120,.75)),url('login-bg.webp') center/cover no-repeat}
.login_component{width:min(380px,100%);display:flex;flex-direction:column;gap:16px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.qr_box{background:#fff;padding:12px;border-radius:10px;width:fit-content;margin:0 auto;line-height:0}
.recovery_list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-weight:600;letter-spacing:.04em}
.recovery_list span{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px 10px;text-align:center}

.table_component tr.is-clickable{cursor:pointer}
.table_component tr.is-clickable:hover td{background:var(--paper)}
.badge.is-action{border:0;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer}
.badge.is-action:hover{filter:brightness(.92)}

.table_link{color:#000;font-weight:600;text-decoration:none}
.table_link:hover{text-decoration:underline}
:root[data-theme="dark"] .table_link{color:#fff}

/* ===== Facture A4 ===== */
.invoice_scroll{overflow-x:auto}
.invoice_a4{--inv-blue:#3a99d8;--inv-navy:#0b3a66;--inv-line:#b9b9b9;
  width:210mm;min-height:296mm;margin:0 auto;padding:10mm 12mm;background:#fff;color:#111;
  font:12px/1.35 'Instrument Sans',system-ui,sans-serif;display:flex;flex-direction:column;gap:6mm;
  box-shadow:0 0 0 1px #d5dbe1;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.invoice_a4 *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.invoice_head{display:grid;grid-template-columns:55% 45%;align-items:start}
.invoice_head-left{display:flex;flex-direction:column;gap:4mm;padding-right:6mm}
.invoice_logo-band{background:#e6e6e6;padding:5mm 4mm 3mm;margin-right:-6mm}
.invoice_logo-band img{display:block;width:100%;max-width:340px;height:auto}
.invoice_company{white-space:pre-line;color:#222;line-height:1.3}
.invoice_head-right{border:1px solid var(--inv-line);border-radius:6px;overflow:hidden}
.invoice_title{background:var(--inv-blue);color:#fff;font:700 40px/1 'Bricolage Grotesque',sans-serif;text-align:center;padding:16mm 0 1.5mm}
.invoice_meta{width:100%;border-collapse:collapse;table-layout:fixed}
.invoice_meta th{background:#d6eaf8;color:var(--inv-navy);font-weight:700;font-size:11px;white-space:nowrap;padding:2px 4px;border:1px solid var(--inv-line);border-top:0}
.invoice_meta th:nth-child(1),.invoice_meta th:nth-child(2){width:29%}
.invoice_meta th:nth-child(3){width:42%}
.invoice_meta td{text-align:center;white-space:nowrap;font-size:11px;padding:4px;border:1px solid var(--inv-line);border-top:0;border-bottom:0}
.invoice_meta td:first-child{border-left:0}.invoice_meta td:last-child{border-right:0;font-weight:700}
.invoice_meta th:first-child{border-left:0}.invoice_meta th:last-child{border-right:0}
.invoice_client{padding:3mm 5mm 4mm;border-top:1px solid var(--inv-line)}
.invoice_client-name{font:700 15px/1.3 'Instrument Sans',sans-serif;color:var(--inv-navy);margin-bottom:2px}
.invoice_client-lines{white-space:pre-line}
.invoice_items{flex:1;display:flex;flex-direction:column;min-height:0;border:1px solid #9a9a9a;border-radius:4px;overflow:hidden;
  background:linear-gradient(#b5b5b5,#b5b5b5) 15% 0/1px 100% no-repeat,linear-gradient(#b5b5b5,#b5b5b5) 55% 0/1px 100% no-repeat,linear-gradient(#b5b5b5,#b5b5b5) 62% 0/1px 100% no-repeat,linear-gradient(#b5b5b5,#b5b5b5) 79% 0/1px 100% no-repeat}
.invoice_table{width:100%;flex:none;border-collapse:collapse;table-layout:fixed}
.invoice_table th{background:var(--inv-blue);color:#fff;font-weight:700;padding:2px 6px;white-space:nowrap;text-align:left;border-left:1px solid rgba(255,255,255,.4)}
.invoice_table th:first-child{border-left:0}
.invoice_table td{padding:3px 7px;border-bottom:1px solid #ececec;vertical-align:top;word-wrap:break-word}
.invoice_table .is-num{text-align:right}
.invoice_table tr.invoice_spacer td{height:14px;padding:0}
.invoice_product{font-weight:700}
.invoice_ref{white-space:nowrap}
.invoice_table th:nth-child(3),.invoice_table td:nth-child(3){padding-left:3px;padding-right:6px}
.invoice_table tr.invoice_cont td{border-bottom:0;padding-bottom:1px}
.invoice_table tr.invoice_cont + tr td{padding-top:1px}
.invoice_after{margin-top:auto;padding:6px 7px 6px calc(15% + 7px)}
.invoice_notes{white-space:pre-line;font-size:10.5px;color:#333;margin-bottom:6px}
.invoice_thanks{color:var(--inv-navy);font-weight:700}
.invoice_foot-grid{display:grid;grid-template-columns:55% 45%}
.invoice_bank{border:1px solid var(--inv-line);border-right:0;border-bottom:0;padding:2mm 3mm;font-size:9.5px;line-height:1.3;white-space:pre-line}
.invoice_totals{margin:0;background:var(--inv-blue);color:#fff;padding:3mm 5mm;display:grid;grid-template-columns:1fr auto;gap:3px 12px;align-items:baseline;border-top-left-radius:4px}
.invoice_totals dt{text-align:right;font-weight:700;font-size:10.5px;margin:0;white-space:nowrap}
.invoice_totals dd{text-align:right;margin:0;font-weight:300;font-size:13px}
.invoice_totals .is-big{font-size:15px;margin-top:5px}
.invoice_totals dd.is-big{font-weight:700}
.invoice_totals .is-huge{font-size:15px;margin-top:5px}
.invoice_totals dd.is-huge{font-weight:700;font-size:16px;white-space:nowrap}
.invoice_bar{background:var(--inv-blue);color:#fff;font-weight:700;font-size:10px;padding:2mm 3mm;border-radius:0 0 6px 6px}

@page{size:A4;margin:0}
@media print{
  html,body{background:#fff}
  .page-wrapper,.toast_component,.modal_header,.pay_list,.modal_body .form_actions{display:none!important}
  dialog.modal_component[open]{position:absolute;left:0;top:0;width:auto;max-width:none;max-height:none;overflow:visible;border:0;box-shadow:none;background:#fff;margin:0;padding:0;display:block}
  .modal_body{padding:0;overflow:visible}
  .invoice_scroll{overflow:visible}
  .invoice_a4{box-shadow:none;margin:0}
}
.badge.is-proforma{background:#ede7f6;color:#5e35b1}
:root[data-theme="dark"] .badge.is-proforma{background:#2a2147;color:#b8a4f5}