/* Shared responsive rules for public pages and the admin workspace. */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
button, input, select, textarea { max-width: 100%; }
.loyalty-nav-toggle,
.loyalty-nav-close,
.loyalty-nav-overlay { display: none; }

@media (max-width: 1024px) {
    .container { width: min(100% - 32px, 1200px); }
    .nav-container { width: 100%; }
    .admin-content { min-width: 0; }
    .table-responsive,
    .data-table-wrap,
    .admin-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-responsive table,
    .data-table-wrap table,
    .admin-table-wrap table { min-width: 640px; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .container { width: min(100% - 24px, 1200px); }
    .section { padding-top: 48px; padding-bottom: 48px; }
    h1 { font-size: clamp(1.8rem, 8vw, 2.8rem); }
    h2 { font-size: clamp(1.45rem, 6vw, 2.2rem); }
    .btn-primary, .btn-gold, .btn-outline,
    button, input[type="submit"], input[type="button"] { min-height: 44px; }
    input, select, textarea { width: 100%; min-height: 44px; }
    .form-grid,
    .form-grid-2,
    .form-grid-3,
    .auth-form,
    .checkout-grid { grid-template-columns: 1fr !important; }
    .atelier-detail-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-bottom { gap: 12px; text-align: center; }
    .footer-bottom-links { flex-wrap: wrap; justify-content: center; }
    .admin-topbar { min-width: 0; padding: 14px 16px; gap: 10px; }
    .admin-topbar .topbar-left { min-width: 0; }
    .admin-topbar h1 { font-size: 1.05rem; }
    .topbar-right { flex-wrap: wrap; justify-content: flex-end; }
    .admin-content { padding: 20px 12px; }
    .stats-grid { grid-template-columns: 1fr !important; }
    .cards-grid,
    .workshops-grid,
    .menu-grid,
    .events-grid { grid-template-columns: 1fr !important; }
    .dashboard-grid { grid-template-columns: 1fr !important; }
    .filter-bar { flex-wrap: wrap; }
    .loyalty-admin-shell { grid-template-columns: 1fr; }
    .loyalty-admin-nav { position: static; }
    .loyalty-admin-content { padding: 18px 12px; }
    .loyalty-search { grid-template-columns: 1fr; }
    .digital-card { padding: 22px 16px; }
}

@media (max-width: 640px) {
    .nav-container { padding-left: 8px; padding-right: 8px; }
    .logo-text { font-size: 1rem; }
    .nav-actions { gap: 4px; }
    .hero { min-height: 700px; padding-top: 76px; }
    .hero-actions { width: 100%; }
    .hero-actions > * { width: 100%; }
    .menu-grid,
    .stamp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stamp-grid { gap: 8px; }
    .admin-sidebar { width: min(86vw, 320px); }
    .admin-nav a { min-height: 44px; }
    .admin-user { padding-bottom: 24px; }
    .panel-header { flex-wrap: wrap; gap: 12px; }
    .panel-body { padding: 16px; }
    .data-table { min-width: 680px; }
    .modal-box { width: calc(100% - 24px) !important; max-height: calc(100vh - 24px); overflow-y: auto; }
}

@media (max-width: 768px) {
    .navbar { z-index: 5000; }
    .nav-container { position: relative; }

    .nav-links {
        position: absolute !important;
        top: calc(100% + 8px);
        right: 12px;
        left: auto;
        bottom: auto;
        display: block !important;
        width: min(300px, calc(100vw - 32px));
        max-width: none;
        max-height: calc(100dvh - 88px);
        padding: 8px;
        overflow-x: hidden;
        overflow-y: auto;
        border: 1px solid rgba(45, 106, 79, 0.12);
        border-radius: 16px;
        background: #fff !important;
        box-shadow: 0 14px 36px rgba(27, 43, 30, 0.18);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
        z-index: 5002;
    }
    .nav-links.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
    .nav-links::before,
    .nav-close-item { display: none !important; }
    .nav-links li { width: 100%; }
    .nav-links a,
    .navbar.scrolled .nav-links a {
        min-height: 44px;
        padding: 12px 14px;
        border-radius: 10px;
        color: #343b36 !important;
        background: transparent !important;
        font-size: 0.95rem;
        line-height: 1.4;
        white-space: normal;
    }
    .nav-links a::after { display: none !important; }
    .nav-links a:hover,
    .nav-links a.active,
    .navbar.scrolled .nav-links a:hover,
    .navbar.scrolled .nav-links a.active {
        color: var(--green-dark) !important;
        background: var(--green-pale) !important;
    }
    .nav-icon { color: var(--green-dark); }
    .nav-mobile-user { padding-top: 4px; }
    .nav-mobile-divider { width: 100%; margin: 4px 0 8px; }
    .mobile-menu-overlay,
    .nav-overlay { display: none !important; }
}

@media (min-width: 1025px) {
    .container { width: min(100% - 40px, 1200px); }
}

@media (max-width: 768px) {
    .admin-workspace { --public-nav-height: 64px; }
    .admin-workspace > .navbar { display: block !important; }
    .admin-workspace > .nav-overlay { display: none !important; }
    .admin-workspace > .admin-container { padding-top: var(--public-nav-height); }
    .admin-workspace .admin-topbar {
        position: sticky;
        top: var(--public-nav-height);
        z-index: 1200;
    }
    .admin-workspace .admin-sidebar {
        top: var(--public-nav-height);
        height: calc(100dvh - var(--public-nav-height));
        max-height: calc(100dvh - var(--public-nav-height));
        z-index: 4900;
    }
    .admin-workspace .admin-sidebar-overlay {
        inset: var(--public-nav-height) 0 0;
        z-index: 4800;
    }

    .loyalty-admin-page .loyalty-admin-nav {
        position: fixed !important;
        inset: 0 auto 0 0;
        width: min(84vw, 320px);
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 1300;
        transform: translateX(-105%);
        transition: transform 180ms ease;
        box-shadow: 12px 0 30px rgba(27, 43, 30, 0.2);
    }
    .loyalty-admin-page .loyalty-admin-nav.open { transform: translateX(0); }
    .loyalty-admin-page .loyalty-nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1250;
        background: rgba(10, 31, 20, 0.55);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 180ms ease, visibility 180ms ease;
    }
    .loyalty-admin-page .loyalty-nav-overlay.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .loyalty-admin-page .loyalty-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        border: 1px solid var(--loyalty-border);
        border-radius: 10px;
        background: #fff;
        color: var(--loyalty-green);
        font-size: 1.1rem;
        cursor: pointer;
    }
    .loyalty-admin-page .loyalty-nav-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 20px;
        right: 16px;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 50%;
        background: var(--loyalty-green-soft);
        color: var(--loyalty-green);
        cursor: pointer;
    }
    .loyalty-admin-page .loyalty-admin-nav h1 { padding-right: 52px; }
    .loyalty-admin-page .loyalty-admin-nav a { min-height: 44px; }
    .loyalty-admin-page.loyalty-nav-open { overflow: hidden; }
}