:root{
  --primary:#2499fa;
  --secondary:#23d6fd;
  --bg:#0b1020;
  --surface:#0f1432;
  --surface-2:#0c132a;
  --muted:#8ea0c8;
  --text:#eaf0ff;
  --ring: hsla(205,92%,56%,.35);
  --grad: linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);
  --field-bg:#0b1022;
  --field-bd:rgba(255,255,255,.12);
  --field-bd-focus:rgba(36,153,250,.6);
  --field-ph:#7e8db4;
  --border: rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

/* Base */
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(36,153,250,.10), transparent 60%),
    radial-gradient(1000px 500px at -10% 110%, rgba(35,214,253,.07), transparent 60%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-family: Inter, SF Pro Text, Segoe UI, Roboto, Arial, sans-serif;
}
a{ color:#9ed1ff; text-decoration:none }
a:hover{ text-decoration:underline }

/* Utilities */
.glass{ background:rgba(255,255,255,.06); backdrop-filter: blur(10px); border:1px solid var(--border); }
.shadow-soft{ box-shadow: var(--shadow); }
.ring{ box-shadow: 0 0 0 2px var(--ring); }
.text-muted{ color:var(--muted)!important }
.hidden{ display:none !important; }

/* Topbar */
.topbar{
  position:fixed; inset:0 0 auto 0; height:64px; z-index:1025;
  display:flex; align-items:center; padding:0 16px;
  background:rgba(8,12,24,.65);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.3px; color:var(--text); }
.brand-logo{ width:36px; height:36px; border-radius:10px; background:var(--grad); display:inline-flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 6px 18px rgba(36,153,250,.35); }
.badge-env{ background:rgba(36,153,250,.15); color:#9ed1ff; border:1px solid rgba(36,153,250,.35); padding:2px 10px; border-radius:999px; font-size:12px; }
.avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; background:#0a1126; border:1px solid var(--border); }

/* Layout */
.layout{ display:flex; margin-top:64px; }
.sidebar{
  position:fixed; top:64px; bottom:0; left:0; width:260px; padding:16px;
  overflow:auto; border-right:1px solid var(--border);
  background: linear-gradient(180deg, #0b1424, #0e1a2f);
}
.sidebar .section-title{ font-size:.8rem; color:#7f90b8; padding:10px 8px; }
.nav-item a{ display:flex; align-items:center; gap:.6rem; padding:10px 12px; border-radius:10px; color:#cfe1ff; text-decoration:none; transition:.2s; }
.nav-item a:hover{ background:rgba(255,255,255,.06) }
.nav-item a.active{
  background:linear-gradient(90deg, rgba(36,153,250,.22), rgba(35,214,253,.16));
  color:#fff; border:1px solid rgba(36,153,250,.35);
  box-shadow: inset 0 0 20px rgba(36,153,250,.12);
}
.content{ flex:1; padding:24px; margin-left:260px; min-height:calc(100vh - 64px); }
@media (max-width: 991.98px){
  .sidebar{ transform: translateX(-100%); transition:transform .25s ease }
  .sidebar.show{ transform: translateX(0) }
  .content{ margin-left:0 }
}

/* Cards/Sections */
.hero{
  border-radius:var(--radius-lg); padding:24px;
  background:
    radial-gradient(600px 160px at 80% -30%, rgba(35,214,253,.15), transparent 60%),
    radial-gradient(500px 160px at 10% 120%, rgba(36,153,250,.18), transparent 60%),
    #0c132a;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}
.kpi-card{ border-radius:var(--radius-md); padding:16px; background: rgba(255,255,255,.04); border:1px solid var(--border); transition:.2s; color:var(--text); }
.kpi-card:hover{ transform: translateY(-2px); border-color: rgba(36,153,250,.35) }
.kpi-icon{ width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(36,153,250,.14); color:#9ed1ff; }
.cardx{
  border-radius:var(--radius-md); padding:16px;
  border:1px solid var(--border); background:var(--surface);
  box-shadow: var(--shadow); color:var(--text);
}
.cardx .card-header{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border-bottom:1px solid var(--border);
  color: var(--text);
}

/* Buttons (Bootstrap compatible) */
.btn{
  border-radius:10px; border:1px solid var(--border);
  background: var(--surface-2); color:var(--text);
}
.btn:hover{ filter: brightness(1.08); }
.btn-primary{
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg:#1889e9;
  --bs-btn-hover-border-color:#1889e9;
  --bs-btn-active-bg:#127ad1;
  --bs-btn-active-border-color:#127ad1;
  color:#fff; box-shadow:0 8px 20px rgba(36,153,250,.35);
}
.btn-outline-light{ color:#dbe6ff; border-color:var(--border); }
.btn-sm{ padding:.35rem .6rem; font-size:.85rem; }

/* Forms */
.form-control{
  background: var(--field-bg);
  border: 1px solid var(--field-bd);
  color: var(--text);
  border-radius:10px;
}
.form-control::placeholder{ color: var(--field-ph); }
.form-control:focus{
  background: var(--field-bg); color: var(--text);
  border-color: var(--field-bd-focus);
  box-shadow: 0 0 0 .2rem rgba(36,153,250,.15);
}

select, input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea{
  background: var(--field-bg);
  color: var(--text);
  border:1px solid var(--field-bd);
  border-radius:10px;
}
select:focus, input:focus, textarea:focus{
  border-color: var(--field-bd-focus);
  outline: none;
  box-shadow: 0 0 0 .15rem rgba(36,153,250,.15);
}

/* Project select at topbar */
.project-select{
  min-width:220px;
  background:var(--field-bg);
  color:var(--text);
  border-color:var(--field-bd);
  border-radius:10px;
}

/* Tables */
.table-wrap{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--surface);
}
.table-dark{
  --bs-table-bg:#0f1636;
  --bs-table-striped-bg:#0e1533;
  --bs-table-hover-bg:#0f1a42;
  color:#cfe1ff;
  border-color:var(--border);
}
.table{ margin:0 }
.table thead th{
  color:#a8b7db;
  border-color:var(--border);
  background:#0b1528;
  position:sticky; top:0; z-index:1;
}
.table tbody tr{ background:#111a34 }
.table tbody tr:nth-child(2n){ background:#0e1730 }
.table td, .table th{ border-color:var(--border) }

.table-badge{
  padding:4px 10px; border-radius:999px; font-size:12px;
  border:1px solid rgba(255,255,255,.12);
}
.table-badge.success{ background: rgba(34,197,94,.15); color:#7ee1a7; border-color: rgba(34,197,94,.35) }
.table-badge.warning{ background: rgba(245,158,11,.15); color:#ffd089; border-color: rgba(245,158,11,.35) }
.table-badge.info{ background: rgba(36,153,250,.15); color:#9ed1ff; border-color: rgba(36,153,250,.35) }

/* Login */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:6vh 16px; }
.login-card{ width:100%; max-width:440px; }
.login-card .card{ background:#0f1532; border:1px solid var(--border); color:var(--text); box-shadow: var(--shadow); }

/* Misc */
.spinner-backdrop{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.2); z-index:1200; }

/* Fix Bootstrap defaults on dark theme */
.bg-white, .card, .list-group, .dropdown-menu{
  background-color: var(--surface) !important;
  color: var(--text);
  border-color: var(--border);
}
.card{ border:1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow); }
.card-header{ border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); color:var(--text) }

/* Charts */
.chart-card canvas{ filter: drop-shadow(0 8px 24px rgba(0,0,0,.35)); }

/* Drawer (for Users editor) */
.drawer-wrap{ position:fixed; inset:0; z-index:1055; display:block; }
.drawer-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.35);
  opacity:0; transition:opacity .18s ease;
}
.drawer{
  position:absolute; top:0; right:-520px; height:100%; width:min(100%,520px);
  background: rgba(17,24,48,.96); color:var(--text);
  border-left:1px solid var(--border); box-shadow: var(--shadow);
  padding:16px; overflow:auto; transition:right .18s ease;
  border-top-left-radius: 12px; border-bottom-left-radius: 12px;
}
.drawer-wrap.open .drawer{ right:0; }
.drawer-wrap.open .drawer-backdrop{ opacity:1; }

/* Avatar sizes */
.avatar.sm{ width:28px; height:28px; }

/* === Dark theme extras === */

/* Dropdowns */
.dropdown-menu{
  background-color: var(--surface-2)!important;
  border:1px solid var(--border)!important;
  border-radius: var(--radius-sm)!important;
  box-shadow: var(--shadow)!important;
}
.dropdown-item{
  color: var(--text)!important;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active{
  color:#fff!important;
  background: rgba(36,153,250,.18)!important;
}

/* Nav tabs */
.nav-tabs{
  border-bottom:1px solid var(--border)!important;
}
.nav-tabs .nav-link{
  color: var(--muted)!important;
  border:1px solid transparent!important;
  border-top-left-radius: var(--radius-sm)!important;
  border-top-right-radius: var(--radius-sm)!important;
  background: transparent!important;
}
.nav-tabs .nav-link:hover{
  color:#fff!important;
  background: rgba(255,255,255,.05)!important;
}
.nav-tabs .nav-link.active{
  color:#fff!important;
  background: rgba(36,153,250,.12)!important;
  border-color: var(--border) var(--border) transparent var(--border)!important;
}

/* Modal / Drawer / Offcanvas */
.modal-content,
.offcanvas,
.dropdown-menu,
.list-group{
  background-color: var(--surface)!important;
  color: var(--text)!important;
  border:1px solid var(--border)!important;
}

/* Buttons & close icons inside dark surfaces */
.btn-close{
  filter: invert(1) grayscale(100%) brightness(140%);
}

/* Form labels, help texts */
label,
.form-label,
.form-text,
small{
  color: var(--muted)!important;
}
.form-check-input{
  background-color: var(--field-bg)!important;
  border-color: var(--field-bd)!important;
}
.form-check-input:checked{
  background-color: var(--primary)!important;
  border-color: var(--primary)!important;
}

/* Login card texts (تا متن‌ها روی تم تیره مشخص باشند) */
.login-card .form-label,
.login-card .form-control,
.login-card .card-body .text-muted{
  color: var(--text)!important;
}
.login-card input::placeholder{
  color: var(--field-ph)!important;
}

/* Select dropdown lists (options) */
select,
.form-select {
  background-color: var(--field-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--field-bd) !important;
  border-radius: 10px;
}

select:focus,
.form-select:focus {
  background-color: var(--field-bg) !important;
  color: var(--text) !important;
  border-color: var(--field-bd-focus) !important;
  box-shadow: 0 0 0 .2rem rgba(36,153,250,.15) !important;
}

select option,
.form-select option,
select optgroup {
  background-color: var(--surface-2);
  color: var(--text);
}

select option:checked,
.form-select option:checked {
  background-color: rgba(36,153,250,.25);
  color: #fff;
}