/* ============================================================================
   AksesKerja — design tokens (from AksesKerja Design System)
   Fonts via Google CDN (Plus Jakarta Sans + Material Symbols).
   ============================================================================ */
@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 {
  /* Brand */
  --brand-blue:#2563EB; --brand-blue-hover:#1D4ED8; --brand-blue-dark:#1E40AF;
  --brand-blue-light:#EFF6FF; --brand-navy:#1E3A8A; --brand-charcoal:#1E293B;
  --brand-teal:#008080; --brand-teal-hover:#006666; --brand-teal-accent:#08E9B2;
  /* Semantic */
  --success:#10B981; --success-soft:#ECFDF5; --success-ink:#047857;
  --warning:#F59E0B; --warning-soft:#FFFBEB; --warning-ink:#B45309;
  --danger:#DC2626; --danger-hover:#B91C1C; --danger-strong:#EF4444; --danger-soft:#FEF2F2;
  /* Surfaces */
  --bg-app:#F8FAFC; --bg-tinted:#F0F7FF; --bg-tinted-2:#F8FAFF; --surface:#FFFFFF; --surface-muted:#F8FAFC;
  /* Ink */
  --ink-900:#0F172A; --ink-800:#1E293B; --ink-700:#334155; --ink-600:#475569;
  --ink-500:#64748B; --ink-400:#94A3B8; --ink-300:#CBD5E1; --border:#E2E8F0; --border-soft:#F1F5F9;
  /* Radius */
  --radius-sm:4px; --radius:8px; --radius-btn:10px; --radius-md:12px; --radius-card:16px; --radius-lg:24px; --radius-pill:9999px;
  /* Page container — nav bar and all page content share this width (DS max width) */
  --page-max:1280px;
  /* Scrollbar gutter reserved by .scrollarea — the top bar mirrors it so nav and content align */
  --scrollbar-w:9px;
  /* Elevation */
  --shadow-sm:0 1px 2px 0 rgba(15,23,42,.05);
  --shadow-md:0 4px 12px -2px rgba(15,23,42,.08);
  --shadow-lg:0 10px 25px -5px rgba(15,23,42,.10),0 8px 10px -6px rgba(15,23,42,.10);
  --shadow-cta:0 10px 20px -6px rgba(37,99,235,.30);
  /* Spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  /* Type */
  --font-sans:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  /* Tweakable knobs (overridden by Tweaks panel) */
  --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; }
/* Two-class selector beats the DS typography.css single-class .material-symbols-outlined
   (FILL 0, loaded last) so <Icon fill/> actually fills. */
.material-symbols-outlined.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-success { background:var(--success-ink); color:#fff; }
.btn-success:hover { background:#036848; }
.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; white-space:nowrap; }
.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:#10B981; }
.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); color:var(--ink-800); outline:none; transition:all .15s; }
.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} }

/* ---- Confirmation dialog (irreversible actions) ------------------------------
   Used for accepting/declining an offer. Facts are restated before the decision
   so the user confirms against the real position and company, not just a verb. */
.cfm { padding:26px; text-align:center; }
.cfm-ic { width:52px; height:52px; border-radius:var(--radius-md); margin:0 auto var(--space-4);
  display:flex; align-items:center; justify-content:center; }
.cfm h3 { font-size:var(--headline-md-size); font-weight:800; color:var(--ink-900); letter-spacing:-.01em; margin:0; }
.cfm p { font-size:var(--body-md-size); font-weight:600; color:var(--ink-500); line-height:1.6;
  margin:var(--space-2) 0 0; text-wrap:pretty; }
.cfm-rows { display:flex; flex-direction:column; margin-top:var(--space-5);
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; text-align:left; }
.cfm-rows > div { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); padding:11px 14px; }
.cfm-rows > div + div { border-top:1px solid var(--border-soft); }
.cfm-rows span { font-size:var(--label-md-size); font-weight:600; color:var(--ink-500); flex:none; }
.cfm-rows b { font-size:var(--label-md-size); font-weight:800; color:var(--ink-900); text-align:right; min-width:0; overflow-wrap:anywhere; }
.cfm-acts { display:flex; gap:var(--space-2); margin-top:var(--space-5); }
.cfm-acts .btn { flex:1; justify-content:center; }