/* AQC Aktivitetsplattform — small custom styles only.
   Layout/visuals come from Tailwind (CDN) + the shared config in index.html. */

@layer base {
  html, body { margin: 0; padding: 0; }
  body { overscroll-behavior: none; }
}

/* ---- Theme tokens -------------------------------------------------------
   Tailwind colors resolve to `rgb(var(--c-*) / <alpha>)` (see index.html),
   so swapping these RGB channel triplets re-themes the whole app. The light
   set matches the original design; `.dark` overrides the surface/text tokens.
   Accent + "fixed"/inverse tokens are intentionally kept so the dark accent
   cards (KPI / Hailey) stay dark with light text in both themes. */
:root {
  --c-primary-fixed-dim: 255 180 172;
  --c-primary-container: 225 38 41;
  --c-on-tertiary-fixed: 0 31 39;
  --c-secondary-fixed-dim: 198 198 201;
  --c-surface-bright: 249 249 250;
  --c-surface-container: 238 238 239;
  --c-on-primary-container: 255 251 255;
  --c-surface-dim: 217 218 219;
  --c-inverse-primary: 255 180 172;
  --c-error-container: 255 218 214;
  --c-secondary-fixed: 226 226 229;
  --c-on-secondary-fixed-variant: 69 71 73;
  --c-tertiary-fixed: 175 236 255;
  --c-background: 249 249 250;
  --c-on-error-container: 147 0 10;
  --c-error: 186 26 26;
  --c-on-tertiary-container: 249 253 255;
  --c-primary-fixed: 255 218 214;
  --c-secondary-container: 226 226 229;
  --c-tertiary: 0 101 120;
  --c-on-background: 26 28 29;
  --c-on-primary: 255 255 255;
  --c-surface-container-highest: 226 226 227;
  --c-tertiary-fixed-dim: 110 212 240;
  --c-inverse-surface: 47 49 50;
  --c-primary: 187 0 21;
  --c-inverse-on-surface: 240 241 242;
  --c-on-secondary-fixed: 26 28 30;
  --c-outline: 145 111 107;
  --c-on-tertiary: 255 255 255;
  --c-secondary: 93 94 97;
  --c-on-primary-fixed: 65 0 3;
  --c-surface-container-lowest: 255 255 255;
  --c-on-secondary: 255 255 255;
  --c-on-surface: 26 28 29;
  --c-surface: 249 249 250;
  --c-outline-variant: 230 189 184;
  --c-tertiary-container: 0 128 152;
  --c-on-surface-variant: 93 63 60;
  --c-on-error: 255 255 255;
  --c-on-tertiary-fixed-variant: 0 78 93;
  --c-surface-container-high: 232 232 233;
  --c-surface-tint: 192 0 22;
  --c-on-secondary-container: 99 100 103;
  --c-surface-container-low: 243 243 244;
  --c-on-primary-fixed-variant: 147 0 14;
  --c-surface-variant: 226 226 227;
}
html.dark {
  --c-background: 18 19 20;
  --c-surface: 18 19 20;
  --c-surface-bright: 28 30 31;
  --c-surface-dim: 13 14 15;
  --c-surface-container-lowest: 14 15 16;
  --c-surface-container-low: 26 28 29;
  --c-surface-container: 30 32 33;
  --c-surface-container-high: 40 42 43;
  --c-surface-container-highest: 51 53 55;
  --c-surface-variant: 51 53 55;
  --c-on-surface: 227 226 227;
  --c-on-background: 227 226 227;
  --c-on-surface-variant: 207 196 194;
  --c-secondary: 176 176 179;
  --c-secondary-container: 58 59 62;
  --c-on-secondary-container: 217 217 220;
  --c-outline: 154 138 135;
  --c-outline-variant: 74 63 61;
  --c-primary: 255 92 106;
  --c-primary-container: 210 31 44;
  --c-surface-tint: 255 92 106;
  --c-tertiary: 90 209 232;
  --c-tertiary-container: 10 151 176;
  --c-error: 255 138 128;
  --c-inverse-surface: 58 60 62;
}
/* Toned page ground for dark mode (body uses bg-surface). */
html.dark body { color-scheme: dark; }

/* Smooth cross-fade when switching light/dark. The class is added only for the
   duration of the swap (see App.ui.toggleTheme) so it doesn't slow hover states.
   Gated on no-preference so it never overrides the reduced-motion rule below. */
@media (prefers-reduced-motion: no-preference) {
  html.theme-transition,
  html.theme-transition *,
  html.theme-transition *::before,
  html.theme-transition *::after {
    transition: background-color 0.4s ease, border-color 0.4s ease,
      color 0.4s ease, fill 0.4s ease, stroke 0.4s ease, box-shadow 0.4s ease !important;
  }
}

/* The `hidden` attribute must win over Tailwind display utilities such as
   `flex` (equal specificity would otherwise let the utility show the element). */
[hidden] { display: none !important; }

/* Hide scrollbars to match the design mockups. */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

/* Multi-line truncation helpers (not available via Tailwind CDN utilities). */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Filled Material Symbols variant used for status icons. */
.msf { font-variation-settings: 'FILL' 1; }

/* Toast notifications (AQC Notification Pipeline mock). */
#toast-root {
  position: fixed;
  z-index: 100;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(92vw, 420px);
}
.aqc-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: #2f3132;
  color: #f0f1f2;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px -4px rgba(37, 39, 41, 0.25);
  font-size: 14px;
  line-height: 20px;
  animation: aqc-toast-in 0.22s ease-out;
}
.aqc-toast.leaving { animation: aqc-toast-out 0.25s ease-in forwards; }
.aqc-toast .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }
@keyframes aqc-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes aqc-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}

/* Fallback tile shown when a remote (Google-hosted) image fails to load. */
.img-fallback {
  background: linear-gradient(135deg, #bb0015 0%, #e12629 55%, #2f3132 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-fallback .material-symbols-outlined { font-size: 40px; opacity: 0.9; }

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}