/* V15.28.10 — Responsive system-wide viewport hardening
   Screen-only responsive layer. Desktop identity/business logic/print layouts remain unchanged.
   Important: page-level horizontal overflow is NOT hidden; offending elements are made flexible or
   isolated in their own scroll container (tables/tabs only). */

@media screen {
  :root {
    --rs-gutter: clamp(8px, 2vw, 22px);
    --rs-touch: 44px;
    --rs-radius: 14px;
  }

  html {
    inline-size: 100%;
    max-inline-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    margin: 0;
  }

  /* Previous releases hid horizontal overflow globally. This release deliberately exposes it
     so the source element can be repaired instead of masking the defect. */
  html, body { overflow-x: visible !important; }

  *, *::before, *::after { box-sizing: border-box; }

  img, picture, video, canvas, svg:not([width][height]) {
    max-inline-size: 100%;
    block-size: auto;
  }

  iframe, embed, object { max-inline-size: 100%; }
  fieldset { min-inline-size: 0; max-inline-size: 100%; }

  :where(
    .premium-app-shell,.premium-main,.premium-content,.content,
    .public-main,.ref-public-main,.ref-container,
    .tp-shell,.tp-main,.tp-card,.tp-hero,
    .card,.card-body,.card-header,.card-footer,.page-head,.page-title,
    .rg-panel,.rg3d-content,.wizard-shell,.wizard-step-panel,
    .parent-portal-stage,.parent-portal-wizard-shell,.student-government-portal,
    .school-timetable-workspace,.school-timetable-panel,.tt-section,
    .form-grid,.grid-two,.detail-grid,.stats-grid
  ) { min-inline-size: 0; max-inline-size: 100%; }

  :where(h1,h2,h3,h4,h5,h6,p,span,strong,small,label,a,button,li,td,th,dd,dt) {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  :where(input,select,textarea,button,.btn,[role="button"]) {
    max-inline-size: 100%;
    min-inline-size: 0;
  }

  textarea { resize: vertical; }

  pre, code {
    max-inline-size: 100%;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  /* Tables: only their own container may scroll horizontally. */
  :where(.global-table-scroll,.table-wrap,.table-responsive,.responsive-table-wrap,[class*="table-wrap"],[class*="table-scroll"],.tp-schedule-wrap) {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
  }

  :where(.global-table-scroll,.table-responsive,.responsive-table-wrap) > table {
    margin-inline: 0;
  }

  /* Runtime classes added only to an element proven to exceed its containing block. */
  .responsive-force-fit {
    width: 100% !important;
    inline-size: 100% !important;
    max-width: 100% !important;
    max-inline-size: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
  }
  .responsive-flex-wrap {
    flex-wrap: wrap !important;
    min-inline-size: 0 !important;
  }
  .responsive-grid-fit {
    /* Marker only: grid structure is decided by deterministic page CSS, never by runtime JS. */
    min-width: 0 !important;
    min-inline-size: 0 !important;
    max-width: 100% !important;
    max-inline-size: 100% !important;
  }
  .responsive-wrap-text { white-space: normal !important; }
  .responsive-floating-fit {
    width: auto !important;
    inline-size: auto !important;
    max-width: none !important;
    max-inline-size: none !important;
    inset-inline: 8px !important;
  }

  /* Do not let old margin offsets double-count the admin grid. */
  body.reference-master-admin .premium-app-shell > .premium-main {
    margin-inline: 0 !important;
    min-inline-size: 0 !important;
  }
}

/* ===== Compact desktop / laptop ===== */
@media screen and (max-width: 1366px) {
  body.reference-master-admin .premium-app-shell.app,
  body.reference-master-admin .premium-app-shell.rg3d-shell {
    grid-template-columns: 250px minmax(0,1fr) !important;
  }
  body.reference-master-admin .premium-sidebar {
    inline-size: 250px !important;
    min-inline-size: 250px !important;
    max-inline-size: 250px !important;
  }
  body.reference-master-admin .premium-content { padding-inline: 16px !important; }

  body.reference-master-public .ref-header-inner,
  body.reference-master-public .ref-public-main,
  body.reference-master-public .ref-footer-top,
  body.reference-master-public .ref-footer-bottom {
    inline-size: min(calc(100% - 28px),1460px) !important;
    max-inline-size: 100% !important;
  }

  .tp-shell {
    inline-size: min(calc(100% - 28px),1280px) !important;
    max-inline-size: 100% !important;
    grid-template-columns: minmax(230px,280px) minmax(0,1fr) !important;
  }
}

/* ===== Tablet landscape / narrow laptop ===== */
@media screen and (max-width: 1100px) {
  body.reference-master-admin .premium-app-shell.app,
  body.reference-master-admin .premium-app-shell.rg3d-shell {
    grid-template-columns: 238px minmax(0,1fr) !important;
  }
  body.reference-master-admin .premium-sidebar {
    inline-size: 238px !important;
    min-inline-size: 238px !important;
    max-inline-size: 238px !important;
  }
  body.reference-master-admin .premium-main { min-inline-size: 0 !important; }
  body.reference-master-admin .premium-topbar { gap: 8px !important; }
  body.reference-master-admin .premium-topbar > * { min-inline-size: 0; }

  body.reference-master-public .ref-header-inner {
    grid-template-columns: minmax(0,1fr) auto auto !important;
    gap: 10px !important;
  }
  body.reference-master-public .ref-header-brand,
  body.reference-master-public .ref-header-brand span { min-inline-size: 0 !important; }
  body.reference-master-public .ref-header-brand strong { white-space: normal !important; }

  .tp-shell { grid-template-columns: 230px minmax(0,1fr) !important; gap: 14px !important; }
  .tp-kpis { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .tp-academic-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }

  :where(.grid-4,.grid-four,.four-grid,.kpi-grid,.stats-grid,.quick-services-grid,.sedd-secondary-services) {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}

/* ===== Tablet + phone: app layout ===== */
@media screen and (max-width: 1100px) {
  html, body {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
  }

  /* ---------- ADMIN SHELL / RTL DRAWER ---------- */
  /* High-specificity source reset: legacy master CSS hid horizontal overflow and
     kept an internal viewport scroller. On compact layouts the document itself
     owns vertical scrolling; horizontal issues remain visible to the repair layer. */
  body.premium-admin-body.reference-master-admin.rg3d-admin {
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: 100dvh !important;
  }
  body.reference-master-admin.rg3d-admin .premium-main.rg3d-main {
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: 100dvh !important;
  }
  body.reference-master-admin.rg3d-admin .premium-content.rg3d-content {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  body.reference-master-admin.rg3d-admin .premium-topbar.rg3d-topbar {
    height: auto !important;
    min-height: 64px !important;
  }

  /* High-specificity reset for the 3D admin master layout on tablets. */
  body.reference-master-admin.rg3d-admin .premium-app-shell.rg3d-shell {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    grid-template-columns:none !important;
    margin:0 !important;
  }
  body.reference-master-admin.rg3d-admin .premium-main.rg3d-main {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }
  body.reference-master-admin.rg3d-admin .premium-sidebar.rg3d-sidebar {
    position:fixed !important;
    top:0 !important; bottom:0 !important; right:0 !important; left:auto !important;
    width:min(88vw,340px) !important;
    max-width:340px !important;
    min-width:0 !important;
    height:100dvh !important;
    transform:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:opacity .18s ease, visibility 0s linear .18s !important;
    z-index:1600 !important;
  }
  body.reference-master-admin.rg3d-admin .premium-sidebar.rg3d-sidebar.mobile-open {
    transform:none !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transition-delay:0s !important;
  }

  body.reference-master-admin .premium-app-shell,
  body.premium-admin-body .premium-app-shell,
  body.reference-master-admin .app,
  body.premium-admin-body .app {
    display: block !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    margin: 0 !important;
  }

  body.reference-master-admin .premium-main,
  body.premium-admin-body .premium-main,
  body.reference-master-admin .main,
  body.premium-admin-body .main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    margin: 0 !important;
  }

  body.reference-master-admin .premium-sidebar,
  body.premium-admin-body .premium-sidebar {
    position: fixed !important;
    inset-block: 0 !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    inline-size: min(88vw,340px) !important;
    max-inline-size: 340px !important;
    min-inline-size: 0 !important;
    block-size: 100dvh !important;
    transform: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .18s ease, visibility 0s linear .18s !important;
    overflow: hidden !important;
    z-index: 1600 !important;
  }
  body.reference-master-admin .premium-sidebar.mobile-open,
  body.premium-admin-body .premium-sidebar.mobile-open {
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition-delay: 0s !important;
  }

  body.reference-master-admin .premium-sidebar .tree-nav,
  body.premium-admin-body .premium-sidebar .tree-nav,
  body.reference-master-admin .rg3d-nav {
    max-block-size: calc(100dvh - 135px) !important;
    overflow-y: auto !important;
    overflow-x: clip !important;
    overscroll-behavior: contain;
    padding-block-end: 90px !important;
  }

  body.reference-master-admin .premium-sidebar-overlay,
  body.premium-admin-body .premium-sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1590 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
  }
  body.reference-master-admin .premium-sidebar-overlay.is-open,
  body.premium-admin-body .premium-sidebar-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body.premium-nav-locked { overflow-y: hidden; }

  body.reference-master-admin .premium-topbar,
  body.premium-admin-body .premium-topbar {
    position: sticky !important;
    inset-block-start: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) auto !important;
    align-items: center !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    block-size: auto !important;
    min-block-size: 64px !important;
    gap: 7px !important;
    padding: 8px 10px !important;
    z-index: 1300 !important;
  }
  body.reference-master-admin .rg3d-mobile-menu,
  body.premium-admin-body .sidebar-toggle {
    display: grid !important;
    place-items: center !important;
    inline-size: var(--rs-touch) !important;
    block-size: var(--rs-touch) !important;
    min-inline-size: var(--rs-touch) !important;
    grid-column: 1;
    grid-row: 1;
  }
  body.reference-master-admin .rg3d-topbar-meta {
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    min-inline-size: 0 !important;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px !important;
  }
  body.reference-master-admin .reference-dashboard-bell {
    grid-column: 3;
    grid-row: 1;
    min-inline-size: var(--rs-touch) !important;
  }
  body.reference-master-admin .reference-top-search,
  body.reference-master-admin .rg3d-search {
    display: flex !important;
    grid-column: 1 / -1;
    grid-row: 2;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
  }
  body.reference-master-admin .rg3d-search input { inline-size: 100% !important; min-inline-size: 0 !important; }
  body.reference-master-admin .rg3d-user-card {
    grid-column: 1 / -1;
    grid-row: 3;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    justify-content: flex-start !important;
  }
  body.reference-master-admin .rg3d-user-card > div { min-inline-size: 0; }
  body.reference-master-admin .rg3d-user-card b,
  body.reference-master-admin .rg3d-user-card small { white-space: normal !important; }

  body.reference-master-admin .premium-main,
  body.premium-admin-body .premium-main,
  body.reference-master-admin .rg3d-main,
  body.reference-master-admin .rg3d-content { overflow-x: visible !important; }

  body.reference-master-public.public-page-teacher_portal .ref-public-main.public-main,
  body.reference-master-public.public-page-teacher_portal_grades .ref-public-main.public-main,
  body.reference-master-public.public-page-teacher_portal_class .ref-public-main.public-main,
  body.reference-master-public.public-page-teacher_portal_homeworks .ref-public-main.public-main,
  body.reference-master-public.public-page-teacher_portal_attendance .ref-public-main.public-main { overflow-x: visible !important; }

  body.reference-master-admin .premium-content,
  body.premium-admin-body .premium-content,
  body.reference-master-admin .content,
  body.premium-admin-body .content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    margin: 0 !important;
    padding: 12px 10px 28px !important;
    overflow: visible !important;
  }
  body.reference-master-admin .premium-backbar,
  body.premium-admin-body .premium-backbar {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
  }

  /* Admin common component layouts */
  body.reference-master-admin :where(.page-head,.card-header,.card-footer,.section-head,.toolbar,.filters-bar,.action-bar,.actions,.row-actions,.form-actions) {
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    flex-wrap: wrap !important;
    gap: 8px;
  }
  body.reference-master-admin :where(.grid-two,.grid-2,.two-grid,.form-grid-2,.details-grid,.dashboard-grid,.detail-grid) {
    grid-template-columns: 1fr !important;
  }
  body.reference-master-admin :where(.grid-three,.grid-3,.three-grid,.grid-four,.grid-4,.four-grid,.kpi-grid,.stats-grid,.form-grid) {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  body.reference-master-admin :where(.card,.rg-panel,.wizard-step-panel,.register-entry-panel,.sovereign-register-shell) {
    inline-size: 100%;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
  }

  /* inline fixed-width blocks from older screens */
  body.reference-master-admin :where(div,section,article,form,fieldset,header,footer,main,nav)[style*="min-width"],
  body.reference-master-public :where(div,section,article,form,fieldset,header,footer,main,nav)[style*="min-width"] {
    min-inline-size: 0 !important;
  }
  body.reference-master-admin :where(div,section,article,form,fieldset,header,footer,main,nav)[style*="width:"],
  body.reference-master-public :where(div,section,article,form,fieldset,header,footer,main,nav)[style*="width:"] {
    max-inline-size: 100% !important;
  }

  /* Bootstrap-like rows used by legacy modules */
  body.reference-master-admin .row,
  body.reference-master-public .row {
    display: flex !important;
    flex-wrap: wrap !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
  }
  body.reference-master-admin [class*="col-"],
  body.reference-master-public [class*="col-"] { min-inline-size: 0 !important; max-inline-size: 100%; }

  /* ---------- PUBLIC HEADER / MAIN ---------- */
  body.reference-master-public .ref-site-header { width:100% !important; max-width:100% !important; inline-size:100% !important; max-inline-size:100% !important; margin-left:0 !important; margin-right:0 !important; margin-inline:0 !important; }
  body.reference-master-public .ref-header-inner {
    width: 100% !important;
    max-width: 100% !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto auto !important;
    gap: 7px !important;
    padding: 8px 10px !important;
  }
  body.reference-master-public .ref-header-brand {
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    gap: 8px !important;
  }
  body.reference-master-public .ref-header-brand img {
    inline-size: 48px !important;
    block-size: 48px !important;
    flex: 0 0 48px !important;
    object-fit: contain;
  }
  body.reference-master-public .ref-header-brand span { min-inline-size: 0 !important; max-inline-size: 100%; }
  body.reference-master-public .ref-header-brand strong {
    font-size: clamp(12px,2.5vw,15px) !important;
    line-height: 1.45 !important;
    white-space: normal !important;
  }
  body.reference-master-public .ref-header-brand small {
    font-size: clamp(8px,1.8vw,10px) !important;
    white-space: normal !important;
  }
  body.reference-master-public .ref-mobile-nav-toggle {
    display: grid !important;
    place-items: center !important;
    inline-size: var(--rs-touch) !important;
    block-size: var(--rs-touch) !important;
    min-inline-size: var(--rs-touch) !important;
  }
  body.reference-master-public .ref-header-login { min-inline-size: 0 !important; }
  body.reference-master-public .ref-login-button {
    min-inline-size: var(--rs-touch) !important;
    min-block-size: var(--rs-touch) !important;
  }
  body.reference-master-public .ref-header-nav {
    position: absolute !important;
    inset-block-start: 100% !important;
    inset-inline: 8px !important;
    inline-size: auto !important;
    max-inline-size: none !important;
    max-block-size: calc(100dvh - 86px) !important;
    overflow-y: auto !important;
    overflow-x: clip !important;
  }
  body.reference-master-public .ref-header-nav a { min-block-size: 44px; }

  body.reference-master-public .ref-public-backbar,
  body.reference-master-public .ref-public-backbar__inner { max-inline-size: 100% !important; }
  body.reference-master-public .ref-public-backbar__inner {
    inline-size: 100% !important;
    padding-inline: 10px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  body.reference-master-public .ref-public-main.public-main,
  body.reference-master-public.reference-master-public:not(.public-page-admission) .ref-public-main.public-main,
  body.reference-master-public:not(.public-page-admission) .ref-public-main.public-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body.reference-master-public .ref-public-main,
  body.reference-master-public .public-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    padding: 12px 10px 28px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;
    overflow: visible !important;
  }

  /* A child may be internally scrollable, but it must never establish a wider page canvas. */
  body.reference-master-public .ref-public-main > :not(table),
  body.reference-master-public .public-main > :not(table),
  body.reference-master-admin .premium-content > :not(table),
  body.reference-master-admin .rg3d-content > :not(table) {
    min-width: 0 !important;
    min-inline-size: 0 !important;
    max-width: 100% !important;
    max-inline-size: 100% !important;
  }

  body.reference-master-public :where(.ref-header-inner,.ref-header-brand,.ref-header-login,.ref-public-backbar__inner) > *,
  body.reference-master-admin :where(.premium-topbar,.premium-content,.rg3d-topbar,.rg3d-content) > * {
    min-width: 0;
    min-inline-size: 0;
  }
  body.reference-master-public .ref-footer-top,
  body.reference-master-public .ref-footer-bottom {
    inline-size: calc(100% - 20px) !important;
    max-inline-size: 100% !important;
    grid-template-columns: 1fr !important;
  }

  body.reference-master-public :where(.parent-portal-wizard-shell,.parent-portal-stage,.public-card,.wizard-shell,.parent-access-wizard,.student-government-portal) {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    margin-inline: auto !important;
  }

  /* horizontal controls may scroll independently, never the page */
  body.reference-master-public :where(.portal-tabs,.parent-wizard-steps,.parent-portal-quick-help,.timetable-tabs,.tabs,.pagination),
  body.reference-master-admin :where(.tabs,.pagination,.wizard-step-tabs) {
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  /* ---------- TEACHER PORTAL ---------- */
  .tp-shell {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    margin: 12px auto !important;
    padding-inline: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .tp-side {
    position: static !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    padding: 14px !important;
  }
  .tp-side .tp-avatar { inline-size: 64px !important; block-size: 64px !important; font-size: 32px !important; }
  .tp-nav { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 6px !important; }
  .tp-nav a { margin: 0 !important; min-inline-size: 0 !important; }
  .tp-main { inline-size: 100% !important; max-inline-size: 100% !important; min-inline-size: 0 !important; }
  .tp-hero { padding: 18px !important; border-radius: 16px !important; }
  .tp-hero-row { flex-wrap: wrap !important; min-inline-size: 0 !important; }
  .tp-hero h1 { font-size: clamp(22px,5vw,27px) !important; }
  .tp-hero-badge { white-space: normal !important; max-inline-size: 100% !important; }
  .tp-kpis { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .tp-academic-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .tp-card { padding: 16px !important; inline-size:100%; max-inline-size:100%; min-inline-size:0; }
  .tp-card-head { flex-wrap: wrap !important; }
  .tp-assignment-list { grid-template-columns: 1fr !important; }
  .tp-assignment-top { flex-wrap: wrap !important; }
  .tp-actions { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .tp-grid,.tp-leave-kpis { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }

  /* teacher subpages (grades/class/homework/attendance) */
  :where(.tg-wrap,.tc-wrap,.th-wrap,.ta-wrap) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    margin: 12px auto !important;
    padding-inline: 2px !important;
  }
  :where(.tg-head,.tc-head,.th-head,.ta-head) {
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    flex-wrap: wrap !important;
  }
  .tg-head { align-items: flex-start !important; flex-direction: column !important; }
  .tg-head > div { min-inline-size:0; max-inline-size:100%; }
  .tg-head h1 { font-size: clamp(21px,5.5vw,28px) !important; }
  .tg-head p { white-space: normal !important; overflow-wrap:anywhere; }
  :where(.tg-back,.tc-back,.th-back,.ta-head a) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    inline-size: auto !important;
    max-inline-size: 100% !important;
    min-block-size: 44px;
    white-space: normal !important;
  }
  :where(.tg-filter,.tg-form-top,.th-form,.review-form) { grid-template-columns: 1fr !important; }
  :where(.tc-actions,.tc-kpis,.th-homework-grid) { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .ta-row { grid-template-columns: 50px minmax(0,1fr) 90px !important; min-inline-size:0; }
  .tg-card { inline-size:100%; max-inline-size:100%; min-inline-size:0; padding:16px !important; }
  .tg-score { inline-size: 100% !important; max-inline-size: 140px !important; }

  /* ---------- FORMS ---------- */
  body.reference-master-public input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  body.reference-master-public select,
  body.reference-master-public textarea,
  body.reference-master-admin input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  body.reference-master-admin select,
  body.reference-master-admin textarea {
    inline-size: 100%;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    font-size: max(16px,1em) !important;
  }
  body.reference-master-public :where(.form-grid,.form-grid-layout,.form-large-grid,.gov-form-grid,.staff-input-grid,.hsc-grid),
  body.reference-master-admin :where(.form-grid,.form-grid-layout,.form-large-grid,.gov-form-grid,.staff-input-grid,.hsc-grid) {
    max-inline-size:100% !important;
    min-inline-size:0 !important;
  }
  body.reference-master-public :where(.form-group,.gov-form-cell,.hsc-field,.student-government-field),
  body.reference-master-admin :where(.form-group,.gov-form-cell,.hsc-field,.student-government-field) {
    min-inline-size:0 !important;
    max-inline-size:100% !important;
  }

  /* ---------- DIALOGS / DRAWERS / DROPDOWNS ---------- */
  :where(.modal-dialog,[role="dialog"],.dialog,.popup,.pwa-install-dialog,.orders-floating-panel-card,.admin-floating-login-card-panel,.deletion-command-drawer > section) {
    max-inline-size: 100% !important;
    max-block-size: calc(100dvh - 20px) !important;
  }
  :where(.modal-dialog,[role="dialog"],.dialog,.popup,.pwa-install-dialog,.orders-floating-panel-card,.admin-floating-login-card-panel) {
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  body.reference-master-public .admin-floating-login-card-panel,
  body.reference-master-public .orders-floating-panel-card,
  body.reference-master-public .pwa-install-dialog {
    position: fixed !important;
    inset-block: 72px 10px !important;
    inset-inline: 10px !important;
    inline-size: auto !important;
    max-inline-size: none !important;
    margin: 0 !important;
  }

  /* ---------- TOAST / NOTIFICATION ---------- */
  :where(.toast,.toast-container,.notification,.notifications,.flash-toast,[class*="toast"],[class*="notification"]) {
    max-inline-size: calc(100% - 16px) !important;
  }

  /* ---------- TIMETABLE ---------- */
  .tt-head,.tt-command-head,.tt-publish-box { min-inline-size:0; max-inline-size:100%; }
  .tt-command-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .tt-print-grid { grid-template-columns: 1fr !important; }
  .tt-actions { flex-wrap:wrap !important; max-inline-size:100%; }
  .tt-chip { max-inline-size:100%; white-space:normal; }
}

/* ===== Phones ===== */
@media screen and (max-width: 640px) {
  :root { --rs-gutter: 8px; }

  body.reference-master-admin .premium-content,
  body.premium-admin-body .premium-content,
  body.reference-master-public .ref-public-main { padding-inline: 8px !important; }

  /* admin topbar remains fully usable; nothing essential is hidden */
  body.reference-master-admin .premium-topbar,
  body.premium-admin-body .premium-topbar {
    grid-template-columns: 44px minmax(0,1fr) 44px !important;
    padding: 7px 8px !important;
  }
  body.reference-master-admin .rg3d-topbar-meta { justify-content:flex-start; }
  body.reference-master-admin .rg3d-time,
  body.reference-master-admin .rg3d-date { min-inline-size:0 !important; }
  body.reference-master-admin .rg3d-time b,
  body.reference-master-admin .rg3d-date b { font-size:11px !important; white-space:normal !important; }
  body.reference-master-admin .rg3d-user-card { padding:7px 9px !important; }
  body.reference-master-admin .rg3d-user-card img { inline-size:34px !important; block-size:34px !important; flex:0 0 34px; }

  body.reference-master-admin :where(.grid-three,.grid-3,.three-grid,.grid-four,.grid-4,.four-grid,.kpi-grid,.stats-grid,.form-grid),
  body.reference-master-public :where(.quick-services-grid,.sedd-portals-grid,.sedd-secondary-services,.result-grid,.stats-grid,.form-grid),
  .tp-kpis,.tp-academic-grid {
    grid-template-columns: 1fr !important;
  }

  body.reference-master-admin :where(.page-head,.card-header,.section-head) { align-items: stretch !important; }
  body.reference-master-admin :where(.page-head,.card-header,.section-head) .btn { inline-size:100% !important; justify-content:center !important; }

  body.reference-master-public .ref-header-inner {
    grid-template-columns: minmax(0,1fr) 42px 42px !important;
    padding: 7px 8px !important;
    gap: 5px !important;
  }
  body.reference-master-public .ref-header-brand img {
    inline-size: 40px !important;
    block-size: 40px !important;
    flex-basis: 40px !important;
  }
  body.reference-master-public .ref-header-brand strong { font-size: clamp(11px,3.2vw,13px) !important; }
  body.reference-master-public .ref-header-brand small { display: none !important; }
  body.reference-master-public .ref-login-button {
    inline-size: 42px !important;
    min-inline-size: 42px !important;
    block-size: 42px !important;
    padding: 0 !important;
  }
  body.reference-master-public .ref-login-button b { display: none !important; }
  body.reference-master-public .ref-mobile-nav-toggle { inline-size:42px !important; block-size:42px !important; }
  body.reference-master-public .ref-public-backbar__inner { padding-block:6px !important; }
  body.reference-master-public .ref-public-backbar__inner span { inline-size:100%; order:3; font-size:12px; }

  /* readable responsive typography */
  body.reference-master-public :where(h1,.page-title,.page-heading) { font-size: clamp(1.35rem,6vw,1.85rem) !important; line-height:1.35; }
  body.reference-master-public h2,
  body.reference-master-admin h2 { font-size: clamp(1.15rem,5vw,1.55rem); line-height:1.4; }

  :where(.tg-wrap,.tc-wrap,.th-wrap,.ta-wrap) { width:calc(100% - 4px) !important; max-width:calc(100% - 4px) !important; inline-size:calc(100% - 4px) !important; margin-left:2px !important; margin-right:2px !important; margin-block:10px !important; }
  :where(.tg-head,.tc-head,.th-head,.ta-head) { padding:15px !important; border-radius:16px !important; }
  :where(.tc-actions,.tc-kpis,.th-homework-grid) { grid-template-columns:1fr !important; }
  .ta-row { grid-template-columns:42px minmax(0,1fr) 74px !important; padding-inline:6px !important; }

  .tp-shell { padding-inline: 5px !important; }
  .tp-nav { grid-template-columns: 1fr !important; }
  .tp-hero { padding: 15px !important; }
  .tp-hero h1 { font-size: clamp(20px,6vw,24px) !important; }
  .tp-card { padding: 13px !important; border-radius: 15px !important; }
  .tp-card-head { flex-direction: column !important; align-items: stretch !important; }
  .tp-actions,.tp-grid,.tp-leave-kpis { grid-template-columns: 1fr !important; }

  /* tables keep readable columns and scroll only inside wrapper */
  :where(.global-table-scroll,.table-wrap,.table-responsive,.responsive-table-wrap) table {
    inline-size: max-content !important;
    min-inline-size: 100% !important;
    max-inline-size: none !important;
  }
  :where(.global-table-scroll,.table-wrap,.table-responsive,.responsive-table-wrap) th,
  :where(.global-table-scroll,.table-wrap,.table-responsive,.responsive-table-wrap) td {
    white-space: normal !important;
    min-inline-size: 88px;
    max-inline-size: 260px;
    overflow-wrap: anywhere;
  }

  /* Teacher schedule becomes a vertical daily card rather than a wide table. */
  .tp-schedule {
    display: block !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
  }
  .tp-schedule thead { display: none !important; }
  .tp-schedule tbody,.tp-schedule tr { display:block !important; inline-size:100% !important; }
  .tp-schedule tr {
    margin-block-end: 10px !important;
    border: 1px solid #dbe6ed !important;
    border-radius: 13px !important;
    overflow: clip !important;
    background: #fff !important;
  }
  .tp-schedule tr > th {
    display:block !important;
    inline-size:100% !important;
    padding:9px 11px !important;
    background:#0d4f72 !important;
    color:#fff !important;
    text-align:start !important;
  }
  .tp-schedule tr > td {
    display:grid !important;
    grid-template-columns: 68px minmax(0,1fr) !important;
    gap:7px !important;
    align-items:center !important;
    inline-size:100% !important;
    min-inline-size:0 !important;
    min-block-size:46px !important;
    block-size:auto !important;
    padding:7px 9px !important;
    border:0 !important;
    border-block-end:1px solid #e5edf2 !important;
    text-align:start !important;
  }
  .tp-schedule tr > td:last-child { border-block-end:0 !important; }
  .tp-schedule tr > td::before { font-size:11px !important; font-weight:900 !important; color:#315b73 !important; }
  .tp-schedule tr > td:nth-child(2)::before{content:'الحصة 1'}
  .tp-schedule tr > td:nth-child(3)::before{content:'الحصة 2'}
  .tp-schedule tr > td:nth-child(4)::before{content:'الحصة 3'}
  .tp-schedule tr > td:nth-child(5)::before{content:'الحصة 4'}
  .tp-schedule tr > td:nth-child(6)::before{content:'الحصة 5'}
  .tp-schedule tr > td:nth-child(7)::before{content:'الحصة 6'}
  .tp-slot { min-inline-size:0 !important; margin:0 !important; padding:7px !important; }

  /* timetable controls */
  .tt-command-center { padding:12px !important; border-radius:14px !important; }
  .tt-command-head { align-items:flex-start !important; flex-direction:column !important; }
  .tt-command-grid { grid-template-columns:1fr !important; }
  .tt-command { min-block-size:50px; min-inline-size:0; }
  .tt-section { padding:12px !important; }
  .tt-kpis { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .tt-actions .btn { flex:1 1 100%; inline-size:100%; text-align:center; }
  .tt-publish-box { align-items:stretch !important; flex-direction:column !important; }
  .tt-publish-box form,.tt-publish-box button { inline-size:100%; }

  /* actions / filters */
  :where(.actions,.row-actions,.form-actions,.hero-actions,.homepage-image-actions,.school-timetable-command-actions,.inline-filter,.search-bar) {
    max-inline-size:100% !important;
    min-inline-size:0 !important;
    flex-wrap:wrap !important;
  }
  :where(.actions,.row-actions,.form-actions) > .btn { flex:1 1 140px; }

  /* legacy columns become full width on phone */
  body.reference-master-admin [class*="col-md-"],
  body.reference-master-admin [class*="col-lg-"],
  body.reference-master-public [class*="col-md-"],
  body.reference-master-public [class*="col-lg-"] {
    flex: 1 1 100% !important;
    inline-size:100% !important;
    max-inline-size:100% !important;
  }
}

/* V15.28.7: viewport-owned floating UI never sits outside the viewport while closed. */
@media screen and (max-width: 1100px) {
  body.reference-master-public .admin-floating-login-card-panel[aria-hidden="true"],
  body.reference-master-public .ref-header-nav:not(.is-open):not(.open),
  body.reference-master-admin .deletion-command-drawer[aria-hidden="true"] {
    pointer-events: none !important;
  }

  body.reference-master-public.public-page-admission .admission-command-rail {
    right: 8px !important;
    left: auto !important;
    inset-inline-end: 8px !important;
    inset-inline-start: auto !important;
    max-width: calc(100% - 16px) !important;
    max-inline-size: calc(100% - 16px) !important;
  }
}

/* ===== Small phones 320–430 ===== */
@media screen and (max-width: 430px) {
  body.reference-master-admin .premium-sidebar { inline-size:min(92vw,330px) !important; }
  body.reference-master-admin .premium-content { padding:8px 6px 24px !important; }
  body.reference-master-admin .premium-topbar { padding-inline:6px !important; }

  body.reference-master-public .ref-header-inner {
    grid-template-columns:minmax(0,1fr) 40px 40px !important;
    gap:4px !important;
    padding-inline:6px !important;
  }
  body.reference-master-public .ref-header-brand { gap:5px !important; }
  body.reference-master-public .ref-header-brand img {
    inline-size:36px !important;
    block-size:36px !important;
    flex-basis:36px !important;
  }
  body.reference-master-public .ref-login-button,
  body.reference-master-public .ref-mobile-nav-toggle {
    inline-size:40px !important;
    min-inline-size:40px !important;
    block-size:40px !important;
  }
  body.reference-master-public .ref-public-main,
  body.reference-master-public .ref-public-main.public-main,
  body.reference-master-public:not(.public-page-admission) .ref-public-main.public-main {
    padding:9px 6px 24px !important;
  }

  .tp-hero h1 { font-size:clamp(19px,6vw,22px) !important; }
  .tp-kpi strong { font-size:22px !important; }
  .tp-schedule tr > td { grid-template-columns:60px minmax(0,1fr) !important; }

  .tt-kpis { grid-template-columns:1fr !important; }
}

@media screen and (max-width: 360px) {
  body.reference-master-public .ref-header-brand strong { font-size:10.5px !important; }
  body.reference-master-admin .rg3d-time span,
  body.reference-master-admin .rg3d-date span { display:none; }
  body.reference-master-admin .rg3d-user-card small { font-size:10px !important; }
  :where(.tg-card,.tc-card,.th-card,.ta-card) { padding:12px !important; }
}

/* phone landscape: use horizontal space without clipping */
@media screen and (max-height: 520px) and (orientation: landscape) and (max-width: 950px) {
  body.reference-master-admin .premium-sidebar { inline-size:min(72vw,330px) !important; }
  body.reference-master-admin .premium-sidebar .tree-nav { max-block-size:calc(100dvh - 100px) !important; }
  body.reference-master-public .admin-floating-login-card-panel,
  body.reference-master-public .orders-floating-panel-card { inset:8px 10px !important; max-block-size:calc(100dvh - 16px) !important; }
  .tp-side { padding:10px !important; }
  .tp-avatar { display:none !important; }
}

/* Print/PDF layouts intentionally remain governed by their dedicated print CSS. */


/* ===== V15.28.7 — Teacher classroom phone clipping guard =====
   The generic runtime can add .responsive-grid-fit to measured grids. Because that class has
   normal class specificity while the earlier :where(...) phone rule has zero specificity,
   the runtime class can win and re-expand teacher classroom grids. These page-scoped rules are
   authoritative on phones and keep the whole classroom workspace inside its real containing block.
   No page-level overflow hiding is used. */
@media screen and (max-width: 640px) {
  body.reference-master-public.public-page-teacher_portal_class .ref-public-main.public-main {
    display: block !important;
    width: 100% !important;
    inline-size: 100% !important;
    max-width: 100% !important;
    max-inline-size: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    margin: 0 !important;
    padding: 9px 6px 24px !important;
  }

  body.reference-master-public.public-page-teacher_portal_class .tc-wrap,
  body.reference-master-public.public-page-teacher_portal_class .tc-wrap.responsive-grid-fit,
  body.reference-master-public.public-page-teacher_portal_class .tc-wrap.responsive-force-fit {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    width: 100% !important;
    inline-size: 100% !important;
    max-width: 100% !important;
    max-inline-size: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    margin: 10px 0 !important;
    padding: 0 !important;
    gap: 12px !important;
    justify-self: stretch !important;
  }

  body.reference-master-public.public-page-teacher_portal_class .tc-wrap > * {
    width: 100% !important;
    inline-size: 100% !important;
    max-width: 100% !important;
    max-inline-size: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    margin-inline: 0 !important;
  }

  body.reference-master-public.public-page-teacher_portal_class .tc-head,
  body.reference-master-public.public-page-teacher_portal_class .tc-head.responsive-flex-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 15px !important;
  }

  body.reference-master-public.public-page-teacher_portal_class .tc-head > div,
  body.reference-master-public.public-page-teacher_portal_class .tc-head h1,
  body.reference-master-public.public-page-teacher_portal_class .tc-head p,
  body.reference-master-public.public-page-teacher_portal_class .tc-back {
    max-width: 100% !important;
    max-inline-size: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.reference-master-public.public-page-teacher_portal_class .tc-back {
    align-self: stretch !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body.reference-master-public.public-page-teacher_portal_class .tc-actions,
  body.reference-master-public.public-page-teacher_portal_class .tc-actions.responsive-grid-fit,
  body.reference-master-public.public-page-teacher_portal_class .tc-kpis,
  body.reference-master-public.public-page-teacher_portal_class .tc-kpis.responsive-grid-fit {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    width: 100% !important;
    inline-size: 100% !important;
    max-width: 100% !important;
    max-inline-size: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    margin: 0 !important;
  }

  body.reference-master-public.public-page-teacher_portal_class .tc-action,
  body.reference-master-public.public-page-teacher_portal_class .tc-kpi,
  body.reference-master-public.public-page-teacher_portal_class .tc-card,
  body.reference-master-public.public-page-teacher_portal_class .tc-note {
    width: 100% !important;
    inline-size: 100% !important;
    max-width: 100% !important;
    max-inline-size: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
  }

  body.reference-master-public.public-page-teacher_portal_class .tc-card {
    padding: 14px !important;
  }

  body.reference-master-public.public-page-teacher_portal_class .tc-table-scroll,
  body.reference-master-public.public-page-teacher_portal_class .global-table-scroll {
    display: block !important;
    width: 100% !important;
    inline-size: 100% !important;
    max-width: 100% !important;
    max-inline-size: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  body.reference-master-public.public-page-teacher_portal_class .tc-table-scroll > .tc-table,
  body.reference-master-public.public-page-teacher_portal_class .global-table-scroll > .tc-table {
    width: max-content !important;
    inline-size: max-content !important;
    min-width: 100% !important;
    min-inline-size: 100% !important;
    max-width: none !important;
    max-inline-size: none !important;
    margin: 0 !important;
  }

  body.reference-master-public.public-page-teacher_portal_class .tc-table th,
  body.reference-master-public.public-page-teacher_portal_class .tc-table td {
    min-inline-size: 88px;
    max-inline-size: 260px;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* ===== V15.28.8 — Parent/student portal sidebar grid root fix =====
   public.bundle turns .portal-tabs.parent-wizard-steps into a horizontal auto-flow carousel at
   <=1100px. Inside the authenticated parent/student portal this element is the sidebar menu, not a
   carousel. Reset only the implicit-grid flow here; the page's own 270/220/2-column/1-column
   breakpoints continue to decide the visible layout. */
@media screen and (max-width: 1100px) {
  body.reference-master-public.public-page-parent_portal .parent-color-sidebar .portal-tabs.parent-wizard-steps,
  body.reference-master-public.public-page-parent_section .parent-color-sidebar .portal-tabs.parent-wizard-steps {
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-auto-rows: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  body.reference-master-public.public-page-parent_portal .parent-color-sidebar .portal-tabs.parent-wizard-steps > a,
  body.reference-master-public.public-page-parent_section .parent-color-sidebar .portal-tabs.parent-wizard-steps > a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}


/* ===== V15.28.10 — Staff hourly/volunteer horizontal-canvas root fix =====
   The public application previously moved its anti-spam honeypot to left:-9999px. Because this
   project intentionally keeps document horizontal overflow visible during diagnostics, that hidden
   control created a ~10,000px scroll canvas on phones. Keep the trap in the viewport but fully
   clipped/inert instead. The admin review page is also explicitly constrained while its table owns
   any horizontal scrolling. */
@media screen {
  body.reference-master-public.public-page-staff_work_apply .staff-honeypot {
    position: fixed !important;
    inset: 0 auto auto 0 !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    bottom: auto !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
  }

  body.reference-master-admin[data-current-page="hr_hourly_volunteer"] .hv-shell,
  body.reference-master-admin[data-current-page="hr_hourly_volunteer"] .hv-hero,
  body.reference-master-admin[data-current-page="hr_hourly_volunteer"] .hv-stats,
  body.reference-master-admin[data-current-page="hr_hourly_volunteer"] .hv-grid,
  body.reference-master-admin[data-current-page="hr_hourly_volunteer"] .hv-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
  }

  body.reference-master-admin[data-current-page="hr_hourly_volunteer"] .hv-table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media screen and (max-width: 1050px) {
  body.reference-master-admin[data-current-page="hr_hourly_volunteer"] .hv-grid {
    grid-template-columns: minmax(0,1fr) !important;
  }
}