/* ==========================================================================
   Vietnam Banking Product Intelligence
   responsive.css — tablet & mobile behaviour
   Breakpoints: mobile < 768px · tablet 768–1199px · desktop >= 1200px
   ========================================================================== */

.mobile-only { display: none !important; }

/* --------------------------------------------------------------------------
   Tablet & below (< 1200px): sidebar becomes off-canvas
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 12px 40px rgba(17, 24, 39, .18);
  }
  .sidebar.is-open { transform: translateX(0); }

  .main { margin-left: 0; }
  .topbar-toggle { display: inline-flex; }
  .topbar { padding: 0 var(--sp-6); }
  .content { padding: var(--sp-6) var(--sp-6) var(--sp-12); }

  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Mobile (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .content { padding: var(--sp-4) var(--sp-4) var(--sp-12); }
  .topbar { padding: 0 var(--sp-4); gap: var(--sp-3); }
  .topbar-search { display: none; }
  .topbar-right { gap: var(--sp-3); }
  .status-pill { display: none; }

  .page-header { margin-bottom: var(--sp-6); }
  .page-title { font-size: 24px; }
  .page-desc { font-size: 14px; }
  .section { margin-top: var(--sp-8); }
  .section-title { font-size: 18px; }

  .kpi-grid { gap: var(--sp-3); }
  .kpi { padding: var(--sp-4); }
  .kpi-value { font-size: 26px; }
  .kpi-ico { display: none; }

  .metric-row { grid-template-columns: 1fr; }

  /* Touch targets */
  .btn-x { height: 44px; }
  .select-x, .input-x { height: 44px; }
  .side-link { padding: 12px; }
  .chip { height: 32px; }

  /* Toolbar stacks */
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar .field { min-width: 0; width: 100%; }

  /* Stacked definition rows */
  .def { grid-template-columns: 1fr; gap: 0; }
  .def dt { padding-bottom: 2px; border-bottom: 0; }
  .def dd { padding-top: 2px; font-size: 13.5px; }

  /* Identity */
  .identity-name { font-size: 22px; }

  /* Change item */
  .change-value { font-size: 19px; }
  .change-item { padding-left: var(--sp-5); }
  .change-item::before { top: var(--sp-4); bottom: var(--sp-4); }

  /* Panel padding */
  .panel-pad, .panel-pad-lg, .panel-body { padding: var(--sp-4); }
  .panel-head { padding: var(--sp-4) var(--sp-4) 0; }
  .panel-foot { padding: var(--sp-3) var(--sp-4); }

  /* Comparison: table -> stacked cards */
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }

  /* Horizontal charts: allow label wrap */
  .bar-row { grid-template-columns: minmax(96px, 120px) minmax(0, 1fr) 44px; gap: var(--sp-2); }

  .alert-sev { width: 34px; height: 34px; }

  .report-title { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   Very small (< 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 479.98px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-value { font-size: 28px; }
  .brand-text .brand-title { font-size: 13.5px; }
  .avatar { width: 32px; height: 32px; }
}

/* --------------------------------------------------------------------------
   Large desktop (>= 1440px): give dense data a little more room
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  .content { padding: var(--sp-10) var(--sp-12) var(--sp-16); }
}