/* ═══════════════════════════════════════════════════════════════
   KIIT Material — GLOBAL RESPONSIVE LAYER
   Loaded LAST on every page so these rules win. Makes the whole
   site usable on phones and tablets without touching each page's
   markup: inline multi-column grids collapse, the nav sidebar
   becomes an off-canvas drawer, tables scroll, modals fit, etc.
   ═══════════════════════════════════════════════════════════════ */

/* Never let a stray wide element cause sideways scrolling */
img, video, canvas, iframe { max-width: 100%; }

/* The hamburger (toggles #sidebar) is hidden on desktop, shown on phones */
button[onclick*="sidebar"], .kc-nav-toggle { display: none; }

/* Off-canvas drawer backdrop. It lives in the page HTML (a sibling after
   #sidebar) and is shown purely by CSS when the drawer is open — no JS needed,
   so it works on any connection. Hidden entirely on desktop. */
.kc-backdrop { display: none; }

/* ✕ close button inside the mobile drawer (hidden until phone width) */
.kc-drawer-close { display: none; }
body.kc-noscroll { overflow: hidden; }

/* ───────────────── Tablet (≤ 1024px) ───────────────── */
@media (max-width: 1024px) {
  [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(5"], [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stats-cards { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ───────────────── Phone (≤ 768px) ───────────────── */
@media (max-width: 768px) {
  button[onclick*="sidebar"], .kc-nav-toggle { display: inline-flex !important; }

  /* Drawer backdrop: shown by CSS whenever the drawer is open */
  .kc-backdrop {
    display: block; position: fixed; inset: 0; z-index: 95;
    background: rgba(0,0,0,.55);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  #sidebar.open ~ .kc-backdrop { opacity: 1; pointer-events: auto; }

  /* Dashboard-style nav sidebar slides in as a drawer.
     Default-closed is forced with !important so it can never show on load. */
  #sidebar {
    position: fixed !important; top: 0; left: 0; bottom: 0; z-index: 100;
    width: min(284px, 84vw) !important;
    transform: translateX(-100%) !important; transition: transform .3s ease;
  }
  #sidebar.open { transform: translateX(0) !important; box-shadow: 0 0 60px rgba(0,0,0,.6); }
  .main-content { margin-left: 0 !important; }

  /* the ✕ button, top-right of the open drawer */
  .kc-drawer-close {
    display: flex !important; position: absolute; top: 14px; right: 14px; z-index: 3;
    width: 36px; height: 36px; border-radius: 10px;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
    color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 0;
    font-family: system-ui, sans-serif;
  }
  .kc-drawer-close:hover { background: rgba(255,255,255,.2); }

  /* Tighter top bar; hide the wide desktop search field */
  .top-bar { padding: 12px 14px !important; }
  .top-bar .search-bar, .search-bar { display: none !important; }
  .top-bar-title { font-size: 17px !important; }
  .page-content { padding: 16px !important; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  .section-padding { padding: 56px 0 !important; }

  /* Collapse fixed multi-column INLINE grids to a single column.
     (Button-row grids use CSS classes, not inline styles, so they're safe.) */
  [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"], [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(5"], [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: 1fr !important;
  }

  /* Known class-based grids */
  .grid-2, .grid-3, .stats-cards, .stats-grid, .features-grid, .pricing-grid,
  .testimonials-grid, .steps-grid, .footer-grid, .social-layout {
    grid-template-columns: 1fr !important;
  }
  .col-span-2 { grid-column: span 1 !important; }

  /* Wide tables scroll horizontally instead of overflowing the page */
  table { display: block; width: 100%; overflow-x: auto; }

  /* Modals fit small screens */
  .pay-modal, .success-box, .modal-content, .pdf-modal { max-width: 94vw !important; }

  .stat-card-value { font-size: 1.6rem !important; }
}

/* ───────────────── Small phone (≤ 400px) ───────────────── */
@media (max-width: 400px) {
  .kh-actions, .note-actions, .card-actions, .form-row-2 { grid-template-columns: 1fr !important; }
  .top-bar-right { gap: 8px !important; }
}