/* ============================================================
   UsinIA — thème
   ============================================================ */
:root{
  --bg-app:        #F5F7FB;
  --bg-card:       #FFFFFF;
  --bg-sidebar:    #0F1B3D;
  --bg-input:      #F1F4F8;
  --bg-soft:       #F6F9FE;

  --primary:       #2059EB;
  --primary-hover: #1A4BD0;
  --accent:        #599EFF;
  --accent-soft:   #6FA4FF;

  --text:          #15203A;
  --text-body:     #2B3340;
  --text-muted:    #97A1B0;
  --text-faint:    #8A93A3;

  --side-text:     #9FB0D0;
  --side-label:    #5C6B8C;
  --side-hover:    rgba(255,255,255,.07);
  --side-active-bg:rgba(89,158,255,.16);
  --side-active-bar:#599EFF;
  --side-border:   rgba(255,255,255,.08);

  --border:        #E5E9F1;
  --border-soft:   #EEF1F5;
  --border-header: #E6E9EF;

  --radius-card:   12px;
  --radius-ctrl:   9px;
  --radius-sm:     8px;
  --radius-pill:   999px;
  --shadow-card:   0 1px 2px rgba(16,24,40,.04);
  --shadow-btn:    0 1px 2px rgba(32,89,235,.30);
  --focus-ring:    0 0 0 3px rgba(32,89,235,.15);

  --st-valide-fg:#157C46; --st-valide-bg:#E7F4ED; --st-valide-bd:#BFE3CF;
  --st-cours-fg: #B26A00; --st-cours-bg: #FBEFD8; --st-cours-bd: #F0D49B;
  --st-refus-fg: #B23227; --st-refus-bg: #FBE7E3; --st-refus-bd: #F0BDB6;
  --st-info-fg:  #1A4BD0; --st-info-bg:  #EAF0FE; --st-info-bd:  #C3D0E6;
  --st-neutre-fg:#5A6473; --st-neutre-bg:#EDEFF3; --st-neutre-bd:#D7DCE4;
  --danger:      #D23B2C; --danger-hover:#B23227;
  --success:     #157C46; --success-hover:#0F5F35;

  --font-title: 'Sora', sans-serif;
  --font-ui:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, monospace;

  --sidebar-w: 230px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-ui);font-size:14px;color:var(--text-body);background:var(--bg-app);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

.app{display:flex;height:100vh}

/* ---------- Sidebar ---------- */
.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--bg-sidebar);border-right:1px solid var(--side-border);display:flex;flex-direction:column;padding:12px 0;overflow-y:auto}
.logo{padding:8px 18px 20px;font-size:16px;font-weight:600;color:#fff}
.logo span{font-size:11px;color:var(--side-label);display:block;font-weight:400;margin-top:2px}
.nav-item{padding:9px 12px;margin:0 10px 2px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--side-text);border-radius:8px;transition:background .15s,color .15s;text-decoration:none}
.nav-item:hover{background:var(--side-hover);color:#fff}
.nav-item.active{color:#fff;background:var(--side-active-bg);font-weight:600;box-shadow:inset 3px 0 0 var(--side-active-bar)}
.nav-icon{width:16px;height:16px;flex-shrink:0;opacity:.75}
.nav-item.active .nav-icon,.nav-item:hover .nav-icon{opacity:1}
.nav-sep{height:1px;background:var(--side-border);margin:8px 16px}
.nav-spacer{flex:1}
.nav-user{padding:13px 16px;font-size:12px;color:var(--side-text);border-top:1px solid var(--side-border)}
.nav-user strong{display:block;color:#EAEFF8;font-size:13px;margin-bottom:2px}
.logout-btn{margin-top:8px;padding:6px 10px;background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-sm);font-size:12px;color:var(--side-text);cursor:pointer;width:100%;transition:background .15s,color .15s}
.logout-btn:hover{background:var(--side-hover);color:#fff}

/* ---------- Zone principale ---------- */
.main{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-width:0}
.topbar{background:var(--bg-card);border-bottom:1px solid var(--border-header);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0}
.topbar h1{font-family:var(--font-title);font-size:18px;font-weight:700;color:var(--text)}
.content{padding:22px 24px;flex:1}
.section{display:none}.section.active{display:block}

/* ---------- Boutons ---------- */
.btn{padding:8px 14px;border:1px solid var(--border);background:var(--bg-card);border-radius:var(--radius-ctrl);cursor:pointer;font-size:13px;font-weight:500;color:var(--text-body);transition:background .15s,border-color .15s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{background:var(--bg-input)}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:var(--shadow-btn)}
.btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn.success{background:var(--success);color:#fff;border-color:var(--success)}
.btn.success:hover{background:var(--success-hover);border-color:var(--success-hover)}
.btn.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn.danger:hover{background:var(--danger-hover);border-color:var(--danger-hover)}
.btn.sm{padding:4px 10px;font-size:12px}

/* ---------- Metrics (KPI) ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:20px}
.metric{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:16px 18px;box-shadow:var(--shadow-card)}
.metric-label{font-size:10.5px;color:var(--text-faint);margin-bottom:8px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.metric-val{font-family:var(--font-title);font-size:28px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.05}
.metric-sub{font-size:12px;color:var(--text-muted);margin-top:7px}

/* ---------- Cartes ---------- */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:17px 19px;margin-bottom:16px;box-shadow:var(--shadow-card)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:8px;flex-wrap:wrap}
.card-title{font-family:var(--font-title);font-size:15px;font-weight:700;color:var(--text)}
.rcard{background:var(--bg-soft);border:1px solid var(--st-info-bd);border-radius:var(--radius-card);padding:15px 17px;margin-bottom:10px}
.rval{font-family:var(--font-title);font-size:24px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.rlabel{font-size:11px;color:var(--text-muted);margin-bottom:4px}
.rsub{font-size:11px;color:var(--text-muted);margin-top:2px}

/* ---------- Grilles ---------- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.g4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font:600 10px/1 var(--font-ui);color:#A6AEBC;padding:11px 14px;border-bottom:1px solid var(--border-soft);text-transform:uppercase;letter-spacing:.06em;background:#FBFCFE;white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid #F1F4F7;color:var(--text-body);vertical-align:middle;font-family:var(--font-ui) !important;font-size:13px}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#F7F9FC}
.brow{cursor:pointer}
.brow:hover td{background:#EFF4FF}

/* ---------- Badges / statuts ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:600;line-height:1}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.bs{background:var(--st-valide-bg);color:var(--st-valide-fg)}
.bw{background:var(--st-cours-bg);color:var(--st-cours-fg)}
.bd{background:var(--st-refus-bg);color:var(--st-refus-fg)}
.br{background:var(--st-refus-bg);color:var(--st-refus-fg)}
.bi{background:var(--st-info-bg);color:var(--st-info-fg)}
.bg{background:var(--st-neutre-bg);color:var(--st-neutre-fg)}

/* ---------- Formulaires ---------- */
.fi{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:var(--radius-ctrl);background:var(--bg-card);color:var(--text-body);font-size:13px;font-family:inherit}
.fi:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus-ring)}
textarea.fi{resize:vertical;min-height:80px}
.fl{font-size:12px;color:var(--text-muted);margin-bottom:4px;display:block;font-weight:500}
.fg{margin-bottom:12px}
.sep{height:1px;background:var(--border-soft);margin:12px 0}
.tag{background:var(--st-neutre-bg);padding:3px 10px;border-radius:var(--radius-pill);font-size:11px;color:var(--st-neutre-fg)}
.empty{text-align:center;padding:40px;color:#A6AEBC;font-size:13px}

/* ---------- Modales ---------- */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,27,61,.45);z-index:100;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--bg-card);border-radius:14px;padding:24px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 50px rgba(15,27,61,.25)}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.modal-title{font-family:var(--font-title);font-size:16px;font-weight:700;color:var(--text)}
.close-btn{background:none;border:none;cursor:pointer;font-size:20px;color:var(--text-muted);padding:0 4px}
.close-btn:hover{color:var(--text)}

/* ---------- Calculateur ---------- */
.calc-row{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.calc-row label{font-size:12px;color:var(--text-muted);flex:1;min-width:0}
.calc-row input,.calc-row select{width:105px;padding:7px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-body);font-size:12px;text-align:right;font-family:inherit}
.calc-row input:focus,.calc-row select:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus-ring)}
.calc-unit{font-size:11px;color:var(--text-faint);width:32px;flex-shrink:0}
.calc-op-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px dashed var(--border-soft)}
.calc-op-row:last-child{border-bottom:none}
.bar-bg{height:8px;background:var(--border-soft);border-radius:4px;overflow:hidden;margin-top:3px}
.bar-fill{height:100%;border-radius:4px;transition:width .3s;background:var(--primary)}

/* Lignes résultat calculateur (flex layout) */
.brow-calc{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-soft);font-size:13px}
.brow-calc:last-child{border-bottom:none}
.brow-calc.btot{font-weight:700;font-size:14px;color:var(--text)}
/* Alias pour l'ancien code qui utilise .brow dans le calculateur */
#s-calc .brow{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-soft);font-size:13px;cursor:default}
#s-calc .brow:hover td{background:transparent}
#s-calc .brow.btot{font-weight:700;font-size:14px;color:var(--text)}

/* ---------- Métrologie ---------- */
.metro-mesure-cell{transition:background-color .15s}
.metro-mesure-cell.metro-ok{background-color:#d4f5dc !important;color:#1d5e2c;font-weight:600}
.metro-mesure-cell.metro-nok{background-color:#fbdcdc !important;color:#8b1c1c;font-weight:600}
.metro-mesure-cell:focus{outline:2px solid #185FA5;outline-offset:-2px}
.metro-bloc{background:#fff;border:1px solid #ddd;border-radius:8px;padding:10px;margin-bottom:12px}
.metro-bloc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-weight:600;color:#333}
.metro-bloc-table{font-size:12px;width:100%;border-collapse:collapse}
.metro-bloc-table th{background:#3C3C3C;color:white;padding:6px 4px;font-size:11px;text-align:left;font-weight:600}
.metro-bloc-table td{border-bottom:1px solid #eee;vertical-align:middle;padding:2px}
.metro-bloc-table td input{font-size:12px !important}

/* ---------- Composants divers ---------- */
.alert-banner{background:var(--st-info-bg);border:1px solid var(--st-info-bd);border-radius:var(--radius-card);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;color:var(--text)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font:600 12px/1 var(--font-ui);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.btn-voir{font:600 12px var(--font-ui);color:#1A2742;background:var(--st-info-bg);border:none;border-radius:8px;padding:6px 13px;cursor:pointer}
.btn-voir:hover{background:#DCE7FD}

/* ---------- Sidebar extras ---------- */
.nav-section{font:700 9px/1 var(--font-ui);letter-spacing:.13em;text-transform:uppercase;color:var(--side-label);padding:13px 22px 6px}
.nav-badge{display:none;margin-left:auto;font:600 10px/1 var(--font-mono);color:#fff;background:var(--primary);border-radius:9px;padding:2px 7px;min-width:18px}
.nav-item[data-section="assistant"]{color:var(--accent-soft);font-weight:600;background:linear-gradient(90deg,rgba(89,158,255,.14),rgba(89,158,255,.04));box-shadow:inset 0 0 0 1px rgba(89,158,255,.22)}
.nav-item[data-section="assistant"] .nav-icon{opacity:1;color:var(--accent-soft)}
.nav-item[data-section="assistant"]:hover{color:#fff;background:linear-gradient(90deg,rgba(89,158,255,.26),rgba(89,158,255,.10))}
.nav-item[data-section="assistant"].active{color:#fff;background:var(--side-active-bg);box-shadow:inset 3px 0 0 var(--side-active-bar)}

/* ---------- Onglets ---------- */
.dv-tab{font:600 13px var(--font-ui);color:var(--text-muted);background:var(--bg-card);border:1px solid var(--border);border-radius:9px;padding:8px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background .15s,color .15s,border-color .15s}
.dv-tab:hover{background:var(--bg-input);color:var(--text)}
.dv-tab.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:var(--shadow-btn)}
.dv-tab-count{font:600 11px var(--font-mono);background:var(--st-neutre-bg);color:var(--st-neutre-fg);border-radius:8px;padding:1px 7px}
.dv-tab.active .dv-tab-count{background:rgba(255,255,255,.25);color:#fff}

/* ---------- Page-head (métrologie, NC, instruments, users) ---------- */
.page-head{background:var(--bg-card);border-bottom:1px solid var(--border-header);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0}
.page-head h1{font-family:var(--font-title);font-size:18px;font-weight:700;color:var(--text)}
.section>.page-head~*{margin-left:24px;margin-right:24px}
.section>.page-head+*{margin-top:22px}
.section>.page-head~:last-child{margin-bottom:24px}

/* ---------- Selects ---------- */
select.fi{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%2397A1B0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px;cursor:pointer}
.fi[type=file]{padding:7px 11px;cursor:pointer}
.fi[type=file]::-webkit-file-upload-button{font:inherit;border:1px solid var(--border);background:var(--bg-input);color:var(--text-body);border-radius:7px;padding:5px 11px;margin-right:10px;cursor:pointer}

@media(max-width:640px){.sidebar{width:190px;min-width:190px}.metrics{grid-template-columns:1fr 1fr}.g2{grid-template-columns:1fr}}