/* Responsive overrides for 1024x600 screens */
@media screen and (max-width: 1024px), screen and (max-height: 600px) {
  html, body {
    min-height: 100%;
    height: auto !important;
    font-size: 14px !important;
  }

  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body[class*="h-[1024px]"] {
    height: auto !important;
  }

  .w-screen {
    width: 100vw !important;
  }

  .h-full,
  .min-h-full,
  .min-h-0,
  .h-[1024px] {
    height: auto !important;
    min-height: 0 !important;
  }

  .w-24,
  nav.fixed.left-0 {
    width: 5.5rem !important;
  }

  .h-16 {
    height: 3rem !important;
  }

  .text-4xl {
    font-size: 1.75rem !important;
    line-height: 2.1rem !important;
  }

  .text-2xl {
    font-size: 1.25rem !important;
    line-height: 1.6rem !important;
  }

  .text-display-lg {
    font-size: 1.9rem !important;
    line-height: 2.3rem !important;
  }

  .text-display-md {
    font-size: 1.35rem !important;
    line-height: 1.75rem !important;
  }

  .text-body,
  .text-data-md,
  .text-label-caps,
  .text-on-surface,
  .text-on-surface-variant,
  .text-primary,
  .text-primary-fixed,
  .font-label-caps {
    font-size: 0.85rem !important;
    line-height: 1.2rem !important;
  }

  .font-label-caps {
    letter-spacing: 0.12em !important;
  }

  .p-panel-padding,
  .p-margin,
  .p-2,
  .p-4,
  .p-6,
  .p-8,
  .px-4,
  .py-3,
  .py-4,
  .px-6 {
    padding: 0.6rem !important;
  }

  .gap-gutter,
  .gap-4,
  .gap-6,
  .gap-8,
  .gap-2,
  .gap-1 {
    gap: 0.75rem !important;
  }

  .mb-gutter,
  .mb-8,
  .mt-8,
  .mb-4,
  .mt-4 {
    margin: 0.75rem !important;
  }

  .border-r-4 {
    border-right-width: 2px !important;
  }

  .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }

  .glass-panel {
    padding: 0.85rem !important;
  }

  .glass-panel::before {
    width: 6px !important;
    height: 1px !important;
  }

  .glass-panel::after {
    width: 1px !important;
    height: 6px !important;
  }

  .progress-bar-container {
    height: 6px !important;
  }

  .hud-scanline {
    height: 1px !important;
  }

  .scanline-bar {
    height: 2px !important;
  }

  .scanline {
    height: 60px !important;
  }

  .bg-hex-grid {
    background-size: cover, 28px 48px !important;
  }

  .bg-hex-pattern,
  .hex-bg {
    background-size: 24px 24px !important;
  }

  .toggle-switch {
    width: 40px !important;
    height: 20px !important;
  }

  .toggle-switch::after {
    width: 14px !important;
    height: 14px !important;
    left: 2px !important;
  }

  .toggle-switch.active::after {
    left: 24px !important;
  }

  .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20 !important;
  }

  .material-symbols-outlined.text-2xl {
    font-size: 1.1rem !important;
  }

  .material-symbols-outlined.text-4xl {
    font-size: 1.5rem !important;
  }

  .progress-bar-fill,
  .tech-progress-fill {
    box-shadow: 0 0 6px rgba(0, 219, 231, 0.4) !important;
  }

  .glass-panel,
  nav.fixed.left-0,
  .relay-btn,
  .toggle-switch,
  button {
    max-width: 100% !important;
  }
}