/* ==========================================================================
   Krio Workforce OS — responsive behaviour
   1920 / 1440 / 1366 / 1024 / 768 / 430 / 390
   ========================================================================== */

@media (max-width:1600px){
  .kpi-grid.cols-6,.kpi-grid.cols-7{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}

@media (max-width:1400px){
  .kpi-grid,.kpi-grid.cols-8{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .kpi-grid.cols-5{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .kpi-grid.cols-7{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .live-row{ grid-template-columns:minmax(170px,1.5fr) 106px 1fr 120px }
  .live-row .live-hb{ display:none }
}

@media (max-width:1280px){
  :root{ --sidebar-w:238px }
  .grid-8-4,.grid-7-5{ grid-template-columns:minmax(0,1fr) }
  .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .global-search{ width:min(260px,26vw) }
}

@media (max-width:1100px){
  .kpi-grid,.kpi-grid.cols-8,.kpi-grid.cols-5,.kpi-grid.cols-6,.kpi-grid.cols-7{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .weight-row{ grid-template-columns:150px 1fr 60px }
}

/* tablet: sidebar auto-collapses to icon rail */
@media (max-width:991.98px){
  .app-sidebar{ display:none }
  .app-main{ margin-left:0 !important }
  .app-content{ padding:16px 14px 0 }
  .app-topbar{ padding:0 12px; gap:8px }
  .global-search{ width:auto; flex:1 1 130px; max-width:320px }
  .global-search kbd{ display:none }
  .demo-flag{ display:none }
  .page-title{ font-size:15.5px }
  .grid-2,.grid-3{ grid-template-columns:1fr }
  .kpi-grid,.kpi-grid.cols-8,.kpi-grid.cols-5,.kpi-grid.cols-6,.kpi-grid.cols-7,.kpi-grid.cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .agent-window{ right:12px; bottom:12px; width:min(322px,calc(100vw - 24px)) }
  .chart-box{ height:250px }
}

@media (max-width:767.98px){
  .app-topbar{ height:60px }
  :root{ --topbar-h:60px }
  .topbar-titles .kw-breadcrumb{ display:none }
  .page-head .ph-right{ width:100%; justify-content:flex-start }
  .profile-actions{ width:100% }
  .profile-actions .btn{ flex:1 1 auto }
  .filter-bar{ padding:10px }
  .filter-bar .form-select{ flex:1 1 132px }
  .live-row{ grid-template-columns:1fr auto; gap:8px; padding:12px 14px }
  .live-row .live-app,.live-row .live-times,.live-row .live-actions{ display:none }
  .card-kw-head{ padding:13px 14px }
  .card-kw-body{ padding:14px }
  .toast-stack{ right:10px; left:10px; bottom:10px; max-width:none }
  .kpi-value{ font-size:23px }
  .section-head{ margin:20px 0 11px }
}

@media (max-width:575.98px){
  .kpi-grid,.kpi-grid.cols-8,.kpi-grid.cols-5,.kpi-grid.cols-6,.kpi-grid.cols-7,.kpi-grid.cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
  .kpi{ padding:12px 13px }
  .kpi-value{ font-size:21px }
  .shot-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px }
  .live-cards{ grid-template-columns:1fr }
  .dept-grid,.report-grid{ grid-template-columns:1fr }
  .weight-row{ grid-template-columns:1fr; gap:6px }
  .seg{ width:100%; overflow-x:auto }
  .app-content{ padding:14px 12px 0 }
  .page-head .ph-left h2{ font-size:17.5px }
  .agent-window{ left:10px; right:10px; width:auto; bottom:10px }
  .table-foot{ justify-content:center }
}

@media (max-width:430px){
  .user-chip-body,.user-chip .bi-chevron-down{ display:none !important }
  .icon-btn{ width:33px; height:33px }
  .topbar-right{ gap:3px }
  .global-search{ flex:1 1 90px }
  .kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .profile-head{ padding:16px }
}

@media print{
  .app-sidebar,.app-topbar,.agent-window,.toast-stack,.app-footer,.ph-right{ display:none !important }
  .app-main{ margin-left:0 }
  .card-kw{ break-inside:avoid }
}