/* AKM Mobile — design tokens dari konsep UI v3 (di-acc user 2026-08-28).
   Amber oli di atas netral beton; Barlow Condensed / Barlow / IBM Plex Mono. */
:root {
    --amber: #E9A118;
    --amber-deep: #B87A0A;
    --amber-ink: #231A05;
    --ink: #1B2129;
    --sub: #66707C;
    --bg: #F7F8F6;
    --card: #FFFFFF;
    --line: #E3E6E2;
    --night: #3E4B8C;
    --ok: #2E9E5B;
    --danger: #C94F3D;
    --off: #ECEEEF;
    --font-display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
    --font-body: 'Barlow', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --nav-h: 68px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
}

#app { min-height: 100dvh; }

/* ---- app shell ---- */
.shell { min-height: 100dvh; display: flex; flex-direction: column; }
.shell-main { flex: 1; padding: 12px 14px calc(var(--nav-h) + 18px); max-width: 520px; width: 100%; margin: 0 auto; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 6px; }
.topbar h1 { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin: 0; }
.topbar .sub { font-size: 12px; color: var(--sub); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; margin-bottom: 10px; }
.card h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.muted { color: var(--sub); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.btn {
    display: block; width: 100%; text-align: center; border: 0; cursor: pointer;
    background: var(--amber); color: var(--amber-ink);
    font: 600 15px var(--font-body); border-radius: 12px; padding: 13px; min-height: 48px;
}
.btn:focus-visible, .navlink:focus-visible { outline: 3px solid var(--amber-deep); outline-offset: 2px; }
.btn.ghost { background: var(--card); border: 1px solid var(--line); color: var(--ink); }

.pill { display: inline-block; border-radius: 999px; padding: 4px 10px; font: 600 11px/1.2 var(--font-body); }
.pill.amb { background: #FBEFD8; color: #8A5B06; }
.pill.grn { background: #E2F2E8; color: #1F7042; }
.pill.red { background: #F9E4E0; color: #A03A2B; }
.pill.gry { background: var(--off); color: var(--sub); }

/* ---- bottom nav ---- */
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: flex; align-items: flex-end; justify-content: space-around;
    background: var(--card); border-top: 1px solid var(--line);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
}
.navlink {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-width: 56px; min-height: 48px; justify-content: flex-end;
    font-size: 10.5px; color: #8B949E; text-decoration: none;
}
.navlink svg { width: 22px; height: 22px; stroke: #8B949E; fill: none; stroke-width: 1.7; }
.navlink.active { color: var(--amber-deep); }
.navlink.active svg { stroke: var(--amber-deep); }
.navlink.mid { margin-top: -28px; }
.fab {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--amber); border: 4px solid var(--bg);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 16px -6px rgba(184, 122, 10, .55);
}
.fab svg { width: 26px; height: 26px; stroke: var(--amber-ink); fill: none; stroke-width: 2; }

/* ---- boot / loading (index.html) ---- */
.boot { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.boot-ring {
    width: 72px; height: 72px; border-radius: 50%;
    border: 5px solid var(--off); border-top-color: var(--amber);
    animation: boot-spin 1s linear infinite;
}
.boot-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: .02em; }
.loading-progress-text { font: 500 12px var(--font-mono); color: var(--sub); }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "memuat…"); }
@keyframes boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-ring { animation: none; } }

/* ---- error ui ---- */
#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    background: #F9E4E0; color: #A03A2B; padding: 12px 16px; font-size: 13px;
}
#blazor-error-ui .reload { color: #A03A2B; font-weight: 600; margin-left: 6px; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }