/* Hetzner Dashboard — Mobile responsive fixes */

/* ===== MOBILE (< 640px) ===== */
@media (max-width: 640px) {

  /* Prevent horizontal overflow globally */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* --- NAVBAR --- */
  .h-\[60px\] {
    height: auto !important;
    min-height: 48px !important;
    flex-wrap: nowrap !important;
    padding: 6px 10px !important;
    gap: 4px !important;
  }

  /* Hide server info on mobile */
  .h-\[60px\] > .flex.items-center.gap-6:last-child {
    display: none !important;
  }

  /* Title + nav — compact, no wrap */
  .h-\[60px\] > .flex.items-center.gap-6:first-child {
    gap: 6px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }

  /* Dashboard title — shorter */
  .h-\[60px\] .text-lg {
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Nav links — horizontal scroll, single row */
  .h-\[60px\] nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 1;
    min-width: 0;
    scrollbar-width: none;
    gap: 2px !important;
  }
  .h-\[60px\] nav::-webkit-scrollbar {
    display: none;
  }
  .h-\[60px\] nav a,
  .h-\[60px\] nav button,
  .h-\[60px\] nav [data-palvelut-dropdown],
  .h-\[60px\] nav [data-claude-dropdown] {
    font-size: 0.7rem !important;
    padding: 4px 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  /* Hide icons in nav links on mobile to save space */
  .h-\[60px\] nav a svg,
  .h-\[60px\] nav button svg {
    display: none !important;
  }

  /* Standalone navbar (custom routes) */
  #standalone-navbar {
    height: auto !important;
    min-height: 44px !important;
    padding: 6px 10px !important;
    flex-wrap: nowrap !important;
  }
  #standalone-navbar a {
    font-size: 0.7rem !important;
    padding: 4px 6px !important;
    white-space: nowrap !important;
  }
  #standalone-navbar svg {
    display: none !important;
  }

  /* --- MAIN CONTENT --- */
  /* p-6 space-y-6 → reduced padding */
  .p-6 {
    padding: 0.75rem !important;
  }
  .space-y-6 > :not(:last-child) {
    margin-bottom: 0.75rem !important;
  }

  /* --- GRIDS → single column --- */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5 {
    grid-template-columns: 1fr !important;
  }

  /* col-span → full width in single column */
  .col-span-2,
  .col-span-3 {
    grid-column: span 1 / span 1 !important;
  }

  /* Reduce grid gaps */
  .gap-8 { gap: 0.75rem !important; }
  .gap-6 { gap: 0.75rem !important; }
  .gap-4 { gap: 0.5rem !important; }

  /* --- CARDS --- */
  .p-4 {
    padding: 0.625rem !important;
  }
  .p-3 {
    padding: 0.5rem !important;
  }
  .px-6 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .px-3 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* --- TYPOGRAPHY --- */
  .text-5xl {
    font-size: 2rem !important;
    line-height: 1.1 !important;
  }
  .text-2xl {
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
  }
  .text-xl {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }

  /* --- STATUS BAR at bottom --- */
  /* h-[50px] border-t flex items-center justify-center gap-8 */
  .h-\[50px\] {
    height: auto !important;
    min-height: 40px !important;
    flex-wrap: wrap !important;
    padding: 8px 12px !important;
    gap: 8px 12px !important;
    justify-content: flex-start !important;
  }

  /* --- TABLES --- */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.75rem;
  }

  /* --- FLEX CONTAINERS — wrap only in card content, not navbars --- */
  .p-4 > .flex.items-center,
  .p-3 > .flex.items-center {
    flex-wrap: wrap;
  }

  /* Fail2ban stats grid */
  .grid-cols-3.gap-4.text-center {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.25rem !important;
  }

  /* Network flow diagram: Internet → Caddy → ports */
  .flex.items-center.justify-center.gap-3 {
    font-size: 0.75rem !important;
  }

  /* Security score and progress bars */
  .h-\[18px\] {
    width: 100% !important;
  }

  /* max-w containers */
  .max-w-7xl {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* SVG donut charts — smaller on mobile (only large ones, not icons) */
  svg[width="200"], svg[width="180"], svg[viewBox="0 0 200 200"] {
    max-width: 120px !important;
    max-height: 120px !important;
    margin: 0 auto;
  }
  /* Generic fallback for large SVGs in chart containers */
  .relative > svg:only-child {
    max-width: 140px !important;
    max-height: 140px !important;
  }

  /* Fixed width overrides */
  .w-\[500px\] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ===== TABLET (641–1024px) ===== */
@media (min-width: 641px) and (max-width: 1024px) {

  /* 5-col grid → 1 col (Network/Firewall stack) */
  .grid-cols-5 {
    grid-template-columns: 1fr !important;
  }
  .col-span-3,
  .col-span-2 {
    grid-column: span 1 / span 1 !important;
  }

  /* 3-col grid → 2 cols */
  .grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Reduce padding slightly */
  .p-6 { padding: 1rem !important; }
  .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .gap-6 { gap: 1rem !important; }

  /* Navbar info — hide less critical items */
  .h-\[60px\] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .w-\[500px\] {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* ===== iOS SAFE AREA (Dynamic Island, notch, home indicator) ===== */
@supports (padding-top: env(safe-area-inset-top)) {
  /* Navbar — push below Dynamic Island / notch */
  .h-\[60px\] {
    padding-top: calc(env(safe-area-inset-top) + 8px) !important;
    padding-left: calc(env(safe-area-inset-left) + 12px) !important;
    padding-right: calc(env(safe-area-inset-right) + 12px) !important;
  }

  /* Bottom status bar — above home indicator */
  .h-\[50px\] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 8px) !important;
    padding-left: calc(env(safe-area-inset-left) + 12px) !important;
    padding-right: calc(env(safe-area-inset-right) + 12px) !important;
  }

  /* Main content — respect side insets in landscape */
  .p-6 {
    padding-left: calc(env(safe-area-inset-left) + 0.75rem) !important;
    padding-right: calc(env(safe-area-inset-right) + 0.75rem) !important;
  }
}

/* Body background for PWA safe area fill */
@media (display-mode: standalone) {
  html {
    background-color: #0f172a;
  }
  body {
    background-color: #0f172a;
  }
}