/* ------------------------------------------------------------------------
   Theme — the prototype's look (dark by default, light on toggle), applied
   as Bootstrap 5.3 variable overrides so every Bootstrap class follows it.
   ------------------------------------------------------------------------ */
:root {
    --hub-gradient: linear-gradient(135deg, #33ABE4 0%, #3E7BEF 30%, #A855F7 68%, #FF00F0 100%);
    --hub-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --hub-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --hub-red: #ff6b6b;
}

:root[data-bs-theme=dark] {
    --hub-bg: #050608;
    --hub-panel: rgba(22, 25, 30, 0.55);
    --hub-panel-solid: #0e1116;
    --hub-panel2: rgba(255, 255, 255, 0.045);
    --hub-border: rgba(255, 255, 255, 0.14);
    --hub-border-bright: rgba(255, 255, 255, 0.28);
    --hub-cyan: #33ABE4;
    --hub-cyan-rgb: 51, 171, 228;
    --hub-magenta: #FF00F0;
    --hub-magenta-rgb: 255, 0, 240;
    --hub-text: #ffffff;
    --hub-muted: rgba(255, 255, 255, 0.6);
    --hub-muted-dark: rgba(255, 255, 255, 0.32);
    --hub-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
    --hub-glow-cyan: rgba(51, 171, 228, 0.20);
    --hub-glow-magenta: rgba(255, 0, 240, 0.14);
    --hub-modal-bg: var(--hub-panel);
    --hub-overlay: rgba(0, 0, 0, 0.6);
}

:root[data-bs-theme=light] {
    --hub-bg: #eef0f3;
    --hub-panel: rgba(255, 255, 255, 0.62);
    --hub-panel-solid: #ffffff;
    --hub-panel2: rgba(0, 0, 0, 0.035);
    --hub-border: rgba(0, 0, 0, 0.12);
    --hub-border-bright: rgba(0, 0, 0, 0.22);
    --hub-cyan: #1D8FC9;
    --hub-cyan-rgb: 29, 143, 201;
    --hub-magenta: #D6009C;
    --hub-magenta-rgb: 214, 0, 156;
    --hub-text: #14161a;
    --hub-muted: rgba(0, 0, 0, 0.62);
    --hub-muted-dark: rgba(0, 0, 0, 0.38);
    --hub-shadow: 0 4px 16px rgba(43, 76, 112, 0.10);
    --hub-glow-cyan: rgba(29, 143, 201, 0.14);
    --hub-glow-magenta: rgba(214, 0, 156, 0.08);
    /* Solid: the glass panel over a dark overlay read as dirty grey. */
    --hub-modal-bg: #f5f6f8;
    --hub-overlay: rgba(16, 22, 32, 0.42);
}

:root[data-bs-theme] {
    --bs-font-sans-serif: var(--hub-font-sans);
    --bs-font-monospace: var(--hub-font-mono);
    --bs-body-font-size: 0.875rem;
    --bs-body-bg: var(--hub-bg);
    --bs-body-color: var(--hub-text);
    --bs-emphasis-color: var(--hub-text);
    --bs-heading-color: var(--hub-text);
    --bs-secondary-color: var(--hub-muted);
    --bs-tertiary-color: var(--hub-muted-dark);
    --bs-secondary-bg: var(--hub-panel2);
    --bs-tertiary-bg: var(--hub-panel2);
    --bs-border-color: var(--hub-border);
    --bs-border-color-translucent: var(--hub-border);
    --bs-border-radius: 6px;
    --bs-border-radius-lg: 14px;
    --bs-primary: var(--hub-cyan);
    --bs-primary-rgb: var(--hub-cyan-rgb);
    --bs-primary-text-emphasis: var(--hub-cyan);
    --bs-primary-bg-subtle: rgba(var(--hub-cyan-rgb), 0.12);
    --bs-primary-border-subtle: rgba(var(--hub-cyan-rgb), 0.45);
    --bs-link-color: var(--hub-cyan);
    --bs-link-color-rgb: var(--hub-cyan-rgb);
    --bs-link-hover-color: var(--hub-cyan);
    --bs-link-hover-color-rgb: var(--hub-cyan-rgb);
    --bs-focus-ring-color: rgba(var(--hub-cyan-rgb), 0.35);
}

body {
    background: var(--hub-bg);
    -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--hub-border-bright); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

h1, .h1 { font-size: 1.35rem; font-weight: 700; }
h1.h3, .h3 { font-size: 1.25rem; font-weight: 700; }
.h5, h5 { font-weight: 600; }

h1:focus {
    outline: none;
}

/* Section headings in the prototype's "eyebrow" style: small mono caps in cyan. */
.content h6, .content h2.h6 {
    font-family: var(--hub-font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hub-cyan);
}

.font-monospace, code, .badge {
    font-family: var(--hub-font-mono);
}

code {
    color: var(--hub-magenta);
}

/* Panels: translucent glass over the background glow. (A backdrop-filter
   would trap position:fixed children, so modals must not sit inside a card.) */
.card, .modal-content, .toast {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.card {
    --bs-card-bg: var(--hub-panel);
    --bs-card-border-color: var(--hub-border);
    --bs-card-border-radius: 14px;
    --bs-card-inner-border-radius: 13px;
    --bs-card-cap-bg: var(--hub-panel2);
    box-shadow: var(--hub-shadow);
}

.list-group {
    --bs-list-group-bg: var(--hub-panel);
    --bs-list-group-border-color: var(--hub-border);
    --bs-list-group-border-radius: 10px;
    --bs-list-group-action-hover-bg: rgba(var(--hub-cyan-rgb), 0.07);
    --bs-list-group-action-active-bg: rgba(var(--hub-cyan-rgb), 0.12);
    --bs-list-group-active-bg: rgba(var(--hub-cyan-rgb), 0.12);
    --bs-list-group-active-color: var(--hub-cyan);
    --bs-list-group-active-border-color: var(--hub-cyan);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--hub-text);
    --bs-table-border-color: var(--hub-border);
    --bs-table-hover-bg: rgba(var(--hub-cyan-rgb), 0.06);
    --bs-table-hover-color: var(--hub-text);
    --bs-table-striped-bg: var(--hub-panel2);
}

    .table > thead th {
        font-family: var(--hub-font-mono);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--hub-muted);
    }

/* Modals are the prototype's Panel (translucent glass) over a 60% black
   overlay in the dark theme; a solid light panel over a lighter one in the light. */
.modal-backdrop {
    --bs-backdrop-opacity: 0.6;
}

.modal {
    --bs-modal-bg: var(--hub-modal-bg);
    --bs-modal-padding: 24px;
    --bs-modal-header-padding: 20px 24px;
    --bs-modal-border-color: var(--hub-border);
    --bs-modal-border-radius: 14px;
    --bs-modal-inner-border-radius: 13px;
    --bs-modal-header-border-color: var(--hub-border);
    --bs-modal-footer-border-color: var(--hub-border);
    --bs-modal-box-shadow: 0 16px 38px rgba(0, 0, 0, 0.35);
}

/* Shared/HubModal: the header stays put, the body scrolls, the buttons sit
   in a footer under it. */
.hub-modal {
    background: var(--hub-overlay);
    animation: hub-modal-in .2s ease-out both;
}

    /* Opens with its content in: the overlay fades in, the panel rises a little. */
    .hub-modal > .modal-dialog {
        animation: hub-modal-rise .22s cubic-bezier(.2, .8, .3, 1) both;
    }

@keyframes hub-modal-in {
    from { opacity: 0; }
}

@keyframes hub-modal-rise {
    from { transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
    .hub-modal,
    .hub-modal > .modal-dialog {
        animation: none;
    }
}

/* A dialog still loading its content: nothing shows yet, and a spinner only
   if it takes long enough to notice (CustomerProfileModal). */
.hub-modal-wait {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hub-cyan);
    cursor: progress;
}

.hub-modal-content {
    overflow: hidden;
}

.hub-modal-tall .hub-modal-content {
    height: 100%;
}

.hub-modal-head {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 24px 16px;
    border-bottom: 1px solid var(--hub-border);
}

.hub-modal-heading {
    flex: 1;
    min-width: 0;
}

.hub-modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--hub-font-sans);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--hub-text);
}

    .hub-modal-title .lu {
        font-size: 16px;
        color: var(--hub-cyan);
    }

.hub-modal-sub {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--hub-muted);
}

.hub-modal-x {
    margin: -4px -6px 0 0;
    font-size: 18px;
}

.hub-modal-form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.hub-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px 24px;
}

.hub-modal-foot {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--hub-border);
}

@media (max-width: 480px) {
    .hub-modal-head { padding: 16px 16px 14px; }
    .hub-modal-body { padding: 16px; }
    .hub-modal-foot { padding: 12px 16px; }
}

/* Inputs: the prototype's inputStyle. */
.form-control, .form-select {
    background-color: var(--hub-panel2);
    border-color: var(--hub-border);
    border-radius: 6px;
    color: var(--hub-text);
    font-family: var(--hub-font-sans);
    font-size: 12.5px;
    padding: 8px 10px;
}

.form-select {
    padding-right: 2rem;
}

.form-control-sm, .form-select-sm {
    font-size: 11.5px;
    padding: 5px 8px;
}

    .form-control:focus, .form-select:focus {
        background-color: var(--hub-panel2);
        border-color: var(--hub-cyan);
        color: var(--hub-text);
        box-shadow: 0 0 0 0.2rem rgba(var(--hub-cyan-rgb), 0.25);
    }

    .form-control::placeholder {
        color: var(--hub-muted-dark);
    }

.form-select option {
    background: var(--hub-panel-solid);
    color: var(--hub-text);
}

.form-label, .col-form-label {
    color: var(--hub-muted);
    font-weight: 500;
}

/* Checkboxes: a rounded square on panel2 that fills cyan with a white tick.
   The focus ring only shows for the keyboard, not after a click. */
input[type=checkbox]:not(.btn-check):not([role=switch]) {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-left: 0;
    margin-right: 0;
    vertical-align: -3px;
    border: 1.5px solid var(--hub-border-bright);
    border-radius: 4px;
    background-color: var(--hub-panel2);
    background-image: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 11px;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

    input[type=checkbox]:not(.btn-check):not([role=switch]):hover:not(:disabled) {
        border-color: var(--hub-cyan);
    }

    input[type=checkbox]:not(.btn-check):not([role=switch]):focus {
        border-color: var(--hub-border-bright);
        box-shadow: none;
        outline: none;
    }

    input[type=checkbox]:not(.btn-check):not([role=switch]):focus-visible {
        box-shadow: 0 0 0 3px rgba(var(--hub-cyan-rgb), 0.35);
    }

    input[type=checkbox]:not(.btn-check):not([role=switch]):checked,
    input[type=checkbox]:not(.btn-check):not([role=switch]):indeterminate {
        border-color: var(--hub-cyan);
        background-color: var(--hub-cyan);
    }

    input[type=checkbox]:not(.btn-check):not([role=switch]):checked {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    }

    input[type=checkbox]:not(.btn-check):not([role=switch]):indeterminate {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
    }

    input[type=checkbox]:not(.btn-check):not([role=switch]):disabled {
        opacity: 0.45;
        cursor: default;
    }

/* A file picker is a <label class="btn"> for a hidden <input type=file>: the
   input keeps the keyboard focus (Enter or Space opens it), so the label
   shows the ring. */
label.btn:has(+ input[type=file]:focus-visible) {
    box-shadow: 0 0 0 0.25rem rgba(var(--hub-cyan-rgb), 0.5);
}

/* Inside Bootstrap's .form-check the box keeps its own spot left of the label. */
.form-check input[type=checkbox]:not(.btn-check):not([role=switch]) {
    margin-left: -1.5em;
}

/* Buttons: the prototype's btnStyle() — mono 11.5px bold, 6px radius, a
   border in the button's colour and a faint tint of it behind the label.
   Primary = cyan (the prototype's save/submit), secondary = neutral outline
   (its Cancel), .btn-magenta = its "+ NEW" actions, .btn-gradient = the
   brand-gradient call to action (Ad Builder's "continue" button). */
.btn:not(.btn-link):not(.btn-close) {
    --bs-btn-border-radius: 6px;
    font-family: var(--hub-font-mono);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-sm:not(.btn-link) {
    font-size: 10.5px !important;
    padding: 5px 10px !important;
}

.btn-primary, .btn-outline-primary {
    --bs-btn-color: var(--hub-cyan);
    --bs-btn-bg: rgba(var(--hub-cyan-rgb), 0.094);
    --bs-btn-border-color: var(--hub-cyan);
    --bs-btn-hover-color: var(--hub-cyan);
    --bs-btn-hover-bg: rgba(var(--hub-cyan-rgb), 0.18);
    --bs-btn-hover-border-color: var(--hub-cyan);
    --bs-btn-active-color: var(--hub-cyan);
    --bs-btn-active-bg: rgba(var(--hub-cyan-rgb), 0.24);
    --bs-btn-active-border-color: var(--hub-cyan);
    --bs-btn-disabled-color: var(--hub-cyan);
    --bs-btn-disabled-bg: rgba(var(--hub-cyan-rgb), 0.094);
    --bs-btn-disabled-border-color: var(--hub-cyan);
}

.btn-magenta {
    --bs-btn-color: var(--hub-magenta);
    --bs-btn-bg: rgba(var(--hub-magenta-rgb), 0.094);
    --bs-btn-border-color: var(--hub-magenta);
    --bs-btn-hover-color: var(--hub-magenta);
    --bs-btn-hover-bg: rgba(var(--hub-magenta-rgb), 0.18);
    --bs-btn-hover-border-color: var(--hub-magenta);
    --bs-btn-active-color: var(--hub-magenta);
    --bs-btn-active-bg: rgba(var(--hub-magenta-rgb), 0.24);
    --bs-btn-active-border-color: var(--hub-magenta);
    --bs-btn-disabled-color: var(--hub-magenta);
    --bs-btn-disabled-border-color: var(--hub-magenta);
}

.btn-danger, .btn-outline-danger {
    --bs-btn-color: var(--hub-red);
    --bs-btn-bg: rgba(255, 107, 107, 0.094);
    --bs-btn-border-color: var(--hub-red);
    --bs-btn-hover-color: var(--hub-red);
    --bs-btn-hover-bg: rgba(255, 107, 107, 0.18);
    --bs-btn-hover-border-color: var(--hub-red);
    --bs-btn-active-color: var(--hub-red);
    --bs-btn-active-bg: rgba(255, 107, 107, 0.24);
    --bs-btn-active-border-color: var(--hub-red);
    --bs-btn-disabled-color: var(--hub-red);
    --bs-btn-disabled-border-color: var(--hub-red);
}

.btn-outline-secondary, .btn-secondary, .btn-light, .btn-outline-light, .btn-outline-dark {
    --bs-btn-color: var(--hub-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--hub-border);
    --bs-btn-hover-color: var(--hub-text);
    --bs-btn-hover-bg: var(--hub-panel2);
    --bs-btn-hover-border-color: var(--hub-border-bright);
    --bs-btn-active-color: var(--hub-text);
    --bs-btn-active-bg: var(--hub-panel2);
    --bs-btn-active-border-color: var(--hub-border-bright);
    --bs-btn-disabled-color: var(--hub-muted-dark);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--hub-border);
}

.btn-gradient {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: rgba(255, 255, 255, 0.7);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-border-color: transparent;
    background-image: var(--hub-gradient);
}

    .btn-gradient:hover, .btn-gradient:focus-visible {
        filter: brightness(1.1);
    }

.btn:disabled, .btn.disabled {
    opacity: 0.4;
}

.btn-link {
    --bs-btn-color: var(--hub-cyan);
    --bs-btn-hover-color: var(--hub-cyan);
}

/* Pills (Admin sections, Ad Builder stages): active one in the brand gradient. */
.nav-pills {
    --bs-nav-link-color: var(--hub-muted);
    --bs-nav-link-hover-color: var(--hub-text);
    --bs-nav-pills-border-radius: 8px;
}

    .nav-pills .nav-link {
        font-family: var(--hub-font-mono);
        font-size: 0.75rem;
        font-weight: 600;
        border: 1px solid var(--hub-border);
    }

        .nav-pills .nav-link.active {
            background: var(--hub-gradient);
            border-color: transparent;
            color: #fff;
        }

        .nav-pills .nav-link:disabled {
            color: var(--hub-muted-dark);
        }

.breadcrumb {
    --bs-breadcrumb-font-size: 0.75rem;
    --bs-breadcrumb-item-active-color: var(--hub-muted);
    --bs-breadcrumb-divider-color: var(--hub-muted-dark);
    font-family: var(--hub-font-mono);
}

/* Sidebar logo: the wordmark matching the theme; just the mark on phones. */
.hub-logo-mark,
[data-bs-theme=dark] .hub-logo-light,
[data-bs-theme=light] .hub-logo-dark {
    display: none !important;
}

@media (max-width: 780px) {
    .hub-logo-full {
        display: none !important;
    }

    .hub-logo-mark {
        display: block !important;
    }
}

.hub-avatar {
    background: rgba(var(--hub-cyan-rgb), 0.14);
    border: 1px solid var(--hub-border);
    color: var(--hub-cyan);
    font-family: var(--hub-font-mono);
    font-weight: 700;
}

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

.invalid {
    outline: 1px solid var(--bs-danger);
}

.validation-message {
    color: var(--bs-danger);
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    /* Fixed dark text: the bar is light in both themes, so the dark theme's light body text would vanish on it. */
    color: #1a1d24;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui a {
        color: #0a58ca;
    }

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

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

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

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Client report (and any page) printed from the browser: just the content,
   black on white whatever the screen theme. */
@media print {
    :root[data-bs-theme] {
        color-scheme: light;
        --hub-bg: #fff;
        --hub-panel: #fff;
        --hub-panel2: #fff;
        --hub-text: #000;
        --hub-muted: #555;
        --hub-border: #ccc;
        --hub-cyan: #000;
        --hub-cyan-rgb: 0, 0, 0;
        --hub-shadow: none;
    }

    .hub-sidebar, .hub-topbar, .hub-glow, .hub-toasts, .hub-pop, .d-print-none {
        display: none !important;
    }

    .hub-shell, .hub-main, article.content {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .client-report {
        font-size: 11pt;
    }
}

/* Ad Builder Layout Planner drag-and-drop */
.lp-drop-target {
    outline: 2px dashed var(--hub-cyan);
    outline-offset: 2px;
    background-color: rgba(var(--hub-cyan-rgb), .08);
}

.hub-sticky-bar {
    background: var(--hub-bg);
}

.lp-draggable {
    cursor: grab;
}

.lp-slot {
    min-height: 3.25rem;
}

.border-dashed {
    border-style: dashed !important;
}

/* A spinner that only shows when the wait is long enough to notice — a fast
   upload finishes before it appears instead of flashing it. */
.hub-spinner-delayed {
    animation: hub-appear 0s linear .3s both;
}

@keyframes hub-appear {
    from { visibility: hidden; }
    to { visibility: visible; }
}

/* Item image tiles: a fixed-size frame so a loading thumbnail doesn't change the tile height. */
.hub-thumb {
    width: 100%;
    height: 80px;
    object-fit: contain;
}

/* Under a form field: why its value can't be saved, or a date worth a second
   look. Same look as the Customers profile's .cp-error. */
.hub-field-error {
    display: block;
    margin: 4px 2px 0;
    font-size: 11px;
    color: var(--bs-danger);
}

/* The * after a required field's label. */
.hub-req {
    color: var(--bs-danger);
    font-weight: 700;
}

/* API images (AuthImage) fade in over their placeholder instead of popping in. */
.hub-fade-in {
    animation: hub-fade-in .18s ease-out both;
}

@keyframes hub-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hub-fade-in {
        animation: none;
    }
}

.lp-handle {
    cursor: grab;
    padding: 0 .15rem;
}

/* Sign-in screen (prototype SignIn). Always dark, like the prototype, so it
   uses the fixed brand colours rather than the light/dark theme tokens. */
.hub-signin {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow: hidden;
    background: #05060a;
    color: #fff;
    font-family: var(--hub-font-sans);
}

.hub-signin-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
}

.hub-signin-glow-cyan {
    width: 560px;
    height: 560px;
    bottom: -14%;
    left: -12%;
    background: radial-gradient(circle, rgba(51, 171, 228, 0.38), transparent 70%);
}

.hub-signin-glow-magenta {
    top: -16%;
    right: -10%;
    background: radial-gradient(circle, rgba(255, 0, 240, 0.38), transparent 70%);
}

.hub-signin-watermark {
    position: absolute;
    right: -70px;
    bottom: -70px;
    width: 360px;
    opacity: 0.07;
    pointer-events: none;
}

.hub-signin-column {
    position: relative;
    z-index: 1;
    width: 460px;
    max-width: 100%;
}

.hub-signin-card {
    padding: 40px 36px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    background: rgba(13, 15, 20, 0.72);
    backdrop-filter: blur(14px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.hub-signin-logo {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto 26px;
}

.hub-signin-divider {
    height: 1px;
    margin-bottom: 26px;
    background: linear-gradient(90deg, transparent, rgba(51, 171, 228, 0.55), rgba(255, 0, 240, 0.55), transparent);
}

.hub-signin-title {
    margin: 0;
    color: #fff;
    text-align: center;
    font-family: var(--hub-font-mono);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.hub-signin-title span {
    background: linear-gradient(90deg, #33ABE4, #a04be0, #FF00F0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hub-signin-tagline {
    margin: 10px 0 28px;
    text-align: center;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.6);
}

.hub-signin-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
}

.hub-signin-button:hover,
.hub-signin-button:focus-visible {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
}

.hub-signin-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.32);
}

.hub-signin-or::before,
.hub-signin-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.14);
}

.hub-signin-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 0;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13.5px;
}

.hub-signin-link:hover,
.hub-signin-link:focus-visible {
    color: #fff;
}

.hub-signin-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 20px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.32);
}

.hub-signin-footer .lu {
    font-size: 13px;
    color: #33ABE4;
}

@media (max-width: 480px) {
    .hub-signin-card {
        padding: 32px 20px;
    }
}

/* Lucide icon font (the prototype's icon set): <span class="lu icon-briefcase">.
   The font's own rule sets the family; this only aligns it with text. */
.lu { display: inline-block; line-height: 1; vertical-align: -.125em; }

/* Store logos, which Lucide doesn't have (no brand icons): drawn in the text
   colour like the font icons. Paths from Simple Icons (CC0). */
.lu.icon-app-store::before,
.lu.icon-google-play::before {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--lu-mask) center / contain no-repeat;
    mask: var(--lu-mask) center / contain no-repeat;
}

.lu.icon-app-store {
    --lu-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701'/%3E%3C/svg%3E");
}

.lu.icon-google-play {
    --lu-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.018 13.298l-3.919 2.218-3.515-3.493 3.543-3.521 3.891 2.202a1.49 1.49 0 0 1 0 2.594zM1.337.924a1.486 1.486 0 0 0-.112.568v21.017c0 .217.045.419.124.6l11.155-11.087L1.337.924zm12.207 10.065l3.258-3.238L3.45.195a1.466 1.466 0 0 0-.946-.179l11.04 10.973zm0 2.067l-11 10.933c.298.036.612-.016.906-.183l13.324-7.54-3.23-3.21z'/%3E%3C/svg%3E");
}


/* ------------------------------------------------------------------------
   Prototype primitives — the prototype's shared React helpers as classes.
   Port prototype markup with these rather than re-inventing per page:
     Panel              -> .hub-panel            (+ .hub-panel-hover = glass-card)
     Eyebrow            -> .hub-eyebrow          (+ .magenta)
     btnStyle(color)    -> .btn .btn-primary | .btn-magenta | .btn-secondary | .btn-danger
     activeTabStyle tabs-> .hub-tab / .hub-tab.active
     inputStyle         -> .form-control / .form-select (or .hub-input)
     jobLogRowStyle     -> .hub-glass-row
     directoryTileStyle -> .hub-glass-tile
     tiny mono labels   -> .hub-label  (9px uppercase, muted-dark)
     statusMeta colours -> .hub-status-done | -pending | -active
     content-pad        -> page content already gets 24px padding from MainLayout
   ------------------------------------------------------------------------ */
.hub-panel {
    background: var(--hub-panel);
    border: 1px solid var(--hub-border);
    border-radius: 14px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.hub-panel-hover {
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

    .hub-panel-hover:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
    }

.hub-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-family: var(--hub-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hub-cyan);
}

    .hub-eyebrow.magenta { color: var(--hub-magenta); }
    .hub-eyebrow .lu { font-size: 12px; }

.hub-label {
    font-family: var(--hub-font-mono);
    font-size: 9px;
    text-transform: uppercase;
    color: var(--hub-muted-dark);
}

.hub-mono { font-family: var(--hub-font-mono); }
.hub-muted { color: var(--hub-muted); }
.hub-muted-dark { color: var(--hub-muted-dark); }
.hub-cyan { color: var(--hub-cyan); }
.hub-magenta { color: var(--hub-magenta); }
.hub-red { color: var(--hub-red); }

/* Section count line, e.g. "12 jobs · ordered by job number". */
.hub-count {
    font-family: var(--hub-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hub-muted);
}

/* Segmented tabs: Job Log's Combined / Digital / Print, Admin sections, etc. */
.hub-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 7px;
    border: 1px solid var(--hub-border);
    background: transparent;
    color: var(--hub-muted);
    font-family: var(--hub-font-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
}

    .hub-tab:hover { color: var(--hub-text); border-color: var(--hub-border-bright); }

    .hub-tab.active {
        background: var(--hub-gradient);
        border-color: transparent;
        color: #fff;
    }

    .hub-tab:disabled { opacity: 0.4; cursor: default; }

/* Filter toggle that lights up when filters are set. */
.hub-tab.lit {
    border-color: var(--hub-cyan);
    background: rgba(var(--hub-cyan-rgb), 0.12);
    color: var(--hub-cyan);
}

.hub-input {
    font-family: var(--hub-font-sans);
    font-size: 12.5px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--hub-panel2);
    border: 1px solid var(--hub-border);
    color: var(--hub-text);
    outline: none;
}

/* Search box with the magnifier inside on the left. */
.hub-search {
    position: relative;
}

    .hub-search > .lu {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        color: var(--hub-muted-dark);
        pointer-events: none;
    }

    .hub-search > input {
        width: 100%;
        padding-left: 30px;
    }

/* jobLogRowStyle: list rows lit cyan bottom-left, magenta bottom-right. */
.hub-glass-row {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 14px;
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    color: var(--hub-text);
    text-decoration: none;
}

[data-bs-theme=dark] .hub-glass-row {
    background: radial-gradient(circle at 99% 120%, rgba(255,0,226,0.27), transparent 28%), radial-gradient(circle at 0% 120%, rgba(0,171,255,0.29), transparent 32%), linear-gradient(135deg, rgba(21,34,54,0.96), rgba(8,14,25,0.96));
    border: 1px solid rgba(83,171,236,0.62);
    box-shadow: 0 12px 30px rgba(0,0,0,0.30), 0 0 12px rgba(0,158,255,0.12), inset 0 1px 0 rgba(210,240,255,0.28), inset 1px 0 0 rgba(0,195,255,0.42), inset -1px 0 0 rgba(255,0,226,0.38);
}

[data-bs-theme=light] .hub-glass-row {
    background: radial-gradient(circle at 98% 110%, rgba(255,0,218,0.16), transparent 28%), radial-gradient(circle at 1% 110%, rgba(0,166,255,0.16), transparent 31%), linear-gradient(135deg, rgba(255,255,255,0.94), rgba(235,244,253,0.88));
    border: 1px solid rgba(255,255,255,0.96);
    box-shadow: 0 10px 26px rgba(43,76,112,0.13), inset 0 1px 0 #fff, inset 1px 0 0 rgba(193,240,255,0.72), inset -1px 0 0 rgba(255,195,244,0.62);
}

.hub-glass-row.hub-panel-hover:hover,
a.hub-glass-row:hover,
button.hub-glass-row:hover {
    transform: translateY(-2px);
    color: var(--hub-text);
}

/* directoryTileStyle: the larger, rounder tile used by Team Directory cards. */
.hub-glass-tile {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 18px;
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

[data-bs-theme=dark] .hub-glass-tile {
    background: radial-gradient(circle at 98% 98%, rgba(255,0,226,0.32), transparent 34%), radial-gradient(circle at 2% 98%, rgba(0,171,255,0.34), transparent 38%), linear-gradient(145deg, rgba(24,38,61,0.96), rgba(8,15,27,0.96));
    border: 1.5px solid rgba(88,178,255,0.88);
    box-shadow: 0 18px 46px rgba(0,0,0,0.42), 0 0 15px rgba(0,158,255,0.18), inset 0 1px 0 rgba(210,240,255,0.44), inset 1px 0 0 rgba(0,195,255,0.62), inset -1px 0 0 rgba(255,0,226,0.58);
}

[data-bs-theme=light] .hub-glass-tile {
    background: radial-gradient(circle at 96% 96%, rgba(255,0,218,0.18), transparent 34%), radial-gradient(circle at 3% 96%, rgba(0,166,255,0.17), transparent 37%), linear-gradient(145deg, rgba(255,255,255,0.94), rgba(235,244,253,0.88));
    border: 1.5px solid rgba(255,255,255,0.96);
    box-shadow: 0 16px 38px rgba(40,73,108,0.17), inset 0 1px 0 #fff, inset 1px 0 0 rgba(193,240,255,0.9), inset -1px 0 0 rgba(255,195,244,0.72);
}

/* statusMeta(): done = text, not started / future = muted-dark, anything else = cyan. */
.hub-status-done { color: var(--hub-text); }
.hub-status-pending { color: var(--hub-muted-dark); }
.hub-status-active { color: var(--hub-cyan); }

/* Thin progress bar (hours logged vs estimate); the fill takes the text colour. */
.hub-progress {
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--hub-border);
}

    .hub-progress > span {
        display: block;
        height: 100%;
        background: currentColor;
    }

/* Grids that collapse like the prototype's grid-2col/3col/4col. */
.hub-grid-2, .hub-grid-3, .hub-grid-4 { display: grid; gap: 10px; }
.hub-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
    .hub-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
    .hub-grid-2, .hub-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .hub-grid-4 { grid-template-columns: 1fr; }
}

/* Hover tooltip (prototype tip-group / tip-bubble). */
.hub-tip { position: relative; }

.hub-tip-bubble {
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-bottom: 6px;
    padding: 6px 9px;
    border-radius: 5px;
    background: var(--hub-text);
    color: var(--hub-bg);
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
    z-index: 5;
}

.hub-tip:hover .hub-tip-bubble {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Plain close "X" in a panel/modal corner. */
.hub-close {
    display: flex;
    align-items: center;
    padding: 6px;
    margin: -6px;
    border: none;
    background: none;
    color: var(--hub-muted);
    cursor: pointer;
}

    .hub-close:hover { color: var(--hub-text); }

/* Skeletons (Shared/Skeleton + LoadingSkeleton): the page's own panels, rows
   and tiles with grey bars where the data will go. The tint is a share of the
   surrounding text colour, so it fits both themes and the white sheets; a
   light band sweeps across while it waits. They show at once, with no fade:
   the boot screen (index.html), the route skeleton and the page's own
   skeleton follow each other without a gap. */
.hub-skel-region {
    pointer-events: none;
    user-select: none;
}

/* A skeleton list cut off at the bottom of the screen (index.html fits it)
   fades out there instead of ending on a sliced card. */
.hub-skel-fill {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 80px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 80px), transparent);
}

    /* Its rows keep their real height when the list is cut short (a flex
       column would squeeze them to fit). */
    .hub-skel-fill > * {
        flex-shrink: 0;
    }

.hub-skel {
    display: block;
    flex-shrink: 0;
    max-width: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg,
        color-mix(in srgb, currentColor 8%, transparent) 25%,
        color-mix(in srgb, currentColor 16%, transparent) 37%,
        color-mix(in srgb, currentColor 8%, transparent) 63%);
    background-size: 400% 100%;
    animation: hub-skel-shimmer 1.4s ease infinite;
}

    .hub-skel.circle {
        border-radius: 50%;
    }

/* A skeleton exactly the size of the real thing: the control itself (a button
   with its label, a select with its value), its ink hidden and the bar's tint
   in its place. */
.hub-skel-as {
    color: transparent !important;
    border-color: transparent !important;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--hub-text) 8%, transparent) 25%,
        color-mix(in srgb, var(--hub-text) 16%, transparent) 37%,
        color-mix(in srgb, var(--hub-text) 8%, transparent) 63%) !important;
    background-size: 400% 100% !important;
    box-shadow: none !important;
    animation: hub-skel-shimmer 1.4s ease infinite;
    pointer-events: none;
}

    .hub-skel-as * {
        visibility: hidden;
    }

    .hub-skel.pill {
        border-radius: 999px;
    }

@keyframes hub-skel-shimmer {
    from { background-position: 100% 50%; }
    to { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .hub-skel, .hub-skel-as { animation: none; }
}

/* Old content while new data loads (filter change, another day): dims only
   if the wait is long enough to notice, and snaps back when the data lands. */
.hub-refreshing {
    opacity: .55;
    transition: opacity .2s ease .3s;
}

/* Banner on the UI-only preview screens (Shared/PreviewNotice). */
.hub-preview-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 7px 12px;
    border: 1px dashed var(--hub-border);
    border-radius: 8px;
    font-family: var(--hub-font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--hub-muted);
}

/* Toasts (Shared/Toasts): glass cards bottom-right, an accent stripe and icon
   in cyan (done) or red (failed), and a bar that runs down to auto-dismiss. */
.hub-toasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

.hub-toast {
    --toast-color: var(--hub-cyan);
    --toast-rgb: var(--hub-cyan-rgb);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px 12px 14px 14px;
    overflow: hidden;
    border: 1px solid rgba(var(--toast-rgb), 0.45);
    border-radius: 10px;
    background:
        linear-gradient(90deg, rgba(var(--toast-rgb), 0.14), transparent 60%),
        var(--hub-panel-solid);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32), inset 3px 0 0 var(--toast-color);
    color: var(--hub-text);
    font-size: 13px;
    line-height: 1.4;
    pointer-events: auto;
    animation: hub-toast-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .hub-toast.error {
        --toast-color: var(--hub-red);
        --toast-rgb: 255, 107, 107;
    }

.hub-toast-icon {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 16px;
    color: var(--toast-color);
}

.hub-toast-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.hub-toast-x {
    flex-shrink: 0;
    margin: -4px -4px 0 0;
    font-size: 14px;
}

.hub-toast-timer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--toast-color);
    opacity: 0.55;
    transform-origin: left;
    animation: hub-toast-timer linear forwards;
}

@keyframes hub-toast-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* Going away: slides out to the right while the stack closes the gap. */
.hub-toast.leaving {
    pointer-events: none;
    animation: hub-toast-out 0.22s ease-in forwards;
}

@keyframes hub-toast-out {
    from { opacity: 1; transform: none; max-height: 160px; }
    to {
        opacity: 0;
        transform: translateX(32px);
        max-height: 0;
        margin-top: -10px;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
    }
}

@keyframes hub-toast-timer {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hub-toast { animation: none; }
    .hub-toast.leaving { animation: none; opacity: 0; }
    .hub-toast-timer { display: none; }
}

/* Dropdown lists and the date calendar (js/pickers.js): they replace the
   browser's own pop-ups for <select> and <input type=date>; the fields
   themselves stay as they are. */
.hub-pop {
    position: fixed;
    z-index: 1200;
    border: 1px solid var(--hub-border-bright);
    border-radius: 10px;
    background: var(--hub-panel-solid);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.4);
    color: var(--hub-text);
    font-family: var(--hub-font-sans);
    animation: hub-pop-in 0.12s ease-out both;
}

@keyframes hub-pop-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

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

.hub-pop-list {
    padding: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.hub-pop-group {
    padding: 8px 10px 4px;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hub-muted-dark);
}

.hub-pop-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.35;
    cursor: pointer;
    user-select: none;
}

    .hub-pop-opt .lu {
        flex-shrink: 0;
        width: 14px;
        font-size: 13px;
        color: var(--hub-cyan);
    }

    .hub-pop-opt.active {
        background: rgba(var(--hub-cyan-rgb), 0.12);
    }

    .hub-pop-opt[aria-selected=true] {
        color: var(--hub-cyan);
        font-weight: 600;
    }


    .hub-pop-opt[aria-disabled=true] {
        opacity: 0.4;
        cursor: default;
    }

.hub-cal {
    width: 276px;
    padding: 12px;
}

.hub-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.hub-cal-title {
    font-size: 13.5px;
    font-weight: 700;
}

.hub-cal-nav {
    display: flex;
    gap: 2px;
}

.hub-cal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--hub-muted);
    font-size: 15px;
    cursor: pointer;
}

    .hub-cal-btn:hover {
        background: var(--hub-panel2);
        color: var(--hub-text);
    }

.hub-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.hub-cal-dow {
    padding: 4px 0 6px;
    text-align: center;
    font-family: var(--hub-font-mono);
    font-size: 9.5px;
    text-transform: uppercase;
    color: var(--hub-muted-dark);
}

.hub-cal-day {
    height: 34px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: none;
    color: var(--hub-text);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

    .hub-cal-day:hover,
    .hub-cal-day.active {
        background: rgba(var(--hub-cyan-rgb), 0.12);
    }

    .hub-cal-day.active {
        border-color: rgba(var(--hub-cyan-rgb), 0.55);
    }

    .hub-cal-day.outside {
        color: var(--hub-muted-dark);
    }

    .hub-cal-day.today {
        color: var(--hub-cyan);
        font-weight: 700;
    }

    .hub-cal-day.selected {
        border-color: transparent;
        background: var(--hub-gradient);
        color: #fff;
        font-weight: 700;
    }

    .hub-cal-day:disabled {
        opacity: 0.3;
        cursor: default;
        background: none;
    }

.hub-cal-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--hub-border);
}

.hub-cal-link {
    padding: 4px 6px;
    border: none;
    border-radius: 5px;
    background: none;
    color: var(--hub-cyan);
    font-family: var(--hub-font-mono);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

    .hub-cal-link:hover {
        background: rgba(var(--hub-cyan-rgb), 0.1);
    }

/* With a mouse the calendar icon is ours (the browser's would open its own
   picker); on touch screens the phone's own date wheel stays. */
@media (pointer: fine) {
    input[type=date]::-webkit-calendar-picker-indicator {
        display: none;
    }

    input[type=date]:not(:disabled):not([readonly]) {
        cursor: pointer;
        padding-right: 32px;
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 15px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    }

    [data-bs-theme=light] input[type=date]:not(:disabled):not([readonly]) {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.55)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    }
}