/* Training diary design system.
   Derived from the Claude Design prototype, see docs/design/design-system.md.
   Dark only by design: there is no light palette to fall back to. */

:root {
    --bg: #08090B;
    --surface: #0B0C0E;
    --card: #14161A;
    --card-raised: #191C21;
    --sheet: #121418;

    --border: #23272E;
    --border-dim: #1D2126;
    --border-strong: #2C3138;

    --text: #F2F4F5;
    --text-muted: #8B939C;
    --text-dim: #6E767F;
    --text-faint: #565E67;

    /* The prototype treats the accent as a swappable parameter.
       Alternatives it ships: #D6FF3E, #FF5A1F, #7C5CFF. */
    --accent: #00D3F2;
    --accent-on: #04262B;
    --accent-soft: rgba(0, 211, 242, 0.12);

    --danger: #FF5A1F;
    --danger-soft: rgba(255, 90, 31, 0.12);
    --success: #D6FF3E;

    --r-sm: 10px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-sheet: 20px;
    --r-pill: 999px;

    --sidebar-w: 232px;
    --tabbar-h: 62px;

    --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

/* Numbers must not jitter between rows of sets. */
.num, input[type="number"], .metric, table td, table th {
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: 28px; letter-spacing: -0.03em; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
p { margin: 0 0 12px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout ---------- */

.app {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    background: var(--bg);
}

.sidebar {
    display: none;
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    border-right: 1px solid var(--border-dim);
    background: var(--surface);
    padding: 24px 14px;
    flex-direction: column;
    gap: 28px;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar__brand { padding: 0 10px; }
.sidebar__title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.sidebar__user { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar__spacer { margin-top: auto; }

.sidebar__cta {
    display: block;
    padding: 13px 16px;
    border: none;
    border-radius: var(--r-md);
    background: var(--accent);
    color: var(--accent-on);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.sidebar__cta:hover { text-decoration: none; filter: brightness(1.08); }

.nav-item-link {
    display: block;
    padding: 11px 12px;
    border: none;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.nav-item-link:hover { background: var(--card); color: var(--text); text-decoration: none; }
.nav-item-link.active { background: var(--card-raised); color: var(--text); font-weight: 600; }

.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}

.page { padding: 26px 20px 30px; max-width: 760px; width: 100%; }

/* Bottom navigation replaces the sidebar below the desktop breakpoint. */
.tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--border-dim);
    background: rgba(11, 12, 14, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 6px 6px calc(10px + env(safe-area-inset-bottom, 0px));
}

.tabbar__item {
    flex: 1;
    padding: 9px 4px 6px;
    border: none;
    background: none;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.tabbar__item:hover { text-decoration: none; }
.tabbar__item.active { color: var(--text); }

.tabbar__dot {
    display: block;
    height: 3px;
    width: 18px;
    border-radius: 3px;
    margin: 0 auto 7px;
    background: transparent;
}
.tabbar__item.active .tabbar__dot { background: var(--accent); }

@media (min-width: 900px) {
    .sidebar { display: flex; }
    .tabbar { display: none; }
    .main { padding-bottom: 0; }
    .page { padding: 32px 32px 40px; }
}

/* ---------- Typography helpers ---------- */

.eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.metric { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; }
.metric--sm { font-size: 26px; }

/* ---------- Cards ---------- */

.card {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--card);
    padding: 18px;
}

.card__title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.card__body { margin-top: 12px; }
.card__meta { font-size: 13px; color: var(--text-muted); margin-top: 3px; }

.stat__value { margin-top: 8px; }
.stat__unit { font-size: 12px; color: var(--text-dim); }

/* Dashboard header: greeting left, week and month counts right. */
.dash__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}
.dash__streak {
    font-size: 13px;
    color: var(--text-muted);
    text-align: right;
    line-height: 1.45;
}

.stack { display: flex; flex-direction: column; gap: 14px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: var(--card);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: var(--accent-on); font-weight: 700; }
.btn-primary:hover { filter: brightness(1.08); }

.btn-secondary { background: var(--card); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--card-raised); }

.btn-danger { background: var(--danger); color: #1A0B04; font-weight: 700; }

.btn-link { background: none; border: none; color: var(--accent); padding: 0; font-weight: 600; }
.btn-link:hover { text-decoration: underline; }

.btn-lg { padding: 15px 20px; font-size: 15px; border-radius: var(--r-lg); }
.w-100 { width: 100%; }

/* The dashboard's primary action: label left, arrow right. */
.btn-hero {
    width: 100%;
    padding: 20px;
    border: none;
    border-radius: var(--r-lg);
    background: var(--accent);
    color: var(--accent-on);
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.btn-hero:hover { text-decoration: none; filter: brightness(1.08); }
.btn-hero__arrow { font-size: 22px; font-weight: 600; opacity: 0.7; }

/* ---------- Chips ---------- */

.chip {
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.chip-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }

/* ---------- Forms. Also covers the Bootstrap markup the Identity pages ship. ---------- */

label, .form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}

input, select, textarea, .form-control {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--card);
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus, .form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="checkbox"] { width: auto; accent-color: var(--accent); }

.check-row { display: flex; align-items: center; gap: 10px; }
.check-row label { margin: 0; color: var(--text); font-weight: 500; }

/* Bootstrap floating labels degrade to a plain stacked label here. */
.form-floating { display: flex; flex-direction: column; }
.form-floating > label { order: -1; padding: 0; position: static; }

.mb-3 { margin-bottom: 16px; }
.mt-2 { margin-top: 8px; }
.mx-auto { margin-left: auto; margin-right: auto; }

.text-danger { color: var(--danger); font-size: 13px; }
.text-success { color: var(--success); }
.text-secondary, .text-info { color: var(--text-muted); }

.validation-message, .validation-summary-errors { color: var(--danger); font-size: 13px; }
.validation-summary-errors ul { margin: 0; padding-left: 18px; }

/* ---------- Alerts and status ---------- */

.alert {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--card);
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 16px;
}
.alert-danger { border-color: var(--danger); background: var(--danger-soft); color: var(--text); }
.alert-warning { border-color: var(--border-strong); background: var(--card-raised); color: var(--text); }
.alert-info { border-color: var(--border); background: var(--card); }

/* ---------- Grid shims for the Identity pages ---------- */

.row { display: flex; flex-wrap: wrap; gap: 20px; }
.row > * { min-width: 0; }
.col-md-4, .col-lg-4 { flex: 1 1 280px; }
.col-lg-6, .col-xl-6 { flex: 1 1 320px; }
.flex-column { flex-direction: column; }

.nav { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-item { list-style: none; }
.nav-link {
    display: block;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.nav-link:hover { background: var(--card); color: var(--text); text-decoration: none; }
.nav-link.active { background: var(--card-raised); color: var(--text); font-weight: 600; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
table th, table td { padding: 10px 12px; border-bottom: 1px solid var(--border-dim); text-align: left; }
table th { color: var(--text-dim); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Auth screens ---------- */

.auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px 40px;
}

.auth__card { width: 100%; max-width: 420px; }
.auth__brand { text-align: center; margin-bottom: 28px; }
.auth__brand-name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.auth__brand-tag { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.auth__panel {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--card);
    padding: 24px 22px;
}
.auth__footer { margin-top: 20px; text-align: center; font-size: 13px; color: var(--text-muted); }
.auth hr { border: none; border-top: 1px solid var(--border-dim); margin: 20px 0; }

/* ---------- Menu list (the mobile "Mer" page) ---------- */

.menu-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--card);
    overflow: hidden;
}
.menu-list__item {
    padding: 16px 18px;
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}
.menu-list__item + .menu-list__item { border-top: 1px solid var(--border-dim); }
.menu-list__item:hover { background: var(--card-raised); text-decoration: none; }

.logout-form { margin-top: 20px; }

/* ---------- Empty states ---------- */

.empty {
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
    background: transparent;
    padding: 34px 22px;
    text-align: center;
}
.empty__title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.empty__body { font-size: 14px; color: var(--text-muted); margin: 8px auto 20px; max-width: 340px; }

/* ---------- Blazor plumbing ---------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    padding: 14px 20px;
    background: var(--danger);
    color: #1A0B04;
    font-size: 14px;
    font-weight: 600;
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

.blazor-error-boundary {
    padding: 16px;
    border-radius: var(--r-md);
    background: var(--danger-soft);
    border: 1px solid var(--danger);
    color: var(--text);
}