/* =====================================================
   deck.css
   PURPOSE: Styles for the Deck View screen ONLY.
   This includes the deck header, stats bar,
   organize toolbar, and card thumbnail grid.

   SCOPE: Everything inside #deck-view-screen
   DO NOT put styles for other screens in this file.
   ===================================================== */

#deck-view-screen {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

/* Overrides animations.css's shared "#screen-container > *"
   entrance animation with an opacity-only version for JUST
   this screen — same fix, same reasoning as scheduler.css's
   identical override (see its own longer comment): the shared
   transform-based animation creates a new containing block for
   any position:fixed descendant while it's running, and
   .deck-view-fab is exactly that. Two IDs (not a bare
   "#deck-view-screen" selector) to reliably out-specificity
   the shared rule regardless of the two files' <link> order
   in index.html. */
#screen-container > #deck-view-screen {
  animation: fadeIn 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* --- Floating "+" button ────────────────────────────────
   Identical pattern to Home's FAB (styles/home.css
   .home-fab) — fixed position, opaque circle, shrinks while
   actively scrolling down. Duplicated with its own class
   rather than shared since this file is scoped to
   #deck-view-screen only (see the SCOPE note at the top of
   this file). Present whether the deck is empty or has
   cards — see attachDeckViewFab() in deck-view.js. */
.deck-view-fab {
  position:         fixed;
  left:             50%;
  bottom:           calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 16px);
  transform:        translateX(-50%) scale(1);
  width:            64px;
  height:           64px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  border:           none;
  border-radius:    50%;
  background-color: var(--color-button-bg);
  color:            var(--color-button-text);
  box-shadow:       var(--shadow-elevation-2);
  cursor:           pointer;
  z-index:          150;
  transition:        transform   0.45s cubic-bezier(0.4, 0, 0.2, 1),
                     box-shadow  0.3s ease,
                     background-color 0.15s ease;
}

.deck-view-fab:hover {
  background-color: var(--color-button-hover);
}

.deck-view-fab:active {
  transform: translateX(-50%) scale(0.92);
}

.deck-view-fab--shrunk {
  transform:  translateX(-50%) scale(0.7);
  box-shadow: var(--shadow-elevation-1);
}

/* --- Deck Header Row --- */
.deck-view__header {
  /* Grid (not flex + space-between) so the title is TRULY
     centered on the full row regardless of what's in the
     flanking slots — space-between only LOOKS centered when
     both sides happen to be equal width, which isn't the case
     here: the right side carries 3 icon buttons (search,
     organize, delete) against just 1 Back button on the left,
     so the title was visibly skewed toward the left edge. Two
     equal 1fr side columns plus grid-column: 2 on the title
     below keeps it centered on the row even with mismatched
     content on either side — same fix already applied to
     .quiz-header/.match-header/.type-header in game-modes.css. */
  display:               grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:           center;
  padding-bottom:        12px;
  border-bottom:         var(--border-width) solid var(--color-border);
}

/* justify-self: start — CSS Grid's default (justify-items:
   stretch) would otherwise stretch this button to fill the
   ENTIRE left column (buttons have width: auto, which stretch
   applies to), and since .btn itself is
   justify-content: center internally, the "← Back" label would
   end up centered in that stretched-wide button instead of
   hugging the actual left edge — reads as the label floating
   away from the corner it's supposed to anchor. */
.deck-view__header .btn--back {
  justify-self: start;
}

.deck-view__title {
  grid-column: 2;
  font-size:   var(--font-size-title3);
  color:       var(--color-text-primary);
  font-weight: 700;
  min-width:   0;
  /* min-width: 0 = allows a long deck name to truncate
     rather than pushing the grid's side columns wider */
  text-align:    center;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Groups the Add Card icon button and Organize Deck
   text button on the right side of the header row. */
.deck-view__header-actions {
  /* justify-self: end — a grid item stretches to fill its
     whole column by default, which would leave these buttons
     hugging the LEFT edge of the right-side 1fr column instead
     of the actual right edge of the screen, now that the
     header is grid-based. This pins them back to the far
     right, matching how they sat under the old flex layout. */
  justify-self: end;
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-shrink: 0;
}

/* Header icon buttons — Add Card, Organize, Delete Deck.
   One shared class so all three read as a single clean,
   consistent row instead of a mismatched icon button next
   to a big filled pill (the old "Organize Deck" button).
   Same tinted-circle pattern used for the deck search
   toggle on Home (styles/home.css .deck-search-toggle)
   and the palette search icon in the card editor. */
.deck-view__icon-btn {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  width:            32px;
  height:           32px;
  border:           none;
  border-radius:    50%;
  background-color: var(--ios-tertiarySystemFill);
  color:            var(--color-accent-amber);
  cursor:           pointer;
  transition:        background-color 0.15s ease, transform 0.1s ease, color 0.15s ease;
}

.deck-view__icon-btn:hover {
  background-color: var(--ios-secondarySystemFill);
}

.deck-view__icon-btn:active {
  transform: scale(0.92);
}

/* Organize button while Organize mode is on — filled with
   the accent tint so it reads as "currently active" the
   same way a pressed iOS toolbar toggle would. */
.deck-view__icon-btn--active {
  background-color: var(--tint-accent-soft);
  color:            var(--color-accent-amber);
}

/* Delete Deck — same neutral circle, but red icon color
   only (no red fill), matching .btn--danger's "plain red
   text/icon" iOS convention for destructive actions. */
.deck-view__icon-btn--danger {
  color: var(--ios-systemRed);
}

.deck-view__icon-btn--danger:hover {
  background-color: color-mix(in srgb, var(--ios-systemRed) 12%, transparent);
}

/* --- Deck Stats Bar --- */
.deck-view__stats {
  display:          flex;
  align-items:      center;
  gap:              16px;
  justify-content: space-between;
  padding:          10px 14px;
  background-color: var(--color-card-bg);
  border-radius:    var(--border-radius);
  border:           none;
  box-shadow:       var(--shadow-elevation-1);
  font-size:        var(--font-size-footnote);
  color:            var(--color-text-primary);
  flex-wrap:        wrap; /* Wraps on small screens */
}

.deck-view__stats strong {
  color: var(--color-text-primary);
}

/* --- Card search field ─────────────────────────────────
   Same pill pattern as Home's deck search (styles/home.css
   .deck-search) — icon, input, and a clear button all in
   one rounded field. Duplicated rather than shared since
   this file is scoped to #deck-view-screen only (see the
   SCOPE note at the top of this file). Hidden by default,
   toggled open by the search icon in the deck header —
   see attachCardSearchEvents() in deck-view.js. */
.deck-view-search {
  display:          flex;
  align-items:      center;
  gap:              6px;
  padding:          7px 10px;
  background-color: var(--ios-tertiarySystemFill);
  border-radius:    999px;
}

.deck-view-search__icon {
  display:     flex;
  flex-shrink: 0;
  color:       var(--color-text-secondary);
}

.deck-view-search__input {
  flex:        1;
  min-width:   0;
  background:  transparent;
  border:      none;
  color:       var(--color-text-primary);
  font-size:   var(--font-size-footnote);
  font-family: var(--font-primary);
  outline:     none;
}

.deck-view-search__input::placeholder {
  color: var(--color-text-secondary);
}

.deck-view-search__clear {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  width:            18px;
  height:           18px;
  padding:          0;
  border:           none;
  border-radius:    50%;
  background-color: var(--ios-systemGray3);
  color:            #fff;
  cursor:           pointer;
}

/* --- Organize Mode Toolbar ---
   Hidden by default, shown when Organize is clicked */
.organize-toolbar {
  display:          flex;
  gap:              8px;
  padding:          10px;
  background-color: var(--color-card-bg);
  border-radius:    var(--border-radius);
  border:           none;
  box-shadow:       var(--shadow-elevation-1);
  flex-wrap:        wrap;
}

/* --- Card Thumbnail Grid ---
   CSS Grid (Cascading Style Sheets Grid - a 2D layout
   system) for responsive card layout */
.card-grid {
  display:               grid;
  /* auto-fill = as many columns as fit,
     minmax = each column min 140px, max equal share */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:                   12px;
}

/* --- Individual Card Thumbnail --- */
.card-thumb {
  position:         relative;
  padding:          12px;
  background-color: var(--color-card-bg);
  border:           none;
  border-radius:    var(--border-radius-card);
  cursor:           pointer;
  min-height:       100px;
  box-shadow:       var(--shadow-elevation-1);
  transition:       box-shadow 0.2s ease, transform 0.2s ease;
  overflow:         hidden;
}

.card-thumb:hover {
  box-shadow: var(--shadow-elevation-2);
  transform:  translateY(-2px);
}

/* Highlight when selected in organize mode — a tinted
   background + accent-colored ring instead of a
   colored border, using the theme-aware accent tint
   tokens from theme.css.
   NOTE: was previously ".card-thumb--selectable.selected"
   — "selected" was never an actual class name applied by
   deck-view.js (it applies "card-thumb--selected"), so
   this highlight silently never rendered. Fixed here. */
.card-thumb--selectable.card-thumb--selected {
  box-shadow:       0 0 0 2px var(--color-accent-amber), var(--shadow-elevation-1);
  background-color: var(--tint-accent-soft);
}

.card-thumb__text {
  font-size:   var(--font-size-small);
  color:       var(--color-text-primary);
  line-height: 1.4;
}

/* --- Selection Checkbox (Organize Mode) --- */
.card-thumb__checkbox {
  position:    absolute;
  top:         8px;
  right:       8px;
  width:       18px;
  height:      18px;
  cursor:      pointer;
  accent-color: var(--color-accent-amber);
}

/* --- "New" Badge on a just-created card's thumbnail ---
   Only ever rendered for the single card card-editor.js's
   saveCard() just created (see renderCardThumb() in
   deck-view.js) — never persisted, so it only ever shows
   once, right after creating that card.

   Pure CSS animation rather than a JS setTimeout: stays
   fully visible for ~5s, fades out over the next ~0.6s, then
   stays hidden (animation-fill-mode: forwards keeps the
   final 0%-opacity state) — no timer to track or clean up on
   re-render. pointer-events: none so it never blocks taps on
   the card underneath it. */
.card-thumb__new-badge {
  position:         absolute;
  top:              8px;
  right:            8px;
  padding:          2px 7px;
  border-radius:    10px;
  background-color: var(--color-accent-amber);
  color:            #fff;
  font-size:        10px;
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   0.02em;
  pointer-events:   none;
  animation:        card-thumb-new-badge-fade 5.6s ease forwards;
}

@keyframes card-thumb-new-badge-fade {
  0%, 89%  { opacity: 1; }
  100%     { opacity: 0; }
}

/* Green glowing border for that same just-created card —
   IDENTICAL keyframes/timing/colors to the Match game's
   .match-tile--matched glow (game-modes.css) and the
   Scheduler's .scheduler-item--new glow (scheduler.css),
   duplicated here rather than shared across files per this
   app's per-screen CSS scoping. .card-thumb's own
   overflow: hidden (above) only clips its CONTENT, not its
   own box-shadow, so the glow paints outward normally despite
   that rule. Plays once on arrival; unlike the Match game's
   permanent glow, this doesn't leave a lasting border after —
   the "New" badge already covers the lasting-indicator role. */
.card-thumb--new {
  animation: card-thumb-new-glow 1400ms ease-out;
  /* .card-grid is a CSS grid, so z-index applies to these
     thumbnails even without an explicit position (same as flex
     items) — needed because the glow's box-shadow can bleed
     into a NEIGHBORING thumb's box (they all share an opaque
     --color-card-bg background), and that sibling paints AFTER
     this one in grid/DOM order if it comes later. Identical
     reasoning to .match-tile--matched's and .scheduler-item--new's
     own z-index. */
  z-index: 2;
}

@keyframes card-thumb-new-glow {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ios-systemGreen) 0%, transparent);
  }
  25%, 60% {
    box-shadow: 0 0 0 4px    color-mix(in srgb, var(--ios-systemGreen) 100%, transparent),
                0 0 26px 8px  color-mix(in srgb, var(--ios-systemGreen) 85%, transparent),
                0 0 42px 16px color-mix(in srgb, var(--ios-systemGreen) 45%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ios-systemGreen) 0%, transparent);
  }
}

/* --- Confidence Badge on Card Thumbnails --- */
.confidence-badge {
  position:     absolute;
  bottom:       8px;
  right:        8px;
  padding:      2px 6px;
  border-radius: 10px;
  font-size:    10px;
  font-weight:  bold;
}

/* Color each confidence level badge. Text color picked
   per-level for contrast against that specific system
   color (red/orange are dark enough for white text;
   yellow/mint/green need black text to stay readable). */
.confidence-badge--1 { background: var(--color-confidence-1); color: #fff; }
.confidence-badge--2 { background: var(--color-confidence-2); color: #fff; }
.confidence-badge--3 { background: var(--color-confidence-3); color: #000; }
.confidence-badge--4 { background: var(--color-confidence-4); color: #000; }
.confidence-badge--5 { background: var(--color-confidence-5); color: #000; }

/* ── ORGANIZE TOOLBAR DIVIDER ─────────────────────────────
   The | separator between the Move and Delete buttons.
   Purely decorative (decorative = visual only, no
   interactive purpose).                             */
.organize-toolbar__divider {
  color:       var(--color-text-secondary);
  /* --color-text-secondary = #cccccc light grey     */
  font-size:   1.1rem;
  font-weight: 300;
  padding:     0 0.25rem;
  user-select: none;
  /* user-select: none = prevents the | from being
     accidentally highlighted when clicking nearby  */
}

/* ── MOVE BUTTON IN ORGANIZE TOOLBAR ──────────────────────
   Styled to match the amber theme to signal a
   neutral/positive action (moving cards, not deleting) */
.btn--move {
  background:    var(--color-button-bg);
  border:        none;
  border-radius: var(--border-radius);
  color:         var(--color-button-text);
  padding:       0.4rem 0.85rem;
  font-size:     0.9rem;
  cursor:        pointer;
  transition:    background  0.2s ease,
                 color       0.2s ease;
}

.btn--move:hover:not(:disabled) {
  background:   var(--color-button-hover);
  color:        var(--color-button-text);
}

/* Disabled state for both toolbar buttons.
   :disabled = CSS (Cascading Style Sheets) pseudo-
   class (pseudo-class = a keyword added to a selector
   that targets a specific element state) that applies
   when the HTML disabled attribute is present.      */
.btn--move:disabled,
.btn--danger:disabled {
  opacity: 0.4;
  /* opacity: 0.4 = 60% transparent, visually greyed
     out to signal the button cannot be clicked yet  */
  cursor:  not-allowed;
  /* not-allowed = shows a blocked cursor icon when
     hovering over a disabled button                 */
}

/* =====================================================
   STUDY MODE — CONFIDENCE SCORE ROW
   
   PURPOSE: Centers the confidence buttons 1-5
   below the flashcard during deck study/review.

   This is SEPARATE from the card editor confidence
   row which sits on the same line as the Scan Text
   button. These are two different screens with two
   different layouts.

   KEY:
     CSS  = Cascading Style Sheets
     UX   = User Experience
     HTML = HyperText Markup Language
     flex = CSS Flexible Box Layout
   ===================================================== */

/* ── STUDY MODE CONFIDENCE ROW ────────────────────────
   Wraps the label + buttons and centers them
   horizontally below the flashcard.

   justify-content: center = pushes everything to
   the horizontal middle of the row.
   flex-direction: column = stacks the label above
   the buttons vertically. */

.study-confidence-row {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  /* align-items: center = centers children
     horizontally when flex-direction is column */
  justify-content: center;
  gap:             10px;
  width:           100%;
  padding:         16px 0;
}

/* "Confidence:" label above the buttons */
.study-confidence-row__label {
  font-size:   var(--font-size-small);
  color:       var(--color-text-secondary);
  text-align:  center;
  white-space: nowrap;
  /* white-space: nowrap = keeps label on one line */
}

/* The row of 5 numbered circle buttons */
.study-confidence-row__buttons {
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  justify-content: center;
  /* justify-content: center = centers the 5 buttons
     as a group in the middle of the screen */
  gap:             10px;
}

/* Individual confidence score buttons 1–5 — neutral
   outlined circles by default, matching the same
   pattern used in card-editor.css and study.css so
   all three confidence-button locations feel consistent. */
.study-confidence-btn {
  width:            44px;
  height:           44px;
  /* Slightly larger than the editor version for
     easier tapping on mobile screens */
  border-radius:    50%;
  /* border-radius: 50% = makes the element a circle */
  border:           var(--border-width) solid var(--color-border);
  background-color: var(--color-card-bg);
  color:            var(--color-text-primary);
  font-weight:      bold;
  font-size:        16px;
  cursor:           pointer;
  transition:       all 0.2s ease;
  flex-shrink:      0;
  /* flex-shrink: 0 = buttons never get squeezed
     smaller when screen space is tight */
}

/* Hover state — neutral fill tint */
.study-confidence-btn:hover {
  background-color: var(--ios-tertiarySystemFill);
  border-color:     var(--color-accent-amber);
}

/* Active / selected state — also breathes a soft glow
   in whichever confidence color is active (--btn-glow,
   set per-level below), same 2.4s rhythm used for the
   deck progress ring on Home (home.css deck-ring-breathe)
   for a consistent feel across the app. */
.study-confidence-btn--active {
  border-color: var(--color-accent-amber);
  color:        var(--color-button-text);
  transform:    scale(1.15);
  /* scale(1.15) = grows the selected button
     to 115% of its size for clear feedback */
  animation:    study-confidence-breathe 2.4s ease-in-out infinite;
}

@keyframes study-confidence-breathe {
  0%, 100% {
    filter:  drop-shadow(0 0 1px var(--btn-glow));
    opacity: 0.88;
  }
  50% {
    filter:  drop-shadow(0 0 7px var(--btn-glow));
    opacity: 1;
  }
}

/* Each score level gets its own active color, using
   theme.css's confidence tokens (iOS system colors).
   Text color per-level for contrast against that
   specific color, same pairing as .confidence-badge
   above. --btn-glow feeds the breathing animation above
   with the matching hue for whichever level is active. */
.study-confidence-btn--1.study-confidence-btn--active {
  background-color: var(--color-confidence-1);
  border-color:     var(--color-confidence-1);
  color:            #fff;
  --btn-glow:       var(--color-confidence-1);
}

.study-confidence-btn--2.study-confidence-btn--active {
  background-color: var(--color-confidence-2);
  border-color:     var(--color-confidence-2);
  color:            #fff;
  --btn-glow:       var(--color-confidence-2);
}

.study-confidence-btn--3.study-confidence-btn--active {
  background-color: var(--color-confidence-3);
  border-color:     var(--color-confidence-3);
  color:            #000;
  --btn-glow:       var(--color-confidence-3);
}

.study-confidence-btn--4.study-confidence-btn--active {
  background-color: var(--color-confidence-4);
  border-color:     var(--color-confidence-4);
  color:            #000;
  --btn-glow:       var(--color-confidence-4);
}

.study-confidence-btn--5.study-confidence-btn--active {
  background-color: var(--color-confidence-5);
  border-color:     var(--color-confidence-5);
  color:            #000;
  --btn-glow:       var(--color-confidence-5);
}

/* Optional: label showing current score text
   e.g. "Very Confident" displayed below buttons */
.study-confidence-row__current-label {
  font-size:  var(--font-size-small);
  color:      var(--color-accent-amber);
  font-style: italic;
  text-align: center;
  min-height: 1.2em;
  /* min-height reserves space so the layout does
     not jump when the label text appears/changes */
}