/* ==========================================================================
   css/responsive.css - Breakpoint rules (576, 768, 992, 1200 px)
   Conforms to OES Front-End Specification v2.1 (Section 25 & 2.4)
   ========================================================================== */

@media (max-width: 991.98px) {
  /* Sidebar Drawer on Mobile / Tablets */
  .app-sidebar {
    transform: translateX(-100%);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
  }

  [dir="rtl"] .app-sidebar {
    transform: translateX(100%);
  }

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

  .sidebar-open .sidebar-overlay {
    display: block;
  }

  .app-content {
    margin-inline-start: 0;
  }

  .topbar-center {
    display: none; /* Hide global search bar on small screens; available via search page */
  }

  .topbar-brand {
    min-width: auto;
  }

  .topbar-user-info {
    display: none;
  }

  /* CBT Responsive Layout */
  .cbt-body {
    flex-direction: column;
  }

  .question-panel {
    flex: 1;
    border-inline-end: none;
  }

  .palette-panel {
    display: none; /* Opened via bottom toggle */
    max-width: 100%;
    border-top: 1px solid var(--card-border);
  }

  .palette-panel.mobile-open {
    display: flex;
    position: fixed;
    bottom: 64px;
    left: 0;
    right: 0;
    top: 56px;
    z-index: 1050;
    background: var(--page-bg);
  }
}

@media (max-width: 575.98px) {
  .main-container {
    padding: 1rem 0.75rem;
  }

  .page-header-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .kpi-value {
    font-size: 1.5rem;
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}