/* Responsive rules. Breakpoints: 1100 (small laptop), 860 (tablet), 560 (phone). */
@media (max-width:1100px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .filters{grid-template-columns:1fr 1fr 1fr}
  .filters .field:first-child{grid-column:1/-1}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sched-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .menu-btn{display:inline-grid}
  .main-nav{position:fixed;inset-inline:0;top:var(--header-h);background:var(--color-background);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow);padding:.6rem 1rem 1rem;display:none;margin:0;max-height:calc(100vh - var(--header-h));overflow-y:auto}
  .main-nav.is-open{display:block}
  .main-nav ul{flex-direction:column;align-items:stretch}
  .main-nav a{padding:.8em 1em;font-size:1rem}
  .header-actions{margin-inline-start:auto}
  .hero-inner,.kankor-feature,.detail-layout,.contact-layout{grid-template-columns:1fr}
  .hero-art{min-height:280px;order:-1}
  .detail-layout aside{position:static}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .login-page{grid-template-columns:1fr}
  .login-side{display:none}
  .dash-shell{grid-template-columns:1fr}
  .dash-side{position:fixed;inset-block:0;inset-inline-start:0;width:272px;z-index:350;transform:translateX(-105%);transition:transform .22s;height:100%}
  [dir="rtl"] .dash-side{transform:translateX(105%)}
  .dash-side.is-open{transform:none!important}
  .sidebar-scrim{position:fixed;inset:0;background:rgba(32,55,75,.5);z-index:340}
  .sidebar-scrim.is-open{display:block}
  .dash-menu-btn{display:inline-grid}
  .cols-2,.cols-21,.cols-3{grid-template-columns:1fr}
  .dash-content{padding:1rem}
  .dash-top{padding:.6rem 1rem}
}
@media (max-width:560px){
  body{font-size:15px}
  .section{padding-block:44px}
  .brand-text span{display:none}
  .brand-logo{width:44px;height:44px}
  .header-inner{gap:.5rem}
  .grid-2,.grid-3,.grid-4,.form-row{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .login-main{padding:1rem}
  .top-user .who{display:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .sched-grid{grid-template-columns:1fr}
  .modal-foot .btn{flex:1}
  .notice{flex-direction:column;gap:.2rem}
  .toast-region{inset-inline:12px;max-width:none}

  /* Tables become stacked label/value cards on phones — no sideways scrolling */
  .table-wrap{border:0;overflow:visible}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.stack tr{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);margin-bottom:.7rem;padding:.3rem .2rem}
  table.stack td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.4rem .8rem;text-align:end}
  table.stack td::before{content:attr(data-label);font-weight:600;color:var(--color-navy);text-align:start;flex:none;max-width:45%}
  table.stack td.cell-actions{justify-content:flex-end}
  table.stack td.cell-actions::before{display:none}
  table.stack .person{justify-content:flex-end}
}