/* SSH PANEL — Unified Theme
   Dark is the default. Light mode is activated with html.light-mode.
*/
:root {
  --bg: #070b14;
  --surface: #0b0f19;
  --surface-2: #0f172a;
  --surface-3: #020617;
  --border: rgba(51,65,85,.55);
  --text: #e2e8f0;
  --muted: #94a3b8;
  --primary: #2563eb;
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #22d3ee;
  --radius: 16px;
}

html.light-mode {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #fbfcfe;
  --surface-3: #f8fafc;
  --border: #e6eaf0;
  --text: #172033;
  --muted: #64748b;
  --primary: #2563eb;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;
  --info: #0891b2;
}

html, body { min-height: 100%; }
body {
  font-family: 'Vazirmatn', sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background-color .25s ease, color .25s ease;
}

/* ---------- exact dark Tailwind surfaces used by the templates ---------- */
html.light-mode .bg-\[\#05070c\],
html.light-mode .bg-\[\#070b14\],
html.light-mode .bg-\[\#0b0f19\],
html.light-mode .bg-\[\#0d1527\],
html.light-mode .bg-slate-950,
html.light-mode .bg-slate-950\/40,
html.light-mode .bg-slate-950\/95,
html.light-mode .bg-slate-950\/80,
html.light-mode .bg-slate-950\/60,
html.light-mode .bg-slate-950\/50,
html.light-mode .bg-slate-900,
html.light-mode .bg-slate-900\/10,
html.light-mode .bg-slate-900\/60,
html.light-mode .bg-slate-900\/95,
html.light-mode .bg-slate-900\/80,
html.light-mode .bg-slate-900\/70,
html.light-mode .bg-slate-900\/50,
html.light-mode .bg-slate-900\/40,
html.light-mode .bg-slate-900\/30,
html.light-mode .bg-slate-800,
html.light-mode .bg-slate-800\/20,
html.light-mode .bg-slate-800\/80,
html.light-mode .bg-slate-800\/60,
html.light-mode .bg-slate-800\/50,
html.light-mode .bg-slate-800\/40 {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html.light-mode .bg-\[\#05070c\],
html.light-mode .bg-slate-950\/80,
html.light-mode .bg-slate-950\/60,
html.light-mode .bg-slate-950\/50 {
  background-color: var(--surface-3) !important;
}

html.light-mode .bg-slate-900\/40,
html.light-mode .bg-slate-900\/30,
html.light-mode .bg-slate-800\/50,
html.light-mode .bg-slate-800\/40 {
  background-color: var(--surface-2) !important;
}

/* modal overlays remain dark so the page behind them is dimmed */
html.light-mode #modal,
html.light-mode #confirmModal,
html.light-mode #userConfirmModal {
  background-color: rgba(15, 23, 42, .42) !important;
}

html.light-mode .shadow-xl,
html.light-mode .shadow-2xl,
html.light-mode [class*="shadow-[0_0_20px"],
html.light-mode [class*="shadow-[0_0_25px"],
html.light-mode [class*="shadow-[0_0_50px"] {
  box-shadow: 0 8px 28px rgba(15,23,42,.055) !important;
}

/* cards, panels, tables */
html.light-mode .panel-card,
html.light-mode .glass,
html.light-mode aside,
html.light-mode header,
html.light-mode .user-card,
html.light-mode .stats-card,
html.light-mode .resource-card,
html.light-mode .table-card {
  background: #fff !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: 0 8px 28px rgba(15,23,42,.045) !important;
}

html.light-mode table thead,
html.light-mode .table-head {
  background: #f8fafc !important;
  color: #64748b !important;
}
html.light-mode table tbody tr { border-color: #edf0f4 !important; }
html.light-mode table tbody tr:hover { background: #f8fafc !important; }

html.light-mode [class*="hover:bg-slate-800"]:hover,
html.light-mode [class*="hover:bg-slate-900"]:hover,
html.light-mode [class*="hover:bg-slate-700"]:hover {
  background-color: #f1f5f9 !important;
}
html.light-mode [class*="hover:text-white"]:hover { color: #172033 !important; }

/* ---------- text ---------- */
html.light-mode .text-white { color: #172033 !important; }
html.light-mode .text-slate-200 { color: #334155 !important; }
html.light-mode .text-slate-300 { color: #475569 !important; }
html.light-mode .text-slate-400 { color: #64748b !important; }
html.light-mode .text-slate-500 { color: #64748b !important; }
html.light-mode .text-slate-600 { color: #94a3b8 !important; }
html.light-mode .text-slate-700 { color: #64748b !important; }

/* Keep white text on colored controls. */
html.light-mode button.bg-blue-600,
html.light-mode button[class*="bg-gradient"],
html.light-mode a[class*="bg-gradient"],
html.light-mode .bg-green-600,
html.light-mode .bg-red-600,
html.light-mode .bg-blue-600,
html.light-mode .bg-indigo-600,
html.light-mode .bg-emerald-600,
html.light-mode .bg-orange-600,
html.light-mode .bg-amber-600,
html.light-mode .bg-gradient-to-l,
html.light-mode .bg-gradient-to-r { color: #fff !important; }
html.light-mode .bg-gradient-to-l *,
html.light-mode .bg-gradient-to-r * { color: #fff !important; }

/* ---------- borders ---------- */
html.light-mode .border-slate-900,
html.light-mode .border-slate-900\/60,
html.light-mode .border-slate-800,
html.light-mode .border-slate-800\/90,
html.light-mode .border-slate-800\/80,
html.light-mode .border-slate-800\/70,
html.light-mode .border-slate-800\/60,
html.light-mode .border-slate-700,
html.light-mode .border-slate-700\/50 {
  border-color: var(--border) !important;
}

/* ---------- sidebar ---------- */
html.light-mode #sidebar {
  /* رنگ متمایز از پس‌زمینه صفحه و کارت‌ها تا سایدبار به‌وضوح از محتوا جدا دیده شود */
  background: #eef2f8 !important;
  border-color: #dbe3ee !important;
  box-shadow: -8px 0 30px rgba(15,23,42,.06) !important;
}
html.light-mode header {
  background: #eef2f8 !important;
  border-color: #dbe3ee !important;
}
html.light-mode #sidebar .nav-link:hover {
  background: #f8fafc !important;
  color: #2563eb !important;
}
html.light-mode #sidebar .nav-link.bg-blue-600\/10 {
  background: #eff6ff !important;
  color: #2563eb !important;
  border-color: #dbeafe !important;
}
html.light-mode #sidebar .sub-link:hover {
  background: #f8fafc !important;
}
html.light-mode #settings-menu-container > div.absolute {
  background: #fff !important;
  border-color: #e6eaf0 !important;
  box-shadow: 0 18px 40px rgba(15,23,42,.10) !important;
}

/* ---------- controls ---------- */
html.light-mode input,
html.light-mode select,
html.light-mode textarea,
html.light-mode .input-field {
  background: #f8fafc !important;
  color: #172033 !important;
  border-color: #dfe5ec !important;
}
html.light-mode input:focus,
html.light-mode select:focus,
html.light-mode textarea:focus,
html.light-mode .input-field:focus {
  background: #fff !important;
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.10) !important;
}
html.light-mode input::placeholder,
html.light-mode textarea::placeholder { color: #94a3b8 !important; }

/* ---------- modal / overlays ---------- */
html.light-mode #modal,
html.light-mode [id$="Modal"],
html.light-mode .modal-overlay {
  /* overlay itself stays dark/translucent */
}
html.light-mode #modal form,
html.light-mode #modalBox,
html.light-mode #userModalBox {
  background: #fff !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: 0 24px 70px rgba(15,23,42,.18) !important;
}
html.light-mode #modalMessage,
html.light-mode #userModalBox p { color: #475569 !important; }

/* ---------- badges / status ---------- */
html.light-mode .bg-green-500\/10 { background: #ecfdf3 !important; }
html.light-mode .bg-red-500\/10 { background: #fef2f2 !important; }
html.light-mode .bg-orange-500\/10 { background: #fff7ed !important; }
html.light-mode .bg-purple-500\/10 { background: #faf5ff !important; }
html.light-mode .bg-blue-500\/10 { background: #eff6ff !important; }

/* ---------- login ---------- */
html.light-mode.login-page,
html.light-mode body.login-page { background: #f5f7fb !important; }
html.light-mode .login-card {
  background: #fff !important;
  border-color: #e6eaf0 !important;
  box-shadow: 0 20px 60px rgba(15,23,42,.08) !important;
}

/* ---------- CSS-only helper classes used by cleaned templates ---------- */
.page-header { align-items: center; }
.add-user-btn { width: auto; }
.resource-bar { width: 0; }

/* ---------- mobile ---------- */
@media (max-width: 1023px) {
  .add-user-btn { width: 100%; }
  html.light-mode #sidebar-overlay { background: rgba(15,23,42,.28) !important; }
}

/* =========================================================
   رفع باگ: هدر و سایدبار موبایل پس‌زمینه‌ی صریح نداشتند، پس در
   حالت دارک کاملاً شفاف بودند و هنگام باز/بسته شدن، محتوای پشت‌شان
   (هدر + منوی قبلی) به‌صورت شیشه‌ای/چندلایه روی هم دیده می‌شد.
   ========================================================= */
header {
  background: var(--surface);
  position: relative;
}
#sidebar {
  /* رفع باگ: فقط پس‌زمینه ست می‌شود؛ position اینجا تنظیم نمی‌شود چون سلکتور
     آی‌دی (#sidebar) اولویت بالاتری از کلاس fixed تیلویند دارد و اگر position
     را اینجا بدهیم، حالت fixed سایدبار override و کل چیدمان صفحه خراب می‌شود. */
  background: var(--surface);
  will-change: transform;
  backface-visibility: hidden;
}

/* زیرمنوی موبایل «تنظیمات سیستم» فقط باید در موبایل و با کلیک دیده شود؛
   در دسکتاپ همیشه باید مخفی بماند تا با منوی هاوری قاطی نشود. */
#settings-chevron.rotate-90 { transform: rotate(-90deg); }
@media (min-width: 1024px) {
  .mobile-sub-menu { display: none !important; }
}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #64748b; border-radius: 10px; }
html.light-mode ::-webkit-scrollbar-thumb { background: #cbd5e1; }

/* ---------- datepicker / SweetAlert ---------- */
html.light-mode .datepicker-plot-area,
html.light-mode .datepicker-container .datepicker-plot-area {
  background: #fff !important;
  color: #172033 !important;
  border-color: #e6eaf0 !important;
  box-shadow: 0 18px 50px rgba(15,23,42,.12) !important;
}
html.light-mode .swal2-popup {
  background: #fff !important;
  color: #172033 !important;
  border: 1px solid #e6eaf0 !important;
}
html.light-mode .swal2-title { color: #172033 !important; }
html.light-mode .swal2-html-container { color: #64748b !important; }

/* Dynamic progress bars are initialized by base.html JS from data-width. */
.resource-bar[data-width] { width: 0; }


/* =========================================================
   SSH PANEL V2 DESIGN SYSTEM
   ========================================================= */
:root {
  --app-bg:#070b14; --surface:#0f172a; --surface-2:#111c31; --input:#020617;
  --text:#e2e8f0; --muted:#94a3b8; --border:#233047; --primary:#3b82f6;
  --success:#22c55e; --danger:#ef4444; --warning:#f59e0b;
  --shadow:0 14px 40px rgba(0,0,0,.20);
}
html.light-mode {
  --app-bg:#f5f7fb; --surface:#fff; --surface-2:#f8fafc; --input:#f8fafc;
  --text:#172033; --muted:#64748b; --border:#e6eaf0; --primary:#2563eb;
  --success:#16a34a; --danger:#dc2626; --warning:#d97706;
  --shadow:0 10px 30px rgba(15,23,42,.055);
}
body { background:var(--app-bg); color:var(--text); }
.panel-card,.glass { background:var(--surface)!important; border-color:var(--border)!important; box-shadow:var(--shadow); }
html.light-mode #sidebar, html.light-mode header { background:#eef2f8!important; border-color:#dbe3ee!important; color:var(--text)!important; }
html.light-mode .bg-\[\#0b0f19\],html.light-mode .bg-\[\#05070c\],html.light-mode .bg-\[\#0d1527\],html.light-mode .bg-slate-950\/60,html.light-mode .bg-slate-950\/40,html.light-mode .bg-slate-900\/80,html.light-mode .bg-slate-900\/60,html.light-mode .bg-slate-900\/40 { background:var(--surface)!important; }
html.light-mode .text-white { color:#172033!important; }
html.light-mode .text-slate-200 { color:#334155!important; }
html.light-mode .text-slate-300 { color:#475569!important; }
html.light-mode .text-slate-400 { color:#64748b!important; }
html.light-mode .text-slate-500 { color:#94a3b8!important; }
html.light-mode .border-slate-900,html.light-mode .border-slate-900\/60,html.light-mode .border-slate-800,html.light-mode .border-slate-800\/70,html.light-mode .border-slate-800\/60 { border-color:var(--border)!important; }
html.light-mode table thead { background:#fbfcfe!important; }
html.light-mode tbody tr:hover { background:#f8fafc!important; }
html.light-mode input,html.light-mode select,html.light-mode textarea { background:#f8fafc!important; color:#172033!important; border-color:#e2e8f0!important; }
html.light-mode input:focus,html.light-mode select:focus,html.light-mode textarea:focus { background:#fff!important; border-color:#93c5fd!important; box-shadow:0 0 0 3px rgba(37,99,235,.10)!important; }
html.light-mode .shadow-2xl,html.light-mode .shadow-xl { box-shadow:var(--shadow)!important; }
html.light-mode .hover\:bg-slate-800\/20:hover,html.light-mode .hover\:bg-slate-900\/10:hover { background:#f8fafc!important; }
.nav-link { border:1px solid transparent; }
html.light-mode .nav-link:hover { background:#f8fafc!important; color:#2563eb!important; border-color:#edf2f7!important; }
html.light-mode .nav-link.bg-blue-600\/10 { background:#eff6ff!important; color:#2563eb!important; border-color:#dbeafe!important; }
.resource-bar { min-width:0; }
html.light-mode .resource-bar { box-shadow:0 0 8px rgba(37,99,235,.12)!important; }
.swal2-popup { border-radius:18px!important; }
html.light-mode .swal2-popup { background:#fff!important; color:#172033!important; border:1px solid #e6eaf0!important; box-shadow:0 20px 50px rgba(15,23,42,.12)!important; }
html.light-mode .swal2-title { color:#172033!important; }
html.light-mode .swal2-html-container { color:#64748b!important; }
@media (max-width:1023px) { html.light-mode #sidebar-overlay { background:rgba(15,23,42,.25)!important; } }

/* =========================================================
   رفع باگ: رنگ نام کاربر در صفحه‌ی «کاربران آنلاین» تا قبل از هاور
   نامشخص/کم‌رنگ دیده می‌شد چون کلاس‌های داینامیک تیلویند برای محتوایی
   که با جاوااسکریپت (innerHTML) درج می‌شود همیشه به‌درستی اعمال نمی‌شدند.
   این کلاس اختصاصی، مستقل از JIT تیلویند، رنگ ثابت و واضحی تضمین می‌کند.
   ========================================================= */
.online-username {
  color: var(--text);
}
tr:hover .online-username,
.online-username:hover {
  color: #60a5fa;
}
html.light-mode .online-username { color: #172033; }
html.light-mode tr:hover .online-username { color: #2563eb; }

/* =========================================================
   رفع باگ: حباب اعتبارسنجی پیش‌فرض مرورگر (Please fill out this field)
   همیشه پس‌زمینه‌ی سفید دارد و در حالت دارک‌مود بسیار توی ذوق می‌زند.
   فرم‌ها با جاوااسکریپت (base.html) به‌صورت سراسری novalidate می‌شوند و
   به‌جایش یک اعلان هم‌رنگ با تم پنل (SweetAlert) نمایش داده می‌شود.
   قوانین زیر هم به‌عنوان محافظ اضافه، در مرورگرهایی که پشتیبانی می‌کنند
   ظاهر باقیمانده‌ی اعتبارسنجی بومی را با تم پنل هماهنگ می‌کنند. */
::-webkit-validation-bubble,
::-webkit-validation-bubble-message,
::-webkit-validation-bubble-arrow,
::-webkit-validation-bubble-arrow-clipper {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* =========================================================
   رفع باگ: ساختار سایدبار قبلاً به‌خاطر ترکیب تناقض‌دار کلاس‌های
   flex-1 و h-full روی nav، فضای زیر دکمه‌ی خروج را درست محاسبه
   نمی‌کرد و بخش «نسخه» گاهی به پایین واقعی سایدبار نمی‌چسبید.
   ========================================================= */
#sidebar { display: flex; flex-direction: column; }
#sidebar nav { flex: 1 1 auto; min-height: 0; }
#sidebar > div:last-child { flex-shrink: 0; }

/* =========================================================
   رفع باگ: پاپ‌آپ‌های تاییدیه (حذف کاربر، تغییر پورت و ...) گاهی
   هم‌سطح با سایدبار موبایل (z-50) بودند. z-index بالاتر تضمین می‌کند
   مودال‌ها همیشه بالای سایدبار و همه‌ی محتوای دیگر نمایش داده شوند.
   ========================================================= */
#modal,
#confirmModal,
#userConfirmModal,
.swal2-container {
  z-index: 100 !important;
}
#sidebar {
  z-index: 50 !important;
}
#sidebar-overlay {
  z-index: 40 !important;
}

/* =========================================================
   صفحه‌ی ورود (Login) — قبلاً همه‌ی این استایل‌ها داخل خودِ
   templates/login.html به‌صورت <style> اینلاین بود؛ اینجا منتقل شد
   تا نگهداری راحت‌تر باشد. همه‌چیز زیر ".login-page" اسکوپ شده تا
   روی بقیه‌ی صفحات پنل هیچ اثری نگذارد.
   ========================================================= */

.login-page { font-family: 'Vazirmatn', sans-serif; }

/* پس‌زمینه‌ی متحرک ملایم */
.login-page .bg-aurora {
  position: fixed;
  inset: 0;
  background: #05070c;
  overflow: hidden;
  z-index: 0;
}
.login-page .bg-aurora::before,
.login-page .bg-aurora::after {
  content: "";
  position: absolute;
  width: 45vw;
  height: 45vw;
  border-radius: 9999px;
  filter: blur(110px);
  opacity: 0.22;
  animation: login-float-blob 16s ease-in-out infinite;
}
.login-page .bg-aurora::before {
  top: -10%;
  right: -10%;
  background: radial-gradient(circle, #3b82f6, transparent 70%);
}
.login-page .bg-aurora::after {
  bottom: -15%;
  left: -10%;
  background: radial-gradient(circle, #6366f1, transparent 70%);
  animation-delay: -8s;
}
@keyframes login-float-blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4%, 5%) scale(1.08); }
}

.login-page .bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(148,163,184,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
}

/* 🟢 padding کناری روی بدنه، تا کارت روی موبایل به لبه‌های صفحه نچسبد */
.login-page {
  padding: 16px;
  box-sizing: border-box;
}

.login-page .login-card {
  animation: login-card-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes login-card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* لوگو — با ID اختصاصی و !important تا هیچ قانون دیگری (حتی در همین فایل)
   نتواند رویش اثر بگذارد؛ اندازه‌ی پایه در دسکتاپ ۹۶px */
#loginLogoBox {
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  min-height: 96px !important;
  max-width: 96px !important;
  max-height: 96px !important;
  display: block !important;
  margin: 0 auto 18px auto !important;
  position: relative !important;
  filter: drop-shadow(0 0 20px rgba(56,189,248,0.5));
}
#loginLogoBox img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.login-page .btn-submit:not(:disabled):active { transform: scale(0.98); }

@keyframes login-spin { to { transform: rotate(360deg); } }
.login-page .spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 9999px;
  animation: login-spin 0.7s linear infinite;
}

/* 🟢 حالت موبایل: کارت جمع‌وجورتر، لوگو کوچک‌تر، padding داخلی کمتر
   تا حس «کل صفحه رو گرفته» از بین برود */
@media (max-width: 480px) {
  .login-page .login-card {
    padding: 22px !important;
    border-radius: 20px !important;
  }
  #loginLogoBox {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    margin-bottom: 12px !important;
  }
  .login-page h1 {
    font-size: 1rem !important;
  }
  .login-page form { gap: 14px !important; }
}

/* =========================================================
   لوگوی سایدبار و هدر موبایل — همان لوگوی صفحه‌ی ورود، با همان
   روش دفاعی (ID/کلاس اختصاصی + !important) تا اندازه‌اش هیچ‌وقت
   تحت‌تاثیر قوانین دیگر این فایل قرار نگیرد.
   ========================================================= */
#sidebarLogoBox {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  display: block !important;
  margin: 0 auto 10px auto !important;
  filter: drop-shadow(0 0 14px rgba(56,189,248,0.4));
}
#sidebarLogoBox img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.mobile-header-logo {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: contain !important;
  display: inline-block !important;
}