/* The Sublime Hub shell, ported from hub.sublime.se (Sublime.Hub/wwwroot/admin.css) so Catch looks and behaves like
   the Hub's sidebar sections. Only the rules Catch uses are kept, under the Hub's class names, so later changes to
   the Hub can be ported by comparing the two files. Colours and fonts come from brand.css. */

/* The shell's tokens map Sublime's profile (brand.css) onto the shell: light is the default, as in the profile,
   and dark is the user's choice. The tokens sit on body rather than the shell because Radzen moves popups (dropdown lists, date pickers) to
   <body>. Outside the shell they would get Radzen's own palette and black text on a dark panel. */
body:has(.admin-shell) {
    --canvas: var(--sb-grey-5);
    --sidebar: var(--sb-blue);
    --surface: var(--sb-white);
    --surface-hover: #f3f1ed;
    --line: var(--sb-grey-4);
    --line-soft: #ece9e3;
    --ink: var(--sb-black);
    --muted: #5f5f5b;
    /* Text tokens are tuned to WCAG AA (4.5:1) on --surface-hover, the darkest background they sit on. The brand
       grey-1 and status colours fall just below that, so the text variants are a step darker than the brand. */
    --quiet: #686864;
    --accent: var(--sb-blue);
    --accent-surface: var(--sb-teal-25);
    /* Links must differ from --ink by 3:1 to be told apart without an underline; the brand teal is too light. */
    --link: #367480;
    --accent-icon: var(--sb-status-info);
    /* The favorite star. The brand yellow is too light for a 3:1 icon on white, so light uses a darker gold. */
    --favorite: #9a7628;
    --field: var(--sb-white);
    --button: var(--sb-blue);
    --button-hover: var(--sb-blue-raised);
    --button-ink: var(--sb-white);
    --danger: #a84c46;
    --ok-text: #4e7652;
    --rz-primary: var(--sb-blue);
    --rz-primary-light: var(--sb-teal);
    --rz-primary-dark: var(--sb-blue-deep);
    --rz-secondary: var(--sb-teal);
    --rz-link-color: var(--link);
    --rz-link-hover-color: var(--link);
    /* Radzen's status palette is Material's (bright red, orange, pink), which clashes with the brand and fails
       contrast with white text. It is mapped to the brand hues instead; every on-colour pair is AA (4.5:1).
       "Lighter" is the tinted shade used by badges and alerts. */
    --rz-primary-lighter: var(--sb-teal-25);
    --rz-on-primary-lighter: var(--sb-blue);
    --rz-on-secondary: var(--sb-blue-deep);
    --rz-danger: var(--danger);
    --rz-danger-light: var(--danger);
    --rz-danger-dark: #8a3c37;
    --rz-danger-darker: #8a3c37;
    --rz-danger-lighter: color-mix(in srgb, var(--rz-danger) 14%, var(--sb-white));
    --rz-on-danger: var(--sb-white);
    --rz-on-danger-light: var(--sb-white);
    --rz-on-danger-lighter: #8a3c37;
    --rz-warning: var(--sb-yellow);
    --rz-warning-light: var(--sb-yellow);
    --rz-warning-dark: #6b5216;
    --rz-warning-darker: #6b5216;
    --rz-warning-lighter: color-mix(in srgb, var(--rz-warning) 35%, var(--sb-white));
    --rz-on-warning: var(--sb-black);
    --rz-on-warning-light: var(--sb-black);
    --rz-on-warning-lighter: #6b5216;
    --rz-success: var(--ok-text);
    --rz-success-light: var(--ok-text);
    --rz-success-dark: #3d5f41;
    --rz-success-darker: #3d5f41;
    --rz-success-lighter: color-mix(in srgb, var(--rz-success) 16%, var(--sb-white));
    --rz-on-success: var(--sb-white);
    --rz-on-success-light: var(--sb-white);
    --rz-on-success-lighter: #3d5f41;
    --rz-info: var(--link);
    --rz-info-light: var(--link);
    --rz-info-dark: #2a5c66;
    --rz-info-darker: #2a5c66;
    --rz-info-lighter: color-mix(in srgb, var(--rz-info) 14%, var(--sb-white));
    --rz-on-info: var(--sb-white);
    --rz-on-info-light: var(--sb-white);
    --rz-on-info-lighter: #2a5c66;
    /* Badges label table rows, so they follow the table's quiet type rather than Material's uppercase. */
    --rz-badge-font-size: 14px;
    --rz-badge-font-weight: 550;
    --rz-badge-text-transform: none;
    --rz-badge-letter-spacing: 0;
    --rz-badge-padding: 1px 7px;
    --rz-badge-pill-padding: 1px 9px;
    --rz-tabs-tab-text-transform: none;
    --rz-tabs-tab-letter-spacing: 0;
    --rz-tabs-tab-font-size: 16px;
    /* The default indicator is the secondary teal, which is below 3:1 on white. */
    --rz-tabs-tab-selected-top-border-color: var(--accent);
    /* Radzen sizes text from --rz-body-font-size (14px in Material); the shell's base is 16px. */
    --rz-body-font-size: 1rem;
    --rz-input-font-size-md: 1rem;
    --rz-input-font-size-sm: 0.9375rem;
    --rz-input-background-color: var(--field);
    --rz-input-border: 1px solid var(--line);
    --rz-input-border-radius: 7px;
    /* RadzenDataGrid looks like the shell's tables: a bordered card on --surface with soft row lines. */
    --rz-grid-border: 1px solid var(--line);
    --rz-grid-border-radius: 10px;
    --rz-grid-background-color: var(--surface);
    --rz-grid-header-background-color: var(--surface);
    --rz-grid-header-sorted-background-color: var(--surface-hover);
    --rz-grid-header-color: var(--muted);
    --rz-grid-header-font-size: 14px;
    --rz-grid-header-font-weight: 600;
    --rz-grid-cell-font-size: 15px;
    --rz-grid-cell-color: var(--ink);
    --rz-grid-cell-border: 1px solid var(--line-soft);
    --rz-grid-header-cell-border-bottom: 1px solid var(--line);
    --rz-grid-stripe-background-color: var(--surface);
    --rz-grid-stripe-odd-background-color: var(--surface);
    --rz-grid-hover-background-color: var(--surface-hover);
    --rz-grid-hover-color: var(--ink);
    --rz-text-font-family: var(--sb-font-body);
    --rz-body-background-color: var(--canvas);
    --rz-text-color: var(--ink);
    --rz-dialog-background-color: var(--surface);
    --rz-dialog-title-background-color: var(--surface);
    --rz-dialog-title-color: var(--ink);
    --rz-border-color: var(--line);
    /* Dropdown lists open on the field colour, with the shell's hover rather than Radzen's grey. */
    --rz-dropdown-open-background-color: var(--field);
    --rz-dropdown-item-hover-background-color: var(--surface-hover);
    --rz-dropdown-item-hover-color: var(--ink);
    margin: 0;
    color: var(--ink);
    background: var(--canvas);
    font-family: var(--sb-font-body);
    color-scheme: light;
}

.admin-shell {
    display: flex;
    min-height: 100dvh;
    color: var(--ink);
    background: var(--canvas);
    font-family: var(--sb-font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

    body:has(.admin-shell[data-theme="material-dark"]) {
        --canvas: var(--sb-blue-deep);
        --surface: var(--sb-blue);
        --surface-hover: var(--sb-blue-raised);
        --line: #3a4560;
        --line-soft: #2e374c;
        --ink: #f3f2ef;
        --muted: #b4b8c2;
        --quiet: #a7adb8;
        --accent: var(--sb-teal-50);
        --accent-surface: color-mix(in srgb, var(--sb-teal) 22%, var(--sb-blue));
        --link: var(--sb-teal-50);
        --accent-icon: var(--sb-teal);
        --favorite: var(--sb-yellow);
        --field: #212839;
        --button: var(--sb-teal);
        --button-hover: #72b0ba;
        --button-ink: var(--sb-blue-deep);
        --danger: #e09a94;
        --ok-text: #8fb893;
        --rz-primary: var(--sb-teal);
        --rz-primary-light: var(--sb-teal-50);
        --rz-primary-dark: #4a8792;
        /* No light-on-dark colour is both readable and 3:1 from --ink, so dark links carry an underline instead. */
        --rz-link-text-decoration: underline;
        /* In dark the status hues are light, so filled shades carry dark text and tints carry pale text. */
        --rz-on-secondary: var(--sb-blue-deep);
        --rz-primary-lighter: var(--accent-surface);
        --rz-on-primary-lighter: var(--sb-teal-25);
        --rz-danger-dark: #f3c2bd;
        --rz-danger-darker: #f3c2bd;
        --rz-danger-lighter: color-mix(in srgb, var(--rz-danger) 24%, var(--sb-blue));
        --rz-on-danger: var(--sb-blue-deep);
        --rz-on-danger-light: var(--sb-blue-deep);
        --rz-on-danger-lighter: #f3c2bd;
        --rz-warning-dark: var(--sb-yellow-50);
        --rz-warning-darker: var(--sb-yellow-50);
        --rz-warning-lighter: color-mix(in srgb, var(--rz-warning) 22%, var(--sb-blue));
        --rz-on-warning: var(--sb-blue-deep);
        --rz-on-warning-light: var(--sb-blue-deep);
        --rz-on-warning-lighter: var(--sb-yellow-50);
        --rz-success-dark: #cfe0d0;
        --rz-success-darker: #cfe0d0;
        --rz-success-lighter: color-mix(in srgb, var(--rz-success) 22%, var(--sb-blue));
        --rz-on-success: var(--sb-blue-deep);
        --rz-on-success-light: var(--sb-blue-deep);
        --rz-on-success-lighter: #cfe0d0;
        --rz-info-dark: var(--sb-teal-25);
        --rz-info-darker: var(--sb-teal-25);
        --rz-info-lighter: color-mix(in srgb, var(--rz-info) 22%, var(--sb-blue));
        --rz-on-info: var(--sb-blue-deep);
        --rz-on-info-light: var(--sb-blue-deep);
        --rz-on-info-lighter: var(--sb-teal-25);
        color-scheme: dark;
    }

    /* The sidebar and the section header are Sublime Blue in both themes, so they carry their own dark tokens. */
    .admin-shell .admin-sidebar,
    .admin-shell .section-header {
        --surface: var(--sb-blue-raised);
        --surface-hover: rgba(255, 255, 255, .08);
        --line: rgba(255, 255, 255, .16);
        --line-soft: rgba(195, 232, 230, .14);
        --ink: var(--sb-white);
        --muted: rgba(255, 255, 255, .72);
        --quiet: rgba(255, 255, 255, .55);
        --accent: var(--sb-teal-50);
        --accent-surface: rgba(96, 162, 173, .24);
        --favorite: var(--sb-yellow);
        color: var(--ink);
    }

    .admin-shell[data-theme="material-dark"] .admin-sidebar,
    .admin-shell[data-theme="material-dark"] .section-header {
        background: #181d29;
    }

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

    /* RadzenLink is excluded so the theme's link colour and hover underline survive this reset. */
    .admin-shell a:not(.rz-link) {
        text-decoration: none;
        color: inherit;
    }

    .admin-shell .rz-link {
        text-underline-offset: 3px;
    }

        .admin-shell .rz-link:focus-visible {
            outline: 2px solid var(--link);
            outline-offset: 2px;
            border-radius: 2px;
        }

    /* The link that names a row carries the weight table links have always had, so the row is easy to scan. */
    .admin-shell .rz-link.row-title {
        font-weight: 600;
    }

    /* Radzen sizes link icons to the text, but the shell's 20px icon rule is more specific. */
    .admin-shell .rz-link .rzi {
        font-size: 1.1em;
    }

    /* Badges sit in table rows; centring keeps them on the text line instead of Radzen's top alignment. */
    .admin-shell .rz-badge {
        vertical-align: middle;
    }

        .admin-shell .rz-badge.icon-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }

        .admin-shell .rz-badge .rzi {
            font-size: 1.1em;
        }

    /* RadzenButton in the shell's voice: sentence case, flat, and the same radius as fields and cards. The light
       style is the secondary button, so it gets the surface and line colours instead of Material's grey. */
    .admin-shell .rz-button {
        text-transform: none;
        letter-spacing: 0;
        font-size: 15px;
        border-radius: 7px;
        box-shadow: none;
    }

        .admin-shell .rz-button.rz-button-sm {
            font-size: 14px;
        }

        .admin-shell .rz-button.rz-light {
            color: var(--ink);
            background: var(--surface-hover);
            border: 1px solid var(--line);
        }

        .admin-shell .rz-button .rzi {
            font-size: 1.3em;
        }

    /* Keep form defaults below Radzen's component and icon font rules. */
    :where(.admin-shell) :where(button, input, textarea) {
        font: inherit;
    }

    .admin-shell button {
        cursor: pointer;
    }

        .admin-shell button:disabled {
            cursor: not-allowed;
            opacity: .5;
        }

    .admin-shell :focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 4px;
    }

    .admin-shell .rzi {
        font-size: 20px;
        line-height: 1;
        flex-shrink: 0;
    }

.skip-link {
    position: fixed;
    z-index: 3000;
    padding: 12px 20px;
    background: var(--surface);
    left: 16px;
    top: -100px;
    border: 1px solid var(--accent);
    border-radius: 8px;
}

    .skip-link:focus {
        top: 12px;
    }

.admin-sidebar {
    width: 252px;
    flex-shrink: 0;
    background: var(--sidebar);
    border-right: 1px solid var(--line-soft);
    padding: 30px 18px 0;
    position: sticky;
    top: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* The Sublime wordmark with the app's name under it, as on Sublime's other sites. */
.brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 0 10px;
    min-width: 0;
}

.brand-logo {
    display: block;
    height: 14px;
    width: auto;
}

.brand-logo-dark,
[data-theme="material-dark"] .brand-logo-light {
    display: none;
}

[data-theme="material-dark"] .brand-logo-dark {
    display: block;
}

.signin-card .brand-logo {
    height: 18px;
    margin-bottom: 18px;
}

.admin-shell :is(h1, h2, h3) {
    font-family: var(--sb-font-heading);
}

.brand-name {
    font-family: var(--sb-font-heading);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.2px;
    overflow-wrap: anywhere;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 7px;
    padding: 11px 12px;
    font-size: 15px;
    font-weight: 550;
}

    .nav-link.selected {
        background: var(--accent-surface);
        color: var(--accent);
    }

.nav-count {
    margin-left: auto;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border-radius: 5px;
    padding: 0 7px;
    font-size: 13px;
    line-height: 20px;
}

.admin-sidebar > nav {
    margin-top: 32px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 12px;
}

.nav-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .nav-group .nav-link {
        flex: 1;
        min-width: 0;
    }

.sidebar-bottom {
    margin-top: auto;
    border-top: 1px solid var(--line-soft);
    padding: 15px 0 18px;
}

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    background: none;
    color: var(--muted);
    border: none;
    padding: 10px;
    font-size: 14px !important;
}

    .theme-toggle:hover {
        color: var(--ink);
    }

.theme-switch {
    width: 25px;
    height: 15px;
    margin-left: auto;
    background: var(--line);
    border-radius: 20px;
    padding: 3px;
}

    .theme-switch::before {
        content: "";
        display: block;
        height: 9px;
        width: 9px;
        background: var(--muted);
        border-radius: 50%;
    }

[data-theme="material"] .theme-switch::before {
    transform: translateX(10px);
    background: var(--accent);
}

.profile {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    padding: 10px 4px 0;
    border-top: 1px solid var(--line-soft);
}

.profile-avatar {
    display: grid;
    place-items: center;
    background: var(--sb-teal-50);
    color: var(--sb-blue);
    width: 31px;
    height: 31px;
    border-radius: 50%;
    font-size: 14px;
    flex-shrink: 0;
}

.profile-name {
    font-size: 14px;
    min-width: 0;
    overflow-wrap: anywhere;
}

    .profile-name small {
        display: block;
        font-size: 13px;
        color: var(--muted);
        margin-top: 2px;
    }

.profile form {
    margin-left: auto;
}

.admin-workspace {
    min-width: 0;
    flex: 1;
}

.workspace-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 70px;
    border-bottom: 1px solid var(--line-soft);
    padding: 0 44px;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--muted);
    font-size: 14px;
    min-width: 0;
    overflow-wrap: anywhere;
}

    .breadcrumbs [aria-current="page"] {
        color: var(--ink);
    }

.breadcrumb-home {
    display: flex;
}

    .breadcrumb-home .rzi {
        font-size: 16px;
    }

.breadcrumb-divider {
    color: var(--quiet);
    opacity: .6;
}

.workspace-content {
    padding: 42px 44px 22px;
    max-width: 1920px;
    margin: auto;
}

.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 34px;
}

.eyebrow {
    color: var(--quiet);
    letter-spacing: 1.7px;
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 12px;
}

.admin-shell h1 {
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -.4px;
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
}

.heading-count {
    display: inline-flex;
    vertical-align: middle;
    font-size: 15px;
    font-weight: 450;
    border: 1px solid var(--line);
    padding: 3px 9px;
    letter-spacing: 0;
    margin-left: 14px;
    border-radius: 6px;
    color: var(--muted);
}

.page-subtitle {
    font-size: 15px;
    margin: 13px 0 0;
    color: var(--muted);
}

.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 9px 14px;
    font-size: 15px !important;
    line-height: 1.5;
}

    .secondary-button:hover {
        background: var(--surface-hover);
    }

    .secondary-button .rzi {
        font-size: 17px;
    }

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 75px 20px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    color: var(--muted);
    margin-top: 15px;
}

    .empty-state > .rzi {
        font-size: 35px;
        color: var(--accent);
        margin-bottom: 15px;
    }

    .empty-state h2 {
        font-size: 20px;
        font-weight: 500;
        color: var(--ink);
        margin: 0;
    }

    .empty-state p {
        font-size: 15px;
        margin: 9px 0 18px;
    }

.welcome-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 60px;
    min-height: calc(100dvh - 175px);
    padding: 40px 0;
    max-width: 1100px;
    margin: auto;
}

.welcome-copy h1 {
    font-size: clamp(36px, 4vw, 64px);
    line-height: 1.1;
    letter-spacing: -.5px;
    margin: 22px 0;
}

    .welcome-copy h1 span {
        color: var(--accent);
    }

.welcome-copy > p:not(.eyebrow) {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.9;
}

.signin-card {
    padding: 35px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 14px 50px #0000000d;
}

.signin-card h2 {
    font-size: 22px;
    font-weight: 550;
    letter-spacing: -.5px;
    margin: 0;
}

.signin-card > p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.9;
    margin: 14px 0 23px;
}

.primary-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    background: var(--button);
    border: 1px solid var(--button);
    color: var(--button-ink) !important;
    border-radius: 7px;
    padding: 11px 15px;
    font-size: 15px !important;
    font-weight: 550;
}

    .primary-link:not(:disabled):hover {
        background: var(--button-hover);
    }

    .primary-link .rzi {
        font-size: 17px;
    }

/* Messages are RadzenAlert; this keeps their text at the size of the forms and tables around them. */
.admin-shell .rz-alert {
    font-size: 16px;
    line-height: 1.5;
}

    .admin-shell .rz-alert .rz-alert-icon {
        font-size: 18px;
    }

    .admin-shell .rz-alert p, .admin-shell .rz-alert ul {
        margin: 0;
    }

    .admin-shell .rz-alert ul {
        padding-left: 18px;
        overflow-wrap: anywhere;
    }

.admin-shell .rz-dialog {
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 40px);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 25px 100px #0006;
    color: var(--ink);
    background: var(--surface);
}

.admin-shell .rz-dialog-titlebar {
    padding: 20px 26px;
    border-bottom: 1px solid var(--line);
}

.admin-shell .rz-dialog-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.admin-shell .rz-dialog-content {
    padding: 24px 26px;
    color: var(--ink);
}

.settings-field {
    margin-bottom: 21px;
}

    .settings-field label {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 15px;
        font-weight: 550;
        margin-bottom: 8px;
    }

        .settings-field label > span:not(.key-status):not(.optional-label) {
            color: var(--accent);
        }

.optional-label {
    margin-left: auto;
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
}

/* Radzen inputs fill the field; their border, background and focus come from the --rz-input tokens. */
.settings-field .rz-textbox, .settings-field .rz-textarea, .settings-field .rz-dropdown, .settings-field .rz-numeric,
.settings-field .rz-datepicker, .settings-field .rz-autocomplete {
    width: 100%;
}

.settings-field .rz-textarea {
    resize: vertical;
    min-height: 86px;
}

.settings-field .rz-messages-error {
    font-size: 14px;
    color: var(--danger);
    margin-top: 6px;
}

.field-help {
    font-size: 13px;
    line-height: 1.7;
    margin: 7px 0 0;
    color: var(--muted);
}

.admin-shell .rz-notification {
    max-width: calc(100vw - 24px);
}

/* Narrower screens, from the Hub's breakpoints: a slimmer sidebar first, then a top bar instead of a sidebar. */
@media (max-width: 1200px) {
    .admin-sidebar {
        width: 224px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .workspace-content {
        padding: 32px 28px 20px;
    }

    .workspace-topbar {
        padding: 0 28px;
    }

    .welcome-layout {
        grid-template-columns: 1fr;
        gap: 35px;
        max-width: 520px;
    }

    .welcome-copy h1 {
        font-size: 48px;
    }
}

@media (max-width: 760px) {
    .admin-shell {
        flex-direction: column;
    }

    .admin-sidebar {
        width: 100%;
        height: auto;
        position: static;
        padding: 17px 20px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        flex-direction: row;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
    }

    .brand {
        padding: 0;
        font-size: 19px;
    }

    /* The Hub hides the sidebar menu here; Catch keeps it as a scrolling row, since it is the way to the mailboxes. */
    .admin-sidebar > nav {
        order: 3;
        flex-basis: 100%;
        margin: 0;
        overflow-x: auto;
        display: flex;
        gap: 4px;
    }

        .admin-sidebar > nav .nav-link {
            white-space: nowrap;
            padding: 8px 10px;
        }

    .sidebar-bottom {
        margin-top: 0;
        margin-left: auto;
        border: 0;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .theme-toggle {
        width: auto;
        padding: 8px;
    }

        .theme-toggle > span, .profile-name {
            display: none;
        }

    .profile {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .profile-avatar {
        width: 28px;
        height: 28px;
    }

    .workspace-topbar {
        min-height: 52px;
        padding: 0 22px;
    }

    .breadcrumbs {
        gap: 12px;
    }

    .workspace-content {
        padding: 28px 22px 20px;
    }

    .page-heading {
        gap: 14px;
        margin-bottom: 22px;
    }

    .admin-shell h1 {
        font-size: 29px;
    }

    .page-subtitle {
        font-size: 14px;
        line-height: 1.8;
    }

    .welcome-layout {
        padding: 15px 0;
        min-height: 0;
        gap: 28px;
    }

    .welcome-copy h1 {
        font-size: 43px;
    }

    .signin-card {
        padding: 26px;
    }

    .admin-shell .rz-dialog {
        max-width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
    }

    .admin-shell .rz-dialog-titlebar {
        padding: 18px;
    }

    .admin-shell .rz-dialog-content {
        padding: 20px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-shell *, .admin-shell *::before, .admin-shell *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Lists: the toolbar with a search field above a RadzenDataGrid, and the actions in a page heading (admin.css). */

.collection-toolbar {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--line);
    min-height: 58px;
}

.collection-tab {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 8px;
    border-bottom: 2px solid var(--accent);
    margin-bottom: -1px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 550;
    padding: 0 3px;
    white-space: nowrap;
}

    .collection-tab .rzi {
        font-size: 17px;
        color: var(--accent);
    }

.collection-search {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 7px;
    margin: 0 0 11px auto;
    padding: 8px 11px;
    width: 245px;
}

    .collection-search .rzi {
        font-size: 17px;
        color: var(--quiet);
    }

    /* The wrapper draws the field; the RadzenTextBox inside is bare so the icon and text share one frame. */
    .collection-search .rz-textbox, .collection-search .rz-textbox:hover, .collection-search .rz-textbox:focus {
        width: 100%;
        min-width: 0;
        height: auto;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
        outline: none;
        font-size: 16px;
        color: var(--ink);
    }

    .collection-search:focus-within {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .collection-search input::placeholder {
        color: var(--quiet);
    }


.heading-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Forms in dialogs (admin.css). */

.settings-intro {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.settings-symbol {
    display: flex;
    padding: 10px;
    background: var(--accent-surface);
    color: var(--accent);
    border-radius: 9px;
}

.settings-intro h2 {
    font-size: 18px;
    font-weight: 550;
    margin: 0 0 4px;
}

.settings-intro p {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}

.settings-content fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.checkbox-field {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    margin-bottom: 16px;
    cursor: pointer;
}

    /* RadzenLabel next to a RadzenCheckBox reads as the option text, not as a field heading. */
    .checkbox-field .rz-label {
        margin: 0;
        font-weight: 400;
        cursor: pointer;
    }

/* Grid rows (hub.css). */

.inactive-row td {
    color: var(--muted);
}

.row-actions {
    text-align: right;
    white-space: nowrap;
}

    .row-actions .rz-button + .rz-button {
        margin-left: 6px;
    }

.toolbar-checkbox {
    margin: 0 0 0 auto;
    white-space: nowrap;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;

@media (max-width: 760px) {
    .collection-toolbar {
        flex-wrap: wrap;
        gap: 12px;
        padding-top: 8px;
    }

    .collection-tab {
        height: 44px;
        order: 2;
    }

    .collection-search {
        width: 100%;
        margin: 0;
    }

    .settings-footer {
        flex-wrap: wrap;
    }

        .settings-footer > span {
            width: 100%;
            margin-bottom: 3px;
        }
}

/* From the Hub's app.css: Blazor's own validation and error boundary. */
h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1.5rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Ett fel har uppstått.";
    }