/* ============================================================
   ServerWatch Pro — Main Stylesheet
   ============================================================ */

/* ── Dark Mode (default) ── */
:root,
[data-theme="dark"] {
  --primary:    #6c63ff;
  --primary-dk: #5a52d5;
  --success:    #2ecc71;
  --danger:     #e74c3c;
  --warning:    #f39c12;
  --dark-bg:    #0f0f1a;
  --card-bg:    #1a1a2e;
  --card-bg2:   #16213e;
  --border:     #2d2d4e;
  --text:       #e0e0f0;
  --text-muted: #8888aa;
  --nav-bg:     linear-gradient(135deg,#0d0d1f 0%,#1a1a3e 100%);
  --footer-bg:  linear-gradient(135deg,#0d0d1f 0%,#1a1a3e 100%);
  --input-bg:   #16213e;
  --table-stripe: rgba(255,255,255,.03);
  --shadow:     rgba(0,0,0,.4);
}

/* ── Light Mode ── */
[data-theme="light"] {
  --primary:    #6c63ff;
  --primary-dk: #5a52d5;
  --success:    #1a9e55;
  --danger:     #d63031;
  --warning:    #e17055;
  --dark-bg:    #f0f2f8;
  --card-bg:    #ffffff;
  --card-bg2:   #f5f6fa;
  --border:     #dde1f0;
  --text:       #1a1a2e;
  --text-muted: #5a5a7a;
  --nav-bg:     linear-gradient(135deg,#ffffff 0%,#f0f2f8 100%);
  --footer-bg:  linear-gradient(135deg,#ffffff 0%,#f0f2f8 100%);
  --input-bg:   #f5f6fa;
  --table-stripe: rgba(0,0,0,.03);
  --shadow:     rgba(0,0,0,.1);
}

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

body {
  background: var(--dark-bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background .25s, color .25s;
}

/* ── Theme toggle button ── */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-bg2);
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  transition: all .2s;
}
.theme-toggle:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark-bg); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

/* ── Navbar ── */
.main-navbar {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.main-navbar .navbar-brand {
  font-size: 1.4rem;
  background: linear-gradient(135deg, var(--primary), #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.main-navbar .nav-link {
  color: #b0b0d0 !important;
  padding: 6px 14px;
  border-radius: 8px;
  transition: all .2s;
}
.main-navbar .nav-link:hover,
.main-navbar .nav-link.active {
  color: #fff !important;
  background: rgba(108, 99, 255, .2);
}
.main-navbar .dropdown-menu {
  background: var(--card-bg);
  border: 1px solid var(--border);
}
.main-navbar .dropdown-item { color: var(--text); }
.main-navbar .dropdown-item:hover { background: rgba(108,99,255,.2); color: #fff; }

/* ── Main Content ── */
.main-content { flex: 1; padding: 30px 0; }

/* ── Footer ── */
.main-footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}

/* ── Cards ── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
}
.card-header {
  background: var(--card-bg2);
  border-bottom: 1px solid var(--border);
  border-radius: 16px 16px 0 0 !important;
  padding: 14px 20px;
  font-weight: 600;
}

/* ── Stat Cards ── */
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  transition: transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), #a78bfa);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(108,99,255,.2); }
.stat-card .stat-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 16px;
}
.stat-card .stat-value { font-size: 2rem; font-weight: 700; line-height: 1; }
.stat-card .stat-label { color: var(--text-muted); font-size: .85rem; margin-top: 4px; }

/* Icon bg variants */
.icon-primary { background: rgba(108,99,255,.2); color: var(--primary); }
.icon-success { background: rgba(46,204,113,.2); color: var(--success); }
.icon-danger  { background: rgba(231,76,60,.2);  color: var(--danger); }
.icon-warning { background: rgba(243,156,18,.2); color: var(--warning); }

/* ── Monitor Cards ── */
.monitor-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.monitor-card:hover { border-color: var(--primary); box-shadow: 0 4px 20px rgba(108,99,255,.15); }
.monitor-card.status-up    { border-left: 4px solid var(--success); }
.monitor-card.status-down  { border-left: 4px solid var(--danger); }
.monitor-card.status-paused{ border-left: 4px solid #6c757d; }
.monitor-card.status-pending{ border-left: 4px solid var(--warning); }

.status-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.status-dot.up      { background: var(--success); box-shadow: 0 0 8px var(--success); animation: pulse-green 2s infinite; }
.status-dot.down    { background: var(--danger);  box-shadow: 0 0 8px var(--danger); }
.status-dot.pending { background: var(--warning); }
.status-dot.paused  { background: #6c757d; }

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 4px var(--success); }
  50%       { box-shadow: 0 0 12px var(--success); }
}

/* ── Uptime bar ── */
.uptime-bar-wrap { margin: 10px 0; }
.uptime-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}
.uptime-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .5s ease;
}
.uptime-bar-fill.high   { background: linear-gradient(90deg, var(--success), #27ae60); }
.uptime-bar-fill.medium { background: linear-gradient(90deg, var(--warning), #e67e22); }
.uptime-bar-fill.low    { background: linear-gradient(90deg, var(--danger), #c0392b); }

/* ── Tables ── */
.table {
  color: var(--text);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-hover-bg: rgba(108,99,255,.08);
  border-color: var(--border);
}
.table thead th {
  background: var(--card-bg2);
  color: var(--text-muted);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-color: var(--border);
  padding: 12px 16px;
}
.table td { border-color: var(--border); padding: 12px 16px; vertical-align: middle; }

/* ── Forms ── */
.form-control, .form-select {
  background: var(--card-bg2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
}
.form-control:focus, .form-select:focus {
  background: var(--card-bg2);
  border-color: var(--primary);
  color: var(--text);
  box-shadow: 0 0 0 3px rgba(108,99,255,.25);
}
.form-control::placeholder { color: var(--text-muted); }
.form-label { color: var(--text-muted); font-size: .9rem; font-weight: 500; }

/* ── Buttons ── */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dk));
  border: none;
  border-radius: 10px;
  padding: 10px 22px;
  font-weight: 600;
  transition: all .2s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(108,99,255,.4); }
.btn-outline-primary { border-color: var(--primary); color: var(--primary); border-radius: 10px; }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); }
.btn-success  { background: linear-gradient(135deg, #2ecc71, #27ae60); border: none; border-radius: 10px; }
.btn-danger   { background: linear-gradient(135deg, #e74c3c, #c0392b); border: none; border-radius: 10px; }
.btn-warning  { background: linear-gradient(135deg, #f39c12, #e67e22); border: none; border-radius: 10px; }
.btn-sm { padding: 5px 12px; font-size: .8rem; }

/* ── Auth Pages ── */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.auth-logo {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
}
.auth-subtitle { text-align: center; color: var(--text-muted); margin-bottom: 30px; }

/* ── Landing Page ── */
.hero-section {
  background: linear-gradient(135deg, #0d0d1f 0%, #1a1a3e 50%, #0d0d1f 100%);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(108,99,255,.15) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 50%, rgba(167,139,250,.1) 0%, transparent 60%);
}
.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
}
.text-gradient {
  background: linear-gradient(135deg, var(--primary), #a78bfa, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(108,99,255,.15);
  border: 1px solid rgba(108,99,255,.3);
  border-radius: 50px;
  padding: 6px 16px;
  font-size: .85rem;
  color: #a78bfa;
  margin-bottom: 20px;
}

/* Feature cards */
.feature-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  transition: all .3s;
  height: 100%;
}
.feature-card:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: 0 10px 30px rgba(108,99,255,.2); }
.feature-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: rgba(108,99,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  color: var(--primary);
  margin: 0 auto 18px;
}

/* Pricing cards */
.pricing-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px;
  transition: all .3s;
  height: 100%;
  position: relative;
}
.pricing-card:hover { border-color: var(--primary); transform: translateY(-4px); }
.pricing-card.popular {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(108,99,255,.08), var(--card-bg));
}
.popular-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--primary), #a78bfa);
  color: #fff;
  padding: 4px 18px;
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 600;
}
.price-amount { font-size: 2.5rem; font-weight: 800; }
.price-currency { font-size: 1.2rem; vertical-align: top; margin-top: 6px; display: inline-block; }
.price-period { color: var(--text-muted); font-size: .9rem; }
.feature-list { list-style: none; padding: 0; margin: 20px 0; }
.feature-list li { padding: 6px 0; display: flex; align-items: center; gap: 10px; }
.feature-list li .fa-check { color: var(--success); }
.feature-list li .fa-times { color: var(--text-muted); }

/* ── Admin sidebar ── */
.admin-layout { display: flex; min-height: calc(100vh - 70px); }
.admin-sidebar {
  width: 260px;
  min-width: 260px;
  background: var(--card-bg);
  border-right: 1px solid var(--border);
  padding: 20px 0;
}
.admin-sidebar .sidebar-title {
  color: var(--text-muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 20px 6px;
  font-weight: 600;
}
.admin-sidebar .nav-link {
  color: var(--text-muted);
  padding: 10px 20px;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all .2s;
}
.admin-sidebar .nav-link:hover, .admin-sidebar .nav-link.active {
  color: var(--text);
  background: rgba(108,99,255,.15);
  border-right: 3px solid var(--primary);
}
.admin-sidebar .nav-link i { width: 20px; text-align: center; }
.admin-main { flex: 1; padding: 28px; overflow-x: hidden; }

/* ── Badges ── */
.badge { border-radius: 8px; font-weight: 500; }

/* ── Alerts ── */
.alert { border-radius: 12px; border: none; }
.alert-success { background: rgba(46,204,113,.15); color: #2ecc71; border: 1px solid rgba(46,204,113,.3); }
.alert-danger  { background: rgba(231,76,60,.15);  color: #e74c3c; border: 1px solid rgba(231,76,60,.3); }
.alert-warning { background: rgba(243,156,18,.15); color: #f39c12; border: 1px solid rgba(243,156,18,.3); }
.alert-info    { background: rgba(108,99,255,.15); color: #a78bfa; border: 1px solid rgba(108,99,255,.3); }

/* ── Incident Timeline ── */
.incident-item {
  border-left: 3px solid var(--border);
  padding-left: 20px;
  margin-bottom: 20px;
  position: relative;
}
.incident-item::before {
  content: '';
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--danger);
  position: absolute;
  left: -7px; top: 4px;
}
.incident-item.resolved::before { background: var(--success); }

/* ── Response time indicator ── */
.response-fast   { color: var(--success); }
.response-medium { color: var(--warning); }
.response-slow   { color: var(--danger); }

/* ── Page header ── */
.page-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.page-header h1 { font-size: 1.8rem; font-weight: 700; margin: 0; }
.page-header .breadcrumb { margin: 0; }
.breadcrumb-item { color: var(--text-muted); font-size: .85rem; }
.breadcrumb-item.active { color: var(--text); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }

/* ── Utilities ── */
.text-muted { color: var(--text-muted) !important; }
hr { border-color: var(--border); opacity: 1; }
a { color: #a78bfa; text-decoration: none; }
a:hover { color: var(--primary); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state i { font-size: 4rem; margin-bottom: 20px; opacity: .3; }

/* ── Modal ── */
.modal-content { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; color: var(--text); }
.modal-header { border-bottom: 1px solid var(--border); }
.modal-footer { border-top: 1px solid var(--border); }
.btn-close { filter: invert(1); }

/* ── Brand Logo in Navbar ── */
.brand-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}

/* ── Admin Sidebar Mobile Off-Canvas ── */
.admin-hamburger {
  background: var(--card-bg2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
}
.admin-hamburger:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.admin-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1040;
}
.admin-sidebar-overlay.show { display: block; }

/* ── Comprehensive Mobile Responsive ── */

/* Extra small screens (≤575px) */
@media (max-width: 575px) {
  /* Navbar */
  .main-navbar { padding: 8px 0; }
  .main-navbar .navbar-brand { font-size: 1.1rem; }
  .brand-logo { height: 26px; }

  /* Auth cards */
  .auth-card { padding: 24px 16px; margin: 0 12px; }
  .auth-logo { font-size: 1.6rem; }

  /* Stat cards */
  .stat-card { padding: 16px; }
  .stat-card .stat-value { font-size: 1.4rem; }
  .stat-card .stat-icon { width: 44px; height: 44px; font-size: 1.3rem; margin-bottom: 12px; }

  /* Monitor cards */
  .monitor-card { padding: 14px; }

  /* Hero */
  .hero-section { padding: 50px 0; }
  .hero-title { font-size: 1.8rem; }
  .hero-badge { font-size: .78rem; padding: 4px 12px; }

  /* Page header */
  .page-header h1 { font-size: 1.4rem; }

  /* Tables — horizontal scroll */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { min-width: 480px; }
  .table thead th,
  .table td { padding: 8px 10px; font-size: .82rem; }

  /* Admin main content */
  .admin-main { padding: 16px 12px; }

  /* Pricing cards */
  .pricing-card { padding: 24px 18px; }
  .price-amount { font-size: 2rem; }

  /* Feature cards */
  .feature-card { padding: 20px 16px; }
  .feature-icon { width: 52px; height: 52px; font-size: 1.5rem; }

  /* Modal */
  .modal-dialog { margin: 8px; }
  .modal-content { border-radius: 12px; }

  /* Buttons */
  .btn { font-size: .85rem; }

  /* Form spacing */
  .form-control, .form-select { font-size: .9rem; }

  /* Footer */
  .main-footer { padding: 20px 0; }
  .main-footer .row > div { text-align: center !important; }
}

/* Small screens (576–767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .auth-card { padding: 32px 24px; }
  .stat-card .stat-value { font-size: 1.6rem; }
  .hero-section { padding: 60px 0; }
  .hero-title { font-size: 2.2rem; }
  .admin-main { padding: 20px 16px; }
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { min-width: 520px; }
}

/* Medium screens (768–991px) */
@media (max-width: 991px) {
  /* Sidebar becomes off-canvas drawer on tablets */
  .admin-sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: 280px;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform .3s ease;
    overflow-y: auto;
    padding-top: 10px;
  }
  .admin-sidebar.open {
    transform: translateX(0);
  }
  .admin-main { padding: 20px; }
  .stat-card .stat-value { font-size: 1.5rem; }

  /* Wrap flex-wrap on smaller tables */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Desktop (≥992px) — sidebar always visible */
@media (min-width: 992px) {
  .admin-sidebar {
    transform: none !important;
    position: relative;
    height: auto;
  }
  .admin-sidebar-overlay { display: none !important; }
  .admin-hamburger { display: none !important; }
}

/* Prevent body scroll when sidebar open on mobile */
body.sidebar-open { overflow: hidden; }

/* ── Responsive Tables (all sizes) ── */
.table-responsive-stack {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Responsive Cards Grid ── */
@media (max-width: 767px) {
  /* Stack columns */
  .row-cols-md-2 > *, .row-cols-md-3 > *, .row-cols-md-4 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* Reduce gap */
  .gap-3 { gap: 0.75rem !important; }

  /* Invoice page */
  .invoice-table { font-size: .82rem; }
  .invoice-table th, .invoice-table td { padding: 6px 8px !important; }
}

/* ── Admin Layout responsive ── */
@media (max-width: 767px) {
  .admin-layout { flex-direction: column; }
  /* Top action buttons stack nicely */
  .page-header { margin-bottom: 16px; padding-bottom: 12px; }
  .page-header h1 { font-size: 1.3rem; }
  /* Card headers */
  .card-header { padding: 10px 14px; font-size: .9rem; }
  .card-body { padding: 14px; }
  /* Pricing — full width on mobile */
  .pricing-section .col-md-4 { margin-bottom: 16px; }
  /* d-flex wrapping */
  .d-flex.gap-2 { flex-wrap: wrap; }
  /* Modal full screen feel */
  .modal-dialog-scrollable .modal-body { max-height: 65vh; }
}

/* ── Uptime bars responsive ── */
@media (max-width: 575px) {
  .uptime-bar-wrap .d-flex { flex-direction: column; align-items: flex-start !important; }
}

/* ── Navbar toggler color fix ── */
.navbar-toggler { border-color: var(--border); }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28160%2C160%2C220%2C0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
[data-theme="light"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2858%2C58%2C90%2C0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Live indicator ── */
.live-dot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; color: var(--success);
}
.live-dot::before {
  content: ''; width: 8px; height: 8px;
  border-radius: 50%; background: var(--success);
  animation: pulse-green 1.5s infinite;
}

/* ============================================================
   Light Mode Overrides
   ============================================================ */

/* ── Navbar ── */
[data-theme="light"] .main-navbar {
  box-shadow: 0 2px 12px var(--shadow);
}
[data-theme="light"] .main-navbar .navbar-brand {
  background: linear-gradient(135deg, var(--primary), #5a52d5);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .main-navbar .nav-link         { color: #3a3a5a !important; }
[data-theme="light"] .main-navbar .nav-link:hover,
[data-theme="light"] .main-navbar .nav-link.active  { color: var(--primary) !important; background: rgba(108,99,255,.1); }
[data-theme="light"] .main-navbar .dropdown-menu    { background: #fff; border: 1px solid var(--border); box-shadow: 0 8px 24px var(--shadow); }
[data-theme="light"] .main-navbar .dropdown-item    { color: var(--text); }
[data-theme="light"] .main-navbar .dropdown-item:hover { background: rgba(108,99,255,.08); color: var(--primary); }
/* Admin panel navbar dark text override in light mode */
[data-theme="light"] .main-navbar .btn-outline-warning { color: #b35900; border-color: #e67e22; }
[data-theme="light"] .main-navbar .btn-outline-secondary { color: #3a3a5a; border-color: #aaaac0; }
[data-theme="light"] .main-navbar .small.text-muted { color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted); }

/* ── Cards ── */
[data-theme="light"] .card          { background: var(--card-bg);  border-color: var(--border); color: var(--text); box-shadow: 0 2px 12px var(--shadow); }
[data-theme="light"] .card-header   { background: var(--card-bg2); border-color: var(--border); color: var(--text); }
[data-theme="light"] .card-body     { color: var(--text); }
[data-theme="light"] .stat-card     { background: var(--card-bg);  border-color: var(--border); box-shadow: 0 2px 12px var(--shadow); }
[data-theme="light"] .stat-label    { color: var(--text-muted); }
[data-theme="light"] .monitor-card  { background: var(--card-bg);  border-color: var(--border); }
[data-theme="light"] .feature-card  { background: var(--card-bg);  border-color: var(--border); }
[data-theme="light"] .feature-card h6 { color: var(--text); }
[data-theme="light"] .pricing-card  { background: var(--card-bg);  border-color: var(--border); }
[data-theme="light"] .pricing-card .feature-list li { color: var(--text); }
[data-theme="light"] .popular-badge { background: linear-gradient(135deg,var(--primary),#5a52d5); color:#fff; }
[data-theme="light"] .feature-list li .fa-check { color: var(--success); }

/* ── Forms ── */
[data-theme="light"] .form-control,
[data-theme="light"] .form-select       { background: var(--input-bg); border-color: var(--border); color: var(--text); }
[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-select:focus { background: #fff; border-color: var(--primary); color: var(--text); }
[data-theme="light"] .form-control::placeholder { color: #9999bb; }
[data-theme="light"] .form-label        { color: var(--text-muted); }
[data-theme="light"] .form-check-label  { color: var(--text); }
[data-theme="light"] .input-group-text  { background: var(--card-bg2); border-color: var(--border); color: var(--text-muted); }
[data-theme="light"] .form-control[readonly] { background: var(--card-bg2); color: var(--text); }

/* ── Tables ── */
[data-theme="light"] .table          { color: var(--text); --bs-table-striped-bg: var(--table-stripe); --bs-table-hover-bg: rgba(108,99,255,.05); }
[data-theme="light"] .table thead th { background: var(--card-bg2); color: var(--text-muted); border-color: var(--border); }
[data-theme="light"] .table td       { border-color: var(--border); color: var(--text); }
[data-theme="light"] .table .text-muted { color: var(--text-muted) !important; }
[data-theme="light"] .table .fw-semibold { color: var(--text); }

/* ── Hero section ── */
[data-theme="light"] .hero-section { background: linear-gradient(135deg, #e8eaf6 0%, #f0f2f8 50%, #e8eaf6 100%); }
[data-theme="light"] .hero-section::before {
  background: radial-gradient(ellipse at 30% 50%, rgba(108,99,255,.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 50%, rgba(108,99,255,.05) 0%, transparent 60%);
}
[data-theme="light"] .hero-title { color: #1a1a2e !important; }

/* ── Alerts ── */
[data-theme="light"] .alert-success { background: rgba(26,158,85,.1);  color: #1a7a42; border-color: rgba(26,158,85,.3); }
[data-theme="light"] .alert-danger  { background: rgba(214,48,49,.1);  color: #a82020; border-color: rgba(214,48,49,.3); }
[data-theme="light"] .alert-warning { background: rgba(225,112,85,.1); color: #b85a30; border-color: rgba(225,112,85,.3); }
[data-theme="light"] .alert-info    { background: rgba(108,99,255,.1); color: #4a42cc; border-color: rgba(108,99,255,.3); }

/* ── Modal ── */
[data-theme="light"] .modal-content  { background: var(--card-bg); border-color: var(--border); color: var(--text); }
[data-theme="light"] .modal-header,
[data-theme="light"] .modal-footer   { border-color: var(--border); }
[data-theme="light"] .modal-title    { color: var(--text); }
[data-theme="light"] .btn-close      { filter: none; }

/* ── Admin sidebar ── */
[data-theme="light"] .admin-sidebar         { background: var(--card-bg); border-color: var(--border); }
[data-theme="light"] .admin-sidebar .sidebar-title { color: var(--text-muted); }
[data-theme="light"] .admin-sidebar .nav-link { color: var(--text-muted); }
[data-theme="light"] .admin-sidebar .nav-link i { color: var(--text-muted); }
[data-theme="light"] .admin-sidebar .nav-link:hover,
[data-theme="light"] .admin-sidebar .nav-link.active { color: var(--primary); background: rgba(108,99,255,.08); }
[data-theme="light"] .admin-main { color: var(--text); }

/* ── General text ── */
[data-theme="light"] body          { color: var(--text); }
[data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] h3,
[data-theme="light"] h4,[data-theme="light"] h5,[data-theme="light"] h6 { color: var(--text); }
[data-theme="light"] p             { color: var(--text); }
[data-theme="light"] .text-muted   { color: var(--text-muted) !important; }
[data-theme="light"] a             { color: var(--primary); }
[data-theme="light"] hr            { border-color: var(--border); }
[data-theme="light"] code          { color: var(--primary); background: rgba(108,99,255,.1); padding: 1px 5px; border-radius: 4px; }
[data-theme="light"] .fw-semibold,
[data-theme="light"] .fw-bold      { color: var(--text); }
[data-theme="light"] .small        { color: inherit; }

/* ── Breadcrumb ── */
[data-theme="light"] .breadcrumb-item         { color: var(--text-muted); }
[data-theme="light"] .breadcrumb-item.active  { color: var(--text); }
[data-theme="light"] .breadcrumb-item a       { color: var(--primary); }
[data-theme="light"] .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }

/* ── Page header ── */
[data-theme="light"] .page-header   { border-color: var(--border); }
[data-theme="light"] .page-header h1 { color: var(--text); }

/* ── Dropdown menus ── */
[data-theme="light"] .dropdown-menu  { background: #fff; border-color: var(--border); }
[data-theme="light"] .dropdown-item  { color: var(--text); }
[data-theme="light"] .dropdown-item:hover { background: rgba(108,99,255,.08); color: var(--primary); }
[data-theme="light"] .dropdown-divider { border-color: var(--border); }

/* ── Badges ── */
[data-theme="light"] .badge.bg-secondary { background-color: #8888aa !important; color: #fff; }

/* ── Buttons — full color fix in light mode ── */
/*
 * ROOT CAUSE: `[data-theme="light"] a { color: var(--primary) }` has specificity
 * [0-1-1] which beats Bootstrap's `.btn-primary { color:#fff }` at [0-1-0].
 * Every <a class="btn btn-primary"> becomes purple-text-on-purple → invisible.
 * Fix: add [attr]+[class] rules at [0-2-0] to win the specificity battle.
 */

/* Solid buttons — white text always */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-primary:focus,
[data-theme="light"] .btn-primary:active  { color: #fff !important; }

[data-theme="light"] .btn-success,
[data-theme="light"] .btn-success:hover,
[data-theme="light"] .btn-success:focus,
[data-theme="light"] .btn-success:active  { color: #fff !important; }

[data-theme="light"] .btn-danger,
[data-theme="light"] .btn-danger:hover,
[data-theme="light"] .btn-danger:focus,
[data-theme="light"] .btn-danger:active   { color: #fff !important; }

[data-theme="light"] .btn-warning,
[data-theme="light"] .btn-warning:hover,
[data-theme="light"] .btn-warning:focus,
[data-theme="light"] .btn-warning:active  { color: #fff !important; }

[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-secondary:hover { color: #fff !important; }

/* Outline buttons — themed color on default, white on hover */
[data-theme="light"] .btn-outline-primary          { color: var(--primary)  !important; border-color: var(--primary)  !important; }
[data-theme="light"] .btn-outline-primary:hover,
[data-theme="light"] .btn-outline-primary:active   { color: #fff !important; background: var(--primary) !important; }

[data-theme="light"] .btn-outline-success          { color: var(--success)  !important; border-color: var(--success)  !important; }
[data-theme="light"] .btn-outline-success:hover,
[data-theme="light"] .btn-outline-success:active   { color: #fff !important; background: var(--success) !important; }

[data-theme="light"] .btn-outline-danger           { color: var(--danger)   !important; border-color: var(--danger)   !important; }
[data-theme="light"] .btn-outline-danger:hover,
[data-theme="light"] .btn-outline-danger:active    { color: #fff !important; background: var(--danger)  !important; }

[data-theme="light"] .btn-outline-warning          { color: var(--warning)  !important; border-color: var(--warning)  !important; }
[data-theme="light"] .btn-outline-warning:hover,
[data-theme="light"] .btn-outline-warning:active   { color: #fff !important; background: var(--warning) !important; }

[data-theme="light"] .btn-outline-secondary        { color: #3a3a5a !important; border-color: #aaaac0 !important; }
[data-theme="light"] .btn-outline-secondary:hover,
[data-theme="light"] .btn-outline-secondary:active { color: #fff !important; background: #aaaac0 !important; }

[data-theme="light"] .btn-outline-info             { color: #0ea5e9 !important; border-color: #0ea5e9 !important; }
[data-theme="light"] .btn-outline-info:hover       { color: #fff !important; background: #0ea5e9 !important; }

/* Small / link style buttons */
[data-theme="light"] .btn-link { color: var(--primary) !important; }
[data-theme="light"] .btn-link:hover { color: var(--primary-dk) !important; }

/* ── Collapse / accordion ── */
[data-theme="light"] .collapse .p-3,
[data-theme="light"] .collapsing .p-3 { color: var(--text); }

/* =================================================================
   FORCE OVERRIDE — inline dark styles → light mode compatible
   ================================================================= */
[data-theme="light"] [style*="color:#8888aa"],
[data-theme="light"] [style*="color: #8888aa"]   { color: var(--text-muted) !important; }
[data-theme="light"] [style*="color:#e0e0f0"],
[data-theme="light"] [style*="color: #e0e0f0"]   { color: var(--text) !important; }
[data-theme="light"] [style*="color:#b0b0d0"],
[data-theme="light"] [style*="color: #b0b0d0"]   { color: #3a3a5a !important; }
[data-theme="light"] [style*="color:#c0c0d0"],
[data-theme="light"] [style*="color: #c0c0d0"]   { color: #3a3a5a !important; }
[data-theme="light"] [style*="color:#a78bfa"],
[data-theme="light"] [style*="color: #a78bfa"]   { color: var(--primary) !important; }
[data-theme="light"] [style*="color:#888"],
[data-theme="light"] [style*="color: #888"]       { color: var(--text-muted) !important; }
[data-theme="light"] [style*="color:#555"],
[data-theme="light"] [style*="color: #555"]       { color: var(--text-muted) !important; }

[data-theme="light"] [style*="background:#1a1a2e"],
[data-theme="light"] [style*="background: #1a1a2e"]  { background: var(--card-bg)  !important; }
[data-theme="light"] [style*="background:#16213e"],
[data-theme="light"] [style*="background: #16213e"]  { background: var(--card-bg2) !important; }
[data-theme="light"] [style*="background:#0f0f1a"],
[data-theme="light"] [style*="background: #0f0f1a"]  { background: var(--dark-bg)  !important; }

[data-theme="light"] [style*="border:1px solid #2d2d4e"],
[data-theme="light"] [style*="border: 1px solid #2d2d4e"] { border-color: var(--border) !important; }
[data-theme="light"] [style*="border-color:#2d2d4e"]       { border-color: var(--border) !important; }

/* Admin panel nav — inline style override */
[data-theme="light"] [style*="-webkit-text-fill-color:#8888aa"],
[data-theme="light"] [style*="-webkit-text-fill-color: #8888aa"] {
  -webkit-text-fill-color: var(--text-muted) !important;
  color: var(--text-muted) !important;
}