/* Cabinet — CSS component styles
 * Loaded by cabinet.html.twig (embedded in site layout)
 * @font-face and body{} are handled by the goubs-net theme.
 */

:root{
  --cab-accent:var(--color-primary);
  --cab-accent-hover:var(--color-primary-darker);
  --cab-accent-fg:#fff;
  --cab-bg:var(--color-white);
  --cab-surface:var(--color-zinc-100);
  --cab-surface-alt:color-mix(in oklch,var(--color-zinc-100),var(--color-zinc-200));
  --cab-border:var(--color-zinc-200);
  --cab-text:var(--color-zinc-700);
  --cab-text-sec:var(--color-zinc-500);
  --cab-text-dim:var(--color-zinc-400);
}
:root.dark{
  --cab-accent:var(--color-primary-lighter);
  --cab-accent-hover:var(--color-primary);
  --cab-accent-fg:#fff;
  --cab-bg:var(--color-zinc-900);
  --cab-surface:var(--color-zinc-800);
  --cab-surface-alt:var(--color-zinc-700);
  --cab-border:var(--color-zinc-700);
  --cab-text:var(--color-zinc-200);
  --cab-text-sec:var(--color-zinc-400);
  --cab-text-dim:var(--color-zinc-500);
}

/* ── Shared utilities ── */
.cab-section *{box-sizing:border-box;margin:0;padding:0}
.section-label{font-size:11px;font-weight:600;color:var(--cab-text-sec);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:12px;color:var(--cab-text-sec)}
.field input,.field textarea,.field select{font-size:13px;padding:7px 10px;border-radius:8px;border:1px solid var(--cab-border);background:var(--cab-bg);color:var(--cab-text);resize:none;font-family:inherit;outline:none;transition:border-color .15s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--cab-accent)}
.field textarea{min-height:70px}
.field-full{grid-column:1/-1}
.field-hint{font-size:11px;color:var(--cab-text-sec);margin-top:4px}
.btn-save{background:var(--cab-accent);color:var(--cab-accent-fg);border:none;border-radius:8px;padding:8px 18px;font-size:13px;font-weight:500;cursor:pointer;margin-top:4px;transition:background .15s}
.btn-save:hover{background:var(--cab-accent-hover)}
.btn-ghost{background:transparent;color:var(--cab-text-sec);border:1px solid var(--cab-border);border-radius:8px;padding:7px 14px;font-size:13px;cursor:pointer;transition:background .15s,color .15s}
.btn-ghost:hover{background:var(--cab-surface);color:var(--cab-text)}
.btn-row{display:flex;gap:10px;align-items:center}
.btn-sm{font-size:12px;padding:4px 10px}
.obs-label{font-size:11px;color:var(--cab-text-sec);margin-bottom:3px;margin-top:10px}
.obs-label:first-child{margin-top:0}
.obs-text{font-size:13px;white-space:pre-wrap;line-height:1.5}
.pill-ex{display:inline-block;background:var(--cab-surface);border:1px solid var(--cab-border);border-radius:20px;padding:2px 8px;font-size:11px;color:var(--cab-text-sec);margin:2px}
.internal-badge{display:inline-flex;align-items:center;gap:5px;background:#fff8e1;border:1px solid #ffe082;border-radius:6px;padding:5px 10px;font-size:11px;color:#7b5800;margin-bottom:14px}
.dark .internal-badge{background:#2a1f00;border-color:#5a4200;color:#f5c842}

/* ── Toasts ── */
.cab-toast-stack{position:fixed;right:16px;bottom:16px;z-index:120;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.cab-toast{max-width:360px;padding:10px 12px;border-radius:8px;border:1px solid var(--cab-border);background:var(--cab-bg);color:var(--cab-text);box-shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);font-size:13px;line-height:1.35}
.cab-toast.is-success{border-color:color-mix(in srgb,#3B6D11 35%,var(--cab-border));background:color-mix(in srgb,#3B6D11 9%,var(--cab-bg))}
.cab-toast.is-error{border-color:color-mix(in srgb,var(--cab-accent) 45%,var(--cab-border));background:color-mix(in srgb,var(--cab-accent) 9%,var(--cab-bg))}

/* ── Energie chips ── */
.energie-chip{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500}
.e-plein{background:color-mix(in srgb,#be011d 10%,transparent);color:var(--cab-accent);border:1px solid color-mix(in srgb,#be011d 25%,transparent)}
.e-vide{background:#e8f4fd;color:#185FA5;border:1px solid #b5d4f4}
.e-stase{background:#fff8e1;color:#7b5800;border:1px solid #ffe082}
.e-ok{background:#eaf3de;color:#3B6D11;border:1px solid #c0dd97}
.e-nd{background:var(--cab-surface);color:var(--cab-text-sec);border:1px solid var(--cab-border)}
.dark .e-vide{background:#0d2136;color:#64b5f6;border-color:#1e4d7b}
.dark .e-stase{background:#2a1f00;border-color:#5a4200;color:#f5c842}
.dark .e-ok{background:#0d2306;color:#81c784;border-color:#2e5e1e}

/* ── SMS template (grav sections) ── */
.sms-template{border-top:1px solid var(--cab-border);padding:10px 12px;background:var(--cab-bg)}
.sms-template-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:11px;font-weight:600;color:var(--cab-text-sec);text-transform:uppercase;letter-spacing:.4px}
.sms-copy-btn{padding:4px 8px;font-size:11px}
.sms-template textarea{width:100%;min-height:210px;padding:8px 9px;border:1px solid var(--cab-border);border-radius:8px;background:var(--cab-surface);color:var(--cab-text);font-size:12px;line-height:1.45;resize:vertical;font-family:inherit}
.grav-section .sms-template{border-top:1px dashed var(--cab-border);padding:10px 0 0;background:transparent}

/* ── Grav sections ── */
.grav-section{border:1px solid var(--cab-border);border-radius:8px;padding:14px;margin-bottom:20px;background:var(--cab-surface)}
.grav-section-title{font-size:11px;font-weight:600;color:var(--cab-text-sec);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.grav-section-link{justify-content:space-between;text-decoration:none;border:1px solid var(--cab-border);border-radius:8px;padding:10px 12px;color:var(--cab-text);background:var(--cab-bg);transition:border-color .15s,background .15s}
.grav-section-link:hover{border-color:var(--cab-accent);background:var(--cab-surface)}
.grav-section-open{margin-left:auto;color:var(--cab-accent);font-size:12px;font-weight:600;text-transform:none;letter-spacing:0}
.grav-dot{width:7px;height:7px;border-radius:50%;background:var(--cab-border);flex-shrink:0}
.grav-dot.found{background:#3B6D11}
.grav-dot.searching{background:#BA7517;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.grav-link{display:inline-flex;align-items:center;gap:6px;background:var(--cab-accent);color:var(--cab-accent-fg);text-decoration:none;border-radius:8px;padding:7px 14px;font-size:12px;font-weight:500;margin-top:8px;transition:background .15s}
.grav-link:hover{background:var(--cab-accent-hover)}
.btn-grav{background:transparent;color:var(--cab-accent);border:1px solid var(--cab-accent);border-radius:8px;padding:6px 12px;font-size:12px;cursor:pointer;transition:background .15s,color .15s}
.btn-grav:hover{background:var(--cab-accent);color:var(--cab-accent-fg)}
.btn-grav:disabled{opacity:.4;cursor:not-allowed}
.grav-uuid-display{font-family:ui-monospace,monospace;font-size:11px;color:var(--cab-text-sec);background:var(--cab-bg);border:1px solid var(--cab-border);border-radius:4px;padding:3px 7px;margin-top:4px;display:inline-block}
.settings-btn{background:none;border:1px solid var(--cab-border);border-radius:6px;padding:4px 8px;font-size:11px;color:var(--cab-text-sec);cursor:pointer;margin-left:auto;transition:background .12s}
.settings-btn:hover{background:var(--cab-surface-alt)}

/* ── Import: dynamic action-class colors (applied via JS actionClass()) ── */
.imp-create{color:#2a7a2a}
.imp-update{color:#1a5fa0}
.imp-skip{color:var(--cab-text-sec)}
.imp-error{color:#c0392b}
.dark .imp-create{color:#81c784}
.dark .imp-update{color:#64b5f6}
.dark .imp-error{color:#ef9a9a}

/* ── Verif: dynamic state colors (applied via JS :class binding) ── */
.verif-ok{color:var(--cab-accent)!important}
.verif-warn{color:#f59e0b!important}
.verif-footer-ok{color:var(--cab-accent)!important}
.verif-footer-warn{color:#f59e0b!important}

/* ── Responsive ── */
@media (max-width:768px){
  /* Mobile: toggle sidebar/main via client-open class on #app */
  #app.client-open .sidebar{display:none}
  #app.client-open .main{display:flex!important;height:calc(100dvh - 8rem)}
  /* Forms */
  .field-grid{grid-template-columns:1fr}
  .field-full{grid-column:1}
  /* 2-col stats on small screens */
  .stats-row{grid-template-columns:1fr 1fr}
  .stats-row .stat-card:last-child{grid-column:unset}
}