/* تم روشن گوهرشاد: آبی سلطنتی و سبز زمردی. بعد از main.css بارگذاری می‌شود. */
:root {
  color-scheme: light;
  --bg: #f3f6fb;
  --side: #112a6b;
  --surface: #ffffff;
  --surface-2: #edf1f9;
  --line: #dfe5f0;
  --line-strong: #c6cfe2;
  --fg: #16203a;
  --muted: #5b6985;
  --accent: #1f4fbf;
  --accent-hi: #3a6fe0;
  --accent-dark: #173a99;
  --accent-soft: rgba(31, 79, 191, .10);
  --on-accent: #ffffff;
  --ok: #0f9d6b;
  --ok-soft: rgba(15, 157, 107, .12);
  --danger: #c93a3a;
  --danger-soft: rgba(201, 58, 58, .10);
  --radius: 16px;
  --radius-sm: 10px;
}

/* ===== سایدبار و کنترل‌ها ===== */
.sidebar { background: var(--side); border-color: transparent; }
.brand, .brand:hover { color: #fff; }
.brand small, .nav-label { color: rgba(255, 255, 255, .62); }
.side-nav a { color: rgba(255, 255, 255, .84); }
.side-nav a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.side-nav a.is-active { background: rgba(255, 255, 255, .15); color: #fff; box-shadow: inset -3px 0 0 #3ddc9b; }
.side-user { border-top-color: rgba(255, 255, 255, .16); }
.side-user > a { color: #fff; }
.icon-btn { color: rgba(255, 255, 255, .72); }
.icon-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }

input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(31, 79, 191, .25);
  border-color: var(--accent);
}
.messages li.error { color: #9b2222; border-color: rgba(201, 58, 58, .3); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #b02f2f; }
tbody tr:hover { background: rgba(31, 79, 191, .05); }
.btn-sm-danger { color: var(--danger); border-color: rgba(201, 58, 58, .45); }
.btn-sm-danger:hover { background: var(--danger-soft); }

/* ===== سایدبار: منو اسکرول‌پذیر، کادر کاربر ثابت ===== */
@media (min-width: 861px) {
  .sidebar { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
  .side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; gap: 0; }
  .side-nav a { padding-top: 7px; padding-bottom: 7px; }
  .nav-label { margin-top: 12px; margin-bottom: 4px; }
  .side-user { position: static; flex: none; margin-top: 8px; padding-bottom: 10px; background: transparent; }
}
@media (min-width: 861px) and (max-height: 760px) {
  .side-nav a { padding-top: 4px; padding-bottom: 4px; font-size: 14px; }
}

/* ===== کارت‌ها و جدول‌ها ===== */
.card, .tile, .stat, .status-hero, .auth-card {
  border: 1px solid #d3dcee;
  box-shadow: 0 1px 2px rgba(17, 42, 107, .05), 0 10px 28px rgba(17, 42, 107, .08);
}
.stat { border-top: 3px solid var(--accent); }
.tile { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 2px 4px rgba(17, 42, 107, .06), 0 16px 34px rgba(31, 79, 191, .16);
}
.main h1 { color: var(--accent-dark); font-weight: 800; font-size: 24px; margin-bottom: 10px; }
thead th { background: var(--surface-2); color: var(--muted); font-weight: 700; }
tbody tr { border-bottom: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  .tile:hover { transform: none; }
}

/* ===== فشرده‌سازی کلی ===== */
body { font-size: 15px; line-height: 1.7; }
.card { padding: 14px 18px; margin-top: 12px; }
.stat { padding: 14px 18px; }
input, select, textarea { padding-top: 8px; padding-bottom: 8px; }
label { margin-top: 8px; }
th, td { padding-top: 8px; padding-bottom: 8px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.filter-row input { width: auto; flex: 1 1 200px; margin: 0; }

/* ===== صفحه ورود: آبی و زمردی ===== */
.login { background: #061233; }
.login-bg svg #sw1 stop:nth-child(1) { stop-color: #1f4fbf; }
.login-bg svg #sw1 stop:nth-child(2) { stop-color: #2f6bff; }
.login-bg svg #sw1 stop:nth-child(3) { stop-color: #6aa8ff; }
.login-bg svg #sw2 stop:nth-child(1) { stop-color: #3ddc9b; }
.login-bg svg #sw2 stop:nth-child(2) { stop-color: #0f9d6b; }
.login-bg svg path[fill="#1b1d22"] { fill: #0b1f55; }
.login-bg .horizon {
  background: linear-gradient(90deg, transparent, #3ddc9b, transparent);
  box-shadow: 0 0 44px 8px rgba(15, 157, 107, .40);
}
.login-bg .floor { background: linear-gradient(to bottom, rgba(31, 79, 191, .22), transparent 70%); }
.login-bg .dots {
  background: #9fd8ff;
  box-shadow: 40px 190px 0 #9fd8ff, 210px 60px 0 #3ddc9b, 330px 330px 0 #9fd8ff,
    120px 420px 0 #3ddc9b, 470px 120px 0 #9fd8ff, 540px 460px 0 #3ddc9b, 60px 330px 0 #9fd8ff;
}
.login-card {
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 24px 70px rgba(2, 10, 45, .55);
}
.login-card h1 { color: var(--accent-dark); }
.login-card label { color: var(--fg); font-weight: 700; }
.login-card input { color: var(--fg); }
.login-card input::placeholder { color: var(--muted); }
.field input { background: #f3f6fb; border-color: var(--line-strong); }
.login-card button { box-shadow: 0 8px 20px rgba(31, 79, 191, .35); }
.ring {
  border: 2px solid rgba(61, 220, 155, .45);
  box-shadow: 0 0 70px rgba(61, 220, 155, .20), inset 0 0 90px rgba(47, 107, 255, .14);
}
.ring::after {
  background: conic-gradient(from 0deg, transparent 0 72%, rgba(120, 235, 190, .95) 88%, transparent 100%);
}
.logo { filter: drop-shadow(0 0 26px rgba(61, 220, 155, .30)); }
