/* ============================================
   PMSB — Mobile Responsive
   ============================================ */

@media (max-width: 767px) {
  /* Hide old header — MIV header handles branding */
  .site-header {
    display: none;
  }

  /* Main content padding */
  .main-content-padding {
    padding: 1rem;
  }

  .topbar {
    padding: 1rem;
  }

  /* KPI cards: stack vertically */
  #kpi-cards {
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  #kpi-cards > div {
    padding: 20px !important;
  }

  #kpi-cards h2 {
    font-size: 2rem !important;
  }

  /* Filters: stack vertically */
  .filters-row {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    margin-bottom: 20px;
  }

  .filter-group {
    width: 100%;
  }

  /* Search */
  .search-container {
    width: 100%;
  }

  /* Document items: stack */
  .doc-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
  }

  .doc-icon {
    margin-right: 0;
  }

  .doc-info {
    width: 100%;
  }

  .doc-title {
    font-size: 0.9rem;
  }

  .doc-btn {
    width: 100%;
    text-align: center;
    padding: 10px 16px;
  }

  /* Header inner (if visible) */
  .header-inner {
    padding: 12px 16px;
  }

  .header-h1 {
    font-size: 0.9rem;
  }

  /* Dashboard container */
  .dashboard-container {
    flex-direction: column;
  }

  /* Content card overrides */
  .content-card {
    padding: 1rem;
    border-radius: 12px;
  }

  /* Tables */
  .table-wrapper,
  .dash-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Graphs */
  .js-plotly-plot {
    width: 100% !important;
  }

  .js-plotly-plot .plotly .main-svg {
    width: 100% !important;
  }
}

@media (max-width: 479px) {
  .main-content-padding {
    padding: 0.75rem;
  }

  #kpi-cards h2 {
    font-size: 1.6rem !important;
  }

  .doc-title {
    font-size: 0.85rem;
  }

  .doc-meta {
    font-size: 0.7rem;
  }
}