/* Kola AI Systems — TwentyHQ brand override */

/* ── Color tokens ── */
:root {
  /* Backgrounds */
  --background-primary: #060a12 !important;
  --background-secondary: #0d1526 !important;
  --background-tertiary: #111e33 !important;
  --background-overlay: rgba(6, 10, 18, 0.9) !important;

  /* Borders */
  --border-color: #1a2740 !important;
  --border-color-medium: #1a2740 !important;
  --border-color-strong: #243555 !important;

  /* Text */
  --font-color: #f0f4ff !important;
  --font-color-secondary: #8899bb !important;
  --font-color-tertiary: #8899bb !important;
  --font-color-light: #8899bb !important;

  /* Danger/warning unchanged */
}

/* ── Force ALL text to white — override any Twenty color variables ── */
* { color: #f0f4ff !important; }

/* Re-allow muted/secondary text */
[class*="secondary"],
[class*="muted"],
[class*="caption"],
[class*="helper"],
[class*="placeholder"],
[class*="tertiary"] { color: #8899bb !important; }

/* Re-allow error / warning states */
[class*="error"], [data-status="error"],
[class*="danger"] { color: #ff4757 !important; }
[class*="warning"] { color: #ffa502 !important; }

/* Buttons keep their explicit colors (set below) */

/* ── Global background ── */
body,
#root,
[class*="AppLayout"],
[class*="LeftPanel"],
[class*="RightPanel"],
[class*="MainContent"] {
  background-color: #060a12 !important;
  color: #f0f4ff !important;
}

/* ── Sidebar / nav ── */
nav,
aside,
[class*="Sidebar"],
[class*="LeftSidebar"],
[class*="NavContainer"] {
  background-color: #0d1526 !important;
  border-color: #1a2740 !important;
}

/* ── Cards / panels ── */
[class*="Card"],
[class*="Panel"],
[class*="Surface"],
[class*="Dropdown"],
[class*="Menu"],
[class*="Modal"],
[class*="Dialog"] {
  background-color: #0d1526 !important;
  border-color: #1a2740 !important;
}

/* ── Primary buttons → Aria Green ── */
button[data-variant="primary"],
button[class*="primary"],
a[data-variant="primary"],
[class*="Button"][data-variant="primary"],
[class*="CallToAction"] {
  background-color: #00c16e !important;
  color: #000 !important;  /* black text on green bg */
  border-color: #00c16e !important;
}
button[data-variant="primary"] *,
[class*="Button"][data-variant="primary"] * {
  color: #000 !important;  /* catch child spans inside buttons */
}
button[data-variant="primary"]:hover,
[class*="Button"][data-variant="primary"]:hover {
  background-color: #00d97a !important;
}

/* ── Links — use muted text, not green ── */
a,
[class*="Link"] {
  color: #d0d8f0 !important;
}
a:hover,
[class*="Link"]:hover {
  color: #f0f4ff !important;
}

/* ── Active / selected nav items — green accent only on indicator, not text ── */
[aria-current="page"],
[data-active="true"],
[class*="active"],
[class*="selected"] {
  color: #f0f4ff !important;
  border-color: #00c16e !important;
}

/* ── Hide Twenty logo — replaced by workspace name set in Settings ── */
[data-testid="app-logo"] img { display: none !important; }
svg[class*="TwentyLogo"],
svg[class*="logo"],
img[alt="Twenty"] { display: none !important; }

/* ── Input fields ── */
input,
textarea,
select,
[class*="Input"],
[class*="TextArea"] {
  background-color: #0d1526 !important;
  border-color: #1a2740 !important;
  color: #f0f4ff !important;
}
input::placeholder,
textarea::placeholder { color: #8899bb !important; }

/* ── Tables ── */
table,
[class*="Table"],
th,
td {
  border-color: #1a2740 !important;
}
th { background-color: #111e33 !important; color: #8899bb !important; }
tr:hover td { background-color: #111e33 !important; }

/* ── Loading / progress ── */
[class*="Spinner"],
[class*="Loader"],
[class*="Progress"] {
  color: #00c16e !important;
  border-top-color: #00c16e !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #060a12; }
::-webkit-scrollbar-thumb { background: #1a2740; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #243555; }