@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap');

/* ── CSS Custom Properties (Light mode defaults) ─────────────────────────── */
:root {
  --bg-base:        #f1f5f9;
  --bg-card:        #ffffff;
  --bg-header:      rgba(255,255,255,0.92);
  --bg-input:       #ffffff;
  --bg-input-hover: #f8fafc;
  --bg-table-head:  #f8fafc;
  --bg-table-row:   #ffffff;
  --bg-table-alt:   #f8fafc;
  --bg-table-hover: #f0f4ff;
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --text-inverse:   #f8fafc;
  --border-color:   #e2e8f0;
  --border-strong:  #cbd5e1;
  --accent:         #4f46e5;
  --accent-hover:   #4338ca;
  --accent-light:   #eef2ff;
  --sidebar-bg:     #0f172a;
  --sidebar-text:   #cbd5e1;
  --sidebar-active: rgba(255,255,255,0.15);
  --sidebar-hover:  rgba(255,255,255,0.07);
  --sidebar-border: rgba(255,255,255,0.08);
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:      0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --radius-card:    12px;
  --transition:     0.18s ease;
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */
html.dark {
  --bg-base:        #0b0f1a;
  --bg-card:        #131929;
  --bg-header:      rgba(15, 20, 35, 0.96);
  --bg-input:       #1a2236;
  --bg-input-hover: #1f2940;
  --bg-table-head:  #111827;
  --bg-table-row:   #131929;
  --bg-table-alt:   #0f1621;
  --bg-table-hover: #1a2848;
  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted:     #4b5563;
  --text-inverse:   #0f172a;
  --border-color:   #1e2d45;
  --border-strong:  #2d3f5c;
  --accent:         #6366f1;
  --accent-hover:   #818cf8;
  --accent-light:   #1e1b4b;
  --sidebar-bg:     #080d18;
  --sidebar-text:   #94a3b8;
  --sidebar-active: rgba(99, 102, 241, 0.2);
  --sidebar-hover:  rgba(255,255,255,0.05);
  --sidebar-border: rgba(255,255,255,0.05);
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-lg:      0 8px 24px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
* {
  font-family: 'Vazirmatn', ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}

body {
  background: var(--bg-base) !important;
  color: var(--text-primary) !important;
  transition: background var(--transition), color var(--transition);
}

/* ── Tailwind class overrides for dark mode ──────────────────────────────── */
html.dark .bg-slate-50 { background-color: var(--bg-base) !important; }
html.dark .bg-white { background-color: var(--bg-card) !important; }
html.dark .bg-white\/90 { background-color: var(--bg-header) !important; }
html.dark .text-slate-900 { color: var(--text-primary) !important; }
html.dark .text-slate-700 { color: var(--text-secondary) !important; }
html.dark .text-slate-600 { color: var(--text-secondary) !important; }
html.dark .text-slate-500 { color: var(--text-muted) !important; }
html.dark .border-slate-200 { border-color: var(--border-color) !important; }
html.dark .border-b { border-color: var(--border-color) !important; }

/* Cards */
html.dark .bg-white.rounded-xl,
html.dark .bg-white.rounded-lg,
html.dark [class*="rounded"][class*="bg-white"] {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

/* Tables */
html.dark table { background: var(--bg-card); }
html.dark thead { background: var(--bg-table-head) !important; }
html.dark thead th { color: var(--text-secondary) !important; border-color: var(--border-color) !important; }
html.dark tbody tr { background: var(--bg-table-row); border-color: var(--border-color) !important; }
html.dark tbody tr:nth-child(even) { background: var(--bg-table-alt); }
html.dark tbody tr:hover { background: var(--bg-table-hover) !important; }
html.dark tbody td { color: var(--text-primary) !important; border-color: var(--border-color) !important; }
html.dark .divide-slate-100 > * + * { border-color: var(--border-color) !important; }
html.dark .divide-y > * + * { border-color: var(--border-color) !important; }

/* Inputs and selects */
html.dark input, html.dark select, html.dark textarea {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}
html.dark input:focus, html.dark select:focus, html.dark textarea:focus {
  background: var(--bg-input-hover) !important;
  border-color: var(--accent) !important;
  outline-color: var(--accent);
}
html.dark input::placeholder, html.dark textarea::placeholder {
  color: var(--text-muted) !important;
}
html.dark label { color: var(--text-secondary) !important; }

/* Stat / info cards (dashboard) */
html.dark .bg-blue-50 { background-color: rgba(59,130,246,0.12) !important; }
html.dark .bg-amber-50 { background-color: rgba(245,158,11,0.12) !important; }
html.dark .bg-emerald-50 { background-color: rgba(16,185,129,0.12) !important; }
html.dark .bg-rose-50 { background-color: rgba(244,63,94,0.12) !important; }
html.dark .bg-indigo-50 { background-color: rgba(99,102,241,0.12) !important; }
html.dark .bg-purple-50 { background-color: rgba(168,85,247,0.12) !important; }
html.dark .bg-violet-50 { background-color: rgba(139,92,246,0.12) !important; }
html.dark .text-blue-600 { color: #60a5fa !important; }
html.dark .text-amber-600 { color: #fbbf24 !important; }
html.dark .text-emerald-600 { color: #34d399 !important; }
html.dark .text-rose-600 { color: #fb7185 !important; }
html.dark .text-indigo-600 { color: #818cf8 !important; }
html.dark .text-purple-600 { color: #c084fc !important; }
html.dark .text-slate-800 { color: var(--text-primary) !important; }

/* Borders */
html.dark .border { border-color: var(--border-color) !important; }
html.dark .border-slate-100 { border-color: var(--border-color) !important; }
html.dark .border-slate-300 { border-color: var(--border-strong) !important; }

/* Buttons */
html.dark .hover\:bg-slate-50:hover { background-color: var(--bg-input-hover) !important; }
html.dark .hover\:bg-slate-100:hover { background-color: var(--bg-input) !important; }

/* Flash messages */
html.dark .bg-emerald-50 { background-color: rgba(16,185,129,0.12) !important; }
html.dark .border-emerald-200 { border-color: rgba(16,185,129,0.25) !important; }
html.dark .text-emerald-800 { color: #6ee7b7 !important; }
html.dark .bg-red-50 { background-color: rgba(244,63,94,0.12) !important; }
html.dark .border-red-200 { border-color: rgba(244,63,94,0.25) !important; }
html.dark .text-red-800 { color: #fca5a5 !important; }

/* Badges — pending/approved/rejected */
html.dark .badge-pending { background: rgba(251,191,36,0.15); color: #fbbf24; }
html.dark .badge-approved { background: rgba(52,211,153,0.15); color: #34d399; }
html.dark .badge-rejected { background: rgba(251,113,133,0.15); color: #f87171; }

/* Supplement / amber section in dark */
html.dark .bg-amber-50 { background-color: rgba(245,158,11,0.10) !important; }
html.dark .border-amber-200 { border-color: rgba(245,158,11,0.25) !important; }
html.dark .text-amber-800 { color: #fcd34d !important; }
html.dark .text-amber-700 { color: #fbbf24 !important; }
html.dark .bg-amber-100 { background-color: rgba(245,158,11,0.15) !important; }
html.dark .text-amber-900 { color: #fde68a !important; }

/* Links */
html.dark a.text-indigo-600 { color: #818cf8 !important; }
html.dark a.text-indigo-600:hover { color: #a5b4fc !important; }

/* Prose / description text */
html.dark .text-slate-400 { color: #64748b !important; }

/* ── Photo modal ────────────────────────────────────────────────────────────── */
.photo-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 1000;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.photo-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-modal img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 10px;
  cursor: default;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

/* ── Status badges ────────────────────────────────────────────────────────── */
.badge-pending  { background: #fef3c7; color: #92400e; }
.badge-approved { background: #d1fae5; color: #065f46; }
.badge-rejected { background: #fee2e2; color: #991b1b; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar {
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-text);
  transition: background var(--transition);
}

.sidebar-link {
  color: var(--sidebar-text);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sidebar-link:hover {
  background: var(--sidebar-hover);
}

[dir="rtl"] .sidebar-link.active {
  background: var(--sidebar-active);
  border-right: 3px solid var(--accent);
  border-left: none;
}

[dir="ltr"] .sidebar-link.active {
  background: var(--sidebar-active);
  border-left: 3px solid var(--accent);
  border-right: none;
}

[dir="ltr"] .sidebar {
  border-left: none;
  border-right: 1px solid var(--sidebar-border);
}

[dir="rtl"] .sidebar {
  border-right: none;
  border-left: 1px solid var(--sidebar-border);
}

@media (max-width: 767px) {
  [dir="rtl"] #sidebar { right: 0; left: auto; }
  [dir="ltr"] #sidebar  { left: 0;  right: auto; }
}

/* ── Header ───────────────────────────────────────────────────────────────── */
header.sticky {
  background: var(--bg-header) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), border-color var(--transition);
}

/* ── Card / panel styling ─────────────────────────────────────────────────── */
.wky-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), border-color var(--transition);
}

.wky-card:hover {
  box-shadow: var(--shadow-md);
}

/* ── Data tables ──────────────────────────────────────────────────────────── */
.wky-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.wky-table thead th {
  background: var(--bg-table-head);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
}

.wky-table tbody tr {
  transition: background var(--transition);
}

.wky-table tbody tr:hover {
  background: var(--bg-table-hover);
}

.wky-table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.875rem;
}

/* ── Persian numerals ─────────────────────────────────────────────────────── */
.persian-num {
  font-feature-settings: "tnum";
}

/* ── Login page ───────────────────────────────────────────────────────────── */
.alert-error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fecaca;
}

/* ── Language toggle buttons ──────────────────────────────────────────────── */
.lang-btn {
  background: rgba(15, 23, 42, 0.06);
  color: #1e293b;
  border: 1px solid rgba(15, 23, 42, 0.12);
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 6px;
}

html.dark .lang-btn {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  border-color: var(--border-color);
}

.lang-btn:hover,
.lang-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Dark mode toggle button ──────────────────────────────────────────────── */
#darkModeToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

#darkModeToggle:hover {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Stat cards (dashboard) ───────────────────────────────────────────────── */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform 0.15s ease;
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ── Animations ───────────────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeInUp 0.25s ease forwards;
}

/* ── Scrollbar (dark mode) ────────────────────────────────────────────────── */
html.dark ::-webkit-scrollbar        { width: 6px; height: 6px; }
html.dark ::-webkit-scrollbar-track  { background: var(--bg-base); }
html.dark ::-webkit-scrollbar-thumb  { background: var(--border-strong); border-radius: 3px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Focus ring (accessibility) ───────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE — Professional dark security design
   ═══════════════════════════════════════════════════════════════ */
.login-page {
  min-height: 100vh;
  background: #060b14;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-family: 'Vazirmatn', ui-sans-serif, system-ui, sans-serif;
  position: relative;
  overflow: hidden;
}

.login-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 60% at 50% -10%, rgba(79,70,229,0.14) 0%, transparent 65%),
    repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(255,255,255,0.012) 40px, rgba(255,255,255,0.012) 41px),
    repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(255,255,255,0.012) 40px, rgba(255,255,255,0.012) 41px);
}

.login-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}

.login-glow-1 {
  width: 500px; height: 400px;
  top: -150px; left: -100px;
  background: radial-gradient(circle, rgba(79,70,229,0.12) 0%, transparent 70%);
}

.login-glow-2 {
  width: 400px; height: 300px;
  bottom: -100px; right: -80px;
  background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%);
}

.login-lang-bar {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  gap: 0.375rem;
  z-index: 20;
}

[dir="rtl"] .login-lang-bar {
  right: auto;
  left: 1.25rem;
}

.login-wrap {
  width: 100%;
  max-width: 400px;
  position: relative;
  z-index: 1;
}

.login-card {
  background: rgba(10, 16, 30, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 20px;
  padding: 2.5rem 2rem 2rem;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 24px 64px rgba(0,0,0,0.55),
    0 4px 16px rgba(79,70,229,0.12);
}

.login-brand {
  text-align: center;
  margin-bottom: 2rem;
}

.login-shield {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
  box-shadow: 0 8px 32px rgba(79,70,229,0.4), 0 2px 8px rgba(0,0,0,0.3);
  margin-bottom: 1rem;
}

.login-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 0.25rem;
  letter-spacing: -0.02em;
}

.login-subtitle {
  font-size: 0.78rem;
  color: #475569;
  margin: 0;
}

.login-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.82rem;
  margin-bottom: 1.25rem;
  line-height: 1.45;
}

.login-alert svg { flex-shrink: 0; margin-top: 1px; }

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lf-group { display: flex; flex-direction: column; gap: 0.375rem; }

.lf-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: #64748b;
}

.lf-input-wrap { position: relative; }

.lf-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: #334155;
  display: flex;
  pointer-events: none;
}

[dir="rtl"] .lf-icon { left: auto; right: 0.9rem; }

.lf-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(71, 85, 105, 0.4);
  border-radius: 10px;
  padding: 0.8rem 0.875rem 0.8rem 2.7rem;
  color: #e2e8f0;
  font-size: 0.875rem;
  font-family: 'Vazirmatn', sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  outline: none;
  -webkit-appearance: none;
}

[dir="rtl"] .lf-input { padding: 0.8rem 2.7rem 0.8rem 0.875rem; }

.lf-input::placeholder { color: #2d3f5c; }

.lf-input:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(99, 102, 241, 0.3);
}

.lf-input:focus {
  background: rgba(255,255,255,0.06);
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.lf-input-pw { padding-right: 2.8rem; }
[dir="rtl"] .lf-input-pw { padding-right: 2.7rem; padding-left: 2.8rem; }

.lf-pw-eye {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #334155;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: color 0.15s;
}

[dir="rtl"] .lf-pw-eye { right: auto; left: 0.85rem; }

.lf-pw-eye:hover { color: #94a3b8; }

.lf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1rem;
  margin-top: 0.5rem;
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Vazirmatn', sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(79,70,229,0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}

.lf-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(79,70,229,0.45);
}

.lf-btn:active { transform: translateY(0); }

.login-footer {
  text-align: center;
  font-size: 0.68rem;
  color: #1e2d45;
  margin: 1.5rem 0 0;
  line-height: 1.6;
}

/* ── Stat icon blocks (dashboard) ─────────────────────────────── */
.stat-icon-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  font-feature-settings: "tnum";
}