/* R32.47 — sitewide responsive card/layout hardening
   Goal: prevent content/card overlap on desktop, tablet, mobile and installed PWA
   This file is intentionally loaded LAST on every HTML template. */

:root{--r3247-gap:clamp(10px,1.35vw,18px)}
html,body{max-width:100%;overflow-x:clip!important}
body{min-width:0!important}

/* Grid/flex children are allowed to shrink instead of pushing neighbouring cards. */
:where(
  .panel,.card,.kpi,.kpi-card,.dashboard-kpi,.hero-panel,.manager-hero,.student-welcome,
  .quick-access-panel,.archive-panel,.assessment-card,.assessment-runner,.comm-center,.comm-item,
  .counselor-hero,.counselor-case,.meeting-call,.trial-banner,.child-switcher,.reg-card,.auth-card,
  .payment-info-panel,.guidance-parent-panel,.counselor-parent,.homework-card,.message-card,.report-card,
  .guidance-card,.archive-card,.quick-card,.operation-card,.manager-quick,.grade-card,.student-card,
  .teacher-card,.vclass-card,.schedule-card,.account-pane,.accounting-layer,.table-panel,.report-info,
  .r3246-parent-scope,.r3246-qbank-panel
){min-width:0!important;max-width:100%!important;box-sizing:border-box!important}

:where(
  .layout-2,.grid2,.grid3,.form-grid,.kpi-grid,.student-kpis,.executive-kpis,.quick-access-grid,
  .grade-cards,.student-grid,.staff-cards,.parent-link-grid,.security-cards,.r21p2-grid,
  .assessment-grid,.pastoral-family-grid,.calendar-grid,.portal-grid,.trust-grid,.reg-grid,
  .student-grid2,.r8-event-row,.r8-feature-grid,.r8-extra-grid,.r8-plan-grid
)>*{min-width:0!important;max-width:100%!important}

/* Do not let text escape or sit on top of adjacent cards. */
:where(
  .panel,.card,.kpi,.kpi-card,.dashboard-kpi,.hero-panel,.student-welcome,.manager-hero,
  .grade-card,.manager-quick,.student-card,.assessment-card,.comm-item,.reg-card,.auth-card,
  .r3246-parent-scope,.r3246-qbank-panel,.page-toolbar
) :where(h1,h2,h3,h4,p,b,strong,span,small,label,a){
  max-width:100%;overflow-wrap:anywhere;word-break:normal
}

/* Content containers must grow with their content; old visual layers used fixed heights. */
:where(
  .hero-panel,.manager-hero,.student-welcome,.counselor-hero,.assessment-card,.assessment-runner,
  .meeting-call,.trial-banner,.child-switcher,.panel,.quick-access-panel,.archive-panel,
  .payment-info-panel,.guidance-parent-panel,.counselor-parent,.comm-center,.comm-item,
  .homework-card,.message-card,.report-card,.guidance-card,.archive-card,.quick-card,.operation-card,
  .manager-quick,.grade-card,.reg-card,.auth-card,.r3246-qbank-panel
){height:auto!important;max-height:none!important}

/* Dynamic guard classes added only when the browser actually measures clipping/overlap. */
.r3247-autoheight{height:auto!important;max-height:none!important;min-height:0!important}
.r3247-xoverflow{max-width:100%!important;min-width:0!important}
.r3247-stack{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-auto-flow:row!important}

img,svg,video,canvas{max-width:100%}
iframe{max-width:100%}
pre,code{max-width:100%;overflow-wrap:anywhere;white-space:pre-wrap}
input,select,textarea,button{max-width:100%;min-width:0;box-sizing:border-box}

/* Headings/toolbars/actions: wrap instead of crossing neighbouring content. */
:where(.panel-head,.page-toolbar,.archive-heading,.operation-actions,.actions,.filters,.export-form,.export-actions,
       .parent-actions,.top-actions,.backup-actions,.student-toolbar-actions,.r3246-upload-row,.r3246-title){
  min-width:0!important;max-width:100%!important;flex-wrap:wrap!important
}
:where(.panel-head,.page-toolbar,.archive-heading)>*{min-width:0!important;max-width:100%!important}

/* Existing grade cards had absolute/fixed visual rules in older layers. Keep text in normal flow. */
.grade-card :where(b,strong,h2,h3,p,span,small){position:static!important;inset:auto!important;transform:none!important}
.grade-card{overflow:hidden!important}

/* Hero blocks: safe shrinking on wide screens, stacking on narrow screens. */
.hero-panel>*{min-width:0!important}
.hero-lock{min-width:0!important;max-width:100%!important;flex:0 1 230px}

/* Tables remain horizontally scrollable INSIDE their own card rather than widening the page. */
.table-scroll,.account-table,.performance-table{max-width:100%!important;overflow-x:auto!important;overflow-y:visible}
.table-scroll table{max-width:none!important}

/* Drawers/modals must fit the viewport in desktop browser and standalone PWA. */
.drawer,.modal-backdrop{box-sizing:border-box!important;max-width:100vw!important;overflow-x:hidden!important}
.drawer #studentDetail,.modal-card,.dialog-card{max-width:calc(100vw - 32px)!important;height:auto!important;max-height:none!important;box-sizing:border-box!important}

/* Parent area receives several historical visual layers; these rules are deliberately final. */
body.parent-ui-r318 .parent-main{min-width:0!important;max-width:100%!important}
body.parent-ui-r318 .hero-panel{height:auto!important;max-height:none!important}
body.parent-ui-r318 :where(.layout-2,.r21p2-grid,.assessment-center,.pastoral-family-grid,.homework-list,.extra-class-list,.message-list)>*{min-width:0!important}
body.parent-ui-r318 .parent-actions>*{min-width:0}

/* Student page used a fixed visual welcome layer in older themes. */
body.student-plan .student-welcome{height:auto!important;max-height:none!important;min-width:0!important}
body.student-plan .student-kpis>*,body.student-plan .student-grid2>*{min-width:0!important}

/* Manager/dashboard shell — preserve sidebar on desktop but never let main content push under it. */
.app-shell,.main-area,.page{min-width:0!important;max-width:100%!important}
.main-area{overflow-x:hidden}
.sidebar{max-width:min(92vw,320px)}
.side-nav{max-width:100%;overflow-x:hidden}

/* Smart-school / question bank additions. */
.r3246-parent-scope{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.r3246-parent-scope>div{min-width:0!important}
.r3246-choices{max-width:100%;overflow-wrap:anywhere}

/* Laptop / tablet */
@media (max-width:1180px){
  :where(.kpi-grid,.student-kpis,.executive-kpis,.quick-access-grid){grid-template-columns:repeat(3,minmax(0,1fr))!important}
  :where(.student-grid,.staff-cards,.parent-link-grid,.security-cards,.r21p2-grid,.portal-grid,.trust-grid,.r8-feature-grid,.r8-event-row){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .r8-plan-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media (max-width:900px){
  :where(.layout-2,.grid2,.grid3,.student-grid2,.r8-about,.r8-extra-grid){grid-template-columns:minmax(0,1fr)!important}
  :where(.kpi-grid,.student-kpis,.executive-kpis,.quick-access-grid,.grade-cards,.student-grid,.staff-cards,.parent-link-grid,.security-cards,.r21p2-grid,.portal-grid,.trust-grid,.reg-grid,.pastoral-family-grid,.r8-plan-grid,.r8-feature-grid,.r8-event-row){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hero-panel{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important}
  .hero-lock{width:100%!important;flex:auto!important}
  .topbar{height:auto!important;min-height:0!important;flex-wrap:wrap!important}
  .top-actions{height:auto!important;max-height:none!important;overflow:visible!important;flex-wrap:wrap!important;display:flex!important}
  .top-actions>*{height:auto!important;min-height:42px!important;max-width:100%!important}
  .page-toolbar{align-items:flex-start!important}
  body.parent-ui-r318 .parent-top{height:auto!important;min-height:0!important;flex-wrap:wrap!important;gap:10px!important}
  body.parent-ui-r318 .parent-actions{width:100%!important;display:flex!important;overflow:visible!important;flex-wrap:wrap!important}
}

/* Mobile + installed PWA */
@media (max-width:640px){
  html,body{width:100%!important;max-width:100%!important}
  :where(.portal-home-main,.parent-main,.student-plan main,.main-area,.registration-shell,.auth-shell,.role-login){max-width:100%!important}
  :where(.kpi-grid,.student-kpis,.executive-kpis,.quick-access-grid,.grade-cards,.student-grid,.staff-cards,.parent-link-grid,.security-cards,.r21p2-grid,.portal-grid,.trust-grid,.reg-grid,.form-grid,.pastoral-family-grid,.r3246-parent-scope,.r8-plan-grid,.r8-feature-grid,.r8-event-row){grid-template-columns:minmax(0,1fr)!important}
  :where(.panel,.page-toolbar,.hero-panel,.student-welcome,.quick-access-panel,.archive-panel,.assessment-card,.reg-card,.auth-card){padding-left:clamp(14px,4vw,20px)!important;padding-right:clamp(14px,4vw,20px)!important}
  :where(.panel-head,.page-toolbar,.archive-heading){display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important}
  :where(.operation-actions,.actions,.filters,.export-form,.export-actions,.parent-actions,.backup-actions,.student-toolbar-actions){align-items:stretch!important}
  :where(.operation-actions,.actions,.filters,.export-form,.export-actions,.parent-actions,.backup-actions,.student-toolbar-actions)>.btn,
  :where(.operation-actions,.actions,.filters,.export-form,.export-actions,.parent-actions,.backup-actions,.student-toolbar-actions)>button{flex:1 1 100%!important;width:100%!important}
  .drawer,.modal-backdrop{padding:10px!important}
  .drawer #studentDetail,.modal-card,.dialog-card{width:100%!important;max-width:100%!important;margin:20px auto!important;padding:16px!important;border-radius:18px!important}
  .drawer-close,.modal-close{top:8px!important;left:8px!important}
  .r3246-parent-scope{grid-template-columns:minmax(0,1fr)!important}
  .r3246-title,.r3246-upload-row{flex-direction:column!important;align-items:stretch!important}
  .r3246-review-badge,.r3246-status{white-space:normal!important;align-self:flex-start}
  body.student-plan>header{height:auto!important;min-height:0!important;gap:10px!important;flex-wrap:wrap!important}
  body.student-plan>header>div{min-width:0!important;max-width:100%!important;flex-wrap:wrap!important}
  .r8-login main{grid-template-columns:minmax(0,1fr)!important;padding-inline:18px!important}
  .r8-login-card{padding:22px!important}
  .portal-card b,.plan3d>b,.temporary-reg-card span{position:static!important;inset:auto!important;display:inline-flex!important;margin-top:12px!important;transform:none!important}
}

@media (max-width:390px){
  :where(.kpi-grid,.student-kpis,.executive-kpis){grid-template-columns:minmax(0,1fr)!important}
  :where(.btn,button,.role-chip,.sync-status,.soft-pill,.lock-badge){overflow-wrap:anywhere}
  .main-area{padding-inline:8px!important}
  .parent-main,.student-plan main{padding-inline:10px!important}
}

/* PWA safe-area support without changing desktop geometry. */
@supports (padding:env(safe-area-inset-left)){
  @media (max-width:900px){
    body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
    .topbar,body.parent-ui-r318 .parent-top,body.student-plan>header{padding-top:max(10px,env(safe-area-inset-top))!important}
  }
}