/* ------------------------------------------------------------------------------------------
   Zafe employer portal.

   A small design system rather than ad-hoc rules: tokens first, then primitives, then the
   handful of components the three screens need. The portal is employer-branded, so the palette
   is deliberately restrained and everything that could be a brand decision is a custom property
   — reskinning for a customer should be a dozen values, not a rewrite.

   No webfont, no CDN, no framework. A lending portal has a strict content security policy ahead
   of it, and every external request is something that will need an exception.
   ------------------------------------------------------------------------------------------ */

:root {
    color-scheme: light dark;

    /* Brand. Indigo reads as financial without the retail-bank blue everybody else uses. */
    --brand-700: #312e81;
    --brand-600: #3730a3;
    --brand-500: #4f46e5;
    --brand-100: #e0e7ff;

    --ink-900: #0f1222;
    --ink-700: #2d3142;
    --ink-500: #5b6076;
    --ink-400: #8b90a4;

    --surface: #ffffff;
    --surface-sunken: #f5f6fa;
    --surface-raised: #ffffff;
    --line: #e4e6ef;
    --line-strong: #cfd2e0;

    --positive-700: #14532d;
    --positive-100: #dcfce7;
    --warning-700: #854d0e;
    --warning-100: #fef3c7;
    --danger-700: #991b1b;
    --danger-600: #b91c1c;
    --danger-100: #fee2e2;

    --radius: 10px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 2px rgba(15, 18, 34, .06), 0 1px 3px rgba(15, 18, 34, .04);
    --shadow-md: 0 4px 12px rgba(15, 18, 34, .08);

    --sidebar: 15rem;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        "Noto Sans", sans-serif;
    /* Tabular figures so a column of money lines up. Proportional digits make 1,111 narrower
       than 8,888 and a column of them look crooked. */
    --font-numeric: "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --brand-700: #c7d2fe;
        --brand-600: #a5b4fc;
        --brand-500: #818cf8;
        --brand-100: #27284d;

        --ink-900: #f3f4f8;
        --ink-700: #d7d9e3;
        --ink-500: #9ca1b5;
        --ink-400: #71768a;

        --surface: #0f1117;
        --surface-sunken: #0b0d12;
        --surface-raised: #161922;
        --line: #272b36;
        --line-strong: #363b49;

        --positive-700: #86efac;
        --positive-100: #14321f;
        --warning-700: #fcd34d;
        --warning-100: #3a2e10;
        --danger-700: #fca5a5;
        --danger-600: #f87171;
        --danger-100: #3a1d1d;

        --shadow-sm: none;
        --shadow-md: 0 4px 16px rgba(0, 0, 0, .5);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-900);
    background: var(--surface-sunken);
    -webkit-font-smoothing: antialiased;
}

/* --- Shell ------------------------------------------------------------------------------- */

.shell {
    display: grid;
    grid-template-columns: var(--sidebar) 1fr;
    min-height: 100vh;
}

.sidebar {
    background: var(--brand-700);
    color: #fff;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sidebar .wordmark {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    letter-spacing: -.01em;
    font-size: 1.05rem;
}

.sidebar .mark {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, .16);
    font-size: .95rem;
}

.sidebar .tagline {
    font-size: .75rem;
    font-weight: 500;
    opacity: .7;
    margin: .2rem 0 0 2.35rem;
}

.sidebar nav { display: flex; flex-direction: column; gap: .15rem; }

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .7rem;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    transition: background .12s ease, color .12s ease;
}

.sidebar nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar nav a.active { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; }
.sidebar nav a svg { width: 1.05rem; height: 1.05rem; flex: none; opacity: .9; }

.sidebar .whoami {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .8rem;
}

.sidebar .whoami .name { font-weight: 600; word-break: break-all; }
.sidebar .whoami .role { opacity: .65; }

.content { padding: 2rem 2.25rem 3rem; max-width: 72rem; }

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

h1 {
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -.015em;
    margin: 0 0 .35rem;
}

.page-lede { margin: 0 0 1.75rem; color: var(--ink-500); font-size: .925rem; }

h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .25rem; }

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

.card {
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card + .card { margin-top: 1.25rem; }

.card-head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.card-head .meta { color: var(--ink-500); font-size: .85rem; }

/* Anything in a card that is not a table carries its own padding, because the card has none —
   a table has to reach the edges, so the padding cannot live on the container. */
.card-body { padding: 1.1rem 1.25rem; }
.card-body + .card-body { padding-top: 0; }

.card-foot {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--surface-sunken);
}

/* --- Summary strip ----------------------------------------------------------------------- */

.stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

.stat {
    flex: 1 1 10rem;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .9rem 1.1rem;
    box-shadow: var(--shadow-sm);
}

.stat .label {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--ink-400);
}

.stat .value {
    display: block;
    font-size: 1.35rem;
    font-weight: 650;
    letter-spacing: -.02em;
    margin-top: .15rem;
}

/* --- Tables ------------------------------------------------------------------------------ */

table { border-collapse: collapse; width: 100%; font-size: .9rem; }

thead th {
    text-align: left;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-400);
    font-weight: 600;
    padding: .7rem 1.25rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface-sunken);
    white-space: nowrap;
}

tbody td {
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--brand-100) 35%, transparent); }

.numeric {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

th.numeric { text-align: right; }

.person { display: flex; align-items: center; gap: .65rem; }

.avatar {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 50%;
    background: var(--brand-100);
    color: var(--brand-600);
    font-size: .75rem;
    font-weight: 700;
}

.person .who { line-height: 1.25; }
.person .who .primary { font-weight: 600; }
.person .who .secondary { color: var(--ink-500); font-size: .8rem; }

/* --- Badges ------------------------------------------------------------------------------ */

.badge {
    display: inline-block;
    padding: .18rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.badge-positive { background: var(--positive-100); color: var(--positive-700); }
.badge-warning { background: var(--warning-100); color: var(--warning-700); }
.badge-danger { background: var(--danger-100); color: var(--danger-700); }
.badge-neutral { background: var(--surface-sunken); color: var(--ink-500); border: 1px solid var(--line); }

/* --- Controls ---------------------------------------------------------------------------- */

button, .button {
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    padding: .5rem .9rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, opacity .12s ease;
    white-space: nowrap;
}

.button-primary { background: var(--brand-500); color: #fff; }
.button-primary:hover:not(:disabled) { background: var(--brand-600); }

.button-quiet {
    background: var(--surface-raised);
    color: var(--ink-700);
    border-color: var(--line-strong);
}

.button-quiet:hover:not(:disabled) { background: var(--surface-sunken); }

.button-danger { background: transparent; color: var(--danger-600); border-color: var(--danger-600); }
.button-danger:hover:not(:disabled) { background: var(--danger-100); }

button:disabled { opacity: .45; cursor: not-allowed; }

input[type=text], input[type=number], input[type=email], input[type=password], select {
    font: inherit;
    font-size: .875rem;
    padding: .45rem .6rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: inherit;
    width: 100%;
}

/* Not inheriting the number input's right alignment, and tall enough to match a text field
   rather than sitting a couple of pixels short beside one. */
select { min-height: 2.1rem; }

input:focus-visible, button:focus-visible, a:focus-visible, select:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
}

input.is-invalid { border-color: var(--danger-600); }
input[type=number] { font-family: var(--font-numeric); text-align: right; }

.field-label {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--ink-400);
    margin-bottom: .2rem;
}

.decision { display: flex; align-items: flex-start; gap: .5rem; justify-content: flex-end; }
.decision .reason { min-width: 11rem; }

/* --- States ------------------------------------------------------------------------------ */

.notice {
    display: flex;
    gap: .6rem;
    padding: .75rem 1rem;
    border-radius: var(--radius);
    font-size: .875rem;
    margin-bottom: 1.25rem;
}

.notice-error { background: var(--danger-100); color: var(--danger-700); }
.notice-success { background: var(--positive-100); color: var(--positive-700); }
.notice-warning { background: var(--warning-100); color: var(--warning-700); }

.hint { color: var(--danger-600); font-size: .78rem; display: block; margin-top: .25rem; }

.empty {
    padding: 3rem 1.25rem;
    text-align: center;
    color: var(--ink-500);
}

.empty .icon { font-size: 1.75rem; opacity: .4; display: block; margin-bottom: .5rem; }
.empty .headline { font-weight: 600; color: var(--ink-700); }

/* Skeletons rather than the word "Loading". A block where the content will be tells the eye
   the shape of what is coming; a spinner tells it only to wait. */
.skeleton { padding: 1.25rem; }

.skeleton .bar {
    height: .85rem;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--line) 25%, var(--surface-sunken) 50%, var(--line) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite linear;
    margin-bottom: .7rem;
}

.skeleton .bar:nth-child(2) { width: 85%; }
.skeleton .bar:nth-child(3) { width: 60%; }

@keyframes shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton .bar { animation: none; }
}

/* --- Progress ----------------------------------------------------------------------------- */

/* How much of a loan is repaid. A borrower's first question is not the balance, it is how far
   through they are, and a number alone does not answer that at a glance. */

.progress {
    height: .5rem;
    border-radius: 999px;
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    overflow: hidden;
}

.progress > span {
    display: block;
    height: 100%;
    background: var(--brand-500);
    border-radius: 999px;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    color: var(--ink-500);
    margin-bottom: .35rem;
}

/* --- Fact lists --------------------------------------------------------------------------- */

/* Label-and-value pairs: a limit, a deadline, what a deduction will be. A table for two columns
   of four rows reads as data to be scanned rather than as facts to be read. */

.facts { display: grid; gap: .9rem 2rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: 0; }

.facts > div { min-width: 0; }

.facts dt {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--ink-400);
    margin-bottom: .15rem;
}

.facts dd { margin: 0; font-weight: 600; color: var(--ink-900); }
/* Tabular figures, but still left-aligned under their label. The .numeric right-alignment is
   for table columns, where the digits line up with the rows above and below; in a label-and-value
   pair there is nothing to line up with and it reads as a mistake. */
.facts dd.numeric {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    text-align: left;
}

/* --- Signed out -------------------------------------------------------------------------- */

.signed-out { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }

.signed-out .card { max-width: 24rem; text-align: center; padding: 2.25rem 2rem; }
.signed-out .mark {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 1rem;
    border-radius: 12px;
    background: var(--brand-500);
    color: #fff;
    font-weight: 700;
}

.signed-out p { color: var(--ink-500); margin: .25rem 0 1.5rem; }

.button-lg { padding: .65rem 1.4rem; font-size: .95rem; display: inline-block; text-decoration: none; }

/* --- Blazor's own error banner ------------------------------------------------------------
   Blazor reveals this itself when the app faults. Without the rule it shows on every healthy
   page, telling the user something went wrong when nothing has. */

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    padding: .75rem 1.25rem;
    background: var(--danger-100);
    color: var(--danger-700);
    border-top: 1px solid var(--danger-600);
    font-size: .875rem;
}

/* --- Narrow screens ----------------------------------------------------------------------- */

@media (max-width: 52rem) {
    .shell { grid-template-columns: 1fr; }
    .sidebar { flex-direction: row; align-items: center; gap: 1rem; padding: .75rem 1rem; }
    .sidebar .tagline, .sidebar .whoami { display: none; }
    .sidebar nav { flex-direction: row; margin-left: auto; }
    .content { padding: 1.25rem; }
    .card { overflow-x: auto; }
}