/* ══════════════════════════════════════════════════════════════════════════
   ui.css — Design system bersama Loket Tatap Muka Virtual
   Satu sumber kebenaran untuk token warna, radius, glass, dan tombol.
   Dimuat SETELAH Fomantic UI agar bisa menimpa gaya default-nya.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Brand — SATU navy untuk seluruh aplikasi */
  --navy:#0f172a;
  --navy-2:#0b1222;         /* strip/panel lebih gelap di atas navy */
  --blue:#2563eb;
  --blue-2:#1d4ed8;
  --blue-soft:#eff6ff;
  --accent:#4d87f5;         /* aksen aktif sidebar */

  /* Kanvas */
  --canvas:linear-gradient(160deg,#eef4fc 0%,#e8f0fa 55%,#e6ecf8 100%);
  --canvas-staff:#f6f8fb;

  /* Glass (light) */
  --glass-bg:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.65);
  --glass-blur:saturate(160%) blur(18px);
  --glass-shadow:0 8px 32px rgba(15,23,42,.08);

  /* Skala radius — hanya 4 nilai */
  --r-card:18px;
  --r-inner:12px;
  --r-input:10px;
  --r-pill:999px;

  /* Teks & garis */
  --ink:#0f172a;
  --ink-2:#334155;
  --muted:#64748b;
  --faint:#94a3b8;
  --line:#e6ebf1;

  /* Status soft-flat */
  --ok:#10b981;   --ok-ink:#059669;   --ok-soft:#ecfdf5;
  --warn:#f59e0b; --warn-ink:#d97706; --warn-soft:#fffbeb;
  --err:#ef4444;  --err-ink:#dc2626;  --err-soft:#fef2f2;
}

/* ── Kartu glass ─────────────────────────────────────────────────────────── */
.glass{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-card);
  box-shadow:var(--glass-shadow);
}
.glass-inner{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r-inner);
}

/* ── Header publik glass (dipakai partial pub-header) ────────────────────── */
.glass-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.65);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid rgba(255,255,255,.75);
  padding:.875rem 2rem;
  display:flex;align-items:center;justify-content:space-between;
}
.glass-header .gh-logo{
  width:40px;height:40px;border-radius:12px;object-fit:contain;
  background:#fff;padding:3px;flex-shrink:0;
  box-shadow:0 1px 4px rgba(15,23,42,.1);
}
.glass-header .gh-name{color:var(--ink);font-weight:700;font-size:.9rem;line-height:1.3}
.glass-header .gh-owner{color:var(--faint);font-size:.72rem;font-weight:500}

/* ── Tombol flat (tanpa gradient) ────────────────────────────────────────── */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:var(--blue);color:#fff;border:none;
  border-radius:var(--r-input);font-weight:700;cursor:pointer;
  transition:background .15s,box-shadow .15s;
  box-shadow:0 2px 8px rgba(37,99,235,.22);
}
.btn-primary:hover{background:var(--blue-2);color:#fff}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}

.btn-soft{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:#f1f5f9;color:var(--muted);border:none;
  border-radius:var(--r-input);font-weight:700;cursor:pointer;transition:background .15s;
}
.btn-soft:hover{background:#e2e8f0;color:var(--ink-2)}

/* ── Chip/pill status ────────────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:.35rem;border-radius:var(--r-pill);
  font-size:.7rem;font-weight:700;padding:.28rem .7rem;white-space:nowrap}
.pill-ok{color:var(--ok-ink);background:var(--ok-soft)}
.pill-warn{color:var(--warn-ink);background:var(--warn-soft)}
.pill-err{color:var(--err-ink);background:var(--err-soft)}
.pill-blue{color:var(--blue);background:var(--blue-soft)}

/* ── Override ringan Fomantic agar seluruh app konsisten ─────────────────── */
.ui.primary.button{background:var(--blue)!important;border-radius:var(--r-input)!important}
.ui.primary.button:hover{background:var(--blue-2)!important}
.ui.button{border-radius:var(--r-input)!important;font-weight:700!important}
.ui.modal{border-radius:var(--r-card)!important;overflow:hidden}