/* ══════════════════════════════════════════════════════════════════════
   CapEye — Shared Mobile / Responsive Layer
   Loaded on every page AFTER the page's own <style> so these rules win.
   DESKTOP IS UNTOUCHED: every rule is inside @media (max-width:768px).
   ═══════════════════════════════════════════════════════════════════════ */
.ce-hamburger { display: none; }
.ce-nav-overlay { display: none; }

@media (max-width: 768px) {
  html, body { max-width: 100% !important; overflow-x: hidden !important; }
  .shell, .main, nav.nav, .nav { max-width: 100% !important; }
  .main { padding: 12px 12px !important; }

  .ce-hamburger {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-right: 4px;
    background: transparent; border: none; color: #0B1120;
    font-size: 20px; cursor: pointer; flex-shrink: 0;
  }
  .nav-div { display: none !important; }
  nav .nav-links { display: none !important; }

  .ce-nav-overlay {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(11,17,32,.97); padding: 70px 18px 24px; overflow-y: auto;
  }
  .ce-nav-overlay.ce-show { display: block; }
  .ce-nav-overlay .ce-nav-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 460px; margin: 0 auto;
  }
  .ce-nav-overlay a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 20px 10px; border-radius: 14px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; text-align: center;
    min-height: 90px;
  }
  .ce-nav-overlay a i { font-size: 24px; opacity: .9; }
  .ce-nav-overlay a.active { background: rgba(200,16,46,.30); border-color: rgba(200,16,46,.6); }
  .ce-nav-close {
    position: fixed; top: 16px; right: 18px; z-index: 4001;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 20px; cursor: pointer;
  }
  .ce-nav-title { color: #fff; text-align: center; font-weight: 700; margin-bottom: 18px; font-size: 16px; }

  .nav-right { gap: 6px !important; margin-left: auto !important; }
  .nav-user { font-size: 12px !important; }
  .nav-bell { flex-shrink: 0; }

  .welcome, .welcome-bar { flex-direction: column !important; align-items: flex-start !important;
                           gap: 10px !important; padding: 18px 16px !important; }
  .welcome-right { align-items: flex-start !important; }

  .shell, .two-col, .layout { grid-template-columns: 1fr !important; }
  .shell { height: auto !important; overflow-x: hidden !important; }
  .bar-row { grid-template-columns: 90px 1fr auto !important; }

  [style*="grid-template-columns:320px 1fr"],
  [style*="grid-template-columns: 320px 1fr"],
  [style*="grid-template-columns:320px"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr 1fr auto"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(5, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"],
  [style*="grid-template-columns:1fr auto"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .photo-grid { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-row:span 2"] { grid-row: auto !important; }

  .kpi-row, .quick-links, .kpi-strip {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; gap: 8px !important;
  }
  .vi-grid       { grid-template-columns: 1fr !important; gap: 10px !important; }
  .selector-row  { grid-template-columns: 1fr !important; gap: 10px !important; }
  .form-grid     { grid-template-columns: 1fr !important; }

  .stage-actions, .form-actions, .action-bar { flex-wrap: wrap !important; gap: 8px !important; }
  .stage-actions .btn, .form-actions .btn, .complete-stage-btn {
    flex: 1 1 auto !important; min-width: 44%; justify-content: center;
  }

  .modal, .modal-card, .modal-box, .modal-bg > * {
    width: 94vw !important; max-width: 94vw !important;
    max-height: 88vh !important; overflow-y: auto !important;
  }
  .table-wrap, .scroll-x { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .btn, button, select, input, textarea { font-size: 15px !important; }
  select, input, textarea { min-height: 40px; }
}

@media (max-width: 480px) {
  .kpi-row, .quick-links, .kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .welcome h1, .welcome-bar h1 { font-size: 20px !important; }
  .card { padding: 14px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   DESKTOP / TABLET NAV FIX (769px and up)
   Stops the top nav overflowing: "Admin" being cut off and the HPI/
   Website/Finance badges running off the right edge on laptop widths.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* Let the links take the flexible middle space and scroll within it,
     instead of being the single shrinkable child that clips its own tail. */
  nav.nav .nav-links { flex: 1 1 auto !important; min-width: 0 !important; }
  /* Keep the right-hand cluster from being pinned hard to the edge. */
  nav.nav .nav-right { margin-left: 8px !important; }
  /* Style the HPI / Website / Finance tool badges consistently on the
     pages that render them without their own CSS, so they don't run
     together or add uncontrolled width. */
  nav.nav .nav-tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  nav.nav .nav-tool {
    font-size: 11px; font-weight: 600; white-space: nowrap;
    padding: 4px 8px; border-radius: 6px; text-decoration: none;
    color: #003DA5; background: rgba(0,61,213,.08);
  }
  nav.nav .nav-tool:hover { background: rgba(0,61,213,.16); }
  /* Tighten link padding slightly so all 14 fit more often before scrolling. */
  nav.nav .nav-link { padding: 5px 8px !important; }
}