/* ==========================================================================
   app-ui.css — ظاهر «اپ‌مانند» برای پنل دانش‌آموز و مربی (بعد از ورود)
   بعد از style.css بارگذاری می‌شه و فقط ظاهر رو بهتر می‌کنه؛ HTML منطقی/JS دست‌نخورده‌ست.
   ========================================================================== */
:root{
  --sub:var(--ink-soft);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --nav-h:62px;
}
body{overscroll-behavior-y:none;-webkit-font-smoothing:antialiased}

/* دکمه‌ی تیره (ورود سریع با اثر انگشت) — قبلاً کلاسش تعریف نشده بود */
.btn-navy{background:var(--ink);color:#fff}
.btn-navy:hover{background:#334463}

/* ---------- نوار بالا ---------- */
.topbar{
  padding-top:calc(13px + var(--safe-top));
  padding-bottom:16px;
  border-radius:0 0 24px 24px;
  box-shadow:0 10px 24px rgba(38,51,74,.22);
}
.topbar-l .ic{
  width:40px;height:40px;border-radius:13px;
  background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.points-chip{box-shadow:0 2px 8px rgba(0,0,0,.18)}
.logout-btn{border-radius:20px;padding:8px 14px}

/* ---------- تب‌ها (پنل مربی و دسکتاپ): قرص‌های گرد ---------- */
.tabs{gap:8px;padding:14px 12px 6px;margin-top:0}
.tab{
  border:none;border-radius:999px;background:var(--card);
  box-shadow:0 1px 5px rgba(38,51,74,.10);padding:9px 16px;
  transition:background .15s,color .15s,box-shadow .15s;
}
.tab.active{
  background:var(--thread);color:#fff;
  box-shadow:0 5px 14px rgba(168,57,90,.35);
}
.tab.active .tab-badge{background:#fff;color:var(--thread)}
.tab .ti{margin-inline-end:6px}

/* ---------- محتوا ---------- */
.main{padding-top:12px}
.pattern-card{border-radius:18px}
.panel.active{animation:panelIn .25s ease}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel.active{animation:none}}

/* ---------- پنل دانش‌آموز روی موبایل: نوار پایین مثل اپ‌های واقعی ---------- */
@media (max-width:720px){
  .tabs.app-nav{
    position:fixed;bottom:0;left:0;right:0;z-index:60;
    margin:0;max-width:none;
    padding:6px 6px calc(6px + var(--safe-bottom));
    gap:2px;
    background:rgba(255,253,247,.97);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-top:1.5px solid var(--line);
    box-shadow:0 -8px 22px rgba(38,51,74,.10);
  }
  .tabs.app-nav .tab{
    flex:1 0 64px;position:relative;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    padding:7px 4px;border-radius:14px;
    background:transparent;box-shadow:none;
    font-size:10.5px;font-weight:700;color:var(--ink-soft);
  }
  .tabs.app-nav .tab .ti{margin:0;font-size:21px;line-height:1.1;filter:grayscale(1);opacity:.65;transition:transform .15s,opacity .15s}
  .tabs.app-nav .tab.active{background:rgba(168,57,90,.10);color:var(--thread);box-shadow:none}
  .tabs.app-nav .tab.active .ti{filter:none;opacity:1;transform:translateY(-1px) scale(1.12)}
  .tabs.app-nav .tab-badge{position:absolute;top:2px;right:calc(50% - 26px);margin:0}
  .tabs.app-nav ~ .main{padding-bottom:calc(var(--nav-h) + var(--safe-bottom) + 84px)}
  .tabs.app-nav ~ .fab{bottom:calc(var(--nav-h) + var(--safe-bottom) + 16px)}
}
/* دکمه‌ی دسترسی‌پذیری و پیام‌ها بالاتر از نوار پایین (جدا از هم تا اگه :has پشتیبانی نشد بقیه خراب نشن) */
@media (max-width:720px){
  body:has(.tabs.app-nav) #a11yBtn{left:auto;right:14px;bottom:calc(var(--nav-h) + var(--safe-bottom) + 16px)}
}
@media (max-width:720px){
  body:has(.tabs.app-nav) #a11yPanel{left:auto;right:14px;bottom:calc(var(--nav-h) + var(--safe-bottom) + 66px)}
}
@media (max-width:720px){
  body:has(.tabs.app-nav) #toast{bottom:calc(var(--nav-h) + var(--safe-bottom) + 16px)}
}

/* ---------- مودال‌ها: برگه‌ی پایین‌آمدنی با دستگیره ---------- */
@media (max-width:559px){
  .modal{padding-bottom:calc(26px + var(--safe-bottom));border-radius:24px 24px 0 0}
  .modal::before{content:'';display:block;width:42px;height:4px;border-radius:4px;background:var(--line);margin:-8px auto 14px}
}