/* ================================================================
   TRUTHVAULT VPN — RESPONSIVE / MOBILE-FIRST CSS
   Covers: Landing page + Customer Dashboard + All admin views
   Breakpoints: 480px | 640px | 768px | 992px | 1200px
   ALL values use CSS variables — zero hardcoded colors
   ================================================================ */

/* ---- BASE FIX: prevent overflow on all pages ---- */
html { box-sizing: border-box; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; min-width: 320px; }
img, video, svg, iframe { max-width: 100%; height: auto; }
table { table-layout: auto; }

/* ---- Touch targets: all buttons/links min 44px ---- */
a, button, input[type="submit"], input[type="button"],
.btn, .nav-links a, .tv-sb-link, .billing-pill-btn { min-height: 44px; }

/* ================================================================
   LANDING PAGE — MOBILE RESPONSIVE
   ================================================================ */

/* --- Countdown bar --- */
@media (max-width: 600px) {
    .countdown-bar { padding: 8px 0; }
    .countdown-inner { flex-wrap: wrap; gap: 6px; justify-content: center; }
    .countdown-label { font-size: 1rem !important; width: 100%; text-align: center; }
    .cd-block { min-width: 42px; }
    .cd-block span { font-size: 1.8rem !important; }
    .cd-sep { font-size: 1.4rem; padding-bottom: 14px; }
    .launch-banner { font-size: .8rem !important; padding: 8px 12px !important; }
}

/* --- Navigation --- */
@media (max-width: 768px) {
    .nav { top: 0; position: sticky; }
    .nav-inner { height: 56px; padding: 0 16px; }
    .logo-img { height: 40px; }
    .mobile-menu { display: flex; flex-direction: column; justify-content: center; }
    .nav-links {
        display: none;
        position: fixed;
        top: 56px;
        left: 0; right: 0;
        background: var(--nav-bg);
        padding: 16px;
        border-bottom: 1px solid var(--border-primary);
        flex-direction: column;
        gap: 8px;
        z-index: 200;
        max-height: calc(100vh - 56px);
        overflow-y: auto;
    }
    .nav-links.active { display: flex; }
    .nav-links a { padding: 10px 12px; border-radius: 8px; font-size: .95rem !important; }
    .nav-links .btn { width: 100%; justify-content: center; }
}

/* --- Hero section --- */
@media (max-width: 992px) {
    .hero { padding: 50px 0 40px; }
    .hero-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
    .hero h1 { font-size: 2.4rem !important; }
    .hero-text { font-size: 1rem !important; max-width: 100%; margin-left: auto; margin-right: auto; }
    .hero-cta { justify-content: center; }
    .hero-stats { justify-content: center; gap: 24px; }
    .hero-visual { order: -1; }
    .hero-visual .hero-logo-img { max-width: 280px !important; }
    .hero-badge { font-size: .8rem !important; }
}
@media (max-width: 480px) {
    .hero h1 { font-size: 1.9rem !important; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { width: 100%; justify-content: center; }
    .hero-stats { flex-wrap: wrap; gap: 16px; }
    .hero-stat-value { font-size: 1.6rem !important; }
}

/* --- What is a VPN / Why / Features --- */
@media (max-width: 992px) {
    .what-vpn-grid,
    .feature-row,
    .about-grid { grid-template-columns: 1fr; gap: 32px; }
    .feature-row.reverse { direction: ltr; }
    .feature-row.reverse > * { direction: ltr; }
    .what-vpn { padding: 60px 0; }
    .why-vpn { padding: 60px 0; }
    .features { padding: 60px 0; }
    .vpn-diagram svg { max-width: 100% !important; min-height: auto !important; }
}
@media (max-width: 768px) {
    .why-grid { grid-template-columns: 1fr; }
    .why-vpn-header h2,
    .features-header h2,
    .what-vpn h2 { font-size: 1.8rem !important; }
    .feature-content h3 { font-size: 1.5rem !important; }
    .mock-window { min-height: 280px !important; }
    .mock-window svg { min-height: 250px !important; }
}
@media (max-width: 600px) {
    .why-grid { grid-template-columns: 1fr; }
    .why-card { padding: 20px; }
    .container { padding: 0 16px; }
}

/* --- Pricing --- */
@media (max-width: 992px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .pricing-card.featured { transform: none; box-shadow: none; border-color: var(--accent-primary); }
    .pricing { padding: 60px 0; }
}
@media (max-width: 480px) {
    .pricing-grid { max-width: 100%; }
    .pricing-card { padding: 24px 20px; }
    .pricing-value { font-size: 2rem !important; }
    .pricing-cad-value { font-size: 2rem !important; }
    .billing-pill { flex-direction: row; flex-wrap: wrap; }
    .billing-pill-btn { font-size: .8rem; padding: 8px 14px; }
}

/* --- Server network cards --- */
@media (max-width: 768px) {
    .server-cards { grid-template-columns: 1fr; }
    .server-status-section { padding: 40px 0; }
}
@media (min-width: 480px) and (max-width: 900px) {
    .server-cards { grid-template-columns: repeat(2, 1fr); }
}

/* --- Comparison table --- */
@media (max-width: 768px) {
    .comparison { padding: 40px 0; }
    .comp-table-wrap { border-radius: 8px; }
    .comp-table { font-size: .72rem !important; min-width: 600px; }
    .comp-table thead th { font-size: .72rem !important; padding: 10px 8px !important; }
    .comp-table tbody td { font-size: .75rem !important; padding: 9px 8px !important; }
    .comp-table td.tv-yes, .comp-table td.comp-yes,
    .comp-table td.comp-no { font-size: .95rem !important; }
    .comp-table tbody td:first-child { font-size: .78rem !important; max-width: 140px; }
    .hidden-cost-trap { grid-template-columns: 1fr; padding: 1rem; }
    .real-cost-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .real-cost-grid { grid-template-columns: 1fr; }
}

/* --- Business Base Hub --- */
@media (max-width: 992px) {
    .bbh-features-grid { grid-template-columns: repeat(2, 1fr); }
    .bbh-pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .bbh-pricing-card.featured { transform: none; }
    .business-base-hub { padding: 60px 0; }
}
@media (max-width: 600px) {
    .bbh-features-grid { grid-template-columns: 1fr; }
    .bbh-header h2 { font-size: 1.6rem !important; }
}

/* --- Footer --- */
@media (max-width: 992px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
    footer { padding: 40px 0 20px; }
}

/* --- Notify modal --- */
@media (max-width: 500px) {
    .notify-modal { padding: 28px 20px; margin: 0 12px; border-radius: 16px; }
    .notify-modal h3 { font-size: 1.3rem; }
}

/* --- SVG lightbox --- */
@media (max-width: 600px) {
    #svg-lightbox-inner { margin: 8px; border-radius: 12px; }
    #svg-lightbox-bar button { padding: 6px 10px; font-size: .8rem; }
}

/* ================================================================
   CUSTOMER DASHBOARD — MOBILE RESPONSIVE
   ================================================================ */

/* Top nav */
@media (max-width: 768px) {
    .tv-topnav { padding: 0 12px; height: 52px; }
    .tv-topnav-brand { font-size: 1rem; }
    .tv-topnav-right { gap: 10px; }
    .tv-topnav-right a { font-size: .8rem; }
}
@media (max-width: 480px) {
    .tv-topnav-right a:not(:last-child) { display: none; }
    .tv-tier-badge { font-size: .7rem; }
}

/* Sidebar + layout */
@media (max-width: 768px) {
    .tv-layout { flex-direction: column; }
    .tv-sidebar {
        position: fixed;
        left: -260px;
        top: 52px;
        width: 260px !important;
        min-width: 260px !important;
        height: calc(100vh - 52px);
        z-index: 200;
        transition: left .25s ease;
        box-shadow: 4px 0 20px rgba(0,0,0,.4);
    }
    .tv-sidebar.open { left: 0; }
    .tv-content {
        padding: 16px 14px;
        max-width: 100% !important;
    }
    .tv-hamburger { display: flex !important; }
}

/* Dashboard stat grid */
@media (max-width: 768px) {
    .dash-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .dash-stat { padding: 14px !important; }
    .dash-stat .value { font-size: 1.2rem !important; }
}
@media (max-width: 400px) {
    .dash-grid { grid-template-columns: 1fr !important; }
}

/* Dashboard device table */
@media (max-width: 768px) {
    .device-table { font-size: .82rem; }
    .device-table th, .device-table td { padding: 8px; }
    /* Hide less important columns on mobile */
    .device-table th:nth-child(3),
    .device-table td:nth-child(3) { display: none; }
}
@media (max-width: 480px) {
    .device-table th:nth-child(4),
    .device-table td:nth-child(4) { display: none; }
}

/* Quick actions */
@media (max-width: 640px) {
    .quick-actions { flex-direction: column; }
    .quick-actions .btn { width: 100%; justify-content: center; }
}

/* Dashboard forms */
@media (max-width: 640px) {
    .form-grid-2 { grid-template-columns: 1fr !important; }
    .card { padding: 16px !important; }
}

/* ================================================================
   ADMIN PANEL — MOBILE RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {
    .admin-layout { flex-direction: column; }
    .admin-sidebar {
        width: 100% !important;
        position: relative !important;
        height: auto !important;
    }
}
@media (max-width: 640px) {
    .admin-table { font-size: .8rem; }
    .admin-table th, .admin-table td { padding: 8px 6px; }
    .admin-stats-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ================================================================
   UNIVERSAL UTILITY — ALL PAGES
   ================================================================ */

/* Prevent text from blowing out containers */
h1, h2, h3, h4, h5, h6, p, li, td, th { overflow-wrap: break-word; word-break: break-word; }

/* Smooth scrolling on iOS */
* { -webkit-overflow-scrolling: touch; }

/* Better tap highlighting */
a, button { -webkit-tap-highlight-color: rgba(0,0,0,.1); }

/* Input zoom prevention on iOS — min 16px */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="search"],
input[type="url"], textarea, select {
    font-size: max(16px, 1rem) !important;
}

/* Modals — full screen on small phones */
@media (max-width: 400px) {
    .notify-modal,
    .modal { max-width: 100% !important; width: 100% !important; margin: 0 !important; border-radius: 0 !important; min-height: 100vh; }
    .notify-overlay { align-items: flex-end !important; }
}

/* Tables — horizontal scroll wrapper */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Buttons — full width on mobile if needed */
@media (max-width: 480px) {
    .btn-block-mobile { width: 100% !important; display: flex !important; justify-content: center !important; }
}

/* CCTV camera — mobile grid */
@media (max-width: 480px) {
    .cctv-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Pricing toggle */
@media (max-width: 360px) {
    .billing-pill { flex-direction: column; }
    .billing-pill-btn { text-align: center; }
}

/* VPN diagram on small screens */
@media (max-width: 600px) {
    .vpn-diagram { display: none; }
}

/* Feature mock window — shorter on mobile */
@media (max-width: 768px) {
    .mock-window { min-height: 220px !important; }
    .mock-window svg { min-height: 200px !important; }
    .feature-row { margin-bottom: 40px !important; }
}

/* Server ping row — stack on very small */
@media (max-width: 340px) {
    .server-ping-row { flex-direction: column; }
    .server-ping-item { border-right: none !important; border-bottom: 1px solid var(--border-primary); padding: 4px 0; }
}

/* BBH thumb grid */
@media (max-width: 640px) {
    .bbh-thumb-grid { grid-template-columns: 1fr !important; }
}

/* Comparison table real cost cards */
@media (max-width: 640px) {
    .real-cost-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 380px) {
    .real-cost-grid { grid-template-columns: 1fr !important; }
}