/*
  TV (Samsung Tizen) display tuning + shared design tokens
  Loaded on every page AFTER fonts.css and the inline <style> blocks,
  so equal-specificity rules here win the cascade.

  Goals:
    1. Scale the whole rem-based UI up for large TV viewports (viewed from ~3 m).
    2. Solid card backgrounds as fallback for missing backdrop-filter
       (older Tizen WebKit browsers render the glassy cards without blur).
    3. Clear focus rings for D-pad / remote navigation (no mouse on TV).
    4. Better contrast for small muted text.
    5. ONE brand accent (indigo -> violet) shared across every page.
    6. Shared building blocks: spinner, empty/error states, gentle motion.

  Keeps the existing visual identity: dark theme, indigo-violet gradient,
  18px rounding. Success/error/warning stay as STATUS colors only.
*/

/* --- 5. GLOBAL DESIGN TOKENS (canonical brand accent) ---
   Unifies the ~8 page-local accent gradients on the canonical
   indigo->violet brand. Written against all three :root spellings the
   pages use so the shared file is authoritative everywhere.
   Status colors are intentionally NOT unified beyond their defaults:
   green stays green where it means "ok". */
:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  --accent-color: #6366f1;
  --accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  --accent-color-2: #a855f7;
  --accent-grad: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  --success-color: #10b981;
  --error-color: #ef4444;
}

/* --- 1. Scale up the whole UI on big screens (rem-based sizing) --- */
@media (min-width: 1600px) {
  html { font-size: 20px; }
}

/* --- 1b. Larger min-heights for inputs and buttons on TV --- */
@media (min-width: 1600px) {
  input.form-input, select.form-input, textarea.form-input, .btn-submit {
    min-height: 52px;
  }
}

/* --- 2. Card readability when backdrop-filter is unavailable --- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card {
    background: #0d101c !important;
  }
}

/* --- 3. Focus visibility (WCAG 2.4.7) ---
   :focus-visible rings appear on keyboard navigation; the plain :focus
   fallback below keeps D-pad navigation visible on TVs (which have no
   mouse). Both use the shared brand accent. Explicit box-shadow rings
   on inputs (index/admin .form-input:focus) simply double up with this
   outline and render slightly larger — intended.
   Non-interactive containers focused programmatically (tabindex="-1",
   used by the explorer modal) are excluded. */
:focus-visible:not([tabindex="-1"]),
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible:not([tabindex="-1"]) {
  outline: 2px solid var(--accent-color) !important;
  outline-offset: 2px;
}

/* Fallback: focus ring on plain :focus for keyboard-only environments. */
a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus {
  outline: 2px solid var(--accent-color) !important;
  outline-offset: 2px;
}

@media (min-width: 1600px) {
  a:focus, a:focus-visible, button:focus, button:focus-visible,
  input:focus, input:focus-visible, select:focus, select:focus-visible,
  textarea:focus, textarea:focus-visible, summary:focus, summary:focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }
}

/* --- 4. Better contrast for small muted text on TV --- */
@media (min-width: 1600px) {
  :root, [data-theme="dark"] {
    --text-muted: #a9b1c4;
  }
}

/* --- 6. Shared loading / empty / error states --- */
.spinner {
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  animation: tvSpin 0.7s linear infinite;
}
.spinner-wrap {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-muted, #8c93a3);
  font-size: 0.85rem;
}
@keyframes tvSpin { to { transform: rotate(360deg) } }

.empty-state,
.error-state {
  text-align: center;
  color: var(--text-muted, #8c93a3);
  padding: 1.75rem 1rem;
  font-size: 0.85rem;
}
.error-state { color: var(--error-color, #ef4444); }
.error-state .btn { margin-top: 0.75rem }

/* Comfortable touch sizes for small header utility controls
   (language chips, theme toggle, logout). Overrides the tiny
   `font-size:0.6rem` generated chips because tv.css loads last. */
header button { min-height: 32px; }
header button[id*="lang"], header button[id^="h_"] {
  font-size: 0.75rem;
  padding: 0.32rem 0.6rem;
  border-radius: 6px;
}
button { min-height: 30px; }

/* --- 7. Gentle, guarded motion --- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px) }
    to   { opacity: 1; transform: none }
  }
  .stat-box, .total-card {
    animation: fadeInUp 0.25s ease-out both;
  }
  .balance-grid .stat-box:nth-child(2) { animation-delay: 0.05s }
  .balance-grid .stat-box:nth-child(3) { animation-delay: 0.10s }
  .balance-grid .stat-box:nth-child(4) { animation-delay: 0.15s }
  .balance-grid .stat-box:nth-child(5) { animation-delay: 0.20s }
  .balance-grid .stat-box:nth-child(6) { animation-delay: 0.25s }
  .grid > .card {
    animation: fadeInUp 0.25s ease-out both;
  }
  .grid > .card:nth-child(2) { animation-delay: 0.05s }
  .grid > .card:nth-child(3) { animation-delay: 0.10s }
  .grid > .card:nth-child(4) { animation-delay: 0.15s }
  .grid > .card:nth-child(5) { animation-delay: 0.20s }
  .grid > .card:nth-child(6) { animation-delay: 0.25s }
  .grid > .card:nth-child(7) { animation-delay: 0.30s }
  .grid > .card:nth-child(8) { animation-delay: 0.35s }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}