/* RESPONSIVE — all media queries (mobile/tablet adjustments).
   If something looks wrong on a phone but fine on desktop (or vice-versa), edit here. */

/* Tablet & medium screens (≤768px) */
@media(max-width:768px){
  .hdr{padding:10px 14px;gap:10px}
  .brand-name{font-size:18px}
  .live-pill .live-txt{display:none}
  #import-btn span{display:none}
  .tabs{padding:0 10px;gap:0}
  .tab{padding:10px 12px;font-size:12px}
  .tab-badge{display:none}
  main{padding:12px}
  .date-picker-row{gap:8px}
  .dp-dropdown{left:0;right:0;min-width:unset;width:calc(100vw - 28px);max-width:320px}
  .kpi-row{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi{padding:12px}
  .kpi-val{font-size:20px}
  .g2,.g3,.g-3-1,.g-2-1{grid-template-columns:1fr}
  .tl-header{grid-template-columns:20px 1fr auto auto 20px !important;gap:8px}
  .tl-stat:nth-child(3),.tl-stat:nth-child(4),.tl-stat:nth-child(5){display:none}
  .tl-kpi-row{grid-template-columns:repeat(2,1fr)}
  .mem-tbl-wrap{max-height:340px}
  .mem-tbl th:nth-child(n+8):nth-child(-n+11),.mem-tbl td:nth-child(n+8):nth-child(-n+11){display:none}
  .guide-steps{grid-template-columns:1fr}
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:600px}
  .sec-title{font-size:16px}
  input[type=text],select{font-size:16px}
  .team-grid{grid-template-columns:1fr}
  .g-3-1{grid-template-columns:1fr}
}

/* Phone (≤480px) */
@media(max-width:480px){
  .kpi-row{grid-template-columns:1fr 1fr}
  .tab{padding:9px 10px;font-size:11px}
  .hdr-right .date-lbl{display:none}
}

/* Touch devices: bigger tap targets */
@media(hover:none){
  .tab{min-height:44px;display:flex;align-items:center}
  .dp-day{min-height:36px}
  .pg{min-height:36px;min-width:36px}
  .dp-nav-btn{min-height:36px;min-width:36px}
}

/* Prevent iOS zoom on input focus */
@media(max-width:768px){
  input,select,textarea{font-size:16px !important}
}