/* Shared VfB back-office skin. This loads after isolated component styles so
   the administration keeps one clear visual hierarchy across all pages. */
.ui-shell {
    color: var(--ui-text);
}

.ui-shell .ui-content > * {
    width: 100%;
}

.ui-shell .card-elevated {
    border: 1px solid var(--ui-border-strong);
    border-top: 4px solid var(--club-primary);
    border-radius: 12px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-md);
}

.ui-shell .ui-content section[class*="-card"],
.ui-shell .ui-content article[class*="-card"],
.ui-shell .ui-content div[class*="-card"] {
    border-color: var(--ui-border-strong);
    box-shadow: 0 2px 7px rgba(22, 58, 112, 0.1);
}

.ui-shell .ui-content [class*="-section-head"],
.ui-shell .ui-content [class*="-header"] {
    border-color: var(--ui-border);
}

.ui-shell .ui-content [class*="-section-head"] h2,
.ui-shell .ui-content [class*="-section-head"] h3 {
    color: var(--club-primary-dark);
}

.ui-shell .ui-content h1,
.ui-shell .ui-content h2,
.ui-shell .ui-content h3 {
    color: var(--club-primary-dark);
    font-weight: 700;
}

.ui-shell .form-control,
.ui-shell .form-select,
.ui-shell .input-group-text {
    border-color: var(--ui-border-strong);
    background-color: #ffffff;
}

.ui-shell .form-control:hover,
.ui-shell .form-select:hover {
    border-color: #7e9abc;
}

.ui-shell .form-control:focus,
.ui-shell .form-select:focus {
    border-color: var(--club-primary);
    box-shadow: 0 0 0 3px rgba(34, 85, 170, 0.16);
}

.ui-shell .btn-primary {
    --bs-btn-bg: #2255aa;
    --bs-btn-border-color: #2255aa;
    --bs-btn-hover-bg: #163a70;
    --bs-btn-hover-border-color: #163a70;
    box-shadow: 0 2px 6px rgba(22, 58, 112, 0.2);
}

.ui-shell .btn-outline-primary {
    --bs-btn-color: #2255aa;
    --bs-btn-border-color: #6e92d9;
    --bs-btn-hover-bg: #2255aa;
    --bs-btn-hover-border-color: #2255aa;
}

.ui-shell .table-responsive {
    border: 1px solid var(--ui-border-strong);
    border-radius: 9px;
    background: #ffffff;
}

.ui-shell .table {
    margin-bottom: 0;
}

.ui-shell .table thead th {
    border-bottom: 2px solid #8ea7c2;
    background: #e8f0fa;
    color: var(--club-primary-dark);
}

.ui-shell .table tbody tr:nth-child(even) > * {
    background-color: #f7f9fc;
}

.ui-shell .alert {
    border-width: 1px 1px 1px 4px;
    box-shadow: 0 2px 6px rgba(31, 41, 55, 0.07);
}

.ui-shell .modal-content,
.ui-shell .dropdown-menu,
.ui-shell .accordion-item,
.ui-shell .list-group-item {
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-sm);
}

.ui-shell .text-muted {
    color: var(--ui-text-muted) !important;
}

/* The operational start page needs especially clear, glanceable blocks on a
   tablet behind the bar. */
.ui-shell .today-summary-card {
    border: 1px solid #aebfd1;
    border-top: 3px solid #6e92d9;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(22, 58, 112, 0.11);
}

.ui-shell .today-summary-card--highlight {
    border-color: #e0bf25;
    border-top-color: var(--club-accent);
    background: #fffbea;
}

.ui-shell .today-reservations {
    border: 1px solid #9fb3c9;
    box-shadow: var(--ui-shadow-md);
}

.ui-shell .today-section-header {
    border-bottom: 4px solid var(--club-accent);
    background: var(--club-primary-dark);
}

.ui-shell .today-section-header h2,
.ui-shell .today-section-header span {
    color: #ffffff;
}

.ui-shell .today-add-link {
    border-color: var(--club-accent);
    background: var(--club-accent);
    color: var(--club-primary-dark);
}

.ui-shell .today-add-link:hover {
    border-color: #ffe76d;
    background: #ffe76d;
    color: var(--club-primary-dark);
}

.ui-shell .today-manage-link {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.ui-shell .today-reservation-card {
    border-bottom-color: #cbd7e4;
    background: #ffffff;
}

.ui-shell .today-reservation-card:nth-child(even) {
    background: #f7f9fc;
}

.ui-shell .today-reservation-card:hover {
    background: #edf4fc;
}

/* Reservation administration uses a strong left accent to separate nested
   panels from the page container without wasting vertical space. */
.ui-shell .reservation-admin-card {
    border: 1px solid #aebfd1;
    border-left: 4px solid #6e92d9;
    background: #ffffff;
    box-shadow: 0 3px 9px rgba(22, 58, 112, 0.09);
}

.ui-shell .reservation-admin-editor {
    border-left-color: var(--club-accent);
    background: #fffdf4;
}

.ui-shell .reservation-admin-day {
    background: #f5f8fc;
}

.ui-shell .reservation-admin-list-card {
    border-color: #c3d0de;
    background: #ffffff;
}

.ui-shell .reservation-admin-section-toggle {
    color: var(--club-primary-dark);
}

@media (max-width: 768px) {
    .ui-shell .ui-content {
        padding: .75rem;
    }

    .ui-shell .card-elevated {
        border-radius: 10px;
    }
}