/* =============================================================
   pwa.css – Nayfinix PWA Standalone Mode Polish
   Applied on every page; handles phone web app + desktop app.
   ============================================================= */

/* ── 1. Safe-area / notch padding (iPhone Dynamic Island, Android) ─── */
:root {
  --sat: env(safe-area-inset-top,    0px);
  --sar: env(safe-area-inset-right,  0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
}

/* ── 2. Smoother, app-like defaults ─────────────────────────────────── */
html {
  -webkit-tap-highlight-color: transparent;  /* remove grey flash on tap */
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent pull-to-refresh when scrolling content (feels more app-like) */
body {
  overscroll-behavior-y: contain;
}

/* Smooth scrolling everywhere */
html, body, .main-content, .sidebar {
  scroll-behavior: smooth;
}

/* No text selection on UI chrome (nav, buttons) – feels native */
.sidebar, .topbar, .tabs-container, .mobile-menu-btn,
.tab-btn, .btn, .logout-btn, .share-btn {
  -webkit-user-select: none;
  user-select: none;
}

/* Better touch response on buttons */
button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── 3. STANDALONE mode (installed phone web app / desktop app) ───────
   Only active when launched from home screen icon or desktop shortcut.
   Regular website visits are NOT affected.
   ─────────────────────────────────────────────────────────────────── */
@media (display-mode: standalone) {

  /* Push content below the phone status bar / notch */
  .topbar,
  .sidebar {
    padding-top: max(8px, var(--sat));
  }

  /* Sidebar height covers full screen incl. insets */
  .sidebar {
    height: calc(100vh + var(--sat));
    top: calc(-1 * var(--sat));
    padding-top: calc(20px + var(--sat));
  }

  /* Bottom nav / bottom safe area (home indicator on iPhone) */
  body {
    padding-bottom: var(--sab);
  }

  /* Left/right safe areas (landscape notch) */
  .content {
    padding-left: var(--sal);
    padding-right: var(--sar);
  }

  /* Mobile menu button: push below notch */
  .mobile-menu-btn {
    top: calc(10px + var(--sat));
  }

  /* Frosted glass topbar — premium look in standalone */
  .topbar {
    background: rgba(13, 27, 42, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 212, 255, 0.15);
  }

  /* Sidebar frosted glass */
  .sidebar {
    background: rgba(10, 20, 35, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(0, 212, 255, 0.1);
  }

  /* Highlight active sidebar link more prominently in app mode */
  .sidebar a.active,
  .sidebar a:focus {
    background: rgba(0, 212, 255, 0.15);
    border-left: 3px solid #00d4ff;
    color: #00d4ff;
  }

  /* Cards get a subtle glow border in app mode */
  .settings-section,
  .summary-card,
  .panel {
    border: 1px solid rgba(0, 212, 255, 0.08);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
  }

  /* Tabs bottom border – cyan glow */
  .tabs-container {
    border-bottom: 1px solid rgba(0, 212, 255, 0.12);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* Active tab glowing underline */
  .tab-btn.active {
    color: #00d4ff;
    border-bottom: 3px solid #00d4ff;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
  }

  /* Buttons — slightly more padding for touch targets */
  .btn {
    min-height: 44px;
    padding: 10px 20px;
  }

  /* Logout / topbar buttons */
  .logout-btn {
    min-height: 40px;
  }
}

/* ── 4. WINDOW-CONTROLS-OVERLAY (desktop PWA title-bar) ─────────────
   Applies only on desktop Chrome/Edge when installed as a desktop app.
   Makes the topbar act as a native draggable title bar.
   ─────────────────────────────────────────────────────────────────── */
@media (display-mode: window-controls-overlay) {

  /* Reserve space for native window title bar */
  :root {
    --wco-top:    env(titlebar-area-y,      0px);
    --wco-height: env(titlebar-area-height, 33px);
    --wco-left:   env(titlebar-area-x,      0px);
    --wco-width:  env(titlebar-area-width,  100%);
  }

  body {
    /* Push everything below the title bar */
    padding-top: calc(var(--wco-top) + var(--wco-height));
  }

  /* Topbar becomes part of the OS title bar — make it draggable */
  .topbar {
    position: fixed;
    top: var(--wco-top);
    left: var(--wco-left);
    width: var(--wco-width);
    height: var(--wco-height);
    padding: 0 16px;
    display: flex;
    align-items: center;
    z-index: 9999;
    background: rgba(13, 27, 42, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    /* Allow dragging the window by the topbar */
    -webkit-app-region: drag;
  }

  /* Buttons inside topbar must NOT be draggable */
  .topbar button,
  .topbar a,
  .topbar input,
  .topbar select {
    -webkit-app-region: no-drag;
  }

  /* Sidebar also fixed; starts below title bar */
  .sidebar {
    top: calc(var(--wco-top) + var(--wco-height));
    height: calc(100vh - var(--wco-top) - var(--wco-height));
  }

  /* Content starts below the title bar */
  .content {
    margin-top: 0;
    padding-top: 0;
  }

  /* Premium title-bar branding */
  .topbar h2,
  .topbar h1 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.9);
    opacity: 1;
  }
}

/* ── 5. iOS / Safari standalone specific tweaks ──────────────────── */
/* iOS standalone: status bar is overlaid on top of page */
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) {
    .topbar {
      padding-top: max(16px, env(safe-area-inset-top));
      height: auto;
      min-height: calc(52px + env(safe-area-inset-top));
    }

    .sidebar {
      padding-top: calc(16px + env(safe-area-inset-top));
    }

    .mobile-menu-btn {
      top: calc(12px + env(safe-area-inset-top));
    }
  }
}

/* ── 6. Scrollbars — thinner and styled for app feel ──────────────── */
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.3);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.6);
  }
}

/* ── 7. Loading / transition polish for install & splash ───────────── */
@keyframes nfxFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pwa-install-section {
  animation: nfxFadeIn 0.5s ease 0.1s both;
}

/* Pulse glow on the install button to draw attention */
@keyframes nfxPulseGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3); }
  50%       { box-shadow: 0 4px 32px rgba(0, 212, 255, 0.6), 0 0 0 4px rgba(0, 212, 255, 0.08); }
}

#installPwaBtn {
  animation: nfxPulseGlow 2.5s ease-in-out infinite;
}