/* ============================================================
   desktop-density.css — shared laptop/mid-desktop density layer.

   Linked on every record page AFTER mobile.css. This layer is SPACE-ONLY:
   it trims padding, gaps, chrome height and table row height so more data
   clears the fold on a laptop. Locked type sizes never shrink.

   COLUMN COUNTS ARE NOT OWNED HERE. Every record page already ships its own
   `@media(max-width:1380px)` / `(max-width:1080px)` blocks that restructure
   `.grid` / `.rail .prods` / `.railcol` / `.kpis` (Role Dashboards adds a
   1180px `#dashBody .grid` rule). This file loads AFTER those inline styles,
   so any `.grid`/`.kpis` template declared here would silently override them
   at equal specificity. Deliberately absent — do not add them back. Column
   changes belong in the page (or in those blocks), density belongs here.

   Edges deliberately match the existing system: 1380px and 1080px, both
   floored at 769px so mobile.css and the shell's mobile breakpoint own
   everything below.
   ============================================================ */

/* ---------------- step 1: laptop (<=1380px) ---------------- */
@media (min-width:769px) and (max-width:1380px){

  /* chrome */
  .side{width:200px;flex-basis:200px;padding:16px 0;}
  .brand{padding:2px 18px 18px;}
  .nav{padding:0 9px;}
  .nav a{padding:9px 10px;gap:11px;}
  .topbar{height:54px;flex-basis:54px;gap:14px;padding:0 18px;}
  .scroll{padding:16px 18px 26px;}

  /* customer header + both nav rails */
  .chead{padding:18px 22px 14px;gap:14px;}
  /* tighten the meta rail's column gutter so the one-line rail (see the
     min-width:1280px rule in page-transitions.css) fits inside the sheet */
  .chead .cmeta{gap:7px 16px;}
  .chead .ava{width:36px;height:36px;}
  .tabs{margin:0 20px;gap:8px;}
  .tab{padding:10px 7px;gap:7px;}
  .subtabs{margin:11px 20px 0;}
  .subtab{padding:10px 13px;gap:7px;}

  /* body + KPI strip (spacing only — column count stays with the page) */
  .body{padding:11px 20px 24px;}
  .kpis{gap:12px;margin-bottom:14px;}
  .kpi{padding:13px 15px;}
  .kpi .top{margin-bottom:6px;}

  /* cards */
  .stack{gap:12px;}
  .card .ch{padding:12px 16px;}
  /* Usage Summary rail is a toolbar, not a .ch — keep it in step with .card .ch */
  .sumtoolbar{padding:12px 16px 8px;}
  .body .upane[data-pane="connections"] .card>.ch{padding-bottom:8px;}
  .sumcard .filtertags,.cb:has(.table) .filtertags,.upane[data-pane="connections"] .cb>.filtertags{padding-left:16px;padding-right:16px;}
  .cb{padding:14px 16px;}
  .dualrow,.urow,.orders-row,.ubody{gap:12px;}

  /* tables: row height is where the fold is won */
  .table thead th{padding:9px 12px;}
  .table tbody td{padding:10px 12px;}

  /* charts + rails give back height */
  .donut{width:146px;height:146px;}
  .bars{height:210px;}
  .chart{padding:16px 16px 10px;}
  .prod{padding:11px 16px;}
  .frow{padding:9px 0;}
}

/* ------------- step 2: small laptop (<=1080px) ------------- */
@media (min-width:769px) and (max-width:1080px){

  .side{width:176px;flex-basis:176px;}
  .nav a{font-size:12.5px;gap:10px;}
  .nav a .chev{display:none;}

  /* tab rows stop squeezing and start scrolling */
  .tabs{overflow-x:auto;scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{flex:0 0 auto;padding:10px 13px;}
  .subtabs{overflow-x:auto;scrollbar-width:none;}
  .subtabs::-webkit-scrollbar{display:none;}
  .subtab{flex:0 0 auto;white-space:nowrap;}

  /* wide data tables scroll rather than crush columns */
  .body .table{min-width:940px;}
  .cb:has(.table),.tblwrap,#connTable{overflow-x:auto;}
}