/**
 * responsive.css
 * Responsibility: Media queries for layout grids, header buttons, and mobile drawer sidebar.
 */

/* ── TABLET BREAKPOINT (max-width: 1024px) ── */
@media (max-width: 1024px) {
  /* Grids: Show 2 columns instead of 3 or 4 */
  .g3, .g31, .g13, .kpig, .kpig-4 {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Make search input smaller so it doesn't take too much space */
  .srch input {
    width: 140px;
  }
  .srch input:focus {
    width: 180px;
  }
}

/* ── MOBILE BREAKPOINT (max-width: 850px) ── */
@media (max-width: 850px) {
  /* Show hamburger toggle button in header */
  .menu-toggle {
    display: inline-flex !important;
  }
  
  /* Make top header span 100% and align padding */
  #hd {
    left: 0 !important;
    padding: 0 16px;
  }
  
  /* Make main content span 100% and scale padding */
  #main {
    margin-left: 0 !important;
    padding: 14px 16px;
  }
  
  /* Turn sidebar into a sliding drawer menu */
  #sb {
    left: -250px !important;
    width: 250px !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
  }
  
  /* Slide in active class */
  #sb.open {
    left: 0 !important;
  }
  
  /* Hide the Collapse Panel toggle since it's desktop-only */
  .sb-foot {
    display: none !important;
  }
  
  /* Adjust navigation item text display inside the drawer */
  #sb.mini .ni-label, #sb.mini .sb-section {
    opacity: 1 !important;
    width: auto !important;
  }
  
  /* Grids: Collapse to 1 column on mobile phones */
  .g2, .g3, .g31, .g13, .g4, .kpig, .kpig-3, .kpig-4 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  /* Header Actions: hide text labels on buttons to save horizontal space */
  .hd-actions .hbtn span {
    display: none !important;
  }
  
  /* Hide non-essential items in header */
  .hd-user-label, #btn-fs {
    display: none !important;
  }
}

/* ── SMALL PHONES (max-width: 480px) ── */
@media (max-width: 480px) {
  /* Hide search bar on very small devices or hide live indicator */
  .srch {
    display: none !important;
  }
  
  /* Decrease metric value font-size slightly to avoid overflow */
  .kc {
    padding: 16px;
  }
  .kval {
    font-size: 20px !important;
  }
  
  /* Make table wrapper scroll horizontally gracefully */
  .twrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}