/*
 * BSRDMS 17.0.1 Design System — certified 16.25 foundation continued.
 *
 * Purpose:
 * - stabilise common geometry after years of incremental UI layers;
 * - make Super Admin appearance tokens the single visual source of truth;
 * - give all portals the same responsive behaviour without redesigning
 *   specialist workflows or official paper documents;
 * - provide a safe final cascade layer for common shell components.
 *
 * Specialised document templates remain responsible for their print layout.
 */

:root{
 --ds-sidebar-width:264px;
 --ds-sidebar-collapsed:88px;
 --ds-mobile-gutter:clamp(12px,3.5vw,20px);
 --ds-page-gap:var(--appearance-gap,16px);
 --ds-control-height:var(--appearance-control-height,44px);
 --ds-radius-sm:max(8px,calc(var(--brand-radius,16px) * .62));
 --ds-radius:var(--brand-radius,16px);
 --ds-radius-lg:calc(var(--brand-radius,16px) * 1.35);
 --ds-surface:var(--brand-surface,#fff);
 --ds-page:var(--brand-page,#f5f7f8);
 --ds-text:var(--brand-text,#13253a);
 --ds-muted:var(--brand-muted,#657487);
 --ds-line:var(--brand-line,#d9e1e6);
 --ds-primary:var(--brand-primary,#1f6b4a);
 --ds-accent:var(--brand-accent,#d6a322);
 --ds-shadow-sm:var(--appearance-shadow-sm,0 4px 14px rgba(15,35,52,.055));
 --ds-shadow:var(--appearance-shadow,0 12px 34px rgba(15,35,52,.085));
 --ds-control-pad-y:10px;
 --ds-control-pad-x:14px;
 --ds-panel-pad:clamp(18px,2vw,28px);
 --ds-card-pad:20px;
 --ds-transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease;
}

html{
 color-scheme:light;
 -webkit-text-size-adjust:100%;
 text-size-adjust:100%;
 scrollbar-gutter:stable;
}
html[data-theme="dark"]{color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
body{min-width:0;max-width:100%;overflow-x:clip}
.page{width:100%;min-width:0;overflow-x:clip}
.page>*{min-width:0}
img,svg,video,canvas{max-width:100%}
button,input,select,textarea{font:inherit}

/* Every application layout child is allowed to shrink. This prevents long
   labels, unit names and select values from widening the entire workspace. */
:is(
 .page,.content,.panel,.dashboard-card,.metric-card,.v14-page,.management-page,
 .enterprise-page,.workspace-page,.section-head,.hero-copy,.hero-actions,
 .workspace-hero-actions,.workspace-hub-hero-actions,.action-row,.form-grid,.control-grid,.metric-grid,
 .v14-metrics,.workspace-cards,.queue-list,.details,.two-col,.table-wrap,
 .app-sidebar,.sidebar-scroll,.nav-links,.request-editor-layout,.request-form,
 .request-guidance,.unit-management-card,.unit-row,.unit-editor-grid
){min-width:0;max-width:100%}

:is(.form-grid,.control-grid,.metric-grid,.v14-metrics,.workspace-cards,.queue-list,.details,.two-col)>*,
:is(.hero-actions,.workspace-hero-actions,.workspace-hub-hero-actions,.action-row)>*,
:is(.section-head,.panel,.dashboard-card)>*{min-width:0}

h1,h2,h3,h4,h5,h6,p,li,dd,dt,label,strong,small,span{
 overflow-wrap:break-word;
}

/* Canonical buttons, forms and surfaces --------------------------------------
   v16.25.3 makes the Design System the single shared owner of the component
   families that previously drifted between style.css, responsive-government-ui,
   modern-system, enterprise-ui-modern, institutional-ui and appearance-themes.
   Specialist module selectors remain free to refine these low-level contracts. */
:is(.btn,button,input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea){
 max-width:100%;
 min-width:0;
}

/* Raw buttons retain the historical shared control geometry; modules may
   still provide their own background/border treatment with scoped selectors. */
:where(button,input[type="submit"],input[type="button"]){
 min-height:var(--ds-control-height);
 border-radius:var(--ds-radius-sm);
 font-weight:750;
 transition:var(--ds-transition);
}
:where(button:not(.btn):not(:disabled),input[type="submit"]:not(.btn):not(:disabled),input[type="button"]:not(.btn):not(:disabled)):hover{transform:translateY(-1px)}

.btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:7px;
 min-height:var(--ds-control-height);
 padding:10px 16px;
 border:var(--appearance-border-width,1px) solid var(--ds-line);
 border-radius:var(--ds-radius-sm);
 background:var(--ds-surface);
 color:var(--ds-text);
 font:inherit;
 font-weight:750;
 line-height:1.2;
 text-align:center;
 text-decoration:none;
 cursor:pointer;
 transition:var(--ds-transition);
}
.btn:hover:not(:disabled):not([aria-disabled="true"]){
 transform:translateY(-1px);
 box-shadow:0 8px 20px rgba(15,35,58,.10);
}
.btn:active:not(:disabled):not([aria-disabled="true"]){transform:translateY(0)}
html body :is(.btn.primary,button.primary,input[type="submit"].primary,.submit-onboarding,.work-create){
 background:var(--brand-primary,var(--ds-primary))!important;
 border-color:var(--brand-primary,var(--ds-primary))!important;
 color:var(--brand-on-primary,#fff)!important;
 box-shadow:0 8px 20px color-mix(in srgb,var(--brand-primary,var(--ds-primary)) 22%,transparent)!important;
}
html body :is(.btn.primary,button.primary,input[type="submit"].primary,.submit-onboarding,.work-create):hover{
 background:color-mix(in srgb,var(--brand-primary,var(--ds-primary)) 88%,var(--brand-nav,#173b32))!important;
 border-color:color-mix(in srgb,var(--brand-primary,var(--ds-primary)) 88%,var(--brand-nav,#173b32))!important;
}
html body :is(.btn.danger,button.danger){
 background:var(--brand-danger,#b42318)!important;
 border-color:var(--brand-danger,#b42318)!important;
 color:var(--brand-on-danger,#fff)!important;
}
html body :is(.btn.light,.btn.ghost){
 background:var(--ds-surface)!important;
 border-color:var(--ds-line)!important;
 color:var(--ds-text)!important;
}
.btn.small{min-height:36px;padding:6px 10px;font-size:12px}
:is(button:disabled,.btn:disabled,.btn[aria-disabled="true"],input:disabled,select:disabled,textarea:disabled){
 cursor:not-allowed;
 opacity:.58;
 transform:none!important;
}
:is(.btn,button,input,select,textarea):focus-visible{
 outline:3px solid color-mix(in srgb,var(--ds-primary) 28%,transparent);
 outline-offset:2px;
}

/* Form controls: intentionally low-specificity so specialised editors, search
   bars and spreadsheet controls can keep their dedicated visual treatment. */
:where(label){display:block;font-weight:650;margin-bottom:15px}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]):not([type="range"]),select,textarea){
 display:block;
 width:100%;
 min-width:0;
 min-height:var(--ds-control-height);
 margin-top:7px;
 padding:var(--ds-control-pad-y) var(--ds-control-pad-x);
 border:var(--appearance-border-width,1px) solid var(--ds-line);
 border-radius:var(--ds-radius-sm);
 background:var(--ds-surface);
 color:var(--ds-text);
 font:inherit;
 line-height:1.35;
 transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
:where(textarea){min-height:96px;resize:vertical;padding:12px}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea):focus{
 border-color:var(--ds-primary);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--ds-primary) 18%,transparent);
 outline:0;
}
:where(input[type="checkbox"],input[type="radio"]){
 min-width:20px;
 min-height:20px;
 accent-color:var(--ds-primary);
}
:where(input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]){
 border-color:var(--brand-danger,#b42318);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-danger,#b42318) 13%,transparent);
}
:where(.field-help,.form-help){color:var(--ds-muted);font-size:.78rem;line-height:1.45}
:where(.field-error,.form-error){color:var(--brand-danger,#b42318);font-size:.78rem;line-height:1.45}

/* Shared application surfaces. Appearance presets still supply density,
   radius, border and elevation tokens; component ownership lives here. */
html body :is(
 .panel,.dashboard-card,.metric-card,.v14-metric,.workspace-card,.security-stat,
 .result-card,.task-card,.form-section,.office-search-card,.office-quick-card,
 .game-card,.method-card,.scheduled-meeting-card,.permission-metrics>article,
 .absence-choice,.official-settings-card,.desktop-app-card,.access-state-card
){
 max-width:100%;
 border-style:solid;
 border-width:var(--appearance-border-width,1px)!important;
 border-color:var(--ds-line)!important;
 box-shadow:var(--ds-shadow-sm)!important;
}
html body :is(.panel,.dashboard-card,.office-search-card,.office-quick-card,.workspace-card,.game-card,.result-card,.scheduled-meeting-card){
 border-radius:var(--ds-radius);
 background:var(--ds-surface);
}
html body :is(.metric-card,.v14-metric,.method-card,.form-section){
 border-radius:var(--ds-radius);
 background:color-mix(in srgb,var(--ds-surface) 96%,var(--ds-primary) 4%);
}
html body :is(.panel,.dashboard-card,.metric-card,.v14-metric,.workspace-card,.office-quick-card,.method-card):hover{
 box-shadow:var(--ds-shadow)!important;
}
.panel{padding:var(--ds-panel-pad);margin-bottom:24px}
.dashboard-card{padding:var(--ds-card-pad)}

/* Compact semantic labels. Status-specific colours remain owned by the
   workflow that supplies the semantic state; the Design System owns only the
   shared geometry and readable wrapping. */
.badge{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:5px;
 padding:6px 11px;
 border-radius:999px;
 background:color-mix(in srgb,var(--ds-primary) 10%,var(--ds-surface));
 color:var(--ds-primary);
 font-size:.78rem;
 font-weight:750;
 line-height:1.2;
 text-transform:capitalize;
}
:where(.status){
 display:inline-flex;
 align-items:center;
 justify-content:center;
 max-width:100%;
 min-height:28px;
 padding:5px 9px;
 border:1px solid transparent;
 border-radius:999px;
 font-size:.72rem;
 font-weight:800;
 line-height:1.2;
 text-align:center;
 text-transform:capitalize;
 white-space:normal;
}
:is(.status,.badge,.identity-link-state,.data-quality,.school-health){white-space:normal;text-align:center;line-height:1.2}

/* Canonical tables, lists and data presentation -----------------------------
   v16.25.4 makes the Design System the single shared owner of ordinary data
   registers. Workflow-specific tables may still refine column widths, card
   conversion or semantic colours with scoped selectors. Official paper tables
   remain outside this contract. */
.table-wrap{
 position:relative;
 width:100%;
 max-width:100%;
 overflow-x:auto;
 overflow-y:hidden;
 overscroll-behavior-inline:contain;
 -webkit-overflow-scrolling:touch;
 scrollbar-gutter:stable;
 scrollbar-width:thin;
 scrollbar-color:color-mix(in srgb,var(--ds-primary) 32%,var(--ds-line)) transparent;
 border-radius:var(--ds-radius-sm);
}
.table-wrap:focus-visible{outline:3px solid color-mix(in srgb,var(--ds-accent) 72%,#fff);outline-offset:2px}
.table-wrap>table{
 width:100%;
 min-width:680px;
 max-width:none;
 margin:0 0 1px;
 border-collapse:separate;
 border-spacing:0;
 background:var(--ds-surface);
 color:var(--ds-text);
 font-size:.91rem;
}
.table-wrap>table caption{caption-side:top;padding:0 0 10px;color:var(--ds-muted);font-size:.78rem;text-align:left}
.table-wrap>table :is(th,td){
 min-width:0;
 padding:13px 14px;
 border-bottom:1px solid var(--ds-line);
 text-align:left;
 vertical-align:middle;
 overflow-wrap:anywhere;
}
.table-wrap>table th{
 position:sticky;
 top:0;
 z-index:1;
 background:color-mix(in srgb,var(--ds-surface) 93%,var(--ds-primary) 7%);
 color:var(--ds-muted);
 font-size:.72rem;
 font-weight:850;
 letter-spacing:.055em;
 text-transform:uppercase;
 white-space:nowrap;
}
.table-wrap>table tbody tr{transition:background-color .15s ease}
.table-wrap>table tbody tr:hover{background:color-mix(in srgb,var(--ds-primary) 4%,var(--ds-surface))}
.table-wrap>table tbody tr:last-child>td{border-bottom:0}
.table-wrap>table td>small{color:var(--ds-muted);line-height:1.35}
:where(.empty,.empty-state){color:var(--ds-muted);text-align:center}
:where(.empty){padding:38px!important}
:where(.table-wrap td.empty,.table-wrap td.empty-state){padding:clamp(28px,4vw,44px)!important;text-align:center!important}

/* Shared filter/toolbar containment. Individual modules continue to define
   their grid columns and specialised controls. */
:where(.toolbar,.work-toolbar,.bulk-toolbar,.notes-toolbar,.studio-toolbar,.meeting-hub-toolbar,.annual-roster-toolbar,.weekly-register-tools,.report-preview-toolbar){
 min-width:0;
 max-width:100%;
 flex-wrap:wrap;
}
:where(.registry-filter,.school-directory-filter,.report-register-filters,.letter-filters,.task-filters,.note-filters,.attendance-report-filters)>*{min-width:0;max-width:100%}
:where(.pagination,.pager,.records-pagination){max-width:100%}
:where(.pagination,.pager,.records-pagination) :is(a,button){white-space:normal}

/* Canonical application-page geometry ---------------------------------------
   v16.25.1 moves the effective desktop/tablet page rhythm out of legacy
   enterprise compatibility CSS.  Specialist pages may still set a narrower
   max-width, but the shared shell now owns the general canvas geometry. */
:is(.content,.management-page,.v14-page,.enterprise-page,.institutional-dashboard,.work-page,.action-plan-builder){
 width:min(100%,1440px);
 margin-inline:auto;
 padding:clamp(22px,2.3vw,34px);
}


/* Canonical hero geometry.  The common structural contract is deliberately
   separate from specialist hero content.  Existing phone-specific workflow
   CSS can still refine padding, but cannot replace brand/contrast semantics. */
:is(.v14-hero,.management-hero,.enterprise-hero,.work-hero,.builder-hero,.meeting-hub-hero,.governance-hero){
 min-height:0;
 padding:clamp(25px,3vw,38px);
 border:0;
 border-radius:24px;
}
:is(.v14-hero,.management-hero,.enterprise-hero,.work-hero,.builder-hero,.meeting-hub-hero,.governance-hero) :where(p){max-width:780px}
:is(.v14-hero,.management-hero,.enterprise-hero,.work-hero,.builder-hero,.meeting-hub-hero) h1{
 margin:7px 0 9px;
 font-size:clamp(1.9rem,3.2vw,2.75rem);
 line-height:1.07;
 letter-spacing:-.04em;
}
:is(.v14-hero>div>span,.work-hero .eyebrow,.builder-kicker,.meeting-eyebrow){
 font-size:.69rem;
 font-weight:850;
 letter-spacing:.15em;
 text-transform:uppercase;
}
:is(.v14-hero .btn.light,.management-hero .btn,.enterprise-hero .btn,.work-hero .btn,.builder-hero .btn,.meeting-hub-hero .btn,.workspace-search-hero .btn.light,.people-hero .btn.light,.district-calendar-hero .btn.light,.knowledge-hero .btn.light){
 border:1px solid rgba(255,255,255,.42)!important;
 background:var(--brand-surface,#fff)!important;
 color:var(--brand-text,#172436)!important;
 box-shadow:0 8px 24px rgba(0,0,0,.12);
}

/* Authoritative hero semantic contract --------------------------------------
   v16.25.1 retires hero-system.css from the active cascade.  These rules keep
   the exact contrast-safe branded behaviour while leaving elevation to the
   Appearance Theme layer. */
html body :is(
 .v14-hero,.management-hero,.enterprise-hero,.work-hero,.workspace-hero,.workspace-hub-hero,.workspace-search-hero,.people-hero,.district-calendar-hero,.knowledge-hero,
 .learning-hero,.notes-hero,.school-profile-hero,.builder-hero,.governance-hero,
 .meeting-hub-hero,.permission-hero,.memo-hero,.leadership-hero
){
 position:relative;
 isolation:isolate;
 min-width:0;
 max-width:100%;
 height:auto;
 overflow:hidden;
 background-color:var(--brand-hero-start,var(--brand-nav,#173b32))!important;
 background-image:linear-gradient(
  var(--appearance-hero-angle,128deg),
  var(--brand-hero-start,var(--brand-nav,#173b32)) 0%,
  var(--brand-hero-mid,var(--brand-primary,#1f6b4a)) 62%,
  var(--brand-hero-end,var(--brand-accent,#9b7720)) 100%
 )!important;
 color:var(--brand-on-hero,#fff)!important;
 border-color:rgba(255,255,255,.13)!important;
}
html body :is(
 .v14-hero,.management-hero,.enterprise-hero,.work-hero,.workspace-hero,.workspace-hub-hero,.workspace-search-hero,.people-hero,.district-calendar-hero,.knowledge-hero,
 .learning-hero,.notes-hero,.school-profile-hero,.builder-hero,.governance-hero,
 .meeting-hub-hero,.permission-hero,.memo-hero,.leadership-hero
)>*{min-width:0}
html body :is(
 .v14-hero,.management-hero,.enterprise-hero,.work-hero,.workspace-hero,.workspace-hub-hero,.workspace-search-hero,.people-hero,.district-calendar-hero,.knowledge-hero,
 .learning-hero,.notes-hero,.school-profile-hero,.builder-hero,.governance-hero,
 .meeting-hub-hero,.permission-hero,.memo-hero,.leadership-hero
) :is(h1,h2,h3,p,span,small,strong){color:var(--brand-on-hero,#fff)!important}
html body :is(
 .v14-hero,.management-hero,.enterprise-hero,.work-hero,.workspace-hero,.workspace-hub-hero,.workspace-search-hero,.people-hero,.district-calendar-hero,.knowledge-hero,
 .learning-hero,.notes-hero,.school-profile-hero,.builder-hero,.governance-hero,
 .meeting-hub-hero,.permission-hero,.memo-hero,.leadership-hero
) :is(.eyebrow,.section-kicker,.meeting-eyebrow,.builder-kicker){
 color:var(--brand-hero-highlight,#F4D77A)!important;
 opacity:1!important;
}
html body :is(.v14-hero,.management-hero,.enterprise-hero,.work-hero,.workspace-hero,.workspace-hub-hero,.workspace-search-hero,.people-hero,.district-calendar-hero,.knowledge-hero,.learning-hero,.notes-hero,.school-profile-hero,.builder-hero,.governance-hero,.meeting-hub-hero,.permission-hero,.memo-hero,.leadership-hero)>div>span{color:var(--brand-hero-highlight,#F4D77A)!important;opacity:1!important}
html body :is(.v14-hero,.management-hero,.enterprise-hero,.work-hero,.workspace-hero,.workspace-hub-hero,.workspace-search-hero,.people-hero,.district-calendar-hero,.knowledge-hero,.learning-hero,.notes-hero,.school-profile-hero,.builder-hero,.governance-hero,.meeting-hub-hero,.permission-hero,.memo-hero,.leadership-hero) p{opacity:.9!important}
html body :is(
 .v14-hero,.management-hero,.enterprise-hero,.work-hero,.workspace-hero,.workspace-hub-hero,.workspace-search-hero,.people-hero,.district-calendar-hero,.knowledge-hero,
 .learning-hero,.notes-hero,.school-profile-hero,.builder-hero,.governance-hero,
 .meeting-hub-hero,.permission-hero,.memo-hero,.leadership-hero
) :is(.hero-actions,.workspace-hero-actions,.workspace-hub-hero-actions) .btn:not(.primary){
 background:var(--brand-surface,#fff)!important;
 color:var(--brand-text,#172436)!important;
 border-color:rgba(255,255,255,.72)!important;
}
html body :is(
 .v14-hero,.management-hero,.enterprise-hero,.work-hero,.workspace-hero,.workspace-hub-hero,.workspace-search-hero,.people-hero,.district-calendar-hero,.knowledge-hero,
 .learning-hero,.notes-hero,.school-profile-hero,.builder-hero,.governance-hero,
 .meeting-hub-hero,.permission-hero,.memo-hero,.leadership-hero
) :is(.hero-actions,.workspace-hero-actions,.workspace-hub-hero-actions) .btn.primary{
 background:var(--brand-accent,#D39B24)!important;
 color:var(--brand-on-accent,#101828)!important;
 border-color:var(--brand-accent,#D39B24)!important;
}
:is(.hero-actions,.workspace-hero-actions,.workspace-hub-hero-actions){
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 justify-content:flex-start;
 gap:10px;
}
:is(.hero-actions,.workspace-hero-actions,.workspace-hub-hero-actions)>*{flex:0 1 auto}
html body .has-dashboard-hero-hub .dashboard-hero-hub .hero-hub-card{
 background:rgba(255,255,255,.10)!important;
 border-color:rgba(255,255,255,.17)!important;
 color:var(--brand-on-hero,#fff)!important;
 box-shadow:none!important;
}
html body .has-dashboard-hero-hub .dashboard-hero-hub .hero-hub-card :is(small,strong,p,span,b){color:var(--brand-on-hero,#fff)!important}
html body .has-dashboard-hero-hub .hero-hub-admin-actions{background:rgba(3,18,28,.18)!important;border-color:rgba(255,255,255,.16)!important}


/* Dialogs and overlays are always constrained to the visible viewport. */
dialog{
 max-width:calc(100vw - 24px);
 max-height:calc(100dvh - 24px);
}

/* Shared shell geometry ------------------------------------------------------
   v17.0.2 makes the Design System the single vertical-spacing owner between
   authenticated application chrome and page content. On desktop the Online /
   Refresh strip is fixed, so a compact clearance is retained. On phone/tablet
   the mobile app bar and connectivity strip are sticky elements in normal flow,
   so the page must not reserve either height again. */
@media (min-width:901px){
 :root{
  --app-sidebar-width:var(--ds-sidebar-width);
  --app-sidebar-collapsed:var(--ds-sidebar-collapsed);
  --app-shell-top-clearance:62px;
 }
 body.has-app-sidebar>.page,body.has-app-sidebar>footer{min-width:0}
 body.has-app-sidebar>.page{padding-top:var(--app-shell-top-clearance)}
}

/* Tablet: common action groups wrap rather than forcing horizontal overflow. */
@media (max-width:1100px){
 :is(.hero-actions,.workspace-hero-actions,.workspace-hub-hero-actions,.action-row){flex-wrap:wrap}
 :is(.hero-actions,.workspace-hero-actions,.workspace-hub-hero-actions)>.btn{flex:1 1 180px}
}

@media (max-width:900px){
 /* The mobile app bar and connectivity strip already consume layout space. */
 body.has-app-sidebar>.page{padding-top:0}
 :is(.content,.management-page,.v14-page,.enterprise-page,.institutional-dashboard,.work-page,.action-plan-builder){padding:16px}
}

/* Appearance density remains a Design System concern rather than a legacy
   theme-file component override. */
@media(min-width:761px){
 html[style*="--appearance-density:compact"] body :is(.panel,.dashboard-card){padding-top:18px;padding-bottom:18px}
 html[style*="--appearance-density:spacious"] body :is(.panel,.dashboard-card){padding-top:26px;padding-bottom:26px}
}

/* Authoritative mobile geometry contract ------------------------------------
   v16.25.2 moves shared phone layout out of the historical mobile compatibility
   layers.  mobile-app.css now owns app chrome/components; specialist sheets own
   their workflow-specific adaptations; this block owns common page geometry. */
@media (max-width:760px){
 :root{--ds-control-height:max(48px,var(--appearance-control-height,44px))}
 body{font-size:15px}
 body.has-app-sidebar>.page{width:100%;max-width:100%;overflow-x:clip}
 :is(
  .content,.management-page,.enterprise-page,.v14-page,.work-page,.permission-page,
  .notes-page,.workspace-page
 ){
  width:calc(100% - (var(--mobile-gutter,14px) * 2))!important;
  max-width:none!important;
  margin-inline:auto!important;
  padding:14px 0 0!important;
 }
 :is(.page,.management-page,.enterprise-page,.v14-page,.workspace-page){min-width:0}

 :is(.panel,.dashboard-card,.official-settings-card){
  padding:15px!important;
  border-radius:16px!important;
  box-shadow:0 5px 18px rgba(15,39,68,.055)!important;
 }
 .section-head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  margin-bottom:12px!important;
 }
 .section-head>.btn,.section-head>.hero-actions{width:100%}
 .section-head h1{font-size:clamp(1.55rem,7vw,2rem);line-height:1.1;margin-bottom:5px}
 .section-head h2{font-size:1.18rem}
 .section-head p{margin:4px 0 0;font-size:.86rem;line-height:1.42}

 html body :is(
  .v14-hero,.management-hero,.enterprise-hero,.work-hero,.workspace-hero,.workspace-hub-hero,.workspace-search-hero,.people-hero,.district-calendar-hero,.knowledge-hero,
  .learning-hero,.notes-hero,.school-profile-hero,.builder-hero,.governance-hero,
  .meeting-hub-hero,.permission-hero,.memo-hero,.leadership-hero,.leave-permission-hero
 ){
  background-color:var(--brand-hero-start,#123052)!important;
  background-image:linear-gradient(var(--appearance-hero-angle,128deg),var(--brand-hero-start,#123052) 0%,var(--brand-hero-mid,#175243) 70%,var(--brand-hero-end,#6A521A) 100%)!important;
  border-radius:20px!important;
 }
 :is(.v14-hero,.management-hero,.enterprise-hero,.workspace-hero,.workspace-hub-hero,.workspace-search-hero,.people-hero,.district-calendar-hero,.knowledge-hero,.notes-hero,.work-hero,.permission-hero,.leave-permission-hero){
  min-height:0!important;
  margin-bottom:13px!important;
  padding:18px 16px!important;
  gap:14px!important;
 }
 :is(.v14-hero,.management-hero,.enterprise-hero,.workspace-hero,.workspace-hub-hero,.workspace-search-hero,.people-hero,.district-calendar-hero,.knowledge-hero,.notes-hero,.work-hero,.permission-hero,.leave-permission-hero) h1{
  font-size:clamp(1.55rem,7.4vw,2rem)!important;
  line-height:1.08!important;
  margin-block:4px 6px!important;
 }
 :is(.v14-hero,.management-hero,.enterprise-hero,.workspace-hero,.workspace-hub-hero,.workspace-search-hero,.people-hero,.district-calendar-hero,.knowledge-hero,.notes-hero,.work-hero,.permission-hero,.leave-permission-hero) p{
  display:-webkit-box;
  margin:0!important;
  overflow:hidden;
  font-size:.86rem!important;
  line-height:1.42!important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
 }
 html body :is(
  .v14-hero,.management-hero,.enterprise-hero,.work-hero,.workspace-hero,.workspace-hub-hero,.workspace-search-hero,.people-hero,.district-calendar-hero,.knowledge-hero,
  .learning-hero,.notes-hero,.school-profile-hero,.builder-hero,.governance-hero,
  .meeting-hub-hero,.permission-hero,.memo-hero,.leadership-hero
 ) :is(h1,h2,h3,p,span,small,strong){text-shadow:0 1px 1px rgba(0,0,0,.08)}
 html body .has-dashboard-hero-hub{padding:18px 16px!important;gap:12px!important}
 html body .has-dashboard-hero-hub>.dashboard-hero-hub{margin-top:2px!important}

 :is(.hero-actions,.workspace-hero-actions,.workspace-hub-hero-actions,.action-row){
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  width:100%;
  gap:9px!important;
  overflow:visible;
 }
 :is(.hero-actions,.workspace-hero-actions,.workspace-hub-hero-actions,.action-row)>.btn,
 :is(.hero-actions,.workspace-hero-actions,.workspace-hub-hero-actions,.action-row)>button{
  width:100%!important;
  max-width:100%;
  min-height:48px!important;
  padding:10px 13px!important;
  white-space:normal!important;
  text-align:center;
 }

 /* Compact KPI strips retain the proven horizontal-snap phone behaviour. */
 :is(.metric-grid,.v14-metrics,.work-metrics,.report-register-metrics,.permission-metrics,.security-grid){
  display:flex!important;
  gap:9px!important;
  margin:12px 0 15px!important;
  padding-bottom:3px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
 }
 :is(.metric-grid,.v14-metrics,.work-metrics,.report-register-metrics,.permission-metrics,.security-grid)::-webkit-scrollbar{display:none}
 .metric-grid>*,.v14-metrics>*,.work-metrics>div,.report-register-metrics>div,.permission-metrics>article,.security-grid>*{
  flex:0 0 min(42vw,164px)!important;
  min-height:88px!important;
  padding:13px!important;
  border-radius:14px!important;
  scroll-snap-align:start;
 }
 .v14-metrics>article{min-height:112px!important;padding:15px!important;border-radius:15px!important}
 :is(.metric-grid,.v14-metrics,.work-metrics,.report-register-metrics,.permission-metrics,.security-grid) strong{font-size:1.5rem!important;line-height:1.05!important}
 :is(.metric-grid,.v14-metrics,.report-register-metrics,.permission-metrics) small{font-size:.65rem!important;line-height:1.25!important}

 /* Common forms are single-column and thumb-friendly. */
 :is(.form-grid,.two-col,.three-col,.details,.permission-period-grid,.permission-details,.guided-grid,.route-choice-grid,.unit-stamp-settings){
  grid-template-columns:minmax(0,1fr)!important;
  gap:12px!important;
 }
 .span-2{grid-column:auto!important}
 form label{font-size:.82rem;line-height:1.35}
 label>small{display:block;line-height:1.45}
 input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea{
  width:100%!important;
  min-height:48px!important;
  font-size:16px!important;
  border-radius:12px!important;
 }
 textarea{min-height:110px!important;line-height:1.5}
 .btn.small{min-height:40px;padding:8px 12px}
 .submit-bar{
  position:sticky;
  z-index:20;
  bottom:calc(var(--mobile-nav-height,68px) + var(--mobile-safe-bottom,0px) + 14px);
  margin:16px -5px 0!important;
  padding:9px!important;
  border:1px solid var(--line,var(--ds-line))!important;
  border-radius:16px;
  background:color-mix(in srgb,var(--card,var(--ds-surface)) 94%,transparent);
  box-shadow:0 9px 30px rgba(11,30,52,.16);
  backdrop-filter:blur(18px);
 }
 .submit-bar .btn{width:100%}

 /* Standard data tables stay contained and advertise sideways scrolling. */
 .table-wrap{margin-inline:0!important;padding:0!important;border-radius:12px!important}
 .table-wrap table{min-width:620px;margin-right:0!important}
 .table-wrap::after{
  content:"Swipe sideways to view all columns";
  display:block;
  position:sticky;
  left:0;
  width:max-content;
  padding:7px 10px;
  color:var(--brand-muted,#60748b);
  font-size:.7rem;
 }
 .siso-mobile-workspace .table-wrap::after{display:none}

 /* Standard JS-enhanced data tables can become readable cards on narrow
    screens. mobile-app.css keeps its denser app-card variant separate. */
 table.responsive-data-table.responsive-card-table,
 table.responsive-data-table.responsive-card-table tbody,
 table.responsive-data-table.responsive-card-table tr,
 table.responsive-data-table.responsive-card-table td{display:block;width:100%}
 table.responsive-card-table thead{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
 table.responsive-card-table tbody{display:grid;gap:13px;background:transparent}
 table.responsive-card-table tbody tr{overflow:hidden;border:1px solid var(--ds-line);border-radius:14px;background:var(--ds-surface);box-shadow:var(--ds-shadow-sm)}
 table.responsive-card-table tbody td{display:grid;grid-template-columns:minmax(105px,38%) minmax(0,1fr);gap:12px;align-items:start;padding:11px 13px;border-bottom:1px solid var(--ds-line);text-align:left!important;overflow-wrap:anywhere}
 table.responsive-card-table tbody td::before{content:attr(data-label);color:var(--ds-muted);font-size:.7rem;font-weight:850;letter-spacing:.035em;text-transform:uppercase}
 table.responsive-card-table tbody td:last-child{border-bottom:0}
 table.responsive-card-table tbody td[colspan]{display:block;text-align:center!important}
 table.responsive-card-table tbody td[colspan]::before{display:none}
 table.responsive-card-table .btn,table.responsive-card-table button{max-width:100%;white-space:normal}

 dialog{
  width:100vw!important;
  max-width:100vw!important;
  height:100dvh!important;
  max-height:100dvh!important;
  margin:0!important;
  border-radius:0!important;
 }
 footer{padding-bottom:max(84px,calc(72px + env(safe-area-inset-bottom)))}
}

@media (max-width:420px){
 table.responsive-card-table tbody td{grid-template-columns:1fr;gap:4px}
}

html[data-theme="dark"] .table-wrap>table{background:var(--ds-surface);color:var(--ds-text)}
html[data-theme="dark"] .table-wrap>table th{background:color-mix(in srgb,var(--ds-surface) 82%,#000 18%);color:color-mix(in srgb,var(--ds-muted) 88%,#fff 12%);border-color:var(--ds-line)}
html[data-theme="dark"] .table-wrap>table td{color:var(--ds-text);border-color:var(--ds-line)}
html[data-theme="dark"] .table-wrap>table tbody tr:nth-child(even){background:color-mix(in srgb,var(--ds-surface) 95%,#000 5%)}
html[data-theme="dark"] .table-wrap>table tbody tr:hover{background:color-mix(in srgb,var(--ds-primary) 13%,var(--ds-surface))}

@media print{
 .responsive-data-table{display:table!important}
 .responsive-data-table thead{display:table-header-group!important}
 .responsive-data-table tbody{display:table-row-group!important}
 .responsive-data-table tr{display:table-row!important}
 .responsive-data-table :is(th,td){display:table-cell!important}
 .responsive-data-table td::before{display:none!important}
}

/* Specialist page families that are not part of the standard app-page class
   retain their established narrow-screen rhythm. */
@media (max-width:700px){
 :is(.institutional-dashboard,.action-plan-builder){width:100%;padding:12px}
 :is(.builder-hero,.meeting-hub-hero,.governance-hero){padding:22px;border-radius:19px}
 :is(.builder-hero,.meeting-hub-hero) h1{font-size:clamp(1.65rem,8vw,2.15rem)}
}

@media (max-width:420px){
 .v14-metrics>article{min-height:100px!important;padding:13px!important}
}

@media (max-width:390px){
 :is(.panel,.dashboard-card,.official-settings-card){padding:13px!important}
}

@media (forced-colors:active){
 html body :is(.v14-hero,.management-hero,.enterprise-hero,.work-hero,.workspace-hero,.workspace-hub-hero,.workspace-search-hero,.people-hero,.district-calendar-hero,.knowledge-hero,.learning-hero,.notes-hero,.school-profile-hero,.builder-hero,.governance-hero,.meeting-hub-hero,.permission-hero,.memo-hero,.leadership-hero){background:Canvas!important;color:CanvasText!important;border:1px solid CanvasText!important}
 html body :is(.v14-hero,.management-hero,.enterprise-hero,.work-hero,.workspace-hero,.workspace-hub-hero,.workspace-search-hero,.people-hero,.district-calendar-hero,.knowledge-hero,.learning-hero,.notes-hero,.school-profile-hero,.builder-hero,.governance-hero,.meeting-hub-hero,.permission-hero,.memo-hero,.leadership-hero) :is(h1,h2,h3,p,span,small,strong){color:CanvasText!important;text-shadow:none!important}
}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important}
}

@media print{
 /* The application design system must never recolour or resize official paper. */
 html{scrollbar-gutter:auto}
 body{overflow:visible}
}

/* Authoritative shell print reset */
@media print{body.has-app-sidebar>.page{padding-top:0!important}}