/*
 * VikingHub — SaaS design system.
 * Calm neutral surfaces, one accent colour, flat cards, no glow, no
 * gradients, no decorative animation. Loaded after the main stylesheet; the
 * dashboard bundle sets many styles inline, so some rules need !important.
 */

/* Dark (default): black surfaces + dark green brand (#047857) */
:root {
  --background: 0 0% 3%;           /* #080808 */
  --foreground: 150 12% 95%;
  --card: 150 6% 7%;               /* #111312 */
  --card-foreground: 150 12% 95%;
  --popover: 150 6% 8%;
  --popover-foreground: 150 12% 95%;
  --primary: 163 94% 24%;          /* dark green #047857 */
  --primary-foreground: 0 0% 100%;
  --secondary: 150 5% 11%;         /* hover / inner panels */
  --secondary-foreground: 150 12% 95%;
  --muted: 150 5% 11%;
  --muted-foreground: 150 5% 64%;
  --accent: 163 94% 24%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 72% 56%;
  --destructive-foreground: 0 0% 100%;
  --border: 150 5% 17%;
  --input: 150 5% 24%;
  --ring: 160 84% 39%;
  --radius: 0.625rem;

  --sw-font: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --sw-sidebar: 0 0% 4.5%;
  --sw-accent-text: 158 64% 52%;   /* green used as text on black #34d399 */
  --sw-accent2: 160 84% 39%;       /* lighter green #10b981 for secondary highlights */
  --sw-accent2-text: 156 72% 67%;
  --sw-ok: 142 70% 45%;
  --sw-warn: 38 92% 55%;
  --sw-bad: 0 84% 62%;
  --sw-shadow: none;
  color-scheme: dark;
}

/* Light: white surfaces, near-black text, the same dark green */
html[data-theme="light"] {
  --background: 150 10% 95%;       /* #f1f4f2 so white cards stand out */
  --foreground: 150 20% 6%;        /* near black */
  --card: 0 0% 100%;
  --card-foreground: 150 20% 6%;
  --popover: 0 0% 100%;
  --popover-foreground: 150 20% 6%;
  --primary: 163 94% 24%;
  --primary-foreground: 0 0% 100%;
  --secondary: 150 10% 93%;
  --secondary-foreground: 150 20% 6%;
  --muted: 150 10% 93%;
  --muted-foreground: 150 6% 33%;
  --accent: 163 94% 24%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 72% 48%;
  --border: 150 8% 79%;            /* clearly visible card / divider edges */
  --input: 150 6% 66%;             /* inputs and buttons: a stronger edge */
  --ring: 163 94% 24%;
  --sw-sidebar: 0 0% 100%;
  --sw-accent-text: 163 94% 22%;
  --sw-accent2: 161 94% 30%;       /* #059669 */
  --sw-accent2-text: 164 86% 18%;
  --sw-ok: 142 72% 27%;
  --sw-warn: 32 95% 34%;
  --sw-bad: 0 72% 45%;
  --sw-shadow: 0 1px 2px rgba(10, 20, 15, .08), 0 2px 6px rgba(10, 20, 15, .05);
  color-scheme: light;
}

html, body { background: hsl(var(--background)) !important; }
html.scc-theme-switching *, html.scc-theme-switching *::before, html.scc-theme-switching *::after { transition: none !important; }
body, button, input, select, textarea { font-family: var(--sw-font) !important; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: hsl(var(--foreground)); }

/* ------------------------------------------------ remove decoration */
main > .orb-1, main > .orb-2, main > .orb-3, main > .orb-4,
.layout-sidebar [class^="orb"], .layout-sidebar [class*=" orb"] { display: none !important; }
.app-grid-bg { background-image: none !important; }
.header-bar-dyn { display: none !important; }

/* Shimmering gradient text → plain text. */
.hub-shimmer, .sb-sub,
[style*="page-title-shimmer"],
main [style*="background-clip: text"],
.layout-sidebar [style*="background-clip: text"],
.header-title-dyn {
  animation: none !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  filter: none !important;
}
.hub-shimmer { color: hsl(var(--foreground)) !important; }
.sb-sub { color: hsl(var(--muted-foreground)) !important; }
[style*="page-title-shimmer"], main [style*="background-clip: text"] { color: hsl(var(--foreground)) !important; }

/* No glow, no looping animation (loading spinners keep theirs). */
main [style*="box-shadow"], .layout-sidebar [style*="box-shadow"], .layout-header [style*="box-shadow"] { box-shadow: none !important; }
main [style*="text-shadow"], .layout-sidebar [style*="text-shadow"] { text-shadow: none !important; }
/* The original stylesheet also adds dark text shadows by class: none anywhere in the app frame. */
.layout-sidebar, .layout-sidebar *, .layout-header, .layout-header *, .layout-main-content, .layout-main-content * { text-shadow: none !important; }
main *:not(.animate-spin):not(.animate-pulse):not(.animate-spin *),
.layout-sidebar *, .layout-header * { animation: none !important; }
main [class*="shadow-"]:not(.scc-page *) { --tw-shadow: 0 0 #0000 !important; box-shadow: none !important; }

/* ------------------------------------------------------- sidebar */
/* Always exactly one screen tall: the menu scrolls, the account area stays visible. */
.layout-sidebar {
  width: 260px !important;
  height: 100vh !important;
  height: 100dvh !important;
  position: sticky !important;
  top: 0;
  align-self: flex-start;
  background: hsl(var(--sw-sidebar)) !important;
}
@media (min-width: 769px) and (max-width: 1100px) { .layout-sidebar { width: 236px !important; } }
@media (max-width: 768px) { .layout-sidebar { position: fixed !important; top: 0 !important; bottom: 0 !important; height: 100dvh !important; } }
html[dir="ltr"] .layout-sidebar, html:not([dir]) .layout-sidebar { border-right: 1px solid hsl(var(--border)) !important; }
html[dir="rtl"] .layout-sidebar { border-left: 1px solid hsl(var(--border)) !important; border-right: 0 !important; }

/* Brand row: same height as the top bar, so both bottom lines meet. */
.layout-sidebar > div:first-child {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 18px !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  flex: none;
}
.layout-sidebar > div:first-child a { display: block; width: 100%; }
.layout-sidebar > div:first-child a > div { gap: 11px !important; min-width: 0; align-items: center !important; }
.layout-sidebar > div:first-child img {
  height: 32px !important;
  width: 32px !important;
  border-radius: 9px;
  content: url("/brand-mark.svg");
}
.layout-sidebar > div:first-child a > div > div { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.layout-sidebar > div:first-child a > div > div > div:first-child {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  letter-spacing: -.2px !important;
  line-height: 1.1 !important;
  color: hsl(var(--foreground)) !important;
}
.layout-sidebar > div:first-child a > div > div > div:last-child {
  font-size: 9.5px !important;
  letter-spacing: 1.3px !important;
  margin-top: 0 !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

/* Menu */
.layout-sidebar nav { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; padding: 14px 12px !important; display: flex; flex-direction: column; }
.layout-sidebar nav ul { gap: 2px !important; }
.scc-nav-heading { padding: 2px 12px 8px; font-size: 11px; font-weight: 600; letter-spacing: .4px; color: hsl(var(--muted-foreground)); list-style: none; }
.layout-sidebar nav li[style*="padding"] { padding: 18px 12px 8px !important; }
.layout-sidebar nav li > div {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .4px !important;
  text-transform: none !important;
  color: hsl(var(--muted-foreground)) !important;
}

.layout-sidebar nav li > a > div,
.layout-sidebar nav li > a > .scc-nav-item {
  position: relative;
  min-height: 40px;
  padding: 0 12px !important;
  gap: 12px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: hsl(var(--muted-foreground)) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
.layout-sidebar nav li > a > div:hover, .layout-sidebar nav li > a > .scc-nav-item:hover {
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--foreground)) !important;
}
/* The open page: accent text, tinted background and a bar on the reading side. */
.layout-sidebar nav li > a > div[style*="font-weight: 700"],
.layout-sidebar nav li.scc-active > a > .scc-nav-item {
  background: hsl(var(--primary) / .1) !important;
  color: hsl(var(--sw-accent-text)) !important;
  font-weight: 600 !important;
}
.layout-sidebar nav li > a > div[style*="font-weight: 700"]::before,
.layout-sidebar nav li.scc-active > a > .scc-nav-item::before {
  content: "";
  position: absolute;
  inset-inline-start: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: hsl(var(--primary));
}
html[dir="rtl"] .layout-sidebar nav li > a > div[style*="font-weight: 700"]::before,
html[dir="rtl"] .layout-sidebar nav li.scc-active > a > .scc-nav-item::before { border-radius: 3px 0 0 3px; }
.layout-sidebar nav li > a > div > span:not([style*="border-radius"]):not(.scc-nav-new) { color: inherit !important; font-weight: inherit !important; }
.layout-sidebar nav li > a > div > div[style*="position: absolute"] { display: none !important; }
.layout-sidebar nav li > a svg,
.layout-sidebar nav li > a .scc-nav-icon { width: 18px !important; height: 18px !important; color: currentColor !important; opacity: 1; flex: none; }
.layout-sidebar nav li > a .scc-nav-icon svg { width: 18px !important; height: 18px !important; }
/* "New" tags: quiet, not a coloured sticker. */
.layout-sidebar nav li > a span[style*="border-radius"], .layout-sidebar .scc-nav-new {
  background: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 999px !important;
  padding: 0 7px !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
}
/* Locked items (plan without this channel) */
.layout-sidebar nav li > a > div[style*="opacity: 0.55"] { color: hsl(var(--muted-foreground) / .6) !important; }

/* Account area: one card + one row of actions, always on screen. */
.layout-sidebar > div:last-child {
  flex: none;
  display: grid !important;
  grid-template-columns: auto auto 1fr;
  gap: 8px;
  padding: 12px !important;
  border-top: 1px solid hsl(var(--border)) !important;
}
.layout-sidebar > div:last-child > * { margin: 0 !important; min-width: 0; }
.layout-sidebar > div:last-child > div:first-child {
  grid-column: 1 / -1;
  order: 1;
  position: relative;
  padding: 10px 12px !important;
  padding-inline-start: 52px !important;
  min-height: 56px;
  border-radius: 10px !important;
  background: hsl(var(--secondary)) !important;
  border: 0 !important;
}
.layout-sidebar > div:last-child > div:first-child > div:first-child { margin-bottom: 2px !important; }
.layout-sidebar > div:last-child > div:first-child > div:first-child > div { font-size: 13.5px !important; font-weight: 600 !important; max-width: 120px !important; }
.layout-sidebar > div:last-child > div:first-child > div:nth-child(2) { font-size: 11.5px !important; margin-bottom: 6px !important; }
/* Credits: one quiet line */
.layout-sidebar > div:last-child > div:first-child > div:nth-child(3),
.layout-sidebar > div:last-child > div:first-child > div:nth-child(4) { display: inline-flex !important; margin: 0 !important; margin-inline-end: 10px !important; }
.layout-sidebar > div:last-child > div:first-child > div:nth-child(3) *,
.layout-sidebar > div:last-child > div:first-child > div:nth-child(4) * { color: hsl(var(--muted-foreground)) !important; font-size: 11px !important; font-weight: 500 !important; }
.layout-sidebar > div:last-child > div:first-child > div:nth-child(3) span:first-of-type,
.layout-sidebar > div:last-child > div:first-child > div:nth-child(4) span:first-of-type { color: hsl(var(--foreground)) !important; font-weight: 600 !important; }
.layout-sidebar > div:last-child > div:first-child svg { display: none !important; }
.layout-sidebar > div:last-child > div:first-child > a { display: block; margin-top: 6px; }
.layout-sidebar > div:last-child > div:first-child > a span { color: hsl(var(--sw-accent-text)) !important; font-size: 11.5px !important; font-weight: 600 !important; }
/* Plan / role tag */
.layout-sidebar > div:last-child span[style*="border-radius: 20px"] {
  background: transparent !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 1px 8px !important;
}
.scc-avatar {
  position: absolute;
  inset-inline-start: 12px;
  top: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--primary));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
/* VikingBulk link */
.layout-sidebar > div:last-child > a {
  grid-column: 1 / -1;
  order: 2;
  min-height: 34px;
  padding: 0 12px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid hsl(var(--border)) !important;
}
.layout-sidebar > div:last-child > a img { width: 18px !important; height: 18px !important; border-radius: 5px; }
.layout-sidebar > div:last-child > a, .layout-sidebar > div:last-child > a * { color: hsl(var(--muted-foreground)) !important; font-size: 12.5px !important; font-weight: 500 !important; }
.layout-sidebar > div:last-child > a:hover { background: hsl(var(--secondary)) !important; }
/* Language: compact segmented control */
.layout-sidebar > div:last-child > div:nth-child(3) {
  order: 3;
  display: flex !important;
  gap: 2px !important;
  padding: 2px !important;
  border-radius: 8px;
  background: hsl(var(--secondary));
}
.layout-sidebar > div:last-child > div:nth-child(3) button {
  flex: none !important;
  min-width: 34px;
  height: 32px;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}
.layout-sidebar > div:last-child > div:nth-child(3) button svg { display: none !important; }
.layout-sidebar > div:last-child > div:nth-child(3) button[style*="6, 182, 212"] {
  background: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15) !important;
}
/* Theme switch: icon only here */
.layout-sidebar > div:last-child > .scc-theme-row { order: 4; padding: 0 !important; }
.layout-sidebar .scc-theme-toggle { width: 36px !important; height: 36px; min-height: 36px !important; padding: 0 !important; }
.layout-sidebar .scc-theme-toggle span { display: none; }
/* Sign out */
.layout-sidebar > div:last-child > div:nth-child(4) { order: 5; padding: 0 !important; }
.layout-sidebar > div:last-child > div:nth-child(4) > button {
  width: 100% !important;
  height: 36px;
  min-height: 36px;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  border: 1px solid hsl(var(--border)) !important;
  background: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
.layout-sidebar > div:last-child > div:nth-child(4) > button svg { width: 15px !important; height: 15px !important; }
.layout-sidebar > div:last-child > div:nth-child(4) > button:hover {
  background: hsl(var(--sw-bad) / .08) !important;
  border-color: hsl(var(--sw-bad) / .35) !important;
  color: hsl(var(--sw-bad)) !important;
}
/* Footer texts: the bundle colours them for a dark sidebar only. */
.layout-sidebar > div:last-child [style*="color: rgb(224, 238, 255)"] { color: hsl(var(--foreground)) !important; }
.layout-sidebar > div:last-child [style*="color: rgba(200, 215, 230"] { color: hsl(var(--muted-foreground)) !important; }

/* App frame: its own dark background and text colour follow the theme. */
#root [style*="background: rgb(7, 11, 20)"] { background: hsl(var(--background)) !important; color: hsl(var(--foreground)) !important; }

/* Light mode: the bundle's bright accent texts (made for dark cards) get darker shades. */
/* The second brand colour (emerald) replaces the old teal everywhere. */
.layout-main-content :is(.text-teal-400, .text-teal-300, .text-\[\#14B8A6\]) { color: hsl(var(--sw-accent2-text)) !important; }
html[data-theme="light"] .layout-main-content :is(.text-green-400, .text-green-300, .text-emerald-400) { color: #15803d !important; }
html[data-theme="light"] .layout-main-content :is(.text-blue-400, .text-blue-300, .text-sky-400, .text-cyan-400, .text-cyan-300) { color: #1d4ed8 !important; }
html[data-theme="light"] .layout-main-content :is(.text-purple-400, .text-purple-300, .text-violet-400, .text-indigo-400, .text-fuchsia-400, .text-pink-400) { color: #7e22ce !important; }
html[data-theme="light"] .layout-main-content :is(.text-yellow-400, .text-yellow-300, .text-amber-400, .text-orange-400) { color: #b45309 !important; }
html[data-theme="light"] .layout-main-content :is(.text-red-400, .text-red-300, .text-rose-400) { color: #b91c1c !important; }
html[data-theme="light"] .layout-main-content :is(.text-gray-300, .text-gray-400, .text-slate-300, .text-slate-400) { color: hsl(var(--muted-foreground)) !important; }
html[data-theme="light"] .layout-main-content :is(.text-white, .text-gray-100, .text-gray-200, .text-slate-100, .text-slate-200):not(button):not(button *):not([class*="bg-"]) { color: hsl(var(--foreground)) !important; }
html[data-theme="light"] .layout-main-content [style*="color: rgba(200, 215, 230"] { color: hsl(var(--muted-foreground)) !important; }
html[data-theme="light"] .layout-main-content [style*="color: rgb(224, 238, 255)"] { color: hsl(var(--foreground)) !important; }
html[data-theme="light"] .layout-main-content [style*="color: rgb(74, 222, 128)"] { color: #15803d !important; }
html[data-theme="light"] .layout-main-content [style*="color: rgb(251, 191, 36)"], html[data-theme="light"] .layout-main-content [style*="color: rgb(245, 158, 11)"] { color: #b45309 !important; }
html[data-theme="light"] .layout-main-content [style*="color: rgb(234, 67, 53)"] { color: #c5221f !important; }
html[data-theme="light"] .layout-main-content [style*="color: rgb(248, 113, 113)"] { color: #b91c1c !important; }

/* ------------------------------------------------------- top bar */
.layout-header {
  height: 60px !important;
  background: hsl(var(--background) / .85) !important;
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid hsl(var(--border)) !important;
  position: sticky !important;
  top: 0;
}
.layout-header .header-title-dyn {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: hsl(var(--foreground)) !important;
}
/* ------------------------------------------------------- content */
.layout-main-content { padding: 28px 32px 56px !important; }
.layout-main-content > * { max-width: 1200px; margin-inline: auto; }
@media (max-width: 1024px) { .layout-main-content { padding: 22px 20px 44px !important; } }
@media (max-width: 768px) { .layout-main-content { padding: 16px 14px 40px !important; } }

/* Page titles */
.layout-main-content h1, .layout-main-content h2.text-2xl, .layout-main-content h2.text-3xl {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -.2px;
  color: hsl(var(--foreground)) !important;
}
.layout-main-content h1 svg, .layout-main-content h2.text-2xl svg { width: 22px; height: 22px; }

/* Cards */
.layout-main-content .rounded-xl.border,
.layout-main-content [data-slot="card"],
.layout-main-content .rounded-lg.border {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 12px !important;
  box-shadow: var(--sw-shadow) !important;
}
.layout-main-content .rounded-xl.border [style*="background"]:not(img):not(svg):not(button):not(.scc-page *) {
  background-image: none !important;
}

/* Form controls */
.layout-main-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.layout-main-content select,
.layout-main-content textarea {
  background-color: hsl(var(--background)) !important;
  border: 1px solid hsl(var(--input)) !important;
  border-radius: 8px !important;
  color: hsl(var(--foreground)) !important;
  box-shadow: none !important;
}
.layout-main-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.layout-main-content select { min-height: 38px; }
.layout-main-content input:focus-visible, .layout-main-content select:focus-visible, .layout-main-content textarea:focus-visible {
  outline: none !important;
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 3px hsl(var(--primary) / .2) !important;
}
.layout-main-content input::placeholder, .layout-main-content textarea::placeholder { color: hsl(var(--muted-foreground) / .7) !important; }
.layout-main-content label { font-weight: 500; }

/* Buttons from the dashboard bundle */
.layout-main-content button.inline-flex { border-radius: 8px !important; font-weight: 600 !important; box-shadow: none !important; }
.layout-main-content button.inline-flex.h-9, .layout-main-content button.inline-flex.h-10 { height: 38px !important; }
.layout-main-content button.inline-flex.h-8 { height: 34px !important; }
.layout-main-content button[class*="bg-gradient"], .layout-main-content button.glow-btn {
  background: hsl(var(--primary)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.layout-main-content button[style*="gradient"] { background-image: none !important; background-color: hsl(var(--primary)) !important; color: #fff !important; border-color: transparent !important; }

/* Tables */
.layout-main-content table thead tr { background: hsl(var(--secondary)) !important; }
.layout-main-content table thead th { color: hsl(var(--muted-foreground)) !important; font-weight: 600 !important; font-size: 12.5px !important; }
.layout-main-content table tbody tr { border-color: hsl(var(--border)) !important; }
.layout-main-content table tbody tr:hover { background: hsl(var(--secondary) / .6) !important; }

/* Admin panel tab row: wraps on small screens instead of running off the page. */
.layout-main-content [style*="display: flex; gap: 6px; background: rgba(255, 255, 255, 0.03); border-radius: 10px"] {
  flex-wrap: wrap;
  background: hsl(var(--secondary)) !important;
}
.layout-main-content [style*="display: flex; gap: 6px; background: rgba(255, 255, 255, 0.03); border-radius: 10px"] > button { flex: 1 1 auto !important; white-space: nowrap; }

/* Status pills and "@username" badges */
.layout-main-content .bg-blue-500\/10.border-blue-500\/30 { border-radius: 999px !important; }
.layout-main-content .bg-blue-500\/10.border-blue-500\/30 > span { direction: ltr; unicode-bidi: isolate; }

/* Dialogs and dropdowns from the bundle */
[role="dialog"], [data-radix-popper-content-wrapper] > * {
  background: hsl(var(--popover)) !important;
  border-color: hsl(var(--border)) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45) !important;
}

/* Toasts */
ol[tabindex="-1"] > li { border-radius: 10px !important; box-shadow: 0 8px 30px rgba(0, 0, 0, .4) !important; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: hsl(var(--input)) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: hsl(var(--input)); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }

/* ------------------------------------------- sign in / sign up */
:is(html[data-scc-path="/login"], html[data-scc-path="/register"]) #root [style*="position: fixed"][style*="gradient"],
:is(html[data-scc-path="/login"], html[data-scc-path="/register"]) #root [style*="filter: blur(8px)"],
:is(html[data-scc-path="/login"], html[data-scc-path="/register"]) #root form > [style*="height: 1px"] { display: none !important; }
:is(html[data-scc-path="/login"], html[data-scc-path="/register"]) #root [style*="-webkit-text-fill-color: transparent"] {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: hsl(var(--foreground)) !important;
}
:is(html[data-scc-path="/login"], html[data-scc-path="/register"]) #root [style*="border-radius: 20px"][style*="gradient"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
:is(html[data-scc-path="/login"], html[data-scc-path="/register"]) #root img { width: 52px !important; height: 52px !important; border-radius: 14px; content: url("/brand-mark.svg"); }
:is(html[data-scc-path="/login"], html[data-scc-path="/register"]) #root form {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 14px !important;
  backdrop-filter: none !important;
}
:is(html[data-scc-path="/login"], html[data-scc-path="/register"]) #root form input {
  background: hsl(var(--background)) !important;
  border: 1px solid hsl(var(--input)) !important;
  border-radius: 8px !important;
}
:is(html[data-scc-path="/login"], html[data-scc-path="/register"]) #root form button[type="submit"] {
  background: hsl(var(--primary)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
:is(html[data-scc-path="/login"], html[data-scc-path="/register"]) #root * { animation: none !important; }
/* Their texts are coloured for a dark page only. */
:is(html[data-scc-path="/login"], html[data-scc-path="/register"]) #root :is([style*="color: rgb(90, 106, 126)"], [style*="color: rgb(122, 138, 158)"]),
:is(html[data-scc-path="/login"], html[data-scc-path="/register"]) #root div > p { color: hsl(var(--muted-foreground)) !important; }
:is(html[data-scc-path="/login"], html[data-scc-path="/register"]) #root form label { color: hsl(var(--foreground)) !important; }
:is(html[data-scc-path="/login"], html[data-scc-path="/register"]) #root form input { color: hsl(var(--foreground)) !important; }
html[data-theme="light"]:is([data-scc-path="/login"], [data-scc-path="/register"]) #root span[style*="color: rgb(34, 197, 94)"] { color: #15803d !important; }
/* Feature chips: brand blue and emerald instead of purple and cyan. */
:is(html[data-scc-path="/login"], html[data-scc-path="/register"]) #root span[style*="color: rgb(139, 92, 246)"] { color: hsl(var(--sw-accent-text)) !important; background: hsl(var(--primary) / .1) !important; border-color: hsl(var(--primary) / .3) !important; }
:is(html[data-scc-path="/login"], html[data-scc-path="/register"]) #root span[style*="color: rgb(6, 182, 212)"] { color: hsl(var(--sw-accent2-text)) !important; background: hsl(var(--sw-accent2) / .1) !important; border-color: hsl(var(--sw-accent2) / .3) !important; }
:is(html[data-scc-path="/login"], html[data-scc-path="/register"]) #root a[style*="6, 182, 212"] { color: hsl(var(--sw-accent-text)) !important; }

/* ------------------------------------------- light theme: every surface has a clear edge */
html[data-theme="light"] :is(.scc-card, .scc-kpi, .scc-settings-box, .scc-actions, .scc-campaign, .scc-checklist li, .scc-details) {
  border-color: hsl(var(--border)) !important;
  box-shadow: var(--sw-shadow) !important;
}
html[data-theme="light"] :is(.scc-callout, .scc-test, .scc-code, .scc-chat-log) { border: 1px solid hsl(var(--border)); }
html[data-theme="light"] .scc-btn:not(.scc-primary):not(.scc-danger) { border-color: hsl(var(--input)); }
html[data-theme="light"] .scc-page-tabs, html[data-theme="light"] .scc-inline-tabs { border-bottom-color: hsl(var(--input)) !important; }
html[data-theme="light"] .scc-kv-list, html[data-theme="light"] .scc-kv-row + .scc-kv-row { border-color: hsl(var(--border)); }
html[data-theme="light"] .layout-sidebar { box-shadow: 1px 0 0 hsl(var(--border)); }
html[data-theme="light"] .layout-sidebar > div:last-child > div:first-child { border: 1px solid hsl(var(--border)) !important; }
html[data-theme="light"] .layout-sidebar nav li > a > div[style*="font-weight: 700"],
html[data-theme="light"] .layout-sidebar nav li.scc-active > a > .scc-nav-item { box-shadow: inset 0 0 0 1px hsl(var(--primary) / .25) !important; }
html[data-theme="light"] .scc-theme-toggle, html[data-theme="light"] .scc-auth-theme { border-color: hsl(var(--input)); }
html[data-theme="light"] .layout-header { background: hsl(var(--card)) !important; }
/* Mobile menu button: drawn in a light colour by the bundle, invisible on a white bar. */
.layout-header .layout-hamburger { color: hsl(var(--foreground)) !important; border: 1px solid hsl(var(--input)) !important; border-radius: 8px !important; width: 36px !important; height: 36px !important; align-items: center; justify-content: center; background: hsl(var(--card)) !important; }
.layout-header .layout-hamburger svg { stroke: currentColor !important; color: currentColor !important; }
/* Dashboard-bundle panels drawn with white-on-dark inline borders and fills. */
html[data-theme="light"] .layout-main-content :is([style*="border: 1px solid rgba(255, 255, 255"], [style*="border: 1px solid rgba(148, 163, 184"], [style*="border-color: rgba(255, 255, 255"]) { border-color: hsl(var(--border)) !important; }
html[data-theme="light"] .layout-main-content [style*="background: rgba(255, 255, 255, 0.0"] { background: hsl(var(--secondary)) !important; }
html[data-theme="light"] .layout-main-content :is(.border-white\/5, .border-white\/10, .border-gray-800, .border-gray-700, .border-slate-800, .border-slate-700, .border-border) { border-color: hsl(var(--border)) !important; }
html[data-theme="light"] .layout-main-content :is(.divide-white\/5, .divide-gray-800) > * + * { border-color: hsl(var(--border)) !important; }

/* Second brand colour (emerald): progress, success and secondary highlights. */
.scc-progress i { background: hsl(var(--sw-accent2)) !important; }
.scc-done .scc-check { background: hsl(var(--sw-accent2)) !important; border-color: hsl(var(--sw-accent2)) !important; }
.layout-sidebar > div:first-child a > div > div > div:last-child { color: hsl(var(--sw-accent2-text)) !important; }

/* ------------------------------------------- hover, shadow and a soft green glow */
/* Not while the theme switches: colours change in one step, with no flicker. */
html:not(.scc-theme-switching) :is(.scc-btn, .layout-main-content button.inline-flex, .scc-home-channel, .scc-tile, .scc-kpi, .scc-checklist li,
.layout-sidebar nav li > a > div, .layout-sidebar nav li > a > .scc-nav-item, .scc-page-tab, .scc-inline-tabs .scc-tab) {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease, color .16s ease !important;
}
html.scc-theme-switching :is(.layout-sidebar, .layout-main-content, .layout-header) * { transition: none !important; }
.scc-primary, .layout-main-content button[class*="bg-gradient"], .layout-main-content button.glow-btn,
:is(html[data-scc-path="/login"], html[data-scc-path="/register"]) #root form button[type="submit"] { box-shadow: 0 4px 14px hsl(var(--primary) / .35) !important; }
.scc-primary:hover:not(:disabled), .layout-main-content button[class*="bg-gradient"]:hover, .layout-main-content button.glow-btn:hover,
:is(html[data-scc-path="/login"], html[data-scc-path="/register"]) #root form button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px hsl(var(--sw-accent2) / .18), 0 8px 22px hsl(var(--primary) / .45) !important;
}
.scc-btn:not(.scc-primary):not(.scc-danger):hover:not(:disabled) { border-color: hsl(var(--sw-accent2) / .6) !important; }
.scc-home-channel:hover, .scc-tile:hover, .scc-kpi:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--sw-accent2) / .55) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3), 0 0 22px hsl(var(--sw-accent2) / .12) !important;
}
html[data-theme="light"] :is(.scc-home-channel, .scc-tile, .scc-kpi):hover { box-shadow: 0 10px 24px rgba(10, 20, 15, .1), 0 0 0 3px hsl(var(--sw-accent2) / .1) !important; }
.scc-checklist li:hover { border-color: hsl(var(--sw-accent2) / .45) !important; }
.layout-main-content .rounded-xl.border:hover { border-color: hsl(var(--sw-accent2) / .35) !important; }
/* The open sidebar item glows softly. */
.layout-sidebar nav li > a > div[style*="font-weight: 700"],
.layout-sidebar nav li.scc-active > a > .scc-nav-item { box-shadow: inset 0 0 0 1px hsl(var(--primary) / .35), 0 0 18px hsl(var(--sw-accent2) / .1) !important; }
/* Inputs: green focus ring. */
.layout-main-content :is(input, select, textarea):focus-visible, .scc-field :is(input, select, textarea):focus-visible { box-shadow: 0 0 0 3px hsl(var(--sw-accent2) / .22) !important; border-color: hsl(var(--sw-accent2)) !important; }
@media (prefers-reduced-motion: reduce) { .scc-home-channel:hover, .scc-tile:hover, .scc-kpi:hover, .scc-primary:hover { transform: none !important; } }