/* ===== Mobile Settings Fixes - v5 ===== */
@media (max-width: 767px) {
  /* Tabs: full width, single row */
  div[data-slot="tabs"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  div[data-slot="tabs-list"] {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
  }
  
  button[data-slot="tabs-tab"] {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    font-size: 0.8125rem !important;
  }

  /* Settings page inner layout: stack sidebar + content vertically */
  .bg-card > div > div.flex.gap-6,
  .bg-sidebar .flex.gap-6 {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  /* Also target any flex container with gap-6 inside settings */
  div[class*="flex"][class*="gap-6"] {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  /* Sidebar aside: full width */
  aside[class*="w-64"],
  aside.w-64 {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
  }
  
  /* Sidebar menu: horizontal scroll */
  ul[data-slot="sidebar-menu"] {
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 0.25rem !important;
  }
  
  li[data-slot="sidebar-menu-item"] {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  
  /* Reduce heading */
  h1.text-2xl {
    font-size: 1.25rem !important;
  }
}
