/* BSRDMS v16.24.11 — authoritative system branding + mobile layout contract.
   This sheet intentionally has stronger selectors than legacy theme layers so
   Super Admin branding remains the single source of truth across the UI. */

html{
 --ui-canvas:var(--brand-page)!important;
 --ui-surface:var(--brand-surface)!important;
 --ui-surface-soft:color-mix(in srgb,var(--brand-surface) 88%,var(--brand-page))!important;
 --ui-soft:color-mix(in srgb,var(--brand-surface) 82%,var(--brand-page))!important;
 --ui-ink:var(--brand-text)!important;
 --ui-muted:var(--brand-muted)!important;
 --ui-line:var(--brand-line)!important;
 --ui-line-strong:color-mix(in srgb,var(--brand-text) 22%,var(--brand-surface))!important;
 --ui-border:var(--brand-line)!important;
 --ui-green:var(--brand-primary)!important;
 --ui-brand:var(--brand-primary)!important;
 --ui-brand-dark:color-mix(in srgb,var(--brand-primary) 62%,var(--brand-nav))!important;
 --ui-gold:var(--brand-accent)!important;
 --ui-accent:var(--brand-accent)!important;
 --ui-navy:var(--brand-nav)!important;
 --ui-success:var(--brand-success)!important;
 --ui-warning:var(--brand-warning)!important;
 --ui-danger:var(--brand-danger)!important;
 --panel:var(--brand-surface)!important;
 --card:var(--brand-surface)!important;
 --surface:var(--brand-surface)!important;
 --bg:var(--brand-page)!important;
 --page:var(--brand-page)!important;
 --text:var(--brand-text)!important;
 --ink:var(--brand-text)!important;
 --muted:var(--brand-muted)!important;
 --line:var(--brand-line)!important;
 --blue:var(--brand-primary)!important;
 --navy:var(--brand-nav)!important;
}

html body,
html body.has-app-sidebar,
html body.has-app-sidebar>.page{
 background-color:var(--brand-page)!important;
 color:var(--brand-text)!important;
}
html body.has-app-sidebar>.page{
 background-image:radial-gradient(circle at 92% 0%,color-mix(in srgb,var(--brand-primary) 5%,transparent),transparent 34%)!important;
}


/* Public and signed-out surfaces inherit the same Super Admin palette. */
html{
 --login-ink:var(--brand-text)!important;--login-muted:var(--brand-muted)!important;
 --login-border:var(--brand-line)!important;--login-surface:var(--brand-surface)!important;
 --login-page:var(--brand-page)!important;--login-primary:var(--brand-primary)!important;
 --login-nav:var(--brand-nav)!important;--login-accent:var(--brand-accent)!important;
 --green:var(--brand-primary)!important;--gold:var(--brand-accent)!important;
}
html body.secure-access-login{background:radial-gradient(circle at 50% 15%,color-mix(in srgb,var(--brand-primary) 9%,transparent),transparent 34rem),linear-gradient(180deg,color-mix(in srgb,var(--brand-surface) 82%,var(--brand-page)),var(--brand-page))!important}
html body .secure-signin-button{background:var(--brand-primary)!important;border-color:var(--brand-primary)!important;color:var(--brand-on-primary)!important}
html body.onboarding-public{background:var(--brand-page)!important;color:var(--brand-text)!important}
html body .public-hero{background:linear-gradient(125deg,color-mix(in srgb,var(--brand-nav) 94%,#000),color-mix(in srgb,var(--brand-primary) 48%,var(--brand-nav)) 62%,color-mix(in srgb,var(--brand-accent) 28%,var(--brand-nav)))!important;color:var(--brand-on-nav)!important}
html body .public-hero :is(h1,p,span){color:var(--brand-on-nav)!important}
html body .brand-mark{background:var(--brand-primary)!important;color:var(--brand-on-primary)!important}
html body .onboarding-form section,html body .onboarding-complete{background:var(--brand-surface)!important;border-color:var(--brand-line)!important}

/* Navigation and application chrome use the configured navigation colour. */
html body .app-sidebar{
 background-color:var(--brand-nav)!important;
 background-image:linear-gradient(180deg,color-mix(in srgb,var(--brand-nav) 94%,#000),var(--brand-nav) 62%,color-mix(in srgb,var(--brand-nav) 82%,var(--brand-primary)))!important;
}
html body .app-sidebar .nav-links a.active{
 box-shadow:inset 3px 0 0 var(--brand-accent)!important;
}
html body .app-sidebar .nav-links a.active .nav-glyph{
 background:var(--brand-accent)!important;color:var(--brand-on-accent)!important;
}
html body .mobile-appbar,
html body .app-connectivity-bar,
html body .mobile-primary-nav{
 background-color:var(--brand-surface)!important;
 border-color:var(--brand-line)!important;
 color:var(--brand-text)!important;
}
html body .mobile-primary-nav .active{
 color:var(--brand-primary)!important;
 background:color-mix(in srgb,var(--brand-primary) 9%,var(--brand-surface))!important;
}
html body .mobile-primary-nav .active:after{background:var(--brand-accent)!important}

/* Primary-action component ownership moved to design-system.css in v16.25.3.
   Brand tokens above remain the palette source for those canonical controls. */

/* Brand-aware common controls. */
html body :is(.form-section-title>span,.request-mode-switch>a.active>span){background:var(--brand-primary)!important;color:var(--brand-on-primary)!important}
html body .request-mode-switch>a>span{background:color-mix(in srgb,var(--brand-primary) 10%,var(--brand-surface))!important;color:var(--brand-primary)!important}
html body .request-mode-switch>a.active{border-color:color-mix(in srgb,var(--brand-primary) 42%,var(--brand-line))!important;box-shadow:0 7px 20px color-mix(in srgb,var(--brand-primary) 10%,transparent)!important}
html body .absence-icon{background:color-mix(in srgb,var(--brand-primary) 10%,var(--brand-surface))!important;color:var(--brand-primary)!important}
html body .permission-choice .absence-icon{background:color-mix(in srgb,var(--brand-accent) 16%,var(--brand-surface))!important;color:color-mix(in srgb,var(--brand-accent) 78%,var(--brand-text))!important}
html body .memo-choice .absence-icon{background:color-mix(in srgb,var(--brand-nav) 10%,var(--brand-surface))!important;color:var(--brand-nav)!important}
html body .absence-choice b{color:var(--brand-primary)!important}
html body .memo-choice b{color:var(--brand-nav)!important}
html body .absence-choice:hover{border-color:var(--brand-accent)!important;box-shadow:0 12px 28px color-mix(in srgb,var(--brand-primary) 10%,transparent)!important}
html body .duration-preview,
html body .route-note,
html body .approver-card span{background:color-mix(in srgb,var(--brand-success) 9%,var(--brand-surface))!important;border-color:color-mix(in srgb,var(--brand-success) 25%,var(--brand-line))!important;color:color-mix(in srgb,var(--brand-success) 80%,var(--brand-text))!important}
html body .retroactive-field{background:color-mix(in srgb,var(--brand-warning) 9%,var(--brand-surface))!important;border-color:color-mix(in srgb,var(--brand-warning) 35%,var(--brand-line))!important}
html body .route-choice:hover,
html body .route-choice.selected{border-color:var(--brand-accent)!important;background:color-mix(in srgb,var(--brand-accent) 8%,var(--brand-surface))!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-accent) 13%,transparent)!important}
html body .route-choice.selected .route-radio{border-color:var(--brand-primary)!important}
html body input[type=file]::file-selector-button{border:0;border-radius:9px;padding:9px 12px;margin-right:10px;background:color-mix(in srgb,var(--brand-primary) 10%,var(--brand-surface));color:var(--brand-primary);font:inherit;font-weight:750;cursor:pointer}

/* Semantic states stay semantic but are derived from configured system colours. */
html body .status-approved,html body .alert.success{background:color-mix(in srgb,var(--brand-success) 12%,var(--brand-surface))!important;color:color-mix(in srgb,var(--brand-success) 82%,var(--brand-text))!important}
html body :is(.status-submitted,.alert.warning,.priority-high){background:color-mix(in srgb,var(--brand-warning) 13%,var(--brand-surface))!important;color:color-mix(in srgb,var(--brand-warning) 82%,var(--brand-text))!important}
html body :is(.status-rejected,.status-cancelled,.alert.error,.priority-urgent){background:color-mix(in srgb,var(--brand-danger) 10%,var(--brand-surface))!important;color:color-mix(in srgb,var(--brand-danger) 84%,var(--brand-text))!important}

/* PHONE CONTRACT --------------------------------------------------------- */
@media(max-width:760px){
 html{scroll-padding-bottom:calc(var(--mobile-nav-height,68px) + env(safe-area-inset-bottom,0px) + 34px)!important}
 html body{overflow-x:hidden!important}
 html body.has-app-sidebar>.page{
  width:100%!important;max-width:100%!important;overflow-x:hidden!important;
  padding-bottom:calc(var(--mobile-nav-height,68px) + env(safe-area-inset-bottom,0px) + 48px)!important;
 }
 html body :is(.content,.management-page,.enterprise-page,.v14-page,.work-page,.permission-page,.notes-page,.workspace-page){
  width:calc(100% - 24px)!important;max-width:100%!important;margin-inline:auto!important;padding-inline:0!important;
 }

 /* Buttons must reflow; phone users should never have to discover a clipped
    action by horizontal scrolling. */
 html body :is(.hero-actions,.workspace-hero-actions,.action-row){
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;gap:8px!important;overflow:visible!important;
 }
 html body :is(.hero-actions,.workspace-hero-actions,.action-row)>:last-child:nth-child(odd){grid-column:1/-1}
 html body :is(.hero-actions,.workspace-hero-actions,.action-row) .btn{
  width:100%!important;min-width:0!important;max-width:100%!important;min-height:48px!important;
  white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important;
  display:flex!important;align-items:center!important;justify-content:center!important;padding:10px 12px!important;
 }
 html body :is(.permission-hero,.leave-permission-hero,.memo-hero) p{
  display:block!important;overflow:visible!important;-webkit-line-clamp:unset!important;line-clamp:unset!important;
 }

 /* Request workflow navigation is a full-width stacked selector on phones. */
 html body .request-mode-switch{grid-template-columns:1fr!important;gap:7px!important;padding:5px!important;margin-bottom:14px!important}
 html body .request-mode-switch>a{min-height:64px!important;padding:11px 12px!important}
 html body .request-mode-switch>a>span{width:40px;height:40px;flex-basis:40px}
 html body .request-route-card{padding:16px!important;margin-bottom:13px!important}
 html body .route-selector{gap:12px!important}
 html body .route-choice{min-width:0!important;padding:12px!important}
 html body .route-choice span:last-child{min-width:0!important;overflow-wrap:anywhere!important}

 /* No horizontal metric strip on core leave/request pages: cards wrap into a
    stable two-column dashboard and the final odd card spans the row. */
 html body .permission-metrics{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;overflow:visible!important;padding:0!important;margin:12px 0 15px!important;
 }
 html body .permission-metrics>article{
  min-width:0!important;width:auto!important;min-height:96px!important;padding:13px!important;display:block!important;
 }
 html body .permission-metrics>article:last-child:nth-child(odd){grid-column:1/-1}
 html body .permission-metrics .metric-name{font-size:1rem!important;line-height:1.25!important;overflow-wrap:anywhere}

 html body .official-workflow-grid{grid-template-columns:1fr!important;gap:11px!important}
 html body .absence-choice{width:100%!important;min-width:0!important;grid-template-columns:44px minmax(0,1fr)!important;gap:12px!important;padding:15px!important}
 html body .absence-choice>div{min-width:0}.absence-choice strong,.absence-choice p,.absence-choice b{overflow-wrap:anywhere}
 html body .absence-choice b{grid-column:2!important}

 /* Fixed bottom nav + sticky submit bar caused the text collisions in the
    screenshots. On phones the form action returns to normal document flow. */
 html body .request-editor-page .professional-request-layout{display:block!important;min-width:0!important}
 html body .request-editor-page .permission-form{width:100%!important;min-width:0!important;overflow:visible!important}
 html body .request-editor-page .form-section{padding:18px 16px!important}
 html body .request-editor-page .professional-request-layout>aside{display:grid!important;grid-template-columns:1fr!important;margin-top:14px!important;position:static!important}
 html body .request-editor-page .declaration-check{
  display:grid!important;grid-template-columns:24px minmax(0,1fr)!important;gap:10px!important;align-items:start!important;
  padding:16px!important;margin:0!important;background:color-mix(in srgb,var(--brand-page) 60%,var(--brand-surface))!important;
 }
 html body .request-editor-page .declaration-check input{width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;margin:1px 0 0!important}
 html body .request-editor-page .declaration-check span{min-width:0!important;line-height:1.48!important;overflow-wrap:anywhere!important}
 html body .request-editor-page .submit-bar{
  position:static!important;inset:auto!important;display:grid!important;grid-template-columns:1fr!important;gap:12px!important;
  width:100%!important;margin:0!important;padding:16px!important;border:0!important;border-top:1px solid var(--brand-line)!important;
  border-radius:0 0 16px 16px!important;background:var(--brand-surface)!important;box-shadow:none!important;backdrop-filter:none!important;
 }
 html body .request-editor-page .submit-bar>span{min-width:0!important;line-height:1.45!important;overflow-wrap:anywhere!important}
 html body .request-editor-page .submit-bar .btn{width:100%!important;min-height:50px!important;white-space:normal!important}
 html body .request-editor-page>.request-editor-offline-notice{margin-bottom:13px!important}

 html body .panel,html body .dashboard-card{max-width:100%!important;min-width:0!important}
 html body :is(input,select,textarea){max-width:100%!important}
 html body input[type=file]{min-width:0!important;overflow:hidden!important;padding:8px!important}

 /* Bottom app navigation respects device safe areas and touch guidance. */
 html body .mobile-primary-nav{
  left:max(8px,env(safe-area-inset-left,0px))!important;right:max(8px,env(safe-area-inset-right,0px))!important;
  bottom:max(8px,env(safe-area-inset-bottom,0px))!important;height:auto!important;min-height:68px!important;
  padding:5px 6px!important;border-radius:20px!important;
 }
 html body .mobile-primary-nav :is(a,button){min-height:56px!important;min-width:0!important}
}

@media(max-width:480px){
 html body :is(.hero-actions,.workspace-hero-actions,.action-row){grid-template-columns:1fr!important}
 html body :is(.hero-actions,.workspace-hero-actions,.action-row)>*{grid-column:auto!important}
 html body .permission-metrics{grid-template-columns:1fr 1fr!important}
 html body .permission-metrics>article{min-height:90px!important}
 html body .request-editor-head{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
 html body .request-editor-head>.btn{width:100%!important}
}

@media(max-width:350px){
 html body .permission-metrics{grid-template-columns:1fr!important}
 html body .permission-metrics>article{grid-column:auto!important}
}

@media(prefers-reduced-motion:reduce){html body *{scroll-behavior:auto}}

/* Navigation text also adapts if the administrator selects a light nav colour. */
html body .app-sidebar :is(.sidebar-user-copy strong,.sidebar-account-label,.nav-label){color:var(--brand-on-nav)!important}
html body .app-sidebar :is(.sidebar-user-copy small,.sidebar-user-copy em,.sidebar-section-label){color:color-mix(in srgb,var(--brand-on-nav) 64%,var(--brand-nav))!important}
html body .app-sidebar .nav-links a{color:color-mix(in srgb,var(--brand-on-nav) 80%,var(--brand-nav))!important}
html body .app-sidebar .nav-links a.active{color:var(--brand-on-nav)!important}
html body .sidebar-collapse{color:var(--brand-on-nav)!important}