/*
  Mobile app layer.
  Loaded after the desktop-only polish file so phone breakpoints can replace the forced desktop canvas.
*/

@media (max-width: 760px) {
  :root {
    --mobile-chrome: #f8fafc;
    --mobile-card: rgba(255, 255, 255, .92);
    --mobile-ink: #0f172a;
    --mobile-muted: #64748b;
    --mobile-line: rgba(15, 23, 42, .09);
    --mobile-shadow: 0 12px 30px rgba(15, 23, 42, .08);
    --mobile-radius: 18px;
    --mobile-bottom-safe: max(14px, env(safe-area-inset-bottom));
  }

  html:not(.app-shell-landing),
  body:not(.app-shell-landing) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: var(--mobile-chrome) !important;
    overscroll-behavior: none;
  }

  body:not(.app-shell-landing) {
    display: block !important;
    font-size: 14px !important;
    color: var(--mobile-ink) !important;
    -webkit-text-size-adjust: 100%;
  }

  body:not(.app-shell-landing)::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,245,249,.96)),
      radial-gradient(circle at 0 0, rgba(0,122,255,.12), transparent 34%);
  }

  body.app-shell-student .main,
  body.app-shell-auth .main,
  body.app-shell-admin .main,
  body.app-shell-teacher .main,
  .main {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  body.app-shell-student .sb,
  .sb {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 7000 !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(86vw, 330px) !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: max(14px, env(safe-area-inset-top)) 12px calc(var(--mobile-bottom-safe) + 32px) !important;
    border-radius: 0 26px 26px 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.92) !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 24px 0 60px rgba(15, 23, 42, .2) !important;
    transform: translateX(-104%) !important;
    transition: transform .24s ease !important;
    overflow: hidden !important;
    -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
    backdrop-filter: blur(28px) saturate(170%) !important;
  }

  body.mobile-nav-open .sb {
    transform: translateX(0) !important;
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 6990;
    display: none;
    border: 0;
    background: rgba(15, 23, 42, .42);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }

  body.mobile-nav-open .mobile-nav-backdrop {
    display: block;
  }

  .sb-logo {
    display: block !important;
    padding: 8px 4px 16px !important;
    border-bottom: 1px solid var(--mobile-line) !important;
  }

  .sb-brand {
    gap: 10px !important;
  }

  .sb-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
  }

  .sb-name {
    font-size: 20px !important;
  }

  .sb-mode {
    margin-left: 52px;
    font-size: 10px !important;
    border-radius: 999px !important;
  }

  .sb-nav {
    display: block !important;
    flex: 1 !important;
    padding: 12px 0 8px !important;
    overflow-y: auto !important;
  }

  .sb-grp {
    padding: 8px 2px 4px !important;
  }

  .sb-grp-lbl {
    display: block !important;
    padding: 0 12px !important;
    margin: 6px 0 8px !important;
    font-size: 10px !important;
    color: #94a3b8 !important;
  }

  .ni {
    display: flex !important;
    min-height: 48px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    margin: 0 0 6px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    color: #334155 !important;
    background: transparent !important;
    white-space: normal !important;
  }

  .ni.on {
    padding-left: 14px !important;
    background: #0f172a !important;
    border-color: #0f172a !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .18) !important;
  }

  .ni .ic {
    width: 22px !important;
    font-size: 15px !important;
  }

  .nbadge {
    margin-left: auto !important;
    font-size: 10px !important;
  }

  .inst-btn {
    margin: 10px 2px !important;
    border-radius: 18px !important;
  }

  .sb-foot {
    display: block !important;
    padding: 10px 2px 0 !important;
    border-top: 1px solid var(--mobile-line) !important;
  }

  .u-row {
    padding: 10px !important;
    border-radius: 18px !important;
    background: #f1f5f9 !important;
  }

  .settings-trigger {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
    font-size: 17px !important;
  }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    height: auto !important;
    min-height: 78px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: max(10px, env(safe-area-inset-top)) 14px 10px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
    background: rgba(248, 250, 252, .9) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
    -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
    backdrop-filter: blur(22px) saturate(170%) !important;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
  }

  .mobile-menu-toggle span {
    width: 17px;
    height: 2px;
    border-radius: 999px;
    background: #0f172a;
  }

  .topbar > div:first-of-type {
    min-width: 0 !important;
  }

  .tb-title {
    display: block !important;
    font-size: 22px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .tb-sub {
    display: block !important;
    margin: 4px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    color: var(--mobile-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .tb-right {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 2px 0 0 !important;
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
  }

  .tb-right::-webkit-scrollbar,
  .tab-row::-webkit-scrollbar {
    display: none;
  }

  .tb-right .btn,
  .tb-right > div {
    flex: 0 0 auto !important;
  }

  .pg {
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px 14px calc(88px + var(--mobile-bottom-safe)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .ph {
    font-size: 26px !important;
    line-height: 1.05 !important;
    margin: 0 0 6px !important;
  }

  .ps {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-bottom: 16px !important;
    color: var(--mobile-muted) !important;
  }

  .pg > div[style*="justify-content:space-between"],
  .pg > div[style*="justify-content: space-between"] {
    align-items: flex-start !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  .btn,
  .gbtn,
  .tab,
  .chip,
  .tt-view-btn,
  .exam-type-btn {
    min-height: 42px !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  .btn.sm {
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  .btn.pr,
  .gbtn {
    background: #0f172a !important;
    border-color: #0f172a !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .18) !important;
  }

  .card,
  .csm,
  .sbox,
  .cc,
  .li,
  .ring,
  .wsl,
  .wsr,
  .topic-item,
  .asgn-item,
  .msg-item,
  .cls-item,
  .note-it,
  .kai,
  .analytics-card,
  .portal-target-box {
    width: 100% !important;
    border-radius: var(--mobile-radius) !important;
    background: var(--mobile-card) !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    box-shadow: var(--mobile-shadow) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .card,
  .csm,
  .wsl,
  .wsr,
  .kai {
    padding: 16px !important;
  }

  .sr4,
  .sr3,
  .g2,
  .g3,
  .g4,
  .cgrid,
  #ai-tools-grid,
  .analytics-kpis,
  .inst-stats,
  .settings-grid,
  .settings-choice-grid,
  .portal-profile-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .sr4,
  .sr3,
  .inst-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sbox {
    min-height: 116px !important;
    padding: 16px !important;
  }

  .sval {
    font-size: 30px !important;
  }

  .cgrid {
    margin-bottom: 18px !important;
  }

  .cc {
    min-height: 132px !important;
    padding: 16px !important;
  }

  .cc-nm,
  .li-name {
    white-space: normal !important;
  }

  .kai {
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  .k-chips,
  .tab-row,
  #cdet-tabs,
  #admin-tabs,
  #tch-tabs,
  #inst-tabs {
    display: flex !important;
    width: calc(100% + 28px) !important;
    margin-left: -14px !important;
    padding: 0 14px 10px !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
  }

  .tab {
    flex: 0 0 auto !important;
  }

  .gws,
  .gms,
  #admin-tab-push .gws,
  #tch-tab-push .gws {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    min-height: 0 !important;
  }

  .wsl,
  .wsr {
    max-height: none !important;
    overflow: visible !important;
  }

  .fi {
    min-height: 46px !important;
    border-radius: 14px !important;
    padding: 11px 13px !important;
    font-size: 15px !important;
    background: #fff !important;
  }

  textarea.fi {
    min-height: 96px !important;
  }

  .fg {
    gap: 6px !important;
    margin-bottom: 12px !important;
  }

  .fl {
    font-size: 12px !important;
    color: #475569 !important;
  }

  [style*="grid-template-columns"] {
    max-width: 100%;
  }

  .modal-overlay {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    background: rgba(15, 23, 42, .45) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 5200 !important;
  }
  
  .modal-overlay.open {
    display: flex !important;
    pointer-events: auto !important;
  }

  .modal {
    width: 100% !important;
    max-width: none !important;
    max-height: min(86dvh, 720px) !important;
    padding: 18px 16px calc(18px + var(--mobile-bottom-safe)) !important;
    border-radius: 26px 26px 0 0 !important;
    background: #fff !important;
    box-shadow: 0 -24px 60px rgba(15, 23, 42, .22) !important;
  }

  .modal-title {
    font-size: 22px !important;
    margin-bottom: 14px !important;
  }

  .modal [style*="display:flex"][style*="gap:8px"],
  .modal [style*="display: flex"][style*="gap:8px"] {
    flex-wrap: wrap !important;
  }

  .modal [style*="display:flex"][style*="gap:8px"] .btn,
  .modal [style*="display: flex"][style*="gap:8px"] .btn {
    flex: 1 1 130px !important;
  }

  .edith-chat-modal {
    height: 86dvh !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .edith-chat-log {
    flex: 1 !important;
    min-height: 0 !important;
  }

  .edith-input-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 20px !important;
  }

  .edith-send-btn {
    width: 100% !important;
    min-height: 48px !important;
  }

  .student-settings-overlay,
  #portal-settings-overlay.open,
  #student-settings-overlay.open {
    align-items: stretch !important;
    padding: 0 !important;
  }

  .settings-shell,
  .portal-settings-shell {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
    border: 0 !important;
  }

  .settings-rail {
    width: 100% !important;
    min-height: 0 !important;
    padding: max(14px, env(safe-area-inset-top)) 14px 10px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--mobile-line) !important;
  }

  .settings-nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  .settings-nav-btn {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    border-radius: 999px !important;
  }

  .settings-content {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 16px 14px calc(22px + var(--mobile-bottom-safe)) !important;
    overflow-y: auto !important;
  }

  #auth-overlay,
  #admin-overlay,
  #teacher-overlay {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #auth-overlay {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    background: #f8fafc !important;
  }

  #auth-overlay .auth-split {
    width: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  #auth-overlay .auth-showcase {
    display: none !important;
  }

  #auth-overlay .auth-stage {
    flex: 1 !important;
    padding: 18px 14px calc(22px + var(--mobile-bottom-safe)) !important;
    align-items: center !important;
    background: transparent !important;
    overflow: visible !important;
  }

  #auth-overlay .auth-card {
    max-width: none !important;
    padding: 22px 18px !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: var(--mobile-shadow) !important;
  }

  #auth-overlay .auth-hero-title {
    font-size: 42px !important;
    line-height: .98 !important;
  }

  #auth-overlay .auth-title {
    font-size: 34px !important;
    line-height: 1.02 !important;
  }

  #auth-overlay .auth-hero-copy,
  #auth-overlay .auth-subtitle {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  #auth-overlay .auth-proof-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #auth-overlay .ob-path-btn {
    min-height: 76px !important;
    border-radius: 18px !important;
    padding: 14px !important;
  }

  #auth-overlay .auth-choice-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
  }

  #admin-overlay,
  #teacher-overlay {
    padding: max(14px, env(safe-area-inset-top)) 14px calc(22px + var(--mobile-bottom-safe)) !important;
    background: #f8fafc !important;
  }

  .admin-portal-head,
  #teacher-overlay > div:first-child {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    margin: calc(-1 * max(14px, env(safe-area-inset-top))) -14px 14px !important;
    padding: max(14px, env(safe-area-inset-top)) 14px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: rgba(248,250,252,.94) !important;
    border-bottom: 1px solid var(--mobile-line) !important;
    -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
    backdrop-filter: blur(20px) saturate(170%) !important;
  }

  .admin-centre-title,
  #tch-name {
    font-size: 24px !important;
    line-height: 1.1 !important;
  }

  .admin-portal-head > div:last-child,
  #teacher-overlay > div:first-child > div:last-child {
    width: 100% !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  .portal-target-tools,
  .portal-target-actions,
  .portal-preset-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .pg [style*="grid-template-columns:1fr 1fr"],
  .pg [style*="grid-template-columns:1fr 1fr 1fr"],
  .pg [style*="grid-template-columns: 1fr 1fr"],
  .pg [style*="grid-template-columns: 1fr 1fr 1fr"],
  .modal [style*="grid-template-columns"],
  #admin-overlay [style*="grid-template-columns"],
  #teacher-overlay [style*="grid-template-columns"],
  #auth-overlay [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .portal-target-list {
    max-height: 260px !important;
  }

  .course-package-topic-grid,
  .course-package-assignment-grid,
  .course-package-exam-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  .gtable,
  .stu-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .gtable thead,
  .stu-table thead {
    display: none !important;
  }

  .gtable tbody,
  .stu-table tbody,
  .gtable tr,
  .stu-table tr,
  .gtable td,
  .stu-table td {
    display: block !important;
    width: 100% !important;
  }

  .gtable tr,
  .stu-table tr {
    margin-bottom: 10px !important;
    padding: 12px !important;
    border: 1px solid var(--mobile-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.05) !important;
  }

  .gtable td,
  .stu-table td {
    padding: 7px 0 !important;
    border-bottom: 1px solid rgba(15,23,42,.06) !important;
  }

  .gtable td:last-child,
  .stu-table td:last-child {
    border-bottom: 0 !important;
  }

  .tt-grid {
    display: grid !important;
    min-width: 720px !important;
  }

  #tt-grid-wrap,
  .analytics-card:has(.gtable),
  #grades-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .rings {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .li {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .li > div:last-child {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}