@import url('tokens.css');

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    font-family: var(--font-body);
    color: var(--color-fg);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    line-height: 1.45;
}
#app { height: 100%; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── Utility classes (mirrors prototype/theme.css) ───────────── */
.display  { font-family: var(--font-display); }
.mono     { font-family: var(--font-mono); }
.tabnums  { font-variant-numeric: tabular-nums; }

/* ── App shell — responsive ──────────────────────────────────── */
/* min-height:100vh = shell vult altijd het scherm.
   padding-bottom = ruimte vrijhouden voor de fixed TabBar zodat
   page-content niet onder de bar verdwijnt. Tabbar-hoogte ≈ 64px.
   Breakpoints:
     - < 768px (mobiel):       420px centered, geen side-borders op echte phones
     - 768px - 1199px (iPad):  vol scherm, geen borders
     - >= 1200px (desktop):    1200px centered met side-borders als preview-kader */
.phone-shell {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    min-height: 100vh;
    padding-bottom: 64px;
    background: var(--color-bg);
    position: relative;
    border-left: 1.5px solid var(--color-border);
    border-right: 1.5px solid var(--color-border);
}
@media (max-width: 420px) {
    .phone-shell { border-left: none; border-right: none; }
}
@media (min-width: 768px) {
    .phone-shell {
        max-width: none;
        border-left: none;
        border-right: none;
    }
}
@media (min-width: 1200px) {
    .phone-shell {
        max-width: 1200px;
        border-left: 1.5px solid var(--color-border);
        border-right: 1.5px solid var(--color-border);
    }
}

/* ── Scrollbar — minimal ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--color-border-soft); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Blazor framework error UI ───────────────────────────────── */
#blazor-error-ui {
    background: var(--color-fg);
    color: var(--color-bg);
    border-top: 1.5px solid var(--color-fg);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}
.loading-progress-text {
    display: none;
}