/* ============================================================
   SPA add-on — یەک‌پەڕەیی، گواستنەوەی نەرم، شاشەی چوونەژوورەوە
   لەسەر style2.css + aid.css کاردەکات.
   ============================================================ */

/* ----- گۆڕینی بەشەکان بەبێ ری‌لۆود ----- */
.spa-view{ display:none; animation:spaFade .28s ease; }
.spa-view.active{ display:block; }
@keyframes spaFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ----- داشبۆردی ستاتی فراوان ----- */
.s2-stat-row{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-bottom:18px; }
.s2-stat .v{ font-size:24px; font-weight:800; color:var(--s2-text); letter-spacing:.3px; }
.s2-stat .v small{ font-size:13px; color:var(--s2-text-mute); font-weight:600; margin-inline-start:4px; }
.s2-stat .k{ font-size:13px; color:var(--s2-text-dim); margin-top:4px; }
.s2-stat.gold .s2-stat-ico{ background:linear-gradient(135deg,var(--s2-gold),var(--s2-gold-deep)); color:#1a1500; }
.s2-stat.green .s2-stat-ico{ background:rgba(46,194,138,.14); color:var(--s2-green); }
.s2-stat.red   .s2-stat-ico{ background:rgba(255,93,108,.14); color:var(--s2-red); }
.s2-stat.blue  .s2-stat-ico{ background:rgba(78,163,255,.14); color:var(--s2-blue); }

/* ----- شاشەی چوونەژوورەوە ----- */
.login-wrap{
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(1000px 500px at 100% -10%, rgba(255,204,0,.10), transparent 60%),
    radial-gradient(800px 460px at -10% 110%, rgba(78,163,255,.07), transparent 55%),
    var(--s2-bg);
}
.login-card{
  width:100%; max-width:400px;
  background:linear-gradient(180deg,var(--s2-surface),var(--s2-bg-2));
  border:1px solid var(--s2-line); border-radius:20px;
  box-shadow:var(--s2-shadow); padding:34px 30px;
}
.login-logo{
  width:62px; height:62px; border-radius:18px; margin:0 auto 16px;
  background:linear-gradient(135deg,var(--s2-gold),var(--s2-gold-deep));
  display:grid; place-items:center; color:#1a1500; font-weight:800; font-size:28px;
  box-shadow:0 12px 26px -10px rgba(255,204,0,.6);
}
.login-title{ text-align:center; font-weight:800; font-size:19px; margin-bottom:4px; }
.login-sub{ text-align:center; color:var(--s2-text-mute); font-size:13px; margin-bottom:26px; }
.login-card .s2-field{ margin-bottom:16px; }
.login-card .s2-btn{ width:100%; justify-content:center; }
.login-err{
  display:none; margin-top:14px; text-align:center; font-size:13px;
  color:var(--s2-red); background:rgba(255,93,108,.08);
  border:1px solid rgba(255,93,108,.25); border-radius:10px; padding:10px;
}

/* ----- ڕیزبەندی پانێڵی نووسین/لیست ----- */
.s2-section-title{ font-weight:700; font-size:15px; color:var(--s2-gold-soft); }
.spa-page-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; align-items:center; }
.spa-page-actions .grow{ flex:1; }

/* ----- باجی ڕۆڵ ----- */
.role-chip{
  font-size:11px; padding:3px 10px; border-radius:20px; font-weight:700;
  background:rgba(255,204,0,.12); color:var(--s2-gold); border:1px solid rgba(255,204,0,.25);
}

/* ----- ڕێکخستنی مۆبایل ----- */
@media (max-width:860px){
  .s2-pick-grid{ grid-template-columns:1fr; }
}