/* JustiX v0.8.0.3 — Global Visual Integrity Audit
   Purpose: prevent text/icon overflow, clipping, overlap and unreadable stacking
   across desktop, tablet and mobile while preserving the approved navy/gold design. */

/* A. Universal containment ------------------------------------------------ */
:where(.view,.card,.glass,.glass-soft,.panel,.hero,.metric,.setting,.section-title,
       .court-layout,.court-main,.court-side,.court-toolbar,.court-stage,
       .sim-grid,.settings-grid,.provider-grid,.learning-layout,.learning-grid,
       .talent-layout,.talent-grid,.passport-layout,.passport-grid,.beta-grid,
       .prod-grid,.backend-grid,.jurisdiction-grid,.legal-grid,.game-grid,
       .jx79-role-card,.jx80-card,.jx80-case-item,.jx-context-card) *{
  box-sizing:border-box;
  min-width:0;
}

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

:where(.card,.glass,.glass-soft,.panel,.metric,.setting,.speech,.evidence-item,
       .timeline-item,.case-row,.case-data,.jx80-case-item,.jx80-selection,
       .jx79-role-option,.jx791-party){
  max-width:100%;
}

/* Do not let decorative icons shrink into text */
:where(svg,.avatar,.case-icon,.choice-icon,.jx64-party-icon,.jx791-big-icon,
       .jx79-role-icon,.jx791-summary-icon,.jx80-case-icon,.oral-orb,
       .jurisdiction-orbit,.league-emblem){
  flex:0 0 auto;
}

/* B. Headings / action rows ---------------------------------------------- */
.section-title,.page-head,.head-actions,.hero-actions,.sim-footer,.meta-line{
  flex-wrap:wrap!important;
  min-width:0!important;
}
.section-title>*,.page-head>*,.head-actions>*{min-width:0!important}
.section-title h2,.section-title h3,.page-head h1,.page-head h2{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

button,.primary-btn,.ghost-btn,.link-btn,.icon-btn{
  max-width:100%;
}
button:not(.icon-btn):not(.round-btn){
  white-space:normal;
  line-height:1.2;
}

/* C. Top bar / sidebar ---------------------------------------------------- */
.topbar{min-width:0;gap:10px!important}
.breadcrumb,.search-wrap,.top-actions{min-width:0}
.top-actions{flex-wrap:wrap!important;row-gap:7px!important}
.nav-btn{min-width:0!important}
.nav-btn>span:not(.nav-badge){min-width:0;line-height:1.2;white-space:normal}
.account-copy{min-width:0}.account-copy>*{overflow-wrap:anywhere}

/* D. Dashboard & generic cards ------------------------------------------ */
.metrics,.game-kpis,.provider-grid,.cert-grid,.library-grid,.settings-grid,
.learning-grid,.talent-grid,.passport-grid,.beta-grid,.prod-grid{
  min-width:0;
}
.metric,.game-kpi,.card{min-width:0}
.metric h3,.metric p,.game-kpi strong,.game-kpi span,.game-kpi small,
.card h2,.card h3,.card p{
  max-width:100%;
  white-space:normal;
}

/* E. Courtroom: primary problem area ------------------------------------- */
.court-layout{
  grid-template-columns:minmax(0,1fr) minmax(350px,390px)!important;
  align-items:start!important;
}
.court-main,.court-side{min-width:0!important}

.court-toolbar{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px!important;
  height:auto!important;
}
.court-toolbar .title{
  flex:1 1 390px!important;
  min-width:220px!important;
}
.court-toolbar .title b{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.25!important;
  max-width:100%!important;
}
.court-toolbar .title span{
  display:block!important;
  margin-top:4px!important;
  white-space:normal!important;
  line-height:1.35!important;
}
.court-toolbar .segment{
  flex:0 0 auto!important;
  max-width:100%!important;
}
.court-toolbar .segment button{white-space:nowrap!important}

/* Five courtroom tabs must stay five independent columns on desktop. */
.court-side>.tabs{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:4px!important;
  padding:10px 10px 0!important;
  overflow:visible!important;
}
.court-side>.tabs button{
  width:100%!important;
  min-width:0!important;
  min-height:48px!important;
  padding:8px 4px!important;
  font-size:clamp(9px,.72vw,11px)!important;
  line-height:1.15!important;
  white-space:normal!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-align:center!important;
}

/* Transcript metadata and body must not concatenate or escape the rail. */
.speech{min-width:0!important}
.speech>div:last-child{min-width:0!important}
.speech-meta{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:baseline!important;
  gap:4px 8px!important;
  min-width:0!important;
}
.speech-meta b,.speech-meta span,.speech p{
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.transcript,.evidence-list,.timeline{min-width:0!important}
.chat-form{min-width:0!important}
.chat-form input{min-width:0!important;width:100%!important}

/* 2D courtroom actors: keep names and metadata inside their desks. */
.court-stage{isolation:isolate}
.judge-person{
  width:44%!important;
  max-width:440px!important;
  text-align:center!important;
}
.judge-person b,.judge-person span{
  width:100%!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  text-align:center!important;
  line-height:1.25!important;
}
.lawyer-person{
  width:30%!important;
  max-width:30%!important;
  text-align:center!important;
  gap:5px!important;
}
.lawyer-person.left{left:8%!important}
.lawyer-person.right{right:8%!important}
.lawyer-person b,.lawyer-person span{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  padding:0 8px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  text-align:center!important;
  line-height:1.25!important;
}
.court-label{
  max-width:calc(100% - 120px)!important;
  white-space:normal!important;
  line-height:1.2!important;
}

/* Keep microphone dock self-contained. */
.mic-panel{max-width:calc(100% - 24px)!important;overflow-x:auto!important;overflow-y:hidden!important}

/* F. Generic tabs / segmented navigation -------------------------------- */
.tabs,.segment,.learning-tabs,.talent-tabs,.passport-tabs,.beta-tabs{min-width:0}
.learning-tabs,.talent-tabs,.passport-tabs,.beta-tabs{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.learning-tabs button,.talent-tabs button,.passport-tabs button,.beta-tabs button{
  flex:0 0 auto!important;
  white-space:nowrap!important;
}

/* G. Forms / settings ----------------------------------------------------- */
.setting{min-width:0!important;gap:14px!important}
.setting>div{min-width:0!important}
.setting p,.setting b{white-space:normal!important;overflow-wrap:anywhere!important}
select,.select,input,textarea{max-width:100%!important;min-width:0!important}

/* H. Tables / dense matrices --------------------------------------------- */
.table,.case-table,.beta-table,.talent-table,.passport-table,.season-board{
  max-width:100%!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
}
.case-data>*{min-width:0!important}
.case-data .title b,.case-data .title span{white-space:normal!important;overflow-wrap:anywhere!important}

/* I. Legal / jurisdiction / learning / talent / passport ---------------- */
.legal-hero-pills,.season-meta,.jx80-case-meta,.tags,.chips{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
}
.jurisdiction-hero,.learning-layout,.talent-layout,.passport-layout,.backend-hero,.beta-hero{
  min-width:0!important;
}

/* J. Modals / selectors --------------------------------------------------- */
.modal,.jx79-role-modal,.jx80-modal,.jx-context-modal,.jx-legal-modal{
  max-width:100vw!important;
}
.jx79-role-card,.jx80-card,.jx-context-card,.jx-legal-card{
  max-width:calc(100vw - 24px)!important;
  min-width:0!important;
}
.jx79-role-card,.jx80-card,.jx-context-card{
  overflow:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}
.jx80-case-item>div,.jx80-selection-copy,.jx79-role-option>*{min-width:0!important}

/* K. Footer --------------------------------------------------------------- */
.jx66-footer-top,.jx66-footer-bottom,.jx66-mini-links{min-width:0!important}
.jx66-copyright,.jx66-motto,.jx66-footer button{white-space:normal!important;overflow-wrap:anywhere!important}
.jx66-mini-links{flex-wrap:wrap!important}

/* L. Responsive recomposition -------------------------------------------- */
@media(max-width:1180px){
  .court-layout{grid-template-columns:minmax(0,1fr) 350px!important}
  .court-toolbar .title{flex-basis:100%!important}
  .court-toolbar .segment{flex:1 1 auto!important}
  .court-toolbar .segment button{flex:1 1 0!important}
}

@media(max-width:980px){
  .court-layout{grid-template-columns:1fr!important}
  .court-side{min-height:auto!important}
  .court-side>.tabs{grid-template-columns:repeat(5,minmax(94px,1fr))!important;overflow-x:auto!important}
  .court-side>.tabs button{min-width:94px!important}
  .top-actions{max-width:100%!important}
}

@media(max-width:760px){
  .court-toolbar .title{min-width:0!important}
  .court-toolbar .segment{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .court-stage{min-height:560px!important}
  .judge-platform{left:16%!important;right:16%!important}
  .judge-person{width:64%!important;max-width:64%!important}
  .desk{width:42%!important}
  .desk.left{left:4%!important}.desk.right{right:4%!important}
  .lawyer-person{width:42%!important;max-width:42%!important}
  .lawyer-person.left{left:4%!important}.lawyer-person.right{right:4%!important}
  .lawyer-person b{font-size:12px!important}
  .lawyer-person span{font-size:10px!important;padding:0 4px!important}
  .court-label{max-width:calc(100% - 100px)!important}
  .setting{display:grid!important;grid-template-columns:1fr!important;align-items:start!important}
  .setting>button,.setting>select,.setting>.select{width:100%!important;max-width:100%!important}
  .jx66-footer-bottom{display:grid!important;gap:10px!important;text-align:center!important;justify-items:center!important}
}

@media(max-width:480px){
  .court-side>.tabs{grid-template-columns:repeat(5,minmax(86px,1fr))!important}
  .court-side>.tabs button{min-width:86px!important;font-size:10px!important}
  .court-stage{min-height:540px!important}
  .judge-person{top:72px!important}
  .lawyer-person{bottom:142px!important}
  .lawyer-person .avatar{width:56px!important;height:56px!important}
  .mic-panel{bottom:12px!important}
  .top-actions .primary-btn{width:100%!important}
}