/*
 * Dark theme. Active when <html data-theme="dark"> (set by js/theme.js).
 * Header stays black (same as light-mode navbar-inverse against a white page).
 * Page body uses the former navbar grey (#222) so the black bar still contrasts.
 * Must load after bootstrap.css and Site.css.
 */

html[data-theme="dark"] {
    --hdm-bg: #222222;
    --hdm-surface: #2e2e2e;
    --hdm-surface-2: #3a3a3a;
    --hdm-border: #4a4a4a;
    --hdm-text: #e2e2e2;
    --hdm-text-muted: #9a9a9a;
    --hdm-link: #d4d4d4;
    --hdm-link-hover: #ffffff;
    background-color: var(--hdm-bg);
}

html[data-theme="dark"] body {
    /* Keep body transparent so the z-index:-1 NHL watermark is not painted over. */
    background-color: transparent;
    color: var(--hdm-text);
}

html[data-theme="dark"] .navbar-inverse {
    background-color: #000;
    background-image: none;
    border-color: #000;
}
html[data-theme="dark"] .navbar-inverse .navbar-collapse,
html[data-theme="dark"] .navbar-inverse .navbar-form {
    border-color: #000;
}
html[data-theme="dark"] .navbar-toggle,
html[data-theme="dark"] .navbar-inverse .navbar-toggle {
    border-color: #ffffff;
}
html[data-theme="dark"] .navbar-toggle .icon-bar,
html[data-theme="dark"] .navbar-inverse .navbar-toggle .icon-bar {
    background-color: #ffffff !important;
}

/* ---------- Theme toggle (lives in the header, styled in both themes) ---------- */
.hdm-theme-toggle {
    background: none;
    border: 0;
    padding: 15px 15px;
    line-height: 20px;
    color: #9d9d9d;
    cursor: pointer;
}
.hdm-theme-toggle:hover,
.hdm-theme-toggle:focus { color: #ffffff; outline: none; }
.hdm-theme-toggle svg { width: 18px; height: 18px; vertical-align: -3px; fill: currentColor; }
.hdm-theme-toggle .hdm-theme-icon-sun { display: none; }
html[data-theme="dark"] .hdm-theme-toggle .hdm-theme-icon-sun { display: inline; }
html[data-theme="dark"] .hdm-theme-toggle .hdm-theme-icon-moon { display: none; }
.hdm-theme-toggle .hdm-theme-label { margin-left: 6px; }

/* ---------- Typography / links ---------- */
:where(html[data-theme="dark"]) a { color: var(--hdm-link); }
:where(html[data-theme="dark"]) a:hover,
:where(html[data-theme="dark"]) a:focus { color: var(--hdm-link-hover); }

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .help-block { color: var(--hdm-text-muted); }
html[data-theme="dark"] .text-primary { color: #6fa8dc; }
html[data-theme="dark"] .text-danger { color: #e06666; }
html[data-theme="dark"] .text-success { color: #7cc47c; }
html[data-theme="dark"] .text-warning { color: #e0b050; }
html[data-theme="dark"] .text-info { color: #7fc3e0; }
html[data-theme="dark"] hr { border-top-color: var(--hdm-border); }
html[data-theme="dark"] legend { color: var(--hdm-text); border-bottom-color: var(--hdm-border); }
html[data-theme="dark"] .page-header { border-bottom-color: var(--hdm-border); }
html[data-theme="dark"] code { background-color: #2a1f24; color: #f08cae; }
html[data-theme="dark"] pre { background-color: var(--hdm-surface); border-color: var(--hdm-border); color: var(--hdm-text); }
html[data-theme="dark"] .close { color: #fff; text-shadow: none; }

/* ---------- Site.css surfaces ---------- */
html[data-theme="dark"] .div-sort-container,
html[data-theme="dark"] .hdm-page-title,
html[data-theme="dark"] .hdm-mobile-footer,
html[data-theme="dark"] .hdm-mobile-header { background-color: var(--hdm-bg); border-color: var(--hdm-border); }
html[data-theme="dark"] .jumbotron,
html[data-theme="dark"] .jumbotron-hdm { background-color: var(--hdm-surface); }
html[data-theme="dark"] .hdm-table { background-color: var(--hdm-surface); border-color: var(--hdm-border); }
html[data-theme="dark"] .hdm-title-padding,
html[data-theme="dark"] .hdm-Invited { border-bottom-color: var(--hdm-border); }
html[data-theme="dark"] .watermark { color: #ffffff; opacity: 0.12; }
html[data-theme="dark"] .hdm-icon-color { color: #bdbdbd; }
html[data-theme="dark"] .hdm-icon-color:hover { color: #d9534f; }
html[data-theme="dark"] .hdm-required { color: #e06666; }

/* ---------- Forms ---------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--hdm-surface);
    border-color: #444;
    color: var(--hdm-text);
}
html[data-theme="dark"] .form-control:focus { border-color: #6a8fb5; box-shadow: inset 0 1px 1px rgba(0,0,0,.3), 0 0 6px rgba(102,175,233,.4); }
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #777; }
html[data-theme="dark"] .form-control[disabled],
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] fieldset[disabled] .form-control { background-color: var(--hdm-surface-2); color: var(--hdm-text-muted); }
html[data-theme="dark"] .input-group-addon { background-color: var(--hdm-surface-2); border-color: #444; color: var(--hdm-text); }
html[data-theme="dark"] option { background-color: var(--hdm-surface); color: var(--hdm-text); }

html[data-theme="dark"] input[type="checkbox"] {
    color-scheme: light;
    accent-color: #222;
    background-color: #ffffff;
}
html[data-theme="dark"] input[type="checkbox"] + label:before {
    border-color: #ffffff;
    color: transparent;
}
html[data-theme="dark"] input[type="checkbox"]:checked + label:before {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #222;
}
html[data-theme="dark"] input[type="checkbox"]:disabled + label:before,
html[data-theme="dark"] input[type="checkbox"]:checked:disabled + label:before {
    background-color: #b8b8b8;
    border-color: #b8b8b8;
    color: #222;
}

/* ---------- Tables ---------- */
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] .table > tfoot > tr > th,
html[data-theme="dark"] .table > thead > tr > td,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tfoot > tr > td,
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > thead > tr > th,
html[data-theme="dark"] .table-bordered > tbody > tr > td { border-color: var(--hdm-border); }
html[data-theme="dark"] .table > thead > tr > th { border-bottom-color: #444; }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--hdm-surface); }
html[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: var(--hdm-surface-2); }
html[data-theme="dark"] .table > thead > tr > .active, html[data-theme="dark"] .table > tbody > tr > .active,
html[data-theme="dark"] .table > tbody > tr.active > td { background-color: var(--hdm-surface-2); }
html[data-theme="dark"] .table > tbody > tr.success > td, html[data-theme="dark"] .table > tbody > tr > td.success { background-color: rgba(60, 118, 61, .35); }
html[data-theme="dark"] .table > tbody > tr.info > td, html[data-theme="dark"] .table > tbody > tr > td.info { background-color: rgba(49, 112, 143, .35); }
html[data-theme="dark"] .table > tbody > tr.warning > td, html[data-theme="dark"] .table > tbody > tr > td.warning { background-color: rgba(138, 109, 59, .4); }
html[data-theme="dark"] .table > tbody > tr.danger > td, html[data-theme="dark"] .table > tbody > tr > td.danger { background-color: rgba(169, 68, 66, .4); }

/* ---------- Bootstrap components ---------- */
html[data-theme="dark"] .modal-content { background-color: var(--hdm-surface); border-color: var(--hdm-border); }
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--hdm-border); }

html[data-theme="dark"] .dropdown-menu { background-color: var(--hdm-surface); border-color: var(--hdm-border); }
html[data-theme="dark"] .dropdown-menu > li > a { color: var(--hdm-text); }
html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus { background-color: var(--hdm-surface-2); color: #fff; }
html[data-theme="dark"] .dropdown-menu .divider { background-color: var(--hdm-border); }
html[data-theme="dark"] .dropdown-header { color: var(--hdm-text-muted); }

html[data-theme="dark"] .nav:not(.navbar-nav) > li > a:hover,
html[data-theme="dark"] .nav:not(.navbar-nav) > li > a:focus { background-color: var(--hdm-surface-2); }
html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--hdm-border); }
html[data-theme="dark"] .nav-tabs > li > a:hover { border-color: var(--hdm-border); }
html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a:hover,
html[data-theme="dark"] .nav-tabs > li.active > a:focus { background-color: var(--hdm-bg); border-color: var(--hdm-border); border-bottom-color: transparent; color: var(--hdm-text); }
html[data-theme="dark"] .nav-pills > li.active > a,
html[data-theme="dark"] .nav-pills > li.active > a:hover,
html[data-theme="dark"] .nav-pills > li.active > a:focus { color: #fff; }

html[data-theme="dark"] .panel { background-color: var(--hdm-surface); border-color: var(--hdm-border); }
html[data-theme="dark"] .panel-default > .panel-heading { background-color: var(--hdm-surface-2); border-color: var(--hdm-border); color: var(--hdm-text); }
html[data-theme="dark"] .panel-footer { background-color: var(--hdm-surface-2); border-top-color: var(--hdm-border); }
html[data-theme="dark"] .well { background-color: var(--hdm-surface); border-color: var(--hdm-border); }
html[data-theme="dark"] .list-group-item { background-color: var(--hdm-surface); border-color: var(--hdm-border); color: var(--hdm-text); }
html[data-theme="dark"] a.list-group-item:hover { background-color: var(--hdm-surface-2); }
html[data-theme="dark"] .thumbnail { background-color: var(--hdm-surface); border-color: var(--hdm-border); }
html[data-theme="dark"] .breadcrumb { background-color: var(--hdm-surface); }
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span { background-color: var(--hdm-surface); border-color: var(--hdm-border); color: var(--hdm-text); }
html[data-theme="dark"] .pagination > li > a:hover { background-color: var(--hdm-surface-2); }
html[data-theme="dark"] .popover { background-color: var(--hdm-surface); border-color: var(--hdm-border); color: var(--hdm-text); }
html[data-theme="dark"] .popover-title { background-color: var(--hdm-surface-2); border-bottom-color: var(--hdm-border); }

html[data-theme="dark"] .alert-info,    html[data-theme="dark"] .bg-info    { background-color: rgba(49, 112, 143, .25); border-color: rgba(49, 112, 143, .6); color: #a9d6ec; }
html[data-theme="dark"] .alert-success, html[data-theme="dark"] .bg-success { background-color: rgba(60, 118, 61, .25); border-color: rgba(60, 118, 61, .6); color: #a8dca8; }
html[data-theme="dark"] .alert-warning, html[data-theme="dark"] .bg-warning { background-color: rgba(138, 109, 59, .3); border-color: rgba(138, 109, 59, .7); color: #ecd29c; }
html[data-theme="dark"] .alert-danger,  html[data-theme="dark"] .bg-danger  { background-color: rgba(169, 68, 66, .3); border-color: rgba(169, 68, 66, .7); color: #f0aaa8; }

/* Pikaday date picker */
html[data-theme="dark"] .pika-single { background: var(--hdm-surface); border-color: var(--hdm-border); color: var(--hdm-text); }
html[data-theme="dark"] .pika-label { background-color: var(--hdm-surface); }
html[data-theme="dark"] .pika-table th { color: var(--hdm-text-muted); }
html[data-theme="dark"] .pika-button { background: var(--hdm-surface-2); color: var(--hdm-text); }
html[data-theme="dark"] .pika-prev, html[data-theme="dark"] .pika-next { filter: invert(1); }

/* ---------- View-level <style> blocks ---------- */
html[data-theme="dark"] #exTab3 .tab-content { background-color: var(--hdm-surface); color: var(--hdm-text); }
html[data-theme="dark"] .tabs label { background-color: var(--hdm-surface-2); border-color: var(--hdm-border); }
html[data-theme="dark"] .tabs .tab-content { background-color: var(--hdm-surface); border-color: var(--hdm-border); }
html[data-theme="dark"] .tabs input[type="radio"]:checked + label { background-color: var(--hdm-surface); border-bottom-color: var(--hdm-surface); }
html[data-theme="dark"] .dropdown-content { background-color: var(--hdm-surface-2); box-shadow: 0 6px 8px rgba(0,0,0,.6); }
html[data-theme="dark"] .dropdown-content a { color: var(--hdm-text); }
html[data-theme="dark"] .dropdown-content a:hover { background-color: #333; }
html[data-theme="dark"] .hdm-sign-check-in { background-color: var(--hdm-surface-2); color: var(--hdm-text); }
html[data-theme="dark"] .hdm-table-border { border-bottom-color: var(--hdm-border); }
html[data-theme="dark"] .hdm-table-border-thin { background-color: var(--hdm-border); }
html[data-theme="dark"] .hdm-signup-header-sm,
html[data-theme="dark"] .hdm-Skaters { border-bottom-color: var(--hdm-border); }
html[data-theme="dark"] tr.hdm-break-even span { background: var(--hdm-bg); }
html[data-theme="dark"] tr.hdm-break-even, html[data-theme="dark"] tr.hdm-break-even td { color: #4caf63; }
html[data-theme="dark"] tr.hdm-break-even-under, html[data-theme="dark"] tr.hdm-break-even-under td { color: #e05a5a; }
html[data-theme="dark"] .hdm-close-skate-table thead th,
html[data-theme="dark"] .hdm-close-skate-mobile-head { background-color: var(--hdm-bg); border-bottom-color: #444; }
html[data-theme="dark"] .hdm-referrer-head,
html[data-theme="dark"] .hdm-referrer-playerhead { background: var(--hdm-bg); }
html[data-theme="dark"] .hdm-confirm-card { background: var(--hdm-surface); border-color: var(--hdm-border); }
html[data-theme="dark"] .hdm-confirm-sub,
html[data-theme="dark"] .hdm-confirm-code { color: var(--hdm-text-muted); }
html[data-theme="dark"] .hdm-confirm-alert { background: var(--hdm-surface-2); border-color: var(--hdm-border); }
html[data-theme="dark"] .hdm-confirm-alert--warning,
html[data-theme="dark"] .hdm-hdmcode-warning { background: rgba(138, 109, 59, .3); border-color: rgba(138, 109, 59, .7); color: #ecd29c; }
html[data-theme="dark"] .hdm-invite-container { background-color: var(--hdm-surface); }
html[data-theme="dark"] .hdm-teama-title,
html[data-theme="dark"] .hdm-team-head-a { color: var(--hdm-bg); }
html[data-theme="dark"] .hdm-team-link { color: #ffffff !important; }
html[data-theme="dark"] .hdm-team-link[style*="green"] { color: green !important; }
html[data-theme="dark"] .hdm-team-link[style*="orange"] { color: orange !important; }
html[data-theme="dark"] .hdm-team-split-table,
html[data-theme="dark"] .hdm-team-split-table > tbody > tr > td,
html[data-theme="dark"] .hdm-split-inner-table { border-color: var(--hdm-border); }
html[data-theme="dark"] .hdm-skates-header { border-bottom-color: #555; }
html[data-theme="dark"] .hdm-operator-heading div { border-bottom-color: #555; }

/* ---------- Inline style="" colors in views ---------- */
/* Plain white = page background. */
html[data-theme="dark"] :is(div, table, thead, tbody, tr, td, th, footer, section, form)[style*="background-color: white" i]:not([style*="whitesmoke" i]),
html[data-theme="dark"] :is(div, table, thead, tbody, tr, td, th, footer, section, form)[style*="background-color:white" i]:not([style*="whitesmoke" i]),
html[data-theme="dark"] :is(div, table, thead, tbody, tr, td, th, footer, section, form)[style*="background-color: #fff;" i],
html[data-theme="dark"] :is(div, table, thead, tbody, tr, td, th, footer, section, form)[style*="background-color: #ffffff" i],
html[data-theme="dark"] :is(div, table, thead, tbody, tr, td, th, footer, section, form)[style*="background: #fff;" i] {
    background-color: var(--hdm-bg) !important;
}
/* Light greys = raised surface. */
html[data-theme="dark"] :is(div, table, thead, tbody, tr, td, th, footer, section, form)[style*="whitesmoke" i],
html[data-theme="dark"] :is(div, table, thead, tbody, tr, td, th, footer, section, form)[style*="#f4f4f4" i],
html[data-theme="dark"] :is(div, table, thead, tbody, tr, td, th, footer, section, form)[style*="#f6f6f6" i],
html[data-theme="dark"] :is(div, table, thead, tbody, tr, td, th, footer, section, form)[style*="#f9f9f9" i],
html[data-theme="dark"] :is(div, table, thead, tbody, tr, td, th, footer, section, form)[style*="rgb(230, 230, 230)" i],
html[data-theme="dark"] :is(div, table, thead, tbody, tr, td, th, footer, section, form)[style*="rgb(230,230,230)" i] {
    background-color: var(--hdm-surface-2) !important;
}
/* Inactive-row greys. */
html[data-theme="dark"] :is(div, table, tr, td, th)[style*="background-color: #eaeaea" i],
html[data-theme="dark"] :is(div, table, tr, td, th)[style*="background-color: #f8f8f8" i] {
    background-color: var(--hdm-surface-2) !important;
}
/* Close-skate row tones. */
html[data-theme="dark"] tr[style*="#f4c7c7" i] { background-color: rgba(169, 50, 50, .4) !important; }
html[data-theme="dark"] tr[style*="#f7d9a8" i] { background-color: rgba(190, 120, 30, .35) !important; }
/* Hairline dividers drawn as black cells. */
html[data-theme="dark"] td[style*="background-color: black" i] { background-color: #555 !important; }
html[data-theme="dark"] [style*="solid 1px #eaeaea" i] { border-color: var(--hdm-border) !important; }
html[data-theme="dark"] :is(div, td, th, span, p)[style*="color: black" i]:not([style*="background-color: black" i]) { color: var(--hdm-text) !important; }
html[data-theme="dark"] td[style*="color: #333"] { color: #b8b8b8 !important; }