/* ===========================================================================
   Shared "clean card surface" treatment.

   This is the single place that styles the card surfaces used across the
   menu / starter pages (home, /trainers, /algs, /profile-algs, /reconstructor,
   /daily-puzzles, /profile).

   To change the surface tint for ALL of them at once, edit the
   --card-tint variable in app/templates/base.html (:root). Everything here
   derives its tint from --card-surface, which is built from --card-tint.

   Loaded at the end of each starter template so it takes precedence over the
   older, per-page accent-bordered card rules (and over the theme-scoped
   .hero-card / .card border overrides in base.html).
   =========================================================================== */

/* ===========================================================================
   The one unified "rounded panel" treatment.

   Every menu page (home, /trainers, /algs, /tools, /daily-puzzles, /profile,
   /reconstructor) wraps its content sections in a .card.surface-card panel.
   This single rule gives them ALL the same clearly-rounded corners (16px) plus
   the translucent secondary-colour tint, regardless of which other stylesheets
   a given page also loads. Item cards inside are handled separately below.
   =========================================================================== */
.surface-card,
.card.surface-card,
[data-theme="dark"] .card.surface-card,
[data-theme="oled"] .card.surface-card {
    background-color: transparent !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px var(--shadow-sm) !important;
    overflow: hidden;
    position: relative;
}

/* The inner body carries the translucent secondary-colour tint. It inherits the
   panel's rounded corners, so the tint always draws rounded even if the parent's
   overflow clip were overridden elsewhere. (No overflow clip here: content that
   must escape the card, e.g. popovers/tooltips, stays visible, and the parent
   .card already clips to the rounded panel.) */
.surface-card > .card-body {
    background-color: var(--card-surface, rgba(var(--accent-color-rgb), 0.08)) !important;
    border-radius: inherit;
}

/* Card headers inside a rounded surface panel round their TOP corners to match
   the panel (the daily "Current Puzzle Display" header), but keep the bottom
   square so they sit flush against the body tint. */
.surface-card .card-header {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Surface cards that are NOT Bootstrap .card elements have no .card-body to
   carry the tint, so paint the whole surface (e.g. reconstructor panels). */
.surface-card:not(.card),
[data-theme="dark"] .surface-card:not(.card),
[data-theme="oled"] .surface-card:not(.card) {
    background-color: var(--card-surface, rgba(var(--accent-color-rgb), 0.08)) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px var(--shadow-sm) !important;
}

/* ---------------------------------------------------------------------------
   Item cards (algorithm / trainer cards).
   These sit inside the container surfaces and must still clearly read as
   cards. They use an elevated surface (lighter than the section behind them)
   plus a hairline edge and a stronger drop shadow, so they stand out clearly
   in light, dark and OLED mode.
   --------------------------------------------------------------------------- */
.trainer-card,
.algset-card,
.tool-card {
    border: 1px solid var(--card-item-border, transparent) !important;
    border-radius: var(--card-radius, 8px) !important;
    background-color: var(--card-item-bg, var(--card-bg)) !important;
    box-shadow: var(--card-item-shadow, 0 2px 12px var(--shadow-sm)) !important;
}

/* Keep the elevated shadow on hover (the page-level hover shadows were too weak
   in dark/OLED and would make the card look less raised while hovering). */
.trainer-card:hover,
.algset-card:hover,
.tool-card:hover {
    box-shadow: var(--card-item-shadow, 0 2px 12px var(--shadow-sm)) !important;
}

/* Stat cards: keep their own colour, but give them the same elevated edge +
   shadow so they clearly read as raised cards. */
.stat-card,
.card.stat-card,
.stat-card.bg-light {
    border: 1px solid var(--card-item-border, transparent) !important;
    border-radius: var(--card-radius, 8px) !important;
    box-shadow: var(--card-item-shadow, 0 2px 12px var(--shadow-sm)) !important;
}

/* ---------------------------------------------------------------------------
   Reconstructor — scramble / reconstruction / live-preview sub-surfaces.
   These inner cards sit inside the .surface-card section and get the same
   elevated treatment as the item cards (no old accent borders).
   --------------------------------------------------------------------------- */
.reconstructor-editor-card,
.reconstructor-player-card {
    border: 1px solid var(--card-item-border, transparent) !important;
    border-radius: var(--card-radius, 8px) !important;
    background-color: var(--card-item-bg, var(--card-bg)) !important;
    box-shadow: var(--card-item-shadow, 0 2px 12px var(--shadow-sm)) !important;
}

.reconstructor-textarea,
.reconstructor-text-input {
    border: 1px solid var(--card-item-border, transparent) !important;
    border-radius: calc(var(--card-radius, 8px) - 2px) !important;
}
/* Give the scramble input a theme-aware inset field on the lighter card
   (the solution textarea stays transparent on purpose for its ghost overlay). */
.reconstructor-text-input {
    background-color: var(--bg-secondary) !important;
}

/* The box that hosts the live-preview cube. */
.reconstructor-player-surface {
    border: 1px solid var(--card-item-border, transparent) !important;
    border-radius: var(--card-radius, 8px) !important;
    background: var(--bg-secondary) !important;
}

/* ---------------------------------------------------------------------------
   Daily puzzles — active puzzle display + its inner cards.
   .surface-card is added to the wrapping "Current Puzzle Display" card; the
   styles below clean up the card header, the outer .daily-puzzle-card frame,
   and the inner case/player cards.
   --------------------------------------------------------------------------- */
#daily-puzzles-root .card-header {
    background: transparent !important;
    border: none !important;
}

.daily-puzzle-card {
    background-color: transparent !important;
    border: none !important;
    border-radius: var(--card-radius, 8px) !important;
    box-shadow: none !important;
}

.daily-puzzle-card .card {
    border: 1px solid var(--card-item-border, transparent) !important;
    border-radius: var(--card-radius, 8px) !important;
    background-color: var(--card-item-bg, var(--card-bg)) !important;
    box-shadow: var(--card-item-shadow, 0 2px 12px var(--shadow-sm)) !important;
}

.daily-puzzle-card .card-body {
    background-color: transparent !important;
}

/* ---------------------------------------------------------------------------
   Algorithm template pages (/algs/<...> and /profile/<u>/algs/<...>).
   The section frames become borderless translucent surfaces; the algorithm
   cards inside get the elevated item-card treatment. Coloured state/selected
   cards keep their own semantic rules (higher specificity wins).
   --------------------------------------------------------------------------- */
/* Top sections (header, case details, no-selection placeholder): keep the
   translucent secondary-colour accent surface. */
.algs-header,
.case-details-section,
.no-selection-section,
[data-theme="dark"] .algs-header,
[data-theme="dark"] .case-details-section,
[data-theme="dark"] .no-selection-section,
[data-theme="oled"] .algs-header,
[data-theme="oled"] .case-details-section,
[data-theme="oled"] .no-selection-section {
    background-color: var(--card-surface, rgba(var(--accent-color-rgb), 0.08)) !important;
    border: none !important;
    border-radius: var(--card-radius, 8px) !important;
    box-shadow: 0 2px 12px var(--shadow-sm) !important;
}

/* Bottom case grid: neutral gray so the red/yellow/green case cards blend in. */
.grid-section,
[data-theme="dark"] .grid-section,
[data-theme="oled"] .grid-section {
    background-color: var(--bg-secondary) !important;
    border: none !important;
    border-radius: var(--card-radius, 8px) !important;
    box-shadow: 0 2px 12px var(--shadow-sm) !important;
}

.algorithm-card,
.alg-card {
    border: 1px solid var(--card-item-border, transparent) !important;
    border-radius: var(--card-radius, 8px) !important;
    background-color: var(--card-item-bg, var(--card-bg)) !important;
    box-shadow: var(--card-item-shadow, 0 2px 12px var(--shadow-sm)) !important;
}

/* Previous / next case navigation controls: transparent at rest so they don't
   stand out from the translucent section. Deliberately non-!important so the
   hover highlight/border still applies. */
.case-nav-preview {
    background: transparent;
}

/* Card headers nested inside a clean surface-card section blend with the same
   translucent tint as the body, so the whole panel reads uniformly (about /
   privacy). */
.surface-card .card-header {
    background-color: var(--card-surface, rgba(var(--accent-color-rgb), 0.08)) !important;
    border: none !important;
    color: var(--text-color) !important;
}

/* Selected case card in the grid: make it clearly stand out against its
   neighbours. Uses a strong primary border + glow + tint, and beats the
   logged-in state (known/learning/unknown) colour rules so selection is always
   visible. */
.algs-container .alg-card.selected-card,
#page-context-data[data-logged-in="true"]~.algs-container .alg-card.selected-card,
#page-context-data[data-custom-mode="true"]~.algs-container .alg-card.selected-card {
    border: 2px solid var(--primary-color, #0d6efd) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 13, 110, 253), 0.35), 0 4px 16px rgba(0, 0, 0, 0.18) !important;
    background-color: rgba(var(--primary-rgb, 13, 110, 253), 0.10) !important;
}

/* Item cards on the tools and daily-puzzles pages match the same rounded
   treatment so they clearly read as cards (tool cards also get it via the
   shared .tool-card rule above). */
#tools-page-container .tool-card,
#daily-puzzles-root .puzzle-card,
#daily-puzzles-root .stat-card {
    border-radius: 12px !important;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Phone section panels: match /trainers exactly.

   styles.css gives every .card 1rem of padding on phones (<=768px). On the
   section panels (card.hero-card.surface-card) that padding insets the tinted
   .card-body inside the rounded frame, which makes the visible panel narrower
   AND adds ~16px of blank space around every section gap — the "much larger"
   gaps on /algs vs /trainers. /trainers already zeroes this via trainers.css;
   do the same here so the tint fills the rounded panel on every menu page.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .hero-card {
        padding: 0 !important;
    }

    /* The base layout nests the page's own .container inside <main class="container
       py-4">, doubling the horizontal padding on phones. /trainers zeroes the
       outer <main> padding (via trainers.css); the algs / tools / daily-puzzles
       pages don't, so their sections sit ~32px from the screen edge while the
       trainer sections sit ~16px. Zero the outer <main> padding for the same
       pages so their side gaps match /trainers. (With the templates already
       using a container-less <main>, this is a harmless no-op; :has() keeps it
       working even where the template bundle is cached.) */
    main:has(#algs-page-container),
    main:has(#tools-page-container),
    main:has(#daily-puzzles-root) {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* /trainers also reserves a symmetric scrollbar gutter (trainers.css), which
   changes how far its content sits from the screen edges on desktop/Windows.
   Give the same pages the identical treatment so their side gaps line up with
   the trainer sections. */
@media (max-width: 576px) {
    html:has(#algs-page-container),
    html:has(#tools-page-container),
    html:has(#daily-puzzles-root) {
        overflow-y: auto;
        scrollbar-gutter: stable both-edges;
    }
}