/* ==========================================================================
   AFGC Workflow — design tokens
   ========================================================================== */
:root {
    --sidebar-bg: #0e2340;
    --sidebar-bg-active: #14314f;
    --sidebar-border: rgba(255, 255, 255, 0.09);
    --sidebar-text: #b9c6da;
    --sidebar-text-active: #ffffff;

    --accent: #d97706;
    --accent-dark: #b45309;
    --accent-light: #fef3c7;

    --bg: #f2f4f8;
    --surface: #ffffff;
    --border: #e2e6ed;

    --text-primary: #1a2233;
    --text-secondary: #5b6472;
    --text-muted: #8a93a3;

    --success: #16a34a;
    --danger: #dc2626;

    --radius: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 6px 16px rgba(16, 24, 40, 0.08);

    --sidebar-width: 264px;
    --topbar-height: 64px;

    color-scheme: light;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text-primary);
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    color: var(--text-primary);
}

p {
    color: var(--text-secondary);
    line-height: 1.5;
}

a {
    color: var(--accent-dark);
}

h1:focus {
    outline: none;
}

.icon {
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
}

.icon-lg {
    width: 1.75rem;
    height: 1.75rem;
}

/* ==========================================================================
   App shell / layout
   ========================================================================== */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 20;
}

.sidebar-brand {
    padding: 1.4rem 1.4rem 1.2rem;
    border-bottom: 1px solid var(--sidebar-border);
}

/* ==========================================================================
   Brand (BrandLogo.razor)

   The artwork is white with an orange mark, so it only ever goes on a dark
   ground — the navy sidebar and the navy sign-in shell. Never on a card.
   ========================================================================== */
.brand {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.brand-logo {
    display: block;
    height: auto;
    max-width: 100%;
}

.brand-subtitle {
    color: var(--sidebar-text);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
}

/* The brand in the sign-in page hero, top-left on the navy. */
.login-brand .brand-subtitle {
    letter-spacing: 0.08em;
    margin-top: .35rem;
}

.sidebar-nav {
    flex: 1;
    padding: 0.9rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    overflow-y: auto;
}

.nav-section-label {
    margin: 0.9rem 0.6rem 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--sidebar-text);
    opacity: 0.55;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background-color .15s ease, color .15s ease;
}

    .nav-link:hover {
        background: rgba(255, 255, 255, 0.06);
        color: var(--sidebar-text-active);
        text-decoration: none;
    }

    .nav-link.active {
        background: var(--sidebar-bg-active);
        color: var(--sidebar-text-active);
        border-left-color: var(--accent);
    }

.sidebar-footer {
    padding: 0.9rem 1.4rem;
    border-top: 1px solid var(--sidebar-border);
    font-size: 0.7rem;
    color: var(--sidebar-text);
    opacity: 0.6;
}

.sidebar-backdrop {
    display: none;
}

.app-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    height: var(--topbar-height);
    flex-shrink: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar-spacer {
    flex: 1;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sidebar-toggle {
    display: none;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

    .icon-button:hover {
        background: var(--bg);
        color: var(--text-primary);
    }

.user-chip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.75rem 0.3rem 0.3rem;
    border-radius: 999px;
    background: var(--bg);
}

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sidebar-bg);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.main {
    flex: 1;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 1.75rem 2rem 3rem;
}

/* ==========================================================================
   Page header
   ========================================================================== */
.page-header {
    margin-bottom: 1.5rem;
}

    .page-header h1 {
        font-size: 1.5rem;
    }

    .page-header p {
        margin: 0.25rem 0 0;
        font-size: 0.925rem;
    }

/* ==========================================================================
   Cards / stats
   ========================================================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
}

.card-title {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--accent-light);
    color: var(--accent-dark);
}

.stat-value {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.empty-inline {
    padding: 1.5rem 0 0.25rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ==========================================================================
   Placeholder / empty-state panel
   ========================================================================== */
.placeholder-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.6rem;
    min-height: 340px;
    padding: 3rem 2rem;
    background: var(--surface);
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
}

.placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent-dark);
    margin-bottom: 0.4rem;
}

.placeholder-panel h2 {
    font-size: 1.15rem;
}

.placeholder-panel p {
    max-width: 440px;
    font-size: 0.9rem;
    margin: 0;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--accent-light);
    color: var(--accent-dark);
}

/* ==========================================================================
   Profile page
   ========================================================================== */
.profile-card {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 2.25rem 2rem;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--sidebar-bg);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.profile-fields {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.9rem;
    margin: 1.25rem 0;
    text-align: left;
}

.profile-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.9rem;
    background: var(--bg);
    border-radius: var(--radius);
}

.field-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}

.field-value {
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 500;
}

.profile-note {
    font-size: 0.85rem;
    margin: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.15rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

    .btn-primary:hover {
        background: var(--accent-dark);
        color: #fff;
    }

.btn-secondary {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

    .btn-secondary:hover {
        background: var(--bg);
        color: var(--text-primary);
    }

.text-danger {
    color: var(--danger);
}

/* ==========================================================================
   Login page

   A split screen: brand on the left, the form on the right. Below 880px the
   two stack, because squeezing two columns onto a phone gives neither enough
   room.

   Everything here uses the tokens at the top of this file, so the sign-in page
   cannot drift away from the rest of the application's colour.
   ========================================================================== */
.login-page {
    min-height: 100vh;
    display: flex;
}

/* ---- left: the brand half --------------------------------------------- */

.login-hero {
    position: relative;
    flex: 0 0 54%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3.5rem 3.5rem 2.75rem;
    color: #fff;
    overflow: hidden;

    /* ONE line to change when a construction photograph arrives:
         background-image: linear-gradient(...), url("img/hero.jpg");
       Until then this is brand navy, so the page reads as designed rather
       than as a missing asset. */
    background-image: linear-gradient(135deg, #0b1d35 0%, #14314f 48%, #0e2340 100%);
    background-size: cover;
    background-position: center;

    /* The diagonal edge. */
    clip-path: polygon(0 0, 100% 0, calc(100% - 90px) 100%, 0 100%);
}

    /* A faint grid, so a flat gradient has some structure to it before a
       photograph exists. Delete this rule the day one does. */
    .login-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
        background-size: 64px 64px;
        mask-image: radial-gradient(120% 90% at 20% 80%, #000 0%, transparent 70%);
        pointer-events: none;
    }

    .login-hero > * {
        position: relative;
        z-index: 1;
    }

/* The global h1/h2 rule sets a dark colour for the rest of the app, and it
   is more specific than the hero's own `color`. These two have to say white
   outright or the headline disappears into the navy. */
.login-hero-copy h1 {
    font-size: 3.1rem;
    color: #fff;
    line-height: 1.12;
    margin: 0 0 .5rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.login-hero-copy h2 {
    font-size: 1.9rem;
    color: rgba(255, 255, 255, .88);
    font-weight: 400;
    margin: 0;
}

.login-hero-rule {
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: var(--accent);
    margin: 1.75rem 0 1.25rem;
}

.login-hero-copy p {
    margin: 0;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .72);
}

.login-hero-features {
    display: flex;
    gap: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, .13);
}

.login-hero-feature {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    align-items: center;
}

    .login-hero-feature span {
        font-size: .82rem;
        color: rgba(255, 255, 255, .8);
    }

    .login-hero-feature svg {
        width: 26px;
        height: 26px;
        stroke: rgba(255, 255, 255, .9);
        fill: none;
        stroke-width: 1.6;
    }

/* ---- right: the form half --------------------------------------------- */

.login-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
}

.login-card {
    /* A flex item's min-width is auto, so without this the card refuses to
       shrink below its own content and spills off a narrow screen. */
    min-width: 0;
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(9, 24, 41, .14);
    padding: 2.5rem 2.25rem;

    animation: login-card-in .28s ease-out both;
}

@keyframes login-card-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

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

.login-card h1 {
    font-size: 1.75rem;
    margin: 0 0 .3rem;
    letter-spacing: -.01em;
}

.login-card > .login-sub {
    margin: 0 0 1.75rem;
    color: var(--text-secondary);
    font-size: .95rem;
}

.login-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: var(--radius);
    padding: .75rem .9rem;
    font-size: .88rem;
    margin-bottom: 1.1rem;
}

/* ---- the two ways in --------------------------------------------------- */

/* The radios are the state. No JavaScript decides which panel shows: a
   :checked sibling selector does, so the selector works before — and without
   — any script loading. */
.login-tab-state {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.login-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .5rem;
    background: #f5f7fa;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .3rem;
    margin-bottom: 1.5rem;
}

.login-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .65rem .35rem;
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    min-width: 0;
    overflow: hidden;
    transition: background .15s ease, color .15s ease;
}

    .login-tab svg {
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
    }

/* Which tab looks selected, and which panel is shown. */
#login-tab-local:checked ~ .login-tabs .login-tab[for="login-tab-local"],
#login-tab-entra:checked ~ .login-tabs .login-tab[for="login-tab-entra"] {
    background: var(--surface);
    color: var(--sidebar-bg);
    border-color: #c8d4e4;
    box-shadow: var(--shadow-sm);
}

#login-tab-local:checked ~ .login-entra-panel,
#login-tab-entra:checked ~ .login-local-panel {
    display: none;
}

/* Keyboard focus has to be visible on the label, since the real radio is
   off-screen. */
.login-tab-state:focus-visible ~ .login-tabs .login-tab[for="login-tab-local"],
.login-tab-state:focus-visible ~ .login-tabs .login-tab[for="login-tab-entra"] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

#login-tab-local:focus-visible ~ .login-tabs .login-tab[for="login-tab-entra"],
#login-tab-entra:focus-visible ~ .login-tabs .login-tab[for="login-tab-local"] {
    outline: none;
}

/* ---- fields ------------------------------------------------------------ */

.login-field {
    position: relative;
    margin-bottom: .9rem;
}

    .login-field > svg {
        position: absolute;
        left: .95rem;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        stroke: var(--text-muted);
        fill: none;
        stroke-width: 1.7;
        pointer-events: none;
    }

    .login-field input {
        width: 100%;
        font: inherit;
        padding: .85rem 1rem .85rem 2.85rem;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        font-size: .95rem;
        color: var(--text-primary);
        background: var(--surface);
        transition: border-color .15s ease, box-shadow .15s ease;
    }

        .login-field input::placeholder {
            color: var(--text-muted);
        }

        .login-field input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(217, 119, 6, .14);
        }

.login-reveal {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    cursor: pointer;
    padding: .4rem;
    line-height: 0;
    border-radius: 6px;
    color: var(--text-muted);
}

    .login-reveal svg {
        width: 19px;
        height: 19px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.6;
    }

    .login-reveal:hover {
        color: var(--text-secondary);
    }

    .login-reveal:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 1px;
    }

    /* Hidden until the script that makes it work has run — a button that does
       nothing is worse than no button. */
    .login-reveal[hidden] {
        display: none;
    }

/* ---- buttons ----------------------------------------------------------- */

.login-submit {
    width: 100%;
    padding: .9rem 1rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: .4rem;
    box-shadow: 0 2px 6px rgba(180, 83, 9, .25);
    transition: background .15s ease;
}

    .login-submit:hover {
        background: var(--accent-dark);
    }

    .login-submit:active {
        background: var(--accent-dark);
        transform: translateY(1px);
    }

    .login-submit:focus-visible {
        outline: 2px solid var(--sidebar-bg);
        outline-offset: 2px;
    }

    .login-submit:disabled {
        opacity: .72;
        cursor: progress;
        box-shadow: none;
    }

.login-divider {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 1.4rem 0;
}

    .login-divider::before,
    .login-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--border);
    }

    .login-divider span {
        font-size: .75rem;
        letter-spacing: .09em;
        color: var(--text-muted);
    }

.login-entra {
    width: 100%;
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-primary);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

    .login-entra:hover {
        background: #f7f9fc;
        border-color: #cfd8e5;
    }

    .login-entra:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

.login-entra-note {
    margin: 0 0 1.1rem;
    font-size: .88rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.login-secure {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 1.5rem 0 0;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--text-muted);
}

    .login-secure svg {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
        margin-top: .1rem;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.7;
    }

/* ---- stacked, below 880px ---------------------------------------------- */

@media (max-width: 880px) {
    .login-page {
        flex-direction: column;
    }

    .login-hero {
        flex: 0 0 auto;
        clip-path: none;
        padding: 2rem 1.5rem 1.75rem;
        gap: 1.5rem;
    }

        .login-hero .brand-logo {
            width: 170px;
        }

    .login-hero-copy h1 {
        font-size: 1.85rem;
    }

    .login-hero-copy h2 {
        font-size: 1.1rem;
    }

    .login-hero-rule {
        margin: 1rem 0 .75rem;
    }

    .login-hero-copy p {
        font-size: .9rem;
    }

    /* The four highlights are the first thing to go: on a phone the form is
       what somebody came for. */
    .login-hero-features {
        display: none;
    }

    .login-panel {
        padding: 1.5rem 1.1rem 2.5rem;
        align-items: flex-start;
    }

    /* The card keeps its 440px ceiling at every size — a form stretched across
       a tablet is harder to read, not easier. */
    .login-card {
        padding: 1.75rem 1.4rem;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(9, 24, 41, .10);
    }

    .login-tab {
        font-size: .78rem;
    }
}
/* ==========================================================================
   Responsive: collapse sidebar to an off-canvas drawer below 992px
   ========================================================================== */
@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--shadow-md);
    }

        .sidebar.open {
            transform: translateX(0);
        }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 15;
    }

    .sidebar-toggle {
        display: inline-flex;
    }

    .main {
        padding: 1.25rem 1.1rem 2.5rem;
    }

    .user-name {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .topbar {
        padding: 0 1rem;
    }
}

/* ==========================================================================
   Admin data tables / toolbars / forms / modal
   ========================================================================== */
.table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.table-toolbar .spacer {
    flex: 1;
}

.filter-input, .filter-select {
    font: inherit;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-primary);
}

.filter-input {
    min-width: 220px;
}

.filter-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.table-scroll {
    overflow-x: auto;
}

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

    .data-table th {
        text-align: left;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        font-weight: 700;
        padding: 0 0.9rem 0.6rem;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

    .data-table td {
        padding: 0.75rem 0.9rem;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }

    .data-table tbody tr:last-child td {
        border-bottom: none;
    }

    .data-table tbody tr:hover {
        background: var(--bg);
    }

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.status-pill-active {
    background: #e6f6ec;
    color: var(--success);
}

.status-pill-inactive {
    background: #f1f2f4;
    color: var(--text-muted);
}

.row-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
}

.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    border-radius: 7px;
}

.btn-danger-outline {
    background: transparent;
    color: var(--danger);
    border: 1px solid #f3c2c2;
}

    .btn-danger-outline:hover {
        background: #fdecec;
    }

.empty-table-row td {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
}

/* Modal */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 100;
}

.modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 560px;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    z-index: 101;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--border);
}

    .modal-header h3 {
        font-size: 1.05rem;
    }

.modal-body {
    padding: 1.4rem;
}

.modal-error {
    background: #fdecec;
    border: 1px solid #f3c2c2;
    color: #9a1c1c;
    border-radius: var(--radius);
    padding: 0.65rem 0.9rem;
    font-size: 0.85rem;
    margin-bottom: 1.1rem;
}

.modal-hint {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.back-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-decoration: none;
}

    .back-link:hover {
        text-decoration: underline;
    }

.form-success {
    background: #e6f6ec;
    border: 1px solid #b8e6c8;
    color: var(--success);
    border-radius: var(--radius);
    padding: 0.65rem 0.9rem;
    font-size: 0.85rem;
    margin-top: 1rem;
}

/* Process Designer — a simple vertical sequential-flow diagram (not BPMN) */
.process-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 0;
}

.process-flow-arrow {
    color: var(--text-muted);
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.15rem 0;
}

.process-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-width: 240px;
    padding: 0.9rem 1.3rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.process-flow-node-bookend {
    min-width: 140px;
    padding: 0.55rem 1.2rem;
    background: #f1f2f4;
    color: var(--text-muted);
    font-weight: 600;
    border-style: dashed;
    box-shadow: none;
}

.process-flow-node-title {
    font-weight: 700;
    color: var(--text-primary);
}

.process-flow-node-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.process-flow-node-caps {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.process-flow-node-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.modal-subheading {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1.2rem 0 0.6rem;
}

/* Form */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}

    .form-field.span-2 {
        grid-column: 1 / -1;
    }

    .form-field input,
    .form-field select {
        font: inherit;
        font-weight: 400;
        color: var(--text-primary);
        padding: 0.55rem 0.7rem;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
    }

        .form-field input:focus,
        .form-field select:focus {
            outline: 2px solid var(--accent);
            outline-offset: 1px;
            border-color: var(--accent);
        }

.form-checkbox-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.project-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.project-checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* ==========================================================================
   Framework error UI (shared across the whole app, not just MainLayout)
   ========================================================================== */
.validation-message {
    color: var(--danger);
    font-size: 0.85rem;
}

/* ==========================================================================
   Blazor's own "something broke" bar

   GLOBAL, and that is the point. Blazor's runtime shows this bar by setting
   display on the element with this id, wherever it is — but the rule that
   HIDES it until then used to live in MainLayout.razor.css, which is SCOPED
   css: it compiles to #blazor-error-ui[b-xxxxxxxxxx] and matches only
   elements MainLayout rendered.

   LoginLayout renders its own copy of the bar and had no scoped stylesheet of
   its own, so that copy matched nothing, never got display:none, and sat
   permanently visible on the SIGN-IN page announcing an error that had not
   happened. Reported from the live system; it had been there since the first
   commit.

   A framework element addressed by a global id needs a global rule.
   ========================================================================== */
#blazor-error-ui {
    color-scheme: light only;
    background: #fff8e6;
    border-top: 1px solid #f2c94c;
    color: #6b5200;
    bottom: 0;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 0.9rem;
}

    #blazor-error-ui .reload {
        color: #6b5200;
        font-weight: 600;
        text-decoration: underline;
        margin-left: 0.5rem;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.9rem;
        top: 0.6rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--radius);
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

/* ==========================================================================
   Reporting — filters, KPI grid, hand-drawn SVG charts, pagination
   ========================================================================== */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0 1rem;
}

/* Two charts side by side on a wide screen, stacked below it. */
.report-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

    .report-columns > .card {
        margin-bottom: 0;
    }

.chart {
    width: 100%;
    overflow-x: auto;
}

.chart-svg {
    width: 100%;
    height: auto;
    display: block;
}

.chart-label {
    font-size: 11px;
    fill: var(--text-secondary);
}

.chart-value {
    font-size: 11px;
    font-weight: 700;
    fill: var(--text-primary);
}

/* The unfilled remainder of a bar, so every row reads as the same scale. */
.chart-track {
    fill: var(--bg);
}

.chart-bar {
    fill: var(--accent);
}

.chart-grid {
    stroke: var(--border);
    stroke-width: 1;
}

.chart-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.chart-area {
    fill: var(--accent);
    opacity: 0.12;
}

.chart-axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
}

.chart-axis-peak {
    font-weight: 700;
}

.chart-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0;
}

.chart-subtitle {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
}

.overdue-days {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: #fdecec;
    color: var(--danger);
    font-size: 0.75rem;
    font-weight: 700;
}

.status-pill-open {
    background: #e0edff;
    color: #1d4ed8;
}

.status-pill-rejected {
    background: #fdecec;
    color: var(--danger);
}

/* Pagination */
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.pager-summary {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.pager-buttons {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

.pager-position {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 0 0.5rem;
    white-space: nowrap;
}

/* ==========================================================================
   Table states — loading / empty / error (TableState.razor)

   One block of styling for all three, so a table that is loading, a table
   with nothing in it and a table that failed all occupy the same space and
   read at the same weight. Only the error variant is coloured, because it
   is the only one the user has to act on.
   ========================================================================== */
.table-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.75rem 1rem;
    text-align: center;
}

.table-state-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.table-state-detail {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    max-width: 46ch;
}

.table-state .btn {
    margin-top: 0.5rem;
}

.table-state-error .table-state .icon {
    color: var(--danger);
}

.table-state-error .table-state-title {
    color: var(--danger);
}

/* ==========================================================================
   Confirmation dialog (ConfirmDialog.razor)
   ========================================================================== */
.confirm-message {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.confirm-consequence {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Filled danger, for a confirmed destructive action. The outline variant
   stays on the row buttons — the strong colour belongs on the button that
   actually does the thing, not the one that only opens a dialog. */
.btn-danger {
    background: var(--danger);
    color: #fff;
    border: 1px solid var(--danger);
}

    .btn-danger:hover:not(:disabled) {
        background: #b91c1c;
        border-color: #b91c1c;
    }

/* ==========================================================================
   Request / task detail — read-only field grid and workflow timeline

   Mirrors the User Portal's request detail so the same workflow reads the
   same way in both portals; an administrator looking at a request should
   not have to re-learn the timeline.
   ========================================================================== */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.9rem 1.5rem;
    margin-bottom: 1.25rem;
}

.detail-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

    .detail-field .field-value {
        overflow-wrap: anywhere;
    }

.request-number {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.workflow-progress {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
}

.progress-step {
    display: flex;
    gap: 0.85rem;
    padding-bottom: 1.1rem;
    position: relative;
}

    /* The connector line, drawn behind each marker except the last one. */
    .progress-step:not(:last-child)::before {
        content: "";
        position: absolute;
        left: 0.6rem;
        top: 1.5rem;
        bottom: 0;
        width: 2px;
        background: var(--border);
    }

    .progress-step:last-child {
        padding-bottom: 0;
    }

.progress-marker {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    border: 2px solid var(--border);
    background: var(--surface);
    margin-top: 0.15rem;
    z-index: 1;
}

.progress-step-approved .progress-marker,
.progress-step-completed .progress-marker {
    border-color: var(--success);
    background: var(--success);
}

.progress-step-rejected .progress-marker {
    border-color: var(--danger);
    background: var(--danger);
}

.progress-step-returned .progress-marker {
    border-color: var(--accent);
    background: var(--surface);
}

.progress-step-skipped .progress-marker {
    border-color: var(--text-muted);
    background: repeating-linear-gradient(45deg, var(--text-muted), var(--text-muted) 2px, var(--surface) 2px, var(--surface) 4px);
}

.progress-step-inprogress .progress-marker {
    border-color: var(--accent);
    background: var(--accent);
}

.progress-step-current .progress-marker {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-light);
}

.progress-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.progress-step-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.progress-step-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.progress-step-pending .progress-step-name {
    color: var(--text-muted);
    font-weight: 500;
}

/* ==========================================================================
   Responsive: below 576px the action buttons and dialog footers stack
   rather than overflowing their container.
   ========================================================================== */
@media (max-width: 575.98px) {
    .row-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

        .form-actions .btn {
            width: 100%;
            justify-content: center;
        }

    .pager {
        flex-direction: column;
        align-items: flex-start;
    }

    .pager-buttons {
        margin-left: 0;
        flex-wrap: wrap;
    }
}

/* Detail dialogs carry a field grid and a timeline; the 560px form width
   squeezes both into one column for no reason. */
.modal-dialog-wide {
    max-width: 760px;
}

/* Below 576px the dialog was running edge to edge against the viewport. */
@media (max-width: 575.98px) {
    .modal-dialog {
        width: calc(100% - 1.5rem);
    }

    .modal-body {
        padding: 1.1rem;
    }
}

/* Returned is neither a pass nor a fail — it sent the request backwards.
   The accent colour says "needs attention" without claiming a verdict. */
.status-pill-returned {
    background: var(--accent-light);
    color: var(--accent-dark);
}

/* ==========================================================================
   Busy overlay (BusyOverlay.razor)

   Locks the screen while a write is in flight. z-index sits above the modal
   dialog (101) on purpose: most Save buttons live inside a dialog, so an
   overlay underneath it would leave the very button that started the work
   still clickable.
   ========================================================================== */
.busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 35, 64, 0.35);
    backdrop-filter: blur(1px);
    cursor: progress;
    /* Stops a wheel event over the overlay scrolling the page behind it. */
    overscroll-behavior: contain;
}

.busy-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--accent);
    animation: busy-spin 0.7s linear infinite;
}

@keyframes busy-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Someone who has asked for less motion still needs to know it is working,
   so the ring pulses instead of spinning rather than disappearing. */
@media (prefers-reduced-motion: reduce) {
    .busy-spinner {
        animation: busy-pulse 1.4s ease-in-out infinite;
        border-top-color: rgba(255, 255, 255, 0.25);
        background: var(--accent);
    }

    @keyframes busy-pulse {
        0%, 100% { opacity: 0.35; }
        50%      { opacity: 1; }
    }
}

/* Visible to a screen reader, not on screen. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Lookups
   ========================================================================== */

/* Preview of a lookup's values inside the Form Designer's field dialog. */
.lookup-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.lookup-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* An inactive value stays in its place in the order, visibly set aside. */
.data-table tr.row-inactive td {
    color: var(--text-muted);
}

.row-actions-start {
    justify-content: flex-start;
}

.cell-title {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
}

.cell-subtitle {
    display: block;
    font-size: 0.76rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* ==========================================================================
   Table fields — the editable grid in DynamicForm, the read-only view in
   TableAnswerView, and (Admin Portal) the Form Designer's column editor.
   ========================================================================== */
.dynamic-table,
.table-answer,
.column-editor {
    font-size: 0.85rem;
}

    .dynamic-table th,
    .column-editor th {
        white-space: nowrap;
    }

    .dynamic-table td,
    .column-editor td {
        padding: 0.35rem 0.4rem;
        vertical-align: middle;
    }

    /* Cell inputs inherit the form's field styling but have to be compact:
       a row of six full-size inputs would not fit on a laptop screen. */
    .dynamic-table input[type="text"],
    .dynamic-table input[type="number"],
    .dynamic-table input[type="date"],
    .dynamic-table select,
    .column-editor input[type="text"],
    .column-editor select {
        width: 100%;
        min-width: 110px;
        padding: 0.4rem 0.5rem;
        font-size: 0.85rem;
    }

    .dynamic-table tbody tr:hover,
    .column-editor tbody tr:hover {
        background: transparent;
    }

.dynamic-table-no,
.table-answer-no {
    width: 3rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dynamic-table-actions {
    width: 1%;
    white-space: nowrap;
}

.dynamic-table tfoot td,
.table-answer tfoot td {
    border-top: 2px solid var(--border);
    border-bottom: none;
    background: var(--bg);
}

.dynamic-table .numeric,
.table-answer .numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dynamic-table .numeric input {
    text-align: right;
}

.dynamic-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.6rem;
}

    .dynamic-table-toolbar .modal-hint {
        margin: 0;
    }

/* The total that becomes the request's Amount says so. */
.table-answer-amount {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--accent-light);
    color: var(--accent-dark);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.column-editor-check {
    text-align: center;
}

/* A table answer spans the whole detail grid instead of one cell of it. */
.detail-grid > .span-all {
    grid-column: 1 / -1;
}

/* Return to Requester: the step that sent the request back gets the same
   hollow accent marker as Return. */
.progress-step-returnedtorequester .progress-marker {
    border-color: var(--accent);
    background: var(--surface);
}

/* ==========================================================================
   Exclusive gateways in the timeline
   ========================================================================== */

/* A gateway is a decision, so its marker is a diamond rather than a dot. */
.progress-step-gateway .progress-marker {
    border-radius: 3px;
    transform: rotate(45deg) scale(0.85);
}

.progress-step-decided .progress-marker {
    border-color: var(--accent);
    background: var(--accent-light);
}

/* On a branch this request did not take: present, but clearly not part of
   what happened. */
.progress-step-bypassed .progress-marker {
    border-style: dashed;
    border-color: var(--border);
    background: transparent;
}

.progress-step-bypassed .progress-step-name {
    color: var(--text-muted);
    font-weight: 500;
}

/* ==========================================================================
   Exclusive gateways in the Process Designer
   ========================================================================== */

.process-flow-node-gateway {
    border: 2px solid var(--accent);
    background: var(--accent-light);
    min-width: 320px;
    max-width: 560px;
}

.process-flow-node-kind {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-dark);
}

.process-flow-node-next {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-dark);
}

.gateway-branch-list {
    margin: 0.3rem 0 0;
    padding-left: 1.2rem;
    text-align: left;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

    .gateway-branch-list li + li {
        margin-top: 0.25rem;
    }

.gateway-branch-name {
    font-weight: 700;
    color: var(--text-primary);
}

.gateway-branch-target {
    font-weight: 600;
    color: var(--accent-dark);
    white-space: nowrap;
}

/* The branch editor: one card per branch, the default last. */
.gateway-branch-editor {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin: 0.6rem 0;
    background: var(--surface);
}

.gateway-branch-editor-default {
    border-style: dashed;
    background: var(--bg);
}

.gateway-branch-editor-head {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

    .gateway-branch-editor-head input[type="text"] {
        flex: 1 1 200px;
    }

.gateway-branch-editor-target {
    margin-top: 0.6rem;
    margin-bottom: 0;
}

.condition-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.2fr) minmax(120px, 1fr) minmax(160px, 1.6fr) auto;
    gap: 0.4rem;
    align-items: start;
    margin-bottom: 0.4rem;
}

    .condition-row select,
    .condition-row input[type="text"],
    .condition-row input[type="number"],
    .condition-row input[type="date"] {
        width: 100%;
        padding: 0.4rem 0.5rem;
        font-size: 0.85rem;
    }

.condition-value {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.condition-and {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.condition-options {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    max-height: 9rem;
    overflow-y: auto;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 100%;
}

@media (max-width: 576px) {
    .condition-row {
        grid-template-columns: 1fr auto;
    }
}

/* ==========================================================================
   Request form header and footer (RequestFormHeader / RequestFormFooter)
   Light on purpose: hairlines, one soft accent, no heavy shadows.
   ========================================================================== */

.request-form-step {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.request-form-header {
    padding-bottom: 1.1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.request-form-header-top {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.request-form-header-icon {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius);
    background: var(--accent-light);
    color: var(--accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .request-form-header-icon svg {
        width: 1.25rem;
        height: 1.25rem;
    }

.request-form-header-heading {
    min-width: 0;
    flex: 1;
}

.request-form-header-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

    .request-form-header-name h2 {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--text-primary);
    }

.request-form-header-description {
    margin: 0.2rem 0 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.request-form-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--bg);
    color: var(--text-secondary);
    white-space: nowrap;
}

.request-form-chip-new {
    background: #e6f6ec;
    color: #15803d;
}

.request-form-chip-draft {
    background: #e8f0fc;
    color: #1d4ed8;
}

.request-form-chip-returned {
    background: var(--accent-light);
    color: var(--accent-dark);
}

.request-form-chip-preview {
    background: transparent;
    border: 1px dashed var(--border);
}

.request-form-header-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.6rem 1rem;
    margin: 1rem 0 0;
}

    .request-form-header-facts dt {
        font-size: 0.72rem;
        color: var(--text-muted);
    }

    .request-form-header-facts dd {
        margin: 0.1rem 0 0;
        font-size: 0.875rem;
        color: var(--text-primary);
        overflow-wrap: anywhere;
    }

.request-form-header .return-notice {
    margin: 1rem 0 0;
}

.request-form-instructions {
    display: flex;
    gap: 0.55rem;
    margin-top: 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius);
    background: #f5f8fd;
    border: 1px solid #e3ebf7;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

    .request-form-instructions p {
        margin: 0;
        white-space: pre-line;
        overflow-wrap: anywhere;
    }

.request-form-instructions-icon {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.1rem;
    color: #2563eb;
}

.request-form-closing-note {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.82rem;
    color: var(--text-secondary);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* The action bar reaches the card edges, and sticks to the bottom of the
   window while a long form scrolls underneath it. */
.request-form-actionbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 0.9rem;
    margin: 1.25rem -1.5rem -1.5rem;
    padding: 0.8rem 1.5rem;
    border-top: 1px solid var(--border);
    background: #fafbfc;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.request-form-actionbar-sticky {
    position: sticky;
    bottom: 0;
    z-index: 5;
    box-shadow: 0 -6px 16px rgba(16, 24, 40, 0.05);
}

.request-form-required {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.request-form-required-mark {
    color: var(--danger);
}

.request-form-saved {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--success);
}

    .request-form-saved svg {
        width: 0.9rem;
        height: 0.9rem;
    }

.request-form-actionbar-spacer {
    flex: 1;
}

.request-form-actionbar-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* The designer preview sits inside a card already. */
.request-form-preview {
    margin-top: 0.75rem;
    padding: 1.25rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}

/* On a phone the bar stays one row high: the buttons share it equally and
   the required key (already shown on every field label) steps aside. */
@media (max-width: 576px) {
    .request-form-actionbar {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
        gap: 0.4rem;
    }

    .request-form-required,
    .request-form-actionbar-spacer {
        display: none;
    }

    .request-form-actionbar-buttons {
        width: 100%;
        flex-wrap: nowrap;
        gap: 0.4rem;
    }

        .request-form-actionbar-buttons .btn {
            flex: 1;
            justify-content: center;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
}

/* ==========================================================================
   Decision history (DecisionHistory) in the request dialog — the same styles
   the User Portal uses.
   ========================================================================== */
.action-log {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.action-entry {
    border-left: 3px solid var(--border);
    padding: 0.15rem 0 0.15rem 0.85rem;
}

.action-entry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.action-entry-who {
    font-weight: 700;
    color: var(--text-primary);
}

.action-entry-step {
    color: var(--text-muted);
}

.action-entry-when {
    color: var(--text-muted);
    margin-left: auto;
}

.action-entry-comment {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    color: var(--text-primary);
    white-space: pre-line;
}

.action-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.action-badge-approve {
    background: #e6f6ec;
    color: var(--success);
}

.action-badge-reject {
    background: #fdecec;
    color: var(--danger);
}

.action-badge-return {
    background: var(--accent-light);
    color: var(--accent-dark);
}

.action-badge-requester {
    background: #e8f0fc;
    color: #1d4ed8;
}

.action-entry-requester {
    border-left-color: #bfd3f6;
}

/* Forwarded at a step: the people the task went through, and who a forward went to in the decision history. */
.progress-step-handoffs {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.action-entry-target {
    font-weight: 600;
}

/* ==========================================================================
   Action steps and Partially Completed requests
   ========================================================================== */

/* An Action step done reads like an approval in the timeline. */
.progress-step-completed .progress-marker {
    border-color: var(--success);
    background: var(--success);
}

/* Part done, the rest expected later. */
.status-pill-partial {
    background: #fff4e0;
    color: #9a5b00;
}

.action-badge-partial {
    background: #fff4e0;
    color: #9a5b00;
}

.partial-notice {
    background: #fffaf0;
    border: 1px solid #f2c879;
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin: 0.75rem 0 1rem;
}

.partial-notice-title {
    margin: 0 0 0.25rem;
    font-weight: 600;
    color: #9a5b00;
}

.partial-notice-meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.partial-notice-comment {
    margin: 0.5rem 0 0;
    padding: 0.55rem 0.75rem;
    background: var(--surface);
    border-radius: var(--radius);
    white-space: pre-wrap;
}

/* Approval or Action, in My Tasks. */
.task-kind-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #eef2f7;
    color: var(--text-secondary);
    vertical-align: middle;
}

/* ==========================================================================
   Toasts — what just happened, over the page rather than at the top of it
   ========================================================================== */

.toast-stack {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(26rem, calc(100vw - 2.5rem));
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    font-size: 0.9rem;
    line-height: 1.35;
    animation: toast-in 0.15s ease-out;
}

.toast-success {
    background: #0f7b43;
    color: #fff;
}

.toast-error {
    background: #b42318;
    color: #fff;
}

.toast-message {
    flex: 1;
}

.toast-close {
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.8;
    cursor: pointer;
}

    .toast-close:hover {
        opacity: 1;
    }

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 640px) {
    .toast-stack {
        right: 0.75rem;
        left: 0.75rem;
        bottom: 0.75rem;
        max-width: none;
    }
}

/* ==========================================================================
   The error log
   ========================================================================== */

.error-message {
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
}

.badge-danger {
    background: #fde8e6;
    color: #b42318;
}

.error-detail {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

    .error-detail summary {
        cursor: pointer;
    }

    .error-detail pre {
        max-height: 14rem;
        margin: 0.35rem 0 0;
        padding: 0.5rem;
        overflow: auto;
        background: var(--surface-muted, #f5f7fa);
        border-radius: var(--radius);
        white-space: pre-wrap;
        word-break: break-word;
    }