/* Assetnode - Modern 2026 UI Stylesheet */
/* No external dependencies - pure CSS */

/* ========================================
   Font Face Definitions - Zain (Local)
   ======================================== */

@font-face {
    font-family: "Zain";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url("/assets/zain-extralight-10da2efd.ttf") format("truetype");
}

@font-face {
    font-family: "Zain";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/assets/zain-light-40bed04f.ttf") format("truetype");
}

@font-face {
    font-family: "Zain";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/zain-regular-e023bbbc.ttf") format("truetype");
}

@font-face {
    font-family: "Zain";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/zain-bold-2386d306.ttf") format("truetype");
}

@font-face {
    font-family: "Zain";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/assets/zain-extrabold-1ea78019.ttf") format("truetype");
}

@font-face {
    font-family: "Zain";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/assets/zain-black-99fdf802.ttf") format("truetype");
}

/* ========================================
   CSS Custom Properties (Design Tokens)
   ======================================== */

:root {
    /* Primary brand colors - Azure spectrum (default palette).
       Corporate Branding swaps this scale via body[data-palette="…"]. */
    --color-brand-50: #f2f8fc;
    --color-brand-100: #e3f1f9;
    --color-brand-200: #c2dff0;
    --color-brand-300: #8cc3e3;
    --color-brand-400: #3ea0d3;
    --color-brand-500: #1682b3;
    --color-brand-600: #0f6991;
    --color-brand-700: #085577;
    --color-brand-800: #074967;
    --color-brand-900: #00405b;
    --color-brand-950: #022638;

    /* Accent colors - Hive Honey (Pastell) */
    --color-accent-50: #fefce8;
    --color-accent-100: #fef9c3;
    --color-accent-200: #fef08a;
    --color-accent-300: #fde047;
    --color-accent-400: #facc15;
    --color-accent-500: #eab308;
    --color-accent-600: #ca8a04;
    --color-accent-700: #a16207;

    /* Hive Pastell für Branding */
    --color-hive-light: #fef3c7;
    --color-hive-medium: #fcd34d;
    --color-hive-warm: #f59e0b;

    /* Status colors */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    /* Both are tuned for light ground and are only ever used on white
       elements (the QR code, the toggle knob). A shadow for a dark
       surface needs far more alpha — define it then, do not reuse these. */
    --shadow-md:
        0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

    /* Typography */
    --font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Border radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;
}

/* ----------------------------------------
   Semantic roles — dark mode
   ----------------------------------------
   Everything above is a raw value (the brand scale, the accent scale,
   status hues). Everything below is a *role*: what a color is for, not
   what it is. Components reference roles only.

   Dark is the one and only mode today, so these roles carry no mode
   selector. A light mode would not touch a single component rule — it
   would re-point this block, and nothing else. That is the whole reason
   the layer exists; keep it that way and do not reach past it to a
   --color-brand-* step from a component.

   These live on `body`, not :root, and must stay there: a var() inside a
   custom property resolves against the element that declares it, and the
   Corporate Branding palettes override --color-brand-* on `body`. Declared
   on :root, every brand-derived role would resolve one level too high and
   silently ignore the tenant's palette. */
body {
    /* Page and card backgrounds */
    --color-surface: #0f1219;
    --color-surface-elevated: #1a1f2e;

    /* Brand-tinted fills. "raised" sits on top of the page (secondary
       buttons, icon tiles), "sunken" sits inside a card (inputs, code
       blocks, tooltips) — in dark mode sunken is the darker of the two. */
    --color-surface-raised: var(--color-brand-800);
    --color-surface-raised-hover: var(--color-brand-700);
    --color-surface-sunken: var(--color-brand-900);

    /* Primary action (buttons, checked toggles, active progress dots).
       Step 600, not 500: white-on-500 lands at 4.1–4.8:1 depending on the
       palette, and six of the twelve missed the 4.5:1 WCAG AA needs for
       text this size (1rem/600 does not qualify as large text). Step 600
       clears it on every palette with room to spare (5.9–6.8:1). */
    --color-action: var(--color-brand-600);
    --color-action-hover: var(--color-brand-500);

    /* Text */
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-text-muted: #64748b;
    --color-text-on-solid: #ffffff;

    /* Borders */
    --color-border: #334155;
    --color-border-strong: var(--color-brand-700);
    --color-border-focus: var(--color-brand-400);

    /* Tints layered over a surface. These lighten because the ground is
       dark — under a light mode they would have to darken instead, which
       is exactly why they are tokens and not literals at the call site. */
    --color-overlay-hover: rgba(255, 255, 255, 0.08);
    --color-overlay-subtle: rgba(255, 255, 255, 0.05);
    --color-scrim: rgba(0, 0, 0, 0.88);

    /* Status foregrounds that are not the plain status hue */
    --color-warning-title: #fbbf24;
    --color-warning-text: #fde68a;
    --color-error-solid: #dc2626;
}

/* ========================================
   Base Styles
   ======================================== */

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

/* Keep the hidden attribute effective on elements whose class sets
   its own display (e.g. .warning-box with display: flex) */
[hidden] {
    display: none !important;
}

/* Off-screen but present in the render tree — password managers skip
   display:none fields, so autofill helpers must hide this way */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 700;
    line-height: 1.25;
}

h1 {
    font-size: 2.25rem;
}
h2 {
    font-size: 1.5rem;
}
h3 {
    font-size: 1.25rem;
}
h4 {
    font-size: 1.125rem;
}

p {
    margin: 0;
}

a {
    color: var(--color-brand-400);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-brand-300);
}

/* ========================================
   Layout Utilities
   ======================================== */

.w-full {
    width: 100%;
}

.flex {
    display: flex;
}
.flex-col {
    flex-direction: column;
}
.items-center {
    align-items: center;
}
.items-start {
    align-items: flex-start;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}

.grid {
    display: grid;
}
.gap-2 {
    gap: var(--space-2);
}
.gap-3 {
    gap: var(--space-3);
}
.gap-4 {
    gap: var(--space-4);
}
.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.space-y-2 > * + * {
    margin-top: var(--space-2);
}
.space-y-4 > * + * {
    margin-top: var(--space-4);
}
.space-y-5 > * + * {
    margin-top: var(--space-5);
}
.space-y-6 > * + * {
    margin-top: var(--space-6);
}

/* Responsive */
@media (min-width: 640px) {
    .sm\:px-6 {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
}

@media (min-width: 1024px) {
    .lg\:flex {
        display: flex;
    }
    .lg\:hidden {
        display: none;
    }
    .lg\:w-1\/2 {
        width: 50%;
    }
    .lg\:px-8 {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
    .lg\:px-20 {
        padding-left: 5rem;
        padding-right: 5rem;
    }
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   Components
   ======================================== */

/* Card */
.card {
    background-color: var(--color-surface-elevated);
    border-radius: var(--radius-2xl);
    box-shadow: none;
    border: 1px solid var(--color-border);
    padding: var(--space-8);
}

/* Buttons */
.btn-primary,
.btn-secondary,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-xl);
    border: none;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 600;
    /* Fixed line-height so <a> (link_to) and <button> (button_to) render the same height */
    line-height: 1.25;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
}

.btn-primary {
    background-color: var(--color-action);
    color: white;
    box-shadow: 0 4px 14px 0 color-mix(in srgb, var(--color-brand-600) 40%, transparent);
}

.btn-primary:hover {
    background-color: var(--color-action-hover);
    box-shadow: 0 6px 20px 0 color-mix(in srgb, var(--color-brand-600) 50%, transparent);
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: var(--color-surface-raised);
    color: var(--color-brand-200);
}

.btn-secondary:hover {
    background-color: var(--color-surface-raised-hover);
}

.btn-danger {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--color-error);
}

.btn-danger:hover {
    background-color: rgba(239, 68, 68, 0.3);
}

.btn-primary:active,
.btn-secondary:active,
.btn-danger:active {
    transform: scale(0.98);
}

/* Small buttons for row and secondary actions, badge-like scale; must come after the btn-* base */
.btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: 0.75rem;
}

/* Icon-only button at default button height: even padding + a 20px icon
   add up to the same 44px as text buttons in the same row */
.btn-icon {
    padding: var(--space-3);
}

/* Filter action bar: one row at all widths — on small screens the text
   buttons give up horizontal padding (not height) so nothing wraps */
.filter-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-2);
}

@media (max-width: 480px) {
    .filter-actions .btn-primary,
    .filter-actions .btn-secondary {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

/* Form Inputs */
.input-field {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-xl);
    border: 2px solid var(--color-border-strong);
    background-color: var(--color-surface-sunken);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: 1rem;
    /* Fixed line-height so text inputs, selects and date inputs render the same height */
    line-height: 1.25;
    transition: all var(--transition-normal);
}

.input-field::placeholder {
    color: var(--color-brand-500);
}

.input-field:focus {
    outline: none;
    border-color: var(--color-brand-400);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-brand-500) 20%, transparent);
}

select.input-field {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%237a8baa' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 01.708 0L8 8.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    padding-right: var(--space-10);
    cursor: pointer;
}

/* Native date inputs match the other fields — Safari sizes them to their
   content and ignores width until the native appearance is reset. The
   explicit height mirrors the computed height of the other fields
   (1.25rem text + vertical padding + borders). */
input[type="date"].input-field {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    height: calc(1.25rem + 2 * var(--space-3) + 4px);
    color-scheme: dark;
    cursor: pointer;
}

input[type="date"].input-field::-webkit-date-and-time-value {
    text-align: left;
}

/* Turbo frames are custom elements with no user-agent styling; block display
   makes them participate in stacked layouts (space-y-*) like a div */
turbo-frame {
    display: block;
}

/* Collapsible filter group (details/summary): heading left, toggle button
   right, no native disclosure triangle. .when-open/.when-closed swap the
   button label with the details state. */
.filter-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--color-text-primary);
    list-style: none;
}

.filter-summary::-webkit-details-marker,
.filter-summary::marker {
    display: none;
    content: none;
}

details[open] > .filter-summary .when-closed,
details:not([open]) > .filter-summary .when-open {
    display: none;
}

/* Labels */
label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-brand-300);
    margin-bottom: var(--space-2);
}

/* Links */
.link {
    color: var(--color-brand-400);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.link:hover {
    color: var(--color-brand-300);
}

/* Alerts */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-xl);
    font-size: 0.875rem;
    font-weight: 500;
}

.alert-notice {
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--color-accent-400);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.alert-alert {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--color-error);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Progress Indicator */
.progress-step {
    display: flex;
    align-items: center;
}

.progress-step-dot {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    border: 2px solid;
    transition: all var(--transition-slow);
}

.progress-step-dot.completed {
    background-color: var(--color-accent-500);
    border-color: var(--color-accent-500);
    color: white;
}

.progress-step-dot.current {
    background-color: var(--color-action);
    border-color: var(--color-action);
    color: white;
    transform: scale(1.1);
}

.progress-step-dot.pending {
    background-color: var(--color-surface-raised);
    border-color: var(--color-brand-600);
    color: var(--color-brand-500);
}

.progress-step-line {
    height: 0.25rem;
    width: 3rem;
    /* Steps are top-aligned (labels may wrap) — offset the connector so its
       center sits at the dot center (dot 2.5rem/2 − line 0.25rem/2). */
    margin: 1.125rem var(--space-2) 0;
    border-radius: var(--radius-full);
}

.progress-step-label {
    display: block;
    max-width: 6.5rem;
    text-align: center;
}

.progress-step-line.completed {
    background-color: var(--color-accent-500);
}

.progress-step-line.pending {
    background-color: var(--color-surface-raised-hover);
}

/* ========================================
   Page-Specific Styles
   ======================================== */

/* Auth Pages - Split Layout */
.auth-layout {
    display: flex;
    min-height: 100vh;
}

.auth-branding {
    display: none;
    width: 50%;
    background-color: var(--color-surface);
    position: relative;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .auth-branding {
        display: flex;
    }
}

.auth-branding-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 5rem;
    padding-bottom: 20%;
    color: var(--color-text-primary);
}

.auth-branding h1,
.logo-text {
    font-family: "Zain", sans-serif;
    font-weight: 800;
}

.auth-branding h1 {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.auth-branding p {
    font-size: 1.25rem;
    color: var(--color-text-secondary);
}

.auth-features {
    margin-top: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.auth-feature-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--color-overlay-hover);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-4);
}

.auth-feature-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-brand-400);
}

.auth-form-side {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--space-8) var(--space-4);
    padding-top: var(--space-16);
}

@media (min-width: 1024px) {
    .auth-form-side {
        width: 50%;
        padding: var(--space-12) 5rem;
        justify-content: center;
    }
}

.auth-form-container {
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;
}

/* Onboarding Layout */
.onboarding-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-12) var(--space-4);
}

.onboarding-container {
    width: 100%;
    max-width: 32rem;
    margin: 0 auto;
}

.onboarding-icon {
    width: 4rem;
    height: 4rem;
    background-color: var(--color-surface-raised);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
}

.onboarding-icon svg {
    width: 2rem;
    height: 2rem;
    color: var(--color-brand-400);
}

.onboarding-icon-success {
    background-color: rgba(245, 158, 11, 0.25);
}

.onboarding-icon-success svg {
    color: var(--color-accent-400);
}

/* Dashboard */
.dashboard-nav-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4rem;
}

@media (min-width: 640px) {
    .dashboard-nav-inner {
        padding: 0 var(--space-6);
    }
}

@media (min-width: 1024px) {
    .dashboard-nav-inner {
        padding: 0 var(--space-8);
    }
}

.dashboard-main {
    max-width: 80rem;
    margin: 0 auto;
    padding: var(--space-8) var(--space-4);
}

@media (min-width: 640px) {
    .dashboard-main {
        padding: var(--space-8) var(--space-6);
    }
}

@media (min-width: 1024px) {
    .dashboard-main {
        padding: var(--space-8);
    }
}

.content-narrow {
    max-width: 42rem;
}

/* Form page with a contextual guide beside it (e.g. Identity Provider setup).
   Single column below 1280px — the guide stacks under the form card. */
.form-with-aside {
    display: grid;
    grid-template-columns: minmax(0, 42rem);
    gap: var(--space-6);
    align-items: start;
}

@media (min-width: 1280px) {
    .form-with-aside {
        grid-template-columns: minmax(0, 42rem) minmax(0, 1fr);
    }
}

.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

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

.inline-actions {
    display: flex;
    /* Prevent flex-stretch: link_to buttons would grow to the row height otherwise */
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* button_to form wrapper: size exactly like the button inside (no line-box strut) */
.inline {
    display: inline-flex;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    margin-bottom: 1rem;
}

.back-link:hover {
    color: var(--color-text-primary);
}

.back-link-icon {
    width: 1rem;
    height: 1rem;
}

.settings-link-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Stats Cards */
.stat-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-4);
}

.stat-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.stat-icon.brand {
    background-color: var(--color-surface-raised);
}

.stat-icon.brand svg {
    color: var(--color-brand-400);
}

.stat-icon.accent {
    background-color: rgba(245, 158, 11, 0.25);
}

.stat-icon.accent svg {
    color: var(--color-accent-400);
}

.stat-icon.warning {
    background-color: rgba(245, 158, 11, 0.2);
}

.stat-icon.warning svg {
    color: var(--color-warning);
}

/* Settings Links */
.settings-link {
    display: flex;
    align-items: center;
    padding: var(--space-3);
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.settings-link:hover {
    background-color: var(--color-surface-raised);
    text-decoration: none;
}

.settings-link-icon {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--color-surface-raised);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-3);
    flex-shrink: 0;
    transition: background-color var(--transition-fast);
}

.settings-link:hover .settings-link-icon {
    background-color: var(--color-surface-raised-hover);
}

.settings-link-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-brand-400);
}

.settings-link-title {
    font-weight: 500;
    color: var(--color-text-primary);
}

.settings-link-desc {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* ========================================
   Notification Badge (sidebar icon)
   ======================================== */

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    border-radius: var(--radius-full);
    background-color: var(--color-error-solid);
    color: var(--color-text-on-solid);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

/* QR Code Container */
.qr-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.5rem;
}

.qr-code {
    padding: var(--space-4);
    background-color: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md) inset;
}

.qr-code-interactive {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transform: scale(0.78);
    transform-origin: center;
    margin: -1rem 0;
}

.qr-secret-overlay {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    position: absolute;
    inset: 0;
    background: var(--color-scrim);
    border-radius: var(--radius-xl);
    color: white;
    font-family: ui-monospace, monospace;
    font-size: 0.85rem;
    word-break: break-all;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 0.5rem;
}

.qr-secret-text {
    letter-spacing: 0.05em;
}

.qr-secret-hint {
    font-size: 0.7rem;
    opacity: 0.6;
}

.qr-code-interactive:hover .qr-secret-overlay {
    opacity: 1;
}

.qr-copied-msg {
    color: var(--color-success);
    min-height: 1.25rem;
    opacity: 0;
    transition: opacity 0.3s;
    margin-bottom: 0.25rem;
}

.qr-copied-msg.is-visible {
    opacity: 1;
}

.qr-copy-textarea {
    position: fixed;
    left: -9999px;
    top: 0;
}

/* Recovery Codes */
.recovery-codes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

.recovery-code {
    font-family: ui-monospace, monospace;
    font-size: 0.875rem;
    text-align: center;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-surface-sunken);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    user-select: all;
}

/* Info Box */
.info-box {
    padding: var(--space-4);
    background-color: color-mix(in srgb, var(--color-surface-raised) 50%, transparent);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-6);
}

.info-box-value {
    font-family: ui-monospace, monospace;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    word-break: break-all;
    user-select: all;
}

/* Numbered setup steps (side guide cards) */
.setup-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: setup-step;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.setup-steps li {
    counter-increment: setup-step;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.setup-steps li::before {
    content: counter(setup-step);
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--color-border-strong);
    background-color: var(--color-surface-sunken);
    color: var(--color-text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.setup-steps li > div {
    flex: 1;
    min-width: 0;
    padding-top: 0.375rem;
}

.setup-steps .info-box {
    margin-top: var(--space-3);
    margin-bottom: 0;
}

/* Warning Box */
.warning-box {
    padding: var(--space-4);
    background-color: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-6);
    display: flex;
}

.warning-box svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-warning);
    margin-right: var(--space-2);
    margin-top: 0.125rem;
}

.warning-box-title {
    font-weight: 600;
    color: var(--color-warning-title);
}

.warning-box-text {
    font-size: 0.875rem;
    color: var(--color-warning-text);
    margin-top: var(--space-1);
}

/* Checkbox */
.checkbox-group {
    display: flex;
    align-items: flex-start;
}

.checkbox-group input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-brand-300);
    accent-color: var(--color-brand-600);
}

.checkbox-group label {
    margin-left: var(--space-2);
    margin-bottom: 0;
    font-size: 0.875rem;
    color: var(--color-brand-300);
}

/* Nav User Info */
/* ========================================
   Animations
   ======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-slide-up {
    animation: slideUp 0.5s ease-out;
}

.animate-scale-in {
    animation: scaleIn 0.3s ease-out;
}

/* Spinner: inline progress indicator for transit pages (SSO hand-off) */
.spinner {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-border-focus);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ========================================
   Utility Classes
   ======================================== */

.text-sm {
    font-size: 0.875rem;
}
.text-xs {
    font-size: 0.75rem;
}
.text-lg {
    font-size: 1.125rem;
}
.text-2xl {
    font-size: 1.5rem;
}
.text-4xl {
    font-size: 2.25rem;
}

.font-bold {
    font-weight: 700;
}
.font-semibold {
    font-weight: 600;
}
.font-medium {
    font-weight: 500;
}

.text-muted {
    color: var(--color-text-muted);
}
.text-secondary {
    color: var(--color-text-secondary);
}
.text-primary {
    color: var(--color-text-primary);
}
.mb-1 {
    margin-bottom: var(--space-1);
}
.mb-2 {
    margin-bottom: var(--space-2);
}
.mb-3 {
    margin-bottom: var(--space-3);
}
.mb-4 {
    margin-bottom: var(--space-4);
}
.mb-6 {
    margin-bottom: var(--space-6);
}
.mb-8 {
    margin-bottom: var(--space-8);
}

.mt-1 {
    margin-top: var(--space-1);
}
.mt-2 {
    margin-top: var(--space-2);
}
.mt-3 {
    margin-top: var(--space-3);
}
.mt-4 {
    margin-top: var(--space-4);
}
.mt-6 {
    margin-top: var(--space-6);
}
.mt-8 {
    margin-top: var(--space-8);
}

.ml-auto {
    margin-left: auto;
}
.py-12 {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

.px-6 {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.pt-2 {
    padding-top: var(--space-2);
}
.pt-4 {
    padding-top: var(--space-4);
}
.pt-6 {
    padding-top: var(--space-6);
}

.border-t {
    border-top: 1px solid var(--color-border);
}

.list-disc {
    list-style-type: disc;
}
.list-inside {
    list-style-position: inside;
}


/* TOTP code input */
.totp-input {
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 0.5em;
}

/* ========================================
   Sidebar Navigation (Icon-only, Zendesk-style)
   ======================================== */

.app-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 60px;
    flex-shrink: 0;
    background-color: var(--color-surface-elevated);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    transition: transform var(--transition-slow);
}

/* Logo */
.sidebar-logo {
    padding: var(--space-4) 0;
    display: flex;
    justify-content: center;
    width: 100%;
}

.sidebar-brand {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
}

/* Navigation icons */
.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-3) 0;
    gap: var(--space-1);
}

/* Single icon button/link */
.sidebar-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    font-family: var(--font-family);
}

.sidebar-icon:hover {
    background-color: var(--color-overlay-hover);
    color: var(--color-text-primary);
    text-decoration: none;
}

.sidebar-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.sidebar-icon-active {
    background-color: color-mix(in srgb, var(--color-brand-500) 20%, transparent);
    color: var(--color-text-primary);
}

.sidebar-icon-active svg {
    color: var(--color-brand-400);
}

.sidebar-icon-active:hover {
    background-color: color-mix(in srgb, var(--color-brand-500) 30%, transparent);
}

/* CSS-only tooltip (appears on hover, to the right) */
.sidebar-icon[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--color-surface-sunken);
    color: var(--color-text-primary);
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 100;
    border: 1px solid var(--color-border);
}

.sidebar-icon[data-tooltip]:hover::after {
    opacity: 1;
}

/* Hide tooltip when a popover is open in the same trigger */
.sidebar-popover-trigger:has(.popover-open) .sidebar-icon[data-tooltip]::after {
    display: none;
}

/* Separator line */
/* Footer / Avatar area */
.sidebar-footer {
    padding: var(--space-3) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
}

/* Avatar with user initials */
.sidebar-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background-color: var(--color-surface-raised-hover);
    color: var(--color-brand-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
    text-transform: uppercase;
    position: relative;
}

.sidebar-avatar:hover {
    border-color: var(--color-brand-500);
}

/* Popover menu (for avatar and security) */
.sidebar-popover {
    display: none;
    position: absolute;
    left: calc(60px + 8px);
    bottom: 0;
    min-width: 200px;
    background-color: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-2);
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.sidebar-popover.popover-top {
    bottom: auto;
    top: 0;
}

.sidebar-popover.popover-open {
    display: block;
}

.sidebar-popover-header {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-1);
}

.sidebar-popover-email {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-popover-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font-family);
    text-align: left;
}

.sidebar-popover-link:hover {
    background-color: var(--color-overlay-subtle);
    color: var(--color-text-primary);
    text-decoration: none;
}

.sidebar-popover-link svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    opacity: 0.7;
}

.sidebar-popover-divider {
    height: 1px;
    background-color: var(--color-border);
    margin: var(--space-1) 0;
}

.sidebar-popover-link-danger {
    color: var(--color-error);
}

.sidebar-popover-link-danger:hover {
    color: var(--color-error);
    background-color: rgba(239, 68, 68, 0.1);
}

/* Icon wrapper for popover trigger */
.sidebar-popover-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Content area next to sidebar */
.sidebar-content {
    flex: 1;
    margin-left: 60px;
    min-width: 0;
}

/* Popover backdrop (click to close) */
.sidebar-popover-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
}

.sidebar-popover-backdrop.popover-open {
    display: block;
}

/* Mobile top bar */
@media (max-width: 767px) {
    .sidebar {
        width: 100%;
        height: auto;
        min-height: 56px;
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
        flex-direction: row;
        align-items: center;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: 0 var(--space-3);
        /* Keep the bar clear of the notch/status bar when installed as a PWA */
        padding-top: env(safe-area-inset-top);
        z-index: 1000;
    }

    .sidebar-logo {
        padding: 0;
        width: auto;
        margin-right: var(--space-2);
    }

    .sidebar-brand {
        width: 2rem;
        height: 2rem;
    }

    .sidebar-nav {
        flex: 1;
        flex-direction: row;
        justify-content: flex-start;
        padding: 0;
        gap: var(--space-1);
    }

    .sidebar-footer {
        padding: 0;
        border-top: none;
        width: auto;
    }

    .sidebar-content {
        margin-left: 0;
        margin-top: calc(56px + env(safe-area-inset-top));
        margin-bottom: 0;
    }

    .sidebar-icon[data-tooltip]::after {
        display: none;
    }

    .sidebar-popover {
        left: auto;
        right: 0;
        top: calc(100% + 10px);
        bottom: auto;
    }

    /* Two-column form grids collapse to one column */
    .grid-2col,
    .grid-2-1 {
        grid-template-columns: 1fr;
    }
}

/* Badge styles for tables */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

.badge-success {
    background-color: rgba(16, 185, 129, 0.2);
    color: var(--color-success);
}

.badge-info {
    background-color: color-mix(in srgb, var(--color-brand-500) 20%, transparent);
    color: var(--color-brand-400);
}

.badge-muted {
    background-color: rgba(100, 116, 139, 0.2);
    color: var(--color-text-muted);
}

.badge-pending {
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--color-warning);
}

.badge-danger {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--color-error);
}

/* Table utilities */
.border-b {
    border-bottom: 1px solid var(--color-border);
}

.space-y-3 > * + * {
    margin-top: var(--space-3);
}

.w-auto {
    width: auto;
}

.p-4 {
    padding: var(--space-4);
}

.border {
    border: 1px solid var(--color-border);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.flex-grow {
    flex-grow: 1;
}

.bg-muted {
    background-color: var(--color-surface-raised);
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.word-break-all {
    word-break: break-word;
}

.icon-sm {
    width: 0.875rem;
    height: 0.875rem;
}

.icon-md {
    width: 1.25rem;
    height: 1.25rem;
}

.badge-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--color-warning);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Amber caveat belonging to a single field — a fact the user should read
   before choosing a file, not a consequence to weigh before a destructive
   step (that is warning-box). No fill and no border on purpose: it sits in
   the form flow right under the field hint, and a second boxed element there
   would outweigh the field itself. */
.hint-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-warning);
}

.hint-warning svg {
    flex-shrink: 0;
    margin-top: 0.15em;
}

.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transition: opacity var(--transition-normal);
}

/* ========================================
   Corporate Branding — Brand Palettes
   ======================================== */

/* Curated brand color scales. Every scale shares one OKLCH lightness ladder,
   so contrast ratios stay identical no matter which palette is active. The
   body attribute is set from the Branding setting; the .palette-option-*
   classes reuse the same scales for the swatches in the palette picker.
   "azure" is the :root default and therefore has no body rule. */

/* Explicit azure values so the picker swatch keeps its own colors even
   while another palette is active on the body */
.palette-option-azure {
    --color-brand-300: #8cc3e3;
    --color-brand-400: #3ea0d3;
    --color-brand-500: #1682b3;
    --color-brand-700: #085577;
}

body[data-palette="steel"],
.palette-option-steel {
    --color-brand-50: #f5f7fa;
    --color-brand-100: #ebeef5;
    --color-brand-200: #d3dae8;
    --color-brand-300: #adbbd4;
    --color-brand-400: #8196bc;
    --color-brand-500: #6278a8;
    --color-brand-600: #4d5f8e;
    --color-brand-700: #404d73;
    --color-brand-800: #384260;
    --color-brand-900: #323951;
    --color-brand-950: #1e2231;
}

body[data-palette="emerald"],
.palette-option-emerald {
    --color-brand-50: #f4f8f5;
    --color-brand-100: #e7f1ea;
    --color-brand-200: #cbe0d1;
    --color-brand-300: #9dc6aa;
    --color-brand-400: #65a67c;
    --color-brand-500: #318d59;
    --color-brand-600: #097442;
    --color-brand-700: #0f5e36;
    --color-brand-800: #175030;
    --color-brand-900: #1a442b;
    --color-brand-950: #0f2919;
}

body[data-palette="teal"],
.palette-option-teal {
    --color-brand-50: #f2f8f9;
    --color-brand-100: #e4f1f2;
    --color-brand-200: #c5e0e1;
    --color-brand-300: #91c5c8;
    --color-brand-400: #4ba5aa;
    --color-brand-500: #11898f;
    --color-brand-600: #0a6e73;
    --color-brand-700: #055a5e;
    --color-brand-800: #044d51;
    --color-brand-900: #044346;
    --color-brand-950: #03292b;
}

body[data-palette="violet"],
.palette-option-violet {
    --color-brand-50: #f7f6fb;
    --color-brand-100: #efecf6;
    --color-brand-200: #dcd6eb;
    --color-brand-300: #bfb3d9;
    --color-brand-400: #9d89c3;
    --color-brand-500: #8369b0;
    --color-brand-600: #6b5096;
    --color-brand-700: #574279;
    --color-brand-800: #4a3965;
    --color-brand-900: #3f3355;
    --color-brand-950: #261e34;
}

body[data-palette="ruby"],
.palette-option-ruby {
    --color-brand-50: #fbf5f5;
    --color-brand-100: #f7ebeb;
    --color-brand-200: #ecd3d4;
    --color-brand-300: #dbadaf;
    --color-brand-400: #c57f84;
    --color-brand-500: #b05b64;
    --color-brand-600: #95434c;
    --color-brand-700: #79373e;
    --color-brand-800: #653136;
    --color-brand-900: #552c30;
    --color-brand-950: #341a1c;
}

body[data-palette="copper"],
.palette-option-copper {
    --color-brand-50: #fbf6f2;
    --color-brand-100: #f6ece4;
    --color-brand-200: #ead6c6;
    --color-brand-300: #d7b295;
    --color-brand-400: #bf8859;
    --color-brand-500: #ab6623;
    --color-brand-600: #8e4f07;
    --color-brand-700: #753f03;
    --color-brand-800: #62380f;
    --color-brand-900: #533113;
    --color-brand-950: #321d0b;
}

body[data-palette="cobalt"],
.palette-option-cobalt {
    --color-brand-50: #f3f7fe;
    --color-brand-100: #e6effd;
    --color-brand-200: #cadbf9;
    --color-brand-300: #9dbbf2;
    --color-brand-400: #6694e8;
    --color-brand-500: #3c73de;
    --color-brand-600: #2459c1;
    --color-brand-700: #1e499c;
    --color-brand-800: #1e4081;
    --color-brand-900: #1d386b;
    --color-brand-950: #112241;
}

body[data-palette="indigo"],
.palette-option-indigo {
    --color-brand-50: #f6f6fc;
    --color-brand-100: #ededf9;
    --color-brand-200: #d7d7ef;
    --color-brand-300: #b6b5e1;
    --color-brand-400: #8f8dd0;
    --color-brand-500: #726cc0;
    --color-brand-600: #5b53a5;
    --color-brand-700: #4a4485;
    --color-brand-800: #3f3c6e;
    --color-brand-900: #37345d;
    --color-brand-950: #211f38;
}

body[data-palette="magenta"],
.palette-option-magenta {
    --color-brand-50: #fbf5f8;
    --color-brand-100: #f6eaf0;
    --color-brand-200: #ead2de;
    --color-brand-300: #d7acc3;
    --color-brand-400: #be7ea2;
    --color-brand-500: #a95a89;
    --color-brand-600: #8e4270;
    --color-brand-700: #73365b;
    --color-brand-800: #61304d;
    --color-brand-900: #522c42;
    --color-brand-950: #321a28;
}

body[data-palette="olive"],
.palette-option-olive {
    --color-brand-50: #f6f8f3;
    --color-brand-100: #edefe6;
    --color-brand-200: #d7ddc9;
    --color-brand-300: #b6c09c;
    --color-brand-400: #8f9d64;
    --color-brand-500: #718236;
    --color-brand-600: #5a691b;
    --color-brand-700: #495518;
    --color-brand-800: #3f491b;
    --color-brand-900: #363e1b;
    --color-brand-950: #202610;
}

body[data-palette="scarlet"],
.palette-option-scarlet {
    --color-brand-50: #fef5f3;
    --color-brand-100: #fde9e6;
    --color-brand-200: #f7cfc9;
    --color-brand-300: #eca69c;
    --color-brand-400: #dc7265;
    --color-brand-500: #cb4339;
    --color-brand-600: #ae2520;
    --color-brand-700: #8d211c;
    --color-brand-800: #75231d;
    --color-brand-900: #63221c;
    --color-brand-950: #3c1411;
}

/* Palette picker (Admin → Settings → Branding) */
.palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--space-3);
}

.palette-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.palette-option:hover {
    border-color: var(--color-brand-400);
}

.palette-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* The checked ring picks up the option's own palette variables */
.palette-option:has(input:checked) {
    border-color: var(--color-brand-400);
    background-color: color-mix(in srgb, var(--color-brand-500) 15%, transparent);
}

.palette-option:has(input:focus-visible) {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.palette-swatches {
    display: flex;
    gap: var(--space-1);
}

.palette-dot {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-full);
}

.palette-dot-300 { background-color: var(--color-brand-300); }
.palette-dot-500 { background-color: var(--color-brand-500); }
.palette-dot-700 { background-color: var(--color-brand-700); }

.palette-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

/* Card picker for a small set of named alternatives, built like the palette
   grid but without its palette-specific variables. Each card names its option
   and explains it in one line — deliberately not a preview of the result: two
   options whose output happens to match today would render identical cards. */
.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-3);
}

.choice-option {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.choice-option:hover {
    border-color: var(--color-brand-400);
}

.choice-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-option:has(input:checked) {
    border-color: var(--color-brand-400);
    background-color: color-mix(in srgb, var(--color-brand-500) 15%, transparent);
}

.choice-option:has(input:focus-visible) {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.choice-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.choice-desc {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

/* Flash toast wrapper. Toasts persist until the next navigation, so on
   mobile they sit below the fixed top navbar (z-index 1000) instead of
   covering it */
.toast-container {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 1100;
    max-width: calc(100vw - 2rem);
}

@media (max-width: 767px) {
    .toast-container {
        top: calc(56px + env(safe-area-inset-top) + var(--space-2));
    }
}

/* Toggle switch — boolean settings. Markup: label.toggle > hidden
   checkbox + span.toggle-track + span.toggle-label */
.toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}

.toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle-track {
    position: relative;
    flex-shrink: 0;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-border);
    transition: background-color var(--transition-normal);
}

.toggle-track::after {
    content: "";
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: var(--radius-full);
    background-color: white;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal);
}

.toggle input:checked + .toggle-track {
    background-color: var(--color-action);
}

.toggle input:checked + .toggle-track::after {
    transform: translateX(1.25rem);
}

.toggle input:focus-visible + .toggle-track {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.toggle-label {
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

/* Uploaded logo previews (Branding page) */
.logo-preview {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    object-fit: contain;
}

.logo-preview-wide {
    width: auto;
    max-width: 12rem;
}

/* Custom logo on the auth pages (replaces the wordmark) */
.auth-logo {
    max-height: 4rem;
    max-width: 100%;
    width: auto;
    margin-bottom: var(--space-2);
}

/* Error pages: the 404 train speeds in, teeters on the broken edge, crashes
   into the abyss and stays down (wheels still spinning) */
.error-page {
    max-width: 36rem;
    margin: 0 auto;
    text-align: center;
}

.error-scene {
    display: block;
    width: 100%;
    max-width: 34rem;
    margin: 0 auto 1rem;
    overflow: hidden;
}

.error-code {
    font-size: 3.25rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}

.error-wagon-1,
.error-wagon-2,
.error-wagon-3,
.error-wagon-4,
.error-wagon-5 {
    transform-box: fill-box;
    transform-origin: 90% 100%;
    animation: 6s linear 1 forwards;
}

/* The locomotive leads: teeters on the edge, flips and lands on its roof.
   Translation and rotation run on separate nested groups with the pivot baked
   into the geometry — Safari re-resolves fill-box/percentage origins per frame
   while the wheel animations run inside, which made the resting loco bob. */
.error-loco {
    animation: error-loco-move 6s linear 1 forwards;
}

.error-loco-rot {
    animation: error-loco-spin 6s linear 1 forwards;
}

@keyframes error-loco-move {
    0%   { transform: translateX(-120px); }
    26%  { transform: translateX(216px); }
    29%  { transform: translateX(221px); }
    32%  { transform: translateX(224px); }
    36%  { transform: translateX(228px); }
    39%  { transform: translateX(231px); }
    43%  { transform: translate(240px, 12px); }
    50%  { transform: translate(288px, 60px); }
    56%  { transform: translate(310px, 106px); }
    61%  { transform: translate(311px, 82px); }
    66%  { transform: translate(312px, 106px); }
    70%  { transform: translate(312px, 100px); }
    74%  { transform: translate(312px, 104px); }
    100% { transform: translate(312px, 104px); }
}

@keyframes error-loco-spin {
    0%   { transform: rotate(0deg); }
    26%  { transform: rotate(0deg); }
    29%  { transform: rotate(8deg); }
    32%  { transform: rotate(3deg); }
    36%  { transform: rotate(14deg); }
    39%  { transform: rotate(8deg); }
    43%  { transform: rotate(24deg); }
    50%  { transform: rotate(95deg); }
    56%  { transform: rotate(183deg); }
    61%  { transform: rotate(174deg); }
    66%  { transform: rotate(181deg); }
    70%  { transform: rotate(179deg); }
    74%  { transform: rotate(179deg); }
    100% { transform: rotate(179deg); }
}

/* Decoupled wagons keep rolling and drop over the edge one after another */
.error-wagon-1 { animation-name: error-wagon-1-crash; }

@keyframes error-wagon-1-crash {
    0%   { transform: translateX(-120px); }
    26%  { transform: translateX(216px); }
    30%  { transform: translateX(232px); }
    36%  { transform: translateX(248px); }
    39%  { transform: translateX(252px) rotate(10deg); }
    44%  { transform: translateX(264px) translateY(20px) rotate(55deg); }
    52%  { transform: translateX(288px) translateY(100px) rotate(140deg); }
    58%  { transform: translateX(300px) translateY(122px) rotate(188deg); }
    63%  { transform: translateX(300px) translateY(106px) rotate(176deg); }
    68%  { transform: translateX(300px) translateY(122px) rotate(183deg); }
    72%  { transform: translateX(300px) translateY(118px) rotate(180deg); }
    76%  { transform: translateX(300px) translateY(120px) rotate(181deg); }
    100% { transform: translateX(300px) translateY(120px) rotate(181deg); }
}

.error-wagon-2 { animation-name: error-wagon-2-crash; }

@keyframes error-wagon-2-crash {
    0%   { transform: translateX(-120px); }
    26%  { transform: translateX(216px); }
    36%  { transform: translateX(258px); }
    44%  { transform: translateX(274px); }
    48%  { transform: translateX(279px) rotate(12deg); }
    54%  { transform: translateX(284px) translateY(30px) rotate(70deg); }
    62%  { transform: translateX(288px) translateY(100px) rotate(140deg); }
    66%  { transform: translateX(288px) translateY(122px) rotate(187deg); }
    71%  { transform: translateX(288px) translateY(106px) rotate(178deg); }
    76%  { transform: translateX(288px) translateY(120px) rotate(184deg); }
    100% { transform: translateX(288px) translateY(120px) rotate(184deg); }
}

/* Wagon 3 drops promptly onto the wall wagon */
.error-wagon-3 { animation-name: error-wagon-3-crash; }

@keyframes error-wagon-3-crash {
    0%   { transform: translateX(-120px); }
    26%  { transform: translateX(216px); }
    40%  { transform: translateX(262px); }
    52%  { transform: translateX(306px); }
    56%  { transform: translateX(308px) rotate(8deg); }
    62%  { transform: translateX(318px) translateY(60px) rotate(30deg); }
    68%  { transform: translateX(328px) translateY(110px) rotate(22deg); }
    72%  { transform: translateX(330px) translateY(130px) rotate(18deg); }
    77%  { transform: translateX(330px) translateY(116px) rotate(22deg); }
    82%  { transform: translateX(330px) translateY(128px) rotate(15deg); }
    100% { transform: translateX(330px) translateY(128px) rotate(15deg); }
}

/* Wagon 4 launches at speed, sails over the pile and wedges itself
   diagonally into the gap between the honey wagon and the loco */
.error-wagon-4 { animation-name: error-wagon-4-crash; }

@keyframes error-wagon-4-crash {
    0%   { transform: translateX(-120px); }
    26%  { transform: translateX(216px); }
    42%  { transform: translateX(272px); }
    56%  { transform: translateX(332px); }
    62%  { transform: translateX(356px) translateY(24px) rotate(10deg); }
    70%  { transform: translateX(384px) translateY(76px) rotate(20deg); }
    81%  { transform: translateX(404px) translateY(140px) rotate(40deg); }
    86%  { transform: translateX(404px) translateY(130px) rotate(36deg); }
    91%  { transform: translateX(404px) translateY(138px) rotate(40deg); }
    100% { transform: translateX(404px) translateY(138px) rotate(40deg); }
}

/* The very last wagon brakes at the edge, hesitates — goes down anyway,
   slides forward and leans back against the two-storey wall pile */
.error-wagon-5 { animation-name: error-wagon-5-crash; }

@keyframes error-wagon-5-crash {
    0%   { transform: translateX(-120px); }
    26%  { transform: translateX(216px); }
    44%  { transform: translateX(276px); }
    60%  { transform: translateX(330px); }
    72%  { transform: translateX(354px); }
    76%  { transform: translateX(358px) rotate(6deg); }
    80%  { transform: translateX(358px) rotate(2deg); }
    84%  { transform: translateX(366px) translateY(12px) rotate(14deg); }
    88%  { transform: translateX(386px) translateY(70px) rotate(8deg); }
    92%  { transform: translateX(408px) translateY(140px) rotate(0deg); }
    95%  { transform: translateX(410px) translateY(136px) rotate(-18deg); }
    98%  { transform: translateX(410px) translateY(132px) rotate(-32deg); }
    100% { transform: translateX(410px) translateY(132px) rotate(-32deg); }
}

/* Wheel geometry is centered on its group origin (positioned by an outer
   translate), so the rotation needs no transform-box/origin — that combination
   renders jittery in Safari on nested SVG animations. */
.error-wheel {
    animation: error-wheel-spin 0.6s linear infinite;
}

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

.error-puff {
    opacity: 0;
    animation: error-puff-rise 1s ease-out 3.36s 1 both;
    transform-box: fill-box;
    transform-origin: center;
}

/* One dust wave per impact: loco 3.36s, wagon 1 3.48s, wagon 2 3.96s,
   wagon 3 4.32s, wagon 4 4.86s, wagon 5 5.52s */
.error-puff:nth-child(2)  { animation-delay: 3.44s; }
.error-puff:nth-child(3)  { animation-delay: 3.6s; }
.error-puff:nth-child(4)  { animation-delay: 3.5s; }
.error-puff:nth-child(5)  { animation-delay: 3.98s; }
.error-puff:nth-child(6)  { animation-delay: 4.06s; }
.error-puff:nth-child(7)  { animation-delay: 4.34s; }
.error-puff:nth-child(8)  { animation-delay: 4.42s; }
.error-puff:nth-child(9)  { animation-delay: 4.88s; }
.error-puff:nth-child(10) { animation-delay: 5.54s; }

@keyframes error-puff-rise {
    0%   { opacity: 0; transform: scale(0.2); }
    20%  { opacity: 0.85; }
    100% { opacity: 0; transform: scale(2.4) translateY(-14px); }
}

/* The whole scene jolts when the locomotive hits */
.error-scene {
    animation: error-scene-shake 0.4s linear 3.34s 1 both;
}

@keyframes error-scene-shake {
    0%, 100% { transform: translate(0, 0); }
    20%  { transform: translate(-3px, 3px); }
    40%  { transform: translate(3px, -2px); }
    60%  { transform: translate(-2px, 2px); }
    80%  { transform: translate(1px, -1px); }
}

/* Accessibility: no crash for reduced-motion users — the train just waits */
@media (prefers-reduced-motion: reduce) {
    .error-loco,
    .error-wagon-1,
    .error-wagon-2,
    .error-wagon-3,
    .error-wagon-4,
    .error-wagon-5 {
        animation: none;
        transform: translateX(120px);
    }

    .error-loco-rot,
    .error-wheel,
    .error-puff,
    .error-scene {
        animation: none;
    }
}