/**
 * ITSM Monitoring — cross-browser & mobile compatibility
 * Chrome, Firefox, Safari, Edge (current + recent versions)
 */

/* --- Document & overflow --- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

html,
body {
  overflow-x: clip;
  overflow-x: hidden; /* fallback */
}

/* --- Safe areas (notched phones) --- */
@supports (padding: env(safe-area-inset-top)) {
  body.has-safe-area {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

.app-safe-header {
  padding-top: env(safe-area-inset-top, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

.app-safe-content {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* --- Media & embeds --- */
img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

/* Decorative / brand logos control their own dimensions */
img.navbar-logo-img,
img.footer-brand-logo,
img.footer-marquee__logo {
  max-width: none;
}

iframe {
  max-width: 100%;
}

/* --- Tables on small screens --- */
.table-responsive {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}

@media (max-width: 767.98px) {
  .table td,
  .table th {
    white-space: normal;
    word-break: break-word;
  }

  .table-responsive .table {
    min-width: 520px;
  }
}

/* --- Forms: prevent iOS zoom on focus --- */
@media (max-width: 767.98px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* --- Touch targets --- */
@media (max-width: 991.98px) {
  .btn,
  .nav-link,
  .page-link,
  a.sidebar-nav-toggle {
    min-height: 44px;
  }

  .btn-sm,
  .btn-group-sm > .btn {
    min-height: 36px;
  }
}

/* --- Flex/grid fallbacks --- */
.d-flex,
.row {
  min-width: 0;
}

[class*="col-"] {
  min-width: 0;
}

/* --- Cards & containers --- */
.container,
.container-fluid {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 575.98px) {
  .card-body {
    padding: 1rem;
  }
}

/* --- Plotly / chart / map containers --- */
.chart-container,
.map-container,
.vis-network-wrap,
#network-topology,
.leaflet-container,
.dash-app-container {
  width: 100%;
  max-width: 100%;
  min-height: 280px;
}

@media (max-width: 767.98px) {
  .chart-container,
  .map-container,
  .vis-network-wrap,
  #network-topology,
  #nl-topology-container,
  #devicesMap,
  .leaflet-map-panel,
  .leaflet-container {
    min-height: 240px;
    height: min(70vh, 520px) !important;
  }

  #nl-topology-container {
    height: min(360px, 58vh) !important;
  }
}

/* --- Responsive iframe (dashboard embeds) --- */
.dash-iframe-responsive {
  width: 100%;
  border: 0;
  display: block;
  height: clamp(420px, 72vh, 960px);
  min-height: 360px;
}

.dash-app-container-responsive {
  min-height: clamp(420px, 72vh, 960px);
  overflow: hidden;
}

/* --- Backdrop blur (Safari) --- */
.glass-blur,
.navbar.glass-blur {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* --- Infrastructure pagination --- */
.asset-pagination-wrapper {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 767.98px) {
  .asset-pagination-wrapper {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.75rem;
  }

  .asset-pagination-wrapper .asset-pagination-spacer {
    display: none;
  }

  .asset-pagination-wrapper .asset-pagination-meta {
    order: 1;
  }

  .asset-pagination-wrapper nav.asset-pagination {
    order: 2;
    justify-self: center;
  }

  .infra-hero-actions {
    flex-direction: column;
    align-items: stretch !important;
  }

  .infra-hero-actions .btn {
    width: 100%;
  }
}

/* --- Hero action rows --- */
.hero-pills,
.infra-hero-actions {
  flex-wrap: wrap;
}

/* --- Marketing / public page helpers --- */
.public-page {
  overflow-x: hidden;
  max-width: 100vw;
}

.public-page img,
.public-page video {
  height: auto;
}

/* --- Threat map layout --- */
.threatmap-page {
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}

@media (max-width: 1100px) {
  .threatmap-page {
    overflow-y: auto;
    height: auto;
  }

  .threatmap-page .page {
    height: auto;
    min-height: calc(100dvh - 64px);
  }
}

/* --- Print --- */
@media print {
  .sidebar,
  .header,
  .menu-toggle,
  .sidebar-overlay,
  .navbar {
    display: none !important;
  }

  .content {
    margin: 0 !important;
    padding: 0 !important;
  }
}