/* Mobile-first overrides for Gavy OS (Sneat + custom pages).
   Target: compact UI on small screens (≈10px typography on mobile). */

@media (max-width: 576px) {
  /* Global typography */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    font-size: 10px;
    line-height: 1.35;
  }

  h1,
  .h1 {
    font-size: 18px;
  }
  h2,
  .h2 {
    font-size: 16px;
  }
  h3,
  .h3 {
    font-size: 14px;
  }
  h4,
  .h4 {
    font-size: 13px;
  }
  h5,
  .h5 {
    font-size: 12px;
  }
  h6,
  .h6 {
    font-size: 11px;
  }

  .small,
  small {
    font-size: 9px;
  }

  /* Layout spacing */
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
  }

  .card .card-body {
    padding: 0.75rem !important;
  }

  /* Buttons / inputs */
  .btn {
    font-size: 10px;
    padding: 0.35rem 0.55rem;
  }

  .btn.btn-sm {
    font-size: 10px;
    padding: 0.3rem 0.5rem;
  }

  .form-control,
  .form-select,
  .input-group-text {
    font-size: 10px;
    padding: 0.35rem 0.55rem;
  }

  .badge {
    font-size: 9px;
  }

  /* Tables: tighter density */
  .table {
    font-size: 10px;
  }

  .table > :not(caption) > * > * {
    padding: 0.4rem 0.45rem;
  }

  /* Sneat menu */
  .menu-header-text {
    font-size: 11px !important;
  }

  .menu-link {
    font-size: 11px;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  /* Charts (ApexCharts) */
  .apexcharts-canvas,
  .apexcharts-svg {
    max-width: 100% !important;
  }

  .apexcharts-canvas {
    max-height: 280px !important;
  }

  .apexcharts-text,
  .apexcharts-legend-text,
  .apexcharts-xaxis text,
  .apexcharts-yaxis text {
    font-size: 9px !important;
  }

  .apexcharts-title-text,
  .apexcharts-subtitle-text {
    font-size: 10px !important;
  }

  .apexcharts-tooltip,
  .apexcharts-tooltip * {
    font-size: 10px !important;
  }

  .apexcharts-legend {
    flex-wrap: wrap;
    gap: 6px 10px;
  }

  .apexcharts-toolbar {
    display: none !important;
  }

  /* Portal layout (portal_base.html) */
  .portal-shell {
    grid-template-columns: 1fr !important;
  }

  .portal-sidebar {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 14px 12px !important;
    border-right: 0 !important;
  }

  .portal-topbar {
    padding: 12px 14px !important;
    gap: 10px !important;
  }

  .portal-search {
    display: none !important;
  }

  /* Public home (base.html) */
  .hero-nav {
    padding: 12px 14px !important;
  }

  .hero-links {
    gap: 10px !important;
    font-size: 10px !important;
  }

  .mega-menu {
    width: 92vw !important;
    left: 50% !important;
    transform: translate(-50%, 10px) !important;
  }
}

@media (max-width: 360px) {
  body {
    font-size: 9px;
  }
}