/* ============================================================================
   Dark theme — the parts of the student app that no colour token reaches.

   The dark palette itself lives with the light tokens it replaces: app.css
   (:root, mirrored in Mobile/wwwroot/css/mobile-app.css) and the feature
   stylesheets that scope their own tokens (student-dashboard.css --hub-*,
   grammar.css, word-practice.css --wp-*, home-styles.css --rp-*, …). Every
   feature rule reads a token, so it follows the system setting by itself.

   What is left is the chrome that has no token: Bootstrap 5.0 (no data-bs-theme
   yet), the document background and native form controls, scrollbars, focus
   rings. That is this file.

   Gate: every rule is under `html.theme-dark`. The hosts render that class for
   a saved "dark" choice (t_user.ThemePreference, Profile > Appearance / the
   user menu), and js/theme.js adds it for "system" when the OS is dark; a
   "light" choice pins light. Only signed-in student pages and the account pages
   take part (Components/App.razor, the app's index.html); admin and marketing
   pages carry no class and stay light.

   Loaded LAST in both hosts so these overrides win on specificity + order.
   ============================================================================ */


/* ---- document ---- */

html.theme-dark {
    /* Native controls (inputs, selects, scrollbars, <video> chrome) follow. */
    color-scheme: dark;
    /* Bootstrap 5.3 names some feature css reads with a grey fallback (grammar.css
       var(--bs-secondary-color, #6b7280)); 5.0 never defines them, so define them here. */
    --bs-body-color: var(--hub-ink);
    --bs-body-bg: var(--hub-card);
    --bs-secondary-color: var(--hub-ink-3);
    --bs-border-color: var(--hub-line);
    --bs-tertiary-bg: var(--bg-tertiary);
    background: var(--hub-paper);
}

html.theme-dark body {
    background: var(--hub-paper);
    color: var(--hub-ink);
}

/* Links without their own colour (Bootstrap reboot paints them #0d6efd). */
html.theme-dark a:not([class]) {
    color: var(--hub-cobalt);
}

html.theme-dark hr {
    border-top-color: var(--hub-line-2);
    opacity: 1;
}

html.theme-dark ::selection {
    background: var(--hub-cobalt-soft);
    color: var(--hub-ink);
}

html.theme-dark ::placeholder {
    color: var(--hub-ink-4);
    opacity: 1;
}

/* app.css scrollbars (Chromium / Firefox) */
html.theme-dark ::-webkit-scrollbar-track {
    background: var(--hub-paper-2);
}

html.theme-dark ::-webkit-scrollbar-thumb {
    border-color: var(--hub-paper-2);
}

html.theme-dark * {
    scrollbar-color: var(--hub-line-2) var(--hub-paper-2);
}

/* app.css focus ring used a white halo. */
html.theme-dark .btn:focus,
html.theme-dark .btn:active:focus,
html.theme-dark .btn-link.nav-link:focus,
html.theme-dark .form-control:focus,
html.theme-dark .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--hub-paper), 0 0 0 0.25rem var(--primary-light);
}

/* ---- Bootstrap 5.0 components ---- */

html.theme-dark .card {
    background-color: var(--hub-card);
    border-color: var(--hub-line);
    color: var(--hub-ink);
}

html.theme-dark .card-header,
html.theme-dark .card-footer {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--hub-line);
}

html.theme-dark .form-control,
html.theme-dark .form-select,
html.theme-dark .form-control:focus,
html.theme-dark .form-select:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--hub-line-2);
    color: var(--hub-ink);
}

html.theme-dark .form-control:disabled,
html.theme-dark .form-control[readonly],
html.theme-dark .form-select:disabled {
    background-color: var(--hub-paper-2);
    color: var(--hub-ink-3);
}

/* Bootstrap's select caret is an inline SVG drawn in #343a40. */
html.theme-dark .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c9c2b4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

html.theme-dark .form-check-input {
    background-color: var(--bg-tertiary);
    border-color: var(--hub-line-2);
}

html.theme-dark .form-check-input:checked {
    background-color: var(--hub-cobalt);
    border-color: var(--hub-cobalt);
}

html.theme-dark .input-group-text {
    background-color: var(--hub-paper-2);
    border-color: var(--hub-line-2);
    color: var(--hub-ink-2);
}

html.theme-dark .form-floating > label,
html.theme-dark .form-label,
html.theme-dark .form-text {
    color: var(--hub-ink-2);
}

html.theme-dark .form-floating > .form-control:focus ~ label,
html.theme-dark .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--hub-ink-3);
}

html.theme-dark .modal-content,
html.theme-dark .offcanvas,
html.theme-dark .toast,
html.theme-dark .dropdown-menu,
html.theme-dark .popover {
    background-color: var(--hub-card);
    border-color: var(--hub-line);
    color: var(--hub-ink);
}

html.theme-dark .modal-header,
html.theme-dark .modal-footer,
html.theme-dark .toast-header,
html.theme-dark .offcanvas-header {
    border-color: var(--hub-line);
    background-color: transparent;
    color: var(--hub-ink);
}

html.theme-dark .dropdown-item {
    color: var(--hub-ink);
}

html.theme-dark .dropdown-item:hover,
html.theme-dark .dropdown-item:focus {
    background-color: var(--hub-paper-2);
    color: var(--hub-ink);
}

html.theme-dark .dropdown-divider {
    border-top-color: var(--hub-line);
}

html.theme-dark .list-group-item {
    background-color: var(--hub-card);
    border-color: var(--hub-line);
    color: var(--hub-ink);
}

html.theme-dark .list-group-item-action:hover,
html.theme-dark .list-group-item-action:focus {
    background-color: var(--hub-paper-2);
    color: var(--hub-ink);
}

html.theme-dark .table {
    color: var(--hub-ink);
    border-color: var(--hub-line);
}

html.theme-dark .table > :not(:last-child) > :last-child > * {
    border-bottom-color: var(--hub-line-2);
}

html.theme-dark .table-striped > tbody > tr:nth-of-type(odd),
html.theme-dark .table-hover > tbody > tr:hover {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.04);
    color: var(--hub-ink);
}

html.theme-dark .table-light,
html.theme-dark .table-light > th,
html.theme-dark .table-light > td {
    --bs-table-bg: var(--hub-paper-2);
    color: var(--hub-ink);
}

html.theme-dark .progress {
    background-color: var(--hub-line);
}

html.theme-dark .accordion-item,
html.theme-dark .accordion-button {
    background-color: var(--hub-card);
    border-color: var(--hub-line);
    color: var(--hub-ink);
}

html.theme-dark .accordion-button:not(.collapsed) {
    background-color: var(--hub-cobalt-soft);
    color: var(--hub-ink);
}

html.theme-dark .nav-tabs {
    border-bottom-color: var(--hub-line);
}

html.theme-dark .nav-tabs .nav-link.active {
    background-color: var(--hub-card);
    border-color: var(--hub-line) var(--hub-line) var(--hub-card);
    color: var(--hub-ink);
}

html.theme-dark .nav-tabs .nav-link:hover {
    border-color: var(--hub-line);
}

html.theme-dark .page-link {
    background-color: var(--hub-card);
    border-color: var(--hub-line);
    color: var(--hub-cobalt);
}

html.theme-dark .breadcrumb-item + .breadcrumb-item::before {
    color: var(--hub-ink-3);
}

html.theme-dark .btn-close {
    /* the X is a black SVG */
    filter: invert(1) grayscale(100%) brightness(150%);
}

html.theme-dark .btn-light {
    background-color: var(--bg-tertiary);
    border-color: var(--hub-line-2);
    color: var(--hub-ink);
}

html.theme-dark .btn-light:hover,
html.theme-dark .btn-light:focus {
    background-color: var(--hub-line);
    border-color: var(--hub-line-2);
    color: var(--hub-ink);
}

html.theme-dark .btn-outline-secondary {
    color: var(--hub-ink-2);
    border-color: var(--hub-line-2);
}

html.theme-dark .btn-outline-secondary:hover {
    background-color: var(--hub-line);
    border-color: var(--hub-line-2);
    color: var(--hub-ink);
}

/* Bootstrap blue outline (subscription plans' Subscribe, upsell): 3.6:1 on a card; lifted cobalt is 5.2:1. */
html.theme-dark .btn-outline-primary {
    color: var(--hub-cobalt);
    border-color: var(--hub-cobalt);
}

html.theme-dark .btn-outline-primary:hover,
html.theme-dark .btn-outline-primary:focus {
    background-color: #1289E7;
    border-color: #1289E7;
    color: #fff;
}

html.theme-dark .btn-outline-dark {
    color: var(--hub-ink);
    border-color: var(--hub-ink-2);
}

html.theme-dark .btn-outline-dark:hover {
    background-color: var(--hub-ink);
    color: var(--hub-paper);
}

html.theme-dark .btn-link {
    color: var(--hub-cobalt);
}

/* Contextual alerts: Bootstrap paints a pale tint with dark text. */
html.theme-dark .alert-primary,
html.theme-dark .alert-info {
    background-color: var(--blue-50);
    border-color: var(--blue-100);
    color: var(--secondary-dark);
}

html.theme-dark .alert-secondary,
html.theme-dark .alert-light {
    background-color: var(--hub-paper-2);
    border-color: var(--hub-line);
    color: var(--hub-ink-2);
}

html.theme-dark .alert-success {
    background-color: var(--emerald-100);
    border-color: var(--hub-fern-line);
    color: var(--emerald-800);
}

html.theme-dark .alert-warning {
    background-color: var(--amber-50);
    border-color: var(--amber-200);
    color: var(--amber-800);
}

html.theme-dark .alert-danger {
    background-color: var(--red-50);
    border-color: var(--red-200);
    color: var(--red-700);
}

html.theme-dark .alert-dark {
    background-color: var(--hub-line);
    border-color: var(--hub-line-2);
    color: var(--hub-ink);
}

html.theme-dark .alert .alert-link {
    color: inherit;
}

/* Utility classes */
html.theme-dark .bg-white { background-color: var(--hub-card) !important; }
html.theme-dark .bg-light { background-color: var(--hub-paper-2) !important; }
html.theme-dark .text-dark { color: var(--hub-ink) !important; }
html.theme-dark .text-body { color: var(--hub-ink) !important; }
html.theme-dark .text-muted { color: var(--hub-ink-3) !important; }
html.theme-dark .text-secondary { color: var(--hub-ink-2) !important; }
html.theme-dark .text-black-50 { color: var(--hub-ink-3) !important; }
html.theme-dark .border { border-color: var(--hub-line) !important; }
html.theme-dark .border-top { border-top-color: var(--hub-line) !important; }
html.theme-dark .border-bottom { border-bottom-color: var(--hub-line) !important; }
html.theme-dark .border-start { border-left-color: var(--hub-line) !important; }
html.theme-dark .border-end { border-right-color: var(--hub-line) !important; }
html.theme-dark .badge.bg-light { color: var(--hub-ink) !important; }
html.theme-dark .badge.bg-secondary { background-color: var(--hub-line-2) !important; color: var(--hub-ink); }

/* .btn-secondary / .btn-dark fills are mid-greys in Bootstrap; keep their white text legible. */
html.theme-dark .btn-secondary {
    background-color: var(--hub-line-2);
    border-color: var(--hub-line-2);
    color: var(--hub-ink);
}

html.theme-dark .btn-secondary:hover,
html.theme-dark .btn-secondary:focus {
    background-color: #574F44;
    border-color: #574F44;
    color: var(--hub-ink);
}

/* ---- shell ---- */

/* The student dashboard wash (home-styles.css .student-app): radial glows over
   a paper→white gradient. In the dark it is paper with the same two glows. */
html.theme-dark .student-app {
    background:
        radial-gradient(1000px 420px at 85% -80px, rgba(232, 114, 46, 0.10), transparent 65%),
        radial-gradient(900px 400px at 8% -60px, rgba(46, 151, 236, 0.12), transparent 60%),
        var(--hub-paper);
}

/* Phone bottom nav (student-nav-menu.css / navbar-styles.css): the inactive labels are
   gray-400, a placeholder shade that is 2.5:1 on white today; on the dark bar they read
   as muted ink (5.7:1) instead. */
html.theme-dark .mobile-bottom-nav .mobile-nav-item:not(.active) {
    color: var(--hub-ink-3);
}

/* The reconnect banner (StudentLayout) is a light-yellow strip with dark text. */
html.theme-dark #blazor-error-ui {
    background: var(--amber-50);
    color: var(--hub-ink);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.5);
}

html.theme-dark #blazor-error-ui .reload,
html.theme-dark #blazor-error-ui .dismiss {
    color: var(--hub-cobalt);
}

/* Images and embeds rendered on light cards keep their own colours; tone down
   stand-alone hairline images (dividers drawn as 1px PNGs) a little. */
html.theme-dark img[src$=".svg"].invert-in-dark {
    filter: invert(1) hue-rotate(180deg);
}