/* SLPT R31 UI33A
   Approved app-wide open-space workspace authority.
   Structural sidebar geometry is untouched. Only the approved whiter surface treatment is applied.
   All dark work containers use one canonical fill token app-wide. */

html[data-context="app-wide"],
html[data-context="clinical"]{
  --r31-ui33-dark:#090c0e;
  --r31-ui33-dark-soft:#090c0e;
  --r31-ui33-border:rgba(255,255,255,.115);
  --r31-ui33-border-soft:rgba(255,255,255,.085);
  --r31-ui33-paper:#f5f2ec;
  --r31-ui33-paper-2:#eeeae3;
  --r31-ui33-ink:#121518;
  --r31-ui33-muted:#5e666c;
  --r31-ui33-orange:#ff7600;
  --r31-ui33-orange-soft:rgba(255,118,0,.10);
  --r31-ui33-gloss:rgba(255,255,255,.05);
  --r31-ui33-frost:rgba(233,239,242,.10);
}

/* Main workspace: open transparent frost, not another opaque dark plate. */
html[data-context="app-wide"] .ui2-main,
html[data-context="clinical"] .ui2-main{
  background:var(--r31-ui33-frost)!important;
  border-color:rgba(255,255,255,.16)!important;
  backdrop-filter:blur(20px) saturate(1.10)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.10)!important;
  box-shadow:0 22px 72px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.10)!important;
}

html[data-context="app-wide"] .ui2-content,
html[data-context="clinical"] .ui2-content{
  background:transparent!important;
}

/* Approved whiter sidebar surface only. Width, grid, collapse, labels and nav ownership are untouched. */
html[data-context="app-wide"] .ui2-sidebar,
html[data-context="clinical"] .ui2-sidebar{
  background:rgba(250,249,246,.97)!important;
  border-color:rgba(255,255,255,.82)!important;
  box-shadow:0 18px 58px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
html[data-context="app-wide"] .ui2-sidebar .ui2-nav button,
html[data-context="clinical"] .ui2-sidebar .ui2-nav button{
  color:#20262a!important;
  border-color:rgba(27,34,38,.075)!important;
}
html[data-context="app-wide"] .ui2-sidebar .ui2-nav button.active,
html[data-context="clinical"] .ui2-sidebar .ui2-nav button.active{
  color:#d95d00!important;
  background:rgba(255,118,0,.085)!important;
  border-color:rgba(255,118,0,.38)!important;
}

/* One canonical dark shade for dark work sections, with reduced orange edge treatment. */
html[data-context="app-wide"] :where(
  .ui2-hero,.ui2-page-head,.ui2-panel,
  .ui2-dashboard-hero,.ui2-dashboard-quick,.ui2-dashboard-section,.ui2-dashboard-panel,
  .ui2-business-hero,.ui2-business-tabs,.ui2-business-card,.ui2-business-quick,
  .ui2-business-overview-card,.ui2-business-sessions-card,.ui2-business-tax-card,.ui2-business-expenses-full,
  .ui2-pu2-panel,.ui2-pu3-profile,.ui2-pu3-profile-card,
  .ui2-programs-hero,.ui2-programs-panel,.ui2-programs-card,
  .ui2-clinical-design4>section,.ui2-clinical-design4>article,
  .ui2-assessment-design3>section,.ui2-assessment-design3>article,
  .ui2-performance-design4>section,.ui2-performance-design4>article,
  .ui2-nutrition-design4>section,.ui2-nutrition-design4>article,
  .ui2-reports-design4>section,.ui2-reports-design4>article,
  .ui2-academy-design3>section,.ui2-academy-design3>article,
  .ui2-calendar-design-final>section,.ui2-calendar-design-final>article,
  .ui2-messages-design4>section,.ui2-messages-design4>article,
  .r31-cws3-card,.r31-cws3-row,.r31-cws3-empty
),
html[data-context="clinical"] :where(
  .ui2-hero,.ui2-page-head,.ui2-panel,
  .ui2-pu3-profile,.ui2-pu3-profile-card,
  .ui2-clinical-design4>section,.ui2-clinical-design4>article,
  .r31-cws3-card,.r31-cws3-row,.r31-cws3-empty
){
  background:var(--r31-ui33-dark)!important;
  border-color:var(--r31-ui33-border)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.28),inset 0 1px 0 var(--r31-ui33-gloss)!important;
}

/* Reduce orange edging on dark sections while retaining the orange language for active states/actions. */
html[data-context="app-wide"] :where(
  .ui2-dashboard-panel,.ui2-business-overview-card,.ui2-business-sessions-card,
  .ui2-business-tax-card,.ui2-business-expenses-full,.ui2-pu2-panel,.ui2-pu3-profile-card,
  .ui2-programs-panel,.r31-cws3-card
),
html[data-context="clinical"] :where(
  .ui2-pu3-profile-card,.ui2-clinical-design4>section,.ui2-clinical-design4>article,.r31-cws3-card
){
  outline-color:transparent!important;
}

/* White-ish summary cards: approved Design 2 contrast treatment. */
html[data-context="app-wide"] :where(
  .ui2-dashboard-stat,
  .ui2-pu3-overview-grid>article,
  .ui2-business-summary>article,.ui2-business-summary>div,
  .ui2-business-stats>article,.ui2-business-stats>div,
  .ui2-clinical-stats>article,.ui2-clinical-stats>div,
  .ui2-assessment-stats>article,.ui2-assessment-stats>div,
  .ui2-performance-stats>article,.ui2-performance-stats>div,
  .ui2-nutrition-stats>article,.ui2-nutrition-stats>div,
  .ui2-reports-stats>article,.ui2-reports-stats>div,
  .ui2-academy-stats>article,.ui2-academy-stats>div,
  .ui2-calendar-stats>article,.ui2-calendar-stats>div
),
html[data-context="clinical"] :where(
  .ui2-pu3-overview-grid>article,
  .ui2-clinical-stats>article,.ui2-clinical-stats>div
){
  color:var(--r31-ui33-ink)!important;
  background:var(--r31-ui33-paper)!important;
  border-color:rgba(255,255,255,.74)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.17),inset 0 1px 0 #fff!important;
}
html[data-context="app-wide"] :where(
  .ui2-dashboard-stat,
  .ui2-pu3-overview-grid>article,
  .ui2-business-summary>article,.ui2-business-summary>div,
  .ui2-business-stats>article,.ui2-business-stats>div
) :where(h1,h2,h3,h4,h5,b,strong,p,small,label),
html[data-context="clinical"] .ui2-pu3-overview-grid>article :where(h1,h2,h3,h4,h5,b,strong,p,small,label){
  color:inherit;
}
html[data-context="app-wide"] :where(
  .ui2-dashboard-stat,
  .ui2-pu3-overview-grid>article,
  .ui2-business-summary>article,.ui2-business-summary>div,
  .ui2-business-stats>article,.ui2-business-stats>div
) small,
html[data-context="clinical"] .ui2-pu3-overview-grid>article small{
  color:var(--r31-ui33-muted)!important;
  opacity:1!important;
}

/* Open-space container language: clear boundaries, restrained edge colour, no orange frame. */
html[data-context="app-wide"] .ui2-content :where(article,section)[class*="card"],
html[data-context="clinical"] .ui2-content :where(article,section)[class*="card"]{
  border-color:var(--r31-ui33-border-soft)!important;
}

/* Business Hub tabs: one row on desktop and a single horizontal rail on compact widths. */
.ui2-business-tabs{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:4px!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none;
}
.ui2-business-tabs::-webkit-scrollbar{display:none}
.ui2-business-tabs>button{
  flex:1 1 0!important;
  min-width:max-content!important;
  white-space:nowrap!important;
}

/* Five percent gloss: consistent highlight without changing the canonical dark fill. */
html[data-context="app-wide"] :where(
  .ui2-dashboard-panel,.ui2-business-overview-card,.ui2-business-sessions-card,
  .ui2-business-tax-card,.ui2-business-expenses-full,.ui2-pu2-panel,.ui2-pu3-profile,
  .ui2-pu3-profile-card,.ui2-programs-panel,.r31-cws3-card
),
html[data-context="clinical"] :where(
  .ui2-pu3-profile,.ui2-pu3-profile-card,.ui2-clinical-design4>section,.r31-cws3-card
){
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s cubic-bezier(.2,.8,.2,1),border-color .18s ease;
}
@media(hover:hover) and (pointer:fine){
  html[data-context="app-wide"] :where(
    .ui2-dashboard-panel,.ui2-business-overview-card,.ui2-business-sessions-card,
    .ui2-pu2-panel,.ui2-pu3-profile-card,.ui2-programs-panel,.r31-cws3-card
  ):hover,
  html[data-context="clinical"] :where(.ui2-pu3-profile-card,.r31-cws3-card):hover{
    transform:translateY(-1px);
    border-color:rgba(255,255,255,.15)!important;
    box-shadow:0 19px 44px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.055)!important;
  }
}

/* Subtle page-entry motion. */
@keyframes r31Ui33Enter{
  from{opacity:.01;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}
html[data-context="app-wide"] .ui2-content>*,
html[data-context="clinical"] .ui2-content>*{
  animation:r31Ui33Enter .24s cubic-bezier(.2,.8,.2,1) both;
}

/* Mobile and touch conflict reconciliation.
   One final authority prevents route-width overflow, stacked-form collisions and tab overlap. */
@media(max-width:900px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  html[data-context="app-wide"] .ui2-content,
  html[data-context="clinical"] .ui2-content{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    padding-inline:12px!important;
    box-sizing:border-box!important;
  }

  html[data-context="app-wide"] .ui2-content :where(section,article,form,fieldset,div,label),
  html[data-context="clinical"] .ui2-content :where(section,article,form,fieldset,div,label){
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }

  html[data-context="app-wide"] .ui2-content :where(input,select,textarea,button),
  html[data-context="clinical"] .ui2-content :where(input,select,textarea,button){
    max-width:100%;
    box-sizing:border-box;
  }

  .ui2-dashboard-design4,.ui2-calendar-design-final,.ui2-messages-design4,.ui2-business-design3,
  .ui2-pu2-design2,.ui2-programs-f6f13,.ui2-clinical-design4,.ui2-assessment-design3,
  .ui2-performance-design4,.ui2-nutrition-design4,.ui2-reports-design4,.ui2-academy-design3,
  .ui2-settings-design,.ui2-admin-design{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  .ui2-dashboard-design4>*,.ui2-calendar-design-final>*,.ui2-messages-design4>*,
  .ui2-business-design3>*,.ui2-pu2-design2>*,.ui2-programs-f6f13>*,
  .ui2-clinical-design4>*,.ui2-assessment-design3>*,.ui2-performance-design4>*,
  .ui2-nutrition-design4>*,.ui2-reports-design4>*,.ui2-academy-design3>*{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  .ui2-pu3-profile-tabs,
  .ui2-session-tabs,
  .ui2-business-tabs{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    max-width:100%!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .ui2-pu3-profile-tabs::-webkit-scrollbar,
  .ui2-session-tabs::-webkit-scrollbar,
  .ui2-business-tabs::-webkit-scrollbar{display:none}

  .ui2-pu3-profile-tabs>button,
  .ui2-session-tabs>button,
  .ui2-business-tabs>button{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  .ui2-business-overview-grid{
    width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }
  .ui2-business-sessions-card,.ui2-business-tax-card,.ui2-business-expenses-full{
    grid-column:1/-1!important;
    width:100%!important;
    min-width:0!important;
  }

  .r31-cws3-profile-grid,.r31-cws3-form-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .r31-cws3-span2{grid-column:auto!important}

  .ui2-content table{
    max-width:100%;
  }
  .ui2-table-wrap,.ui2-business-table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
}

@media(max-width:560px){
  html[data-context="app-wide"] .ui2-main,
  html[data-context="clinical"] .ui2-main{
    backdrop-filter:blur(16px) saturate(1.08)!important;
    -webkit-backdrop-filter:blur(16px) saturate(1.08)!important;
  }
  .ui2-dashboard-metrics,
  .ui2-pu3-overview-grid,
  .ui2-business-summary,
  .ui2-business-stats{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

/* Respect reduced-motion preferences. */
@media(prefers-reduced-motion:reduce){
  html[data-context="app-wide"] .ui2-content>*,
  html[data-context="clinical"] .ui2-content>*{
    animation:none!important;
  }
  html[data-context="app-wide"] :where(
    .ui2-dashboard-panel,.ui2-business-overview-card,.ui2-business-sessions-card,
    .ui2-pu2-panel,.ui2-pu3-profile-card,.ui2-programs-panel,.r31-cws3-card
  ),
  html[data-context="clinical"] :where(.ui2-pu3-profile-card,.r31-cws3-card){
    transition:none!important;
    transform:none!important;
  }
}