/* Creators-Style Dark Theme (RTL) - Global */
:root{
  --bg-app:#0e0f13;
  --bg-surface:#15171c;
  --bg-surface-2:#1b1e24;
  --bg-hover:#20232b;
  --border:rgba(255,255,255,.06);
  --border-strong:rgba(255,255,255,.10);

  --text-primary:#f9fafb;
  --text-secondary:#d1d5db;
  --text-muted:#9ca3af;

  --accent:#7c3aed;
  --accent2:#06b6d4;

  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;

  --radius:14px;
  --shadow:0 8px 28px rgba(0,0,0,.35);
}

/* Map dark tokens to Lux tokens for shared components */
:root{
  --lux-bg: var(--bg-app);
  --lux-card: var(--bg-surface);
  --lux-card-2: var(--bg-surface-2);
  --lux-text: var(--text-primary);
  --lux-muted: var(--text-muted);
  --lux-border: var(--border-strong);
  --lux-radius: var(--radius);
  --lux-shadow: var(--shadow);
  --lux-accent: var(--accent);
  --lux-accent2: var(--accent2);
  --lux-success: var(--success);
  --lux-warning: var(--warning);
  --lux-danger: var(--danger);
  --lux-gold: #d4af37;

  /* Bootstrap mapping (keeps all BS components aligned with the theme) */
  --bs-body-bg: var(--lux-bg);
  --bs-body-color: var(--lux-text);
  --bs-secondary-color: var(--lux-muted);
  --bs-border-color: var(--lux-border);
  --bs-primary: var(--lux-accent);
  --bs-link-color: var(--lux-text);
  --bs-link-hover-color: var(--text-primary);
}
.lux-muted{ color: var(--text-muted) !important; }
.lux-footer{ background: var(--bg-app); border-top:1px solid var(--border-strong); }
.lux-footer a{ color: var(--text-muted); }
.lux-footer a:hover{ color: var(--text-primary); }

/* App base */
html, body{ background:var(--bg-app); color:var(--text-secondary); }
.lux-bg{ background:var(--bg-app) !important; }
a{ color:inherit; }
a:hover{ color:var(--text-primary); }

h1,h2,h3,h4,h5,h6{ color:var(--text-primary); font-weight:800; letter-spacing:.1px; }
small, .small{ color:var(--text-muted) !important; }
.text-muted{ color:var(--text-muted) !important; }
.text-white-50, .text-white-75{ color:var(--text-muted) !important; }
.text-white-50, .text-white-75{ color:var(--text-muted) !important; }
.text-white, .text-light{ color:var(--text-primary) !important; }

/* Surfaces */
.card, .lux-card, .modal-content, .dropdown-menu, .offcanvas, .accordion-item{
  background:var(--bg-surface) !important;
  color:var(--text-secondary) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow);
}
.card-header, .modal-header, .accordion-header{
  background:transparent !important;
  border-bottom:1px solid var(--border) !important;
}
.card-footer, .modal-footer{
  background:transparent !important;
  border-top:1px solid var(--border) !important;
}

/* Forms */
.form-control, .form-select, .input-group-text{
  background:var(--bg-surface-2) !important;
  color:var(--text-primary) !important;
  border:1px solid var(--border) !important;
  border-radius:12px !important;
}
.form-control::placeholder{ color:rgba(209,213,219,.6) !important; }
.form-control:focus, .form-select:focus{
  border-color:rgba(124,58,237,.6) !important;
  box-shadow:0 0 0 .2rem rgba(124,58,237,.22) !important;
}
.form-check-input{
  background-color:var(--bg-surface-2);
  border:1px solid var(--border);
}
.form-check-input:checked{
  background-color:var(--accent);
  border-color:var(--accent);
}

/* Buttons */
.btn{
  border-radius:12px !important;
  font-weight:700;
}
.btn-outline-light{
  color:var(--text-primary) !important;
  border-color:var(--border-strong) !important;
}
.btn-outline-light:hover{
  background:var(--bg-hover) !important;
  border-color:var(--border-strong) !important;
}
.btn-primary, .lux-btn{
  background:linear-gradient(90deg, var(--accent), var(--accent2)) !important;
  border:0 !important;
  color:#fff !important;
}
.btn-primary:hover, .lux-btn:hover{ filter:brightness(1.05); }

.btn-success{ background:var(--success) !important; border:0 !important; }
.btn-warning{ background:var(--warning) !important; border:0 !important; color:#111827 !important; }
.btn-danger{ background:var(--danger) !important; border:0 !important; }

/* Badges */
.badge{ border-radius:999px; padding:.45em .7em; font-weight:800; }
.badge.bg-secondary{ background:rgba(255,255,255,.10) !important; }

/* Tables */
.table{ color:var(--text-secondary) !important; }
.table thead th{
  color:var(--text-muted) !important;
  border-bottom:1px solid var(--border) !important;
}
.table td, .table th{ border-color:var(--border) !important; }
.table-striped>tbody>tr:nth-of-type(odd)>*{ background:rgba(255,255,255,.02) !important; }
.table-hover>tbody>tr:hover>*{ background:rgba(255,255,255,.04) !important; }

/* Dropdown */
.dropdown-menu{ padding:8px !important; }
.dropdown-item{
  color:var(--text-secondary) !important;
  border-radius:10px;
}
.dropdown-item:hover{
  background:var(--bg-hover) !important;
  color:var(--text-primary) !important;
}

/* Alerts */
.alert{
  border-radius:var(--radius) !important;
  border:1px solid var(--border) !important;
  background:var(--bg-surface) !important;
  color:var(--text-secondary) !important;
}
.alert-success{ border-color:rgba(34,197,94,.35) !important; }
.alert-danger{ border-color:rgba(239,68,68,.35) !important; }
.alert-warning{ border-color:rgba(245,158,11,.35) !important; }

/* Navbar / topbar */
.lux-topbar{
  background:rgba(15,16,20,.75) !important;
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.lux-mark{
  background:linear-gradient(90deg, var(--accent), var(--accent2)) !important;
  color:#fff !important;
}

/* Tabs / pills */
.nav-pills .nav-link{
  border-radius:999px !important;
  background:rgba(255,255,255,.04);
  color:var(--text-secondary);
  border:1px solid var(--border);
}
.nav-pills .nav-link.active{
  background:linear-gradient(90deg, var(--accent), var(--accent2)) !important;
  color:#fff !important;
  border:0 !important;
}

/* Fix common low-contrast classes */
.text-white, .text-light{ color:var(--text-primary) !important; }
.text-white-50, .text-white-75{ color:var(--text-muted) !important; }
.opacity-75{ opacity:.85 !important; }

/* Better hint text under inputs */
.form-text{
  color: rgba(209,213,219,.82) !important;
  font-size: .92rem;
  margin-top: .4rem;
  line-height: 1.6;
}

.hint{
  border: 1px dashed rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 10px 12px;
  margin-top: 10px;
}
.hint strong{ color: var(--text-primary); }

/* Scrollbar (webkit) */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg-app); }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:999px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.18); }