/* ==========================================================
   HR NextGen — SaleReport-style Visual Refresh
   Font: Vazirmatn | Login page: preserved
   ========================================================== */

/* ═══ FONTS ═══ */
@font-face { font-family:'Vazirmatn'; src:url('/fonts/Vazirmatn-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Vazirmatn'; src:url('/fonts/Vazirmatn-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Vazirmatn'; src:url('/fonts/Vazirmatn-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Vazirmatn'; src:url('/fonts/Vazirmatn-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Vazirmatn'; src:url('/fonts/Vazirmatn-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }

/* ═══ RESET ═══ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
img,svg { display:block; max-width:100%; }
button,input,select,textarea { font-family:inherit; font-size:inherit; color:inherit; }
button { background:none; border:none; cursor:pointer; }
a { color:inherit; text-decoration:none; }

/* ═══ TOKENS ═══ */
:root {
  --brand:#00BFA6; --brand-dark:#00967F; --brand-darker:#007A68;
  --brand-soft:#EFFCF9; --brand-light:#D9F5F0;
  --bg-1:#F7F9FB; --bg-2:#F2F5F7; --white:#FFFFFF; --surface:rgba(255,255,255,.88);
  --text-1:#0F1922; --text-2:#5A6B78; --text-3:#8A98A3;
  --border-1:rgba(15,25,34,.06); --border-2:rgba(15,25,34,.10); --border-3:rgba(0,191,166,.22);
  --success:#10B981; --warning:#F59E0B; --danger:#EF4444; --info:#3B82F6;
  --card-1:#26A69A; --card-2:#FF7043; --card-3:#7E57C2; --card-4:#42A5F5;
  --card-5:#FFA726; --card-6:#EC407A; --card-7:#AB47BC; --card-8:#5C6BC0;
  --shadow-sm:0 1px 3px rgba(15,25,34,.05),0 1px 2px rgba(15,25,34,.03);
  --shadow-md:0 4px 12px rgba(15,25,34,.06),0 2px 4px rgba(15,25,34,.04);
  --shadow-lg:0 12px 28px rgba(15,25,34,.08),0 4px 10px rgba(15,25,34,.04);
  --shadow-xl:0 24px 48px rgba(15,25,34,.10);
  --sidebar-w:76px; --sidebar-w-open:248px;
  --transition:.22s cubic-bezier(.4,0,.2,1);
  --transition-slow:.35s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"] {
  --bg-1:#0A1418; --bg-2:#0D1A1F; --white:#112128; --surface:rgba(17,33,40,.90);
  --text-1:#E8EFF4; --text-2:#92A8B4; --text-3:#6B7885;
  --border-1:rgba(232,239,244,.06); --border-2:rgba(232,239,244,.10); --border-3:rgba(0,191,166,.30);
  --brand-soft:#0A2A25; --brand-light:#0F3D36;
  --card-1:#1E8578; --card-2:#D85A30; --card-3:#6A47A8; --card-4:#2A7EC4;
  --card-5:#D98A1F; --card-6:#C23568; --card-7:#8C3A9E; --card-8:#4A56A8;
}

/* ═══ BASE ═══ */
body {
  font-family:'Vazirmatn',Tahoma,sans-serif; direction:rtl; color:var(--text-1);
  font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background-color:var(--bg-1);
  background-image:
    radial-gradient(ellipse 90% 60% at 15% 0%, rgba(0,191,166,.08), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 25%, rgba(168,213,255,.10), transparent 55%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(232,224,255,.14), transparent 55%),
    radial-gradient(circle, rgba(0,191,166,.12) 1.2px, transparent 1.4px),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  background-size:auto,auto,auto,22px 22px,auto; background-repeat:no-repeat,no-repeat,no-repeat,repeat,no-repeat;
  background-attachment:fixed; transition:background-color .3s ease,color .3s ease;
}
[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse 90% 60% at 15% 0%, rgba(0,191,166,.12), transparent 55%),
    radial-gradient(circle, rgba(0,191,166,.10) 1.2px, transparent 1.4px),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  background-size:auto,22px 22px,auto; background-repeat:no-repeat,repeat,no-repeat;
}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(0,191,166,.30); border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:rgba(0,191,166,.50); }
.sidebar__nav::-webkit-scrollbar { display:none; }
.sidebar__nav { -ms-overflow-style:none; scrollbar-width:none; }

/* ═══ LAYOUT ═══ */
.app-layout { display:flex; height:100vh; overflow:hidden; width:100%; position:relative; z-index:1; }
.main-content { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; position:relative; padding:18px 24px 0; gap:14px; height:100vh; }
.page-scroll { flex:1; overflow-y:auto; overflow-x:hidden; padding:0 0 8px; display:flex; flex-direction:column; gap:16px; min-height:0; }

/* ═══ SIDEBAR ═══ */
.sidebar {
  width:var(--sidebar-w); height:100%; flex-shrink:0;
  background:linear-gradient(180deg,#00BFA6 0%,#00967F 100%);
  display:flex; flex-direction:column; position:relative; z-index:100;
  padding:20px 12px; overflow:hidden;
  box-shadow:1px 0 0 rgba(0,0,0,.04),4px 0 24px rgba(0,191,166,.08);
  transition:width var(--transition-slow);
}
.sidebar::before { content:''; position:absolute; top:-120px; right:-120px; width:320px; height:320px; background:radial-gradient(circle,rgba(255,255,255,.18) 0%,transparent 65%); border-radius:50%; pointer-events:none; }
.sidebar::after  { content:''; position:absolute; bottom:-100px; left:-100px; width:280px; height:280px; background:radial-gradient(circle,rgba(0,0,0,.10) 0%,transparent 65%); border-radius:50%; pointer-events:none; }
.sidebar.open { width:var(--sidebar-w-open); }
[data-theme="dark"] .sidebar { background:linear-gradient(180deg,#0E3A33 0%,#062522 100%); box-shadow:1px 0 0 rgba(0,0,0,.30),4px 0 24px rgba(0,0,0,.40); }

.sidebar__logo {
  min-height:76px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; padding:4px 6px 18px;
  border-bottom:1px solid rgba(255,255,255,.18); margin-bottom:16px;
  flex-shrink:0; overflow:hidden; position:relative; z-index:1;
}
.sidebar__logo-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35));
  transition: var(--transition);
}
.sidebar.open .sidebar__logo-img {
  width: 100%;
  max-width: 140px;
  height: auto;
  max-height: 78px;
  background: transparent;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .2));
  border-radius: 0;
  padding: 0;
}
.sidebar__logo-text {
  display:none; color:#fff; font-weight:700; font-size:13px; line-height:1.35;
  text-align:center; white-space:nowrap; opacity:0; max-height:0; overflow:hidden;
  transition:opacity .22s, max-height .3s;
}
.sidebar.open .sidebar__logo-text { display:block; opacity:1; max-height:80px; }

.sidebar__nav { flex:1; display:flex; flex-direction:column; gap:3px; padding:0; overflow-y:auto; overflow-x:hidden; position:relative; z-index:1; }
.sidebar__link {
  display:flex; align-items:center; justify-content:center; gap:0;
  height:46px; border-radius:12px; color:rgba(255,255,255,.82);
  font-weight:500; font-size:13.5px; transition:var(--transition);
  white-space:nowrap; position:relative; overflow:hidden; flex-shrink:0;
  padding:0;
}
.sidebar.open .sidebar__link { justify-content:flex-start; gap:13px; padding:0 13px; }
.sidebar__link:hover { background:rgba(255,255,255,.12); color:#fff; }
.sidebar__link.is-active { background:#fff; color:var(--brand-darker); font-weight:600; box-shadow:0 6px 18px rgba(0,0,0,.12); }
[data-theme="dark"] .sidebar__link.is-active { background:#F0FDFA; }
.sidebar__link-icon { width:24px; height:24px; flex-shrink:0; display:flex; align-items:center; justify-content:center; line-height:0; transition:var(--transition); }
.sidebar__link-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; }
.sidebar__link-label { display:none; font-size:13.5px; white-space:nowrap; }
.sidebar.open .sidebar__link-label { display:inline-block; }
.sidebar:not(.open) .sidebar__link::after {
  content:attr(data-tooltip); position:absolute; right:calc(100% + 12px); top:50%;
  transform:translateY(-50%); padding:8px 14px; background:#0F1922; color:#fff;
  border-radius:8px; font-size:12px; font-weight:500; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .18s; z-index:200;
  box-shadow:0 8px 20px rgba(0,0,0,.20);
}
.sidebar:not(.open) .sidebar__link:hover::after { opacity:1; }

.sidebar__footer { padding:12px 0 0; border-top:1px solid rgba(255,255,255,.15); flex-shrink:0; margin-top:8px; }
.sidebar__toggle {
  width:100%; height:44px; border-radius:12px; border:1.5px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.10); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:var(--transition); cursor:pointer; backdrop-filter:blur(10px);
}
.sidebar__toggle:hover { background:rgba(255,255,255,.20); border-color:rgba(255,255,255,.35); }
.sidebar__toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--transition-slow); }
.sidebar.open .sidebar__toggle svg { transform:rotate(180deg); }

/* ═══ TOPBAR ═══ */
.topbar-wrap { position:sticky; top:0; z-index:40; flex-shrink:0; }
.topbar {
  min-height:68px; display:flex; align-items:center; justify-content:space-between;
  padding:12px 22px; border-radius:20px; gap:14px; flex-wrap:wrap;
  position:relative; z-index:500;
  background:linear-gradient(135deg,#00BFA6 0%,#00967F 100%);
  color:#fff; border:none; overflow:visible;
  box-shadow:0 8px 24px rgba(0,191,166,.20),0 1px 0 rgba(255,255,255,.10) inset;
}
[data-theme="dark"] .topbar { background:linear-gradient(135deg,#0E3A33 0%,#072E29 100%); box-shadow:0 8px 24px rgba(0,0,0,.40); }
.topbar::before { content:''; position:absolute; top:-60%; right:10%; width:260px; height:260px; background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 65%); border-radius:50%; pointer-events:none; z-index:0; }
.topbar__left { display:flex; align-items:center; gap:14px; flex-wrap:wrap; flex:1; min-width:0; position:relative; z-index:2; }
.topbar__title-wrap { display:flex; flex-direction:column; gap:2px; min-width:0; }
.topbar__title { font-size:17px; font-weight:700; margin:0; line-height:1.3; white-space:nowrap; color:#fff; }
.topbar__subtitle { font-size:11.5px; color:rgba(255,255,255,.85); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:500px; }
.topbar__actions { display:flex; gap:8px; align-items:center; position:relative; z-index:2; }

.topbar__search { position:relative; width:260px; display:flex; align-items:center; flex-shrink:0; }
.topbar__search-input {
  width:100%; height:42px; background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.20); border-radius:12px;
  padding:0 40px 0 14px; color:#fff; font-size:13px; outline:none;
  transition:background .2s,border-color .2s,box-shadow .2s;
  backdrop-filter:blur(10px);
}
.topbar__search-input::placeholder { color:rgba(255,255,255,.60); }
.topbar__search-input:focus { background:rgba(255,255,255,.25); border-color:rgba(255,255,255,.40); box-shadow:0 0 0 3px rgba(255,255,255,.10); }
.topbar__search-icon { position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; fill:none; stroke:rgba(255,255,255,.70); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }

.topbar__icon-btn {
  position:relative; width:42px; height:42px; border-radius:12px;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.20);
  color:#fff; display:grid; place-items:center; transition:var(--transition);
  flex-shrink:0; cursor:pointer; backdrop-filter:blur(10px);
}
.topbar__icon-btn:hover { background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.35); transform:translateY(-1px); }
.topbar__icon-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.badge-dot { position:absolute; top:6px; right:6px; width:8px; height:8px; background:#EF4444; border-radius:50%; border:2px solid #00BFA6; }

.menu-toggle { display:none; width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.20); color:#fff; cursor:pointer; align-items:center; justify-content:center; flex-shrink:0; backdrop-filter:blur(10px); transition:var(--transition); }
.menu-toggle:hover { background:rgba(255,255,255,.28); }
.menu-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

/* User chip */
.user-menu-wrap { position:relative; z-index:600; }
.user-menu-btn {
  display:flex; align-items:center; gap:10px; padding:5px 12px 5px 6px; height:44px;
  border-radius:12px; background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.20); color:#fff;
  transition:var(--transition); cursor:pointer; backdrop-filter:blur(10px);
}
.user-menu-btn:hover { background:rgba(255,255,255,.25); }
.user-menu-btn .avatar {
  width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.95);
  color:var(--brand-darker); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; flex-shrink:0; box-shadow:0 3px 8px rgba(0,0,0,.12);
}
.user-menu-btn .name { font-size:12.5px; font-weight:600; color:#fff; white-space:nowrap; }
.user-menu-btn .chevron { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.85; transition:transform .22s; flex-shrink:0; }

.user-menu-dropdown {
  position:absolute; top:calc(100% + 10px); left:0; min-width:220px;
  background:var(--white); border-radius:14px; border:1px solid var(--border-2);
  border-top:3px solid var(--brand);
  box-shadow:0 24px 60px rgba(15,25,34,.18),0 4px 12px rgba(15,25,34,.08);
  padding:8px; display:flex; flex-direction:column; gap:2px;
  z-index:9999; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:var(--transition); pointer-events:none;
}
.user-menu-dropdown.show { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.menu-item {
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px;
  font-size:13px; font-weight:500; color:var(--text-1); transition:var(--transition);
  width:100%; text-align:right; cursor:pointer;
}
.menu-item svg { width:16px; height:16px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.menu-item:hover { background:var(--brand-soft); color:var(--brand-darker); }
.menu-item.danger { color:var(--danger); }
.menu-item.danger:hover { background:#FEF2F2; color:#991B1B; }
[data-theme="dark"] .menu-item.danger:hover { background:rgba(239,68,68,.12); }
.menu-divider { height:1px; background:var(--border-1); margin:4px 0; }
.theme-switch { display:flex; align-items:center; justify-content:space-between; width:100%; padding:11px 14px; font-size:13px; font-weight:500; color:var(--text-1); cursor:pointer; border-radius:10px; transition:background .2s; }
.theme-switch:hover { background:var(--bg-2); }
.theme-switch .left { display:flex; align-items:center; gap:12px; }
.theme-switch .left svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.toggle-track { width:34px; height:20px; background:var(--border-2); border-radius:20px; position:relative; transition:background .3s; flex-shrink:0; }
.toggle-thumb { width:16px; height:16px; background:#fff; border-radius:50%; position:absolute; top:2px; right:2px; transition:transform .3s; box-shadow:0 2px 4px rgba(0,0,0,.2); }
[data-theme="dark"] .toggle-track { background:var(--brand); }
[data-theme="dark"] .toggle-thumb { transform:translateX(-14px); }

/* ═══ KPI CARDS ═══ */
.kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; flex-shrink:0; }
@media (max-width:1400px) { .kpi-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px)  { .kpi-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:500px)  { .kpi-grid { grid-template-columns:1fr; } }

.kpi-card {
  position:relative; border-radius:16px; padding:14px 16px 12px;
  color:#fff; overflow:hidden; isolation:isolate; border:none;
  display:flex; flex-direction:column; gap:6px; align-items:stretch;
  min-height:104px; transition:transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s;
}
.kpi-card:hover { transform:translateY(-3px); }
.kpi-card--teal   { background:var(--card-1); box-shadow:0 6px 16px rgba(38,166,154,.28); }
.kpi-card--orange { background:var(--card-2); box-shadow:0 6px 16px rgba(255,112,67,.28); }
.kpi-card--purple { background:var(--card-3); box-shadow:0 6px 16px rgba(126,87,194,.28); }
.kpi-card--blue   { background:var(--card-4); box-shadow:0 6px 16px rgba(66,165,245,.28); }

.kpi-card__watermark { position:absolute; bottom:-25px; left:-20px; width:120px; height:120px; opacity:.13; color:#fff; pointer-events:none; z-index:0; transition:opacity .35s, transform .35s; transform:rotate(-8deg); }
.kpi-card__watermark svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; display:block; }
.kpi-card:hover .kpi-card__watermark { opacity:.21; transform:rotate(-8deg) scale(1.05); }
.kpi-card__content { position:relative; z-index:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.kpi-card__icon {
  width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.30); display:flex; align-items:center; justify-content:center;
  color:#fff; backdrop-filter:blur(6px); flex-shrink:0; align-self:flex-start; margin-bottom:4px;
}
.kpi-card__icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.kpi-card__label { font-size:11px; color:rgba(255,255,255,.90); font-weight:600; }
.kpi-card__value { font-size:19px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; line-height:1.15; text-shadow:0 1px 2px rgba(0,0,0,.10); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ═══ CHART CARDS ═══ */
.dash-row-main { display:grid; grid-template-columns:2fr 1fr; gap:14px; }
.dash-row-3    { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.dash-row-2    { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:1200px) { .dash-row-main,.dash-row-3,.dash-row-2 { grid-template-columns:1fr; } }

.chart-card {
  display:flex; flex-direction:column; padding:18px;
  background:var(--white); border-radius:16px; border:1px solid var(--border-1);
  box-shadow:var(--shadow-sm); min-height:280px; height:280px;
  transition:box-shadow .25s ease; position:relative; overflow:hidden;
  animation:fadeIn .5s ease both;
}
[data-theme="dark"] .chart-card { background:var(--surface); }
.chart-card:hover { box-shadow:var(--shadow-md); }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} }
@media (max-width:760px) { .chart-card { min-height:260px; height:260px; } }

.chart-head {
  display:flex !important; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:10px; padding-bottom:8px;
  border-bottom:1px solid var(--border-1); flex-shrink:0;
}
.chart-head::before { content:''; width:3px; height:14px; border-radius:3px; background:var(--brand); flex-shrink:0; }
.chart-head h3 { margin:0; font-size:13.5px; font-weight:700; color:var(--text-1); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chart-actions { display:flex; gap:6px; align-items:center; flex-shrink:0; margin-right:auto; }
.chart-fullscreen-btn {
  width:30px; height:30px; border-radius:8px; background:var(--brand-soft);
  border:1px solid var(--border-3); color:var(--brand-darker);
  cursor:pointer; display:grid; place-items:center; transition:var(--transition); padding:0; flex-shrink:0;
}
.chart-fullscreen-btn:hover { background:var(--brand); color:#fff; border-color:transparent; transform:scale(1.08); box-shadow:0 4px 10px rgba(0,191,166,.28); }
.chart-fullscreen-btn svg { width:15px; height:15px; display:block; }
.chart-fullscreen-btn .icon-compress { display:none; }
.chart-fullscreen-btn.active .icon-expand { display:none; }
.chart-fullscreen-btn.active .icon-compress { display:block; }

.chart-body {
  position:relative; width:100%; flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.chart-body svg { display:block; width:100% !important; height:100% !important; }
.chart-body--donut { padding:8px 0; }
.chart-body--bars  { align-items:stretch; padding:4px 0; }
.chart-body--list  { align-items:stretch; overflow-y:auto; padding:4px 0; }

/* LINE CHART */
.line-chart { display:flex !important; flex-direction:column; align-items:stretch !important; justify-content:stretch !important; padding:0; overflow:visible !important; }
.line-chart__area { position:relative; flex:1 1 auto; min-height:0; padding:8px 12px; color:var(--text-2); }
.line-chart__svg { width:100%; height:100%; display:block; overflow:visible; }
.line-chart__dots { position:absolute; top:8px; right:12px; bottom:8px; left:12px; pointer-events:none; }
.line-chart__dot {
  position:absolute; width:10px; height:10px; border-radius:50%; background:#fff;
  border:2.5px solid #00BFA6; transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px rgba(0,191,166,.18); transition:transform .2s ease;
}
.line-chart__dot:hover { transform:translate(-50%,-50%) scale(1.3); }
.line-chart__dot--last { width:14px; height:14px; border-width:3px; background:#00BFA6; box-shadow:0 0 0 4px rgba(0,191,166,.22); }
.line-chart__labels { display:flex; justify-content:space-between; padding:4px 12px 4px; font-size:11px; color:var(--text-3); font-weight:600; flex-shrink:0; }

/* DONUT */
.donut-chart { width:160px; height:160px; border-radius:50%; position:relative; box-shadow:0 10px 30px -8px rgba(0,0,0,.15); }
.donut-chart--ranks { background:conic-gradient(#26A69A 0 38%,#42A5F5 38% 63%,#FFA726 63% 81%,#FF7043 81% 93%,#7E57C2 93% 100%); }
.donut-chart::after { content:''; position:absolute; inset:32%; background:var(--white); border-radius:50%; box-shadow:inset 0 2px 6px rgba(0,0,0,.06); }
[data-theme="dark"] .donut-chart::after { background:var(--surface); }
.donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2; }
.donut-value { font-size:24px; font-weight:900; color:var(--text-1); line-height:1; letter-spacing:-.5px; }
.donut-label { font-size:10.5px; color:var(--text-3); font-weight:600; margin-top:3px; }

/* VERTICAL BARS */
.v-bar-chart { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; width:100%; height:100%; padding-top:14px; }
.v-bar-item { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; height:100%; justify-content:flex-end; min-width:0; }
.v-bar {
  width:100%; max-width:32px; border-radius:8px 8px 4px 4px; position:relative;
  display:flex; align-items:flex-start; justify-content:center; padding-top:6px;
  transition:var(--transition); background:linear-gradient(180deg,var(--bar-from),var(--bar-to));
  box-shadow:0 4px 12px -2px var(--bar-from); cursor:pointer; min-height:24px;
}
.v-bar::before { content:''; position:absolute; top:0; left:0; right:0; height:50%; background:linear-gradient(180deg,rgba(255,255,255,.25),transparent); border-radius:8px 8px 0 0; pointer-events:none; }
.v-bar:hover { transform:translateY(-4px); box-shadow:0 8px 20px -2px var(--bar-from); }
.v-bar-value { font-size:10.5px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; text-shadow:0 1px 2px rgba(0,0,0,.3); position:relative; z-index:1; }
.v-bar-label { font-size:11px; color:var(--text-2); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* HORIZONTAL BARS */
.h-bar-list { display:flex; flex-direction:column; gap:12px; width:100%; padding-top:4px; }
.h-bar-item { display:flex; flex-direction:column; gap:6px; }
.h-bar-header { display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:600; color:var(--text-1); }
.h-bar-header span:last-child { font-weight:800; color:var(--text-2); font-variant-numeric:tabular-nums; }
.h-bar-track { height:8px; background:rgba(0,0,0,.05); border-radius:4px; overflow:hidden; position:relative; }
[data-theme="dark"] .h-bar-track { background:rgba(255,255,255,.08); }
.h-bar-fill {
  height:100%; border-radius:4px;
  background:linear-gradient(90deg,var(--fill-from),var(--fill-to));
  transition:width .8s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 3px rgba(0,0,0,.15); position:relative; overflow:hidden;
}
.h-bar-fill::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); animation:shine 2.5s ease-in-out infinite; }
@keyframes shine { 0%{transform:translateX(-100%);} 100%{transform:translateX(200%);} }

/* AI CARD */
.ai-card {
  background:linear-gradient(135deg,#00BFA6 0%,#00967F 100%);
  border-radius:18px; padding:22px; color:#fff; display:flex; flex-direction:column;
  position:relative; overflow:hidden; min-height:280px;
  box-shadow:0 10px 30px -8px rgba(0,191,166,.40);
}
[data-theme="dark"] .ai-card { background:linear-gradient(135deg,#0E3A33 0%,#072E29 100%); box-shadow:0 10px 30px -8px rgba(0,0,0,.5); }
.ai-card::before { content:''; position:absolute; top:-50px; right:-50px; width:200px; height:200px; background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 65%); border-radius:50%; pointer-events:none; }
.ai-header { display:flex; align-items:center; gap:12px; margin-bottom:14px; position:relative; z-index:2; }
.ai-header-icon {
  width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.2);
  backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.25);
  display:grid; place-items:center; flex-shrink:0;
}
.ai-header-icon svg { width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ai-header h3 { font-size:15px; font-weight:800; line-height:1.2; margin-bottom:3px; }
.ai-live { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; color:rgba(255,255,255,.85); }
.ai-live-dot { width:6px; height:6px; border-radius:50%; background:#4ADE80; box-shadow:0 0 0 3px rgba(74,222,128,.3); animation:aiLivePulse 1.8s ease-in-out infinite; }
@keyframes aiLivePulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(.9);} }
.ai-text { font-size:12.5px; line-height:1.85; color:rgba(255,255,255,.92); margin-bottom:14px; position:relative; z-index:2; flex:1; }
.ai-text strong { color:#fff; font-weight:800; background:rgba(255,255,255,.15); padding:1px 6px; border-radius:4px; }
.ai-tags-row { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:14px; position:relative; z-index:2; }
.ai-tag { display:flex; align-items:center; justify-content:center; gap:5px; padding:7px 6px; border-radius:10px; font-size:10.5px; font-weight:700; white-space:nowrap; backdrop-filter:blur(8px); transition:transform .2s ease; cursor:default; min-width:0; }
.ai-tag:hover { transform:translateY(-2px); }
.ai-tag svg { width:11px; height:11px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.ai-tag-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 2px currentColor; opacity:.9; }
.ai-tag--danger  { background:rgba(239,68,68,.2); color:#FCA5A5; border:1px solid rgba(239,68,68,.35); }
.ai-tag--danger .ai-tag-dot { background:#EF4444; color:#EF4444; }
.ai-tag--success { background:rgba(34,197,94,.2); color:#86EFAC; border:1px solid rgba(34,197,94,.35); }
.ai-tag--info    { background:rgba(59,130,246,.2); color:#93C5FD; border:1px solid rgba(59,130,246,.35); }
.ai-btn { background:#fff; color:#00967F; padding:11px 16px; border-radius:10px; font-size:13px; font-weight:800; transition:all .2s ease; position:relative; z-index:2; box-shadow:0 4px 12px rgba(0,0,0,.1); }
.ai-btn:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.15); }

/* TOP PERFORMERS */
.perf-list { display:flex; flex-direction:column; gap:9px; width:100%; padding-top:4px; }
.perf-item {
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px;
  background:var(--bg-2); border:1px solid var(--border-1); transition:all .2s ease;
}
.perf-item:hover { transform:translateX(-3px); box-shadow:var(--shadow-md); border-color:var(--brand); }
.perf-rank { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:12px; font-weight:900; background:var(--bg-1); color:var(--text-2); flex-shrink:0; border:1px solid var(--border-1); }
.perf-rank--gold   { background:linear-gradient(135deg,#FFE082,#FFA000); color:#7A4A00; border-color:transparent; box-shadow:0 3px 10px rgba(255,193,7,.4); }
.perf-rank--silver { background:linear-gradient(135deg,#F5F5F5,#B0BEC5); color:#37474F; border-color:transparent; box-shadow:0 3px 10px rgba(176,190,197,.4); }
.perf-rank--bronze { background:linear-gradient(135deg,#FFCC80,#C48542); color:#4A2400; border-color:transparent; box-shadow:0 3px 10px rgba(205,127,50,.4); }
.perf-avatar { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:14px; flex-shrink:0; box-shadow:0 4px 10px rgba(0,0,0,.15); }
.perf-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.perf-name { font-size:12.5px; font-weight:700; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.perf-dept { font-size:10.5px; color:var(--text-3); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.perf-score { font-size:17px; font-weight:900; color:var(--text-1); font-variant-numeric:tabular-nums; flex-shrink:0; }

/* FULLSCREEN */
body.chart-fullscreen-active { overflow:hidden !important; }
body.chart-fullscreen-active .sidebar,
body.chart-fullscreen-active .topbar-wrap,
body.chart-fullscreen-active .app-footer { display:none !important; }
body.chart-fullscreen-active .main-content,
body.chart-fullscreen-active .page-scroll { padding:0 !important; gap:0 !important; overflow:hidden !important; }
.chart-card.is-fullscreen {
  position:fixed !important; inset:0 !important; z-index:99999 !important;
  width:100vw !important; height:100vh !important; max-height:100vh !important;
  border-radius:0 !important; padding:24px 28px !important; margin:0 !important;
  background:var(--white) !important; display:flex !important; flex-direction:column !important;
  box-shadow:none !important; border:none !important;
}
[data-theme="dark"] .chart-card.is-fullscreen { background:var(--bg-1) !important; }
.chart-card.is-fullscreen .chart-head { padding-bottom:14px; margin-bottom:14px; border-bottom:2px solid var(--border-2); }
.chart-card.is-fullscreen .chart-head h3 { font-size:18px; font-weight:800; }
.chart-card.is-fullscreen .chart-fullscreen-btn { width:42px; height:42px; border-radius:11px; }
.chart-card.is-fullscreen .chart-fullscreen-btn svg { width:20px; height:20px; }
.chart-card.is-fullscreen .chart-body { flex:1 1 auto !important; min-height:0 !important; }
.chart-card.is-fullscreen .line-chart__labels { padding-top:14px; font-size:13px; }

/* HUB PAGES */
.hub-header { margin-bottom:8px; }
.hub-header h2 { font-size:24px; font-weight:900; color:var(--text-1); margin-bottom:8px; }
.hub-header p { font-size:14px; color:var(--text-2); }
.hub-section { display:flex; flex-direction:column; gap:12px; }
.section-title { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; color:var(--text-1); }
.section-title .dot { width:6px; height:20px; background:var(--brand); border-radius:3px; flex-shrink:0; }
.hub-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
@media (max-width:1280px) { .hub-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:992px)  { .hub-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px)  { .hub-grid { grid-template-columns:1fr; } }
.hub-card {
  position:relative; display:flex; flex-direction:column; padding:20px;
  border-radius:16px; color:#fff; overflow:hidden; min-height:130px;
  border:1px solid rgba(255,255,255,.10); box-shadow:var(--shadow-md);
  transition:transform .3s ease, box-shadow .3s ease;
}
.hub-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-xl); }
.hub-card__watermark { position:absolute; bottom:-16px; left:-16px; width:112px; height:112px; color:#fff; opacity:.15; pointer-events:none; transition:transform .5s ease, opacity .5s ease; }
.hub-card__watermark svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.hub-card:hover .hub-card__watermark { transform:scale(1.1); opacity:.25; }
.hub-card__content { position:relative; z-index:10; display:flex; flex-direction:column; justify-content:center; flex:1; }
.hub-card__icon { width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.2); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-bottom:14px; }
.hub-card__icon svg { width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hub-card__title { font-size:14px; font-weight:700; margin-bottom:4px; color:#fff; line-height:1.4; }
.hub-card__desc { font-size:12px; color:rgba(255,255,255,.8); line-height:1.5; }
.hub-card--teal    { background:linear-gradient(135deg,#14B8A6,#0F766E); }
.hub-card--blue    { background:linear-gradient(135deg,#3B82F6,#1D4ED8); }
.hub-card--purple  { background:linear-gradient(135deg,#A855F7,#7E22CE); }
.hub-card--orange  { background:linear-gradient(135deg,#F97316,#C2410C); }
.hub-card--pink    { background:linear-gradient(135deg,#EC4899,#BE185D); }
.hub-card--green   { background:linear-gradient(135deg,#22C55E,#15803D); }
.hub-card--amber   { background:linear-gradient(135deg,#F59E0B,#B45309); }
.hub-card--red     { background:linear-gradient(135deg,#EF4444,#B91C1C); }
.hub-card--violet  { background:linear-gradient(135deg,#8B5CF6,#6D28D9); }
.hub-card--indigo  { background:linear-gradient(135deg,#6366F1,#4338CA); }
.hub-card--sky     { background:linear-gradient(135deg,#0EA5E9,#0369A1); }
.hub-card--rose    { background:linear-gradient(135deg,#F43F5E,#9F1239); }
.hub-card--emerald { background:linear-gradient(135deg,#10B981,#047857); }
.hub-card--yellow  { background:linear-gradient(135deg,#EAB308,#A16207); }
.hub-card--indigo-2 { background:linear-gradient(135deg,#818CF8,#4F46E5); }
.hub-card--green-2  { background:linear-gradient(135deg,#4ADE80,#16A34A); }
.hub-card--orange-2 { background:linear-gradient(135deg,#FB923C,#EA580C); }
.hub-card--purple-2 { background:linear-gradient(135deg,#C084FC,#9333EA); }
.hub-card--pink-2   { background:linear-gradient(135deg,#F472B6,#DB2777); }
.hub-card--amber-2  { background:linear-gradient(135deg,#FBBF24,#D97706); }

/* UNDER CONSTRUCTION */
.under-construction-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding:24px; position:relative; overflow:hidden; }
.uc-bg-1,.uc-bg-2 { position:absolute; width:384px; height:384px; border-radius:50%; filter:blur(64px); pointer-events:none; animation:ucPulse 4s cubic-bezier(.4,0,.6,1) infinite; }
.uc-bg-1 { top:25%; left:25%; background:#00BFA6; opacity:.2; }
.uc-bg-2 { bottom:25%; right:25%; background:#c084fc; opacity:.2; animation-delay:2s; }
[data-theme="dark"] .uc-bg-1,[data-theme="dark"] .uc-bg-2 { opacity:.1; }
@keyframes ucPulse { 0%,100%{opacity:.2;} 50%{opacity:.1;} }
.uc-card { position:relative; z-index:10; max-width:512px; width:100%; background:var(--white); border:1px solid var(--border-1); border-radius:24px; padding:40px; text-align:center; box-shadow:var(--shadow-xl); }
[data-theme="dark"] .uc-card { background:var(--surface); }
.uc-icon { width:96px; height:96px; border-radius:50%; background:rgba(0,191,166,.1); display:flex; align-items:center; justify-content:center; margin:0 auto 24px; }
.uc-icon svg { width:48px; height:48px; fill:none; stroke:#00BFA6; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.uc-title { font-size:24px; font-weight:900; color:var(--text-1); margin-bottom:12px; }
.uc-text { font-size:14px; color:var(--text-2); line-height:1.7; margin-bottom:32px; }
.uc-text strong { color:var(--text-1); font-weight:700; }
.uc-btn { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,#00BFA6,#00967F); color:#fff; padding:14px 24px; border-radius:12px; font-weight:700; font-size:14px; box-shadow:0 10px 20px -5px rgba(0,191,166,.4); transition:all .3s ease; }
.uc-btn:hover { transform:translateY(-1px); box-shadow:0 15px 30px -5px rgba(0,191,166,.5); }
.uc-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* MODALS */
.modal-overlay {
  position:fixed; inset:0; width:100vw; height:100vh;
  background:rgba(15,25,34,.60); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; z-index:100000; padding:20px; overflow:auto;
}
.modal-overlay.active { display:flex; }
.modal {
  position:relative; background:var(--white); border-radius:20px; width:100%; max-width:480px;
  max-height:calc(100vh - 40px); display:flex; flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.10) inset;
  border:1px solid var(--border-1); overflow:hidden;
  animation:modalIn .3s cubic-bezier(.4,0,.2,1) both; z-index:1;
}
@keyframes modalIn { from{opacity:0;transform:translateY(24px) scale(.96);} to{opacity:1;transform:none;} }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border-1); flex-shrink:0; background:var(--brand-soft); }
.modal-title { font-size:15px; font-weight:700; color:var(--brand-darker); }
.modal-close { width:34px; height:34px; border-radius:10px; border:none; background:rgba(0,191,166,.10); color:var(--brand-darker); cursor:pointer; display:grid; place-items:center; transition:var(--transition); font-size:16px; line-height:1; }
.modal-close:hover { background:var(--danger); color:#fff; transform:rotate(90deg); }
.modal-body { padding:20px 22px; overflow-y:auto; flex:1; min-height:0; display:flex; flex-direction:column; gap:14px; }
.form-group label { display:block; font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:6px; }
.form-control {
  width:100%; height:44px; padding:0 16px;
  border:1.5px solid var(--border-2); border-radius:12px;
  font-family:inherit; font-size:13.5px; transition:var(--transition);
  background:var(--white); color:var(--text-1); outline:none;
}
[data-theme="dark"] .form-control { background:rgba(10,20,24,.5); }
.form-control::placeholder { color:var(--text-3); }
.form-control:focus { border-color:var(--brand); box-shadow:0 0 0 4px rgba(0,191,166,.10); }
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--brand); color:#fff; border:none; border-radius:12px;
  padding:0 22px; height:44px; font-size:13.5px; font-weight:600;
  cursor:pointer; transition:var(--transition);
  box-shadow:0 4px 14px rgba(0,191,166,.28);
}
.btn-primary:hover { background:var(--brand-dark); transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,191,166,.35); color:#fff; }

/* ALERTS */
.alert { padding:14px 18px; border-radius:12px; margin-bottom:14px; font-size:13.5px; font-weight:500; border:1px solid transparent; animation:slideIn .3s ease both; }
@keyframes slideIn { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:none;} }
.alert-danger  { background:#FEF2F2; color:#991B1B; border-color:#FECACA; }
.alert-success { background:#ECFDF5; color:#065F46; border-color:#A7F3D0; }
[data-theme="dark"] .alert-danger { background:rgba(239,68,68,.12); color:#FCA5A5; border-color:rgba(239,68,68,.20); }
[data-theme="dark"] .alert-success { background:rgba(16,185,129,.12); color:#6EE7B7; border-color:rgba(16,185,129,.20); }

/* FOOTER */
.app-footer {
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:12px 0 10px; font-size:11.5px; color:var(--text-3);
  flex-shrink:0; font-weight:500;
}
.app-footer .sep { color:var(--brand); font-size:14px; line-height:1; }

/* ═══ LOGIN (بدون تغییر) ═══ */
body.login-active { background:#F7F9FB !important; background-image:none !important; }
[data-theme="dark"] body.login-active { background:#0A1418 !important; }
.login-page { min-height:100vh; width:100%; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; padding:16px; background:#F7F9FB; transition:background-color .3s ease; }
[data-theme="dark"] .login-page { background:#0A1418; }
.login-bg-1,.login-bg-2 { position:absolute; width:384px; height:384px; border-radius:50%; filter:blur(64px); opacity:.2; pointer-events:none; mix-blend-mode:multiply; }
[data-theme="dark"] .login-bg-1,[data-theme="dark"] .login-bg-2 { opacity:.1; }
.login-bg-1 { top:-10%; right:-5%; background:#00BFA6; }
.login-bg-2 { bottom:-10%; left:-5%; background:#00967F; }
.login-card { position:relative; z-index:10; display:flex; flex-direction:row; width:100%; max-width:1024px; background:#FFFFFF; border-radius:24px; overflow:hidden; box-shadow:0 25px 50px -12px rgba(0,0,0,.25); margin:16px; transition:background-color .3s ease; }
[data-theme="dark"] .login-card { background:#112128; }
.login-left { width:50%; background:linear-gradient(135deg,#00BFA6 0%,#00967F 100%); padding:48px; color:#FFFFFF; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.login-left-top { position:relative; z-index:10; }
.login-brand { display:flex; align-items:center; gap:12px; margin-bottom:32px; }
.login-brand img { width:48px; height:48px; border-radius:12px; flex-shrink:0; }
.login-brand h2 { font-size:24px; font-weight:700; color:#FFFFFF; line-height:1.3; }
.login-tagline { font-size:18px; line-height:1.625; color:rgba(255,255,255,.9); margin-bottom:24px; }
.login-left-bottom { position:relative; z-index:10; }
.progress-bars { display:flex !important; align-items:center !important; gap:16px; margin-bottom:8px; height:6px; }
.progress-bars .bar { display:block !important; height:6px !important; background:rgba(255,255,255,.4) !important; border-radius:9999px; flex-shrink:0; min-height:6px; min-width:6px; visibility:visible !important; opacity:1 !important; }
.progress-bars .bar-1 { width:48px !important; background:rgba(255,255,255,.5) !important; }
.progress-bars .bar-2 { width:16px !important; }
.progress-bars .bar-3 { width:16px !important; }
.login-left-bottom .version { font-size:14px; color:rgba(255,255,255,.7); line-height:1.5; }
.login-right { width:50%; padding:40px; display:flex; flex-direction:column; justify-content:center; background:#FFFFFF; transition:background-color .3s ease; }
[data-theme="dark"] .login-right { background:#112128; }
.login-welcome { text-align:center; margin-bottom:40px; display:flex; flex-direction:column; align-items:center; }
.login-welcome-icon { width:72px; height:72px; border-radius:18px; background:#FFFFFF; display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:0 10px 25px -5px rgba(0,191,166,.35),0 4px 10px -2px rgba(0,0,0,.08); padding:10px; flex-shrink:0; border:1px solid #F3F4F6; }
.login-welcome-icon img { width:100%; height:100%; object-fit:contain; border-radius:12px; display:block; }
[data-theme="dark"] .login-welcome-icon { background:#FFFFFF; border-color:#374151; }
.login-welcome h3 { font-size:24px; font-weight:700; color:#1F2937; margin-bottom:8px; line-height:1.3; width:100%; }
[data-theme="dark"] .login-welcome h3 { color:#FFFFFF; }
.login-welcome p { font-size:14px; color:#6B7280; line-height:1.5; }
[data-theme="dark"] .login-welcome p { color:#9CA3AF; }
.login-form { display:flex; flex-direction:column; gap:24px; }
.login-field { display:flex; flex-direction:column; }
.login-field label { display:block; font-size:14px; font-weight:500; color:#374151; margin-bottom:8px; line-height:1.5; }
[data-theme="dark"] .login-field label { color:#D1D5DB; }
.input-wrap { position:relative; }
.input-wrap svg { position:absolute; right:12px; top:50%; transform:translateY(-50%); width:20px; height:20px; fill:none; stroke:#9CA3AF; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; z-index:1; }
.input-wrap input { width:100%; padding:12px 40px 12px 12px; border:1px solid #E5E7EB; border-radius:12px; background:#F9FAFB; color:#1F2937; font-size:14px; line-height:1.5; transition:all .2s ease; outline:none; font-family:inherit; }
[data-theme="dark"] .input-wrap input { background:#1F2937; border-color:#374151; color:#FFFFFF; }
.input-wrap input::placeholder { color:#9CA3AF; }
.input-wrap input:focus { border-color:#00BFA6; background:#FFFFFF; box-shadow:0 0 0 2px rgba(0,191,166,.5); }
[data-theme="dark"] .input-wrap input:focus { background:#1F2937; }
.login-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.login-actions label { display:flex; align-items:center; gap:8px; color:#374151; cursor:pointer; font-size:14px; font-weight:400; line-height:1.5; margin:0; }
[data-theme="dark"] .login-actions label { color:#D1D5DB; }
.login-actions input[type="checkbox"] { width:16px; height:16px; accent-color:#00BFA6; cursor:pointer; flex-shrink:0; }
.login-actions a { color:#00967F; font-size:14px; font-weight:500; line-height:1.5; transition:color .2s; white-space:nowrap; }
[data-theme="dark"] .login-actions a { color:#00BFA6; }
.login-actions a:hover { color:#00BFA6; text-decoration:underline; }
.login-btn { width:100%; padding:12px 16px; background:#00BFA6; color:#FFFFFF; border-radius:12px; font-size:14px; font-weight:700; line-height:1.5; transition:all .2s ease; font-family:inherit; cursor:pointer; box-shadow:0 1px 2px 0 rgba(0,0,0,.05); border:1px solid transparent; }
.login-btn:hover { background:#00967F; }
.login-btn:focus { outline:none; box-shadow:0 0 0 2px #00BFA6,0 0 0 4px rgba(0,191,166,.3); }

/* ═══ RESPONSIVE ═══ */
@media (max-width:900px) {
  .user-menu-btn .name { display:none; }
  .topbar__search { width:180px; }
}
@media (max-width:767px) {
  .login-card { flex-direction:column; }
  .login-left { width:100%; padding:32px; }
  .login-right { width:100%; padding:40px 32px; }
  .login-brand h2 { font-size:20px; }
  .login-tagline { font-size:16px; margin-bottom:16px; }
  .login-welcome-icon { width:64px; height:64px; border-radius:16px; }
}
@media (max-width:640px) {
  .menu-toggle { display:inline-flex; }
  .sidebar { position:fixed; top:0; right:0; bottom:0; width:var(--sidebar-w-open) !important; transform:translateX(100%); transition:transform .3s ease; z-index:99999; }
  .sidebar.open { transform:translateX(0); }
  .sidebar__logo-text,.sidebar__link-label { display:inline-block !important; }
  .sidebar.open .sidebar__link { justify-content:flex-start; }
  .sidebar:not(.open) .sidebar__link::after { display:none; }
  .sidebar__toggle { display:none; }
  .main-content { padding:14px; }
  .topbar { padding:10px 14px; min-height:56px; }
  .topbar__title { font-size:15px; }
  .topbar__search { display:none; }
  .page-scroll { gap:12px; }
  .hub-header h2 { font-size:20px; }
  .uc-card { padding:24px; }
  .uc-icon { width:72px; height:72px; margin-bottom:16px; }
  .uc-icon svg { width:36px; height:36px; }
  .uc-title { font-size:20px; }
}
@media (max-width:480px) {
  .login-page { padding:8px; }
  .login-card { margin:8px; border-radius:20px; }
  .login-left { padding:24px; }
  .login-right { padding:32px 20px; }
  .login-brand h2 { font-size:17px; }
  .login-tagline { font-size:14px; }
  .login-welcome { margin-bottom:24px; }
  .login-welcome h3 { font-size:20px; }
  .login-welcome-icon { width:56px; height:56px; border-radius:14px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════
   PAGE HEADER / TOOLBAR / DATA TABLE — reusable for all pages
   ═══════════════════════════════════════════════════════════ */

/* PAGE HEADER */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.page-header__title h2 {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-1);
  margin-bottom: 4px;
}
.page-header__title p {
  font-size: 13px;
  color: var(--text-2);
}
.page-header__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* TOOLBAR */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--border-1);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
  flex-shrink: 0;
}
[data-theme="dark"] .toolbar { background: var(--surface); }
.toolbar__search {
  position: relative;
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
}
.toolbar__search svg {
  position: absolute;
  right: 12px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--text-3);
  stroke-width: 2;
  pointer-events: none;
}
.toolbar__search input {
  width: 100%;
  height: 42px;
  padding: 0 40px 0 14px;
  border: 1.5px solid var(--border-1);
  border-radius: 10px;
  background: var(--bg-1);
  color: var(--text-1);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: var(--transition);
}
[data-theme="dark"] .toolbar__search input { background: rgba(10,20,24,.5); }
.toolbar__search input:focus {
  border-color: var(--brand);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(0,191,166,.10);
}
.toolbar__select {
  height: 42px;
  padding: 0 12px;
  border: 1.5px solid var(--border-1);
  border-radius: 10px;
  background: var(--bg-1);
  color: var(--text-1);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  outline: none;
  transition: var(--transition);
  min-width: 140px;
}
[data-theme="dark"] .toolbar__select { background: rgba(10,20,24,.5); }
.toolbar__select:focus { border-color: var(--brand); }

/* EXTENDED BUTTONS */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  height: 44px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  background: var(--white);
  color: var(--text-1);
  border: 1.5px solid var(--border-2);
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
}
[data-theme="dark"] .btn-outline { background: var(--surface); }
.btn-outline:hover {
  border-color: var(--brand);
  color: var(--brand-darker);
  background: var(--brand-soft);
}
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 20px;
  height: 44px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  background: var(--danger);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(239,68,68,.28);
  font-family: inherit;
}
.btn-danger:hover { background: #DC2626; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(239,68,68,.35); }
.btn-with-icon { gap: 8px; padding: 0 18px; }

/* DATA CARD + TABLE */
.data-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border-1);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .data-card { background: var(--surface); }
.data-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table thead th {
  background: var(--bg-2);
  padding: 12px 14px;
  text-align: right;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-1);
  white-space: nowrap;
  border-bottom: 2px solid var(--border-2);
  position: sticky;
  top: 0;
  z-index: 2;
}
[data-theme="dark"] .data-table thead th { background: rgba(10,20,24,.7); }
.data-table tbody tr {
  border-bottom: 1px solid var(--border-1);
  transition: background .15s;
}
.data-table tbody tr:nth-child(even) { background: rgba(0,191,166,.02); }
.data-table tbody tr:hover { background: rgba(0,191,166,.06); }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody td {
  padding: 12px 14px;
  color: var(--text-1);
  vertical-align: middle;
}
.data-table__num { color: var(--text-3); font-weight: 600; text-align: center !important; }
.data-table__code { font-weight: 700; color: var(--brand-darker); font-variant-numeric: tabular-nums; }
[data-theme="dark"] .data-table__code { color: var(--brand); }
.data-table__title { font-weight: 600; }
.data-table__footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-1);
  background: var(--bg-1);
  font-size: 12px;
  color: var(--text-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  flex-shrink: 0;
}
[data-theme="dark"] .data-table__footer { background: rgba(10,20,24,.3); }
.data-table__footer strong { color: var(--text-1); font-weight: 800; }

/* PAGINATION */
.pagination {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--bg-1);
  color: var(--text-1);
  border: 1px solid var(--border-1);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  cursor: pointer;
}
[data-theme="dark"] .pagination__item { background: rgba(10,20,24,.5); }
.pagination__item:hover {
  background: var(--brand-soft);
  color: var(--brand-darker);
  border-color: var(--brand);
}
.pagination__item.is-active {
  background: var(--brand);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(0,191,166,.30);
}

/* BADGES */
.symbol-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand-darker);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .5px;
  font-family: 'Vazirmatn', monospace;
  border: 1px solid var(--border-3);
}
[data-theme="dark"] .symbol-badge { background: rgba(0,191,166,.15); color: var(--brand); }
.chip-cat {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(59,130,246,.10);
  color: #1E40AF;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid rgba(59,130,246,.20);
}
[data-theme="dark"] .chip-cat { background: rgba(59,130,246,.15); color: #93C5FD; border-color: rgba(59,130,246,.30); }
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.status-badge--active {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}
.status-badge--active::before { background: var(--success); }
[data-theme="dark"] .status-badge--active { background: rgba(16,185,129,.15); color: #6EE7B7; border-color: rgba(16,185,129,.30); }
.status-badge--inactive {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}
.status-badge--inactive::before { background: var(--danger); }
[data-theme="dark"] .status-badge--inactive { background: rgba(239,68,68,.15); color: #FCA5A5; border-color: rgba(239,68,68,.30); }

/* ROW ACTIONS */
.row-actions { display: flex; gap: 4px; align-items: center; }
.btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-1);
  background: var(--bg-1);
  color: var(--text-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: var(--transition);
  padding: 0;
}
[data-theme="dark"] .btn-icon { background: rgba(10,20,24,.5); }
.btn-icon svg { width: 15px; height: 15px; }
.btn-icon:hover { transform: translateY(-1px); }
.btn-icon--edit:hover { background: var(--brand); color: #fff; border-color: transparent; box-shadow: 0 4px 10px rgba(0,191,166,.30); }
.btn-icon--delete:hover { background: var(--danger); color: #fff; border-color: transparent; box-shadow: 0 4px 10px rgba(239,68,68,.30); }

/* EMPTY STATE */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  gap: 10px;
}
.empty-state svg { width: 56px; height: 56px; color: var(--text-3); opacity: .5; margin-bottom: 4px; }
.empty-state h3 { font-size: 16px; font-weight: 700; color: var(--text-1); }
.empty-state p { font-size: 13px; color: var(--text-2); margin-bottom: 8px; }

/* MODAL EXTRAS */
.modal--lg { max-width: 680px; }
.modal--sm { max-width: 440px; }
.modal-header--danger { background: rgba(239,68,68,.08); }
.modal-header--danger .modal-title { color: #B91C1C; }
[data-theme="dark"] .modal-header--danger { background: rgba(239,68,68,.15); }
[data-theme="dark"] .modal-header--danger .modal-title { color: #FCA5A5; }
.modal-footer {
  display: flex;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--border-1);
  background: var(--white);
  flex-shrink: 0;
  justify-content: flex-start;
}
[data-theme="dark"] .modal-footer { background: var(--surface); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.required { color: var(--danger); font-weight: 700; }

/* TOGGLE SWITCH */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px 0;
  user-select: none;
}
.toggle-switch input { display: none; }
.toggle-switch__track {
  position: relative;
  width: 42px;
  height: 24px;
  background: var(--border-2);
  border-radius: 24px;
  transition: background .25s;
  flex-shrink: 0;
}
.toggle-switch__thumb {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform .25s;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.toggle-switch input:checked ~ .toggle-switch__track { background: var(--brand); }
.toggle-switch input:checked ~ .toggle-switch__track .toggle-switch__thumb { transform: translateX(-18px); }
.toggle-switch__label { font-size: 13px; color: var(--text-1); font-weight: 500; }

/* ═══ Toggle Switch — Fix position + green checked state ═══ */

/* Override .form-group label برای toggle (specificity بالاتر) */
.form-group label.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  cursor: pointer;
  user-select: none;
  line-height: 1.5;
}

.toggle-switch input { display: none; }

.toggle-switch__track {
  position: relative;
  width: 42px;
  height: 24px;
  background: #CBD5E1;
  border-radius: 24px;
  transition: background .25s;
  flex-shrink: 0;
}

[data-theme="dark"] .toggle-switch__track {
  background: rgba(255, 255, 255, .20);
}

/* ✅ حالت فعال: سبز واضح */
.toggle-switch input:checked ~ .toggle-switch__track {
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}

.toggle-switch__thumb {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform .25s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .20);
}

.toggle-switch input:checked ~ .toggle-switch__track .toggle-switch__thumb {
  transform: translateX(-18px);
}

.toggle-switch__label {
  font-size: 13px;
  color: var(--text-1);
  font-weight: 500;
}