:root{
  --bg:#f4f5f7; --card:#fff; --ink:#1f2430; --muted:#6b7280; --line:#e5e7eb;
  --primary:#2563eb; --primary-d:#1d4ed8; --green:#059669; --red:#dc2626; --amber:#d97706;
  --radius:10px;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* Topbar */
.topbar{display:flex;align-items:center;gap:18px;background:#111827;color:#fff;padding:10px 20px;flex-wrap:wrap}
.topbar .brand{color:#fff;font-weight:700;font-size:18px}
.topbar nav{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.topbar nav a{color:#cbd5e1;padding:6px 12px;border-radius:7px}
.topbar nav a:hover{background:#1f2937;color:#fff;text-decoration:none}
.topbar .user{display:flex;align-items:center;gap:10px;color:#cbd5e1;font-size:13px}

.container{max-width:1000px;margin:24px auto;padding:0 20px}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap}
h1{font-size:24px;margin:0}
h3{margin:0 0 12px}
.muted{color:var(--muted)}
.small{font-size:12px}
.right{text-align:right}
.nowrap{white-space:nowrap}
.text-red{color:var(--red)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:18px}
.empty{color:var(--muted);text-align:center;padding:36px}

/* Buttons */
.btn{display:inline-block;border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 14px;border-radius:8px;cursor:pointer;font-size:14px;line-height:1.2}
.btn:hover{background:#f3f4f6;text-decoration:none}
.btn-sm{padding:5px 10px;font-size:13px}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-d)}
.btn-success{background:var(--green);border-color:var(--green);color:#fff}
.btn-success:hover{filter:brightness(.95)}
.btn-danger{background:#fff;border-color:#fecaca;color:var(--red)}
.btn-danger:hover{background:#fef2f2}
.btn.block{display:block;width:100%;text-align:center;margin-bottom:8px}
.inline{display:inline}

/* Tables */
.table{width:100%;border-collapse:collapse}
.table th,.table td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.table th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.table tr:last-child td{border-bottom:none}

.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600}
.badge-gray{background:#f3f4f6;color:#4b5563}
.badge-blue{background:#dbeafe;color:#1d4ed8}
.badge-green{background:#d1fae5;color:#047857}
.badge-red{background:#fee2e2;color:#b91c1c}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:4px}

/* Flash */
.flash{padding:11px 14px;border-radius:8px;margin-bottom:14px;font-size:14px}
.flash-success{background:#d1fae5;color:#065f46}
.flash-error{background:#fee2e2;color:#991b1b}

/* Forms */
.form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:flex;flex-direction:column;font-size:13px;color:var(--muted);gap:5px}
.form .span2{grid-column:1 / -1}
.form input,.form select,.form textarea{font:inherit;color:var(--ink);padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;width:100%}
.form input[type=color]{height:42px;padding:3px}
.form-actions{margin-top:18px;display:flex;gap:10px}
.items-table input{border:1px solid var(--line);border-radius:6px;padding:7px 8px;width:100%}
.items-table .w-qty{width:90px}.items-table .w-price{width:130px}.items-table .w-total{width:120px}.items-table .w-mat{width:80px}.items-table .w-img{width:120px}
.items-table .right{text-align:right}
.items-table .center{text-align:center}
.matcheck{width:18px;height:18px}
.img-cell .thumb{display:block;max-width:48px;max-height:48px;border:1px solid var(--line);border-radius:6px;margin-bottom:4px;object-fit:cover}
.img-cell .item-img{font-size:12px;width:100%}
/* Vignettes sur le document imprimable */
.line-img img{max-width:46px;max-height:46px;border:1px solid var(--line);border-radius:6px;object-fit:cover;vertical-align:middle;margin-right:10px;float:left}
.line-desc{overflow:hidden;display:block}
.line-total{font-variant-numeric:tabular-nums}

.totals{margin:16px 0 0;margin-left:auto;width:300px}
.totals>div{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}
.totals .grand{font-size:18px;border-bottom:none;border-top:2px solid var(--ink);margin-top:4px;padding-top:10px}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:6px}
.kpi-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.kpi-val{font-size:22px;font-weight:700}
.kpi-green{border-top:3px solid var(--green)}
.kpi-amber{border-top:3px solid var(--amber)}
.kpi-red{border-top:3px solid var(--red)}
.cols{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.actions-card .btn{margin-bottom:8px}

/* Auth */
.auth-wrap{max-width:380px;margin:60px auto}
.auth-card h1{margin-bottom:14px}
.auth-card form{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.auth-card label{display:flex;flex-direction:column;font-size:13px;color:var(--muted);gap:5px}
.auth-card input{padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit}

/* Document toolbar */
.doc-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.doc-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Document A4 — même rendu à l'écran et au PDF. Le positionnement A4
   (en mm) est injecté en ligne par document_view.php (réglable via config). */
.sheet{background:#fff;border:1px solid var(--line);color:#111;margin:0 auto;position:relative;box-shadow:0 2px 12px rgba(0,0,0,.08);font-size:13px}
.sheet-head{display:flex;justify-content:space-between;gap:24px}
.sheet-head .logo{max-height:15mm;max-width:60mm}
.issuer-name{font-size:18px;font-weight:700;color:var(--accent)}
.issuer-addr{font-size:11px;color:#444;margin-top:5px;line-height:1.35}
.addr-window{line-height:1.4}
.ref-band{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid var(--accent);padding-bottom:8px;margin-bottom:18px}
.ref-band .doc-kind{color:var(--accent);font-size:24px;font-weight:700;letter-spacing:.04em;line-height:1}
.ref-band .doc-number{font-size:15px;font-weight:600;margin-top:4px}
.ref-right{text-align:right;font-size:13px}
.ref-right .place-date{font-weight:600}
.doc-title{font-size:17px;margin:0 0 6px}
.intro{color:#333;margin-bottom:18px}
.lines{width:100%;border-collapse:collapse;margin-bottom:8px}
.lines th{background:#f9fafb;text-align:left;padding:9px 10px;font-size:12px;text-transform:uppercase;color:#555;border-bottom:2px solid var(--line)}
.lines td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.lines .right{text-align:right}
.sheet-totals{display:flex;justify-content:flex-end;margin-top:10px}
.sheet-totals table{width:300px}
.sheet-totals td{padding:6px 4px}
.sheet-totals .grand td{font-size:18px;font-weight:700;border-top:2px solid #111}
.pay-box{margin-top:26px;background:#f9fafb;border:1px solid var(--line);border-radius:8px;padding:16px}
.pay-box table td{padding:3px 10px 3px 0}
.sheet-foot{border-top:1px solid var(--line);padding-top:10px;font-size:12px;color:#444}
.delivery-sign{margin-top:40px}
.delivery-sign .sign-line{border-bottom:1px solid #999;width:280px;margin-top:30px}

@media (max-width:760px){
  .form .grid2,.kpis,.cols{grid-template-columns:1fr}
}

/* Impression A4 — positionnement de l'adresse selon la norme Poste suisse.
   Le bloc adresse destinataire est placé à 50 mm du haut et 20 mm de la gauche
   (visible dans la fenêtre d'une enveloppe C5/C6 à fenêtre gauche). */
@media print{
  @page{size:A4;margin:0}
  body{background:#fff}
  .topbar,.doc-toolbar,.flash,#add-row{display:none !important}
  .container{margin:0;max-width:none;padding:0}
  .sheet{border:none;box-shadow:none}
}