/* TeleSenior — global styles for the pre-bundle frame and the a11y opt-ins.
   Brand: Support, Safety, Love, Valor, Hope, Authority, Peace, Care, Vision,
   Trust, Accessibility, Efficiency */

/* ===== BRAND TOKENS =====
   A mirror of src/common/theme/brand.js. This sheet is a plain <link> in
   index.html and paints before the bundle exists, so it cannot import the
   tokens — the custom properties below are the seam. Every colour in this file
   goes through one of them, so a palette change is a one-line edit here rather
   than a search for hexes.
   The `*-rgb` triplets exist only because rgba() cannot take a hex var. */
/* The app renders at 15px, not the browser's 16px default.

   This rule paints before the bundle exists. Without it the page draws at 16px
   and then reflows when AccessibilityProvider mounts and applies the same
   value, which reads as a stutter on every load. `applyFontScale` in
   common/util/accessibility.js still sets this inline afterwards, and it must
   keep the same base: 93.75% of 16 is 15.

   Percent, never px: a reader who raised the default size in their own browser
   keeps that gain. */
html {
  font-size: 93.75%;
}

:root {
  --ts-cream: #fff1cc;          /* colors.cream — the body canvas */
  --ts-ink: #112c3a;            /* colors.ink */
  --ts-ink-rgb: 17, 44, 58;
  --ts-ink-contrast: #000000;   /* colors.contrastInk */
  --ts-ink-contrast-soft: #0a2230; /* colors.contrastInkSoft */
  --ts-burnt: #B63800;          /* colors.burnt — the focus ring */
  --ts-gold: #FFBA00;           /* colors.gold */
  --ts-gold-rgb: 255, 186, 0;
  --ts-white: #ffffff;          /* colors.white */
  --ts-font-body: "Roboto Condensed", system-ui, sans-serif; /* fonts.body */

  /* brand.js focusRing — 3px burnt, 2px offset. */
  --ts-focus-width: 3px;
  --ts-focus-offset: 2px;

  /* Neutral shimmer greys for the skeleton: a placeholder stands in for content
     that has no colour yet, so it carries no brand hue and has no token. Kept
     in step with the MuiSkeleton override in common/theme/components.js. */
  --ts-skeleton-base: #f0f0f0;
  --ts-skeleton-wave: #e0e0e0;

  /* Always-dark ink for text that must stay legible on a gold or printed
     surface regardless of theme (palette.alwaysDark). No brand token. */
  --ts-always-dark: #1a1a1a;
}

html, body {
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  /* Body font, matching the MUI theme. Was a Montserrat stack, which index.html
     never loads and the theme never mentions — the pre-bundle frame rendered in
     a different typeface from the app that replaced it. */
  font-family: var(--ts-font-body);
  background-color: var(--ts-cream);
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

/* Skip link for keyboard navigation */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 12px 24px;
  background-color: var(--ts-gold);
  color: var(--ts-always-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 0 0 8px 8px;
  /* Navy-tinted, per DESIGN.md §4 The Warm Shadow Rule. Was rgba(0,0,0,0.15). */
  box-shadow: 0 4px 16px rgba(var(--ts-ink-rgb), 0.15);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: none;
}

/* Selection styling with brand color */
::selection {
  background-color: rgba(var(--ts-gold-rgb), 0.3);
  color: inherit;
}

::-moz-selection {
  background-color: rgba(var(--ts-gold-rgb), 0.3);
  color: inherit;
}

/* Focus outline — Burnt Ember, 3px, per DESIGN.md §5 (brand.js focusRing).
   Was 2px Signal Gold #FFBA00, which measures 1.71:1 on white and 1.52:1 on
   cream: below the 3:1 WCAG 2.1 floor for a focus indicator, i.e. effectively
   invisible on every surface this app uses. Burnt is 5.26:1 on cream.
   Gold is still correct on NAVY surfaces only — see brand.js focusRingOnDark. */
*:focus-visible {
  outline: var(--ts-focus-width) solid var(--ts-burnt);
  outline-offset: var(--ts-focus-offset);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: var(--ts-focus-width) solid var(--ts-burnt);
  outline-offset: var(--ts-focus-offset);
}

/* Focus ring animation for enhanced visibility */
@keyframes focusRingPulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(var(--ts-gold-rgb), 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(var(--ts-gold-rgb), 0.2);
  }
}

/* ===== HIGH CONTRAST MODE SUPPORT =====
   The one place the warm palette is deliberately abandoned for absolutes
   (brand.js colors.contrastInk). Gold, not burnt, is the ring here: the canvas
   is black, and burnt on black is 2.1:1 — see brand.js focusRingOnDark. */
@media (prefers-contrast: high) {
  body {
    background-color: var(--ts-ink-contrast);
    color: var(--ts-white);
  }

  *:focus-visible {
    outline: var(--ts-focus-width) solid var(--ts-gold) !important;
    outline-offset: 3px !important;
  }

  .MuiButton-root {
    border: 2px solid currentColor !important;
  }

  .MuiCard-root,
  .MuiPaper-root {
    border: 2px solid var(--ts-white) !important;
  }

  .MuiListItemButton-root:hover,
  .MuiListItemButton-root.Mui-selected {
    background-color: rgba(var(--ts-gold-rgb), 0.3) !important;
  }

  a {
    text-decoration: underline !important;
  }
}

/* ===== FORCED COLORS (WINDOWS HIGH CONTRAST) =====
   System keywords only — the OS owns the palette here, so no brand token
   may appear in this block. */
@media (forced-colors: active) {
  *:focus-visible {
    outline: var(--ts-focus-width) solid CanvasText !important;
  }

  .MuiButton-root {
    border: 2px solid ButtonText !important;
  }

  .MuiIconButton-root {
    border: 1px solid ButtonText;
  }
}

/* ===== IN-APP DISPLAY PREFERENCES (Settings → Afișare) =====
   Opt-in classes toggled on <html> by common/util/accessibility.js. They take
   effect only once a user turns them on, so the default look is unchanged. */

/* Bold text — heavier weight on body copy and controls for easier reading.
   Headings are already bold and are intentionally left untouched. */
html.a11y-bold body,
html.a11y-bold p,
html.a11y-bold li,
html.a11y-bold span,
html.a11y-bold a,
html.a11y-bold label,
html.a11y-bold input,
html.a11y-bold textarea,
html.a11y-bold td,
html.a11y-bold th,
html.a11y-bold .MuiTypography-body1,
html.a11y-bold .MuiTypography-body2,
html.a11y-bold .MuiTypography-subtitle1,
html.a11y-bold .MuiTypography-subtitle2,
html.a11y-bold .MuiTypography-caption,
html.a11y-bold .MuiListItemText-primary,
html.a11y-bold .MuiListItemText-secondary,
html.a11y-bold .MuiFormLabel-root,
html.a11y-bold .MuiInputBase-input,
html.a11y-bold .MuiMenuItem-root,
html.a11y-bold .MuiButton-root,
html.a11y-bold .MuiChip-label,
html.a11y-bold .MuiTab-root {
  font-weight: 600 !important;
}

/* High contrast — strengthen the subtle parts of the (already-AAA) theme:
   solid dark borders, darker secondary text, underlined links, thicker focus.
   Brand colours and primary buttons are kept intact. */
html.a11y-contrast .MuiDivider-root,
html.a11y-contrast hr {
  border-color: var(--ts-ink) !important;
  opacity: 1 !important;
}
html.a11y-contrast .MuiOutlinedInput-notchedOutline {
  border-color: var(--ts-ink) !important;
  border-width: 2px !important;
}
html.a11y-contrast .MuiCard-root,
html.a11y-contrast .MuiDialog-paper,
html.a11y-contrast .MuiMenu-paper,
html.a11y-contrast .MuiPopover-paper {
  border: 2px solid var(--ts-ink) !important;
}
html.a11y-contrast .MuiInputLabel-root,
html.a11y-contrast .MuiFormHelperText-root,
html.a11y-contrast .MuiListItemText-secondary,
html.a11y-contrast .MuiTypography-caption,
html.a11y-contrast .MuiTypography-subtitle2 {
  color: var(--ts-ink-contrast-soft) !important;
  opacity: 1 !important;
}
html.a11y-contrast a:not(.MuiButton-root) {
  text-decoration: underline !important;
}
html.a11y-contrast *:focus-visible {
  outline: var(--ts-focus-width) solid var(--ts-burnt) !important;
  outline-offset: var(--ts-focus-offset) !important;
}
html.a11y-contrast .MuiSwitch-track {
  opacity: 1 !important;
  border: 1px solid var(--ts-ink) !important;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Hide scrollbar but keep functionality on mobile */
@media (max-width: 768px) {
  body {
    -webkit-overflow-scrolling: touch;
  }
}

/* Print styles */
@media print {
  body {
    background-color: white !important;
  }

  .no-print {
    display: none !important;
  }
}

/* Loader — the spinner index.html paints before the bundle arrives.
   common/components/Loader.jsx toggles this element's `display` rather than
   mounting a second spinner, so the markup and this rule are both load-bearing:
   the base geometry lives in index.html's inline <style>, the brand tint here. */
.loader {
  border-top-color: var(--ts-gold) !important;
}

/* Animation keyframes */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Apply animations to MUI components */
.MuiPaper-root.MuiPopover-paper {
  animation: fadeSlideIn 0.2s ease-out;
}

.MuiDialog-paper {
  animation: scaleIn 0.25s ease-out;
}

.MuiCard-root {
  animation: fadeSlideUp 0.3s ease-out;
}

.MuiSnackbar-root .MuiPaper-root {
  animation: fadeSlideUp 0.3s ease-out;
}

/* Smooth transitions for interactive elements */
button,
a,
.MuiButtonBase-root,
.MuiListItemButton-root,
.MuiIconButton-root {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Skeleton loading animation */
.MuiSkeleton-root {
  background: linear-gradient(
    90deg,
    var(--ts-skeleton-base) 25%,
    var(--ts-skeleton-wave) 50%,
    var(--ts-skeleton-base) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Better hover states for cards and papers */
.MuiCard-root:hover,
.MuiPaper-root:hover {
  cursor: default;
}

/* Loading spinner custom style */
.loading-spinner {
  animation: pulse 1.5s ease-in-out infinite;
}

/* ===== REDUCED MOTION SUPPORT ===== */
@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;
  }

  .MuiPaper-root.MuiPopover-paper,
  .MuiDialog-paper,
  .MuiCard-root,
  .MuiSnackbar-root .MuiPaper-root {
    animation: none !important;
  }

  .MuiSkeleton-root {
    animation: none !important;
  }
}

/* ===== SCREEN READER ONLY UTILITY ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== TOUCH TARGET SIZE FOR MOBILE ACCESSIBILITY ===== */
@media (pointer: coarse) {
  button,
  a,
  [role="button"],
  .MuiIconButton-root {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ===== CROSS-PAGE VIEW TRANSITIONS =====
   Used by react-router navigations opted in with { viewTransition: true }.
   Old page fades up and out, new page rises in — same motion language as
   the fadeSlideUp entrance. Browsers without the View Transitions API
   simply swap pages instantly. */
@keyframes vt-page-out {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@keyframes vt-page-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
::view-transition-old(root) {
  animation: vt-page-out 200ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
::view-transition-new(root) {
  animation: vt-page-in 300ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}