/* ==========================================================================
   RESPONSIVE — breakpoints for laptop, tablet and mobile
   ========================================================================== */

@media(max-width:1500px){
  .stat-row{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media(max-width:1320px){
  .kpi-row{grid-template-columns:repeat(3,minmax(0,1fr));}
  .grid-3{grid-template-columns:1fr 1fr;}
  .grid-3 > :nth-child(3){grid-column:1/-1;}
  .grid-b{grid-template-columns:1fr 1fr;}
  .grid-b > :nth-child(3){grid-column:1/-1;}
}
@media(max-width:1120px){
  .search-wrap{width:180px;}
}
@media(max-width:1024px){
  body{--sidebar-width:230px;}
  .sidebar{transform:translateX(-100%);}
  /* Overlay drawer, never a rail: a 72px strip pinned beside the content is
     not useful at this size, and setSidebar() already drops the collapsed
     class here. These two lines make that structural rather than incidental. */
  body.sidebar-collapsed .sidebar{width:var(--sidebar-width);}
  body.sidebar-collapsed .main{margin-left:0;}
  .main{margin-left:0;}
  body.sidebar-open .sidebar{transform:none;}
  .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-3,.grid-b{grid-template-columns:1fr;}
  .grid-3 > :nth-child(3),.grid-b > :nth-child(3){grid-column:auto;}
  .qa-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media(max-width:760px){
  .content{padding:14px;}
  .header{padding:0 12px;gap:8px;position:sticky;}

  .date-btn .d-txt{display:none;}
  .date-btn{padding:0 10px;}
  /* Same treatment as the date button: the label goes, the icon stays. The
     aria-label on #back-btn keeps it named once the text is hidden. */
  .back-btn .b-txt{display:none;}
  .back-btn{padding:0 10px;}
  .profile-btn .p-meta{display:none;}
  .page-title{font-size:16px;}
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .qa-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .form-grid{grid-template-columns:1fr;}
  .pop{position:fixed;left:10px;right:10px;top:calc(var(--header-h) + 8px);width:auto;transform-origin:top center;}
  .cal{width:auto;}
  #toasts{left:12px;right:12px;max-width:none;}
  .footer{flex-direction:column;text-align:center;gap:6px;}
}
@media(max-width:480px){
  .kpi-row{grid-template-columns:1fr;}
  .donut-wrap{flex-direction:column;}
  /* The header is already over-full at this width — it was before the Back
     button existed — so the button drops its border and padding and costs only
     the icon. It stays visible: Back must work on every page at every size. */
  .back-btn{width:30px;padding:0;border-color:transparent;background:none;}
  .back-btn:hover{background:none;}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}