/* SSR CI skin for cal.com (termine.serielle-fassadensanierung.de) */
:root, html.dark {
  --cal-brand: #CFDD28 !important;
  --cal-brand-emphasis: #b9c61f !important;
  --cal-brand-text: #2F3033 !important;
  --cal-brand-accent: #2F3033 !important;
  --brand-color: #CFDD28 !important;
  --brand-text-color: #2F3033 !important;
}
body, input, button, select, textarea {
  font-family: 'Inter','Inter Tight',system-ui,-apple-system,sans-serif !important;
}
h1,h2,h3,.font-cal,[class*="font-cal"] {
  font-family: 'Inter Tight','Inter',system-ui,sans-serif !important;
  letter-spacing: -0.01em;
}
/* wordmark -> SSR logo. Target the STABLE original selectors so it survives
   React hydration (which restores img[alt="Cal"] src="/api/logo"); filter:none
   kills cal's dark:invert. Dark bg -> white logo. */
img[alt="Cal"], img[title="Cal"], img[src="/api/logo"], img.ssr-wordmark {
  content: url("/ssr-assets/ssr-logo.png") !important;
  height: 34px !important; width: auto !important; filter: none !important;
}
html.dark img[alt="Cal"], html.dark img[title="Cal"], html.dark img[src="/api/logo"], html.dark img.ssr-wordmark {
  content: url("/ssr-assets/ssr-logo-white.png") !important; filter: none !important;
}
/* primary login button = lime fill, graphite text (WCAG AA both themes) */
button[type="submit"], [class*="bg-brand-default"], [data-testid="submit"] {
  background-color: #CFDD28 !important; color: #2F3033 !important; border-color: #CFDD28 !important;
}
button[type="submit"]:hover, [class*="bg-brand-default"]:hover {
  background-color: #b9c61f !important; color: #2F3033 !important;
}
a[class*="text-brand"], .text-brand-default { color: #2F3033 !important; }
html.dark a[class*="text-brand"], html.dark .text-brand-default { color: #CFDD28 !important; }

/* ================= SSR DASHBOARD CHROME LAYER (appended 2026-07-05) =================
 * Additive: does NOT alter the login/booker rules above. Robust structural / ARIA /
 * data-testid selectors only (no fragile Tailwind hash classes). #CFDD28 accent,
 * graphite #2F3033 text on lime (WCAG AA >= 9:1). Applies to the logged-in dashboard
 * once cal.staging routes through this skin. Primary buttons + checked switches are
 * already lime via the user brandColor(--cal-brand); rules below cover what Cal.com
 * leaves neutral-gray: active sidebar item, focus rings, radio/checkbox accents. */

/* Active sidebar / left-nav item: Cal uses [aria-current='page']:bg-emphasis (gray).
 * Force lime fill + graphite text on the DESKTOP sidebar links (which carry a real bg). */
nav a[aria-current="page"]:not([class*="bg-transparent"]),
[data-testid="navigation"] a[aria-current="page"]:not([class*="bg-transparent"]) {
  background-color: #CFDD28 !important;
  color: #2F3033 !important;
}
nav a[aria-current="page"]:not([class*="bg-transparent"]) svg,
nav a[aria-current="page"]:not([class*="bg-transparent"]) [class*="text-"] {
  color: #2F3033 !important;
}
/* inactive sidebar item: subtle lime hover affordance */
nav a:not([aria-current="page"]):hover { box-shadow: inset 2px 0 0 #CFDD28; }

/* Mobile bottom-tab active state (transparent bg, uses text-emphasis): color only. */
nav a[aria-current="page"][class*="bg-transparent"] { color: #2F3033 !important; }
html.dark nav a[aria-current="page"][class*="bg-transparent"] { color: #CFDD28 !important; }

/* Toggles/switches (Radix role=switch): guarantee checked = lime in BOTH themes.
 * Cal dark theme maps checked->brand-emphasis; pin it to the SSR accent for consistency. */
button[role="switch"][data-state="checked"],
html.dark button[role="switch"][data-state="checked"] {
  background-color: #CFDD28 !important;
  border-color: #CFDD28 !important;
}
button[role="switch"][data-state="unchecked"] { /* leave Cal default gray track */ }

/* Primary/brand buttons already lime via --cal-brand; enforce graphite label for AA. */
button[class*="bg-brand-default"], a[class*="bg-brand-default"],
[data-testid="new-event-type"], [data-testid="new"] {
  color: #2F3033 !important;
}
html.dark button[class*="bg-brand-default"] { color: #2F3033 !important; }

/* Focus rings -> lime (visible a11y focus, both themes) */
*:focus-visible { outline-color: #CFDD28 !important; }
[class*="ring-brand-default"], [class*="focus:ring-brand"] { --tw-ring-color: #CFDD28 !important; }

/* Native radio / checkbox accents (onboarding + settings forms) */
input[type="checkbox"], input[type="radio"] { accent-color: #CFDD28 !important; }

/* Selected day / active pill in availability + booking-management views:
 * Cal marks selected with aria-selected; tint lime with graphite text. */
[aria-selected="true"][class*="bg-brand"],
[aria-pressed="true"][class*="bg-brand"] { background-color:#CFDD28 !important; color:#2F3033 !important; }

/* Shell: make sure the brand var is the SSR accent everywhere in the app frame. */
[data-testid="dashboard-shell"], :root, html.dark { --cal-brand: #CFDD28 !important; }

/* de-brand CSS fallback: hide cal.com company-credit / version footer links even if
 * the JS sweep is late. Stable selector = the credit anchors point at cal.com. */
a[href^="https://cal.com"], a[href="https://cal.com/"], a[href*="//cal.com"] { display: none !important; }

/* broaden active-item highlight to be container-agnostic: the MAIN dashboard sidebar
 * is an <aside>/div (not <nav>), so scope by ARIA state only. Excludes the mobile
 * bottom-tab (bg-transparent) which is handled text-only above. Lime pill + graphite. */
a[aria-current="page"]:not([class*="bg-transparent"]) {
  background-color: #CFDD28 !important;
  color: #2F3033 !important;
}
a[aria-current="page"]:not([class*="bg-transparent"]) svg,
a[aria-current="page"]:not([class*="bg-transparent"]) span,
a[aria-current="page"]:not([class*="bg-transparent"]) [class*="text-"] {
  color: #2F3033 !important;
}

/* FIX (2026-07-05): desktop sidebar items carry `todesktop:hover:!bg-transparent`,
 * so the earlier :not([class*="bg-transparent"]) guard wrongly skipped them. Cal marks
 * the ACTIVE item gray via the `bg-emphasis` token (both main sidebar + settings nav);
 * the mobile bottom-tab uses `text-emphasis` instead. Target bg-emphasis directly. */
a[aria-current="page"][class*="bg-emphasis"] {
  background-color: #CFDD28 !important;
  color: #2F3033 !important;
}
a[aria-current="page"][class*="bg-emphasis"] svg,
a[aria-current="page"][class*="bg-emphasis"] span,
a[aria-current="page"][class*="bg-emphasis"] [class*="text-"] {
  color: #2F3033 !important;
}

/* ===== SSR batch-2 (2026-07-05): banner recolor + broadened cal.com hide + a11y ===== */

/* Admin warning banner ("You are admin but...") is Cal's bg-orange-400 top strip.
 * Recolor to SSR graphite + near-white text (AA ~13:1) + lime accent link/underline. */
[data-testid="banner"],
[data-testid="banner"].bg-orange-400,
div[class*="bg-orange-400"] {
  background-color: #2F3033 !important;
  background-image: none !important;
  color: #F4F4F1 !important;
}
[data-testid="banner"] a,
[data-testid="banner"] button,
div[class*="bg-orange-400"] a {
  color: #CFDD28 !important;
  border-bottom-color: #CFDD28 !important;
}
[data-testid="banner"] svg,
div[class*="bg-orange-400"] svg { color: #CFDD28 !important; }

/* Hide ALL cal.com credit/roadmap/releases/docs links (broadened to catch go.cal.com).
 * Fallback for the JS; stable selector = the anchors point at cal.com. */
a[href*="cal.com"] { display: none !important; }

/* Secondary/minimal buttons that remain: ensure readable graphite (AA) in light,
 * light in dark (Cal's text-subtle/muted grays are too faint on empty-states). */
button[class*="text-subtle"], a[class*="text-subtle"] { color: #2F3033 !important; }
html.dark button[class*="text-subtle"], html.dark a[class*="text-subtle"] { color: #E8EAD0 !important; }
