/* Hetzner Dashboard — Mobile responsive fixes */

/* ===== HAMBURGER BUTTON (hidden by default, shown on mobile/tablet) ===== */
.hamburger-btn {
  display: none !important;
}

/* ===== NARROW DESKTOP (< 900px) — prevent text overlap ===== */
@media (max-width: 900px) {
  /* Compact nav link text */
  .h-\[60px\] nav a,
  .h-\[60px\] nav button,
  #standalone-navbar nav a,
  #standalone-navbar nav button {
    font-size: 0.75rem !important;
    padding: 4px 6px !important;
  }
  /* Hide nav icons to save space */
  .h-\[60px\] nav a svg,
  .h-\[60px\] nav button svg,
  #standalone-navbar nav a svg,
  #standalone-navbar nav button svg {
    display: none !important;
  }
  /* Right side controls: compact */
  .h-\[60px\] > .flex.items-center.gap-6:last-child {
    gap: 4px !important;
  }
}

/* ===== MOBILE + TABLET (< 768px) — hamburger menu ===== */
@media (max-width: 768px) {
  /* Show hamburger button */
  .hamburger-btn {
    display: flex !important;
  }
  /* Hide desktop nav links — hamburger replaces them */
  [data-nav-desktop] {
    display: none !important;
  }
  /* Hide right-side controls (lang, font, logout) — they're in hamburger */
  .h-\[60px\] > .flex.items-center.gap-6:last-child {
    display: none !important;
  }
  #standalone-navbar > div:last-child {
    display: none !important;
  }
}

/* ===== 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;
  }

  /* 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;
    justify-content: space-between !important;
  }

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

  /* Standalone navbar (custom routes) */
  #standalone-navbar {
    height: auto !important;
    min-height: 44px !important;
    padding: 6px 10px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }
  #standalone-navbar > div:first-child {
    justify-content: space-between !important;
    width: 100% !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;
  }

  /* --- Kuormitus-osion 5-col grid → 2+3 mobiilissa --- */
  .sm\:grid-cols-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- MONITOROINTI PAGE --- */
  #monitorointi-root [style*="grid-template-columns: 1fr 1fr"],
  #monitorointi-root [style*="grid-template-columns:1fr 1fr"],
  #monitorointi-root [style*="repeat(4"] {
    grid-template-columns: 1fr !important;
  }
  #monitorointi-root canvas {
    height: 140px !important;
  }
  #monitorointi-root #log-output {
    max-height: 300px !important;
    font-size: 0.65rem !important;
  }

  /* --- Briefing card: 5-col → 2 cols --- */
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Metric charts smaller on mobile */
  #chart-cpu, #chart-ram, #chart-disk, #chart-volume {
    height: 40px !important;
  }
}

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

  /* 5-col grid → 3 cols (Kuormitus wraps nicely) */
  .sm\:grid-cols-5 {
    grid-template-columns: repeat(3, 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;
  }

  /* Briefing 5-col → 3 cols */
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(3, 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;
  }
}