:root {
    --venue-navy: #0F1C2E;
    --venue-navy-2: #1B3350;
    --venue-orange: #E96A1A;
    --venue-orange-lt: #F79242;
    --venue-orange-deep: #C6570F;
    --venue-slate: #6E7A8A;
    --venue-slate-lt: #9AA5B5;
    --venue-border: #E3DCD0;
    --venue-border-hard: #DDD6CA;
    --venue-surface: #FCFAF7;
    --venue-surface-2: #FAF7F2;
    --venue-surface-3: #F5F0E7;
    --venue-page-bg: #EEEAE2;
    --venue-cream: #FBEFE4;
    --venue-green: #2F9E6A;
    --venue-green-bg: #E6F4ED;
    --venue-red: #D94F4F;
    --venue-red-bg: #FBE9E9;
    --venue-amber: #E9A21A;
    --venue-amber-bg: #FDF3E3;
    --venue-gradient: linear-gradient(125deg, #F79242, #E96A1A);
    --venue-sidebar-width: 250px;
    --venue-sidebar-width-collapsed: 86px;
}

html, body {
    font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--venue-page-bg);
    color: var(--venue-navy);
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--venue-orange);
}

.content {
    padding-top: 1.1rem;
}

.validation-message {
    color: var(--venue-red);
    font-size: 13px;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    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 .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--venue-orange);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* ===== Auth shell (Login / Signup / Reset password) ===== */

.venue-auth-shell {
    display: flex;
    min-height: 100vh;
    background: var(--venue-page-bg);
    color: var(--venue-navy);
}

.venue-auth-promo {
    flex: 0 0 auto;
    width: 42%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 56px;
    background: radial-gradient(120% 60% at 0% 0%, var(--venue-navy-2) 0%, var(--venue-navy) 55%);
    color: #fff;
}

.venue-auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 800;
}

.venue-auth-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--venue-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.venue-auth-promo h1 {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.03em;
    margin: 0;
}

.venue-auth-promo p {
    color: #C6D0DD;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

.venue-auth-form-panel {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.venue-auth-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 26px;
    padding: 34px;
    border: 1px solid var(--venue-border);
    box-shadow: 0 2px 4px rgba(15, 28, 46, .04), 0 24px 50px rgba(15, 28, 46, .1);
}

.venue-auth-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--venue-orange);
    text-transform: uppercase;
}

.venue-auth-card h1 {
    margin: 8px 0 6px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.venue-auth-sub {
    margin: 0 0 22px;
    font-size: 14px;
    color: var(--venue-slate);
}

.venue-auth-field {
    margin-bottom: 16px;
}

.venue-auth-field label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--venue-slate);
    margin-bottom: 7px;
}

.venue-auth-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}

.venue-auth-input, .venue-auth-select {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--venue-border);
    border-radius: 14px;
    font-size: 15px;
    background: var(--venue-surface);
    color: var(--venue-navy);
}

.venue-auth-input:focus, .venue-auth-select:focus {
    outline: none;
    border-color: var(--venue-orange);
    box-shadow: 0 0 0 3px rgba(233, 106, 26, .15);
}

.venue-auth-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    color: var(--venue-orange);
}

.venue-auth-error {
    margin-top: 14px;
    background: var(--venue-red-bg);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--venue-red);
}

.venue-auth-info {
    margin: 18px 0 22px;
    background: var(--venue-cream);
    border-radius: 14px;
    padding: 14px 16px;
}

.venue-auth-info-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--venue-orange);
    margin-bottom: 3px;
}

.venue-auth-info-body {
    font-size: 13px;
    color: var(--venue-slate);
    line-height: 1.5;
}

.venue-auth-forgot {
    display: flex;
    justify-content: flex-end;
    margin: 12px 0 20px;
}

.venue-auth-forgot a, .venue-auth-back a {
    font-size: 13px;
    font-weight: 700;
    color: var(--venue-navy);
    text-decoration: none;
}

.venue-auth-submit {
    width: 100%;
    background: var(--venue-gradient);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 16px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(233, 106, 26, .32);
    transition: filter .15s;
}

.venue-auth-submit:hover:not(:disabled) {
    filter: brightness(1.07);
}

.venue-auth-submit:disabled {
    opacity: .65;
    cursor: default;
}

.venue-auth-footer {
    text-align: center;
    font-size: 14px;
    color: var(--venue-slate);
    margin-top: 20px;
}

.venue-auth-footer a {
    font-weight: 700;
    color: var(--venue-navy);
    text-decoration: none;
}

.venue-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.venue-auth-grid .venue-auth-field-span-2 {
    grid-column: span 2;
}

/* ===== Authenticated app shell ===== */

.venue-shell {
    display: flex;
    min-height: 100vh;
    background: var(--venue-page-bg);
    color: var(--venue-navy);
}

.venue-sidebar {
    flex: 0 0 auto;
    width: var(--venue-sidebar-width);
    transition: width .15s ease;
    position: sticky;
    top: 0;
    height: 100vh;
}

.venue-shell-collapsed .venue-sidebar {
    width: var(--venue-sidebar-width-collapsed);
}

.venue-nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 26px 16px;
    background: radial-gradient(120% 60% at 0% 0%, var(--venue-navy-2) 0%, var(--venue-navy) 55%);
    color: #fff;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06);
}

.venue-brand {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 6px 24px;
}

.venue-brand-mark {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--venue-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.venue-brand-text {
    min-width: 0;
}

.venue-brand-word {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

.venue-brand-word b {
    color: var(--venue-orange-lt);
    font-weight: 800;
}

.venue-brand-tagline {
    font-size: 10.5px;
    color: #8493A8;
    margin-top: 2px;
    line-height: 1.3;
}

.venue-nav-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    /* The sidebar is a fixed 100vh column, so in a short viewport the nav list has to scroll
       rather than push the footer (and its Sign out button) off the bottom where nothing can
       reach it. min-height: 0 is required: a column flex child defaults to min-height: auto and
       would otherwise refuse to shrink below the height of all its items. */
    min-height: 0;
    overflow-y: auto;
}

.venue-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    color: #C6D0DD;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.venue-nav-item i {
    font-size: 16px;
    width: 18px;
    text-align: center;
}

.venue-nav-item:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.venue-nav-item.active {
    background: var(--venue-gradient);
    color: #fff;
    box-shadow: 0 8px 18px rgba(233, 106, 26, .28);
}

.venue-nav-footer {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 16px;
    margin-top: 8px;
}

.venue-nav-footer-venue {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

.venue-nav-footer-company, .venue-nav-footer-manager {
    font-size: 12px;
    color: #97A3B5;
    margin-top: 3px;
}

.venue-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.venue-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 32px;
    border-bottom: 1px solid var(--venue-border);
}

.venue-topbar-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--venue-orange);
    margin-bottom: 2px;
}

.venue-topbar-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.venue-topbar-home {
    display: inline-block;
    margin-top: 10px;
    background: var(--venue-cream);
    color: var(--venue-orange);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.venue-topbar-home:hover {
    filter: brightness(.97);
}

.venue-topbar {
    align-items: flex-start;
}

.venue-topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.venue-topbar-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--venue-border);
    color: var(--venue-navy);
    font-size: 16px;
    text-decoration: none;
}

.venue-topbar-bell:hover {
    border-color: var(--venue-orange);
    color: var(--venue-orange);
}

.venue-topbar-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--venue-red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.venue-topbar-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--venue-navy);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.venue-signout-button {
    width: 100%;
    margin-top: 14px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    color: #E4E9F0;
}

.venue-signout-button:hover {
    border-color: var(--venue-orange-lt);
    color: var(--venue-orange-lt);
}

.venue-content {
    padding: 28px 32px 48px;
    max-width: 1200px;
}

/* ===== Shared page/content building blocks ===== */

.venue-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.venue-page-head h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.venue-page-sub {
    margin: 6px 0 0;
    font-size: 15px;
    color: var(--venue-slate);
}

.venue-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 999px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
}

.venue-btn-primary {
    background: var(--venue-gradient);
    color: #fff;
    box-shadow: 0 10px 22px rgba(233, 106, 26, .28);
}

.venue-btn-primary:hover:not(:disabled) {
    filter: brightness(1.06);
}

.venue-btn-dark {
    background: var(--venue-navy);
    color: #fff;
}

.venue-btn-outline {
    background: #fff;
    color: var(--venue-navy);
    border: 1px solid var(--venue-border);
}

.venue-btn-outline:hover {
    border-color: var(--venue-orange);
    color: var(--venue-orange);
}

.venue-btn:disabled {
    opacity: .6;
    cursor: default;
}

.venue-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.venue-stat-card {
    background: #fff;
    border: 1px solid var(--venue-border);
    border-radius: 20px;
    padding: 20px 22px;
    box-shadow: 0 1px 3px rgba(15, 28, 46, .04);
}

.venue-stat-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--venue-slate);
    margin-bottom: 8px;
}

.venue-stat-value {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.venue-stat-caption {
    font-size: 13px;
    color: var(--venue-slate-lt);
    margin-top: 4px;
}

.venue-panel {
    background: #fff;
    border: 1px solid var(--venue-border);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(15, 28, 46, .04);
}

.venue-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.venue-panel-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.venue-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.venue-tab {
    background: #fff;
    border: 1px solid var(--venue-border);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--venue-slate);
    cursor: pointer;
}

.venue-tab.active {
    background: var(--venue-navy);
    color: #fff;
    border-color: var(--venue-navy);
}

.venue-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--venue-slate);
}

.venue-empty-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--venue-navy);
    margin-bottom: 6px;
}

.venue-job-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.venue-job-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--venue-border);
    border-radius: 16px;
    background: var(--venue-surface-2);
    text-decoration: none;
    color: var(--venue-navy);
}

.venue-job-row:hover {
    border-color: var(--venue-orange);
}

.venue-job-title {
    font-weight: 800;
    font-size: 15px;
}

.venue-job-meta {
    font-size: 13px;
    color: var(--venue-slate);
    margin-top: 3px;
}

.venue-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 800;
}

.venue-pill-open {
    background: var(--venue-cream);
    color: var(--venue-orange);
}

.venue-pill-confirmed {
    background: #E7F0FE;
    color: #1D4ED8;
}

.venue-pill-fulfilled {
    background: var(--venue-green-bg);
    color: var(--venue-green);
}

.venue-pill-expired {
    background: var(--venue-surface-3);
    color: var(--venue-slate);
}

.venue-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.venue-form-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 16px;
}

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

.venue-form-field label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--venue-slate);
}

.venue-form-field .venue-hint {
    font-size: 12px;
    color: var(--venue-slate-lt);
}

.venue-input, .venue-select, .venue-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--venue-border);
    border-radius: 14px;
    font-size: 15px;
    background: var(--venue-surface);
    color: var(--venue-navy);
    font-family: inherit;
}

.venue-input:focus, .venue-select:focus, .venue-textarea:focus {
    outline: none;
    border-color: var(--venue-orange);
    box-shadow: 0 0 0 3px rgba(233, 106, 26, .15);
}

/* ===== Post a shift wizard ===== */

.venue-wizard {
    max-width: 760px;
    margin: 0 auto;
}

.venue-wizard-back-link {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--venue-slate);
    cursor: pointer;
}

.venue-wizard-back-link:hover:not(:disabled) {
    color: var(--venue-orange);
}

.venue-wizard-back-link:disabled {
    opacity: .45;
    cursor: default;
}

.venue-wizard-step-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--venue-orange);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.venue-wizard-heading {
    margin: 0 0 18px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.venue-wizard-bar-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 26px;
}

.venue-wizard-bar {
    height: 6px;
    border-radius: 999px;
    background: #E1DACE;
}

.venue-wizard-bar.done {
    background: var(--venue-orange);
}

.venue-wizard-error {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--venue-red-bg);
    color: var(--venue-red);
    border-radius: 14px;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 18px;
}

.venue-wizard-error-badge {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--venue-red);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
}

.venue-wizard-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.venue-wizard-card {
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 1px 2px rgba(15, 28, 46, .04);
}

.venue-wizard-card-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.venue-wizard-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.venue-field-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--venue-slate);
    margin-bottom: 10px;
}

.venue-field-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.venue-field-label-row .venue-field-label {
    margin-bottom: 10px;
}

.venue-optional {
    font-size: 11px;
    font-weight: 700;
    color: var(--venue-slate-lt);
}

.venue-subfield-label {
    font-size: 11px;
    color: var(--venue-slate-lt);
    font-weight: 700;
    margin-bottom: 6px;
}

.venue-hint {
    font-size: 12px;
    color: var(--venue-slate-lt);
    margin-top: 8px;
}

/* Step 1: role picker */

.venue-role-group-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--venue-slate-lt);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.venue-role-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.venue-role-card {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    cursor: pointer;
    background: #fff;
    border-radius: 16px;
    padding: 15px 16px;
    border: 2px solid transparent;
    box-shadow: 0 1px 2px rgba(15, 28, 46, .04);
}

.venue-role-card:hover {
    border-color: var(--venue-orange);
}

.venue-role-card.selected {
    border-color: var(--venue-orange);
}

.venue-role-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 13px;
    background: var(--venue-cream);
    display: grid;
    place-items: center;
}

.venue-role-text {
    flex: 1 1 auto;
    min-width: 0;
}

.venue-role-name {
    display: block;
    font-size: 15px;
    font-weight: 800;
}

.venue-role-desc {
    display: block;
    font-size: 12px;
    color: var(--venue-slate);
    margin-top: 2px;
}

.venue-role-tick {
    font-size: 14px;
    font-weight: 800;
    color: var(--venue-orange);
}

/* Step 2: date, time, positions */

.venue-date-quickpicks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.venue-date-quickpick {
    cursor: pointer;
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    background: #fff;
    border: 2px solid transparent;
}

.venue-date-quickpick:hover {
    border-color: var(--venue-border-hard);
}

.venue-date-quickpick.selected {
    background: var(--venue-cream);
    border-color: var(--venue-orange);
}

.venue-date-quickpick-label {
    display: block;
    font-size: 12px;
    color: var(--venue-slate);
    font-weight: 600;
}

.venue-date-quickpick-day {
    display: block;
    font-size: 17px;
    font-weight: 800;
    margin-top: 3px;
}

.venue-date-other {
    width: 100%;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    border-radius: 14px;
    padding: 14px 16px;
    border: 2px solid var(--venue-border);
    background: #fff;
}

.venue-date-other.selected {
    background: var(--venue-cream);
    border-color: var(--venue-orange);
}

.venue-date-other-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--venue-slate);
}

.venue-date-other-value {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-top: 3px;
}

.venue-date-other-action {
    font-size: 13px;
    font-weight: 800;
    color: var(--venue-orange);
}

.venue-calendar {
    margin-top: 14px;
    border: 1px solid #EFE9DF;
    border-radius: 16px;
    padding: 18px;
    background: var(--venue-surface);
}

.venue-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.venue-calendar-nav {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--venue-border-hard);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--venue-navy);
}

.venue-calendar-month {
    font-size: 15px;
    font-weight: 800;
}

.venue-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.venue-calendar-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--venue-slate-lt);
    padding-bottom: 2px;
}

.venue-calendar-cell {
    height: 40px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid #EFE9DF;
    background: #fff;
    color: var(--venue-navy);
}

.venue-calendar-cell.blank {
    border-color: transparent;
    background: transparent;
}

.venue-calendar-cell.past {
    border-color: transparent;
    background: transparent;
    color: #C7CFDA;
    cursor: not-allowed;
}

.venue-calendar-cell.selected {
    background: var(--venue-orange);
    border-color: var(--venue-orange);
    color: #fff;
}

.venue-time-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.venue-time-input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--venue-border);
    border-radius: 12px;
    font-size: 17px;
    font-weight: 700;
    background: var(--venue-surface);
    color: var(--venue-navy);
    font-family: inherit;
}

.venue-duration-note {
    font-size: 12px;
    font-weight: 700;
    margin-top: 6px;
    color: var(--venue-slate);
}

.venue-duration-note.invalid {
    color: var(--venue-red);
}

.venue-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--venue-border);
    border-radius: 12px;
    padding: 8px 12px;
}

.venue-stepper-button {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    background: var(--venue-cream);
    color: var(--venue-orange);
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
}

.venue-stepper-button:disabled {
    opacity: .45;
    cursor: default;
}

.venue-stepper-value {
    font-size: 22px;
    font-weight: 800;
}

/* Step 3: pay, address, extras */

.venue-pay-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.venue-pay-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    border: 1px solid var(--venue-border);
    border-radius: 14px;
    padding: 12px 18px;
    background: var(--venue-surface);
}

.venue-pay-currency {
    font-size: 24px;
    font-weight: 700;
    color: var(--venue-slate);
}

.venue-pay-input {
    border: none;
    background: transparent;
    font-size: 26px;
    font-weight: 800;
    width: 100%;
    color: var(--venue-navy);
    font-family: inherit;
}

.venue-pay-input:focus {
    outline: none;
}

.venue-pay-hint {
    font-size: 13px;
    font-weight: 800;
    padding: 9px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.venue-pay-hint-neutral {
    background: #EDF0F4;
    color: var(--venue-slate);
}

.venue-pay-hint-low {
    background: var(--venue-red-bg);
    color: var(--venue-red);
}

.venue-pay-hint-min {
    background: var(--venue-cream);
    color: var(--venue-orange);
}

.venue-pay-hint-high {
    background: var(--venue-green-bg);
    color: var(--venue-green);
}

.venue-address-card {
    display: flex;
    align-items: center;
    gap: 16px;
}

.venue-address-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 14px;
    background: var(--venue-cream);
    display: grid;
    place-items: center;
}

.venue-address-text {
    flex: 1 1 auto;
    min-width: 0;
}

.venue-address-name {
    font-size: 16px;
    font-weight: 800;
}

.venue-address-line {
    font-size: 13px;
    color: var(--venue-slate);
    margin-top: 2px;
}

.venue-extras {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.venue-extra-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #EFE9DF;
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 700;
}

.venue-toggle {
    width: 52px;
    height: 30px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    padding: 3px;
    display: flex;
    justify-content: flex-start;
    background: var(--venue-border-hard);
    transition: background .2s;
}

.venue-toggle.on {
    justify-content: flex-end;
    background: var(--venue-orange);
}

.venue-toggle span {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 28, 46, .25);
}

.venue-toggle-lg {
    width: 56px;
    height: 32px;
    flex: 0 0 56px;
}

.venue-toggle-lg span {
    width: 26px;
    height: 26px;
}

/* Step 4: review and publish */

.venue-summary-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--venue-border-2, #E7DFD1);
    box-shadow: 0 1px 2px rgba(15, 28, 46, .05), 0 4px 10px rgba(15, 28, 46, .06);
    padding: 26px;
}

.venue-summary-role {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--venue-orange);
    text-transform: uppercase;
}

.venue-summary-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 8px 0 4px;
}

.venue-summary-date {
    font-size: 14px;
    color: var(--venue-slate);
}

.venue-summary-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #F0EAE0;
}

.venue-summary-stat-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--venue-slate-lt);
}

.venue-summary-stat-value {
    font-size: 19px;
    font-weight: 800;
    margin-top: 5px;
}

.venue-cost-panel {
    background: radial-gradient(90% 130% at 100% 0%, rgba(233, 106, 26, .36) 0%, rgba(233, 106, 26, 0) 60%), linear-gradient(135deg, #162941 0%, #0F1C2E 62%);
    color: #fff;
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(15, 28, 46, .22);
    padding: 26px;
}

.venue-cost-panel-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--venue-orange-lt);
    text-transform: uppercase;
}

.venue-cost-panel-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

.venue-cost-panel-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
}

.venue-cost-panel-row span {
    font-size: 15px;
    font-weight: 600;
    color: #C7CFDA;
}

.venue-cost-panel-row strong {
    font-size: 17px;
    font-weight: 800;
}

.venue-cost-panel-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.venue-cost-panel-total span {
    font-size: 15px;
    font-weight: 800;
}

.venue-cost-panel-total strong {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.venue-cost-panel-extras {
    font-size: 13px;
    color: #9AA5B5;
    margin-top: 12px;
}

.venue-private-toggle-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.venue-private-title {
    font-size: 17px;
    font-weight: 800;
}

.venue-recipients-card {
    padding-bottom: 8px;
}

.venue-recipient-list {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
}

.venue-recipient-row {
    width: 100%;
    text-align: left;
    cursor: pointer;
    border: none;
    border-top: 1px solid #F2ECE2;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 4px;
    background: transparent;
}

.venue-recipient-row.selected {
    background: var(--venue-surface-2);
}

.venue-recipient-check {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    border: 2px solid var(--venue-border-hard);
    background: transparent;
}

.venue-recipient-check.on {
    border-color: var(--venue-orange);
    background: var(--venue-orange);
}

.venue-recipient-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    background: var(--venue-navy);
}

.venue-recipient-text {
    flex: 1 1 auto;
    min-width: 0;
}

.venue-recipient-name-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.venue-recipient-name {
    font-size: 15px;
    font-weight: 800;
}

.venue-recipient-match {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--venue-cream);
    color: var(--venue-orange);
}

.venue-recipient-meta {
    display: block;
    font-size: 13px;
    color: var(--venue-slate);
    margin-top: 3px;
}

.venue-reassurance {
    background: var(--venue-cream);
    border-radius: 16px;
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--venue-navy);
}

.venue-publish-button {
    width: 100%;
    background: var(--venue-gradient);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 18px;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(233, 106, 26, .3);
}

.venue-publish-button:hover:not(:disabled) {
    filter: brightness(1.07);
}

.venue-publish-button:disabled {
    opacity: .65;
    cursor: default;
}

.venue-wizard-actions {
    display: flex;
    gap: 12px;
    margin-top: 26px;
}

.venue-btn-grow {
    flex: 1 1 auto;
    justify-content: center;
    padding: 15px;
    font-size: 16px;
}

@media (max-width: 860px) {
    .venue-wizard-split,
    .venue-role-grid,
    .venue-summary-stats {
        grid-template-columns: 1fr;
    }
}

.venue-cost-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    background: var(--venue-surface-2);
    border: 1px solid var(--venue-border);
    border-radius: 16px;
    padding: 16px 18px;
    margin-top: 8px;
}

.venue-cost-item-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--venue-slate);
    margin-bottom: 4px;
}

.venue-cost-item-value {
    font-size: 15px;
    font-weight: 800;
}

.venue-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.venue-detail-item-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--venue-slate);
    margin-bottom: 6px;
}

.venue-detail-item-value {
    font-size: 16px;
    font-weight: 700;
}

/* ===== Dashboard: hero, CTA banner, action feed ===== */

.venue-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 140% at 100% 0%, rgba(233, 106, 26, .35) 0%, transparent 45%), radial-gradient(120% 60% at 0% 0%, var(--venue-navy-2) 0%, var(--venue-navy) 60%);
    color: #fff;
    border-radius: 24px;
    padding: 32px 36px;
    margin-bottom: 20px;
}

.venue-hero-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--venue-orange-lt);
    margin-bottom: 10px;
}

.venue-hero-title {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.venue-hero-sub {
    margin: 10px 0 26px;
    font-size: 14px;
    color: #A9B4C4;
}

.venue-hero-stats {
    display: flex;
    gap: 14px;
}

.venue-hero-stat {
    display: block;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    padding: 14px 20px;
    text-decoration: none;
    min-width: 160px;
}

.venue-hero-stat-value {
    font-size: 24px;
    font-weight: 800;
}

.venue-hero-stat-orange {
    color: var(--venue-orange-lt);
}

.venue-hero-stat-green {
    color: #6FDDA8;
}

.venue-hero-stat-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #97A3B5;
    margin-top: 4px;
}

.venue-cta-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--venue-gradient);
    border-radius: 22px;
    padding: 22px 28px;
    margin-bottom: 32px;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 16px 32px rgba(233, 106, 26, .3);
}

.venue-cta-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.venue-cta-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.venue-cta-title {
    font-size: 19px;
    font-weight: 800;
}

.venue-cta-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, .85);
}

.venue-cta-arrow {
    font-size: 20px;
}

.venue-feed-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}

.venue-feed-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.venue-feed-sorted {
    font-size: 13px;
    color: var(--venue-slate);
}

.venue-feed-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.venue-feed-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--venue-cream);
    color: var(--venue-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.venue-feed-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--venue-navy);
}

.venue-feed-count-pill {
    background: var(--venue-cream);
    color: var(--venue-orange);
    font-size: 12px;
    font-weight: 800;
    border-radius: 999px;
    padding: 3px 10px;
}

.venue-feed-head-link {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--venue-navy);
    text-decoration: none;
}

.venue-feed-head-link:hover {
    color: var(--venue-orange);
}

.venue-feed-row {
    border: 1px solid var(--venue-border);
    border-radius: 16px;
    padding: 18px 20px;
    background: var(--venue-surface-2);
}

.venue-feed-row-badges {
    margin-bottom: 10px;
}

.venue-feed-view-link {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: var(--venue-navy);
    text-decoration: none;
    margin-top: 10px;
}

.venue-feed-row-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.venue-pill-urgent {
    background: var(--venue-red-bg);
    color: var(--venue-red);
}

.venue-btn-danger {
    background: var(--venue-red);
    color: #fff;
}

.venue-btn-success {
    background: var(--venue-green);
    color: #fff;
}

/* ===== All shifts table ===== */

.venue-flash {
    background: var(--venue-cream);
    color: var(--venue-navy);
    border-radius: 14px;
    padding: 13px 18px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
}

.venue-table-card {
    background: #fff;
    border-radius: 18px;
    overflow: auto;
    box-shadow: 0 1px 2px rgba(15, 28, 46, .05), 0 4px 10px rgba(15, 28, 46, .06);
}

.venue-table {
    min-width: 1040px;
}

.venue-table-head,
.venue-table-row {
    display: grid;
    grid-template-columns: 2.4fr 1.4fr .9fr .8fr 1fr 1.6fr;
    gap: 16px;
    align-items: center;
}

.venue-table-head {
    padding: 14px 24px;
    background: var(--venue-surface-2);
    border-bottom: 1px solid #F0EAE0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--venue-slate-lt);
}

.venue-table-actions-col {
    text-align: right;
}

.venue-table-row {
    padding: 18px 24px;
    border-bottom: 1px solid var(--venue-surface-3);
    transition: background .15s;
}

.venue-table-row:hover {
    background: #FCFAF6;
}

.venue-table-job {
    min-width: 0;
}

.venue-table-job-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.venue-table-job-role {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--venue-orange);
}

.venue-table-private {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 3px 8px;
    border-radius: 6px;
    background: #EDF0F4;
    color: var(--venue-navy);
}

.venue-table-job-title {
    font-size: 15px;
    font-weight: 800;
    margin-top: 3px;
}

.venue-table-job-ref {
    font-size: 12px;
    color: var(--venue-slate-lt);
    margin-top: 3px;
}

.venue-table-when {
    font-size: 13px;
    color: var(--venue-slate);
    font-weight: 600;
}

.venue-table-pay {
    font-size: 15px;
    font-weight: 800;
}

.venue-table-filled {
    font-size: 15px;
    font-weight: 800;
}

.venue-table-filled-none {
    color: var(--venue-red);
}

.venue-table-filled-partial {
    color: var(--venue-orange);
}

.venue-table-filled-full {
    color: var(--venue-green);
}

.venue-status-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 5px 10px;
    border-radius: 7px;
}

.venue-status-chip-open {
    background: var(--venue-cream);
    color: var(--venue-orange);
}

.venue-status-chip-confirmed {
    background: var(--venue-green-bg);
    color: var(--venue-green);
}

.venue-status-chip-fulfilled,
.venue-status-chip-expired {
    background: #EDF0F4;
    color: var(--venue-slate);
}

.venue-table-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.venue-row-btn {
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.venue-row-btn-primary {
    background: var(--venue-orange);
    color: #fff;
    padding: 9px 16px;
}

.venue-row-btn-primary:hover {
    filter: brightness(1.06);
    color: #fff;
}

.venue-row-btn-ghost {
    background: #fff;
    border-color: var(--venue-border-hard);
    color: var(--venue-slate);
}

.venue-row-btn-ghost:hover:not(.disabled) {
    border-color: var(--venue-orange);
    color: var(--venue-orange);
}

.venue-row-btn-dark {
    background: var(--venue-navy);
    color: #fff;
}

.venue-row-btn.disabled {
    opacity: .4;
    cursor: not-allowed;
}

.venue-table-empty {
    padding: 56px 24px;
    text-align: center;
}

.venue-table-empty-title {
    font-size: 19px;
    font-weight: 800;
}

.venue-table-empty-body {
    font-size: 14px;
    color: var(--venue-slate);
    margin-top: 6px;
}

/* ===== Shift detail ===== */

.venue-shift-detail {
    max-width: 1000px;
}

.venue-back-link {
    display: inline-block;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--venue-slate);
    padding: 0;
    margin-bottom: 16px;
    text-decoration: none;
}

.venue-back-link:hover {
    color: var(--venue-orange);
}

.venue-detail-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #E7DFD1;
    box-shadow: 0 1px 2px rgba(15, 28, 46, .05), 0 4px 10px rgba(15, 28, 46, .06);
    padding: 26px 30px;
    margin-bottom: 20px;
}

.venue-detail-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.venue-detail-title {
    margin: 8px 0 6px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.venue-detail-when {
    font-size: 14px;
    color: var(--venue-slate);
}

.venue-detail-ref {
    font-size: 13px;
    color: var(--venue-slate-lt);
    margin-top: 4px;
}

.venue-detail-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.venue-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #F0EAE0;
}

.venue-detail-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 22px;
}

.venue-detail-panel {
    background: var(--venue-surface-2);
    border-radius: 14px;
    padding: 18px;
}

.venue-detail-panel p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--venue-navy);
}

.venue-detail-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
}

/* Applications table on the shift detail page */

.venue-apps-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 28, 46, .05), 0 4px 10px rgba(15, 28, 46, .06);
}

.venue-apps-head {
    padding: 22px 26px 14px;
    font-size: 17px;
    font-weight: 800;
}

.venue-apps-table-head,
.venue-apps-row {
    display: grid;
    grid-template-columns: 2.2fr .8fr .8fr .8fr 1fr auto;
    gap: 18px;
    align-items: center;
}

.venue-apps-table-head {
    padding: 12px 26px;
    background: var(--venue-surface-2);
    border-top: 1px solid #F0EAE0;
    border-bottom: 1px solid #F0EAE0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--venue-slate-lt);
}

.venue-apps-row {
    padding: 15px 26px;
    border-bottom: 1px solid var(--venue-surface-3);
}

.venue-apps-row:hover {
    background: #FCFAF6;
}

.venue-apps-name {
    display: flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    min-width: 0;
}

.venue-apps-name-text {
    font-size: 15px;
    font-weight: 800;
    color: var(--venue-navy);
}

.venue-apps-name:hover .venue-apps-name-text {
    color: var(--venue-orange);
}

.venue-apps-recs {
    font-size: 15px;
    font-weight: 800;
    color: var(--venue-green);
}

.venue-apps-exp {
    font-size: 15px;
    font-weight: 700;
}

.venue-apps-dist {
    font-size: 15px;
    font-weight: 700;
    color: var(--venue-slate);
}

.venue-apps-decide {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.venue-app-status-pending {
    background: var(--venue-cream);
    color: var(--venue-orange);
}

.venue-app-status-accepted {
    background: var(--venue-green-bg);
    color: var(--venue-green);
}

.venue-app-status-declined,
.venue-app-status-closed {
    background: #EDF0F4;
    color: var(--venue-slate);
}

.venue-decline-button {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #E7B7B7;
    color: var(--venue-red);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    flex: 0 0 auto;
}

.venue-decline-button:hover {
    background: var(--venue-red-bg);
}

.venue-decline-button-lg {
    width: 52px;
    height: 52px;
    font-size: 18px;
}

/* ===== Transactions ===== */

.venue-transactions {
    max-width: 1000px;
}

.venue-credit-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.venue-credit-tile {
    background: #fff;
    border: 1px solid #E7DFD1;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15, 28, 46, .05), 0 4px 10px rgba(15, 28, 46, .06);
    padding: 24px;
}

.venue-credit-value {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.venue-credit-value-green {
    color: var(--venue-green);
}

.venue-credit-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--venue-slate);
    margin-top: 6px;
}

.venue-txn-row {
    display: grid;
    grid-template-columns: 2.4fr 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 16px 26px;
    border-bottom: 1px solid var(--venue-surface-3);
}

.venue-txn-row:last-child {
    border-bottom: none;
}

.venue-txn-row:hover {
    background: #FCFAF6;
}

.venue-txn-description {
    font-size: 15px;
    font-weight: 700;
}

/* ===== Transactions as separate cards =====
   Scoped to the transactions list so other pages using .venue-apps-card keep the flat divider
   list. The wrapper drops its own surface and each row becomes a card on the page background. */

.venue-txn-card-list {
    background: transparent;
    box-shadow: none;
    /* The wrapper clips by default, which would cut the per-card shadows. */
    overflow: visible;
}

.venue-txn-card-list .venue-apps-head {
    padding: 0 4px 14px;
}

.venue-txn-card-list .venue-txn-row,
.venue-txn-card-list .venue-table-empty {
    background: #fff;
    border: 1px solid var(--venue-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 28, 46, .05), 0 4px 10px rgba(15, 28, 46, .04);
    margin-bottom: 10px;
}

/* The base rule ends every row with a divider and strips it from the last one; as cards they use a
   full border instead, so both of those need overriding rather than inheriting. */
.venue-txn-card-list .venue-txn-row:last-child,
.venue-txn-card-list .venue-table-empty:last-child {
    margin-bottom: 0;
}

.venue-txn-card-list .venue-txn-row:hover {
    background: #FCFAF6;
    border-color: var(--venue-border-hard);
}

/* A grouped row carries a breakdown beneath the title, so it needs more vertical room than the
   single-line rows it sits alongside. */
.venue-txn-row-grouped {
    align-items: start;
    padding-top: 18px;
    padding-bottom: 18px;
}

.venue-txn-breakdown {
    margin-top: 10px;
    padding-left: 12px;
    border-left: 2px solid var(--venue-surface-3);
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 320px;
}

.venue-txn-breakdown-line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
    color: var(--venue-slate);
}

.venue-txn-breakdown-amount {
    font-variant-numeric: tabular-nums;
    color: var(--venue-slate-lt);
}

.venue-txn-date {
    font-size: 12px;
    color: var(--venue-slate-lt);
    margin-top: 4px;
}

.venue-txn-invoice {
    font-weight: 800;
    color: var(--venue-orange);
    text-decoration: none;
}

.venue-txn-invoice:hover {
    text-decoration: underline;
}

/* Invoice viewer */

.venue-invoice-page {
    max-width: 900px;
}

.venue-invoice-summary {
    margin-bottom: 20px;
}

.venue-invoice-frame-card {
    background: #fff;
    border: 1px solid var(--venue-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 28, 46, .05), 0 4px 10px rgba(15, 28, 46, .06);
}

.venue-invoice-frame {
    display: block;
    width: 100%;
    height: 1180px;
    border: 0;
}

/* Fallback path: if the invoice frame can't be printed on its own, printing the page strips the
   app chrome so the output is still just the invoice. */
@media print {
    .venue-sidebar,
    .venue-topbar,
    .venue-back-link,
    .venue-page-head,
    .venue-invoice-summary,
    .venue-flash,
    .venue-auth-error {
        display: none !important;
    }

    .venue-content {
        padding: 0;
        max-width: none;
    }

    .venue-invoice-frame-card {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .venue-invoice-frame {
        height: auto;
        min-height: 100vh;
    }
}

.venue-txn-type {
    font-size: 13px;
    color: var(--venue-slate);
    font-weight: 600;
}

.venue-txn-status-posted {
    background: var(--venue-green-bg);
    color: var(--venue-green);
}

.venue-txn-status-pending {
    background: var(--venue-cream);
    color: var(--venue-orange);
}

.venue-txn-amount {
    font-size: 16px;
    font-weight: 800;
    text-align: right;
    min-width: 96px;
}

.venue-txn-amount-in {
    color: var(--venue-green);
}

.venue-txn-amount-out {
    color: var(--venue-navy);
}

/* ===== Reporting ===== */

.venue-report-filters-label {
    color: var(--venue-orange);
    margin-bottom: 16px;
}

.venue-report-ranges {
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.venue-report-custom {
    margin-bottom: 4px;
}

.venue-report-role {
    max-width: 320px;
    margin-bottom: 0;
}

.venue-report-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.venue-report-tile {
    background: #fff;
    border: 1px solid #E7DFD1;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15, 28, 46, .05), 0 4px 10px rgba(15, 28, 46, .06);
    padding: 22px 24px;
}

.venue-report-tile-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--venue-slate-lt);
}

.venue-report-tile-value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.03em;
    margin-top: 8px;
    color: var(--venue-navy);
}

.venue-report-tile-green {
    color: var(--venue-green);
}

.venue-report-tile-orange {
    color: var(--venue-orange);
}

.venue-report-spend-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px 16px;
}

.venue-report-table-head,
.venue-report-row {
    display: grid;
    grid-template-columns: 2fr .8fr 1.1fr 1.1fr 1.1fr;
    gap: 16px;
    align-items: center;
}

.venue-report-table-head {
    padding: 12px 26px;
    background: var(--venue-surface-2);
    border-top: 1px solid #F0EAE0;
    border-bottom: 1px solid #F0EAE0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--venue-slate-lt);
}

.venue-report-total-col {
    text-align: right;
}

.venue-report-row {
    padding: 15px 26px;
    border-bottom: 1px solid var(--venue-surface-3);
}

.venue-report-row:last-child {
    border-bottom: none;
}

.venue-report-role-name {
    font-size: 15px;
    font-weight: 800;
}

.venue-report-role-jobs {
    font-size: 15px;
    font-weight: 600;
    color: var(--venue-slate);
}

.venue-report-role-paid {
    font-size: 15px;
    font-weight: 800;
    color: var(--venue-green);
}

.venue-report-role-fee {
    font-size: 15px;
    font-weight: 700;
    color: var(--venue-slate);
}

.venue-report-role-total {
    font-size: 15px;
    font-weight: 800;
}

@media (max-width: 980px) {
    .venue-credit-tiles,
    .venue-report-tiles {
        grid-template-columns: 1fr;
    }

    .venue-txn-row,
    .venue-report-table-head,
    .venue-report-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .venue-txn-amount,
    .venue-report-total-col {
        text-align: left;
    }
}

/* ===== Recommendations ===== */

.venue-recs-page {
    max-width: 860px;
}

.venue-recs-hero {
    padding: 32px;
    margin-bottom: 20px;
}

.venue-recs-hero-value {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.03em;
    margin-top: 8px;
}

.venue-recs-hero-meta {
    font-size: 14px;
    color: #9AA5B5;
    margin-top: 6px;
    line-height: 1.5;
}

.venue-recs-person-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--venue-surface-3);
}

.venue-recs-person-row:last-child {
    border-bottom: none;
}

.venue-recs-person-name {
    flex: 1 1 auto;
    font-size: 16px;
    font-weight: 800;
    min-width: 0;
}

.venue-recs-person-when {
    font-size: 13px;
    color: var(--venue-slate-lt);
    font-weight: 600;
}

/* ===== Favourites ===== */

.venue-fav-banner {
    background: var(--venue-cream);
    border-radius: 16px;
    padding: 18px 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--venue-navy);
    line-height: 1.5;
    margin-bottom: 20px;
}

.venue-fav-tabs {
    flex-wrap: wrap;
}

.venue-fav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
}

.venue-fav-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #E7DFD1;
    box-shadow: 0 1px 2px rgba(15, 28, 46, .05), 0 4px 10px rgba(15, 28, 46, .06);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.venue-fav-avatar {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    background: var(--venue-navy);
}

.venue-fav-text {
    flex: 1 1 auto;
    min-width: 0;
}

.venue-fav-name {
    font-size: 16px;
    font-weight: 800;
}

.venue-fav-meta {
    font-size: 13px;
    color: var(--venue-slate);
    margin-top: 3px;
}

.venue-fav-recs {
    font-size: 12px;
    font-weight: 700;
    color: var(--venue-green);
    margin-top: 5px;
}

@media (max-width: 620px) {
    .venue-fav-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Venue profile ===== */

.venue-profile {
    max-width: 1000px;
}

.venue-profile-incomplete {
    background: var(--venue-amber-bg);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.venue-profile-head-card {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 30px;
}

.venue-profile-avatar {
    width: 74px;
    height: 74px;
    flex: 0 0 74px;
    border-radius: 22px;
    background: var(--venue-navy);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 24px;
    font-weight: 800;
}

.venue-profile-view,
.venue-profile-edit {
    flex: 1 1 auto;
    min-width: 0;
}

.venue-profile-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.venue-profile-name {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.venue-profile-type {
    font-size: 15px;
    color: var(--venue-slate);
    margin-top: 5px;
}

.venue-profile-address {
    font-size: 14px;
    color: var(--venue-slate-lt);
    margin-top: 3px;
}

.venue-profile-company,
.venue-profile-contact {
    font-size: 13px;
    color: var(--venue-slate-lt);
    margin-top: 5px;
}

.venue-profile-name-input {
    font-size: 20px;
    font-weight: 800;
}

.venue-profile-section-label {
    margin-top: 6px;
}

.venue-postcode-row {
    display: flex;
    gap: 10px;
}

.venue-postcode-row .venue-input {
    flex: 1 1 auto;
}

.venue-address-picker {
    background: var(--venue-surface-2);
    border: 1px solid #EFE7D8;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.venue-address-option {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--venue-border);
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 14px;
    margin-top: 8px;
    cursor: pointer;
    color: var(--venue-navy);
}

.venue-address-option:hover {
    border-color: var(--venue-orange);
    color: var(--venue-orange);
}

.venue-profile-actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
    align-self: flex-start;
}

.venue-approval-approved {
    background: var(--venue-green-bg);
    color: var(--venue-green);
}

.venue-approval-pending {
    background: var(--venue-cream);
    color: var(--venue-orange);
}

.venue-approval-declined {
    background: var(--venue-red-bg);
    color: var(--venue-red);
}

.venue-approval-unknown {
    background: #EDF0F4;
    color: var(--venue-slate);
}

.venue-profile-ho-card {
    padding: 26px 30px;
}

.venue-profile-ho-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.venue-profile-ho-title {
    font-size: 18px;
    font-weight: 800;
}

.venue-profile-ho-body {
    margin-top: 20px;
    background: var(--venue-surface-2);
    border: 1px solid #EFE7D8;
    border-radius: 16px;
    padding: 22px;
}

.venue-profile-ho-label {
    font-size: 16px;
    font-weight: 800;
}

.venue-profile-ho-copy {
    font-size: 13px;
    color: var(--venue-slate);
    margin-top: 6px;
    line-height: 1.5;
}

.venue-profile-ho-code-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.venue-profile-ho-code {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .12em;
    background: #fff;
    border: 1px solid var(--venue-border);
    border-radius: 12px;
    padding: 12px 18px;
    color: var(--venue-navy);
}

.venue-profile-ho-meta {
    font-size: 12px;
    color: var(--venue-slate-lt);
    margin-top: 10px;
}

.venue-profile-ho-generate {
    margin-top: 16px;
}

.venue-profile-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.venue-profile-stat {
    display: block;
    background: #fff;
    border: 1px solid #E7DFD1;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15, 28, 46, .05), 0 4px 10px rgba(15, 28, 46, .06);
    padding: 24px;
    text-decoration: none;
    color: var(--venue-navy);
    transition: transform .18s, box-shadow .18s;
}

.venue-profile-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 28, 46, .1);
}

.venue-profile-stat-value {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.venue-profile-stat-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--venue-slate-lt);
    margin-top: 6px;
}

.venue-profile-settings-field {
    margin-top: 14px;
    margin-bottom: 0;
    max-width: 420px;
}

@media (max-width: 860px) {
    .venue-profile-head-card {
        flex-direction: column;
    }

    .venue-profile-stats {
        grid-template-columns: 1fr;
    }
}

/* ===== Notifications ===== */

.venue-notifications {
    max-width: 820px;
}

.venue-notif-row {
    width: 100%;
    text-align: left;
    border: none;
    cursor: pointer;
    display: flex;
    gap: 14px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--venue-surface-3);
    background: #fff;
}

.venue-notif-row:last-child {
    border-bottom: none;
}

.venue-notif-row.unread {
    background: #FFFDFA;
}

.venue-notif-row:hover {
    background: var(--venue-surface-2);
}

.venue-notif-glyph {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}

.venue-notif-row.read .venue-notif-glyph {
    opacity: .55;
}

.venue-notif-glyph-money {
    background: var(--venue-green);
}

.venue-notif-glyph-job {
    background: var(--venue-orange);
}

.venue-notif-glyph-venue {
    background: var(--venue-navy);
}

.venue-notif-text {
    flex: 1 1 auto;
    min-width: 0;
}

.venue-notif-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.venue-notif-title {
    font-size: 15px;
    font-weight: 800;
}

.venue-notif-row.read .venue-notif-title {
    font-weight: 600;
}

.venue-notif-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--venue-orange);
    flex: 0 0 auto;
}

.venue-notif-body {
    display: block;
    font-size: 13px;
    color: var(--venue-slate);
    margin-top: 3px;
    line-height: 1.45;
}

.venue-notif-time {
    display: block;
    font-size: 12px;
    color: var(--venue-slate-lt);
    margin-top: 4px;
}

.venue-notif-toggle-row {
    padding: 16px 24px;
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--venue-surface-3);
}

.venue-notif-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--venue-orange);
}

/* ===== Timesheets ===== */

.venue-ts-summary {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 20px;
}

.venue-ts-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 28px;
    margin-bottom: 0;
}

.venue-ts-hero-value {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.03em;
    margin-top: 6px;
    white-space: nowrap;
}

.venue-ts-hero-meta {
    font-size: 14px;
    color: #9AA5B5;
    margin-top: 4px;
}

.venue-ts-hero-badge {
    background: var(--venue-orange);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 800;
    flex: 0 0 auto;
}

.venue-ts-batch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 26px;
    margin-bottom: 0;
}

.venue-ts-batch-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--venue-slate-lt);
}

.venue-ts-batch-total {
    font-size: 30px;
    font-weight: 800;
    color: var(--venue-green);
    letter-spacing: -.03em;
    margin-top: 6px;
}

.venue-ts-batch-button {
    background: var(--venue-green);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 15px 26px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(47, 158, 106, .24);
}

.venue-ts-batch-button:hover:not(:disabled) {
    filter: brightness(1.06);
}

.venue-ts-batch-button:disabled {
    opacity: .45;
    cursor: default;
    box-shadow: none;
}

.venue-ts-group {
    margin-bottom: 22px;
}

.venue-ts-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 8px 4px 12px;
}

.venue-ts-group-month {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.venue-ts-group-summary {
    font-size: 14px;
    color: var(--venue-slate);
    font-weight: 700;
}

.venue-ts-row-wrap {
    border-bottom: 1px solid var(--venue-surface-3);
    background: #fff;
}

.venue-ts-row-wrap:last-child {
    border-bottom: none;
}

.venue-ts-row-wrap.selected {
    background: var(--venue-cream);
}

.venue-ts-row {
    display: grid;
    grid-template-columns: auto 1.5fr 2fr 1.5fr 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 18px 24px;
}

.venue-ts-check {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    border: 2px solid var(--venue-border-hard);
    background: #fff;
}

.venue-ts-check.on {
    border-color: var(--venue-orange);
    background: var(--venue-orange);
}

.venue-ts-check:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.venue-ts-person {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.venue-ts-shift-title {
    font-size: 14px;
    font-weight: 700;
}

.venue-ts-shift-date {
    font-size: 12px;
    color: var(--venue-slate);
    margin-top: 3px;
}

.venue-ts-shift-hours {
    font-size: 12px;
    color: var(--venue-slate-lt);
    margin-top: 2px;
}

.venue-ts-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.venue-ts-status-submitted {
    background: var(--venue-cream);
    color: var(--venue-orange);
}

.venue-ts-status-approved {
    background: var(--venue-green-bg);
    color: var(--venue-green);
}

.venue-ts-status-rejected {
    background: var(--venue-red-bg);
    color: var(--venue-red);
}

/* Amber rather than grey: hours are outstanding and it needs chasing, but the action sits with
   the staff member - distinct from the orange "Submitted" chip, which needs the venue to act. */
.venue-ts-status-awaiting {
    background: var(--venue-amber-bg);
    color: #B4780F;
}

.venue-ts-awaiting-chip {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 4px 9px;
    border-radius: 7px;
    background: var(--venue-amber-bg);
    color: #B4780F;
}

.venue-ts-pay-paid {
    background: var(--venue-green-bg);
    color: var(--venue-green);
}

.venue-ts-pay-awaiting-parent {
    background: var(--venue-amber-bg);
    color: #B4780F;
}

.venue-ts-pay-neutral {
    background: #F3F0EA;
    color: var(--venue-slate);
}

.venue-ts-amount {
    font-size: 18px;
    font-weight: 800;
    text-align: right;
}

.venue-ts-amount-paid {
    color: var(--venue-green);
}

.venue-ts-amount-awaiting-parent {
    color: #B4780F;
}

.venue-ts-amount-neutral {
    color: var(--venue-orange);
}

.venue-ts-warning {
    margin: 0 24px 18px;
    background: var(--venue-amber-bg);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.venue-ts-warning-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 4px 9px;
    border-radius: 6px;
    background: var(--venue-amber);
    color: #fff;
    white-space: nowrap;
}

.venue-ts-warning-text {
    font-size: 13px;
    color: var(--venue-slate);
    font-weight: 600;
}

/* Timesheet detail */

.venue-ts-detail-head {
    display: flex;
    align-items: center;
    gap: 18px;
}

.venue-ts-detail-avatar {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    background: var(--venue-navy);
}

.venue-ts-detail-title {
    margin: 0;
}

.venue-ts-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.venue-ts-detail-stats {
    margin: 22px 0 0;
}

.venue-ts-hours-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 22px 0 14px;
}

.venue-ts-cost-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    background: var(--venue-surface-2);
    border: 1px solid var(--venue-border);
    border-radius: 14px;
    padding: 16px 18px;
}

.venue-ts-cost-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--venue-slate-lt);
}

.venue-ts-cost-value {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-top: 5px;
}

.venue-ts-cost-total .venue-ts-cost-label {
    color: var(--venue-slate);
}

.venue-ts-cost-total .venue-ts-cost-value {
    color: var(--venue-navy);
}

.venue-ts-cost-hint {
    margin-top: 8px;
}

@media (max-width: 620px) {
    .venue-ts-hours-stats,
    .venue-ts-cost-strip {
        grid-template-columns: 1fr;
    }
}

.venue-ts-detail-lines {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.venue-ts-detail-line-strong {
    font-size: 14px;
    color: var(--venue-navy);
    font-weight: 700;
}

.venue-ts-detail-line {
    font-size: 13px;
    color: var(--venue-slate);
}

.venue-ts-detail-line-faint {
    font-size: 13px;
    color: var(--venue-slate-lt);
}

.venue-ts-detail-warning {
    margin: 16px 0 0;
}

.venue-ts-decide {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #F0EAE0;
}

.venue-ts-decide-error {
    margin-top: 12px;
}

.venue-ts-decide-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.venue-ts-paid-row {
    margin-top: 18px;
}

.venue-ts-approve-button {
    flex: 1 1 auto;
    background: var(--venue-green);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 15px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.venue-ts-approve-button:hover:not(:disabled) {
    filter: brightness(1.06);
}

.venue-ts-approve-button:disabled {
    opacity: .6;
    cursor: default;
}

@media (max-width: 980px) {
    .venue-ts-summary,
    .venue-ts-row {
        grid-template-columns: 1fr;
    }

    .venue-ts-amount {
        text-align: left;
    }
}

/* ===== Compare applicants ===== */

.venue-scope-banner {
    background: var(--venue-cream);
    border-radius: 14px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.venue-scope-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--venue-orange);
}

.venue-scope-clear {
    background: #fff;
    border: 1px solid #E0CDB8;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    color: var(--venue-orange);
    text-decoration: none;
}

.venue-compare-empty {
    padding: 48px;
    text-align: center;
}

.venue-compare-group {
    margin-bottom: 20px;
}

.venue-compare-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 26px 16px;
}

.venue-compare-group-title {
    font-size: 18px;
    font-weight: 800;
}

.venue-compare-group-meta {
    font-size: 13px;
    color: var(--venue-slate);
    margin-top: 4px;
}

.venue-compare-table-head,
.venue-compare-row {
    display: grid;
    grid-template-columns: 2.4fr .8fr .8fr .8fr 1fr auto;
    gap: 18px;
    align-items: center;
}

.venue-compare-table-head {
    padding: 12px 26px;
    background: var(--venue-surface-2);
    border-top: 1px solid #F0EAE0;
    border-bottom: 1px solid #F0EAE0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--venue-slate-lt);
}

.venue-compare-row {
    padding: 15px 26px;
    border-bottom: 1px solid var(--venue-surface-3);
}

.venue-compare-row:last-child {
    border-bottom: none;
}

.venue-compare-row:hover {
    background: #FCFAF6;
}

.venue-compare-name {
    display: flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    min-width: 0;
}

.venue-compare-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    background: var(--venue-navy);
}

.venue-compare-name-text {
    font-size: 15px;
    font-weight: 800;
    color: var(--venue-navy);
}

.venue-compare-name:hover .venue-compare-name-text {
    color: var(--venue-orange);
}

.venue-compare-avail {
    font-size: 13px;
    font-weight: 700;
}

.venue-compare-avail.available {
    color: var(--venue-green);
}

/* A pending application on an overlapping shift is a heads-up, not a hard clash. */
.venue-compare-avail.also-applied {
    color: #B4780F;
}

.venue-compare-avail.booked {
    color: var(--venue-red);
}

.venue-compare-accept {
    background: var(--venue-green);
    color: #fff;
    border: none;
    padding: 9px 20px;
}

.venue-compare-accept:hover:not(:disabled) {
    filter: brightness(1.08);
}

.venue-compare-accept:disabled {
    opacity: .5;
    cursor: default;
}

@media (max-width: 980px) {
    .venue-compare-table-head {
        display: none;
    }

    .venue-compare-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ===== Past staff ===== */

.venue-past-row {
    display: grid;
    grid-template-columns: 2fr 1.4fr auto auto;
    gap: 20px;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--venue-surface-3);
}

.venue-past-row:last-child {
    border-bottom: none;
}

.venue-past-row:hover {
    background: #FCFAF6;
}

.venue-past-person {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.venue-past-avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    background: var(--venue-navy);
}

.venue-past-person-text {
    min-width: 0;
}

.venue-past-name {
    display: block;
    font-size: 16px;
    font-weight: 800;
}

.venue-past-meta {
    display: block;
    font-size: 13px;
    color: var(--venue-slate);
    margin-top: 3px;
}

.venue-past-last {
    font-size: 13px;
    color: var(--venue-slate-lt);
    font-weight: 600;
}

.venue-past-fav {
    background: #fff;
    border: 1px solid var(--venue-border-hard);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    color: var(--venue-navy);
    white-space: nowrap;
}

.venue-past-fav:hover:not(:disabled) {
    border-color: var(--venue-orange);
    color: var(--venue-orange);
}

.venue-past-fav.done {
    background: var(--venue-cream);
    color: var(--venue-orange);
    cursor: default;
}

.venue-past-rec {
    background: var(--venue-green);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.venue-past-rec:hover:not(:disabled) {
    filter: brightness(1.06);
}

.venue-past-rec.done {
    opacity: .6;
    cursor: default;
}

.venue-past-fav:disabled:not(.done),
.venue-past-rec:disabled:not(.done) {
    opacity: .45;
    cursor: not-allowed;
}

@media (max-width: 860px) {
    .venue-past-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ===== Applicant review ===== */

.venue-applicant-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.venue-pager {
    display: flex;
    align-items: center;
    gap: 10px;
}

.venue-pager-button {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--venue-border-hard);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--venue-navy);
}

.venue-pager-button:disabled {
    opacity: .4;
    cursor: default;
}

.venue-pager-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--venue-slate);
}

.venue-applicant-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 22px;
    align-items: start;
}

.venue-applicant-head {
    display: flex;
    align-items: center;
    gap: 20px;
}

.venue-applicant-avatar {
    width: 78px;
    height: 78px;
    flex: 0 0 78px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    background: var(--venue-navy);
}

.venue-applicant-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.venue-applicant-name {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.venue-applicant-sub {
    font-size: 14px;
    color: var(--venue-slate);
    margin-top: 5px;
}

.venue-applicant-sub-faint {
    font-size: 13px;
    color: var(--venue-slate-lt);
    margin-top: 3px;
}

.venue-verifications {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.venue-verification {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 800;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--venue-green-bg);
    color: var(--venue-green);
}

.venue-chef-note {
    margin-top: 12px;
    background: var(--venue-amber-bg);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #B4780F;
}

.venue-applicant-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 22px 0;
}

.venue-applicant-stat {
    background: var(--venue-surface-2);
    border-radius: 14px;
    padding: 18px;
}

.venue-applicant-stat-value {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.venue-applicant-stat-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--venue-slate-lt);
    margin-top: 4px;
}

.venue-applicant-note {
    background: var(--venue-surface-2);
    border-radius: 14px;
    padding: 16px 18px;
    font-size: 14px;
    color: var(--venue-navy);
    line-height: 1.5;
}

.venue-decide-row {
    display: flex;
    gap: 12px;
    margin-top: 22px;
}

.venue-accept-button {
    flex: 1 1 auto;
    background: var(--venue-orange);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 16px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(233, 106, 26, .24);
}

.venue-accept-button:hover {
    filter: brightness(1.06);
}

.venue-decided-note {
    margin-top: 22px;
    background: #EDF0F4;
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--venue-slate);
}

.venue-applicant-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.venue-applicant-side-card {
    padding: 22px;
    margin-bottom: 0;
}

.venue-applicant-card-copy {
    font-size: 13px;
    color: var(--venue-slate);
    line-height: 1.5;
    margin-bottom: 14px;
}

.venue-experience-card {
    padding: 30px;
}

.venue-experience-empty {
    margin-top: 16px;
    margin-bottom: 0;
}

.venue-timeline {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
}

.venue-timeline-row {
    display: flex;
    gap: 16px;
}

.venue-timeline-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 12px;
}

.venue-timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--venue-border-hard);
}

.venue-timeline-dot.current {
    background: var(--venue-orange);
}

.venue-timeline-line {
    flex: 1 1 auto;
    width: 2px;
    background: #EFE9DF;
}

.venue-timeline-row:last-child .venue-timeline-line {
    background: transparent;
}

.venue-timeline-body {
    padding-bottom: 24px;
}

.venue-timeline-venue-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.venue-timeline-venue {
    font-size: 16px;
    font-weight: 800;
}

.venue-timeline-current {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--venue-cream);
    color: var(--venue-orange);
}

.venue-timeline-role {
    font-size: 14px;
    color: var(--venue-slate);
    margin-top: 4px;
}

.venue-timeline-dates {
    font-size: 13px;
    color: var(--venue-slate-lt);
    margin-top: 3px;
}

.venue-recs-heading {
    margin-top: 8px;
}

.venue-recs-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.venue-recs-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.venue-recs-venue {
    font-weight: 700;
}

.venue-recs-date {
    margin-left: auto;
    font-size: 12px;
    color: var(--venue-slate-lt);
}

@media (max-width: 980px) {
    .venue-applicant-grid,
    .venue-applicant-cards,
    .venue-detail-panels {
        grid-template-columns: 1fr;
    }

    .venue-detail-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Confirm modal ===== */

.venue-modal-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 28, 46, .45);
    display: grid;
    place-items: center;
    padding: 24px;
    z-index: 1000;
}

.venue-modal {
    background: #fff;
    border-radius: 20px;
    padding: 26px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 20px 44px rgba(15, 28, 46, .24);
}

.venue-modal-title {
    font-size: 19px;
    font-weight: 800;
}

.venue-modal-body {
    font-size: 14px;
    color: var(--venue-slate);
    margin-top: 8px;
    line-height: 1.5;
}

.venue-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.venue-modal-sub {
    font-size: 13px;
    color: var(--venue-slate);
    margin-top: 6px;
    line-height: 1.5;
}

.venue-modal-primary {
    flex: 1 1 auto;
}

/* ===== Team & access (venue profile) ===== */

.venue-team-card {
    padding-bottom: 0;
}

/* The first member row's border-top doubles as the divider under the header. Without this it butts
   straight up against the title and the Invite button; the padding drops it clear of both. */
.venue-team-card .venue-profile-ho-head {
    padding-bottom: 18px;
}

.venue-team-empty {
    padding: 18px 0 24px;
    font-size: 14px;
    color: var(--venue-slate);
}

.venue-team-row {
    width: 100%;
    text-align: left;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border: none;
    border-top: 1px solid var(--venue-border, #E3DCD0);
    cursor: pointer;
}

.venue-team-row:hover {
    background: #FCFAF6;
}

.venue-team-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    background: var(--venue-navy, #0F1C2E);
}

.venue-team-main {
    flex: 1 1 auto;
    min-width: 0;
}

.venue-team-name {
    display: block;
    font-size: 16px;
    font-weight: 800;
}

.venue-team-pending {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--venue-orange, #E96A1A);
    background: #FBEFE4;
    vertical-align: middle;
}

.venue-team-role {
    display: block;
    font-size: 13px;
    color: var(--venue-slate);
    margin-top: 3px;
}

.venue-team-chevron {
    font-size: 20px;
    color: var(--venue-slate-lt, #9AA5B5);
}

.venue-team-modal {
    max-width: 520px;
    max-height: 88vh;
    overflow-y: auto;
}

.venue-team-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.venue-team-admin-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    cursor: pointer;
}

.venue-team-admin-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.venue-team-section-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--venue-slate);
    margin-top: 20px;
    margin-bottom: 10px;
}

.venue-team-hint {
    display: block;
    margin: -4px 0 10px;
}

.venue-team-chip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* The role catalog is long, so it scrolls inside the dialog rather than pushing the
   save button off the bottom. */
.venue-team-role-grid {
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
}

.venue-team-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    border: 1px solid var(--venue-border, #E3DCD0);
    background: #fff;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--venue-navy, #0F1C2E);
}

.venue-team-chip.selected {
    border-color: var(--venue-orange, #E96A1A);
    background: #FBEFE4;
}

.venue-team-chip-box {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: #fff;
    border: 2px solid #DDD6CA;
}

.venue-team-chip.selected .venue-team-chip-box {
    background: var(--venue-orange, #E96A1A);
    border-color: var(--venue-orange, #E96A1A);
}

.venue-team-clear,
.venue-team-action {
    width: 100%;
    margin-top: 10px;
}

.venue-team-remove {
    color: var(--venue-red, #D94F4F);
}

@media (max-width: 640px) {
    .venue-team-chip-grid {
        grid-template-columns: 1fr;
    }
}

.venue-notfound {
    padding: 80px 40px;
    text-align: center;
}

code {
    color: #c02d76;
}