/* ==========================================================================
   CYBERVIS — Mobile App Shell
   Shared polish that makes the site + dashboards feel native on phones.
   Safe to include on every page; most rules only fire on mobile viewports
   or when display-mode is standalone (installed PWA).
   ========================================================================== */

/* --- Safe-area + viewport-fit + smooth scroll ---------------------------- */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --bottom-nav-height: 64px;
  --app-accent: #6C3CE1;
}

html { -webkit-text-size-adjust: 100%; }

body {
  /* Prevent iOS bounce blank area above/below on installed PWA */
  overscroll-behavior-y: contain;
}

/* --- Kill tap highlight + 300ms delay on mobile -------------------------- */
a, button, [role="button"], .cv-nav-item, .mobile-bottom-nav__item {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* --- Visually-hidden helper for screen-reader-only content --------------- */
.cv-sr-only,
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Global keyboard focus indicator (WCAG 2.4.7) ------------------------ */
/* Many components use outline:none; this restores a visible focus ring for
   keyboard users without affecting mouse users (:focus-visible). */
:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Inputs already get a coloured border on focus; suppress the offset ring
   only when the element provides its own visible focus styling. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 0;
}

/* --- Prevent iOS zoom-on-focus for form inputs --------------------------- */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  /* Minimum 44px tap targets on touch nav elements */
  .btn, .cv-btn, .cv-nav-item, button.cv-sidebar-collapse, a.nav-link {
    min-height: 44px;
  }
}

/* --- Standalone/installed PWA styling ------------------------------------ */
@media (display-mode: standalone) {
  /* Push content below iOS status bar when in standalone */
  body {
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }
  /* Hide “external browser” chrome the user would never see anyway */
  .pwa-hide-when-installed { display: none !important; }
}

/* --- Smooth native-feeling scroll on mobile ------------------------------ */
@media (max-width: 1024px) {
  html, body {
    -webkit-overflow-scrolling: touch;
  }
}

/* --- View Transitions (Chrome/Edge/Safari 18+) --------------------------- */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: 180ms ease-out both fade-out, 220ms cubic-bezier(.2,.8,.2,1) both slide-out;
}
::view-transition-new(root) {
  animation: 220ms ease-in both fade-in, 260ms cubic-bezier(.2,.8,.2,1) both slide-in;
}
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes slide-out { to { transform: translateX(-2%); } }
@keyframes slide-in { from { transform: translateX(2%); } }

/* ==========================================================================
   Install banner (shows once, on mobile, when install prompt is available)
   ========================================================================== */
.pwa-install-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + var(--safe-bottom));
  z-index: 9999;
  background: #1A1A2E;
  color: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  display: none;
  align-items: center;
  gap: 12px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.5);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
}
.pwa-install-banner.is-visible { display: flex; }
.pwa-install-banner__icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, #6C3CE1, #8b5cf6);
  display: grid; place-items: center; flex-shrink: 0;
  color: #fff; font-weight: 700;
}
.pwa-install-banner__text {
  flex: 1; font-size: 13px; line-height: 1.35;
}
.pwa-install-banner__text strong { display: block; font-size: 14px; margin-bottom: 2px; }
.pwa-install-banner__text small { opacity: 0.7; }
.pwa-install-banner__btn {
  background: #FF6B2B; color: #fff; border: 0;
  padding: 10px 14px; border-radius: 10px;
  font-weight: 600; font-size: 13px;
  min-height: 40px; cursor: pointer;
}
.pwa-install-banner__close {
  background: transparent; border: 0; color: #fff; opacity: 0.6;
  font-size: 18px; cursor: pointer; padding: 4px 6px;
}

/* ==========================================================================
   Mobile bottom tab bar (dashboards)
   Shown only on mobile; desktop keeps its existing sidebar.
   ========================================================================== */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .mobile-bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: rgba(255,255,255,0.96);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-bottom: var(--safe-bottom);
    height: calc(var(--bottom-nav-height) + var(--safe-bottom));
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  }
  .mobile-bottom-nav--dark {
    background: rgba(26,26,46,0.92);
    border-top-color: rgba(255,255,255,0.08);
  }
  .mobile-bottom-nav__item {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    background: transparent; border: 0;
    color: #6B6B6B;
    font-size: 10px; font-weight: 600;
    padding: 6px 4px;
    cursor: pointer;
    min-height: 44px;
    text-decoration: none;
    transition: color 120ms ease, transform 120ms ease;
  }
  .mobile-bottom-nav--dark .mobile-bottom-nav__item { color: rgba(255,255,255,0.6); }
  .mobile-bottom-nav__item i { font-size: 18px; }
  .mobile-bottom-nav__item.is-active {
    color: var(--app-accent);
  }
  .mobile-bottom-nav--dark .mobile-bottom-nav__item.is-active { color: #a78bfa; }
  .mobile-bottom-nav__item:active { transform: scale(0.94); }

  /* Give content room above the bar so nothing is hidden behind it. */
  body.has-mobile-bottom-nav {
    padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 8px);
  }
}

/* ==========================================================================
   Dashboard-specific mobile polish (applies to admin + portal shells)
   ========================================================================== */
@media (max-width: 768px) {
  /* Hide the desktop sidebar on mobile; bottom nav replaces it */
  .cv-sidebar { display: none !important; }
  .cv-app { grid-template-columns: 1fr !important; }
  .cv-main { margin-left: 0 !important; }

  /* Topbar must grow to clear the status bar / dynamic island, otherwise
     the hamburger / theme / bell buttons sit inside the padding zone where
     iOS won't deliver taps. Switch from a fixed 56px height to a min-height
     that includes the safe-area inset, then push content down with padding. */
  .cv-topbar {
    height: auto !important;
    min-height: calc(56px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Bigger tap targets for the topbar buttons on touch (Apple HIG: 44x44) */
  .cv-topbar-hamburger,
  .cv-topbar-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Float the AI assistant ("CyberVis Bot") above the bottom nav AND clear
     the iPhone home-indicator. Without env(safe-area-inset-bottom) the FAB
     sits inside the bottom nav and either gets covered or competes for taps. */
  .cv-ai-fab {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 480px) {
  .cv-ai-fab {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ==========================================================================
   Closed-overlay safety sweep (mobile)
   ─────────────────────────────────────
   Multiple fixed full-viewport elements in this codebase use only
   `opacity: 0` + `pointer-events: none` to "hide" themselves while keeping
   `display: flex`. On iOS Safari + several Android Chrome builds these
   still capture taps over the whole viewport, blocking every dashboard
   button underneath. Force `display: none` when closed so the element is
   truly out of the layout and nothing it contains can intercept taps.
   ========================================================================== */
@media (max-width: 1024px) {
    .cv-mobile-menu:not(.open),
    .cv-modal-overlay:not(.active),
    .cv-ai-panel:not(.open),
    .cv-sidebar-overlay:not(.active),
    .cv-loading.hidden {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    .cv-mobile-menu.open {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .cv-modal-overlay.active {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .cv-ai-panel.open {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* ==========================================================================
   Portal & dashboard mobile polish — page-level layout, modals, tables
   ========================================================================== */
@media (max-width: 768px) {
  /* Page headers: stack title block + actions vertically */
  .cv-page-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }
  .cv-page-header > div:last-child:not(:only-child) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .cv-page-header > div:last-child:not(:only-child) .cv-btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }
  .cv-page-title {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  .cv-page-sub {
    font-size: 13px !important;
  }

  /* Cards: tighten padding for more content room */
  .cv-card-body { padding: 14px !important; }
  .cv-card-header { padding: 12px 14px !important; }

  /* Stat grids collapse to two columns */
  .cv-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .cv-stat { padding: 12px !important; }

  /* Two-column form grids stack */
  .cv-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Filters wrap & each pill expands */
  .cv-filters {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .cv-filters .cv-btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }

  /* Modals: edge-to-edge full-screen with proper safe-area.
     Scoped to .active so closed modals can never affect layout/clicks. */
  .cv-modal-overlay.active {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .cv-modal-overlay.active .cv-modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100vh !important;
    height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
  }
  .cv-modal-overlay.active .cv-modal-header {
    padding: 14px 16px !important;
    padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
  }
  .cv-modal-overlay.active .cv-modal-body {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Pentest cards: single column on mobile */
  .cv-pentest-grid {
    grid-template-columns: 1fr !important;
  }

  /* Hide desktop grid rows in admin pentest list, show mobile cards */
  .cv-desktop-rows { display: none !important; }
  .cv-mobile-cards { display: flex !important; flex-direction: column; gap: 10px; }

  /* Topbar tightens up */
  .cv-topbar-title {
    font-size: 16px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }
}

/* Even smaller phones */
@media (max-width: 380px) {
  .cv-page-title { font-size: 20px !important; }
  .cv-stats { grid-template-columns: 1fr !important; }
  .cv-mobile-menu-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ==========================================================================
   Pull-to-refresh style hint (visual only; behaviour left to browsers)
   ========================================================================== */
@media (max-width: 768px) {
  body { overscroll-behavior-y: contain; }
}

/* ==========================================================================
   Reduced motion respect
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
  * { scroll-behavior: auto !important; }
}