/* Show Overview v4 — tokens, keyframes and interaction states.
 *
 * Render-blocking from index.html (like styles.css), because Calendar mounts
 * the overview without useV2Stylesheets — a runtime-injected sheet would paint
 * the page unstyled first. Layout is inline in the components; this file holds
 * only what inline styles cannot express: theme-aware tokens, @keyframes,
 * :hover / :focus-visible states and the reduced-motion override.
 *
 * Dark is the design's own palette (handoff IMPLEMENTATION.md §1). Light and
 * black are derived so the page follows the app's theme choice. Lime stays
 * lime as a FILL in every theme; as a line or text on a light surface it is
 * unreadable, so light mode uses a darkened --so-accent for strokes/text.
 */

:root {
  /* The app's own page colour, so the concert page and the editor sit on the same surface as everything else. */
  --so-page: var(--bg);
  --so-card: var(--bg-elevated);
  --so-raised: var(--surface);
  --so-raised-hover: color-mix(in srgb, var(--surface) 88%, var(--text));
  --so-section: var(--bg-sunken);
  --so-line: rgba(0, 0, 0, 0.08);
  --so-line-strong: rgba(0, 0, 0, 0.14);
  --so-text: #111214;
  --so-text-2: #5d5e61;
  --so-text-3: #8b8c8f;
  --so-tab-idle: rgba(0, 0, 0, 0.42);
  --so-hover-bg: rgba(0, 0, 0, 0.05);
  --so-row-tint: rgba(0, 0, 0, 0.025);

  --so-accent: #4f7300;
  --so-accent-fill: #d1fe17;
  --so-on-accent: #1a1a1a;
  --so-accent-tint: rgba(110, 150, 0, 0.12);

  --so-pos: #2e8f24;
  --so-pos-tint: rgba(46, 143, 36, 0.12);
  --so-neg: #d0232b;
  --so-neg-tint: rgba(208, 35, 43, 0.1);
  --so-neg-bar: rgba(219, 63, 62, 0.75);
  --so-warn: #a87a12;
  --so-disabled-bg: #e4e4e2;

  --so-ch-meta: #3f7ef0;
  --so-ch-newsletter: #e57a29;
  --so-ch-fbevent: #8a73c9;
  --so-ch-bandsintown: #c9a227;
  --so-ch-ai: #4b5bd6;
  --so-ch-google: #3f9a9a;
  --so-ch-social: #b764a8;
  --so-ch-referral: #74864a;
  --so-ch-instagram: #8b8c8f;
  --so-ch-other: #a3a4a6;
  --so-ch-meta-organic: #9dbcf5;
  --so-ch-direct: #9a948a;
  --so-ch-nosignal: rgba(0, 0, 0, 0.12);

  --so-gender-f: #2a2b2e;
  --so-gender-f-text: #ffffff;
  --so-gender-m: #8d8f93;
  --so-gender-m-text: #ffffff;
  --so-on-channel: #1a1a1a;
  --so-gender-u: #d6d7d9;

  --so-scrim: rgba(20, 20, 22, 0.35);
  --so-shadow-menu: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.dark, [data-theme="dark"] {
  --so-page: var(--bg);
  --so-card: var(--bg-elevated);
  --so-raised: var(--surface);
  --so-raised-hover: color-mix(in srgb, var(--surface) 88%, var(--text));
  --so-section: var(--bg-sunken);
  --so-line: rgba(255, 255, 255, 0.06);
  --so-line-strong: rgba(255, 255, 255, 0.12);
  --so-text: #ffffff;
  --so-text-2: #898a8b;
  --so-text-3: #737475;
  --so-tab-idle: rgba(255, 255, 255, 0.3);
  --so-hover-bg: rgba(255, 255, 255, 0.06);
  --so-row-tint: rgba(255, 255, 255, 0.03);

  --so-accent: #d1fe17;
  --so-accent-fill: #d1fe17;
  --so-on-accent: #1a1a1a;
  --so-accent-tint: rgba(209, 254, 23, 0.1);

  --so-pos: #53c546;
  --so-pos-tint: rgba(83, 197, 70, 0.14);
  --so-neg: #e72930;
  --so-neg-tint: rgba(231, 41, 48, 0.12);
  --so-neg-bar: rgba(219, 63, 62, 0.75);
  --so-warn: #f3c977;
  --so-disabled-bg: #292b2c;

  --so-ch-meta: #4c8dff;
  --so-ch-newsletter: #ef8a3c;
  --so-ch-fbevent: #9b86d6;
  --so-ch-bandsintown: #d9b84a;
  --so-ch-ai: #6f7de6;
  --so-ch-google: #5fb3b3;
  --so-ch-social: #c77dba;
  --so-ch-referral: #8a9a5b;
  --so-ch-instagram: #9a9b9c;
  --so-ch-other: #6d6f73;
  --so-ch-meta-organic: #7f9fd6;
  --so-ch-direct: #85807a;
  --so-ch-nosignal: rgba(255, 255, 255, 0.1);

  --so-gender-f: #e9e9ea;
  --so-gender-f-text: #1a1a1a;
  --so-gender-m: #5a5c60;
  --so-gender-m-text: #ffffff;
  --so-on-channel: #1a1a1a;
  --so-gender-u: #34363a;

  --so-scrim: rgba(0, 0, 0, 0.55);
  --so-shadow-menu: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

/* Black rides .dark (the provider keeps the class on) and only pulls the
   surfaces down to true black. */
[data-theme="black"] {
  --so-page: var(--bg);
  --so-card: var(--bg-elevated);
  --so-raised: var(--surface);
  --so-raised-hover: color-mix(in srgb, var(--surface) 88%, var(--text));
  --so-section: var(--bg-sunken);
}

@keyframes so4-menu-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: none; }
}
@keyframes so4-dlg-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes so4-dlg-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(10px) scale(0.98); }
}
@keyframes so4-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes so4-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* Focus: 2 px accent ring, 2 px offset, keyboard only. */
.so4 :focus-visible {
  outline: 2px solid var(--so-accent);
  outline-offset: 2px;
}
.so4 .so4-nofocusring:focus-visible { outline: none; }
:where(.so4) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.so4) button:disabled { cursor: default; }
:where(.so4) input { font: inherit; color: inherit; }

/* Tabs and menu rows share one hover language. */
.so4-tab { color: var(--so-tab-idle); transition: color 120ms, background 120ms; }
.so4-tab:hover, .so4-tab:focus-visible { color: var(--so-text); background: var(--so-hover-bg); }
.so4-tab[aria-current="page"], .so4-tab[aria-selected="true"] { color: var(--so-accent); }
.so4-tab[aria-current="page"]:hover, .so4-tab[aria-selected="true"]:hover { color: var(--so-accent); }

.so4-menuitem { color: var(--so-tab-idle); transition: color 120ms, background 120ms; }
.so4-menuitem:hover, .so4-menuitem:focus-visible { color: var(--so-text); background: var(--so-hover-bg); }
.so4-menuitem.is-danger { color: color-mix(in srgb, var(--so-neg) 75%, transparent); }
.so4-menuitem.is-danger:hover, .so4-menuitem.is-danger:focus-visible { color: var(--so-neg); background: var(--so-neg-tint); }

.so4-press { transition: filter 120ms, background 120ms; }
.so4-press:hover:not(:disabled) { filter: brightness(0.85); }
.so4-press:active:not(:disabled) { filter: brightness(0.7); }

.so4-seg { color: var(--so-text-2); transition: color 120ms, background 120ms; }
.so4-seg:hover { color: var(--so-text); }
.so4-seg[aria-pressed="true"], .so4-seg[aria-selected="true"] { background: var(--so-raised); color: var(--so-text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }

.so4-row { transition: background 120ms; }
.so4-row:hover { background: var(--so-raised); }
.so4-row .so4-row-reveal { opacity: 0; transition: opacity 120ms; }
.so4-row:hover .so4-row-reveal, .so4-row:focus-within .so4-row-reveal { opacity: 1; }

.so4-cell-input { background: transparent; border: 1px solid transparent; outline: none; transition: background 120ms, border-color 120ms; }
.so4-cell-input:hover:not(:disabled) { background: var(--so-raised); }
.so4-cell-input:focus { background: var(--so-raised); border-color: var(--so-accent); }
.so4-cell-input::placeholder { color: var(--so-text-3); }

.so4-icon-btn { color: var(--so-text-2); transition: color 120ms, background 120ms; }
.so4-icon-btn:hover { color: var(--so-text); background: var(--so-hover-bg); }

.so4-del { color: var(--so-neg); }
.so4-del:hover { background: var(--so-neg-tint); }

.so4-input { background: var(--so-raised); border: 1px solid transparent; outline: none; }
.so4-input:focus-within, .so4-input:focus { border-color: var(--so-accent); }

.so4-noscrollbar { scrollbar-width: none; }
.so4-noscrollbar::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .so4 *, .so4-portal * {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Diskussion composer: MentionField renders a bare <input>, styled here. */
.so4-composer-input {
  width: 100%; height: 40px; padding: 10px 12px; box-sizing: border-box;
  border-radius: 10px; background: var(--so-raised); border: 1px solid transparent;
  color: var(--so-text); font-size: 14px; outline: none;
}
.so4-composer-input:focus { border-color: var(--so-accent); }
.so4-composer-input::placeholder { color: var(--so-text-3); }
.so4 .mnt-menu { background: var(--so-card); border-color: var(--so-line); box-shadow: var(--so-shadow-menu); }
.so4 .mnt-item { color: var(--so-text); }
.so4 .mnt-item.is-active { background: var(--so-raised); }

/* Fields show focus with their own accent border; no second ring outside it. */
.so4 .so4-cell-input:focus-visible,
.so4 .so4-input:focus-visible,
.so4 .so4-composer-input:focus-visible { outline: none; }

/* Mobile chart is stretched (preserveAspectRatio none); keep stroke widths true. */
.so4-chart-mobile path, .so4-chart-mobile line { vector-effect: non-scaling-stroke; }

/* Touch screens have no hover: keep row actions (delete) visible. */
@media (hover: none) {
  .so4-row .so4-row-reveal { opacity: 1; }
}

/* The concert page fills its frame edge to edge (no inner padding band);
   the background is the app's own page surface. */
.fc-page:has(> .fc-swap > .so4) { padding: 0; }

/* The guest card cannot clip (its category menu must escape), so the last
   row's hover background takes the card's bottom corners itself. */
.so4 [role="grid"] > .so4-row:last-child {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

/* Redigera konsert fields: accent border on focus, no outer ring. */
.so4 .rk-input:focus { border-color: color-mix(in srgb, var(--so-accent) 50%, transparent) !important; outline: none; }
.so4 .rk-input::placeholder { color: var(--so-text-3); }
.so4 .rk-input:disabled { opacity: 0.6; }
.so4 .rk-input.rk-dashed { background: transparent !important; border-style: dashed !important; border-color: var(--so-line-strong) !important; }
html:has(.rk-page) { scrollbar-gutter: stable; }