/* whatsbj Dark Pro Theme Override
   Design system: #050505 bg, #00ff88 accent, Inter + JetBrains Mono
   Inspired by bjhunt.com design language */

:root {
  --bg: #050505;
  --s: #0a0a0a;
  --s2: #0e0e0e;
  --s3: #141414;
  --b: #1a1a1a;
  --b2: #252525;
  --t: #e0e0e0;
  --t2: #999;
  --t3: #555;
  --g: #00ff88;
  --gd: #00cc6a;
  --r: #ff3b3b;
  --o: #ff8c00;
  --w: #fff;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  --radius: 8px;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === GLOBAL === */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg) !important;
  color: var(--t) !important;
  font-family: var(--font-sans) !important;
  margin: 0;
  min-height: 100vh;
}

::selection {
  background: var(--g);
  color: #000;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--t3); }

/* === LINKS === */
a { color: var(--g); text-decoration: none; transition: opacity var(--transition); }
a:hover { opacity: 0.75; }

/* === SIDEBAR / NAV === */
.MuiDrawer-paper,
.sidebar,
nav,
[class*="sidebar"],
[class*="Sidebar"],
[class*="drawer"],
[class*="Drawer"],
aside {
  background: var(--s) !important;
  border-right: 1px solid var(--b) !important;
  color: var(--t) !important;
}

.MuiDrawer-paper *,
.sidebar *,
nav *,
aside * {
  color: var(--t2) !important;
}

.MuiDrawer-paper .Mui-selected,
.MuiDrawer-paper .active,
.sidebar .active,
nav .active {
  background: rgba(0, 255, 136, 0.06) !important;
  color: var(--g) !important;
  border-left: 2px solid var(--g) !important;
}

.MuiDrawer-paper .Mui-selected *,
.sidebar .active * {
  color: var(--g) !important;
}

/* === HEADER / APPBAR === */
header,
.MuiAppBar-root,
[class*="header"],
[class*="Header"],
[class*="appbar"],
[class*="AppBar"],
[class*="topbar"],
[class*="Topbar"] {
  background: var(--s) !important;
  border-bottom: 1px solid var(--b) !important;
  color: var(--t) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}

/* === CARDS / PAPER === */
.MuiPaper-root,
.MuiCard-root,
[class*="card"],
[class*="Card"],
[class*="paper"],
[class*="Paper"],
[class*="panel"],
[class*="Panel"] {
  background: var(--s) !important;
  border: 1px solid var(--b) !important;
  border-radius: var(--radius) !important;
  color: var(--t) !important;
  box-shadow: none !important;
  transition: border-color var(--transition);
}

.MuiPaper-root:hover,
.MuiCard-root:hover {
  border-color: var(--b2) !important;
}

/* === BUTTONS === */
.MuiButton-contained,
button[class*="primary"],
[class*="btn-primary"],
.btn-success,
.MuiButton-containedPrimary {
  background: var(--g) !important;
  color: #000 !important;
  border: none !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  text-transform: none !important;
  letter-spacing: -0.2px !important;
  transition: all var(--transition) !important;
}

.MuiButton-contained:hover,
button[class*="primary"]:hover {
  background: var(--gd) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 255, 136, 0.15) !important;
}

.MuiButton-outlined,
button[class*="secondary"],
[class*="btn-outline"] {
  background: transparent !important;
  color: var(--t) !important;
  border: 1px solid var(--b) !important;
  border-radius: 6px !important;
  text-transform: none !important;
}

.MuiButton-outlined:hover {
  border-color: var(--g) !important;
  color: var(--g) !important;
  background: rgba(0, 255, 136, 0.04) !important;
}

/* === INPUTS / FORMS === */
input, textarea, select,
.MuiInputBase-root,
.MuiOutlinedInput-root,
.MuiTextField-root input,
[class*="input"],
[class*="Input"] {
  background: var(--s2) !important;
  color: var(--t) !important;
  border: 1px solid var(--b) !important;
  border-radius: 6px !important;
  font-family: var(--font-sans) !important;
  transition: border-color var(--transition) !important;
}

input:focus, textarea:focus, select:focus,
.MuiOutlinedInput-root.Mui-focused {
  border-color: var(--g) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.1) !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: var(--b) !important;
}

.MuiInputLabel-root,
label {
  color: var(--t3) !important;
}

.MuiInputLabel-root.Mui-focused {
  color: var(--g) !important;
}

::placeholder { color: var(--t3) !important; }

/* === TABLES === */
table, .MuiTable-root {
  border-collapse: collapse;
}

th, .MuiTableCell-head {
  background: var(--s2) !important;
  color: var(--t3) !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  border-bottom: 1px solid var(--b) !important;
  padding: 12px 16px !important;
}

td, .MuiTableCell-body {
  color: var(--t2) !important;
  border-bottom: 1px solid var(--b) !important;
  padding: 12px 16px !important;
}

tr:hover td, .MuiTableRow-root:hover {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* === DIALOGS / MODALS === */
.MuiDialog-paper,
[class*="modal"],
[class*="Modal"],
[class*="dialog"],
[class*="Dialog"] {
  background: var(--s) !important;
  border: 1px solid var(--b) !important;
  border-radius: 12px !important;
  color: var(--t) !important;
}

.MuiDialogTitle-root {
  color: var(--w) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
}

.MuiBackdrop-root {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(4px) !important;
}

/* === TABS === */
.MuiTab-root {
  color: var(--t3) !important;
  text-transform: none !important;
  font-weight: 500 !important;
}

.MuiTab-root.Mui-selected {
  color: var(--g) !important;
}

.MuiTabs-indicator {
  background: var(--g) !important;
}

/* === CHIPS / BADGES === */
.MuiChip-root {
  background: rgba(0, 255, 136, 0.07) !important;
  color: var(--g) !important;
  border: 1px solid rgba(0, 255, 136, 0.18) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.MuiChip-root.MuiChip-colorError {
  background: rgba(255, 59, 59, 0.07) !important;
  color: var(--r) !important;
  border-color: rgba(255, 59, 59, 0.18) !important;
}

.MuiChip-root.MuiChip-colorWarning {
  background: rgba(255, 140, 0, 0.07) !important;
  color: var(--o) !important;
  border-color: rgba(255, 140, 0, 0.18) !important;
}

.MuiBadge-badge {
  background: var(--g) !important;
  color: #000 !important;
}

/* === TOOLTIPS === */
.MuiTooltip-tooltip {
  background: var(--s3) !important;
  border: 1px solid var(--b) !important;
  color: var(--t) !important;
  font-size: 11px !important;
  border-radius: 4px !important;
}

/* === ALERTS / SNACKBARS === */
.MuiAlert-root {
  background: var(--s) !important;
  border: 1px solid var(--b) !important;
  color: var(--t) !important;
  border-radius: var(--radius) !important;
}

.MuiAlert-standardSuccess { border-left: 3px solid var(--g) !important; }
.MuiAlert-standardError { border-left: 3px solid var(--r) !important; }
.MuiAlert-standardWarning { border-left: 3px solid var(--o) !important; }

/* === LISTS === */
.MuiListItem-root:hover,
.MuiMenuItem-root:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

.MuiListItem-root.Mui-selected {
  background: rgba(0, 255, 136, 0.06) !important;
}

.MuiMenu-paper,
.MuiPopover-paper {
  background: var(--s) !important;
  border: 1px solid var(--b) !important;
}

/* === DIVIDERS === */
.MuiDivider-root, hr {
  border-color: var(--b) !important;
}

/* === ICONS === */
.MuiSvgIcon-root,
.MuiIconButton-root {
  color: var(--t2) !important;
}

.MuiIconButton-root:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--g) !important;
}

/* === SWITCH / CHECKBOX / RADIO === */
.MuiSwitch-switchBase.Mui-checked {
  color: var(--g) !important;
}

.MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
  background: rgba(0, 255, 136, 0.3) !important;
}

.MuiCheckbox-root.Mui-checked {
  color: var(--g) !important;
}

.MuiRadio-root.Mui-checked {
  color: var(--g) !important;
}

/* === PROGRESS / LOADING === */
.MuiCircularProgress-root,
.MuiLinearProgress-bar {
  color: var(--g) !important;
}

.MuiLinearProgress-root {
  background: var(--b) !important;
}

/* === TYPOGRAPHY OVERRIDES === */
h1, h2, h3, h4, h5, h6,
.MuiTypography-h1, .MuiTypography-h2, .MuiTypography-h3,
.MuiTypography-h4, .MuiTypography-h5, .MuiTypography-h6 {
  color: var(--w) !important;
  font-family: var(--font-sans) !important;
}

p, span, div {
  font-family: var(--font-sans);
}

code, pre, .mono {
  font-family: var(--font-mono) !important;
}

/* === STATS / METRIC CARDS === */
[class*="stat"], [class*="Stat"],
[class*="metric"], [class*="Metric"] {
  background: var(--s) !important;
  border: 1px solid var(--b) !important;
  border-radius: var(--radius) !important;
}

/* === CHAT AREA === */
[class*="chat"], [class*="Chat"] {
  background: var(--bg) !important;
}

[class*="message"], [class*="Message"] {
  border-radius: 12px !important;
}

/* === ACCENT COLOR FOR BRANDING === */
.accent, .brand, .logo-text,
[class*="accent"], [class*="brand"] {
  color: var(--g) !important;
}

/* === LOGIN / AUTH PAGES === */
[class*="login"], [class*="Login"],
[class*="auth"], [class*="Auth"],
[class*="signup"], [class*="Signup"] {
  background: var(--bg) !important;
}

/* === PAGINATION === */
.MuiPagination-root .MuiPaginationItem-root {
  color: var(--t2) !important;
  border-color: var(--b) !important;
}

.MuiPagination-root .MuiPaginationItem-root.Mui-selected {
  background: var(--g) !important;
  color: #000 !important;
}

/* === SKELETON / LOADING === */
.MuiSkeleton-root {
  background: var(--s2) !important;
}

/* === BREADCRUMBS === */
.MuiBreadcrumbs-separator {
  color: var(--t3) !important;
}

/* === FOOTER === */
footer, [class*="footer"], [class*="Footer"] {
  background: var(--s) !important;
  border-top: 1px solid var(--b) !important;
  color: var(--t3) !important;
}

/* === GLASSMORPHISM EFFECT (for special cards) === */
.glass {
  background: rgba(10, 10, 10, 0.7) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* === ANIMATIONS === */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.15); }
  50% { box-shadow: 0 0 0 8px rgba(0, 255, 136, 0); }
}

.fade-in { animation: fadeIn 0.3s ease-out; }
.pulse { animation: pulse-green 2s infinite; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .MuiDrawer-paper { width: 240px !important; }
}