/* CloviCRM — CloviDOS resolved token set (platform=clovicrm, AA-checked)
   Source: GET /api/v1/context/clovicrm (light + dark). Do not hand-edit colors;
   re-pull from CloviDOS if the brand token changes. */
:root{
  --primary:#0E7C66; --primary-hover:#0c6d5a; --primary-active:#0a5c4c; --on-primary:#ffffff;
  --surface:#ffffff; --surface-2:#f6f8f8; --surface-3:#eceff0; --surface-inverse:#0c1415;
  --border:#d8dedf; --border-strong:#b4bdbe;
  --text:#0c1415; --text-muted:#566061; --text-subtle:#8a9495; --text-inverse:#f6f8f8;
  --success:#157347; --warning:#a15c00; --danger:#c2362f; --info:#0066cc;
  --raise:#0E7C66; --operate:#1565C0; /* two-views accent pair (both AA on white) */
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --radius:12px; --radius-sm:8px; --shadow:0 1px 3px rgba(12,20,21,.08),0 1px 2px rgba(12,20,21,.04);
  --shadow-lg:0 10px 30px rgba(12,20,21,.12); --focus:0 0 0 3px rgba(14,124,102,.45);
  --max:1180px;
}
[data-theme="dark"]{
  --primary:#3ba9af; --primary-hover:#54b9be; --primary-active:#2e9197; --on-primary:#04201f;
  --surface:#0c1415; --surface-2:#141d1e; --surface-3:#1d2829; --surface-inverse:#f6f8f8;
  --border:#2a3637; --border-strong:#3a484a;
  --text:#f6f8f8; --text-muted:#9aa4a5; --text-subtle:#74807f; --text-inverse:#0c1415;
  --raise:#3ba9af; --operate:#6db3f2;
  --shadow:0 1px 3px rgba(0,0,0,.4); --shadow-lg:0 12px 32px rgba(0,0,0,.5);
  --focus:0 0 0 3px rgba(59,169,175,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--text);background:var(--surface);
  -webkit-font-smoothing:antialiased;line-height:1.55;font-size:16px}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;margin:0 0 .4em;letter-spacing:-.01em}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
img{max-width:100%;display:block}

/* ── CloviDOS: button ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;cursor:pointer;
  padding:.65rem 1.2rem;border-radius:var(--radius-sm);border:1px solid transparent;
  transition:background .15s,box-shadow .15s,transform .05s;text-decoration:none;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-hover);text-decoration:none}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface-2);text-decoration:none}
.btn-sm{padding:.4rem .75rem;font-size:.85rem}
.btn-block{width:100%}

/* ── CloviDOS: card / stat-card ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.4rem;box-shadow:var(--shadow)}
.stat-card .label{color:var(--text-muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.stat-card .value{font-family:var(--font-display);font-size:1.9rem;font-weight:700;margin-top:.2rem}

/* ── badge / chip ── */
.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:600;
  padding:.18rem .55rem;border-radius:999px;background:var(--surface-3);color:var(--text-muted)}
.badge-raise{background:color-mix(in srgb,var(--raise) 16%,transparent);color:var(--raise)}
.badge-operate{background:color-mix(in srgb,var(--operate) 16%,transparent);color:var(--operate)}

/* ── form-field / inputs ── */
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem}
.field label{font-size:.82rem;font-weight:600;color:var(--text-muted)}
.input,.select,.textarea{font-family:var(--font-body);font-size:.95rem;color:var(--text);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:.6rem .75rem;width:100%}
.input:focus,.select:focus,.textarea:focus{outline:none;box-shadow:var(--focus);border-color:var(--primary)}

/* ── empty-state ── */
.empty{text-align:center;padding:3rem 1.5rem;color:var(--text-muted)}
.empty .ico{width:54px;height:54px;border-radius:50%;background:var(--surface-3);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;color:var(--primary)}
.empty h3{color:var(--text);margin-bottom:.3rem}

.skel{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);
  background-size:200% 100%;animation:sk 1.2s infinite;border-radius:6px;height:1rem}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}