/* Peppermint Dark/Yellow Theme - matching Mattermost */
/* Colors: bg #0a0a0a, surface #0f0f14, border #1a1a2e, yellow #fcee09, cyan #00f0ff, red #ff003c */

/* === ROOT OVERRIDES === */
:root {
  --background: 0 0% 5% !important;
  --foreground: 0 0% 90% !important;
  --card: 240 10% 6% !important;
  --card-foreground: 0 0% 90% !important;
  --popover: 240 10% 6% !important;
  --popover-foreground: 0 0% 90% !important;
  --primary: 54 100% 51% !important;
  --primary-foreground: 0 0% 4% !important;
  --secondary: 240 15% 12% !important;
  --secondary-foreground: 0 0% 90% !important;
  --muted: 240 10% 14% !important;
  --muted-foreground: 0 0% 70% !important;
  --accent: 240 15% 12% !important;
  --accent-foreground: 54 100% 51% !important;
  --destructive: 348 100% 50% !important;
  --destructive-foreground: 0 0% 90% !important;
  --border: 240 10% 18% !important;
  --input: 240 10% 18% !important;
  --ring: 54 100% 51% !important;
  color-scheme: dark !important;
}

/* === BASE === */
html, body {
  background-color: #0a0a0a !important;
  color: #e0e0e0 !important;
}

/* === LAYOUT AREAS === */
main, [class*="min-h-screen"], [class*="bg-white"], [class*="bg-background"],
.bg-white, .bg-background {
  background-color: #0f0f14 !important;
}

nav, aside, [class*="sidebar"], [class*="Sidebar"], [role="navigation"] {
  background-color: #0a0a0a !important;
  border-color: #1a1a2e !important;
}

header, [class*="header"], [class*="Header"], [class*="navbar"], [class*="Navbar"] {
  background-color: #0d0d0d !important;
  border-color: #1a1a2e !important;
}

/* === TEXT === */
p, span, div, li, label, td, th, pre, code, blockquote, article, section {
  color: #e0e0e0 !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #fcee09 !important;
}

a { color: #00f0ff !important; }
a:hover { color: #33f5ff !important; }

/* Muted text - still readable */
[class*="text-muted"], [class*="text-gray"], [class*="text-slate"],
[class*="text-zinc"], [class*="text-neutral"], [class*="text-stone"],
.text-muted-foreground, .text-foreground {
  color: #b0b0b0 !important;
  opacity: 1 !important;
}

small, time, [class*="text-xs"], [class*="text-sm"] {
  color: #b0b0b0 !important;
}

strong, b, [class*="font-bold"], [class*="font-semibold"] {
  color: #e0e0e0 !important;
}

/* Placeholders */
input::placeholder, textarea::placeholder {
  color: #8a8a9a !important;
  opacity: 1 !important;
}

/* Override inline opacity */
[style*="opacity"] {
  opacity: 1 !important;
}

/* === CARDS & PANELS === */
[class*="card"], [class*="Card"], [class*="rounded-lg"][class*="border"],
.bg-white {
  background-color: #0f0f14 !important;
  border-color: #1a1a2e !important;
  color: #e0e0e0 !important;
}

/* Dashboard stat card numbers */
[class*="card"] [class*="text-2xl"], [class*="card"] [class*="text-3xl"],
[class*="card"] [class*="text-4xl"] {
  color: #fcee09 !important;
}

/* === BUTTONS === */
button {
  color: #e0e0e0 !important;
}

button[class*="primary"], [class*="bg-primary"], .bg-primary,
button[class*="default"]:not([class*="ghost"]):not([class*="outline"]) {
  background-color: #fcee09 !important;
  color: #0a0a0a !important;
  border-color: #fcee09 !important;
}

button[class*="primary"]:hover, [class*="bg-primary"]:hover {
  background-color: #e0d400 !important;
}

/* === INPUTS === */
input, textarea, select, [class*="input"], [class*="Input"] {
  background-color: #141420 !important;
  border-color: #1a1a2e !important;
  color: #e0e0e0 !important;
}

input:focus, textarea:focus, select:focus {
  border-color: #fcee09 !important;
  box-shadow: 0 0 0 2px rgba(252, 238, 9, 0.2) !important;
}

textarea {
  color: #e0e0e0 !important;
  background-color: #141420 !important;
}

/* === TABLES === */
table {
  background-color: #0f0f14 !important;
}

table thead tr {
  background-color: #0d0d0d !important;
}

table thead th {
  color: #fcee09 !important;
  background-color: #0d0d0d !important;
  border-bottom: 2px solid #fcee09 !important;
}

table tbody tr {
  background-color: #0f0f14 !important;
  color: #e0e0e0 !important;
}

table tbody tr:hover {
  background-color: #1a1a2e !important;
}

td {
  border-color: #1a1a2e !important;
  color: #e0e0e0 !important;
}

th {
  border-color: #1a1a2e !important;
}

/* === TICKET LIST ROWS (CRITICAL) === */
/* These are the issue rows - override ANY colored backgrounds */
div[class*="flex"][class*="items-center"][class*="bg-"],
div[class*="flex"][class*="justify-between"][class*="bg-"],
a[class*="flex"][class*="bg-"],
li[class*="bg-"],
div[class*="rounded"][class*="bg-green"],
div[class*="rounded"][class*="bg-red"],
div[class*="rounded"][class*="bg-cyan"],
div[class*="rounded"][class*="bg-teal"],
div[class*="rounded"][class*="bg-blue"],
div[class*="rounded"][class*="bg-sky"] {
  background-color: #0f0f14 !important;
  color: #e0e0e0 !important;
}

/* Nuclear option: any large element with bright colored bg in the main area */
main div[class*="bg-green"],
main div[class*="bg-cyan"],
main div[class*="bg-teal"],
main div[class*="bg-emerald"],
main div[class*="bg-sky"],
main div[class*="bg-blue"],
main a[class*="bg-green"],
main a[class*="bg-cyan"],
main li[class*="bg-green"] {
  background-color: #1a1a2e !important;
  color: #e0e0e0 !important;
  border-left: 3px solid #fcee09 !important;
}

main div[class*="bg-green"] *,
main div[class*="bg-cyan"] *,
main div[class*="bg-teal"] *,
main div[class*="bg-emerald"] *,
main div[class*="bg-sky"] *,
main a[class*="bg-green"] *,
main a[class*="bg-cyan"] *,
main li[class*="bg-green"] * {
  color: #e0e0e0 !important;
}

/* Same for table rows with colored backgrounds */
tr[class*="bg-green"], tr[class*="bg-cyan"], tr[class*="bg-teal"],
tr[class*="bg-sky"], tr[class*="bg-blue"], tr[class*="bg-emerald"] {
  background-color: #1a1a2e !important;
  color: #e0e0e0 !important;
  border-left: 3px solid #fcee09 !important;
}

tr[class*="bg-green"] td, tr[class*="bg-cyan"] td, tr[class*="bg-teal"] td,
tr[class*="bg-sky"] td, tr[class*="bg-blue"] td {
  color: #e0e0e0 !important;
  background-color: transparent !important;
}

/* === BADGES & STATUS PILLS === */
/* Small badges/pills should keep their color but have readable text */
span[class*="rounded-full"], span[class*="rounded-md"],
[class*="badge"], [class*="Badge"] {
  font-weight: 600 !important;
}

/* "Open Issue" badge - green bg, dark text */
span[class*="bg-green"]:not(main > div > div > span),
[class*="badge"][class*="bg-green"] {
  background-color: #00c853 !important;
  color: #0a0a0a !important;
}

/* "Closed" badge - red bg, white text */
span[class*="bg-red"], [class*="badge"][class*="bg-red"],
span[class*="bg-orange"], span[class*="bg-rose"] {
  background-color: #ff003c !important;
  color: #ffffff !important;
}

/* "Bug" label and similar tags */
span[class*="bg-amber"], span[class*="bg-yellow"] {
  background-color: #fcee09 !important;
  color: #0a0a0a !important;
}

/* Generic light-colored badges that are hard to read */
span[class*="bg-gray"], span[class*="bg-slate"], span[class*="bg-neutral"],
span[class*="bg-zinc"] {
  background-color: #3a3a4e !important;
  color: #e0e0e0 !important;
}

/* Version badge */
[class*="bg-green"][class*="text-white"],
span[class*="bg-green"][class*="px-"],
span[class*="bg-emerald"][class*="px-"] {
  background-color: #00c853 !important;
  color: #0a0a0a !important;
}

/* Status dots/indicators - make them brighter */
span[class*="rounded-full"][class*="w-2"], span[class*="rounded-full"][class*="w-3"],
span[class*="rounded-full"][class*="h-2"], span[class*="rounded-full"][class*="h-3"],
[class*="dot"], [class*="indicator"] {
  opacity: 1 !important;
  filter: brightness(1.5) !important;
}

/* Red dot for closed */
span[class*="bg-red"][class*="rounded-full"] {
  background-color: #ff003c !important;
  box-shadow: 0 0 4px #ff003c !important;
}

/* Green dot for open */
span[class*="bg-green"][class*="rounded-full"] {
  background-color: #00ff6a !important;
  box-shadow: 0 0 4px #00ff6a !important;
}

/* === AVATARS === */
/* User avatar circles - make them visible */
[class*="avatar"], [class*="Avatar"],
img[class*="rounded-full"],
div[class*="rounded-full"][class*="bg-"],
span[class*="rounded-full"][class*="w-8"],
span[class*="rounded-full"][class*="w-10"],
div[class*="rounded-full"][class*="w-8"],
div[class*="rounded-full"][class*="w-10"] {
  border: 2px solid #fcee09 !important;
  opacity: 1 !important;
}

/* === DROPDOWNS & POPOVERS === */
[class*="dropdown"], [class*="Dropdown"], [role="menu"], [class*="popover"],
[data-radix-popper-content-wrapper] > div {
  background-color: #0f0f14 !important;
  border-color: #1a1a2e !important;
}

/* === DIALOGS & MODALS === */
[class*="dialog"], [class*="Dialog"], [class*="modal"], [class*="Modal"],
[role="dialog"] {
  background-color: #0f0f14 !important;
  border-color: #1a1a2e !important;
}

/* === TABS === */
[class*="tab"], [role="tab"] {
  color: #d4d4d4 !important;
}

[class*="tab"][aria-selected="true"], [role="tab"][aria-selected="true"],
[class*="tab"][data-state="active"], [role="tab"][data-state="active"] {
  color: #fcee09 !important;
  border-color: #fcee09 !important;
}

/* === SIDEBAR NAV ITEMS === */
nav a, aside a, [class*="sidebar"] a {
  color: #d4d4d4 !important;
}

nav a:hover, aside a:hover, [class*="sidebar"] a:hover {
  color: #fcee09 !important;
  background-color: #1a1a2e !important;
}

nav a[class*="active"], nav a[class*="bg-"],
aside a[class*="active"], [class*="sidebar"] a[class*="active"] {
  color: #fcee09 !important;
  background-color: #1a1a2e !important;
}

/* === SWITCHES & TOGGLES === */
[class*="switch"][data-state="checked"], [role="switch"][data-state="checked"] {
  background-color: #fcee09 !important;
}

/* === PROGRESS BARS === */
[class*="progress"] [class*="indicator"] {
  background-color: #fcee09 !important;
}

/* === TOOLTIPS === */
[role="tooltip"] {
  background-color: #1a1a2e !important;
  color: #e0e0e0 !important;
  border-color: #fcee09 !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #1a1a2e; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #fcee09; }

/* === FILTERS SECTION === */
[class*="filter"], [class*="Filter"] {
  color: #d4d4d4 !important;
}

/* === TAILWIND UTILITY OVERRIDES === */
.text-foreground { color: #e0e0e0 !important; }
.text-muted-foreground { color: #b0b0b0 !important; }
.text-primary { color: #fcee09 !important; }
.text-primary-foreground { color: #0a0a0a !important; }
.text-secondary-foreground { color: #e0e0e0 !important; }
.text-card-foreground { color: #e0e0e0 !important; }
.text-popover-foreground { color: #e0e0e0 !important; }
.text-accent-foreground { color: #fcee09 !important; }

/* === INLINE STYLE OVERRIDES (nuclear) === */
/* Override any inline background-color on divs/rows in ticket lists */
div[style*="background-color: rgb(0, 255"],
div[style*="background-color: rgb(0, 200"],
div[style*="background-color: rgb(0, 128"],
div[style*="background: rgb(0, 255"],
div[style*="background-color: rgb(34,"],
div[style*="background-color: rgb(16,"],
div[style*="background-color: #0"],
div[style*="background-color: #00"],
tr[style*="background-color"],
td[style*="background-color"] {
  background-color: #1a1a2e !important;
  color: #e0e0e0 !important;
}