/*
 * os.dnode.ca theme overlay — Ontario Soccer red + white.
 *
 * Loaded AFTER style.css in layout.php / layout_auth.php so these rules win
 * via cascade. style.css has been swapped from crew's dark navy + teal palette
 * to white + red via in-place color substitutions; this file picks up the
 * loose ends (body baseline, accent button text, login gradient, etc).
 *
 * Palette (matches the previous os.dnode.ca branding from c902e76..d38078b):
 *   background  #ffffff
 *   surface     #f8fafc
 *   panel       #f1f5f9
 *   text        #0f172a
 *   muted       #475569
 *   accent      #dc2626  (red-600)
 *   accent-dark #b91c1c  (red-700)
 *   accent-soft rgba(220, 38, 38, 0.12)
 */

/* Body baseline — make sure every page starts on a white surface with dark text. */
html, body {
    background: #ffffff;
    color: #0f172a;
}

/* App shell + main content area */
.app-shell,
.main,
.content,
main {
    background: #ffffff;
    color: #0f172a;
}

/* Sidebar: light surface with subtle right border instead of dark navy */
.sidebar,
.matrix-sidebar,
aside[class*="sidebar"] {
    background: #ffffff;
    color: #0f172a;
    border-right: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 1px 0 0 rgba(15, 23, 42, 0.03);
}

/* Sidebar nav items — readable on white */
.sidebar a,
.sidebar button,
.matrix-sidebar a,
.matrix-sidebar button {
    color: #0f172a;
}
.sidebar a:hover,
.sidebar button:hover,
.matrix-sidebar a:hover,
.matrix-sidebar button:hover {
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
}

/* Active nav state */
.sidebar a.is-active,
.sidebar .nav-link.is-active,
.matrix-sidebar a.is-active,
.matrix-sidebar .nav-link.is-active {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
    border-left: 3px solid #dc2626;
}

/* Primary buttons — red bg with white text (for contrast) */
.btn-primary,
button.btn-primary,
a.btn-primary,
.btn.is-primary {
    background: #dc2626;
    color: #ffffff;
    border-color: #b91c1c;
}
.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
.btn.is-primary:hover {
    background: #b91c1c;
    color: #ffffff;
}

/* Secondary/ghost buttons — light surface with dark text */
.btn-secondary,
.btn-ghost,
.btn:not(.btn-primary):not(.btn-danger):not(.is-primary) {
    background: #f8fafc;
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.18);
}
.btn-secondary:hover,
.btn-ghost:hover,
.btn:not(.btn-primary):not(.btn-danger):not(.is-primary):hover {
    background: #f1f5f9;
    color: #0f172a;
}

/* Cards & panels — white surface with soft shadow instead of dark.
 * NOTE: deliberately list specific classes here rather than [class*="-card"];
 * the wildcard pattern was matching .auth-card-wrapper (and similar pure
 * layout containers) and painting them white, which is why the auth-footer
 * looked like it lived inside the login card. */
.card,
.panel,
.ev-card,
.dashboard-card,
.login-card,
.crew-event-card,
.opportunity-day-card {
    background: #ffffff;
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
}

/* Layout-only wrappers must NEVER inherit a card background. Hard-clear them
 * so the page gradient (or page bg) shows through. */
.auth-card-wrapper,
.card-wrapper,
[class$="-card-wrapper"] {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Modals — white background, dark text */
.ev-modal,
.modal,
[class*="-modal__body"],
[class*="-modal__dialog"] {
    background: #ffffff;
    color: #0f172a;
}

.ev-modal__backdrop,
.modal__backdrop {
    background: rgba(15, 23, 42, 0.45);
}

/* Form inputs — white bg, dark text, subtle border */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="url"],
textarea,
select {
    background: #ffffff;
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.18);
}
input:focus,
textarea:focus,
select:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
    outline: none;
}

/* Form labels and helper text */
label,
.form-label,
.form-help {
    color: #0f172a;
}
.form-help,
.help-text {
    color: #475569;
}

/* Top app header / page header — light surface with bottom border */
.app-header,
.page-header,
[class*="-page__header"] {
    background: #ffffff;
    color: #0f172a;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

/* Tables — clean light theme */
table {
    background: #ffffff;
    color: #0f172a;
}
table thead th {
    background: #f8fafc;
    color: #0f172a;
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}
table tbody td {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
table tbody tr:hover {
    background: rgba(220, 38, 38, 0.04);
}

/* Status pills / chips */
.chip,
.pill,
.badge,
[class*="-chip"],
[class*="-pill"],
[class*="-badge"] {
    color: #0f172a;
}

/* Links — red, underline on hover */
a:not(.btn):not(.chip):not(.pill):not([class*="nav"]):not(.sidebar a):not(.matrix-sidebar a) {
    color: #b91c1c;
}
a:not(.btn):not(.chip):not(.pill):not([class*="nav"]):not(.sidebar a):not(.matrix-sidebar a):hover {
    color: #dc2626;
    text-decoration: underline;
}

/* Login page — red+white gradient on auth shell */
.auth-shell,
.auth-body {
    background: #ffffff;
    color: #0f172a;
}

.auth-gradient {
    background-image:
        radial-gradient(circle at 20% 25%, rgba(220, 38, 38, 0.28), rgba(220, 38, 38, 0) 45%),
        radial-gradient(circle at 78% 8%, rgba(185, 28, 28, 0.22), rgba(185, 28, 28, 0) 55%),
        radial-gradient(circle at 55% 82%, rgba(248, 250, 252, 0.95), rgba(255, 255, 255, 0.05) 60%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 65%, rgba(248, 250, 252, 0.9) 78%, rgba(220, 38, 38, 0.25) 100%);
    opacity: 0.95;
}

.auth-card {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.auth-card h1,
.auth-card h2,
.auth-card label {
    color: #0f172a;
}

/* Spotlight / Cmd+K search modal — white surface */
.spotlight,
.cmdk,
[class*="spotlight"],
[class*="cmdk"] {
    background: #ffffff;
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.12);
}

/* Inventory / status / finances pages — white page backgrounds */
.inventory-page,
.invoices-page,
.crew-finances-page,
.calendar-page,
.gigs-page,
.jb-page,
.account-layout {
    background: #ffffff;
    color: #0f172a;
}

/* Call sheet specific elements */
.cs-sched,
.cs-equip-wrap,
.cs-filelist,
.cs-files-wrap,
.callsheet-modal__body {
    background: #ffffff;
    color: #0f172a;
}

/* Dropdowns — white bg, dark text */
.dropdown,
.appsel,
[data-app-select] {
    background: #ffffff;
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.18);
}

/* Light scrollbar styling for the new bright theme */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #f8fafc;
}
::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.2);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.35);
}

/* ============================================================
   POST-DEPLOY POLISH (2026-06-08) — fixes spotted on os.dnode.ca
   ============================================================ */

/*
 * 1) Login card — REAL class is `.login-card` (not `.auth-card`). Crew's CSS
 *    already sets border-radius: 14px but it reads as flat next to the red
 *    gradient. Bump to 18px + add a more pronounced shadow so it floats
 *    distinctly on the soft-pink background.
 *    Also force the gradient background to be pure white (the crew gradient
 *    uses var(--app-text) which is dark, mixing into the bg gradient).
 */
.login-card {
    background: #ffffff !important;
    /* Match the rest of the app: `--radius` (8px) is the theme's primary
     * radius token, used by buttons, crew-event-card, dropdowns and most
     * surface elements. The login card was previously 14px (crew default)
     * which diverged from the theme. */
    border-radius: var(--radius) !important;
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.06),
        0 12px 32px rgba(220, 38, 38, 0.10),
        0 24px 60px rgba(220, 38, 38, 0.06) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
}

/* Auth footer (© 2026 Ontario Soccer Crew Up · v1.2.1) — must sit BELOW
 * the card on the gradient, not on a white surface. Make it readable on
 * the soft-pink gradient bg. */
.auth-footer {
    color: rgba(15, 23, 42, 0.55);
    background: transparent;
    text-align: center;
    margin-top: 18px;
    font-size: 12px;
    letter-spacing: 0.01em;
}

/*
 * 2) Checkboxes — Brave/Chrome default checkboxes render as DARK SQUARES
 *    even with `accent-color: #dc2626` set, because accent-color only paints
 *    the CHECKED state — the unchecked state is still the UA-dark-mode tile.
 *    Solution: hide the native checkbox entirely (`appearance: none`) and
 *    draw our own. White box with grey border when unchecked, red fill with
 *    white tick when checked. Applies to EVERY normal checkbox + radio in
 *    the app.
 *
 *    Specific custom checkboxes that already use `appearance: none` and
 *    draw their own styling (.invoice-row-checkbox, .job-board-row-checkbox,
 *    .event-day-row-checkbox) are excluded via :not() so we don't double-up.
 */
input[type="checkbox"]:not(.invoice-row-checkbox):not(.job-board-row-checkbox):not(.event-day-row-checkbox) {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(15, 23, 42, 0.32);
    border-radius: 5px;
    background: #ffffff;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    vertical-align: middle;
    margin: 0;
    flex-shrink: 0;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

input[type="checkbox"]:not(.invoice-row-checkbox):not(.job-board-row-checkbox):not(.event-day-row-checkbox):hover {
    border-color: #dc2626;
}

input[type="checkbox"]:not(.invoice-row-checkbox):not(.job-board-row-checkbox):not(.event-day-row-checkbox):checked {
    background: #dc2626;
    border-color: #b91c1c;
}

/* The white tick mark — drawn via inline SVG-as-mask so it's crisp at any DPI */
input[type="checkbox"]:not(.invoice-row-checkbox):not(.job-board-row-checkbox):not(.event-day-row-checkbox):checked::after {
    content: "";
    width: 11px;
    height: 11px;
    background: #ffffff;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.5 4.5 6.5 11.5 2.5 7.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.5 4.5 6.5 11.5 2.5 7.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

input[type="checkbox"]:not(.invoice-row-checkbox):not(.job-board-row-checkbox):not(.event-day-row-checkbox):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

/* Radio buttons — same treatment but round */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(15, 23, 42, 0.32);
    border-radius: 50%;
    background: #ffffff;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    vertical-align: middle;
    margin: 0;
    flex-shrink: 0;
}

input[type="radio"]:checked {
    border-color: #dc2626;
}

input[type="radio"]:checked::after {
    content: "";
    width: 9px;
    height: 9px;
    background: #dc2626;
    border-radius: 50%;
}

input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

/* The existing custom row-checkboxes (invoice / job-board / event-day) —
 * make sure their checked state also paints brand red. Crew's CSS uses
 * var(--app-accent) which may not be set on os. */
.invoice-row-checkbox:checked,
.job-board-row-checkbox:checked,
.event-day-row-checkbox:checked {
    background: #dc2626;
    border-color: #b91c1c;
}

/*
 * 3) Sidebar logo mark — was flashing RED on page load because the gradient
 *    `linear-gradient(135deg, #fca5a5, #991b1b)` paints behind the logo image
 *    before the <img> finishes decoding. Make the background neutral so any
 *    brief flash is white, then the image lands on top cleanly.
 */
.sidebar-logo-mark,
.sidebar-logo-mark--image {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

/*
 * 4) Sidebar footer avatar — the dark-navy gradient `linear-gradient(140deg,
 *    #1a2240, #0e1a2e)` was reading as a black square next to "Yazan Admin"
 *    on the light theme. Swap to a soft red tile with white initials.
 */
.avatar,
.sidebar__footer .avatar {
    background: linear-gradient(140deg, #dc2626, #991b1b);
    color: #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
}

/* The jbx-avatar (job-board crew tag) uses --app-accent via color-mix —
 * fall back gracefully in case the var doesn't resolve. */
.jbx-avatar {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.35), rgba(220, 38, 38, 0.15));
    color: #0f172a;
}

/*
 * Brand icon shape — make every in-app icon render as a perfect circle.
 *
 * Browser tab favicon (the icon in the actual browser tab) is rendered from
 * the raw PNG file referenced by <link rel="icon">. CSS cannot mask it round —
 * for that to look circular, the PNG itself needs to have a circular alpha
 * channel (transparent corners). To get a round tab icon, upload a circular
 * PNG via Settings → Branding → Favicon.
 *
 * The rules below cover every in-app icon container we render through HTML:
 *   - sidebar-logo-mark   (top-left brand tile in the sidebar)
 *   - settings-asset-preview img  (the small previews under each upload
 *     control on the Settings → Branding page)
 */
.sidebar-logo-mark,
.sidebar-logo-mark--image,
.sidebar-logo-mark img {
    border-radius: 50% !important;
}

.settings-asset-preview img,
.settings-asset-preview--favicon img,
.settings-asset-preview--icon img,
.settings-asset-preview--logo img {
    border-radius: 50% !important;
    object-fit: cover;
}

/*
 * Force LIGHT color-scheme everywhere.
 *
 * Crew's CSS sets `color-scheme: dark` at :root (line 83) and on dozens of
 * input/textarea/select rules. That CSS property tells the browser to render
 * form-control internals (caret, autofill background, validation styling,
 * date/time pickers, the typed-but-uncommitted text in some browsers) in
 * dark-mode style — which means LIGHT text. On a now-white background that
 * makes user input invisible.
 *
 * Override to `light` at the root AND on every form element so the browser
 * paints dark text, dark caret, and a light autofill background that matches
 * the rest of the white surface.
 */
:root,
html,
body {
    color-scheme: light !important;
}

input,
textarea,
select,
button {
    color-scheme: light !important;
    color: #0f172a;
}

/* Belt-and-braces — explicitly set text color on every common input type so
 * no specific crew rule (each setting color: var(--app-text)) can win on
 * specificity and leave the text rendered in an unexpected hue. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
input[type="url"],
input[type="month"],
input[type="week"],
textarea,
select {
    color: #0f172a !important;
    caret-color: #0f172a;
}

/* Autofill — Chrome / Brave paint a yellow background and override `color`
 * via -webkit-text-fill-color. Force both to stay dark text + light bg. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: #0f172a !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    caret-color: #0f172a;
}

/*
 * Text-selection highlight — was the OS default (blue on macOS). Swap to a
 * dimmed brand red so any selected text reads as "this app is themed".
 * Keeping the text color at dark navy so selected text stays readable on
 * top of the soft red wash.
 */
::selection {
    background: rgba(220, 38, 38, 0.25);
    color: #0f172a;
}
::-moz-selection {
    background: rgba(220, 38, 38, 0.25);
    color: #0f172a;
}