/* SecureTech phone platform stabilization — intentionally phone-only. */
@media (max-width:640px){
  html,body{max-width:100%;overflow-x:hidden!important}
  body.st-mobile-drawer-open{overflow:hidden!important}
  #workspace:not(.hidden),#workspace:not(.hidden) .app,#workspace:not(.hidden) .main,#workspace:not(.hidden) #content{width:100%;max-width:100%;min-width:0!important;overflow-x:hidden}
  #workspace:not(.hidden) .main{padding:14px!important}
  #workspace:not(.hidden) .mobile-top{position:sticky;top:0;z-index:80;display:flex!important;align-items:center!important;gap:12px!important;min-height:76px;padding:11px 16px!important;background:#071426!important;border-bottom:1px solid #263a55!important}
  #workspace:not(.hidden) .mobile-top .brand-logo{display:block!important;width:min(52vw,190px)!important;height:54px!important;object-fit:contain!important;object-position:left center!important;flex:0 1 auto}
  #workspace:not(.hidden) #menuBtn{margin-left:auto!important;min-width:94px!important;min-height:48px!important;padding:0 14px!important;border-radius:12px!important;background:#2f7ee6!important;color:#fff!important;font-size:16px!important;white-space:nowrap!important}
  #workspace:not(.hidden) .side{position:fixed!important;top:0!important;bottom:0!important;left:-100%!important;width:min(86vw,340px)!important;height:100dvh!important;z-index:100!important;padding:18px 16px 28px!important;overflow-y:auto!important;overscroll-behavior:contain!important;box-shadow:18px 0 46px rgba(0,0,0,.38)!important;transition:left .22s ease!important}
  #workspace:not(.hidden) .side.open{left:0!important}
  #workspace:not(.hidden) .side .brand{display:block!important;padding:4px 46px 16px 4px!important;border-bottom:1px solid #263a55!important}
  #workspace:not(.hidden) .side .brand-logo{display:block!important;width:min(62vw,210px)!important;height:62px!important;object-fit:contain!important;object-position:left center!important;margin:0!important}
  .st-mobile-drawer-close{position:absolute;right:14px;top:18px;width:42px!important;height:42px!important;min-height:42px!important;margin:0!important;padding:0!important;display:grid!important;place-items:center!important;border:1px solid #405676!important;border-radius:11px!important;background:#10233d!important;color:#fff!important;font-size:25px!important;line-height:1!important;z-index:2}
  .st-mobile-drawer-backdrop{position:fixed;inset:0;z-index:90;background:rgba(1,7,18,.68);opacity:0;pointer-events:none;transition:opacity .2s ease}
  .st-mobile-drawer-backdrop.open{opacity:1;pointer-events:auto}
  #workspace:not(.hidden) .side nav{padding-top:9px!important}
  #workspace:not(.hidden) .side .section-label{padding:17px 10px 7px!important;font-size:10px!important}
  #workspace:not(.hidden) .side nav button{min-height:46px!important;padding:10px 13px!important;margin:2px 0!important;border-radius:10px!important;font-size:15px!important;line-height:1.3!important}
  #workspace:not(.hidden) .side nav button.active{background:#df2335!important;color:#fff!important;box-shadow:none!important}
  #workspace:not(.hidden) .toolbar{max-width:100%!important;min-width:0!important;margin:0 0 15px!important;padding:0 0 14px!important;position:static!important;background:transparent!important;border-bottom:1px solid #263a55!important}
  #workspace:not(.hidden) .toolbar>div:first-child{min-width:0!important}
  #workspace:not(.hidden) .toolbar h2{font-size:27px!important;line-height:1.12!important;overflow-wrap:anywhere!important}
  #workspace:not(.hidden) .toolbar .eyebrow{font-size:10px!important;line-height:1.45!important;letter-spacing:1.4px!important}
  #workspace:not(.hidden) .profile{display:none!important}
  #workspace:not(.hidden) .section-title{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:13px!important;margin:24px 0 14px!important;max-width:100%!important}
  #workspace:not(.hidden) .section-title h3{font-size:25px!important;line-height:1.18!important;overflow-wrap:anywhere!important}
  #workspace:not(.hidden) .section-title p{font-size:14px!important;line-height:1.5!important;overflow-wrap:anywhere!important}
  #workspace:not(.hidden) .section-title>.btn,#workspace:not(.hidden) .section-title>.actions{width:100%!important}
  #workspace:not(.hidden) .section-title>.btn{min-height:50px!important}
  #workspace:not(.hidden) .kpis,#workspace:not(.hidden) .docc-glance,#workspace:not(.hidden) .cc33-kpis,#workspace:not(.hidden) .sol23-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:100%!important}
  #workspace:not(.hidden) .kpi,#workspace:not(.hidden) .docc-metric,#workspace:not(.hidden) .cc33-kpis>div,#workspace:not(.hidden) .sol23-kpis>div{min-width:0!important;min-height:126px!important;padding:16px!important;border-radius:14px!important}
  #workspace:not(.hidden) .kpi strong,#workspace:not(.hidden) .docc-metric strong,#workspace:not(.hidden) .cc33-kpis b,#workspace:not(.hidden) .sol23-kpis b{font-size:27px!important;line-height:1.08!important;overflow-wrap:anywhere!important}
  #workspace:not(.hidden) .table-card,#workspace:not(.hidden) [class*="table-wrap"]{width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
  #workspace:not(.hidden) table.st-mobile-card-table{display:block!important;width:100%!important;min-width:0!important;background:transparent!important;border:0!important}
  #workspace:not(.hidden) table.st-mobile-card-table thead{display:none!important}
  #workspace:not(.hidden) table.st-mobile-card-table tbody{display:grid!important;gap:11px!important;width:100%!important}
  #workspace:not(.hidden) table.st-mobile-card-table tr{display:block!important;width:100%!important;padding:5px 15px!important;border:1px solid #2b415d!important;border-radius:14px!important;background:linear-gradient(145deg,#10233d,#0d1f36)!important;box-shadow:0 8px 20px rgba(0,0,0,.14)!important}
  #workspace:not(.hidden) table.st-mobile-card-table td{display:grid!important;grid-template-columns:minmax(88px,34%) minmax(0,1fr)!important;gap:11px!important;width:100%!important;min-width:0!important;padding:10px 0!important;border:0!important;border-bottom:1px solid #253b56!important;background:transparent!important;color:#e8f0fa!important;overflow-wrap:anywhere!important;white-space:normal!important}
  #workspace:not(.hidden) table.st-mobile-card-table td:last-child{border-bottom:0!important}
  #workspace:not(.hidden) table.st-mobile-card-table td:before{content:attr(data-mobile-label);color:#8fa3bc;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
  #workspace:not(.hidden) table.st-mobile-card-table tbody:empty{display:none!important}
  #workspace:not(.hidden) .empty{min-height:130px!important;display:grid!important;place-items:center!important;padding:24px!important;border:1px dashed #38516e!important;border-radius:14px!important;background:#0e2038!important;text-align:center!important;font-size:14px!important}
  #workspace:not(.hidden) .modal,#workspace:not(.hidden) [class$="-overlay"]{padding:0!important;align-items:flex-end!important}
  #workspace:not(.hidden) .modal-card,#workspace:not(.hidden) [class$="-modal"]{width:100%!important;max-width:100%!important;max-height:96dvh!important;border-radius:18px 18px 0 0!important;overflow:auto!important}
  #workspace:not(.hidden) .modal-head,#workspace:not(.hidden) [class$="-title"]{position:sticky!important;top:0!important;z-index:5!important}
  #workspace:not(.hidden) .sol23-body,#workspace:not(.hidden) [class$="-body"]{padding:16px!important;min-width:0!important}
  #workspace:not(.hidden) .sol23-grid{grid-template-columns:1fr!important}
  #workspace:not(.hidden) .sol23-head,#workspace:not(.hidden) .sol23-detail-head{display:block!important}
  #workspace:not(.hidden) .sol23-head .btn,#workspace:not(.hidden) .sol23-detail-head .btn{width:100%!important;min-height:50px!important;margin-top:12px!important}
  #workspace:not(.hidden) .phase7-tabs,#workspace:not(.hidden) [class$="-tabs"]{max-width:100%!important;overflow-x:auto!important;overscroll-behavior-x:contain!important;scrollbar-width:thin}
  #workspace:not(.hidden) img{max-width:100%}
  #workspace:not(.hidden) h1,#workspace:not(.hidden) h2,#workspace:not(.hidden) h3,#workspace:not(.hidden) h4,#workspace:not(.hidden) p{max-width:100%;overflow-wrap:anywhere}
  #login .login-form-pane .brand{min-height:72px!important;display:flex!important;align-items:center!important;justify-content:center!important}
  #login .login-form-pane .brand-logo{display:block!important;width:180px!important;height:68px!important;object-fit:contain!important;opacity:1!important;visibility:visible!important}
  #login .st-login-brand-fallback{width:100%;min-height:64px;display:grid;place-items:center;color:#0b2f58;font-size:21px;font-weight:900;text-align:center}
}


/* Targeted phone repairs. These deliberately restore each module's own desktop/tablet layout above 640px. */
@media (max-width:640px){
  #workspace:not(.hidden) #content>*,
  #workspace:not(.hidden) #phase7-finance>*{min-width:0!important;max-width:100%!important}

  /* Finance and Procurement: never let the heading become the narrow flex item beside action buttons. */
  #phase7-finance .section-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
    gap:14px!important;
    width:100%!important;
  }
  #phase7-finance .section-head>div{width:100%!important;min-width:0!important;max-width:100%!important}
  #phase7-finance .section-head h2,
  #phase7-finance .section-head p{
    width:100%!important;
    min-width:0!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    white-space:normal!important;
  }
  #phase7-finance #p7-primary-actions,
  #phase7-finance .p7-toolbar-actions,
  #phase7-finance .proc-toolbar-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
  }
  #phase7-finance #p7-primary-actions .btn,
  #phase7-finance .p7-toolbar-actions .btn,
  #phase7-finance .proc-toolbar-actions .btn{
    width:100%!important;
    min-width:0!important;
    min-height:54px!important;
    margin:0!important;
    padding:10px 8px!important;
    white-space:normal!important;
  }
  #phase7-finance #p7-content{min-width:0!important;max-width:100%!important;overflow:hidden!important}
  #phase7-finance .phase7-grid,
  #phase7-finance .phase7-flow{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* HR already has a purpose-built phone card layout; keep the generic table adapter away from it. */
  #workspace:not(.hidden) .employee-register{width:100%!important;min-width:0!important;margin-top:16px!important;clear:both!important}
  #workspace:not(.hidden) .employee-register table{display:table!important}
  #workspace:not(.hidden) .employee-register tbody{display:grid!important}
  #workspace:not(.hidden) .employee-register tr{width:100%!important;min-width:0!important}
  #workspace:not(.hidden) .employee-register td{overflow-wrap:break-word!important;word-break:normal!important}
  #workspace:not(.hidden) .employee-register .st-employee-tabs{width:100%!important}

  /* Prevent dynamic module summaries (including Academy) from occupying the same paint row. */
  #workspace:not(.hidden) .section-title + .kpis,
  #workspace:not(.hidden) .section-title + [class*="kpi"],
  #workspace:not(.hidden) [class*="academy"] .kpis{
    position:static!important;
    clear:both!important;
    margin-top:14px!important;
  }
  #workspace:not(.hidden) [class*="academy"] .section-title,
  #workspace:not(.hidden) [class*="academy"] [class*="hero"]{
    position:static!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  #workspace:not(.hidden) [class*="academy"] h2,
  #workspace:not(.hidden) [class*="academy"] h3,
  #workspace:not(.hidden) [class*="academy"] p{
    position:static!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }

  /* Human-readable wrapping: phrases may wrap at spaces, but words never stack letter-by-letter. */
  #workspace:not(.hidden) h1,
  #workspace:not(.hidden) h2,
  #workspace:not(.hidden) h3,
  #workspace:not(.hidden) h4{
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }
}


/* HR phone register: explicit rows prevent headings and employee data from sharing space. */
@media (max-width:640px){
  #workspace:not(.hidden) .employee-register tbody{
    padding-top:18px!important;
    gap:14px!important;
  }
  #workspace:not(.hidden) .employee-register tr{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-auto-rows:auto!important;
    gap:8px 12px!important;
    padding:16px!important;
  }
  #workspace:not(.hidden) .employee-register td:nth-child(1){
    grid-column:1!important;grid-row:1!important;
    color:#8fa4bc!important;font-size:12px!important;
  }
  #workspace:not(.hidden) .employee-register td:nth-child(2){
    grid-column:1/-1!important;grid-row:2!important;
    font-size:18px!important;line-height:1.25!important;
  }
  #workspace:not(.hidden) .employee-register td:nth-child(3){
    grid-column:1/-1!important;grid-row:3!important;
  }
  #workspace:not(.hidden) .employee-register td:nth-child(4){
    grid-column:1!important;grid-row:4!important;
  }
  #workspace:not(.hidden) .employee-register td:nth-child(5){
    grid-column:2!important;grid-row:1!important;
    align-self:start!important;justify-self:end!important;
  }
  #workspace:not(.hidden) .employee-register .st-id-actions{
    grid-column:1/-1!important;grid-row:5!important;
  }
}


/* Phone-only HR scrolling repair: allow the employee list to determine the page height. */
@media (max-width:640px){
  #workspace:not(.hidden) .employee-register,
  #workspace:not(.hidden) .employee-register table,
  #workspace:not(.hidden) .employee-register tbody{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }
  #workspace:not(.hidden) .employee-register tbody{
    display:grid!important;
    padding-bottom:32px!important;
  }
  #workspace:not(.hidden) .employee-register tr{
    position:relative!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }
}