/* ===================================================================
   ShopVPN Admin Panel — design tokens
   جهت‌گیری بصری: اتاق کنترل یک شبکه‌ی VPN. پس‌زمینه مثل نمای شب یک
   دیتاسنتر با خطوط شبکه‌ی محو، کارت‌ها به‌شکل شیشه‌ی مات شناور با نور
   لبه، لهجه‌ی «سیگنال» فیروزه‌ای برای زنده/تاییدشده، بنفش‌آبی برای
   لهجه‌ی دوم، کهربایی برای هشدار، مرجانی برای خطا. حلقه‌های سیگنال
   (signal ring) برای نسبت‌ها و درصدها امضای بصری پنل هستند — همان
   استعاره‌ی «قدرت آنتن / کیفیت اتصال» در دنیای VPN.
=================================================================== */

:root{
  --bg: #070B14;
  --panel: rgba(20,28,48,.55);
  --panel-solid: #121a2c;
  --panel-2: rgba(255,255,255,.045);
  --panel-2-hover: rgba(255,255,255,.075);
  --border: rgba(255,255,255,.09);
  --border-soft: rgba(255,255,255,.055);
  --border-strong: rgba(255,255,255,.16);

  --text: #F1F5FC;
  --text-muted: #8B96B9;
  --text-dim: #57608A;

  --signal: #2FE3BE;        /* سیگنال/اتصال زنده/تاییدشده */
  --signal-2: #1CC6A0;
  --signal-dim: rgba(47,227,190,.14);
  --indigo: #8C9BFF;        /* لهجه‌ی دوم */
  --indigo-2: #6E86FF;
  --indigo-dim: rgba(140,155,255,.14);
  --amber: #FFB74D;         /* هشدار */
  --amber-dim: rgba(255,183,77,.14);
  --coral: #FF6E7F;         /* خطر/رد */
  --coral-dim: rgba(255,110,127,.14);

  --font-body: "Vazirmatn", -apple-system, Tahoma, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Vazirmatn", monospace;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --shadow: 0 24px 60px -24px rgba(0,0,0,.65);
  --shadow-sm: 0 10px 24px -12px rgba(0,0,0,.5);
  --glow-signal: 0 0 0 1px rgba(47,227,190,.3), 0 10px 30px -10px rgba(47,227,190,.35);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
[hidden]{ display:none !important; }
body{
  margin:0;
  background:
    radial-gradient(1100px 560px at 88% -8%, rgba(47,227,190,.10) 0%, transparent 55%),
    radial-gradient(900px 520px at -8% 8%, rgba(140,155,255,.10) 0%, transparent 55%),
    radial-gradient(1000px 700px at 50% 115%, rgba(28,198,160,.06) 0%, transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100%;
  position:relative;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(1100px 700px at 60% 0%, #000 0%, transparent 75%);
}
h1,h2,h3,h4{ font-family:var(--font-body); margin:0; }
::selection{ background:var(--signal-dim); color:var(--text); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:20px; }
::-webkit-scrollbar-track{ background:transparent; }

button, input, select, textarea{ font-family:inherit; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.icon{ width:18px; height:18px; flex-shrink:0; }

/* ---------------------------------------------------------- buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 17px; border-radius:11px; border:1px solid var(--border);
  background:var(--panel-2); color:var(--text); font-size:13.5px; font-weight:600;
  cursor:pointer; transition:.16s ease; white-space:nowrap;
}
.btn:hover{ border-color:var(--border-strong); background:var(--panel-2-hover); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-block{ width:100%; }
.btn-primary{
  background:linear-gradient(135deg,var(--signal),var(--signal-2)); color:#04241d; border-color:transparent;
  box-shadow:0 8px 20px -8px rgba(47,227,190,.55);
}
.btn-primary:hover{ filter:brightness(1.07); box-shadow:0 10px 26px -8px rgba(47,227,190,.7); }
.btn-ghost{ background:transparent; border-color:transparent; }
.btn-ghost:hover{ background:var(--panel-2); border-color:var(--border); }
.btn-danger{ background:var(--coral-dim); color:var(--coral); border-color:rgba(255,110,127,.25); }
.btn-danger:hover{ border-color:var(--coral); background:rgba(255,110,127,.2); }
.btn-sm{ padding:7px 13px; font-size:12.5px; border-radius:9px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ---------------------------------------------------------- login ----- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; padding:20px; z-index:1;
}
.login-signal{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  gap:16px; opacity:.45; pointer-events:none;
}
.login-signal span{
  width:3px; height:120px; border-radius:6px;
  background:linear-gradient(var(--signal), transparent);
  animation:pulse 2.4s ease-in-out infinite;
  filter:blur(.3px);
}
.login-signal span:nth-child(1){ animation-delay:0s; height:70px; }
.login-signal span:nth-child(2){ animation-delay:.2s; height:140px; }
.login-signal span:nth-child(3){ animation-delay:.4s; height:90px; }
.login-signal span:nth-child(4){ animation-delay:.6s; height:150px; }
.login-signal span:nth-child(5){ animation-delay:.8s; height:60px; }
@keyframes pulse{ 0%,100%{ opacity:.2; } 50%{ opacity:.95; } }

.login-card{
  position:relative; z-index:1; width:100%; max-width:390px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 40%), var(--panel-solid);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:36px 30px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:17px;
  backdrop-filter:blur(20px);
}
.login-brand{ text-align:center; margin-bottom:6px; }
.login-logo{
  width:56px; height:56px; margin:0 auto 16px; border-radius:16px;
  background:linear-gradient(135deg,var(--signal),var(--indigo)); color:#04141a;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px;
  font-family:var(--font-mono); box-shadow:var(--glow-signal);
}
.login-brand h1{ font-size:18.5px; font-weight:800; letter-spacing:-.01em; }
.login-brand p{ color:var(--text-muted); font-size:13px; margin-top:7px; }

.field{ display:flex; flex-direction:column; gap:7px; font-size:12.5px; color:var(--text-muted); font-weight:600; }
.field input{
  background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:11px;
  padding:12px 13px; color:var(--text); font-size:14px; outline:none; transition:.15s;
}
.field input:focus{ border-color:var(--signal); box-shadow:0 0 0 3px var(--signal-dim); background:rgba(255,255,255,.05); }
.login-error{
  background:var(--coral-dim); color:var(--coral); border:1px solid rgba(255,110,127,.3);
  border-radius:9px; padding:9px 13px; font-size:13px;
}

/* ---------------------------------------------------------- layout ---- */
.app{ display:flex; min-height:100vh; position:relative; z-index:1; }
.sidebar{
  width:256px; flex-shrink:0;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 30%), var(--panel-solid);
  border-left:1px solid var(--border);
  display:flex; flex-direction:column; padding:20px 14px; position:sticky; top:0; height:100vh;
}
.sidebar-brand{ display:flex; align-items:center; gap:11px; padding:6px 8px 22px; }
.brand-mark{
  width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,var(--signal),var(--indigo));
  color:#04141a; display:flex; align-items:center; justify-content:center; font-weight:800;
  font-family:var(--font-mono); font-size:13px; flex-shrink:0; box-shadow:var(--glow-signal);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.3; }
.brand-text strong{ font-size:14.5px; letter-spacing:-.01em; }
.brand-text span{ font-size:11px; color:var(--text-muted); }

/* nav-tunnel: خط عمودی گرادیانی که همه‌ی آیتم‌های منو را مثل یک تونل
   وی‌پی‌ان به‌هم وصل می‌کند - عنصر امضادار طراحی این پنل */
.nav-tunnel{ position:relative; flex:1; overflow-y:auto; overflow-x:hidden; padding-inline-start:4px; }
.nav-tunnel::before{
  content:""; position:absolute; right:23px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(var(--signal) 0%, var(--indigo) 55%, transparent 100%);
  opacity:.3; border-radius:2px;
}
.nav-item{
  position:relative; display:flex; align-items:center; gap:11px; padding:8px 10px;
  border-radius:11px; color:var(--text-muted); font-size:13.5px; font-weight:600;
  cursor:pointer; margin-bottom:3px; transition:.15s;
}
.nav-icon{
  position:relative; z-index:1; width:32px; height:32px; border-radius:10px; flex-shrink:0;
  background:var(--panel-2); border:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center; color:var(--text-dim); transition:.15s;
}
.nav-icon .icon{ width:16px; height:16px; }
.nav-item:hover{ color:var(--text); background:var(--panel-2); }
.nav-item:hover .nav-icon{ color:var(--text); border-color:var(--border-strong); }
.nav-item.active{ color:var(--text); background:linear-gradient(90deg,var(--signal-dim),transparent); }
.nav-item.active .nav-icon{
  background:linear-gradient(135deg,var(--signal),var(--signal-2)); color:#04241d; border-color:transparent;
  box-shadow:0 4px 14px -4px rgba(47,227,190,.6);
}
.nav-item .dot-count{
  margin-inline-start:auto; background:var(--coral-dim); color:var(--coral); font-size:10.5px;
  font-weight:700; padding:1px 7px; border-radius:20px; font-family:var(--font-mono);
}
.nav-section{ font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em;
  margin:18px 12px 7px; font-weight:700; }

.sidebar-footer{ border-top:1px solid var(--border-soft); padding-top:14px; margin-top:10px; }
.me-card{ display:flex; align-items:center; gap:10px; padding:6px 8px 12px; }
.me-avatar{
  width:36px; height:36px; border-radius:11px; background:var(--panel-2); color:var(--text);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-mono);
  border:1px solid var(--border); flex-shrink:0; font-size:12.5px;
}
.me-info{ display:flex; flex-direction:column; line-height:1.3; overflow:hidden; }
.me-info strong{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.me-info span{ font-size:11px; color:var(--text-muted); }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; padding:19px 28px;
  border-bottom:1px solid var(--border-soft); position:sticky; top:0; background:rgba(7,11,20,.72);
  backdrop-filter:blur(14px); z-index:5;
}
.topbar h2{ font-size:17.5px; font-weight:800; letter-spacing:-.01em; }
.topbar-actions{ display:flex; align-items:center; gap:11px; color:var(--text-muted); font-size:12.5px; }
.live-dot{
  width:8px; height:8px; border-radius:50%; background:var(--signal);
  box-shadow:0 0 0 0 rgba(47,227,190,.5); animation:live 2s infinite;
}
@keyframes live{ 0%{ box-shadow:0 0 0 0 rgba(47,227,190,.5); } 70%{ box-shadow:0 0 0 9px rgba(47,227,190,0); } }
.topbar-clock{ font-family:var(--font-mono); background:var(--panel-2); border:1px solid var(--border-soft);
  padding:6px 12px; border-radius:20px; }

.content{ padding:26px 28px 64px; flex:1; }

/* ---------------------------------------------------------- widgets --- */
.grid{ display:grid; gap:16px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:2fr 1fr; }
@media (max-width:1100px){ .grid-4{ grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:1fr;} .grid-2{grid-template-columns:1fr;} }
@media (max-width:640px){ .grid-4{ grid-template-columns:1fr;} }

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 45%), var(--panel);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; backdrop-filter:blur(16px); box-shadow:var(--shadow-sm);
  transition:.18s ease;
}
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; gap:10px; flex-wrap:wrap; }
.card-head h3{ font-size:14.5px; font-weight:700; }
.card-sub{ color:var(--text-muted); font-size:12px; }

.stat-card{ display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; }
.stat-card:hover{ border-color:var(--border-strong); transform:translateY(-2px); box-shadow:var(--shadow); }
.stat-top{ display:flex; align-items:center; justify-content:space-between; }
.stat-icon{
  width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-soft); flex-shrink:0;
}
.stat-icon .icon{ width:20px; height:20px; }
.stat-icon-signal{ background:var(--signal-dim); color:var(--signal); }
.stat-icon-indigo{ background:var(--indigo-dim); color:var(--indigo); }
.stat-icon-amber{ background:var(--amber-dim); color:var(--amber); }
.stat-icon-coral{ background:var(--coral-dim); color:var(--coral); }
.stat-card .label{ color:var(--text-muted); font-size:12.5px; font-weight:600; }
.stat-card .value{ font-family:var(--font-mono); font-size:25px; font-weight:700; letter-spacing:-.01em; }
.stat-card .delta{ font-size:12px; font-family:var(--font-mono); font-weight:700; padding:3px 9px; border-radius:20px; }
.delta.up{ color:var(--signal); background:var(--signal-dim); }
.delta.down{ color:var(--coral); background:var(--coral-dim); }

/* signal ring: امضای بصری برای نسبت/درصد، استعاره از قدرت آنتن اتصال */
.ring{
  --pct: 0; width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background: conic-gradient(var(--signal) calc(var(--pct)*1%), var(--border-soft) 0);
  display:flex; align-items:center; justify-content:center; position:relative;
  box-shadow:0 0 0 1px var(--border-soft);
}
.ring::before{ content:""; position:absolute; inset:5px; border-radius:50%; background:var(--panel-solid); }
.ring span{ position:relative; font-family:var(--font-mono); font-size:11.5px; font-weight:700; }

.badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:20px; font-size:11.5px; font-weight:700; }
.badge::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.badge-pending{ background:var(--amber-dim); color:var(--amber); }
.badge-approved{ background:var(--signal-dim); color:var(--signal); }
.badge-rejected{ background:var(--coral-dim); color:var(--coral); }
.badge-owner{ background:var(--indigo-dim); color:var(--indigo); }
.badge-admin{ background:var(--signal-dim); color:var(--signal); }
.badge-mid{ background:var(--amber-dim); color:var(--amber); }
.badge-support{ background:var(--panel-2); color:var(--text-muted); }

table{ width:100%; border-collapse:collapse; font-size:13px; }
thead th{ text-align:right; color:var(--text-muted); font-weight:700; font-size:11px; text-transform:uppercase;
  letter-spacing:.04em; padding:10px 12px; border-bottom:1px solid var(--border); }
tbody td{ padding:12px 12px; border-bottom:1px solid var(--border-soft); }
tbody tr{ transition:.12s; }
tbody tr:hover{ background:var(--panel-2); }
.table-wrap{ overflow-x:auto; margin:-4px -4px 0; padding:4px; }
.empty-state{ text-align:center; padding:54px 20px; color:var(--text-muted); }
.empty-state .icon{ width:30px; height:30px; margin:0 auto 12px; opacity:.55; color:var(--text-dim); }

.toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.input, select.input{
  background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:11px;
  padding:10px 13px; color:var(--text); font-size:13.5px; outline:none; transition:.15s;
}
.input:focus, select.input:focus{ border-color:var(--signal); box-shadow:0 0 0 3px var(--signal-dim); }
.tabs{ display:flex; gap:7px; margin-bottom:16px; flex-wrap:wrap; }
.tab-btn{
  padding:8px 15px; border-radius:10px; border:1px solid var(--border); background:var(--panel-2);
  color:var(--text-muted); font-size:13px; font-weight:600; cursor:pointer; transition:.15s;
}
.tab-btn:hover{ color:var(--text); }
.tab-btn.active{ background:var(--signal-dim); color:var(--signal); border-color:rgba(47,227,190,.3); }

.modal-backdrop{
  position:fixed; inset:0; background:rgba(4,6,12,.65); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:50; padding:20px;
}
.modal{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 40%), var(--panel-solid);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:24px; width:100%; max-width:460px; max-height:85vh; overflow-y:auto; box-shadow:var(--shadow);
}
.modal h3{ margin-bottom:15px; font-size:15.5px; font-weight:800; }
.form-grid{ display:flex; flex-direction:column; gap:12px; }
.form-row{ display:flex; gap:10px; }
.form-row > *{ flex:1; }
.modal-actions{ display:flex; gap:10px; margin-top:18px; }

.toast-root{ position:fixed; bottom:20px; left:20px; z-index:100; display:flex; flex-direction:column; gap:8px; }
.toast{
  background:var(--panel-solid); border:1px solid var(--border); border-radius:11px;
  padding:12px 17px; font-size:13px; box-shadow:var(--shadow); animation:toast-in .2s ease;
  border-inline-start:3px solid var(--signal);
}
.toast.error{ border-inline-start-color:var(--coral); }
@keyframes toast-in{ from{ opacity:0; translate:0 8px; } to{ opacity:1; translate:0 0; } }

.pager{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
.spark{ display:flex; align-items:flex-end; gap:4px; height:64px; }
.spark i{ flex:1; background:linear-gradient(var(--signal),transparent); border-radius:4px 4px 0 0; min-height:2px;
  box-shadow:0 0 10px -2px rgba(47,227,190,.5); }

.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ background:var(--panel-2); border:1px solid var(--border); border-radius:20px; padding:6px 13px; font-size:12px; }

.loading{ text-align:center; padding:48px; color:var(--text-muted); }