/* ============================================================
   CASA ERP — Feuille de style
   Direction : "Lagune & Laiton" — teal profond + laiton chaud
   sur fond sable. Autonome (aucune police externe / CSP strict).
   ============================================================ */
:root{
  --ink:#1b2a2a; --ink-soft:#4a5a58; --muted:#8a938f;
  --petrol:#0e3b3c; --petrol-2:#14504f; --petrol-line:#215b5a;
  --sand:#faf7f1; --surface:#ffffff; --surface-2:#f4efe6;
  --line:#e7e0d3; --line-2:#d8cfbe;
  --brass:#b1802a; --brass-2:#caa04a; --brass-soft:#f3e9d3;
  --ok:#2f7d5b; --ok-soft:#e3f2ea;
  --info:#2b6390; --info-soft:#e2edf5;
  --warn:#b5811b; --warn-soft:#f8eed4;
  --danger:#b0402c; --danger-soft:#f6e4de;
  --grey-soft:#eceae4;
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(20,40,40,.04),0 8px 24px -12px rgba(20,40,40,.14);
  --shadow-lg:0 24px 60px -24px rgba(14,59,60,.35);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--sand);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--petrol-2); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .4em; line-height:1.2; font-weight:650}
h1{font-family:var(--serif); font-weight:600; letter-spacing:-.01em}
:focus-visible{outline:2.5px solid var(--brass); outline-offset:2px; border-radius:4px}

/* ---------- Layout : coquille ---------- */
.shell{display:flex; min-height:100vh}
.sidebar{
  width:250px; flex:0 0 250px; background:linear-gradient(180deg,var(--petrol),#0b2f30);
  color:#dfeae8; position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
}
.brand{padding:22px 22px 16px; border-bottom:1px solid var(--petrol-line)}
.brand .mark{font-family:var(--serif); font-size:23px; letter-spacing:.14em; color:#fff; font-weight:600}
.brand .sub{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass-2); margin-top:3px}
.nav{padding:12px 12px; overflow-y:auto; flex:1}
.nav .group{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#7fa09d; margin:16px 12px 6px}
.nav a{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--radius-sm);
  color:#cadedb; font-size:14px; margin:2px 0; transition:background .12s,color .12s;
}
.nav a:hover{background:rgba(255,255,255,.06); text-decoration:none; color:#fff}
.nav a.active{background:var(--brass); color:#241a06; font-weight:600}
.nav a.active .ic{opacity:1}
.nav .ic{width:18px; text-align:center; opacity:.8; font-style:normal}
.sidebar .foot{padding:14px 18px; border-top:1px solid var(--petrol-line); font-size:12px; color:#8fb0ad}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 28px; background:rgba(250,247,241,.86); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}
.topbar .crumb{font-size:13px; color:var(--muted)}
.topbar .crumb b{color:var(--ink); font-weight:600}
.userchip{display:flex; align-items:center; gap:10px; font-size:13px}
.userchip .av{width:34px; height:34px; border-radius:50%; background:var(--petrol);
  color:#fff; display:grid; place-items:center; font-weight:600; font-size:13px}
.userchip .role{color:var(--muted); font-size:11.5px; text-transform:capitalize}
.content{padding:26px 28px 60px; max-width:1240px; width:100%; margin:0 auto}

.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap}
.page-head h1{font-size:27px; margin:0}
.page-head .lead{color:var(--muted); font-size:14px; margin-top:2px}

/* ---------- Boutons ---------- */
.btn{display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:var(--radius-sm);
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font-size:14px;
  font-weight:550; cursor:pointer; transition:.13s; font-family:inherit; text-decoration:none}
.btn:hover{border-color:var(--brass); text-decoration:none; box-shadow:var(--shadow)}
.btn-primary{background:var(--brass); border-color:var(--brass); color:#241a06}
.btn-primary:hover{background:#9c6f22; border-color:#9c6f22}
.btn-dark{background:var(--petrol); border-color:var(--petrol); color:#fff}
.btn-dark:hover{background:var(--petrol-2); border-color:var(--petrol-2)}
.btn-ghost{background:transparent; border-color:transparent}
.btn-sm{padding:6px 11px; font-size:13px}
.btn-danger{color:var(--danger); border-color:var(--danger-soft)}
.btn-danger:hover{background:var(--danger); color:#fff; border-color:var(--danger)}
.btn-block{width:100%; justify-content:center}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---------- Cartes ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card .card-h{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px}
.card .card-h h3{margin:0; font-size:15px; font-weight:650}
.card .card-b{padding:20px}
.grid{display:grid; gap:18px}
.g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.g-4{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:1fr}}
@media(max-width:720px){.g-2,.g-4{grid-template-columns:1fr}}

/* ---------- KPI ---------- */
.kpi{position:relative; overflow:hidden}
.kpi::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--brass),var(--brass-2))}
.kpi .lab{font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.kpi .val{font-family:var(--serif); font-size:30px; font-weight:600; margin-top:6px; color:var(--ink); letter-spacing:-.01em}
.kpi .val.sm{font-size:24px}
.kpi .hint{font-size:12.5px; color:var(--muted); margin-top:5px}
.kpi.accent::before{background:linear-gradient(90deg,var(--petrol),var(--petrol-2))}
.kpi.ok::before{background:var(--ok)} .kpi.danger::before{background:var(--danger)}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto}
table.tbl{width:100%; border-collapse:collapse; font-size:14px}
table.tbl th{text-align:left; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding:11px 14px; border-bottom:1px solid var(--line-2)}
table.tbl td{padding:12px 14px; border-bottom:1px solid var(--line)}
table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl tr:last-child td{border-bottom:none}
.tbl .num{text-align:right; font-variant-numeric:tabular-nums}
.tbl .tny{font-size:12.5px; color:var(--muted)}

/* ---------- Badges ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:100px;
  font-size:12px; font-weight:600; line-height:1.6}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85}
.badge.ok{background:var(--ok-soft); color:var(--ok)}
.badge.info{background:var(--info-soft); color:var(--info)}
.badge.warn{background:var(--warn-soft); color:var(--warn)}
.badge.danger{background:var(--danger-soft); color:var(--danger)}
.badge.muted{background:var(--grey-soft); color:var(--ink-soft)}

/* ---------- Formulaires ---------- */
.field{margin-bottom:15px}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--ink-soft)}
.field .req{color:var(--danger)}
input,select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--radius-sm);
  font-family:inherit; font-size:14px; background:var(--surface); color:var(--ink); transition:.12s}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-soft)}
textarea{resize:vertical; min-height:70px}
.form-row{display:grid; gap:15px}
.fr-2{grid-template-columns:1fr 1fr} .fr-3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:640px){.fr-2,.fr-3{grid-template-columns:1fr}}
.help{font-size:12px; color:var(--muted); margin-top:5px}
.hint-box{background:var(--info-soft); border:1px solid #cfe0ec; color:#25506f; padding:12px 15px;
  border-radius:var(--radius-sm); font-size:13px; margin-bottom:16px}
.hint-box.warn{background:var(--warn-soft); border-color:#e6d3a0; color:#7a5a12}

/* ---------- Flash ---------- */
.flash-wrap{position:fixed; top:16px; right:16px; z-index:100; display:flex; flex-direction:column; gap:10px; max-width:360px}
.flash{padding:13px 16px; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); font-size:14px;
  display:flex; gap:10px; align-items:flex-start; background:#fff; border-left:4px solid var(--muted); animation:slidein .25s ease}
.flash.success{border-color:var(--ok)} .flash.error{border-color:var(--danger)} .flash.info{border-color:var(--info)}
@keyframes slidein{from{opacity:0; transform:translateX(16px)}to{opacity:1}}

/* ---------- Divers ---------- */
.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:18px}
.toolbar .spacer{flex:1}
.pills{display:flex; gap:6px; flex-wrap:wrap}
.pill{padding:6px 12px; border-radius:100px; font-size:13px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink-soft)}
.pill.active{background:var(--petrol); color:#fff; border-color:var(--petrol)}
.empty{text-align:center; padding:48px 20px; color:var(--muted)}
.empty .big{font-size:34px; margin-bottom:8px}
.stat-line{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--line); font-size:14px}
.stat-line:last-child{border-bottom:none}
.stat-line b{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:13px} .center{text-align:center}
.mt{margin-top:18px} .mb{margin-bottom:18px}
.split{display:grid; grid-template-columns:2fr 1fr; gap:18px}
@media(max-width:900px){.split{grid-template-columns:1fr}}
hr.sep{border:none; border-top:1px solid var(--line); margin:20px 0}

/* Barre d'occupation (signature) */
.occbar{display:flex; gap:3px; margin-top:10px}
.occbar span{height:24px; flex:1; border-radius:3px; background:var(--grey-soft)}
.occbar span.on{background:var(--petrol)}
.occbar span.clean{background:var(--warn-soft); border:1px solid var(--warn)}
.occbar span.maint{background:var(--line-2)}

/* Mini graphe barres */
.spark{display:flex; align-items:flex-end; gap:6px; height:70px; margin-top:8px}
.spark .bar{flex:1; background:linear-gradient(180deg,var(--brass-2),var(--brass)); border-radius:4px 4px 0 0; min-height:3px; position:relative}
.spark .bar:hover{filter:brightness(1.08)}
.spark-lab{display:flex; gap:6px; margin-top:6px}
.spark-lab span{flex:1; text-align:center; font-size:10px; color:var(--muted)}

/* Menu hamburger mobile */
.hamb{display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink)}
@media(max-width:860px){
  .sidebar{position:fixed; left:-260px; z-index:60; transition:left .22s; box-shadow:var(--shadow-lg)}
  .sidebar.open{left:0}
  .hamb{display:block}
  .backdrop{display:none; position:fixed; inset:0; background:rgba(10,30,30,.4); z-index:55}
  .backdrop.show{display:block}
}