/* ====================================================================
   VipRix — site-wide responsive polish.
   Layered AFTER all page-specific stylesheets so it can adjust mobile
   layout without touching the page CSS files.
   ==================================================================== */

/* ==== Tablet breakpoint ==== */
@media (max-width: 991px) {
  .viprix-top-bar { padding: 0 1rem !important; }
  .viprix-top-bar .top-bar-home { font-size: 0.9rem; padding: 5px 14px; }

  /* Footer wraps */
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }

  /* Dashboard layout */
  .sidebar { transform: translateX(-100%); transition: transform .3s ease; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0 !important; padding: 1rem !important; }

  /* Customer portal stats */
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; }

  /* Hide sidebar logo text on small screens */
  .sidebar-logo span { display: none; }
}

/* ==== Mobile breakpoint ==== */
@media (max-width: 767px) {
  /* Top bar — keep "Home" centered, toggle on right, no overlap */
  .viprix-top-bar { height: 52px; padding: 0 .8rem !important; }
  .viprix-top-bar .top-bar-home { font-size: 0.85rem; padding: 4px 12px; }
  body { padding-top: 52px !important; }

  /* Header (index) becomes full-width with stacked nav */
  .header .container { flex-wrap: wrap; }
  .nav-links { gap: 14px !important; }
  .nav-links a { font-size: .8rem !important; }

  /* Hero */
  .hero { min-height: auto !important; padding-top: 100px !important; padding-bottom: 60px !important; }
  .hero-title { font-size: clamp(1.7rem, 7vw, 2.4rem) !important; }
  .hero-description { font-size: .95rem !important; }
  .hero-buttons { flex-direction: column; gap: 10px; }
  .hero-buttons .btn { width: 100%; justify-content: center; }
  .hero-stats { flex-wrap: wrap; gap: 16px !important; }
  .hero-visual { display: none !important; }

  /* Sections */
  .container { padding-left: 1rem !important; padding-right: 1rem !important; }
  .section-title { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  .section-subtitle { font-size: .92rem !important; }

  /* Services slider already responsive at 991/575 */
  .services-slider { padding: 24px 0 !important; gap: 24px !important; }
  .slider-text-wrap { padding: 0 16px !important; }

  /* Why-Us / Portfolio / Testimonials grids stack */
  .why-us-content,
  .portfolio-grid,
  .testimonials-grid,
  .contact-content { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Contact card list */
  .contact-info-list { gap: 14px !important; }

  /* Customer portal stats single column */
  .stats-row { grid-template-columns: 1fr !important; }

  /* Auth */
  .auth-container { padding: 1rem !important; }
  .auth-card { padding: 1.5rem !important; }
  .auth-form h2 { font-size: 1.3rem !important; }
  .field-row { grid-template-columns: 1fr !important; }
  .auth-tabs { flex-direction: row; }
  .auth-logo span { font-size: 1.2rem !important; }

  /* Dashboard / Employee tables — horizontal scroll wrappers */
  .table-wrap, .quotes-table, .data-table, table.responsive {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  /* Topbar stacks */
  .topbar, .topbar-main { flex-wrap: wrap; gap: 10px; padding: .8rem 1rem !important; }

  /* Footer bottom links stack */
  .footer-bottom-links { gap: 14px; flex-wrap: wrap; justify-content: center; }
}

/* ==== Small mobile ==== */
@media (max-width: 480px) {
  .viprix-top-bar .top-bar-home { font-size: .8rem; padding: 4px 10px; }
  .nav-cta { padding: .5rem .9rem !important; font-size: .8rem !important; }
  .nav-links a { font-size: .75rem !important; }
  .hero-stat-number { font-size: 1.5rem !important; }

  /* Auth card edge-to-edge */
  .auth-card { padding: 1.2rem !important; border-radius: 16px !important; }
  .btn-submit { padding: .8rem !important; font-size: .9rem !important; }

  /* Dashboard sidebar reveal — make sure mobile-toggle fits */
  .mobile-toggle { width: 38px; height: 38px; }

  /* Logo text on dashboard */
  .login-logo .logo-icon { width: 110px !important; height: 80px !important; }
}

/* ==== Touch-friendly sizes everywhere ==== */
@media (hover: none) and (pointer: coarse) {
  button, .btn, a.btn, .nav-item, .nav-links a, .auth-tab { min-height: 40px; }
}

/* ==== Image safety — never overflow ==== */
img { max-width: 100%; height: auto; }

/* =====================================================================
   Page background — solid in both modes, all pages.
   Light: white   |   Dark: dark navy #0d0d1a
   Removes the old "blue-red gradient hero aesthetic" orbs/gradients.
   ===================================================================== */
html, body { background: #FFFFFF !important; background-image: none !important; }
html[data-theme="dark"], html[data-theme="dark"] body { background: #0d0d1a !important; background-image: none !important; }
body::before, body::after, html::before, html::after { display: none !important; content: none !important; }
.hero-orb, .hero-grid-bg { display: none !important; }
#login-screen { background: transparent !important; }

/* Fire footer must always sit at the very bottom of the page (like index.html).
   Body becomes a flex-column so the wrap, appended last, occupies the bottom. */
body { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 0 !important; }
body > .viprix-fire-wrap { margin-top: auto !important; margin-bottom: 0 !important; }
body > .viprix-fire-wrap.viprix-fire-empty { margin-top: auto !important; }

/* Clearance so the rising gooey strip never overlaps the form.
   Strip extends ~6rem above the wrap → leave ≥7rem between form & wrap. */
.auth-container,
#login-screen,
.contact-form-wrap,
body > .card,
body > .login-card { margin-bottom: 8rem !important; padding-bottom: 18px !important; }
/* customer-auth body: keep auth-container centered, give it bottom breathing room */
body:has(> .auth-container) { padding-bottom: 0 !important; }
body:has(> .auth-container) > .auth-container { margin: auto auto 8rem !important; }
.viprix-fire-wrap { padding-top: 18px !important; }
.viprix-fire-wrap, .viprix-fire-wrap > footer, .viprix-fire-wrap .footer-bottom { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.viprix-fire-wrap > footer { padding-bottom: 24px !important; }
html, body { margin-bottom: 0 !important; }

/* ==== Header / top-bar pure black in both modes, all pages, all viewports ==== */
.header,
.header.scrolled,
.viprix-top-bar {
  background: #000000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.header .logo-text,
.header .nav-links a { color: #F1F5F9 !important; }
.header .nav-links a:hover,
.header .nav-links a.active { color: #00d4ff !important; }
.viprix-top-bar .top-bar-home { color: #fff !important; }
.viprix-top-bar .top-bar-home:hover { color: #00d4ff !important; }

/* Mobile menu drawer — black in BOTH modes (was white in light) */
@media (max-width: 768px) {
  .header .nav-links,
  .nav-links {
    background: #000000 !important;
    border-left: 1px solid rgba(255,255,255,0.08) !important;
  }
  .header .nav-links a,
  .nav-links a { color: #F1F5F9 !important; }
  .header .nav-links a:hover,
  .nav-links a:hover { color: #00d4ff !important; }
  .mobile-toggle span { background: #F1F5F9 !important; }
}