/* =========================================================
   BASE & COMPOSANTS — SuiviClients
   Dépend de tokens.css (variables).
   ========================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--text);
  line-height:1.55; -webkit-font-smoothing:antialiased;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:32px 32px;
  min-height:100vh;
}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.15}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--text-muted)}
.wrap{max-width:1080px;margin:0 auto;padding:var(--s-6) var(--s-5) var(--s-8)}

/* ---- App bar ---- */
.appbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);background:var(--surface);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:var(--s-4)}
.logo-plate{display:inline-flex;align-items:center;padding:6px 12px;border-radius:14px;background:transparent;
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.brand-logo{height:42px;width:auto;display:block}
.app-chip{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;
  font-weight:600;color:var(--text-muted);border:1px solid var(--border);border-radius:var(--r-pill);padding:5px 12px}

/* ---- Bascule de thème ---- */
.theme-toggle{display:flex;gap:var(--s-1);background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:4px}
.theme-toggle button{font-family:var(--font-body);font-size:.8rem;font-weight:600;color:var(--text-muted);
  background:transparent;border:0;padding:8px 14px;border-radius:var(--r-pill);cursor:pointer;
  min-height:36px;transition:all var(--dur) var(--ease)}
.theme-toggle button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}

/* ---- Boutons ---- */
.btn{font-family:var(--font-body);font-weight:600;font-size:.95rem;border-radius:var(--r-sm);
  padding:0 var(--s-5);min-height:48px;display:inline-flex;align-items:center;gap:var(--s-2);
  cursor:pointer;border:1px solid transparent;text-decoration:none;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),
  box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-md);text-decoration:none}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn-secondary:hover{border-color:var(--text-muted);background:var(--surface-2);text-decoration:none}

/* ---- Carte ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-6);box-shadow:var(--shadow-sm)}

/* ---- Page de santé ---- */
.health{display:flex;align-items:center;gap:var(--s-5);max-width:560px;margin-top:var(--s-6)}
.health .status-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 18%,transparent)}
.health h1{font-size:1.5rem;margin-bottom:6px}
.health .detail{color:var(--text-muted);font-size:.95rem}
.health .err{font-family:var(--font-mono);font-size:.82rem;color:var(--brand-red);margin-top:8px;word-break:break-word}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--accent);font-weight:600;margin-bottom:var(--s-3)}

/* ---- App bar (côté droit) ---- */
.appbar-right{display:flex;align-items:center;gap:var(--s-4)}
.user-menu{display:flex;align-items:center;gap:var(--s-3)}
.user-name{font-weight:600;font-size:.9rem}
.icon-link{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);
  border:1px solid var(--border);color:var(--text-muted);text-decoration:none}
.icon-link:hover{color:var(--text);border-color:var(--text-muted);text-decoration:none}
.btn-logout{font-family:var(--font-body);font-weight:600;font-size:.85rem;cursor:pointer;
  background:transparent;border:1px solid var(--border-strong);color:var(--text);border-radius:var(--r-sm);
  min-height:40px;padding:0 14px;transition:all var(--dur) var(--ease)}
.btn-logout:hover{border-color:var(--accent);color:var(--accent)}

/* ---- Formulaires ---- */
.stack{display:flex;flex-direction:column;gap:var(--s-4)}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--text-muted);margin-bottom:6px}
.field input{width:100%;font-family:var(--font-body);font-size:.95rem;color:var(--text);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);
  padding:0 14px;min-height:48px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.field input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-red) 22%,transparent)}
.field .hint{font-size:.78rem;color:var(--text-faint);margin-top:6px}
.form-card{max-width:480px;margin-top:var(--s-5)}

/* ---- Auth / login ---- */
.auth-wrap{min-height:60vh;display:grid;place-items:center;padding:var(--s-6) 0}
.login-card{width:100%;max-width:400px;text-align:center}
.login-card .logo-plate{display:inline-flex;margin:0 auto var(--s-4)}
.login-card .logo-plate img{height:54px;width:auto;display:block}
.login-card h1{font-size:1.4rem;margin-bottom:var(--s-5)}
.login-card .field{text-align:left}
.login-card .btn{width:100%;justify-content:center;margin-top:var(--s-2)}

/* ---- Alertes / flash ---- */
.flash-area{display:flex;flex-direction:column;gap:var(--s-3);margin-bottom:var(--s-5)}
.alert{border-radius:var(--r-sm);padding:12px 16px;font-size:.9rem;font-weight:500;border:1px solid transparent;text-align:left}
.alert-error{background:color-mix(in srgb,var(--brand-red) 12%,transparent);
  color:color-mix(in srgb,var(--brand-red) 80%,var(--text));
  border-color:color-mix(in srgb,var(--brand-red) 30%,transparent)}
.alert-success{background:color-mix(in srgb,var(--st-termine) 14%,transparent);
  color:color-mix(in srgb,var(--st-termine) 82%,var(--text));
  border-color:color-mix(in srgb,var(--st-termine) 30%,transparent)}

@media (max-width:560px){
  .appbar{flex-wrap:wrap;gap:var(--s-3)}
  .user-name{display:none}
}

/* ---- Navigation principale ---- */
.mainnav{display:flex;gap:var(--s-1);flex:1;flex-wrap:wrap}
.mainnav a{font-weight:600;font-size:.9rem;color:var(--text-muted);text-decoration:none;
  padding:8px 14px;border-radius:var(--r-sm);min-height:40px;display:inline-flex;align-items:center;
  transition:all var(--dur) var(--ease)}
.mainnav a:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.mainnav a.active{color:var(--accent);background:color-mix(in srgb,var(--brand-red) 10%,transparent)}

/* ---- Cartes-compteurs ---- */
.section-title{font-size:1.1rem;margin:var(--s-6) 0 var(--s-4)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--s-4);margin-top:var(--s-5)}
.stat-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-5);box-shadow:var(--shadow-sm);overflow:hidden;display:block;color:inherit;text-decoration:none;
  opacity:0;transform:translateY(10px);animation:rise .5s var(--ease) forwards;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);text-decoration:none}
.stat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}
.stat-card .k{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-muted);font-weight:600}
.stat-card .k .dot{width:9px;height:9px;border-radius:50%;background:var(--c)}
.stat-card .v{font-family:var(--font-mono);font-weight:700;font-size:2.4rem;letter-spacing:-.02em;margin-top:var(--s-2)}
@keyframes rise{to{opacity:1;transform:none}}

/* ---- Badges de statut ---- */
.badge{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.78rem;padding:5px 11px;
  border-radius:var(--r-pill);background:color-mix(in srgb,var(--c) 14%,transparent);
  color:color-mix(in srgb,var(--c) 78%,var(--text));border:1px solid color-mix(in srgb,var(--c) 26%,transparent)}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}

/* ---- Panneaux (aujourd'hui / récents) ---- */
.panels{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-top:var(--s-6)}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--border)}
.panel-head h3{font-size:1rem}
.panel-head .count{font-family:var(--font-mono);font-weight:700;color:var(--accent)}
.tlist{display:flex;flex-direction:column}
.tline{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3) var(--s-5);border-bottom:1px solid var(--border)}
.tline:last-child{border-bottom:0}
.tline .code{font-family:var(--font-mono);font-weight:600;color:var(--accent);min-width:86px}
.tline .who{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tline .when{font-family:var(--font-mono);font-size:.78rem;color:var(--text-faint);white-space:nowrap}
.empty{padding:var(--s-5);color:var(--text-faint);font-size:.9rem}

@media (max-width:760px){
  .panels{grid-template-columns:1fr}
  .mainnav{order:3;width:100%}
}

/* ---- Boutons : variantes ghost / small ---- */
.btn-ghost{background:transparent;color:var(--text-muted);border-color:transparent}
.btn-ghost:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.btn-sm{min-height:38px;padding:0 var(--s-4);font-size:.85rem}

/* ---- Barre d'outils (recherche + action) ---- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  margin:var(--s-5) 0;flex-wrap:wrap}
.toolbar .search{display:flex;gap:var(--s-2);flex:1;min-width:260px}
.toolbar .search input{flex:1;font-family:var(--font-body);font-size:.95rem;color:var(--text);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);
  padding:0 14px;min-height:48px}
.toolbar .search input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-red) 22%,transparent)}

/* ---- Tableau (listes) ---- */
.table-card{padding:0;overflow:hidden}
.table{width:100%;border-collapse:collapse}
.table thead th{text-align:left;font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-faint);font-weight:600;padding:var(--s-4) var(--s-5);
  background:var(--surface-2);border-bottom:1px solid var(--border)}
.table tbody td{padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--border);font-size:.92rem}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background var(--dur) var(--ease)}
.table tbody tr:hover{background:var(--surface-2)}
.row-actions{text-align:right;white-space:nowrap}
.table .empty{text-align:center;color:var(--text-faint)}

/* ---- Formulaire à grille ---- */
.form-card-wide{max-width:760px;margin-top:var(--s-5)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.form-grid .field-full{grid-column:1 / -1}
.form-grid textarea{width:100%;font-family:var(--font-body);font-size:.95rem;color:var(--text);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);
  padding:12px 14px;resize:vertical}
.form-grid textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-red) 22%,transparent)}
.form-actions{display:flex;gap:var(--s-3);align-items:center;margin-top:var(--s-5)}

/* ---- Autocomplétion NPA ---- */
.ac-wrap{position:relative}
.ac-list{position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:4px;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg);max-height:260px;overflow:auto}
.ac-item{display:block;width:100%;text-align:left;font-family:var(--font-mono);font-size:.85rem;
  color:var(--text);background:transparent;border:0;padding:10px 14px;cursor:pointer}
.ac-item:hover{background:var(--surface-2);color:var(--accent)}

@media (max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .table thead{display:none}
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table tr{border-bottom:1px solid var(--border);padding:var(--s-2) 0}
  .table td{border:0;padding:6px var(--s-5);display:flex;justify-content:space-between;gap:var(--s-4)}
  .table td::before{content:attr(data-l);font-family:var(--font-mono);font-size:.66rem;
    text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint)}
  .row-actions{text-align:left}
}

/* ---- Barre de filtres (tickets) ---- */
.filters{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;margin:var(--s-5) 0}
.filters input[type="search"]{flex:1;min-width:200px;font-family:var(--font-body);font-size:.95rem;color:var(--text);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:0 14px;min-height:46px}
.filters select,.filters input[type="date"]{font-family:var(--font-body);font-size:.92rem;color:var(--text);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:0 12px;min-height:46px}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-red) 22%,transparent)}
.filters .date{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--text-muted)}

/* ---- En-têtes triables ---- */
.th-sort a{color:var(--text-faint);text-decoration:none}
.th-sort a:hover{color:var(--text)}

/* ---- Pagination ---- */
.pager{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-4);flex-wrap:wrap}
.pager-info{font-size:.85rem;color:var(--text-muted)}
.pager-nav{display:flex;gap:var(--s-2)}

/* ---- Bouton danger ---- */
.btn-danger{background:transparent;color:var(--brand-red);
  border-color:color-mix(in srgb,var(--brand-red) 35%,transparent)}
.btn-danger:hover{background:var(--brand-red);color:#fff;text-decoration:none}

/* ---- En-tête de page avec action ---- */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}

/* ---- Détail ticket ---- */
.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);
  flex-wrap:wrap;margin-bottom:var(--s-5)}
.detail-head .code{font-family:var(--font-mono);color:var(--accent)}
.detail-actions{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.detail-grid{display:grid;grid-template-columns:1fr 360px;gap:var(--s-4);align-items:start}
.detail-main{display:flex;flex-direction:column;gap:var(--s-4)}
.detail-side{display:flex;flex-direction:column;gap:var(--s-4)}
.card.pad{padding:var(--s-5)}
.card-title{font-size:1rem;margin-bottom:var(--s-3)}
.kv{display:flex;gap:var(--s-3);padding:6px 0;border-bottom:1px solid var(--border)}
.kv:last-child{border-bottom:0}
.kv-k{flex:0 0 130px;color:var(--text-muted);font-size:.85rem;font-weight:600}
.kv-v{flex:1;font-size:.92rem;word-break:break-word}
.readonly-value{font-size:.95rem;padding:10px 0}
.quick-actions{margin-top:var(--s-4)}
.quick-actions .btn{width:100%;justify-content:center}

/* ---- Historique ---- */
.hist{list-style:none;display:flex;flex-direction:column;gap:var(--s-2)}
.hist li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);padding:8px 0;border-bottom:1px solid var(--border);font-size:.9rem}
.hist li:last-child{border-bottom:0}
.hist-when{color:var(--text-faint);font-size:.78rem;min-width:120px}
.hist-flow{flex:1}
.hist-comment{color:var(--text-muted)}
.hist-author{font-size:.78rem;color:var(--text-faint)}

@media (max-width:860px){.detail-grid{grid-template-columns:1fr}}

/* ---- Pièces commandées (Lot 5bis) ---- */
.parts-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  margin-bottom:var(--s-4);flex-wrap:wrap}
.parts-total{font-family:var(--font-mono);font-weight:700;color:var(--accent)}
.part-item{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-4);
  margin-bottom:var(--s-3);background:var(--surface-2)}
.part-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-3)}
.part-grid .field-full{grid-column:1 / -1}
.part-grid label{display:block;font-size:.74rem;font-weight:600;color:var(--text-muted);margin-bottom:4px}
.part-grid input,.part-grid select{width:100%;font-family:var(--font-body);font-size:.9rem;color:var(--text);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);
  padding:0 10px;min-height:42px}
.part-grid input:focus,.part-grid select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-red) 22%,transparent)}
.part-grid .part-qty{max-width:120px}
.part-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  margin-top:var(--s-3);flex-wrap:wrap}
.part-del{margin-top:6px;text-align:right}
.link-danger{background:none;border:0;color:var(--text-faint);font-size:.82rem;cursor:pointer;padding:4px}
.link-danger:hover{color:var(--brand-red)}
.add-part{margin-top:var(--s-3);border-top:1px dashed var(--border);padding-top:var(--s-4)}
.add-part summary{cursor:pointer;font-weight:600;color:var(--accent);font-size:.9rem}
.add-part .part-form{margin-top:var(--s-4)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  .stat-card{opacity:1;transform:none}}