/* craftweb Recorder — branding overlay
 * Wstrzykiwane do każdego HTML przez nginx sub_filter (cap-brand sidecar).
 * Override po stronie klienta — zero modyfikacji obrazu cap-web.
 *
 * Brand source: https://craftweb.stagingsite.pl/ (CSS variables)
 */

/* === FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

/* === BRAND TOKENS — light theme === */
:root {
  --cw-base: #EEEAE8;
  --cw-base-tint: #F9F7F7;
  --cw-base-bright: #FFFFFF;
  --cw-accent: #06C167;
  --cw-highlight: #4FE08F;
  --cw-ink: #121212;
  --cw-ink-medium: #575960;
  --cw-ink-muted: #7d7f89;
  --cw-ink-divider: #dbd8d8;
  --cw-font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cw-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* === BRAND TOKENS — dark theme (forsowany przez nginx) === */
html.dark, html.dark-theme,
body.dark, body.dark-theme,
[data-theme="dark"] {
  --cw-base: #0f0f0f;
  --cw-base-tint: #171719;
  --cw-base-bright: #000000;
  --cw-ink: #FFFFFF;
  --cw-ink-medium: #8e93a1;
  --cw-ink-muted: #36363c;
  --cw-ink-divider: #191a1d;
}

/* === GLOBALNA TYPOGRAFIA === */
html, body, button, input, select, textarea {
  font-family: var(--cw-font-sans) !important;
}

code, pre, kbd, samp,
[class*="font-mono"],
[class*="JetBrains" i] {
  font-family: var(--cw-font-mono) !important;
}

/* === GLOBALNE TŁO + KOLOR TEKSTU === */
html, body {
  background-color: var(--cw-base) !important;
  color: var(--cw-ink) !important;
  color-scheme: light;
}
html.dark, html.dark-theme,
html.dark body, html.dark-theme body {
  color-scheme: dark;
}

/* Cap używa Tailwind/Radix utility `bg-gray-1` jako "subtle backgrounds"
 * - mapujemy je na nasze tokens */
.bg-gray-1, [class*="bg-gray-1"]:not([class*="bg-gray-10"]):not([class*="bg-gray-11"]):not([class*="bg-gray-12"]) {
  background-color: var(--cw-base) !important;
}
.bg-gray-2, [class*="bg-gray-2"]:not([class*="bg-gray-20"]) {
  background-color: var(--cw-base-tint) !important;
}
.bg-gray-3 {
  background-color: var(--cw-base-bright) !important;
}

/* Główny tekst — Radix gray scale */
.text-gray-12 { color: var(--cw-ink) !important; }
.text-gray-11 { color: var(--cw-ink) !important; }
.text-gray-10 { color: var(--cw-ink-medium) !important; }
.text-gray-9 { color: var(--cw-ink-muted) !important; }

/* === DARK MODE: Cap radix-ui zmienne robią dużo z koroba, ale niektóre miejsca === */
/* Cap używa bg-white/text-black hardcoded — w dark mode trzeba override */
html.dark .bg-white, html.dark-theme .bg-white,
body.dark .bg-white, body.dark-theme .bg-white {
  background-color: var(--cw-base-tint) !important;
}
html.dark .text-black, html.dark-theme .text-black,
body.dark .text-black, body.dark-theme .text-black {
  color: var(--cw-ink) !important;
}
html.dark .border-white, html.dark-theme .border-white,
body.dark .border-white, body.dark-theme .border-white {
  border-color: var(--cw-ink-divider) !important;
}

/* Shadcn/ui standard tokens (Cap uses some) */
html.dark, html.dark-theme,
body.dark, body.dark-theme {
  --background: 15 15 15;
  --foreground: 255 255 255;
  --card: 23 23 25;
  --card-foreground: 255 255 255;
  --popover: 23 23 25;
  --popover-foreground: 255 255 255;
  --border: 25 26 29;
  --input: 25 26 29;
  --ring: 6 193 103;
}

/* Cap card backgrounds w dashboard */
body.dark [class*="rounded-xl"]:not([class*="bg-blue"]):not([class*="bg-red"]):not([class*="bg-green"]),
body.dark-theme [class*="rounded-xl"]:not([class*="bg-blue"]):not([class*="bg-red"]):not([class*="bg-green"]) {
  /* nie nadpisujemy backgroundu jeśli ma kolor akcentowy */
}

/* === LOGO PODMIANA ===
 * Cap renderuje inline SVG: <svg viewBox="0 0 120 40" aria-label="Cap Logo">…</svg>
 * Strategia: ukryć children path elementy, podstawić nasze logo via background.
 */
svg[aria-label="Cap Logo"] {
  background-image: url('/branding/logo-light.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
svg[aria-label="Cap Logo"] > * {
  visibility: hidden !important;
  fill: transparent !important;
}

html.dark svg[aria-label="Cap Logo"],
html.dark-theme svg[aria-label="Cap Logo"],
body.dark svg[aria-label="Cap Logo"],
body.dark-theme svg[aria-label="Cap Logo"],
[data-theme="dark"] svg[aria-label="Cap Logo"] {
  background-image: url('/branding/logo-dark.svg');
}

/* Drugi wariant Cap logo (login/onboarding) — okragle niebieskie, bez aria-label.
 * Wykluczamy glowny wordmark "Cap Logo" (on tez ma path z #4785FF, ale ma
 * dedykowane reguly wyzej z logo-{light,dark}.svg). */
svg:not([aria-label="Cap Logo"]):has(> path[fill="#4785FF"]) {
  background-image: url('/branding/favicon.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 12%;
  overflow: hidden;
}
svg:not([aria-label="Cap Logo"]):has(> path[fill="#4785FF"]) > * {
  visibility: hidden !important;
  fill: transparent !important;
}

/* === ACCENT KOLOR ===
 * Cap u��ywa primary blue (Radix `blue` scale + inline #4785FF, #ADC9FF).
 * Podmieniamy WSZYSTKIE niebieskie na nasz Uber Eats green.
 * Pelna skala 1-12 dla bg/text/border/ring (Radix UI uzywa az do gray-12).
 */

/* Tla — caly blue scale */
.bg-blue-1, [class*="bg-blue-1"]:not([class*="bg-blue-10"]):not([class*="bg-blue-11"]):not([class*="bg-blue-12"]) {
  background-color: color-mix(in srgb, var(--cw-accent) 8%, var(--cw-base)) !important;
}
.bg-blue-2 { background-color: color-mix(in srgb, var(--cw-accent) 12%, var(--cw-base)) !important; }
.bg-blue-3 { background-color: color-mix(in srgb, var(--cw-accent) 18%, var(--cw-base)) !important; }
.bg-blue-4 { background-color: color-mix(in srgb, var(--cw-accent) 25%, var(--cw-base)) !important; }
.bg-blue-5 { background-color: color-mix(in srgb, var(--cw-accent) 35%, var(--cw-base)) !important; }
.bg-blue-6 { background-color: color-mix(in srgb, var(--cw-accent) 50%, var(--cw-base)) !important; }
.bg-blue-7 { background-color: color-mix(in srgb, var(--cw-accent) 65%, var(--cw-base)) !important; }
.bg-blue-8 { background-color: color-mix(in srgb, var(--cw-accent) 80%, var(--cw-base)) !important; }
.bg-blue-9, .bg-blue-10, .bg-blue-11, .bg-blue-12,
[class*="bg-blue-9"], [class*="bg-blue-10"], [class*="bg-blue-11"], [class*="bg-blue-12"] {
  background-color: var(--cw-accent) !important;
}
.bg-blue-9:hover, .bg-blue-10:hover, .bg-blue-11:hover {
  background-color: var(--cw-highlight) !important;
}

/* Tekst — caly blue scale */
.text-blue-1, .text-blue-2, .text-blue-3, .text-blue-4, .text-blue-5,
.text-blue-6, .text-blue-7, .text-blue-8,
.text-blue-9, .text-blue-10, .text-blue-11, .text-blue-12,
[class*="text-blue-"] {
  color: var(--cw-accent) !important;
}

/* Borders */
.border-blue-1, .border-blue-2, .border-blue-3, .border-blue-4, .border-blue-5,
.border-blue-6, .border-blue-7, .border-blue-8,
.border-blue-9, .border-blue-10, .border-blue-11, .border-blue-12,
[class*="border-blue-"] {
  border-color: var(--cw-accent) !important;
}

/* Ring / outline (Tailwind focus utilities) */
.ring-blue-9, .ring-blue-10, .ring-blue-11,
.outline-blue-9, .outline-blue-10, .outline-blue-11,
[class*="ring-blue-"], [class*="outline-blue-"] {
  --tw-ring-color: var(--cw-accent) !important;
  outline-color: var(--cw-accent) !important;
}

/* Inline style fills — Cap blue logo path #4785FF + light variant #ADC9FF */
[fill="#4785FF"] { fill: var(--cw-accent) !important; }
[fill="#ADC9FF"] { fill: var(--cw-highlight) !important; }
[stroke="#4785FF"] { stroke: var(--cw-accent) !important; }
[stroke="#ADC9FF"] { stroke: var(--cw-highlight) !important; }

/* Tailwind defaults: bg-blue-500/600 itp. (poza Radix scale) */
.bg-blue-400, .bg-blue-500, .bg-blue-600, .bg-blue-700 {
  background-color: var(--cw-accent) !important;
}
.text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700 {
  color: var(--cw-accent) !important;
}

/* Cap "View analytics" link i podobne — uzywaja bg-blue/text-blue */
a[class*="text-blue"], button[class*="text-blue"] {
  color: var(--cw-accent) !important;
}

/* Avatary z bg-blue (np. literki w sidebar) */
[class*="bg-blue-"][class*="rounded-full"] {
  background-color: var(--cw-accent) !important;
  color: #FFFFFF !important;
}

/* === SKY / CYAN / INDIGO scale (Tailwind defaults) ===
 * Cap u��ywa bg-sky-200 + text-sky-600 na avatarach organizacji.
 * Tu pelne pokrycie kazdej niebieskawej gamy.
 */

/* sky scale (Tailwind: sky-50 do sky-950) */
[class*="bg-sky-"]:not([class*="bg-sky-7"]):not([class*="bg-sky-8"]):not([class*="bg-sky-9"]) {
  background-color: color-mix(in srgb, var(--cw-accent) 25%, var(--cw-base)) !important;
}
.bg-sky-700, .bg-sky-800, .bg-sky-900 {
  background-color: var(--cw-accent) !important;
}
[class*="text-sky-"], .text-sky-50, .text-sky-100, .text-sky-200, .text-sky-300,
.text-sky-400, .text-sky-500, .text-sky-600, .text-sky-700, .text-sky-800, .text-sky-900 {
  color: var(--cw-accent) !important;
}
[class*="border-sky-"] { border-color: var(--cw-accent) !important; }
[class*="ring-sky-"] { --tw-ring-color: var(--cw-accent) !important; }

/* cyan scale */
[class*="bg-cyan-"]:not([class*="bg-cyan-7"]):not([class*="bg-cyan-8"]):not([class*="bg-cyan-9"]) {
  background-color: color-mix(in srgb, var(--cw-accent) 25%, var(--cw-base)) !important;
}
.bg-cyan-700, .bg-cyan-800, .bg-cyan-900 {
  background-color: var(--cw-accent) !important;
}
[class*="text-cyan-"] { color: var(--cw-accent) !important; }
[class*="border-cyan-"] { border-color: var(--cw-accent) !important; }

/* indigo scale */
[class*="bg-indigo-"]:not([class*="bg-indigo-7"]):not([class*="bg-indigo-8"]):not([class*="bg-indigo-9"]) {
  background-color: color-mix(in srgb, var(--cw-accent) 25%, var(--cw-base)) !important;
}
.bg-indigo-700, .bg-indigo-800, .bg-indigo-900 {
  background-color: var(--cw-accent) !important;
}
[class*="text-indigo-"] { color: var(--cw-accent) !important; }

/* Hardcoded Cap blue colors w inline style — dodatkowe warianty */
[fill="#3b82f6"], [fill="#2563eb"], [fill="#1d4ed8"], [fill="#0ea5e9"], [fill="#0284c7"] {
  fill: var(--cw-accent) !important;
}
[style*="#4785FF"], [style*="#3b82f6"], [style*="#0ea5e9"] {
  background-color: var(--cw-accent) !important;
}

/* === MIKROCOPY MONO CAPS === */
/* Sygnaturowy zabieg z brandu CraftWeb — nawigacja i meta-tekst w mono caps. */
nav a,
header nav a,
[role="navigation"] a,
.text-xs[class*="uppercase"],
[class*="caption" i],
[data-slot="badge"] {
  font-family: var(--cw-font-mono) !important;
  letter-spacing: 0.05em;
}

/* === FOOTER === */
/* Cap.so footer często ma "Cap Software, Inc." — ukrywamy linki cap.so */
footer a[href*="cap.so"],
footer a[href*="capsoftware"],
a[href*="cap.so/blog"],
a[href*="cap.so/changelog"] {
  display: none !important;
}

/* === SCROLLBARY (kosmetyczne dopasowanie do palety) === */
* {
  scrollbar-color: var(--cw-ink-muted) transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--cw-ink-muted);
}

/* === SELECTION === */
::selection {
  background-color: var(--cw-accent);
  color: #FFFFFF;
}

/* === DARK MODE: drobne dopieszczenia === */

/* Cap ma sidebar items z bg na hover — w dark zbyt jasne */
body.dark [class*="hover:bg-gray-3"]:hover,
body.dark-theme [class*="hover:bg-gray-3"]:hover {
  background-color: var(--cw-base-tint) !important;
}

/* Pop-overy, dropdowny w dark — tła */
body.dark [role="menu"],
body.dark [role="dialog"],
body.dark [role="listbox"],
body.dark-theme [role="menu"],
body.dark-theme [role="dialog"],
body.dark-theme [role="listbox"] {
  background-color: var(--cw-base-tint) !important;
  border-color: var(--cw-ink-divider) !important;
}

/* Focus ring — kobalt na dark */
*:focus-visible {
  outline: 2px solid var(--cw-accent) !important;
  outline-offset: 2px;
}

/* Cap "Record in Browser" niebieski button — dark variant z highlight */
body.dark button[class*="bg-blue"] {
  color: #FFFFFF !important;
}