/* ziartisan — application artisan (front vanilla, sans build). */
:root{
  --bg:#0f172a; --panel:#111c30; --card:#1e293b; --line:#334155;
  --txt:#e2e8f0; --muted:#94a3b8; --brand:#f97316; --brand2:#fb923c;
  --danger:#f87171; --ok:#34d399; --radius:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
}
a{color:inherit; text-decoration:none}
.muted{color:var(--muted)}
[hidden]{display:none !important}

/* Boutons ---------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:10px; font-weight:600; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--txt);
  font-size:.95rem;
}
.btn:hover{border-color:#475569}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#0b1220}
.btn.primary:hover{background:var(--brand2)}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.6; cursor:not-allowed}
.icon-btn{
  display:none; background:transparent; border:0; color:var(--txt);
  font-size:1.4rem; cursor:pointer; padding:4px 8px;
}

/* Boot ------------------------------------------------------------------- */
.boot{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--muted); background:var(--bg);
}

/* Marque ----------------------------------------------------------------- */
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem}
.brand .mark{width:30px; height:30px; flex:none}

/* Connexion -------------------------------------------------------------- */
.auth{
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px; padding:24px;
}
.auth-card{
  width:100%; max-width:380px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:28px; display:flex; flex-direction:column; gap:8px;
}
.auth-card h1{margin:14px 0 0; font-size:1.5rem}
.auth-card p{margin:0 0 8px}
.auth-card label{font-size:.85rem; color:var(--muted); margin-top:10px}
.auth-card input{
  padding:11px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg); color:var(--txt); font-size:1rem;
}
.auth-card input:focus{outline:2px solid var(--brand); border-color:var(--brand)}
.auth-card .btn{margin-top:18px}
.auth-foot{font-size:.85rem}
.error{
  color:var(--danger); background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.3);
  border-radius:8px; padding:8px 10px; margin:10px 0 0; font-size:.9rem;
}

/* Application ------------------------------------------------------------ */
.app{display:grid; grid-template-columns:250px 1fr; min-height:100vh}
.sidebar{
  background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:18px; padding:20px 16px;
}
.nav{display:flex; flex-direction:column; gap:4px; margin-top:6px}
.nav a{
  padding:10px 12px; border-radius:10px; color:var(--muted); font-weight:500;
}
.nav a:hover{background:var(--card); color:var(--txt)}
.nav a.active{background:var(--brand); color:#0b1220; font-weight:700}
.sidebar-foot{margin-top:auto; display:flex; flex-direction:column; gap:10px}
#user-email{font-size:.85rem; word-break:break-all}

.main{display:flex; flex-direction:column; min-width:0}
.topbar{
  display:flex; align-items:center; gap:12px; padding:16px 24px;
  border-bottom:1px solid var(--line); background:rgba(15,23,42,.7);
  position:sticky; top:0; backdrop-filter:blur(6px); z-index:5;
}
.topbar h2{margin:0; font-size:1.2rem}
.page{padding:24px; min-width:0}

/* Blocs de contenu reutilisables (dashboard, listes, ...) ---------------- */
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.card h3{margin:0 0 6px; font-size:.9rem; color:var(--muted); font-weight:600}
.card .value{font-size:1.7rem; font-weight:800}
.card .value + .muted{margin-top:4px; font-size:.85rem}
.kpi-list{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
.kpi-list li{display:flex; justify-content:space-between; gap:12px; font-size:.95rem}
.kpi-list li + li{border-top:1px solid var(--line); padding-top:6px}
.kpi-list .kpi-count{font-weight:700}
.placeholder{
  border:1px dashed var(--line); border-radius:var(--radius); padding:32px;
  text-align:center; color:var(--muted);
}

/* Listes metier (clients, ...) ------------------------------------------- */
.toolbar{display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.search{
  flex:1; min-width:220px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel); color:var(--txt); font-size:.95rem;
}
.search:focus{outline:2px solid var(--brand); border-color:var(--brand)}
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius)}
.table{width:100%; border-collapse:collapse; font-size:.95rem}
.table th,.table td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line)}
.table tbody tr:last-child td{border-bottom:0}
.table th{color:var(--muted); font-weight:600; font-size:.82rem; white-space:nowrap}
.table tbody tr:hover{background:var(--card)}
.badge{
  display:inline-block; padding:2px 10px; border-radius:999px; font-size:.78rem;
  border:1px solid var(--line); color:var(--muted); white-space:nowrap;
}
.pager{display:flex; align-items:center; gap:12px; margin-top:16px; justify-content:flex-end; flex-wrap:wrap}
.state{padding:24px; text-align:center; color:var(--muted)}
.state.error{color:var(--danger); background:none; border:0}
.row-link{cursor:pointer}

/* Formulaires metier ----------------------------------------------------- */
.form{
  max-width:560px; margin-top:16px; display:flex; flex-direction:column; gap:14px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px;
}
.field{display:flex; flex-direction:column; gap:5px}
.field label{font-size:.85rem; color:var(--muted)}
.field input,.field select,.field textarea{
  padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel); color:var(--txt); font-size:.95rem;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--brand); border-color:var(--brand);
}
.field.has-error input,.field.has-error select{border-color:var(--danger)}
.field-error{margin:0; color:var(--danger); font-size:.82rem}
.form-actions{display:flex; gap:12px; margin-top:6px; flex-wrap:wrap}
.page > h3{margin:16px 0 4px}

/* Vue detail (facture, ...) ---------------------------------------------- */
.detail-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:12px 0}
.detail-head h3{margin:0}
.badge-row{display:flex; gap:8px; flex-wrap:wrap}

/* Fiche client : sous-sections CRM -------------------------------------- */
.crm-section{margin-top:24px}
.crm-section h4{margin:0 0 10px; font-size:1rem}
.inline-form{margin-top:12px; background:var(--panel)}

/* Editeur de lignes (devis) ---------------------------------------------- */
.items{display:flex; flex-direction:column; gap:8px}
.item-row{display:grid; grid-template-columns:1fr 80px 110px 80px 40px; gap:8px; align-items:center}
.item-pick{
  grid-column:1 / -1; padding:8px 10px; border-radius:8px; border:1px solid var(--line);
  background:var(--card); color:var(--muted); font-size:.88rem;
}
.item-pick:focus{outline:2px solid var(--brand); border-color:var(--brand)}
.item-row input{
  padding:9px 10px; border-radius:8px; border:1px solid var(--line);
  background:var(--panel); color:var(--txt); font-size:.92rem; min-width:0;
}
.item-row input:focus{outline:2px solid var(--brand); border-color:var(--brand)}
.item-row .btn{padding:8px 10px}
@media (max-width:640px){
  .item-row{grid-template-columns:1fr 1fr; }
  .item-label{grid-column:1 / -1}
}

/* Responsive : sidebar repliable sous 860px ------------------------------ */
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .icon-btn{display:inline-block}
  .sidebar{
    position:fixed; inset:0 auto 0 0; width:250px; z-index:20;
    transform:translateX(-100%); transition:transform .2s ease;
  }
  .app.nav-open .sidebar{transform:translateX(0)}
  .app.nav-open::after{
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:15;
  }
}

@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#f8fafc; --panel:#ffffff; --card:#ffffff; --line:#e2e8f0;
    --txt:#0f172a; --muted:#64748b;
  }
}