/* ==========================================================
   Web Sharif — Modern Dashboard Design System
   Font: Vazirmatn  •  RTL • Responsive • Glass & Gradient
   ========================================================== */
:root{
  --primary:#0f2040;
  --primary-2:#1e3a6b;
  --primary-3:#234d8a;
  --accent:#0ea5e9;
  --accent-2:#06b6d4;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --bg:#f1f5f9;
  --bg-2:#eef2f7;
  --card:#ffffff;
  --border:#e2e8f0;
  --border-light:#f1f5f9;
  --text:#0f172a;
  --text-muted:#64748b;
  --text-light:#94a3b8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:20px;
  --shadow:0 4px 24px rgba(15,32,64,.07);
  --shadow-lg:0 12px 40px rgba(15,32,64,.12);
  --shadow-card:0 2px 12px rgba(15,32,64,.06);
  --sidebar-w:280px;
  --topbar-h:72px;
}

/* Reset & Base */
*{ scrollbar-width:thin; scrollbar-color: var(--border) transparent; }
html{ scroll-behavior:smooth; }
body{
  min-height:100vh;
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface-soft) 100%);
  color:var(--text);
  font-family: Vazirmatn, Vazirmatn Variable, "Vazirmatn", Tahoma, sans-serif !important;
  font-feature-settings:"ss01";
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.01em;
}
a{ text-decoration:none; }
img{ max-width:100%; }

/* Scrollbar */
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:999px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ================= App Shell ================= */
.app-shell{ display:flex; min-height:100vh; }
.app-sidebar{
  width:var(--sidebar-w);
  min-width:var(--sidebar-w);
  background: linear-gradient(180deg, #0f2040 0%, #0d1a33 60%, #0a1430 100%);
  color:var(--border);
  display:flex;
  flex-direction:column;
  position:fixed;
  inset:0 0 0 auto;
  z-index:1040;
  overflow-y:auto;
  box-shadow: -8px 0 32px rgba(0,0,0,.18);
  border-left:1px solid rgba(255,255,255,.06);
}
.app-main{
  flex:1;
  margin-right:var(--sidebar-w);
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.app-content{
  flex:1;
  padding:28px 28px 16px;
  max-width:1400px;
  width:100%;
  margin:0 auto;
}
.app-footer{
  padding:16px 28px;
  color:var(--text-light);
  font-size:.82rem;
  display:flex;
  gap:12px;
  align-items:center;
  border-top:1px solid var(--border);
  background:rgba(255,255,255,.6);
  backdrop-filter: blur(6px);
}
.footer-dot{ opacity:.4; }

/* Sidebar Brand */
.sidebar-brand{
  display:flex; align-items:center; gap:14px;
  padding:24px 20px 20px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.brand-icon{
  width:44px; height:44px; border-radius:12px;
  background: linear-gradient(135deg, var(--accent) 0%, #2563eb 100%);
  display:grid; place-items:center;
  font-size:18px; color:white;
  box-shadow:0 8px 20px rgba(14,165,233,.35);
  flex-shrink:0;
}
.brand-text strong{ display:block; font-size:1.05rem; font-weight:800; color:white; line-height:1.2; }
.brand-text span{ font-size:.78rem; color:var(--text-light); font-weight:400; }

/* Sidebar Nav */
.sidebar-nav{ padding:18px 14px; flex:1; }
.nav-section-title{
  font-size:.7rem; font-weight:700; letter-spacing:.08em;
  color:#5a6d90; margin:18px 8px 8px;
  text-transform:uppercase;
}
.sidebar-nav .nav-link{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px;
  border-radius:10px;
  color:var(--border-strong);
  font-size:.92rem;
  font-weight:500;
  transition: all .18s ease;
  position:relative;
}
.sidebar-nav .nav-link i{
  width:22px; text-align:center; font-size:15px; opacity:.85;
}
.sidebar-nav .nav-link:hover{
  background: rgba(255,255,255,.07);
  color:white;
  transform:translateX(-2px);
}
.sidebar-nav .nav-link.active{
  background: linear-gradient(135deg, rgba(14,165,233,.18) 0%, rgba(37,99,235,.18) 100%);
  color:white;
  box-shadow: inset 0 0 0 1px rgba(14,165,233,.25);
}
.sidebar-nav .nav-link.active::before{
  content:""; position:absolute; right:-14px; top:50%; transform:translateY(-50%);
  width:3px; height:22px; background:var(--accent); border-radius:999px;
}
.nav-badge{
  margin-right:auto;
  background:#ef4444; color:white;
  font-size:.7rem; font-weight:700;
  padding:2px 7px; border-radius:999px;
  min-width:20px; text-align:center;
}

/* Sidebar Footer */
.sidebar-footer{
  padding:16px;
  border-top:1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.15);
}
.user-mini{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.user-avatar{
   width:38px; height:38px; border-radius:10px;
   background: linear-gradient(135deg, var(--text), var(--text));
   border:1px solid rgba(255,255,255,.1);
   display:grid; place-items:center;
   font-weight:800; color:white; font-size:.95rem;
   overflow:hidden;
}
.user-avatar img{
   width:100%; height:100%; object-fit:cover; object-position:center;
   border-radius:inherit;
}
.user-info strong{ display:block; font-size:.88rem; color:white; line-height:1.2; }
.user-info span{ font-size:.76rem; color:var(--text-light); }
.btn-sidebar-logout{
  width:100%;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:var(--border-strong);
  border-radius:10px;
  padding:8px;
  font-size:.85rem;
  transition: all .15s;
}
.btn-sidebar-logout:hover{ background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.3); color:#fecaca; }
.sidebar-overlay{ display:none; }

/* Topbar */
.app-topbar{
  height:var(--topbar-h);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:0 28px;
  position:sticky; top:0; z-index:1020;
}
.topbar-right{ display:flex; align-items:center; gap:14px; min-width:0; }
.topbar-title h2{ font-size:1.25rem; font-weight:800; margin:0; color:var(--primary); line-height:1.2; }
.topbar-title p{ margin:2px 0 0; font-size:.84rem; color:var(--text-muted); }
.topbar-left{ display:flex; align-items:center; gap:14px; }
.topbar-date{
  display:flex; align-items:center;
  background: var(--bg);
  border:1px solid var(--border);
  padding:7px 12px; border-radius:999px;
  font-size:.82rem; color:var(--text-muted); white-space:nowrap;
}
.topbar-clock{
  display:flex; flex-direction:column; align-items:center;
  background: linear-gradient(135deg, var(--surface-soft) 0%, #eef2f7 100%);
  border:1px solid var(--border);
  padding:6px 14px; border-radius:12px;
  min-width:170px;
  line-height:1.2;
  box-shadow:0 2px 8px rgba(15,32,64,.05);
}
.topbar-clock .clock-time{
  font-weight:800; font-size:1.05rem; color:var(--primary);
  font-variant-numeric: tabular-nums; letter-spacing:.04em;
  direction:ltr;
}
.topbar-clock .clock-date{
  font-size:.74rem; color:var(--text-muted); font-weight:600;
  margin-top:2px; white-space:nowrap;
}

/* ===== Notification Badge ===== */
.notif-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ef4444;
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  border-radius: 999px;
  border: 2px solid var(--bg);
  box-shadow: 0 2px 6px rgba(239,68,68,.35);
}

.topbar-clock.guest-clock{
  background: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.4);
  backdrop-filter: blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  min-width:220px; padding:10px 18px;
}
.topbar-clock.guest-clock .clock-time{ font-size:1.25rem; }
.holiday-banner{
  display:flex; align-items:center; gap:14px;
  background: linear-gradient(135deg, var(--caution-bg) 0%, var(--caution-bg) 100%);
  border:1px solid #fde68a;
  border-right:4px solid #f59e0b;
  padding:14px 16px; border-radius:12px;
  margin-bottom:18px;
  color:var(--caution-text);
}
.holiday-banner i{ font-size:22px; color:#d97706; }
.holiday-banner strong{ display:block; font-size:.95rem; }
.holiday-banner span{ font-size:.84rem; opacity:.9; }
.calendar-mini{
  display:grid; grid-template-columns: repeat(7, 1fr);
  gap:6px; margin-top:12px;
}
.calendar-mini-day{
  text-align:center; padding:8px 4px; border-radius:10px;
  background:var(--surface-soft); border:1px solid var(--border);
  font-size:.78rem;
}
.calendar-mini-day.is-today{ background:var(--primary); color:white; border-color:var(--primary); }
.calendar-mini-day.is-holiday{ background:var(--caution-bg); border-color:#fde68a; color:var(--caution-text); }
.calendar-mini-day small{ display:block; font-size:.68rem; opacity:.7; }
.jalali-hint{ margin-top:4px; }
.topbar-actions{ display:flex; align-items:center; gap:10px; }
.btn-topbar-primary{
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  color:white; border:none;
  padding:9px 16px; border-radius:999px;
  font-size:.86rem; font-weight:700;
  box-shadow:0 4px 14px rgba(15,32,64,.18);
  display:inline-flex; align-items:center; gap:8px;
  transition: all .15s;
}
.btn-topbar-primary:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(15,32,64,.22); color:white; }
.topbar-user{ font-size:.86rem; color:var(--text-muted); font-weight:600; }
.btn-icon{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--primary);
}

/* Cards & Content */
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.card-header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:16px 20px;
  font-weight:800; font-size:.95rem; color:var(--primary);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.card-body{ padding:20px; }
.card-header a{ font-size:.84rem; font-weight:600; color:var(--accent); }
.card-header a:hover{ color:var(--primary); }

/* Page header (kept for backward compat, now styled as section header) */
.page-header{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:22px;
  flex-wrap:wrap;
}
.page-header h1{ font-size:1.55rem; font-weight:800; margin:0; color:var(--primary); letter-spacing:-.02em; }
.page-header p{ color:var(--text-muted); font-size:.9rem; margin:6px 0 0; }
.page-header .btn-primary{
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  border:none; border-radius:999px; padding:10px 18px; font-weight:700;
  box-shadow:0 4px 14px rgba(15,32,64,.15);
}

/* Stat cards — modern */
.stat-card{
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
  min-height:140px;
  padding:20px 20px 18px;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition: all .18s ease;
}
.stat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:#dbe4f0; }
.stat-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity:.9;
}
.stat-card-icon{
  width:48px; height:48px; border-radius:12px;
  display:grid; place-items:center;
  font-size:20px; margin-bottom:14px;
  background: linear-gradient(135deg, var(--blue-soft) 0%, var(--blue-soft) 100%);
  color:var(--primary);
  border:1px solid var(--blue-soft);
}
.stat-card-success .stat-card-icon{ background: linear-gradient(135deg, var(--positive-bg) 0%, var(--positive-bg) 100%); color:var(--positive-text); border-color:#bbf7d0; }
.stat-card-success::before{ background: linear-gradient(90deg, #10b981, #06b6d4); }
.stat-card-warning .stat-card-icon{ background: linear-gradient(135deg, var(--caution-bg) 0%, #fde68a 100%); color:var(--caution-text); border-color:#fde68a; }
.stat-card-warning::before{ background: linear-gradient(90deg, #f59e0b, #f97316); }
.stat-card-danger .stat-card-icon{ background: linear-gradient(135deg, var(--negative-bg) 0%, #fecaca 100%); color:var(--negative-text); border-color:#fecaca; }
.stat-card-danger::before{ background: linear-gradient(90deg, #ef4444, #f97316); }
.stat-card strong{ font-size:1.95rem; font-weight:800; line-height:1; color:var(--primary); letter-spacing:-.03em; }
.stat-card span{ margin-top:6px; color:var(--text-muted); font-size:.86rem; font-weight:500; }
.stat-card small{ color:var(--text-light); font-size:.78rem; margin-top:2px; }
/* legacy i fallback */
.stat-card > i{
  position:absolute; left:14px; top:18px;
  font-size:2.2rem; opacity:.07; color:var(--primary);
}

/* List rows */
.list-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 4px;
  border-bottom:1px solid var(--border-light);
  transition: background .12s;
  border-radius:10px;
}
.list-row:hover{ background:var(--surface-soft); padding-left:8px; padding-right:8px; }
.list-row:last-child{ border-bottom:0; }
.list-row small{ display:block; margin-top:4px; color:var(--text-muted); font-size:.84rem; }
.list-row strong{ font-size:.92rem; color:var(--text); }

/* Status badges */
.status{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px;
  font-size:.78rem; font-weight:700;
  border:1px solid transparent;
  background: var(--surface-soft); color: var(--text-muted);
}
.status::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.9; }
.status-approved{ background:var(--positive-bg); color:var(--positive-text); border-color:#bbf7d0; }
.status-pending{ background:var(--caution-bg); color:var(--caution-text); border-color:#fde68a; }
.status-rejected{ background:var(--negative-bg); color:var(--negative-text); border-color:#fecaca; }

/* Tables */
.table{ --bs-table-bg: transparent; }
.table > thead{ background:var(--surface-soft); }
.table > thead th{
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  color:var(--text-muted); font-size:.78rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  white-space:nowrap;
}
.table > tbody td{ padding:14px 16px; font-size:.88rem; vertical-align:middle; border-bottom:1px solid var(--border-light); }
.table-hover > tbody > tr:hover{ background:var(--surface-soft); }
.table-responsive{ border-radius:var(--radius); }

/* Buttons */
.btn-primary{
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  border:none; font-weight:700;
  border-radius:10px; padding:9px 18px;
  box-shadow:0 4px 12px rgba(15,32,64,.15);
}
.btn-primary:hover{ background: linear-gradient(135deg, var(--primary-2) 0%, var(--primary-3) 100%); transform:translateY(-1px); }
.btn-outline-primary{ border-color: var(--primary); color:var(--primary); font-weight:600; border-radius:10px; }
.btn-outline-primary:hover{ background:var(--primary); color:white; }
.btn-success{ background: linear-gradient(135deg, #15803d, #10b981); border:none; border-radius:10px; font-weight:700; }
.btn-danger{ background: linear-gradient(135deg, #dc2626, #ef4444); border:none; border-radius:10px; font-weight:700; }
.btn-light{ background:var(--surface-soft); border:1px solid var(--border); color:var(--text); font-weight:600; border-radius:10px; }

/* Forms */
.form-control, .form-select{
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 14px;
  font-size:.9rem;
  background:var(--surface);
  transition: all .15s;
}
.form-control:focus, .form-select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(14,165,233,.12);
}
.form-label{ font-size:.86rem; font-weight:700; color:var(--text); margin-bottom:6px; }
.form-text{ color:var(--text-light); }
.invalid-feedback{ font-size:.82rem; }

/* Alerts */
.app-alert{
  border-radius:12px; border:1px solid var(--border);
  padding:12px 16px; font-size:.88rem; font-weight:500;
  box-shadow:var(--shadow-card);
}
.alert-success{ background:var(--positive-bg); border-color:#bbf7d0; color:var(--positive-text); }
.alert-danger{ background:var(--negative-bg); border-color:#fecaca; color:var(--negative-text); }
.alert-warning{ background:var(--caution-bg); border-color:#fde68a; color:var(--caution-text); }
.alert-info{ background:var(--blue-soft); border-color:var(--blue-soft); color:#1e40af; }

/* Empty state */
.empty-state{
  padding:36px 20px !important;
  color:var(--text-light);
  text-align:center; font-size:.9rem;
}
.empty-state::before{
  content:"\f05a";
  font-family:"Font Awesome 6 Free"; font-weight:900;
  display:block; font-size:28px; margin-bottom:10px; opacity:.35;
}

/* Login / Guest */
.guest-wrapper{
  min-height:100vh;
  display:grid; place-items:center;
  padding:32px 16px;
  position:relative; overflow:hidden;
  background: radial-gradient(1200px 600px at 20% -10%, #1e3a6b 0%, transparent 60%),
              radial-gradient(900px 500px at 90% 110%, #0ea5e9 0%, transparent 60%),
              linear-gradient(180deg, #0f2040 0%, var(--text) 100%);
}
.guest-bg{
  position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity:.5;
}
.login-card{
  border:none !important;
  border-radius:20px !important;
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.15) !important;
  background:var(--surface);
}
.login-card .card-body{ padding:36px 32px !important; }
.login-icon-wrap{
  width:64px; height:64px; border-radius:16px;
  background: linear-gradient(135deg, var(--primary) 0%, #2563eb 100%);
  display:grid; place-items:center; margin:0 auto 16px;
  color:white; font-size:26px;
  box-shadow:0 10px 24px rgba(37,99,235,.35);
}
.login-card h1{ font-weight:800; color:var(--primary); letter-spacing:-.02em; }
.login-card .btn-primary{
  padding:12px; border-radius:12px; font-size:.95rem;
}

/* Attendance widgets */
.attendance-today-card{
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-soft) 100%);
}
.attendance-today-card .card-header{
  background: linear-gradient(135deg, var(--surface-soft) 0%, var(--blue-soft) 100%);
}

/* Filters card */
.filters-card{ background:var(--surface); }

/* Responsive */
@media (max-width: 991.98px){
  .app-sidebar{
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.32,.72,0,1);
  }
  .app-sidebar.open{ transform: translateX(0); }
  .sidebar-overlay.show{
    display:block; position:fixed; inset:0;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(2px);
    z-index:1035;
  }
  .app-main{ margin-right:0; }
  .app-topbar{ padding:0 16px; }
  .app-content{ padding:20px 16px; }
  .topbar-date{ display:none; }
}
@media (max-width:575.98px){
  .page-header .btn{ width:100%; justify-content:center; }
  .topbar-title h2{ font-size:1.05rem; }
  .topbar-title p{ display:none; }
}

/* Utilities */
.text-muted{ color:var(--text-muted) !important; }
.shadow-card{ box-shadow:var(--shadow-card); }
.rounded-xl{ border-radius:var(--radius); }

/* Animations */
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
.app-content > *{ animation: fadeInUp .35s ease both; }
.app-content > *:nth-child(2){ animation-delay:.05s; }
.app-content > *:nth-child(3){ animation-delay:.1s; }

/* Calendar Grid */
.calendar-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.calendar-day{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: all .18s ease;
}
.calendar-day:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.calendar-day.is-today{
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(14,165,233,.15);
}
.calendar-day.is-holiday{
  background: var(--caution-bg);
  border-color: #fde68a;
}
.calendar-day-header{
  padding: 10px 12px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.calendar-day.is-today .calendar-day-header{
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  border-bottom: none;
}
.calendar-day.is-today .calendar-day-header .calendar-date{
  color: white;
  font-weight: 800;
}
.calendar-date{
  font-size: .82rem;
  font-weight: 700;
  color: var(--primary);
}
.badge-today{
  background: var(--accent);
  color: white;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
}
.calendar-day-body{
  padding: 12px;
  min-height: 70px;
}
.day-status{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.day-status.holiday{
  color: var(--caution-text);
  font-size: .82rem;
  align-items: center;
  text-align: center;
  padding: 8px 0;
}
.day-status.present{
  font-size: .8rem;
}
.day-status.absent{
  color: var(--text-muted);
  font-size: .82rem;
  align-items: center;
  text-align: center;
  padding: 8px 0;
}
.time-row{
  display: flex;
  align-items: center;
  gap: 6px;
}
.time-row i{
  width: 16px;
  font-size: 11px;
}
.time-row span{
  font-weight: 600;
  direction: ltr;
}
.worked-minutes{
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-light);
  text-align: center;
}
.worked-minutes small{
  color: var(--success);
  font-weight: 600;
}

/* Comment Cards */
.comment-card{
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all .18s ease;
}
.comment-card:hover{
  border-color: var(--accent);
}
.comment-card.answered{
  background: var(--positive-bg);
  border-color: #bbf7d0;
}
.comment-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.comment-title{
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
}
.comment-content{
  color: var(--text);
  font-size: .9rem;
  line-height: 1.6;
  margin-bottom: 12px;
}
.admin-response{
  background: var(--surface);
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 12px;
  margin-top: 12px;
}
.admin-response p{
  color: var(--positive-text);
  font-size: .88rem;
}
.comment-actions{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

/* User Avatar Large */
.user-avatar-lg{
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: grid;
  place-items: center;
  font-weight: 800;
  color: white;
  font-size: 1.2rem;
  border: 3px solid white;
  box-shadow: 0 4px 12px rgba(15,32,64,.15);
}

/* Dashboard grid adjustments */
@media (min-width: 992px){
  .calendar-grid{
    grid-template-columns: repeat(7, 1fr);
  }
}

/* Full Jalali attendance calendar */
.employee-calendar-title strong{
  color:var(--accent);
  font-size:.9rem;
  background:var(--blue-soft);
  border:1px solid var(--blue-soft);
  border-radius:999px;
  padding:6px 12px;
}
.employee-calendar-body{ padding:16px; }
.month-calendar-legend{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  color:var(--text-muted);
  font-size:.76rem;
  margin:0 0 12px;
}
.month-calendar-legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.legend-dot.present{ background:#10b981; }
.legend-dot.holiday{ background:#f59e0b; }
.legend-dot.today{ background:#0ea5e9; box-shadow:0 0 0 3px rgba(14,165,233,.12); }
.month-calendar{
  display:grid;
  grid-template-columns:repeat(7, minmax(82px, 1fr));
  direction:rtl;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:var(--border);
  gap:1px;
}
.month-calendar-weekday{
  min-height:44px;
  display:grid;
  place-items:center;
  background:var(--surface-soft);
  color:var(--text-muted);
  font-size:.78rem;
  font-weight:800;
}
.month-calendar-weekday.friday{ color:#dc2626; background:var(--negative-bg); }
.month-calendar-day{
  min-height:112px;
  background:var(--surface);
  padding:9px;
  position:relative;
  transition:background .18s ease, box-shadow .18s ease;
}
.month-calendar-day:hover:not(.is-empty){
  background:var(--surface-soft);
  box-shadow:inset 0 0 0 1px #bae6fd;
  z-index:1;
}
.month-calendar-day.is-empty{ background:var(--surface-soft); opacity:.7; }
.month-calendar-day.is-holiday{ background:var(--caution-bg); }
.month-calendar-day.is-today{
  background:#eff8ff;
  box-shadow:inset 0 0 0 2px var(--accent);
  z-index:2;
}
.month-day-top{ display:flex; align-items:center; justify-content:space-between; gap:4px; }
.month-day-number{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:var(--primary);
  font-size:.88rem;
  font-weight:900;
}
.is-today .month-day-number{ background:var(--accent); color:white; }
.month-today-label{ color:var(--primary); font-weight:800; font-size:.63rem; }
.month-day-content{ display:flex; flex-direction:column; gap:5px; margin-top:8px; min-width:0; }
.month-status,.month-time{
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:.67rem;
}
.month-status i,.month-time i{ width:11px; flex:0 0 11px; text-align:center; }
.month-status.attendance{ color:var(--positive-text); font-weight:800; }
.month-status.holiday{ color:var(--caution-text); font-weight:700; }
.month-status.no-record{ color:var(--text-light); }
.month-time{ color:var(--text-muted); direction:rtl; }
.month-calendar-day.status-absent .month-status.attendance{ color:#dc2626; }
.month-calendar-day.status-leave .month-status.attendance{ color:#7c3aed; }

@media (max-width: 767px){
  .employee-calendar-body{ padding:10px; overflow-x:auto; }
  .month-calendar{ min-width:660px; }
  .month-calendar-legend{ justify-content:flex-start; min-width:660px; }
  .month-calendar-day{ min-height:102px; }
}

/* Independent management center */
.management-launcher{
  padding:22px;
  border:1px solid #dfe7f1;
  border-radius:20px;
  background:rgba(255,255,255,.72);
  box-shadow:var(--shadow-card);
}
.section-heading{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:16px; }
.section-heading span{ color:var(--accent); font-size:.7rem; font-weight:900; }
.section-heading h3{ margin:2px 0 0; color:var(--primary); font-size:1.15rem; font-weight:900; }
.section-heading small{ color:var(--text-muted); }
.management-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }
.management-tile{
  position:relative;
  min-height:108px;
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:11px;
  padding:15px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  color:var(--text);
  transition:all .18s ease;
}
.management-tile:hover{ transform:translateY(-2px); border-color:#bae6fd; box-shadow:0 10px 24px rgba(15,32,64,.09); color:var(--text); }
.management-tile > i{ width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--blue-soft); color:var(--primary); }
.management-tile div{ min-width:0; }
.management-tile strong,.management-tile span{ display:block; }
.management-tile strong{ color:var(--primary); font-size:.87rem; font-weight:900; }
.management-tile span{ margin-top:4px; color:var(--text-muted); font-size:.69rem; line-height:1.55; }
.management-tile > b{ min-width:27px; height:27px; display:grid; place-items:center; border-radius:8px; background:var(--surface-soft); color:var(--text-muted); font-size:.72rem; }
.management-tile.tile-green > i{ background:var(--positive-bg); color:var(--positive-text); }
.management-tile.tile-orange > i{ background:var(--caution-bg); color:#d97706; }
.management-tile.tile-purple > i{ background:var(--violet-bg); color:#7c3aed; }
.management-tile.tile-cyan > i{ background:#ecfeff; color:#0891b2; }
.management-tile.tile-red > i{ background:var(--negative-bg); color:#e11d48; }
.management-tile.tile-slate > i{ background:var(--surface-soft); color:var(--text-muted); }
.management-row-action{ border:1px solid var(--border); color:var(--primary); font-weight:700; white-space:nowrap; }
.leave-actions{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.leave-actions form{ margin:0; }
.notification-management-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.notification-management-card{
  display:grid; grid-template-columns:42px 1fr auto; align-items:start; gap:12px;
  padding:17px; border:1px solid var(--border); border-radius:15px; background:var(--surface); box-shadow:var(--shadow-card);
}
.notification-management-card.unread{ border-right:3px solid var(--accent); }
.notification-icon{ width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--blue-soft); color:var(--primary); }
.notification-management-card strong{ color:var(--primary); font-size:.88rem; }
.notification-management-card p{ margin:6px 0; color:var(--text-muted); font-size:.8rem; line-height:1.7; }
.notification-management-card small{ color:var(--text-light); font-size:.7rem; }
.security-summary{ display:grid; grid-template-columns:repeat(2,minmax(0,260px)); gap:12px; margin-bottom:18px; }
.security-summary > div{ display:grid; grid-template-columns:44px auto; gap:0 12px; padding:15px; border:1px solid #bbf7d0; border-radius:14px; background:var(--positive-bg); }
.security-summary i{ grid-row:1/3; width:44px; height:44px; display:grid; place-items:center; color:var(--positive-text); font-size:18px; }
.security-summary strong{ color:var(--positive-text); font-size:1.2rem; }
.security-summary span{ color:var(--positive-text); font-size:.72rem; }
.security-summary .danger{ border-color:#fecaca; background:var(--negative-bg); }
.security-summary .danger i,.security-summary .danger strong,.security-summary .danger span{ color:#dc2626; }
.security-event{ display:flex; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border-light); }
.security-event > i{ color:#ef4444; margin-top:4px; }
.security-event strong,.security-event span,.security-event small{ display:block; }
.security-event strong{ font-size:.8rem; }
.security-event span{ color:var(--text-muted); font-size:.72rem; margin-top:3px; }
.security-event small{ color:var(--text-light); font-size:.67rem; margin-top:2px; }
.ltr-code{ direction:ltr; text-align:right; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

@media (max-width:1199px){ .management-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px){
  .section-heading{ align-items:flex-start; flex-direction:column; gap:6px; }
  .management-grid,.notification-management-grid{ grid-template-columns:1fr; }
  .management-tile{ min-height:92px; }
  .security-summary{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){ .security-summary{ grid-template-columns:1fr; } }

/* Reusable Persian date picker */
.jalali-date-control{ position:relative; width:100%; }
.jalali-date-display{
  padding-left:43px !important;
  cursor:pointer;
  background:var(--surface) !important;
  color:var(--text) !important;
  font-weight:650;
  caret-color:transparent;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.jalali-date-display:hover{ border-color:#93c5fd; background:#fafdff !important; }
.jalali-date-display:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(14,165,233,.11); }
.jalali-date-button{
  position:absolute;
  left:5px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:9px;
  background:var(--blue-soft);
  color:var(--primary);
  cursor:pointer;
}
.jalali-date-button:hover{ background:var(--blue-soft); }
.jalali-picker-panel{
  position:fixed;
  z-index:3000;
  display:none;
  direction:rtl;
  padding:13px;
  border:1px solid var(--border);
  border-radius:17px;
  background:rgba(255,255,255,.98);
  box-shadow:0 22px 55px rgba(15,32,64,.2),0 3px 12px rgba(15,32,64,.08);
  backdrop-filter:blur(16px);
  animation:pickerIn .16s ease both;
}
.jalali-picker-panel.is-open{ display:block; }
@keyframes pickerIn{ from{ opacity:0; transform:translateY(-5px) scale(.985); } to{ opacity:1; transform:none; } }
.jalali-picker-header{
  display:grid;
  grid-template-columns:36px 1fr 36px;
  align-items:center;
  gap:8px;
  padding:2px 1px 12px;
  border-bottom:1px solid var(--border);
}
.jalali-picker-header strong{ text-align:center; color:var(--primary); font-size:.92rem; font-weight:900; }
.jalali-picker-header button{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-soft);
  color:var(--text-muted);
  cursor:pointer;
}
.jalali-picker-header button:hover{ border-color:#bfdbfe; background:var(--blue-soft); color:var(--primary); }
.jalali-picker-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; padding:11px 0 8px; }
.jalali-picker-weekday{
  min-width:0;
  padding:4px 0 7px;
  overflow:hidden;
  color:var(--text-light);
  font-size:.57rem;
  font-weight:800;
  text-align:center;
  white-space:nowrap;
}
.jalali-picker-weekday.is-weekend{ color:#e87979; }
.jalali-picker-empty,.jalali-picker-day{ aspect-ratio:1; }
.jalali-picker-day{
  position:relative;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  font-family:inherit;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  transition:background .13s ease,color .13s ease,transform .13s ease;
}
.jalali-picker-day:hover{ background:var(--blue-soft); color:var(--primary); transform:translateY(-1px); }
.jalali-picker-day.is-weekend{ color:#dc6262; background:var(--negative-bg); }
.jalali-picker-day.is-today::after{
  content:"";
  position:absolute;
  right:50%;
  bottom:4px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent);
  transform:translateX(50%);
}
.jalali-picker-day.is-selected{
  background:linear-gradient(135deg,var(--primary),#2563eb);
  color:#fff;
  box-shadow:0 5px 12px rgba(37,99,235,.26);
}
.jalali-picker-day.is-selected::after{ background:var(--surface); }
.jalali-picker-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:10px;
  border-top:1px solid var(--border);
}
.jalali-picker-footer button{
  padding:6px 10px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text-muted);
  font-family:inherit;
  font-size:.7rem;
  font-weight:800;
  cursor:pointer;
}
.jalali-picker-footer .jalali-today{ background:var(--blue-soft); color:var(--primary); }
.jalali-picker-footer .jalali-clear:hover{ background:var(--negative-bg); color:#e11d48; }

@media (max-width:576px){
  .jalali-picker-panel{
    position:fixed !important;
    right:10px !important;
    left:10px !important;
    top:auto !important;
    bottom:10px;
    width:auto !important;
    border-radius:20px;
    padding:16px;
  }
  .jalali-picker-day{ font-size:.86rem; }
  .jalali-picker-weekday{ font-size:.63rem; }
}

/* Leave request modes */
.leave-request-card{ overflow:visible; }
.leave-form-hero{ display:flex; align-items:center; gap:16px; padding:22px 24px; border-bottom:1px solid var(--border); background:linear-gradient(135deg,var(--surface-soft),var(--surface)); border-radius:var(--radius) var(--radius) 0 0; }
.leave-form-icon{ width:52px; height:52px; flex:0 0 52px; display:grid; place-items:center; border-radius:15px; background:linear-gradient(135deg,#2563eb,#0ea5e9); color:#fff; font-size:20px; box-shadow:0 9px 20px rgba(37,99,235,.2); }
.leave-form-hero h1{ margin:0 0 4px; color:var(--primary); font-size:1.12rem; font-weight:900; }
.leave-form-hero p{ margin:0; color:var(--text-muted); font-size:.78rem; }
.leave-mode-hint{ display:flex; align-items:center; gap:9px; padding:11px 13px; border:1px solid #bae6fd; border-radius:11px; background:#f0f9ff; color:var(--primary); font-size:.78rem; }
.leave-mode-hint i{ color:#0ea5e9; }
.input-with-suffix{ position:relative; }
.input-with-suffix input{ padding-left:52px; }
.input-with-suffix > span{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:.75rem; }
.leave-duration-preview{ display:flex; align-items:center; gap:11px; margin-top:16px; padding:12px 14px; border:1px dashed var(--border-strong); border-radius:12px; background:var(--surface-soft); }
.leave-duration-preview > i{ width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:var(--blue-soft); color:#0284c7; }
.leave-duration-preview small,.leave-duration-preview strong{ display:block; }
.leave-duration-preview small{ color:var(--text-muted); font-size:.68rem; }
.leave-duration-preview strong{ color:var(--primary); font-size:.86rem; margin-top:2px; }

/* WebAuthn biometric attendance */
.biometric-ready{ display:flex; align-items:center; gap:8px; padding:9px 11px; border:1px solid #bbf7d0; border-radius:10px; background:var(--positive-bg); color:var(--positive-text); font-size:.72rem; }
.biometric-ready a{ margin-right:auto; color:var(--positive-text); font-weight:900; }
.biometric-required{ display:grid; grid-template-columns:37px 1fr auto; align-items:center; gap:9px; padding:10px; border:1px solid #fde68a; border-radius:11px; background:var(--caution-bg); color:var(--caution-text); }
.biometric-required > i:first-child{ width:37px; height:37px; display:grid; place-items:center; border-radius:10px; background:var(--caution-bg); color:#d97706; font-size:17px; }
.biometric-required strong,.biometric-required small{ display:block; }
.biometric-required strong{ font-size:.75rem; }
.biometric-required small{ margin-top:2px; color:var(--caution-text); font-size:.65rem; }
.biometric-clock-actions button{ min-height:43px; font-weight:800; }
.biometric-action.is-loading,.biometric-register-button.is-loading{ color:transparent !important; position:relative; }
.biometric-action.is-loading::after,.biometric-register-button.is-loading::after{ content:""; position:absolute; inset:50% auto auto 50%; width:18px; height:18px; margin:-9px 0 0 -9px; border:2px solid #ffffff70; border-top-color:#fff; border-radius:50%; animation:bioSpin .7s linear infinite; }
@keyframes bioSpin{ to{ transform:rotate(360deg); } }
.biometric-toast{ position:fixed; left:24px; bottom:24px; z-index:4000; max-width:390px; display:flex; align-items:center; gap:10px; padding:13px 16px; border:1px solid #bbf7d0; border-radius:13px; background:var(--positive-bg); color:var(--positive-text); box-shadow:0 15px 40px rgba(15,23,42,.18); opacity:0; pointer-events:none; transform:translateY(15px); transition:.2s; font-size:.8rem; }
.biometric-toast.is-visible{ opacity:1; transform:none; }
.biometric-toast.is-error{ border-color:#fecaca; background:var(--negative-bg); color:var(--negative-text); }
.biometric-setup-card{ display:grid; grid-template-columns:240px 1fr; overflow:hidden; border:1px solid #dce6f4; border-radius:22px; background:var(--surface); box-shadow:0 15px 45px rgba(15,32,64,.09); }
.biometric-visual{ position:relative; min-height:390px; display:grid; place-items:center; background:radial-gradient(circle at center,#1e4f8c,#0f2040 70%); color:#fff; }
.fingerprint-rings{ width:140px; height:140px; display:grid; place-items:center; border:1px solid #ffffff30; border-radius:50%; box-shadow:0 0 0 18px #ffffff0b,0 0 0 38px #ffffff08; }
.fingerprint-rings i{ font-size:68px; color:#7dd3fc; filter:drop-shadow(0 8px 15px #0005); }
.secure-dot{ position:absolute; right:calc(50% - 67px); top:calc(50% + 45px); width:37px; height:37px; display:grid; place-items:center; border:3px solid #0f2040; border-radius:50%; background:#10b981; color:#fff; font-size:12px; }
.biometric-copy{ padding:34px; align-self:center; }
.biometric-copy .eyebrow{ color:var(--accent); font-size:.68rem; font-weight:900; }
.biometric-copy h1{ margin:5px 0 10px; color:var(--primary); font-size:1.35rem; font-weight:900; }
.biometric-copy > p{ color:var(--text-muted); font-size:.8rem; line-height:1.9; }
.biometric-benefits{ display:grid; gap:7px; margin:17px 0; }
.biometric-benefits span{ display:flex; align-items:center; gap:7px; color:var(--text-muted); font-size:.73rem; }
.biometric-benefits i{ width:19px; height:19px; display:grid; place-items:center; border-radius:50%; background:var(--positive-bg); color:var(--positive-text); font-size:9px; }
.biometric-register-button{ min-height:44px; padding:10px 20px; font-weight:800; }
.credential-row{ display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--border-light); }
.credential-row:last-child{ border-bottom:0; }
.credential-row > i{ width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:var(--blue-soft); color:var(--primary); }
.credential-row strong,.credential-row small{ display:block; }
.credential-row strong{ font-size:.76rem; color:var(--primary); word-break:break-word; }
.credential-row small{ margin-top:3px; color:var(--text-light); font-size:.66rem; }

/* Installable PWA prompt */
.pwa-install-button{ position:fixed; left:18px; bottom:18px; z-index:1500; display:flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid #bfdbfe; border-radius:999px; background:var(--surface); color:var(--primary); box-shadow:0 10px 30px rgba(15,32,64,.17); font-family:inherit; font-size:.75rem; font-weight:900; cursor:pointer; }
.pwa-install-button[hidden]{ display:none !important; }
.pwa-install-button:hover{ transform:translateY(-2px); background:var(--blue-soft); }

@media(max-width:767px){
  .leave-form-hero{ align-items:flex-start; padding:18px; }
  .biometric-setup-card{ grid-template-columns:1fr; }
  .biometric-visual{ min-height:215px; }
  .biometric-copy{ padding:24px 20px; }
  .fingerprint-rings{ width:105px; height:105px; }
  .fingerprint-rings i{ font-size:51px; }
  .secure-dot{ right:calc(50% - 53px); top:calc(50% + 30px); }
  .biometric-toast{ right:12px; left:12px; bottom:12px; max-width:none; }
  .pwa-install-button{ bottom:12px; left:12px; }
}

/* ==========================================================
   ✨ Persian Lovely Typography + Animations — 2026 Refresh
   Vazirmatn Variable • حس گرم و صمیمی • انیمیشن نرم
   ========================================================== */
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{
  font-family: "Vazirmatn", "Vazirmatn Variable", ui-sans-serif, system-ui, -apple-system, Tahoma, sans-serif !important;
  font-variation-settings:"wght" 450;
  line-height:1.75;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01" 1, "calt" 1;
}
h1,h2,h3,h4,h5,.brand-text strong,.topbar-title h2,.page-header h1{
  font-family:"Vazirmatn", "Vazirmatn Variable", Tahoma, sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.35;
}
p, li, td, span, small{ line-height:1.7; }
strong,b{ font-weight:800; letter-spacing:-.01em; }

/* ——— Top progress bar (SPA) ——— */
.nprogress{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:9999;
  background:linear-gradient(90deg,var(--accent) 0%, #2563eb 50%, #06b6d4 100%);
  width:0; opacity:0; transition:width .25s ease, opacity .2s;
  box-shadow:0 1px 6px rgba(14,165,233,.4);
}
.nprogress.is-loading{ width:70%; opacity:1; animation:nprogressMove 1.2s ease-in-out infinite; }
.nprogress.is-done{ width:100%; opacity:0; transition:width .35s ease, opacity .35s .25s; }
@keyframes nprogressMove{
  0%{ transform:translateX(0); } 50%{ transform:translateX(15%); } 100%{ transform:translateX(0); }
}

/* ——— Live indicator ——— */
.live-dot{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px;
  background:var(--positive-bg); border:1px solid #bbf7d0; color:var(--positive-text);
  font-size:.72rem; font-weight:800;
}
.live-dot span{
  width:8px; height:8px; border-radius:50%; background:#10b981;
  box-shadow:0 0 0 4px rgba(16,185,129,.18);
  animation:livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse{
  0%,100%{ transform:scale(1); opacity:1; box-shadow:0 0 0 4px rgba(16,185,129,.18); }
  50%{ transform:scale(1.08); opacity:.95; box-shadow:0 0 0 7px rgba(16,185,129,.10); }
}

/* ——— SPA view transition ——— */
#appContent{ transition:opacity .22s ease, transform .22s ease; }
#appContent.is-switching-out{ opacity:0; pointer-events: none; }
#appContent.is-entering-in{ opacity: 1; pointer-events: auto; }
@keyframes contentIn{
  from{ opacity:0; transform:translateY(10px) scale(.985); filter:blur(1px); }
  to{ opacity:1; transform:none; filter:none; }
}

/* ——— Card reveal & stagger ——— */
.reveal{ opacity:0; transform:translateY(10px); animation:revealUp .5s cubic-bezier(.22,1,.36,1) forwards; }
.reveal-delay-1{ animation-delay:.06s; }
.reveal-delay-2{ animation-delay:.11s; }
.reveal-delay-3{ animation-delay:.16s; }
.reveal-delay-4{ animation-delay:.21s; }
@keyframes revealUp{ to{ opacity:1; transform:none; } }
.stagger > *{ opacity:0; transform:translateY(8px); animation:revealUp .42s ease forwards; }
.stagger > *:nth-child(1){ animation-delay:.02s; } .stagger > *:nth-child(2){ animation-delay:.07s; }
.stagger > *:nth-child(3){ animation-delay:.12s; } .stagger > *:nth-child(4){ animation-delay:.17s; }
.stagger > *:nth-child(5){ animation-delay:.22s; } .stagger > *:nth-child(6){ animation-delay:.27s; }
.stagger > *:nth-child(7){ animation-delay:.32s; } .stagger > *:nth-child(8){ animation-delay:.37s; }

/* ——— Hover lift & soft shadow ——— */
.hover-lift{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s; }
.hover-lift:hover{ transform:translateY(-3px); box-shadow:0 10px 28px rgba(15,32,64,.10); }
.card{ transition:transform .18s ease, box-shadow .18s ease; }
.card:hover{ box-shadow:0 8px 28px rgba(15,32,64,.08); }
.btn{ transition:transform .14s ease, box-shadow .14s ease, filter .14s; }
.btn:active{ transform:scale(.98); }

/* ——— Stat card shimmer ——— */
.stat-card{ position:relative; overflow:hidden; }
.stat-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%);
  transform:translateX(-120%); transition:transform .6s ease; pointer-events:none; opacity:0;
}
.stat-card:hover::after{ transform:translateX(120%); opacity:1; transition:transform .9s ease; }

/* ——— Sidebar nav shimmer active ——— */
.sidebar-nav .nav-link{ overflow:hidden; }
.sidebar-nav .nav-link::after{
  content:""; position:absolute; inset:0; border-radius:10px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  transform:translateX(-100%); transition:transform .5s; pointer-events:none;
}
.sidebar-nav .nav-link:hover::after{ transform:translateX(100%); }

/* ——— Table row enter ——— */
.table > tbody > tr{ transition:background .14s, transform .14s; }
.table > tbody > tr:hover{ transform:scale(1.002); }

/* ——— Skeleton loading ——— */
.skeleton{
  background:linear-gradient(90deg, var(--surface-soft) 25%, #e8eef6 37%, var(--surface-soft) 63%);
  background-size:400% 100%; animation:skeletonShine 1.2s ease-in-out infinite;
  border-radius:8px; min-height:14px;
}
@keyframes skeletonShine{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }
.stat-card.is-loading strong, .stat-card.is-loading span{ color:transparent !important; }
.stat-card.is-loading strong{ background:var(--surface-soft); border-radius:8px; min-height:28px; display:block; }

/* ——— Floating clock glow ——— */
.topbar-clock{ position:relative; overflow:hidden; transition:transform .18s, box-shadow .18s; }
.topbar-clock:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(15,32,64,.08); }
.topbar-clock::before{
  content:""; position:absolute; inset:-1px; border-radius:12px;
  background:linear-gradient(135deg, rgba(14,165,233,.12), transparent 55%);
  pointer-events:none; opacity:0; transition:opacity .2s;
}
.topbar-clock:hover::before{ opacity:1; }

/* ——— Management tile pop ——— */
.management-tile{ transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, border-color .18s; }
.management-tile:active{ transform:scale(.98); }

/* ——— Alert entrance ——— */
.app-alert{ animation:alertIn .38s cubic-bezier(.22,1,.36,1) both; }
@keyframes alertIn{ from{ opacity:0; transform:translateY(-6px) scale(.98); } to{ opacity:1; transform:none; } }

/* ——— Reduced motion ——— */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ==========================================================
   Responsive hardening — management and employee workspaces
   Layout-only overrides; desktop appearance stays unchanged.
   ========================================================== */
@media (max-width: 991.98px){
  .app-sidebar{
    width:min(86vw, var(--sidebar-w));
    min-width:min(86vw, var(--sidebar-w));
  }
  .app-topbar{
    min-height:var(--topbar-h);
    height:auto;
    padding-top:8px;
    padding-bottom:8px;
  }
  .topbar-right{ flex:1 1 auto; }
  .topbar-left{ flex:0 1 auto; min-width:0; gap:10px; }
  .topbar-clock{ min-width:145px; padding-inline:10px; }
  .btn-topbar-primary{ padding-inline:13px; white-space:nowrap; }
  .app-footer{ flex-wrap:wrap; justify-content:center; padding-inline:16px; text-align:center; }
  .table-responsive{
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .table-responsive > .table{ min-width:700px; }
}

@media (max-width: 767.98px){
  :root{ --radius:14px; --radius-lg:17px; }
  body{ overflow-wrap:anywhere; }
  .app-content{ padding:16px 12px 12px; }
  .app-topbar{ padding-inline:12px; gap:10px; }
  .topbar-title h2{ font-size:1.05rem; }
  .topbar-title p{ max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar-clock{ min-width:132px; }
  .topbar-clock .clock-date{ font-size:.66rem; }
  .card-header{ flex-wrap:wrap; padding:14px 16px; }
  .card-body{ padding:16px; }
  .page-header{ align-items:stretch; margin-bottom:16px; }
  .page-header h1{ font-size:1.3rem; }
  .page-header > .d-flex{ width:100%; flex-wrap:wrap; }
  .page-header > .d-flex > .btn{ flex:1 1 180px; }
  .management-launcher{ padding:16px; border-radius:16px; }
  .management-tile{ grid-template-columns:42px minmax(0,1fr) auto; }
  .notification-management-card{ grid-template-columns:42px minmax(0,1fr) auto; padding:14px; }
  .notification-management-card > div:nth-child(2){ min-width:0; }
  .notification-management-card p,
  .notification-management-card small{ overflow-wrap:anywhere; }
  .list-row{ align-items:flex-start; flex-wrap:wrap; padding-block:12px; }
  .list-row > .d-flex{ min-width:0; flex:1 1 230px; }
  .list-row > .btn{ margin-right:auto; }
  .comment-header{ align-items:flex-start; flex-direction:column; gap:10px; }
  .comment-card{ padding:14px; }
  .calendar-mini{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .calendar-mini-day:last-child:nth-child(4n + 3){ grid-column:span 2; }
  .holiday-banner{ align-items:flex-start; }
  .holiday-banner span{ display:block; line-height:1.7; }
  .security-event > div{ min-width:0; }
  .security-event span,
  .security-event strong{ overflow-wrap:anywhere; }
  .biometric-register-button{ width:100%; }
  .credential-row{ grid-template-columns:38px minmax(0,1fr) auto; }
  .card-body .d-flex.justify-content-between{ flex-wrap:wrap; gap:8px 12px; }
  .filters-card .card-body,
  .leave-request-card .card-body{ padding:16px !important; }
  .form-control,
  .form-select{ min-height:44px; font-size:16px; }
  textarea.form-control{ min-height:110px; }
  .table-responsive > .table{ margin-bottom:0; }
  .table > thead th{ padding:11px 13px; }
  .table > tbody td{ padding:12px 13px; }
  .table > thead th,
  .table > tbody td{ white-space:nowrap; }
  .table > tbody td .text-muted,
  .table > tbody td small{ white-space:normal; }
}

@media (max-width: 575.98px){
  .app-topbar{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    min-height:auto;
    padding:9px 12px;
    gap:8px;
  }
  .topbar-right{
    width:100%;
    min-width:0;
    gap:9px;
  }
  .topbar-title{ min-width:0; }
  .topbar-title h2{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .topbar-left{
    width:100%;
    min-width:0;
    justify-content:space-between;
    gap:8px;
  }
  .topbar-clock{
    display:flex;
    flex:1 1 135px;
    min-width:0;
    max-width:165px;
    min-height:42px;
    padding:5px 8px;
    border-radius:10px;
  }
  .topbar-clock .clock-time{ font-size:.88rem; }
  .topbar-clock .clock-date{
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:.61rem;
  }
  .topbar-actions{
    flex:1 1 auto;
    min-width:0;
    justify-content:flex-end;
    gap:0;
  }
  .btn-topbar-primary{
    width:auto;
    min-width:0;
    min-height:42px;
    flex:0 1 auto;
    justify-content:center;
    padding:8px 12px;
    border-radius:12px;
    font-size:.78rem;
    white-space:nowrap;
  }
  .btn-topbar-primary span{
    display:inline;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .btn-topbar-primary i{ margin:0; flex:0 0 auto; font-size:.82rem; }
  .btn-icon{ width:42px; height:42px; flex:0 0 42px; }
  .app-content{ padding-inline:10px; }
  .page-header{ gap:12px; }
  .page-header > div:first-child{ width:100%; }
  .page-header .btn{ min-height:44px; }
  .page-header > .d-flex{ flex-direction:column; }
  .page-header > .d-flex > .btn{ flex:0 0 auto; }
  .card-header > span{ min-width:0; }
  .card-header .status{ margin-right:0; }
  .card-body.p-4{ padding:16px !important; }
  .stat-card{ min-height:126px; padding:17px; }
  .stat-card strong{ font-size:1.7rem; }
  .stat-card-icon{ width:43px; height:43px; margin-bottom:11px; }
  .management-grid{ gap:9px; }
  .management-tile{ min-height:86px; padding:12px; gap:9px; }
  .management-tile span{ line-height:1.45; }
  .notification-management-card{
    grid-template-columns:38px minmax(0,1fr) auto;
    gap:9px;
    padding:12px;
  }
  .notification-icon{ width:38px; height:38px; }
  .security-summary{ grid-template-columns:1fr; }
  .calendar-mini{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .calendar-mini-day:last-child:nth-child(odd){ grid-column:1 / -1; }
  .month-calendar-legend{ gap:10px; }
  .employee-calendar-title strong{ width:100%; text-align:center; }
  .list-row > .d-flex{ gap:10px !important; }
  .list-row > .btn{ width:100%; min-height:40px; }
  .status{ white-space:normal; text-align:center; justify-content:center; }
  .leave-form-hero{ gap:12px; padding:15px; }
  .leave-form-icon{ width:44px; height:44px; flex-basis:44px; border-radius:12px; }
  .leave-form-hero h1{ font-size:1rem; }
  .leave-mode-hint,
  .leave-duration-preview{ align-items:flex-start; }
  .biometric-copy{ padding:20px 16px; }
  .biometric-visual{ min-height:190px; }
  .biometric-required{ grid-template-columns:37px minmax(0,1fr) auto; }
  .credential-row{ align-items:start; }
  .credential-row form .btn{ width:40px; height:40px; padding:0; }
  .guest-wrapper{ padding:18px 10px; }
  .guest-wrapper > .container{ padding-inline:0; }
  .login-card .card-body{ padding:24px 18px !important; }
  .login-icon-wrap{ width:56px; height:56px; font-size:22px; }
  .app-footer{ gap:5px 8px; padding:12px 10px; font-size:.75rem; }
  .card-body form > .d-flex.gap-2:not(.align-items-center){ flex-direction:column; }
  .card-body form > .d-flex.gap-2:not(.align-items-center) > .btn{ width:100%; }
  .biometric-clock-actions{ flex-direction:column; }
  .biometric-clock-actions .btn{ width:100%; flex:none !important; }
  .pwa-install-button{ max-width:calc(100vw - 24px); }
}

@media (max-width: 380px){
  .topbar-title h2{ font-size:.96rem; }
  .topbar-title{ min-width:0; }
  .management-tile{ grid-template-columns:38px minmax(0,1fr) auto; }
  .management-tile > i{ width:38px; height:38px; }
  .notification-management-card{ grid-template-columns:34px minmax(0,1fr) auto; }
  .notification-icon{ width:34px; height:34px; }
  .holiday-banner{ padding:12px; gap:10px; }
}

/* ==========================================================
   Responsive Fix 2026-09 — تمام صفحات برای گوشی
   منوی بالا + سایدبار + جداول + دکمه‌ها + فرم‌ها
   ========================================================== */

/* ——— سایدبار و منوی بالا — پولیش نهایی ——— */
.app-sidebar{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.app-sidebar .sidebar-nav{ padding-bottom:12px; }
.sidebar-overlay.show{ backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.btn-icon{
  transition: background .15s, transform .12s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn-icon:active{ transform:scale(.96); }
.btn-icon:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* دکمه‌های لمسی حداقل 44px برای دسترسی */
@media (max-width: 991.98px){
  .btn, .form-control, .form-select{ min-height:44px; }
  .btn-sm{ min-height:38px; padding:7px 14px; }
  .sidebar-nav .nav-link{ padding:12px 12px; font-size:.94rem; }
  .sidebar-nav .nav-link i{ font-size:16px; }
}

/* ——— کارت‌های موبایل — مخفی در دسکتاپ ——— */
.mobile-cards{ display:none; }
@media (max-width: 767.98px){
  .mobile-cards{ display:block; }
  /* جدول اصلی در گوشی مخفی شود و کارت‌ها جایگزین شوند (فقط پرسنل) */
  .mobile-cards + .card table{ }
}
@media (min-width: 768px){
  .mobile-cards{ display:none !important; }
}

/* ——— جداول — اسکرول افقی نرم + اندیکاتور سایه ——— */
.table-responsive{
  position:relative;
  scrollbar-width:thin;
}
.table-responsive::-webkit-scrollbar{ height:8px; }
.table-responsive::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:999px; }
@media (max-width: 991.98px){
  .table-responsive{ border-radius:12px; }
  .table-responsive::after{
    content:"";
    position:absolute; top:0; bottom:0; left:0; width:24px;
    background: linear-gradient(90deg, transparent, rgba(15,32,64,.06));
    pointer-events:none; opacity:0; transition:opacity .2s;
  }
  .table-responsive.is-scrollable::after{ opacity:1; }
}
@media (max-width: 767.98px){
  .table{ font-size:.84rem; }
  .table > thead th{ font-size:.72rem; padding:10px 12px; }
  .table > tbody td{ padding:11px 12px; }
  /* مدیریت عرض جداول سنگین */
  .table-responsive > .table{ min-width:680px; }
  /* حضور و غیاب 10 ستونه */
  .attendance-table-wrap > .table{ min-width:860px; }
}

/* ——— page-header و دکمه‌ها — تمام صفحات ——— */
.page-header{ gap:14px; }
.page-header .btn{
  min-height:44px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 767.98px){
  .page-header{ flex-direction:column; align-items:stretch; }
  .page-header > div:first-child{ width:100%; }
  .page-header .d-flex.gap-2{
    width:100%;
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:10px !important;
  }
  .page-header .d-flex.gap-2 .btn{ width:100%; }
  /* اگر فقط یک دکمه بود تمام عرض */
  .page-header > a.btn{ width:100%; }
}
@media (max-width: 480px){
  .page-header .d-flex.gap-2{ grid-template-columns:1fr; }
}

/* ——— فیلترها — چیدمان ریسپانسیو ——— */
.filters-card .row > [class*="col-"] .btn{ min-height:44px; }
@media (max-width: 767.98px){
  .filters-card .row{ --bs-gutter-y: 12px; }
}

/* ——— leave-actions — دکمه‌های تأیید/رد ——— */
.leave-actions .btn{ min-height:36px; min-width:64px; }
@media (max-width: 480px){
  .leave-actions{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .leave-actions a.btn{ grid-column:1 / -1; }
}

/* ——— کامنت و پروفایل ——— */
@media (max-width: 767.98px){
  .comment-card .comment-header{ gap:8px; }
  .profile-stat-row{ flex-direction:column; align-items:stretch; }
}

/* ——— فرم‌ها — ورودی 16px برای جلوگیری از زوم iOS ——— */
@media (max-width: 767.98px){
  .form-control, .form-select{ font-size:16px !important; }
  textarea.form-control{ min-height:120px; }
  .card-body form .d-flex.gap-2 .btn{ min-height:44px; }
}

/* ——— topbar پولیش گوشی ——— */
@media (max-width: 991.98px){
  .topbar-left .live-dot{ display:none !important; }
}
@media (max-width: 575.98px){
  .app-topbar{ position:sticky; top:0; }
  .topbar-clock .clock-time{ font-variant-numeric: tabular-nums; }
  /* جلوگیری از پرش ساعت */
  .topbar-clock{ transition:none; }
}

/* ——— Weekly attendance mobile cards ——— */
.weekly-attendance-table-wrap{ position:relative; }
.weekly-mobile-cards{ display:none; }
@media (max-width: 767.98px){
  .weekly-attendance-table-wrap > .table-responsive{ display:none; }
  .weekly-mobile-cards{ display:block; }
  .weekly-mobile-card{
    display:flex; flex-direction:column; gap:8px;
    padding:14px 16px; border-bottom:1px solid var(--border-light);
    background:var(--surface);
  }
  .weekly-mobile-card:last-child{ border-bottom:0; }
  .weekly-mobile-card .wm-row{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
  }
  .weekly-mobile-card .wm-date{ font-weight:800; color:var(--primary); font-size:.92rem; }
  .weekly-mobile-card .wm-day{ color:var(--text-muted); font-size:.78rem; }
  .weekly-mobile-card .wm-in{ color:var(--positive-text); font-weight:600; font-size:.82rem; }
  .weekly-mobile-card .wm-out{ color:var(--negative-text); font-weight:600; font-size:.82rem; }
  .weekly-mobile-card .wm-badge{ justify-self:start; }
  .weekly-mobile-card .wm-worked{ font-weight:800; color:var(--primary); font-size:.9rem; }
  .weekly-mobile-card .wm-label{ font-size:.68rem; color:var(--text-light); font-weight:700; margin-left:4px; }
}
@media (min-width: 768px){
  .weekly-mobile-cards{ display:none !important; }
}

/* ——— جلوگیری از overflow افقی ——— */
html, body{ max-width:100%; overflow-x:hidden; }
.app-main, .app-content, .card, .table-responsive{ max-width:100%; min-width:0; }
img, video, iframe{ max-width:100%; }

/* ——— بهبود اسکرول سایدبار در iOS ——— */

@supports (-webkit-touch-callout: none){
  .app-sidebar{ padding-bottom: env(safe-area-inset-bottom); }
  .app-topbar{ padding-top: max(8px, env(safe-area-inset-top)); }
}

/* ——— Face Capture Modal ——— */
.face-capture-modal{
  position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center;
  background:rgba(15,32,64,.55); backdrop-filter:blur(4px);
}
.face-capture-modal.is-visible{ display:flex; }
.face-capture-dialog{
  background:var(--card); border-radius:var(--radius-lg); width:min(420px,94vw);
  box-shadow:var(--shadow-lg); overflow:hidden; animation:popIn .25s ease;
}
.face-capture-close{
  position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:0;
  background:rgba(255,255,255,.85); color:var(--primary); cursor:pointer; display:grid; place-items:center;
}
.face-capture-body{ padding:18px; text-align:center; }
.face-capture-video-wrap{
  position:relative; width:100%; aspect-ratio:4/3; background:var(--text); border-radius:var(--radius); overflow:hidden;
}
.face-capture-video-wrap video{ width:100%; height:100%; object-fit:cover; }
.face-capture-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; gap:8px; pointer-events:none;
}
.face-capture-overlay i{ font-size:32px; opacity:.9; }
.face-capture-overlay p{ margin:0; font-size:.9rem; opacity:.85; }
.face-capture-hint{ margin:12px 0 6px; font-size:.9rem; color:var(--text-muted); }
.face-capture-actions{ display:flex; gap:10px; justify-content:center; margin-top:10px; }
@keyframes popIn{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:scale(1); } }