/* =========================================
   Sokolink - Responsive / Mobile
   ========================================= */

@media (max-width: 1024px) {
    .stats-grid,
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .business-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .staff-tier-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-panels,
    .panels-row {
        grid-template-columns: 1fr;
    }

    .landing-stores-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .checkout-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-260px);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    .sidebar-toggle {
        display: inline-flex;
    }

    .stats-grid,
    .stats-row {
        grid-template-columns: 1fr 1fr;
    }

    .business-grid {
        grid-template-columns: 1fr;
    }

    .staff-tier-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .section-toolbar-left,
    .section-toolbar-right {
        flex-wrap: wrap;
    }

    .modal {
        max-width: calc(100% - 20px);
        margin: 10px;
    }

    .modal-lg {
        max-width: calc(100% - 20px);
    }

    .sale-item-row {
        flex-wrap: wrap;
    }

    .sale-product {
        flex: 1 1 100%;
    }

    .auth-card {
        padding: 20px;
    }

    .main-header {
        padding: 10px 16px;
    }

    .page-content {
        padding: 16px;
    }

    .top-bar {
        padding: 10px 16px;
    }

    .business-selection {
        padding: 20px 16px;
    }

    .landing-stores-grid {
        grid-template-columns: 1fr;
    }

    .storefront-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .landing-hero-inner {
        padding: 40px 16px 32px;
    }

    .landing-header-inner {
        padding: 10px 16px;
    }

    .landing-header-actions .btn-outline {
        display: none;
    }
}

@media (max-width: 480px) {
    .stats-grid,
    .stats-row {
        grid-template-columns: 1fr;
    }

    .staff-tier-options {
        grid-template-columns: 1fr;
    }

    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .header-right {
        display: none;
    }

    .stat-card {
        padding: 12px;
    }

    .storefront-grid {
        grid-template-columns: 1fr;
    }

    .business-card {
        padding: 18px;
    }

    .staff-question-card {
        padding: 18px;
    }
}

/* =========================================
   MOBILE HARDENING (added) — stop sideways
   scrolling and keep everything inside the
   screen on small phones. These rules are
   deliberately conservative so desktop is
   untouched: fluid caps only ever SHRINK an
   element when the screen is narrower than it.
   ========================================= */

/* Media never forces the page wider than the screen. */
img, video, canvas, iframe, svg {
    max-width: 100%;
}

/* Fixed-width dropdown/side panels become fluid on narrow screens.
   min() keeps the original width on desktop and only shrinks it when
   the viewport is smaller, so nothing changes on large screens. */
.notification-panel {
    width: min(360px, calc(100vw - 24px));
}

@media (max-width: 768px) {
    /* The single most effective guard: never allow the whole page to
       scroll sideways. Wide content (tables) gets its own scroller below
       so data is still reachable, just not by dragging the entire page. */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Wide tables scroll inside their own box instead of being clipped
       or pushing the page out. .table-wrapper normally hides overflow;
       on mobile we let it scroll horizontally. */
    .table-wrapper,
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Inputs that were given a fixed pixel width shrink to fit the row
       rather than spilling off the edge. */
    input, select, textarea {
        max-width: 100%;
    }
}