/* NEXXO Workspace — PREM-01D / VIS-04.
   Final cross-screen polish, keyboard access, small screens, and print.
   Works on the existing screens only: no data or business-rule changes. */

/* Skip link appears on keyboard focus, never occludes application normally. */
.skip-link{
  position:fixed;z-index:999;left:12px;top:10px;
  transform:translateY(-160%);
  border:2px solid var(--mint);
  border-radius:10px;
  padding:11px 15px;
  font-size:14px;font-weight:700;
  background:var(--card);
  color:var(--text);
  box-shadow:var(--float);
}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0);outline:2px solid var(--mint);outline-offset:2px}

/* Keyboard identification for interactive rows, tables, tabs and shortcuts. */
.navbtn:focus-visible,.tab:focus-visible,.sort-head:focus-visible,
.portfolio-row[role="link"]:focus-visible,.clickable-list:focus-visible,
.mobile-proj:focus-visible,.bgroup-action:focus-visible,.legend-action:focus-visible,
.table-scroll:focus-visible,.timeline:focus-visible,.curve-scroll:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:3px;
}
.portfolio-row[role="link"]:focus-visible{
  outline-offset:-3px;
  background:var(--ghost);
}
.table-scroll:focus-visible,.timeline:focus-visible{
  outline-offset:-2px;
  border-radius:10px;
}
.navbtn,.tab,.seg button{
  min-height:42px;
}
.navbtn[aria-current="page"]{
  font-weight:680;
}
.tab[aria-current="page"]{
  font-weight:700;
}
.iconbtn,.mobiletoggle,.search-clear{
  touch-action:manipulation;
}
.auth-recover:focus-visible{outline:2px solid var(--mint);outline-offset:3px}

/* Content density and wrapping: long synthetic/real project names remain legible. */
.pagehead .actions,.proj-identity .actions{
  min-width:0;
  flex-wrap:wrap;
  row-gap:9px;
}
.pagehead h1,.proj-identity h1,
.card h2,.card h3,.mobile-proj .pname,.listitem strong{
  overflow-wrap:anywhere;
}
.card,.pad,.proj-identity,.project-fields,.project-grid,
.flow-list,.grid-charts,.grid-low{
  min-width:0;
}
.field,.field input,.field select,.field textarea{
  min-width:0;
}
.field select{
  max-width:100%;
}
.table-scroll,.curve-scroll,.timeline,.tabline{
  overscroll-behavior-inline:contain;
}
.table-scroll{
  -webkit-overflow-scrolling:touch;
}
.table td,.table th{
  overflow-wrap:break-word;
}

/* Modal focus is moved/trapped/restored by the VIS-04 app accessibility patch.
   Keep dialog stable in narrow or short viewports. */
.modalwrap{
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
}
.modal{
  max-width:min(670px,100%);
  max-height:min(90dvh,90vh);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.modal .field label{
  display:block;
  margin-bottom:5px;
}
.modal :is(input,select,textarea):focus-visible{
  outline:2px solid var(--mint);
  outline-offset:2px;
}
.modal-foot{
  flex-wrap:wrap;
}

/* Desktop / tablet alignment for controls and responsive content. */
@media(max-width:1100px){
  .content{padding-left:clamp(16px,2.2vw,26px);padding-right:clamp(16px,2.2vw,26px)}
  .project-fields{flex-wrap:wrap}
}
@media(max-width:900px){
  /* Avoid keyboard navigation to the visually hidden sidebar:
     JS synchronizes inert / aria-expanded with the existing mobile toggle. */
  .sidebar{z-index:110}
  .sidebar.open{box-shadow:var(--float)}
  .mobiletoggle{min-width:42px;min-height:42px}
  .topbar{min-width:0}
  .top-actions{min-width:0;gap:8px}
  .content{padding:22px 16px 52px}
  .pagehead .actions{align-self:flex-start}
}
@media(max-width:620px){
  .topbar{gap:7px;padding-inline:12px}
  .top-actions{gap:6px}
  .topbar #theme,.topbar #mobilemenu{min-width:42px;min-height:42px;width:42px;height:42px}
  .topbar .btn.primary,.top-actions>.btn.primary{min-height:40px}
  .avatar{min-width:36px;min-height:36px}
  .content{padding-inline:14px}
  .pagehead h1,.proj-identity h1{font-size:clamp(24px,6.8vw,29px)}
  .pagehead .actions{width:100%}
  .pagehead .actions .btn{flex:0 1 auto}
  .modal{padding:18px 16px;max-height:calc(100dvh - 24px)}
  .modal-foot .btn{min-height:42px}
  .tab{min-height:44px}
  .timeline{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
  .table-scroll{scrollbar-width:thin}
}
@media(max-width:360px){
  .content{padding-inline:12px}
  .pagehead .actions .btn{font-size:12px}
  .topbar{padding-inline:9px}
  .top-actions{gap:4px}
  .modal{padding:16px 12px}
}
@media(prefers-reduced-motion:reduce){
  .skip-link{transition:none}
  .navbtn,.tab,.mobile-proj,.clickable-list{transition:none}
}

/* Print is always a legible light document, regardless of chosen app theme.
   Preserves tables, chart data and report layout without adding new reports. */
@media print{
  @page{margin:12mm}
  html[data-theme="dark"],html[data-theme="light"]{
    color-scheme:light;
    --bg:#fff;--card:#fff;--raised:#F6F8FA;--ghost:#fff;--input:#fff;
    --text:#152B3D;--sub:#475A6D;--sub2:#526576;
    --line:#D9E1E7;--line2:#CDD7DF;
    --mint:#06786F;--mintlight:#06786F;--blue:#416FB9;
    --orange:#95641A;--green:#107D68;--red:#B44859;
    --th-bg:#F7F9FB;
    background:#fff!important;color:#152B3D!important;
  }
  body,.main-shell,.content,.card,.pad,.kpi,.mini-kpi,.modal{
    background:#fff!important;
    color:#152B3D!important;
    box-shadow:none!important;
  }
  .skip-link,.curve-hint,.toast,.modalwrap{display:none!important}
  .card{border-color:#D9E1E7!important;break-inside:avoid}
  .content{padding:0!important}
  .table-scroll{overflow:visible;box-shadow:none}
  .table{min-width:0;width:100%}
  .table th,.table td{color:#152B3D}
  .gantt-track{print-color-adjust:exact}
  .plot,.curve-scroll{max-width:100%;overflow:visible}
}