/* The two global element rules Radzen's material-base.css applied on every page. That sheet now
   loads only on the routes that render Radzen components (RadzenStylesheetRoutes), so these keep
   every other page's computed styles unchanged. They sit first in app.css, where the sheet sat in
   the cascade; #757575 is the value its placeholder variable resolved to. */
input { z-index: 1; }
input::placeholder { color: #757575; }

/* ==============================================
   CSS VARIABLES (Light Mode - Default)
   ============================================== */
:root {
    --primary-color: #00b4ff;
    --secondary-color: #0174B1;
    --bg-color: #ffffff;
    --bg-color-alt: #f8fafc;
    --text-color: #222222;
    --text-color-muted: #64748b;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --nav-bg: #fafbfc;
    --border-color: rgba(2, 6, 23, 0.08);
    --divider-color: rgba(2, 6, 23, 0.12);
    --box-shadow-light: 0 2px 16px rgba(0,0,0,0.07);
    --box-shadow-medium: 0 18px 45px rgba(2, 6, 23, 0.08);
}

/* ==============================================
   CSS VARIABLES (Dark Mode)
   ============================================== */
body.dark-mode,
html.dark-mode {
    --bg-color: #121212;
    --bg-color-alt: #1a1a1a;
    --text-color: #e0e0e0;
    --text-color-muted: #9ca3af;
    --card-bg: #1e293b;
    --input-bg: #2d2d2d;
    --nav-bg: #242424;
    --border-color: rgba(255, 255, 255, 0.10);
    --divider-color: rgba(255, 255, 255, 0.12);
    --box-shadow-light: 0 2px 16px rgba(0,0,0,0.3);
    --box-shadow-medium: 0 20px 55px rgba(0, 0, 0, 0.35);
}

/* ==============================================
   BASE BODY DARK MODE STYLES
   ============================================== */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.2s ease, color 0.2s ease;
}

body.dark-mode {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Ensure html element also has dark background to prevent white flashes */
html.dark-mode {
    background-color: var(--bg-color);
}

/* ==============================================
   EXISTING STYLES
   ============================================== */

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ==============================================
   DARK MODE - VALIDATION MESSAGES
   ============================================== */
body.dark-mode .validation-message {
    color: #f87171;
}

/* ==============================================
   DARK MODE - BOOTSTRAP OVERRIDES
   ============================================== */

/* Container backgrounds */
body.dark-mode .container,
body.dark-mode .container-fluid {
    background-color: transparent;
}

/* Cards and panels */
body.dark-mode .bg-white {
    background-color: var(--card-bg, #1e293b) !important;
}

body.dark-mode .shadow-sm {
    box-shadow: var(--box-shadow-medium) !important;
}

/* Text colors */
body.dark-mode .text-muted {
    color: var(--text-color-muted, #9ca3af) !important;
}

/* ==============================================
   RECAPTCHA BADGE - HIDE BY DEFAULT
   ============================================== */
/* We hide the badge and show disclosure text in footer instead (per Google's terms) */
.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    transition: visibility 0.3s ease, opacity 0.3s ease;
}

/* Show temporarily during form submission (controlled by JS) */
.grecaptcha-badge.show {
    visibility: visible !important;
    opacity: 1 !important;
}


body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .h1,
body.dark-mode .h2,
body.dark-mode .h3,
body.dark-mode .h4,
body.dark-mode .h5,
body.dark-mode .h6 {
    color: var(--text-color, #e0e0e0);
}

body.dark-mode p {
    color: var(--text-color, #e0e0e0);
}

/* Form controls */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: var(--input-bg, #2d2d2d);
    border-color: var(--border-color);
    color: var(--text-color, #e0e0e0);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: var(--input-bg, #2d2d2d);
    border-color: var(--primary-color);
    color: var(--text-color, #e0e0e0);
    box-shadow: 0 0 0 0.25rem rgba(0, 180, 255, 0.25);
}

body.dark-mode .form-control::placeholder {
    color: #6b7280;
}

/* Buttons */
body.dark-mode .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

body.dark-mode .btn-secondary {
    background-color: #4b5563;
    border-color: #4b5563;
}

body.dark-mode .btn-light {
    background-color: var(--card-bg, #1e293b);
    border-color: var(--border-color);
    color: var(--text-color, #e0e0e0);
}

/* Rounded cards */
body.dark-mode .rounded-4 {
    border: 1px solid var(--border-color);
}

/* Links -- exclude classes that render as styled buttons/CTAs so the rule
   does not overwrite their intentional foreground color.
   NOTE: every anchor-based CTA a component introduces must opt out here, or
   dark mode paints its label #4fc3f7 (e.g. light blue on the blue cohort
   deposit button). Longer term this wants a :where() refactor so component
   CSS wins by normal specificity instead of growing this chain. */
body.dark-mode a:not(.btn):not(.nav-link):not(.unqbd-topnav-signin):not(.unqbd-topnav-start):not(.footer-link):not(.about-social-link):not(.upgrade-prompt-btn):not(.tier-cta):not(.bridge-cta):not(.btn-lg-primary):not(.btn-lg-ghost):not(.kbh-btn):not(.kbh-readalong-all):not(.cbh-btn):not(.bottom-nav-item-pro):not(.adb-cta):not(.cl-btn):not(.cl-topbar-explore):not(.lvw-cta):not(.wsp-btn):not(.wsp-hub-card):not(.wsp-continue-card):not(.wsp-readbook-card):not(.kbh-readalong-watch):not(.app-launch-app-store-button):not(.app-launch-trial-button):not(.book-view-series-banner):not(.rjm-btn):not(.ljm-btn):not(.ljm-activity):not(.jl-before-action):not(.finn-link-button):not(.ins-btn):not(.discover-book-reminder-cta):not(.bpc-cta) {
    color: #4fc3f7;
}

body.dark-mode a:not(.btn):not(.nav-link):not(.unqbd-topnav-signin):not(.unqbd-topnav-start):not(.footer-link):not(.about-social-link):not(.upgrade-prompt-btn):not(.tier-cta):not(.bridge-cta):not(.btn-lg-primary):not(.btn-lg-ghost):not(.kbh-btn):not(.kbh-readalong-all):not(.cbh-btn):not(.bottom-nav-item-pro):not(.adb-cta):not(.cl-btn):not(.cl-topbar-explore):not(.lvw-cta):not(.wsp-btn):not(.wsp-hub-card):not(.wsp-continue-card):not(.wsp-readbook-card):not(.kbh-readalong-watch):not(.app-launch-app-store-button):not(.app-launch-trial-button):not(.book-view-series-banner):not(.rjm-btn):not(.ljm-btn):not(.ljm-activity):not(.jl-before-action):not(.finn-link-button):not(.ins-btn):not(.discover-book-reminder-cta):not(.bpc-cta):hover {
    color: #93c5fd;
}

/* ==============================================
   DARK MODE - RADZEN COMPONENTS
   ============================================== */

/* Radzen dialogs */
body.dark-mode .rz-dialog {
    background: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .rz-dialog-titlebar {
    background: rgba(15, 23, 42, 0.98) !important;
    color: var(--text-color, #e0e0e0) !important;
    border-bottom-color: var(--border-color) !important;
}

body.dark-mode .rz-dialog-content {
    background: var(--card-bg, #1e293b) !important;
    color: var(--text-color, #e0e0e0) !important;
}

/* Radzen buttons */
body.dark-mode .rz-button.rz-secondary {
    background: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color, #e0e0e0) !important;
}

body.dark-mode .rz-button.rz-light {
    background: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color, #e0e0e0) !important;
}

/* Radzen form fields */
body.dark-mode .rz-textbox,
body.dark-mode .rz-dropdown,
body.dark-mode .rz-textarea {
    background: var(--input-bg, #2d2d2d) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color, #e0e0e0) !important;
}

body.dark-mode .rz-textbox:focus,
body.dark-mode .rz-dropdown:focus,
body.dark-mode .rz-textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.2) !important;
}

/* Radzen dropdown panel */
body.dark-mode .rz-dropdown-panel {
    background: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .rz-dropdown-item {
    color: var(--text-color, #e0e0e0) !important;
}

body.dark-mode .rz-dropdown-item:hover,
body.dark-mode .rz-dropdown-item.rz-state-highlight {
    background: rgba(79, 195, 247, 0.15) !important;
    color: #4fc3f7 !important;
}

/* Radzen cards */
body.dark-mode .rz-card {
    background: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color, #e0e0e0) !important;
}

/* Radzen form field labels */
body.dark-mode .rz-formfield-label,
body.dark-mode .rz-label {
    color: var(--text-color, #e0e0e0) !important;
}

/* Radzen text components */
body.dark-mode .rz-text {
    color: inherit;
}

/* ==============================================
   CODE BLOCKS WITH SYNTAX HIGHLIGHTING
   ============================================== */

/* CodeBlock container */
.codeblock-container {
    position: relative;
    margin: 0.5rem 0 1.25rem 0;
}

.codeblock-container pre.code {
    margin: 0;
    padding: 1rem 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    overflow: auto;
}

/* Copy button */
.copy-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
    line-height: 1;
    border-radius: 6px;
    border: 1px solid var(--divider-color, #C0C0C0);
    background: #ffffff;
    color: #333;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.copy-button:hover {
    background: #f0f8ff;
    border-color: var(--primary-color, #00B4FF);
    color: var(--secondary-color, #0174B1);
    box-shadow: 0 2px 10px rgba(0, 180, 255, 0.15);
}

.copy-button:active {
    transform: translateY(1px);
}

/* Copied state */
.copy-button.copied,
.copy-button[aria-pressed="true"] {
    background: #e6f6ff;
    border-color: var(--primary-color, #00B4FF);
    color: var(--secondary-color, #0174B1);
}

/* Dark mode code blocks */
body.dark-mode .codeblock-container pre.code {
    background: #18181b;
    border-color: #404040;
}

body.dark-mode .copy-button {
    background: var(--card-bg, #2d2d2d);
    color: var(--text-color, #f0f0f0);
    border-color: var(--border-color, #404040);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

body.dark-mode .copy-button:hover {
    background: rgba(96, 165, 250, 0.12);
    border-color: #60a5fa;
    color: #e0e0e0;
    box-shadow: 0 2px 12px rgba(96, 165, 250, 0.25);
}

/* ==============================================
   Radzen Dialog Z-Index Override
   Ensure dialogs appear above navigation (1002-1010)
   ============================================== */
:root {
    --rz-dialog-mask-zindex: 9999;
    --rz-dialog-zindex: 10000;
}