/* =====================================================
   modal.css
   PURPOSE: Styles for ALL modal pop-up overlays
   in the app. Modals are used for:
     - "+" button options (New Deck / New Card)
     - Organize Deck options
     - Delete confirmation dialogs
     - Move card to deck selector

   Two iOS-native variants, chosen by js/features/modal.js
   via an optional `variant` argument:
     - "sheet" (default) — bottom action sheet: anchored
       to the bottom edge, rounded top corners only, a
       small grabber handle. Used for pickers/menus.
     - "alert" — centered iOS alert: small fixed-width
       card, buttons as full-width hairline-divided rows.
       Used for the delete confirmation.
   ===================================================== */

/* --- Modal Backdrop ---
   The dark semi-transparent layer behind the modal.
   Clicking it closes the modal. Sheets anchor to the
   bottom edge by default; the --alert modifier centers
   the dialog instead. */
.modal-backdrop {
  position:         fixed;  /* Covers the whole screen */
  top:              0;
  left:             0;
  width:            100%;
  height:           100%;
  background-color: rgba(0, 0, 0, 0.4);
  /* z-index controls layer order.
     999 sits above everything else on the page. */
  z-index:          999;
  display:          flex;
  align-items:      flex-end;
  justify-content:  center;
  /* Fade in animation */
  animation:        fadeIn 0.2s ease;
}

.modal-backdrop--alert {
  align-items: center;
  padding:     16px;
}

/* --- Modal Box (sheet variant, default) ---
   Bottom-anchored, rounded top corners only, full-bleed
   width, with a small grabber handle up top. */
.modal {
  background-color: var(--color-card-bg);
  border:           none;
  border-radius:    var(--radius-xl) var(--radius-xl) 0 0;
  padding:          8px 20px calc(20px + var(--safe-area-bottom));
  width:            100%;
  max-width:        560px;
  /* Slide up animation */
  animation:        slideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow:       var(--shadow-elevation-2);
  position:         relative;
}

/* Grabber handle — the small horizontal bar iOS sheets
   show at the top so it visually reads as "draggable"
   even though this app doesn't implement drag-to-dismiss. */
.modal::before {
  content:          '';
  display:          block;
  width:            36px;
  height:           5px;
  border-radius:    3px;
  background-color: var(--ios-systemGray4);
  margin:           6px auto 14px;
}

/* --- Modal Box (alert variant) ---
   Centered, fixed small width, all corners rounded,
   no grabber handle — matches an iOS UIAlertController. */
.modal--alert {
  max-width:     270px;
  border-radius: var(--radius-lg);
  padding:       20px 16px 0;
  text-align:    center;
  animation:     fadeIn 0.15s ease;
}

.modal--alert::before {
  display: none;
}

/* --- Modal Header --- */
.modal__header {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  margin-bottom:    12px;
  padding-bottom:   0;
  border-bottom:    none;
}

.modal--alert .modal__header {
  justify-content: center;
  margin-bottom:   4px;
}

.modal--alert .modal__close {
  display: none;
  /* iOS alerts dismiss via a button choice, not an X —
     the sheet variant keeps its close button. */
}

.modal__title {
  font-size:   var(--font-size-headline);
  font-weight: 600;
  color:       var(--color-text-primary);
}

/* Modal close "X" button */
.modal__close {
  display:       flex;
  align-items:   center;
  justify-content: center;
  background:    var(--ios-systemFill);
  border:        none;
  color:         var(--ios-systemGray);
  width:         30px;
  height:        30px;
  cursor:        pointer;
  padding:       0;
  border-radius: 999px;
  transition:    background-color 0.2s ease;
}

.modal__close:hover {
  background-color: var(--ios-secondarySystemFill);
}

/* --- Modal Body --- */
.modal__body {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.modal--alert .modal__body {
  gap:        4px;
  color:      var(--color-text-secondary);
  font-size:  var(--font-size-subheadline);
  padding-bottom: 16px;
}

/* Small secondary caption text under a row's title —
   replaces the inline style="font-size:12px;color:..."
   pattern previously written directly in modal.js. */
.modal__row-caption {
  font-size:  var(--font-size-footnote);
  color:      var(--color-text-secondary);
  margin-top: 2px;
}

/* Emphasized inline number/word inside modal body text
   (e.g. "3 cards selected") — replaces the inline
   style="color: var(--color-accent-amber)" pattern.   */
.modal__highlight {
  color:       var(--color-accent-amber);
  font-weight: 600;
}

/* --- Modal Action Buttons ---
   iOS grouped-list style: borderless rows separated by
   a hairline divider, with a soft tint on press instead
   of a hover-slide. */
.modal__action-btn {
  display:          flex;
  align-items:      center;
  gap:              14px;
  padding:          14px 4px;
  background-color: transparent;
  border:           none;
  border-bottom:    var(--border-width) solid var(--color-border);
  border-radius:    0;
  color:            var(--color-text-primary);
  font-size:        var(--font-size-body);
  font-family:      var(--font-primary);
  cursor:           pointer;
  transition:       background-color 0.15s ease;
  text-align:       left;
  width:            100%;
}

.modal__body > .modal__action-btn:last-child {
  border-bottom: none;
}

.modal__action-btn:hover {
  background-color: var(--ios-tertiarySystemFill);
}

.modal__action-btn:active {
  background-color: var(--ios-secondarySystemFill);
}

.modal__action-btn .btn-icon {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            34px;
  height:           34px;
  flex-shrink:      0;
  border-radius:    var(--radius-sm);
  background-color: var(--tint-accent-soft);
  color:            var(--color-accent-amber);
}

/* --- "+" Button Choices (New Deck / New Card) ---
   Side by side with a hairline divider between them,
   instead of stacked rows — see showAddModal() in modal.js.
   Icon + one-word label only, no descriptive captions. */
.modal-add-choices {
  display:     flex;
  align-items: stretch;
  gap:         4px;
  padding:     8px 0 4px;
}

.modal-add-choice {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding:         22px 8px;
  background:      transparent;
  border:          none;
  border-radius:   var(--radius-lg);
  color:           var(--color-accent-amber);
  font-size:       var(--font-size-subheadline);
  font-weight:     600;
  font-family:     var(--font-primary);
  cursor:          pointer;
  transition:       background-color 0.15s ease;
}

.modal-add-choice span {
  color: var(--color-text-primary);
}

.modal-add-choice:hover {
  background-color: var(--ios-tertiarySystemFill);
}

.modal-add-choice:active {
  background-color: var(--ios-secondarySystemFill);
}

.modal-add-choices__divider {
  width:            var(--border-width);
  background-color: var(--color-border);
  flex-shrink:      0;
}

/* --- Text Input inside Modal (for deck name etc.) --- */
.modal__input {
  width:            100%;
  padding:          12px 14px;
  background-color: var(--ios-tertiarySystemFill);
  border:           none;
  border-radius:    var(--border-radius);
  color:            var(--color-text-primary);
  font-size:        var(--font-size-body);
  font-family:      var(--font-primary);
  outline:          none;
  transition:       box-shadow 0.2s ease;
}

.modal__input:focus {
  box-shadow: 0 0 0 2px var(--color-accent-amber);
}

.modal__input--error {
  box-shadow: 0 0 0 2px var(--ios-systemRed);
}

.modal__input::placeholder {
  color: var(--color-text-secondary);
}

/* Label above a modal input field */
.modal__label {
  font-size: var(--font-size-footnote);
  color:     var(--color-text-secondary);
}

/* Multi-line variant of .modal__input (feedback.js's
   description field). Combine both classes on a
   <textarea> — this just adds the height/resize/line
   behavior a single-line input doesn't need. */
.modal__textarea {
  min-height:  88px;
  resize:      vertical;
  line-height: 1.4;
}

/* Generic segmented control (pill track + tab buttons) —
   used wherever a modal needs a small multi-choice
   toggle, e.g. feedback.js's Bug/Idea/Other type picker.
   Same track-plus-pill shape as card-editor.css's
   .card-side-tabs, but with one neutral accent-tinted
   active state instead of a per-tab semantic color —
   there's no "this option is riskier" distinction between
   feedback types the way there is for Question/Answer. */
.segmented-control {
  display:          flex;
  gap:              2px;
  padding:          2px;
  background-color: var(--ios-systemGray5);
  border-radius:    var(--radius-sm);
}

.segmented-btn {
  flex:             1;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  gap:              5px;
  padding:          7px 8px;
  background-color: transparent;
  border:           none;
  border-radius:    calc(var(--radius-sm) - 2px);
  color:            var(--color-text-secondary);
  cursor:           pointer;
  font-family:      var(--font-primary);
  font-size:        var(--font-size-footnote);
  font-weight:      600;
  transition:       background-color 0.2s ease, color 0.2s ease;
}

.segmented-btn--active {
  background-color: color-mix(in srgb, var(--ios-systemGreen) 16%, transparent);
  color:            var(--ios-systemGreen);
}

/* Wraps feedback.js's type toggle + message + email
   fields. .modal__body's own gap (2px, shared by every
   other modal) is too tight once a modal has no <label>
   elements between fields to add their own breathing
   room — this gives the form its own even rhythm instead,
   matching .modal__header's margin-bottom (12px) so the
   gap above the email field reads the same as the gap
   below the title ("the top spacing"). */
.feedback-form {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

/* --- Modal Footer (confirm/cancel buttons) --- */
.modal__footer {
  display:         flex;
  justify-content: flex-end;
  gap:             10px;
  margin-top:      16px;
  padding-top:     0;
  border-top:      none;
}

/* Alert variant footer — full-width rows, hairline
   divided, no button chrome (borderless flat text),
   matching an iOS UIAlertController's button list.   */
.modal--alert .modal__footer {
  flex-direction: column;
  gap:            0;
  margin-top:     0;
  margin-left:    -16px;
  margin-right:   -16px;
  border-top:     var(--border-width) solid var(--color-border);
}

.modal--alert .modal__footer .btn {
  border-radius:    0;
  background-color: transparent;
  color:            var(--color-accent-amber);
  font-weight:      400;
  padding:          14px 16px;
  border-bottom:    var(--border-width) solid var(--color-border);
}

.modal--alert .modal__footer .btn:last-child {
  border-bottom: none;
  font-weight:   600;
}

.modal--alert .modal__footer .btn--danger {
  color: var(--ios-systemRed);
}

.modal--alert .modal__footer .btn:hover {
  background-color: var(--ios-tertiarySystemFill);
}

.modal--alert .modal__footer .btn:active {
  transform: none;
  opacity:   1;
  background-color: var(--ios-secondarySystemFill);
}

/* =====================================================
   ORGANIZE DECK MODAL STYLES
   ADDED FOR: Organize Deck → Move and Delete feature

   These styles are for the three new modals:
     1. Organize options (Delete or Move)
     2. Delete confirmation
     3. Move — deck destination selector
   ===================================================== */

/* ── ORGANIZE OPTIONS MODAL ───────────────────────────────
   The first popup when "Organize Deck" is tapped.
   Shows two large options: Delete Cards, Move Cards. */

/* Count badge showing how many cards are selected.
   Sits above the two action buttons.               */
.organize-selection-count {
  text-align:  center;
  font-size:   var(--font-size-footnote);
  color:       var(--color-text-secondary);
  padding:     4px 0 12px;
  border-bottom: none;
  margin-bottom: 4px;
}

/* Highlighted number inside the count badge        */
.organize-selection-count strong {
  color:       var(--color-accent-amber);
  font-size:   var(--font-size-body);
}

/* ── DELETE CONFIRMATION MODAL ────────────────────────────
   Warning message shown before permanently deleting.  */

.delete-confirm-message {
  text-align:  center;
  color:       var(--color-text-primary);
  font-size:   var(--font-size-subheadline);
  line-height: 1.4;
  padding:     4px 0;
}

/* The red warning line "This cannot be undone"     */
.delete-confirm-message .delete-warning {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         4px;
  color:       var(--color-confidence-1);
  font-size:   var(--font-size-footnote);
  margin-top:  8px;
}

/* ── MOVE DECK SELECTOR MODAL ─────────────────────────────
   List of all decks shown when user picks "Move Cards".
   Scrollable if there are many decks.               */

/* Scrollable container for the deck list           */
.move-deck-list {
  display:        flex;
  flex-direction: column;
  max-height:     280px;
  /* max-height: 280px = list scrolls if there are
     more than ~4 decks so the modal never gets
     taller than the screen                         */
  overflow-y:     auto;
  /* overflow-y: auto = vertical scrollbar appears
     only when the list is taller than 280px        */
}

/* Individual deck button in the move selector.
   Same borderless-row-with-hairline-divider treatment
   as .modal__action-btn.                            */
.move-deck-item {
  display:          flex;
  align-items:      center;
  gap:              14px;
  padding:          12px 4px;
  background-color: transparent;
  border:           none;
  border-bottom:    var(--border-width) solid var(--color-border);
  border-radius:    0;
  color:            var(--color-text-primary);
  font-size:        var(--font-size-body);
  font-family:      var(--font-primary);
  cursor:           pointer;
  transition:       background-color 0.15s ease;
  text-align:       left;
  width:            100%;
}

.move-deck-list .move-deck-item:last-child {
  border-bottom: none;
}

.move-deck-item:hover {
  background-color: var(--ios-tertiarySystemFill);
}

.move-deck-item:active {
  background-color: var(--ios-secondarySystemFill);
}

/* Highlights the currently active deck (the deck
   the user is organizing) so they can clearly see
   which deck they are in — a tinted icon chip
   instead of a colored border.                     */
.move-deck-item--current .move-deck-item__icon {
  background-color: var(--tint-accent-medium);
  color:             var(--color-accent-amber);
}

.move-deck-item__icon {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            34px;
  height:           34px;
  flex-shrink:      0;
  border-radius:    var(--radius-sm);
  background-color: var(--ios-tertiarySystemFill);
  color:             var(--color-text-secondary);
}

/* "Current deck" label shown next to the deck name */
.move-deck-item__current-label {
  font-size:    var(--font-size-caption);
  color:        var(--color-accent-amber);
  margin-left:  auto;
  /* margin-left: auto = pushes label to the far
     right of the button                            */
  white-space:  nowrap;
}

/* Wraps the deck name + count so the current-deck
   label above can be pushed to the far right via
   margin-left: auto without affecting this block.  */
.move-deck-item__info {
  flex: 1;
}

/* Deck name inside the move button                 */
.move-deck-item__name {
  font-weight: 600;
  font-size:   var(--font-size-body);
}

/* Card count below the deck name                   */
.move-deck-item__count {
  font-size:  var(--font-size-footnote);
  color:      var(--color-text-secondary);
  margin-top: 2px;
}

/* Info message shown above the deck list           */
.move-deck-info {
  font-size:    var(--font-size-footnote);
  color:        var(--color-text-secondary);
  text-align:   center;
  padding:      4px 0 12px;
  border-bottom: none;
  margin-bottom: 4px;
}

/* =====================================================
   EXTRACT TEXT MODAL STYLES
   ADDED FOR: Extract Text feature in card-editor.js
   (card-editor.js = the screen where users create
   and edit flash cards)

   This modal appears when the user taps the
   "Extract Text" button in the card editor.
   It presents three source options:
     1. Take a Photo
     2. Find a Photo from Library
     3. Find a PDF
        (PDF = Portable Document Format = a fixed-
        layout document format)

   CALLED BY:
   - js/screens/card-editor.js → openExtractTextModal()
   - js/features/modal.js      → openModal()
   ===================================================== */

/* ── EXTRACT OPTIONS WRAPPER ──────────────────────────────
   The flex (flex = CSS Flexbox = a layout system that
   arranges items in a row or column with automatic
   spacing) column that holds the three option buttons
   inside the modal body.                            */
.extract-modal-options {
  display:        flex;
  flex-direction: column;
  width:          100%;
}

/* ── EXTRACT OPTION BUTTONS ───────────────────────────────
   Each of the three source option buttons. Same
   borderless-row-with-hairline-divider treatment as
   .modal__action-btn.                               */
.extract-option-btn {
  display:          flex;
  align-items:      center;
  gap:              14px;
  padding:          14px 4px;
  background-color: transparent;
  border:           none;
  border-bottom:    var(--border-width) solid var(--color-border);
  border-radius:    0;
  color:            var(--color-text-primary);
  font-size:        var(--font-size-body);
  font-family:      var(--font-primary);
  cursor:           pointer;
  text-align:       left;
  width:            100%;
  transition:       background-color 0.15s ease;
}

.extract-modal-options .extract-option-btn:last-child {
  border-bottom: none;
}

.extract-option-btn:hover {
  background-color: var(--ios-tertiarySystemFill);
}

.extract-option-btn:active {
  background-color: var(--ios-secondarySystemFill);
}

.extract-option-btn .btn-icon {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            34px;
  height:           34px;
  flex-shrink:      0;
  border-radius:    var(--radius-sm);
  background-color: var(--tint-accent-soft);
  color:            var(--color-accent-amber);
}

/* ── HIGHLIGHT SELECT OVERLAY ─────────────────────────────
   The full-screen overlay injected by
   highlight-select.js when a file is loaded.
   Must sit above:
   - The card editor screen  (no z-index set)
   - The modal backdrop      (z-index: 999)
   So this uses z-index: 1000 to guarantee it is
   always on top.

   (z-index = a CSS property that controls stacking
   order — higher number = closer to the front.
   Elements with no z-index set default to 0)      */
.highlight-select-overlay {
  position:         fixed;
  /* fixed = stays in place even when the page scrolls */
  top:              0;
  left:             0;
  width:            100%;
  height:           100%;
  background-color: var(--color-background);
  z-index:          1000;
  /* 1000 = sits above the modal backdrop (999)    */
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  padding:          20px 16px;
  gap:              16px;
  overflow-y:       auto;
  /* overflow-y: auto = the overlay itself scrolls
     if the content is taller than the screen, so
     the flashcard preview is always reachable     */

  /* Fade in when the overlay appears              */
  animation:        fadeIn 0.2s ease;
  /* fadeIn is defined in styles/animations.css    */
}