/* ==========================================================
   ENUW — Perfex CRM Dark Theme
   22C-DARK variant | Earth Tone + Mint
   useus.pro / Wear US CRM
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── TOKENS ──────────────────────────────────────────── */
:root {
  --void:        #0a0c08;
  --surface:     #131610;
  --elevated:    #1a1d18;
  --surface3:    #222720;
  --border:      rgba(255,255,255,0.07);
  --border-hi:   rgba(255,255,255,0.13);
  --fg:          #f8f7f5;
  --fg-muted:    #9a9186;
  --fg-dim:      #5a5550;
  --mint:        #4ECDC4;
  --mint-glow:   rgba(78,205,196,0.18);
  --mint-dim:    rgba(78,205,196,0.08);
  --accent:      #c8b4a0;
  --accent-hot:  #d4a574;
  --danger:      #e05252;
  --success:     #4caf87;
  --warning:     #e0a050;
  --info:        #5b9bd5;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
  --glow-mint:   0 0 20px rgba(78,205,196,0.25), 0 0 60px rgba(78,205,196,0.1);
}

/* ─── GLOBAL ─────────────────────────────────────────── */
html, body {
  background: var(--void) !important;
  color: var(--fg) !important;
  font-family: 'DM Sans', 'Inter', sans-serif !important;
}

body > * { font-size: 13.5px; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Manrope', sans-serif !important;
  color: var(--fg) !important;
  font-weight: 600;
}

a { color: var(--mint); }
a:hover, a:focus { color: var(--accent-hot); text-decoration: none; }

code, pre, .mono, [class*="invoice-number"], .badge-code {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.85em;
}

/* ─── LAYOUT ─────────────────────────────────────────── */
#wrapper {
  background: var(--void) !important;
}

.content {
  background: var(--void) !important;
  color: var(--fg) !important;
  padding: 24px 28px !important;
}

@media (max-width: 768px) {
  .content { padding: 16px !important; }
}

/* ─── HEADER ─────────────────────────────────────────── */
#header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 var(--border), var(--shadow-sm) !important;
  height: 57px !important;
}

#header .logo,
#header .logo-text {
  color: var(--fg) !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.navbar-nav > li > a {
  color: var(--fg-muted) !important;
  transition: color 0.15s ease;
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav .open > a,
.navbar-nav .open > a:hover {
  background: transparent !important;
  color: var(--fg) !important;
}

#header li > a.active {
  background: var(--elevated) !important;
  border-radius: var(--radius-md) !important;
  color: var(--fg) !important;
}

/* search input */
#search_input {
  background: var(--elevated) !important;
  border-color: var(--border) !important;
  color: var(--fg) !important;
}

#search_input::placeholder { color: var(--fg-dim) !important; }

#search_input:focus {
  background: var(--surface3) !important;
  border-color: var(--mint) !important;
  box-shadow: 0 0 0 3px var(--mint-dim) !important;
}

/* top dropdowns */
.navbar-nav > li > .dropdown-menu,
.navbar-nav > li > .dropdown-menu.notifications {
  background: var(--elevated) !important;
  border: 1px solid var(--border-hi) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: var(--radius-md) !important;
}

.navbar-nav > li > .dropdown-menu li a,
.dropdown-menu > li > a {
  color: var(--fg-muted) !important;
  padding: 8px 16px !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--surface3) !important;
  color: var(--fg) !important;
}

/* mobile nav */
.mobile-navbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

.mobile-navbar .navbar-nav > li > a {
  color: var(--fg-muted) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* hide-menu button */
.hide-menu {
  color: var(--fg-muted) !important;
}

.hide-menu:hover {
  background: var(--elevated) !important;
  color: var(--fg) !important;
}

/* ─── SIDEBAR ────────────────────────────────────────── */
.sidebar {
  background: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

[dir="rtl"] .sidebar {
  border-right: 0 !important;
  border-left: 1px solid var(--border) !important;
}

/* sidebar nav items */
.sidebar > ul.nav > li {
  border-left: 2px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  margin-bottom: 2px !important;
}

.sidebar ul.nav li a {
  color: var(--fg-muted) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400;
  border-radius: var(--radius-sm) !important;
  padding: 9px 12px !important;
  transition: all 0.15s ease !important;
}

.sidebar ul.nav li a i.menu-icon {
  color: var(--fg-dim) !important;
  transition: color 0.15s ease !important;
}

/* hover */
.sidebar > ul.nav > li:hover a:first-child,
.sidebar ul.nav > li > a:hover,
.sidebar ul.nav > li > a:focus {
  background: var(--elevated) !important;
  color: var(--fg) !important;
}

.sidebar ul.nav > li > a:hover .menu-icon,
.sidebar ul.nav > li > a:focus .menu-icon {
  color: var(--mint) !important;
}

/* active */
.sidebar > ul.nav > li.active a:first-child,
.sidebar ul.nav li.active > a {
  background: var(--mint-dim) !important;
  color: var(--mint) !important;
  font-weight: 500 !important;
}

.sidebar ul.nav li.active > a .menu-icon,
.sidebar ul.nav > li > a:focus .menu-icon {
  color: var(--mint) !important;
}

.sidebar > ul.nav > li.active {
  border-left: 2px solid var(--mint) !important;
}

/* sub-nav */
.sidebar ul.nav li .nav-second-level li a {
  color: var(--fg-muted) !important;
  font-size: 13px !important;
  padding-left: 36px !important;
  border-radius: var(--radius-sm) !important;
}

.sidebar ul.nav li .nav-second-level li.active a,
.sidebar ul.nav > li .nav-second-level > li:not(.active) > a:hover {
  color: var(--mint) !important;
  background: var(--mint-dim) !important;
}

/* arrow */
.sidebar .fa.arrow:before { color: var(--fg-dim) !important; }
.sidebar .active > a > .fa.arrow:before { color: var(--mint) !important; }

/* sidebar logo at top */
#sidebar-logo-link {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ─── PANELS ─────────────────────────────────────────── */
.panel, .panel_s, .panel-default {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--fg) !important;
}

.panel-heading, .panel-title,
.panel_s .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--fg) !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
  padding: 14px 18px !important;
}

.panel-body { padding: 18px !important; }

/* full-width table panels */
.panel-table-full .panel_s,
.panel-table-full {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-md) !important;
}

/* ─── TABLES ─────────────────────────────────────────── */
.table {
  background: transparent !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
}

.table > thead > tr > th {
  background: var(--elevated) !important;
  color: var(--fg-muted) !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--border-hi) !important;
  border-top: none !important;
  padding: 12px 14px !important;
}

.table > tbody > tr > td {
  color: var(--fg) !important;
  border-top: 1px solid var(--border) !important;
  padding: 11px 14px !important;
  vertical-align: middle !important;
}

.table > tbody > tr:hover > td {
  background: var(--elevated) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(255,255,255,0.015) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--fg-muted) !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  margin: 0 2px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--elevated) !important;
  color: var(--fg) !important;
  border-color: var(--border-hi) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--mint) !important;
  color: var(--void) !important;
  border-color: var(--mint) !important;
  font-weight: 600 !important;
}

.dataTables_info, .dataTables_length label,
.dataTables_filter label {
  color: var(--fg-muted) !important;
}

.dataTables_filter input {
  background: var(--elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg) !important;
  border-radius: var(--radius-sm) !important;
  padding: 5px 10px !important;
}

.dataTables_length select {
  background: var(--elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg) !important;
  border-radius: var(--radius-sm) !important;
}

/* ─── FORMS ──────────────────────────────────────────── */
.form-control, input[type="text"],
input[type="email"], input[type="password"],
input[type="number"], input[type="search"],
input[type="url"], input[type="tel"],
textarea, select {
  background: var(--elevated) !important;
  border: 1px solid var(--border-hi) !important;
  color: var(--fg) !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13.5px !important;
  padding: 8px 12px !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  height: auto !important;
  min-height: 36px;
}

.form-control:focus, input:focus,
textarea:focus, select:focus {
  border-color: var(--mint) !important;
  box-shadow: 0 0 0 3px var(--mint-dim) !important;
  background: var(--surface3) !important;
  color: var(--fg) !important;
  outline: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder { color: var(--fg-dim) !important; }

.control-label, label {
  color: var(--fg-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
  font-family: 'Manrope', sans-serif !important;
}

.form-group { margin-bottom: 18px !important; }

/* input-group */
.input-group-addon {
  background: var(--surface3) !important;
  border: 1px solid var(--border-hi) !important;
  color: var(--fg-muted) !important;
  border-radius: var(--radius-sm) !important;
}

/* checkboxes */
.checkbox label, .radio label {
  color: var(--fg) !important;
  text-transform: none !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}

/* bootstrap-select */
.bootstrap-select > .dropdown-toggle {
  background: var(--elevated) !important;
  border: 1px solid var(--border-hi) !important;
  color: var(--fg) !important;
  border-radius: var(--radius-sm) !important;
}

.bootstrap-select .dropdown-menu {
  background: var(--elevated) !important;
  border: 1px solid var(--border-hi) !important;
  box-shadow: var(--shadow-lg) !important;
}

.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-menu li a:hover {
  color: var(--fg) !important;
}

.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li.active a {
  background: var(--mint-dim) !important;
  color: var(--mint) !important;
}

/* daterangepicker */
.daterangepicker {
  background: var(--elevated) !important;
  border: 1px solid var(--border-hi) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--fg) !important;
  border-radius: var(--radius-md) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background: var(--mint) !important;
  color: var(--void) !important;
}

.daterangepicker th, .daterangepicker td {
  color: var(--fg) !important;
}

/* ─── BUTTONS ────────────────────────────────────────── */
.btn {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  border-radius: var(--radius-sm) !important;
  padding: 7px 16px !important;
  transition: all 0.15s ease !important;
  border: 1px solid transparent !important;
  letter-spacing: 0.01em;
}

.btn:active {
  transform: translateY(1px) !important;
  box-shadow: none !important;
}

.btn-primary {
  background: var(--mint) !important;
  border-color: var(--mint) !important;
  color: var(--void) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px var(--mint-glow) !important;
}

.btn-primary:hover, .btn-primary:focus {
  background: #5eddd4 !important;
  border-color: #5eddd4 !important;
  color: var(--void) !important;
  box-shadow: var(--glow-mint), 0 2px 8px var(--mint-glow) !important;
}

.btn-default {
  background: var(--elevated) !important;
  border-color: var(--border-hi) !important;
  color: var(--fg) !important;
}

.btn-default:hover, .btn-default:focus {
  background: var(--surface3) !important;
  border-color: var(--border-hi) !important;
  color: var(--fg) !important;
}

.btn-success {
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: #fff !important;
}

.btn-danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}

.btn-warning {
  background: var(--warning) !important;
  border-color: var(--warning) !important;
  color: var(--void) !important;
}

.btn-info {
  background: var(--info) !important;
  border-color: var(--info) !important;
  color: #fff !important;
}

/* ─── MODALS ─────────────────────────────────────────── */
.modal-content {
  background: var(--surface) !important;
  border: 1px solid var(--border-hi) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--fg) !important;
}

.modal-header {
  background: var(--elevated) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: 16px 20px !important;
}

.modal-title {
  color: var(--fg) !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

.modal-body {
  background: var(--surface) !important;
  padding: 20px !important;
}

.modal-footer {
  background: var(--elevated) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  padding: 14px 20px !important;
}

.modal-backdrop { opacity: 0.75 !important; }

button.close {
  color: var(--fg-muted) !important;
  opacity: 1 !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  transition: color 0.15s !important;
}

button.close:hover { color: var(--fg) !important; }

/* ─── ALERTS ─────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-sm) !important;
  border-left-width: 3px !important;
  font-size: 13.5px !important;
}

.alert-success {
  background: rgba(76,175,135,0.12) !important;
  border-color: var(--success) !important;
  color: #7dd4b5 !important;
}

.alert-danger, .alert-error {
  background: rgba(224,82,82,0.12) !important;
  border-color: var(--danger) !important;
  color: #e88585 !important;
}

.alert-warning {
  background: rgba(224,160,80,0.12) !important;
  border-color: var(--warning) !important;
  color: #e8bb77 !important;
}

.alert-info {
  background: rgba(91,155,213,0.12) !important;
  border-color: var(--info) !important;
  color: #85b8e0 !important;
}

/* ─── BADGES & LABELS ────────────────────────────────── */
.badge {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  border-radius: 99px !important;
  padding: 3px 8px !important;
}

.label { border-radius: 4px !important; font-size: 11px !important; }
.label-default { background: var(--surface3) !important; color: var(--fg-muted) !important; }
.label-primary, .badge-primary { background: var(--mint) !important; color: var(--void) !important; }
.label-success { background: rgba(76,175,135,0.2) !important; color: #7dd4b5 !important; }
.label-danger  { background: rgba(224,82,82,0.2) !important;  color: #e88585 !important; }
.label-warning { background: rgba(224,160,80,0.2) !important; color: #e8bb77 !important; }
.label-info    { background: rgba(91,155,213,0.2) !important; color: #85b8e0 !important; }

/* ─── TABS ───────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--border) !important;
}

.nav-tabs > li > a {
  color: var(--fg-muted) !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  border: 1px solid transparent !important;
  padding: 9px 16px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  transition: color 0.15s !important;
}

.nav-tabs > li > a:hover {
  background: var(--elevated) !important;
  color: var(--fg) !important;
  border-color: var(--border) var(--border) transparent !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: var(--surface) !important;
  color: var(--mint) !important;
  border-color: var(--border) var(--border) transparent !important;
  border-bottom-color: var(--surface) !important;
  font-weight: 600 !important;
}

.tab-content {
  background: var(--surface) !important;
  padding: 20px !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}

/* ─── PAGE HEADINGS ──────────────────────────────────── */
.tw-text-xl, .tw-font-bold {
  color: var(--fg) !important;
  font-family: 'Manrope', sans-serif !important;
}

/* page title area */
.content > .row:first-child h4,
.content > .row:first-child h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--fg) !important;
}

/* ─── BREADCRUMBS ────────────────────────────────────── */
.breadcrumb {
  background: transparent !important;
  padding: 4px 0 !important;
  margin-bottom: 12px !important;
  font-size: 12px !important;
}

.breadcrumb > li { color: var(--fg-muted) !important; }
.breadcrumb > li a { color: var(--mint) !important; }
.breadcrumb > li + li::before { color: var(--fg-dim) !important; }
.breadcrumb > .active { color: var(--fg) !important; }

/* ─── CARDS / STATS ──────────────────────────────────── */
.widget-stat {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 20px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.widget-stat:hover {
  border-color: var(--border-hi) !important;
  box-shadow: var(--shadow-md) !important;
}

.widget-stat .stat-number {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  color: var(--fg) !important;
}

.widget-stat .stat-label {
  color: var(--fg-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ─── DASHBOARD ──────────────────────────────────────── */
#dashboard_summary_box .panel_s {
  border-left: 3px solid var(--mint) !important;
}

/* ─── CLIENTS PAGE ───────────────────────────────────── */
.client-company-name a {
  color: var(--fg) !important;
  font-weight: 600 !important;
}

.client-company-name a:hover {
  color: var(--mint) !important;
}

/* ─── INVOICES / ESTIMATES ───────────────────────────── */
.invoice-number, .estimate-number, .proposal-number {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 500 !important;
  color: var(--mint) !important;
}

/* invoice status badges */
.invoice-status-draft   { background: var(--elevated) !important; color: var(--fg-muted) !important; }
.invoice-status-sent    { background: rgba(91,155,213,0.2) !important; color: #85b8e0 !important; }
.invoice-status-paid    { background: rgba(76,175,135,0.2) !important; color: #7dd4b5 !important; }
.invoice-status-overdue { background: rgba(224,82,82,0.2) !important;  color: #e88585 !important; }

/* ─── PRODUCTS / ITEMS ───────────────────────────────── */
/* Products page tweaks */
#sales_item_modal .modal-dialog {
  max-width: 760px !important;
  width: 760px !important;
}

/* Make form fields in item modal feel spacious */
#invoice_item_form .form-group {
  margin-bottom: 14px !important;
}

#invoice_item_form .control-label {
  color: var(--fg-muted) !important;
}

/* ─── SCROLLBAR ──────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }

/* ─── MISC ───────────────────────────────────────────── */
hr {
  border-top: 1px solid var(--border) !important;
  margin: 16px 0 !important;
}

.popover {
  background: var(--elevated) !important;
  border: 1px solid var(--border-hi) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--fg) !important;
}

.popover-title {
  background: var(--surface3) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--fg) !important;
}

.tooltip-inner {
  background: var(--surface3) !important;
  color: var(--fg) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
}

/* ─── RTL FIXES ──────────────────────────────────────── */
[dir="rtl"] .mright5  { margin-right: 0; margin-left: 5px; }
[dir="rtl"] .mright10 { margin-right: 0; margin-left: 10px; }
[dir="rtl"] .mleft5   { margin-left: 0; margin-right: 5px; }
[dir="rtl"] .mleft10  { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .input-group-addon:last-child { border-left: 1px solid var(--border); }
[dir="rtl"] .bootstrap-select .dropdown-toggle .filter-option {
  right: 0; margin-right: auto; text-align: right; padding-right: 16px;
}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 991px) {
  .sidebar {
    background: var(--surface) !important;
    border-right: 1px solid var(--border) !important;
  }
}

@media (max-width: 768px) {
  #header { margin-left: 0 !important; }
  .content { padding: 12px !important; }
  .modal-dialog { margin: 10px !important; }
}

/* ─── TAILWIND DARK OVERRIDES (tw- prefixed classes) ─── */
/* These override any light-mode tw- utility classes in the PHP templates */
.tw-bg-white { background-color: var(--surface) !important; }
.tw-bg-gray-50, .tw-bg-neutral-50 { background-color: var(--elevated) !important; }
.tw-bg-gray-100, .tw-bg-neutral-100 { background-color: var(--surface3) !important; }
.tw-text-gray-900, .tw-text-neutral-900 { color: var(--fg) !important; }
.tw-text-gray-700, .tw-text-neutral-700 { color: var(--fg) !important; }
.tw-text-gray-500, .tw-text-neutral-500 { color: var(--fg-muted) !important; }
.tw-text-gray-400, .tw-text-neutral-400 { color: var(--fg-dim) !important; }
.tw-border-gray-200, .tw-border-neutral-200 { border-color: var(--border) !important; }
.tw-divide-gray-200 > * + * { border-color: var(--border) !important; }

/* ─── PRINT (keep light) ─────────────────────────────── */
@media print {
  body, .content, .panel, .modal-content {
    background: #fff !important;
    color: #000 !important;
  }
}

/* ─── TRANSITIONS ────────────────────────────────────── */
.sidebar, #header, .panel_s, .panel, .btn, .form-control,
.modal-content, .dropdown-menu, a {
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, box-shadow 0.15s ease;
}