/* ==========================================================================
   Responsive — Media Query Breakpoints
   Responsive behavior preserves hierarchy rather than redesigning the page.
   ========================================================================== */

/* Desktop: ≥1440px
   Full layout: expanded sidebar, 12-column grid, full header
   ========================================================================== */
@media (min-width: 1440px) {
  /* Desktop is the default — no overrides needed */
}

/* Laptop: 1280–1439px
   Compact layout, 12-column grid
   ========================================================================== */
@media (min-width: 1280px) and (max-width: 1439px) {
  /* Grid — KPI cards go to 2 columns */
  .grid .col-3 {
    grid-column: span 6;
  }

  /* Topbar — compact search */
  .topbar__search {
    width: 240px;
  }

  /* Page header — smaller title */
  .page-header__title {
    font-size: var(--font-size-3xl);
  }
}

/* Tablet: 768–1279px
   Drawer sidebar (hidden by default, overlay on toggle), 6-column grid
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1279px) {
  /* Sidebar — hidden by default, drawer overlay */
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width-expanded);
    transition: transform var(--duration-sidebar) var(--easing-default);
    z-index: var(--z-overlay);
  }

  .sidebar--open {
    transform: translateX(0);
  }

  /* Sidebar overlay backdrop */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: calc(var(--z-overlay) - 1);
  }

  .sidebar-backdrop--visible {
    display: block;
  }

  /* Main content — full width */
  .app__main {
    margin-left: 0;
  }

  /* Grid — 6 columns */
  .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  /* Grid column spans for tablet */
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6 {
    grid-column: span 3;
  }

  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    grid-column: span 6;
  }

  /* Topbar — compact */
  .topbar__search {
    width: 200px;
  }

  .topbar__title {
    font-size: var(--font-size-xl);
  }

  /* Page header — smaller */
  .page-header__title {
    font-size: var(--font-size-2xl);
  }

  .page-header__subtitle {
    font-size: var(--font-size-base);
  }

  /* Page actions — wrap */
  .page-actions {
    flex-wrap: wrap;
  }

  /* Content padding — reduced */
  .content {
    padding: var(--spacing-lg);
  }

  /* Widget — compact padding */
  .widget__header {
    padding: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
  }

  .widget__body {
    padding: var(--spacing-lg);
  }

  /* Tables — horizontal scroll on smaller tablets */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer — compact */
  .footer {
    padding: 0 var(--spacing-lg);
  }
}

/* Mobile: <768px
   Hidden sidebar (overlay drawer), 1-column grid, compact everything
   ========================================================================== */
@media (max-width: 767px) {
  /* Sidebar — hidden by default, full-screen overlay */
  .sidebar {
    transform: translateX(-100%);
    width: 100%;
    max-width: 320px;
    transition: transform var(--duration-sidebar) var(--easing-default);
    z-index: var(--z-overlay);
  }

  .sidebar--open {
    transform: translateX(0);
  }

  /* Sidebar overlay backdrop */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: calc(var(--z-overlay) - 1);
  }

  .sidebar-backdrop--visible {
    display: block;
  }

  /* Main content — full width */
  .app__main {
    margin-left: 0;
  }

  /* Grid — 1 column */
  .grid {
    grid-template-columns: 1fr;
  }

  /* All columns span full width */
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    grid-column: span 1;
  }

  /* Topbar — compact mobile */
  .topbar {
    padding: 0 var(--spacing-md);
    gap: var(--spacing-sm);
  }

  .topbar__title {
    font-size: var(--font-size-lg);
  }

  .topbar__breadcrumb {
    display: none;
  }

  .topbar__search {
    width: 160px;
  }

  .topbar__search-input {
    font-size: var(--font-size-sm);
  }

  /* Page header — compact */
  .page-header__title {
    font-size: var(--font-size-xl);
  }

  .page-header__subtitle {
    font-size: var(--font-size-sm);
  }

  /* Page actions — wrap, stack */
  .page-actions {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .page-actions__filters,
  .page-actions__right {
    width: 100%;
    display: flex;
    gap: var(--spacing-sm);
  }

  .page-actions__right {
    justify-content: flex-end;
  }

  /* Content padding — minimal */
  .content {
    padding: var(--spacing-md);
  }

  /* Section margin — reduced */
  .section {
    margin-bottom: var(--spacing-lg);
  }

  /* Widget — compact padding */
  .widget__header {
    padding: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .widget__header-left {
    min-width: 0;
  }

  .widget__title {
    font-size: var(--font-size-base);
  }

  .widget__subtitle {
    font-size: var(--font-size-xs);
  }

  .widget__body {
    padding: var(--spacing-md);
  }

  /* KPI cards — full width */
  .kpi-card {
    width: 100%;
  }

  /* Tables — horizontal scroll */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table__header-cell,
  .table__cell {
    padding: 0 var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  /* Footer — compact */
  .footer {
    padding: 0 var(--spacing-md);
    height: auto;
    min-height: var(--footer-height);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .footer__left,
  .footer__right {
    flex: 1 1 100%;
    justify-content: center;
  }

  .footer__right {
    justify-content: center;
  }

  /* Hide collapse button on mobile (drawer handles it) */
  .sidebar__collapse-btn {
    display: none;
  }

  /* Hamburger menu button for mobile */
  .topbar__menu-btn {
    display: flex;
  }
}

/* Mobile menu button — hidden by default, shown on mobile
   ========================================================================== */
.topbar__menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: background var(--duration-fast) var(--easing-default);
}

.topbar__menu-btn:hover {
  background: var(--color-gray-100);
}

.topbar__menu-btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Small Mobile: <480px
   Extra compact adjustments
   ========================================================================== */
@media (max-width: 479px) {
  .topbar__search {
    width: 120px;
  }

  .topbar__search-icon {
    display: none;
  }

  .topbar__action {
    width: 36px;
    height: 36px;
  }

  .topbar__avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .page-header__title {
    font-size: var(--font-size-lg);
  }

  .btn--sm {
    height: 32px;
    padding: 6px 12px;
    font-size: var(--font-size-xs);
  }

  .widget__header-actions .btn--sm {
    padding: 6px 10px;
  }
}

/* Print styles
   ========================================================================== */
@media print {
  .sidebar,
  .topbar,
  .footer,
  .page-actions {
    display: none;
  }

  .app__main {
    margin-left: 0;
  }

  .content {
    padding: 0;
    max-width: 100%;
  }

  .widget {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid var(--color-gray-200);
  }
}