/* ui.css — shared styles for the language switch and the mobile panel menu.
   Included by every page after its own <style>. */

/* ── Language switch (MN | EN) ── */
.lang-toggle{display:inline-flex;border:1px solid #cbd5e1;border-radius:999px;overflow:hidden;background:#fff;flex-shrink:0}
.lang-toggle button{border:none;background:transparent;padding:0.3rem 0.65rem;font-size:0.75rem;font-weight:700;color:#64748b;cursor:pointer;font-family:inherit;min-height:32px}
.lang-toggle button.active{background:var(--primary,#1a56db);color:#fff}
.sidebar .lang-toggle{background:transparent;border-color:#475569}
.sidebar .lang-toggle button{color:#94a3b8}
.sidebar .lang-toggle button.active{color:#fff}

/* ── Mobile menu for the admin / teacher / student panels ── */
.menu-btn{display:none;background:none;border:none;font-size:1.5rem;line-height:1;cursor:pointer;padding:0.4rem;margin-right:0.5rem;color:inherit;min-width:44px;min-height:44px}
.sidebar-overlay{display:none}

/* ── Notification bell dropdown ── */
.notif-wrap{position:relative;display:inline-flex}
.notif-menu{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-width:calc(100vw - 24px);max-height:70vh;overflow-y:auto;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 12px 32px rgba(15,23,42,0.18);z-index:1100;text-align:left;color:#111827}
.notif-menu[hidden]{display:none}
.notif-head{padding:0.8rem 1rem;font-weight:700;font-size:0.9rem;border-bottom:1px solid #f1f5f9}
.notif-empty{padding:1.2rem 1rem;font-size:0.85rem;color:#6b7280}
.notif-item{display:flex;gap:0.7rem;width:100%;padding:0.75rem 1rem;border:none;border-bottom:1px solid #f1f5f9;background:#fff;text-align:left;cursor:pointer;font-family:inherit;color:inherit;min-height:44px}
.notif-item:hover{background:#f8fafc}
.notif-item.unread{background:#eff6ff}
.notif-icon{font-size:1.1rem;line-height:1.4}
.notif-body{display:flex;flex-direction:column;gap:0.15rem;min-width:0}
.notif-text{font-size:0.85rem;line-height:1.35;overflow-wrap:anywhere}
.notif-time{font-size:0.72rem;color:#6b7280}

@media (max-width:900px){
  .notif-menu{position:fixed;top:64px;right:12px;left:12px;width:auto;max-width:none}
  .lang-toggle button{min-height:44px;min-width:44px}
  input,select,textarea{font-size:16px !important} /* stops iOS zooming into fields */

  /* Everything below applies only to panel pages (they have a .sidebar) */
  .menu-btn{display:inline-flex;align-items:center;justify-content:center}
  body:has(.sidebar) .topbar{padding:0 1rem !important;gap:0.5rem}
  body:has(.sidebar) .topbar h1{font-size:1rem !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
  body:has(.sidebar) .content{padding:1rem !important}

  /* Sidebar becomes a slide-in drawer instead of disappearing */
  .sidebar{display:flex !important;transform:translateX(-100%);transition:transform 0.25s ease;z-index:1000;box-shadow:none}
  body.sidebar-open .sidebar{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,0.35)}
  body.sidebar-open .sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(15,23,42,0.45);z-index:999}
  body.sidebar-open{overflow:hidden}
  .sidebar .nav-item{padding-top:0.8rem !important;padding-bottom:0.8rem !important}

  /* Wide tables scroll sideways instead of breaking the page.
     Add class="compact" to a small table that already fits a phone. */
  body:has(.sidebar) .main,
  body:has(.sidebar) .two-col>*,
  body:has(.sidebar) .three-col>*{min-width:0} /* let wide children scroll, not stretch the page */
  body:has(.sidebar) .card{overflow-x:auto}
  body:has(.sidebar) .card table:not(.compact){min-width:560px}

  /* Forms and modals fit the screen */
  body:has(.sidebar) .form-row{grid-template-columns:1fr !important}
  body:has(.sidebar) .modal{width:calc(100vw - 2rem) !important;max-width:100% !important;max-height:calc(100vh - 2rem);overflow-y:auto}
}

@media (max-width:520px){
  body:has(.sidebar) .stats-row{grid-template-columns:1fr !important}
}