/* DPSMF Shared Responsive CSS — injected into all pages */

/* ── Tablet (≤900px) ── */
@media (max-width: 900px) {
  /* Nav */
  .nav-links {
    flex-wrap: wrap;
    gap: 6px;
  }
  .nav-link {
    font-size: 12px;
    padding: 4px 8px;
  }

  /* KPI grids */
  .kpi-grid, .kpis, [class*="kpi-row"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }

  /* Panels */
  .panel, .card, .section, [class*="panel-"] {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* Two-column layouts */
  .grid-2, .two-col, [class*="col-2"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Mobile (≤600px) ── */
@media (max-width: 600px) {
  /* Nav collapse */
  nav, .nav, .navbar, header nav {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 12px;
  }
  .nav-links {
    flex-direction: column;
    width: 100%;
    gap: 4px;
    margin-top: 8px;
  }
  .nav-link {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    box-sizing: border-box;
  }

  /* KPI single column */
  .kpi-grid, .kpis, [class*="kpi-row"],
  .kpi, [class*="kpi-"] {
    grid-template-columns: 1fr !important;
    display: grid !important;
    width: 100% !important;
  }
  .kpi, .kpi-val, .kpi-label {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* Tables — horizontal scroll */
  table, .table-wrap, [class*="table"] {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  th, td {
    white-space: nowrap;
    font-size: 12px;
    padding: 6px 8px;
  }

  /* Panels full width */
  .panel, .card, .section,
  [class*="panel-"], [class*="card-"] {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    border-radius: 6px;
  }

  /* Buttons */
  .btn, button, [class*="btn-"] {
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    padding: 10px 16px;
    margin-bottom: 6px;
  }

  /* General page padding */
  body {
    padding: 0 8px;
  }
  main, .main, .container, [class*="content"] {
    padding: 8px !important;
    box-sizing: border-box;
  }

  /* Charts / canvas */
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Hide secondary columns on small screens */
  .hide-mobile {
    display: none !important;
  }

  /* Flex rows → columns */
  .flex-row, .row, [class*="-row"]:not([class*="kpi-row"]) {
    flex-direction: column !important;
  }

  /* Select / input full width */
  select, input[type="text"], input[type="search"],
  input[type="number"], textarea {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 14px;
  }

  /* Page title */
  h1 { font-size: 20px; }
  h2 { font-size: 17px; }
  h3 { font-size: 15px; }
}