/* =====================================================
   SajidSMM 👑 ROYAL LUXURY VIP THEME
   Deep blacks, gold accents, 3D glassmorphism
   ===================================================== */
:root {
  --primary: #d4af37;
  --primary-dark: #b8941f;
  --primary-light: #f4d47c;
  --secondary: #1a1a2e;
  --accent: #e94560;
  --accent-2: #0f3460;
  --bg: #0a0a0f;
  --bg-card: rgba(20, 20, 30, 0.85);
  --bg-glass: rgba(255, 255, 255, 0.03);
  --sidebar-bg: linear-gradient(180deg, #0d0d14 0%, #1a1a2e 50%, #16213e 100%);
  --text: #f5f0e1;
  --text-muted: #8a8a9e;
  --text-gold: #d4af37;
  --border: rgba(212, 175, 55, 0.15);
  --border-glow: rgba(212, 175, 55, 0.35);
  --input-bg: rgba(255, 255, 255, 0.04);
  --topbar-bg: rgba(13, 13, 20, 0.9);
  --success: #00d4a4;
  --warning: #ffb800;
  --danger: #ff4d6d;
  --info: #4cc9f0;
  --radius: 16px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-gold: 0 8px 32px rgba(212, 175, 55, 0.15);
  --gradient-gold: linear-gradient(135deg, #d4af37 0%, #f4d47c 50%, #d4af37 100%);
  --gradient-dark: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  --gradient-accent: linear-gradient(135deg, #e94560 0%, #0f3460 100%);
}

* { box-sizing: border-box; }
body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(212,175,55,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(233,69,96,0.06) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---- Luxury App Layout ---- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 270px;
  background: var(--sidebar-bg);
  color: #e2e8f0; flex-shrink: 0;
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 24px rgba(0,0,0,0.5);
}
.sidebar .brand {
  padding: 1.5rem 1.25rem; font-size: 1.5rem; font-weight: 900; color: #fff;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(212,175,55,0.1), transparent);
  letter-spacing: 1px;
}
.sidebar .brand span {
  background: var(--gradient-gold);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sidebar nav { padding: 1rem; flex: 1; overflow-y: auto; }
.sidebar nav a {
  display: flex; align-items: center; gap: .8rem; color: #a0a0b8; text-decoration: none;
  padding: .8rem 1rem; border-radius: 12px; margin-bottom: 4px; font-size: .95rem;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  border: 1px solid transparent;
}
.sidebar nav a:hover {
  background: rgba(212,175,55,0.08); color: #fff;
  border-color: var(--border); transform: translateX(4px);
}
.sidebar nav a.active {
  background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(212,175,55,0.05));
  color: var(--primary-light);
  border-color: var(--border-glow);
  box-shadow: 0 4px 16px rgba(212,175,55,0.15);
}
.sidebar .nav-label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: 2px;
  color: var(--primary); padding: 1rem 1rem .4rem; font-weight: 700;
}
.main { flex: 1; margin-left: 270px; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  background: var(--topbar-bg); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border); padding: .8rem 1.75rem;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 900;
}
.balance-chip {
  background: var(--gradient-gold); color: #1a1a1a;
  padding: .5rem 1.25rem; border-radius: 50px; font-weight: 800;
  box-shadow: 0 4px 16px rgba(212,175,55,0.3), inset 0 1px 0 rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.2);
}
.content { padding: 2rem; max-width: 1300px; width: 100%; margin: 0 auto; }
.page-title {
  font-weight: 800; font-size: 1.75rem; margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #fff, var(--primary-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ---- Luxury Cards ---- */
.card {
  background: var(--bg-card); backdrop-filter: blur(20px);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .3s, box-shadow .3s;
}
.card:hover { box-shadow: var(--shadow-gold); }
.card .card-header {
  background: linear-gradient(135deg, rgba(212,175,55,0.08), transparent);
  border-bottom: 1px solid var(--border); font-weight: 700; color: var(--primary-light);
  border-radius: var(--radius) var(--radius) 0 0 !important;
}
.stat-card {
  border-radius: var(--radius); padding: 1.5rem; color: #fff;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform .3s;
}
.stat-card:hover { transform: translateY(-4px) scale(1.02); }
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-gold);
}
.stat-card h3 { font-size: 2rem; font-weight: 900; margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.stat-card p { margin: 0; opacity: .9; font-size: .9rem; font-weight: 500; }

/* ---- Luxury Tables ---- */
.table { color: var(--text); }
.table thead th {
  border-bottom: 2px solid var(--border-glow); font-size: .75rem; text-transform: uppercase;
  letter-spacing: 1px; color: var(--primary); font-weight: 700; background: rgba(212,175,55,0.04);
}
.table td, .table th { border-color: var(--border); vertical-align: middle; }
.table tbody tr { transition: background .2s; }
.table tbody tr:hover { background: rgba(212,175,55,0.04); }

/* ---- Luxury Forms ---- */
.form-control, .form-select {
  background: var(--input-bg); border: 1px solid var(--border);
  color: var(--text); border-radius: 10px; padding: .65rem 1rem;
  transition: all .3s;
}
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,0.06); border-color: var(--primary);
  color: #fff; box-shadow: 0 0 0 3px rgba(212,175,55,0.15);
}
.form-control::placeholder { color: var(--text-muted); }
.form-label { font-weight: 600; font-size: .9rem; color: var(--primary-light); }

/* ---- 3D LUXURY BUTTONS ---- */
.btn {
  border-radius: 12px; font-weight: 700; padding: .65rem 1.5rem;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  border: 1px solid rgba(255,255,255,0.1);
  position: relative; overflow: hidden;
  text-transform: uppercase; letter-spacing: .5px; font-size: .85rem;
}
.btn::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left .5s;
}
.btn:hover::before { left: 100%; }
.btn:active { transform: translateY(2px) scale(.98); }

.btn-primary {
  background: linear-gradient(180deg, #f4d47c 0%, #d4af37 50%, #b8941f 100%);
  border-color: #d4af37; color: #1a1a1a !important;
  box-shadow: 0 6px 0 #8a6d1a, 0 8px 20px rgba(212,175,55,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #ffe08a 0%, #e5c04b 50%, #c9a227 100%);
  border-color: #f4d47c; color: #1a1a1a !important;
  box-shadow: 0 6px 0 #8a6d1a, 0 12px 28px rgba(212,175,55,0.45), inset 0 1px 0 rgba(255,255,255,0.5);
  transform: translateY(-2px);
}
.btn-primary:active { box-shadow: 0 2px 0 #8a6d1a, 0 4px 12px rgba(212,175,55,0.3); transform: translateY(4px); }

.btn-success {
  background: linear-gradient(180deg, #2ee6a8 0%, #00d4a4 50%, #00a37e 100%);
  border-color: #00d4a4; color: #0a2a1f !important;
  box-shadow: 0 6px 0 #007a5e, 0 8px 20px rgba(0,212,164,0.3), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-success:hover {
  box-shadow: 0 6px 0 #007a5e, 0 12px 28px rgba(0,212,164,0.4);
  transform: translateY(-2px); color: #0a2a1f !important;
}
.btn-success:active { box-shadow: 0 2px 0 #007a5e; transform: translateY(4px); }

.btn-danger {
  background: linear-gradient(180deg, #ff7a95 0%, #ff4d6d 50%, #d6335c 100%);
  border-color: #ff4d6d; color: #fff !important;
  box-shadow: 0 6px 0 #a32442, 0 8px 20px rgba(255,77,109,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-danger:hover { box-shadow: 0 6px 0 #a32442, 0 12px 28px rgba(255,77,109,0.4); transform: translateY(-2px); }
.btn-danger:active { box-shadow: 0 2px 0 #a32442; transform: translateY(4px); }

.btn-info {
  background: linear-gradient(180deg, #7dd3fc 0%, #4cc9f0 50%, #3a9fd8 100%);
  border-color: #4cc9f0; color: #0a2233 !important;
  box-shadow: 0 6px 0 #2a7aa8, 0 8px 20px rgba(76,201,240,0.3), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-info:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #2a7aa8, 0 12px 28px rgba(76,201,240,0.4); }
.btn-info:active { box-shadow: 0 2px 0 #2a7aa8; transform: translateY(4px); }

.btn-warning {
  background: linear-gradient(180deg, #ffd166 0%, #ffb800 50%, #e09e00 100%);
  border-color: #ffb800; color: #3a2a00 !important;
  box-shadow: 0 6px 0 #a67c00, 0 8px 20px rgba(255,184,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-warning:hover { transform: translateY(-2px); }
.btn-warning:active { box-shadow: 0 2px 0 #a67c00; transform: translateY(4px); }

.btn-secondary, .btn-outline-secondary {
  background: linear-gradient(180deg, #3a3a4e 0%, #2a2a3e 100%);
  border-color: rgba(255,255,255,0.12); color: #e0e0ee !important;
  box-shadow: 0 4px 0 #1a1a28, 0 6px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn-secondary:hover { color: #fff !important; transform: translateY(-2px); }
.btn-secondary:active { box-shadow: 0 1px 0 #1a1a28; transform: translateY(3px); }

.btn-sm { padding: .4rem .9rem; font-size: .75rem; box-shadow-width: 4px; }
.btn-lg { padding: .9rem 2rem; font-size: 1rem; }

/* ---- Badges ---- */
.badge {
  border-radius: 8px; padding: .35em .7em; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 6px rgba(0,0,0,0.2);
}
.bg-primary, .badge.bg-primary { background: var(--gradient-gold) !important; color: #1a1a1a !important; }
.bg-success { background: linear-gradient(135deg, #00d4a4, #00a37e) !important; }
.bg-danger { background: linear-gradient(135deg, #ff4d6d, #d6335c) !important; }
.bg-warning { background: linear-gradient(135deg, #ffb800, #e09e00) !important; color: #1a1a1a !important; }
.bg-info { background: linear-gradient(135deg, #4cc9f0, #3a9fd8) !important; }
.bg-secondary { background: linear-gradient(135deg, #3a3a4e, #2a2a3e) !important; }

/* ---- Alerts ---- */
.alert {
  border-radius: 12px; border: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
.alert-success { background: rgba(0,212,164,0.1); border-color: rgba(0,212,164,0.3); color: #7ef0d4; }
.alert-danger { background: rgba(255,77,109,0.1); border-color: rgba(255,77,109,0.3); color: #ff9db1; }
.alert-info { background: rgba(76,201,240,0.1); border-color: rgba(76,201,240,0.3); color: #a8e6ff; }
.alert-warning { background: rgba(255,184,0,0.1); border-color: rgba(255,184,0,0.3); color: #ffd97a; }

/* ---- Modals ---- */
.modal-content {
  background: linear-gradient(180deg, #1a1a2e, #12121e);
  border: 1px solid var(--border-glow); border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 40px rgba(212,175,55,0.08);
}
.modal-header { border-bottom: 1px solid var(--border); }
.modal-header .modal-title { color: var(--primary-light); font-weight: 800; }
.modal-footer { border-top: 1px solid var(--border); }
.btn-close { filter: invert(1); }

/* ---- Dropdowns / lists ---- */
.list-group-item {
  background: var(--bg-card); border-color: var(--border); color: var(--text);
}
.list-group-item:hover, .list-group-item-action:hover {
  background: rgba(212,175,55,0.08); color: #fff;
}
.dropdown-menu {
  background: #1a1a2e; border: 1px solid var(--border-glow); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0a0a0f; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #d4af37, #8a6d1a); border-radius: 8px; }

/* ---- Animations ---- */
@keyframes goldShimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.content > * { animation: fadeUp .4s ease both; }
.content > *:nth-child(2) { animation-delay: .05s; }
.content > *:nth-child(3) { animation-delay: .1s; }

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform .3s; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
}

/* =====================================================
   CONTRAST FIXES - Text readability on dark luxury theme
   ===================================================== */

/* Bootstrap text-muted is too dark on black bg */
.text-muted { color: #9a9ab0 !important; }

/* All headings readable */
h1, h2, h3, h4, h5, h6 { color: #f5f0e1; }

/* Paragraphs */
p { color: #c8c8d8; }

/* Links */
a { color: #f4d47c; }
a:hover { color: #ffe08a; }

/* Table text */
.table { color: #e8e8f0; }
.table td { color: #d8d8e8; }

/* Form text */
.form-control, .form-select { color: #f5f0e1; }
.form-control::placeholder { color: #6a6a80 !important; }
label, .form-label { color: #d4af37; }

/* Small text */
small, .small { color: #9a9ab0; }

/* Card text */
.card { color: #e8e8f0; }
.card-body { color: #d8d8e8; }

/* List group */
.list-group-item { color: #e8e8f0; }

/* Modal text */
.modal-body { color: #d8d8e8; }

/* Dropdown */
.dropdown-item { color: #e8e8f0; }
.dropdown-item:hover { background: rgba(212,175,55,.1); color: #fff; }

/* Select options (dropdown list) */
select option { background: #1a1a2e; color: #f5f0e1; }

/* Input group text */
.input-group-text { background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.2); color: #f4d47c; }

/* Badge text fixes */
.badge { color: #fff; }

/* Alert text */
.alert { color: #e8e8f0; }

/* Nav links in guest header */
.navbar-dark .navbar-nav .nav-link { color: #c8c8d8; }

/* Feature boxes on landing */
.feature-box { color: #e8e8f0; }
.feature-box p { color: #9a9ab0 !important; }
.feature-box h5 { color: #fff; }

/* Hero text */
.hero h1, .hero p, .hero .lead { color: #f5f0e1; }
.hero .lead { color: #b8b8c8 !important; }

/* Stats */
.stat-card p, .stat-card h3 { color: #fff !important; }

/* Topbar user text */
.topbar .text-muted { color: #9a9ab0 !important; }

/* Sidebar - already good, ensure */
.sidebar nav a { color: #b8b8d0; }

/* Code blocks */
code { color: #f4d47c; background: rgba(212,175,55,.08); padding: .1em .4em; border-radius: 4px; }

/* Pre */
pre { color: #d8d8e8; background: rgba(0,0,0,.3); }

/* Hr */
hr { border-color: rgba(212,175,55,.15); }

/* Pagination */
.page-link { background: rgba(20,20,30,.8); border-color: rgba(212,175,55,.15); color: #f4d47c; }
.page-link:hover { background: rgba(212,175,55,.1); color: #fff; }

/* Ensure white text classes work */
.text-white { color: #fff !important; }
.text-dark { color: #f5f0e1 !important; }

/* Button text - ensure readable */
.btn-light { color: #1a1a1a !important; }
.btn-outline-light { color: #f5f0e1 !important; border-color: rgba(255,255,255,.3); }
.btn-outline-light:hover { background: rgba(255,255,255,.1); color: #fff !important; }

/* =====================================================
   TABLE FIX - Dark luxury tables
   ===================================================== */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: #e8e8f0;
  --bs-table-striped-bg: rgba(212,175,55,.03);
  --bs-table-hover-bg: rgba(212,175,55,.06);
  background: rgba(20,20,30,.6) !important;
  border-radius: 12px;
  overflow: hidden;
}
.table > :not(caption) > * > * {
  background: transparent !important;
  color: #d8d8e8 !important;
  border-color: rgba(212,175,55,.08) !important;
}
.table thead th {
  background: rgba(212,175,55,.08) !important;
  color: #f4d47c !important;
  border-bottom: 2px solid rgba(212,175,55,.25) !important;
}
.table tbody tr:hover > * {
  background: rgba(212,175,55,.05) !important;
}
/* Card containing table */
.card .table { margin-bottom: 0; }