/* ============================================================================
   AksesKerja — lapisan aplikasi di atas bundel sistem desain.

   Nilai token TIDAK didefinisikan di sini. Warna, tipografi, jarak, radius, dan
   elevasi datang dari _ds/…/tokens/*.css yang dimuat sebelum berkas ini. Yang
   tinggal di sini hanya tiga hal: koreksi satu cacat pada bundel, token yang
   memang milik aplikasi, dan primitif UI-nya.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
  /* Koreksi bundel: elevation.css mendeklarasikan --border dan --border-soft
     merujuk dirinya sendiri ("1px solid var(--border)"), sehingga keduanya batal
     dan setiap garis 1px di aplikasi tidak tergambar. Warna slate dari
     colors.css ditegaskan ulang di sini. Hapus baris ini hanya setelah bundel
     diperbaiki di sumbernya. */
  --border:#E2E8F0; --border-soft:#F1F5F9;

  /* Token milik aplikasi — tidak ada di bundel.
     Bundel menyediakan --success dan --warning beserta latar lembutnya, tapi
     tidak versi gelap untuk teks: #10B981 di atas putih hanya 2,2:1. Dua token
     ini yang dipakai setiap label hijau/kuning agar lolos 1.4.3. */
  --success-ink:#047857;    /* teks hijau di atas latar terang — 4,8:1 */
  --warning-ink:#B45309;    /* teks kuning di atas latar terang — 4,6:1 */
  --radius-btn:10px;        /* radius tombol & segmented control */

  /* Knob yang bisa diubah dari panel Tweaks. */
  --t-accent:#2563EB;
  --t-radius-card:16px;
  --t-row-pad:13px;
}

* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; font-family:var(--font-sans); color:var(--ink-900); background:var(--bg-app);
  -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font-family:var(--font-sans); }
button { cursor:pointer; }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:var(--ink-300); border-radius:9999px; }
::-webkit-scrollbar-track { background:transparent; }

.material-symbols-outlined { font-family:'Material Symbols Outlined'; font-weight:normal; font-style:normal;
  line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap;
  word-wrap:normal; direction:ltr; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20; user-select:none; }
.material-symbols-rounded { font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal;
  line-height:1; display:inline-block; white-space:nowrap; direction:ltr;
  font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; vertical-align:middle; user-select:none; }
.fill { font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 20; }

/* ---- type helpers ---- */
.eyebrow { font-size:var(--eyebrow-size); font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-400); }
h1,h2,h3,h4,p { margin:0; }

/* ============================================================================
   Generic primitives
   ============================================================================ */
/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); border:1px solid transparent;
  border-radius:var(--radius-btn); font-family:var(--font-sans); font-weight:700; font-size:var(--body-md-size);
  padding:11px var(--space-5); transition:all .15s; white-space:nowrap; }
.btn .material-symbols-outlined { font-size:var(--headline-md-size); }
.btn-primary { background:var(--t-accent); color:#fff; box-shadow:var(--shadow-cta); }
.btn-primary:hover { background:var(--brand-blue-hover); }
.btn:active { transform:scale(.98); }
.btn-ghost { background:var(--surface-muted); color:var(--ink-700); }
.btn-ghost:hover { background:var(--border-soft); color:var(--brand-blue); }
.btn-outline { background:#fff; color:var(--ink-700); border:1px solid var(--border); }
.btn-outline:hover { border-color:var(--ink-300); color:var(--brand-blue); box-shadow:var(--shadow-sm); }
.btn-soft { background:var(--brand-blue-light); color:var(--t-accent); }
.btn-soft:hover { background:#DBEAFE; }
.btn-danger { background:#fff; border:1px solid var(--danger); color:var(--danger-strong); }
.btn-danger:hover { background:var(--danger-soft); }
.btn-sm { padding:7px 14px; font-size:var(--label-sm-size); }
.btn-lg { padding:14px 26px; font-size:var(--body-md-size); }
.btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn:disabled:hover { box-shadow:none; }
.btn:disabled:active { transform:none; }

/* Keyboard focus ring (a11y) — mouse clicks stay clean via :focus-visible */
.btn:focus-visible, .icobtn:focus-visible, .seg button:focus-visible, .pswitch button:focus-visible,
.chip:focus-visible, a:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--brand-blue); outline-offset:2px; border-radius:var(--radius-btn); }

/* icon button */
.icobtn { width:40px; height:40px; border-radius:9999px; border:1px solid var(--border); background:#fff;
  display:flex; align-items:center; justify-content:center; transition:all .15s; flex:none; }
.icobtn:hover { border-color:var(--ink-300); box-shadow:var(--shadow-sm); color:var(--brand-blue); }
.icobtn:active { transform:scale(.95); }
.icobtn .material-symbols-outlined { font-size:var(--headline-md-size); color:var(--ink-600); }
.icobtn:hover .material-symbols-outlined { color:var(--brand-blue); }

/* chips */
.chip { display:inline-flex; align-items:center; gap:5px; padding:var(--space-1) 11px; border-radius:9999px;
  font-size:var(--label-sm-size); font-weight:700; line-height:1; }
.chip-blue { background:rgba(37,99,235,.10); color:var(--t-accent); }
.chip-teal { background:rgba(0,128,128,.10); color:var(--brand-teal); }
.chip-green { background:var(--success-soft); color:var(--success-ink); }
.chip-amber { background:var(--warning-soft); color:var(--warning-ink); }
.chip-slate { background:var(--surface-muted); color:var(--ink-600); border:1px solid var(--border); }
.chip-red { background:var(--danger-soft); color:var(--danger); }

/* badges */
.pro-badge { background:var(--t-accent); color:#fff; font-size:var(--eyebrow-size); font-weight:900; letter-spacing:.04em;
  padding:2px var(--space-2); border-radius:9999px; }
.new-badge { background:var(--brand-blue); color:#fff; font-size:var(--eyebrow-size); font-weight:900;
  padding:2px var(--space-2); border-radius:9999px; }

/* inputs */
.input { width:100%; padding:11px 15px; background:var(--surface-muted); border:1px solid var(--border);
  border-radius:var(--radius); font-size:var(--body-md-size); line-height:1.25; color:var(--ink-800);
  outline:none; transition:all .15s; box-sizing:border-box; font-family:inherit; }
.input::placeholder { color:var(--ink-400); }
.input:focus { border-color:var(--brand-blue); box-shadow:0 0 0 3px var(--brand-blue-light); background:#fff; }
.input-pill { border-radius:9999px; }
textarea.input { resize:vertical; line-height:1.55; }
.field-label { display:block; font-size:var(--eyebrow-size); font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-400); margin-bottom:7px; }

/* search */
.search { position:relative; }
.search .material-symbols-outlined { position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--ink-400); font-size:var(--headline-md-size); pointer-events:none; }
.search input { width:100%; padding:11px var(--space-4) 11px 42px; background:var(--surface-muted); border:1px solid var(--border);
  border-radius:9999px; font-size:var(--body-md-size); color:var(--ink-700); outline:none; transition:all .15s; }
.search input:focus { border-color:var(--brand-blue); box-shadow:0 0 0 3px var(--brand-blue-light); background:#fff; }

/* toggle */
.toggle { width:42px; height:24px; background:var(--t-accent); border-radius:9999px; position:relative;
  flex:none; border:none; transition:background .15s; }
.toggle::after { content:''; position:absolute; top:2px; right:2px; width:20px; height:20px; background:#fff;
  border-radius:9999px; box-shadow:var(--shadow-sm); transition:all .15s; }
.toggle.off { background:var(--ink-300); }
.toggle.off::after { right:auto; left:2px; }

/* avatar */
.av { border-radius:9999px; color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; flex:none; overflow:hidden; background-size:cover; background-position:center; }
.av img { width:100%; height:100%; object-fit:cover; }

/* card */
.card { background:#fff; border:1px solid var(--border); border-radius:var(--t-radius-card);
  box-shadow:var(--shadow-sm); }

/* segmented control — matches button radius (10px) so toggles read as buttons */
.seg { display:inline-flex; gap:3px; background:var(--surface-muted); padding:3px; border-radius:var(--radius-btn); }
.seg button { border:none; background:transparent; padding:var(--space-2) var(--space-4); border-radius:var(--radius); font-size:var(--label-md-size);
  font-weight:700; color:var(--ink-500); display:inline-flex; align-items:center; gap:6px; transition:all .15s; }
.seg button.on { background:#fff; color:var(--t-accent); box-shadow:var(--shadow-sm); }
.seg .c { background:var(--ink-300); color:#fff; font-size:var(--eyebrow-size); font-weight:800; padding:1px 6px;
  border-radius:9999px; min-width:16px; text-align:center; }
.seg button.on .c { background:var(--t-accent); }

/* match ring */
.ring { position:relative; flex:none; }
.ring svg { transform:rotate(-90deg); display:block; }
.ring .rv { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring .rv .pct { font-weight:800; color:var(--t-accent); letter-spacing:-.02em; line-height:1; }
.ring .rv .cap { font-size:var(--eyebrow-size); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-400); margin-top:3px; }

/* modal */
.scrim { position:fixed; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:80; padding:var(--space-6); animation:fade .18s ease; }
.modal { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%;
  max-height:92vh; overflow:auto; animation:pop .2s cubic-bezier(.2,.8,.3,1); }
@keyframes fade { from{opacity:0} }
@keyframes pop { from{opacity:0; transform:translateY(12px) scale(.98)} }

/* tip banner */
.tip { display:flex; gap:10px; align-items:flex-start; background:var(--bg-tinted); border:1px solid rgba(37,99,235,.14);
  border-radius:var(--radius-md); padding:var(--space-3) 14px; font-size:var(--label-md-size); font-weight:600; color:var(--ink-600); line-height:1.5; }

/* divider */
.hr { height:1px; background:var(--border-soft); border:none; margin:0; }

/* utility */
.row { display:flex; align-items:center; }
.spacer { flex:1; }
.muted { color:var(--ink-500); }
.fadein { animation:fade .25s ease; }
@media (prefers-reduced-motion:reduce){ *{animation:none!important} }