/* WrestleFlow Teams — Illini orange BG, WHITE text with dark metallic blue outline */
html body {
    background: linear-gradient(135deg, #FF7A3D 0%, #E84A27 35%, #C73B1F 65%, #8B2A0F 100%) !important;
    background-attachment: fixed !important;
}
/* Body text: white fill, dark blue stroke */
html body, html body p, html body span, html body div, html body label,
html body a, html body strong, html body b, html body em, html body small,
html body .menu-item, html body .menu-item .title, html body .menu-item .desc,
html body .stat-label, html body .stat-value,
html body table, html body td, html body th,
html body .season-current, html body .season-name {
    color: #ffffff !important;
    -webkit-text-stroke: 1px #13294B;
    paint-order: stroke fill;
    text-shadow: 0 1px 2px rgba(10, 24, 48, 0.65), 1px 1px 0 rgba(10, 24, 48, 0.4);
    font-weight: 700;
}
/* Headings + tile titles: thicker dark-blue outline + deeper shadow for metallic depth */
html body h1, html body h2, html body h3, html body h4,
html body .menu-item .title, html body .header h1 {
    color: #ffffff !important;
    -webkit-text-stroke: 2px #13294B;
    paint-order: stroke fill;
    text-shadow:
        0 1px 0 #2C5282,
        0 2px 0 #1E3A5F,
        0 3px 0 #13294B,
        0 4px 6px rgba(10, 24, 48, 0.6);
    font-weight: 900 !important;
}
html body .header,
html body .run-header {
    background: linear-gradient(135deg, rgba(232,74,39,0.92), rgba(139,42,15,0.92)) !important;
    border-bottom: 3px solid #13294B !important;
}
html body .header h1::after,
html body .run-header h1::after {
    content: 'TEAMS' !important;
    display: inline-block !important;
    margin-left: 10px !important;
    padding: 3px 9px !important;
    background: linear-gradient(135deg, #5BB6F7, #1798F3, #0F6EB8) !important;
    color: #fff !important;
    -webkit-text-stroke: 0 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    border-radius: 4px !important;
    border: 2px solid #fff !important;
    vertical-align: middle !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.4) !important;
}
html body .btn-primary, html body button.btn-primary {
    background: linear-gradient(135deg, #1798F3, #0F6EB8) !important;
    color: #fff !important;
    -webkit-text-stroke: 0 !important;
    border-color: #0F6EB8 !important;
    text-shadow: none !important;
}
html body input, html body select, html body textarea {
    color: #13294B !important;
    -webkit-text-stroke: 0 !important;
    background: rgba(255,255,255,0.96) !important;
    text-shadow: none !important;
}

/* On Teams: swap any pure-white card/container backgrounds to the same orange the body uses,
   so white-with-blue-outline text remains legible. */
html body .card,
html body .container,
html body .wr-container,
html body .user-info,
html body .alert,
html body .banner,
html body .stats-panel,
html body .chart-container,
html body .weight-form,
html body .weight-entry,
html body .food-log-item,
html body .carb-limit-info,
html body .action-btn {
    background: linear-gradient(135deg, #C84828 0%, #A84020 50%, #8B2A0F 100%) !important;
    border-color: rgba(255,255,255,0.25) !important;
    color: #ffffff !important;
}
/* Form selects/inputs INSIDE the orange card stay white-backed so input text stays readable */
html body .card input,
html body .card select,
html body .card textarea {
    background: rgba(255,255,255,0.96) !important;
    color: #13294B !important;
}

/* Inner panels, empty states, alerts, modals: orange BG with dark blue metallic border */
html body .empty-state,
html body .alert,
html body .alert-info,
html body .alert-success,
html body .alert-warning,
html body .alert-error,
html body .alert-banner,
html body .modal,
html body .modal-content,
html body .popup,
html body .info-card,
html body .info-box,
html body .notification,
html body .notice {
    background: linear-gradient(135deg, #C84828 0%, #A84020 50%, #8B2A0F 100%) !important;
    color: #ffffff !important;
    border: 2px solid #13294B !important;
    box-shadow: 0 0 0 1px rgba(91,182,247,0.4), 0 4px 18px rgba(10,24,48,0.45) !important;
    border-radius: 12px !important;
}
/* Modal overlay backdrop stays dim */
html body .modal-overlay {
    background: rgba(10, 24, 48, 0.55) !important;
}
/* Text inside the orange panels: white with dark-blue metallic outline */
html body .empty-state *, html body .alert *, html body .modal *, html body .modal-content *,
html body .popup *, html body .info-card *, html body .info-box *, html body .notice *,
html body .notification *, html body .alert-banner * {
    color: #ffffff !important;
}

/* Aggressive: any nested panel/box/section/badge/info-card inside the main wrapper
   gets orange background + dark blue metallic border. */
html body [class*='card']:not(input):not(select):not(textarea):not(.menu-item),
html body [class*='section']:not(input):not(select):not(textarea),
html body [class*='panel']:not(input):not(select):not(textarea),
html body [class*='info']:not(input):not(select):not(textarea),
html body [class*='box']:not(input):not(select):not(textarea):not(.stat-box),
html body [class*='banner']:not(input):not(select):not(textarea),
html body [class*='badge']:not(.season-badge):not(input):not(select):not(textarea),
html body .stat-box,
html body .weight-form,
html body .weight-entry,
html body .food-log-item,
html body .chart-container,
html body .pill,
html body .tag,
html body .chip {
    background: linear-gradient(135deg, #C84828 0%, #A84020 50%, #8B2A0F 100%) !important;
    color: #ffffff !important;
    border: 2px solid #13294B !important;
    box-shadow: 0 0 0 1px rgba(91,182,247,0.35), 0 2px 6px rgba(10,24,48,0.35) !important;
    border-radius: 10px !important;
}
/* Avatar/icon backgrounds stay neutral so emoji/photos read clearly */
html body img,
html body .avatar,
html body .photo,
html body .icon-bg {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* Keep BUTTONS readable: solid colors with white text */
html body button:not([class*='card']):not([class*='section']):not([class*='panel']):not([class*='info']):not([class*='box']):not([class*='banner']):not([class*='badge']),
html body .btn {
    box-shadow: 0 2px 4px rgba(10,24,48,0.4) !important;
}

/* Scorebook pages stay DARK — NFHS red/green singlet colors are mandatory and they're
   rendered with translucent overlays that need a dark background to register correctly. */
body.scorebook-mode,
html body.scorebook-mode {
    background: #0f172a !important;
    color: #fff !important;
}
body.scorebook-mode *,
html body.scorebook-mode * {
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
}
body.scorebook-mode [class*='card']:not(input):not(select):not(textarea):not(.menu-item),
body.scorebook-mode [class*='section'],
body.scorebook-mode [class*='panel'],
body.scorebook-mode [class*='info'],
body.scorebook-mode [class*='box']:not(input):not(select):not(textarea),
body.scorebook-mode [class*='banner'],
body.scorebook-mode [class*='badge'],
body.scorebook-mode .empty-state,
body.scorebook-mode .alert,
body.scorebook-mode .modal,
body.scorebook-mode .modal-content {
    background: revert !important;
    border: revert !important;
    box-shadow: revert !important;
    color: revert !important;
}
body.scorebook-mode .header h1::after { content: '' !important; display: none !important; }

/* Inside scorebook-mode: revert ALL teams-brand styling so the original page CSS wins */
body.scorebook-mode button,
body.scorebook-mode .btn,
body.scorebook-mode .action-btn,
body.scorebook-mode .ctrl-btn,
body.scorebook-mode .our-btn,
body.scorebook-mode .opp-btn,
body.scorebook-mode .pin-btn,
body.scorebook-mode .danger-btn,
body.scorebook-mode .success-btn,
body.scorebook-mode .timeout-btn,
body.scorebook-mode .score-side,
body.scorebook-mode .score-val,
body.scorebook-mode .position-bar,
body.scorebook-mode .pos-neutral,
body.scorebook-mode .pos-top,
body.scorebook-mode .pos-bottom,
body.scorebook-mode .penalty-btn,
body.scorebook-mode [class*='-btn'],
body.scorebook-mode [class*='-side'] {
    background: revert !important;
    color: revert !important;
    border: revert !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: revert !important;
    box-shadow: revert !important;
}
body.scorebook-mode *,
body.scorebook-mode h1, body.scorebook-mode h2, body.scorebook-mode h3,
body.scorebook-mode .menu-item .title, body.scorebook-mode .header h1 {
    -webkit-text-stroke: 0 !important;
    text-shadow: revert !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
}
/* Body cards on scorebook revert to their original dark/translucent backgrounds */
body.scorebook-mode .card,
body.scorebook-mode .container,
body.scorebook-mode .stats-panel,
body.scorebook-mode .stat-box {
    background: revert !important;
    color: revert !important;
    border: revert !important;
}

/* Final safety net: inside scorebook-mode, inputs/selects/textareas use dark text
   on a near-white background so 'time remaining' & similar forms read correctly. */
body.scorebook-mode input,
body.scorebook-mode select,
body.scorebook-mode textarea,
body.scorebook-mode .time-input-group input {
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border: 2px solid #475569 !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
}
body.scorebook-mode input::placeholder,
body.scorebook-mode select::placeholder,
body.scorebook-mode textarea::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}
/* Modal labels + p text inside scorebook modals stay visible */
body.scorebook-mode .modal,
body.scorebook-mode .modal-content {
    background: #1e293b !important;
    color: #fff !important;
    border: 2px solid rgba(255,255,255,0.15) !important;
}
body.scorebook-mode .modal h3,
body.scorebook-mode .modal p,
body.scorebook-mode .modal label,
body.scorebook-mode .modal-content h3,
body.scorebook-mode .modal-content p,
body.scorebook-mode .modal-content label {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
}