/* =========================================================
   The suite shell: what every app's rail + topbar needs on top of portal.css.

   portal.css is the InsightAndroid concept sheet (generated, not hand-edited). The concept keeps
   the rail's collapsed and drawer state on <body>; the suite's apps are Blazor layouts and keep it
   on their .app wrapper, so these rules make the concept's --rail-w follow that wrapper. They were
   in the CMS's admin.css, which is why the RMA Portal's and the CRM's rails did not collapse.

   Loaded after portal.css by every app with the flat material (CMS, customer portal, RMA, CRM).
   ========================================================= */

/* Brand block and icons */
/* Every app carries its full name ("CaptureTech License Manager"): one that does not fit the rail breaks into two even
   lines ("CaptureTech / Service Desk") instead of leaving one word alone on the second. */
html[data-ui="next"] .rail .brand .word{margin-left:6px;min-width:0;line-height:1.12;text-wrap:balance;}
html[data-ui="next"] .rail .brand svg{height:22px;width:auto;}
html[data-ui="next"] .auth-head .brand svg{height:22px;width:auto;margin-right:2px;}
html[data-ui="next"] .rail .item svg.ico{width:16px;height:16px;flex-shrink:0;}
html[data-ui="next"] .scope svg.s-chev{width:11px;height:11px;}
html[data-ui="next"] main{display:block;}

/* Collapse: the rail and the shell both read --rail-w from the layout's .app wrapper. */
html[data-ui="next"] .app{min-height:100vh;}
html[data-ui="next"] .app.rail-collapsed{--rail-w:60px;}

/* Rail footer: two quiet lines, gone when collapsed. */
html[data-ui="next"] .rail-foot small{display:block;font-size:11px;color:var(--ink-4);line-height:1.5;}
html[data-ui="next"] .rail.collapsed .rail-foot{display:none;}
/* The rail's C sits behind the navigation and the footer, never over them. */
html[data-ui="next"] .rail > .brand,html[data-ui="next"] .rail > nav,html[data-ui="next"] .rail > .rail-foot{position:relative;z-index:1;}

/* Responsive grids of the Ui components */
html[data-ui="next"] .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
html[data-ui="next"] .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
html[data-ui="next"] .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1180px){
  html[data-ui="next"] .grid-cols-3,html[data-ui="next"] .grid-cols-4{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Below 1024px the rail is a drawer over the page. */
@media (max-width:1023px){
  html[data-ui="next"] .app,html[data-ui="next"] .app.rail-collapsed{--rail-w:0px;}
  html[data-ui="next"] .rail.open{translate:0 0;box-shadow:var(--shadow-pop);}
  html[data-ui="next"] .app.rail-open .rail-scrim{opacity:1;visibility:visible;}
}
@media (max-width:900px){
  html[data-ui="next"] .userchip .u-name,html[data-ui="next"] .userchip .u-role{display:none;}
  html[data-ui="next"] .topbar .scope{max-width:40vw;}
  html[data-ui="next"] .topbar .s-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}
}
@media (max-width:640px){
  html[data-ui="next"] .grid,html[data-ui="next"] .grid[style]{grid-template-columns:minmax(0,1fr) !important;}
  html[data-ui="next"] .stat .stat-value{font-size:24px;}
  html[data-ui="next"] .page{padding:12px 12px 32px;}
  html[data-ui="next"] .panel-head{flex-wrap:wrap;gap:8px;}
  html[data-ui="next"] .tbl-wrap{overflow-x:auto;}
}

/* ---------- SuiteBar: the shell without the rail (the customer portal, Authentication's own pages) ---------- */
html[data-ui="next"] .bar-shell{min-height:100vh;}
html[data-ui="next"] .bar-top{padding:0 16px;}
html[data-ui="next"] .bar-brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:-0.01em;}
html[data-ui="next"] .bar-brand:hover{color:var(--ink);}
html[data-ui="next"] .bar-page{max-width:1240px;margin:0 auto;}
html[data-ui="next"] .bar-skip{position:absolute;left:12px;top:-60px;z-index:200;padding:8px 12px;border-radius:var(--r-ctl);background:var(--surface);color:var(--blue);box-shadow:var(--shadow-pop);font-weight:600;}
html[data-ui="next"] .bar-skip:focus{top:10px;}
@media (max-width:640px){
  html[data-ui="next"] .bar-top .div{display:none;}
  html[data-ui="next"] .bar-brand span{display:none;}
}