/* Identite visuelle alignee sur le desktop (ui/theme.py) : creme + terracotta,
   sidebar claire, Segoe UI, cartes radius 12, boutons radius 8. */
:root{
  --bg:#FAF6F0; --surface:#FFFFFF; --surface-alt:#F3ECE2;
  --ink:#26201B; --ink2:#7A6E63; --line:#E7DDD1;
  --accent:#C67B4E; --accent-hover:#B0673C;
  --ok:#3E8E5A; --ok-bg:#E7F1EA; --ok-line:#CDE6D6;
  --warn:#B07B18; --warn-bg:#FBF1DD; --warn-line:#EEDDB4;
  --off:#C0392B; --off-bg:#FBE7E5; --off-line:#F0CDC8;
  --neg:#C0392B;
  --brand:var(--accent);           /* alias : les gabarits utilisent --brand */
  --brand-ink:var(--accent-hover);
  --shadow:0 1px 2px rgba(38,32,27,.05),0 4px 16px rgba(38,32,27,.05);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1E1B18; --surface:#2A2622; --surface-alt:#332E29;
    --ink:#F0E9E0; --ink2:#B7A99B; --line:#3B342E;
    --accent:#C67B4E; --accent-hover:#B0673C;
    --ok:#5FB57C; --ok-bg:#1D3326; --ok-line:#2C4A36;
    --warn:#E4B45A; --warn-bg:#3A2E12; --warn-line:#54421C;
    --off:#E06B5E; --off-bg:#3A1E1A; --off-line:#5A2C26;
    --neg:#E06B5E;
    --shadow:0 1px 2px rgba(0,0,0,.28),0 6px 22px rgba(0,0,0,.32);
  }
}
:root[data-theme="dark"]{
  --bg:#1E1B18; --surface:#2A2622; --surface-alt:#332E29;
  --ink:#F0E9E0; --ink2:#B7A99B; --line:#3B342E;
  --accent:#C67B4E; --accent-hover:#B0673C;
  --ok:#5FB57C; --ok-bg:#1D3326; --ok-line:#2C4A36;
  --warn:#E4B45A; --warn-bg:#3A2E12; --warn-line:#54421C;
  --off:#E06B5E; --off-bg:#3A1E1A; --off-line:#5A2C26;
  --neg:#E06B5E;
  --shadow:0 1px 2px rgba(0,0,0,.28),0 6px 22px rgba(0,0,0,.32);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI","Inter",system-ui,sans-serif;font-size:14px;
  line-height:1.5;color:var(--ink);background:var(--bg)}
.app{display:flex;min-height:100vh}

/* Sidebar CLAIRE (desktop : surface + border-right) */
.sidebar{width:230px;flex:0 0 230px;background:var(--surface);
  border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 10px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:16px;
  color:var(--ink);padding:8px 8px 16px}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:8px;background:var(--accent);color:#fff;font-size:12px;font-weight:700}
nav{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;
  color:var(--ink2);text-decoration:none;font-weight:500;margin:2px 0;transition:background .12s,color .12s}
.nav-item:hover{background:var(--bg);color:var(--ink)}
.nav-item.is-active{background:var(--accent);color:#fff}
.nav-ic{font-size:15px;width:20px;text-align:center}
.sidebar-foot{margin-top:auto;font-size:12px;color:var(--ink2);padding:12px 8px 0;border-top:1px solid var(--line)}

/* Contenu */
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--surface);border-bottom:1px solid var(--line);padding:16px 28px}
.topbar h1{margin:0;font-size:20px;font-weight:600;color:var(--ink)}
.topbar-sub{color:var(--ink2);font-size:12px;margin-top:2px}
.tabbar{display:flex;gap:2px;margin-top:12px;margin-bottom:-16px}
.tab{padding:8px 16px;border-radius:8px 8px 0 0;color:var(--ink2);text-decoration:none;
  font-weight:500;font-size:13.5px;border:1px solid transparent;border-bottom:none}
.tab:hover{color:var(--ink);background:var(--surface-alt)}
.tab.is-active{color:var(--accent);background:var(--bg);border-color:var(--line);
  border-bottom:2px solid var(--accent);border-radius:8px 8px 0 0}
.page{padding:30px 28px 44px}
.section-title{font-size:16px;font-weight:600;color:var(--ink);margin:22px 0 12px}
.section-title:first-child{margin-top:0}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.kpi-accent{background:var(--accent);border:none;color:#fff}
.kpi-accent .kpi-label,.kpi-accent .kpi-hint{color:rgba(255,255,255,.9)}
.kpi-label{font-size:12px;color:var(--ink2)}
.kpi-value{font-size:24px;font-weight:600;color:var(--ink);margin:6px 0 3px}
.kpi-accent .kpi-value{color:#fff}
.kpi-hint{font-size:12px;color:var(--ink2)}

/* Cartes + tableaux */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card-head{padding:14px 20px;border-bottom:1px solid var(--line)}
.card-head h2{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:13.5px}
table.data th,table.data td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
table.data th{font-size:12px;color:var(--ink2);font-weight:500;background:var(--surface)}
table.data tbody tr:hover{background:var(--surface-alt)}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
td.strong{font-weight:600}
.row-total td{font-weight:600;background:var(--surface-alt);border-top:2px solid var(--line)}
.num.neg,.neg{color:var(--neg)}
table.data th.sortable{cursor:pointer;user-select:none}
table.data th.sortable:hover{color:var(--ink)}
table.data th[data-dir]{color:var(--accent)}
table.data th[data-dir="asc"]::after{content:" \25B2";font-size:9px}
table.data th[data-dir="desc"]::after{content:" \25BC";font-size:9px}
.table-search{padding:12px 16px;border-bottom:1px solid var(--line)}
.table-search input{width:100%;max-width:300px;padding:6px 10px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:13.5px;background:var(--bg);color:var(--ink)}
.table-search input:focus{outline:none;border-color:var(--accent)}

/* Badges de statut (couleurs desktop success/warning/danger) */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;
  background:var(--surface-alt);color:var(--ink2)}
.badge-actif{background:var(--ok-bg);color:var(--ok)}
.badge-en_pause{background:var(--warn-bg);color:var(--warn)}
.badge-resilie{background:var(--off-bg);color:var(--off)}

/* Boutons (desktop : accent radius 8 / ghost) */
.toolbar{display:flex;justify-content:flex-end;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:8px 16px;border-radius:8px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink2);font:inherit;font-weight:500;font-size:13.5px;
  text-decoration:none;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.btn:hover{background:var(--surface-alt);color:var(--ink)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn-sm{padding:5px 10px;font-size:12.5px}
.btn-danger{color:var(--off);border-color:var(--off-line)}
.btn-danger:hover{background:var(--off-bg);color:var(--off)}
td.actions{display:flex;gap:6px;align-items:center}
td.actions form{margin:0}

/* Statut modifiable en ligne */
.inline-status{margin:0}
.badge-select{border:1px solid var(--line);border-radius:999px;padding:4px 26px 4px 10px;font-size:12px;
  font-weight:600;cursor:pointer;background-color:var(--surface-alt);color:var(--ink2);appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237A6E63'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center}
.badge-select.badge-actif{background-color:var(--ok-bg);color:var(--ok)}
.badge-select.badge-en_pause{background-color:var(--warn-bg);color:var(--warn)}
.badge-select.badge-resilie{background-color:var(--off-bg);color:var(--off)}

/* Formulaires */
.form{padding:20px 22px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.field{display:flex;flex-direction:column;gap:5px}
.field-wide{grid-column:1 / -1}
.field-check{flex-direction:row;align-items:center;gap:9px;align-self:end;padding-bottom:8px}
.field-check input{width:16px;height:16px}
.field-check span{color:var(--ink)}
.field span{font-size:12px;color:var(--ink2)}
.field input,.field select,.field textarea{padding:6px 10px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:14px;background:var(--bg);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.form-section{font-size:12px;font-weight:600;color:var(--ink2);text-transform:uppercase;
  letter-spacing:.04em;margin:22px 0 4px;padding-top:16px;border-top:1px solid var(--line)}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

/* Utilisateur / bandeaux / flash */
.side-user{color:var(--ink);font-weight:600;font-size:13px}
.side-logout{display:inline-block;margin-top:6px;color:var(--accent);font-size:12.5px;text-decoration:none}
.side-logout:hover{text-decoration:underline}
.dev-banner{background:var(--warn-bg);color:var(--warn);font-size:12.5px;font-weight:600;
  text-align:center;padding:7px 12px;border-bottom:1px solid var(--warn-line)}
.flash-ok{background:var(--ok-bg);color:var(--ok);font-weight:600;padding:10px 16px;
  border-radius:8px;margin-bottom:16px;font-size:13.5px;border:1px solid var(--ok-line)}

/* Page de connexion */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg);margin:0}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:32px;width:100%;max-width:360px}
.login-brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:18px}
.login-sub{color:var(--ink2);margin:6px 0 20px;font-size:13.5px}
.login-card .form{padding:0}
.login-card .field{margin-bottom:14px}
.login-error{background:var(--off-bg);color:var(--off);padding:9px 12px;border-radius:8px;
  font-size:13px;font-weight:600;margin-bottom:16px;border:1px solid var(--off-line)}

@media(max-width:680px){.form-grid{grid-template-columns:1fr}}
@media(max-width:820px){
  .sidebar{width:60px;flex-basis:60px;padding:12px 6px}
  .brand span:not(.brand-mark){display:none}
  .nav-item span:not(.nav-ic){display:none}
  .sidebar-foot{display:none}
  .topbar,.page{padding-left:16px;padding-right:16px}
}