/* ════════════════════════════════════════════════════════════
   GestPro v1.0 — Feuille de style principale
════════════════════════════════════════════════════════════ */
:root {
  --bg:        #f5f4f0;
  --surface:   #ffffff;
  --surface2:  #f1efe8;
  --border:    #d3d1c7;
  --border2:   #e8e6df;
  --text1:     #1a1917;
  --text2:     #5f5e5a;
  --text3:     #9c9a92;
  --info:      #185fa5;
  --info-bg:   #e6f1fb;
  --success:   #0f6e56;
  --success-bg:#e1f5ee;
  --warn:      #854f0b;
  --warn-bg:   #faeeda;
  --danger:    #a32d2d;
  --danger-bg: #fcebeb;
  --entree:    #0f6e56;
  --entree-bg: #e1f5ee;
  --sortie:    #993c1d;
  --sortie-bg: #faece7;
  --radius:    8px;
  --radius-lg: 12px;
  --shadow:    0 1px 3px rgba(0,0,0,.08);
  --sidebar-w: 220px;
  --font:      'DM Sans', system-ui, sans-serif;
  --mono:      'DM Mono', monospace;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body { font-family:var(--font); font-size:14px; color:var(--text1); background:var(--bg); line-height:1.5; }
a { color:inherit; text-decoration:none; }
button { font-family:var(--font); cursor:pointer; }
input,select,textarea { font-family:var(--font); }

/* ── Layout principal ─────────────────────────────────────── */
#app { display:grid; grid-template-columns:var(--sidebar-w) 1fr; height:100vh; overflow:hidden; }
#main-content { overflow-y:auto; padding:1.5rem; background:var(--bg); }
#page-container { max-width:1200px; margin:0 auto; }

/* ── Sidebar ──────────────────────────────────────────────── */
#sidebar {
  display:flex; flex-direction:column;
  background:var(--surface); border-right:0.5px solid var(--border);
  height:100vh; overflow-y:auto;
}
.sidebar-header {
  display:flex; align-items:center; gap:10px;
  padding:1rem .875rem; border-bottom:0.5px solid var(--border2);
  flex-shrink:0;
}
.sidebar-logo-icon { font-size:22px; color:var(--info); flex-shrink:0; }
.logo-img { display:none; height:28px; max-width:90px; object-fit:contain; }
.sidebar-app-name { font-size:13px; font-weight:500; color:var(--text1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sidebar-profil { font-size:11px; color:var(--text3); }
.nav-group-label {
  font-size:10px; font-weight:500; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text3); padding:.75rem .875rem .25rem;
}
.nav-item {
  display:flex; align-items:center; gap:8px;
  padding:.475rem .875rem; font-size:13px; color:var(--text2);
  transition:background .12s, color .12s;
  cursor:pointer; border:none; background:none; width:100%; text-align:left;
}
.nav-item i { font-size:16px; flex-shrink:0; }
.nav-item:hover { background:var(--surface2); color:var(--text1); }
.nav-item.active { background:var(--info-bg); color:var(--info); font-weight:500; }
.sidebar-footer {
  margin-top:auto; padding:.75rem .875rem;
  border-top:0.5px solid var(--border2);
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.user-avatar {
  width:32px; height:32px; border-radius:50%;
  background:var(--info-bg); color:var(--info);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:500; flex-shrink:0;
}
#user-nom  { font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#user-role { font-size:11px; color:var(--text3); }
.btn-logout {
  margin-left:auto; background:none; border:none;
  color:var(--text3); font-size:16px; padding:4px;
  border-radius:var(--radius); transition:color .15s, background .15s;
}
.btn-logout:hover { color:var(--danger); background:var(--danger-bg); }

/* ── Login ────────────────────────────────────────────────── */
#login-screen {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg);
}
.login-card {
  background:var(--surface); border:0.5px solid var(--border);
  border-radius:var(--radius-lg); padding:2.5rem 2rem;
  width:100%; max-width:380px; box-shadow:var(--shadow);
}
.login-logo { text-align:center; margin-bottom:1.75rem; }
.login-logo-icon { font-size:40px; color:var(--info); }
.login-logo h1 { font-size:20px; font-weight:500; margin-top:.5rem; }
.login-logo p  { font-size:13px; color:var(--text3); margin-top:4px; }
#login-footer  { font-size:11px; color:var(--text3); text-align:center; margin-top:1.25rem; }

/* ── Page header ──────────────────────────────────────────── */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.page-title { font-size:18px; font-weight:500; display:flex; align-items:center; gap:8px; }
.page-title i { font-size:20px; color:var(--info); }
.page-sub { font-size:13px; color:var(--text2); margin-top:3px; }
.page-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }

/* ── Boutons ──────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:.45rem .875rem; font-size:13px; font-weight:400;
  border:0.5px solid var(--border); border-radius:var(--radius);
  background:var(--surface); color:var(--text1);
  transition:background .12s, border-color .12s;
  white-space:nowrap; cursor:pointer; line-height:1.4;
}
.btn:hover   { background:var(--surface2); border-color:var(--border2); }
.btn:active  { transform:scale(.98); }
.btn-primary { background:var(--info);    border-color:var(--info);    color:#fff; }
.btn-primary:hover { background:#0c447c; border-color:#0c447c; color:#fff; }
.btn-success { background:var(--success); border-color:var(--success); color:#fff; }
.btn-success:hover { background:#085041; border-color:#085041; }
.btn-danger  { background:var(--danger);  border-color:var(--danger);  color:#fff; }
.btn-danger:hover  { background:#791f1f; border-color:#791f1f; }
.btn-sm      { padding:.3rem .625rem; font-size:12px; }
.btn-icon    { padding:.3rem; min-width:30px; justify-content:center; }
.w-full      { width:100%; justify-content:center; }

/* ── Formulaires ──────────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:5px; }
.field label { font-size:12px; font-weight:500; color:var(--text2); }
.field label .req { color:var(--danger); margin-left:2px; }
.form-grid      { display:grid; gap:.875rem; }
.form-grid.cols-2 { grid-template-columns:1fr 1fr; }
.form-grid.cols-3 { grid-template-columns:1fr 1fr 1fr; }
input[type=text],input[type=email],input[type=number],
input[type=date],input[type=password],select,textarea {
  height:36px; padding:0 10px;
  border:0.5px solid var(--border); border-radius:var(--radius);
  background:var(--surface); color:var(--text1); font-size:13px;
  transition:border-color .12s; width:100%;
}
textarea { height:auto; padding:8px 10px; resize:vertical; }
input:focus,select:focus,textarea:focus {
  outline:none; border-color:var(--info);
  box-shadow:0 0 0 2px rgba(24,95,165,.12);
}
input:disabled,select:disabled { background:var(--surface2); color:var(--text3); }
.section-divider {
  font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text3); border-bottom:0.5px solid var(--border);
  padding-bottom:6px; margin:1.25rem 0 .75rem;
  display:flex; align-items:center; gap:6px;
}

/* ── Cards ────────────────────────────────────────────────── */
.card { background:var(--surface); border:0.5px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:1rem; }
.card-header { padding:.875rem 1.125rem; border-bottom:0.5px solid var(--border2); display:flex; align-items:center; justify-content:space-between; }
.card-title  { font-size:13px; font-weight:500; display:flex; align-items:center; gap:6px; }
.card-body   { padding:.875rem 1.125rem; }

/* ── KPI ──────────────────────────────────────────────────── */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:.75rem; margin-bottom:1.25rem; }
.kpi { background:var(--surface); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:.875rem 1rem; }
.kpi-label { font-size:11px; color:var(--text2); display:flex; align-items:center; gap:5px; margin-bottom:.375rem; }
.kpi-val   { font-size:20px; font-weight:500; }
.kpi-sub   { font-size:11px; color:var(--text3); margin-top:3px; }
.kpi.info    .kpi-val { color:var(--info); }
.kpi.success .kpi-val { color:var(--entree); }
.kpi.warn    .kpi-val { color:var(--warn); }
.kpi.danger  .kpi-val { color:var(--danger); }
.kpi.entree  .kpi-val { color:var(--entree); }
.kpi.sortie  .kpi-val { color:var(--sortie); }

/* ── Tables ───────────────────────────────────────────────── */
.tbl-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead th {
  padding:.5rem .875rem; text-align:left;
  font-size:11px; font-weight:500; color:var(--text2);
  background:var(--surface2); border-bottom:0.5px solid var(--border);
  white-space:nowrap;
}
tbody tr { border-bottom:0.5px solid var(--border2); transition:background .1s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--surface2); }
td { padding:.5rem .875rem; vertical-align:middle; }
.td-mono   { font-family:var(--mono); font-size:12px; }
.td-right  { text-align:right; }
.td-center { text-align:center; }
.td-actions { text-align:right; white-space:nowrap; }
.td-actions .btn { margin-left:3px; }

/* ── Badges ───────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:500; padding:2px 8px; border-radius:20px; white-space:nowrap; }
.badge-brouillon  { background:var(--surface2);    color:var(--text2); }
.badge-envoyee    { background:var(--info-bg);      color:var(--info); }
.badge-validee    { background:var(--success-bg);   color:var(--success); }
.badge-annulee,.badge-annule { background:var(--danger-bg); color:var(--danger); }
.badge-en_attente { background:var(--warn-bg);      color:var(--warn); }
.badge-valide     { background:var(--success-bg);   color:var(--success); }
.badge-rejete     { background:var(--danger-bg);    color:var(--danger); }
.badge-en_cours   { background:var(--info-bg);      color:var(--info); }
.badge-termine    { background:var(--success-bg);   color:var(--success); }
.badge-suspendu   { background:var(--warn-bg);      color:var(--warn); }
.badge-proforma   { background:var(--warn-bg);      color:var(--warn); }
.badge-definitive { background:var(--info-bg);      color:var(--info); }
.badge-entree     { background:var(--entree-bg);    color:var(--entree); }
.badge-sortie     { background:var(--sortie-bg);    color:var(--sortie); }

.stock-badge { display:inline-flex; align-items:center; gap:3px; font-size:11px; padding:2px 9px; border-radius:20px; font-family:var(--mono); font-weight:500; }
.stock-ok    { background:var(--entree-bg); color:var(--entree); }
.stock-low   { background:var(--warn-bg);   color:var(--warn); }
.stock-zero  { background:var(--sortie-bg); color:var(--sortie); }

.numero-fact { font-family:var(--mono); font-size:12px; font-weight:500; }
.num-pro     { color:var(--warn); }
.num-def     { color:var(--info); }
.type-service { display:inline-block; font-size:10px; padding:2px 7px; border-radius:4px; background:var(--info-bg); color:var(--info); font-weight:500; }
.type-produit { display:inline-block; font-size:10px; padding:2px 7px; border-radius:4px; background:var(--entree-bg); color:var(--entree); font-weight:500; }
.badge-ponctuel { background:var(--warn-bg); color:var(--warn); font-size:10px; padding:2px 7px; border-radius:4px; font-weight:500; }
.marge-pos { color:var(--entree); font-weight:500; }
.marge-neg { color:var(--sortie); font-weight:500; }

/* ── Alertes ──────────────────────────────────────────────── */
.alert { padding:.625rem .875rem; border-radius:var(--radius); font-size:13px; display:flex; align-items:center; gap:8px; margin-bottom:.75rem; }
.alert-info    { background:var(--info-bg);    color:var(--info); }
.alert-success { background:var(--success-bg); color:var(--success); }
.alert-warn    { background:var(--warn-bg);    color:var(--warn); }
.alert-danger  { background:var(--danger-bg);  color:var(--danger); }

/* ── Filter bar ───────────────────────────────────────────── */
.filter-bar { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.875rem; padding:.625rem .875rem; background:var(--surface); border:0.5px solid var(--border); border-radius:var(--radius); }
.filter-field { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--text2); }

/* ── Modal ────────────────────────────────────────────────── */
#modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.38); z-index:1000;
  align-items:center; justify-content:center; padding:1rem;
}
.modal-box {
  background:var(--surface); border-radius:var(--radius-lg);
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  width:100%; max-height:90vh; overflow-y:auto;
  display:flex; flex-direction:column;
}
.modal-sm { max-width:440px; }
.modal-md { max-width:680px; }
.modal-lg { max-width:960px; }
#modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.875rem 1.125rem; border-bottom:0.5px solid var(--border);
  font-size:15px; font-weight:500; position:sticky; top:0;
  background:var(--surface); z-index:1; flex-shrink:0;
}
#modal-header button { background:none; border:none; font-size:18px; color:var(--text3); padding:4px; border-radius:var(--radius); transition:color .12s, background .12s; }
#modal-header button:hover { color:var(--text1); background:var(--surface2); }
#modal-body { padding:1.125rem; flex:1; }

/* ── Lignes de facture ────────────────────────────────────── */
.lignes-table { width:100%; border-collapse:collapse; font-size:12px; min-width:700px; }
.lignes-table th { background:var(--surface2); padding:5px 6px; text-align:left; font-weight:500; font-size:11px; color:var(--text2); border-bottom:0.5px solid var(--border); white-space:nowrap; }
.lignes-table td { padding:3px 4px; border-bottom:0.5px solid var(--border2); vertical-align:middle; }
.lignes-table input,.lignes-table select { height:28px; font-size:11px; padding:0 6px; }
.tbl-scroll { overflow-x:auto; }
.totaux-bloc { background:var(--surface2); border-radius:var(--radius); padding:.875rem 1rem; font-size:13px; }
.totaux-ligne { display:flex; justify-content:space-between; align-items:center; padding:3px 0; color:var(--text2); }
.totaux-ligne span:last-child { font-weight:500; color:var(--text1); }
.total-ttc-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0 0; border-top:0.5px solid var(--border); font-size:15px; font-weight:500; color:var(--info); margin-top:6px; }

/* ── Client ponctuel ──────────────────────────────────────── */
.client-ponctuel-block { background:var(--warn-bg); border:0.5px solid #f5c4b3; border-radius:var(--radius); padding:.875rem 1rem; margin-top:.5rem; }
.client-ponctuel-header { font-size:11px; font-weight:500; color:var(--warn); margin-bottom:.625rem; display:flex; align-items:center; gap:6px; }

/* ── Toast ────────────────────────────────────────────────── */
#toast-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:2000; display:flex; flex-direction:column; gap:.5rem; pointer-events:none; }
.toast {
  display:flex; align-items:center; gap:8px;
  background:var(--surface); border:0.5px solid var(--border);
  border-radius:var(--radius); padding:.625rem 1rem;
  font-size:13px; box-shadow:var(--shadow);
  transform:translateY(8px); opacity:0;
  transition:transform .25s, opacity .25s;
  max-width:360px; pointer-events:auto;
}
.toast.show    { transform:translateY(0); opacity:1; }
.toast.success { border-left:3px solid var(--success); color:var(--success); }
.toast.error   { border-left:3px solid var(--danger);  color:var(--danger); }
.toast.warning { border-left:3px solid var(--warn);    color:var(--warn); }
.toast.info    { border-left:3px solid var(--info);    color:var(--info); }

/* ── États ────────────────────────────────────────────────── */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--text3); }
.empty-state i { font-size:36px; display:block; margin-bottom:.75rem; opacity:.5; }
.empty-state p { font-size:14px; }
.loading-state { display:flex; align-items:center; justify-content:center; gap:8px; padding:3rem; color:var(--text3); font-size:14px; }
.spin { animation:spin .8s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }