/* ===========================================================================
   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).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Container / section cards (outer "frame" cards).
   These become borderless, less-rounded translucent surfaces. The class
   .surface-card is added to these container elements.
   The .card.surface-card / theme-scoped variants raise specificity high enough
   to beat base.html's accent-bordered .card and .hero-card rules.
   --------------------------------------------------------------------------- */
.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: var(--card-radius, 8px) !important;
    box-shadow: 0 2px 12px var(--shadow-sm) !important;
    overflow: hidden;
    position: relative;
}

/* The inner body carries the translucent secondary-colour tint. */
.surface-card > .card-body {
    background-color: var(--card-surface, rgba(var(--accent-color-rgb), 0.08)) !important;
}

/* 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: var(--card-radius, 8px) !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 {
    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 {
    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:
        radial-gradient(circle at top left, rgba(var(--accent-color-rgb), 0.10), transparent 45%),
        radial-gradient(circle at bottom right, rgba(255, 193, 7, 0.05), transparent 36%),
        var(--card-bg) !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 navigation controls (case previews + alg paging arrows):
   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,
.alg-nav-btn {
    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;
}