/*
 * DPB Net Stylesheet
 * Organized using CSS Layers for cascade management
 */

/* Layer order declaration - establishes cascade priority */
@layer base, layout, components, widgets, utilities;

/*
 * Color Variables (unlayered for global access)
 * Using CSS custom properties for consistent color theming
 */
:root {
    /* Base colors */
    --virginia-blue: #00297b;
    --virginia-white: #f0f5ff; /* VA blue with max lightness */
    --dpb-black: #212121;
    --dpb-grey: #383939;
    --dpb-blue: #20396f;
    --dpb-left-menu-grey: #dddddd;
    --body-color: #1a1a1a;
    --secondary-text: #555;
    --slate-header: #2c3e50;
    --error-color: #ba2121;
    --success-color: #28a745;
    --warning-color: #ffc107;

    /* Form and button colors */
    --border-color: #dadce0;
    --text-dark: #3c4043;
    --primary-blue: #4285f4;
    --primary-blue-hover: #3367d6;
    /* Local-account sign-in button. Darker than --success-color (#28a745) so
       white text clears WCAG 2.1 AA / Section 508 contrast (~5:1 vs ~2.8:1). */
    --login-local-green: #1e7e34;
    --login-local-green-hover: #19692c;
    /* Sign-in "lane" tints + category-label text. Label colors are dark
       enough to clear AA (~7:1) against their tint. */
    --login-vita-tint: #eef4fd;
    --login-vita-tint-border: #d6e4fa;
    --login-local-tint: #ecf5ee;
    --login-local-tint-border: #d3e8d8;
    --login-local-green-text: #155724;
    --button-bg: #f8f9fa;
    --button-bg-hover: #f1f3f4;
    --white: #ffffff;
    --black: #000000;
    --nav-hover-red: #b4003d;
    --disabled-border: #ced4da;
    --error-text: #721c24;
    --alert-success-bg: #d4edda;
    --alert-success-border: #c3e6cb;
    --alert-error-bg: #f8d7da;
    --alert-error-border: #f5c6cb;

    /* Shadow colors */
    --primary-shadow-light: rgba(66, 133, 244, 0.2);
    --primary-shadow-medium: rgba(66, 133, 244, 0.4);
    --black-shadow-light: rgba(0, 0, 0, 0.1);
    --black-shadow-medium: rgba(0, 0, 0, 0.2);
    --black-shadow-dark: rgba(0, 0, 0, 0.3);
    --primary-blue-transparent: rgba(66, 133, 244, 0.04);
    --white-transparent: rgba(255, 255, 255, 0.2);

    /* Application-specific colors */
    --header-bg: var(--virginia-blue);
    --breadcrumbs-bg: var(--dpb-blue);
    --environment-badge-bg: var(--nav-hover-red);
    --sidebar-border-color: #6a5acd; /* slateblue replacement */

    /* MDC Theme bridge — map design tokens to Material Design Components */
    --mdc-theme-primary: var(--virginia-blue);
    --mdc-theme-secondary: var(--body-color);
    --mdc-theme--on-primary: var(--virginia-white);
}

/* ===========================================
   BASE LAYER - Typography, resets, alerts
   =========================================== */

@layer base {
    /* Base Typography */
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        line-height: 1.5;
        color: var(--body-color);
        margin: 0;
    }

    h1, h2, h3, h4, h5, h6 {
        color: var(--slate-header);
        margin-top: 0;
    }

    h1 {
        font-weight: 600;
    }

    header h1 {
        color: var(--virginia-white);
    }

    /* Global link styling - prevents the purple visited link color */
    a, a:link, a:visited, a:hover, a:active, a:-webkit-any-link {
        text-decoration: none;
    }

    /* Override webkit default link color */
    a:-webkit-any-link {
        color: var(--body-color);
    }

    /* Alert Messages */
    .alert {
        padding: 12px 16px;
        margin-bottom: 16px;
        border-radius: 4px;
        font-weight: 500;
    }

    .alert-success {
        background-color: var(--alert-success-bg);
        color: var(--success-color);
        border: 1px solid var(--alert-success-border);
    }

    .alert-error {
        background-color: var(--alert-error-bg);
        color: var(--error-color);
        border: 1px solid var(--alert-error-border);
    }

    /* Django messages toast */
    .messages {
        list-style: none;
        padding: 0;
        margin: 0 auto 16px;
        max-width: 480px;
    }

    .messages li {
        padding: 10px 16px;
        border-radius: 6px;
        font-weight: 500;
        font-size: 0.9rem;
        text-align: center;
    }

    .messages li + li {
        margin-top: 6px;
    }

    .messages .success {
        background-color: var(--alert-success-bg);
        color: var(--success-color);
        border: 1px solid var(--alert-success-border);
    }

    .messages .error {
        background-color: var(--alert-error-bg);
        color: var(--error-color);
        border: 1px solid var(--alert-error-border);
    }

    .messages .warning {
        background-color: #fff3cd;
        color: #856404;
        border: 1px solid #ffc107;
    }

    .messages .info {
        background-color: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
    }

    .error, .errorlist {
        color: var(--error-text);
        font-size: 0.9rem;
        margin-top: 4px;
    }

    li.success {
        color: var(--success-color);
        font-size: 0.9rem;
        margin-top: 4px;
        list-style: none;
    }

    li.warning {
        color: var(--warning-color);
        font-size: 0.9rem;
        margin-top: 4px;
        list-style: none;
    }

    /* Handle hidden inputs and submit buttons */
    input[type="hidden"] {
        display: none;
    }

    input[type="submit"][hidden] {
        display: none;
    }

    /* Animation for smooth transitions */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

/* ===========================================
   LAYOUT LAYER - Page structure, containers
   =========================================== */

@layer layout {
    #container {
        min-width: 0;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    #header {
        display: block;
        padding: 0 !important;
    }

    #header-dpb-banner {
        color: var(--virginia-white);
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        max-height: 50px;
        overflow-y: hidden;

        & img {
            height: 50px;
        }

        & > * {
            height: inherit;
        }

        & > *:first-child {
            background-color: var(--dpb-black);
            flex-grow: 1;
        }

        & > *:last-child {
            background-color: var(--dpb-grey);
            flex-shrink: 3;
        }
    }

    #header-app-banner {
        background-color: var(--virginia-blue);
        color: var(--virginia-white);
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        padding: 3px 5px 0 0;
        font-weight: bold;
        font-size: 1.2em;
        font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif;
        column-gap: 10px;

        & a {
            & h2 {
                margin: 0;
                display: inline;
                color: var(--virginia-white);
            }
        }

        & #environment-badge {
            background-color: var(--environment-badge-bg);
            border-radius: 4px;
            padding: 1px 14px;
        }
    }

    #main {
        display: flex;
        flex-grow: 1;
    }

    /* Fix the Django Admin Login Container for our larger header */
    .login #container {
        width: unset !important;
        max-width: 580px;
    }

    main {
        box-sizing: border-box;
    }

    /* Grid Layouts */
    .full-width-row {
        grid-column: 1 / -1;
    }

    /* Multi-card grid - for displaying multiple cards in a responsive grid */
    main.multi-card-grid {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
        grid-auto-rows: min-content;
        margin: 10px;
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Display larger cards */
    main.large-card-grid {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(360px, 600px));
        grid-auto-rows: min-content;
        margin: 10px;
        flex: 1 1 100%;
        min-width: 0;
        justify-content: center;
    }

    /* Single-card grid */
    main.single-card-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 1rem;
        max-width: 800px;
        min-width: 460px;
        margin: 10px auto;
    }

    /* Signup page uses multi-card-grid layout */
    main.signup {
        display: grid;
        margin: 10px;
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Sign-in Page Layout - AuthGate Style */
    main.signin-centered {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 2rem 1rem;
        flex: 1;
    }

    /* Site Footer */
    .site-footer {
        background-color: var(--button-bg);
        border-top: 1px solid var(--border-color);
        padding: 1.5rem 1rem;
        margin-top: auto;
        text-align: center;
    }

    .footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        margin-bottom: 1rem;
    }

    .footer-links a {
        color: var(--secondary-text);
        font-size: 0.875rem;
        text-decoration: none;
        transition: color 0.2s;
    }

    .footer-links a:hover {
        color: var(--primary-blue);
        text-decoration: underline;
    }

    .footer-copyright {
        color: var(--secondary-text);
        font-size: 0.75rem;
        margin: 0;
    }

    /* Responsive layout adjustments */
    @media (max-width: 500px) {
        #main {
            position: relative;
        }

        /* Ensure main content takes full width */
        main.multi-card-grid,
        main.single-card-grid,
        main.signup {
            width: 100%;
            margin-left: 20px !important;
        }

        .footer-links {
            flex-direction: column;
            gap: 0.75rem;
        }
    }
}

/* ===========================================
   COMPONENTS LAYER - UI components
   =========================================== */

@layer components {
    /* -----------------------------------------
       Sidebar Navigation
       ----------------------------------------- */
    .sidebar-nav {
        display: flex;
        flex-direction: column;
        /* The nav is a flex child of #main. Left shrinkable, pages with a wide
           min-content (the dashboard cards) squeeze it while table pages leave
           it alone, so its width flips between pages. Pin it. */
        flex-shrink: 0;
        background-color: var(--dpb-left-menu-grey);
        border-right: 1px solid var(--sidebar-border-color);

        & ul, li {
            margin: 0 0 5px;
            padding: unset;
        }

        & ul {
            padding: 0 5px;
        }

        & li {
            background-color: transparent;
            border-radius: 8px;
            box-shadow: 0 6px 14px var(--black-shadow-light);
            padding: 4px;
            cursor: pointer;
            color: var(--black);
            transition: background-color 0.3s, color 0.3s;

            &:hover {
                background-color: var(--nav-hover-red);
                color: var(--white);
            }
        }

        & a {
            font-weight: bold;
            text-decoration: none;
            display: block;
            color: var(--black);
            padding: 0 5px;

            &:visited {
                color: initial;
            }
        }

        & button#nav-sidebar-toggle-button {
            margin-left: auto;
        }
    }

    /* Responsive sidebar navigation */
    @media (max-width: 500px) {
        .sidebar-nav {
            position: absolute;
            z-index: 1000;
            height: 100%;
            box-shadow: 2px 0 5px var(--black-shadow-medium);
            top: 0;
            left: 0;
        }

        .sidebar-nav ul[hidden] {
            display: none;
        }
    }

    /* Style a button like a div to give us a blank slate */
    button.prevent-default {
        display: inline-block;
        border: none;
        margin: 0;
        padding: 0;
        font-size: 1rem;
        line-height: 1;
        background: transparent;
        -webkit-appearance: none;
    }

    /* Icon Transforms - hamburger to X animation */
    svg.hamburger-menu {
        width: 14px;
        height: 14px;
        transition: all 0.3s ease-in-out;

        &.open-x {
            & :first-of-type {
                transform: rotate(45deg) translateY(30px);
                transform-origin: center;
            }

            & :nth-last-of-type(2) {
                transform: translateX(0);
                opacity: 0;
            }

            & :last-of-type {
                transform: rotate(-45deg) translateY(-30px);
                transform-origin: center;
            }
        }
    }

    /* -----------------------------------------
       Tables
       ----------------------------------------- */
    .table-wrapper {
        width: 100%;
    }

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

    .table {
        table-layout: auto;
        border-collapse: collapse;
        width: 100%;
        min-width: max-content;
        font-size: 0.875rem;
    }

    /* The workflow worklists carry a prose-length Request column. Fit the
       container and let only that column wrap instead of forcing a horizontal
       scroll; the compact metadata columns stay on one line. */
    .list-view .table {
        min-width: 0;
    }

    .list-view .table td {
        white-space: nowrap;
    }

    .list-view .table td[data-label="Request"] {
        white-space: normal;
    }

    /* One rail width for the row actions, so Claim and Open line up. */
    .list-view .table .btn {
        min-width: 6rem;
    }

    .table thead th {
        background-color: var(--button-bg);
        font-weight: 600;
        font-size: 0.8rem;
        text-align: left;
        white-space: nowrap;
        color: var(--secondary-text);
        user-select: none;
    }

    .table td, .table th {
        padding: 0.5rem 0.75rem;
        vertical-align: middle;
        border-bottom: 1px solid var(--border-color);
    }

    .table tbody tr:nth-child(even) {
        background-color: #f8f9fa;
    }

    .table tbody tr:hover {
        background-color: rgba(66, 133, 244, 0.1);
    }

    .table td {
        min-height: 3rem;
    }

    .table-empty {
        text-align: center;
        padding: 2rem 0.75rem;
        color: var(--secondary-text);
        font-style: italic;
    }

    /* Sort links */
    .table-sort-link {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        white-space: nowrap;
        color: var(--secondary-text);
        transition: color 0.2s;
    }

    .table-sort-link:hover {
        color: var(--primary-blue);
    }

    .sort-icon {
        display: block;
        width: 0.75rem;
        height: 0.75rem;
        flex-shrink: 0;
        overflow: hidden;
    }

    .sort-icon-inactive {
        opacity: 0.3;
    }

    /* Link-styled buttons inside table cells */
    .table-link-btn {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        font: inherit;
        color: var(--primary-blue);
        text-align: left;
    }

    .table-link-btn:hover {
        text-decoration: underline;
        color: var(--primary-blue-hover);
    }

    .table-link-btn--with-icon {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
    }

    .profile-icon {
        width: 1em;
        height: 1em;
        flex-shrink: 0;
        color: var(--success-color);
    }

    /* User list username column: detail link + Admin/Test pills */
    .username-cell {
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
    }

    /* COV lookup result action column: Create/Edit button + status pill */
    .action-cell {
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
        white-space: nowrap;
    }

    .status-pill {
        display: inline-block;
        padding: 0.1em 0.55em;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.5;
    }

    .status-pill--new {
        background-color: var(--primary-shadow-light);
        color: var(--primary-blue-hover);
    }

    .status-pill--existing {
        background-color: rgba(40, 167, 69, 0.15);
        color: var(--success-color);
    }

    /* Amber text is #856404 (not --warning-color) so it clears AA contrast
       against the pale amber tint. */
    .status-pill--admin {
        background-color: rgba(255, 193, 7, 0.25);
        color: #856404;
    }

    .status-pill--test {
        background-color: rgba(85, 85, 85, 0.12);
        color: var(--secondary-text);
    }

    /* Account status. The two axes read as different weights on purpose:
       deactivated is an administrative revocation and disabled is a threshold
       the account drifted past, so they must never look like the same fact. */
    .status-pill--active {
        background-color: rgba(40, 167, 69, 0.15);
        color: var(--success-color);
    }

    .status-pill--disabled {
        background-color: rgba(255, 193, 7, 0.25);
        color: #856404;
    }

    /* Crimson text is #8b1a1a rather than --danger-color so it clears AA
       contrast against the pale red tint, mirroring the amber pills above. */
    .status-pill--deactivated {
        background-color: rgba(220, 53, 69, 0.15);
        color: #8b1a1a;
    }

    /* Pagination */
    .table-pagination {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-top: 1rem;
    }

    .table-pagination-info {
        font-size: 0.875rem;
        color: var(--secondary-text);
    }

    .table-pagination-controls {
        display: flex;
        gap: 0.25rem;
    }

    .table-page-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }

    .table-page-ellipsis {
        padding: 0.375rem 0.5rem;
        color: var(--secondary-text);
    }

    /* Responsive: collapse table into stacked cards on narrow screens */
    @media (max-width: 768px) {
        .table.table-stacked thead {
            display: none;
        }

        .table.table-stacked tbody tr {
            display: block;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            margin-bottom: 0.75rem;
            padding: 0.5rem;
            background-color: var(--white);
            box-shadow: 0 1px 3px var(--black-shadow-light);
        }

        .table.table-stacked tbody td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.375rem 0.5rem;
            border-bottom: 1px solid var(--border-color);
            text-align: right;
        }

        .table.table-stacked tbody td:nth-child(even) {
            background-color: #f8f9fa;
        }

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

        .table.table-stacked tbody td::before {
            content: attr(data-label);
            font-weight: 600;
            font-size: 0.8rem;
            color: var(--secondary-text);
            text-align: left;
            margin-right: 1rem;
            flex-shrink: 0;
        }

        .table-pagination {
            flex-direction: column;
            align-items: center;
        }
    }

    /* -----------------------------------------
       List View Layout
       ----------------------------------------- */
    .list-view {
        padding: 1rem 1.5rem;
        flex: 1;
        min-width: 0;
    }

    .list-view-header {
        display: flex;
        align-items: baseline;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .list-view-header h1 {
        margin: 0;
        font-size: 1.25rem;
    }

    .list-view-toolbar {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .list-view-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0.75rem;
    }

    .list-view-actions form {
        display: contents;
    }

    .list-view-actions .dialog-field {
        margin-bottom: 0;
    }

    /* -----------------------------------------
       Detail View Layout
       ----------------------------------------- */
    .detail-view {
        padding: 1rem 1.5rem;
        flex: 1;
        min-width: 0;
        max-width: 64rem;
    }

    .detail-view-header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.5rem;
        padding: 0 1rem;
    }

    .detail-view-header h1 {
        margin: 0;
        font-size: 1.25rem;
    }

    .detail-view-actions {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

    .inline-form {
        display: inline;
    }

    .detail-section {
        margin-bottom: 1.5rem;
        padding: 0 1rem;
    }

    .detail-section h2 {
        font-size: 1rem;
        color: var(--slate-header);
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 0.375rem;
        margin-bottom: 0.75rem;
    }

    .detail-grid {
        display: grid;
        grid-template-columns: 10rem 1fr;
        gap: 0.375rem 1rem;
        font-size: 0.875rem;
    }

    .detail-grid dt {
        color: var(--secondary-text);
        font-weight: 500;
    }

    .detail-grid dd {
        margin: 0;
    }

    .status-history-link {
        margin: 0.5rem 0 0;
        font-size: 0.875rem;
    }

    /* Administrative action block (deactivate / restore).
       Deliberately not styled to imitate the viewflow MDC fields further down
       the page: hand-rolled copies of those drift. This reads as its own
       bordered action area instead. */
    .action-panel {
        display: block;
        margin: 1rem 0;
        padding: 0.875rem 1rem;
        border: 1px solid var(--border-color);
        border-left: 3px solid var(--secondary-text);
        border-radius: 4px;
        max-width: 40rem;
    }

    .action-panel--danger {
        border-left-color: var(--error-color);
    }

    .action-panel__title {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--slate-header);
        margin: 0 0 0.25rem;
    }

    .action-panel__help {
        font-size: 0.8125rem;
        color: var(--secondary-text);
        margin: 0 0 0.75rem;
    }

    .action-panel__label {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 0.25rem;
    }

    .action-panel__input {
        display: block;
        width: 100%;
        padding: 0.5rem;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font: inherit;
        font-size: 0.875rem;
        resize: vertical;
    }

    .action-panel__input:focus {
        outline: none;
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 2px var(--primary-shadow-light);
    }

    .action-panel__actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 0.75rem;
    }


    /* -----------------------------------------
       Table Filter Row (inline header filters)
       ----------------------------------------- */
    .filter-row th {
        padding: 4px;
        background-color: #f8f9fa;
        border-bottom: 2px solid var(--border-color);
        font-weight: normal;
    }

    .filter-row input,
    .filter-row select {
        width: 100%;
        padding: 4px 6px;
        font-size: 0.8rem;
        border: 1px solid var(--border-color);
        border-radius: 3px;
        box-sizing: border-box;
    }

    .filter-row input:focus,
    .filter-row select:focus {
        outline: none;
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 2px var(--primary-shadow-light);
    }

    .table-status {
        padding: 0.5rem 0;
        font-size: 0.8125rem;
    }

    /* -----------------------------------------
       Dialog (Modal)
       ----------------------------------------- */
    .dialog-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1000;
        align-items: center;
        justify-content: center;
    }

    .dialog-backdrop.open {
        display: flex;
    }

    .dialog {
        background: var(--white);
        padding: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 10px 25px var(--black-shadow-dark);
        min-width: 360px;
        max-width: 480px;
    }

    .dialog h3 {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .dialog-field {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        margin-bottom: 1rem;
    }

    .dialog-field label {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--secondary-text);
    }

    .dialog-field input,
    .dialog-field select {
        padding: 0.625rem;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-size: 0.9375rem;
    }

    .dialog-field input:focus,
    .dialog-field select:focus {
        outline: none;
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 2px var(--primary-shadow-light);
    }

    .dialog-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
    }

    /* -----------------------------------------
       Card Component
       ----------------------------------------- */
    .card {
        display: flex;
        flex-direction: column;
        padding: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 6px 14px var(--black-shadow-dark);
        box-sizing: border-box;
        background-color: var(--white);
        margin-bottom: 1rem;
    }

    .card h1, .card h2, .card h3 {
        margin-bottom: 1rem;
    }

    .card p {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    /* Action row pinned to the bottom of dashboard tile cards */
    .card-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
        margin-top: auto;
    }

    /* Profile Card Specific Styles */
    .card.profile .profile-content,
    .card.profile h3,
    .card.profile h4,
    .card.profile dl {
        overflow-wrap: break-word;
    }

    .card.profile dl {
        display: grid;
        grid-template-columns: minmax(80px, 1fr) minmax(100px, 2fr);
        gap: 12px 20px;
        margin: 0;
    }

    .card.profile dt {
        font-weight: 600;
        color: var(--secondary-text);
        margin: 0;
        padding: 8px 0;
    }

    .card.profile dd {
        margin: 0;
        padding: 8px 0;
        color: var(--body-color);
    }

    /* Visual elements for cards */
    .visual {
        height: 60px;
        width: 100%;
        margin: 0.5rem 0;
    }

    .visual.hidden {
        display: none;
    }

    /* Login card button styles */
    .login-card-button {
        height: 40px;
        width: 100%;
        border-radius: 4px;
        border: 1px solid var(--border-color);
        display: block;
        text-align: center;
        align-content: center;
        text-decoration: none;
        color: var(--text-dark);
    }

    .login-card-button:hover {
        background: var(--primary-blue-transparent);
        box-shadow: none;
        outline: none;
        cursor: pointer;
    }

    .login-card-button:link,
    .login-card-button:visited,
    .login-card-button:active {
        color: var(--text-dark) !important;
        text-decoration: none;
    }

    .login-card-button.disabled {
        pointer-events: none;
        opacity: 0.65;
        background-color: var(--button-bg);
        border-color: var(--disabled-border);
        cursor: not-allowed;
        box-shadow: none;
    }

    /* -----------------------------------------
       Sign-in Card Component
       ----------------------------------------- */
    .signin-card {
        width: 100%;
        /* Wider than the classic ~480px AuthGate-style auth card because the
           content is now two side-by-side lanes, not a single column. Still
           centers and collapses to one column below 640px (see media query). */
        max-width: 720px;
        padding: 2rem;
        border-radius: 10px;
        border: 1px solid var(--border-color);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        background-color: var(--white);
        text-align: center;
    }

    .signin-card .signin-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .signin-card .signin-logo img {
        height: 48px;
        width: auto;
    }

    .signin-card .signin-logo-text {
        font-weight: 600;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--slate-header);
        text-align: left;
    }

    .signin-card h1 {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--slate-header);
        margin-bottom: 0.5rem;
    }

    .signin-card .signin-subtitle {
        font-size: 0.875rem;
        color: var(--secondary-text);
        margin-bottom: 1.5rem;
    }

    /* -----------------------------------------
       Sign-in Options Component

       Two equal-weight "lanes" (VITA COV / local account) presented side
       by side so neither dominates. A color-coded category label lets a
       user pick their lane at a glance without reading the details;
       meaning is carried by the label text, not color alone (508).
       Collapses to a single column on narrow screens.
       ----------------------------------------- */
    .signin-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        margin-bottom: 0;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .signin-option {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        min-width: 0;
        padding: 1.25rem 1rem;
        border-radius: 10px;
        border: 1px solid transparent;
    }

    .signin-option--vita {
        background-color: var(--login-vita-tint);
        border-color: var(--login-vita-tint-border);
    }

    .signin-option--local {
        background-color: var(--login-local-tint);
        border-color: var(--login-local-tint-border);
    }

    .signin-option-eyebrow {
        margin: 0;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .signin-option-eyebrow--vita {
        color: var(--dpb-blue);
    }

    .signin-option-eyebrow--local {
        color: var(--login-local-green-text);
    }

    .signin-option-button {
        display: flex;
        align-items: center;
        justify-content: center;
        /* Shared height keeps both buttons equal even though the labels
           wrap to different line counts. Large + bold (>=18.66px bold)
           qualifies the blue button as "large text" so it clears WCAG AA
           at 3:1 without leaving the app's brand blue. */
        min-height: 4rem;
        padding: 0.875rem 1rem;
        border: none;
        border-radius: 8px;
        text-align: center;
        line-height: 1.25;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--white);
        text-decoration: none;
        transition: background-color 0.2s, box-shadow 0.2s;
        box-sizing: border-box;
    }

    .signin-option-button:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--primary-shadow-medium);
    }

    .signin-option-button--vita {
        background-color: var(--primary-blue);
    }

    .signin-option-button--vita:hover {
        background-color: var(--primary-blue-hover);
        color: var(--white);
    }

    .signin-option-button--local {
        background-color: var(--login-local-green);
    }

    .signin-option-button--local:hover {
        background-color: var(--login-local-green-hover);
        color: var(--white);
    }

    .signin-option-desc {
        margin: 0;
        font-size: 0.85rem;
        line-height: 1.45;
        color: var(--secondary-text);
    }

    .signin-option-desc strong {
        color: var(--slate-header);
        font-weight: 600;
    }

    /* Bottom-aligned per-lane note: a divider, then either the "create
       account" action (Non-VITA) or a reassurance that VITA needs no
       sign-up. margin-top:auto keeps both notes aligned across lanes so
       the equal-height panels stay balanced. */
    .signin-option-note {
        margin: 0;
        margin-top: auto;
        padding-top: 0.85rem;
        border-top: 1px solid transparent;
        font-size: 0.9rem;
        line-height: 1.45;
        color: var(--secondary-text);
    }

    .signin-option-note--vita {
        border-top-color: var(--login-vita-tint-border);
    }

    .signin-option-note--local {
        border-top-color: var(--login-local-tint-border);
    }

    .signin-option-create-link {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--login-local-green-text);
        text-decoration: none;
        white-space: nowrap;
    }

    .signin-option-create-link::after {
        content: " \2192";
    }

    .signin-option-create-link:hover {
        text-decoration: underline;
    }

    @media (max-width: 640px) {
        .signin-options {
            grid-template-columns: 1fr;
            gap: 1rem;
        }
    }

    /* -----------------------------------------
       Forms
       ----------------------------------------- */
    .card form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 1rem;
    }

    .card form div {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .card form label {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--secondary-text);
    }

    .card form input[type="text"],
    .card form input[type="password"],
    .card form input[type="email"],
    .card form input[type="number"] {
        padding: 0.75rem;
        border-radius: 4px;
        border: 1px solid var(--border-color);
        font-size: 1rem;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .card form div .form-check {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        width: 100%;
        gap: 16px;
        justify-content: space-between;
        margin-left: 1.5rem;
    }

    .card form div .form-check label {
        flex: 1;
        text-align: left;
    }

    .card form div .form-check input[type="checkbox"] {
        margin: 0;
        flex-shrink: 0;
    }

    .card form input:focus {
        outline: none;
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 2px var(--primary-shadow-light);
    }

    .card form > div {
        margin-bottom: 1rem;
    }

    .card form > button {
        margin-top: 0.5rem;
    }

    .card form > button.btn,
    .card form > button.btn-primary {
        display: inline-block;
        margin-right: 0.5rem;
    }

    .form-container {
        margin: 1rem 0;
        padding: 1rem 0;
        animation: fadeIn 0.3s ease-in-out;
    }

    /* -----------------------------------------
       Standalone forms (dpb-form)

       The house field pattern for forms that live outside a card — the
       admin profile and agency forms sit in detail views, where the
       `.card form` rules cannot reach. Same tokens and rhythm as the card
       forms, so the two read as one system.
       ----------------------------------------- */
    .dpb-form {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .dpb-form__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        gap: 1rem;
    }

    .dpb-form .field {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        min-width: 0;
    }

    .dpb-form label {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--secondary-text);
    }

    .dpb-form input[type="text"],
    .dpb-form input[type="email"],
    .dpb-form input[type="tel"],
    .dpb-form input[type="number"],
    .dpb-form input[type="password"],
    .dpb-form select,
    .dpb-form textarea {
        padding: 0.75rem;
        border-radius: 4px;
        border: 1px solid var(--border-color);
        font: inherit;
        background-color: var(--white);
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .dpb-form input:focus,
    .dpb-form select:focus,
    .dpb-form textarea:focus {
        outline: none;
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 2px var(--primary-shadow-light);
    }

    .dpb-form .field--check {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    .dpb-form .field--check label {
        color: var(--text-dark);
    }

    .dpb-form .field--check input[type="checkbox"] {
        margin: 0;
        flex-shrink: 0;
    }

    .dpb-form .field-help {
        margin: 0;
        font-size: 0.8rem;
        color: var(--secondary-text);
    }

    .dpb-form .field-required {
        color: var(--error-color);
    }

    .dpb-form .errorlist {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .dpb-form__actions {
        display: flex;
        gap: 0.5rem;
    }

    /* Per-application access groups on the profile form. */
    .access-group {
        margin: 0;
        padding: 0.25rem 1rem 1rem;
        border: 1px solid var(--border-color);
        border-radius: 6px;
    }

    .access-group legend {
        padding: 0 0.375rem;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--slate-header);
    }

    .access-group__body {
        display: flex;
        flex-direction: column;
        gap: 0.875rem;
        margin-top: 0.25rem;
    }

    /* Role fields appear only while their application's access is ticked.
       Presentation only: values persist in the DOM, and unticking access
       already clears that system's role fields on save
       (LegacyProfileRoleResetMixin), so what you see matches what saving
       does. The @supports guard keeps browsers without :has() on the
       always-visible behavior instead of hiding fields with no way to
       reveal them. */
    @supports selector(:has(input)) {
        .access-group:not(:has(.access-group__toggle input:checked)) .access-group__fields {
            display: none;
        }
    }

    /* -----------------------------------------
       Buttons
       ----------------------------------------- */
    .btn {
        /* Anchors are content-box by default, buttons are border-box; pin the
           box model so a.btn and button.btn size identically under min-width. */
        box-sizing: border-box;
        background-color: var(--button-bg);
        color: var(--text-dark);
        padding: 0.75rem 1.5rem;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s;
        text-align: center;
    }

    .btn:hover {
        background-color: var(--button-bg-hover);
    }

    .btn:focus {
        outline: none;
        box-shadow: 0 0 0 2px var(--primary-shadow-light);
    }

    .btn:visited {
        color: var(--text-dark);
    }

    .btn-primary {
        background-color: var(--primary-blue);
        color: var(--white);
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 4px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .btn-primary:hover {
        background-color: var(--primary-blue-hover);
    }

    .btn-primary:focus {
        outline: none;
        box-shadow: 0 0 0 2px var(--primary-shadow-medium);
    }

    .btn-primary:visited {
        color: var(--white);
    }

    .btn-secondary {
        background-color: var(--button-bg);
        color: var(--secondary-text);
        padding: 0.75rem 1.5rem;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s, border-color 0.2s;
        text-align: center;
    }

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

    .btn-secondary:focus {
        outline: none;
        box-shadow: 0 0 0 2px var(--primary-shadow-light);
    }

    .btn-secondary:visited {
        color: var(--secondary-text);
    }

    .btn-danger {
        background-color: var(--error-color);
        color: var(--white);
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 4px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s;
        text-align: center;
    }

    .btn-danger:hover {
        background-color: #a91e1e;
    }

    .btn-danger:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(186, 33, 33, 0.2);
    }

    .btn-danger:visited {
        color: var(--white);
    }

    button[disabled], .btn[disabled], .btn-primary[disabled],
    .btn-secondary[disabled], .btn-danger[disabled] {
        opacity: 0.65;
        cursor: not-allowed;
    }

    /* Renders identically on <a> and <button>: the resets below are no-ops
       for anchors and strip the user-agent chrome from buttons. */
    .btn-link {
        background: none;
        border: none;
        padding: 0;
        font: inherit;
        color: var(--primary-blue);
        text-decoration: none;
        font-weight: 500;
        cursor: pointer;
        transition: color 0.2s;
    }

    .btn-link:visited {
        color: var(--primary-blue);
    }

    .btn-link:hover {
        color: var(--primary-blue-hover);
        text-decoration: underline;
    }

    /* -----------------------------------------
       Two-Factor Authentication Wizard
       ----------------------------------------- */
    .wizard-actions {
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;
    }

    .wizard-actions button {
        background-color: var(--primary-blue);
        color: var(--white);
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 4px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .wizard-actions button:hover {
        background-color: var(--primary-blue-hover);
    }

    .wizard-actions button:focus {
        outline: none;
        box-shadow: 0 0 0 2px var(--primary-shadow-medium);
    }

    .wizard-actions button[name="wizard_goto_step"] {
        background-color: var(--button-bg);
        color: var(--text-dark);
        border: 1px solid var(--border-color);
    }

    .wizard-actions button[name="wizard_goto_step"]:hover {
        background-color: var(--button-bg-hover);
    }

    /* -----------------------------------------
       User Tools (Header)
       ----------------------------------------- */
    #user-tools {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--virginia-white);
        margin-right: 2rem;
    }

    #logout-form button, #logout-form a {
        background: none;
        border: none;
        color: var(--virginia-white);
        font-weight: 500;
        padding: 4px 8px;
        cursor: pointer;
        transition: color 0.2s, background-color 0.2s;
        border-radius: 4px;
    }

    #logout-form a {
        text-decoration: none;
    }

    #logout-form button:hover, #logout-form a:hover {
        background-color: var(--white-transparent);
        color: var(--white);
    }

    /* -----------------------------------------
       WCAG Link
       ----------------------------------------- */
    .wcag-link {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

    .wcag-link svg {
        height: 1rem;
        width: 1rem;
    }

    /* Messages list within sign-in card (CSP: replaces inline style) */
    .messages--signin {
        margin-bottom: 1.5rem;
        text-align: left;
    }
}

/* ===========================================
   UTILITIES LAYER - Helper classes
   =========================================== */

/* ===========================================
   HTMX Loading Indicator
   =========================================== */

.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in-out;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

.htmx-request button[type="submit"] {
    pointer-events: none;
    opacity: 0.5;
}

#global-loading-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    height: 3px;
    background: var(--virginia-blue);
    overflow: hidden;
}

#global-loading-indicator > div {
    height: 100%;
    width: 33%;
    background: var(--virginia-white);
    border-radius: 0 999px 999px 0;
    animation: htmx-progress-slide 1.5s ease-in-out infinite;
}

@keyframes htmx-progress-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

@layer utilities {
    .text-muted {
        color: var(--secondary-text);
    }

    .flex-row {
        display: flex;
        flex-direction: row;
    }

    .gap-md {
        gap: 1em;
    }

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

    .align-self-start {
        align-self: flex-start;
    }

    .float-right {
        float: right;
        margin-bottom: 1rem;
    }

    /* Login card provider icon (CSP: replaces inline style) */
    .login-card-icon {
        height: 20px;
        width: 20px;
        float: left;
        margin-left: 10px;
    }

    .mt-auto {
        margin-top: auto;
    }

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

    /* Screen reader only - accessible hidden text */
    .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;
    }

    /* -----------------------------------------
       Password validation rules (live feedback)
       ----------------------------------------- */
    .password-rules {
        margin-top: 0.75rem;
        padding: 0.75rem;
        font-size: 0.875rem;
        background: var(--bg-secondary, #f8f9fa);
        border: 1px solid var(--border-color, #dee2e6);
        border-radius: 6px;
    }

    .password-rules ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .password-rules li {
        transition: color 0.2s;
    }

    .password-rule--passed::before {
        content: "\2713  ";
    }

    .password-rule--failed::before {
        content: "\2717  ";
    }

    .password-rule--pending::before {
        content: "\25CB  ";
    }

    .password-rule--passed {
        color: #15803d;
        text-decoration: line-through;
        opacity: 0.6;
    }

    .password-rule--failed {
        color: #dc2626;
        font-weight: 500;
    }

    .password-rule--pending {
        color: var(--secondary-text);
        opacity: 0.6;
    }

    .password-rule-children {
        margin-top: 0.25rem;
        margin-left: 1.25rem;
        padding-left: 0.5rem;
        border-left: 2px solid var(--border-color);
        font-size: 0.8rem;
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

    .password-rule-children li.password-rule--strikethrough {
        text-decoration: line-through;
        opacity: 0.3;
    }

    /* Alpine x-cloak: hide until Alpine initializes */
    [x-cloak] {
        display: none !important;
    }
}

/* ===========================================
   DpbSelect — searchable select component

   Ported from EPAL, where this component is styled with Tailwind + DaisyUI
   utility classes. This project has no Tailwind and no build step, so the
   design is re-expressed here against the project's own tokens while the
   widget template keeps EPAL's DOM structure.

   Kept as ONE self-contained block on purpose: the parked Capital design
   system port (PR #23) moves this project onto dpb.css, and when it lands
   this block is the only thing that needs restyling.

   Metrics follow the project's existing form controls (see .dialog-field
   select) so a DpbSelect sits flush next to a stock <select>.

   Deliberately in its own `widgets` layer, ordered after `components`. The
   generic form rules in that layer are element based and bleed into any
   nested widget: `.card form div` (0,1,2) would otherwise impose
   flex-direction: column on .dpb-select__control and stack the control
   vertically, and `.card form input[type="text"]` plus `.card form input:focus`
   (both 0,2,2) would re-add a border, padding and a second focus ring to the
   search field. A later layer beats all of them regardless of specificity, so
   these rules stay readable instead of turning into a specificity arms race.
   Keep `utilities` last: [x-cloak] must still win.
   =========================================== */

@layer widgets {
    .dpb-select {
        /* display is declared because `.card form div` in the components layer
           sets flex + column on every div it contains. A later layer only wins
           for properties it actually declares, so anything the ambient form
           rules set has to be restated here even when the value looks like the
           browser default. */
        display: block;
        position: relative;
        width: 100%;
    }

    /* -----------------------------------------
       Visible control (stands in for <select>)
       ----------------------------------------- */
    .dpb-select__control {
        position: relative;
        display: flex;
        /* Restated over `.card form div` (see .dpb-select above): a column
           control stacks the label and search box vertically and flex-grow
           then distributes down the cross axis, so the field never widens. */
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        box-sizing: border-box;
        width: 100%;
        min-height: 2.75rem;
        padding: 0.625rem;
        font-size: 0.9375rem;
        background: var(--white);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        cursor: text;
    }

    .dpb-select__control:focus-visible,
    .dpb-select__control:focus-within {
        outline: none;
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 2px var(--primary-shadow-light);
    }

    .dpb-select__control--disabled {
        background: var(--button-bg);
        border-color: var(--disabled-border);
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* -----------------------------------------
       Single-select label, painted over the input

       Out of flow so the control's intrinsic width never depends on the
       selected label's length. The right padding reserves room for the
       clear button; pointer-events lets clicks reach the input beneath.
       ----------------------------------------- */
    .dpb-select__label {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        padding-left: 0.625rem;
        padding-right: 1.75rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        pointer-events: none;
    }

    .dpb-select__label--placeholder {
        color: var(--secondary-text);
    }

    /* -----------------------------------------
       Multi-select chips
       ----------------------------------------- */
    .dpb-select__chips {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        flex-wrap: wrap;
        gap: 0.25rem;
        align-items: center;
    }

    .dpb-select__chip {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.125rem 0.5rem;
        font-size: 0.8125rem;
        color: var(--white);
        background: var(--dpb-grey);
        border-radius: 999px;
    }

    .dpb-select__chip-remove {
        display: inline-flex;
        align-items: center;
        padding: 0;
        color: inherit;
        background: none;
        border: 0;
        opacity: 0.7;
        cursor: pointer;
    }

    .dpb-select__chip-remove:hover {
        opacity: 1;
    }

    /* -----------------------------------------
       Search input

       Always in flow for single-select (transparent when closed) so its
       size="1" intrinsic width, not the label, drives the control width.
       ----------------------------------------- */
    .dpb-select__search {
        flex-grow: 1;
        min-width: 0;
        padding: 0;
        font: inherit;
        color: inherit;
        background: transparent;
        border: 0;
        outline: none;
    }

    .dpb-select__search--hidden {
        opacity: 0;
        pointer-events: none;
    }

    /* -----------------------------------------
       Clear button
       ----------------------------------------- */
    .dpb-select__clear {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        padding: 0;
        color: inherit;
        background: none;
        border: 0;
        opacity: 0.6;
        cursor: pointer;
    }

    .dpb-select__clear:hover {
        opacity: 1;
    }

    .dpb-select__icon {
        width: 0.75rem;
        height: 0.75rem;
    }

    /* -----------------------------------------
       Dropdown menu

       position/top/left/width come from the component's menuStyle binding,
       recomputed from getBoundingClientRect() on open, scroll and resize.
       Fixed positioning is what lets the menu escape an ancestor's overflow
       clipping without injecting DOM outside the component root.
       ----------------------------------------- */
    .dpb-select__menu {
        position: fixed;
        z-index: 50;
        max-height: 15rem;
        margin: 0;
        padding: 0.25rem;
        overflow-y: auto;
        list-style: none;
        background: var(--white);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        box-shadow: 0 4px 12px var(--black-shadow-medium);
    }

    .dpb-select__option {
        display: block;
        width: 100%;
        padding: 0.375rem 0.5rem;
        font: inherit;
        color: inherit;
        text-align: left;
        white-space: normal;
        overflow-wrap: break-word;
        background: none;
        border: 0;
        border-radius: 3px;
        cursor: pointer;
    }

    .dpb-select__option--active {
        background: var(--primary-blue-transparent);
    }

    .dpb-select__option--selected {
        font-weight: 600;
    }

    .dpb-select__option--disabled {
        opacity: 0.5;
        pointer-events: none;
    }

    .dpb-select__empty {
        padding: 0.5rem;
        font-size: 0.8125rem;
        color: var(--secondary-text);
        text-align: center;
        pointer-events: none;
    }
}