/* ============================
   RESPONSIVE CSS - AssetMatrix
   Mobile-first responsive rules
   ============================ */

/* ---- TABLET (max-width: 1024px) ---- */
@media (max-width: 1024px) {

    /* Landing: Pricing grid - 3 columns on tablet */
    .tier-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ---- MOBILE (max-width: 768px) ---- */
@media (max-width: 768px) {

    /* === PUBLIC NAVBAR === */
    .nav-public {
        padding: 12px 16px !important;
    }

    .nav-public .nav-links {
        display: none !important;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        padding: 16px;
        gap: 8px;
        z-index: 999;
        border-top: 1px solid #eee;
    }

    .nav-public .nav-links.open {
        display: flex !important;
    }

    .nav-public .nav-links a {
        padding: 12px 16px;
        border-radius: 8px;
        font-size: 1rem;
        text-align: center;
    }

    .nav-public .nav-links a:hover {
        background: #f0f4ff;
    }

    .hamburger {
        display: flex !important;
    }

    /* === LANDING PAGE === */
    .hero h1 {
        font-size: 2.2rem !important;
    }

    .hero p {
        font-size: 1.1rem !important;
    }

    .vs-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .trust-logos {
        flex-direction: column;
        gap: 20px;
    }

    .final-cta h2 {
        font-size: 1.8rem !important;
    }

    /* Hero section */
    .hero {
        padding: 40px 16px !important;
    }

    .hero h1 {
        font-size: 1.8rem !important;
    }

    .hero p {
        font-size: 1rem !important;
    }

    .hero-cta {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .hero-cta a {
        width: 100%;
        text-align: center;
    }

    /* Pricing grid - single column */
    .tier-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .tier-card {
        padding: 20px !important;
    }

    .tier-card.popular {
        transform: none !important;
    }

    /* Billing toggle */
    .billing-toggle {
        flex-direction: column !important;
        gap: 6px !important;
    }

    .billing-toggle button {
        width: 100%;
    }

    /* Features grid */
    .feature-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Section headings on landing */
    section h2 {
        font-size: 1.5rem !important;
    }

    section p {
        font-size: 0.95rem !important;
    }

    /* === FOOTER === */
    .footer-container {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .footer-links {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .public-footer {
        padding: 40px 16px 30px !important;
    }

    /* === AUTH PAGES (Login/Register) === */
    .auth-container,
    .auth-box {
        margin: 16px !important;
        padding: 24px !important;
        max-width: 100% !important;
    }

    /* === DASHBOARD === */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .container {
        padding: 0 12px !important;
        margin: 1rem auto !important;
    }

    .card {
        padding: 16px !important;
    }

    .header-flex {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    /* === TABLES (scrollable) === */
    table {
        min-width: 600px;
    }

    .data-table {
        min-width: 600px;
    }

    td,
    th {
        padding: 0.6rem 0.5rem !important;
        font-size: 0.8rem !important;
    }

    /* === FORMS === */
    form[style*="grid-template-columns"],
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
        /* Prevents iOS zoom on focus */
    }

    /* === INTERNAL NAVBAR (Dashboard) === */
    .navbar {
        flex-wrap: wrap;
        padding: 10px 12px !important;
    }

    .navbar .nav-links,
    .navbar .nav-brand+div {
        flex-wrap: wrap;
        gap: 6px !important;
    }

    .nav-brand {
        font-size: 1.1rem !important;
    }

    /* Dashboard internal nav */
    nav .nav-container {
        flex-wrap: wrap;
        padding: 0 12px !important;
        height: auto !important;
        min-height: var(--header-height);
        gap: 8px;
    }

    nav .nav-container .nav-links {
        flex-wrap: wrap;
        gap: 4px !important;
        justify-content: center;
    }

    nav .nav-container .nav-links a {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
    }

    nav .nav-container .logo {
        font-size: 1.2rem !important;
    }

    /* === ASSET DETAIL === */
    .detail-grid {
        grid-template-columns: 1fr !important;
    }

    .detail-row {
        flex-direction: column;
        gap: 4px;
    }

    /* === FAQ page === */
    .faq-grid {
        grid-template-columns: 1fr !important;
    }

    /* === CONTACT page === */
    .contact-grid {
        grid-template-columns: 1fr !important;
    }

    /* === ABOUT page === */
    .about-grid,
    .team-grid,
    .value-grid {
        grid-template-columns: 1fr !important;
    }

    /* === SAAS ADMIN === */
    .tenant-grid {
        grid-template-columns: 1fr !important;
    }

    .metric-card {
        padding: 12px !important;
    }

    .metric-value {
        font-size: 1.5rem !important;
    }
}

/* ---- SMALL MOBILE (max-width: 480px) ---- */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.5rem !important;
    }

    .tier-price .price-val,
    .tier-price span[class="price-val"] {
        font-size: 2rem !important;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.3rem !important;
    }

    .btn,
    button {
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
    }
}