/* ============================================================
   SINC SPORTS - Shared UI Component Library
   Reusable styles for modernized pages: layout, cards, forms,
   tables, toggles, task cards, buttons, badges, and more.
   All new/redesigned pages should reference this file.
   DO NOT create per-page CSS files - add components here.
   ============================================================ */

/* ---------- CSS Custom Properties ---------- */
:root {
    --setup-primary: #0f172a;
    --setup-primary-light: #1e293b;
    --setup-accent: #5cb830;
    --setup-accent-hover: #4a9e28;
    --setup-accent-glow: rgba(92, 184, 48, 0.25);
    --setup-success: #5cb830;
    --setup-success-light: #e8f5e0;
    --setup-warning: #f97316;
    --setup-warning-light: #fff7ed;
    --setup-danger: #dc2626;
    --setup-danger-light: #fee2e2;
    --setup-blue: #3b82f6;
    --setup-blue-light: #eff6ff;
    --setup-bg: #fefdf8;
    --setup-ground: #eef1f5; /* app-page ground behind white cards (cream is only 1.02:1 vs white) */
    --setup-card: #ffffff;
    --setup-card-hover: #fafbfc;
    --setup-border: #e2e8f0;
    --setup-border-light: #f1f5f9;
    --setup-text: #1e293b;
    --setup-text-secondary: #64748b;
    --setup-text-muted: #94a3b8;
    --setup-input-bg: #f8fafc;
    --setup-input-focus: #e8f5e0;
    --setup-radius: 12px;
    --setup-radius-sm: 8px;
    --setup-radius-lg: 16px;
    --setup-shadow: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    --setup-shadow-md: 0 4px 12px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
    --setup-shadow-lg: 0 10px 30px rgba(15,23,42,0.10), 0 4px 8px rgba(15,23,42,0.06);
    --setup-transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    --setup-font: 'DM Sans', 'Inter', system-ui, sans-serif;
    --setup-font-heading: 'Outfit', 'Poppins', system-ui, sans-serif;
}

/* ---------- BS5 Grid Gutter & Gap Utilities ---------- */
/* The master page loads BS4 via all.css. These BS5-only utilities
   are needed by modernised pages but are not in BS4. */
.row.g-2 { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; margin-right: calc(var(--bs-gutter-x) * -0.5); margin-left: calc(var(--bs-gutter-x) * -0.5); }
.row.g-2 > * { padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-top: var(--bs-gutter-y); }
.row.g-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; margin-right: calc(var(--bs-gutter-x) * -0.5); margin-left: calc(var(--bs-gutter-x) * -0.5); }
.row.g-3 > * { padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-top: var(--bs-gutter-y); }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }

/* ---------- Base Container ---------- */
.setup-wrapper {
    font-family: var(--setup-font);
    color: var(--setup-text);
    min-height: 600px;
    padding: 0;
    margin: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Page Header ---------- */
.setup-header {
    background: linear-gradient(135deg, var(--setup-primary) 0%, var(--setup-primary-light) 50%, #1a3048 100%);
    padding: 28px 32px 24px;
    border-radius: var(--setup-radius-lg);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--setup-shadow-md);
}
.setup-header::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -5%;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(92,184,48,0.12) 0%, transparent 70%);
    border-radius: 50%;
}
.setup-header::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: 15%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(92,184,48,0.06) 0%, transparent 70%);
    border-radius: 50%;
}
.setup-header h1 {
    color: #ffffff;
    font-family: var(--setup-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 4px;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}
.setup-header .setup-subtitle {
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    font-weight: 400;
    margin: 0;
    position: relative;
    z-index: 1;
}
.setup-header .setup-meta {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    position: relative;
    z-index: 1;
}
.setup-header .setup-meta .badge-meta {
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.12);
}

/* ---------- Stepper Navigation ---------- */
.setup-stepper {
    display: flex;
    align-items: flex-start;
    padding: 0 8px;
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 4px;
}
.setup-stepper::-webkit-scrollbar {
    display: none;
}
.setup-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 80px;
    cursor: pointer;
    position: relative;
    padding: 8px 4px;
    transition: var(--setup-transition);
}
.setup-step-item::after {
    content: '';
    position: absolute;
    top: 22px;
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
    height: 2px;
    background: var(--setup-border);
    transition: var(--setup-transition);
}
.setup-step-item:last-child::after {
    display: none;
}
.setup-step-item.completed::after {
    background: var(--setup-success);
}
.setup-step-item.active::after {
    background: var(--setup-accent);
}
.setup-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 6px;
    transition: var(--setup-transition);
    position: relative;
    z-index: 2;
    border: 2px solid var(--setup-border);
    background: var(--setup-card);
    color: var(--setup-text-muted);
}
.setup-step-item.active .setup-step-circle {
    background: var(--setup-accent);
    border-color: var(--setup-accent);
    color: #ffffff;
    box-shadow: 0 0 0 4px var(--setup-accent-glow);
}
.setup-step-item.completed .setup-step-circle {
    background: var(--setup-success);
    border-color: var(--setup-success);
    color: #ffffff;
}
.setup-step-item:hover:not(.active) .setup-step-circle {
    border-color: var(--setup-accent);
    color: var(--setup-accent);
}
.setup-step-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--setup-text-muted);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    transition: var(--setup-transition);
}
.setup-step-item.active .setup-step-label {
    color: var(--setup-accent);
}
.setup-step-item.completed .setup-step-label {
    color: var(--setup-success);
}
.setup-step-item:hover .setup-step-label {
    color: var(--setup-text);
}

/* ---------- Step Panels ---------- */
.setup-panel {
    display: none;
    animation: setupFadeIn 0.35s ease-out;
}
.setup-panel.active {
    display: block;
}
@keyframes setupFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Cards ---------- */
.setup-card {
    background: var(--setup-card);
    border-radius: var(--setup-radius-lg);
    border: 1px solid var(--setup-border-light);
    box-shadow: var(--setup-shadow);
    margin-bottom: 20px;
    overflow: hidden;
    transition: var(--setup-transition);
}
.setup-card:hover {
    box-shadow: var(--setup-shadow-md);
}
.setup-card-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--setup-border-light);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--setup-card);
}
.setup-card-header .card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--setup-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.setup-card-header .card-icon.icon-blue {
    background: var(--setup-blue-light);
    color: var(--setup-blue);
}
.setup-card-header .card-icon.icon-green {
    background: var(--setup-success-light);
    color: var(--setup-accent);
}
.setup-card-header .card-icon.icon-amber {
    background: #fef3c7;
    color: #d97706;
}
.setup-card-header .card-icon.icon-purple {
    background: #ede9fe;
    color: #7c3aed;
}
.setup-card-header .card-icon.icon-rose {
    background: #ffe4e6;
    color: #e11d48;
}
.setup-card-header .card-icon.icon-teal {
    background: #ccfbf1;
    color: #0d9488;
}
.setup-card-header .card-icon.icon-indigo {
    background: #e0e7ff;
    color: #4f46e5;
}
.setup-card-header .card-icon.icon-slate {
    background: #e2e8f0;
    color: #475569;
}
.setup-card-header h3 {
    font-family: var(--setup-font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    color: var(--setup-text);
}
.setup-card-header p {
    font-size: 0.82rem;
    color: var(--setup-text-secondary);
    margin: 2px 0 0;
}
.setup-card-body {
    padding: 24px;
}

/* ---------- Sub-sections inside cards ---------- */
.setup-subsection {
    border: 1px solid var(--setup-border-light);
    border-radius: var(--setup-radius);
    padding: 16px 20px;
    margin-bottom: 16px;
    background: var(--setup-input-bg);
    transition: var(--setup-transition);
}
.setup-subsection:last-child {
    margin-bottom: 0;
}
.setup-subsection.collapsed .subsection-body {
    display: none;
}
.setup-subsection-header {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.setup-subsection-header .form-check {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.setup-subsection-header h5 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--setup-text);
    margin: 0;
    flex: 1;
}
.setup-subsection-header .toggle-icon {
    color: var(--setup-text-muted);
    transition: transform 0.2s ease;
    font-size: 1.1rem;
}
.setup-subsection.collapsed .toggle-icon {
    transform: rotate(-90deg);
}
.subsection-body {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--setup-border-light);
}

/* ---------- Form Controls ---------- */
.setup-wrapper .form-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--setup-text-secondary);
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}
.setup-wrapper .form-control,
.setup-wrapper .form-select {
    font-family: var(--setup-font);
    font-size: 0.875rem;
    border: 1.5px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    padding: 8px 12px;
    color: var(--setup-text);
    transition: var(--setup-transition);
    box-shadow: none;
}
.setup-wrapper .form-control:focus,
.setup-wrapper .form-select:focus {
    border-color: var(--setup-accent);
    background: var(--setup-input-focus);
    box-shadow: 0 0 0 3px rgba(92,184,48,0.15);
    outline: none;
}
.setup-wrapper .form-control::placeholder {
    color: var(--setup-text-muted);
    font-weight: 400;
}

/* Input groups with currency */
.setup-wrapper .input-group-text {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 8px 12px;
    background: var(--setup-input-bg);
    border: 1.5px solid var(--setup-border);
    color: var(--setup-text-secondary);
    border-radius: var(--setup-radius-sm) 0 0 var(--setup-radius-sm);
    line-height: 1.5;
}
.setup-wrapper .input-group {
    display: flex;
    align-items: stretch;
}
.setup-wrapper .input-group .form-control {
    border-left: 0;
    height: auto;
    margin: 0;
}

/* ---- ASP.NET CheckBox Fix ---- */
.setup-wrapper span.form-check-input {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 0;
    vertical-align: middle;
    cursor: pointer;
}
.setup-wrapper span.form-check-input > label {
    display: none;
}

/* --- Toggle switches (form-switch context) --- */
.setup-wrapper .form-switch span.form-check-input > input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 2.4em;
    height: 1.3em;
    border-radius: 2em;
    border: 1.5px solid var(--setup-border);
    background-color: var(--setup-input-bg);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238694a5'/%3e%3c/svg%3e");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    margin: 0;
    transition: var(--setup-transition);
    flex-shrink: 0;
}
.setup-wrapper .form-switch span.form-check-input > input[type="checkbox"]:checked {
    background-color: var(--setup-accent);
    border-color: var(--setup-accent);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-position: right center;
}
.setup-wrapper .form-switch span.form-check-input > input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px rgba(92,184,48,0.2);
    border-color: var(--setup-accent);
    outline: none;
}
.setup-wrapper .form-switch .form-check-label {
    font-size: 0.875rem;
    color: var(--setup-text);
    cursor: pointer;
    padding-top: 1px;
}

/* --- Standard checkboxes (setup-check context) --- */
.setup-check span.form-check-input > input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--setup-border);
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    transition: var(--setup-transition);
    position: relative;
}
.setup-check span.form-check-input > input[type="checkbox"]:checked {
    background-color: var(--setup-accent);
    border-color: var(--setup-accent);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23fff' d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3e%3c/svg%3e");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}
.setup-check span.form-check-input > input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px rgba(92,184,48,0.18);
    border-color: var(--setup-accent);
    outline: none;
}
.setup-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    min-height: auto;
}
.setup-check .form-check-label {
    font-size: 0.875rem;
    color: var(--setup-text);
    cursor: pointer;
    line-height: 1;
    margin: 0;
    padding: 0;
}

/* --- Fallback: any remaining uncovered checkboxes --- */
.setup-wrapper input[type="checkbox"] {
    accent-color: var(--setup-accent);
    cursor: pointer;
}

/* ---------- Feature Toggle Rows ---------- */
.feature-toggle {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: var(--setup-radius-sm);
    transition: var(--setup-transition);
    gap: 12px;
    border: 1px solid transparent;
}
.feature-toggle:hover {
    background: var(--setup-input-bg);
    border-color: var(--setup-border-light);
}
.feature-toggle .form-check {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.feature-toggle .toggle-content {
    flex: 1;
}
.feature-toggle .toggle-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--setup-text);
    margin-bottom: 1px;
}
.feature-toggle .toggle-desc {
    font-size: 0.78rem;
    color: var(--setup-text-muted);
    line-height: 1.4;
}
.feature-toggle .toggle-expand {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--setup-border-light);
}
.feature-toggle.expanded .toggle-expand {
    display: block;
}

/* ---------- Data Tables ---------- */
.setup-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}
.setup-table thead th {
    background: var(--setup-input-bg);
    color: var(--setup-text-secondary);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 14px;
    border-bottom: 2px solid var(--setup-border);
    white-space: nowrap;
}
.setup-table thead th:first-child {
    border-radius: var(--setup-radius-sm) 0 0 0;
}
.setup-table thead th:last-child {
    border-radius: 0 var(--setup-radius-sm) 0 0;
}
.setup-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--setup-border-light);
    vertical-align: middle;
    color: var(--setup-text);
}
.setup-table tbody tr:hover {
    background: var(--setup-card-hover);
}
.setup-table tbody tr:last-child td {
    border-bottom: none;
}
.setup-table tbody tr.fee-editing {
    background: #fff8e1;
    box-shadow: inset 3px 0 0 0 #f9a825;
}
.setup-table tbody tr.fee-editing:hover {
    background: #fff3cc;
}

/* ---------- Buttons ---------- */
.btn-setup-primary {
    font-family: var(--setup-font);
    background: linear-gradient(135deg, var(--setup-accent) 0%, var(--setup-accent-hover) 100%);
    color: #ffffff;
    border: none;
    padding: 10px 24px;
    border-radius: var(--setup-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--setup-transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px var(--setup-accent-glow);
}
.btn-setup-primary:hover {
    background: linear-gradient(135deg, var(--setup-accent-hover) 0%, var(--setup-accent) 100%);
    box-shadow: 0 6px 20px var(--setup-accent-glow);
    transform: translateY(-1px);
    color: #ffffff;
}
.btn-setup-secondary {
    font-family: var(--setup-font);
    background: var(--setup-card);
    color: var(--setup-text);
    border: 1.5px solid var(--setup-border);
    padding: 10px 24px;
    border-radius: var(--setup-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--setup-transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-setup-secondary:hover {
    background: var(--setup-input-bg);
    border-color: var(--setup-primary-light);
    color: var(--setup-primary);
}
.btn-setup-sm {
    padding: 6px 14px;
    font-size: 0.75rem;
}
.btn-setup-success {
    background: linear-gradient(135deg, var(--setup-success) 0%, var(--setup-accent-hover) 100%);
    color: #ffffff;
    border: none;
    padding: 10px 24px;
    border-radius: var(--setup-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--setup-transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px var(--setup-accent-glow);
}
.btn-setup-success:hover {
    background: linear-gradient(135deg, var(--setup-accent-hover) 0%, #3d8a20 100%);
    box-shadow: 0 6px 20px var(--setup-accent-glow);
    transform: translateY(-1px);
    color: #ffffff;
}
.btn-setup-danger {
    font-family: var(--setup-font);
    display: inline-block;
    background: transparent;
    color: var(--setup-danger);
    border: 1.5px solid var(--setup-danger-light);
    padding: 6px 14px;
    border-radius: var(--setup-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: var(--setup-transition);
}
.btn-setup-danger:hover {
    background: var(--setup-danger);
    color: #ffffff;
    border-color: var(--setup-danger);
}

/* ---------- Navigation Footer ---------- */
.setup-nav-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 8px;
    margin-top: 8px;
    border-top: 1px solid var(--setup-border-light);
}

/* ---------- Alert / Info Boxes ---------- */
.setup-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--setup-radius-sm);
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 16px;
}
.setup-info.info-blue {
    background: var(--setup-blue-light);
    color: #1e40af;
    border: 1px solid #bfdbfe;
}
.setup-info.info-amber {
    background: var(--setup-warning-light);
    color: #92400e;
    border: 1px solid #fde68a;
}
.setup-info.info-green {
    background: var(--setup-success-light);
    color: #166534;
    border: 1px solid #bbf7d0;
}
.setup-info.info-red {
    background: var(--setup-danger-light);
    color: #991b1b;
    border: 1px solid #fecaca;
}
.setup-info .info-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ---------- Status Badge ---------- */
.setup-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
/* Saturated backgrounds with white text. The earlier pale-tint variant looked
   muted and washed out in dense tables (status row after status row reads as
   "nothing here"). Solid pills with white text make the state instantly
   recognizable at a glance and meet WCAG AA contrast (>= 4.5:1).
   IMPORTANT: only the "badge-" prefixed names are used because sinc19.css
   defines global .success / .warning / .danger / .info rules with
   color:#fff !important that would otherwise win over any badge text color. */
.setup-badge.badge-success {
    background: #15803d; /* emerald-700 -- 4.6:1 on white text */
    color: #fff;
}
.setup-badge.badge-warning {
    background: #c2410c; /* orange-700 -- 5.0:1 */
    color: #fff;
}
.setup-badge.badge-info {
    background: #0369a1; /* sky-700 -- 5.7:1 */
    color: #fff;
}
.setup-badge.badge-muted {
    background: #475569; /* slate-600 -- 7.5:1 */
    color: #fff;
}
.setup-badge.badge-danger {
    background: #b91c1c; /* red-700 -- 5.9:1 */
    color: #fff;
}

/* ---------- Tipsy tooltip (modernized) ----------
   jquery.tipsy.js is loaded in tt10.js and auto-initializes on .tip / .tipsy
   class elements. The legacy CSS in sinc19.css used a small black box with
   a GIF arrow. These overrides give it a modern rounded slate card with a
   soft shadow. No arrow -- cleaner look, common in modern design systems. */
.tipsy {
    position: absolute;
    z-index: 100000;
    padding: 6px 0;
    background: none !important;
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    pointer-events: none;
}
.tipsy-inner {
    background: #1e293b; /* slate-800 */
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8125rem;
    line-height: 1.45;
    max-width: 320px;
    text-align: left;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18), 0 2px 4px rgba(15, 23, 42, 0.10);
    opacity: 1 !important; /* tipsy.js sets inline opacity:0.9; we want crisp */
}

/* ---------- Empty State ---------- */
.setup-empty {
    text-align: center;
    padding: 32px 20px;
    color: var(--setup-text-muted);
}
.setup-empty .empty-icon {
    font-size: 2.2rem;
    margin-bottom: 8px;
    opacity: 0.4;
}
.setup-empty p {
    font-size: 0.875rem;
    margin: 0;
}

/* ---------- Add-Item Row ---------- */
.add-item-row {
    background: var(--setup-input-bg);
    border: 1.5px dashed var(--setup-border);
    border-radius: var(--setup-radius);
    padding: 16px 20px;
    margin-bottom: 16px;
    transition: var(--setup-transition);
}
.add-item-row:hover {
    border-color: var(--setup-accent);
    background: var(--setup-input-focus);
}

/* ---------- Inline edit/delete actions ---------- */
.row-actions {
    display: flex;
    gap: 4px;
}
.row-actions a,
.row-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--setup-radius-sm);
    border: 1px solid var(--setup-border-light);
    background: var(--setup-card);
    color: var(--setup-text-muted);
    cursor: pointer;
    transition: var(--setup-transition);
    font-size: 0.85rem;
    text-decoration: none;
}
.row-actions a:hover,
.row-actions button:hover {
    background: var(--setup-input-bg);
    color: var(--setup-text);
    border-color: var(--setup-border);
}
.row-actions .action-edit:hover {
    background: #eff6ff;
    color: var(--setup-primary);
    border-color: #bfdbfe;
}
.row-actions .action-delete:hover {
    background: var(--setup-danger-light);
    color: var(--setup-danger);
    border-color: #fecaca;
}

/* ---------- Scrollbar ---------- */
.setup-wrapper ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.setup-wrapper ::-webkit-scrollbar-track {
    background: transparent;
}
.setup-wrapper ::-webkit-scrollbar-thumb {
    background: var(--setup-border);
    border-radius: 3px;
}
.setup-wrapper ::-webkit-scrollbar-thumb:hover {
    background: var(--setup-text-muted);
}

/* ---------- Status Message ---------- */
.setup-toast {
    position: fixed;
    top: 60px;
    right: 20px;
    z-index: 9999;
    min-width: 280px;
    padding: 14px 20px;
    border-radius: var(--setup-radius);
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: var(--setup-shadow-lg);
    display: none;
    animation: toastSlide 0.3s ease-out;
    font-family: var(--setup-font);
}
@keyframes toastSlide {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.setup-toast.toast-success {
    background: var(--setup-success);
    color: #fff;
}
.setup-toast.toast-error {
    background: var(--setup-danger);
    color: #fff;
}

/* ---------- Roster Limits Grid ---------- */
.roster-limits-grid {
    overflow-x: auto;
    border: 1px solid var(--setup-border-light);
    border-radius: var(--setup-radius);
}
.roster-limits-grid table {
    font-size: 0.75rem;
    margin: 0;
}
.roster-limits-grid th {
    background: var(--setup-input-bg);
    font-size: 0.68rem;
    padding: 6px 4px;
    text-align: center;
    white-space: nowrap;
    font-weight: 600;
    color: var(--setup-text-secondary);
}
.roster-limits-grid td {
    padding: 4px;
    text-align: center;
}
.roster-limits-grid input[type="text"],
.roster-limits-grid input[type="number"] {
    width: 42px;
    padding: 4px;
    text-align: center;
    font-size: 0.75rem;
    border: 1px solid var(--setup-border);
    border-radius: 4px;
    font-family: var(--setup-font);
}
.roster-limits-grid input:focus {
    border-color: var(--setup-accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(92,184,48,0.15);
}

/* ---------- Mini Forms ---------- */
.setup-mini-form {
    background: var(--setup-input-bg);
    border: 1px solid var(--setup-border-light);
    border-radius: var(--setup-radius);
    padding: 14px 16px;
    margin-top: 12px;
}
.setup-mini-form h6 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--setup-primary);
    margin-bottom: 10px;
}
.setup-mini-form .form-control {
    font-size: 0.85rem;
    padding: 6px 10px;
}

/* ---------- Task Cards ---------- */
.task-card {
    border: 1px solid var(--setup-border-light);
    border-radius: var(--setup-radius);
    margin-bottom: 16px;
    background: var(--setup-card);
    transition: var(--setup-transition);
    overflow: hidden;
}
.task-card:hover {
    box-shadow: var(--setup-shadow);
}
.task-card.status-required {
    border-left: 3px solid #87c657;
}
.task-card.status-optional {
    border-left: 3px solid #efd157;
}
.task-card.status-disabled {
    border-left: 3px solid var(--setup-border);
    opacity: 0.7;
}
.task-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--setup-border-light);
}
.task-card-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--setup-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: var(--setup-input-bg);
    color: var(--setup-text-secondary);
}
.task-card.status-required .task-card-icon {
    background: var(--setup-success-light);
    color: var(--setup-accent);
}
.task-card.status-optional .task-card-icon {
    background: #fef9e7;
    color: #b8960f;
}
.task-card-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--setup-text);
    margin: 0;
    font-family: var(--setup-font-heading);
}
.task-card-desc {
    font-size: 0.76rem;
    color: var(--setup-text-muted);
    margin: 2px 0 0;
    line-height: 1.3;
}
.task-card-body {
    padding: 14px 18px;
}

/* ---------- Three-Way Status Toggle ---------- */
.status-toggle {
    display: inline-flex;
    border: 1.5px solid var(--setup-border);
    border-radius: 20px;
    overflow: hidden;
    background: var(--setup-input-bg);
    font-size: 0.75rem;
    font-weight: 600;
}
.status-toggle .status-btn {
    padding: 5px 14px;
    cursor: pointer;
    transition: var(--setup-transition);
    border: none;
    background: transparent;
    color: var(--setup-text-muted);
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--setup-font);
    outline: none;
}
.status-toggle .status-btn:not(:last-child) {
    border-right: 1px solid var(--setup-border);
}
.status-toggle .status-btn:hover {
    background: var(--setup-card-hover);
    color: var(--setup-text);
}
.status-toggle .status-btn.active-required {
    background: #87c657;
    color: #fff;
    border-color: #87c657;
}
.status-toggle .status-btn.active-optional {
    background: #efd157;
    color: #5a4a00;
    border-color: #efd157;
}
.status-toggle .status-btn.active-disabled {
    background: var(--setup-border);
    color: var(--setup-text-secondary);
}

/* ---------- Task Controls Row ---------- */
.task-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.task-controls .task-control-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--setup-text-secondary);
}
.task-controls .task-control-item label {
    font-size: 0.8rem;
    cursor: pointer;
    margin: 0;
}

/* ---------- Task Options Expand Panel ---------- */
.task-options {
    display: none;
    padding: 14px 18px;
    border-top: 1px dashed var(--setup-border-light);
    background: var(--setup-input-bg);
}
.task-options.expanded {
    display: block;
}
.task-options-toggle {
    font-size: 0.76rem;
    color: var(--setup-blue);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-weight: 500;
}
.task-options-toggle:hover {
    color: var(--setup-accent);
}

/* ---------- Organization Checkbox Grid ---------- */
.org-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 16px;
    margin: 8px 0;
}
.org-checkbox-grid .org-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    padding: 4px 0;
}
.org-checkbox-grid .org-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--setup-accent);
}
.org-checkbox-grid .org-item label {
    cursor: pointer;
    margin: 0;
    font-size: 0.82rem;
}

/* ---------- Limits Display Table ---------- */
.limits-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.76rem;
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    overflow: hidden;
}
.limits-table thead th {
    background: var(--setup-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.68rem;
    padding: 6px 4px;
    text-align: center;
    white-space: nowrap;
}
.limits-table thead th:first-child {
    background: var(--setup-primary-light);
    text-align: left;
    padding-left: 8px;
    min-width: 110px;
}
.limits-table tbody td {
    padding: 5px 4px;
    text-align: center;
    border-bottom: 1px solid var(--setup-border-light);
}
.limits-table tbody td:first-child {
    text-align: left;
    padding-left: 8px;
    font-weight: 600;
    color: var(--setup-text-secondary);
    background: var(--setup-input-bg);
}
.limits-table tbody tr:last-child td {
    border-bottom: none;
}

/* ---------- Date Picker Enhancements ---------- */
.date-input-group {
    position: relative;
}
.date-input-group .form-control {
    padding-right: 36px;
}
.date-input-group .date-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--setup-text-muted);
    pointer-events: none;
    font-size: 0.9rem;
}

/* ---------- Flatpickr Overrides ---------- */
.flatpickr-calendar {
    font-family: var(--setup-font) !important;
    border-radius: var(--setup-radius) !important;
    box-shadow: var(--setup-shadow-lg) !important;
    border: 1px solid var(--setup-border) !important;
}
.flatpickr-day.selected {
    background: var(--setup-accent) !important;
    border-color: var(--setup-accent) !important;
}
.flatpickr-day:hover {
    background: var(--setup-input-focus) !important;
    border-color: var(--setup-accent) !important;
}
.flatpickr-months .flatpickr-month {
    background: var(--setup-primary) !important;
    color: #fff !important;
    border-radius: var(--setup-radius) var(--setup-radius) 0 0 !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: #fff !important;
    font-weight: 600 !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option {
    color: var(--setup-text) !important;
    background: var(--setup-card) !important;
}
.flatpickr-weekdays {
    background: var(--setup-input-bg) !important;
}
span.flatpickr-weekday {
    color: var(--setup-text-secondary) !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
}
/* Month prev/next arrows sit on the dark --setup-primary header bar, so paint them white */
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: #fff !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--setup-accent) !important;
}
/* Year up/down spinner arrows (numInputWrapper) are CSS triangles - color their borders white */
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
    border-bottom-color: #fff !important;
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: #fff !important;
}
.flatpickr-current-month .numInputWrapper span:hover:after {
    border-bottom-color: var(--setup-accent) !important;
    border-top-color: var(--setup-accent) !important;
}

/* ---------- File List Items ---------- */
.file-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border: 1px solid var(--setup-border-light);
    border-radius: var(--setup-radius-sm);
    margin-bottom: 8px;
    background: var(--setup-card);
    font-size: 0.875rem;
    transition: var(--setup-transition);
}
.file-list-item:hover {
    background: var(--setup-card-hover);
}
.file-list-item a {
    color: var(--setup-blue);
    text-decoration: none;
    font-weight: 500;
}
.file-list-item a:hover {
    text-decoration: underline;
}

/* ---------- Staff Tools Badge ---------- */
.staff-tools-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #ffe4e6;
    color: #e11d48;
}

/* ---------- Upload Container ---------- */
.upload-container {
    border: 2px dashed var(--setup-border);
    border-radius: var(--setup-radius);
    padding: 20px;
    text-align: center;
    transition: var(--setup-transition);
    background: var(--setup-input-bg);
}
.upload-container:hover {
    border-color: var(--setup-accent);
    background: var(--setup-input-focus);
}

/* ---------- Docs Table ---------- */
.olc-docs-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
    margin-top: 12px;
}
.olc-docs-table thead th {
    background: var(--setup-input-bg);
    color: var(--setup-text-secondary);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 12px;
    border-bottom: 2px solid var(--setup-border);
}
.olc-docs-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--setup-border-light);
    vertical-align: middle;
}
.olc-docs-table tbody tr:hover {
    background: var(--setup-card-hover);
}

/* ---------- Section Headings (reusable across landing pages) ---------- */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--setup-accent);
    margin-bottom: 12px;
}
.section-title {
    font-family: var(--setup-font-heading);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--setup-text);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 14px;
}
.section-desc {
    font-size: 1.05rem;
    color: var(--setup-text-secondary);
    max-width: 560px;
    line-height: 1.65;
    margin: 0 0 40px;
}

/* ---------- Testimonial Cards ---------- */
.testimonial-card {
    background: var(--setup-card);
    border: 1px solid var(--setup-border-light);
    border-radius: var(--setup-radius-lg);
    padding: 28px;
    box-shadow: var(--setup-shadow);
    display: flex;
    flex-direction: column;
}
.testimonial-stars {
    color: #f59e0b;
    font-size: 0.9rem;
    margin-bottom: 14px;
    letter-spacing: 2px;
}
.testimonial-card blockquote {
    font-size: 0.9rem;
    color: var(--setup-text);
    line-height: 1.65;
    margin: 0 0 20px;
    flex: 1;
    font-style: italic;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--setup-border-light);
}
.testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--setup-success-light);
    color: var(--setup-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.testimonial-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--setup-text);
}
.testimonial-role {
    font-size: 0.75rem;
    color: var(--setup-text-muted);
}

/* ---------- Audience / Path Cards ---------- */
.audience-card {
    background: var(--setup-card);
    border: 2px solid var(--setup-border-light);
    border-radius: var(--setup-radius-lg);
    padding: 32px 28px;
    text-align: center;
    transition: var(--setup-transition);
}
.audience-card:hover {
    border-color: var(--setup-accent);
    box-shadow: var(--setup-shadow-lg);
}
.audience-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 18px;
}
.audience-card h4 {
    font-family: var(--setup-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--setup-text);
    margin: 0 0 8px;
}
.audience-card p {
    font-size: 0.85rem;
    color: var(--setup-text-secondary);
    margin: 0 0 20px;
    line-height: 1.55;
}
.audience-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--setup-accent);
    text-decoration: none;
    transition: var(--setup-transition);
}
.audience-link:hover {
    color: var(--setup-accent-hover);
    gap: 10px;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .setup-stepper {
        gap: 2px;
    }
    .setup-step-label {
        font-size: 0.6rem;
    }
    .setup-step-circle {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
    .setup-card-body {
        padding: 16px;
    }
    .org-checkbox-grid {
        grid-template-columns: 1fr;
    }
    .task-controls {
        flex-direction: column;
        align-items: flex-start;
    }
    .status-toggle .status-btn {
        padding: 4px 10px;
        font-size: 0.65rem;
    }
}

/* ============================================================
   GRID2 - Scheduling Grid "Command Center" Modernization
   All styles scoped under .grid2-wrapper so Grid.aspx is unaffected.
   ============================================================ */

/* ---------- Grid2: Base Typography ---------- */
.grid2-wrapper {
    font-family: var(--setup-font);
    color: var(--setup-text);
}
.grid2-wrapper h1,
.grid2-wrapper h2,
.grid2-wrapper h3,
.grid2-wrapper h4,
.grid2-wrapper h5 {
    font-family: var(--setup-font-heading);
}

/* ---------- Grid2: Time Header Row ---------- */
.grid2-wrapper tr.gh {
    background: var(--setup-primary) !important;
    color: #fff !important;
    font-family: var(--setup-font-heading);
    font-weight: 600;
    font-size: 9pt;
    letter-spacing: 0.02em;
}
.grid2-wrapper tr.gh td {
    background: var(--setup-primary) !important;
    color: #fff !important;
    padding: 6px 0;
    position: sticky;
    top: 0;
    z-index: 5;
    border-bottom: 2px solid var(--setup-accent) !important;
    border-left-color: rgba(255,255,255,0.15) !important;
}

/* ---------- Grid2: Field Column ---------- */
.grid2-wrapper td.tdField {
    background: #f8fafc !important;
    font-family: var(--setup-font-heading);
    font-weight: 600;
    color: var(--setup-text) !important;
    position: sticky;
    left: 0;
    z-index: 4;
    border-right: 2px solid var(--setup-border) !important;
    padding: 4px 6px;
}

/* ---------- Grid2: Cell Borders ---------- */
.grid2-wrapper .borderleftblack {
    border-left: 2px solid #cbd5e1 !important;
}
.grid2-wrapper .borderleftblue {
    border-left: 1px solid #e2e8f0 !important;
}
.grid2-wrapper .bordersilver {
    border-left: 1px solid #f1f5f9 !important;
}

/* ---------- Grid2: Grid Table ---------- */
.grid2-wrapper table[id$="Table6"] td {
    border-bottom: 1px solid #f1f5f9;
}

/* ---------- Grid2: Blocked Cells (diagonal stripe) ---------- */
.grid2-wrapper td[data-blocked="true"] {
    background: repeating-linear-gradient(
        -45deg,
        #e2e8f0,
        #e2e8f0 3px,
        #cbd5e1 3px,
        #cbd5e1 6px
    ) !important;
    cursor: not-allowed;
}

/* ---------- Grid2: Game Blocks ---------- */
.grid2-wrapper ul.gamesList li {
    border: none !important;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.12);
    font-family: var(--setup-font);
    font-size: 8.5pt;
    padding: 4px 6px 3px 8px !important;
    margin-top: 2px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    will-change: transform;
    border-left: 3px solid currentColor !important;
    opacity: 0.92;
}
.grid2-wrapper ul.gamesList li.scheduled {
    display: block;
}
.grid2-wrapper ul.gamesList li:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(15,23,42,0.18);
    z-index: 10 !important;
    opacity: 1;
}
.grid2-wrapper ul.gamesList li span {
    line-height: 16px;
    font-family: var(--setup-font);
}

/* ---------- Grid2: Open Slots (placeholders) ----------
   Distinct vocabulary so "open" cannot be confused with a game chip or empty
   grid: green dashed border + light green fill. Solid color = game, diagonal
   hatch = blocked, dashed green = open. */
.grid2-wrapper #placeholders li {
    /* Pure white interior: every game chip is tinted, so white IS the color of
       "empty" on this grid - a light green fill just competes with the green
       division colors. The heavy dark-green dashes and breathing glow carry it. */
    background-color: #ffffff !important;
    color: #1c7a0e !important;
    border-radius: 4px;
    border: 3px dashed #2f8a12 !important;
    box-shadow: 0 0 6px 1px var(--setup-accent-glow, rgba(92, 184, 48, 0.25));
    font-weight: 700;
    font-family: var(--setup-font);
}
/* Hover on an open slot. The selector has to carry the #placeholders id: the
   base rule above sets a white background with !important from an id selector,
   so a plain .phhover class - however important - always lost to it and the
   hover only ever changed the glow. */
.grid2-wrapper #placeholders li.phhover {
    background-color: #edf9e4 !important;
    box-shadow: 0 0 10px 3px var(--setup-accent-glow, rgba(92, 184, 48, 0.45)) !important;
}
/* A slot already occupied by a game renders as an informational underlay
   (slot length/size peeking below the chip) - it is NOT open, so it gets a
   quiet readable gray instead of the open-slot green. .ph-occupied is stamped
   server-side (slot holds this division's game); .ph-covered is stamped by the
   grid JS (slot sits under another division's chip). */
.grid2-wrapper #placeholders li.ph-occupied,
.grid2-wrapper #placeholders li.ph-covered {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    font-weight: 600;
    z-index: 2;
    box-shadow: none;
}

/* ---------- Grid2: Game Info Panel (divDets) ---------- */
.grid2-wrapper #divDets {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow);
    padding: 12px !important;
    margin-bottom: 12px;
}
.grid2-wrapper #nextGame {
    font-family: var(--setup-font) !important;
    font-size: 9pt !important;
    background: transparent !important;
}
.grid2-wrapper #nextGame .dropped {
    border: none;
}

/* ---------- Grid2: Coach Schedule Panels ---------- */
.grid2-wrapper #divHCoach,
.grid2-wrapper #divACoach {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    box-shadow: var(--setup-shadow);
    padding: 8px;
    font-family: var(--setup-font);
    font-size: 8.5pt;
}

/* ---------- Grid2: Warning / Alert Bars ---------- */
.grid2-wrapper .altwarning {
    background: var(--setup-warning);
    color: #fff;
    font-family: var(--setup-font-heading);
    font-weight: 600;
    padding: 10px 16px;
    border-radius: var(--setup-radius-sm);
    text-align: center;
    margin-bottom: 10px;
}
.grid2-wrapper .alert-danger {
    background: var(--setup-danger-light);
    color: var(--setup-danger);
    border: 1px solid var(--setup-danger);
    border-radius: var(--setup-radius-sm);
    font-family: var(--setup-font);
}

/* ---------- Grid2: Tabs ---------- */
.grid2-wrapper .eo_tab_selected {
    border-bottom: 3px solid var(--setup-accent) !important;
    font-weight: 600;
}

/* ---------- Grid2: Buttons ---------- */
.grid2-wrapper .btn {
    font-family: var(--setup-font);
    border-radius: var(--setup-radius-sm);
    transition: all 0.15s ease;
}
.grid2-wrapper .btn-primary,
.grid2-wrapper .btn-success {
    background: var(--setup-accent);
    border-color: var(--setup-accent);
    color: #fff;
}
.grid2-wrapper .btn-primary:hover,
.grid2-wrapper .btn-success:hover {
    background: var(--setup-accent-hover);
    border-color: var(--setup-accent-hover);
}
.grid2-wrapper .btn-danger {
    background: var(--setup-danger);
    border-color: var(--setup-danger);
}
.grid2-wrapper .btn-outline-primary {
    color: var(--setup-primary);
    border-color: var(--setup-border);
}
.grid2-wrapper .btn-outline-primary:hover {
    background: var(--setup-primary);
    color: #fff;
}

/* ---------- Grid2: Sticktotop (fixed info panel) ---------- */
.grid2-wrapper .sticktotop {
    position: fixed;
    background: var(--setup-card);
    top: 0;
    z-index: 6;
    border-bottom: 2px solid var(--setup-accent);
    left: 0;
    box-shadow: var(--setup-shadow-md);
}

/* ---------- Grid2: Full Screen Link ---------- */
.grid2-wrapper #lnkFull {
    font-family: var(--setup-font);
    font-size: 8.5pt;
    font-weight: 500;
    border-radius: var(--setup-radius-sm);
}

/* ---------- Grid2: DataGrid Styling ---------- */
.grid2-wrapper table[id*="DataGrid"],
.grid2-wrapper table[id*="dgSites"] {
    border-collapse: collapse;
    font-family: var(--setup-font);
    font-size: 9pt;
}
.grid2-wrapper table[id*="DataGrid"] th,
.grid2-wrapper table[id*="dgSites"] th {
    background: var(--setup-primary-light);
    color: #fff;
    padding: 6px 10px;
    font-family: var(--setup-font-heading);
    font-weight: 600;
    font-size: 8.5pt;
}
.grid2-wrapper table[id*="DataGrid"] td,
.grid2-wrapper table[id*="dgSites"] td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--setup-border-light);
}

/* ---------- Grid2: Info boxes inside game panel ---------- */
.grid2-wrapper #nextGame div[style*="border: 1px solid black"] {
    border-color: var(--setup-border) !important;
    border-radius: var(--setup-radius-sm);
}

/* ---------- Grid2: Division Color Palette (muted professional) ---------- */
/* These override the inline bg colors set by JS via data-color attribute.
   The left-border uses full saturation; fill is 15-20% opacity. */
.grid2-wrapper ul.gamesList li[data-color] {
    border-left-width: 3px !important;
    border-left-style: solid !important;
}

/* ---------- Grid2: Responsive font sizing ---------- */
@media (min-width: 1900px) {
    .grid2-wrapper tr.gh td,
    .grid2-wrapper td.tdField { font-size: 10pt; }
}
@media (min-width: 1400px) and (max-width: 1899px) {
    .grid2-wrapper tr.gh td,
    .grid2-wrapper td.tdField { font-size: 9pt; }
}
@media (min-width: 1000px) and (max-width: 1399px) {
    .grid2-wrapper tr.gh td,
    .grid2-wrapper td.tdField { font-size: 8pt; }
}
@media (max-width: 999px) {
    .grid2-wrapper tr.gh td,
    .grid2-wrapper td.tdField { font-size: 7pt; }
}

/* ===== Scheduling Layout (Scheduling2) ===== */

/* Layout Shell */
.sched-layout { display: flex; flex-direction: column; min-height: 100vh; }
.sched-body { display: flex; flex: 1; }
.sched-main { flex: 1; min-width: 0; overflow-x: auto; }

/* Top Bar */
.sched-topbar {
    display: flex; align-items: center; justify-content: space-between;
    height: 50px; padding: 0 16px;
    background: var(--setup-primary, #0f172a);
    color: white; font-family: 'Outfit', sans-serif;
    position: sticky; top: 0; z-index: 100;
}
.sched-topbar-left {
    display: flex; align-items: center; gap: 12px;
}
.sched-topbar-title {
    font-size: 1rem; font-weight: 600; color: white;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 500px;
}
.sched-topbar-right {
    display: flex; align-items: center; gap: 16px;
}
.sched-topbar-right a,
.sched-topbar-right a:visited {
    color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.85rem;
    font-family: 'DM Sans', sans-serif;
}
.sched-topbar-right a:hover { color: white; text-decoration: none; }
.sched-sidebar-toggle {
    background: none; border: none; color: white; cursor: pointer;
    font-size: 1.4rem; padding: 4px; line-height: 1; display: flex; align-items: center;
}
.sched-sidebar-toggle:hover { color: rgba(255,255,255,0.8); }

/* Sidebar */
.sched-sidebar {
    width: 250px; flex-shrink: 0;
    background: #f8fafc; border-right: 1px solid #e2e8f0;
    padding: 16px 0; overflow-y: auto;
    height: calc(100vh - 50px); position: sticky; top: 50px;
    transition: width 0.2s ease; z-index: 10;
}
.sched-sidebar.collapsed { width: 56px; }
.sched-sidebar.collapsed .sched-nav-item span,
.sched-sidebar.collapsed .sched-nav-badge,
.sched-sidebar.collapsed .sched-nav-subitem span { display: none; }
.sched-sidebar.collapsed .sched-nav-item { justify-content: center; padding: 8px 0; }
.sched-sidebar.collapsed .sched-nav-flyout > .sched-nav-item .mdi-chevron-right { display: none; }
.sched-sidebar.collapsed .sched-nav-section-label {
    display: flex; justify-content: center; padding: 8px 0 2px;
}
.sched-sidebar.collapsed .sched-nav-section-label .sched-nav-section-text,
.sched-sidebar.collapsed .sched-nav-section-label .sched-nav-collapse-icon { display: none; }
.sched-sidebar.collapsed .sched-nav-section-label .sched-nav-section-icon {
    display: inline; font-size: 1.1rem; color: #94a3b8;
}
.sched-sidebar.collapsed .sched-nav-divider { margin: 12px 8px; }

/* Collapsed sidebar tooltip (fixed-position, managed by JS) */
.sched-nav-tooltip {
    position: fixed; background: #1e293b; color: #fff;
    font-size: 0.75rem; font-weight: 500; font-family: 'DM Sans', sans-serif;
    padding: 5px 10px; border-radius: 6px; white-space: nowrap;
    pointer-events: none; z-index: 1100;
    opacity: 0; transition: opacity 0.15s ease;
}
.sched-nav-tooltip.visible { opacity: 1; }

/* Navigation Items */
.sched-nav { padding: 0 8px; }
.sched-nav-section-label {
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
    color: #94a3b8; padding: 12px 12px 4px; text-transform: uppercase;
    font-family: 'DM Sans', sans-serif;
}
.sched-nav-section-icon { display: none; }
.sched-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 6px; margin: 1px 0;
    color: #475569; font-size: 0.875rem; font-family: 'DM Sans', sans-serif;
    text-decoration: none; transition: all 0.15s ease;
}
.sched-nav-item:hover { background: #f1f5f9; color: #1e293b; text-decoration: none; }
.sched-nav-item.active {
    background: #dbeafe; color: #1d4ed8; font-weight: 600;
    border-left: 3px solid #3b82f6;
}
.sched-nav-item .mdi { font-size: 1.2rem; width: 24px; text-align: center; flex-shrink: 0; }

/* ── Pre-Scheduling tier: subtle, smaller, muted ── */
.sched-nav-item.sched-nav-presched {
    font-size: 0.8rem;
    color: #94a3b8;
    padding: 6px 12px;
}
.sched-nav-item.sched-nav-presched .mdi { font-size: 1rem; color: #94a3b8; }
.sched-nav-item.sched-nav-presched:hover { background: #f1f5f9; color: #64748b; }
.sched-nav-item.sched-nav-presched:hover .mdi { color: #64748b; }
.sched-nav-item.sched-nav-presched.active {
    background: #f1f5f9; color: #475569; font-weight: 600;
    border-left: 3px solid #94a3b8;
}
.sched-nav-item.sched-nav-presched.active .mdi { color: #475569; }

/* ── Pre-Scheduling badges ── */
.sched-nav-badge {
    margin-left: auto; font-size: 0.65rem; font-weight: 600;
    padding: 1px 7px; border-radius: 10px; line-height: 1.4;
    background: #e2e8f0; color: #64748b; white-space: nowrap;
}
.sched-nav-badge.badge-success {
    background: rgba(92,184,48,0.15); color: #3d8b1e;
}
.sched-nav-badge.badge-warning {
    background: #fff7ed; color: #c2410c;
}
.sched-nav-badge.badge-check {
    background: rgba(92,184,48,0.15); color: #3d8b1e; font-size: 0.8rem; padding: 0 6px;
}
.sched-nav-presched-complete .sched-nav-section-label {
    color: #3d8b1e;
}

/* ── Workflow tier: prominent, bolder ── */
.sched-nav-item.sched-nav-workflow {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    padding: 9px 12px;
}
.sched-nav-item.sched-nav-workflow .mdi { font-size: 1.25rem; color: #475569; }
.sched-nav-item.sched-nav-workflow:hover { background: #eff6ff; color: #1e293b; }
.sched-nav-item.sched-nav-workflow:hover .mdi { color: #3b82f6; }
.sched-nav-item.sched-nav-workflow.active {
    background: #dbeafe; color: #1d4ed8; font-weight: 700;
    border-left: 3px solid #3b82f6;
}
.sched-nav-item.sched-nav-workflow.active .mdi { color: #1d4ed8; }

/* ── Menu tier: subtle like pre-sched ── */
.sched-nav-item.sched-nav-menu {
    font-size: 0.8rem;
    color: #94a3b8;
    padding: 6px 12px;
}
.sched-nav-item.sched-nav-menu .mdi { font-size: 1rem; color: #94a3b8; }
.sched-nav-item.sched-nav-menu:hover { background: #f1f5f9; color: #64748b; }
.sched-nav-item.sched-nav-menu:hover .mdi { color: #64748b; }
.sched-nav-item.sched-nav-menu.active {
    background: #f1f5f9; color: #475569; font-weight: 600;
    border-left: 3px solid #94a3b8;
}
.sched-nav-item.sched-nav-menu.active .mdi { color: #475569; }

.sched-nav-item.sched-nav-danger { color: var(--setup-danger); }
.sched-nav-item.sched-nav-danger .mdi { color: var(--setup-danger); }
.sched-nav-item.sched-nav-danger:hover { background: var(--setup-danger-light); color: var(--setup-danger); }
.sched-nav-item.sched-nav-danger:hover .mdi { color: var(--setup-danger); }

.sched-nav-subitem {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 46px; font-size: 0.75rem; color: #94a3b8;
    text-decoration: none; border-radius: 4px;
    font-family: 'DM Sans', sans-serif;
}
.sched-nav-subitem:hover { background: #f1f5f9; color: #64748b; text-decoration: none; }
.sched-nav-subitem.active { background: #eff6ff; color: #1e293b; font-weight: 600; }

/* Flyout submenu (appears to the right of a nav item) */
.sched-nav-flyout {
    position: relative;
}
.sched-nav-flyout > .sched-nav-item {
    cursor: pointer;
}
.sched-nav-flyout > .sched-nav-item .mdi-chevron-right {
    margin-left: auto; font-size: 1rem; opacity: 0.5;
}
.sched-nav-flyout-menu {
    display: none; position: fixed;
    min-width: 180px; background: #fff; border: 1px solid var(--setup-border, #e2e8f0);
    border-radius: var(--setup-radius-sm, 8px); box-shadow: var(--setup-shadow-md);
    padding: 6px 0; z-index: 1000;
    font-family: 'DM Sans', sans-serif;
}
/* .open is set by Scheduling2.master JS with a close delay, so the pointer can cross
   the sidebar's scrollbar (which takes hover away from the menu) without it closing */
.sched-nav-flyout:hover > .sched-nav-flyout-menu,
.sched-nav-flyout.open > .sched-nav-flyout-menu,
.sched-nav-flyout:focus-within > .sched-nav-flyout-menu {
    display: block;
}
.sched-nav-flyout-menu a {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 16px; font-size: 0.8rem; color: #475569;
    text-decoration: none; white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.sched-nav-flyout-menu a:hover { background: #eff6ff; color: #1e293b; text-decoration: none; }
.sched-nav-flyout-menu a.active { background: #dbeafe; color: #1d4ed8; font-weight: 600; }
.sched-nav-flyout-menu a .mdi { font-size: 1.1rem; width: 20px; text-align: center; }

.sched-nav-divider { height: 1px; background: #e2e8f0; margin: 12px 16px; }

/* Division Context Bar */
.sched-div-context {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 20px;
    background: var(--setup-card, #ffffff);
    border-bottom: 1px solid var(--setup-border, #e2e8f0);
    font-family: 'DM Sans', sans-serif;
    min-height: 52px;
}
.sched-div-context-left {
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
}
.sched-div-name {
    display: flex; align-items: center; gap: 4px;
}
.sched-div-label {
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--setup-text-muted, #94a3b8);
    margin-right: 4px;
}
.sched-div-name-text {
    font-size: 0.92rem; font-weight: 700; color: var(--setup-primary, #0f172a);
    font-family: 'Outfit', sans-serif;
}
.sched-div-teams {
    font-size: 0.75rem; font-weight: 500; color: var(--setup-text-secondary, #64748b);
    background: var(--setup-border-light, #f1f5f9);
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
.sched-div-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px;
    color: var(--setup-text-secondary, #64748b);
    background: var(--setup-border-light, #f1f5f9);
    text-decoration: none; transition: all 0.15s ease;
    font-size: 1.1rem;
}
.sched-div-arrow:hover {
    background: var(--setup-border, #e2e8f0);
    color: var(--setup-primary, #0f172a);
    text-decoration: none;
}
.sched-div-steps {
    display: flex; align-items: center; gap: 6px;
    flex: 1; justify-content: center; flex-wrap: wrap;
}
.sched-step {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 14px; border-radius: 20px;
    font-size: 0.78rem; font-weight: 500;
    text-decoration: none; transition: all 0.2s ease;
    background: var(--setup-border-light, #f1f5f9);
    color: var(--setup-text-secondary, #64748b);
    border: 1px solid transparent;
    white-space: nowrap;
}
.sched-step .mdi { font-size: 0.95rem; }
.sched-step:hover {
    background: #e2e8f0; color: var(--setup-text, #1e293b);
    text-decoration: none;
}
.sched-step.active,
.sched-step.active:not(.done) {
    background: var(--setup-blue-light, #eff6ff);
    color: var(--setup-blue, #3b82f6);
    border-color: var(--setup-blue, #3b82f6);
    font-weight: 600;
}
.sched-step.active:not(.done) .mdi { color: var(--setup-blue, #3b82f6); }
.sched-step:not(.done) {
    background: var(--setup-warning-light); color: #9a3412;
    border-color: #fed7aa;
}
.sched-step:not(.done) .mdi { color: var(--setup-warning); }
.sched-step:not(.done):hover {
    background: #fed7aa; color: #9a3412;
}
.sched-step.done {
    background: #f0fdf4; color: #16a34a;
}
.sched-step.active.done {
    background: var(--setup-blue-light, #eff6ff);
    color: var(--setup-blue, #3b82f6);
    border-color: var(--setup-blue, #3b82f6);
}
.sched-div-context-right {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0; margin-left: auto;
}
.sched-div-switcher {
    font-size: 0.78rem; padding: 4px 8px;
    border: 1px solid var(--setup-border, #e2e8f0);
    border-radius: 6px; background: white;
    color: var(--setup-text, #1e293b);
    font-family: 'DM Sans', sans-serif;
    max-width: 240px;
    cursor: pointer;
}
.sched-div-switcher:focus {
    outline: none; border-color: var(--setup-accent, #5cb830);
    box-shadow: 0 0 0 2px var(--setup-accent-glow, rgba(92,184,48,0.25));
}
@media (max-width: 992px) {
    .sched-div-context { padding: 8px 12px; gap: 8px; }
    .sched-div-steps { justify-content: flex-start; }
    .sched-step { padding: 4px 10px; font-size: 0.72rem; }
}
@media (max-width: 768px) {
    .sched-div-context { flex-direction: column; align-items: flex-start; }
    .sched-div-steps { width: 100%; justify-content: flex-start; }
    .sched-div-context-right { width: 100%; }
    .sched-div-switcher { width: 100%; max-width: none; }
}

/* Content Area */
.sched-content { padding: 20px; }

/* ===== Scheduling Page Components ===== */

/* Tabs (used on SchedGames, etc.) */
.sched-tabs {
    display: flex; gap: 2px;
    border-bottom: 2px solid var(--setup-border);
    padding: 0 4px; margin-bottom: 0;
    background: var(--setup-card);
}
.sched-tab {
    padding: 10px 24px; font-family: var(--setup-font);
    font-size: 0.875rem; font-weight: 500;
    color: var(--setup-text-secondary);
    background: none; border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px; cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.sched-tab:hover { color: var(--setup-text); background: var(--setup-border-light); }
.sched-tab.active {
    color: var(--setup-accent); border-bottom-color: var(--setup-accent);
    font-weight: 600;
}
.sched-tab .mdi { margin-right: 6px; font-size: 1.1rem; vertical-align: -1px; }

/* Tab Content Panel */
.sched-tab-panel {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-top: none;
    border-radius: 0 0 var(--setup-radius) var(--setup-radius);
    padding: 20px;
    min-height: 400px;
}

/* Page Section Headers */
.sched-page-header {
    font-family: var(--setup-font-heading);
    font-size: 1.25rem; font-weight: 700;
    color: var(--setup-text);
    margin: 0 0 4px 0;
}
.sched-page-desc {
    font-family: var(--setup-font);
    font-size: 0.875rem; color: var(--setup-text-secondary);
    line-height: 1.5; margin-bottom: 16px;
}

/* Format/Template List Items */
.sched-format-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--setup-border-light);
    transition: background 0.15s ease;
}
.sched-format-item:last-child { border-bottom: none; }
.sched-format-item:hover { background: var(--setup-border-light); }
.sched-format-icon {
    flex-shrink: 0; width: 32px; text-align: center;
    font-size: 1.2rem; color: var(--setup-text-muted);
    padding-top: 2px;
}
.sched-format-body { flex: 1; min-width: 0; }
.sched-format-name {
    font-family: var(--setup-font); font-size: 0.875rem;
    font-weight: 600; color: var(--setup-text); margin-bottom: 2px;
}
.sched-format-meta {
    font-size: 0.78rem; color: var(--setup-blue);
    margin-bottom: 2px;
}
.sched-format-desc {
    font-size: 0.8rem; color: var(--setup-text-secondary);
    line-height: 1.4;
}
.sched-format-tags {
    font-size: 0.75rem; color: var(--setup-warning);
    font-weight: 600; margin-top: 2px;
}
.sched-format-actions { flex-shrink: 0; }

/* Option Cards (Custom Build options, etc.) */
.sched-option-card {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    padding: 20px 24px;
    margin-bottom: 16px;
    box-shadow: var(--setup-shadow);
}
.sched-option-card h3 {
    font-family: var(--setup-font-heading);
    font-size: 1rem; font-weight: 600;
    color: var(--setup-text); margin: 0 0 12px 0;
}

/* Filter Bar */
.sched-filter-bar {
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--setup-border-light);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    margin-bottom: 16px;
}
.sched-filter-bar label {
    font-family: var(--setup-font);
    font-size: 0.78rem; font-weight: 600;
    color: var(--setup-text-secondary);
    margin-bottom: 2px; display: block;
}
.sched-filter-bar select,
.sched-filter-bar input[type="text"] {
    font-size: 0.82rem; padding: 4px 8px;
    border: 1px solid var(--setup-border);
    border-radius: 6px; background: white;
    font-family: var(--setup-font);
}

/* Venue/Field Cards */
.sched-venue-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    background: var(--setup-border-light);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    font-family: var(--setup-font);
    font-size: 0.875rem; font-weight: 600;
    color: var(--setup-text);
    margin-bottom: 8px;
}
.sched-field-list {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    overflow: hidden;
}
.sched-field-list-header {
    padding: 8px 14px;
    background: var(--setup-primary);
    color: white; font-size: 0.82rem;
    font-weight: 600; font-family: var(--setup-font);
}
.sched-field-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--setup-border-light);
    font-size: 0.82rem; font-family: var(--setup-font);
    transition: background 0.15s ease;
}
.sched-field-item:last-child { border-bottom: none; }
.sched-field-item:hover { background: var(--setup-border-light); }

/* Date Section Divider */
.sched-date-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    background: var(--setup-border-light);
    border: 1px solid var(--setup-border);
    font-family: var(--setup-font);
    font-size: 0.82rem; font-weight: 600;
    color: var(--setup-text);
    margin-top: 8px;
}

/* Game Edit Cells */
.sched-game-cell {
    border: 1px solid var(--setup-border);
    font-weight: normal; min-width: 105px;
    font-size: 0.82rem; font-family: var(--setup-font);
}

/* Existing Games Info */
.sched-games-exist {
    background: var(--setup-blue-light);
    border-left: 3px solid var(--setup-blue);
    border-radius: var(--setup-radius-sm);
    padding: 16px 20px; margin: 16px 0;
    font-family: var(--setup-font);
    font-size: 0.875rem; color: var(--setup-text);
}
.sched-games-exist ul {
    list-style: none; padding: 0; margin: 12px 0 0 0;
}
.sched-games-exist li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px solid var(--setup-border-light);
}
.sched-games-exist li:last-child { border-bottom: none; }

/* Quick Add Panel */
.sched-quick-add {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    padding: 16px;
    box-shadow: var(--setup-shadow);
}
.sched-quick-add table { font-family: var(--setup-font); font-size: 0.82rem; }
.sched-quick-add td { padding: 4px 8px; }

/* Responsive */
@media (max-width: 1200px) {
    .sched-sidebar { width: 56px; }
    .sched-sidebar .sched-nav-item span,
    .sched-sidebar .sched-nav-badge,
    .sched-sidebar .sched-nav-subitem span { display: none; }
    .sched-sidebar .sched-nav-item { justify-content: center; padding: 8px 0; }
    .sched-sidebar .sched-nav-flyout > .sched-nav-item .mdi-chevron-right { display: none; }
    .sched-sidebar .sched-nav-section-label {
        display: flex; justify-content: center; padding: 8px 0 2px;
    }
    .sched-sidebar .sched-nav-section-label .sched-nav-section-text,
    .sched-sidebar .sched-nav-section-label .sched-nav-collapse-icon { display: none; }
    .sched-sidebar .sched-nav-section-label .sched-nav-section-icon {
        display: inline; font-size: 1.1rem; color: #94a3b8;
    }
    .sched-sidebar .sched-nav-divider { margin: 12px 8px; }
}
@media (max-width: 768px) {
    .sched-sidebar { display: none; }
    .sched-sidebar.mobile-open {
        display: block; position: fixed; z-index: 200;
        width: 250px; height: calc(100vh - 50px); top: 50px; left: 0;
        box-shadow: 4px 0 12px rgba(0,0,0,0.15);
    }
    .sched-sidebar.mobile-open .sched-nav-item span,
    .sched-sidebar.mobile-open .sched-nav-subitem span { display: inline; }
    .sched-sidebar.mobile-open .sched-nav-section-label {
        display: flex; padding: 12px 12px 4px;
    }
    .sched-sidebar.mobile-open .sched-nav-section-label .sched-nav-section-text { display: inline; }
    .sched-sidebar.mobile-open .sched-nav-section-label .sched-nav-section-icon { display: none; }
    .sched-sidebar.mobile-open .sched-nav-section-label .sched-nav-collapse-icon { display: inline; }
    .sched-sidebar.mobile-open .sched-nav-item { justify-content: flex-start; padding: 8px 12px; }
}

/* ============================================================
   Survey Rating Pills
   Reusable radio-button pill component for 1-5 star ratings.
   Usage: wrap radio+label pairs in .survey-rating-group
   ============================================================ */
.survey-rating-group { display: flex; gap: 8px; flex-wrap: wrap; }
.survey-rating-group input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.survey-rating-group label {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 44px; padding: 8px 16px;
    border: 2px solid var(--setup-border); border-radius: 22px;
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.95rem;
    color: var(--setup-text); background: var(--setup-card);
    cursor: pointer; transition: all var(--setup-transition);
    user-select: none;
}
.survey-rating-group label:hover { border-color: var(--setup-accent); background: rgba(92,184,48,0.06); }
.survey-rating-group input[type="radio"]:checked + label {
    background: var(--setup-accent); color: #fff; border-color: var(--setup-accent);
    box-shadow: 0 2px 8px rgba(92,184,48,0.3);
}
.survey-rating-group input[type="radio"]:focus + label { box-shadow: 0 0 0 3px var(--setup-accent-glow); }
.survey-rating-endpoints { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--setup-text-muted); margin-top: 4px; }

/* ================================================================
   HELP CENTER
   ================================================================ */

/* --- Hero Section --- */
.helpcenter-hero {
    background: linear-gradient(160deg, #0f172a 0%, #1a2744 40%, #0f172a 100%) !important;
    color: #fff !important;
    padding: 52px 32px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Break out of container padding */
    margin-left: -15px;
    margin-right: -15px;
    margin-top: -1.5rem;
}
/* SVG wave at bottom */
.helpcenter-hero .hero-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 0;
}
.helpcenter-hero .hero-wave svg { width: 100%; height: auto; display: block; }
/* Green accent line at top */
.helpcenter-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(92,184,48,0.6), transparent);
}
/* Faint sport emoji textures */
.helpcenter-hero .hero-texture {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}
.helpcenter-hero .hero-texture span {
    position: absolute;
    opacity: 0.05;
    font-size: 2.2rem;
    user-select: none;
}
.helpcenter-hero .hero-texture span:nth-child(1) { top: 12%; right: 8%; transform: rotate(-15deg); }
.helpcenter-hero .hero-texture span:nth-child(2) { bottom: 22%; left: 5%; transform: rotate(10deg); }
.helpcenter-hero .hero-texture span:nth-child(3) { top: 8%; left: 15%; transform: rotate(20deg); font-size: 1.8rem; }
.helpcenter-hero .hero-texture span:nth-child(4) { bottom: 30%; right: 15%; font-size: 1.9rem; }
.helpcenter-hero .hero-texture span:nth-child(5) { top: 40%; left: 40%; font-size: 1.5rem; opacity: 0.03; }
.helpcenter-hero .hero-texture span:nth-child(6) { top: 20%; right: 30%; font-size: 1.6rem; opacity: 0.04; transform: rotate(-8deg); }
.helpcenter-hero .hero-content { position: relative; z-index: 2; }
.helpcenter-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 2.2rem;
    margin: 0 0 6px;
    letter-spacing: -0.5px;
    color: #fff !important;
}
.helpcenter-hero p {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem;
    color: rgba(255,255,255,0.7) !important;
    margin: 0 0 24px;
}

/* --- Search Bar --- */
.helpcenter-search {
    max-width: 560px;
    margin: 0 auto;
    position: relative;
}
.helpcenter-search input[type="text"] {
    width: 100%;
    padding: 14px 48px 14px 20px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 28px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    outline: none;
    transition: all var(--setup-transition);
    box-sizing: border-box;
}
.helpcenter-search input[type="text"]::placeholder { color: rgba(255,255,255,0.5); }
.helpcenter-search input[type="text"]:focus {
    border-color: var(--setup-accent);
    background: rgba(255,255,255,0.18);
    box-shadow: 0 0 0 3px var(--setup-accent-glow);
}
.helpcenter-search .search-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    pointer-events: none;
}

/* --- User Type Filter Pills --- */
.user-type-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
}
.user-type-filter .filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1.5px solid rgba(255,255,255,0.25);
    background: transparent;
    color: rgba(255,255,255,0.8);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--setup-transition);
    text-decoration: none;
}
.user-type-filter .filter-pill:hover {
    border-color: var(--setup-accent);
    color: #fff;
    background: rgba(92,184,48,0.15);
}
.user-type-filter .filter-pill.active {
    border-color: var(--setup-accent);
    background: var(--setup-accent);
    color: #fff;
    font-weight: 600;
}

/* --- Breadcrumb --- */
.helpcenter-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    color: var(--setup-text-muted);
    margin-bottom: 16px;
}
.helpcenter-breadcrumb a {
    color: var(--setup-blue);
    text-decoration: none;
    transition: color 0.15s ease;
}
.helpcenter-breadcrumb a:hover { color: var(--setup-accent); }
.helpcenter-breadcrumb .sep { color: var(--setup-text-muted); }

/* --- Category Grid --- */
.helpcenter-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}
.helpcenter-category-card {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    padding: 24px 20px;
    box-shadow: var(--setup-shadow);
    transition: all var(--setup-transition);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    text-align: center;
}
.helpcenter-category-card:hover {
    box-shadow: var(--setup-shadow-md);
    transform: translateY(-3px);
    border-color: var(--setup-accent);
    text-decoration: none;
    color: inherit;
}
.helpcenter-category-card .cat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 12px;
    color: #fff;
}
/* Gradient icon backgrounds */
.helpcenter-category-card .cat-icon.icon-green  { background: linear-gradient(135deg,#22c55e,#16a34a); box-shadow: 0 4px 12px rgba(34,197,94,0.3); }
.helpcenter-category-card .cat-icon.icon-teal   { background: linear-gradient(135deg,#06b6d4,#0891b2); box-shadow: 0 4px 12px rgba(6,182,212,0.3); }
.helpcenter-category-card .cat-icon.icon-blue   { background: linear-gradient(135deg,#3b82f6,#2563eb); box-shadow: 0 4px 12px rgba(59,130,246,0.3); }
.helpcenter-category-card .cat-icon.icon-amber  { background: linear-gradient(135deg,#f59e0b,#d97706); box-shadow: 0 4px 12px rgba(245,158,11,0.3); }
.helpcenter-category-card .cat-icon.icon-indigo { background: linear-gradient(135deg,#8b5cf6,#7c3aed); box-shadow: 0 4px 12px rgba(139,92,246,0.3); }
.helpcenter-category-card .cat-icon.icon-purple { background: linear-gradient(135deg,#a855f7,#9333ea); box-shadow: 0 4px 12px rgba(168,85,247,0.3); }
.helpcenter-category-card .cat-icon.icon-rose   { background: linear-gradient(135deg,#f43f5e,#e11d48); box-shadow: 0 4px 12px rgba(244,63,94,0.3); }
.helpcenter-category-card .cat-icon.icon-slate  { background: linear-gradient(135deg,#64748b,#475569); box-shadow: 0 4px 12px rgba(100,116,139,0.3); }
.helpcenter-category-card .cat-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--setup-text);
    margin-bottom: 4px;
}
.helpcenter-category-card .cat-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    color: var(--setup-text-secondary);
    line-height: 1.4;
    margin-bottom: 8px;
}
.helpcenter-category-card .cat-count {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    color: var(--setup-text-muted);
}
.helpcenter-category-card .cat-admin {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 4px;
}

/* --- Article Cards --- */
.helpcenter-article-card {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    padding: 20px 24px;
    box-shadow: var(--setup-shadow);
    transition: all var(--setup-transition);
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 10px;
}
.helpcenter-article-card:hover {
    box-shadow: var(--setup-shadow-md);
    border-color: var(--setup-accent);
    text-decoration: none;
    color: inherit;
}
.helpcenter-article-card .article-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--setup-text);
    margin-bottom: 4px;
}
.helpcenter-article-card .article-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    color: var(--setup-text-secondary);
    line-height: 1.4;
    margin-bottom: 8px;
}
.helpcenter-article-card .article-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.helpcenter-article-card .article-views {
    font-size: 0.75rem;
    color: var(--setup-text-muted);
}
.helpcenter-article-card .article-type-icon {
    font-size: 0.75rem;
    color: var(--setup-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.helpcenter-article-card .article-admin {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

/* --- User Type Pills (small inline badges) --- */
.user-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.user-type-pill.pill-athlete { background: var(--setup-blue-light); color: var(--setup-blue); }
.user-type-pill.pill-parent { background: rgba(139,92,246,0.1); color: #7c3aed; }
.user-type-pill.pill-coach { background: rgba(245,158,11,0.1); color: #d97706; }
.user-type-pill.pill-td { background: rgba(236,72,153,0.1); color: #db2777; }
.user-type-pill.pill-club { background: rgba(13,148,136,0.1); color: #0f766e; }

/* --- Featured Section --- */
.helpcenter-featured {
    margin: 24px 0;
}
.helpcenter-featured h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--setup-text);
    margin-bottom: 12px;
}
.helpcenter-featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

/* --- Article Content Area --- */
.helpcenter-content {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    padding: 32px;
    box-shadow: var(--setup-shadow);
    margin-bottom: 24px;
}
.helpcenter-content h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--setup-text);
    margin: 0 0 8px;
}
.helpcenter-content .article-header-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--setup-border-light);
}
.helpcenter-content .article-body {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--setup-text);
}
.helpcenter-content .article-body h1,
.helpcenter-content .article-body h2,
.helpcenter-content .article-body h3 {
    font-family: 'Outfit', sans-serif;
    color: var(--setup-text);
    margin-top: 24px;
}
.helpcenter-content .article-body img { max-width: 100%; border-radius: var(--setup-radius-sm); }
.helpcenter-content .article-body a { color: var(--setup-blue); }

/* --- Video Wrapper (16:9) --- */
.helpcenter-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--setup-radius);
    margin: 16px 0;
}
.helpcenter-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--setup-radius);
}

/* --- Scribe Wrapper --- */
.helpcenter-scribe-wrapper {
    border-radius: var(--setup-radius);
    overflow: hidden;
    margin: 16px 0;
}
.helpcenter-scribe-wrapper iframe {
    width: 100%;
    min-height: 600px;
    border: 0;
}

/* --- Related Articles --- */
.helpcenter-related {
    margin-top: 24px;
}
.helpcenter-related h4 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--setup-text);
    margin-bottom: 10px;
}

/* --- Category Header --- */
.helpcenter-cat-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.helpcenter-cat-header .cat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.helpcenter-cat-header .cat-info h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--setup-text);
    margin: 0 0 2px;
}
.helpcenter-cat-header .cat-info p {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.84rem;
    color: var(--setup-text-secondary);
    margin: 0;
}

/* --- Search within category --- */
.helpcenter-cat-search {
    position: relative;
    max-width: 400px;
    margin-bottom: 16px;
}
.helpcenter-cat-search input[type="text"] {
    width: 100%;
    padding: 10px 40px 10px 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.84rem;
    border: 1.5px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    background: var(--setup-input-bg, #fff);
    color: var(--setup-text);
    outline: none;
    transition: all var(--setup-transition);
    box-sizing: border-box;
}
.helpcenter-cat-search input[type="text"]:focus {
    border-color: var(--setup-accent);
    box-shadow: 0 0 0 3px var(--setup-accent-glow);
}
.helpcenter-cat-search .search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--setup-text-muted);
    font-size: 1rem;
    pointer-events: none;
}

/* --- Admin Action Buttons --- */
.helpcenter-admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--setup-border);
    background: var(--setup-card);
    color: var(--setup-text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all var(--setup-transition);
    text-decoration: none;
}
.helpcenter-admin-btn:hover {
    border-color: var(--setup-blue);
    color: var(--setup-blue);
    background: var(--setup-blue-light);
}
.helpcenter-admin-btn.btn-delete:hover {
    border-color: var(--setup-danger);
    color: var(--setup-danger);
    background: var(--setup-danger-light);
}

/* --- No Results --- */
.helpcenter-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--setup-text-muted);
    font-family: 'DM Sans', sans-serif;
}
.helpcenter-empty .mdi {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 10px;
    color: var(--setup-border);
}
.helpcenter-empty p {
    font-size: 0.9rem;
    margin: 0;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .helpcenter-hero { padding: 32px 16px 44px; }
    .helpcenter-hero h1 { font-size: 1.5rem; }
    .helpcenter-category-grid { grid-template-columns: 1fr; gap: 10px; }
    .helpcenter-featured-grid { grid-template-columns: 1fr; }
    .helpcenter-content { padding: 20px 16px; }
    .helpcenter-cat-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .user-type-filter { gap: 6px; }
    .user-type-filter .filter-pill { padding: 5px 12px; font-size: 0.78rem; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .helpcenter-category-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Help Chat Widget - AI floating chat
   ============================================================ */
.helpchat-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--setup-accent);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(92,184,48,0.35), 0 2px 6px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    z-index: 9998;
    transition: transform var(--setup-transition), box-shadow var(--setup-transition);
    animation: helpchat-pulse 3s ease-in-out infinite;
}
.helpchat-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(92,184,48,0.45), 0 3px 10px rgba(0,0,0,0.15);
}
.helpchat-fab-hidden { display: none !important; }

@keyframes helpchat-pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(92,184,48,0.35), 0 2px 6px rgba(0,0,0,0.12); }
    50% { box-shadow: 0 4px 24px rgba(92,184,48,0.55), 0 2px 10px rgba(0,0,0,0.15); }
}

.helpchat-panel {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 380px;
    height: 500px;
    background: var(--setup-card);
    border-radius: var(--setup-radius-lg);
    box-shadow: var(--setup-shadow-lg);
    display: flex;
    flex-direction: column;
    z-index: 9999;
    overflow: hidden;
    border: 1px solid var(--setup-border);
}

.helpchat-header {
    background: var(--setup-primary);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
}
.helpchat-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.helpchat-header-left i { font-size: 1.2rem; }
.helpchat-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px;
    opacity: 0.7;
    transition: opacity var(--setup-transition);
}
.helpchat-close:hover { opacity: 1; }

.helpchat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--setup-bg);
}

.helpchat-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: var(--setup-radius-sm);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.84rem;
    line-height: 1.5;
    word-wrap: break-word;
}
.helpchat-msg-user {
    align-self: flex-end;
    background: var(--setup-accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.helpchat-msg-ai {
    align-self: flex-start;
    background: var(--setup-card);
    color: var(--setup-text);
    border: 1px solid var(--setup-border-light);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.helpchat-msg-text { white-space: pre-wrap; }

.helpchat-articles {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.helpchat-article-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    background: var(--setup-blue-light);
    color: var(--setup-blue);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    transition: background var(--setup-transition), border-color var(--setup-transition);
}
.helpchat-article-link:hover {
    background: #dbeafe;
    border-color: var(--setup-blue);
}
.helpchat-article-link i { font-size: 1rem; flex-shrink: 0; }

.helpchat-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--setup-border-light);
    background: var(--setup-card);
}
.helpchat-input {
    flex: 1;
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    padding: 9px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.84rem;
    outline: none;
    transition: border-color var(--setup-transition), box-shadow var(--setup-transition);
}
.helpchat-input:focus {
    border-color: var(--setup-accent);
    box-shadow: 0 0 0 3px var(--setup-accent-glow);
}
.helpchat-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--setup-accent);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    transition: background var(--setup-transition);
}
.helpchat-send:hover { background: var(--setup-accent-hover); }

/* Typing indicator */
.helpchat-typing {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: var(--setup-card);
    border: 1px solid var(--setup-border-light);
    border-radius: var(--setup-radius-sm);
    border-bottom-left-radius: 4px;
}
.helpchat-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--setup-text-muted);
    animation: helpchat-bounce 1.4s ease-in-out infinite;
}
.helpchat-typing span:nth-child(2) { animation-delay: 0.16s; }
.helpchat-typing span:nth-child(3) { animation-delay: 0.32s; }

@keyframes helpchat-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* Responsive */
@media (max-width: 480px) {
    .helpchat-panel {
        width: calc(100vw - 16px);
        height: 400px;
        bottom: 8px;
        right: 8px;
    }
    .helpchat-fab {
        bottom: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
    }
}

/* ============================================================
   Age/Gender Configuration Components
   ============================================================ */

/* Underline Tabs (reusable — matches CheckSchedule pattern) */
.setup-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid var(--setup-border);
    margin-bottom: 20px;
    margin-top: 4px;
}
.setup-tab {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--setup-text-secondary);
    padding: 10px 18px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s ease;
    white-space: nowrap;
    user-select: none;
}
.setup-tab:hover {
    color: var(--setup-text);
    background: rgba(0,0,0,0.02);
}
.setup-tab.active {
    color: var(--setup-accent);
    font-weight: 600;
    border-bottom-color: var(--setup-accent);
}
.setup-tab .tab-badge {
    display: inline-block;
    background: var(--setup-danger);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}
.setup-tab .tab-badge.badge-ok {
    background: var(--setup-accent);
}

/* Age Grid — shared flex layout (pure flexbox, no BS grid) */
.age-grid-header,
.age-row-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Header row */
.age-grid-header {
    padding: 8px 8px;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--setup-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--setup-border);
}

/* Item row */
.age-grid-row {
    padding: 6px 8px;
    border-bottom: 1px solid var(--setup-border-light);
    transition: var(--setup-transition);
}
.age-grid-row:hover { background: rgba(0,0,0,0.02); }

/* Compact controls inside rows */
.age-grid-row .form-control,
.age-grid-row .form-select {
    font-size: 0.82rem;
    padding: 3px 6px;
    height: auto;
}

/* Column widths — keep everything on one line on desktop */
.age-col-toggle { width: 48px;  flex: 0 0 48px;  text-align: center; }
.age-col-age    { width: 48px;  flex: 0 0 48px;  font-weight: 600; }
.age-col-title  { width: 110px; flex: 1 1 110px; min-width: 70px; }
.age-col-div    { width: 120px; flex: 1 0 110px; }
.age-col-dur    { width: 72px;  flex: 0 0 72px; }
.age-col-field  { width: 80px;  flex: 0 0 80px; }
.age-col-status { width: 90px;  flex: 0 0 90px; }

/* Closed message — takes remaining space when age is unchecked */
.age-col-closed {
    flex: 1 1 0;
    font-size: 0.82rem;
    color: var(--setup-text-muted);
    font-style: italic;
}

/* Dropdowns/inputs fill their column */
.age-col-title  .form-control,
.age-col-div    .form-select,
.age-col-dur    .form-control,
.age-col-field  .form-select,
.age-col-status .form-select { width: 100%; }

/* Mobile: wrap into rows */
@media (max-width: 767.98px) {
    .age-grid-header { display: none; }
    .age-row-inner { flex-wrap: wrap; }
    .age-col-toggle { flex: 0 0 48px; }
    .age-col-age    { flex: 0 0 48px; }
    .age-col-closed { flex: 1 1 100%; padding-left: 48px; }
    .age-col-title  { flex: 1 1 100%; padding-left: 48px; }
    .age-col-div,
    .age-col-dur,
    .age-col-field,
    .age-col-status {
        flex: 1 1 calc(50% - 48px);
        min-width: 0;
        padding-left: 0;
    }
    .age-col-div:first-of-type { margin-left: 42px; }
    /* Labels visible on mobile */
    .age-col-div::before    { content: "Division";   display: block; font-size: 0.7rem; color: var(--setup-text-muted); }
    .age-col-dur::before    { content: "Duration";   display: block; font-size: 0.7rem; color: var(--setup-text-muted); }
    .age-col-field::before  { content: "Field Size"; display: block; font-size: 0.7rem; color: var(--setup-text-muted); }
    .age-col-status::before { content: "Status";     display: block; font-size: 0.7rem; color: var(--setup-text-muted); }
}

/* Per-Age Fill Button & Popover */
.pa-fill-btn {
    display: inline-block;
    margin-left: 6px;
    color: var(--setup-accent);
    font-size: 1rem;
    vertical-align: middle;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}
.pa-fill-btn:hover { opacity: 1; }
.pa-fill-popover {
    position: absolute;
    z-index: 100;
    background: var(--setup-card, #fff);
    border: 1px solid var(--setup-border, #e2e8f0);
    border-radius: var(--setup-radius-sm, 8px);
    box-shadow: var(--setup-shadow-md);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 0.78rem;
}
.pa-fill-popover select {
    font-size: 0.8rem;
    padding: 3px 6px;
    border: 1px solid var(--setup-border, #e2e8f0);
    border-radius: 4px;
}
.pa-fill-popover .pa-fill-apply {
    background: var(--setup-accent, #5cb830);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.pa-fill-popover .pa-fill-apply:hover { opacity: 0.85; }
.pa-fill-popover .pa-fill-close {
    color: var(--setup-text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

/* Age type dropdown row */
.age-type-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.age-type-row label {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}
.age-type-row .form-select {
    max-width: 220px;
}

/* ========== Online Check-in (OLC) Section ========== */

.olc-section {
    padding: 0;
}
.olc-section .olc-header {
    background: var(--setup-primary);
    padding: 18px 24px;
    border-radius: var(--setup-radius) var(--setup-radius) 0 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.olc-section .olc-header .olc-icon {
    width: 40px;
    height: 40px;
    background: rgba(92, 184, 48, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--setup-accent);
}
.olc-section .olc-header .olc-title {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Outfit', sans-serif;
}
.olc-section .olc-header .olc-subtitle {
    color: #94a3b8;
    font-size: 0.78rem;
}
.olc-section .olc-body {
    padding: 24px;
}
.olc-section .olc-intro {
    font-size: 0.84rem;
    color: var(--setup-text-secondary);
    line-height: 1.65;
    margin-bottom: 20px;
}

/* --- Enable Option Cards (3-col) --- */
.olc-option-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.olc-option-card {
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    padding: 16px;
    background: var(--setup-card);
    cursor: pointer;
    text-align: center;
    position: relative;
    transition: border-color var(--setup-transition), box-shadow var(--setup-transition), background var(--setup-transition);
}
.olc-option-card:hover {
    box-shadow: var(--setup-shadow-md);
}
.olc-option-card.selected {
    border-color: var(--setup-accent);
    border-width: 2px;
    background: #f0fdf4;
}
.olc-option-card .olc-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #fff;
    margin: 8px auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--setup-transition), background var(--setup-transition);
}
.olc-option-card.selected .olc-radio {
    border-color: var(--setup-accent);
    background: var(--setup-accent);
}
.olc-option-card.selected .olc-radio::after {
    content: '\2713';
    color: #fff;
    font-size: 12px;
}
.olc-option-card .olc-card-title {
    font-weight: 700;
    font-size: 0.84rem;
    color: var(--setup-text);
    margin-bottom: 4px;
}
.olc-option-card .olc-card-desc {
    font-size: 0.75rem;
    color: var(--setup-text-secondary);
}
.olc-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--setup-accent);
    color: #fff;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-transform: uppercase;
}

/* --- Fee Toggle Row --- */
.olc-fee-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 14px 16px;
    background: var(--setup-card);
    border-radius: var(--setup-radius-sm);
    border: 1px solid var(--setup-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.olc-fee-toggle .olc-fee-label {
    flex: 1;
}
.olc-fee-toggle .olc-fee-label strong {
    font-size: 0.84rem;
    color: var(--setup-text);
}
.olc-fee-toggle .olc-fee-label .olc-fee-note {
    font-size: 0.72rem;
    color: var(--setup-text-secondary);
    display: block;
}

/* --- Approval Comparison Grid (2-col) --- */
.olc-approval-header {
    margin-bottom: 16px;
}
.olc-approval-header h4 {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--setup-text);
    font-family: 'Outfit', sans-serif;
    margin-bottom: 4px;
}
.olc-approval-header p {
    font-size: 0.82rem;
    color: var(--setup-text-secondary);
    margin: 0;
}
.olc-approval-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.olc-approval-card {
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--setup-transition), box-shadow var(--setup-transition);
    position: relative;
}
.olc-approval-card:hover {
    box-shadow: var(--setup-shadow-md);
}
.olc-approval-card.selected {
    border-color: var(--setup-accent);
    border-width: 2px;
    box-shadow: 0 2px 8px rgba(92, 184, 48, 0.12);
}
.olc-approval-card .olc-approval-card-header {
    padding: 16px 16px 12px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    gap: 10px;
}
.olc-approval-card.selected .olc-approval-card-header {
    background: #f0fdf4;
}
.olc-approval-card .olc-approval-radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--setup-transition), background var(--setup-transition);
}
.olc-approval-card.selected .olc-approval-radio {
    border-color: var(--setup-accent);
    background: var(--setup-accent);
}
.olc-approval-card.selected .olc-approval-radio::after {
    content: '\2713';
    color: #fff;
    font-size: 12px;
}
.olc-approval-card .olc-approval-card-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--setup-text);
}
.olc-approval-card .olc-approval-card-body {
    padding: 16px;
}
.olc-approval-card .olc-approval-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--setup-accent);
    color: #fff;
    padding: 4px 12px;
    border-radius: 0 10px 0 10px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* --- Credit Display --- */
.olc-credit-display {
    text-align: center;
    padding: 12px 0;
    margin-bottom: 12px;
    background: #f8faf5;
    border-radius: var(--setup-radius-sm);
}
.olc-approval-card:not(.selected) .olc-credit-display {
    background: #f8fafc;
}
.olc-credit-display .olc-credit-label {
    font-size: 0.68rem;
    color: var(--setup-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}
.olc-credit-display .olc-credit-amount {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--setup-text);
}
.olc-approval-card.selected .olc-credit-amount {
    color: var(--setup-accent);
}
.olc-credit-display .olc-credit-unit {
    font-size: 0.75rem;
    color: var(--setup-text-secondary);
}
.olc-approval-card .olc-approval-features {
    font-size: 0.78rem;
    color: var(--setup-text-secondary);
    padding-left: 16px;
    margin: 0;
    line-height: 1.8;
}

/* --- OLC Info Box (uses setup-info base) --- */
.olc-event-minimum {
    border-left: 3px solid var(--setup-blue);
}

/* --- Responsive --- */
@media (max-width: 767px) {
    .olc-option-cards {
        grid-template-columns: 1fr;
    }
    .olc-approval-grid {
        grid-template-columns: 1fr;
    }
    .olc-credit-display .olc-credit-amount {
        font-size: 1.5rem;
    }
}

/* ========== Setup Tab Bar ========== */
.setup-tab-bar {
    display: flex;
    background: var(--setup-primary);
    border-radius: var(--setup-radius-lg) var(--setup-radius-lg) 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.setup-tab-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    color: var(--setup-text-muted);
    font-size: 0.84rem;
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color var(--setup-transition), border-color var(--setup-transition), background var(--setup-transition);
    cursor: pointer;
}
.setup-tab-link:hover:not(.disabled) {
    color: #e2e8f0;
    background: rgba(255,255,255,0.05);
}
.setup-tab-link.active {
    color: #fff;
    background: var(--setup-primary-light);
    border-bottom-color: var(--setup-accent);
    font-weight: 600;
}
.setup-tab-link.disabled {
    color: #475569;
    cursor: not-allowed;
    opacity: 0.5;
}
.setup-tab-link .tab-icon {
    font-size: 1.1rem;
}

/* ========== Form Cards ========== */
.setup-form-card {
    background: var(--setup-card);
    border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow);
    overflow: hidden;
    margin-bottom: 20px;
}
.setup-form-card .form-card-header {
    background: var(--setup-primary);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.setup-form-card .form-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.form-card-icon.icon-blue { background: rgba(59,130,246,0.2); color: #3b82f6; }
.form-card-icon.icon-purple { background: rgba(139,92,246,0.2); color: #8b5cf6; }
.form-card-icon.icon-green { background: rgba(92,184,48,0.2); color: var(--setup-accent); }
.form-card-icon.icon-amber { background: rgba(249,115,22,0.2); color: #f97316; }
.form-card-icon.icon-rose { background: rgba(244,63,94,0.2); color: #f43f5e; }
.form-card-icon.icon-teal { background: rgba(20,184,166,0.2); color: #14b8a6; }
.form-card-icon.icon-indigo { background: rgba(99,102,241,0.2); color: #6366f1; }
.form-card-icon.icon-slate { background: rgba(100,116,139,0.2); color: #64748b; }
.setup-form-card .form-card-title {
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: 'Outfit', sans-serif;
}
.setup-form-card .form-card-body {
    padding: 24px;
}
.setup-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.setup-form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.setup-form-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.setup-form-field label {
    display: block;
    font-size: 0.75rem;
    color: var(--setup-text-secondary);
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
@media (max-width: 767px) {
    .setup-form-grid,
    .setup-form-grid.cols-3,
    .setup-form-grid.cols-4 {
        grid-template-columns: 1fr;
    }
}

/* ========== Upsell Cards ========== */
.setup-upsell {
    background: var(--setup-card);
    border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow);
    overflow: hidden;
    margin-bottom: 20px;
}
.setup-upsell .upsell-header {
    background: var(--setup-primary);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.setup-upsell .upsell-header .upsell-title {
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: 'Outfit', sans-serif;
}
.setup-upsell .upsell-badge {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 8px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.upsell-badge.badge-popular { background: rgba(249,115,22,0.2); color: #f97316; }
.upsell-badge.badge-revenue { background: rgba(92,184,48,0.2); color: var(--setup-accent); }
.upsell-badge.badge-preferred { background: rgba(92,184,48,0.3); color: var(--setup-accent); }
.setup-upsell .upsell-body {
    padding: 20px;
}
.setup-upsell-highlight {
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border: 1px solid #bbf7d0;
    border-radius: var(--setup-radius-sm);
    padding: 16px;
    margin-bottom: 16px;
}
.setup-upsell-highlight .highlight-badge {
    display: inline-block;
    background: var(--setup-accent);
    color: #fff;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.setup-upsell-highlight .highlight-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--setup-text);
    margin-bottom: 4px;
}
.setup-upsell-highlight .highlight-desc {
    font-size: 0.78rem;
    color: var(--setup-text-secondary);
    line-height: 1.5;
}
.setup-upsell .upsell-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--setup-radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--setup-transition);
}
.upsell-cta.cta-primary {
    background: var(--setup-accent);
    color: #fff;
    border: none;
}
.upsell-cta.cta-primary:hover { background: var(--setup-accent-hover); }
.upsell-cta.cta-secondary {
    background: #f1f5f9;
    color: var(--setup-text-secondary);
    border: none;
}
.upsell-cta.cta-secondary:hover { background: #e2e8f0; }

/* ========== Choice Cards ========== */
.setup-choice-cards {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.setup-choice-cards.vertical {
    flex-direction: column;
}
.setup-choice-card {
    flex: 1;
    min-width: 120px;
    background: #f8fafc;
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    padding: 10px 14px;
    text-align: center;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--setup-text-secondary);
    transition: all var(--setup-transition);
}
.setup-choice-card:hover {
    border-color: #cbd5e1;
    box-shadow: var(--setup-shadow);
}
.setup-choice-card.selected {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
    font-weight: 600;
}
.setup-choice-cards.vertical .setup-choice-card {
    text-align: left;
}

/* ========== Tab Content (setup page) ========== */
.setup-tab-content {
    background: var(--setup-bg);
    padding: 24px;
    border-radius: 0 0 var(--setup-radius-lg) var(--setup-radius-lg);
    min-height: 300px;
}
@media (max-width: 767px) {
    .setup-tab-bar { border-radius: 0; }
    .setup-tab-link { padding: 12px 14px; font-size: 0.75rem; }
    .setup-tab-content { padding: 16px; border-radius: 0; }
}

/* Secondary body copy on Event Site Setup (setup.aspx) */
.setup-body-text {
    font-size: 0.84rem;
    color: var(--setup-text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

/* ========== Contract Signature Pad (setup.aspx) ==========
   Moved from setup.aspx's inline styles. TTEvent.aspx keeps its own identical
   inline copy plus .ttev overrides, so these rules do not change it. */
.signature-pad {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 10px;
    width: 100%;
    height: 400px;
    max-width: 700px;
    margin: 0 auto;
    max-height: 460px;
    border: 1px solid #ddd;
    background-color: #efefef;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
    border-radius: 4px;
    padding: 16px;
}
.signature-pad::before,
.signature-pad::after {
    position: absolute;
    z-index: -1;
    content: "";
    width: 40%;
    height: 10px;
    bottom: 10px;
    background: transparent;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}
.signature-pad::before {
    left: 20px;
    -webkit-transform: skew(-3deg) rotate(-3deg);
    transform: skew(-3deg) rotate(-3deg);
}
.signature-pad::after {
    right: 20px;
    -webkit-transform: skew(3deg) rotate(3deg);
    transform: skew(3deg) rotate(3deg);
}
.signature-pad--body {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border: 1px solid #f4f4f4;
}
.signature-pad--body canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}
.signature-pad--footer {
    color: #C3C3C3;
    text-align: center;
    font-size: 1.2em;
    margin-top: 8px;
}
.signature-pad--actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 8px;
}

/* ============================================================
   Registration Setup - Page-Specific Components
   (gender pills, option chips, payment cards, pricing grids)
   ============================================================ */

/* ---------- Gender Pills ---------- */
.gender-pills {
    display: flex;
    gap: 6px;
}
.gender-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1.5px solid var(--setup-border);
    background: var(--setup-card);
    color: var(--setup-text-secondary);
    cursor: pointer;
    transition: var(--setup-transition);
}
.gender-pill span {
    all: unset;
    display: inline-flex;
    align-items: center;
}
.gender-pill span > label {
    display: none;
}
.gender-pill input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
    cursor: pointer;
    margin: 0;
    transition: var(--setup-transition);
    position: relative;
}
.gender-pill input[type="checkbox"]:checked {
    background: currentColor;
}
.gender-pill input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 0;
    width: 5px;
    height: 8px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.gender-pill.active-male {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}
.gender-pill.active-female {
    background: #fce7f3;
    border-color: #f9a8d4;
    color: #be185d;
}
.gender-pill.active-coed {
    background: #e0e7ff;
    border-color: #a5b4fc;
    color: #4338ca;
}

/* ---------- Option Chips ---------- */
.option-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 500;
    background: var(--setup-input-bg);
    color: var(--setup-text);
    border: 1px solid var(--setup-border-light);
    margin: 2px;
}
.option-chip .mdi {
    font-size: 0.85rem;
    color: var(--setup-success);
}

/* ---------- Question Type Cards ---------- */
.qtype-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.qtype-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border: 1.5px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    background: var(--setup-card);
    cursor: pointer;
    transition: var(--setup-transition);
    text-align: center;
}
.qtype-card:hover {
    border-color: var(--setup-accent);
    background: var(--setup-input-focus);
}
.qtype-card.selected {
    border-color: var(--setup-accent);
    background: var(--setup-input-focus);
    box-shadow: 0 0 0 3px rgba(92,184,48,0.18);
}
.qtype-card .qtype-icon {
    font-size: 1.2rem;
    color: var(--setup-accent);
}
.qtype-card .qtype-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--setup-text-secondary);
}
/* A question type that has run out of storage slots (Text Box is capped by the
   number of text columns ttlist2 has). Still rendered so the type stays
   discoverable, but visibly not selectable - the title says why. */
.qtype-card.qtype-disabled,
.qtype-card.qtype-disabled:hover {
    cursor: not-allowed;
    opacity: 0.45;
    border-color: var(--setup-border);
    background: var(--setup-card);
}

/* ---------- State Checkbox Grid ---------- */
.state-grid {
    border-collapse: separate;
    border-spacing: 2px 2px;
    width: 100%;
}
.state-grid td {
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.76rem;
    white-space: nowrap;
    transition: var(--setup-transition);
    vertical-align: middle;
}
.state-grid td:hover {
    background: var(--setup-input-bg);
}
.state-grid td label {
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
}
.state-grid input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--setup-accent);
    vertical-align: middle;
}
.state-grid span.form-check-input {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.state-grid span.form-check-input > label {
    display: inline;
    font-size: 0.76rem;
    cursor: pointer;
    margin-left: 4px;
}

/* ---------- Payment Method Choice Cards ---------- */
.pay-method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}
.pay-method-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 12px;
    border: 2px solid var(--setup-border);
    border-radius: var(--setup-radius);
    background: var(--setup-card);
    cursor: pointer;
    transition: var(--setup-transition);
    text-align: center;
    position: relative;
    user-select: none;
}
.pay-method-card:hover {
    border-color: var(--setup-primary-light);
    background: var(--setup-input-bg);
}
.pay-method-card.selected {
    border-color: var(--setup-accent);
    background: var(--setup-input-focus);
    box-shadow: 0 0 0 3px var(--setup-accent-glow);
}
.pay-method-card .pay-method-cb,
.pay-method-card .pay-method-cb > label,
.pay-method-card .pay-check-input,
.pay-method-card .pay-check-input > label {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}
.pay-method-card .pay-method-icon {
    font-size: 1.6rem;
    color: var(--setup-text-muted);
    transition: var(--setup-transition);
}
.pay-method-card.selected .pay-method-icon {
    color: var(--setup-accent);
}
.pay-method-card .pay-method-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--setup-text);
}
@media (max-width: 560px) {
    .pay-method-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Payment Card Tiles ---------- */
.payment-option-tile {
    border: 1.5px solid var(--setup-border);
    border-radius: var(--setup-radius);
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: var(--setup-transition);
    background: var(--setup-card);
}
.payment-option-tile:hover {
    border-color: var(--setup-primary-light);
}
.payment-option-tile.enabled {
    border-color: var(--setup-accent);
    background: linear-gradient(135deg, var(--setup-input-focus) 0%, var(--setup-card) 100%);
}
.payment-option-tile .tile-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.payment-option-tile .tile-logo {
    width: 40px;
    height: 40px;
    border-radius: var(--setup-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    flex-shrink: 0;
}
.payment-option-tile .tile-details {
    display: none;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--setup-border-light);
}
.payment-option-tile.enabled .tile-details {
    display: block;
}

/* ---------- Coupon Amount Input Groups ---------- */
.coupon-amt-group {
    display: inline-flex !important;
    width: auto;
    max-width: 160px;
    align-items: stretch;
}
.coupon-amt-group .input-group-text {
    padding: 8px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    background: var(--setup-input-bg, #f8fafc);
    border: 1.5px solid var(--setup-border);
    color: var(--setup-text-secondary);
    display: flex;
    align-items: center;
}
.coupon-amt-group .coupon-dollar {
    border-radius: var(--setup-radius-sm) 0 0 var(--setup-radius-sm);
    border-right: 0;
}
.coupon-amt-group .coupon-pct {
    border-radius: 0 var(--setup-radius-sm) var(--setup-radius-sm) 0;
    border-left: 0;
}
.coupon-amt-group .coupon-amt {
    width: 80px !important;
    flex: 0 0 80px;
    padding: 8px 12px;
    font-size: 0.875rem;
    line-height: 1.5;
    height: auto;
    margin: 0;
    border: 1.5px solid var(--setup-border);
    border-radius: 0;
    text-align: right;
}
/* When $ is visible: input has no left radius, right radius on input */
.coupon-amt-group.mode-dollar .coupon-amt {
    border-radius: 0 var(--setup-radius-sm) var(--setup-radius-sm) 0;
}
/* When % is visible: input has left radius, no right radius */
.coupon-amt-group.mode-pct .coupon-amt {
    border-radius: var(--setup-radius-sm) 0 0 var(--setup-radius-sm);
}

/* ---------- Hide Options Column When No Div Options ---------- */
.hide-options-col .col-options {
    display: none;
}

/* ---------- Coupon & Discount Tables ---------- */
.coupon-table,
.qty-discount-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.78rem;
    margin-top: 8px;
}
.coupon-table thead th,
.qty-discount-table thead th {
    background: var(--setup-input-bg);
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--setup-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 10px;
    border-bottom: 1.5px solid var(--setup-border);
    white-space: nowrap;
}
.coupon-table tbody td,
.qty-discount-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--setup-border-light);
    vertical-align: middle;
}
.coupon-table tbody tr:hover,
.qty-discount-table tbody tr:hover {
    background: var(--setup-card-hover);
}
.coupon-table input[type="text"],
.qty-discount-table input[type="text"] {
    padding: 4px 8px;
    font-size: 0.78rem;
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    background: var(--setup-card);
    transition: var(--setup-transition);
}
.coupon-table input[type="text"]:focus,
.qty-discount-table input[type="text"]:focus {
    border-color: var(--setup-accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(92,184,48,0.18);
}
.coupon-table label,
.qty-discount-table label {
    font-size: 0.75rem;
    margin-bottom: 0;
    cursor: pointer;
}
.coupon-table select,
.qty-discount-table select {
    padding: 4px 8px;
    font-size: 0.78rem;
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    background: var(--setup-card);
}

/* ---------- Per-Age Limits Grid ---------- */
.per-age-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.72rem;
    overflow-x: auto;
    display: block;
}
.per-age-grid thead th {
    background: var(--setup-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.68rem;
    padding: 6px 4px;
    text-align: center;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
.per-age-grid thead th:first-child {
    background: var(--setup-primary-light);
    min-width: 90px;
    text-align: left;
    padding-left: 8px;
}
.per-age-grid tbody td {
    padding: 1px;
    text-align: center;
    border-bottom: 1px solid var(--setup-border-light);
}
.per-age-grid tbody td:first-child {
    text-align: left;
    padding-left: 8px;
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--setup-text-secondary);
    white-space: nowrap;
    background: var(--setup-input-bg);
}
.per-age-grid input[type="text"] {
    width: 32px;
    padding: 2px 3px;
    text-align: center;
    font-size: 0.72rem;
    border: 1px solid var(--setup-border-light);
    border-radius: 3px;
    background: var(--setup-card);
    transition: var(--setup-transition);
}
.per-age-grid input[type="text"]:focus {
    border-color: var(--setup-accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(92,184,48,0.2);
}
.per-age-scroll {
    max-height: 370px;
    overflow: auto;
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    margin-top: 8px;
}

/* ---------- Additional Payment Options Card ---------- */
.payment-extras-card {
    background: var(--setup-input-bg);
    border: 1px solid var(--setup-border-light);
    border-radius: var(--setup-radius);
    padding: 16px 20px;
    margin-top: 16px;
}
.payment-extras-card h6 {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--setup-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ---------- Roster Management Section ---------- */
.roster-mgmt-section {
    background: var(--setup-input-bg);
    border: 1px solid var(--setup-border-light);
    border-radius: var(--setup-radius);
    padding: 16px;
    margin-top: 12px;
}
.roster-mgmt-section h6 {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--setup-primary);
    margin-bottom: 10px;
}

/* ---------- Insurance & Waitlist Row ---------- */
.option-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    border: 1px solid var(--setup-border-light);
    border-radius: var(--setup-radius-sm);
    background: var(--setup-card);
    margin-bottom: 8px;
}
.option-row label {
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 0;
}

/* ---------- Bypass Age/Gender Grid ---------- */
.bypass-grid-wrapper {
    margin-top: 8px;
}
.bypass-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--setup-blue-light);
    border-left: 3px solid var(--setup-blue);
    border-radius: var(--setup-radius-sm);
    font-size: 0.78rem;
    color: var(--setup-text-secondary);
    line-height: 1.4;
}
.bypass-info .mdi {
    color: var(--setup-blue);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.bypass-grid-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 4px;
}
.bypass-grid {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 640px;
    font-size: 0.75rem;
    font-family: 'DM Sans', sans-serif;
}
.bypass-grid thead th {
    background: var(--setup-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.7rem;
    text-align: center;
    padding: 6px 4px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.bypass-grid thead th:first-child {
    border-radius: var(--setup-radius-sm) 0 0 0;
    text-align: right;
    padding-right: 10px;
}
.bypass-grid thead th:last-child {
    border-radius: 0 var(--setup-radius-sm) 0 0;
}
.bypass-grid tbody td {
    text-align: center;
    padding: 5px 4px;
    background: var(--setup-card);
    border-bottom: 1px solid var(--setup-border-light);
    transition: background var(--setup-transition);
}
.bypass-grid tbody tr:hover td {
    background: var(--setup-input-focus, #f0fdf4);
}
.bypass-grid tbody tr:last-child td:first-child {
    border-radius: 0 0 0 var(--setup-radius-sm);
}
.bypass-grid tbody tr:last-child td:last-child {
    border-radius: 0 0 var(--setup-radius-sm) 0;
}
.bypass-label-col {
    text-align: right !important;
    padding-right: 10px !important;
    font-weight: 600;
    color: var(--setup-text);
    white-space: nowrap;
    min-width: 100px;
}
.bypass-grid input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--setup-accent);
    cursor: pointer;
    border-radius: 3px;
}

/* ---------- Registration Responsive ---------- */
@media (max-width: 768px) {
    .qtype-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .state-grid td {
        font-size: 0.68rem;
        padding: 2px 4px;
    }
    .coupon-table, .qty-discount-table {
        font-size: 0.72rem;
    }
    .coupon-table th, .qty-discount-table th {
        font-size: 0.65rem;
    }
    .per-age-grid {
        font-size: 0.65rem;
    }
    .bypass-grid {
        font-size: 0.68rem;
    }
    .bypass-grid thead th {
        font-size: 0.62rem;
        padding: 4px 2px;
    }
    .bypass-label-col {
        min-width: 80px;
        font-size: 0.68rem;
    }
}

/* ===== Parking Passes ===== */
.pass-card {
    background: var(--setup-card);
    border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow);
    padding: 24px;
    transition: var(--setup-transition);
}
.pass-card:hover {
    box-shadow: var(--setup-shadow-md);
}
.pass-qr {
    padding: 12px;
    background: #fff;
    border-radius: var(--setup-radius-sm);
    display: inline-block;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.pass-status-valid {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(92,184,48,0.1);
    color: var(--setup-accent);
}
.pass-status-used {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--setup-danger-light);
    color: var(--setup-danger);
}
.scan-result-success {
    background: var(--setup-accent);
    color: #fff;
    padding: 32px 24px;
    border-radius: var(--setup-radius-lg);
    text-align: center;
}
.scan-result-fail {
    background: var(--setup-danger);
    color: #fff;
    padding: 32px 24px;
    border-radius: var(--setup-radius-lg);
    text-align: center;
}
.scanner-viewport {
    width: 100%;
    min-height: 300px;
    background: #000;
    border-radius: var(--setup-radius) var(--setup-radius) 0 0;
    overflow: hidden;
}

/* ============================================================
   SCHED2 PAGE SHARED STYLES
   Common styles for all sched2/ scheduling pages.
   Pages opt in by adding class="sched2-page" to their wrapper.
   ============================================================ */

/* --- Base wrapper --- */
.sched2-page {
    font-family: var(--setup-font);
    color: var(--setup-text);
    background: var(--setup-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Sched2 button states (complete / incomplete) --- */
.sched2-page .btns-secondary,
.ages-divs-wrapper .btns-secondary {
    background: var(--setup-warning-light) !important; color: #9a3412 !important; border: 1px solid #fed7aa !important;
}
.sched2-page .btns-secondary .mdi,
.ages-divs-wrapper .btns-secondary .mdi { color: var(--setup-warning); font-size: 0.85rem; vertical-align: -1px; }
/* Delete buttons (btns-secondary + bg-danger): the amber icon above was unreadable on red */
.sched2-page .btns-secondary.bg-danger,
.ages-divs-wrapper .btns-secondary.bg-danger {
    background: var(--setup-danger) !important; border-color: var(--setup-danger) !important; color: #fff !important;
}
.sched2-page .btns-secondary.bg-danger .mdi,
.ages-divs-wrapper .btns-secondary.bg-danger .mdi { color: #fff; }
.sched2-page .btns-dim,
.ages-divs-wrapper .btns-dim {
    background: #f0fdf4 !important; color: #166534 !important; border: 1px solid #bbf7d0 !important;
}
.sched2-page .btns-dim .mdi,
.ages-divs-wrapper .btns-dim .mdi { font-size: 0.85rem; vertical-align: -1px; }
.sched2-page .btns-darkgray {
    background: #f0fdf4 !important; color: #166534 !important; border: 1px solid #bbf7d0 !important;
}
.sched2-page .btns-darkgray .mdi { font-size: 0.85rem; vertical-align: -1px; }

/* --- Page header / title --- */
.sched2-page .sched2-page-title {
    font-family: var(--setup-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--setup-primary);
    margin: 0 0 4px 0;
}
.sched2-page .sched2-page-subtitle {
    font-size: 0.85rem;
    color: var(--setup-text-secondary);
    margin: 0;
}

/* --- Dark page header bar --- */
.sched2-page .sched2-header-bar {
    background: var(--setup-primary);
    color: #fff;
    padding: 16px 24px;
    border-radius: var(--setup-radius-lg) var(--setup-radius-lg) 0 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.sched2-page .sched2-header-bar h2,
.sched2-page .sched2-header-bar h3 {
    margin: 0;
    font-family: var(--setup-font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

/* --- Card --- */
.sched2-page .sched2-card {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow);
    margin-bottom: 20px;
    overflow: hidden;
}
.sched2-page .sched2-card-body {
    padding: 20px 24px;
}

/* --- Card header --- */
.sched2-page .sched2-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--setup-border-light);
    background: #fafbfc;
}
.sched2-page .sched2-card-header h2,
.sched2-page .sched2-card-header h3 {
    font-family: var(--setup-font-heading);
    font-size: 1rem;
    font-weight: 650;
    color: var(--setup-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- Dark card header variant --- */
.sched2-page .sched2-card-header-dark {
    background: var(--setup-primary);
    color: #fff;
    font-family: var(--setup-font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 12px 20px;
}

/* --- Table header rows --- */
.sched2-page .header {
    background: var(--setup-primary);
    color: #fff;
    font-family: var(--setup-font-heading);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
}
.sched2-page .header td,
.sched2-page .header th {
    background: var(--setup-primary) !important;
    color: #fff !important;
    padding: 8px 12px;
    border: none;
}

/* --- Table data rows --- */
.sched2-page .tblrow td,
.sched2-page .gridRow td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--setup-border-light);
    font-size: 0.82rem;
    vertical-align: middle;
}
.sched2-page .altrow td,
.sched2-page .gridAltRow td {
    padding: 8px 12px;
    background: #f8fafc;
    border-bottom: 1px solid var(--setup-border-light);
    font-size: 0.82rem;
    vertical-align: middle;
}
.sched2-page .tblrow:hover td,
.sched2-page .gridRow:hover td {
    background: #f8fafc;
}
.sched2-page .altrow:hover td,
.sched2-page .gridAltRow:hover td {
    background: #f1f5f9;
}

/* --- Buttons --- */
.sched2-page .sched2-btn-primary {
    background: var(--setup-accent);
    border: none;
    color: #fff;
    padding: 8px 20px;
    border-radius: var(--setup-radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--setup-font);
    cursor: pointer;
    transition: var(--setup-transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sched2-page .sched2-btn-primary:hover {
    background: var(--setup-accent-hover);
    transform: translateY(-1px);
}

.sched2-page .sched2-btn-secondary {
    background: #fff;
    border: 1px solid var(--setup-border);
    color: var(--setup-text);
    padding: 8px 16px;
    border-radius: var(--setup-radius-sm);
    font-size: 0.82rem;
    font-weight: 500;
    font-family: var(--setup-font);
    cursor: pointer;
    transition: var(--setup-transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sched2-page .sched2-btn-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.sched2-page .sched2-btn-danger {
    background: transparent;
    border: 1px solid var(--setup-danger);
    color: var(--setup-danger);
    padding: 8px 16px;
    border-radius: var(--setup-radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--setup-font);
    cursor: pointer;
    transition: var(--setup-transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sched2-page .sched2-btn-danger:hover {
    background: var(--setup-danger);
    color: #fff;
}

.sched2-page .sched2-btn-sm {
    padding: 5px 12px;
    font-size: 0.75rem;
}

/* --- Form control focus states --- */
.sched2-page input[type="text"],
.sched2-page textarea,
.sched2-page select {
    font-family: var(--setup-font);
    font-size: 0.875rem;
    transition: var(--setup-transition);
}
.sched2-page input[type="text"]:focus,
.sched2-page textarea:focus,
.sched2-page select:focus {
    outline: none;
    border-color: var(--setup-accent);
    box-shadow: 0 0 0 3px var(--setup-accent-glow);
}

/* --- Tab navigation --- */
.sched2-page .sched2-tabs,
.ttparms-page .sched2-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--setup-border);
    padding: 0;
    flex-wrap: wrap;
}
.sched2-page .sched2-tab,
.ttparms-page .sched2-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-family: var(--setup-font);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--setup-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.sched2-page .sched2-tab:hover,
.ttparms-page .sched2-tab:hover {
    color: var(--setup-text);
    background: #f8fafc;
}
.sched2-page .sched2-tab.active,
.ttparms-page .sched2-tab.active {
    color: var(--setup-accent);
    border-bottom-color: var(--setup-accent);
    font-weight: 600;
}

/* --- Message / alert labels --- */
.sched2-page .sched2-msg {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--setup-danger);
    display: block;
}
.sched2-page .sched2-msg-success {
    color: var(--setup-accent);
}
.sched2-page .sched2-msg-info {
    color: var(--setup-blue);
}

/* --- Badge --- */
.sched2-page .sched2-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--setup-border-light);
    color: var(--setup-text-secondary);
}
.sched2-page .sched2-badge-success {
    background: var(--setup-success-light);
    color: var(--setup-accent);
}
.sched2-page .sched2-badge-danger {
    background: var(--setup-danger-light);
    color: var(--setup-danger);
}
.sched2-page .sched2-badge-blue {
    background: var(--setup-blue-light);
    color: var(--setup-blue);
}
.sched2-page .sched2-badge-warning {
    background: var(--setup-warning-light);
    color: var(--setup-warning);
}

/* --- Toolbar / filter bar --- */
.sched2-page .sched2-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow);
    padding: 14px 18px;
    margin-bottom: 16px;
}

/* --- Fade-in animation --- */
@keyframes sched2FadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.sched2-page .sched2-fade-in {
    opacity: 0;
    animation: sched2FadeUp 0.4s ease forwards;
}

/* --- CSS loading spinner (replaces loading_bar.gif in CallbackPanels) --- */
@keyframes sched2Spin {
    to { transform: rotate(360deg); }
}
.sched2-page .as1-cb-loading,
.as1-cb-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 28px 20px;
    color: var(--setup-text-secondary);
    font-size: 0.85rem;
    font-family: var(--setup-font);
}
.sched2-page .as1-cb-loading::before,
.as1-cb-loading::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--setup-border);
    border-top-color: var(--setup-accent);
    border-radius: 50%;
    animation: sched2Spin 0.65s linear infinite;
}

/* ============================================================
   LOGIN / AUTH — Reusable components for authentication pages
   (TTLogIn.aspx and any future auth flow)
   ============================================================ */

.login-wrapper {
    padding: 32px 16px 48px;
    font-family: var(--setup-font);
}
.login-container {
    max-width: 440px;
    margin: 0 auto;
}
.login-card {
    background: var(--setup-card);
    border-radius: var(--setup-radius-lg);
    box-shadow: var(--setup-shadow-md);
    padding: 36px 32px 32px;
}
.login-card-header {
    text-align: center;
    margin-bottom: 24px;
}
.login-logo {
    max-height: 48px;
    margin-bottom: 16px;
}
.login-title {
    font-family: var(--setup-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--setup-text);
    margin: 0 0 4px;
}
.login-subtitle {
    font-family: var(--setup-font);
    font-size: 0.875rem;
    color: var(--setup-text-secondary);
    margin: 0;
}

/* Form fields */
.login-form-group {
    margin-bottom: 16px;
}
.login-form-group .form-label {
    display: block;
    font-family: var(--setup-font);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--setup-text);
    margin-bottom: 6px;
}
.login-form-group .form-control {
    width: 100%;
    padding: 10px 12px 10px 38px;
    font-family: var(--setup-font);
    font-size: 0.875rem;
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    background: var(--setup-input-bg);
    color: var(--setup-text);
    transition: border-color var(--setup-transition), box-shadow var(--setup-transition);
    box-sizing: border-box;
}
.login-form-group .form-control:focus {
    outline: none;
    border-color: var(--setup-accent);
    background: var(--setup-input-focus);
    box-shadow: 0 0 0 3px var(--setup-accent-glow);
}
.login-input-wrap {
    position: relative;
}
.login-input-wrap .login-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--setup-text-muted);
    font-size: 1.1rem;
    pointer-events: none;
}

/* Options row (keep-logged-in + forgot link) */
.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 0.82rem;
}
.login-options label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--setup-text-secondary);
    cursor: pointer;
    margin: 0;
    font-weight: 400;
}
.login-forgot-link {
    color: var(--setup-blue);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--setup-transition);
}
.login-forgot-link:hover {
    color: var(--setup-accent);
    text-decoration: underline;
}

/* Full-width button */
.login-btn-full {
    display: block;
    width: 100%;
    padding: 12px;
    font-family: var(--setup-font);
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: var(--setup-radius-sm);
    cursor: pointer;
    transition: background var(--setup-transition), box-shadow var(--setup-transition), transform var(--setup-transition);
    text-align: center;
    text-decoration: none;
}
.login-btn-full.btn-primary-green {
    background: linear-gradient(135deg, var(--setup-accent) 0%, var(--setup-accent-hover) 100%);
    color: #fff;
}
.login-btn-full.btn-primary-green:hover {
    box-shadow: 0 4px 14px rgba(92, 184, 48, 0.35);
    transform: translateY(-1px);
}
.login-btn-full.btn-secondary-outline {
    background: var(--setup-card);
    color: var(--setup-text);
    border: 1px solid var(--setup-border);
}
.login-btn-full.btn-secondary-outline:hover {
    background: var(--setup-border-light);
    border-color: var(--setup-text-muted);
}

/* "or" divider */
.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--setup-text-muted);
    font-size: 0.8rem;
    font-weight: 500;
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--setup-border);
}

/* Find-my-account info box */
.login-find-account {
    margin-top: 20px;
    padding: 14px 16px;
    background: var(--setup-blue-light);
    border-left: 3px solid var(--setup-blue);
    border-radius: var(--setup-radius-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.84rem;
    color: var(--setup-text);
}
.login-find-account a {
    color: var(--setup-blue);
    font-weight: 600;
    text-decoration: none;
}
.login-find-account a:hover {
    text-decoration: underline;
}

/* Intro / tournament content above card */
.login-intro {
    margin-bottom: 20px;
}

/* ---------- Dialog interiors (Forgot Password / Create Account) ---------- */

.login-dialog-body {
    padding: 16px 20px;
    font-family: var(--setup-font);
    font-size: 0.875rem;
    color: var(--setup-text);
}
.login-dialog-section-title {
    font-family: var(--setup-font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--setup-text);
    margin: 0 0 16px;
}
.login-dialog-info {
    padding: 12px 14px;
    background: var(--setup-blue-light);
    border-left: 3px solid var(--setup-blue);
    border-radius: var(--setup-radius-sm);
    font-size: 0.84rem;
    color: var(--setup-text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Account type cards (Create Account dialog) */
.login-account-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 8px;
}
.login-account-card {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    padding: 20px 14px 16px;
    text-align: center;
    transition: box-shadow var(--setup-transition), border-color var(--setup-transition);
}
.login-account-card:hover {
    box-shadow: var(--setup-shadow-md);
    border-color: var(--setup-text-muted);
}
.login-account-card .account-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 10px;
}
.login-account-card .account-icon.icon-blue { background: var(--setup-blue-light); color: var(--setup-blue); }
.login-account-card .account-icon.icon-green { background: var(--setup-success-light); color: var(--setup-accent); }
.login-account-card .account-icon.icon-amber { background: var(--setup-warning-light); color: var(--setup-warning); }
.login-account-card .account-title {
    font-family: var(--setup-font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--setup-text);
    margin: 0 0 6px;
}
.login-account-card .account-desc {
    font-size: 0.75rem;
    color: var(--setup-text-secondary);
    margin: 0 0 12px;
    line-height: 1.4;
}
.login-account-card .btn-account-continue {
    display: inline-block;
    padding: 7px 16px;
    font-family: var(--setup-font);
    font-size: 0.78rem;
    font-weight: 600;
    border: none;
    border-radius: var(--setup-radius-sm);
    cursor: pointer;
    transition: background var(--setup-transition), box-shadow var(--setup-transition);
    text-decoration: none;
    color: #fff;
}
.login-account-card .btn-account-continue.bg-blue { background: var(--setup-blue); }
.login-account-card .btn-account-continue.bg-blue:hover { background: #2563eb; }
.login-account-card .btn-account-continue.bg-green { background: var(--setup-accent); }
.login-account-card .btn-account-continue.bg-green:hover { background: var(--setup-accent-hover); }
.login-account-card .btn-account-continue.bg-amber { background: var(--setup-warning); }
.login-account-card .btn-account-continue.bg-amber:hover { background: #ea580c; }
.login-account-card .btn-account-continue.bg-dark { background: var(--setup-primary); }
.login-account-card .btn-account-continue.bg-dark:hover { background: var(--setup-primary-light); }

/* Featured account card - spans the full width on top as the primary choice */
.login-account-card.account-card-featured {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 18px;
    padding: 28px 22px;
    border-color: var(--setup-border);
    background: var(--setup-border-light);
}
.login-account-card.account-card-featured .account-icon {
    width: 54px;
    height: 54px;
    font-size: 1.5rem;
    margin-bottom: 0;
    flex-shrink: 0;
    background: var(--setup-primary);
    color: #fff;
}
.login-account-card.account-card-featured .account-card-body {
    flex: 1;
    min-width: 0;
}
.login-account-card.account-card-featured .account-title {
    font-size: 0.95rem;
    margin-bottom: 4px;
}
.login-account-card.account-card-featured .account-desc {
    margin-bottom: 0;
}
.login-account-card.account-card-featured .account-card-note {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--setup-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.login-account-card.account-card-featured .account-card-note .mdi {
    font-size: 0.85rem;
}
.login-account-card.account-card-featured .btn-account-continue {
    flex-shrink: 0;
}

/* College coach form inside create-account dialog */
.login-coach-form {
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    padding: 20px;
    margin-top: 16px;
    background: var(--setup-border-light);
}
.login-coach-form .form-group {
    margin-bottom: 14px;
}
.login-coach-form .form-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--setup-text);
    margin-bottom: 5px;
}
.login-coach-form .form-control,
.login-coach-form .form-select {
    width: 100%;
    padding: 9px 12px;
    font-family: var(--setup-font);
    font-size: 0.875rem;
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    background: var(--setup-card);
    color: var(--setup-text);
    box-sizing: border-box;
    transition: border-color var(--setup-transition), box-shadow var(--setup-transition);
}
.login-coach-form .form-control:focus,
.login-coach-form .form-select:focus {
    outline: none;
    border-color: var(--setup-accent);
    box-shadow: 0 0 0 3px var(--setup-accent-glow);
}

/* Responsive */
@media (max-width: 540px) {
    .login-account-type-grid {
        grid-template-columns: 1fr;
    }
    .login-account-card.account-card-featured {
        flex-wrap: wrap;
    }
    .login-account-card.account-card-featured .btn-account-continue {
        width: 100%;
        text-align: center;
    }
    .login-card {
        padding: 28px 20px 24px;
    }
}

/* -----------------------------------------------------------
   BS5 Tooltip override
   sinc19.css sets .tooltip { display: none } which hides
   Bootstrap 5 tooltip popups. Restore BS5 default behavior.
   ----------------------------------------------------------- */
.tooltip {
    display: block;
}
.tooltip:not(.show) {
    opacity: 0;
}

/* ============================================================
   CLUBS DIRECTORY (sicClubs.aspx)
   Identity-card grid + sticky filter rail. Replaces masonry
   layout. Missing logos fall back to deterministic monogram
   tiles; no per-tile height variance, so plain CSS Grid is
   sufficient.
   ============================================================ */
.clubs-wrapper {
    font-family: var(--setup-font);
    color: var(--setup-text);
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 4px 60px;
}

.clubs-hero {
    background: linear-gradient(135deg, var(--setup-primary) 0%, var(--setup-primary-light) 100%);
    color: #fff;
    border-radius: var(--setup-radius-lg);
    padding: 22px 28px;
    margin: 12px 0 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: var(--setup-shadow-md);
}
.clubs-hero-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(92,184,48,0.18);
    display: grid; place-items: center;
    color: var(--setup-accent);
    font-size: 28px;
    flex-shrink: 0;
}
.clubs-hero-text h1 {
    font-family: var(--setup-font-heading);
    font-weight: 700;
    font-size: 1.65rem;
    line-height: 1.1;
    margin: 0 0 3px;
    color: #fff;
}
.clubs-hero-text p {
    margin: 0;
    color: rgba(255,255,255,0.72);
    font-size: 0.9rem;
    font-family: var(--setup-font);
}

.clubs-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* ---------- Filter rail ---------- */
.clubs-rail {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    padding: 18px 18px 20px;
    box-shadow: var(--setup-shadow);
    position: sticky;
    top: 16px;
}
.clubs-rail-section + .clubs-rail-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--setup-border-light);
}
.clubs-rail-label {
    display: block;
    font-family: var(--setup-font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--setup-text-secondary);
    margin: 0 0 8px;
}
.clubs-rail .form-select,
.clubs-rail .form-control {
    width: 100%;
    font-family: var(--setup-font);
    font-size: 0.86rem;
    padding: 8px 12px;
    border: 1.5px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    background-color: #fff;
    color: var(--setup-text);
    margin: 0 0 8px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.clubs-rail .form-select:focus,
.clubs-rail .form-control:focus {
    outline: none;
    border-color: var(--setup-accent);
    box-shadow: 0 0 0 3px var(--setup-accent-glow);
}

/* CheckBoxLists in the rail render as <table>; flatten them */
.clubs-rail-checks table {
    width: 100% !important;
    border-collapse: collapse;
}
.clubs-rail-checks td {
    padding: 3px 4px 3px 0 !important;
    vertical-align: middle;
}
.clubs-rail-checks input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px;
    border: 2px solid var(--setup-border);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    margin: 0 8px 0 0;
    vertical-align: middle;
    position: relative;
    flex-shrink: 0;
}
.clubs-rail-checks input[type="checkbox"]:checked {
    background: var(--setup-accent);
    border-color: var(--setup-accent);
}
.clubs-rail-checks input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 1px; left: 4px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.clubs-rail-checks label {
    font-family: var(--setup-font);
    font-size: 0.82rem;
    color: var(--setup-text);
    vertical-align: middle;
    cursor: pointer;
    margin: 0;
    line-height: 1.3;
}

/* USA Rank pills with color dots before each label */
.clubs-rail-checks.clubs-rank-pills label::before {
    content: '';
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
    background: var(--rank-dot, #94a3b8);
}
.clubs-rail-checks.clubs-rank-pills tr:nth-child(1) label { --rank-dot: #d4a017; }
.clubs-rail-checks.clubs-rank-pills tr:nth-child(2) label { --rank-dot: #94a3b8; }
.clubs-rail-checks.clubs-rank-pills tr:nth-child(3) label { --rank-dot: #b87333; }
.clubs-rail-checks.clubs-rank-pills tr:nth-child(4) label { --rank-dot: #dc2626; }
.clubs-rail-checks.clubs-rank-pills tr:nth-child(5) label { --rank-dot: #3b82f6; }
.clubs-rail-checks.clubs-rank-pills tr:nth-child(6) label { --rank-dot: #5cb830; }
.clubs-rail-checks.clubs-rank-pills tr:nth-child(7) label { --rank-dot: #cbd5e1; }

/* Rail action buttons */
.clubs-rail-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.clubs-btn {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--setup-radius-sm);
    font-family: var(--setup-font-heading);
    font-weight: 600;
    font-size: 0.86rem;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: transform var(--setup-transition), box-shadow var(--setup-transition), background var(--setup-transition), color var(--setup-transition);
    box-sizing: border-box;
}
.clubs-btn-primary {
    background: var(--setup-accent);
    color: #fff !important;
    border-color: var(--setup-accent);
}
.clubs-btn-primary:hover {
    background: var(--setup-accent-hover);
    border-color: var(--setup-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(92,184,48,0.28);
}
.clubs-btn-secondary {
    background: #fff;
    color: var(--setup-primary) !important;
    border-color: var(--setup-border);
}
.clubs-btn-secondary:hover {
    background: var(--setup-primary);
    color: #fff !important;
    border-color: var(--setup-primary);
}

/* Show-All staff toggle */
.clubs-rail .clubs-show-all {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--setup-text-secondary);
    margin-top: 6px;
}
.clubs-rail .clubs-show-all input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px;
    border: 2px solid var(--setup-border);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
}
.clubs-rail .clubs-show-all input[type="checkbox"]:checked {
    background: var(--setup-accent);
    border-color: var(--setup-accent);
}
.clubs-rail .clubs-show-all input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 1px; left: 4px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ---------- Results pane ---------- */
.clubs-results {
    min-width: 0;
}
.clubs-results-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 4px 14px;
    border-bottom: 1px solid var(--setup-border-light);
    margin-bottom: 18px;
}
.clubs-results-heading {
    font-family: var(--setup-font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--setup-text);
    margin: 0;
}
.clubs-results-count {
    font-family: var(--setup-font);
    font-size: 0.82rem;
    color: var(--setup-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.clubs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

/* ---------- Card ---------- */
.club-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    overflow: hidden;
    box-shadow: var(--setup-shadow);
    transition: transform var(--setup-transition), box-shadow var(--setup-transition);
}
.club-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--setup-shadow-lg);
}
.club-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit !important;
    flex: 1 1 auto;
    min-width: 0;
}
.club-card-link:hover {
    text-decoration: none !important;
    color: inherit !important;
}
.club-rank-stripe {
    height: 4px;
    flex-shrink: 0;
    background: var(--rank-color, transparent);
}
.club-card[data-rank="1"] { --rank-color: linear-gradient(90deg, #d4a017, #f5c542); }
.club-card[data-rank="2"] { --rank-color: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.club-card[data-rank="3"] { --rank-color: linear-gradient(90deg, #b87333, #d99a5a); }
.club-card[data-rank="4"] { --rank-color: var(--setup-danger); }
.club-card[data-rank="5"] { --rank-color: var(--setup-blue); }
.club-card[data-rank="6"] { --rank-color: var(--setup-accent); }
.club-card[data-rank="7"] { --rank-color: #cbd5e1; }
.club-card[data-rank="0"] .club-rank-stripe { display: none; }

/* Mark area (logo or monogram) */
.club-mark {
    aspect-ratio: 1 / 1;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid var(--setup-border-light);
}
/* Browsers without aspect-ratio support fallback */
@supports not (aspect-ratio: 1 / 1) {
    .club-mark { padding-bottom: 100%; }
    .club-mark > * { position: absolute; inset: 0; display: grid; place-items: center; }
}
.club-mark img {
    max-width: 78%;
    max-height: 78%;
    object-fit: contain;
    display: block;
}
.club-mark--mono {
    background:
        radial-gradient(circle at 28% 22%, rgba(255,255,255,0.22), transparent 55%),
        radial-gradient(circle at 78% 82%, rgba(0,0,0,0.22), transparent 60%),
        hsl(var(--mono-hue, 200) 56% 42%);
    color: #fff;
    font-family: var(--setup-font-heading);
    font-weight: 800;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Info area */
.club-info {
    padding: 13px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}
.club-name {
    font-family: var(--setup-font-heading);
    font-weight: 600;
    font-size: 0.96rem;
    line-height: 1.25;
    color: var(--setup-text);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.club-meta {
    font-family: var(--setup-font);
    font-size: 0.76rem;
    color: var(--setup-text-secondary);
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.3;
}
.club-meta-dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--setup-text-muted);
    flex-shrink: 0;
}

/* Team-mode chip strip (lives outside the card-link so chips stay clickable) */
.club-team-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 14px 14px;
}
.club-team-chip {
    font-family: var(--setup-font);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--setup-text) !important;
    background: var(--setup-border-light);
    border-radius: 999px;
    padding: 3px 10px;
    line-height: 1.45;
    text-decoration: none !important;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.club-team-chip:hover {
    background: var(--setup-primary);
    color: #fff !important;
    text-decoration: none !important;
}
.club-team-more {
    font-family: var(--setup-font);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--setup-blue);
    background: var(--setup-blue-light);
    border-radius: 999px;
    padding: 3px 10px;
    line-height: 1.45;
}

/* Staff merge link overlay (top-right) */
.club-card-merge {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 3;
    opacity: 0;
    transition: opacity var(--setup-transition);
}
.club-card:hover .club-card-merge { opacity: 1; }
.club-card-merge a {
    float: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 999px;
    background: rgba(15,23,42,0.85);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(4px);
}
.club-card-merge i {
    background: transparent !important;
    color: #fff !important;
    padding: 0 !important;
    font-size: 16px !important;
}

/* Empty state */
.clubs-empty {
    background: var(--setup-card);
    border: 1px dashed var(--setup-border);
    border-radius: var(--setup-radius);
    padding: 60px 24px;
    text-align: center;
    color: var(--setup-text-secondary);
    font-family: var(--setup-font);
}
.clubs-empty i {
    font-size: 40px;
    color: var(--setup-text-muted);
    display: block;
    margin-bottom: 12px;
}
.clubs-empty h3 {
    font-family: var(--setup-font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--setup-text);
    margin: 0 0 6px;
}

/* CallbackPanel loading spinner */
#ctl00_ContentPlaceHolder1_CBPTeams .loading {
    margin: 70px auto;
    width: 38px; height: 38px;
    border: 3px solid var(--setup-border);
    border-top-color: var(--setup-accent);
    border-radius: 50%;
    animation: clubs-spin 0.7s linear infinite;
}
@keyframes clubs-spin {
    to { transform: rotate(360deg); }
}

/* Search panel error message */
.clubs-wrapper #ctl00_ContentPlaceHolder1_LblMsg {
    display: block;
    font-family: var(--setup-font);
    font-size: 0.85rem;
    color: var(--setup-danger) !important;
    background: var(--setup-danger-light);
    border-left: 3px solid var(--setup-danger);
    border-radius: var(--setup-radius-sm);
    padding: 10px 14px;
    margin-bottom: 14px;
}
.clubs-wrapper #ctl00_ContentPlaceHolder1_LblMsg:empty {
    display: none;
}

/* jQuery UI autocomplete dropdown styling within the rail */
.clubs-wrapper .ui-autocomplete {
    font-family: var(--setup-font);
    font-size: 0.85rem;
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    box-shadow: var(--setup-shadow-md);
    padding: 4px;
    background: #fff;
}
.clubs-wrapper .ui-autocomplete .ui-menu-item-wrapper {
    padding: 6px 10px;
    border-radius: 4px;
}
.clubs-wrapper .ui-autocomplete .ui-state-active,
.clubs-wrapper .ui-autocomplete .ui-state-focus {
    background: var(--setup-accent) !important;
    color: #fff !important;
    border: none !important;
    margin: 0 !important;
}

/* Responsive */
@media (max-width: 960px) {
    .clubs-layout {
        grid-template-columns: 1fr;
    }
    .clubs-rail {
        position: static;
    }
    .clubs-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 14px;
    }
}
@media (max-width: 540px) {
    .clubs-hero {
        padding: 18px 18px;
        gap: 14px;
    }
    .clubs-hero-text h1 { font-size: 1.35rem; }
    .clubs-hero-icon { width: 44px; height: 44px; font-size: 24px; }
    .clubs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .club-mark--mono {
        font-size: 1.9rem;
    }
    .club-info {
        padding: 11px 11px 13px;
    }
    .club-team-list {
        padding: 0 11px 12px;
    }
}

/* ---------- College Review (admin/collegereview.aspx) ---------- */
.diff-old {
    background: var(--setup-danger-light, #fee2e2);
    color: var(--setup-text, #1e293b);
    border-left: 3px solid var(--setup-danger, #dc2626);
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
    font-size: 0.85rem;
    line-height: 1.4;
}
.diff-new {
    background: #dcfce7;
    color: #14532d;
    border-left: 3px solid #16a34a;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
    font-size: 0.85rem;
    line-height: 1.4;
}
.confidence-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.confidence-badge.confidence-high {
    background: #dcfce7;
    color: #166534;
}
.confidence-badge.confidence-medium {
    background: #fef3c7;
    color: #92400e;
}
.confidence-badge.confidence-low {
    background: var(--setup-danger-light, #fee2e2);
    color: var(--setup-danger, #b91c1c);
}
.decision-radio {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.8rem;
}
.decision-radio label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    cursor: pointer;
}

/* ============================================================
   Sales Report (TTSalesReport.aspx)
   - .salesreport scope, plus reusable KPI tile + bar-fill cell
   ============================================================ */
.sr-content {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}
.sr-content-footer { padding-top: 8px; }
.salesreport { padding-top: 16px; padding-bottom: 32px; }

.salesreport .sr-detail-card {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 4px;
}
@media (min-width: 1400px) {
    .salesreport .sr-detail-card {
        margin-left: 40px;
        margin-right: 40px;
    }
}

/* ============================================================
   Tournament Store (TTSales1.aspx) - .ttsales scope
   Codebehind-generated tables get heavy !important overrides.
   ============================================================ */
.ttsales { padding-top: 16px; padding-bottom: 32px; }
.ttsales .sr-content {
    max-width: 100%;
    padding: 0;
}

.ttsales .ttsales-note {
    background: var(--setup-blue-light);
    border-left: 3px solid var(--setup-blue);
    color: var(--setup-text);
    padding: 12px 16px;
    border-radius: var(--setup-radius-sm);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 16px;
}
.ttsales .ttsales-note:empty { display: none; }
.ttsales .ttsales-note-bare {
    padding: 6px 0;
    margin-bottom: 8px;
    font-size: 0.78rem;
    line-height: 1.2;
    color: var(--setup-text-muted);
}
.ttsales .ttsales-note-bare a {
    color: var(--setup-blue);
    text-decoration: none;
    font-weight: 600;
}
.ttsales .ttsales-note-bare a:hover { text-decoration: underline; }
.ttsales .ttsales-note-bare br { display: none; }
.ttsales .ttsales-note-bare:empty { display: none; }

/* Top row: Purchaser + Delivery cards side-by-side */
.ttsales .ttsales-toprow {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 16px !important;
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: 8px;
}
.ttsales .ttsales-toprow td.ttsales-toprow-cell {
    width: 50%;
    padding: 0 !important;
}
.ttsales .ttsales-toprow-card { margin-bottom: 0 !important; height: 100%; }

.ttsales .ttsales-inner-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}
.ttsales .ttsales-inner-table td { padding: 0 !important; vertical-align: top; }
.ttsales .ttsales-inner-table td.setup-card-body { padding: 20px 22px !important; }

.ttsales .ttsales-purch-cell {
    font-family: var(--setup-font);
    font-size: 0.92rem;
    line-height: 1.5;
    min-height: 160px;
}
.ttsales .ttsales-team-name {
    display: block;
    font-family: var(--setup-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--setup-text);
    margin-bottom: 8px;
}
.ttsales .ttsales-purch-text { font-size: 0.9rem; color: var(--setup-text); }
.ttsales .ttsales-purch-text b { font-family: var(--setup-font-heading); font-weight: 700; }
.ttsales .ttsales-purch-text a {
    color: var(--setup-blue);
    text-decoration: underline;
    font-weight: 600;
}

/* "View mode" warning treatment - replaces Color.Pink */
.ttsales .ttsales-purch-warn {
    background: var(--setup-warning-light) !important;
    border-left: 3px solid var(--setup-warning);
    position: relative;
}
.ttsales .ttsales-purch-warn::before {
    content: 'View mode';
    display: inline-block;
    background: var(--setup-warning);
    color: #fff;
    font-family: var(--setup-font);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.ttsales .ttsales-purch-center { text-align: center; }
.ttsales .ttsales-purch-center .ttsales-purch-text a { font-size: 1rem; }

/* Address display (read-only) */
.ttsales .ttsales-addr-display { width: 100% !important; margin-top: 8px; }
.ttsales .ttsales-addr-display td { padding: 4px 8px !important; font-size: 0.85rem; }
.ttsales .ttsales-addr-label {
    color: var(--setup-text-secondary);
    font-weight: 600;
    width: 110px;
    text-align: right;
}
.ttsales .ttsales-addr-value { color: var(--setup-text); }
.ttsales .ttsales-status-val { color: var(--setup-danger); font-weight: 600; }

/* Shipping address form */
.ttsales .ttsales-addr-form { width: 100% !important; margin-top: 8px; }
.ttsales .ttsales-addr-form td { padding: 6px 8px !important; vertical-align: middle; font-size: 0.85rem; }
.ttsales .ttsales-form-label {
    color: var(--setup-text-secondary);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: 110px;
    text-align: right;
    white-space: nowrap;
}
.ttsales .ttsales-form-value { color: var(--setup-text); }
.ttsales .ttsales-display-only { display: none; }
.ttsales .ttsales-input {
    font-family: var(--setup-font) !important;
    font-size: 0.9rem !important;
    padding: 8px 12px !important;
    border: 1.5px solid var(--setup-border) !important;
    border-radius: var(--setup-radius-sm) !important;
    background: #fff !important;
    color: var(--setup-text) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
}
.ttsales .ttsales-input:focus {
    outline: none !important;
    border-color: var(--setup-accent) !important;
    box-shadow: 0 0 0 3px var(--setup-accent-glow) !important;
}
.ttsales .ttsales-csz-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.ttsales .ttsales-csz-city { flex: 1 1 50%; min-width: 0; }
.ttsales .ttsales-csz-state {
    font-family: var(--setup-font) !important;
    font-size: 0.9rem !important;
    padding: 8px 28px 8px 10px !important;
    border: 1.5px solid var(--setup-border) !important;
    border-radius: var(--setup-radius-sm) !important;
    background-color: #fff !important;
    color: var(--setup-text) !important;
    height: auto !important;
    line-height: 1.4 !important;
    flex: 0 0 80px !important;
    width: 80px !important;
    box-sizing: border-box !important;
}
.ttsales .ttsales-csz-state:focus {
    outline: none !important;
    border-color: var(--setup-accent) !important;
    box-shadow: 0 0 0 3px var(--setup-accent-glow) !important;
}
.ttsales .ttsales-csz-zip   { flex: 0 0 90px !important; width: 90px !important; }

.ttsales .ttsales-ship-text {
    display: block;
    color: var(--setup-text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
}
.ttsales .ttsales-edit-text {
    width: 100% !important;
    min-height: 120px;
    font-family: var(--setup-font) !important;
    font-size: 0.9rem !important;
    padding: 10px 12px !important;
    border: 1.5px solid var(--setup-border) !important;
    border-radius: var(--setup-radius-sm) !important;
}

/* Deadline banner */
.ttsales .ttsales-deadline {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-left: 3px solid var(--setup-warning);
    color: #9a3412;
    padding: 12px 20px;
    border-radius: var(--setup-radius);
    margin: 16px 0 20px;
    font-family: var(--setup-font-heading);
    font-weight: 600;
    font-size: 1rem;
}
.ttsales .ttsales-deadline i { font-size: 1.25rem; color: var(--setup-warning); }
.ttsales .ttsales-deadline:empty,
.ttsales .ttsales-deadline:not(:has(span:not(:empty))) { display: none; }
.ttsales .ttsales-deadline span:empty { display: none; }

/* Item-purchase card */
.ttsales .ttsales-itemcard {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    padding: 24px !important;
    margin-bottom: 20px;
}
.ttsales .ttsales-itemcard td { padding: 0 !important; vertical-align: top; }
.ttsales .ttsales-itemcard-image {
    width: 45% !important;
    padding-right: 24px !important;
}
.ttsales .ttsales-item-img {
    max-width: 100%;
    height: auto;
    border-radius: var(--setup-radius);
    border: 1px solid var(--setup-border-light);
    background: var(--setup-input-bg);
}
.ttsales .ttsales-upload-link { text-align: center; margin-top: 8px; }
.ttsales .ttsales-upload-link a {
    font-size: 0.82rem;
    color: var(--setup-blue);
    text-decoration: none;
}
.ttsales .ttsales-upload-link a:hover { text-decoration: underline; }
.ttsales .ttsales-itemcard-body { width: 55% !important; padding-left: 0 !important; }
.ttsales .ttsales-item-title {
    font-family: var(--setup-font-heading) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: var(--setup-text) !important;
    margin: 0 0 8px !important;
    line-height: 1.2;
}
.ttsales .ttsales-item-desc {
    color: var(--setup-text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 12px;
}
.ttsales .ttsales-item-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

/* Item-options table (codebehind Table3) - sized inputs/dropdowns */
.ttsales .ttsales-options-table { width: 100% !important; margin-top: 12px !important; }
.ttsales .ttsales-options-table tr { border-bottom: 1px solid var(--setup-border-light); }
.ttsales .ttsales-options-table tr:first-child {
    background: var(--setup-input-bg);
    font-family: var(--setup-font-heading);
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--setup-text-secondary) !important;
}
.ttsales .ttsales-options-table td {
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
    color: var(--setup-text);
    vertical-align: middle;
}
.ttsales .ttsales-options-table input[type="text"] {
    font-family: var(--setup-font) !important;
    font-size: 0.9rem !important;
    padding: 6px 10px !important;
    border: 1.5px solid var(--setup-border) !important;
    border-radius: var(--setup-radius-sm) !important;
    background: #fff !important;
    color: var(--setup-text) !important;
    width: 90% !important;
    height: auto !important;
}
.ttsales .ttsales-options-table input[type="text"]:focus {
    outline: none !important;
    border-color: var(--setup-accent) !important;
    box-shadow: 0 0 0 3px var(--setup-accent-glow) !important;
}
.ttsales .ttsales-options-table select {
    font-family: var(--setup-font) !important;
    font-size: 0.9rem !important;
    padding: 6px 28px 6px 10px !important;
    border: 1.5px solid var(--setup-border) !important;
    border-radius: var(--setup-radius-sm) !important;
    background-color: #fff !important;
    color: var(--setup-text) !important;
    min-width: 80px;
    height: auto !important;
}

.ttsales .ttsales-submit-row { margin-top: 16px !important; }

/* Store items grid */
.ttsales .ttsales-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.ttsales .ttsales-tile {
    background: var(--setup-card);
    border: 1px solid var(--setup-border-light);
    border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow);
    overflow: hidden;
    transition: var(--setup-transition);
    display: flex;
    flex-direction: column;
}
.ttsales .ttsales-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--setup-shadow-md);
    border-color: var(--setup-border);
}
.ttsales .ttsales-tile-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ttsales .ttsales-tile-img img,
.ttsales .ttsales-tile-img a img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: var(--setup-radius-sm);
    background: var(--setup-input-bg);
    border: 1px solid var(--setup-border-light);
}
.ttsales .ttsales-tile-title {
    font-family: var(--setup-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--setup-text);
    line-height: 1.25;
}
.ttsales .ttsales-tile-title a {
    color: var(--setup-text);
    text-decoration: none;
}
.ttsales .ttsales-tile-title a:hover { color: var(--setup-accent-hover); }
.ttsales .ttsales-tile-fee {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    background: var(--setup-success-light);
    color: var(--setup-accent-hover);
    font-family: var(--setup-font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: 999px;
    gap: 8px;
}
.ttsales .ttsales-tile-fee a {
    font-family: var(--setup-font);
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--setup-blue);
    text-decoration: none;
}
.ttsales .ttsales-tile-desc {
    color: var(--setup-text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Cart / Invoice table - codebehind-generated, lots of !important overrides */
.ttsales .ttsales-cart {
    background: var(--setup-card);
    border: 1px solid var(--setup-border-light);
    border-radius: var(--setup-radius-lg);
    box-shadow: var(--setup-shadow);
    overflow: hidden;
    margin-bottom: 20px;
}
/* Hide cart wrapper when InvoiceTable.Visible=False (ASP.NET removes the table from DOM) */
.ttsales .ttsales-cart:not(:has(table.ttsales-cart-table)) {
    display: none !important;
}
/* ===== Multi-team combined cart (condensed single table) ===== */
.ttsales .ttsales-cart-table table.ttsales-combined-cart {
    width: 100% !important;
    border-collapse: collapse !important;
}
.ttsales .ttsales-cart-table table.ttsales-combined-cart td {
    padding: 5px 16px !important;
    font-size: 0.82rem !important;
    border: 0 !important;
    vertical-align: middle !important;
}
.ttsales .ttsales-combined-cart .ttsales-cc-num {
    text-align: right !important;
    white-space: nowrap;
}
/* Column header */
.ttsales .ttsales-combined-cart tr.ttsales-cc-head td {
    background: var(--setup-primary) !important;
    color: #fff !important;
    font-family: var(--setup-font-heading) !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 7px 16px !important;
}
/* Per-team sub-header row */
.ttsales .ttsales-combined-cart tr.ttsales-cc-team td {
    background: var(--setup-border-light) !important;
    font-family: var(--setup-font-heading) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    color: var(--setup-text) !important;
    border-top: 1px solid var(--setup-border) !important;
}
/* Line item rows */
.ttsales .ttsales-combined-cart tr.ttsales-cc-item td {
    color: var(--setup-text-secondary) !important;
}
/* Grand total row */
.ttsales .ttsales-combined-cart tr.ttsales-cc-grand td {
    border-top: 2px solid var(--setup-primary) !important;
    font-family: var(--setup-font-heading) !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    color: var(--setup-text) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
/* Grand total beside the Complete Order button */
.ttsales .ttsales-grand-total {
    font-family: var(--setup-font-heading);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--setup-text);
    margin-right: 18px;
}
.ttsales .ttsales-grand-total:empty {
    display: none;
}

/* ===== Multi-team item card: transposed quantity grid (teams = rows) ===== */
.ttsales .ttsales-options-table tr.ttsales-qty-grid-head td {
    background: var(--setup-border-light);
    font-family: var(--setup-font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--setup-text);
    padding: 6px 10px;
    border-bottom: 1px solid var(--setup-border);
    text-align: center;
}
.ttsales .ttsales-options-table tr.ttsales-qty-grid-head td:first-child {
    text-align: left;
}
.ttsales .ttsales-options-table tr.ttsales-qty-grid-head .ttsales-qty-price {
    font-weight: 500;
    font-size: 0.72rem;
    color: var(--setup-text-secondary);
}
.ttsales .ttsales-options-table tr.ttsales-qty-grid-row td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--setup-border-light);
    font-size: 0.82rem;
}
.ttsales .ttsales-options-table tr.ttsales-qty-grid-row .ttsales-qty-grid-team {
    font-weight: 600;
    color: var(--setup-text);
    white-space: nowrap;
}
.ttsales .ttsales-options-table tr.ttsales-qty-grid-row select {
    width: 66px !important;
    min-width: 66px;
}
/* Let the grid scroll sideways only in the unlikely case of very many sizes */
.ttsales .ttsales-itemcard-body {
    overflow-x: auto;
}
.ttsales .ttsales-cart-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 0 !important;
}
.ttsales .ttsales-cart-table > tbody > tr.ttsales-cart-header > td {
    background: var(--setup-primary) !important;
    color: #fff !important;
    font-family: var(--setup-font-heading) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 14px 20px !important;
    letter-spacing: 0.02em;
}
.ttsales .ttsales-cart-table > tbody > tr.ttsales-cart-header > td a {
    color: #fff;
    text-decoration: none;
}
.ttsales .ttsales-cart-table > tbody > tr.ttsales-cart-header > td i { margin-right: 8px; }

/* Codebehind-generated inner invoice table - hammer the inline styles */
.ttsales .ttsales-cart-table table {
    width: 100% !important;
    font-family: var(--setup-font) !important;
    font-size: 0.88rem !important;
    border-collapse: collapse !important;
    border: 0 !important;
}
.ttsales .ttsales-cart-table table td {
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--setup-border-light) !important;
    font-size: 0.88rem !important;
    color: var(--setup-text);
}
/* InvTbl sets rows with Color.Gainsboro for separators - replace with subtle gray */
.ttsales .ttsales-cart-table table tr[bgcolor="Gainsboro"],
.ttsales .ttsales-cart-table table tr[style*="background-color:Gainsboro"],
.ttsales .ttsales-cart-table table tr[bgcolor="#DCDCDC"] {
    background: var(--setup-input-bg) !important;
}
.ttsales .ttsales-cart-table table tr[bgcolor="Gainsboro"] td,
.ttsales .ttsales-cart-table table tr[style*="background-color:Gainsboro"] td,
.ttsales .ttsales-cart-table table tr[bgcolor="#DCDCDC"] td {
    color: var(--setup-text-secondary) !important;
    font-weight: 600;
}
/* InvTbl uses a custom "header" CssClass for column header row */
.ttsales .ttsales-cart-table table tr.header td {
    background: var(--setup-primary-light) !important;
    color: #fff !important;
    font-family: var(--setup-font-heading) !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 12px !important;
    border-bottom: 0 !important;
}
/* InvTbl uses color3 from session for accent row - tone it down */
.ttsales .ttsales-cart-table table tr[bgcolor]:not([bgcolor="Gainsboro"]):not([bgcolor="#DCDCDC"]) td {
    background: var(--setup-success-light) !important;
    color: var(--setup-accent-hover) !important;
    font-weight: 700;
}
/* Inline Color.Black borders set by codebehind on cells */
.ttsales .ttsales-cart-table table td[bgcolor="Black"] {
    background: var(--setup-primary) !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
}
.ttsales .ttsales-cart-table table input[type="text"] {
    font-family: var(--setup-font) !important;
    font-size: 0.88rem !important;
    padding: 4px 8px !important;
    border: 1.5px solid var(--setup-border) !important;
    border-radius: var(--setup-radius-sm) !important;
    height: auto !important;
}
.ttsales .ttsales-cart-table table select {
    font-family: var(--setup-font) !important;
    font-size: 0.88rem !important;
    padding: 4px 22px 4px 8px !important;
    border: 1.5px solid var(--setup-border) !important;
    border-radius: var(--setup-radius-sm) !important;
    background-color: #fff !important;
    height: auto !important;
}
.ttsales .ttsales-cart-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px 20px;
    background: var(--setup-input-bg);
    border-top: 1px solid var(--setup-border-light);
}
.ttsales .ttsales-complete-btn { min-width: 180px; }

.ttsales .ttsales-hidden-amts { display: none !important; }

/* Admin panel */
.ttsales .ttsales-admin { margin-top: 24px; }
.ttsales .ttsales-admin-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    margin-bottom: 16px;
}
.ttsales .ttsales-admin-row:last-child { margin-bottom: 0; }
.ttsales .ttsales-admin-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}
.ttsales .ttsales-admin-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--setup-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ttsales .ttsales-admin-inv {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ttsales .ttsales-inv-input { width: 100px !important; }
.ttsales .ttsales-date-input { width: 220px !important; }
.ttsales .ttsales-admin-link { display: inline-flex; align-items: center; }

/* EO Dialog (team selection) */
.ttsales-dialog-body { padding: 20px; font-family: var(--setup-font); }
.ttsales-dialog-lead {
    font-family: var(--setup-font-heading);
    font-size: 1rem;
    color: var(--setup-text);
    margin: 0 0 12px;
}
.ttsales-dialog-body a.btn.btn-primary {
    background: var(--setup-accent) !important;
    border-color: var(--setup-accent) !important;
    border-radius: var(--setup-radius-sm) !important;
    font-family: var(--setup-font) !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
}

/* Hide the dead legacy <style> block list ul#storeitems if it ever appears */
.ttsales ul#storeitems { display: none !important; }

@media (max-width: 880px) {
    .ttsales .ttsales-toprow,
    .ttsales .ttsales-toprow tbody,
    .ttsales .ttsales-toprow tr { display: block !important; }
    .ttsales .ttsales-toprow td.ttsales-toprow-cell {
        display: block !important;
        width: 100% !important;
        padding: 0 0 16px !important;
    }
    .ttsales .ttsales-itemcard,
    .ttsales .ttsales-itemcard tbody,
    .ttsales .ttsales-itemcard tr { display: block !important; }
    .ttsales .ttsales-itemcard td { display: block !important; width: 100% !important; padding: 0 0 16px !important; }
    .ttsales .ttsales-itemcard-image { padding-right: 0 !important; }
    .ttsales .ttsales-csz-row { flex-wrap: wrap; }
    .ttsales .ttsales-csz-city { flex: 1 1 100%; }
}

.setup-header .setup-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
    background: rgba(255,255,255,0.08);
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.salesreport .sr-filter-card { margin-bottom: 20px; }
.salesreport .sr-filter-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}
.salesreport .sr-field { min-width: 140px; }
.salesreport .sr-field .form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--setup-text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.salesreport .sr-field-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.salesreport .sr-field-extract { margin-left: auto; }
.salesreport .sr-range-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--setup-blue-light);
    color: var(--setup-blue);
    border-radius: var(--setup-radius-sm);
    border-left: 3px solid var(--setup-blue);
    font-size: 0.82rem;
    font-weight: 500;
}

/* KPI tiles */
.sr-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.sr-kpi {
    background: var(--setup-card);
    border: 1px solid var(--setup-border-light);
    border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow);
    padding: 16px 18px;
    transition: var(--setup-transition);
    position: relative;
    overflow: hidden;
}
.sr-kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--setup-primary-light);
}
.sr-kpi.sr-kpi-success::before { background: var(--setup-accent); }
.sr-kpi.sr-kpi-danger::before  { background: var(--setup-danger); }
.sr-kpi-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--setup-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.sr-kpi-value {
    font-family: var(--setup-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--setup-text);
    letter-spacing: -0.01em;
}
.sr-kpi.sr-kpi-success .sr-kpi-value { color: var(--setup-accent-hover); }
.sr-kpi.sr-kpi-danger  .sr-kpi-value { color: var(--setup-danger); }

/* Tables */
.sr-table { width: 100%; }
.sr-table .sr-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sr-table th.sr-num { text-align: right; }
.sr-table a {
    color: var(--setup-blue);
    text-decoration: none;
    font-weight: 600;
}
.sr-table a:hover { text-decoration: underline; }
.sr-table .sr-balance {
    color: var(--setup-danger);
    font-weight: 700;
}

/* Bar-fill column (% of gross) */
.sr-table .sr-bar-col { width: 30%; }
.sr-table .sr-bar-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sr-bar {
    flex: 1;
    height: 8px;
    background: var(--setup-border-light);
    border-radius: 999px;
    overflow: hidden;
    min-width: 80px;
}
.sr-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--setup-accent) 0%, var(--setup-accent-hover) 100%);
    border-radius: 999px;
}
.sr-bar-pct {
    font-size: 0.78rem;
    color: var(--setup-text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 48px;
    text-align: right;
}

/* Entity-type badges */
.sr-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid transparent;
    background: var(--setup-input-bg);
    color: var(--setup-text-secondary);
}
.sr-type-T { background: var(--setup-blue-light);    color: var(--setup-blue);     border-color: rgba(59,130,246,0.2); }
.sr-type-S { background: #ede9fe;                    color: #7c3aed;               border-color: rgba(124,58,237,0.2); }
.sr-type-M { background: #ccfbf1;                    color: #0d9488;               border-color: rgba(13,148,136,0.2); }
.sr-type-F { background: #ffe4e6;                    color: #e11d48;               border-color: rgba(225,29,72,0.2); }

.sr-card-badge { margin-left: auto; }

/* Collapsible card header */
.sr-collapsible { cursor: pointer; user-select: none; }
.sr-collapsible:hover { background: var(--setup-card-hover); }
.sr-chev {
    margin-left: 8px;
    transition: transform var(--setup-transition);
    color: var(--setup-text-muted);
}
.sr-chev.open { transform: rotate(180deg); }

.sr-detail-body { padding-top: 0; }
.sr-table-scroll {
    overflow-x: auto;
    margin: 0 -8px;
    padding: 0 8px;
}
.sr-detail-table { font-size: 0.78rem; }
.sr-detail-table th, .sr-detail-table td {
    padding: 8px 10px;
    white-space: nowrap;
}

.sr-all-paid {
    color: var(--setup-accent-hover);
    background: var(--setup-success-light);
    border-radius: var(--setup-radius-sm);
    padding: 16px;
    text-align: center;
    font-weight: 600;
}
.sr-all-paid i { font-size: 1.2rem; margin-right: 4px; }

.sr-nav-footer {
    justify-content: flex-start;
    border-top: none;
    padding: 16px 0 0;
}

@media (max-width: 720px) {
    .salesreport .sr-filter-row { gap: 12px; }
    .salesreport .sr-field { min-width: 0; flex: 1 1 45%; }
    .salesreport .sr-field-extract { margin-left: 0; flex: 1 1 100%; }
    .sr-kpi-value { font-size: 1.25rem; }
}

/* ============================================================
   Game Changes & Notifications (GameChanges.aspx) - .gamechanges
   ============================================================ */
.gamechanges { padding-top: 16px; padding-bottom: 32px; }

.gamechanges .gc-filter-card { margin-bottom: 16px; }
.gamechanges .gc-filter-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}
.gamechanges .gc-field { min-width: 140px; }
.gamechanges .gc-field .form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--setup-text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.gamechanges .gc-field-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}
.gamechanges .gc-field-toggle {
    min-width: 140px;
    padding-bottom: 8px;
}
.gamechanges .gc-input,
.gamechanges .gc-date {
    font-family: var(--setup-font);
    font-size: 0.9rem;
    padding: 8px 12px;
    border: 1.5px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    background: #fff;
    color: var(--setup-text);
    min-width: 160px;
}
.gamechanges .gc-input:focus,
.gamechanges .gc-date:focus {
    outline: none;
    border-color: var(--setup-accent);
    box-shadow: 0 0 0 3px var(--setup-accent-glow);
}
.gamechanges .gc-range-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--setup-blue-light);
    color: var(--setup-blue);
    border-radius: var(--setup-radius-sm);
    border-left: 3px solid var(--setup-blue);
    font-size: 0.82rem;
    font-weight: 500;
}

/* KPI tiles - same shape as TTSalesReport's .sr-kpis but namespaced */
.gc-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.gc-kpi {
    background: var(--setup-card);
    border: 1px solid var(--setup-border-light);
    border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow);
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
}
.gc-kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--setup-primary-light);
}
.gc-kpi.gc-kpi-success::before { background: var(--setup-accent); }
.gc-kpi.gc-kpi-warning::before { background: var(--setup-warning); }
.gc-kpi-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--setup-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.gc-kpi-value {
    font-family: var(--setup-font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--setup-text);
    letter-spacing: -0.01em;
}
.gc-kpi.gc-kpi-success .gc-kpi-value { color: var(--setup-accent-hover); }
.gc-kpi.gc-kpi-warning .gc-kpi-value { color: var(--setup-warning); }

/* Tab strip */
.gc-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.gamechanges .gc-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--setup-radius-sm) var(--setup-radius-sm) 0 0;
    background: var(--setup-input-bg);
    color: var(--setup-text-secondary);
    font-family: var(--setup-font);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: none;
    transition: var(--setup-transition);
    cursor: pointer;
}
.gamechanges .gc-tab:hover {
    background: #fff;
    color: var(--setup-text);
}
.gamechanges .gc-tab.is-active {
    background: var(--setup-card);
    color: var(--setup-text);
    border-color: var(--setup-border-light);
    box-shadow: 0 -2px 0 var(--setup-accent) inset;
}
.gamechanges .gc-tab i { font-size: 1.05rem; }
.gamechanges .gc-tab-badge {
    background: var(--setup-border);
    color: var(--setup-text-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
}
.gamechanges .gc-tab.is-active .gc-tab-badge {
    background: var(--setup-accent);
    color: #fff;
}
.gc-tab-spacer { flex: 1; }
.gamechanges .gc-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    padding: 6px 12px !important;
}

/* Detail card - full width like TTSalesReport's .sr-detail-card */
.gamechanges .gc-detail-card {
    margin: 0 20px 20px;
}
@media (min-width: 1400px) {
    .gamechanges .gc-detail-card {
        margin: 0 40px 20px;
    }
}

.gc-table-scroll {
    overflow: auto;
    max-height: 70vh;
}
.gamechanges .gc-table {
    font-size: 0.84rem;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.gamechanges .gc-table-wide { font-size: 0.8rem; }
.gamechanges .gc-table th,
.gamechanges .gc-table td {
    padding: 8px 12px;
    white-space: nowrap;
    vertical-align: top;
}
/* ASP.NET GridView emits <th> (UseAccessibleHeader=true) but no <thead>,
   so target <th> directly. position:sticky scrolls within .gc-table-scroll. */
.gamechanges .gc-table th {
    background: var(--setup-primary);
    color: #fff;
    font-family: var(--setup-font-heading);
    font-weight: 600;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid var(--setup-primary-light);
}
.gamechanges .gc-table td {
    border-bottom: 1px solid var(--setup-border-light);
    background: #fff;
}
.gamechanges .gc-table tr:hover td {
    background: var(--setup-blue-light);
}

/* Old/new value rendering inside cells */
.gamechanges .gc-old {
    color: var(--setup-text-muted);
    text-decoration: line-through;
    font-size: 0.82em;
    margin-right: 4px;
}

/* Field status pill */
.gamechanges .gc-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.gamechanges .gc-status-Open    { background: var(--setup-success-light); color: var(--setup-accent-hover); }
.gamechanges .gc-status-Closed  { background: var(--setup-danger-light);  color: var(--setup-danger); }
.gamechanges .gc-status-Pending { background: var(--setup-warning-light); color: var(--setup-warning); }

/* Notified indicator */
.gamechanges .gc-notified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}
.gamechanges .gc-notified.yes {
    background: var(--setup-success-light);
    color: var(--setup-accent-hover);
}
.gamechanges .gc-notified.no {
    background: var(--setup-warning-light);
    color: var(--setup-warning);
}

@media (max-width: 720px) {
    .gamechanges .gc-filter-row { gap: 12px; }
    .gamechanges .gc-field { min-width: 0; flex: 1 1 45%; }
    .gamechanges .gc-field-actions { margin-left: 0; flex: 1 1 100%; }
    .gamechanges .gc-detail-card { margin: 0 12px 16px; }
}

/* ============================================================
   Mass Email (MassEmail.aspx) - list view
   ============================================================ */
.massemail-wrapper .me-header { margin-bottom: 20px; }
.massemail-wrapper .me-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.massemail-wrapper .me-header-title h1 { margin-bottom: 2px; }
.massemail-wrapper .me-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.massemail-wrapper .me-header-actions a.btn-setup-secondary,
.massemail-wrapper .me-header-actions a.btn-setup-primary { text-decoration: none; }
.massemail-wrapper .me-autosend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
    font-size: 0.78rem;
    font-weight: 500;
    backdrop-filter: blur(4px);
}
.massemail-wrapper .me-autosend label { color: rgba(255,255,255,0.9); margin: 0; }
.massemail-wrapper .me-autosend .me-autonum {
    width: 42px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 6px;
    padding: 2px 4px;
    font-size: 0.78rem;
}

/* Filter bar */
.massemail-wrapper .me-filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}
.massemail-wrapper .me-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
}
.massemail-wrapper .me-field .form-label { margin-bottom: 0; }
.massemail-wrapper .me-field-event { flex: 1 1 240px; min-width: 220px; }
.massemail-wrapper .me-field-actions {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* Status tab count badge - neutral (cancelled) */
.massemail-wrapper .setup-tab .tab-badge.badge-neutral { background: var(--setup-text-muted); }

/* Result tables */
.massemail-wrapper .me-tab-content { background: var(--setup-card); min-height: 300px; }
.massemail-wrapper .me-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    overflow: hidden;
    background: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    color: var(--setup-text);
    box-shadow: var(--setup-shadow);
}
.massemail-wrapper .me-table .me-head td {
    background: var(--setup-primary);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
    padding: 10px;
    border: none;
}
.massemail-wrapper .me-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--setup-border-light);
    vertical-align: middle;
}
.massemail-wrapper .me-table .me-row td { border-top: 2px solid var(--setup-border-light); }
.massemail-wrapper .me-table .me-subrow td {
    color: var(--setup-text-secondary);
    font-size: 0.78rem;
    padding-top: 2px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--setup-border);
}
/* Each record is two <tr> rows (the date cell uses rowspan=2); .me-hover is
   applied to both rows together by JS so the whole record highlights as one. */
.massemail-wrapper .me-table tr.me-hover td { background: var(--setup-blue-light); }
.massemail-wrapper .me-table .me-row-ready td { background: var(--setup-success-light); }
.massemail-wrapper .me-table tr.me-hover.me-row-ready td { background: #e3f5d8; }
.massemail-wrapper .me-table a { color: var(--setup-blue); text-decoration: none; font-weight: 600; }
.massemail-wrapper .me-table a:hover { text-decoration: underline; }

.massemail-wrapper .me-daily-info { margin-top: 16px; }

@media (max-width: 760px) {
    .massemail-wrapper .me-header-row { flex-direction: column; align-items: stretch; }
    .massemail-wrapper .me-header-actions { justify-content: flex-start; }
    .massemail-wrapper .me-field { flex: 1 1 100%; min-width: 0; }
    .massemail-wrapper .me-field-actions { margin-left: 0; }
}

/* ============================================================
   Mass Email - macro reference (native <details>/<summary>, no JS
   and no Bootstrap collapse so it cannot fight BS4/BS5 or the
   CKEditor instance bound to the body textarea).
   ============================================================ */
.massemail-wrapper .me-macros {
    margin: 12px 0 4px;
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    background: #fff;
    box-shadow: var(--setup-shadow);
    overflow: hidden;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
}
.massemail-wrapper .me-macros > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    background: var(--setup-border-light);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--setup-text);
}
.massemail-wrapper .me-macros > summary::-webkit-details-marker { display: none; }
.massemail-wrapper .me-macros > summary:hover { background: var(--setup-blue-light); }
.massemail-wrapper .me-macros > summary .me-macros-caret {
    color: var(--setup-blue);
    font-size: 1.15rem;
    line-height: 1;
    transition: transform .18s ease;
}
.massemail-wrapper .me-macros[open] > summary .me-macros-caret { transform: rotate(90deg); }
.massemail-wrapper .me-macros-hint {
    margin-left: auto;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--setup-text-secondary);
}
.massemail-wrapper .me-macros .me-hint-open,
.massemail-wrapper .me-macros[open] .me-hint-closed { display: none; }
.massemail-wrapper .me-macros[open] .me-hint-open { display: inline; }
.massemail-wrapper .me-macros-body { padding: 6px 16px 18px; }
.massemail-wrapper .me-macros-body h4 {
    margin: 20px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--setup-border-light);
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--setup-blue);
}
.massemail-wrapper .me-macros-rules {
    margin: 10px 0 0;
    padding: 12px 14px 12px 30px;
    border-radius: var(--setup-radius);
    background: var(--setup-blue-light);
    font-size: 0.8rem;
    color: var(--setup-text);
}
.massemail-wrapper .me-macros-rules li { margin-bottom: 5px; }
.massemail-wrapper .me-macros-rules li:last-child { margin-bottom: 0; }
.massemail-wrapper .me-macro-example {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: var(--setup-radius);
    background: var(--setup-primary);
    color: #e6edf6;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.78rem;
    overflow-x: auto;
    white-space: pre-wrap;
}
.massemail-wrapper .me-macro-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.massemail-wrapper .me-macro-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--setup-border-light);
    vertical-align: top;
    color: var(--setup-text-secondary);
}
.massemail-wrapper .me-macro-table tr:last-child td { border-bottom: none; }
.massemail-wrapper .me-macro-table td.me-macro-name {
    width: 220px;
    color: var(--setup-text);
}
.massemail-wrapper .me-macros code {
    padding: 1px 5px;
    border: 1px solid #f5d9e4;
    border-radius: 4px;
    background: #fdf2f6;
    color: #b32d5e;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.massemail-wrapper .me-macro-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
    white-space: nowrap;
}
/* "All Teams" callout - the send type most messages on this page use, and the
   most macro-limited, so it gets its own high-contrast block above the catalog. */
.massemail-wrapper .me-macros-callout {
    margin: 16px 0 4px;
    padding: 14px 16px 16px;
    border: 1px solid var(--setup-warning);
    border-left: 4px solid var(--setup-warning);
    border-radius: var(--setup-radius);
    background: var(--setup-warning-light);
}
.massemail-wrapper .me-callout-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: #9a4a06;
}
.massemail-wrapper .me-callout-head .mdi { font-size: 1.2rem; line-height: 1; }
.massemail-wrapper .me-macros-callout p {
    margin: 0 0 10px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--setup-text);
}
.massemail-wrapper .me-callout-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.massemail-wrapper .me-callout-col { flex: 1 1 340px; min-width: 300px; }
.massemail-wrapper .me-callout-col h5 {
    margin: 0 0 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(154,74,6,0.2);
    font-family: 'Outfit', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.massemail-wrapper .me-callout-col h5.me-ok { color: #3f7d20; }
.massemail-wrapper .me-callout-col h5.me-bad { color: var(--setup-danger); }
.massemail-wrapper .me-callout-col .me-macro-table td { border-bottom-color: rgba(154,74,6,0.14); }
.massemail-wrapper .me-macro-table-tight td { padding: 4px 6px; font-size: 0.77rem; }
.massemail-wrapper .me-macro-table-tight td.me-macro-name { width: 150px; }
.massemail-wrapper .me-callout-foot { margin: 12px 0 0 !important; font-weight: 600; }

/* section divider between the All Teams callout and the full catalog */
.massemail-wrapper .me-macros-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 26px 0 2px;
}
.massemail-wrapper .me-macros-divider:after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--setup-border);
}
.massemail-wrapper .me-macros-divider span {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--setup-text-muted);
}

.massemail-wrapper .me-macro-tag.tag-send { background: var(--setup-warning-light); color: var(--setup-warning); }
.massemail-wrapper .me-macro-tag.tag-ses { background: var(--setup-blue-light); color: var(--setup-blue); }
.massemail-wrapper .me-macro-warn { color: var(--setup-danger); font-weight: 600; }

@media (max-width: 760px) {
    .massemail-wrapper .me-macros-hint { margin-left: 0; flex: 1 1 100%; }
    .massemail-wrapper .me-macro-table td.me-macro-name { width: auto; }
}

/* ============================================================
   OLC task-card dashboard - shared base (.olctask-page)
   Consolidated from olc/alltasks.aspx + adminview.aspx + athletetasks.aspx
   (were duplicated inline per page). Presentation only, scoped to
   .olctask-page. Preserves the border-<statuscss> isotope hooks + all
   Eval bindings. Tokens + Outfit/DM Sans inherited from OLC.master.
   Page-specific deltas (header selectors, card h1 sizing, .ml-3 margins,
   .mdi sizing, alltasks staff toolbar, athletetasks ad card) stay inline
   in each page's ContentPlaceHolder4 style block.
   ============================================================ */
.olctask-page { font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif; color: var(--setup-text); }
.olctask-page h1, .olctask-page h2, .olctask-page h3 { font-family: 'Outfit', sans-serif; }
.olctask-head { align-items: center; margin-bottom: 14px; }

/* alert banner */
.olctask-page .alert { border-radius: var(--setup-radius); border: 1px solid var(--setup-border); padding: 14px 18px; box-shadow: var(--setup-shadow); }
.olctask-page .alert-info { background: var(--setup-blue-light); border-color: rgba(59,130,246,.28); color: var(--setup-text); }
.olctask-page .alert-success { background: #eaf6e2; border-color: rgba(92,184,48,.35); color: var(--setup-text); }

/* filter pills */
.olctask-page .nav.justify-content-center { gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.olctask-page .filterpill { width: auto !important; min-width: 92px; border-radius: 999px !important; padding: 8px 16px !important; border: 1.5px solid transparent; font-family: 'Outfit', sans-serif; cursor: pointer; opacity: .78; transition: all .2s; }
.olctask-page .filterpill:hover { opacity: 1; }
.olctask-page .filterpill.active { opacity: 1; box-shadow: 0 0 0 2px currentColor inset; }
.olctask-page .filterpill .h6 { font-family: 'Outfit', sans-serif !important; font-size: .74rem !important; font-weight: 700 !important; margin: 0 !important; letter-spacing: .03em; }
.olctask-page .filterpill.badge-light { background: var(--setup-card) !important; border-color: var(--setup-border); color: var(--setup-text-secondary) !important; }
.olctask-page .filterpill.bg-warning { background: var(--setup-warning-light) !important; color: var(--setup-warning) !important; }
.olctask-page .filterpill.bg-success { background: #eaf6e2 !important; color: var(--setup-accent-hover) !important; }
.olctask-page .filterpill.bg-primary-desat { background: var(--setup-blue-light) !important; color: var(--setup-blue) !important; }
.olctask-page .filterpill.bg-secondary { background: var(--setup-border-light) !important; color: var(--setup-text-secondary) !important; }
.olctask-page .filterpill.bg-danger { background: var(--setup-danger-light) !important; color: var(--setup-danger) !important; }

/* task cards + status left stripe (!important beats the inline border-left) */
.olctask-page #olctasks > .mb-4 { background: var(--setup-card) !important; border: 1px solid var(--setup-border) !important; border-radius: var(--setup-radius-lg) !important; box-shadow: var(--setup-shadow) !important; margin-bottom: 14px !important; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.olctask-page #olctasks > .mb-4:hover { box-shadow: var(--setup-shadow-md) !important; transform: translateY(-1px); }
.olctask-page #olctasks > .border-warning { border-left: 5px solid var(--setup-warning) !important; }
.olctask-page #olctasks > .border-success { border-left: 5px solid var(--setup-accent) !important; }
.olctask-page #olctasks > .border-primary-desat { border-left: 5px solid var(--setup-blue) !important; }
.olctask-page #olctasks > .border-danger { border-left: 5px solid var(--setup-danger) !important; }
.olctask-page #olctasks > .border-secondary { border-left: 5px solid var(--setup-text-muted) !important; }

/* icon status colors -> tokens */
.olctask-page #olctasks .text-success { color: var(--setup-accent) !important; }
.olctask-page #olctasks .text-warning { color: var(--setup-warning) !important; }
.olctask-page #olctasks .text-danger { color: var(--setup-danger) !important; }
.olctask-page #olctasks .text-primary-desat { color: var(--setup-blue) !important; }
.olctask-page #olctasks .text-secondary { color: var(--setup-text-muted) !important; }

.olctask-page .dim { opacity: .25; }

/* OLC finish-line banner (alltasks.aspx): the packet is the last step, so it
   is the one dark block on the page, above the filter pills. */
.olc-finish { background: var(--setup-primary); color: #fff; border-radius: var(--setup-radius-lg); padding: 22px 24px; margin: 6px 0 14px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 20px; align-items: center; box-shadow: var(--setup-shadow-md); }
.olc-finish p { margin: 0; }
.olc-finish-medal { width: 54px; height: 54px; border-radius: 50%; background: var(--setup-accent); color: var(--setup-primary); display: grid; place-items: center; font-size: 30px; line-height: 1; }
.olc-finish-kicker { font-family: var(--setup-font-heading); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #87c556; margin-bottom: 4px !important; }
.olc-finish-title { font-family: var(--setup-font-heading); font-weight: 700; font-size: 1.45rem; line-height: 1.15; margin-bottom: 5px !important; color: #fff; }
.olc-finish-sub { font-size: .92rem; color: #cbd5e1; }
.olc-finish .olc-finish-cta { display: inline-flex; align-items: center; gap: 9px; background: var(--setup-accent); color: var(--setup-primary); font-family: var(--setup-font-heading); font-weight: 700; font-size: 1.05rem; padding: 13px 22px; border-radius: 10px; white-space: nowrap; text-decoration: none; transition: background var(--setup-transition); }
.olc-finish .olc-finish-cta:hover, .olc-finish .olc-finish-cta:focus { background: #6fcf3f; color: var(--setup-primary); text-decoration: none; }
.olc-finish .olc-finish-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.olc-finish .olc-finish-cta .mdi { font-size: 1.3rem; line-height: 1; }
.olc-finish-items { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.olc-finish-items span { font-size: .8rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 3px 11px; color: #cbd5e1; }
.olc-finish-items b { color: #fff; font-weight: 600; }
@media (max-width: 767px) {
    .olc-finish { grid-template-columns: auto minmax(0, 1fr); padding: 18px; }
    .olc-finish .olc-finish-cta { grid-column: 1 / -1; justify-content: center; }
    .olc-finish-items { grid-column: 1 / -1; }
}

/* ============================================================
   EO DIALOG TYPE 3 (web.styleDialogType3)
   Modern chrome for EO.Web dialogs. The code-behind helper sets
   the header/content/footer CssText and registers dlg3Init,
   which stamps .dlg3 on the dialog's outer _bdt frame table at
   show time. Wrap the ContentTemplate body in .dlg3-body and use
   the -controls/-scroll/-foot/-save/-link helpers as needed.
   First use: olc/roster.aspx (Full Team Roster / Full Team Staff).
   ============================================================ */
table.dlg3 {
    border-radius: var(--setup-radius);
    box-shadow: 0 25px 60px rgba(0,0,0,.28), 0 8px 20px rgba(0,0,0,.15);
    overflow: hidden;
    border: 1px solid var(--setup-border);
    background: var(--setup-card);
}
table.dlg3 img[src*="close"] { opacity: .85; transition: opacity .2s; }
table.dlg3 img[src*="close"]:hover { opacity: 1; }

/* dialog content wrapper */
.dlg3-body { font-family: 'DM Sans', sans-serif; color: var(--setup-text); }
.dlg3-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dlg3-body select {
    font-family: 'DM Sans', sans-serif; font-size: .88rem; padding: 6px 24px 6px 10px;
    border: 1.5px solid var(--setup-border); border-radius: var(--setup-radius-sm);
    color: var(--setup-text); cursor: pointer; -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2210%22 height=%226%22 viewBox=%220 0 10 6%22%3E%3Cpath fill=%22%2394a3b8%22 d=%22M0 0l5 6 5-6z%22/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center;
}
.dlg3-body select:focus { outline: none; border-color: var(--setup-accent); box-shadow: 0 0 0 3px var(--setup-accent-glow); }
.dlg3-body input[type="checkbox"], .dlg3-body input[type="radio"] {
    -webkit-appearance: none; appearance: none; width: 17px; height: 17px;
    border: 2px solid var(--setup-border); background: #fff; cursor: pointer;
    position: relative; vertical-align: middle;
}
.dlg3-body input[type="checkbox"] { border-radius: 4px; }
.dlg3-body input[type="radio"] { border-radius: 50%; }
.dlg3-body input[type="checkbox"]:checked { border-color: var(--setup-accent); background: var(--setup-accent); }
.dlg3-body input[type="checkbox"]:checked::after {
    content: ''; position: absolute; top: 1px; left: 4px; width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.dlg3-body input[type="radio"]:checked { border-color: var(--setup-accent); }
.dlg3-body input[type="radio"]:checked::after {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 7px; height: 7px; border-radius: 50%; background: var(--setup-accent);
}
.dlg3-body label { cursor: pointer; font-size: .92rem; margin: 0 8px 0 4px; }
.dlg3-body .dlg3-link { color: var(--setup-blue); font-weight: 600; font-size: .88rem; cursor: pointer; }

/* bordered scroll region around a legacy DataGrid */
.dlg3-scroll { border: 1px solid var(--setup-border); border-radius: var(--setup-radius-sm); margin-top: 10px; }
/* Heading for the record a dialog is about (event name, team name) above the body. */
.dlg3-body .dlg3-title { display: block; font-family: 'Outfit', sans-serif; font-size: 1rem;
    font-weight: 700; letter-spacing: -.01em; color: var(--setup-primary); margin-bottom: 2px; }
.dlg3-body table { border-collapse: separate; border-spacing: 0; }
.dlg3-body tr.header td, .dlg3-body tr.gridHeader td {
    position: sticky; top: 0; z-index: 5; background: #f1f5f9 !important;
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--setup-text-secondary) !important;
    padding: 9px 12px !important; border-bottom: 1px solid var(--setup-border);
}
.dlg3-body tr.gridRow td, .dlg3-body tr.gridAltRow td {
    padding: 9px 12px !important; font-size: .95rem;
    border-bottom: 1px solid var(--setup-border-light); background: #fff;
}
.dlg3-body tr.gridAltRow td { background: #fafbfc; }
.dlg3-body tr.gridRow:hover td, .dlg3-body tr.gridAltRow:hover td { background: var(--setup-blue-light); }

/* footer counts line */
.dlg3-foot { margin-top: 12px; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .9rem; }

/* green action button (e.g. the update-roster button EO reveals) */
.dlg3-body input.dlg3-save {
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .8rem;
    background: var(--setup-accent); color: #fff; border: 0;
    border-radius: var(--setup-radius-sm); padding: 7px 14px; cursor: pointer;
    transition: var(--setup-transition);
}
.dlg3-body input.dlg3-save:hover { background: var(--setup-accent-hover); box-shadow: 0 4px 12px var(--setup-accent-glow); }

/* --- form fields inside a dlg3 dialog (password / SMS verification / MFA) ---
   Self-scoped under .dlg3-body on purpose: EO relocates dialog markup in the DOM at show
   time, so it escapes the host page's wrapper (.scup-wrap) and must carry its own styling. */
.dlg3-body input[type="text"], .dlg3-body input[type="password"], .dlg3-body textarea {
    width: 100%; background: var(--setup-card); border: 1.5px solid var(--setup-border);
    border-radius: var(--setup-radius-sm); color: var(--setup-text);
    font-family: 'DM Sans', sans-serif; font-size: .9rem; padding: 8px 12px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.dlg3-body textarea { resize: vertical; min-height: 64px; }
/* flatpickr calendar must clear the EO modal dialog (which sits ~1e8 z-index) */
.flatpickr-calendar { z-index: 100000005 !important; }
.dlg3-body input[type="text"]:focus, .dlg3-body input[type="password"]:focus, .dlg3-body textarea:focus {
    outline: none; border-color: var(--setup-accent); box-shadow: 0 0 0 3px var(--setup-accent-glow);
}
.dlg3-field { margin-bottom: 14px; }
/* Add Team dialog: align the label/field rows and tidy spacing inside dlg3-body */
.addteam-dlg .row { align-items: center; margin: 0 0 12px; }
.addteam-dlg .row > [class*="col-md-3"] { font-size: .8rem; font-weight: 600; color: var(--setup-text-secondary); }
.addteam-dlg .dlg3-actions { justify-content: flex-end; }
.dlg3-body .dlg3-lbl { display: block; font-family: 'DM Sans', sans-serif; font-size: .74rem;
    font-weight: 700; letter-spacing: .03em; text-transform: uppercase; cursor: default;
    color: var(--setup-text-secondary); margin: 0 0 5px; }
.dlg3-body .dlg3-hint { font-size: .76rem; color: var(--setup-text-muted); margin-top: 5px; }
.dlg3-body .dlg3-err { color: var(--setup-danger); font-size: .8rem; font-weight: 600; }
.dlg3-body .dlg3-msg { color: var(--setup-danger); font-size: .85rem; font-weight: 600; display: block; }
.dlg3-body .dlg3-msg:empty { display: none; }
.dlg3-note { display: flex; gap: 9px; align-items: flex-start; font-size: .84rem; color: var(--setup-text);
    background: var(--setup-blue-light); border-left: 3px solid var(--setup-blue);
    border-radius: var(--setup-radius-sm); padding: 10px 12px; margin-bottom: 14px; }
.dlg3-note .mdi { color: var(--setup-blue); font-size: 1.1rem; line-height: 1.2; flex: none; }
/* action row - separate class from .dlg3-foot so existing dlg3 pages are untouched */
.dlg3-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--setup-border-light); }
.dlg3-actions .dlg3-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.dlg3-body input.dlg3-btn {
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .8rem;
    background: var(--setup-card); color: var(--setup-text); border: 1.5px solid var(--setup-border);
    border-radius: var(--setup-radius-sm); padding: 6px 13px; cursor: pointer; transition: var(--setup-transition);
}
.dlg3-body input.dlg3-btn:hover { border-color: var(--setup-text-muted); background: var(--setup-bg); }
.dlg3-body input.dlg3-danger {
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .8rem;
    background: var(--setup-danger); color: #fff; border: 0;
    border-radius: var(--setup-radius-sm); padding: 7px 14px; cursor: pointer;
}

/* status icons inside rows */
.dlg3-body .dlg3-onroster .mdi { font-size: 19px; color: var(--setup-accent); line-height: 1; vertical-align: middle; }
.dlg3-body a.dlg3-open { color: var(--setup-text-muted); text-decoration: none; margin-left: 2px; }
.dlg3-body a.dlg3-open:hover { color: var(--setup-blue); }
.dlg3-body a.dlg3-open .mdi { font-size: 15px; vertical-align: middle; }
   DASHBOARD (dash.aspx) - landing dashboard components
   Additive, namespaced .dash-* classes. Layer on top of the
   BS4 grid from the master page. Safe for all pages (additive).
   ============================================================ */
.dash2-page { background: var(--setup-bg); }

/* In-event pages get a neutral light-gray page backdrop instead of the sinc26
   green gradient (which can clash with an event's own colors). Non-event pages
   keep the green. body.evt-shell is stamped by SincShell.master when a tid is set. */
body.evt-shell {
    background: radial-gradient(circle at top left, #e9ecef 0, transparent 55%),
                radial-gradient(circle at bottom right, #e9ecef 0, transparent 55%),
                #f4f5f6;
}

/* --- Hero header (sits inside .setup-header) --- */
.dash-hero { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; position: relative; z-index: 1; }
.dash-hero-avatar {
    width: 92px; height: 92px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: rgba(255,255,255,0.12); border: 3px solid rgba(255,255,255,0.28);
    display: flex; align-items: center; justify-content: center;
}
.dash-hero-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.dash-hero-avatar h1 { margin: 0 !important; padding: 0 !important; width: auto !important; height: auto !important;
    font-family: var(--setup-font-heading); font-size: 2rem; font-weight: 700; color: #fff; line-height: 1; }
.dash-hero-id { flex: 1 1 240px; min-width: 0; }
.dash-hero-id h1 { color: #fff; font-family: var(--setup-font-heading); font-size: 1.55rem; font-weight: 700; margin: 0 0 4px; line-height: 1.2; }
.dash-hero-email { color: rgba(255,255,255,0.72); font-size: 0.9rem; word-break: break-word; }
.dash-hero-vip { margin-top: 8px; font-size: 0.82rem; color: rgba(255,255,255,0.9); }
.dash-hero-vip a { color: #fff; text-decoration: underline; }
.dash-hero-vip a.btn, .dash-hero-vip a.btn-success { text-decoration: none; }
.dash-hero-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: 0 0 auto; margin-left: auto; }
/* In-event: centered event identity (logo + name + dates) in the middle of the hero.
   When present (:has), the user id block takes natural width so the event block can
   own the center; the action group stays right via margin-left:auto above. */
.dash-hero:has(.dash-hero-event) .dash-hero-id { flex: 0 1 auto; }
.dash-hero-event { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; }
.dash-hero-evlogo { width: 150px; height: auto; max-height: 110px; border-radius: 8px; background: #fff; padding: 3px; object-fit: contain; }
.dash-hero-evtxt { min-width: 0; }
.dash-hero-evname { color: #fff; font-family: var(--setup-font-heading); font-weight: 700; font-size: 1.3rem; line-height: 1.15; }
.dash-hero-evdates { color: rgba(255,255,255,0.8); font-size: 0.88rem; margin-top: 2px; }
/* staff on-duty strip inside the navy header (z-index clears the .setup-header::before glow) */
.dash-staffstatus { position: relative; z-index: 1; margin-top: 18px; padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.88); font-size: 0.82rem; }
.dash-staffstatus a { color: #93c5fd; }
.dash-staffstatus a:hover { color: #bfdbfe; }
.dash-staffstatus .text-danger { color: #fca5a5 !important; }
.dash-staffstatus .text-warning { color: #fcd34d !important; }
.dash-staffstatus .text-success { color: #86efac !important; }
.dash-staffstatus .text-muted { color: rgba(255,255,255,0.6) !important; }
.dash-action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dash-action-row h3 { color: #fff; font-family: var(--setup-font-heading); font-size: 0.95rem; font-weight: 600; margin: 0; }
.btn-dash-ghost {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: var(--setup-radius-sm);
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.28); color: #fff;
    font-size: 0.8rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: var(--setup-transition);
}
.btn-dash-ghost:hover { background: rgba(255,255,255,0.22); color: #fff; text-decoration: none; }
.dash-menu-toggle {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--setup-radius-sm);
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28); color: #fff;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: var(--setup-transition);
}
.dash-menu-toggle:hover { background: rgba(255,255,255,0.24); }

/* --- Sidebar navigation --- */
.dash-nav-card { background: var(--setup-card); border: 1px solid var(--setup-border); border-radius: var(--setup-radius); box-shadow: var(--setup-shadow); padding: 10px; }
.dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dash-nav-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--setup-radius-sm);
    color: var(--setup-text-secondary); font-size: 0.875rem; font-weight: 500; text-decoration: none;
    cursor: pointer; border: 1px solid transparent; transition: var(--setup-transition);
}
.dash-nav-item i { font-size: 1.1rem; width: 20px; text-align: center; color: var(--setup-text-muted); transition: var(--setup-transition); }
.dash-nav-item:hover { background: var(--setup-input-bg); color: var(--setup-text); text-decoration: none; }
.dash-nav-item.active { background: var(--setup-success-light); color: var(--setup-accent-hover); border-color: rgba(92,184,48,0.25); font-weight: 600; }
.dash-nav-item.active i { color: var(--setup-accent); }

/* --- Quick-task card (Sinc staff) --- */
.dash-quicktask { background: var(--setup-card); border: 1px solid var(--setup-border); border-radius: var(--setup-radius); box-shadow: var(--setup-shadow); padding: 16px; }
.dash-quicktask .dash-qt-title { font-family: var(--setup-font-heading); font-size: 0.9rem; font-weight: 700; color: var(--setup-text); margin-bottom: 12px; }
.dash-quicktask .form-label { margin-bottom: 2px; }

/* --- Content body spacing --- */
.dash-body { padding-top: 20px; padding-bottom: 40px; }

@media (max-width: 991px) {
    .dash-hero-actions { align-items: flex-start; }
    .dash-action-row { justify-content: flex-start; }
    .dash-hero-evlogo { width: 96px; max-height: 72px; }
}

/* --- Phone: reclaim horizontal space + compact the hero --- */
@media (max-width: 640px) {
    /* reclaim screen edge padding (BS px-3 uses !important, so match it) */
    .dash2-page .container-fluid.px-3 { padding-left: 10px !important; padding-right: 10px !important; }
    .dash2-page .setup-header { padding: 15px 15px; border-radius: var(--setup-radius); margin-bottom: 14px; }
    .dash2-page .card-body { padding: 14px 13px; }
    .dash-body { padding-top: 14px; }

    /* Row 1: small avatar + name/email side by side */
    .dash-hero { gap: 12px; }
    .dash-hero-avatar { width: 52px; height: 52px; border-width: 2px; }
    .dash-hero-avatar h1 { font-size: 1.2rem; }
    .dash-hero-id { flex: 1 1 120px; }
    .dash-hero-id h1 { font-size: 1.12rem; margin-bottom: 2px; }
    .dash-hero-email { font-size: 0.78rem; }
    .dash-hero-vip { margin-top: 6px; font-size: 0.75rem; }

    /* Row 2: "Find / Add / Connect" label next to the Team button (not stacked) */
    .dash-hero-actions { flex-direction: row; align-items: center; width: 100%; gap: 10px; margin-left: 0; flex-wrap: wrap; }
    .dash-action-row h3 { font-size: 0.85rem; }

    /* In-event identity wraps to its own compact row */
    .dash-hero-event { width: 100%; justify-content: flex-start; gap: 10px; }
    .dash-hero-evlogo { width: 64px; max-height: 56px; }
    .dash-hero-evname { font-size: 1.05rem; }
    .dash-hero-evdates { font-size: 0.8rem; }
}

/* ============================================================
   scAddPeople.ascx - modernized shared "add staff" control
   Self-contained: the control loads sinc-setup.css itself and
   scopes everything under .scap-wrap so it styles correctly on
   every consuming page without needing a .setup-wrapper ancestor.
   ============================================================ */
.scap-wrap { font-family: var(--setup-font); color: var(--setup-text); }
.scap-wrap .scap-add-btn { margin: 8px 8px 0 0; }
.scap-wrap .scap-add-btn i { margin-right: 4px; }
.scap-panel {
    background: var(--setup-card); border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius); box-shadow: var(--setup-shadow);
    padding: 18px 20px; margin-bottom: 12px;
}
/* Dialog mode. The control renders inline by default; hosts migrating off
   controls/People.ascx expect a panel that floats over the page, and an eo:Dialog
   cannot also render inline, so the overlay is done here instead. ShowAsDialog()
   puts .scap-modal on the wrapper. Visibility is driven server-side in step with
   the panel it wraps - see scAddPeople.ascx.vb Page_PreRender - so every existing
   show/hide path keeps working untouched. */
.scap-modal {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    /* 1000000, confirmed on TSReserve. This started at 1080, which cleared the Bootstrap
       navbar (1030) but sat UNDER an EO.Web dialog: the Add Contact button there lives
       inside the reservation dialog, so the panel it opened rendered behind that dialog -
       and behind its modal back-shade, which swallowed the clicks as well. 100000 (this
       file's usual "on top of everything" tier, see .ev-lightbox) was still not enough;
       EO stacks its dialogs above that. Deliberately still below .flatpickr-calendar
       (100000005) so a date picker opened inside the panel stays on top of it. */
    z-index: 1000000; background: rgba(15,23,42,0.55);
    display: flex; align-items: flex-start; justify-content: center;
    overflow-y: auto; padding: 4vh 16px;
}
/* Direct child, not .scap-panel specifically - scUpdatePeople puts a Bootstrap .card in
   here rather than a .scap-panel, and both need the same framing. */
.scap-modal > * {
    width: 100%; max-width: 940px; margin: 0 auto;
    box-shadow: var(--setup-shadow-lg);
    max-height: 92vh; overflow-y: auto;
}
@media (max-width: 575.98px) {
    .scap-modal { padding: 0; }
    .scap-modal > * { max-width: none; min-height: 100%; border-radius: 0; border: 0; }
}
.scap-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--setup-border-light); }
.scap-panel-title { display: flex; align-items: center; gap: 10px; }
.scap-panel-title .card-icon { width: 34px; height: 34px; border-radius: var(--setup-radius-sm); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.scap-panel-title .card-icon.icon-blue { background: var(--setup-blue-light); color: var(--setup-blue); }
.scap-panel-title h3 { margin: 0; font-family: var(--setup-font-heading); font-size: 1rem; font-weight: 700; color: var(--setup-text); }
.scap-panel-head-actions { display: flex; align-items: center; gap: 12px; }
.scap-cancel { color: var(--setup-danger); font-size: 0.82rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.scap-cancel:hover { color: var(--setup-danger); text-decoration: underline; }
/* Standing instruction copy. Used to share .scap-msg with the errors, so the permanent
   "you may connect yourself (or another)..." line rendered in error red on every load. */
.scap-intro { margin-bottom: 10px; font-size: 0.85rem; color: var(--setup-text-secondary); }
.scap-intro:empty { display: none; }

/* Errors are a real Bootstrap alert now, not a line of small red text people scroll past.
   The container carries no colour of its own - .alert-danger (line ~9050) does that. */
.scap-msg { margin-bottom: 12px; }
.scap-msg:empty { display: none; }
.scap-msg .alert { margin-bottom: 0; font-size: 0.85rem; }
.scap-msg .alert ul { margin: 6px 0 0; padding-left: 20px; }
.scap-msg .alert li + li { margin-top: 3px; }

/* The field that is actually wrong, outlined. Text above the form does not get read -
   people look for what is highlighted. Cleared client-side the moment it is fixed
   (see the delegated handler in scAddPeople.ascx). */
.scap-wrap .form-control.scap-invalid,
.scap-wrap .form-select.scap-invalid {
    border-color: var(--setup-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}
/* Tint the inputs only. Never touch background on a <select> - it takes the chevron
   SVG with it. */
.scap-wrap input.form-control.scap-invalid { background-color: #fff9f9; }
.scap-wrap .form-control.scap-invalid:focus,
.scap-wrap .form-select.scap-invalid:focus {
    border-color: var(--setup-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.28);
}
.scap-row-2 { margin-top: 10px; align-items: end; }
.scap-search-col { display: flex; align-items: flex-end; }
/* Outlined button rather than a text link. As a link it sat beside the solid "Add to
   Club" button and read as incidental, so people missed it and created duplicate
   accounts for someone who already had one. Outlined = the secondary action it is. */
.scap-search-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-family: var(--setup-font); font-size: 0.82rem; font-weight: 600; line-height: 1.2;
    padding: 9px 16px; border-radius: var(--setup-radius-sm);
    border: 1.5px solid var(--setup-blue); background: var(--setup-card);
    color: var(--setup-blue) !important; text-decoration: none !important;
    white-space: nowrap; cursor: pointer; transition: all var(--setup-transition); }
.scap-search-link:hover { background: var(--setup-blue-light); border-color: var(--setup-blue);
    color: var(--setup-blue) !important; text-decoration: none !important; }
.scap-search-link:focus { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,0.25); }
.scap-search-link .mdi { font-size: 1rem; }
.scap-access-col { display: flex; align-items: flex-end; }
.scap-access-col label { margin: 0; font-size: 0.85rem; color: var(--setup-text-secondary); }

/* form inputs (mirror .setup-wrapper input styling, scoped to this control) */
.scap-wrap .form-label { display: block; font-family: var(--setup-font); font-size: 0.78rem; font-weight: 600; color: var(--setup-text-secondary); margin-bottom: 3px; }
.scap-wrap .form-control, .scap-wrap .form-select {
    background: var(--setup-input-bg); border: 1.5px solid var(--setup-border);
    border-radius: var(--setup-radius-sm); color: var(--setup-text); font-size: 0.85rem;
    padding: 7px 11px; transition: var(--setup-transition); width: 100%;
}
.scap-wrap .form-control:focus, .scap-wrap .form-select:focus {
    background: var(--setup-card); border-color: var(--setup-accent);
    box-shadow: 0 0 0 3px var(--setup-accent-glow); outline: none;
}
.scap-wrap #peoplelist { list-style: none; margin: 12px 0 0; padding: 0; }
.scap-wrap #peoplelist li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border: 1px solid var(--setup-border-light);
    border-radius: var(--setup-radius-sm); margin-top: 6px; background: var(--setup-input-bg);
}
.scap-wrap .scap-person-name { font-size: 0.875rem; font-weight: 500; }

@media (max-width: 767px) {
    .scap-panel { padding: 14px; }
    .scap-row-2 .col-md-3 { margin-top: 8px; }
}

/* ============================================================
   scUpdatePeople.ascx - modernized shared "update person" control
   Self-contained: the control loads sinc-setup.css itself and
   scopes everything under .scup-wrap. Restyles the legacy
   card / card-header / form-control-flush theme to sinc-setup.
   ============================================================ */
.scup-wrap { font-family: var(--setup-font); color: var(--setup-text); }
.scup-wrap .card {
    border: 1px solid var(--setup-border) !important; border-radius: var(--setup-radius) !important;
    box-shadow: var(--setup-shadow) !important; background: var(--setup-card); overflow: hidden;
}
.scup-wrap .card-header {
    background: var(--setup-primary) !important; border-bottom: none !important;
    padding: 14px 18px !important; border-radius: 0 !important;
}
.scup-wrap .card-header h3, .scup-wrap .card-header .scup-heading { color: #fff; font-family: var(--setup-font-heading); font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.scup-wrap .scup-heading-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--setup-radius-sm); background: rgba(255,255,255,0.14); color: #fff; font-size: 1rem; }
.scup-wrap .scup-lastdate { color: rgba(255,255,255,0.7); font-size: 0.78rem; font-weight: 500; }
.scup-wrap .card-header .text-danger { color: rgba(255,255,255,0.85) !important; font-size: 0.8rem; }
.scup-wrap .card-header .text-danger:hover { color: #fff !important; }
.scup-wrap .card-body { padding: 20px !important; background: var(--setup-card); }

/* labels + inputs */
.scup-wrap .form-label-group { margin-bottom: 12px; }
.scup-wrap .form-label-group label, .scup-wrap label { font-family: var(--setup-font); font-size: 0.75rem; font-weight: 600; color: var(--setup-text-secondary); margin-bottom: 3px; display: block; }
.scup-wrap .form-control, .scup-wrap .form-control-flush, .scup-wrap .form-select {
    background: var(--setup-input-bg); border: 1.5px solid var(--setup-border) !important;
    border-radius: var(--setup-radius-sm) !important; color: var(--setup-text); font-size: 0.85rem;
    padding: 7px 11px !important; transition: var(--setup-transition); width: 100%; box-shadow: none !important;
}
.scup-wrap textarea.form-control, .scup-wrap textarea.form-control-flush { min-height: 84px; }
.scup-wrap .form-control:focus, .scup-wrap .form-control-flush:focus, .scup-wrap .form-select:focus {
    background: var(--setup-card); border-color: var(--setup-accent) !important;
    box-shadow: 0 0 0 3px var(--setup-accent-glow) !important; outline: none;
}

/* access sub-panel */
.scup-wrap .access { margin-top: 8px; padding: 16px; border: 1px solid var(--setup-border-light); border-radius: var(--setup-radius); background: var(--setup-input-bg); }
.scup-wrap .access h3.team { font-family: var(--setup-font-heading); font-size: 0.95rem; font-weight: 700; color: var(--setup-text); margin: 0 0 10px; }

/* photo + verify buttons */
.scup-wrap .btn-outline-primary { border: 1.5px solid var(--setup-border); background: var(--setup-card); color: var(--setup-text-secondary); border-radius: var(--setup-radius-sm); font-size: 0.78rem; padding: 6px 12px; transition: var(--setup-transition); }
.scup-wrap .btn-outline-primary:hover { border-color: var(--setup-accent); color: var(--setup-accent-hover); }
.scup-wrap .btn-group .btn { border-radius: var(--setup-radius-sm); }

/* --- cross-version grid normalization (BS4 + BS5) ---
   BS4 defines .form-row (tight 5px gutters); BS5 removed it. The markup hedges with
   "form-row row", so on a BS4 host you get tight gutters and on a BS5 host you get the
   much wider .row gutters - the same control looks different per master page. Pin both
   here, scoped to the control, so it renders identically everywhere without touching
   markup. (Everything else the control needs - form-label-group, form-control-flush -
   already lives in this file, which the control loads itself.) */
.scup-wrap .form-row { display: flex; flex-wrap: wrap; margin-left: -7px; margin-right: -7px; }
.scup-wrap .form-row > [class*="col"] { padding-left: 7px; padding-right: 7px; }
.scup-wrap .row { --bs-gutter-x: 14px; }

/* ============================================================
   sicRemoveEmail.aspx - Email Preferences
   Scoped under .emailpref; the page loads sinc-setup.css itself
   so this works on whichever master page hosts it (BS4 or BS5).
   NOTE: these checkboxes mean "unsubscribe from X" (checked = opted
   out), so the switch is red when ON. Do not flip the visual
   without inverting the code-behind - that is opt-out logic.
   ============================================================ */
.emailpref { font-family: var(--setup-font); color: var(--setup-text); max-width: 760px; margin: 0 auto 40px; padding: 8px 4px; }
.emailpref .ep-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.emailpref .ep-head-ic { width: 46px; height: 46px; border-radius: var(--setup-radius); flex: none;
    display: grid; place-items: center; font-size: 1.4rem;
    background: var(--setup-blue-light); color: var(--setup-blue); }
.emailpref h1 { font-family: var(--setup-font-heading); font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--setup-text); }
.emailpref .ep-sub { font-size: .88rem; color: var(--setup-text-secondary); margin-top: 2px; }
.emailpref .ep-email { font-weight: 700; color: var(--setup-text); }

.emailpref .ep-alert { display: flex; align-items: center; gap: 10px; padding: 12px 15px; margin-bottom: 18px;
    border-radius: var(--setup-radius-sm); font-size: .88rem; }
.emailpref .ep-alert .mdi { font-size: 1.15rem; }
.emailpref .ep-alert.ok { background: #f0fdf4; border-left: 3px solid var(--setup-accent); color: var(--setup-text); }
.emailpref .ep-alert.ok .mdi { color: var(--setup-accent); }
.emailpref .ep-alert.bad { background: var(--setup-danger-light); border-left: 3px solid var(--setup-danger); color: var(--setup-text); }
.emailpref .ep-alert.bad .mdi { color: var(--setup-danger); }

.emailpref .ep-card { background: var(--setup-card); border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-lg); box-shadow: var(--setup-shadow); padding: 20px 22px; margin-bottom: 20px; }
.emailpref .ep-card-h { margin-bottom: 4px; }
.emailpref .ep-card-h h2 { font-family: var(--setup-font-heading); font-size: 1.02rem; font-weight: 700; margin: 0; color: var(--setup-text); }
.emailpref .ep-note { display: flex; align-items: flex-start; gap: 7px; font-size: .78rem;
    color: var(--setup-text-secondary); margin-top: 5px; }
.emailpref .ep-note .mdi { font-size: .95rem; flex: none; }
.emailpref .ep-note-block { background: var(--setup-blue-light); border-left: 3px solid var(--setup-blue);
    border-radius: var(--setup-radius-sm); padding: 10px 12px; margin-top: 12px; color: var(--setup-text); font-size: .82rem; }

/* toggle rows - asp:CheckBox renders <span class="ep-toggle"><input><label></label></span> */
.emailpref .ep-toggle { display: flex; align-items: center; gap: 14px;
    padding: 14px 0; border-top: 1px solid var(--setup-border-light); }
.emailpref .ep-card-h + .ep-toggle, .emailpref .ep-thisevent .ep-toggle { border-top: 1px solid var(--setup-border-light); }
.emailpref .ep-toggle label { order: 1; flex: 1 1 auto; margin: 0; font-size: .9rem; line-height: 1.35;
    color: var(--setup-text); cursor: pointer; }
.emailpref .ep-toggle input[type="checkbox"],
.emailpref .ep-togglelist input[type="checkbox"] {
    order: 2; flex: none; margin: 0 0 0 auto; -webkit-appearance: none; appearance: none;
    width: 46px; height: 26px; border-radius: 99px; border: 0; background: var(--setup-border);
    position: relative; cursor: pointer; transition: background .2s ease;
}
.emailpref .ep-toggle input[type="checkbox"]::after,
.emailpref .ep-togglelist input[type="checkbox"]::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.35); transition: transform .2s ease;
}
/* ON = unsubscribed, so it reads as a "stop" state */
.emailpref .ep-toggle input[type="checkbox"]:checked,
.emailpref .ep-togglelist input[type="checkbox"]:checked { background: var(--setup-danger); }
.emailpref .ep-toggle input[type="checkbox"]:checked::after,
.emailpref .ep-togglelist input[type="checkbox"]:checked::after { transform: translateX(20px); }
.emailpref .ep-toggle input[type="checkbox"]:focus-visible,
.emailpref .ep-togglelist input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--setup-accent-glow); }

/* CheckBoxList (RepeatLayout=Flow) renders <span><input><label></span><br> */
.emailpref .ep-togglelist { display: block; }
.emailpref .ep-togglelist > span { display: flex; align-items: center; gap: 14px;
    padding: 14px 0; border-top: 1px solid var(--setup-border-light); }
.emailpref .ep-togglelist label { order: 1; flex: 1 1 auto; margin: 0; font-size: .9rem;
    color: var(--setup-text); cursor: pointer; }
.emailpref .ep-togglelist br { display: none; }

.emailpref .ep-foot { display: flex; justify-content: flex-end; gap: 10px;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--setup-border-light); }
.emailpref .ep-field { margin-top: 14px; }
.emailpref .ep-field > label { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: var(--setup-text-secondary); margin-bottom: 5px; }
.emailpref .ep-field .form-control { width: 100%; border: 1.5px solid var(--setup-border) !important;
    border-radius: var(--setup-radius-sm) !important; padding: 8px 12px !important; font-size: .9rem; box-shadow: none !important; }
.emailpref .ep-field .form-control:focus { border-color: var(--setup-accent) !important;
    box-shadow: 0 0 0 3px var(--setup-accent-glow) !important; outline: none; }
.emailpref .ep-msg { display: block; color: var(--setup-danger); font-size: .85rem; font-weight: 600; }
.emailpref .ep-msg:empty { display: none; }

/* cell number + SMS verify button + status icon on one line */
.scup-wrap .scup-cellrow { display: flex; align-items: center; gap: 8px; }
.scup-wrap .scup-cellrow .form-control,
.scup-wrap .scup-cellrow .form-control-flush { flex: 1 1 auto; min-width: 0; }
.scup-wrap .scup-cellrow .btn { flex: none; white-space: nowrap; }
.scup-wrap .scup-tmstatus { flex: none; display: inline-flex; align-items: center; font-size: 1.05rem; }

/* matched photo icon buttons (delete + upload) */
.scup-wrap .scup-photo-actions { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.scup-wrap .scup-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border: 0; border-radius: var(--setup-radius-sm);
    color: #fff; font-size: 1rem; line-height: 1; text-decoration: none;
    cursor: pointer; transition: var(--setup-transition);
}
.scup-wrap .scup-iconbtn .mdi { color: #fff; }
.scup-wrap .scup-iconbtn.danger { background: var(--setup-danger); }
.scup-wrap .scup-iconbtn.primary { background: var(--setup-blue); }
.scup-wrap .scup-iconbtn:hover { filter: brightness(1.1); color: #fff; text-decoration: none; }

/* the three account actions read as separate chips, not one run-on link */
.scup-wrap .scup-acct-actions { display: flex; flex-wrap: wrap; gap: 8px; float: left; }
.scup-wrap .scup-acct-actions a.scup-chip {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1.5px solid var(--setup-border); background: var(--setup-card);
    border-radius: var(--setup-radius-sm); padding: 7px 13px;
    font-family: var(--setup-font); font-size: 0.8rem; font-weight: 600;
    color: var(--setup-text) !important; text-decoration: none; transition: var(--setup-transition);
}
.scup-wrap .scup-acct-actions a.scup-chip:hover {
    border-color: var(--setup-accent); background: var(--setup-bg);
    color: var(--setup-accent-hover) !important; text-decoration: none;
}
.scup-wrap .scup-acct-actions a.scup-chip .mdi { font-size: 1rem; color: var(--setup-text-secondary); }
.scup-wrap .scup-acct-actions a.scup-chip:hover .mdi { color: var(--setup-accent); }

/* footer action row: divider + clear the (BS4/BS5-hedged) floats */
.scup-wrap .card-body > div:last-child {
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--setup-border-light);
}
.scup-wrap .card-body > div:last-child::after { content: ""; display: table; clear: both; }
/* the account links (Change Password / Two-Factor / Email Preferences) sit in that row */
.scup-wrap .card-body > div:last-child a { font-size: 0.8rem; font-weight: 600; color: var(--setup-blue); text-decoration: none; }
.scup-wrap .card-body > div:last-child a:hover { color: var(--setup-blue); text-decoration: underline; }

/* required-field markers + inline validation text */
.scup-wrap .text-danger, .scup-wrap [id*="Req"] { color: var(--setup-danger) !important; font-size: 0.78rem; }
.scup-wrap #saveMsg.alert { display: block; border-radius: var(--setup-radius-sm); padding: 10px 14px; font-size: 0.85rem; margin-bottom: 12px; }

/* ============================================================
   DASHBOARD (dash.aspx) content polish
   Scoped under .dash2-page ONLY. Restyles the legacy Bootstrap
   cards / tables / buttons / headings emitted by the existing
   dashboard sub-controls (Overview, Connections, UpcomingEvents,
   Tickets, QuickLinks, OLCStatus) and the SincFuncs.asmx tiles,
   so dash2's content matches the modern shell. Does NOT touch the
   shared controls' source and cannot affect any other page.
   ============================================================ */
.dash2-page .card {
    border: 1px solid var(--setup-border); border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow); background: var(--setup-card);
    transition: box-shadow var(--setup-transition);
}
.dash2-page .card:hover { box-shadow: var(--setup-shadow-md); }
.dash2-page .card-body { padding: 18px 20px; }
.dash2-page .card-header {
    background: var(--setup-card); border-bottom: 1px solid var(--setup-border-light);
    padding: 14px 18px; font-family: var(--setup-font-heading); font-weight: 700; color: var(--setup-text);
}

/* headings inside content tiles */
.dash2-page h2 { font-family: var(--setup-font-heading); font-size: 1.05rem; font-weight: 700; color: var(--setup-text); }
.dash2-page h3 { font-family: var(--setup-font-heading); font-size: 0.98rem; font-weight: 700; color: var(--setup-text); }
.dash2-page h4 { font-family: var(--setup-font-heading); font-size: 0.9rem; font-weight: 600; color: var(--setup-text); }
.dash2-page hr { border-top: 1px solid var(--setup-border-light); opacity: 1; }

/* buttons emitted by controls (green primary / outline secondary / red danger) */
.dash2-page .btn-primary {
    background: linear-gradient(180deg, var(--setup-accent), var(--setup-accent-hover));
    border: none; border-radius: var(--setup-radius-sm); color: #fff; font-weight: 600;
    box-shadow: 0 2px 6px var(--setup-accent-glow); transition: var(--setup-transition);
}
.dash2-page .btn-primary:hover { filter: brightness(1.03); box-shadow: var(--setup-shadow-md); color: #fff; }
.dash2-page .btn-secondary, .dash2-page .btn-outline-secondary {
    background: var(--setup-card); border: 1.5px solid var(--setup-border); color: var(--setup-text-secondary);
    border-radius: var(--setup-radius-sm); font-weight: 500; transition: var(--setup-transition);
}
.dash2-page .btn-secondary:hover, .dash2-page .btn-outline-secondary:hover { border-color: var(--setup-accent); color: var(--setup-accent-hover); }
.dash2-page .btn-danger { background: var(--setup-danger); border: none; border-radius: var(--setup-radius-sm); font-weight: 600; }
.dash2-page .btn-success { background: linear-gradient(180deg, var(--setup-accent), var(--setup-accent-hover)); border: none; border-radius: var(--setup-radius-sm); font-weight: 600; color: #fff; }
.dash2-page .btn-link { color: var(--setup-blue); }

/* legacy sincTbl tables (counts, tickets, help desk) */
.dash2-page .sincTbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.85rem; }
.dash2-page .sincTbl td { padding: 6px 10px; border-bottom: 1px solid var(--setup-border-light); }
.dash2-page .sincTbl tr:last-child td { border-bottom: none; }

/* sidebar counts/buttons block (pnlBtns -> #theButtons / #thecounts) */
.dash2-page #theButtons .btn { margin-bottom: 8px !important; }
.dash2-page #thecounts { font-size: 0.82rem; }

/* right-column account rows / connection rows spacing */
.dash2-page .eventWrap { padding: 8px 0; border-bottom: 1px solid var(--setup-border-light); }
.dash2-page .eventWrap:last-child { border-bottom: none; }

/* inputs rendered by content controls pick up setup look via .setup-wrapper already;
   ensure selects show the chevron (never override background on <select>) */
.dash2-page .form-select { background-color: var(--setup-input-bg); }

/* =====================================================================
   DirectorHome.ascx - persona-first director dashboard (dash2)
   Scoped under .dhx so it never leaks into other pages.
   ===================================================================== */
.dhx { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; color: var(--setup-text); }
.dhx h1, .dhx h3 { font-family: 'Outfit', sans-serif; margin: 0; }

/* --- compact event context bar (director): name/logo/dates/exit live in the shell event strip --- */
.dhx-cbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
    background: var(--setup-card); border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-lg); box-shadow: var(--setup-shadow);
    padding: 12px 18px; margin-bottom: 20px; }
.dhx-cbar-status { display: inline-flex; align-items: center; gap: 8px; min-width: 0;
    font-size: .9rem; color: var(--setup-text-secondary); }
.dhx-cbar-status > .mdi { color: var(--setup-accent); font-size: 1.2rem; flex: none; }
.dhx-cbar-status .dhx-status-txt { color: var(--setup-text); }
.dhx-cbar .dhx-strong { font-weight: 700; color: var(--setup-text); }
.dhx-cbar-count { margin-left: auto; text-align: center; flex: none;
    background: rgba(92,184,48,.12); border-radius: var(--setup-radius-sm); padding: 5px 16px; }
.dhx-cbar-count .dhx-count-n { display: block; font-family: 'Outfit', sans-serif; font-weight: 800;
    font-size: 1.35rem; line-height: 1.05; color: var(--setup-accent-hover); }
.dhx-cbar-count .dhx-count-l { font-size: .6rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--setup-text-secondary); }

/* --- event switcher --- */
.dhx-switch { position: relative; display: inline-block; }
.dhx-switch-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    color: var(--setup-text); background: var(--setup-bg); border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm); padding: 8px 14px; text-align: left; font-weight: 600;
    font-size: .9rem; transition: var(--setup-transition); font-family: 'Outfit', sans-serif; }
.dhx-switch-btn:hover { background: #fff; border-color: var(--setup-text-muted); }
.dhx-switch-btn .mdi:first-child { color: var(--setup-blue); }
.dhx-chev { color: var(--setup-text-muted); font-size: 1.1rem; }
.dhx-evtdd { position: absolute; left: 0; top: calc(100% + 8px); width: 360px; max-width: 88vw;
    background: var(--setup-card); color: var(--setup-text); border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius); box-shadow: var(--setup-shadow-md); z-index: 120; overflow: hidden; }
.dhx-evtdd-head { padding: 11px 14px 4px; font-size: .66rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--setup-text-muted); }
.dhx-evtdd-search { display: flex; align-items: center; gap: 8px; padding: 6px 14px 11px;
    border-bottom: 1px solid var(--setup-border-light); color: var(--setup-text-secondary); }
.dhx-evtdd-search .mdi { font-size: 1rem; }
.dhx-evtdd-search input { border: 0; outline: none; background: transparent; font-family: 'DM Sans', sans-serif;
    font-size: .86rem; color: var(--setup-text); width: 100%; }
.dhx-evtdd-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.dhx-evtitem { display: flex; align-items: center; gap: 12px; padding: 9px 11px;
    border-radius: var(--setup-radius-sm); text-decoration: none; color: var(--setup-text); }
.dhx-evtitem:hover { background: var(--setup-border-light); text-decoration: none; color: var(--setup-text); }
.dhx-evtitem.current { background: var(--setup-blue-light); }
.dhx-evtitem-d { font-size: .72rem; color: var(--setup-text-secondary); white-space: nowrap; min-width: 82px; }
.dhx-evtitem-n { flex: 1; font-weight: 600; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dhx-evtitem-chk { color: var(--setup-accent); }

/* --- coach/manager master-detail (10-35 teams) --- */
.dhx-count-badge { color: var(--setup-text-secondary); font-weight: 600; }
.dhx-md { display: grid; grid-template-columns: 346px 1fr; gap: 18px; align-items: start; }
.dhx-tlist { background: var(--setup-card); border: 1px solid var(--setup-border); border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow); overflow: hidden; display: flex; flex-direction: column; max-height: 620px; }
.dhx-tlh { padding: 14px 16px 12px; border-bottom: 1px solid var(--setup-border-light); }
.dhx-tlh h3 { font-size: .95rem; font-weight: 700; }
.dhx-tlh-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.dhx-club-link { font-family: 'DM Sans', sans-serif; font-size: .74rem; font-weight: 600; white-space: nowrap;
    color: var(--setup-blue) !important; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.dhx-club-link:hover { text-decoration: underline; }
.dhx-club-link .mdi { font-size: .9rem; }
.dhx-tsearch { display: flex; align-items: center; gap: 8px; border: 1px solid var(--setup-border); border-radius: 99px;
    padding: 7px 12px; color: var(--setup-text-secondary); margin-top: 11px; }
.dhx-tsearch input { border: 0; outline: none; background: transparent; font-family: 'DM Sans', sans-serif;
    font-size: .85rem; color: var(--setup-text); width: 100%; }
.dhx-fchips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.dhx-fchip { font-family: 'DM Sans', sans-serif; font-size: .71rem; font-weight: 600; padding: 4px 10px; border-radius: 99px;
    border: 1px solid var(--setup-border); background: var(--setup-card); color: var(--setup-text-secondary); cursor: pointer;
    transition: all var(--setup-transition); }
.dhx-fchip.on { background: var(--setup-primary); color: #fff; border-color: var(--setup-primary); }
.dhx-trows { overflow-y: auto; padding: 6px; }
/* Shown under the team list when a club has more teams at the event than we render. */
.dhx-capnote { display: flex; align-items: flex-start; gap: 6px; padding: 9px 14px 11px;
    border-top: 1px solid var(--setup-border-light); font-size: .73rem; line-height: 1.45;
    color: var(--setup-text-secondary); }
.dhx-capnote .mdi { font-size: .95rem; flex: none; }
.dhx-trow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--setup-radius-sm);
    cursor: pointer; border: 1px solid transparent; transition: background var(--setup-transition); }
.dhx-trow:hover { background: var(--setup-border-light); }
.dhx-trow.sel { background: var(--setup-blue-light); border-color: var(--setup-blue); }
.dhx-tc { width: 31px; height: 31px; border-radius: 8px; display: grid; place-items: center; color: #fff;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .62rem; flex: none; }
.dhx-tn { flex: 1; min-width: 0; }
.dhx-tn b { font-size: .83rem; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dhx-tn small { font-size: .72rem; color: var(--setup-text-secondary); }
.dhx-tdue { font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; white-space: nowrap; flex: none; }
.dhx-tdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dhx-tdetail-wrap { background: var(--setup-card); border: 1px solid var(--setup-border); border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow); padding: 18px 20px; }
.dhx-tdetail.dhx-hidden { display: none; }
.dhx-detail-head { display: flex; align-items: center; gap: 13px; padding-bottom: 14px;
    border-bottom: 1px solid var(--setup-border-light); margin-bottom: 6px; }
.dhx-crest { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
    font-family: 'Outfit', sans-serif; font-weight: 800; color: #fff; font-size: 1rem; flex: none; }
.dhx-detail-head h3 { font-size: 1.05rem; font-weight: 700; }
.dhx-working { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--setup-text-muted); }
.dhx-tsub { color: var(--setup-text-secondary); font-size: .8rem; }
.dhx-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700;
    padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.dhx-pill.ok { background: #f0fdf4; color: var(--setup-accent-hover); }
.dhx-pill.warn { background: var(--setup-warning-light); color: var(--setup-warning); }
.dhx-tline { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--setup-border-light); font-size: .87rem; }
.dhx-tline:first-child { border-top: none; }
.dhx-ti { width: 26px; color: var(--setup-text-muted); text-align: center; flex: none; }
.dhx-tt { flex: 1; min-width: 0; }
.dhx-tk { color: var(--setup-text-secondary); font-size: .74rem; }
.dhx-tv { font-weight: 600; }
.dhx-cta { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; padding: 11px 13px;
    border-radius: var(--setup-radius-sm); background: var(--setup-warning-light); border: 1px solid transparent; }
.dhx-cta.crit { background: var(--setup-danger-light); }
.dhx-cta.info { background: var(--setup-blue-light); border-color: var(--setup-blue); }
.dhx-cta-t { flex: 1; font-size: .84rem; font-weight: 600; }
.dhx-cta-s { font-weight: 400; color: var(--setup-text-secondary); font-size: .78rem; }
.dhx-callout { display: flex; gap: 10px; padding: 11px 13px; margin: 10px 0; border-radius: var(--setup-radius-sm);
    font-size: .83rem; background: var(--setup-blue-light); border-left: 3px solid var(--setup-blue); color: var(--setup-text); }
.dhx-btn.sm { padding: 5px 11px; font-size: .75rem; }

/* --- per-team quick actions (chips) --- */
.dhx-qlinks { display: flex; flex-wrap: wrap; gap: 10px; }
.dhx-ql { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; text-decoration: none;
    background: var(--setup-card); border: 1px solid var(--setup-border); border-radius: var(--setup-radius-sm);
    font-family: 'DM Sans', sans-serif; font-size: .84rem; font-weight: 600; line-height: 1.1;
    color: var(--setup-text) !important; transition: var(--setup-transition); }
.dhx-ql:hover { border-color: var(--setup-accent); box-shadow: var(--setup-shadow); transform: translateY(-1px); }
.dhx-ql .mdi { font-size: 1.05rem; color: var(--setup-accent); }
.dhx-ql span { color: var(--setup-text) !important; }

@media (max-width: 992px) {
    .dhx-md { grid-template-columns: 1fr; }
    .dhx-tlist { max-height: none; }
}
@media (max-width: 480px) {
    .dhx-qlinks { flex-direction: column; align-items: stretch; }
    .dhx-ql { justify-content: flex-start; }
}

/* --- parent (per-child family cards) --- */
.dhx-fam-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.dhx-fam-head h3 { font-size: 1.15rem; font-weight: 700; }
.dhx-pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.dhx-child { background: var(--setup-card); border: 1px solid var(--setup-border); border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow); overflow: hidden; }
.dhx-child-h { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--setup-border-light); }
.dhx-child-h .dhx-crest { width: 44px; height: 44px; border-radius: 50%; }
.dhx-child-h h3 { font-size: 1rem; font-weight: 700; }
.dhx-child-b { padding: 4px 18px 16px; }
.dhx-pill.info { background: var(--setup-blue-light); color: var(--setup-blue); }
@media (max-width: 768px) { .dhx-pgrid { grid-template-columns: 1fr; } }

/* --- college coach (recruiting-first) --- */
.dhx-cc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.dhx-cc-head h3 { font-size: 1.15rem; font-weight: 700; }
.dhx-pactions { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.dhx-rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 4px; }
@media (max-width: 1100px) { .dhx-rgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .dhx-rgrid { grid-template-columns: 1fr; } }
.dhx-cc-head h3 { color: #1e293b !important; }

/* =====================================================================
   SincShell.master - standardized shell chrome (event strip + footer)
   ===================================================================== */
/* the SincSports nav (SICNav) is position:fixed ~68px tall; clear it so the strip shows */
/* In-event: hide the generic white SincSports nav; the event strip is the chrome.
   #searchTB (Nav26's search box) is a sibling of nav.navbar, so it stays toggleable.
   Exclude the event strip itself - it is now a nav.navbar too (.shell-evt-in). */
body.evt-shell nav.navbar:not(.shell-evt-in) { display: none !important; }

.shell-evt { background: var(--evt-brand, #296fbe); color: var(--evt-ink, #fff); box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); margin-top: 0; position: relative; z-index: 30; }
/* .shell-evt-in is a BS5 navbar; override the project's white .navbar theme + nowrap so the
   strip stays transparent (navy .shell-evt shows through) and the menu can wrap on desktop. */
.shell-evt .shell-evt-in.navbar { background: transparent !important; flex-wrap: wrap;
    margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 8px 22px; border: 0; min-height: 0; }
.shell-evt-logo img { height: 34px; width: auto; max-width: 90px; border-radius: 6px; background: #fff; padding: 2px; display: block; }
.shell-evt-id b { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .95rem; display: block; line-height: 1.15; color: var(--evt-ink, #fff); }
.shell-evt-id span { font-size: .72rem; opacity: .85; }
/* event menu (BS5 navbar-nav): full menu that WRAPS to a second line on desktop when long;
   collapses behind the hamburger below md. */
.shell-evt-navwrap { flex: 1 1 auto; }
.shell-evt-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 0 0 0 6px; padding: 0; list-style: none; }
.shell-evt-menu .nav-item { display: flex; }
.shell-evt-menu .nav-link { color: var(--evt-ink, #fff) !important; font-size: .76rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; opacity: .9; padding: 4px 9px; display: inline-flex; align-items: center; border-radius: 6px; }
.shell-evt-menu .nav-link:hover, .shell-evt-menu .nav-link:focus,
.shell-evt-menu .nav-item.show .nav-link { opacity: 1; color: var(--evt-ink, #fff) !important; background: rgba(var(--evt-tint, 255,255,255),.16); }
.shell-evt-menu .dropdown-toggle::after { margin-left: 5px; opacity: .8; }
/* dropdown panels for header items (Brackets - 2026, etc.) */
.shell-evt-ddm { border: 1px solid var(--setup-border); border-radius: var(--setup-radius); box-shadow: var(--setup-shadow-md); padding: 6px; min-width: 210px; }
/* selectors beat the project's ".navbar-nav .dropdown-menu a !important" (0,2,1) green */
.shell-evt-menu .shell-evt-ddm a.dropdown-item { border-radius: var(--setup-radius-sm); font-size: .82rem; padding: 7px 11px; color: var(--setup-text) !important; white-space: normal; }
.shell-evt-menu .shell-evt-ddm a.dropdown-item:hover { background: var(--setup-border-light); color: var(--setup-text) !important; }
.shell-evt-menu .shell-evt-ddm a.dropdown-item.shell-evt-ddm-sub { padding-left: 22px; font-size: .8rem; color: var(--setup-text-secondary) !important; }
.shell-evt-ddm .dropdown-header { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .04em; color: var(--setup-text-muted); padding: 8px 11px 4px; }
/* ADMIN dropdown (event staff / club directors / SincStaff): given a chip look so it reads as
   tooling rather than another event page, and scrollable - the TTAdmin-driven category list can
   run to several dozen entries. */
.shell-evt-menu .nav-link.shell-evt-adminlnk { background: rgba(var(--evt-tint, 255,255,255),.18);
    border: 1px solid rgba(var(--evt-tint, 255,255,255),.3); opacity: 1; }
.shell-evt-menu .nav-link.shell-evt-adminlnk:hover, .shell-evt-menu .nav-link.shell-evt-adminlnk:focus,
.shell-evt-menu .nav-item.show .nav-link.shell-evt-adminlnk { background: rgba(var(--evt-tint, 255,255,255),.32); }
.shell-evt-adminlnk .mdi { font-size: 1rem; margin-right: 4px; line-height: 1; }
/* ADMIN menu: a rail of sections and a pane of pages - the layout TT10 gives the same menu
   (controls/ttnav.ascx). Rendered whole by SincShell.master.vb BuildAdminMenu; the script in
   SincShell.master only switches sections. Below md the same markup is an accordion behind
   an Event / Admin Options switch (see the max-width block further down). */
.shell-evt-menu .shell-adm-menu a.shell-adm-a { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin: 0;
    font-family: var(--setup-font); font-size: 14.5px; font-weight: 500; line-height: 1.25; text-transform: none;
    color: var(--setup-text) !important; white-space: normal; border-radius: 0; background: none; }
.shell-adm-r { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; border: 0; background: none;
    text-align: left; font-family: var(--setup-font); font-size: 14.5px; font-weight: 500; line-height: 1.25;
    color: var(--setup-text); cursor: pointer; }
/* leading icons; the gutter is held open on rows without one so every label starts on the same x */
.shell-adm-a > .mdi:first-child, .shell-adm-r > .mdi:first-child { flex: 0 0 20px; width: 20px; text-align: center;
    font-size: 1.05rem; line-height: 1; opacity: .75; }
.shell-adm-a:not(:has(> .mdi:first-child))::before,
.shell-adm-r:not(:has(> .mdi:first-child))::before { content: ''; flex: 0 0 20px; }
.shell-adm-a > .shell-adm-fav { color: #f6ad37; opacity: 1; }
.shell-adm-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-adm-ch { flex: 0 0 14px; width: 14px; height: 14px; color: var(--setup-text-muted); }
.shell-adm-ch svg { width: 100%; height: 100%; display: block; }
.shell-adm-sec { font-family: var(--setup-font-heading); font-size: 10px; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--setup-text-muted); padding: 12px 14px 6px; }
.shell-adm-q { border-bottom: 1px solid var(--setup-border); padding-bottom: 7px; margin-bottom: 7px; }
.shell-adm-pane { display: none; }
.shell-adm-pane.is-on { display: block; }
.shell-adm-seg { display: none; }
@media (min-width: 768px) {
    /* grid only once Bootstrap adds .show - display:grid on the closed menu would beat
       .dropdown-menu{display:none} and leave the panel over the page at all times */
    .shell-evt-menu .shell-adm-menu.show { display: grid; grid-template-columns: 248px 1fr; width: 606px;
        max-width: calc(100vw - 28px); padding: 0; border: 1px solid var(--setup-border); border-radius: var(--setup-radius);
        background: var(--setup-card);
        box-shadow: 0 18px 44px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.06); }
    /* The hover bridge. allbs5.js opens navbar dropdowns on mouseenter and closes them on
       mouseleave at 992px+, and the gap between the Admin item and the panel belongs to
       neither - so the pointer left the li on its way down and the menu closed. A
       transparent strip, part of the menu, covers the crossing. No overflow:hidden on the
       panel, which would clip it; the two columns round their own outer corners instead. */
    /* Pinned under the Admin item. Bootstrap's top:100% hangs off [data-bs-popper], which it
       only sets when IT opens the menu - allbs5.js's hover opens it without Bootstrap, and
       the panel then sat at top:0, over the Admin button. */
    .shell-evt-menu .shell-adm-menu { top: 100%; left: 0; margin-top: 6px; }
    .shell-evt-menu .shell-adm-menu.show::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
    .shell-adm-rail { background: var(--setup-border-light); border-right: 1px solid var(--setup-border); padding: 8px 0;
        overflow-y: auto; max-height: min(75vh, 640px); border-radius: var(--setup-radius) 0 0 var(--setup-radius); }
    .shell-adm-paneh { padding: 8px 0; overflow-y: auto; max-height: min(75vh, 640px); border-radius: 0 var(--setup-radius) var(--setup-radius) 0; }
    .shell-adm-r:hover { background: var(--setup-border); }
    .shell-adm-r.is-on { background: var(--setup-card); font-weight: 600; box-shadow: inset 2px 0 0 var(--setup-accent); }
    /* hover takes a step darker than the column it stands in */
    .shell-evt-menu .shell-adm-rail a.shell-adm-a:hover { background: var(--setup-border); }
    .shell-evt-menu .shell-adm-paneh a.shell-adm-a:hover { background: var(--setup-border-light); }
}
/* hamburger: hidden at md+ (BS5 handles), styled for mobile */
.shell-evt-burger { border: 1px solid rgba(var(--evt-tint, 255,255,255),.28); color: var(--evt-ink, #fff); padding: 3px 9px; border-radius: 8px; background: rgba(var(--evt-tint, 255,255,255),.12); }
.shell-evt-burger .mdi { font-size: 1.3rem; line-height: 1; }
.shell-evt-burger:focus { box-shadow: none; }
/* Desktop: one slim bar - menu fills the left, the action group (contact/search/
   tickets/account) sits at the right. A long menu wraps within its own space
   without pushing the action group off the row. */
@media (min-width: 768px) {
    .shell-evt-in.navbar { align-items: center; }
    .shell-evt-navwrap { order: 1; flex: 1 1 auto !important; min-width: 0; }
    .shell-evt-right { order: 2; }
    .shell-evt-menu { margin-left: 0; }
}
.searchTB-close { color: var(--setup-text-muted); padding: 4px 8px; }
.searchTB-close:hover { color: var(--setup-danger); }
.searchTB-close .mdi { font-size: 1.3rem; line-height: 1; }
/* right-side group: contact / search / return / account */
.shell-evt-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.shell-evt-contact, .shell-evt-search { display: inline-grid; place-items: center; width: 30px; height: 30px;
    border-radius: 8px; color: var(--evt-ink, #fff); text-decoration: none; background: rgba(var(--evt-tint, 255,255,255),.12); border: 1px solid rgba(var(--evt-tint, 255,255,255),.24); }
.shell-evt-contact:hover, .shell-evt-search:hover { background: rgba(var(--evt-tint, 255,255,255),.28); color: var(--evt-ink, #fff); }
.shell-evt-contact .mdi, .shell-evt-search .mdi { color: var(--evt-ink, #fff); font-size: 1.05rem; }
/* Road to Game Day flag, right of Admin: same tile as contact/search; RgdNav positions its
   count badge against it. .shell-evt-menu .nav-link pads and upper-cases menu items, so the
   tile takes those back. */
.shell-evt-rgdli { align-items: center; }
.shell-evt-menu .nav-link.shell-evt-rgd { display: inline-grid; place-items: center; width: 30px; height: 30px;
    padding: 0 !important; opacity: 1; margin: 0 4px; } /* !important: the theme's .navbar-nav .nav-link padding-inline carries one */
.shell-evt-rgd { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
    color: var(--evt-ink, #fff); text-decoration: none; background: rgba(var(--evt-tint, 255,255,255),.12); border: 1px solid rgba(var(--evt-tint, 255,255,255),.24); }
.shell-evt-menu .nav-link.shell-evt-rgd:hover, .shell-evt-rgd:hover { background: rgba(var(--evt-tint, 255,255,255),.28); color: var(--evt-ink, #fff); }
.shell-evt-rgd .mdi { color: var(--evt-ink, #fff); font-size: 1.15rem; line-height: 1; }
/* RgdNav renders its count badge in inline flow (ttnav's bar). In this 30px grid tile that would
   make it a second grid row, so here it is taken out of flow, sized like the ticket badge
   (.shell-evt-tk-n), and sits on the corner. */
.shell-evt-rgd > span[aria-hidden] { position: absolute !important; margin: 0 !important; top: -7px !important; right: -9px !important; min-width: 10px !important; height: 16px !important;
    line-height: 16px !important; padding: 0 3px !important; font-size: .64rem !important; border-width: 1.5px !important; }
/* open help-desk tickets: red button + count badge so it pops as an alert */
.shell-evt-tickets { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px;
    border-radius: 8px; color: #fff !important; text-decoration: none; background: rgba(220,38,38,.92); border: 1px solid rgba(255,255,255,.28); }
.shell-evt-tickets:hover { background: #dc2626; color: #fff !important; }
.shell-evt-tickets .mdi { color: #fff; font-size: 1.05rem; }
.shell-evt-tk-n { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: #fff; color: #b91c1c; font-size: .64rem; font-weight: 800;
    display: grid; place-items: center; font-family: 'Outfit', sans-serif; box-shadow: 0 0 0 1.5px var(--evt-brand, #296fbe); }
.shell-evt-exit { display: inline-flex; align-items: center; gap: 6px; background: rgba(var(--evt-tint, 255,255,255),.16);
    border: 1px solid rgba(var(--evt-tint, 255,255,255),.32); color: var(--evt-ink, #fff); font-weight: 600; font-size: .76rem; padding: 5px 12px;
    border-radius: 99px; text-decoration: none; white-space: nowrap; }
.shell-evt-exit:hover { background: rgba(var(--evt-tint, 255,255,255),.3); color: var(--evt-ink, #fff); text-decoration: none; }
.shell-evt-exit .mdi { color: var(--evt-ink, #fff); }
/* account menu (moved off the hidden top nav) */
.shell-evt-acct { position: relative; }
.shell-evt-acct-btn { display: inline-flex; align-items: center; gap: 5px; background: rgba(var(--evt-tint, 255,255,255),.12);
    border: 1px solid rgba(var(--evt-tint, 255,255,255),.24); color: var(--evt-ink, #fff); border-radius: 99px; padding: 3px 8px 3px 4px; cursor: pointer; }
.shell-evt-av { width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--evt-tint, 255,255,255),.9); color: var(--evt-brand, #296fbe);
    display: grid; place-items: center; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: .72rem; }
.shell-evt-acct-btn .mdi { color: var(--evt-ink, #fff); font-size: 1rem; }
.shell-evt-acctmenu { border: 1px solid var(--setup-border); border-radius: var(--setup-radius); box-shadow: var(--setup-shadow-md); padding: 6px; min-width: 190px; }
.shell-evt-acctname { padding: 8px 11px 9px; border-bottom: 1px solid var(--setup-border-light); margin-bottom: 5px;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .85rem; color: var(--setup-text); }
.shell-evt-acctmenu .dropdown-item { border-radius: var(--setup-radius-sm); font-size: .85rem; padding: 8px 11px; color: var(--setup-text); }
.shell-evt-acctmenu .dropdown-item:hover { background: var(--setup-border-light); color: var(--setup-text); }

.shell-foot { background: var(--setup-primary); color: #cbd5e1; margin-top: 30px; }
.shell-foot-in { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 22px; font-size: .8rem; }
.shell-foot-links { margin-left: auto; display: flex; gap: 16px; flex-wrap: wrap; }
.shell-foot a { color: #cbd5e1; text-decoration: none; }
.shell-foot a:hover { color: #fff; }

/* Below md, BS5 collapses the menu behind the hamburger. Push the collapsed panel to the
   bottom so it drops UNDER the logo/name + action row when opened, and stack it vertically. */
@media (max-width: 767.98px) {
    .shell-evt-in { padding: 8px 14px; row-gap: 8px; }
    .shell-evt-navwrap { order: 10; }
    .shell-evt-menu { flex-direction: column; align-items: stretch; gap: 2px; margin: 6px 0 2px; width: 100%; }
    .shell-evt-menu .nav-link { padding: 9px 6px; font-size: .82rem; }
    /* mobile dropdowns render inline (BS5 static) - give them room and a subtle inset */
    .shell-evt-ddm { background: rgba(var(--evt-tint, 255,255,255),.08); border: none; box-shadow: none; margin: 0 0 4px 8px; padding: 2px 0; }
    .shell-evt-menu .shell-evt-ddm a.dropdown-item, .shell-evt-ddm .dropdown-header { color: var(--evt-ink, #fff) !important; }
    .shell-evt-menu .shell-evt-ddm a.dropdown-item.shell-evt-ddm-sub { color: rgba(var(--evt-tint, 255,255,255),.8) !important; }
    .shell-evt-menu .shell-evt-ddm a.dropdown-item:hover { background: rgba(var(--evt-tint, 255,255,255),.16); color: var(--evt-ink, #fff) !important; }
    /* ADMIN menu on a phone: an Event / Admin Options switch at the top of the panel, as on
       TT10, so the director is not scrolling past every admin row to reach the event pages.
       The Admin menu opens in place as an accordion: the rail and pane wrappers drop out of
       the box tree (display:contents) and each button and pane carries an inline order that
       puts a section's pages directly under its button. */
    .shell-adm-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 6px 0 8px; }
    .shell-adm-seg button { min-height: 44px; padding: 0 8px; border: 1px solid rgba(var(--evt-tint, 255,255,255),.28);
        border-radius: 9px; background: rgba(var(--evt-tint, 255,255,255),.10); color: var(--evt-ink, #fff);
        font-weight: 600; font-size: 14px; line-height: 1.2; }
    .shell-adm-seg button[aria-selected="true"] { background: var(--setup-card); border-color: var(--setup-card); color: var(--setup-primary); }
    .shell-evt-navwrap:not(.adm-tab-admin) .shell-evt-menu > .shell-adm { display: none; }
    .shell-evt-navwrap.adm-tab-admin .shell-evt-menu > li:not(.shell-adm):not(.shell-evt-rgdli) { display: none; }
    .adm-tab-admin .shell-evt-menu > .shell-adm { display: block; }
    .adm-tab-admin .shell-adm > .nav-link { display: none !important; }
    .adm-tab-admin .shell-evt-menu .shell-adm > .shell-adm-menu { display: flex; flex-direction: column; position: static;
        float: none; width: 100%; margin: 0 0 4px; padding: 0; border: 0; border-radius: var(--setup-radius-sm);
        overflow: hidden; background: var(--setup-card); box-shadow: none; }
    .shell-adm-rail, .shell-adm-paneh { display: contents; }
    .shell-adm-sec { display: none; }
    .shell-adm-q { order: 0; margin: 0; padding: 0; }
    .shell-adm-r { min-height: 52px; padding: 8px 16px; font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--setup-border-light); }
    .shell-adm-r .shell-adm-ch { transition: transform .18s ease-out; }
    .shell-adm-r.is-on .shell-adm-ch { transform: rotate(90deg); }
    .shell-adm-pane.is-on { background: var(--setup-input-bg); }
    .shell-evt-menu .shell-adm-menu a.shell-adm-a { min-height: 48px; padding: 8px 16px; font-size: 15px;
        border-bottom: 1px solid var(--setup-border-light); }
    .shell-evt-menu .shell-adm-pane a.shell-adm-a { padding-left: 32px; }
    .shell-foot-links { margin-left: 0; }
}
.dhx-strong { font-weight: 700; }
.dhx-warn-txt { color: var(--setup-danger); font-weight: 600; }

/* --- stat row --- */
/* auto-fit, not a fixed 4, so the row still fills the width when a card is withheld -
   sports without online check-in (baseball, lacrosse) render three cards, not four. */
.dhx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 18px; }
.dhx-stat { position: relative; background: var(--setup-card); border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius); box-shadow: var(--setup-shadow); padding: 16px 18px; }
.dhx-stat-ic { position: absolute; top: 15px; right: 16px; font-size: 1.2rem; color: var(--setup-text-muted); }
.dhx-stat-k { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--setup-text-secondary); }
.dhx-stat-v { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.9rem; line-height: 1.1; margin: 5px 0 2px; }
.dhx-stat-v small { font-size: 1rem; color: var(--setup-text-secondary); font-weight: 600; }
.dhx-stat-d { font-size: .78rem; color: var(--setup-text-secondary); }
.dhx-bar { height: 7px; border-radius: 99px; background: var(--setup-border-light); overflow: hidden; margin-top: 9px; }
.dhx-bar > i { display: block; height: 100%; border-radius: 99px; }

/* --- card header shared --- */
.dhx-card-h { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.dhx-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 1.1rem; flex: none; }
.dhx-ic.blue { background: var(--setup-blue-light); color: var(--setup-blue); }
.dhx-ic.green { background: #f0fdf4; color: var(--setup-accent); }
.dhx-ic.rose { background: var(--setup-danger-light); color: var(--setup-danger); }
.dhx-ic.amber { background: var(--setup-warning-light); color: var(--setup-warning); }
.dhx-card-h h3 { font-size: .98rem; font-weight: 700; }

/* --- Run It Back: next season is ready to set up (director, in-event) ---
   The only saturated surface on the dashboard, so it reads as the one thing to do
   when a completed event is renewable. */
.dhx-rib { border-radius: var(--setup-radius-lg); overflow: hidden; margin-bottom: 20px;
    background: linear-gradient(120deg, #0f3d2e, #14603f 55%, #1d7a4f); color: #fff;
    box-shadow: var(--setup-shadow-md); }
.dhx-rib-in { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; padding: 22px 24px; }
.dhx-rib-ic { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24); font-size: 1.35rem; }
.dhx-rib-ic .mdi { color: #fff; }
.dhx-rib-t { flex: 1 1 380px; min-width: 0; }
.dhx-rib-flag { display: inline-flex; align-items: center; font-size: .64rem; font-weight: 800;
    letter-spacing: .09em; text-transform: uppercase; background: #fff; color: #0f3d2e;
    padding: 4px 10px; border-radius: 999px; }
.dhx-rib-t h3 { font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 800;
    margin: 10px 0 6px; color: #fff; }
.dhx-rib-t p { margin: 0; font-size: .88rem; color: #d7f0e2; max-width: 64ch; }
.dhx-rib-t p b { color: #fff; }
.dhx-rib-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.dhx-rib-chip { font-size: .72rem; font-weight: 600; padding: 4px 11px; border-radius: 999px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #fff; }
.dhx-rib-cta { display: flex; flex-direction: column; gap: 9px; flex: none; }
.dhx-rib-go, .dhx-rib-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .84rem; padding: 10px 18px;
    border-radius: var(--setup-radius-sm); text-decoration: none; white-space: nowrap;
    transition: var(--setup-transition); }
.dhx-rib-go { background: var(--setup-accent); color: #08210a; border: 1px solid var(--setup-accent); }
.dhx-rib-go:hover { background: #6fd13c; color: #08210a; text-decoration: none; }
.dhx-rib-ghost { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff; }
.dhx-rib-ghost:hover { background: rgba(255,255,255,.24); color: #fff; text-decoration: none; }
.dhx-rib-go .mdi, .dhx-rib-ghost .mdi { font-size: 1rem; }
.dhx-rib-hint { font-size: .72rem; color: #bfe3d0; text-align: center; }
@media (max-width: 700px) { .dhx-rib-cta { width: 100%; } }

/* --- portfolio header (no-event dashboard): command strip + next event --- */
.pf-cmd { display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    background: var(--setup-card); border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-lg); box-shadow: var(--setup-shadow);
    padding: 18px 22px; margin-bottom: 18px; }
.pf-cmd-t { flex: 1 1 320px; min-width: 0; }
.pf-cmd-t h2 { font-family: 'Outfit', sans-serif; font-size: 1.28rem; font-weight: 800; margin: 0; color: var(--setup-text); }
.pf-cmd-t p { margin: 4px 0 0; font-size: .9rem; color: var(--setup-text-secondary); }
.pf-cmd-t p b { color: var(--setup-text); font-weight: 700; }
.pf-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.pf-kpi { text-align: center; padding: 8px 16px; border-radius: var(--setup-radius);
    background: var(--setup-border-light); min-width: 82px; }
.pf-kpi b { display: block; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.3rem; line-height: 1.1; color: var(--setup-text); }
.pf-kpi span { font-size: .61rem; text-transform: uppercase; letter-spacing: .08em; color: var(--setup-text-secondary); }
.pf-kpi.warn { background: var(--setup-warning-light); }
.pf-kpi.warn b { color: var(--setup-warning); }

/* next event: details (dark) + needs-attention (light) side by side, equal height */
.pf-nextgrid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; margin-bottom: 20px; align-items: stretch; }
.pf-nextgrid > * { height: 100%; margin: 0 !important; }
@media (max-width: 900px) { .pf-nextgrid { grid-template-columns: 1fr; } }

.pf-next { border-radius: var(--setup-radius-lg); padding: 20px 22px;
    background: linear-gradient(120deg, var(--setup-primary), #1e293b 62%, #243b53);
    color: #fff; box-shadow: var(--setup-shadow-md); display: flex; flex-direction: column; }
.pf-next-head { display: flex; align-items: center; gap: 10px; }
.pf-flag { display: inline-flex; align-items: center; font-size: .64rem; font-weight: 800;
    letter-spacing: .09em; text-transform: uppercase; background: var(--setup-accent);
    color: #08210a; padding: 4px 11px; border-radius: 999px; }
.pf-next-eyebrow { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #93a4bf; }
.pf-next h3 { font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 800; margin: 12px 0 3px; color: #fff; }
.pf-next-meta { font-size: .83rem; color: #cbd5e1; }
.pf-next-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pf-stat { flex: 1 1 90px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--setup-radius); padding: 9px 13px; }
.pf-stat b { display: block; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.15rem; line-height: 1.15; color: #fff; }
.pf-stat b small { font-size: .78rem; opacity: .7; font-weight: 700; }
.pf-stat span { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; color: #cbd5e1; }
.pf-next-ready { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pf-ready-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600;
    padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); }
.pf-ready-pill .mdi { font-size: .95rem; }
.pf-ready-pill.ok .mdi { color: #86efac; }
.pf-ready-pill.todo { background: rgba(249,115,22,.18); border-color: rgba(249,115,22,.4); }
.pf-ready-pill.todo .mdi { color: #fdba74; }
.pf-next-cta { display: flex; gap: 9px; margin-top: auto; padding-top: 16px; flex-wrap: wrap; }
.pf-go, .pf-ghost { display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .82rem; padding: 9px 17px;
    border-radius: var(--setup-radius-sm); text-decoration: none; white-space: nowrap; transition: var(--setup-transition); }
.pf-go { background: var(--setup-accent); color: #08210a; border: 1px solid var(--setup-accent); }
.pf-go:hover { background: #6fd13c; color: #08210a; text-decoration: none; }
.pf-ghost { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff; }
.pf-ghost:hover { background: rgba(255,255,255,.24); color: #fff; text-decoration: none; }

/* needs-attention card */
.pf-attn { padding: 18px 20px; display: flex; flex-direction: column; }
.pf-attn-rows { display: flex; flex-direction: column; }
.pf-arow { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-top: 1px solid var(--setup-border-light); }
.pf-arow:first-child { border-top: 0; }
.pf-arow-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; font-size: 1.05rem; }
.pf-arow-ic.blue { background: var(--setup-blue-light); color: var(--setup-blue); }
.pf-arow-ic.amber { background: var(--setup-amber-light, var(--setup-warning-light)); color: var(--setup-warning); }
.pf-arow-ic.rose { background: var(--setup-danger-light); color: var(--setup-danger); }
.pf-arow-m { flex: 1; min-width: 0; }
.pf-arow-t { font-weight: 600; font-size: .88rem; }
.pf-arow-s { font-size: .76rem; color: var(--setup-text-secondary); }
.pf-arow-go { flex: none; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .76rem;
    text-decoration: none; color: var(--setup-text); border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm); padding: 6px 12px; transition: var(--setup-transition); }
.pf-arow-go:hover { border-color: var(--setup-accent); color: var(--setup-accent-hover); text-decoration: none; }
.pf-allclear { display: flex; align-items: center; gap: 9px; padding: 16px 4px; color: var(--setup-text-secondary); font-size: .86rem; }
.pf-allclear .mdi { color: var(--setup-accent); font-size: 1.2rem; }

/* lower row: upcoming events + family, 50/50, equal height */
.pf-lowergrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; align-items: stretch; }
@media (max-width: 900px) { .pf-lowergrid { grid-template-columns: 1fr; } }
.pf-ue, .pf-famcard { padding: 18px 20px; display: flex; flex-direction: column; }

/* upcoming events list - fills the card, one row per event */
.pf-ue-list { display: flex; flex-direction: column; flex: 1; max-height: 360px; overflow-y: auto; margin: 0 -20px -6px; }
.pf-ue-row { display: flex; align-items: center; gap: 12px; padding: 10px 20px; text-decoration: none;
    color: var(--setup-text); border-top: 1px solid var(--setup-border-light); transition: background var(--setup-transition); }
.pf-ue-row:first-child { border-top: 0; }
.pf-ue-row:hover { background: var(--setup-blue-light); text-decoration: none; color: var(--setup-text); }
.pf-ue-date { flex: none; width: 58px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .82rem; color: var(--setup-blue); }
.pf-ue-name { flex: 1; min-width: 0; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-ue-yr { flex: none; font-size: .74rem; color: var(--setup-text-muted); font-variant-numeric: tabular-nums; }
/* "the published schedule changed for one of your teams at this event" marker */
.pf-ue-chg { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
    font-size: .7rem; font-weight: 700; background: var(--setup-blue-light); color: var(--setup-blue); }

/* family / accounts cards */
.pf-fam-count { margin-left: auto; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: .78rem;
    background: var(--setup-green-light, #f0fdf4); color: var(--setup-accent-hover); border-radius: 999px; padding: 3px 11px; }
/* family list capped to the same height as the upcoming-events list, and scrolls */
.pf-fam-list { display: flex; flex-direction: column; gap: 10px; flex: 1; max-height: 360px; overflow-y: auto; }
.pf-fam { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius); background: var(--setup-card); }
.pf-fam-av { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .8rem; color: #fff; background: var(--setup-primary); }
.pf-fam-m { flex: 1; min-width: 0; }
.pf-fam-n { font-weight: 600; font-size: .89rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-fam-r { font-size: .76rem; color: var(--setup-text-secondary); display: flex; align-items: center; gap: 5px; }
.pf-fam-r .mdi { font-size: .95rem; color: var(--setup-text-muted); }
.pf-fam-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.pf-fam-switch { flex: none; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .76rem; text-decoration: none;
    color: var(--setup-blue); border: 1px solid var(--setup-border); border-radius: var(--setup-radius-sm);
    padding: 6px 11px; transition: var(--setup-transition); white-space: nowrap; }
.pf-fam-switch:hover { border-color: var(--setup-blue); background: var(--setup-blue-light); text-decoration: none; }
/* merge request (duplicate accounts) */
.pf-fam-merge { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px;
    border: 1px solid var(--setup-border); border-radius: var(--setup-radius-sm); color: var(--setup-text-secondary);
    text-decoration: none; transition: var(--setup-transition); }
.pf-fam-merge:hover { border-color: var(--setup-accent); color: var(--setup-accent-hover); background: var(--setup-green-light, #f0fdf4); text-decoration: none; }
.pf-fam-merge .mdi { font-size: 1.05rem; }

/* ============================================================
   No-event director dashboard: dress up the legacy Overview
   Overview.ascx was built for an in-event context - it uses isotope/packery (JS that
   absolutely-positions its cards) + AOS fades + a 9/3 split. Below the portfolio header
   that reads as sparse and lopsided. We keep the control (so the family/account switcher,
   merge and Need Help all keep working) and just relayout it: neutralize isotope, force
   AOS visible, put the working cards in an even grid, and make the family panel full width.
   All scoped to .pf-lower so the in-event Overview is untouched.
   ============================================================ */
.pf-lower [data-aos] { opacity: 1 !important; transform: none !important; }

/* neutralize isotope/packery - undo the JS-applied absolute positioning + row height */
.pf-lower .row[data-isotope] { height: auto !important; position: static !important; }
.pf-lower .row[data-isotope] > * {
    position: static !important; left: auto !important; top: auto !important;
    transform: none !important; width: auto !important; max-width: none !important;
}

/* flatten the outer 9 / 3 split so the cards and the family panel each get full width */
.pf-lower > .row { display: block; margin: 0; }
.pf-lower > .row > [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; }

/* the working overview cards -> an even, responsive grid */
.pf-lower .row[data-isotope] {
    /* Full-width stacked cards. A director's broad overview realistically has one or two
       real cards (Upcoming Events), which read better full width as a list than crammed
       into a sparse grid. */
    display: block !important; margin: 0;
}
.pf-lower .row[data-isotope] > [class*="col"] { margin: 0 0 18px !important; }
.pf-lower .row[data-isotope] > [class*="col"] { margin: 0 !important; }

/* the family / account-switcher + Need Help rail -> full width, stacked */
.pf-lower > .row > [class*="col-xl-3"] > .row { display: block; margin: 0; }
.pf-lower > .row > [class*="col-xl-3"] > .row > [class*="col"] { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; }
.pf-lower > .row > [class*="col-xl-3"] .card { margin: 0 0 18px !important; }

/* equal-height cards + consistent chrome */
.pf-lower .card { height: 100%; margin: 0 0 18px !important;
    border-radius: var(--setup-radius-lg); border: 1px solid var(--setup-border);
    box-shadow: var(--setup-shadow); }
.pf-lower .card-body { padding: 18px 20px; }
/* Need Help card at full width: the qmark art was authored to be stretched into a
   narrow rail (background-size:100% 100%); full width it distorts/tiles, so drop it and
   keep a clean text card. */
.pf-lower .card-body [style*="qmark"] { background-image: none !important; padding-top: 0 !important; }

/* --- "Renew your events" list (no-event dashboard) --- */
.rnw-card { margin-bottom: 20px; }
.rnw-count { margin-left: auto; font-family: 'Outfit', sans-serif; font-weight: 800;
    font-size: .78rem; background: var(--setup-warning-light); color: var(--setup-warning);
    border-radius: 999px; padding: 3px 11px; }
/* horizontal card rail - these lists can run long, so scroll sideways
   instead of pushing the rest of the dashboard down the page */
.rnw-scroll { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
    padding: 4px 20px 18px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; }
.rnw-scroll::-webkit-scrollbar { height: 7px; }
.rnw-scroll::-webkit-scrollbar-track { background: transparent; }
.rnw-scroll::-webkit-scrollbar-thumb { background: var(--setup-border); border-radius: 99px; }
.rnw-scroll::-webkit-scrollbar-thumb:hover { background: var(--setup-text-muted); }
.rnw-item { flex: 0 0 232px; scroll-snap-align: start; display: flex; flex-direction: column;
    gap: 3px; padding: 14px 15px 15px; border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius); background: var(--setup-card);
    transition: var(--setup-transition); }
.rnw-item:hover { border-color: var(--setup-accent); box-shadow: var(--setup-shadow); transform: translateY(-1px); }
.rnw-logo { width: 42px; height: 42px; border-radius: 9px; overflow: hidden; margin-bottom: 8px;
    border: 1px solid var(--setup-border); background: #fff; display: grid; place-items: center; }
.rnw-logo img { max-width: 100%; max-height: 100%; }
.rnw-n { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .9rem; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; }
.rnw-s { font-size: .74rem; color: var(--setup-text-secondary); }
.rnw-go { margin-top: 11px; display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .8rem;
    background: var(--setup-accent); color: #08210a; border-radius: var(--setup-radius-sm);
    padding: 8px 14px; transition: var(--setup-transition); }
.rnw-go:hover { background: var(--setup-accent-hover); color: #fff; text-decoration: none; }

/* --- dhx cards: .setup-card carries no padding of its own (it expects
   .setup-card-header/.setup-card-body children), so give the dhx cards theirs --- */
.dhx .setup-card { padding: 18px 20px; }
.dhx .setup-card.dhx-pad0 { padding: 0 !important; }
.dhx .dhx-pad0 .dhx-rows { padding: 0 20px 14px; }
.dhx-chart-empty { display: flex; align-items: center; gap: 10px; padding: 22px 4px;
    color: var(--setup-text-secondary); font-size: .86rem; }
.dhx-chart-empty .mdi { font-size: 1.4rem; color: var(--setup-text-muted); }

/* --- legacy BS4 badge/list classes used by the older dashboard controls.
   BS5 dropped badge-secondary/badge-pill, so on the BS5 shell those counts
   rendered as white text with no background (invisible). Normalize for both. --- */
.dash2-page .badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px;
    padding: 3px 9px; border-radius: 99px; font-family: var(--setup-font);
    font-size: .74rem; font-weight: 700; line-height: 1.4;
    background: var(--setup-border-light); color: var(--setup-text-secondary);
}
.dash2-page .badge-primary, .dash2-page .badge-info { background: var(--setup-blue-light); color: var(--setup-blue); }
.dash2-page .badge-success { background: #f0fdf4; color: var(--setup-accent-hover); }
.dash2-page .badge-danger { background: var(--setup-danger-light); color: var(--setup-danger); }
.dash2-page .list-item { display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0; border-top: 1px solid var(--setup-border-light); font-size: .88rem; }
.dash2-page .list-group-flush > .list-item:first-child { border-top: 0; }

/* --- pending-connection gate card --- */
.pconn-card { max-width: 760px; margin: 8px auto 24px; }
/* .setup-card carries no padding of its own and the .dhx rule that supplies it is scoped
   to the .dhx shell, so this card rendered flush to its edges on the dashboard. The
   pending variant brings its own padding (.dhx-pad0 header + .pconn-body); only pad the
   plain one. */
.pconn-card:not(.dhx-pad0) { padding: 18px 20px; }
.pconn-body { padding: 2px 20px 18px; }
.pconn-body h2 { font-family: 'Outfit', sans-serif; font-size: 1.02rem; font-weight: 700; margin: 14px 0 6px; }
.pconn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between;
    padding: 14px 0; border-top: 1px solid var(--setup-border-light); }
.pconn-info { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 260px; }
.pconn-logo { width: 52px; height: 52px; object-fit: contain; border-radius: 10px; border: 1px solid var(--setup-border);
    background: #fff; padding: 3px; flex: none; }
.pconn-meta { min-width: 0; }
.pconn-meta h3 { font-family: 'Outfit', sans-serif; font-size: .95rem; font-weight: 700; margin: 0 0 2px; }
.pconn-meta > div { font-size: .82rem; color: var(--setup-text-secondary); }
.pconn-tag { margin-top: 4px; font-size: .78rem; color: var(--setup-warning); font-weight: 600; }
.pconn-action { flex: none; width: 220px; max-width: 100%; }
.pconn-foot { text-align: right; padding-top: 10px; }
@media (max-width: 560px) { .pconn-action { width: 100%; } }

/* --- dashboard persona tab bar (replaces the old left sidebar nav) ---
   Self-contained (no Bootstrap grid) so it renders identically on BS4 and BS5 masters. */
.sinc-tabs-wrap { margin: 0 0 22px; border-bottom: 1px solid var(--setup-border);
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none; }
.sinc-tabs-wrap::-webkit-scrollbar { width: 0; height: 0; display: none; }
.sinc-tabs { display: flex; gap: 2px; min-width: max-content; }
.sinc-tab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; text-decoration: none;
    color: var(--setup-text-secondary); font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .9rem;
    white-space: nowrap; border-bottom: 2.5px solid transparent; margin-bottom: -1px;
    transition: color var(--setup-transition), background var(--setup-transition), border-color var(--setup-transition); }
.sinc-tab .mdi { font-size: 1.05rem; line-height: 1; }
.sinc-tab:hover { color: var(--setup-text); text-decoration: none; background: var(--setup-border-light); }
.sinc-tab.active { color: var(--setup-accent-hover); border-bottom-color: var(--setup-accent); }
.sinc-tab.active .mdi { color: var(--setup-accent); }
/* push "Back to Sinc" all the way to the right of the tab bar */
.sinc-tabs .sinc-tab[data-page="Back to Sinc"] { margin-left: auto; }

/* Phone: no horizontal scroll (people miss it). Show every option as a wrapping
   pill row - all tabs visible at once, clear filled active state. */
@media (max-width: 640px) {
    .sinc-tabs-wrap { overflow: visible; border-bottom: none; background: none; margin-bottom: 14px; }
    .sinc-tabs { flex-wrap: wrap; min-width: 0; gap: 6px; }
    .sinc-tab { padding: 7px 13px; font-size: .82rem; gap: 6px; border: 1px solid var(--setup-border);
        border-radius: 99px; margin-bottom: 0; background: var(--setup-card); }
    .sinc-tab .mdi { font-size: .95rem; }
    .sinc-tab:hover { background: var(--setup-border-light); }
    .sinc-tab.active { background: var(--setup-accent); color: #fff; border-color: var(--setup-accent); }
    .sinc-tab.active .mdi { color: #fff; }
    /* flow inline when wrapped (no auto-push to a lonely row) */
    .sinc-tabs .sinc-tab[data-page="Back to Sinc"] { margin-left: 0; }
}

/* ============================================================
   Tab lists (Upcoming Events / Clubs / Teams) - modernized
   ============================================================ */
.ue-card { margin-bottom: 20px; }
.ue-card .dhx-card-h { padding: 16px 20px 6px; }
.ue-list { padding: 4px 10px 10px; }
.ue-row { display: flex; align-items: center; gap: 14px; padding: 14px 10px; border-top: 1px solid var(--setup-border-light); }
.ue-row:first-child { border-top: none; }
.ue-logo { width: 200px; height: auto; max-height: 120px; object-fit: contain; border-radius: 12px; background: #fff;
    border: 1px solid var(--setup-border-light); flex: none; padding: 4px; }
.ue-main { flex: 1 1 200px; min-width: 0; }
.ue-name { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .98rem; color: var(--setup-text) !important; text-decoration: none; }
.ue-name:hover { color: var(--setup-accent-hover) !important; text-decoration: none; }
.ue-date { font-size: .8rem; color: var(--setup-text-secondary); margin-top: 2px; }
.ue-date .mdi { font-size: .9rem; vertical-align: -1px; }
.ue-teams { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ue-team { display: flex; align-items: baseline; gap: 8px; font-size: .82rem; }
.ue-team-n { flex: 1 1 auto; min-width: 0; color: var(--setup-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ue-team-num { color: var(--setup-text-muted); font-size: .76rem; flex: none; }
.ue-team-st { color: var(--setup-text-secondary); font-size: .76rem; flex: none; }

.ue-empty, .conn-empty { display: flex; align-items: center; gap: 14px; padding: 26px 18px; color: var(--setup-text-secondary); }
.ue-empty .mdi, .conn-empty .mdi { font-size: 2rem; color: var(--setup-text-muted); flex: none; }
.ue-empty h3, .conn-empty h3 { font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 700; color: var(--setup-text); margin: 0 0 2px; }
.ue-empty p, .conn-empty p { margin: 0; font-size: .85rem; }

@media (max-width: 720px) {
    .ue-row { flex-wrap: wrap; }
    .ue-logo { width: 56px; height: 56px; max-height: 56px; }
    .ue-teams { flex-basis: 100%; padding-left: 70px; }
}

/* connections list (Clubs / Teams) */
.conn-list { padding: 2px 4px 6px; }
.conn-list h2 { font-family: 'Outfit', sans-serif; font-size: .95rem; font-weight: 700; color: var(--setup-text); margin: 8px 4px 6px; }
.conn-list hr { display: none; }
.conn-row { display: flex; align-items: center; gap: 14px; padding: 14px 6px; border-top: 1px solid var(--setup-border-light); }
.conn-row:first-of-type { border-top: none; }
.conn-logo { width: 200px; height: auto; max-height: 120px; object-fit: contain; border-radius: 12px; background: #fff;
    border: 1px solid var(--setup-border-light); flex: none; padding: 4px; }
.conn-main { flex: 1 1 auto; min-width: 0; }
.conn-name { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .98rem; color: var(--setup-text); margin: 0 0 2px; }
.conn-detail { font-size: .82rem; color: var(--setup-text-secondary); line-height: 1.45; }
.conn-detail-primary { color: var(--setup-text) !important; font-weight: 600; }
.conn-detail:empty { display: none; }
.conn-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.conn-badge { font-size: .74rem; font-weight: 600; color: var(--setup-text-secondary); text-align: right; }
.conn-badge:empty { display: none; }
.conn-actions { display: flex; align-items: center; gap: 8px; }
.conn-actions .btn { white-space: nowrap; }
.conn-actions .mdi-delete { font-size: 1.15rem; }

@media (max-width: 640px) {
    .conn-row { flex-wrap: wrap; }
    .conn-logo { width: 56px; height: 56px; max-height: 56px; }
    .conn-side { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; padding-left: 70px; }
    .conn-badge { text-align: left; }
}

/* --- owner-only account hub (Account Settings tab) --- */
.dhx-ic.navy { background: var(--setup-primary); color: #fff; }
.acct-scope { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px;
    border-left: 3px solid var(--setup-blue); background: var(--setup-blue-light); }
.acct-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: start; }
/* .setup-card has no padding of its own (it expects .setup-card-header/-body children to
   supply it). These cards use .dhx-card-h + a literal, so give the card the padding. */
.acct-grid .setup-card { padding: 18px 20px; margin-bottom: 0; }
.acct-field { display: flex; justify-content: space-between; gap: 12px; align-items: center;
    padding: 11px 0; border-top: 1px solid var(--setup-border-light); font-size: .88rem; }
.acct-field:first-child { border-top: 0; }
.acct-k { color: var(--setup-text-secondary); flex: none; }
.acct-v { font-weight: 600; text-align: right; display: flex; align-items: center; gap: 8px;
    justify-content: flex-end; flex-wrap: wrap; min-width: 0; word-break: break-word; }
.acct-empty { color: var(--setup-text-muted); font-weight: 400; font-style: italic; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.acct-badge-ok { background: var(--setup-accent); color: #fff; }
.acct-badge-mut { background: var(--setup-border-light); color: var(--setup-text-secondary); }
@media (max-width: 920px) { .acct-grid { grid-template-columns: 1fr; } }
.dhx-sub { font-size: .76rem; color: var(--setup-text-secondary); }
.dhx-ml { margin-left: auto; }
.dhx-section-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--setup-text-muted); margin: 22px 2px 12px; }
.dhx-fam-wrap { margin-top: 22px; }

/* --- coach: "register today" empty state --- */
.dhx-register { display: flex; align-items: center; gap: 16px; padding: 20px 22px; margin-bottom: 20px;
    background: linear-gradient(120deg, var(--setup-primary), var(--setup-primary-light));
    border-radius: var(--setup-radius-lg); color: #fff; box-shadow: var(--setup-shadow-md); }
.dhx-register-ic { width: 52px; height: 52px; border-radius: 14px; flex: none; display: grid; place-items: center;
    font-size: 1.7rem; background: rgba(255,255,255,.12); color: #fff; }
.dhx-register-t { flex: 1 1 auto; min-width: 0; }
.dhx-register-t h3 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.08rem; margin: 0 0 3px; color: #fff; }
.dhx-register-t p { margin: 0; font-size: .86rem; color: #cbd5e1; }
.dhx-register .dhx-btn { flex: none; }
@media (max-width: 620px) {
    .dhx-register { flex-direction: column; align-items: flex-start; text-align: left; }
    .dhx-register .dhx-btn { width: 100%; justify-content: center; }
}

/* --- coach: game changes banner (published schedule changed for one of your teams) --- */
.dhx-changes { background: var(--setup-card); border: 1px solid var(--setup-blue); border-left-width: 4px;
    border-radius: var(--setup-radius); box-shadow: var(--setup-shadow); padding: 18px 20px; margin-bottom: 20px; }
.dhx-changes-head { display: flex; align-items: flex-start; gap: 13px; }
.dhx-changes-ic { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
    font-size: 1.4rem; background: var(--setup-blue-light); color: var(--setup-blue); }
/* the banner title carries the alert, so lift it out of the muted .dhx-working default */
.dhx-changes .dhx-working { font-size: .78rem; color: var(--setup-blue) !important; }
.dhx-changes-msg { font-size: .88rem; color: var(--setup-text-secondary); margin-top: 3px; }
.dhx-chg-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.dhx-chg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px;
    text-decoration: none; border: 1px solid var(--setup-border); border-radius: var(--setup-radius-sm);
    background: var(--setup-blue-light); color: var(--setup-text); }
.dhx-chg-row:hover { text-decoration: none; border-color: var(--setup-blue); }
.dhx-chg-n { font-weight: 600; font-size: .88rem; display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.dhx-chg-new { font-family: 'DM Sans', sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--setup-blue); color: #fff; }
.dhx-chg-go { flex: none; font-size: .8rem; font-weight: 700; color: var(--setup-blue); display: inline-flex;
    align-items: center; gap: 5px; }
@media (max-width: 575.98px) {
    .dhx-chg-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* --- game officials: this user's referee assignments across upcoming events ---
   Orange while something is waiting on their response, green (.allset) once every
   assignment is confirmed - the card itself tells them whether there is work to do. */
.dhx-ref { background: var(--setup-card); border: 1px solid var(--setup-warning); border-left-width: 4px;
    border-radius: var(--setup-radius); box-shadow: var(--setup-shadow); padding: 18px 20px; margin-bottom: 20px; }
.dhx-ref.allset { border-color: var(--setup-accent); }
.dhx-ref-head { display: flex; align-items: flex-start; gap: 13px; }
.dhx-ref-ic { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
    font-size: 1.4rem; background: var(--setup-warning-light); color: var(--setup-warning); }
.dhx-ref.allset .dhx-ref-ic { background: var(--setup-success-light); color: var(--setup-accent); }
/* the banner title carries the alert, so lift it out of the muted .dhx-working default */
.dhx-ref .dhx-working { font-size: .78rem; color: var(--setup-warning) !important; }
.dhx-ref.allset .dhx-working { color: var(--setup-accent) !important; }
.dhx-ref-msg { font-size: .88rem; color: var(--setup-text-secondary); margin-top: 3px; }
.dhx-ref-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.dhx-ref-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px;
    text-decoration: none; border: 1px solid var(--setup-border); border-radius: var(--setup-radius-sm);
    background: var(--setup-warning-light); color: var(--setup-text); }
.dhx-ref.allset .dhx-ref-row { background: var(--setup-success-light); }
.dhx-ref-row:hover { text-decoration: none; border-color: var(--setup-warning); }
.dhx-ref.allset .dhx-ref-row:hover { border-color: var(--setup-accent); }
.dhx-ref-n { display: inline-flex; align-items: flex-start; gap: 9px; min-width: 0; }
.dhx-ref-n > .mdi { font-size: 1.05rem; line-height: 1.35; color: var(--setup-warning); flex: none; }
.dhx-ref.allset .dhx-ref-n > .mdi { color: var(--setup-accent); }
.dhx-ref-nt { display: block; min-width: 0; font-weight: 600; font-size: .88rem; }
.dhx-ref-sub { display: block; font-weight: 500; font-size: .78rem; color: var(--setup-text-secondary); margin-top: 2px; }
.dhx-ref-pill { font-family: 'DM Sans', sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; padding: 2px 7px; margin-left: 8px; border-radius: 999px;
    background: var(--setup-warning); color: #fff; white-space: nowrap; }
.dhx-ref-go { flex: none; font-size: .8rem; font-weight: 700; color: var(--setup-warning); display: inline-flex;
    align-items: center; gap: 5px; }
.dhx-ref.allset .dhx-ref-go { color: var(--setup-accent); }
@media (max-width: 575.98px) {
    .dhx-ref-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* --- coach: background-check requirement card (matches the page card look) --- */
.dhx-bgcheck { background: var(--setup-card); border: 1px solid var(--setup-border); border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow); padding: 18px 20px; margin-bottom: 20px; }
.dhx-bgcheck-head { display: flex; align-items: flex-start; gap: 13px; }
.dhx-bgcheck-ic { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
    font-size: 1.4rem; background: var(--setup-border-light); color: var(--setup-primary); }
.dhx-bgcheck-msg { font-size: .88rem; color: var(--setup-text-secondary); margin-top: 3px; }
.dhx-bgcheck-cta { margin-top: 14px; }
.dhx-bgcheck-status { margin-top: 14px; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; }
.dhx-bgcheck-status.ok { color: var(--setup-accent); font-weight: 600; }
.dhx-bgcheck-status.pending { color: var(--setup-warning); font-weight: 600; }

/* --- coach: team insurance (Vertical Insure) offer / coverage strip, in a team detail --- */
.dhx-ins { display: flex; align-items: flex-start; gap: 13px; margin: 18px 0 4px; padding: 15px 17px;
    border: 1px solid var(--setup-border); border-left: 4px solid var(--setup-warning);
    border-radius: var(--setup-radius); background: var(--setup-warning-light); }
.dhx-ins.covered { border-left-color: var(--setup-accent); background: var(--setup-success-light); }
.dhx-ins-ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
    font-size: 1.25rem; background: #fff; color: var(--setup-warning); }
.dhx-ins.covered .dhx-ins-ic { color: var(--setup-accent); }
.dhx-ins-t { flex: 1 1 auto; min-width: 0; }
.dhx-ins .dhx-working { font-size: .74rem; color: var(--setup-warning) !important; }
.dhx-ins.covered .dhx-working { color: var(--setup-accent) !important; }
.dhx-ins-msg { font-size: .87rem; color: var(--setup-text-secondary); margin-top: 3px; line-height: 1.45; }
.dhx-ins-price { margin-top: 8px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--setup-text); }
.dhx-ins-price small { font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: .78rem; color: var(--setup-text-secondary); }
.dhx-ins-go { flex: none; align-self: center; }
/* team-list pill: insurance is available for this team (outlined = an offer, not a task) */
.dhx-tins { background: #fff; border: 1px solid var(--setup-warning); color: var(--setup-warning); }
@media (max-width: 575.98px) {
    .dhx-ins { flex-wrap: wrap; }
    .dhx-ins-go { width: 100%; justify-content: center; }
}

/* --- coach: registration block in a team detail (entry number, status, entry fee, and the
   two actions that belong with it - View application, Pay fee). Quiet by default; the
   .due state is the only red thing on the card, which is why the fee lost its own strip. */
.dhx-reg { display: flex; align-items: flex-start; gap: 13px; margin: 14px 0 4px; padding: 14px 16px;
    border: 1px solid var(--setup-border); border-left: 4px solid var(--setup-border);
    border-radius: var(--setup-radius); background: var(--setup-border-light); }
.dhx-reg.due { border-left-color: var(--setup-danger); background: var(--setup-danger-light); }
.dhx-reg-ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
    font-size: 1.25rem; background: #fff; color: var(--setup-text-secondary); }
.dhx-reg.due .dhx-reg-ic { color: var(--setup-danger); }
.dhx-reg-t { flex: 1 1 auto; min-width: 0; }
.dhx-reg .dhx-working { font-size: .74rem; }
.dhx-reg.due .dhx-working { color: var(--setup-danger) !important; }
.dhx-reg-msg { font-size: .87rem; color: var(--setup-text-secondary); margin-top: 3px; line-height: 1.45; }
.dhx-reg-price { margin-top: 8px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.05rem;
    color: var(--setup-danger); }
.dhx-reg-price small { font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: .78rem;
    color: var(--setup-text-secondary); }
.dhx-reg-go { flex: none; align-self: center; display: flex; align-items: center; gap: 14px; }
.dhx-reg-view { font-size: .82rem; color: var(--setup-text-secondary); text-decoration: none; white-space: nowrap; }
.dhx-reg-view:hover { color: var(--setup-blue); text-decoration: underline; }
@media (max-width: 575.98px) {
    .dhx-reg { flex-wrap: wrap; }
    .dhx-reg-go { width: 100%; justify-content: flex-end; }
}

/* --- get started (unconnected user) --- */
.gs-hero { display: flex; align-items: center; gap: 18px; padding: 22px 24px; margin-bottom: 20px;
    background: linear-gradient(120deg, var(--setup-primary), var(--setup-primary-light));
    border-radius: var(--setup-radius-lg); color: #fff; box-shadow: var(--setup-shadow-md); }
.gs-hero-ic { width: 56px; height: 56px; border-radius: 16px; flex: none; display: grid; place-items: center;
    font-size: 1.9rem; background: rgba(255,255,255,.12); color: #fff; }
.gs-hero-t { flex: 1 1 auto; min-width: 0; }
.gs-hero-t h2 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.3rem; margin: 0 0 4px; color: #fff; }
.gs-hero-t p { margin: 0; font-size: .9rem; color: #cbd5e1; }

.gs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 22px; }
.gs-card { display: flex; flex-direction: column; background: var(--setup-card); border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-lg); padding: 22px; box-shadow: var(--setup-shadow); transition: var(--setup-transition); }
.gs-card:hover { box-shadow: var(--setup-shadow-md); transform: translateY(-2px); }
.gs-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.55rem; margin-bottom: 14px; }
.gs-ic.blue { background: var(--setup-blue-light); color: var(--setup-blue); }
.gs-ic.green { background: #f0fdf4; color: var(--setup-accent); }
.gs-ic.amber { background: var(--setup-warning-light); color: var(--setup-warning); }
.gs-card h3 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.05rem; margin: 0 0 6px; color: var(--setup-text); }
.gs-card p { font-size: .86rem; color: var(--setup-text-secondary); margin: 0 0 16px; flex: 1 1 auto; line-height: 1.45; }
.gs-card .dhx-btn { align-self: flex-start; }

.gs-help { display: flex; flex-direction: column; }
.gs-help-p { font-size: .86rem; color: var(--setup-text-secondary); line-height: 1.45; margin: 4px 0 16px; flex: 1 1 auto; }
.gs-help-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gs-help-actions .dhx-btn { display: inline-flex; align-items: center; gap: 6px; }

/* --- college coach home --- */
.cch-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 22px; margin-bottom: 20px;
    background: var(--setup-card); border: 1px solid var(--setup-border); border-radius: var(--setup-radius-lg); box-shadow: var(--setup-shadow); }
.cch-avatar { width: 60px; height: 60px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: var(--setup-primary); color: #fff; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.3rem; }
.cch-id { flex: 1 1 260px; min-width: 0; }
.cch-id h2 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.25rem; margin: 0 0 2px; color: var(--setup-text); }
.cch-email { font-size: .85rem; color: var(--setup-text-secondary); margin-bottom: 8px; }
.cch-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cch-links a { font-size: .8rem; font-weight: 600; color: var(--setup-blue) !important; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.cch-links a:hover { text-decoration: underline; }
.cch-school { display: flex; align-items: center; gap: 12px; padding-left: 18px; border-left: 1px solid var(--setup-border); }
.cch-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: #fff; flex: none; }
.cch-school-t { display: flex; flex-direction: column; gap: 2px; }
.cch-school-t b { font-family: 'Outfit', sans-serif; font-size: .95rem; color: var(--setup-text); }
.cch-school-t span { font-size: .78rem; color: var(--setup-text-secondary); }
.cch-school-t a { font-size: .8rem; font-weight: 600; color: var(--setup-blue) !important; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; }
.cch-school-t a:hover { text-decoration: underline; }
.cch-cardbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.cch-cardbtns .dhx-btn { display: inline-flex; align-items: center; gap: 5px; }
.cch-showcases { margin-bottom: 20px; }
.cch-showcases .dhx-rows { padding: 4px 4px 8px; }
@media (max-width: 760px) {
    .cch-school { padding-left: 0; border-left: none; border-top: 1px solid var(--setup-border); padding-top: 14px; width: 100%; }
}
@media (max-width: 620px) {
    .gs-hero { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* --- coach: other upcoming events rail --- */
.dhx-other-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.dhx-other-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none;
    background: var(--setup-card); border: 1px solid var(--setup-border); border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow); transition: var(--setup-transition); }
.dhx-other-card:hover { border-color: var(--setup-accent); box-shadow: var(--setup-shadow-md); transform: translateY(-1px); }
.dhx-other-card img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #fff; flex: none; }
.dhx-other-m { flex: 1 1 auto; min-width: 0; }
.dhx-other-n { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .9rem; color: var(--setup-text) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dhx-other-d { font-size: .78rem; color: var(--setup-text-secondary) !important; margin-top: 2px; }
.dhx-other-d .mdi { font-size: .85rem; }
.dhx-other-go { color: var(--setup-text-muted); font-size: 1.2rem; flex: none; }

/* --- 2-column attention + readiness --- */
.dhx-2col { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; }
.dhx-pad0 { padding: 0 !important; overflow: hidden; }
.dhx-pad0 .dhx-card-h { padding: 16px 20px 0; margin-bottom: 4px; }
.dhx-rows { padding: 4px 20px 12px; }
.dhx-row { display: flex; align-items: center; gap: 13px; padding: 13px 4px; border-top: 1px solid var(--setup-border-light); }
.dhx-row:first-child { border-top: none; }
.dhx-row-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 1.05rem; flex: none; }
.dhx-row-ic.amber { background: var(--setup-warning-light); color: var(--setup-warning); }
.dhx-row-ic.blue { background: var(--setup-blue-light); color: var(--setup-blue); }
.dhx-row-ic.rose { background: var(--setup-danger-light); color: var(--setup-danger); }
.dhx-row-main { flex: 1; min-width: 0; }
.dhx-row-t { font-weight: 600; font-size: .9rem; }
.dhx-row-s { font-size: .78rem; color: var(--setup-text-secondary); }
.dhx-allclear { display: flex; align-items: center; gap: 8px; padding: 16px 4px; color: var(--setup-text-secondary); font-size: .88rem; }
.dhx-allclear .mdi { color: var(--setup-accent); font-size: 1.1rem; }

.dhx-btn { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .8rem; border-radius: var(--setup-radius-sm);
    padding: 6px 13px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px; transition: all var(--setup-transition); }
.dhx-btn.pri { background: var(--setup-accent); color: #08210a; border-color: var(--setup-accent); }
.dhx-btn.pri:hover { background: var(--setup-accent-hover); color: #08210a; text-decoration: none; }
.dhx-btn.ghost { background: transparent; color: var(--setup-text); border-color: var(--setup-border); }
.dhx-btn.ghost:hover { border-color: var(--setup-text-muted); background: var(--setup-border-light); text-decoration: none; }
.dhx-btn.dark { background: var(--setup-primary); color: #fff; border-color: var(--setup-primary); }
.dhx-btn.dark:hover { color: #fff; text-decoration: none; opacity: .92; }

/* --- readiness checklist --- */
.dhx-check { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: .87rem; border-top: 1px solid var(--setup-border-light); }
.dhx-check:first-child { border-top: none; }
.dhx-cbox { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: .85rem; flex: none; }
.dhx-cbox.done { background: var(--setup-accent); color: #fff; }
.dhx-cbox.todo { background: var(--setup-warning-light); color: var(--setup-warning); border: 1.5px solid var(--setup-warning); }
.dhx-cd { margin-left: auto; font-size: .76rem; color: var(--setup-text-secondary); }

/* --- chart --- */
.dhx-chart { margin-top: 18px; }
.dhx-chartbox { position: relative; height: 300px; width: 100%; }
/* dash2's persona content renders inside an EO CallbackPanel (#cpDash) that lays out
   as an auto-width <table>. A responsive Chart.js canvas has no bounded width there, so
   on first load the DPR-inflated canvas ratchets the cell wider than the viewport and the
   whole page scrolls sideways. Force that one panel table to fixed layout so its single
   cell takes the table's (viewport-bounded) width and width:100% children resolve right.
   Scoped to the direct child table only - nested DataGrids/cards are untouched. */
.dash2-mainbody > table { table-layout: fixed; width: 100%; }

/* --- Manage this event: slim, one-line command bar (dark navy so it pops) --- */
.dhx-manage { display: flex; flex-wrap: wrap; gap: 3px; background: var(--setup-primary);
    border-radius: var(--setup-radius); padding: 5px; margin: 0 0 20px; box-shadow: var(--setup-shadow); }
.dhx-mi { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto;
    padding: 9px 14px; border-radius: var(--setup-radius-sm); text-decoration: none; white-space: nowrap;
    color: #e2e8f0; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .82rem;
    transition: background var(--setup-transition), color var(--setup-transition); }
.dhx-mi:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.dhx-mi .mdi { font-size: 1.1rem; color: var(--setup-accent); }

@media (max-width: 992px) {
    .dhx-stats { grid-template-columns: repeat(2, 1fr); }
    .dhx-2col { grid-template-columns: 1fr; }
    .dhx-cbar-count { margin-left: 0; }
}
@media (max-width: 576px) {
    /* two-column wrap on phones: items left-justified, and the lone last item
       (Reports) spans the row and centers so it isn't stranded in the left cell. */
    .dhx-mi { flex-basis: calc(50% - 3px); justify-content: flex-start; }
    .dhx-mi:last-child { flex-basis: 100%; justify-content: center; }
}

/* Grey labels on white cards (kickers/sub/notes have no inline colors) */
.dhx .dhx-stat-k,
.dhx .dhx-stat-d,
.dhx .dhx-sub,
.dhx .dhx-row-s,
.dhx .dhx-cd,
.dhx .dhx-allclear { color: #64748b !important; }
.dhx .dhx-card-h h3,
.dhx .dhx-row-t { color: #1e293b !important; }
/* the event switcher dropdown sits inside the band but on a white surface -
   undo the band's white-mdi / white-text rules and resist event-CSS bleed */
.dhx-evtdd, .dhx-evtdd .dhx-evtitem, .dhx-evtdd .dhx-evtitem-n { color: #1e293b !important; }
.dhx-evtdd .dhx-evtitem-d, .dhx-evtdd-head { color: #64748b !important; }
.dhx-evtdd .mdi { color: #64748b !important; }
.dhx-evtdd .dhx-evtitem-chk { color: var(--setup-accent) !important; }
/* coach master-detail text hardening */
.dhx-tn b, .dhx-tv, .dhx-detail-head h3, .dhx-tlh h3, .dhx-cta-t { color: #1e293b !important; }
.dhx-tn small, .dhx-tk, .dhx-tsub, .dhx-cta-s, .dhx-working, .dhx-count-badge { color: #64748b !important; }
.dhx-child-h h3, .dhx-fam-head h3 { color: #1e293b !important; }

/* ===== Alerts - design-system retint of Bootstrap's dated .alert-* colors (site-wide).
   More-specific page-scoped alert rules (e.g. .olctask-page .alert-info) still win. ===== */
.alert { border-radius: var(--setup-radius); font-family: 'DM Sans', system-ui, sans-serif; }
.alert-info { background: var(--setup-blue-light); border: 1px solid #bfdbfe; color: #1e40af; }
.alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.alert-warning { background: var(--setup-warning-light); border: 1px solid #fed7aa; color: #9a3412; }
.alert-danger { background: var(--setup-danger-light); border: 1px solid #fecaca; color: #991b1b; }

/* ===== Dialog fit - keep EO.Web dialog content inside the window =====
   Put this class on the content wrapper inside <eo:Dialog><ContentTemplate>.
   Without it a tall dialog stays vertically centered with its top and bottom
   off screen, and scrolling only moves the page behind it. These are the
   safe fallback limits; /js/dialog-fit.js measures the real dialog chrome and
   tunes them (and removes them again when the content already fits). */
.sinc-dlg-fit {
    max-height: calc(100vh - 150px);
    max-width: calc(100vw - 40px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== TTClub - a club's teams in one event =========================================
   Runs on TTMaster, which does NOT load Bootstrap, so nothing here may lean on a BS
   utility class. All scoped under .ttclub-page. Shared with TTClub_Staff.aspx.
   ================================================================================== */
.ttclub-page { font-family: 'DM Sans', sans-serif; color: var(--setup-text); text-align: left; }
/* Deliberately NOT .ttclub-page a - the register-a-team form inside the same wrapper is
   still on the legacy form.css look and must not be half-restyled. */
.ttclub-hero a, .ttclub-tasks a, .ttclub-grid a, .ttclub-pay a { text-decoration: none; }

/* --- club hero --- */
/* align-items:flex-start - the crest stays at the top of the card rather than drifting to
   the middle as the staff list grows. */
.ttclub-hero { display: flex; gap: 20px; align-items: flex-start; background: var(--setup-card);
    border: 1px solid var(--setup-border); border-radius: var(--setup-radius-lg);
    box-shadow: var(--setup-shadow); padding: 18px 22px; margin-bottom: 18px; }
.ttclub-crest { width: 130px; height: 130px; flex: none; display: grid; place-items: center;
    border: 1px solid var(--setup-border); border-radius: var(--setup-radius); background: #fff;
    padding: 8px; text-align: center; }
.ttclub-crest img { max-width: 100%; max-height: 96px; object-fit: contain; }
.ttclub-crest a { font-size: .72rem; font-weight: 600; color: var(--setup-blue); line-height: 1.3; }
.ttclub-id { flex: 1; min-width: 0; }
.ttclub-id h1 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.5rem;
    line-height: 1.15; margin: 0; color: var(--setup-text); }
.ttclub-idsub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px;
    font-size: .8rem; color: var(--setup-text-secondary); }
.ttclub-idsub a { color: var(--setup-blue); font-weight: 600; }

/* Staff list. StaffRow() builds these cells in codebehind - it sets the CssClass and
   deliberately sets no colour or width, so the styling lives here. */
.ttclub-stafftbl { width: 100%; border-collapse: collapse; margin-top: 12px; }
.ttclub-stafftbl td { padding: 6px 12px 6px 0; font-size: .82rem; vertical-align: middle;
    border-top: 1px solid var(--setup-border-light); }
.ttclub-staff-name { font-weight: 600; color: var(--setup-text); }
.ttclub-staff-role { color: var(--setup-text-secondary); font-size: .76rem; white-space: nowrap; }
.ttclub-staff-email { color: var(--setup-blue); font-size: .8rem; }
.ttclub-morestaff { margin-top: 10px; }
.ttclub-morestaff a { font-size: .78rem; font-weight: 600; color: var(--setup-blue); }

/* --- section heading --- */
.ttclub-sect { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin: 24px 2px 12px; }
.ttclub-sect h2 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.05rem; margin: 0; }
.ttclub-sect .ttclub-count { font-size: .85rem; font-weight: 600; color: var(--setup-text-secondary); }

/* --- club tasks (TournApp "ClubTasks", rendered by ClubTaskItem) --- */
.ttclub-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 12px; }
.ttclub-task { display: flex; align-items: center; gap: 13px; background: var(--setup-card);
    border: 1px solid var(--setup-border); border-radius: var(--setup-radius); padding: 14px 16px;
    box-shadow: var(--setup-shadow); transition: box-shadow var(--setup-transition), border-color var(--setup-transition); }
.ttclub-task:hover { box-shadow: var(--setup-shadow-md); border-color: var(--setup-text-muted); }
.ttclub-task-ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid;
    place-items: center; font-size: 1.15rem; background: var(--setup-blue-light); color: var(--setup-blue); }
.ttclub-task-t { flex: 1; min-width: 0; font-size: .82rem; color: var(--setup-text-secondary);
    line-height: 1.35; }

/* --- buttons (no Bootstrap on this master) --- */
.ttclub-btn { display: inline-flex; align-items: center; gap: 6px; font-family: 'DM Sans', sans-serif;
    font-size: .82rem; font-weight: 600; padding: 8px 15px; border-radius: var(--setup-radius-sm);
    border: 1.5px solid transparent; cursor: pointer; transition: all var(--setup-transition);
    background: var(--setup-accent); color: #fff !important; }
.ttclub-btn:hover { background: var(--setup-accent-hover); }
.ttclub-btn.sm { font-size: .76rem; padding: 6px 12px; }
.ttclub-btn.ghost { background: #fff; color: var(--setup-text) !important; border-color: var(--setup-border); }
.ttclub-btn.ghost:hover { border-color: var(--setup-text-muted); background: #fff; }
.ttclub-btn.danger { background: var(--setup-danger); }
.ttclub-btn.danger:hover { background: #b91c1c; }

/* --- teams grid (asp:DataGrid - flat table, first row is the header) --- */
.ttclub-grid { background: var(--setup-card); border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius); box-shadow: var(--setup-shadow); overflow-x: auto; }
.ttclub-grid table { width: 100% !important; border-collapse: collapse; }
.ttclub-grid .ttclub-gridhead td { background: var(--setup-primary); color: #fff;
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .72rem; letter-spacing: .04em;
    text-transform: uppercase; padding: 11px 12px; text-align: left; white-space: nowrap;
    border: 0 !important; }
.ttclub-grid .ttclub-gridhead input[type="checkbox"] { margin-top: 4px; }
.ttclub-grid td { padding: 11px 12px; font-size: .84rem; vertical-align: middle;
    border-top: 1px solid var(--setup-border-light); }
.ttclub-grid tr.tblrow:hover td { background: var(--setup-blue-light); }
.ttclub-grid a { color: var(--setup-blue); font-weight: 600; }
.ttclub-grid input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 17px;
    height: 17px; border: 2px solid var(--setup-border); border-radius: 4px; background: #fff;
    cursor: pointer; position: relative; vertical-align: middle; }
.ttclub-grid input[type="checkbox"]:checked { border-color: var(--setup-accent); background: var(--setup-accent); }
.ttclub-grid input[type="checkbox"]:checked::after { content: ''; position: absolute; top: 1px;
    left: 4px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ttclub-grid input[type="checkbox"]:disabled { opacity: .35; cursor: not-allowed; }

/* --- online check-in progress (replaces the stretched larc0.jpg spacer) --- */
/* The label always sits on a LIGHT fill in dark text. The first cut copied the old
   design's white-on-coloured bar, which gave white on #94a3b8 - about 2.3:1, far below
   the 4.5:1 minimum. Colour carries the state; the text stays readable in every one. */
.ttclub-olc { display: block; min-width: 210px; }
/* display:block matters - these are spans (they live in a codebehind-built table cell),
   and height is ignored on an inline box, which left the pill 58px tall with the label
   floating at the top. */
.ttclub-olc-track { display: block; position: relative; height: 20px; border-radius: 99px;
    overflow: hidden; background: var(--setup-border-light); border: 1px solid var(--setup-border); }
.ttclub-olc-fill { position: absolute; top: 0; bottom: 0; left: 0;
    background: var(--setup-blue-light); transition: width var(--setup-transition); }
.ttclub-olc-lbl { position: relative; display: block; font-size: .7rem; font-weight: 600;
    line-height: 20px; padding: 0 9px; color: var(--setup-text); white-space: nowrap; }
.ttclub-olc.low .ttclub-olc-fill { background: var(--setup-danger-light); }
.ttclub-olc.mid .ttclub-olc-fill { background: var(--setup-warning-light); }
.ttclub-olc.high .ttclub-olc-fill { background: var(--setup-blue-light); }
.ttclub-olc.done .ttclub-olc-track { background: #dcfce7; border-color: #86efac; }
.ttclub-olc.done .ttclub-olc-fill { background: #dcfce7; }
.ttclub-olc.done .ttclub-olc-lbl { color: #14532d; }
/* Not started: keep the base --setup-text. The secondary grey only reached 4.34:1 on the
   light track, just under AA for text this small. */
.ttclub-olc.onsite .ttclub-olc-track { background: #f3e8ff; border-color: #d8b4fe; }
.ttclub-olc.onsite .ttclub-olc-lbl { color: #581c87; }
.ttclub-olc.off .ttclub-olc-track { background: var(--setup-warning-light); border-color: #fdba74; }
.ttclub-olc.off .ttclub-olc-lbl { color: #7c2d12; }
.ttclub-olc a { color: inherit !important; text-decoration: none; }
.ttclub-olc a:hover { text-decoration: underline; }
.ttclub-olc-paid { display: block; margin-top: 3px; font-size: .7rem; color: var(--setup-text-secondary); }

/* --- messages --- */
.ttclub-msg { display: flex; align-items: flex-start; gap: 9px; padding: 11px 15px;
    border-radius: var(--setup-radius-sm); font-size: .85rem; line-height: 1.45; margin-bottom: 14px;
    background: var(--setup-blue-light); border-left: 3px solid var(--setup-blue); color: var(--setup-text); }
.ttclub-msg.warn { background: var(--setup-warning-light); border-left-color: var(--setup-warning); }
.ttclub-msg.crit { background: var(--setup-danger-light); border-left-color: var(--setup-danger); }
.ttclub-msg .mdi { font-size: 1.05rem; flex: none; }
/* StaffTable2 carries the unpaid-teams warning; the cell itself is the alert. */
.ttclub-warntbl { width: 100%; border-collapse: collapse; }
.ttclub-warntbl td.ttclub-msg { display: flex; }

/* --- empty state --- */
.ttclub-empty { display: flex; align-items: center; gap: 14px; background: var(--setup-card);
    border: 1px dashed var(--setup-border); border-radius: var(--setup-radius); padding: 22px 24px;
    color: var(--setup-text-secondary); }
.ttclub-empty .mdi { font-size: 1.9rem; color: var(--setup-text-muted); flex: none; }
.ttclub-empty b { display: block; font-family: 'Outfit', sans-serif; font-size: .95rem;
    color: var(--setup-text); margin-bottom: 2px; }
.ttclub-empty span { font-size: .84rem; line-height: 1.45; }

/* --- payment bar --- */
.ttclub-pay { background: var(--setup-card); border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius); box-shadow: var(--setup-shadow); padding: 16px 20px;
    margin-top: 16px; }
.ttclub-pay-top { display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; }
.ttclub-pay-total { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.05rem; }
.ttclub-pay-sub { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--setup-border-light); }
.ttclub-pay-sub h4 { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .88rem; margin: 0 0 8px; }
.ttclub-pay-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .84rem; }
.ttclub-pay-note { font-size: .8rem; line-height: 1.5; color: var(--setup-text-secondary); margin-bottom: 10px; }
.ttclub-pay input[type="text"] { font-family: 'DM Sans', sans-serif; font-size: .84rem;
    padding: 7px 12px; border: 1.5px solid var(--setup-border); border-radius: var(--setup-radius-sm);
    background: #fff; color: var(--setup-text); transition: border-color .2s ease, box-shadow .2s ease; }
.ttclub-pay input[type="text"]:focus { outline: none; border-color: var(--setup-accent);
    box-shadow: 0 0 0 3px var(--setup-accent-glow); }

@media (max-width: 820px) {
    .ttclub-hero { flex-direction: column; align-items: flex-start; }
    .ttclub-crest { width: 100%; height: auto; }
}

/* --- register-a-team form ---------------------------------------------------------
   The layout tables (AllTable / table9 / Table2 / Table7 / TableSave) are gone; the
   codebehind-built tables (Table3 contacts, Table5 application questions) stay and are
   styled through .ttclub-formtbl. Bootstrap 4 IS loaded on this master via all.css, so
   form-control / form-select still apply underneath these rules. */
.ttclub-reg { margin-bottom: 6px; }
.ttclub-card { background: var(--setup-card); border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius); box-shadow: var(--setup-shadow); padding: 18px 20px;
    margin-bottom: 14px; }
.ttclub-cardh { display: flex; align-items: center; gap: 8px; font-family: 'Outfit', sans-serif;
    font-weight: 600; font-size: .98rem; margin: 0 0 4px; color: var(--setup-text); }
.ttclub-cardh .mdi { color: var(--setup-text-secondary); font-size: 1.1rem; }
.ttclub-cardnote { font-size: .82rem; line-height: 1.5; color: var(--setup-text-secondary);
    margin: 0 0 14px; }
.ttclub-cardnote:empty { display: none; margin: 0; }

.ttclub-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ttclub-field label { font-size: .82rem; font-weight: 600; color: var(--setup-text-secondary);
    margin: 0; white-space: nowrap; }
.ttclub-fielderr { display: block; font-size: .82rem; font-weight: 600;
    color: var(--setup-danger); margin-top: 8px; }
.ttclub-fielderr:empty { display: none; margin: 0; }

/* Layout/typography shared by the inputs. NO background on the select - that would wipe
   Bootstrap's chevron SVG. */
.ttclub-page .ttclub-input, .ttclub-page .ttclub-select { font-family: 'DM Sans', sans-serif;
    font-size: .85rem; padding: 8px 12px; height: auto; border: 1.5px solid var(--setup-border);
    border-radius: var(--setup-radius-sm); color: var(--setup-text); width: auto; min-width: 280px;
    max-width: 100%; transition: border-color .2s ease, box-shadow .2s ease; }
.ttclub-page .ttclub-input { background: #fff; }
.ttclub-page .ttclub-input:focus, .ttclub-page .ttclub-select:focus { outline: none;
    border-color: var(--setup-accent); box-shadow: 0 0 0 3px var(--setup-accent-glow); }
.ttclub-page .ttclub-select { min-width: 340px; }

/* Read-back rows (Division / Club / Team) */
.ttclub-deflist { display: grid; gap: 2px; }
.ttclub-defrow { display: flex; align-items: baseline; gap: 14px; padding: 9px 0;
    border-top: 1px solid var(--setup-border-light); }
.ttclub-defrow:first-child { border-top: 0; }
.ttclub-defk { flex: none; width: 110px; font-size: .78rem; font-weight: 600;
    color: var(--setup-text-secondary); }
.ttclub-defv { flex: 1; min-width: 0; font-size: .88rem; font-weight: 600; color: var(--setup-text); }
.ttclub-defv a { color: var(--setup-blue); font-weight: 600; }

/* Codebehind-built form tables: Table3 (contacts) and Table5 (application questions).
   Their rows and cells come from loadContactInfo() and the Show* renderers, so only
   spacing and typography are set here. */
.ttclub-formtbl { width: 100%; border-collapse: collapse; }
.ttclub-formtbl > tbody > tr > td { padding: 9px 10px 9px 0; font-size: .85rem;
    vertical-align: middle; border-top: 1px solid var(--setup-border-light); }
.ttclub-formtbl > tbody > tr:first-child > td { border-top: 0; }
.ttclub-formtbl tr.ttclub-formhead td { font-family: 'Outfit', sans-serif; font-weight: 600;
    font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--setup-text-secondary); border-top: 0; padding-bottom: 4px; }
.ttclub-formtbl select, .ttclub-formtbl input[type="text"] { font-family: 'DM Sans', sans-serif;
    font-size: .84rem; padding: 7px 11px; border: 1.5px solid var(--setup-border);
    border-radius: var(--setup-radius-sm); color: var(--setup-text); max-width: 100%; }
.ttclub-formtbl input[type="text"], .ttclub-formtbl textarea { background: #fff; }
.ttclub-formtbl select:focus, .ttclub-formtbl input[type="text"]:focus,
.ttclub-formtbl textarea:focus { outline: none; border-color: var(--setup-accent);
    box-shadow: 0 0 0 3px var(--setup-accent-glow); }
.ttclub-formtbl textarea { font-family: 'DM Sans', sans-serif; font-size: .84rem; padding: 8px 11px;
    border: 1.5px solid var(--setup-border); border-radius: var(--setup-radius-sm); max-width: 100%; }
.ttclub-formtbl a { color: var(--setup-blue); font-weight: 600; }

/* --- submit row --- */
.ttclub-submit { display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; background: var(--setup-card); border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius); box-shadow: var(--setup-shadow); padding: 16px 20px;
    margin-bottom: 14px; }
.ttclub-submit-l { font-size: .85rem; }
.ttclub-submit-l label { margin: 0 0 0 6px; font-weight: 500; }

@media (max-width: 820px) {
    .ttclub-field { align-items: stretch; flex-direction: column; }
    .ttclub-page .ttclub-input, .ttclub-page .ttclub-select { min-width: 0; width: 100%; }
    .ttclub-defrow { flex-direction: column; gap: 3px; }
    .ttclub-defk { width: auto; }
}

/* ============================================================
   LOADING INDICATORS  -  moved out of this file
   div.loading / .sinc-loader / .sinc-loader-bracket now live in
   css/sinc-loading.css, which every master links. They were here
   first, but only three masters load sinc-setup.css, so the rest
   of the site kept the old loading_*.gif. Do not re-add them here
   - one home only, or the two copies drift.
   ============================================================ */

/* ============================================================
   EVENT LIST  (eventlist.aspx)
   Two director-selectable layouts over ONE card markup:
     .evlist-list  - split card, flyer as a fixed poster panel
     .evlist-grid  - poster grid, flyer as a 4:5 cover
   Card height is set by the card, never by the flyer, so events
   with and without artwork keep a single rhythm. Everything is
   scoped under .evlist because this page is embedded in
   event-branded sites that bring their own CSS.
   ============================================================ */

.evlist { font-family: 'DM Sans', sans-serif; color: var(--setup-text); }
.evlist * { box-sizing: border-box; }

/* ---------- the card ---------- */
/* NO overflow:hidden here - it clipped the Ages/Fees popups at the card edge. The poster
   clips itself instead (see the per-layout radii below), which is the only child that
   needed it. */
.evlist .ev-card { background: var(--setup-card); border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius); box-shadow: var(--setup-shadow);
    transition: box-shadow var(--setup-transition), transform var(--setup-transition); }
.evlist .ev-card:hover { box-shadow: var(--setup-shadow-md); }
/* Lift the card whose popup is open above its later siblings - :hover applies a transform,
   which creates a stacking context that would otherwise paint over the popup. */
.evlist .ev-card.pop-open { position: relative; z-index: 40; }
.evlist .ev-card.pop-open:hover { transform: none; }

/* ---------- poster slot ---------- */
.evlist .ev-poster { position: relative; flex: none; overflow: hidden; background: #eef1f6;
    display: block; padding: 0; border: 0; }
.evlist .ev-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evlist a.ev-poster { cursor: zoom-in; }
.evlist .ev-poster-zoom { position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center; font-size: .8rem; border-radius: 6px;
    color: #fff; background: rgba(15, 23, 42, .62); opacity: 0;
    transition: opacity var(--setup-transition); pointer-events: none; z-index: 3; }
.evlist a.ev-poster:hover .ev-poster-zoom,
.evlist a.ev-poster:focus-visible .ev-poster-zoom { opacity: 1; }

/* Generated stand-in when an event has no flyer. Tinted from the card rather than a fixed
   colour, so it still reads correctly on a director's chosen event-type background. */
.evlist .ev-poster-gen { position: relative; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%;
    background: linear-gradient(150deg, rgba(15, 23, 42, .05), rgba(15, 23, 42, .12)); }
/* The date is already on the card, so the stand-in never repeats it - it carries a quiet
   glyph instead. The date spans are only in the markup so the grid's date tab can reuse them. */
.evlist .ev-poster-gen .ev-mo, .evlist .ev-poster-gen .ev-d,
.evlist .ev-poster-gen .ev-thru,
.evlist .ev-poster-gen .ev-gen-name, .evlist .ev-poster-gen .ev-gen-loc { display: none; }
.evlist .ev-poster-gen .ev-gen-glyph { display: block; font-size: 2rem; line-height: 1;
    color: var(--setup-text-muted); opacity: .55; }

/* ---------- date ---------- */
.evlist .ev-datechip { flex: none; display: flex; flex-direction: column; align-items: center;
    justify-content: center; width: 56px; height: 56px; background: #fff;
    border: 1px solid var(--setup-border); border-radius: var(--setup-radius-sm);
    font-variant-numeric: tabular-nums; line-height: 1.1; }
.evlist .ev-mo { font-size: .61rem; text-transform: uppercase; letter-spacing: .09em;
    font-weight: 700; color: var(--setup-text-muted); }
.evlist .ev-d { font-family: 'Outfit', sans-serif; font-size: 1.24rem; font-weight: 700;
    color: var(--setup-primary); }
.evlist .ev-thru { font-size: .61rem; color: var(--setup-text-secondary); font-weight: 600; }
.evlist .ev-datetab { display: none; }

/* ---------- identity + meta ---------- */
.evlist .ev-name, .evlist a.ev-name { font-family: 'Outfit', sans-serif; font-size: .98rem;
    font-weight: 700; letter-spacing: -.01em; color: var(--setup-primary); text-decoration: none;
    display: block; }
.evlist a.ev-name:hover { color: var(--setup-blue); text-decoration: underline; }
.evlist .ev-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.evlist .ev-meta { font-size: .79rem; color: var(--setup-text-secondary); line-height: 1.5; }
.evlist .ev-meta .ev-loc { font-weight: 600; color: var(--setup-text); display: block; }
.evlist .ev-meta a { color: var(--setup-blue); text-decoration: none; }
.evlist .ev-meta a:hover { text-decoration: underline; }
.evlist .ev-detail { font-size: .79rem; color: var(--setup-text-secondary); line-height: 1.5; }
.evlist .ev-detail img { max-width: 100%; height: auto; }

/* Ages / Fees / Teams pills. The Ages and Fees pills reveal a popup panel on click. */
.evlist .ev-pill { font-family: 'DM Sans', sans-serif; font-size: .7rem; font-weight: 600;
    padding: 3px 10px; border-radius: 99px; white-space: nowrap; cursor: pointer;
    background: var(--setup-blue-light); color: #1d4ed8; border: 1px solid #dbeafe;
    text-decoration: none; display: inline-block; transition: var(--setup-transition); }
.evlist a.ev-pill:hover { background: #dbeafe; text-decoration: none; }
.evlist .ev-pill-teams { background: rgba(92, 184, 48, .12); color: #3f7d1f;
    border-color: rgba(92, 184, 48, .28); }
.evlist .ev-pill-quiet { background: transparent; color: var(--setup-text-secondary);
    border-color: var(--setup-border); cursor: default; }
.evlist .ev-popwrap { position: relative; display: inline-block; }
.evlist .ev-pop { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
    min-width: 210px; max-width: 320px; padding: 12px 14px; background: var(--setup-card);
    border: 1px solid var(--setup-border); border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow-lg); font-size: .78rem; color: var(--setup-text);
    line-height: 1.6; text-align: left; white-space: normal; }
.evlist .ev-pop.open { display: block; }
/* opens upward when there is no room below (last cards in the list) */
.evlist .ev-pop.flip-up { top: auto; bottom: calc(100% + 6px); }
.evlist .ev-pop h4 { font-family: 'Outfit', sans-serif; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: var(--setup-text-muted);
    margin: 0 0 6px; }

/* ---------- director controls ---------- */
.evlist .ev-admin { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding-top: 10px; margin-top: 10px; border-top: 1px dashed var(--setup-border); }
.evlist .ev-admin select { font-family: 'DM Sans', sans-serif; font-size: .73rem; padding: 5px 8px;
    border: 1px solid var(--setup-border); border-radius: 6px; color: var(--setup-text-secondary);
    max-width: 160px; }
.evlist .ev-admin .ev-admin-end { margin-left: auto; display: flex; gap: 8px; }
.evlist .ev-admin a { font-family: 'DM Sans', sans-serif; font-size: .71rem;
    font-weight: 600; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--setup-border);
    background: #fff; color: var(--setup-text-secondary); cursor: pointer; text-decoration: none;
    display: inline-block; transition: var(--setup-transition); }
.evlist .ev-admin a:hover { border-color: var(--setup-text-muted); color: var(--setup-text);
    text-decoration: none; }
.evlist .ev-admin a.ev-danger { color: var(--setup-danger); border-color: #f7c9c9; }
.evlist .ev-admin a.ev-danger:hover { background: var(--setup-danger-light);
    color: var(--setup-danger); }
.evlist .ev-admin a.ev-approve { color: var(--setup-accent); border-color: rgba(92, 184, 48, .4); }
.evlist .ev-admin a.ev-approve:hover { background: rgba(92, 184, 48, .1); }

/* ---------- the one action per card ----------
   Label and destination are decided per event in eventlist.aspx.vb - buildCta():
   green "Enter Event" while registration is open, blue "View Schedule" once it has
   closed and the schedule is published, quiet "View Event" otherwise. Three weights
   so a visitor scanning the list can see which events are actually open without
   reading a single label. */
.evlist .ev-actions { display: flex; }
.evlist .ev-cta { font-family: 'DM Sans', sans-serif; font-size: .78rem; font-weight: 700;
    padding: 9px 18px; border-radius: var(--setup-radius-sm); border: 1px solid transparent;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    text-decoration: none; transition: var(--setup-transition); }
.evlist a.ev-cta:hover { text-decoration: none; }
.evlist .ev-cta i { font-size: 1rem; line-height: 1; }
.evlist a.ev-cta-enter { background: var(--setup-accent); color: #fff;
    box-shadow: 0 1px 2px rgba(92, 184, 48, .35); }
.evlist a.ev-cta-enter:hover { background: var(--setup-accent-hover); color: #fff; }
.evlist a.ev-cta-sched { background: var(--setup-blue-light); color: #1d4ed8;
    border-color: #bfdbfe; }
.evlist a.ev-cta-sched:hover { background: #dbeafe; color: #1d4ed8; }
.evlist a.ev-cta-quiet { background: var(--setup-card); color: var(--setup-text-secondary);
    border-color: var(--setup-border); }
.evlist a.ev-cta-quiet:hover { border-color: var(--setup-text-muted); color: var(--setup-text); }

/* ============================================================
   LAYOUT 1 - LIST  (split card, poster panel down the left)
   ============================================================ */
.evlist-list .ev-card { display: flex; margin-bottom: 12px; }
.evlist-list .ev-card:hover { transform: translateY(-1px); }
.evlist-list .ev-poster { width: 124px; align-self: stretch; min-height: 152px;
    border-right: 1px solid var(--setup-border);
    border-radius: calc(var(--setup-radius) - 1px) 0 0 calc(var(--setup-radius) - 1px); }
.evlist-list .ev-body { flex: 1; min-width: 0; padding: 14px 16px; display: flex;
    flex-direction: column; gap: 10px; }
.evlist-list .ev-head { display: flex; gap: 13px; align-items: flex-start; }
.evlist-list .ev-headmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.evlist-list .ev-contact { flex: none; width: 210px; text-align: right; }
.evlist-list .ev-contact .ev-pop { left: auto; right: 0; }
.evlist-list .ev-admin { margin-top: auto; }
/* The action button is what anchors the bottom of a list card, so the director strip
   drops its own margin-top:auto when it follows one - two auto margins in the same
   flex column would split the slack between them and float the admin row mid-card. */
.evlist-list .ev-actions { margin-top: auto; justify-content: flex-end; }
.evlist-list .ev-actions + .ev-admin { margin-top: 0; }

/* ============================================================
   LAYOUT 2 - GRID  (poster grid, flyer as a 4:5 cover)
   ============================================================ */
.evlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px; align-items: start; }
.evlist-grid .ev-card { display: flex; flex-direction: column; }
.evlist-grid .ev-card:hover { transform: translateY(-2px); }
.evlist-grid .ev-poster { width: 100%; aspect-ratio: 4 / 5;
    border-bottom: 1px solid var(--setup-border);
    border-radius: calc(var(--setup-radius) - 1px) calc(var(--setup-radius) - 1px) 0 0; }
/* Older engines that ignore aspect-ratio still get a sensible cover height. */
@supports not (aspect-ratio: 4 / 5) { .evlist-grid .ev-poster { height: 340px; } }
.evlist-grid .ev-body { padding: 13px 15px; display: flex; flex-direction: column; gap: 9px;
    flex: 1; }
.evlist-grid .ev-head { display: flex; flex-direction: column; gap: 8px; }
.evlist-grid .ev-headmain { display: flex; flex-direction: column; gap: 7px; }
.evlist-grid .ev-contact { text-align: left; }
/* A poster tile gets the full-width button along its foot - the tiles are narrow and a
   right-aligned pill reads as an afterthought at that width. */
.evlist-grid .ev-actions { margin-top: auto; }
.evlist-grid .ev-actions + .ev-admin { margin-top: 0; }
.evlist-grid .ev-cta { flex: 1; justify-content: center; }
/* The date moves out of the body and onto the cover. */
.evlist-grid .ev-datechip { display: none; }
.evlist-grid .ev-datetab { display: flex; flex-direction: column; align-items: center;
    position: absolute; top: 10px; left: 10px; z-index: 2; padding: 5px 10px;
    background: rgba(255, 255, 255, .95); border-radius: var(--setup-radius-sm);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .22); line-height: 1.05;
    font-variant-numeric: tabular-nums; }
.evlist-grid .ev-datetab .ev-d { font-size: 1.06rem; font-weight: 800; }
/* A flyerless tile gets a full designed cover instead of the small date panel. */
.evlist-grid .ev-poster-gen { justify-content: flex-end; align-items: flex-start; padding: 16px;
    gap: 4px; overflow: hidden; }
/* In the grid the cover carries the event name over a full-bleed wash. */
.evlist-grid .ev-poster-gen .ev-gen-name { display: block; position: relative; z-index: 1;
    font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.1rem; line-height: 1.2;
    color: #fff; letter-spacing: -.015em; text-shadow: 0 1px 12px rgba(0, 0, 0, .3); }
.evlist-grid .ev-poster-gen .ev-gen-loc { display: block; position: relative; z-index: 1;
    font-size: .76rem; font-weight: 600; color: rgba(255, 255, 255, .92); }
.evlist-grid .ev-poster-gen .ev-gen-glyph { position: absolute; right: -18px;
    bottom: -22px; font-size: 7rem; line-height: 1; opacity: .17; color: #fff; }
/* Cover washes for flyerless tiles, picked by event type so one type reads consistently.
   Only applied in the grid - the list keeps the quiet neutral tint above. */
.evlist-grid .ev-gen-0 { background: linear-gradient(145deg, #1e3a8a, #3b82f6); }
.evlist-grid .ev-gen-1 { background: linear-gradient(145deg, #14532d, #5cb830); }
.evlist-grid .ev-gen-2 { background: linear-gradient(145deg, #7c2d12, #f97316); }
.evlist-grid .ev-gen-3 { background: linear-gradient(145deg, #134e4a, #0d9488); }
.evlist-grid .ev-gen-4 { background: linear-gradient(145deg, #4c1d95, #8b5cf6); }
.evlist-grid .ev-gen-5 { background: linear-gradient(145deg, #0f172a, #475569); }

/* ---------- flyer lightbox ---------- */
.ev-lightbox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000;
    background: rgba(8, 12, 20, .88); display: none; align-items: center; justify-content: center;
    padding: 32px; }
.ev-lightbox.open { display: flex; }
.ev-lightbox img { max-width: 92vw; max-height: 90vh; border-radius: var(--setup-radius);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55); background: #fff; }
.ev-lightbox .ev-lb-close { position: absolute; top: 16px; right: 18px; width: 40px; height: 40px;
    border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff;
    font-size: 1.3rem; line-height: 1; cursor: pointer; }
.ev-lightbox .ev-lb-close:hover { background: rgba(255, 255, 255, .28); }
.ev-lightbox .ev-lb-cap { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center;
    color: #cbd5e1; font-family: 'DM Sans', sans-serif; font-size: .8rem; }
.ev-lightbox .ev-lb-cap a { color: #fff; }

/* ---------- director layout switcher ---------- */
.ev-viewswitch { display: inline-flex; align-items: center; gap: 8px; }
.ev-viewswitch .ev-vs-label { font-family: 'DM Sans', sans-serif; font-size: .72rem;
    font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
    color: var(--setup-text-muted); }
.ev-viewswitch .ev-vs-group { display: inline-flex; border: 1px solid var(--setup-border);
    border-radius: 8px; overflow: hidden; background: var(--setup-card); }
.ev-viewswitch a { font-family: 'DM Sans', sans-serif; font-size: .74rem; font-weight: 600;
    padding: 6px 12px; color: var(--setup-text-secondary); text-decoration: none;
    border-right: 1px solid var(--setup-border); display: inline-flex; align-items: center; gap: 5px;
    transition: var(--setup-transition); }
.ev-viewswitch a:last-child { border-right: 0; }
.ev-viewswitch a:hover { background: var(--setup-border-light); text-decoration: none; }
.ev-viewswitch a.sel { background: var(--setup-primary); color: #fff; }

@media (max-width: 820px) {
    .evlist-list .ev-card { flex-direction: column; }
    .evlist-list .ev-poster { width: 100%; aspect-ratio: 16 / 9; min-height: 0;
        border-right: 0; border-bottom: 1px solid var(--setup-border);
        border-radius: calc(var(--setup-radius) - 1px) calc(var(--setup-radius) - 1px) 0 0; }
    .evlist-list .ev-head { flex-wrap: wrap; }
    .evlist-list .ev-contact { width: 100%; text-align: left; padding-left: 69px; }
    .evlist-list .ev-contact .ev-pop { left: 0; right: auto; }
    .evlist-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   HELP CENTER - step-by-step guides
   Articles imported from Scribe (tools/helpcenter-capture) store their steps as
   an <ol class="hc-steps"> of text + screenshot. Existing --setup-* tokens only.
   ============================================================ */

/* The article column is ~1100px, and these screenshots are ~1540px natural. Capping
   the guide at a text measure would waste a third of that width and undo the main
   reason for hosting the images ourselves - Scribe's own viewer caps them near
   450px, where the UI in a screenshot is barely readable. So the figures get the
   full column and the prose is held to a comfortable measure separately. */
.hc-guide { max-width: 1100px; }

.hc-guide .hc-lede {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--setup-text-secondary);
    margin: 0 0 2.25rem;
    max-width: 70ch;      /* prose measure - the figures below run wider */
}

/* Step numbers come from a counter rather than markup, so the stored body stays
   clean for staff editing in CKEditor - and an <ol> still numbers itself if this
   stylesheet ever fails to load. */
.hc-steps {
    list-style: none;
    counter-reset: hcstep;
    margin: 0;
    padding: 0;
}

.hc-step {
    position: relative;
    counter-increment: hcstep;
    padding: 0 0 2.5rem 3.5rem;
}

/* the rail that ties the steps together into one procedure */
.hc-step::before {
    content: "";
    position: absolute;
    left: 1.187rem;
    top: 2.75rem;
    bottom: 0;
    width: 2px;
    background: var(--setup-border);
}
.hc-step:last-child { padding-bottom: 0; }
.hc-step:last-child::before { display: none; }

.hc-step::after {
    content: counter(hcstep);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 50%;
    background: var(--setup-accent);
    color: #fff;
    font-family: var(--setup-font-heading);
    font-size: 1rem;
    font-weight: 700;
    line-height: 2.375rem;
    text-align: center;
}

.hc-step > p {
    margin: 0 0 1rem;
    padding-top: 0.35rem;
    font-size: 1rem;
    line-height: 1.65;
    max-width: 70ch;      /* readable measure, independent of the figure width */
}

.hc-shot {
    position: relative;
    margin: 0;
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    overflow: hidden;
    box-shadow: var(--setup-shadow);
    background: var(--setup-card);
}
.hc-shot img { display: block; width: 100%; height: auto; }

/* Scribe draws its orange "click here" ring as a DOM overlay, so it is not part of
   the downloaded screenshot. The capture records its position as a percentage of
   the image box and we redraw it here - vector, so it stays crisp at any width and
   tracks the screenshot when it scales. */
.hc-mark {
    position: absolute;
    aspect-ratio: 1;
    border: 3px solid var(--setup-warning);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.22);
    pointer-events: none;
}

@media (max-width: 600px) {
    .hc-step { padding-left: 2.75rem; }
    .hc-step::before { left: 0.937rem; }
    .hc-step::after {
        width: 1.875rem; height: 1.875rem;
        line-height: 1.875rem; font-size: 0.875rem;
    }
}

/* ============================================================
   THE BOARD - points standings (TTPoints.aspx)
   A broadcast-style standings board: one dark header block over
   a light content surface. Everything is scoped to .board-page
   because TTBase swaps the master at runtime, so this markup can
   land inside any of the TT masters.
   Tokens are declared here so a dark variant is a token swap.
   ============================================================ */
.board-page {
    --board-bg: #f3f5f8;
    --board-panel: #ffffff;
    --board-panel-2: #fafbfc;
    --board-line: #e4e8ee;
    --board-line-2: #eef1f5;
    --board-ink: #0f172a;
    --board-ink-2: #57657a;
    --board-ink-3: #94a1b4;
    --board-hero: #0f172a;
    --board-hero-2: #182339;
    --board-hero-ink: #ffffff;
    --board-hero-ink-2: #9aabc9;
    --board-hero-line: rgba(255,255,255,0.13);
    --board-gold: #a97803;
    --board-gold-hero: #f0c250;
    --board-silver: #6f7b8a;
    --board-bronze: #9e6529;
    --board-red: #c23a3a;
    --board-good: #357a2c;
    --board-warn: #96690d;
    --board-bad: #c23a3a;
    --board-track: #e8ecf1;
    --board-row-hover: #fafbfc;
    --board-top-tint: rgba(169,120,3,0.055);
    --board-top-tint-hover: rgba(169,120,3,0.10);
    /* Gold reads as a medal at 25px but fails contrast as small bold text, so
       label-sized gold gets its own darker step on a light surface. */
    --board-gold-text: #7a5602;
    /* The header block is dark in BOTH themes, so anything sitting on it keeps
       one value - the light red and green would be near 3:1 up there. */
    --board-hero-good: #4ec36a;
    --board-hero-red: #e8635a;
    --board-cond: "Arial Narrow", "Helvetica Neue Condensed", "Roboto Condensed", "Liberation Sans Narrow", var(--setup-font-heading);

    font-family: var(--setup-font);
    color: var(--board-ink);
    background: var(--board-bg);
    line-height: 1.45;
    margin: 0 0 24px;
    /* The reflow below keys off THIS element's width, not the viewport's. The
       TT masters constrain the content column to anywhere from ~600px to full
       width depending on the event, so a viewport media query would leave the
       eight column grid crammed into a 610px column on a desktop. */
    container-type: inline-size;
    container-name: board;
    /* The masters drop this inside their own white card. Rounding and clipping
       makes the board one deliberate object in that card, rather than a square
       grey slab floating in a rounded white one - and it is what rounds the top
       of the dark header. */
    border-radius: 8px;
    overflow: hidden;
}
.board-page *, .board-page *:before, .board-page *:after { box-sizing: border-box; }
.board-num { font-variant-numeric: tabular-nums; }

/* Each EO CallbackPanel renders as a one cell <table style="width:100%">. Under
   automatic table layout that width is only a suggestion - the table still grows
   to its content's preferred width, which pushed the header block wider than the
   column it sits in. Fixed layout makes the 100% mean 100%, and the strips that
   are meant to scroll (tabs, age chips) then actually scroll. */
.board-page > div > table { table-layout: fixed; width: 100%; }

/* ---------- dark header block ---------- */
.board-head {
    background: linear-gradient(168deg, var(--board-hero-2), var(--board-hero));
    color: var(--board-hero-ink);
}
.board-head-top { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px 14px; }
.board-mark {
    font-family: var(--board-cond); font-weight: 700; font-size: 12px; letter-spacing: 0.2em;
    color: var(--board-hero-red); border: 1.5px solid var(--board-hero-red); border-radius: 4px;
    padding: 5px 9px; flex: none; text-transform: uppercase;
}
.board-head-top h1 {
    font-family: var(--board-cond); font-size: 30px; font-weight: 700; letter-spacing: 0.012em;
    text-transform: uppercase; line-height: 1; color: #fff; margin: 0;
}
.board-head-top .board-sub {
    font-family: var(--board-cond); font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--board-hero-ink-2); margin-top: 6px;
}
.board-live {
    margin-left: auto; text-align: right; font-size: 10px; color: var(--board-hero-ink-2);
    line-height: 1.8; flex: none;
}
.board-live b { color: var(--board-hero-good); font-weight: 600; }

/* Theme switch - lives on the dark header, so it reads the same in both */
.board-themebtn {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 7px;
    border: 1px solid var(--board-hero-line); border-radius: 6px; padding: 4px 10px;
    font-size: 11px; font-weight: 600; color: var(--board-hero-ink-2);
    text-decoration: none; white-space: nowrap;
    transition: background var(--setup-transition), color var(--setup-transition);
}
.board-themebtn:hover { background: rgba(255,255,255,0.09); color: #fff; text-decoration: none; }
.board-themebtn i { font-size: 13px; line-height: 1; }

/* ---------- gender segmented control ---------- */
.board-seg {
    display: inline-flex; background: rgba(255,255,255,0.07); border-radius: 8px;
    padding: 3px; gap: 2px; margin: 0 24px;
}
.board-seg a {
    padding: 5px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 600;
    color: var(--board-hero-ink-2); text-decoration: none; white-space: nowrap;
    transition: background var(--setup-transition), color var(--setup-transition);
}
.board-seg a:hover { color: #fff; text-decoration: none; }
.board-seg a.on { background: #fff; color: var(--board-hero); }

/* ---------- class tabs ---------- */
.board-tabs {
    display: flex; padding: 12px 24px 0; border-bottom: 1px solid var(--board-hero-line);
    /* The active tab overhangs the border by 1px, which is enough to make an
       overflow-x:auto strip grow a vertical scrollbar too. */
    overflow-x: auto; overflow-y: hidden;
}
.board-tabs a {
    font-family: var(--board-cond); font-size: 14px; font-weight: 700; letter-spacing: 0.11em;
    text-transform: uppercase; color: var(--board-hero-ink-2); padding: 9px 20px 10px;
    border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap;
    text-decoration: none;
    transition: color var(--setup-transition), border-color var(--setup-transition);
}
.board-tabs a:hover { color: #fff; text-decoration: none; }
.board-tabs a.on { color: #fff; border-bottom-color: var(--board-red); }

/* ---------- age chips ---------- */
.board-tabs, .board-ages {
    scrollbar-width: thin;
    scrollbar-color: var(--board-hero-ink-2) transparent;
}
.board-ages { display: flex; gap: 6px; padding: 13px 24px; overflow-x: auto; overflow-y: hidden; }
.board-ages a {
    font-family: var(--board-cond); font-size: 13px; font-weight: 700; letter-spacing: 0.07em;
    padding: 5px 13px; border-radius: 4px; background: rgba(255,255,255,0.06);
    color: var(--board-hero-ink-2); border: 1px solid var(--board-hero-line);
    white-space: nowrap; text-decoration: none;
    transition: background var(--setup-transition), color var(--setup-transition);
}
.board-ages a:hover { background: rgba(255,255,255,0.15); color: #fff; text-decoration: none; }
.board-ages a.on { background: #fff; color: var(--board-hero); border-color: #fff; }

/* ---------- leader spotlight ----------
   Sits flush under .board-head and repeats its ground so the dark
   region reads as one block, even though a callback panel boundary
   falls between them. */
.board-spot-wrap { background: var(--board-hero); padding: 0 24px 20px; }
.board-spot {
    background: rgba(255,255,255,0.05); border: 1px solid var(--board-hero-line);
    border-left: 3px solid var(--board-gold-hero); border-radius: 6px;
    padding: 13px 18px; display: flex; align-items: center; gap: 18px;
}
.board-spot .lab {
    font-family: var(--board-cond); font-size: 10px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--board-gold-hero); flex: none;
}
.board-spot .nm {
    font-family: var(--board-cond); font-size: 23px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.02em; color: #fff; line-height: 1;
}
.board-spot .nm a { color: #fff; text-decoration: none; }
.board-spot .nm a:hover { color: var(--board-gold-hero); text-decoration: none; }
.board-spot .dd { font-size: 11px; color: var(--board-hero-ink-2); margin-top: 4px; }
.board-spot .big { margin-left: auto; text-align: right; flex: none; }
.board-spot .big .v {
    font-family: var(--board-cond); font-size: 36px; font-weight: 700;
    color: var(--board-gold-hero); line-height: 0.95;
}
.board-spot .big .k {
    font-family: var(--board-cond); font-size: 9.5px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--board-hero-ink-2);
}

/* ---------- find bar ---------- */
.board-findrow { display: flex; gap: 12px; align-items: center; padding: 16px 24px 0; }
.board-findrow input[type="text"] {
    flex: 1; background: var(--board-panel); border: 1.5px solid var(--board-line);
    border-radius: 9px; padding: 9px 14px; font-family: var(--setup-font); font-size: 13px;
    color: var(--board-ink); max-width: 100%;
    transition: border-color var(--setup-transition), box-shadow var(--setup-transition);
}
.board-findrow input[type="text"]:focus {
    outline: none; border-color: var(--setup-accent);
    box-shadow: 0 0 0 3px var(--setup-accent-glow);
}
.board-findrow input[type="text"]::placeholder { color: var(--board-ink-2); opacity: 1; }
/* The small uppercase furniture uses the secondary ink, not the muted one.
   At 10-11px letterspaced, muted only clears about 2.5:1 on white. */
.board-count {
    font-family: var(--board-cond); font-size: 11.5px; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--board-ink-2); white-space: nowrap;
}

/* ---------- the standings list ---------- */
.board-list {
    margin: 12px 24px 0; background: var(--board-panel); border: 1px solid var(--board-line);
    border-radius: 10px; overflow: hidden;
}
.board-hd, .board-row {
    display: grid; align-items: center; gap: 0 12px;
    grid-template-columns: 52px 44px minmax(140px, 1fr) 100px 92px 116px 74px;
}
.board-hd {
    padding: 9px 16px; border-bottom: 1px solid var(--board-line);
    background: var(--board-panel-2);
    font-family: var(--board-cond); font-size: 10.5px; font-weight: 700; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--board-ink-2);
}
.board-hd .r { text-align: right; }
.board-row {
    padding: 9px 16px; border-bottom: 1px solid var(--board-line-2);
    transition: background var(--setup-transition);
}
.board-row:last-child { border-bottom: 0; }
.board-row:hover { background: var(--board-row-hover); }
.board-row.top { background: var(--board-top-tint); }
.board-row.top:hover { background: var(--board-top-tint-hover); }
.board-rk {
    font-family: var(--board-cond); font-size: 25px; font-weight: 700; line-height: 1;
    color: var(--board-ink-3);
}
.board-row.r1 .board-rk { color: var(--board-gold); font-size: 30px; }
.board-row.r2 .board-rk { color: var(--board-silver); font-size: 28px; }
.board-row.r3 .board-rk { color: var(--board-bronze); font-size: 28px; }
/* A shared rank reads as a small raised prefix on the numeral, not as part of
   it. Muted, because at the start of a season a whole division can be tied and
   thirty rows of it should stay quiet. */
.board-rk .tie {
    font-size: 0.46em; vertical-align: 0.62em; letter-spacing: 0.06em;
    font-weight: 700; color: var(--board-ink-3); margin-right: 1px;
}
.board-st {
    font-family: var(--board-cond); font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    color: var(--board-ink-2); border: 1px solid var(--board-line); border-radius: 3px;
    padding: 2px 6px; display: inline-block;
}
.board-tm {
    font-family: var(--board-cond); font-size: 18px; font-weight: 700; letter-spacing: 0.02em;
    text-transform: uppercase; color: var(--board-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board-row.r1 .board-tm, .board-row.r2 .board-tm, .board-row.r3 .board-tm { font-size: 20px; }
.board-tm a { color: inherit; text-decoration: none; }
.board-tm a:hover { color: var(--board-red); text-decoration: none; }
.board-tm img.merge { vertical-align: middle; }
.board-pts {
    font-family: var(--board-cond); font-size: 22px; font-weight: 700; color: var(--board-ink);
    text-align: right;
}
.board-row.r1 .board-pts { color: var(--board-gold); }
.board-rec { font-size: 11.5px; color: var(--board-ink-2); text-align: right; }
.board-wp { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.board-wp .m {
    width: 52px; height: 5px; background: var(--board-track); overflow: hidden; flex: none;
}
.board-wp .m i { display: block; height: 100%; background: var(--board-good); }
.board-wp .m.none { visibility: hidden; }
.board-wp .m.lo i { background: var(--board-warn); }
.board-wp .m.vlo i { background: var(--board-bad); }
.board-wp .n { font-size: 11px; color: var(--board-ink-2); width: 30px; text-align: right; }
.board-diff { font-size: 12px; font-weight: 700; text-align: right; }
.board-diff.pos { color: var(--board-good); }
.board-diff.neg { color: var(--board-bad); }
.board-meta { display: none; }

.board-foot {
    padding: 13px 24px 0; font-family: var(--board-cond); font-size: 11.5px;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--board-ink-2);
}
.board-empty {
    margin: 12px 24px 0; background: var(--board-panel); border: 1px dashed var(--board-line);
    border-radius: 10px; padding: 44px 24px; text-align: center;
}
.board-empty .i { font-size: 34px; color: var(--board-ink-3); line-height: 1; }
.board-empty h3 {
    font-family: var(--setup-font-heading); font-size: 1.02rem; font-weight: 700;
    color: var(--board-ink); margin: 12px 0 6px;
}
.board-empty p { margin: 0 auto; max-width: 46ch; font-size: 0.87rem; color: var(--board-ink-2); }

/* ============================================================
   THE BOARD - dark
   Nothing here but tokens. Every rule above draws from them, so the
   two themes cannot drift apart. Scoped to the wrapper so it can
   never leak onto another page that happens to load this file.

   These are not inverted light values. The greens and reds are
   stepped up until they clear 4.5:1 on the dark panel (#3d8a34 and
   #c23a3a would land near 2:1 there), and the muted ink for column
   headings is lifted for the same reason.
   ============================================================ */
.board-page[data-board-theme="dark"] {
    --board-bg: #0a0e18;
    --board-panel: #111725;
    --board-panel-2: #0d1320;
    --board-line: #1e2739;
    --board-line-2: #171f2e;
    --board-ink: #f0f3f8;
    --board-ink-2: #8f9db8;
    --board-ink-3: #7285a0;
    --board-hero: #080c14;
    --board-hero-2: #0e1422;
    --board-hero-ink: #ffffff;
    --board-hero-ink-2: #8f9db8;
    --board-hero-line: rgba(255,255,255,0.10);
    --board-gold: #f0c250;
    --board-gold-hero: #f0c250;
    --board-silver: #c3ccd8;
    --board-bronze: #cd8b4f;
    --board-red: #e8635a;
    --board-good: #56cf74;
    --board-warn: #e8b45f;
    --board-bad: #e8635a;
    --board-track: #202b3f;
    --board-row-hover: #1a2334;
    --board-top-tint: rgba(240,194,80,0.05);
    --board-top-tint-hover: rgba(240,194,80,0.10);
    --board-gold-text: #f0c250;
}
/* The medal tint is the row background in dark, so the plain rows need
   a touch more separation than the hairline alone gives them. */
.board-page[data-board-theme="dark"] .board-list { border-color: var(--board-line); }
.board-page[data-board-theme="dark"] .board-st { border-color: var(--board-line); }

/* ---------- narrow: reflow to cards, hide nothing ----------
   Two copies of the same rules. The container query is the one that
   matters; the media query is the fallback for browsers without
   container query support, where the viewport is the best proxy. */
@container board (max-width: 660px) {
    .board-head-top { padding: 16px 16px 12px; flex-wrap: wrap; }
    .board-head-top h1 { font-size: 22px; }
    .board-live { width: 100%; margin-left: 0; text-align: left; order: 9; margin-top: 8px; }
    .board-seg { margin: 0 16px; }
    .board-tabs, .board-ages { padding-left: 16px; padding-right: 16px; }
    .board-spot-wrap { padding: 0 16px 16px; }
    .board-spot { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
    .board-spot .nm { font-size: 18px; }
    .board-spot .big {
        margin-left: 0; text-align: left; display: flex; align-items: baseline; gap: 8px;
    }
    .board-spot .big .v { font-size: 26px; }
    .board-findrow { padding: 12px 16px 0; }
    .board-count { display: none; }
    .board-list, .board-empty { margin-left: 16px; margin-right: 16px; }
    .board-foot { padding-left: 16px; padding-right: 16px; }

    .board-hd { display: none; }
    .board-row {
        grid-template-columns: 42px 1fr auto;
        grid-template-areas: "rk tm pts" ". meta meta";
        row-gap: 4px; padding: 11px 14px; align-items: start;
    }
    .board-rk { grid-area: rk; font-size: 22px; padding-top: 2px; }
    .board-row.r1 .board-rk, .board-row.r2 .board-rk, .board-row.r3 .board-rk { font-size: 24px; }
    .board-tm { grid-area: tm; font-size: 16px; white-space: normal; }
    .board-row.r1 .board-tm, .board-row.r2 .board-tm, .board-row.r3 .board-tm { font-size: 17px; }
    .board-pts { grid-area: pts; font-size: 20px; padding-left: 10px; }
    .board-st, .board-rec, .board-wp, .board-diff { display: none; }
    .board-meta {
        grid-area: meta; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center;
        font-size: 11px; color: var(--board-ink-2);
    }
    .board-meta .st2 {
        font-family: var(--board-cond); font-weight: 700; letter-spacing: 0.09em; font-size: 11.5px;
    }
    .board-meta .pos { color: var(--board-good); font-weight: 700; }
    .board-meta .neg { color: var(--board-bad); font-weight: 700; }
    .board-meta .bar { flex-basis: 100%; height: 4px; background: var(--board-track); margin-top: 3px; }
    .board-meta .bar i { display: block; height: 100%; background: var(--board-ink-3); }
    .board-row.top .board-meta .bar i { background: var(--board-gold); }
}
@media (max-width: 900px) {
    .board-head-top { padding: 16px 16px 12px; flex-wrap: wrap; }
    .board-head-top h1 { font-size: 22px; }
    .board-live { width: 100%; margin-left: 0; text-align: left; order: 9; margin-top: 8px; }
    .board-seg { margin: 0 16px; }
    .board-tabs, .board-ages { padding-left: 16px; padding-right: 16px; }
    .board-spot-wrap { padding: 0 16px 16px; }
    .board-spot { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
    .board-spot .nm { font-size: 18px; }
    .board-spot .big {
        margin-left: 0; text-align: left; display: flex; align-items: baseline; gap: 8px;
    }
    .board-spot .big .v { font-size: 26px; }
    .board-findrow { padding: 12px 16px 0; }
    .board-count { display: none; }
    .board-list, .board-empty { margin-left: 16px; margin-right: 16px; }
    .board-foot { padding-left: 16px; padding-right: 16px; }

    .board-hd { display: none; }
    .board-row {
        grid-template-columns: 42px 1fr auto;
        grid-template-areas: "rk tm pts" ". meta meta";
        row-gap: 4px; padding: 11px 14px; align-items: start;
    }
    .board-rk { grid-area: rk; font-size: 22px; padding-top: 2px; }
    .board-row.r1 .board-rk, .board-row.r2 .board-rk, .board-row.r3 .board-rk { font-size: 24px; }
    .board-tm { grid-area: tm; font-size: 16px; white-space: normal; }
    .board-row.r1 .board-tm, .board-row.r2 .board-tm, .board-row.r3 .board-tm { font-size: 17px; }
    .board-pts { grid-area: pts; font-size: 20px; padding-left: 10px; }
    .board-st, .board-rec, .board-wp, .board-diff { display: none; }
    .board-meta {
        grid-area: meta; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center;
        font-size: 11px; color: var(--board-ink-2);
    }
    .board-meta .st2 {
        font-family: var(--board-cond); font-weight: 700; letter-spacing: 0.09em; font-size: 11.5px;
    }
    .board-meta .pos { color: var(--board-good); font-weight: 700; }
    .board-meta .neg { color: var(--board-bad); font-weight: 700; }
    .board-meta .bar { flex-basis: 100%; height: 4px; background: var(--board-track); margin-top: 3px; }
    .board-meta .bar i { display: block; height: 100%; background: var(--board-ink-3); }
    .board-row.top .board-meta .bar i { background: var(--board-gold); }
}

/* ============================================================
   THE BOARD - team view (controls/TournRankHeading.ascx)
   Same dark hero, same light surface, same tokens as the board,
   so clicking a team feels like the next page of one product
   rather than a different one. Lives inside .board-page, which
   is where every --board-* value comes from.
   ============================================================ */
.tv { margin: 0; }

/* ---------- hero ---------- */
.tv-hero {
    background: linear-gradient(168deg, var(--board-hero-2), var(--board-hero));
    color: var(--board-hero-ink);
    padding: 0 0 22px;
}
.tv-back {
    display: inline-flex; align-items: center; margin: 14px 24px 0;
    padding: 6px 12px; border: 1px solid var(--board-hero-line); border-radius: 6px;
    font-family: var(--board-cond); font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--board-hero-ink-2);
    text-decoration: none;
    transition: background var(--setup-transition), color var(--setup-transition);
}
.tv-back:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.tv-head { display: flex; align-items: center; gap: 20px; padding: 16px 24px 0; }
.tv-crest {
    width: 76px; height: 76px; border-radius: 14px; flex: none; overflow: hidden;
    background: rgba(255,255,255,0.06); border: 1px solid var(--board-hero-line);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--board-cond); font-weight: 700; font-size: 26px;
    letter-spacing: 0.06em; color: var(--board-hero-ink-2);
}
.tv-crest img { display: block; }
.tv-crest-photo { width: 100%; height: 100%; object-fit: cover; }
.tv-crest-logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.tv-who { flex: 1; min-width: 0; }
.tv-crumb {
    font-family: var(--board-cond); font-size: 10.5px; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--board-hero-red); margin-bottom: 5px; min-height: 13px;
}
.tv-who h2 {
    font-family: var(--board-cond); font-size: 31px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.02em; line-height: 1; color: #fff; margin: 0;
}
.tv-who h2 a { color: #fff; text-decoration: none; }
.tv-who h2 a:hover { color: var(--board-gold-hero); text-decoration: none; }
.tv-meta { font-size: 12px; color: var(--board-hero-ink-2); margin-top: 6px; }
.tv-nums { display: flex; flex: none; }
.tv-num { padding: 4px 22px; border-left: 1px solid var(--board-hero-line); text-align: center; }
.tv-num .k {
    font-family: var(--board-cond); font-size: 9.5px; letter-spacing: 0.19em;
    text-transform: uppercase; color: var(--board-hero-ink-2);
}
.tv-num .v {
    font-family: var(--board-cond); font-size: 38px; font-weight: 700; line-height: 1.02; color: #fff;
}
.tv-num .v.gold { color: var(--board-gold-hero); }
.tv-num .v .tie {
    font-size: 0.4em; vertical-align: 0.7em; letter-spacing: 0.06em;
    color: var(--board-hero-ink-2); margin-right: 1px;
}
.tv-num .v.sm { font-size: 26px; padding-top: 8px; }
.tv-num .v.none { color: var(--board-hero-ink-2); }
.tv-num .d { font-size: 10.5px; color: var(--board-hero-ink-2); margin-top: 1px; }
.tv-num .d.up { color: #4ec36a; }

/* ---------- body ---------- */
.tv-body {
    padding: 18px 24px 24px; display: grid; gap: 18px;
    grid-template-columns: 1.5fr 1fr; align-items: start;
}
.tv-col { display: grid; gap: 18px; align-content: start; }
.tv-wide { grid-column: 1 / -1; }
.tv-panel {
    background: var(--board-panel); border: 1px solid var(--board-line);
    border-radius: 10px; overflow: hidden;
}
.tv-ph {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 13px 16px 0;
}
.tv-ph h3 {
    font-family: var(--board-cond); font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--board-ink-2); margin: 0;
}
.tv-ph .hint { font-size: 10.5px; color: var(--board-ink-2); }
.tv-ph-sub { border-top: 1px solid var(--board-line); margin-top: 14px; padding-top: 13px; }

/* ---------- chart ---------- */
.tv-chart { padding: 8px 12px 6px; }
.tv-chart svg { display: block; width: 100%; height: auto; }

/* ---------- form tiles ---------- */
.tv-tiles {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--board-line); border-top: 1px solid var(--board-line); margin-top: 12px;
}
.tv-tile { background: var(--board-panel); padding: 11px 14px; }
.tv-tile .k {
    font-family: var(--board-cond); font-size: 9.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--board-ink-2);
}
.tv-tile .v {
    font-family: var(--board-cond); font-size: 20px; font-weight: 700;
    color: var(--board-ink); margin-top: 2px;
}
.tv-tile .v.none { color: var(--board-ink-3); }
.tv-tile .d { font-size: 10.5px; color: var(--board-ink-2); }
.tv-tile .d .pos { color: var(--board-good); font-weight: 700; }
.tv-tile .d .neg { color: var(--board-bad); font-weight: 700; }

/* ---------- the full splits grid ---------- */
.tv-tablewrap { overflow-x: auto; padding: 10px 0 4px; }
.tv-grid { width: 100%; border-collapse: collapse; font-size: 12px; }
.tv-grid td { padding: 7px 12px; border-bottom: 1px solid var(--board-line-2); white-space: nowrap; }
.tv-grid tr:last-child td { border-bottom: 0; }
.tv-grid tr.tv-gridhead td {
    font-family: var(--board-cond); font-size: 10px; font-weight: 700; letter-spacing: 0.11em;
    text-transform: uppercase; color: var(--board-ink-2);
    border-bottom: 1px solid var(--board-line); background: var(--board-panel-2);
}
.tv-grid tr:not(.tv-gridhead) td:first-child { color: var(--board-ink); font-weight: 600; }
.tv-grid tr:not(.tv-gridhead) td { color: var(--board-ink-2); font-variant-numeric: tabular-nums; }
.tv-grid tr:not(.tv-gridhead):hover td { background: var(--board-row-hover); }

/* ---------- event by event ---------- */
.tv-evts { margin-top: 9px; }
.tv-evt {
    display: grid; grid-template-columns: 40px 1fr auto auto 56px 34px; gap: 10px;
    align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--board-line-2);
    font-size: 12px;
}
.tv-evt:last-child { border-bottom: 0; }
.tv-evt:hover { background: var(--board-row-hover); }
.tv-evt .dt { font-size: 10.5px; color: var(--board-ink-2); }
.tv-evt .nm {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--board-ink); font-weight: 600;
}
.tv-evt .nm a { color: inherit; text-decoration: none; }
.tv-evt .nm a:hover { color: var(--board-red); text-decoration: none; }
.tv-evt .fin {
    font-family: var(--board-cond); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
    border-radius: 3px; padding: 2px 6px; white-space: nowrap;
}
.tv-evt .fin.gold { background: color-mix(in srgb, var(--board-gold) 18%, transparent); color: var(--board-gold-text); }
.tv-evt .fin.pod { background: var(--board-line-2); color: var(--board-ink-2); }
.tv-evt .fin.plain { background: transparent; color: var(--board-ink-3); padding-left: 0; padding-right: 0; }
.tv-evt .fin.none { padding: 0; }
.tv-evt .wl { font-size: 10.5px; color: var(--board-ink-2); text-align: right; }
.tv-evt .pb { height: 6px; background: var(--board-track); overflow: hidden; }
.tv-evt .pb i { display: block; height: 100%; background: var(--board-ink-3); }
.tv-evt .pv {
    font-family: var(--board-cond); font-size: 14px; font-weight: 700;
    color: var(--board-ink); text-align: right;
}

/* ---------- the results wall ----------
   These tables are built in the code-behind, one pair per event: a
   panel about the tournament on the left, its games on the right. */
.tv-results { padding: 10px 16px 14px; }
.tv-rblock {
    display: grid; grid-template-columns: minmax(180px, 1fr) 1.4fr; gap: 16px;
    padding: 14px 0; border-bottom: 1px solid var(--board-line-2); align-items: start;
}
.tv-rblock:last-child { border-bottom: 0; }
.tv-rtourn { width: 100%; border-collapse: collapse; font-size: 12px; }
.tv-rtourn td { padding: 1px 0 1px 10px; color: var(--board-ink-2); vertical-align: top; line-height: 1.5; }
.tv-rtourn td a { color: var(--board-ink); font-weight: 600; text-decoration: none; }
.tv-rtourn td a:hover { color: var(--board-red); text-decoration: none; }
.tv-rlogocell { padding: 0 !important; width: 68px; vertical-align: top; text-align: center; }
.tv-rlogo { width: 60px; height: auto; border-radius: 8px; display: block; }
.tv-rtourn tr.tv-rfinish td {
    font-family: var(--board-cond); font-weight: 700; font-size: 12.5px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--board-gold-text); padding-top: 4px;
}
.tv-rtourn tr.tv-rstate td { color: var(--board-ink-3); font-size: 11px; }
.tv-rgames { width: 100%; border-collapse: collapse; font-size: 12px; }
.tv-rgames td { padding: 5px 8px; border-bottom: 1px solid var(--board-line-2); }
.tv-rgames tr:last-child td { border-bottom: 0; }
.tv-gopp { color: var(--board-ink); }
.tv-gopp a { color: var(--board-ink); text-decoration: none; }
.tv-gopp a:hover { color: var(--board-red); text-decoration: none; }
.tv-gopp img { vertical-align: middle; }
.tv-gdel { width: 20px; text-align: right; }
.tv-grank {
    width: 38px; text-align: right; font-size: 10.5px; font-weight: 700;
    color: var(--board-ink-3); font-variant-numeric: tabular-nums;
}
.tv-gscore {
    width: 62px; text-align: right; font-weight: 700; font-size: 11.5px;
    font-variant-numeric: tabular-nums; color: var(--board-ink-2); white-space: nowrap;
}
.tv-gscore.w { color: var(--board-good); }
.tv-gscore.l { color: var(--board-bad); }
.tv-gscore.t { color: var(--board-ink-2); }

/* ---------- narrow ---------- */
@container board (max-width: 860px) {
    .tv-back { margin: 12px 16px 0; }
    .tv-head { flex-wrap: wrap; padding: 14px 16px 0; gap: 14px; }
    .tv-crest { width: 56px; height: 56px; font-size: 19px; }
    .tv-who h2 { font-size: 23px; }
    .tv-nums { width: 100%; border-top: 1px solid var(--board-hero-line); padding-top: 12px; }
    .tv-num { flex: 1; padding: 0 10px; text-align: left; border-left: 0;
              border-right: 1px solid var(--board-hero-line); }
    .tv-num:last-child { border-right: 0; }
    .tv-num .v { font-size: 26px; }
    .tv-num .v.sm { font-size: 19px; padding-top: 6px; }
    .tv-body { grid-template-columns: 1fr; padding: 16px; }
    .tv-tiles { grid-template-columns: repeat(2, 1fr); }
    .tv-evt { grid-template-columns: 38px 1fr auto 34px; gap: 8px; }
    .tv-evt .wl, .tv-evt .pb { display: none; }
    .tv-rblock { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 860px) {
    .tv-back { margin: 12px 16px 0; }
    .tv-head { flex-wrap: wrap; padding: 14px 16px 0; gap: 14px; }
    .tv-crest { width: 56px; height: 56px; font-size: 19px; }
    .tv-who h2 { font-size: 23px; }
    .tv-nums { width: 100%; border-top: 1px solid var(--board-hero-line); padding-top: 12px; }
    .tv-num { flex: 1; padding: 0 10px; text-align: left; border-left: 0;
              border-right: 1px solid var(--board-hero-line); }
    .tv-num:last-child { border-right: 0; }
    .tv-num .v { font-size: 26px; }
    .tv-num .v.sm { font-size: 19px; padding-top: 6px; }
    .tv-body { grid-template-columns: 1fr; padding: 16px; }
    .tv-tiles { grid-template-columns: repeat(2, 1fr); }
    .tv-evt { grid-template-columns: 38px 1fr auto 34px; gap: 8px; }
    .tv-evt .wl, .tv-evt .pb { display: none; }
    .tv-rblock { grid-template-columns: 1fr; gap: 8px; }
}

/* ============================================================
   LEGACY MASTER BREADCRUMB (#breadcrumbs-one) - MODERNIZED
   ------------------------------------------------------------
   Sinc19.master.vb / Full.master.vb setCrumbs() emit:
     <ul id="breadcrumbs-one">
       <li><a href="...">Crumb</a></li>
       <li><a href="" class="current">Page Title</a></li>
     </ul>
   The 2010-era rules in sinc19.css paint that as gray gradient
   "arrow tab" chevrons using ::before/::after border triangles.
   Everything below neutralizes those and repaints the list as a
   quiet text trail. sinc-setup.css loads from the page head
   placeholder (after sinc19.css), so equal-specificity wins; the
   two !important declarations below match !important in the
   original font-family / font-size rules.
   Separator is drawn with borders, not an icon font, so pages
   that do not load Material Design Icons still render correctly.
   ============================================================ */
#breadcrumbs-one {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    background: none;
    border: 0;
    overflow: visible;
    font-family: 'DM Sans', sans-serif;
}
#breadcrumbs-one li {
    float: none;
    display: flex;
    align-items: center;
    min-width: 0;
}
/* chevron between crumbs - CSS-drawn, no icon font dependency */
#breadcrumbs-one li + li::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin: 0 6px 0 2px;
    border-right: 1.5px solid var(--setup-text-muted);
    border-bottom: 1.5px solid var(--setup-text-muted);
    transform: rotate(-45deg);
    opacity: 0.75;
}
#breadcrumbs-one a {
    float: none;
    display: inline-block;
    max-width: 260px;
    padding: 4px 8px;
    position: static;
    border-radius: var(--setup-radius-sm);
    background: none;
    background-image: none;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--setup-text-secondary);
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: var(--setup-transition);
}
#breadcrumbs-one li:first-child a { padding-left: 8px; }
#breadcrumbs-one a:hover {
    background: var(--setup-blue-light);
    color: var(--setup-blue);
}
/* kill the gradient arrow triangles */
#breadcrumbs-one a::after,
#breadcrumbs-one a::before {
    content: normal;
    display: none;
    border: 0;
}
/* current page - dark, heavier, not a live link */
#breadcrumbs-one .current,
#breadcrumbs-one .current:hover {
    color: var(--setup-text);
    font-weight: 600;
    background: none;
    cursor: default;
    pointer-events: none;
}

/* ------------------------------------------------------------
   Sinc26.master emits the SAME breadcrumb as a Bootstrap list:
     <div id="ctl00_pnlCrumbs"><div class="container">
       <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="...">Crumb</a></li>
         <li class="breadcrumb-item active">Page Title</li>
       </ol></div></div>
   PageBase.vb swaps masters at runtime, so a page can land on
   either Sinc19 or Sinc26. Match the #breadcrumbs-one treatment
   above so the crumb trail looks the same either way.
   Scoped to #ctl00_pnlCrumbs so ordinary Bootstrap breadcrumbs
   elsewhere on the site are untouched.
   ------------------------------------------------------------ */
#ctl00_pnlCrumbs .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    background: none;
    border-radius: 0;
    font-family: 'DM Sans', sans-serif;
}
#ctl00_pnlCrumbs .breadcrumb-item {
    display: flex;
    align-items: center;
    min-width: 0;
    padding-left: 0;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}
/* replace Bootstrap's "/" divider with the same CSS-drawn chevron */
#ctl00_pnlCrumbs .breadcrumb-item + .breadcrumb-item::before {
    content: '';
    float: none;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    padding: 0;
    margin: 0 6px 0 2px;
    border-right: 1.5px solid var(--setup-text-muted);
    border-bottom: 1.5px solid var(--setup-text-muted);
    transform: rotate(-45deg);
    opacity: 0.75;
}
#ctl00_pnlCrumbs .breadcrumb-item a {
    display: inline-block;
    max-width: 260px;
    padding: 4px 8px;
    border-radius: var(--setup-radius-sm);
    color: var(--setup-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: var(--setup-transition);
}
#ctl00_pnlCrumbs .breadcrumb-item a:hover {
    background: var(--setup-blue-light);
    color: var(--setup-blue);
}
#ctl00_pnlCrumbs .breadcrumb-item.active {
    padding: 4px 8px;
    color: var(--setup-text);
    font-weight: 600;
}

/* ============================================================
   Membership pricing cards (Premier Athlete membership)
   ============================================================ */
.setup-price-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch;
    justify-content: center;
}
.setup-price-card {
    flex: 1 1 260px;
    max-width: 340px;
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-lg);
    box-shadow: var(--setup-shadow);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    transition: var(--setup-transition);
}
.setup-price-card:hover {
    box-shadow: var(--setup-shadow-md);
    transform: translateY(-3px);
}
.setup-price-card.featured {
    border: 2px solid var(--setup-accent);
    position: relative;
}
.setup-price-flag {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--setup-accent);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 999px;
    white-space: nowrap;
}
.setup-price-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--setup-text);
    text-align: center;
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.setup-price-amount {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 2.4rem;
    color: var(--setup-primary);
    text-align: center;
    line-height: 1.1;
}
.setup-price-amount span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--setup-text-secondary);
}
.setup-price-sub {
    text-align: center;
    color: var(--setup-text-muted);
    font-size: 0.8rem;
    margin-bottom: 14px;
    min-height: 1.2em;
}
.setup-price-list {
    list-style: none;
    margin: 0 0 18px 0;
    padding: 14px 0 0 0;
    border-top: 1px solid var(--setup-border-light);
    flex: 1;
}
.setup-price-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    font-size: 0.86rem;
    color: var(--setup-text);
}
.setup-price-list li i.mdi {
    color: var(--setup-accent);
    font-size: 1rem;
    line-height: 1.3;
}
.setup-price-list li.na {
    color: var(--setup-text-muted);
}
.setup-price-list li.na i.mdi {
    color: var(--setup-text-muted);
}
.setup-price-cta {
    display: block;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 11px 18px;
    border-radius: var(--setup-radius-sm);
    background: var(--setup-accent);
    color: #fff !important;
    text-decoration: none !important;
    transition: var(--setup-transition);
}
.setup-price-cta:hover {
    background: var(--setup-accent-hover);
    color: #fff;
}
.setup-price-cta.secondary {
    background: #fff;
    border: 1.5px solid var(--setup-border);
    color: var(--setup-text) !important;
}
.setup-price-cta.secondary:hover {
    border-color: var(--setup-primary-light);
    background: var(--setup-bg);
}

/* ============================================================
   ORG COMPLIANCE CHECKLIST  (controls/dashboard/OrgChecklist.ascx)
   The "what do I still owe my sanctioning body" card. One card per org,
   one block per team, one row per task. Task state is carried by a
   modifier on .orgchk-step: .done, .wait (started, waiting on someone
   else) or .todo (the default).
   ============================================================ */
.orgchk {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-lg);
    box-shadow: var(--setup-shadow);
    overflow: hidden;
    margin-bottom: 20px;
}

/* --- header --- */
.orgchk-head {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px;
    background: var(--setup-primary);
    color: #fff;
}
.orgchk-hic {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255,255,255,0.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
}
.orgchk-htxt { min-width: 0; }
/* The .orgchk prefix is not decoration: dash.aspx and SincShell.master BOTH link
   sinc-setup.css, so a plain `.orgchk-htxt h3` ties with `.dash2-page h3` on
   specificity and loses on source order to whichever copy loads last - which
   painted this heading dark navy on the dark navy header. */
.orgchk .orgchk-htxt h3 {
    font-family: 'Outfit', sans-serif; font-weight: 700;
    font-size: 1.05rem; margin: 0; color: #fff;
    overflow-wrap: anywhere;
}
.orgchk .orgchk-htxt p {
    margin: 2px 0 0; font-size: 0.82rem;
    color: rgba(255,255,255,0.72);
    overflow-wrap: anywhere;
}

/* --- one team: a collapsed summary row that opens on click --- */
.orgchk-team { border-top: 1px solid var(--setup-border); }
.orgchk-team:first-of-type { border-top: 0; }

.orgchk-tsum {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 22px;
    cursor: pointer;
    list-style: none;                 /* Firefox marker */
    transition: background 0.15s ease;
}
.orgchk-tsum::-webkit-details-marker { display: none; }   /* Safari/Chrome marker */
.orgchk-tsum:hover { background: var(--setup-blue-light); }
.orgchk-team[open] > .orgchk-tsum {
    background: var(--setup-bg);
    border-bottom: 1px solid var(--setup-border-light);
}

.orgchk-chev {
    flex-shrink: 0; display: flex; color: var(--setup-text-muted);
    font-size: 1.1rem; line-height: 1;
    transition: transform 0.2s ease;
}
.orgchk-team[open] > .orgchk-tsum .orgchk-chev { transform: rotate(90deg); }

.orgchk .orgchk-tname {
    flex: 1 1 auto; min-width: 0;
    font-family: 'Outfit', sans-serif; font-weight: 600;
    font-size: 0.95rem; color: var(--setup-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* One pip per task, so a shut row still says WHICH pieces are outstanding. */
.orgchk-pips { display: flex; gap: 4px; flex-shrink: 0; }
.orgchk-pip {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--setup-border);
}
.orgchk-pip.done { background: var(--setup-accent); }
.orgchk-pip.wait { background: var(--setup-warning); }

.orgchk-badge {
    font-size: 0.72rem; font-weight: 600;
    padding: 3px 10px; border-radius: 999px;
    background: var(--setup-border-light); color: var(--setup-text-secondary);
    white-space: nowrap; flex-shrink: 0;
}
.orgchk-badge.ok { background: #ecfdf5; color: #047857; }

/* --- the steps --- */
.orgchk-steps { list-style: none; margin: 0; padding: 6px 0 12px; }
.orgchk-step {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 22px;
}
.orgchk-step + .orgchk-step { border-top: 1px solid var(--setup-border-light); }

.orgchk-mark {
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700;
    background: var(--setup-border-light);
    color: var(--setup-text-secondary);
}
.orgchk-step.done .orgchk-mark { background: var(--setup-accent); color: #fff; }
.orgchk-step.wait .orgchk-mark { background: var(--setup-warning-light); color: var(--setup-warning); }

.orgchk-body { flex: 1 1 auto; min-width: 0; }
.orgchk-body h4 {
    font-family: 'Outfit', sans-serif; font-weight: 600;
    font-size: 0.88rem; margin: 0; color: var(--setup-text);
}
.orgchk-step.done .orgchk-body h4 { color: var(--setup-text-secondary); }
.orgchk-body p {
    margin: 1px 0 0; font-size: 0.79rem;
    color: var(--setup-text-secondary);
    overflow-wrap: anywhere;
}

.orgchk-btn {
    flex-shrink: 0; white-space: nowrap;
    font-size: 0.78rem; font-weight: 600;
    padding: 7px 14px; border-radius: var(--setup-radius-sm);
    border: 1.5px solid var(--setup-border);
    background: #fff; color: var(--setup-text-secondary);
    text-decoration: none;
    transition: var(--setup-transition);
}
.orgchk-btn:hover { border-color: var(--setup-text-muted); color: var(--setup-text); text-decoration: none; }
/* The primary skin is the action still outstanding - the one thing on the row
   worth clicking. A completed step keeps the quiet outline. */
a.orgchk-btn.pri, a.orgchk-btn.pri:link, a.orgchk-btn.pri:visited {
    background: var(--setup-accent); border-color: var(--setup-accent); color: #fff;
}
a.orgchk-btn.pri:hover {
    background: var(--setup-accent-hover); border-color: var(--setup-accent-hover); color: #fff;
}

.orgchk-bgc { background: var(--setup-bg); }
.orgchk-more {
    margin: 0; padding: 10px 22px 14px;
    font-size: 0.78rem; color: var(--setup-text-muted);
    border-top: 1px solid var(--setup-border-light);
}

@media (max-width: 640px) {
    .orgchk-step { flex-wrap: wrap; }
    .orgchk-btn { margin-left: 42px; }
}

/* ===========================================================================
   USA Rank pill + event card
   Promoted out of team/Team.aspx (2026-08-26). The pill shape was defined only
   inside that one page, scoped to .team-page, so team/Games and team/Rank kept
   rendering the same numbers as flat coloured blocks. Only the SHAPE lives
   here - the colour comes from the level class the codebehind appends
   (gold_rank / silver_rank / bronze_rank / red_rank / blue_rank / green_rank /
   black_rank, via sic.GetUSARankCssForLevel).
   =========================================================================== */
.rankpill {
    display: inline-block;
    min-width: 28px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}
.rankpill.nr {
    background: var(--setup-border);
    color: var(--setup-text-secondary);
}

/* One card per event. These used to be bare rows separated by <hr>, which put
   every event on one undifferentiated slab. */
.evt-card {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow);
    padding: 16px 18px;
    margin-bottom: 14px;
    transition: box-shadow var(--setup-transition);
}
.evt-card:hover { box-shadow: var(--setup-shadow-md); }
.evt-card > .row { margin-left: 0; margin-right: 0; }

/* ===========================================================================
   IMPORT PROMO - the staff-only banner that points a legacy upload page at
   its guided replacement (TTAddGames -> /import/gameimport.aspx,
   TTAddTeams -> /import/teamimport.aspx). It sits on top of pages that carry
   none of the rest of this library, so it is fully self-contained: no
   Bootstrap classes, no inherited typography.
   =========================================================================== */
.import-promo {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-family: var(--setup-font);
    background: linear-gradient(135deg, var(--setup-primary) 0%, var(--setup-primary-light) 100%);
    border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow-md);
    padding: 16px 20px;
    /* The legacy pages this sits on run edge to edge under a fullscreen
       master, and one of them lays out 2300px wide - left to stretch, the CTA
       ends up off the viewport. Cap it so it always reads as one card. */
    max-width: 1100px;
    margin: 8px 12px 16px;
    text-align: left;
}
.import-promo .import-promo-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--setup-accent-glow);
    color: var(--setup-accent);
    font-size: 1.5rem;
    line-height: 42px;
    text-align: center;
}
.import-promo .import-promo-body { flex: 1 1 320px; min-width: 260px; }
.import-promo .import-promo-title {
    font-family: var(--setup-font-heading);
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    margin: 0 0 2px;
}
.import-promo .import-promo-text {
    font-size: 0.84rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.78);
    margin: 0;
}
.import-promo .import-promo-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--setup-accent);
    color: #fff;
    font-family: var(--setup-font);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}
.import-promo .import-promo-link,
.import-promo a.import-promo-link:link,
.import-promo a.import-promo-link:visited {
    flex: 0 0 auto;
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--setup-radius-sm);
    background: var(--setup-accent);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px var(--setup-accent-glow);
    transition: background var(--setup-transition), transform var(--setup-transition);
}
.import-promo a.import-promo-link:hover {
    background: var(--setup-accent-hover);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* ==========================================================================
   College profile - shared by sicCollege.aspx and TTCollegeDetails.aspx
   Public-facing college page: hero, cost block, fact tiles, coach rows.
   ========================================================================== */
.sic-college {
    font-family: var(--setup-font);
    color: var(--setup-text);
    max-width: 980px;
    margin: 0 auto;
}
.sic-college h1,
.sic-college h2,
.sic-college h3 {
    font-family: var(--setup-font-heading);
}

/* Breadcrumb - replaces the 2011 #breadcrumbs-one chevron tabs */
.sic-crumb {
    font-size: 0.78rem;
    color: var(--setup-text-muted);
    margin-bottom: 14px;
}
.sic-crumb a,
.sic-crumb a:link,
.sic-crumb a:visited {
    color: var(--setup-text-secondary);
    text-decoration: none;
}
.sic-crumb a:hover {
    color: var(--setup-text);
    text-decoration: underline;
}
.sic-crumb .sep {
    margin: 0 8px;
    color: var(--setup-border);
}

/* Hero */
.sic-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-lg);
    box-shadow: var(--setup-shadow);
    padding: 18px 20px;
}
/* The staff upload link wraps the logo, so the wrapper - not the anchor - is the
   flex item. Without it the anchor collapses and the logo overlaps the school name. */
.sic-hero-logo-wrap {
    flex: 0 0 auto;
    line-height: 0;
}
.sic-hero-logo-wrap > a {
    position: static;
    display: block;
    padding: 0;
    background: none;
}
.sic-hero-logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    padding: 6px;
    flex: 0 0 auto;
}
.sic-hero-main {
    flex: 1 1 240px;
    min-width: 220px;
}
.sic-hero-name {
    margin: 0 0 4px 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--setup-text);
    line-height: 1.15;
}
.sic-hero-name a,
.sic-hero-name a:link,
.sic-hero-name a:visited {
    color: var(--setup-text);
    text-decoration: none;
}
.sic-hero-addr {
    color: var(--setup-text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
}
.sic-hero-side {
    flex: 0 0 auto;
    text-align: right;
}
.sic-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.sic-badge {
    display: inline-block;
    font-family: var(--setup-font-heading);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 100px;
    background: var(--setup-bg);
    color: var(--setup-text-secondary);
    border: 1px solid var(--setup-border);
}
.sic-badge.sic-badge-sport {
    background: rgba(92, 184, 48, 0.1);
    color: var(--setup-accent-hover);
    border-color: rgba(92, 184, 48, 0.35);
}

/* Program toggle (mens / womens) */
.sic-toggle {
    display: inline-flex;
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    overflow: hidden;
}
.sic-toggle a,
.sic-toggle a:link,
.sic-toggle a:visited {
    font-family: var(--setup-font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 7px 16px;
    color: var(--setup-text-secondary);
    background: var(--setup-card);
    text-decoration: none;
    transition: background var(--setup-transition), color var(--setup-transition);
}
.sic-toggle a:hover {
    background: var(--setup-bg);
    color: var(--setup-text);
}
.sic-toggle a.on,
.sic-toggle a.on:link,
.sic-toggle a.on:visited {
    background: var(--setup-primary);
    color: #fff;
}

/* Fact row: cost block beside the stat tiles */
.sic-factrow {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 12px;
    align-items: start;
    margin-top: 14px;
}
/* No cost data on file - the tiles take the whole row rather than leave a dead column. */
.sic-factrow.sic-factrow-nocost {
    grid-template-columns: 1fr;
}
.sic-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.sic-factrow-nocost .sic-tiles {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.sic-tile {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow);
    padding: 11px 14px;
}
.sic-tile.sic-tile-wide {
    grid-column: 1 / -1;
}
.sic-tile .k {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--setup-text-muted);
}
.sic-tile .v {
    display: block;
    font-family: var(--setup-font-heading);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--setup-text);
    font-variant-numeric: tabular-nums;
}
.sic-tile .v.muted {
    color: var(--setup-text-muted);
}

/* Cost block.
   NOTE: avgNetPrice and tuitionis/tuitionos are BOTH College Scorecard fields but are
   NOT comparable - tuition is tuition+fees only, net price is full cost of attendance
   minus grant aid (so it includes room and board). Never render a ratio between them. */
.sic-cost {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow);
    padding: 16px 18px;
}
.sic-cost .k {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--setup-text-muted);
    margin-bottom: 10px;
}
.sic-cost-big {
    font-family: var(--setup-font-heading);
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--setup-accent-hover);
    font-variant-numeric: tabular-nums;
}
.sic-cost-big .yr {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--setup-text-secondary);
}
.sic-cost-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--setup-text);
    margin-top: 6px;
}
.sic-cost-note {
    font-size: 0.72rem;
    color: var(--setup-text-muted);
    margin-top: 3px;
    line-height: 1.45;
}
.sic-cost hr {
    border: 0;
    border-top: 1px solid var(--setup-border);
    margin: 14px 0 12px;
}
.sic-cost-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 7px;
}
.sic-cost-line:last-of-type {
    margin-bottom: 0;
}
.sic-cost-line .k2 {
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--setup-text-secondary);
}
.sic-cost-line .v2 {
    font-family: var(--setup-font-heading);
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--setup-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sic-cost-line .v2.muted {
    color: var(--setup-text-muted);
    font-weight: 600;
}
.sic-cost-src {
    font-size: 0.66rem;
    color: var(--setup-text-muted);
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--setup-border);
}

/* Section heading - title left, actions right */
.sic-section-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--setup-font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--setup-text);
    margin: 26px 0 10px;
}
.sic-section-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Coach rows - name, title, phone, one button. No bios. */
.sic-coach {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow);
    padding: 12px 16px;
    margin-bottom: 10px;
}
.sic-coach-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    border: 2px solid var(--setup-border);
    background: #fff;
    flex: 0 0 auto;
}
.sic-coach-main {
    flex: 1 1 180px;
    min-width: 160px;
}
.sic-coach-name {
    margin: 0 0 2px 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--setup-text);
}
.sic-coach-name a,
.sic-coach-name a:link,
.sic-coach-name a:visited {
    color: var(--setup-text-secondary);
}
.sic-coach-meta {
    font-size: 0.8rem;
    color: var(--setup-text-secondary);
}
.sic-coach-meta .sep {
    margin: 0 6px;
    color: var(--setup-border);
}
.sic-coach-action {
    flex: 0 0 auto;
}

/* Membership prompt for the logged-out / non-member visitor */
.sic-promo {
    background: linear-gradient(135deg, var(--setup-primary) 0%, var(--setup-primary-light) 100%);
    border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow);
    padding: 16px 20px;
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.sic-promo p {
    margin: 0;
    color: #cfd9e3;
    font-size: 0.86rem;
    flex: 1 1 260px;
}
.sic-promo strong {
    color: #fff;
    display: block;
    font-family: var(--setup-font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    margin-bottom: 3px;
}

/* Recruiting events */
.sic-events {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.sic-event {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow);
    padding: 12px;
    text-align: center;
    font-size: 0.8rem;
}
.sic-event img {
    max-width: 100%;
    border-radius: var(--setup-radius-sm);
    margin-bottom: 8px;
}
.sic-event .nm {
    font-family: var(--setup-font-heading);
    font-weight: 700;
    color: var(--setup-text);
    display: block;
}
.sic-event span {
    display: block;
    color: var(--setup-text-secondary);
}

@media all and (max-width: 820px) {
    .sic-factrow {
        grid-template-columns: 1fr;
    }
}
@media all and (max-width: 640px) {
    .sic-hero {
        justify-content: center;
        text-align: center;
    }
    .sic-hero-side {
        text-align: center;
        width: 100%;
    }
    .sic-badges {
        justify-content: center;
    }
    .sic-coach-action {
        width: 100%;
    }
}

/* ==========================================================================
   Showcase tips - showcase_tips.aspx
   Article index, the six-step showcase timeline, and the article reader.
   ========================================================================== */
.tips-wrap {
    font-family: var(--setup-font);
    color: var(--setup-text);
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px 40px;
}
.tips-wrap h1,
.tips-wrap h2,
.tips-wrap h3 {
    font-family: var(--setup-font-heading);
}

/* Page head */
.tips-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 28px 0 20px;
    border-bottom: 1px solid var(--setup-border);
    margin-bottom: 28px;
}
.tips-head-main {
    flex: 1 1 380px;
    min-width: 260px;
}
.tips-head h1 {
    margin: 0 0 8px;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--setup-text);
}
.tips-head p {
    margin: 0;
    color: var(--setup-text-secondary);
    font-size: 1rem;
    max-width: 62ch;
}
.tips-presented {
    flex: 0 0 auto;
    text-align: right;
}
.tips-presented span {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--setup-text-muted);
    margin-bottom: 6px;
}
.tips-presented img {
    max-width: 190px;
    height: auto;
}

/* Article index */
.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}
a.tips-card,
a.tips-card:link,
a.tips-card:visited {
    display: flex;
    flex-direction: column;
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-lg);
    box-shadow: var(--setup-shadow);
    overflow: hidden;
    text-decoration: none;
    color: var(--setup-text);
    transition: transform var(--setup-transition), box-shadow var(--setup-transition);
}
a.tips-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--setup-shadow-md);
    text-decoration: none;
}
.tips-card-art {
    background: var(--setup-bg);
    border-bottom: 1px solid var(--setup-border);
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.tips-card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tips-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.tips-card-body h3 {
    margin: 0 0 6px;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--setup-text);
}
.tips-card-body p {
    margin: 0 0 12px;
    font-size: 0.86rem;
    color: var(--setup-text-secondary);
    line-height: 1.5;
    flex: 1;
}
.tips-card-more {
    font-family: var(--setup-font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--setup-accent-hover);
}
.tips-card-more i {
    font-size: 0.9rem;
    vertical-align: -2px;
}

/* Section heading */
.tips-section {
    margin-top: 44px;
}
.tips-section-head {
    margin-bottom: 18px;
}
.tips-section-head h2 {
    margin: 0 0 6px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.018em;
    color: var(--setup-text);
}
.tips-section-head p {
    margin: 0;
    color: var(--setup-text-secondary);
    font-size: 0.94rem;
    max-width: 64ch;
}

/* The six-step timeline.
   The old version absolutely positioned the rail and cleared it with a hardcoded
   432px top margin on the block below. This one is a plain grid that wraps. */
.tips-timeline {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-lg);
    box-shadow: var(--setup-shadow);
    padding: 18px;
}
.tips-rail {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    position: relative;
    margin-bottom: 20px;
}
.tips-rail::before {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: 17px;
    height: 2px;
    background: var(--setup-border);
    z-index: 0;
}
a.tips-step,
a.tips-step:link,
a.tips-step:visited {
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--setup-text-secondary);
    padding: 0 2px;
}
.tips-step .n {
    display: block;
    width: 34px;
    height: 34px;
    line-height: 32px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: var(--setup-card);
    border: 2px solid var(--setup-border);
    font-family: var(--setup-font-heading);
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--setup-text-muted);
    transition: var(--setup-transition);
}
.tips-step .t {
    display: block;
    font-family: var(--setup-font-heading);
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.25;
}
a.tips-step:hover .n {
    border-color: var(--setup-accent);
    color: var(--setup-accent-hover);
}
a.tips-step:hover .t {
    color: var(--setup-text);
}
a.tips-step.active .n {
    background: var(--setup-accent);
    border-color: var(--setup-accent);
    color: #fff;
}
a.tips-step.active .t {
    color: var(--setup-text);
    font-weight: 700;
}

/* Step detail */
.tips-stepbody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
    background: var(--setup-bg);
    border: 1px solid var(--setup-border-light);
    border-radius: var(--setup-radius);
    padding: 22px;
}
.tips-stepbody h3 {
    margin: 0 0 10px;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--setup-text);
}
.tips-stepbody p {
    margin: 0 0 10px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--setup-text-secondary);
}
.tips-stepbody p:last-child {
    margin-bottom: 0;
}
.tips-stepbody img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--setup-radius);
}
.tips-step-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--setup-accent-hover);
    margin-bottom: 6px;
    display: block;
}

/* Article reader */
.tips-article {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-lg);
    box-shadow: var(--setup-shadow);
    padding: 30px 34px 34px;
}
.tips-article h1 {
    margin: 0 0 4px;
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--setup-text);
}
.tips-article h2 {
    margin: 26px 0 8px;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.012em;
    color: var(--setup-text);
}
.tips-article h3 {
    margin: 20px 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--setup-text);
}
.tips-article p {
    margin: 0 0 14px;
    font-size: 0.98rem;
    line-height: 1.68;
    color: var(--setup-text);
    max-width: 68ch;
}
.tips-article ul {
    margin: 0 0 16px;
    padding-left: 22px;
    max-width: 68ch;
}
.tips-article li {
    font-size: 0.96rem;
    line-height: 1.6;
    margin-bottom: 8px;
    color: var(--setup-text);
}
.tips-article strong {
    font-weight: 700;
}
.tips-lede {
    font-size: 1.06rem !important;
    line-height: 1.6 !important;
    color: var(--setup-text-secondary) !important;
    margin-bottom: 20px !important;
}
.tips-article-art {
    float: right;
    width: 260px;
    max-width: 40%;
    margin: 0 0 16px 22px;
    border-radius: var(--setup-radius);
    border: 1px solid var(--setup-border);
}
.tips-back {
    display: inline-block;
    font-family: var(--setup-font-heading);
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--setup-text-secondary);
    text-decoration: none;
    margin-bottom: 14px;
}
.tips-back:hover {
    color: var(--setup-text);
}

/* Pull quote / callout inside an article */
.tips-callout {
    border-left: 3px solid var(--setup-accent);
    background: rgba(92, 184, 48, 0.07);
    border-radius: var(--setup-radius-sm);
    padding: 14px 18px;
    margin: 0 0 18px;
    max-width: 68ch;
}
.tips-callout p:last-child {
    margin-bottom: 0;
}
.tips-note {
    font-size: 0.8rem;
    color: var(--setup-text-muted);
    font-style: italic;
    line-height: 1.55;
    border-top: 1px dashed var(--setup-border);
    padding-top: 12px;
    margin-top: 22px;
    max-width: 72ch;
}

/* Cost comparison table (the membership article) */
.tips-compare {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 0 8px;
    font-size: 0.9rem;
}
.tips-compare th,
.tips-compare td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--setup-border-light);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.tips-compare th:first-child,
.tips-compare td:first-child {
    text-align: left;
    color: var(--setup-text-secondary);
    font-weight: 400;
}
.tips-compare thead th {
    font-family: var(--setup-font-heading);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--setup-text-muted);
    border-bottom: 1px solid var(--setup-border);
}
.tips-compare thead th.win {
    color: var(--setup-accent-hover);
}
.tips-compare td {
    font-weight: 600;
    color: var(--setup-text);
}
.tips-compare tr.total td {
    background: var(--setup-bg);
    border-top: 1px solid var(--setup-border);
    border-bottom: 1px solid var(--setup-border);
    font-family: var(--setup-font-heading);
    font-weight: 800;
}
.tips-compare td.win {
    color: var(--setup-accent-hover);
}
.tips-compare-wrap {
    overflow-x: auto;
    margin-bottom: 16px;
}

/* Sidebar */
.tips-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}
.tips-side {
    position: sticky;
    top: 16px;
}
a.tips-promo,
a.tips-promo:link,
a.tips-promo:visited {
    display: block;
    background: linear-gradient(135deg, var(--setup-primary) 0%, var(--setup-primary-light) 100%);
    border-radius: var(--setup-radius-lg);
    box-shadow: var(--setup-shadow);
    padding: 18px 20px;
    margin-bottom: 16px;
    text-decoration: none;
    transition: var(--setup-transition);
}
a.tips-promo:hover {
    box-shadow: var(--setup-shadow-md);
    transform: translateY(-1px);
    text-decoration: none;
}
.tips-promo h2 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
}
.tips-promo p {
    margin: 0;
    font-size: 0.84rem;
    color: #cfd9e3;
    line-height: 1.5;
}
.tips-signup {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-lg);
    box-shadow: var(--setup-shadow);
    padding: 18px 20px 20px;
}
.tips-signup h2 {
    margin: 0 0 4px;
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--setup-text);
}
.tips-signup .sub {
    margin: 0 0 14px;
    font-size: 0.82rem;
    color: var(--setup-text-secondary);
}
.tips-signup .form-control {
    margin-bottom: 9px;
}
.tips-signup input[type="text"],
.tips-signup input[type="password"],
.tips-signup select {
    font-family: var(--setup-font);
    font-size: 0.88rem;
    padding: 9px 12px;
    width: 100%;
    border: 1.5px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    color: var(--setup-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tips-signup input[type="text"] {
    background: #fff;
}
.tips-signup input[type="text"]:focus,
.tips-signup select:focus {
    outline: none;
    border-color: var(--setup-accent);
    box-shadow: 0 0 0 3px var(--setup-accent-glow);
}
.tips-signup input[type="text"][disabled] {
    background: var(--setup-bg);
    color: var(--setup-text-secondary);
}
.tips-signup .btns,
.tips-signup input[type="submit"] {
    width: 100%;
    margin-top: 4px;
    background: var(--setup-accent);
    color: #fff;
    border: 0;
    border-radius: var(--setup-radius-sm);
    font-family: var(--setup-font-heading);
    font-weight: 700;
    font-size: 0.92rem;
    padding: 11px 18px;
    cursor: pointer;
    transition: var(--setup-transition);
}
.tips-signup input[type="submit"]:hover {
    background: var(--setup-accent-hover);
}
.tips-side-link {
    display: block;
    text-align: center;
    margin-top: 14px;
    font-size: 0.85rem;
}

@media all and (max-width: 900px) {
    .tips-layout {
        grid-template-columns: 1fr;
    }
    .tips-side {
        position: static;
    }
    .tips-stepbody {
        grid-template-columns: 1fr;
    }
    .tips-rail {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 16px;
    }
    .tips-rail::before {
        display: none;
    }
}
@media all and (max-width: 560px) {
    .tips-rail {
        grid-template-columns: repeat(2, 1fr);
    }
    .tips-article {
        padding: 22px 18px 24px;
    }
    .tips-article-art {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 16px;
    }
    .tips-presented {
        text-align: left;
    }
}

/* =====================================================================
   Online Check-in Report (TTCheckInReport.aspx) - .olc-report
   A print-first official document: letter size, no site chrome. The same
   markup is stored verbatim when a report is issued (olcCheckInReport),
   so everything it needs is here or inline in the page.
   ===================================================================== */
.olc-report-body {
    margin: 0;
    background: var(--setup-border-light);
    font-family: var(--setup-font);
    color: var(--setup-text);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    page: olcreport; /* the named @page below - never a global @page */
}
.olc-report-toolbar {
    max-width: 8.5in;
    box-sizing: border-box;
    margin: 20px auto 0 auto;
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow);
    font-size: 0.86rem;
}
.olc-report-toolbar .spacer { flex: 1; }
.olc-report-toolbar a { color: var(--setup-text-secondary); text-decoration: none; }
.olc-report-toolbar a:hover { color: var(--setup-text); }
.olc-report-toolbar .msg { width: 100%; font-weight: 600; color: var(--setup-danger); }
.olc-report-toolbar .msg:empty { display: none; }
.olc-report-toolbar .hint { width: 100%; color: var(--setup-text-secondary); font-size: 0.8rem; }
.olc-report-issued {
    max-width: 8.5in;
    box-sizing: border-box;
    margin: 10px auto 0 auto;
    font-size: 0.8rem;
    color: var(--setup-text-secondary);
}
.olc-report-issued table { width: 100%; border-collapse: collapse; background: var(--setup-card); border: 1px solid var(--setup-border); }
.olc-report-issued th, .olc-report-issued td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--setup-border-light); }
.olc-report-issued th { font-family: var(--setup-font-heading); font-weight: 600; color: var(--setup-text); }

.olc-report {
    max-width: 8.5in;
    box-sizing: border-box;
    margin: 16px auto 40px auto;
    padding: 0.6in 0.65in;
    background: var(--setup-card);
    box-shadow: var(--setup-shadow-lg);
    font-size: 9.5pt;
    line-height: 1.45;
}
.olc-report h1, .olc-report h2, .olc-report h3 { font-family: var(--setup-font-heading); color: var(--setup-primary); margin: 0; }
.olc-report h2 {
    font-size: 11pt;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 22px 0 8px 0;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--setup-primary);
    break-after: avoid;
    page-break-after: avoid;
}
.olc-report .sub { color: var(--setup-text-secondary); font-size: 8.5pt; margin: -2px 0 8px 0; }

/* Masthead */
.olc-report-mast { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 4px solid var(--setup-primary); }
.olc-report-mast .logo { height: 34px; width: auto; display: block; }
.olc-report-mast .logo .mark { fill: var(--setup-primary); }
.olc-report-mast .logo .leaf { fill: #87C556; } /* the wordmark's own green - not a token */
.olc-report-mast .assoc { height: 46px; width: auto; }
.olc-report-mast .right { text-align: right; font-size: 8pt; color: var(--setup-text-secondary); }
.olc-report-title { margin-top: 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.olc-report-title h1 { font-size: 20pt; font-weight: 800; line-height: 1.1; }
.olc-report-title .event { font-family: var(--setup-font-heading); font-size: 13pt; font-weight: 600; color: var(--setup-text); margin-top: 4px; }
.olc-report-seal {
    flex: none;
    border: 2px solid var(--setup-primary);
    border-radius: var(--setup-radius-sm);
    padding: 7px 12px;
    text-align: center;
    font-family: var(--setup-font-heading);
}
.olc-report-seal .k { font-size: 7pt; letter-spacing: 0.1em; text-transform: uppercase; color: var(--setup-text-secondary); }
.olc-report-seal .v { font-size: 10.5pt; font-weight: 700; color: var(--setup-primary); white-space: nowrap; }
.olc-report-preview {
    margin-top: 14px;
    padding: 8px 12px;
    border: 2px dashed var(--setup-warning);
    background: var(--setup-warning-light);
    color: #9a3412;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.04em;
}

/* Key-value facts */
.olc-report-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-top: 4px; }
.olc-report-facts dl { margin: 0; display: grid; grid-template-columns: 1.35in 1fr; row-gap: 3px; }
.olc-report-facts dt { color: var(--setup-text-secondary); font-size: 8.5pt; }
.olc-report-facts dd { margin: 0; font-weight: 600; }

/* Summary tiles */
.olc-report-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 4px; }
.olc-report-tile { border: 1px solid var(--setup-border); border-radius: var(--setup-radius-sm); padding: 8px 10px; border-top-width: 4px; }
.olc-report-tile .n { font-family: var(--setup-font-heading); font-size: 19pt; font-weight: 800; line-height: 1.1; color: var(--setup-primary); }
.olc-report-tile .l { font-size: 8pt; color: var(--setup-text-secondary); }
.olc-report-tile.t-total { border-top-color: var(--setup-primary); }
.olc-report-tile.t-ok { border-top-color: var(--setup-accent); }
.olc-report-tile.t-ovr { border-top-color: var(--setup-blue); }
.olc-report-tile.t-site { border-top-color: var(--setup-text-muted); }
.olc-report-tile.t-open { border-top-color: var(--setup-danger); }

/* Tables */
.olc-report table.rt { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
.olc-report table.rt th {
    text-align: left;
    font-family: var(--setup-font-heading);
    font-weight: 600;
    font-size: 7.5pt;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--setup-primary);
    padding: 5px 7px;
}
.olc-report table.rt td { padding: 4px 7px; border-bottom: 1px solid var(--setup-border); vertical-align: top; }
.olc-report table.rt tbody tr:nth-child(even) td { background: #f8fafc; }
.olc-report table.rt td.num, .olc-report table.rt th.num { text-align: right; font-variant-numeric: tabular-nums; }
.olc-report table.rt td.c, .olc-report table.rt th.c { text-align: center; }
.olc-report table.rt thead { display: table-header-group; }
.olc-report table.rt tr { break-inside: avoid; page-break-inside: avoid; }
.olc-report table.rt tr.group td { background: var(--setup-border-light); font-family: var(--setup-font-heading); font-weight: 700; color: var(--setup-primary); }
.olc-report table.rt tr.total td { font-weight: 700; border-top: 2px solid var(--setup-primary); background: #fff; }
.olc-report .muted { color: var(--setup-text-muted); }
.olc-report .small { font-size: 7.5pt; color: var(--setup-text-secondary); }

/* Status chips */
.olc-st { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 7.5pt; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.olc-st.ok { background: var(--setup-success-light); color: #2f6b12; border-color: #b9dea5; }
.olc-st.ovr { background: var(--setup-blue-light); color: #1d4ed8; border-color: #bfd6fb; }
.olc-st.site { background: var(--setup-border-light); color: var(--setup-text-secondary); border-color: var(--setup-border); }
.olc-st.open { background: var(--setup-danger-light); color: #991b1b; border-color: #f7b4b4; }

/* Team x task matrix */
.olc-report table.mx th.task { writing-mode: vertical-rl; transform: rotate(180deg); white-space: normal; overflow-wrap: break-word; height: 1.6in; line-height: 1.15; vertical-align: bottom; text-align: left; padding: 6px 3px; min-width: 0.3in; }
/* v2 (issued reports store their HTML, so th.task above keeps rendering older ones as issued):
   rotate the inner span, not the cell - a transformed cell drops its border and can't center its contents. */
.olc-report table.mx th.task.v2 { writing-mode: horizontal-tb; transform: none; text-align: center; border-left: 1px solid #fff; }
.olc-report table.mx th.task.v2 span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: normal; overflow-wrap: break-word; max-height: 1.5in; line-height: 1.15; text-align: left; }
.olc-report table.mx td.m { text-align: center; padding: 3px 2px; font-weight: 700; font-size: 9pt; }
.olc-report .mk-ok { color: var(--setup-accent-hover); }
.olc-report .mk-ovr { color: var(--setup-blue); }
.olc-report .mk-ex { color: var(--setup-text-secondary); }
.olc-report .mk-sig { color: #7c3aed; }
.olc-report .mk-open { color: var(--setup-danger); }
.olc-report .mk-site { color: var(--setup-text-muted); }
.olc-report .mk-na { color: var(--setup-text-muted); font-weight: 400; }
.olc-report .legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 8pt; color: var(--setup-text-secondary); margin: 6px 0 8px 0; }
.olc-report .legend b { font-size: 9.5pt; margin-right: 3px; }

/* Certification */
.olc-report-cert { border: 1.5px solid var(--setup-primary); border-radius: var(--setup-radius-sm); padding: 14px 18px; break-inside: avoid; page-break-inside: avoid; }
.olc-report-cert h3 { font-size: 10pt; margin-top: 14px; }
.olc-report-cert ol { margin: 8px 0 0 0; padding-left: 20px; }
.olc-report-cert li { margin-bottom: 5px; }
.olc-report-sign { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 22px; margin-top: 34px; }
.olc-report-sign div { border-top: 1px solid var(--setup-text); padding-top: 4px; font-size: 8pt; color: var(--setup-text-secondary); }
.olc-report-foot { margin-top: 26px; padding-top: 8px; border-top: 1px solid var(--setup-border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 7.5pt; color: var(--setup-text-secondary); }

@media print {
    @page olcreport { size: letter; margin: 0.5in 0.5in 0.6in 0.5in; }
    .olc-report-body { background: #fff; }
    .olc-report-toolbar, .olc-report-issued { display: none !important; }
    .olc-report { max-width: none; margin: 0; padding: 0; box-shadow: none; }
    .olc-report-break { break-before: page; page-break-before: always; }
}
@media screen and (max-width: 700px) {
    .olc-report { padding: 20px 16px; }
    .olc-report-facts, .olc-report-sign { grid-template-columns: 1fr; }
    .olc-report-tiles { grid-template-columns: repeat(2, 1fr); }
    .olc-report-title { flex-direction: column; align-items: flex-start; }
    .olc-report-mx-wrap { overflow-x: auto; }
}

/* ---------- Legal Documents (privacy.aspx, terms.aspx, cookiepolicy.aspx) ----------
   Long-form policy text on a white card so it reads as a document instead of
   floating on the master page's gradient.
   Markup: .legal-wrap > .legal-card > .legal-card-head (h1, .legal-badge, .legal-lede)
                                     + .legal-card-body (h2/h3/p/ul/.legal-table-scroll) */
.legal-wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 32px 16px 56px;
    font-family: var(--setup-font);
    color: var(--setup-text);
    line-height: 1.7;
    font-size: 0.92rem;
    -webkit-font-smoothing: antialiased;
}
.legal-card {
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-lg);
    box-shadow: var(--setup-shadow-lg);
    overflow: hidden;
}
.legal-card-head {
    padding: 36px 48px 28px;
    border-top: 4px solid var(--setup-accent);
    border-bottom: 1px solid var(--setup-border-light);
    background: linear-gradient(180deg, var(--setup-bg) 0%, var(--setup-card) 100%);
}
.legal-card-body {
    padding: 28px 48px 44px;
}
.legal-wrap h1 {
    font-family: var(--setup-font-heading);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--setup-primary);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 10px;
}
.legal-wrap h2 {
    font-family: var(--setup-font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--setup-primary);
    margin: 2.25rem 0 0.6rem;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--setup-border);
}
.legal-wrap h3 {
    font-family: var(--setup-font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--setup-text);
    margin: 1.4rem 0 0.4rem;
}
.legal-card-body > h2:first-child { margin-top: 0; }
.legal-wrap p { margin: 0 0 0.9rem; color: #334155; }
.legal-wrap a { color: var(--setup-blue); text-decoration: none; }
.legal-wrap a:hover { text-decoration: underline; }
.legal-wrap a.btn { color: inherit; text-decoration: none; }
.legal-wrap ul { padding-left: 1.25rem; margin: 0 0 0.9rem; }
.legal-wrap li { margin-bottom: 0.45rem; color: #334155; }
.legal-wrap li::marker { color: var(--setup-accent); }
.legal-wrap li strong { color: var(--setup-text); }
.legal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--setup-blue-light);
    color: var(--setup-blue);
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: 3px 12px;
    font-family: var(--setup-font);
    font-size: 0.75rem;
    font-weight: 600;
}
.legal-lede { margin: 14px 0 0 !important; color: var(--setup-text-secondary) !important; font-size: 0.95rem; }
.legal-muted { color: var(--setup-text-secondary); font-size: 0.875rem; }
.legal-notice {
    background: var(--setup-warning-light);
    border-left: 3px solid var(--setup-warning);
    padding: 12px 16px;
    border-radius: 0 var(--setup-radius-sm) var(--setup-radius-sm) 0;
    margin: 0 0 1rem;
    font-size: 0.875rem;
}
.legal-contact {
    background: var(--setup-input-bg);
    border: 1px solid var(--setup-border-light);
    border-radius: var(--setup-radius-sm);
    padding: 16px 20px;
    margin-top: 1rem;
}
.legal-table-scroll { overflow-x: auto; margin: 12px 0 1rem; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.legal-table th, .legal-table td { border: 1px solid var(--setup-border); padding: 10px 12px; vertical-align: top; text-align: left; }
.legal-table th { background: var(--setup-input-bg); font-weight: 600; color: var(--setup-primary); font-family: var(--setup-font-heading); }
.legal-table td { color: #334155; }
@media (max-width: 640px) {
    .legal-wrap { padding: 16px 12px 36px; }
    .legal-card-head { padding: 24px 20px 20px; }
    .legal-card-body { padding: 20px 20px 28px; }
    .legal-wrap h1 { font-size: 1.5rem; }
    .legal-table thead { display: none; }
    .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
    .legal-table tr { border: 1px solid var(--setup-border); border-radius: var(--setup-radius-sm); margin-bottom: 12px; overflow: hidden; }
    .legal-table td { border: none; border-bottom: 1px solid var(--setup-border-light); padding: 8px 12px; }
    .legal-table td:last-child { border-bottom: none; }
    .legal-table td:first-child { background: var(--setup-input-bg); font-family: var(--setup-font-heading); font-weight: 600; color: var(--setup-primary); }
    .legal-table td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--setup-text-secondary); margin-bottom: 2px; }
}

/* ============================================================
   CEO DASHBOARDS - admin/ceoRole.aspx, admin/ceo.aspx (.mgmt-*)
   Exception-first: Red and Yellow rows, tiles and badges are
   loud; Green is deliberately quiet. Statuses are computed in
   App_Code/MgmtMetrics.vb - these classes only paint them.
   Never put a background on a select here (it wipes the chevron).
   ============================================================ */
.mgmt-wrapper {
    font-family: var(--setup-font);
    color: var(--setup-text);
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* ---------- Header ---------- */
.mgmt-header {
    background: var(--setup-primary);
    color: #fff;
    border-radius: var(--setup-radius-lg);
    padding: 22px 26px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px 32px;
    align-items: flex-start;
}
.mgmt-header h1 {
    font-family: var(--setup-font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0;
    color: #fff;
}
.mgmt-header-main { flex: 1 1 440px; min-width: 0; }
.mgmt-header-side { flex: 0 1 380px; font-size: 0.84rem; color: rgba(255,255,255,0.8); }
.mgmt-header-side strong { display: block; color: #fff; font-family: var(--setup-font-heading); font-size: 0.95rem; font-weight: 600; }
.mgmt-lane { color: rgba(255,255,255,0.8); font-size: 0.92rem; margin-top: 3px; }
.mgmt-kicker {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.6);
    margin-top: 12px;
}
.mgmt-kicker:first-child { margin-top: 0; }
.mgmt-owns { font-size: 0.84rem; line-height: 1.5; color: rgba(255,255,255,0.88); margin-top: 2px; }
.mgmt-unassigned {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--setup-warning);
    color: #fff;
}

/* ---------- Status strip ---------- */
.mgmt-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.mgmt-tile {
    flex: 1 1 200px;
    background: var(--setup-card);
    border: 1px solid var(--setup-border);
    border-top: 3px solid var(--setup-border);
    border-radius: var(--setup-radius);
    box-shadow: var(--setup-shadow);
    padding: 14px 16px;
}
.mgmt-tile.is-red { border-top-color: var(--setup-danger); background: var(--setup-danger-light); }
.mgmt-tile.is-yellow { border-top-color: var(--setup-warning); background: var(--setup-warning-light); }
.mgmt-tile.is-green { border-top-color: var(--setup-accent); }
.mgmt-tile .lbl {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--setup-text-secondary);
}
.mgmt-tile .val { font-family: var(--setup-font-heading); font-weight: 700; font-size: 1.45rem; line-height: 1.2; margin-top: 4px; }
.mgmt-tile.is-red .val { color: var(--setup-danger); }
.mgmt-tile .sub { font-size: 0.78rem; color: var(--setup-text-secondary); margin-top: 3px; }

/* ---------- Badges ---------- */
.mgmt-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.5;
}
.mgmt-badge.is-red { background: var(--setup-danger); color: #fff; }
.mgmt-badge.is-yellow { background: var(--setup-warning); color: #fff; }
.mgmt-badge.is-green { background: transparent; color: var(--setup-accent-hover); border-color: var(--setup-success-light); font-weight: 600; }
.mgmt-badge.is-blue { background: var(--setup-blue-light); color: var(--setup-blue); font-weight: 600; }
.mgmt-badge.is-na,
.mgmt-badge.is-muted { background: var(--setup-border-light); color: var(--setup-text-secondary); font-weight: 600; }
.mgmt-badge + .mgmt-badge { margin-left: 4px; }

/* ---------- Tables ---------- */
.mgmt-table-wrap { overflow-x: auto; }
.mgmt-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.84rem; }
.mgmt-table th {
    background: var(--setup-input-bg);
    color: var(--setup-text-secondary);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 9px 12px;
    border-bottom: 2px solid var(--setup-border);
    white-space: nowrap;
    text-align: left;
}
.mgmt-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--setup-border-light);
    vertical-align: top;
    color: var(--setup-text);
}
.mgmt-table tr.is-red > td { background: var(--setup-danger-light); }
.mgmt-table tr.is-red > td:first-child { box-shadow: inset 3px 0 0 var(--setup-danger); }
.mgmt-table tr.is-yellow > td { background: var(--setup-warning-light); }
.mgmt-table tr.is-yellow > td:first-child { box-shadow: inset 3px 0 0 var(--setup-warning); }
.mgmt-table tr.mgmt-mainrow > td { border-bottom: none; }
.mgmt-table tr.mgmt-subrow > td { padding-top: 0; }
.mgmt-num { text-align: right; white-space: nowrap; }
.mgmt-nowrap { white-space: nowrap; }
.mgmt-muted { color: var(--setup-text-muted); font-size: 0.78rem; line-height: 1.4; }
.mgmt-detail { display: block; color: var(--setup-text-muted); font-size: 0.76rem; margin-top: 2px; }
.mgmt-empty { color: var(--setup-text-muted); font-style: italic; font-size: 0.85rem; padding: 6px 2px; margin: 0; }
.mgmt-hint { color: var(--setup-text-secondary); font-size: 0.8rem; margin: 0 0 12px; }

/* ---------- Messages ---------- */
.mgmt-msg {
    display: block;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: var(--setup-radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
}
.mgmt-msg.is-error { background: var(--setup-danger-light); color: var(--setup-danger); border-left: 3px solid var(--setup-danger); }
.mgmt-msg.is-ok { background: var(--setup-success-light); color: var(--setup-accent-hover); border-left: 3px solid var(--setup-accent); }

/* ---------- Forms ---------- */
.mgmt-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: flex-end;
    padding: 14px 16px;
    margin-top: 14px;
    background: var(--setup-input-bg);
    border: 1px dashed var(--setup-border);
    border-radius: var(--setup-radius);
}
.mgmt-form-title {
    flex: 1 1 100%;
    font-family: var(--setup-font-heading);
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--setup-text);
}
.mgmt-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; min-width: 0; }
.mgmt-field.is-wide { flex: 3 1 280px; }
.mgmt-field.is-narrow { flex: 0 1 140px; }
.mgmt-field label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--setup-text-secondary);
    margin: 0;
}
.mgmt-wrapper input[type="text"],
.mgmt-wrapper textarea,
.mgmt-wrapper select {
    font-family: var(--setup-font);
    font-size: 0.84rem;
    border: 1.5px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    color: var(--setup-text);
    padding: 7px 10px;
    height: auto;
    max-width: 100%;
}
/* Room for the native arrow on the BS4 master - see financialDashboard.aspx. */
.mgmt-wrapper select { padding-right: 32px; }
/* White fill on text inputs only - never on a select. */
.mgmt-wrapper input[type="text"],
.mgmt-wrapper textarea { background: #fff; }
.mgmt-wrapper input[type="text"]:focus,
.mgmt-wrapper textarea:focus,
.mgmt-wrapper select:focus {
    outline: none;
    border-color: var(--setup-accent);
    box-shadow: 0 0 0 3px var(--setup-accent-glow);
}
.mgmt-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mgmt-inline input[type="text"] { width: 118px; }
.mgmt-inline input[type="text"].is-wide { width: 220px; }
.mgmt-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mgmt-wrapper input[type="submit"][disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ---------- Inline edit forms (details / summary) ---------- */
.mgmt-details { display: inline-block; vertical-align: top; margin: 2px 14px 0 0; }
.mgmt-details[open] { display: block; margin-right: 0; }
.mgmt-details > summary {
    cursor: pointer;
    list-style: none;
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--setup-blue);
}
.mgmt-details > summary::-webkit-details-marker { display: none; }
.mgmt-details > summary .mdi { margin-right: 3px; }
.mgmt-details[open] > summary { color: var(--setup-text); }
.mgmt-details > .mgmt-form { margin-top: 8px; }

/* ---------- Say/do trend (CSS bars, no chart library) ---------- */
.mgmt-trend { display: flex; gap: 10px; align-items: flex-end; height: 160px; padding: 6px 4px 0; }
.mgmt-trend-col { flex: 1 1 0; min-width: 48px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.mgmt-trend-bar { width: 70%; max-width: 46px; min-height: 3px; border-radius: 6px 6px 0 0; background: var(--setup-border); }
.mgmt-trend-bar.is-green { background: var(--setup-accent); }
.mgmt-trend-bar.is-yellow { background: var(--setup-warning); }
.mgmt-trend-bar.is-red { background: var(--setup-danger); }
.mgmt-trend-bar.is-open { opacity: 0.45; }
.mgmt-trend-pct { font-size: 0.74rem; font-weight: 700; margin-bottom: 3px; white-space: nowrap; }
.mgmt-trend-wk { font-size: 0.7rem; color: var(--setup-text-secondary); margin-top: 5px; white-space: nowrap; text-align: center; }

/* ---------- CEO dashboards: metric sub-blocks and caveat lines (phase 7) ---------- */
.mgmt-table tr.mgmt-group > td {
    background: var(--setup-border-light);
    border-top: 1px solid var(--setup-border);
    border-bottom: 1px solid var(--setup-border);
    font-family: var(--setup-font-heading);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--setup-text);
    padding: 8px 12px;
}
.mgmt-group-note {
    margin-left: 10px;
    font-family: var(--setup-font);
    font-weight: 400;
    font-size: 0.76rem;
    color: var(--setup-text-secondary);
}
.mgmt-detail.is-prominent {
    color: var(--setup-text-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
    white-space: normal;
    max-width: 60ch;
}

/* ---------- CEO overview (admin/ceo.aspx, phase 8): .mgmt-ov-* ---------- */
.mgmt-ov-snapshot { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0 0 16px; }
.mgmt-ov-snapshot .mgmt-msg { flex: 1 1 100%; margin: 4px 0 0; }
.mgmt-ov-help { flex: 1 1 100%; max-width: 90ch; }
.mgmt-ov-company-detail { margin: -8px 0 20px; padding: 0 2px; }
.mgmt-ov-company-detail .mgmt-detail { margin-top: 3px; }
.mgmt-ov-company-detail .mgmt-detail.is-prominent { max-width: 110ch; }
.mgmt-ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.mgmt-ov-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--setup-card);
    border: 1px solid var(--setup-border-light);
    border-top: 3px solid var(--setup-border);
    border-radius: var(--setup-radius);
    padding: 14px 16px;
    min-width: 0;
}
/* Exception-first: Red and Yellow cards are loud; Green stays quiet. */
.mgmt-ov-card.is-red { border-color: var(--setup-danger); border-top-width: 4px; background: var(--setup-danger-light); box-shadow: var(--setup-shadow); }
.mgmt-ov-card.is-yellow { border-color: var(--setup-warning); border-top-width: 4px; background: var(--setup-warning-light); box-shadow: var(--setup-shadow); }
.mgmt-ov-card.is-green { border-top-color: var(--setup-success-light); }
.mgmt-ov-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mgmt-ov-card-head h3 { font-family: var(--setup-font-heading); font-weight: 700; font-size: 1.02rem; margin: 0; }
.mgmt-ov-card-head h3 a { color: var(--setup-text); text-decoration: none; }
.mgmt-ov-card-head h3 a:hover { color: var(--setup-blue); text-decoration: underline; }
.mgmt-ov-holder { font-size: 0.76rem; color: var(--setup-text-secondary); margin-top: 2px; }
.mgmt-ov-note { font-size: 0.76rem; color: var(--setup-text-muted); line-height: 1.4; }
.mgmt-ov-facts { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.mgmt-ov-facts th,
.mgmt-ov-facts td { padding: 5px 6px; border-top: 1px solid var(--setup-border-light); vertical-align: top; text-align: left; }
.mgmt-ov-facts th { width: 42%; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--setup-text-secondary); white-space: nowrap; }
.mgmt-ov-facts tr.is-red > td { color: var(--setup-danger); font-weight: 700; }
.mgmt-ov-facts tr.is-yellow > td { color: var(--setup-warning); font-weight: 700; }
.mgmt-ov-carried { font-size: 0.8rem; }
.mgmt-ov-carried-lbl { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--setup-text-secondary); margin-bottom: 2px; }
.mgmt-ov-carried ul { margin: 0; padding-left: 18px; }
.mgmt-ov-carried.is-red li { color: var(--setup-danger); font-weight: 600; }
.mgmt-ov-link { margin-top: auto; font-size: 0.78rem; font-weight: 600; color: var(--setup-blue); }

/* ---------- Quarterly scorecard (admin/ceoRole.aspx, phase 9): .mgmt-sc-* ---------- */
.mgmt-sc-toolbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 14px; }
.mgmt-sc-toolbar label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--setup-text-secondary);
    margin: 0;
}
.mgmt-sc-toolbar select { min-width: 260px; width: auto; }
.mgmt-msg.mgmt-sc-warn { background: var(--setup-warning-light); color: var(--setup-text); border-left: 3px solid var(--setup-warning); }
.mgmt-sc-heading {
    font-family: var(--setup-font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--setup-text);
    margin: 22px 0 8px;
}
.mgmt-table tr.mgmt-sc-subtotal > td { background: var(--setup-border-light); font-weight: 600; }
.mgmt-table tr.mgmt-sc-total > td {
    background: var(--setup-input-bg);
    border-top: 2px solid var(--setup-border);
    font-family: var(--setup-font-heading);
    font-weight: 700;
}
.mgmt-table tr.mgmt-sc-nodata > td { color: var(--setup-text-muted); }
.mgmt-sc-excluded { font-style: italic; color: var(--setup-text-muted); }
.mgmt-sc-toolbar select.mgmt-sc-year { min-width: 140px; }
/* A voided gate event: kept on the list, struck through, never counted. */
.mgmt-table tr.mgmt-sc-voided > td { color: var(--setup-text-muted); }
.mgmt-table tr.mgmt-sc-voided > td.mgmt-sc-strike { text-decoration: line-through; }

/* ============================================================
   Road to Game Day (rgd-) - TTRoadToGameDay.aspx
   docs/projects/road-to-game-day.md. Semantic levels:
   urgent = danger, review = warning, fyi = blue, ok = success,
   marked OK = the purple the dashboard already uses (rgd tokens).
   ============================================================ */
.rgd {
    --rgd-acked: #7c3aed;
    --rgd-acked-light: #ede9fe;
    --rgd-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* Text on status washes and on white (WCAG AA >= 4.5:1). The --setup-* signal
       colors stay for fills, dots and borders, where they are not read as text. */
    --rgd-ink-urgent: #b91c1c;
    --rgd-ink-review: #9a3412;
    --rgd-ink-fyi: #1d4ed8;
    --rgd-ink-ok: #2f6b17;
    --rgd-ink-acked: #6d28d9;
    --rgd-label: 600 0.75rem/1.3 var(--setup-font);
    font-family: var(--setup-font);
    color: var(--setup-text);
    display: grid;
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
    padding-bottom: 40px;
}
.rgd [hidden] { display: none !important; }
.rgd h1, .rgd h2, .rgd h3, .rgd h4 { font-family: var(--setup-font-heading); margin: 0; line-height: 1.2; }
.rgd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rgd-postback { display: none; }
.rgd-hidden-btn { display: none; }

/* header */
.rgd-crumb { font-size: 0.85rem; color: var(--setup-text-secondary); }
.rgd-crumb a { color: var(--rgd-ink-ok); text-decoration: underline; text-underline-offset: 2px; }
.rgd-crumb-sep { color: var(--setup-text-muted); margin: 0 4px; }
.rgd-evhead { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; }
.rgd-evname { font-size: 1.75rem; font-weight: 700; color: var(--setup-primary); }
.rgd-evsub { color: var(--setup-text-secondary); font-size: 0.9rem; margin-top: 4px; }

/* cards */
.rgd-card { background: var(--setup-card); border: 1px solid var(--setup-border); border-radius: var(--setup-radius); box-shadow: var(--setup-shadow); }
.rgd-gp { padding: 18px; display: grid; gap: 16px; }
.rgd-gp-head { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.rgd-gp-title { font-size: 1.2rem; font-weight: 600; color: var(--setup-primary); }
.rgd-sum { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }

/* pills */
.rgd-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; line-height: 1.5; }
.rgd-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rgd-p-count { background: var(--setup-border-light); color: var(--setup-primary); }
.rgd-p-urgent { background: var(--setup-danger-light); color: var(--rgd-ink-urgent); }
.rgd-p-review { background: var(--setup-warning-light); color: var(--rgd-ink-review); }
.rgd-p-fyi { background: var(--setup-blue-light); color: var(--rgd-ink-fyi); }
.rgd-p-ok { background: var(--setup-success-light); color: var(--rgd-ink-ok); }
.rgd-p-acked { background: var(--rgd-acked-light); color: var(--rgd-ink-acked); }
.rgd-p-notyet { background: var(--setup-border-light); color: var(--setup-text-secondary); }
.rgd-p-error { background: var(--setup-border-light); color: var(--setup-text); border: 1px dashed var(--setup-text-muted); }

/* banners */
.rgd-banner { padding: 11px 14px; border-radius: var(--setup-radius-sm); background: var(--setup-border-light); color: var(--setup-text-secondary); font-size: 0.9rem; }
.rgd-banner a { color: var(--rgd-ink-ok); font-weight: 600; text-decoration: underline; }
.rgd-banner-warn { background: var(--setup-warning-light); border: 1px solid var(--setup-warning); color: var(--setup-text); }
.rgd-banner-err { background: var(--setup-danger-light); border: 1px solid var(--setup-danger); color: var(--setup-text); }

/* six-phase strip */
.rgd-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.rgd-step-btn { width: 100%; height: 100%; text-align: left; border: 1px solid var(--setup-border); background: var(--setup-input-bg); border-radius: var(--setup-radius-sm); padding: 10px 11px 11px; cursor: pointer; display: grid; gap: 3px; align-content: start; color: var(--setup-text); font: inherit; transition: border-color var(--setup-transition), box-shadow var(--setup-transition); }
.rgd-step-btn:hover { border-color: var(--setup-text-muted); }
.rgd-step-btn:focus-visible { outline: 2px solid var(--setup-accent); outline-offset: 2px; }
.rgd-step-n { font: var(--rgd-label); color: var(--setup-text-secondary); display: flex; align-items: center; gap: 6px; }
.rgd-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--setup-text-muted); flex: none; }
.rgd-step-nm { font-family: var(--setup-font-heading); font-weight: 600; font-size: 0.95rem; }
.rgd-step-dt { font-size: 0.75rem; color: var(--setup-text-secondary); }
.rgd-step-st { font-size: 0.75rem; font-weight: 600; margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; }
.rgd-step-done .rgd-dot { background: var(--setup-success); }
.rgd-step-open .rgd-dot { background: var(--setup-warning); }
.rgd-step-now .rgd-step-btn { border-color: var(--setup-primary); background: var(--setup-card); box-shadow: inset 0 3px 0 var(--setup-primary); }
.rgd-step-now .rgd-dot { background: var(--setup-primary); box-shadow: 0 0 0 3px var(--setup-border-light); }
.rgd-step-future .rgd-step-nm { color: var(--setup-text-secondary); }
.rgd-sel .rgd-step-btn { outline: 2px solid var(--setup-accent); outline-offset: 1px; }
.rgd-s-ok { color: var(--rgd-ink-ok); }
.rgd-s-u { color: var(--rgd-ink-urgent); }
.rgd-s-r { color: var(--rgd-ink-review); }
.rgd-s-f { color: var(--setup-text-secondary); font-weight: 500; }

/* section headings */
.rgd .rgd-h4 { font-family: var(--setup-font); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--setup-text-secondary); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rgd-h4 span { text-transform: none; letter-spacing: 0; font-family: var(--setup-font); font-weight: 500; }

/* next up */
.rgd-nextup { display: grid; gap: 8px; }
.rgd-nu { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: var(--setup-radius-sm); background: var(--setup-input-bg); border: 1px solid var(--setup-border); }
.rgd-nu-t { font-weight: 600; }
.rgd-nu-d { grid-column: 2; font-size: 0.82rem; color: var(--setup-text-secondary); }
.rgd-nu-go { grid-row: 1 / span 2; grid-column: 3; }
.rgd-allclear { padding: 14px; border-radius: var(--setup-radius-sm); background: var(--setup-success-light); color: var(--rgd-ink-ok); font-weight: 600; }

/* buttons */
.rgd-btn { display: inline-flex; align-items: center; border: 1px solid var(--setup-border); background: var(--setup-card); color: var(--setup-text); border-radius: var(--setup-radius-sm); padding: 6px 12px; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--setup-transition); }
.rgd-btn:hover { background: var(--setup-border-light); color: var(--setup-text); text-decoration: none; }
.rgd-btn-primary { background: var(--setup-primary); color: var(--setup-card); border-color: var(--setup-primary); }
.rgd-btn-primary:hover { background: var(--setup-primary-light); color: var(--setup-card); }
.rgd-btn:disabled { opacity: 0.6; cursor: default; }
.rgd-btn:active:not(:disabled) { transform: translateY(1px); }
.rgd-btn:focus-visible, .rgd-linkbtn:focus-visible, .rgd a:focus-visible { outline: 2px solid var(--setup-accent); outline-offset: 2px; }
.rgd-linkbtn { border: 0; background: none; padding: 0; color: var(--rgd-ink-ok); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-size: 0.82rem; font-weight: 600; }

/* phase panel */
.rgd-phase { padding: 18px; display: grid; gap: 18px; }
.rgd-ph-head { display: grid; gap: 6px; }
.rgd-ph-kicker { font: var(--rgd-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--setup-text-secondary); }
.rgd-ph-title { font-size: 1.4rem; font-weight: 700; color: var(--setup-primary); }
.rgd-ph-goal { margin: 0; color: var(--setup-text-secondary); max-width: 720px; }
.rgd-ph-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rgd-section { display: grid; gap: 8px; }
.rgd-empty { font-size: 0.85rem; color: var(--setup-text-secondary); }
.rgd-hidden-note { font-size: 0.82rem; color: var(--setup-text-secondary); }
.rgd-small { font-size: 0.78rem; color: var(--setup-text-secondary); }
.rgd-mono { font-family: var(--rgd-mono); }

/* feature chips (read-only) */
.rgd-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.rgd-chip { border: 1px solid var(--setup-border); background: var(--setup-card); border-radius: 999px; padding: 6px 12px 6px 10px; font-size: 0.82rem; display: inline-flex; gap: 7px; align-items: center; color: var(--setup-text-secondary); }
.rgd-chip-bx { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--setup-text-muted); display: grid; place-items: center; font-size: 0.62rem; font-weight: 700; }
.rgd-chip-on { border-color: var(--setup-accent); background: var(--setup-success-light); color: var(--setup-text); }
.rgd-chip-on .rgd-chip-bx { background: var(--setup-accent-hover); border-color: var(--setup-accent-hover); color: var(--setup-card); }
.rgd-chip-off { border-style: dashed; padding-left: 12px; }
.rgd-chip-state { color: var(--setup-text-secondary); font-size: 0.75rem; }
.rgd-chip-act { color: var(--rgd-ink-ok); font-weight: 600; font-size: 0.78rem; text-decoration: underline; text-underline-offset: 2px; }
.rgd-chip-act:hover { color: var(--setup-primary); }

/* item rows */
.rgd-items { display: grid; border: 1px solid var(--setup-border); border-radius: var(--setup-radius-sm); overflow: hidden; background: var(--setup-card); }
.rgd-item { border-top: 1px solid var(--setup-border); position: relative; }
.rgd-item:first-child { border-top: 0; }
.rgd-row { width: 100%; display: grid; grid-template-columns: 24px 1fr auto; gap: 4px 12px; align-items: center; padding: 12px 16px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--setup-text); font: inherit; }
.rgd-row:hover { background: var(--setup-card-hover); }
.rgd-row:focus-visible { outline: 2px solid var(--setup-accent); outline-offset: -2px; }
.rgd-row-t { font-weight: 600; }
.rgd-row-d { grid-column: 2; font-size: 0.82rem; color: var(--setup-text-secondary); }
.rgd-row-right { grid-row: 1 / span 2; grid-column: 3; display: flex; align-items: center; gap: 8px; }
.rgd-chev { color: var(--setup-text-secondary); font-size: 0.7rem; transition: transform var(--setup-transition); }
.rgd-row[aria-expanded="true"] .rgd-chev { transform: rotate(90deg); }
.rgd-l-notyet .rgd-row-t { color: var(--setup-text-secondary); font-weight: 500; }
.rgd-ico { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--setup-text-muted); display: grid; place-items: center; font-size: 0.68rem; font-weight: 700; line-height: 1; }
.rgd-ico-done { background: var(--setup-success); border-color: var(--setup-success); color: var(--setup-card); }
.rgd-ico-err { border-color: var(--setup-text-secondary); color: var(--setup-text-secondary); }
.rgd-ico-cnt { border: 0; border-radius: 6px; width: auto; min-width: 22px; height: 22px; padding: 0 5px; background: var(--setup-border-light); color: var(--setup-text); font-family: var(--setup-font); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.rgd-l-urgent .rgd-ico-cnt { background: var(--setup-danger-light); color: var(--rgd-ink-urgent); box-shadow: inset 0 0 0 1px var(--setup-danger); }
.rgd-l-review .rgd-ico-cnt { background: var(--setup-warning-light); color: var(--rgd-ink-review); box-shadow: inset 0 0 0 1px var(--setup-warning); }
.rgd-l-fyi .rgd-ico-cnt { background: var(--setup-blue-light); color: var(--rgd-ink-fyi); }
.rgd-l-acked .rgd-ico-cnt { background: var(--rgd-acked-light); color: var(--rgd-ink-acked); }
.rgd-detail { padding: 4px 16px 16px 52px; display: grid; gap: 12px; }
.rgd-why { margin: 0; color: var(--setup-text-secondary); font-size: 0.88rem; max-width: 680px; }
.rgd-drill-wrap { border: 1px solid var(--setup-border); border-radius: var(--setup-radius-sm); overflow-x: auto; background: var(--setup-input-bg); }
.rgd-drill { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.rgd-drill td { padding: 7px 10px; border-top: 1px solid var(--setup-border); vertical-align: top; }
.rgd-drill tr:first-child td { border-top: 0; }
.rgd-drill td:first-child { font-weight: 600; width: 40%; }
.rgd-drill td:last-child { color: var(--setup-text-secondary); }
.rgd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rgd-ackbox { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--rgd-acked); border-radius: var(--setup-radius-sm); background: var(--rgd-acked-light); }
.rgd-ackbox label { font-size: 0.82rem; font-weight: 600; color: var(--rgd-ink-acked); margin: 0; }
.rgd-ackbox textarea { font: inherit; font-size: 0.88rem; width: 100%; min-height: 62px; border: 1px solid var(--setup-border); border-radius: 6px; padding: 8px; background: var(--setup-card); color: var(--setup-text); resize: vertical; }
.rgd-ackbox textarea:focus { outline: none; border-color: var(--setup-accent); box-shadow: 0 0 0 3px var(--setup-accent-glow); }
.rgd-acknote { padding: 10px 12px; border-radius: var(--setup-radius-sm); background: var(--rgd-acked-light); color: var(--setup-text-secondary); font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between; align-items: center; }
.rgd-acknote b { color: var(--rgd-ink-acked); }

/* game-day card */
.rgd-gdc { border: 1px solid var(--setup-border); border-radius: var(--setup-radius-sm); overflow: hidden; }
.rgd-gdc-head { background: var(--setup-input-bg); border-bottom: 1px solid var(--setup-border); padding: 10px 16px; }
.rgd-gdc-head h3 { font-size: 1rem; font-weight: 600; color: var(--setup-primary); }
.rgd-gdc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rgd-gdc-cell { padding: 14px 16px; border-top: 1px solid var(--setup-border); border-left: 1px solid var(--setup-border); display: grid; gap: 6px; align-content: start; margin: -1px 0 0 -1px; }
.rgd .rgd-gdc-cell h4 { font-family: var(--setup-font); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--setup-text-secondary); font-weight: 600; }
.rgd-pw { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rgd-pw code { font-family: var(--rgd-mono); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.06em; color: var(--setup-text); background: none; padding: 0; }
.rgd-se { display: grid; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--setup-border); }
.rgd-se-opt { display: flex; align-items: flex-start; gap: 8px; font-size: 0.84rem; font-weight: 500; color: var(--setup-text); margin: 0; cursor: pointer; }
.rgd-se-opt input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--setup-accent); flex: none; }
.rgd-se-pw { display: grid; gap: 4px; padding-left: 24px; }
.rgd-se-pw[hidden] { display: none; }
.rgd .rgd-se-input { max-width: 180px; font-family: var(--rgd-mono); background: var(--setup-card); }
.rgd-plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 0.85rem; }
.rgd-plist li { display: flex; justify-content: space-between; gap: 10px; }
.rgd-plist a { color: var(--rgd-ink-ok); }
.rgd-never { color: var(--rgd-ink-urgent); font-weight: 600; }

@media (max-width: 900px) {
    .rgd-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .rgd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rgd-detail { padding-left: 16px; }
    .rgd-nu { grid-template-columns: auto 1fr; }
    .rgd-nu-go { grid-row: auto; grid-column: 2; justify-self: start; }
    .rgd-row-right { grid-row: auto; grid-column: 2; justify-content: flex-start; }
}
@media (pointer: coarse) {
    .rgd-btn { min-height: 44px; padding: 10px 16px; }
    .rgd-linkbtn, .rgd-chip-act, .rgd-crumb a { display: inline-flex; align-items: center; min-height: 44px; }
    .rgd-se-opt { min-height: 44px; align-items: center; }
    .rgd-se-opt input[type="checkbox"] { margin-top: 0; width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .rgd * { transition: none !important; }
    .rgd-btn:active:not(:disabled) { transform: none; }
}

/* ---------- Road to Game Day band (rgd-band*) - DirectorHome.ascx, between dhx-cbar and dhx-manage ---------- */
.rgd-band { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 18px; align-items: center; padding: 10px 14px 10px 18px; border: 1px solid var(--setup-border); border-radius: var(--setup-radius); background: var(--setup-card); box-shadow: var(--setup-shadow); position: relative; overflow: hidden; font-family: var(--setup-font); color: var(--setup-text); margin-bottom: 20px; }
.rgd-band::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--setup-success); }
.rgd-band-urgent::before { background: var(--setup-danger); }
.rgd-band-review::before { background: var(--setup-warning); }
.rgd-band-lft { display: grid; gap: 4px; }
.rgd-band-ttl { font-family: var(--setup-font-heading); font-weight: 600; font-size: 0.95rem; color: var(--setup-primary); }
.rgd-band-mini { display: flex; gap: 3px; }
.rgd-band-seg { display: block; width: 20px; height: 6px; border-radius: 3px; background: var(--setup-border); }
.rgd-band-seg.rgd-band-done { background: var(--setup-success); }
.rgd-band-seg.rgd-band-open { background: var(--setup-warning); }
.rgd-band-seg.rgd-band-now { background: var(--setup-primary); }
.rgd-band-mid { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 0.85rem; color: var(--setup-text-secondary); min-width: 0; }
.rgd-band-mid b { color: var(--setup-text); font-weight: 600; }
.rgd-band-mid a { color: var(--setup-accent-hover); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.rgd-band-top { color: var(--setup-text); }
.rgd-band a.rgd-band-go, .rgd-band a.rgd-band-go:hover { color: var(--setup-card); text-decoration: none; }
@media (max-width: 640px) {
    .rgd-band { grid-template-columns: 1fr; }
    .rgd-band-go { justify-self: start; }
}

/* ---------- EOS seat page (admin/ceoRole.aspx, eos-dashboards phase 6): .mgmt-* ----------
   Scorecard grid cells are painted from the goal status (Green / Red / Gray) computed
   in App_Code/MgmtMetrics.vb; these rules only paint them. No background on a select. */
.mgmt-roles { margin: 4px 0 0; padding-left: 22px; font-size: 0.86rem; line-height: 1.55; color: rgba(255,255,255,0.9); }
.mgmt-roles li { padding-left: 2px; }
.mgmt-header-link { color: #fff; text-decoration: underline; text-underline-offset: 2px; text-transform: none; letter-spacing: 0; font-size: 0.8rem; }
.mgmt-header-link:hover { color: #fff; }
.mgmt-qsel { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--setup-border); border-radius: 999px; overflow: hidden; margin: 0 0 12px; }
.mgmt-qsel a { padding: 5px 14px; font-size: 0.78rem; font-weight: 600; color: var(--setup-text-secondary); text-decoration: none; }
.mgmt-qsel a + a { border-left: 1px solid var(--setup-border); }
.mgmt-qsel a:hover { background: var(--setup-border-light); color: var(--setup-text); text-decoration: none; }
.mgmt-qsel a.is-active { background: var(--setup-primary); color: #fff; }
.mgmt-grid th.mgmt-cell-h { text-align: center; padding: 9px 6px; }
.mgmt-grid td.mgmt-cell { text-align: center; vertical-align: middle; padding: 9px 6px; min-width: 50px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.mgmt-grid td.mgmt-cell.is-green { background: var(--setup-success-light); color: var(--setup-accent-hover); }
.mgmt-grid td.mgmt-cell.is-red { background: var(--setup-danger-light); color: var(--setup-danger); font-weight: 700; }
.mgmt-grid td.mgmt-cell.is-gray { color: var(--setup-text-muted); font-weight: 500; }
.mgmt-grid td.mgmt-cell.is-failed { font-style: italic; }
.mgmt-grid td.mgmt-cell.is-current,
.mgmt-grid th.is-current { border-left: 2px solid var(--setup-primary); }
.mgmt-grid td.mgmt-goal { white-space: nowrap; }
.mgmt-wrap { white-space: normal; max-width: 70ch; }
.mgmt-check label { display: inline; margin-left: 6px; font-size: 0.84rem; font-weight: 600; color: var(--setup-text); text-transform: none; letter-spacing: 0; }
.mgmt-private { border-left: 4px solid var(--setup-primary); }
.mgmt-private h3 .mgmt-badge { vertical-align: middle; margin-left: 6px; }
.mgmt-conv td:first-child { white-space: nowrap; width: 1%; }

/* ---------- EOS weekly meeting page (admin/ceo.aspx, eos-dashboards phase 7): .mgmt-* ----------
   Agenda step numbers, seat group rows that link to the seat page, the collapsed
   "recently solved" list and the wrap-up raters. Colors come from the page's goal
   status; these rules only paint them. No background on a select. */
.mgmt-step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-right: 8px; border-radius: 999px;
    background: var(--setup-primary); color: #fff;
    font-size: 0.74rem; font-weight: 700; vertical-align: 2px;
}
.mgmt-table tr.mgmt-group > td .mgmt-badge { margin-left: 8px; vertical-align: 1px; }
a.mgmt-group-link { color: var(--setup-text); text-decoration: none; }
a.mgmt-group-link:hover { color: var(--setup-blue); text-decoration: underline; }
.mgmt-col-actions { width: 1%; white-space: nowrap; text-align: right; }
.mgmt-issue-rank { display: inline-flex; margin: 2px 14px 0 0; vertical-align: top; }
.mgmt-solved { margin-top: 18px; }
.mgmt-solved > summary {
    cursor: pointer; list-style: none;
    font-size: 0.82rem; font-weight: 600; color: var(--setup-text-secondary);
}
.mgmt-solved > summary::-webkit-details-marker { display: none; }
.mgmt-solved > summary .mdi { margin-right: 4px; }
.mgmt-solved[open] > summary { color: var(--setup-text); margin-bottom: 8px; }
.mgmt-raters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.mgmt-raters .mgmt-badge + .mgmt-badge { margin-left: 0; }

/* ---------- Weekend Watch (rgd-watch*) - admin/weekendwatch.aspx, staff ---------- */
.rgd-watch { max-width: 1280px; }
.rgd-watch-head { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; align-items: flex-end; }
.rgd-watch-lede { margin: 4px 0 0; color: var(--setup-text-secondary); font-size: 0.9rem; max-width: 640px; }
.rgd-watch-sports { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 0.82rem; }
.rgd-watch-sports-lbl { color: var(--setup-text-secondary); margin-right: 4px; }
.rgd-watch-sport { border: 1px solid var(--setup-border); border-radius: 999px; padding: 3px 12px; color: var(--setup-text); background: var(--setup-card); text-decoration: none; }
a.rgd-watch-sport:hover { border-color: var(--setup-text-muted); color: var(--setup-text); text-decoration: none; }
.rgd-watch-sport-on { background: var(--setup-primary); border-color: var(--setup-primary); color: var(--setup-card); font-weight: 600; }
.rgd-watch-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font-size: 0.85rem; }
.rgd-watch-filter { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--setup-text-secondary); }
.rgd-watch .rgd-watch-range { width: auto; display: inline-block; min-width: 110px; }
.rgd-watch-check { display: inline-flex; align-items: center; gap: 6px; color: var(--setup-text); }
.rgd-watch-check label { margin: 0; }
.rgd-watch-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.rgd-watch-kpi { padding: 12px 14px; border-radius: var(--setup-radius-sm); background: var(--setup-card); border: 1px solid var(--setup-border); box-shadow: var(--setup-shadow); }
.rgd-watch-kpi-v { font-family: var(--setup-font-heading); font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--setup-primary); }
.rgd-watch-kpi-k { font-size: 0.78rem; color: var(--setup-text-secondary); }
.rgd-watch-kpi-u .rgd-watch-kpi-v { color: var(--setup-danger); }
.rgd-watch-tbl-wrap { overflow-x: auto; border: 1px solid var(--setup-border); border-radius: var(--setup-radius-sm); background: var(--setup-card); }
.rgd-watch-tbl { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 820px; }
.rgd-watch-tbl th { text-align: left; font-weight: 600; font-size: 0.75rem; color: var(--setup-text-secondary); padding: 9px 12px; border-bottom: 1px solid var(--setup-border); background: var(--setup-input-bg); white-space: nowrap; }
.rgd-watch-tbl td { padding: 10px 12px; border-top: 1px solid var(--setup-border); vertical-align: middle; }
.rgd-watch-tbl tr.rgd-watch-grp td { background: var(--setup-border-light); font-family: var(--rgd-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--setup-text-secondary); padding: 7px 12px; }
.rgd-watch-num { font-variant-numeric: tabular-nums; }
.rgd-watch-evn { font-weight: 600; color: var(--setup-text); }
a.rgd-watch-evn:hover { color: var(--setup-accent-hover); }
.rgd-watch-evs { font-size: 0.75rem; color: var(--setup-text-secondary); }
.rgd-watch-cnt-u { color: var(--setup-danger); font-weight: 700; }
.rgd-watch-cnt-r { color: var(--setup-warning); font-weight: 600; }
.rgd-watch-cnt-0 { color: var(--setup-text-muted); }
.rgd-watch-pending { font-size: 0.75rem; color: var(--setup-text-secondary); font-style: italic; white-space: nowrap; }
.rgd-watch-never { color: var(--setup-danger); font-weight: 600; }
.rgd-watch-empty { color: var(--setup-text-secondary); }
.rgd-watch .rgd-watch-select { width: auto; min-width: 150px; font-size: 0.82rem; padding-top: 4px; padding-bottom: 4px; }

/* ---------- Team check-in card (tci-*) - controls/dashboard/sinc/TeamCheckin.ascx on dash.aspx ----------
   One block per person (last week + 4-week average), a Team block (queues, invoice aging) and
   the entry form. The grid collapses to one column on a phone (and in the half-width column). */
.tci-card { margin-bottom: 0; }
.tci-card .setup-card-header { padding: 14px 18px; }
.tci-body { padding: 14px 18px 16px; }
.tci-loading { color: var(--setup-text-secondary); font-size: 0.85rem; }
.tci-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tci-person,
.tci-team,
.tci-entry { border: 1px solid var(--setup-border-light); border-radius: var(--setup-radius-sm); padding: 10px 12px; background: var(--setup-card); min-width: 0; }
.tci-person.is-me { border-color: var(--setup-accent); box-shadow: 0 0 0 1px var(--setup-accent-glow); }
.tci-team,
.tci-entry { margin-top: 12px; background: var(--setup-input-bg); }
.tci-card h4.tci-name { font-family: var(--setup-font-heading); font-size: 0.9rem; font-weight: 700; color: var(--setup-text); margin: 0 0 6px; }
.tci-you { font-family: var(--setup-font); font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--setup-accent-hover); margin-left: 6px; }
.tci-tbl { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.tci-tbl th { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--setup-text-secondary); text-align: right; padding: 0 0 4px 8px; white-space: nowrap; border-bottom: 1px solid var(--setup-border-light); }
.tci-tbl td { text-align: right; vertical-align: top; padding: 5px 0 5px 8px; border-bottom: 1px solid var(--setup-border-light); font-variant-numeric: tabular-nums; }
.tci-tbl th:first-child,
.tci-tbl td:first-child { text-align: left; padding-left: 0; }
.tci-tbl tbody tr:last-child td { border-bottom: none; }
.tci-tbl + .tci-tbl { margin-top: 10px; }
.tci-scroll { overflow-x: auto; }
.tci-scroll + .tci-scroll { margin-top: 10px; }
.tci-tbl td.tci-lbl { color: var(--setup-text); }
.tci-tbl td.tci-v { font-weight: 700; color: var(--setup-text); white-space: nowrap; }
.tci-tbl td.tci-a { color: var(--setup-text-secondary); white-space: nowrap; }
.tci-na,
.tci-muted { color: var(--setup-text-muted); font-weight: 400; }
.tci-fail { color: var(--setup-warning); font-weight: 600; white-space: nowrap; cursor: help; }
.tci-goal { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--setup-blue-light); color: var(--setup-blue); font-size: 0.66rem; font-weight: 600; white-space: nowrap; }
.tci-note { font-size: 0.72rem; color: var(--setup-text-muted); line-height: 1.35; margin: 2px 0 0; }
.tci-stamp { margin-top: 8px; font-size: 0.72rem; color: var(--setup-text-muted); }
.tci-msg { margin: 0 0 12px; }
.tci-entry .tci-note { margin-bottom: 4px; }
.tci-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; border-top: 1px solid var(--setup-border-light); }
.tci-entry .tci-note + .tci-form { border-top: none; }
.tci-form-lbl { flex: 1 1 160px; margin: 0; font-size: 0.8rem; color: var(--setup-text); }
.tci-card input.tci-input { flex: 0 0 96px; width: 96px; height: auto; padding: 4px 8px; font-size: 0.82rem; background: var(--setup-card); }
.tci-card input.tci-input:focus { border-color: var(--setup-accent); box-shadow: 0 0 0 3px var(--setup-accent-glow); outline: none; }
.tci-form-msg { flex: 1 1 100%; font-size: 0.75rem; color: var(--setup-danger); }
.tci-form-msg:empty { display: none; }

/* ============================================================
   Event settings lists (.tset-*) - TTParticipants.aspx, TTAutoEmail.aspx
   The look of the TTAlerts.aspx tabs (Website Setup): page head with a year
   pill, a tinted panel, and bordered, banded row blocks. Class selectors only:
   these pages render under whichever TT*.master the event uses.
   ============================================================ */
.tset-page { font-family: 'DM Sans', system-ui, sans-serif; color: var(--setup-text); max-width: 1200px; padding-bottom: 30px; }

.tset-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px; font-size: .8rem;
    font-weight: 600; color: var(--setup-text-secondary); text-decoration: none; }
.tset-back:hover { color: var(--setup-accent-hover); text-decoration: none; }
.tset-back + .tset-back { margin-left: 14px; }

.tset-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 0 0 16px; }
.tset-head h1 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: -.01em;
    color: var(--setup-text); margin: 0; }
.tset-head p { margin: 5px 0 0; font-size: .86rem; line-height: 1.5; color: var(--setup-text-secondary); max-width: 640px; }
.tset-year { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 99px;
    background: var(--setup-card); border: 1px solid var(--setup-border); box-shadow: var(--setup-shadow); }
.tset-year .tset-cap { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    color: var(--setup-text-secondary); }
.tset-year .tset-yr { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .95rem; color: var(--setup-text); }

.tset-msg { display: flex; align-items: center; gap: 8px; padding: 11px 16px; margin: 0 0 16px; font-size: .85rem;
    border-radius: var(--setup-radius-sm); background: var(--setup-success-light); border-left: 3px solid var(--setup-accent); }
.tset-msg .mdi { color: var(--setup-accent); font-size: 1.1rem; }
.tset-msg.tset-err { background: var(--setup-danger-light); border-left-color: var(--setup-danger); }
.tset-msg.tset-err .mdi { color: var(--setup-danger); }

.tset-panels { background: var(--setup-bg); border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-lg); padding: 4px 22px 22px; }
.tset-page h3 { display: flex; align-items: baseline; gap: 10px; font-family: 'Outfit', sans-serif; font-weight: 700;
    font-size: 1.02rem; color: var(--setup-text); margin: 24px 0 2px; }
.tset-page p { font-size: .85rem; line-height: 1.55; color: var(--setup-text-secondary); }
.tset-count { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; font-size: .76rem;
    color: var(--setup-text-secondary); padding: 2px 9px; border-radius: 99px; background: var(--setup-card);
    border: 1px solid var(--setup-border); }

.tset-page .tset-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 10px 0 8px;
    background: var(--setup-card); border: 1px solid var(--setup-border); border-radius: var(--setup-radius); }
.tset-page .tset-table > tbody > tr > td { padding: 11px 14px; font-size: .85rem; line-height: 1.5;
    vertical-align: middle; border-top: 1px solid var(--setup-border-light); }
.tset-page .tset-table > tbody > tr:first-child > td { border-top: none; }
.tset-page .tset-table > tbody > tr:nth-child(even) > td { background: var(--setup-border-light); }
.tset-page .tset-table > tbody > tr:hover > td { background: var(--setup-blue-light); }
.tset-page .tset-table > tbody > tr:first-child > td:first-child { border-top-left-radius: var(--setup-radius); }
.tset-page .tset-table > tbody > tr:first-child > td:last-child { border-top-right-radius: var(--setup-radius); }
.tset-page .tset-table > tbody > tr:last-child > td:first-child { border-bottom-left-radius: var(--setup-radius); }
.tset-page .tset-table > tbody > tr:last-child > td:last-child { border-bottom-right-radius: var(--setup-radius); }
.tset-page .tset-table > tbody > tr.tset-thead > td { background: var(--setup-card); font-size: .7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; color: var(--setup-text-muted); padding-top: 9px; padding-bottom: 7px; }

.tset-page td.tset-lbl { width: 210px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .87rem; color: var(--setup-text); }
.tset-page td.tset-val { color: var(--setup-text-secondary); }
.tset-page td.tset-act { width: 110px; text-align: right; white-space: nowrap; }
.tset-seq { font-size: .72rem; color: var(--setup-text-muted); margin-left: 4px; }

.tset-on { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--setup-accent-hover); }
.tset-off { font-size: .78rem; color: var(--setup-text-muted); }
.tset-page a.tset-go { display: inline-flex; align-items: center; gap: 2px; margin-left: 10px; padding: 5px 10px 5px 12px;
    border: 1px solid var(--setup-border); border-radius: 99px; background: var(--setup-card);
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .76rem; color: var(--setup-text-secondary);
    text-decoration: none; transition: var(--setup-transition); }
.tset-page a.tset-go:hover { border-color: var(--setup-accent); color: var(--setup-accent-hover); text-decoration: none; }
.tset-page a.tset-go .mdi { font-size: 1rem; line-height: 1; }

.tset-page input[type="checkbox"] { -webkit-appearance: none; appearance: none; position: relative;
    width: 17px; height: 17px; border: 2px solid var(--setup-border); border-radius: 4px; background: #fff;
    cursor: pointer; vertical-align: -3px; }
.tset-page input[type="checkbox"]:checked { border-color: var(--setup-accent); background: var(--setup-accent); }
.tset-page input[type="checkbox"]:checked:after { content: ''; position: absolute; top: 1px; left: 4px;
    width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tset-page input[type="checkbox"] + label { font-size: .82rem; margin-left: 6px; cursor: pointer; color: var(--setup-text-secondary); }

/* Single-record form (TTAutoEmail edit mode). Never a background on select: it wipes the chevron. */
.tset-form { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px 18px; align-items: center;
    margin: 18px 0 4px; padding: 20px 22px; background: var(--setup-card); border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius); }
.tset-form > .tset-flbl { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .84rem; color: var(--setup-text); }
.tset-form .tset-fval { font-size: .85rem; color: var(--setup-text); }
.tset-form .tset-hint { display: block; margin-top: 3px; font-size: .75rem; color: var(--setup-text-muted); }
.tset-form .tset-ferr { display: block; margin-top: 3px; font-size: .78rem; color: var(--setup-danger); }
.tset-form .tset-ferr:empty { display: none; }
.tset-form input[type="text"], .tset-form select { max-width: 320px; width: 100%; font-family: 'DM Sans', system-ui, sans-serif;
    font-size: .85rem; padding: 7px 12px; border: 1.5px solid var(--setup-border); border-radius: var(--setup-radius-sm);
    color: var(--setup-text); transition: border-color .2s ease, box-shadow .2s ease; height: auto; }
.tset-form input[type="text"] { background: #fff; }
.tset-form input[type="text"]:focus, .tset-form select:focus { outline: none; border-color: var(--setup-accent);
    box-shadow: 0 0 0 3px var(--setup-accent-glow); }
.tset-form input.tset-date { max-width: 160px; }

.tset-preview { margin: 18px 0 0; background: var(--setup-card); border: 1px solid var(--setup-border); border-radius: var(--setup-radius); }
.tset-preview-head { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--setup-border-light);
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .95rem; }
.tset-preview-body { padding: 16px 18px; overflow-x: auto; }
.tset-links { padding: 12px 18px; border-bottom: 1px solid var(--setup-border-light); font-size: .78rem; line-height: 1.9; }
.tset-links:empty { display: none; }

.tset-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 18px 0 0; }
.tset-tools-r { display: flex; gap: 10px; align-items: center; }
.tset-page .btn-setup-primary, .tset-page .btn-setup-secondary {
    font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; font-size: .8rem;
    border-radius: var(--setup-radius-sm); padding: 8px 18px; cursor: pointer; transition: var(--setup-transition); }
.tset-page .btn-setup-primary { background: var(--setup-accent); border: 1.5px solid var(--setup-accent); color: #fff; }
.tset-page .btn-setup-primary:hover { background: var(--setup-accent-hover); border-color: var(--setup-accent-hover); }
.tset-page .btn-setup-secondary { background: var(--setup-card); border: 1.5px solid var(--setup-border); color: var(--setup-text-secondary); }
.tset-page .btn-setup-secondary:hover { border-color: var(--setup-text-muted); color: var(--setup-text); }
.tset-page .btn-setup-secondary.tset-danger:hover { border-color: var(--setup-danger); color: var(--setup-danger); }

@media (max-width: 720px) {
    .tset-panels { padding: 4px 12px 18px; }
    .tset-page td.tset-lbl, .tset-page td.tset-act { width: auto; }
    .tset-form { grid-template-columns: minmax(0, 1fr); gap: 4px 0; padding: 16px; }
    .tset-form > .tset-flbl { margin-top: 10px; }
}
.tset-page a.tset-name { color: var(--setup-text); text-decoration: none; }
.tset-page a.tset-name:hover { color: var(--setup-accent-hover); text-decoration: underline; }

/* ---------- Data grid: pinned columns, sticky header, density (sgrid-) ----------
   A wide GridView that scrolls inside its own box instead of squeezing to fit the
   window. First used by TTList.aspx.
   - Wrap the GridView in <div class="sgrid-scroll">; add .sgrid-compact for compact rows.
   - Give the left columns' HeaderStyle/ItemStyle CssClass "sgrid-pin" (they must come
     first) and fixed widths; a page script sets each pinned cell's sticky `left`
     (see pinColumns in TTList.aspx) and marks the last one .sgrid-pin-last.
   - GridView renders style="width:100%;border-collapse:collapse" inline, hence the
     !important on width and border-collapse (sticky cells need separate borders). */
.sgrid-scroll {
    overflow: auto;
    max-height: calc(100vh - 140px);
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    background: var(--setup-card);
    font-family: var(--setup-font);
}
/* a GridView wraps its table in a <div>, so match both shapes */
.sgrid-scroll > table,
.sgrid-scroll > div > table {
    border-collapse: separate !important;
    border-spacing: 0;
    width: max-content !important;
    min-width: 100%;
    font-size: 14px;
    line-height: 1.4;
    color: var(--setup-text);
}
.sgrid-scroll th,
.sgrid-scroll td {
    white-space: nowrap;
    vertical-align: middle;
    text-align: left;
    box-sizing: border-box;
}
.sgrid-scroll th {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 10px 12px;
    background: var(--setup-border-light) !important;
    color: var(--setup-primary-light) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--setup-border);
}
.sgrid-scroll th a { color: inherit; }
.sgrid-scroll td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--setup-border-light);
    background-color: inherit;   /* pinned cells must be opaque; row tints come from the <tr> */
}
.sgrid-scroll tr.tblrow { background-color: var(--setup-card); }
.sgrid-scroll tr.altrow { background-color: var(--setup-input-bg); }
/* Legacy sinc19.css sets .tblrow/.altrow to 9pt; let the rows take the grid size instead */
.sgrid-scroll tr.tblrow, .sgrid-scroll tr.altrow { font-size: inherit; }
.sgrid-scroll tr.tblrow:hover > td,
.sgrid-scroll tr.altrow:hover > td { background-color: var(--setup-blue-light); }

.sgrid-scroll .sgrid-pin { position: sticky; z-index: 1; }
.sgrid-scroll th.sgrid-pin { z-index: 4; }
.sgrid-scroll .sgrid-pin-last { box-shadow: inset -1px 0 0 var(--setup-border), 8px 0 8px -8px rgba(15, 23, 42, 0.2); }

/* Optional second sideways scrollbar, placed just above the .sgrid-scroll box and kept in
   step with it by page script (see sizeTopScroll in TTList.aspx), so a grid as tall as the
   window can be scrolled sideways without first reaching its bottom edge. The webkit rules
   also keep it visible on macOS, where overlay scrollbars would otherwise hide it. Firefox
   ignores them and its overlay scrollbars take no space, hence the min-height. */
.sgrid-topscroll { overflow-x: auto; overflow-y: hidden; min-height: 12px; margin-bottom: 4px; }
.sgrid-topscroll > div { height: 1px; }
.sgrid-topscroll::-webkit-scrollbar { height: 12px; }
.sgrid-topscroll::-webkit-scrollbar-track { background: var(--setup-border-light); border-radius: 6px; }
.sgrid-topscroll::-webkit-scrollbar-thumb { background: var(--setup-text-muted); border: 2px solid var(--setup-border-light); border-radius: 6px; }
.sgrid-topscroll::-webkit-scrollbar-thumb:hover { background: var(--setup-text-secondary); }

.sgrid-scroll.sgrid-compact > table,
.sgrid-scroll.sgrid-compact > div > table { font-size: 13px; line-height: 1.25; }
.sgrid-scroll.sgrid-compact td { padding: 3px 10px; }
.sgrid-scroll.sgrid-compact th { padding: 7px 10px; }

/* Second line inside a cell (club, age, discount) */
.sgrid-sub { font-size: 13px; color: #475569; }
.sgrid-compact .sgrid-sub { font-size: 12px; }
.sgrid-tname { font-weight: 600; }

/* Status pills */
.sgrid-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.5; }
.sgrid-compact .sgrid-pill { font-size: 12px; }
.sgrid-pill-ok { background: var(--setup-success-light); color: #2f6113; }
.sgrid-pill-due { background: var(--setup-warning-light); color: #9a3412; }
.sgrid-pill-info { background: var(--setup-blue-light); color: #1d4ed8; }
.sgrid-pill-muted { background: var(--setup-border-light); color: #475569; }

/* Group heading row inside a grid (e.g. "Colorado - Teams: 215" when sorted by state):
   left-aligned; the label is position:sticky, its left offset set by the page script */
.sgrid-scroll td.sgrid-group { text-align: left !important; padding-left: 12px; font-weight: 600; color: var(--setup-text); }
.sgrid-scroll .sgrid-group-label { position: sticky; display: inline-block; white-space: nowrap; }

/* A record number that opens the record: a soft blue pill that fills solid on hover,
   so it reads as a button without competing with the name links beside it */
a.sgrid-regbtn, a.sgrid-regbtn:link, a.sgrid-regbtn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 2px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: var(--setup-blue-light);
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: var(--setup-transition);
}
a.sgrid-regbtn:hover { border-color: var(--setup-blue); background: var(--setup-blue); color: #fff; text-decoration: none; }
.sgrid-compact a.sgrid-regbtn { font-size: 12px; }

/* Toolbar above a grid: column-group toggles + a segmented control */
.sgrid-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; font-family: var(--setup-font); }
a.sgrid-tog, a.sgrid-tog:link, a.sgrid-tog:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--setup-border);
    border-radius: var(--setup-radius-sm);
    background: var(--setup-card);
    color: var(--setup-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: var(--setup-transition);
}
a.sgrid-tog .mdi { font-size: 16px; color: var(--setup-text-secondary); }
a.sgrid-tog:hover { border-color: var(--setup-text-muted); text-decoration: none; }
a.sgrid-tog.active { background: var(--setup-blue-light); border-color: var(--setup-blue); color: #1e40af; }
a.sgrid-tog.active .mdi { color: var(--setup-blue); }
.sgrid-seg { display: inline-flex; margin-left: auto; }
.sgrid-seg-btn {
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--setup-border);
    background: var(--setup-card);
    color: var(--setup-text);
    font-family: var(--setup-font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--setup-transition);
}
.sgrid-seg-btn:first-child { border-radius: var(--setup-radius-sm) 0 0 var(--setup-radius-sm); }
.sgrid-seg-btn:last-child { border-radius: 0 var(--setup-radius-sm) var(--setup-radius-sm) 0; margin-left: -1px; }
.sgrid-seg-btn.on { background: var(--setup-primary); border-color: var(--setup-primary); color: #fff; }
.sgrid-seg-btn:focus-visible, a.sgrid-tog:focus-visible, a.sgrid-regbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--setup-accent-glow); }