/* Shared phone layout rules for the web app and Android TWA. */
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* R2S Admin uses the same vertical menu pattern on phones. */
@media (max-width: 900px) {
  body[data-r2s-surface="r2s_admin"] .admin-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
    overflow: visible !important;
  }

  body[data-r2s-surface="r2s_admin"] .admin-tab {
    display: flex !important;
    width: 100%;
    min-width: 0 !important;
    min-height: 44px;
    flex: initial !important;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
  }

  body[data-r2s-surface="r2s_admin"] .admin-tabs.is-collapsed .admin-tab[hidden] {
    display: none !important;
  }

  body[data-r2s-surface="r2s_admin"] .admin-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    grid-column: 1 / -1;
    width: 100%;
  }

  body[data-r2s-surface="r2s_admin"] .user-group-tabs {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  body[data-r2s-surface="r2s_admin"] .user-group-tab {
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  body[data-r2s-surface="r2s_admin"] .user-group-tabs.is-collapsed .user-group-tab[hidden] {
    display: none !important;
  }

  body[data-r2s-surface="r2s_admin"] .user-group-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}

body {
  min-width: 0;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

img,
video {
  max-width: 100%;
}

@media (max-width: 900px) {
  #r2s-topbar {
    height: calc(56px + env(safe-area-inset-top)) !important;
    padding: env(safe-area-inset-top) 12px 0 !important;
  }

  #r2s-sidebar {
    width: min(300px, 88vw) !important;
    height: 100dvh !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }

  .page-content {
    padding-top: calc(56px + env(safe-area-inset-top)) !important;
  }

  .page-content .wrap {
    width: 100%;
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }

  .page-content .tabs,
  .page-content .section-tabs,
  .page-content .school-admin-tab-bar,
  .page-content .admin-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .page-content .tabs::-webkit-scrollbar,
  .page-content .section-tabs::-webkit-scrollbar,
  .page-content .school-admin-tab-bar::-webkit-scrollbar,
  .page-content .admin-tabs::-webkit-scrollbar {
    display: none;
  }

  .page-content .tab,
  .page-content .section-tab,
  .page-content .school-admin-tab,
  .page-content .admin-tab {
    flex: 0 0 auto;
    min-width: 112px;
    min-height: 44px;
    padding: 10px 12px;
    white-space: nowrap;
    font-size: 12px;
  }

  .page-content .tab .tab-text {
    display: inline !important;
  }

  .teacher-dashboard-page .page-content .tabs {
    display: grid !important;
    grid-template-columns: 1fr;
    overflow: visible;
    gap: 8px;
  }

  .teacher-dashboard-page .page-content .tabs > .tab {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    white-space: normal;
  }

  .teacher-dashboard-page .teacher-communication-tools {
    grid-template-columns: 1fr;
  }

  .teacher-dashboard-page .teacher-student-tools {
    grid-template-columns: 1fr;
  }

  .page-content .school-admin-tab-bar {
    flex-direction: row !important;
    align-items: center !important;
  }

  .page-content .admin-tabs {
    flex: 1 1 auto !important;
    min-width: 0;
  }

  .page-content .school-admin-dashboard-toggle {
    flex: 0 0 auto;
    min-height: 42px;
    white-space: nowrap;
  }

  .page-content .pbar {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .page-content .pbar-actions {
    width: 100%;
  }

  .page-content .pbar-actions > * {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 42px;
  }

  .page-content input,
  .page-content select,
  .page-content textarea {
    min-height: 44px;
    font-size: 16px;
  }

  .page-content button,
  .page-content a.ebtn,
  .page-content a.pdf-btn {
    min-height: 42px;
  }

  .page-content .school-hdr {
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 14px;
  }

  .page-content .school-name {
    font-size: 14px;
  }

  .page-content .school-meta,
  .page-content .staff-name {
    font-size: 10px;
  }

  .page-content .grade-bar {
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .page-content .grade-bar::-webkit-scrollbar {
    display: none;
  }

  .page-content .grade-chips {
    flex-wrap: nowrap;
  }

  .page-content .chip {
    min-height: 42px;
    padding: 9px 13px;
    font-size: 12px;
    white-space: nowrap;
  }

  .page-content .notice-head,
  .page-content .request-row,
  .page-content .approval-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .page-content .notice-actions,
  .page-content .request-actions,
  .page-content .approval-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .page-content .notice-actions button,
  .page-content .request-actions button,
  .page-content .request-actions a,
  .page-content .approval-actions button {
    min-height: 40px;
  }

  /* Existing dashboards contain compact desktop labels. Keep them readable on phones. */
  .page-content [style*="font-size:10px"],
  .page-content [style*="font-size:11px"],
  .page-content .stat-lbl,
  .page-content .school-admin-overview-field span,
  .page-content .school-admin-overview-tile span,
  .page-content .school-admin-overview-list h4,
  .page-content .school-admin-student-stat span,
  .page-content .school-profile-search-row span,
  .page-content .school-operations-controls label,
  .page-content .school-operations-row span,
  .page-content .school-academic-report-table th,
  .page-content .school-pratibha-stat span,
  .page-content .school-pratibha-note,
  .page-content .communication-channel small,
  .page-content .communication-feature-copy,
  .page-content .notice-meta,
  .page-content .notice-status,
  .page-content .hw-ct,
  .page-content .hw-due,
  .page-content .hw-posted-by,
  .page-content .hw-day-date,
  .page-content .li-qty,
  .page-content .lcnt,
  .page-content .child-tab-meta,
  .page-content .child-tab-school,
  .page-content .parent-link-expiry,
  .page-content .parent-link-message {
    font-size: 12px !important;
    line-height: 1.45;
  }

  .page-content .school-admin-overview-field strong,
  .page-content .school-operations-row strong,
  .page-content .school-profile-search-row strong,
  .page-content .approval-meta,
  .page-content .pending-meta {
    font-size: 13px;
    line-height: 1.45;
  }

  .page-content .notice-body,
  .page-content .notice-detail-body,
  .page-content .request-main,
  .page-content .li-name,
  .page-content .list-item-name,
  .page-content .hwtask,
  .page-content .hw-task {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* Keep selected School Admin submenus compact at every viewport width. */
.page-content .school-admin-student-tools.is-collapsed,
.page-content .school-admin-teacher-tools.is-collapsed,
.page-content .school-admin-communication-tools.is-collapsed,
.page-content .school-admin-approval-tools.is-collapsed {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.page-content .school-admin-student-tools.is-collapsed > [data-student-focus-open]:not(.active),
.page-content .school-admin-teacher-tools.is-collapsed > [data-teacher-focus-open]:not(.active),
.page-content .school-admin-communication-tools.is-collapsed > [data-school-communication-open]:not(.active),
.page-content .school-admin-approval-tools.is-collapsed > [data-approval-focus-open]:not(.active) {
  display: none !important;
}

.page-content .school-admin-student-tools.is-collapsed > .active,
.page-content .school-admin-teacher-tools.is-collapsed > .active,
.page-content .school-admin-communication-tools.is-collapsed > .active,
.page-content .school-admin-approval-tools.is-collapsed > .active {
  flex: 1 1 auto;
}

.page-content .school-admin-student-tools.is-collapsed .school-admin-student-stats {
  display: none !important;
}

.page-content .school-admin-submenu-toggle {
  flex: 0 0 auto;
  width: auto;
  border: 1px solid #fed7aa;
  border-radius: 9px;
  background: #fff7ed;
  color: #c2410c;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  padding: 10px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.page-content .school-admin-tab-bar .admin-tabs.is-collapsed {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  overflow: visible !important;
}

.page-content .school-admin-tab-bar .admin-tabs.is-collapsed > .admin-tab:not(.active) {
  display: none !important;
}

.page-content .school-admin-tab-bar .admin-tabs.is-collapsed > .admin-tab.active {
  flex: 1 1 auto;
  min-width: 0 !important;
}

.page-content .school-admin-main-menu-toggle {
  flex: 0 0 auto;
  width: auto;
  border: 1px solid #fed7aa;
  border-radius: 9px;
  background: #fff7ed;
  color: #c2410c;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  padding: 10px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.teacher-dashboard-page .page-content .tabs.is-collapsed {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  overflow: visible !important;
}

.teacher-dashboard-page .page-content .tabs.is-collapsed > .tab:not(.active) {
  display: none !important;
}

.teacher-dashboard-page .page-content .tabs.is-collapsed > .tab.active {
  flex: 1 1 auto;
  min-width: 0 !important;
}

.teacher-dashboard-page .teacher-main-menu-toggle,
.teacher-dashboard-page .teacher-submenu-toggle {
  flex: 0 0 auto;
  width: auto;
  border: 1px solid #fed7aa;
  border-radius: 9px;
  background: #fff7ed;
  color: #c2410c;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  padding: 10px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.teacher-dashboard-page .teacher-communication-tools.is-collapsed,
.teacher-dashboard-page .teacher-approval-tools.is-collapsed,
.teacher-dashboard-page .teacher-student-tools.is-collapsed {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.teacher-dashboard-page .teacher-communication-tools.is-collapsed > [data-teacher-communication-open]:not(.active),
.teacher-dashboard-page .teacher-approval-tools.is-collapsed > [data-teacher-approval-open]:not(.active),
.teacher-dashboard-page .teacher-student-tools.is-collapsed > [data-teacher-student-open]:not(.active) {
  display: none !important;
}

.teacher-dashboard-page .teacher-communication-tools.is-collapsed > .active,
.teacher-dashboard-page .teacher-approval-tools.is-collapsed > .active,
.teacher-dashboard-page .teacher-student-tools.is-collapsed > .active {
  flex: 1 1 auto;
}

@media (max-width: 640px) {
  html.app-auth-root .card,
  body.app-auth .card {
    padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
  }

  html.app-auth-root .card h2,
  body.app-auth .card h2 {
    font-size: 22px;
    line-height: 1.2;
  }

  html.app-auth-root .card input,
  body.app-auth .card input,
  html.app-auth-root .card button,
  body.app-auth .card button {
    min-height: 48px;
    font-size: 16px;
  }

  html.app-auth-root .student-auth-help,
  body.app-auth .student-auth-help,
  html.app-auth-root .app-note,
  body.app-auth .app-note {
    font-size: 13px;
    line-height: 1.5;
  }

  .page-content .wrap {
    padding-top: 12px !important;
  }

  .page-content .tabs,
  .page-content .section-tabs,
  .page-content .school-admin-tab-bar,
  .page-content .admin-tabs {
    margin-left: -2px;
    margin-right: -2px;
    padding: 4px;
  }

  .page-content .panel,
  .page-content .section-panel,
  .page-content .admin-panel {
    min-width: 0;
  }

  .page-content .pbar h3 {
    font-size: 16px;
    line-height: 1.25;
  }

  .page-content .notice-form,
  .page-content .notice-card,
  .page-content .approval-box,
  .page-content .school-admin-panel,
  .page-content .pratibha-card {
    border-radius: 12px;
    padding: 12px;
  }
}

/* Android TWA fallback: apply readable text even if its CSS viewport is reported wider. */
html.r2s-installed-app .page-content [style*="font-size:10px"],
html.r2s-installed-app .page-content [style*="font-size:11px"],
html.r2s-installed-app .page-content .stat-lbl,
html.r2s-installed-app .page-content .school-admin-overview-field span,
html.r2s-installed-app .page-content .school-admin-overview-tile span,
html.r2s-installed-app .page-content .school-admin-overview-list h4,
html.r2s-installed-app .page-content .school-admin-student-stat span,
html.r2s-installed-app .page-content .school-profile-search-row span,
html.r2s-installed-app .page-content .school-operations-controls label,
html.r2s-installed-app .page-content .school-operations-row span,
html.r2s-installed-app .page-content .school-academic-report-table th,
html.r2s-installed-app .page-content .school-pratibha-stat span,
html.r2s-installed-app .page-content .school-pratibha-note,
html.r2s-installed-app .page-content .communication-channel small,
html.r2s-installed-app .page-content .communication-feature-copy,
html.r2s-installed-app .page-content .notice-meta,
html.r2s-installed-app .page-content .notice-status,
html.r2s-installed-app .page-content .hw-ct,
html.r2s-installed-app .page-content .hw-due,
html.r2s-installed-app .page-content .hw-posted-by,
html.r2s-installed-app .page-content .hw-day-date,
html.r2s-installed-app .page-content .li-qty,
html.r2s-installed-app .page-content .lcnt,
html.r2s-installed-app .page-content .child-tab-meta,
html.r2s-installed-app .page-content .child-tab-school,
html.r2s-installed-app .page-content .parent-link-expiry,
html.r2s-installed-app .page-content .parent-link-message {
  font-size: 12px !important;
  line-height: 1.45;
}

html.r2s-installed-app .page-content .notice-body,
html.r2s-installed-app .page-content .notice-detail-body,
html.r2s-installed-app .page-content .request-main,
html.r2s-installed-app .page-content .li-name,
html.r2s-installed-app .page-content .list-item-name,
html.r2s-installed-app .page-content .hwtask,
html.r2s-installed-app .page-content .hw-task {
  font-size: 14px;
  line-height: 1.5;
}

/* Force the Android TWA shell to use the phone layout, regardless of viewport reporting. */
html.r2s-installed-app #r2s-topbar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  height: calc(56px + env(safe-area-inset-top)) !important;
  padding: env(safe-area-inset-top) 12px 0 !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

html.r2s-installed-app #r2s-sidebar {
  position: fixed !important;
  top: 0;
  left: -300px !important;
  width: min(300px, 88vw) !important;
  height: 100dvh !important;
  padding: 0 0 calc(16px + env(safe-area-inset-bottom)) !important;
  z-index: 1001;
  overflow-y: auto;
  transition: left .28s cubic-bezier(.4, 0, .2, 1);
}

html.r2s-installed-app #r2s-sidebar.r2s-open {
  left: 0 !important;
  box-shadow: 8px 0 32px rgba(0, 0, 0, .18);
}

html.r2s-installed-app #r2s-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, .45);
}

html.r2s-installed-app #r2s-overlay.r2s-open {
  display: block;
}

html.r2s-installed-app .page-content {
  width: 100%;
  margin-left: 0 !important;
  padding-top: calc(56px + env(safe-area-inset-top)) !important;
}

html.r2s-installed-app .page-content .wrap {
  width: 100%;
  max-width: none;
  padding: 14px 14px calc(96px + env(safe-area-inset-bottom)) !important;
}

html.r2s-installed-app .page-content .tabs,
html.r2s-installed-app .page-content .section-tabs,
html.r2s-installed-app .page-content .school-admin-tab-bar,
html.r2s-installed-app .page-content .admin-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 6px;
  scrollbar-width: none;
}

html.r2s-installed-app .page-content .tabs::-webkit-scrollbar,
html.r2s-installed-app .page-content .section-tabs::-webkit-scrollbar,
html.r2s-installed-app .page-content .school-admin-tab-bar::-webkit-scrollbar,
html.r2s-installed-app .page-content .admin-tabs::-webkit-scrollbar {
  display: none;
}

html.r2s-installed-app .page-content .tab,
html.r2s-installed-app .page-content .section-tab,
html.r2s-installed-app .page-content .admin-tab {
  flex: 0 0 auto;
  min-width: 112px;
  min-height: 44px;
  padding: 10px 12px;
  white-space: nowrap;
  font-size: 12px;
}

html.r2s-installed-app .page-content .school-admin-tab-bar {
  flex-direction: row !important;
  align-items: center !important;
}

html.r2s-installed-app .page-content .admin-tabs {
  flex: 1 1 auto !important;
  min-width: 0;
}

/* R2S admin has its own shell instead of the shared page-content shell. */
html.r2s-installed-app .header {
  min-height: 56px;
  height: auto;
  padding: 10px 14px;
  gap: 10px;
  flex-wrap: wrap;
}

html.r2s-installed-app .header-brand {
  min-width: 0;
  font-size: 14px;
}

html.r2s-installed-app .header-right {
  width: 100%;
  min-width: 0;
  gap: 6px;
  flex-wrap: wrap;
}

html.r2s-installed-app .header-right > * {
  min-height: 40px;
}

html.r2s-installed-app .page {
  width: 100%;
  max-width: none;
  padding: 14px;
}

html.r2s-installed-app .admin-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px;
  margin: 0 -2px 16px;
  padding: 4px 2px;
  scrollbar-width: none;
}

html.r2s-installed-app .admin-tabs::-webkit-scrollbar {
  display: none;
}

html.r2s-installed-app .admin-tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 12px;
  white-space: nowrap;
  font-size: 12px;
}

html.r2s-installed-app .stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 20px !important;
}

html.r2s-installed-app .stat-card {
  min-width: 0;
  padding: 12px;
}

html.r2s-installed-app .stat-label,
html.r2s-installed-app .stat-sub,
html.r2s-installed-app .section-title {
  font-size: 12px;
  line-height: 1.4;
}

html.r2s-installed-app .stat-value {
  font-size: 22px;
}

html.r2s-installed-app .panel,
html.r2s-installed-app .card,
html.r2s-installed-app .approval-card,
html.r2s-installed-app .review-card {
  max-width: 100%;
  overflow-x: auto;
}

html.r2s-installed-app table {
  min-width: 620px;
}

/* School Database is a standalone admin page and needs its own app layout. */
html.r2s-installed-app .layout {
  width: 100%;
  min-height: 100vh;
  overflow: visible;
}

html.r2s-installed-app .sb-head {
  grid-template-columns: 1fr;
  align-items: stretch;
  padding: 12px 14px;
  gap: 8px;
}

html.r2s-installed-app .search-row {
  flex-wrap: wrap;
}

html.r2s-installed-app .search-row > * {
  min-height: 42px;
}

html.r2s-installed-app .main {
  max-height: none;
  overflow: visible;
}

html.r2s-installed-app .school-filter-row,
html.r2s-installed-app .school-label-row,
html.r2s-installed-app .school-item {
  grid-template-columns: 1fr;
}

html.r2s-installed-app .school-label-row {
  display: none;
}

html.r2s-installed-app .school-item {
  gap: 6px;
  padding: 12px;
}

html.r2s-installed-app .school-cell {
  white-space: normal;
  overflow: visible;
  font-size: 13px;
}

html.r2s-installed-app .school-cell::before {
  content: attr(data-label) ": ";
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

html.r2s-installed-app #school-stats-content,
html.r2s-installed-app .detail-strip,
html.r2s-installed-app .info-grid,
html.r2s-installed-app .form-row-2 {
  grid-template-columns: 1fr;
}

html.r2s-installed-app .stats-tile span,
html.r2s-installed-app .detail-field-label,
html.r2s-installed-app .info-label,
html.r2s-installed-app .form-hint {
  font-size: 12px;
}

html.r2s-installed-app .stats-tile strong {
  font-size: 22px;
}

/* The phone viewport must remain readable even when the app marker is absent. */
@media (max-width: 900px) {
  .page-content [style*="font-size:9px"],
  .page-content [style*="font-size:10px"],
  .page-content [style*="font-size:11px"],
  .page-content [style*="font-size:12px"],
  .page-content [style*="font-size:13px"] {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .page-content .school-admin-overview-field span,
  .page-content .school-admin-overview-tile span,
  .page-content .school-admin-overview-list h4,
  .page-content .school-admin-overview-list p,
  .page-content .stat-lbl,
  .page-content .notice-meta,
  .page-content .notice-status,
  .page-content .hw-ct,
  .page-content .hw-due,
  .page-content .hw-posted-by,
  .page-content .hw-day-date,
  .page-content .li-qty,
  .page-content .lcnt,
  .page-content .child-tab-meta,
  .page-content .child-tab-school,
  .page-content .parent-link-expiry,
  .page-content .parent-link-message {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .page-content p,
  .page-content label,
  .page-content small,
  .page-content table {
    font-size: 14px;
    line-height: 1.5;
  }

  .admin-tabs .admin-tab,
  .header .admin-name,
  .header .btn-home,
  .header .btn-preview,
  .header .btn-lock,
  .section-title,
  .stat-label,
  .stat-sub {
    font-size: 14px !important;
    line-height: 1.4;
  }

  .school-cell,
  .school-name,
  .school-meta,
  .school-row-btn,
  .board-pill,
  .detail-sub,
  .detail-field-value,
  .lists-title,
  .grade-pill,
  .stats-group-title,
  .stats-list p,
  .ai-school-name,
  .ai-school-meta,
  .form-label,
  .form-input,
  .form-select,
  .btn-primary,
  .btn-secondary {
    font-size: 14px !important;
    line-height: 1.45;
  }

  .school-cell::before,
  .detail-field-label,
  .info-label,
  .stats-list h4,
  .sb-title {
    font-size: 13px !important;
    line-height: 1.4;
  }

  .school-manager .school-cell::before,
  .school-manager .school-cell,
  .school-manager .school-name,
  .school-manager .school-meta,
  .school-manager .school-row-btn {
    font-size: 14px !important;
  }

  /* Keep the school-manager brand inside its header row on narrow screens. */
  .layout .home-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 58px;
    overflow: hidden;
  }

  .layout .home-logo img {
    width: auto;
    height: 42px;
    max-width: min(180px, 70vw);
    object-fit: contain;
  }

  .layout .sb-head {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px;
  }

  .layout .sb-title,
  .layout .sb-search input,
  .layout .btn-add,
  .layout .btn-ai,
  .layout #board-filter {
    font-size: 14px !important;
  }

}

/* Readability scale for compact admin markup on phone screens. */
html.r2s-installed-app [style*="font-size:10px"],
html.r2s-installed-app [style*="font-size:11px"],
html.r2s-installed-app [style*="font-size:12px"],
html.r2s-installed-app [style*="font-size:13px"] {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

html.r2s-installed-app .page-content p,
html.r2s-installed-app .page-content label,
html.r2s-installed-app .page-content small {
  font-size: 14px;
  line-height: 1.5;
}

html.r2s-installed-app .school-manager,
html.r2s-installed-app .school-cell,
html.r2s-installed-app .school-name,
html.r2s-installed-app .school-meta,
html.r2s-installed-app .school-row-btn,
html.r2s-installed-app .board-pill,
html.r2s-installed-app .detail-sub,
html.r2s-installed-app .detail-field-value,
html.r2s-installed-app .lists-title,
html.r2s-installed-app .grade-pill,
html.r2s-installed-app .stats-group-title,
html.r2s-installed-app .stats-list p,
html.r2s-installed-app .ai-school-name,
html.r2s-installed-app .ai-school-meta,
html.r2s-installed-app .form-label,
html.r2s-installed-app .form-input,
html.r2s-installed-app .form-select,
html.r2s-installed-app .btn-primary,
html.r2s-installed-app .btn-secondary {
  font-size: 14px !important;
  line-height: 1.45;
}

html.r2s-installed-app .detail-title {
  font-size: 24px !important;
}

html.r2s-installed-app .detail-field-label,
html.r2s-installed-app .info-label,
html.r2s-installed-app .stats-list h4,
html.r2s-installed-app .sb-title {
  font-size: 13px !important;
  line-height: 1.4;
}

html.r2s-installed-app .stat-label,
html.r2s-installed-app .stat-sub,
html.r2s-installed-app .section-title,
html.r2s-installed-app .admin-name {
  font-size: 13px !important;
}

html.r2s-installed-app .admin-tab,
html.r2s-installed-app .btn-home,
html.r2s-installed-app .btn-preview,
html.r2s-installed-app .btn-lock {
  font-size: 13px !important;
}

/* Apply the readable scale to every real dashboard shell, not just .page-content. */
@media (max-width: 900px) {
  .page-content :where(p, label, small, td, th, li, button, a, input, select, textarea),
  .page :where(p, label, small, td, th, li, button, a, input, select, textarea),
  .layout :where(p, label, small, td, th, li, button, a, input, select, textarea) {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .page-content :where(input, select, textarea),
  .page :where(input, select, textarea),
  .layout :where(input, select, textarea) {
    font-size: 16px !important;
  }

  .page-content :where(.hero-logo, .r2s-logo img, .home-logo img),
  .page :where(.header-brand img),
  .layout :where(.home-logo img) {
    max-width: min(180px, 70vw) !important;
    object-fit: contain !important;
  }
}

/* The standalone app can retain the same readable scale if its viewport reports wide. */
html.r2s-installed-app .page :where(p, label, small, td, th, li, button, a),
html.r2s-installed-app .layout :where(p, label, small, td, th, li, button, a),
html.r2s-installed-app .page-content :where(p, label, small, td, th, li, button, a) {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

html.r2s-installed-app .page :where(input, select, textarea),
html.r2s-installed-app .layout :where(input, select, textarea),
html.r2s-installed-app .page-content :where(input, select, textarea),
html.r2s-installed-app .card :where(input, select, textarea) {
  font-size: 16px !important;
}

html.r2s-installed-app .card :where(p, label, small, li, button, a, span) {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* Student records use the same dark name header as Admin user cards. */
@media (max-width: 900px) {
  #student-roster .approval-row,
  #student-search-roster .approval-row,
  #attendance-roster .approval-row {
    padding: 0;
    margin: 0 0 10px;
    overflow: hidden;
    border: 1px solid #d7e1e5;
    border-radius: 10px;
    background: #fff;
  }

  #student-roster .approval-title,
  #student-search-roster .approval-title,
  #attendance-roster .approval-title {
    padding: 10px 12px;
    background: #1f4e5f;
    color: #fff;
    font-size: 14px !important;
    font-weight: 800;
  }

  #student-roster .approval-meta,
  #student-search-roster .approval-meta,
  #attendance-roster .approval-meta {
    padding: 10px 12px 0;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  #student-roster .approval-actions,
  #student-search-roster .approval-actions,
  #attendance-roster .approval-actions {
    padding: 0 12px 12px;
  }

  #school-profile-search-results .school-profile-search-row {
    display: block;
    margin: 0 0 10px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #d7e1e5;
    border-radius: 10px;
    background: #fff;
  }

  #school-profile-search-results .school-profile-search-row > div:first-child {
    padding: 10px 12px 8px;
    background: #1f4e5f;
    border-bottom: 1px solid #163b48;
  }

  #school-profile-search-results .school-profile-search-row strong {
    color: #fff;
    font-size: 14px !important;
    font-weight: 800;
  }

  #school-profile-search-results .school-profile-search-row span {
    color: rgba(255,255,255,.82);
    font-size: 13px !important;
  }

  #school-profile-search-results .school-profile-search-row > button {
    margin: 10px 12px 12px;
  }

  #school-student-profile-content .school-profile-panel-grid > .approval-box:first-child .approval-head {
    margin: -12px -12px 12px;
    padding: 10px 12px;
    background: #1f4e5f;
    border-radius: 10px 10px 0 0;
  }

  #school-student-profile-content .school-profile-panel-grid > .approval-box:first-child .approval-head h3 {
    color: #fff;
    font-weight: 800;
  }
}

/* School Admin uses full-width vertical menus on phones. */
@media (max-width: 900px) {
  .page-content .school-admin-tab-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .page-content .school-admin-tab-bar .admin-tabs {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
    overflow: visible !important;
  }

  .page-content .school-admin-tab-bar .admin-tab {
    width: 100%;
    min-width: 0 !important;
    justify-content: flex-start;
    text-align: left;
  }

  .page-content .school-admin-student-tools,
  .page-content .school-admin-teacher-tools,
  .page-content .school-admin-communication-tools {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  .page-content .school-admin-student-tool,
  .page-content .school-admin-teacher-tool,
  .page-content .school-admin-communication-tool {
    width: 100%;
    text-align: left;
  }

  #school-profile-modal {
    align-items: flex-start;
    overflow-y: auto;
    padding: 12px;
  }

  #school-profile-modal .modal-card {
    width: 100%;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    margin: 0 auto;
  }

  #school-profile-modal #school-profile-save {
    position: sticky;
    bottom: 0;
    z-index: 2;
    width: 100%;
    box-shadow: 0 -6px 12px rgba(255, 255, 255, .92);
  }

  .page-content .school-admin-student-tools.is-collapsed,
  .page-content .school-admin-teacher-tools.is-collapsed,
  .page-content .school-admin-communication-tools.is-collapsed {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .page-content .school-admin-student-tools.is-collapsed > [data-student-focus-open]:not(.active),
  .page-content .school-admin-teacher-tools.is-collapsed > [data-teacher-focus-open]:not(.active),
  .page-content .school-admin-communication-tools.is-collapsed > [data-school-communication-open]:not(.active) {
    display: none;
  }

  .page-content .school-admin-student-tools.is-collapsed > .active,
  .page-content .school-admin-teacher-tools.is-collapsed > .active,
  .page-content .school-admin-communication-tools.is-collapsed > .active {
    flex: 1 1 auto;
  }

  .page-content .school-admin-student-tools.is-collapsed .school-admin-student-stats {
    display: none;
  }

  .page-content .school-admin-submenu-toggle {
    flex: 0 0 auto;
    width: auto;
    border: 1px solid #fed7aa;
    border-radius: 9px;
    background: #fff7ed;
    color: #c2410c;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    padding: 10px 12px;
    cursor: pointer;
    white-space: nowrap;
  }
}