/* ============================================================
   GlassKit pilot — theme override for the bottom-nav trial only.
   (EshterakBan / اشتراک‌بان)

   - NEVER edit assets/vendor/glasskit-1.11.0.css itself; all pilot
     rules live here so a future library update stays a drop-in.
   - Load order: style.css → glasskit-1.11.0.css → this file, so the
     tied-specificity rules below win over the library defaults.
   - Rollback: delete the two <link> tags for glasskit + this file
     and remove the glass-* classes from the bottom nav in index.html.
   ============================================================ */

/* ---- 1. Design tokens re-pointed at our lime-on-black identity ---- */
:root {
  /* Our page stack (matches body font in style.css). */
  --gl-font-family: 'Vazirmatn', Tahoma, sans-serif;

  /* Lime accent (matches var(--accent) in style.css, as literal hex
     so this file never depends on style.css custom properties). */
  --gl-color-primary: #B7F34A;

  /* Dark lime (matches var(--accent-deep) in style.css). The library
     derives --gl-color-primary-mid from these two, so setting both
     keeps the active-tab gradient/glow lime instead of muddy orange. */
  --gl-color-primary-dark: #4C6B14;

  /* NOTE (deliberately NOT overridden): --gl-surface-* stay as
     white-alpha overlays (dark glass over our near-black page —
     no clash); --gl-color-text* stay white/muted-white (suit dark
     theme); --gl-tab-bar-spotlight-color already follows
     --gl-color-primary, so the active-tab spotlight turns lime
     automatically. */
}

/* ---- 2. Pilot conflict resolution ----
   .bottom-nav-inner keeps its old job (fixed pill sized up to 520px,
   relative anchor for the legacy indicator); GlassKit supplies only
   the glass surface + item styling. Each rule below ties the library
   floating-bar selector at (0,2,0) and wins by coming later. */
.bottom-nav-inner.glass-tab-bar--floating {
  position: relative; /* library says static; relative preserves old sizing context */
  width: 100%; /* library says max-content; keep the old full-width pill */
  justify-content: space-between; /* keep the old even distribution, not flex-start pack */
  padding: 5px; /* keep the old metrics, not the library's 6px 10px */
  /* Frosted light: thin wash, light blur, crisp edge. No specular
     streak, no lime edge light (owner decision). Static always-on
     layers only (no .is-active tie-in) — tab-flash fix safe. */
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.42);
}

/* ---- 2b. Shared sliding indicator (restored, glass-styled) ----
   The pilot hid .bottom-nav-indicator, which killed the old sliding
   highlight driven by updateNavIndicatorPosition() in app.js
   (translate3d + transform/width 380ms spring, rect-based so it is
   direction-agnostic and correct in RTL for all five tabs).
   Restored here with a glass finish. Mechanics (position,
   transition, transform, opacity, width/height) are intentionally
   untouched — they still come from style.css + JS inline styles. */
.bottom-nav-inner.glass-tab-bar--floating .bottom-nav-indicator {
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.07) 100%);
  -webkit-backdrop-filter: blur(var(--gl-blur-soft, 12px));
  backdrop-filter: blur(var(--gl-blur-soft, 12px));
  border: 1px solid rgba(183, 243, 74, 0.28);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.18),
    0 0 12px rgba(183, 243, 74, 0.22),
    0 4px 18px rgba(0, 0, 0, 0.35);
}

/* Single highlight only: hide the library's instant per-item
   spotlight so it cannot double-draw or pop against the slider.
   (0,4,1) beats the library's (0,3,1); load order is the tiebreak.) */
.bottom-nav-inner.glass-tab-bar--floating .glass-tab-bar__item.is-active::before {
  display: none;
}

/* Audit fix: the active icon's drop-shadow glow (vendor) completed on
   its own 250ms fade while the sliding pill settles on its 380ms
   spring — two staged luminous events read as a two-stage flash.
   Remove the icon glow only; the lime stroke recolor stays, and the
   sliding pill becomes the sole glow. (0,4,1) beats vendor (0,3,1). */
.bottom-nav-inner.glass-tab-bar--floating .glass-tab-bar__item.is-active .glass-tab-bar__icon svg {
  filter: none;
}

/* ---- 2c. One smooth activation (no two-stage flash) ----
   Cause of the flash: the library faded icon stroke + label color on
   `all 0.25s ease` while our rules faded color on 200ms, and the
   per-item spotlight popped with NO transition at all — the eye saw
   the pop first, then the color catch-up. Fix: one shared 250ms ease
   (the library's own --gl-transition duration) for every
   color/light property; the icon scale pop keeps its old 260ms
   spring (motion, not color — original feel preserved). (0,3,0)+
   beats both the library (0,1,0)/(0,1,1) and our base rules. */
.bottom-nav-inner.glass-tab-bar--floating .glass-tab-bar__item,
.bottom-nav-inner.glass-tab-bar--floating .glass-tab-bar__icon,
.bottom-nav-inner.glass-tab-bar--floating .glass-tab-bar__icon svg,
.bottom-nav-inner.glass-tab-bar--floating .glass-tab-bar__label {
  transition:
    color 250ms ease,
    stroke 250ms ease,
    filter 250ms ease,
    background-color 250ms ease,
    opacity 250ms ease,
    font-weight 250ms ease,
    transform 260ms cubic-bezier(0.34, 1.35, 0.64, 1);
}

/* The slider keeps its original 380ms spring from style.css (motion,
   untouched). Reduced-motion: our base rules use (0,1,0), which this
   file would otherwise beat — so re-assert none here too. */
@media (prefers-reduced-motion: reduce) {
  .bottom-nav-inner.glass-tab-bar--floating .glass-tab-bar__item,
  .bottom-nav-inner.glass-tab-bar--floating .glass-tab-bar__icon,
  .bottom-nav-inner.glass-tab-bar--floating .glass-tab-bar__icon svg,
  .bottom-nav-inner.glass-tab-bar--floating .glass-tab-bar__label,
  .bottom-nav-inner.glass-tab-bar--floating .bottom-nav-indicator {
    transition: none;
  }
}

@media (max-width: 380px) {
  .bottom-nav-inner.glass-tab-bar--floating {
    padding: 4px; /* match the old ≤380px metrics in style.css */
  }
}

/* ---- 3. RTL fixes (library is LTR-only) ----
   Audited every left/right in the .glass-tab-bar* scope:
   - .glass-tab-bar base left:0/right:0: symmetric, and superseded by
     the floating modifier + §2 above. No override needed.
   - .glass-tab-bar__item flex-direction:column: vertical, neutral. OK.
   - .is-active dot (left:50% + translateX(-50%)): centered, symmetric
     (and hidden in the floating variant). OK.
   - .glass-tab-bar-dock centering (left:50% + translateX(-50%)):
     symmetric, and the dock is not used in this pilot. No override.
   - .glass-tab-bar__badge right:-8px: PHYSICAL — mirrored below.
     (No badge in our markup today; defensive for future use.) */
.glass-tab-bar .glass-tab-bar__badge {
  right: auto;
  left: -8px;
}

/* ---- 4. Glass modal surfaces (phase 2: Add/confirm dialogs) ----
   Only the surface class .glass-modal is added in markup; overlay and
   __header/__body/__footer/__action sub-classes are deliberately NOT
   used (our overlays keep .open mechanics; our headers/forms stay).
   Each rule below is (0,2,0) and wins the tied library rule by order.
   - Frosted light shared by all three surfaces: thin wash + light
     blur on nav/cards, 24px blur kept on modals over dimmed scrims;
     crisp .42 edge, no specular, no lime edge light. Modals follow
     the same wash reduction: behind them is a black-dimmed scrim, so
     a thinner wash keeps form contrast intact (dark surface, light
     text) while matching nav/cards.
   - .modal keeps its sheet idiom: full 480px width + square bottom.
   - Height-cap/scroll audit: .glass-modal sets NO height, max-height,
     min-height, or overflow-y (only overflow:hidden, same as ours) —
     so max-height + .modal form scroll + header flex-shrink:0 and the
     .confirm-dialog cap all stand untouched. */
.modal.glass-modal,
.confirm-dialog.glass-modal {
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  -webkit-backdrop-filter: blur(var(--gl-blur));
  backdrop-filter: blur(var(--gl-blur));
  border-color: rgba(255, 255, 255, 0.42);
}

.modal.glass-modal {
  max-width: 480px; /* restore sheet width (library says 340px) */
  border-radius: 20px 20px 0 0; /* keep bottom-sheet idiom */
}

/* ---- 5. Glass subscription list cards (phase 3) ----
   Only the surface class .glass-card is added at creation
   (createSubscriptionCard); __icon/__text sub-classes are NOT used
   (centered assumptions clash with our RTL row). (0,2,0) beats both.
   - Dark glass identical to nav/modals, not the milky --glow variant.
   - Compact metrics + 14px radius restored (library: 40/24/32 pad,
     24px radius). Literal 14px matches var(--radius-md) while keeping
     this file independent of style.css custom properties.
   - .glass-card sets NO layout/text/overflow rules, so ellipsis
     truncation, RTL order, dividers, and the 480px wrap layout stand. */
.sub-card.glass-card {
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.42);
  transition: filter 160ms ease;
}

/* Preserve the hover cue: this file's (0,2,0) would otherwise beat
   .sub-card:hover (0,2,0) purely by order. Brightness filter keeps the
   layered background intact (gradients can't transition) and stays smooth
   via the filter transition above. */
.sub-card.glass-card:hover {
  filter: brightness(1.12);
}

/* Contrast compensation over the brighter wash: subtle dark halo behind
   the smallest muted texts only. Large/bold texts (names, amounts,
   titles) keep enough contrast without it; modal forms sit over the
   24px-blurred + dimmed scrim (darkest effective surface), so they
   need none. */
.bottom-nav-inner.glass-tab-bar--floating .glass-tab-bar__label,
.sub-card.glass-card .sub-meta,
.sub-card.glass-card .sub-renewal {
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}

@media (max-width: 380px) {
  .sub-card.glass-card {
    padding: 12px; /* match the ≤380px metrics in style.css */
  }
}

/* ---- 6. Glass reports surfaces (phase 4) ----
   .glass-card added to .report-comparison-card + .report-chart
   (static markup) and .report-month-row (renderMonthlyReport).
   Same house recipe, no new numbers: wash .12→.06, blur 10px,
   .42 edge. Kept per-element padding/radius (library: 40/24/32,
   24px). .glass-card sets NO layout/text/overflow rules, so the
   row ellipsis, RTL order, and chart internals stand. */
.report-comparison-card.glass-card,
.report-chart.glass-card,
.report-month-row.glass-card {
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 14px; /* literal matches var(--radius-md) */
}

.report-comparison-card.glass-card {
  padding: 16px;
}

.report-chart.glass-card {
  padding: 12px;
}

.report-month-row.glass-card {
  padding: 10px 12px;
}

/* Current-month highlight must survive: this (0,3,0) beats both the
   (0,2,0) glass wash above and .report-month-current (0,2,0), keeping
   the lime-tinted row. Its inset accent ring already wins over the
   library shadow (0,2,0 vs 0,1,0). Literal matches --accent-dim. */
.report-month-row.report-month-current.glass-card {
  background: rgba(183, 243, 74, 0.12);
}

/* Same halo recipe for the tiny muted report texts. */
.report-comparison-card.glass-card .report-stat-count,
.report-comparison-card.glass-card .report-mode-hint,
.report-month-row.glass-card .report-month-count {
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}

/* ---- 7. Glass renewal-history cards (phase 4b) ----
   .glass-card added at creation (createHistoryCard); display-only
   cards with no click handlers. Same house recipe, no new numbers:
   wash .12→.06, blur 10px, .42 edge. Original metrics restored
   (library: 40/24/32 pad, 24px radius). .glass-card sets NO
   layout/text/overflow rules, so the name ellipsis, column stack,
   and RTL order stand. */
.history-card.glass-card {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 14px; /* literal matches var(--radius-md) */
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Same halo recipe for the tiny muted history lines. */
.history-card.glass-card .history-transition,
.history-card.glass-card .history-recorded {
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}

/* ---- 8. Glass calendar detail rows (phase 5) ----
   .glass-card added at both creation paths (due + actual tabs).
   Deliberately NOT glassed: the 42 day cells (tiny + blur would wreck
   scanability and the today/selected/outside indicators), the
   weekdays header, tabs/nav chrome, and the dashed empty placeholder
   (its "empty" affordance needs the flat dashed look). Same house
   recipe, no new numbers; metrics restored (library: 40/24/32 pad,
   24px radius). .glass-card sets NO layout/text/overflow rules, so
   name ellipsis, RTL/Saturday-first order, and renew buttons stand. */
.calendar-detail-row.glass-card {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 14px; /* literal matches var(--radius-md) */
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Same halo recipe for the tiny muted detail lines. */
.calendar-detail-row.glass-card .calendar-detail-meta {
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}

/* ---- 9. Glass list controls (phase 6: search, chips, sort, clear) ----
   Vendor judgment (all rejected with reason):
   - .glass-search: positions its icon at physical left (LTR) and sizes
     the input at 52px — clashes with our compact RTL row. Not used.
   - .glass-select: 52px height + LTR chevron side + 15px font — breaks
     our 40px control and RTL arrow. Not used.
   - .glass-badge: static mini label, no hover/active states. Not used.
   - .glass-btn--tertiary: dark-text-on-milk + alien hover motion. Not used.
   So all four controls reuse the .glass-card surface (house recipe, no
   new numbers). Typing area stays transparent (input rule untouched).
   .glass-card sets NO layout/text/direction rules: RTL order, chip
   scroll row, and 380px list-tools stacking all stand. */
.search-box.glass-card {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 12px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.filter-btn.glass-card {
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Active chip must survive: (0,3,0) beats both the wash above and
   .filter-btn.active (0,2,0). Literals match --accent/--accent-dim/
   --accent-strong. */
.filter-btn.active.glass-card {
  border-color: #B7F34A;
  background: rgba(183, 243, 74, 0.12);
  color: #C9FF63;
}

/* Hover cue re-asserted at (0,3,0): without it, the (0,2,0) wash
   above would tie .filter-btn:hover (0,2,0) and win purely by order,
   masking the hover border/text change. Literals match
   --border-strong/--text. */
.filter-btn.glass-card:hover {
  border-color: #37413A;
  color: #F2F5F0;
}

.sort-control select.glass-card,
.clear-filters-btn.glass-card {
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 10px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Focus/hover cues use (0,3,0)+ guards so the .42 edge never masks
   them. Literals match --accent/--accent-soft. */
.sort-control select.glass-card:focus {
  border-color: #B7F34A;
}

.search-box.glass-card:focus-within {
  border-color: #B7F34A; /* (0,3,0) beats .search-box:focus-within (0,2,0); literal matches --accent */
}

.clear-filters-btn.glass-card:hover {
  border-color: #B7F34A;
  color: #CDF38A;
}

/* Same halo recipe for control microcopy. */
.search-box.glass-card input::placeholder,
.sort-control {
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}