/* ─── TechRad Design Tokens v2 — Glassmorphism ──────────────────────── */
:root {
  /* Primary palette */
  --tr-primary:        #0B1D3A;
  --tr-primary-mid:    #213A6B;
  --tr-accent:         #5B8FF9;
  --tr-accent-light:   #7DAAFF;
  --tr-accent-dark:    #3B6FD9;

  /* Surface */
  --tr-glass:          rgba(255,255,255,.88);
  --tr-glass-border:   rgba(213,240,254,.9);
  --tr-glass-hover:    rgba(255,255,255,.96);
  --tr-bg-page:        linear-gradient(160deg,#EEF6FD 0%,#D5F0FE 45%,#EEF6FD 100%);

  /* Semantic */
  --tr-success:   #16a34a;
  --tr-warning:   #d97706;
  --tr-danger:    #dc2626;
  --tr-info:      #0ea5e9;
  --tr-text-muted:#4A6FA5;
  --tr-border:    rgba(91,143,249,.15);

  /* Shadows */
  --tr-shadow-sm:  0 2px 12px rgba(11,29,58,.05);
  --tr-shadow-md:  0 4px 24px rgba(11,29,58,.08);
  --tr-shadow-lg:  0 8px 36px rgba(11,29,58,.12);
  --tr-shadow-xl:  0 16px 56px rgba(11,29,58,.16);

  /* Radius */
  --tr-radius-sm:  10px;
  --tr-radius-md:  16px;
  --tr-radius-lg:  24px;
  --tr-radius-xl:  32px;

  /* Spacing */
  --tr-section-py: 5rem;
}

/* ─── Base Reset ───────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: "Abar", "Vazirmatn", "Tahoma", "Arial", sans-serif;
  color: var(--tr-primary);
  background: var(--tr-bg-page);
  direction: rtl;
  text-align: right;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(91,143,249,.3); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:rgba(91,143,249,.55); }

/* ─── Glassmorphism card ─────────────────────────────────── */
.dashboard-card-glass {
  background:rgba(255,255,255,.88);
  border:1.5px solid rgba(213,240,254,.9);
  border-radius:var(--tr-radius-lg);
  backdrop-filter:blur(12px);
  box-shadow:var(--tr-shadow-md);
}

/* ─── Typography ─────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-weight:800; color:var(--tr-primary); line-height:1.4; }
a { color:var(--tr-accent); }
a:hover { color:var(--tr-accent-dark); }

/* ─── Buttons ────────────────────────────────────────────── */
.btn-primary {
  background:var(--tr-primary); border-color:var(--tr-primary); color:#fff; font-weight:700;
  transition:all .2s;
}
.btn-primary:hover { background:#213A6B; border-color:#213A6B; color:#fff; }
.btn-outline-primary { border-color:var(--tr-accent); color:var(--tr-accent); font-weight:700; }
.btn-outline-primary:hover { background:var(--tr-accent); border-color:var(--tr-accent); color:#fff; }

/* ─── Form controls ──────────────────────────────────────── */
.form-control, .form-select {
  border:1.5px solid rgba(91,143,249,.2);
  border-radius:var(--tr-radius-sm);
  color:var(--tr-primary);
  background:#fff;
  transition:.2s;
}
.form-control:focus, .form-select:focus {
  border-color:var(--tr-accent);
  box-shadow:0 0 0 3px rgba(91,143,249,.12);
}
.form-label { font-weight:700; font-size:.88rem; color:var(--tr-primary); }

/* ─── Dashboard layout ───────────────────────────────────── */
.dashboard-wrapper {
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100vh;
  background:linear-gradient(160deg,#EEF6FD 0%,#D5F0FE 45%,#EEF6FD 100%);
}
.dashboard-sidebar {
  background:rgba(255,255,255,.92);
  border-left:1.5px solid rgba(213,240,254,.9);
  backdrop-filter:blur(16px);
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  padding:1.5rem 1rem;
}
.dashboard-main { padding:2rem; overflow-x:hidden; }
.sidebar-link {
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem 1rem; border-radius:var(--tr-radius-sm);
  color:#374151; text-decoration:none; font-weight:600; font-size:.88rem;
  transition:.2s; margin-bottom:.25rem; white-space:nowrap;
}
.sidebar-link:hover { background:rgba(91,143,249,.08); color:var(--tr-accent); }
.sidebar-link.active { background:rgba(91,143,249,.12); color:var(--tr-accent); font-weight:800; }
.sidebar-link i { font-size:1rem; flex-shrink:0; }

/* Stat cards */
.stat-card-dash {
  background:var(--tr-glass);
  border:1.5px solid var(--tr-glass-border);
  border-radius:var(--tr-radius-md);
  padding:1.5rem;
  backdrop-filter:blur(12px);
  transition:.25s;
}
.stat-card-dash:hover { transform:translateY(-3px); box-shadow:var(--tr-shadow-lg); }
.stat-num-dash { font-size:2rem; font-weight:900; color:var(--tr-primary); line-height:1; }

/* Table */
.tr-table { width:100%; border-collapse:separate; border-spacing:0; }
.tr-table th {
  background:rgba(91,143,249,.06); padding:.75rem 1rem;
  font-size:.8rem; font-weight:800; color:var(--tr-primary);
  border-bottom:1.5px solid rgba(91,143,249,.1);
}
.tr-table td {
  padding:.85rem 1rem; font-size:.85rem; color:#374151;
  border-bottom:1px solid rgba(91,143,249,.07); vertical-align:middle;
}
.tr-table tr:last-child td { border-bottom:none; }
.tr-table tr:hover td { background:rgba(91,143,249,.02); }

/* Badges */
.badge-glass {
  background:rgba(91,143,249,.1);
  color:var(--tr-accent);
  border-radius:50px;
  padding:3px 10px;
  font-size:.72rem;
  font-weight:700;
}

/* ─── Animations ─────────────────────────────────────────── */
.animate-on-scroll { opacity:0; transform:translateY(24px); transition:all .55s cubic-bezier(.4,0,.2,1); }
.animate-on-scroll.visible { opacity:1; transform:translateY(0); }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.fade-in-up { animation:fadeInUp .5s ease both; }

/* ─── Responsive ─────────────────────────────────────────── */
@media(max-width:992px) {
  .dashboard-wrapper { grid-template-columns:1fr; }
  .dashboard-sidebar { position:fixed; left:0; top:0; bottom:0; z-index:999; transform:translateX(100%); transition:.3s; }
  .dashboard-sidebar.open { transform:translateX(0); }
  .dashboard-main { padding:1rem; }
}
@media(max-width:576px) {
  :root { --tr-section-py:3rem; }
}