/* =====================================================================
   Axiam Billing - Mobile responsive overrides
   =====================================================================
   Loaded after portal.css and admin.css. Targets phones (<=640px) with
   some layout fixes also applied on tablets (<=900px). Uses two
   breakpoints intentionally:

     - 900px: tablets / small laptops. Multi-column layouts collapse,
       sidebars hide behind a hamburger.
     - 640px: phones. Padding tightens, action buttons go full-width,
       data tables become card-style stacks where helpful.

   The hamburger menu pattern: for portal/public nav and admin sidebar,
   a hidden checkbox toggles visibility - no JS needed beyond the small
   helpers in app.js for closing the menu when a link is clicked.
   ===================================================================== */

/* ─── Tablets and below (≤900px) ──────────────────────────────────── */
@media (max-width: 900px) {

    /* Container sides need real breathing room on smaller screens */
    .container { padding-left: 14px; padding-right: 14px; }

    /* ─── Public site / portal: top nav ─── */
    .site-header .nav-row {
        flex-wrap: wrap;
        gap: 8px;
        position: relative;
    }
    .site-header .primary-nav {
        order: 99;                       /* moves below the brand row */
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        background: rgba(0, 0, 0, 0.18);  /* translucent dark over blue */
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
        padding: 6px;
        margin-top: 6px;
        display: none;                   /* hidden until hamburger toggles */
    }
    .site-header .primary-nav a {
        padding: 12px 14px;
        border-radius: 6px;
        color: #fff;                     /* readable on the dark backdrop */
    }
    .site-header .primary-nav a:hover {
        background: rgba(255, 255, 255, 0.14);
    }

    /* Hamburger button - generated by JS in app.js. Sits inside the
       blue site-header so we make it translucent rather than white. */
    .nav-hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.10);
        color: #fff;
        cursor: pointer;
        order: 2;
        transition: background 0.15s ease;
    }
    .nav-hamburger:hover { background: rgba(255, 255, 255, 0.20); }
    .nav-open .primary-nav { display: flex; }

    /* Right-hand nav controls reflow tighter */
    .site-header .nav-right {
        gap: 8px;
        flex-wrap: wrap;
    }
    .site-header .currency-form select {
        min-width: 64px;
        padding: 8px 10px;
    }

    /* ─── Portal tabs: horizontal scroll instead of wrap ─── */
    .portal-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .portal-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .portal-tabs::-webkit-scrollbar { display: none; }
    .portal-tab {
        flex: 0 0 auto;                  /* don't shrink, allow scroll */
        white-space: nowrap;
    }
    .portal-account {
        align-self: flex-end;
    }

    /* ─── Multi-column grids stack ─── */
    .grid-2,
    .grid-3,
    .grid-4 { grid-template-columns: 1fr; }

    /* ─── Page headers: title above actions ─── */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .page-header > div,
    .page-header form { width: 100%; }
    .page-header .btn-neo,
    .page-header .btn-ghost { width: auto; }

    /* ─── Tables: allow horizontal scroll wrap ─── */
    .data-table {
        font-size: 13px;
    }
    .card .data-table,
    .card > table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* ─── Forms ─── */
    .form-stack,
    .form-stacked { gap: 12px; }
    .form-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .form-actions .btn-neo,
    .form-actions .btn-ghost,
    .form-actions .btn-danger,
    .form-actions button {
        width: 100%;
    }

    /* Inputs need to be at least 16px font-size to prevent iOS zoom-in */
    input[type=text],
    input[type=email],
    input[type=password],
    input[type=number],
    input[type=tel],
    input[type=url],
    input[type=search],
    input[type=date],
    select,
    textarea {
        font-size: 16px;
    }

    /* ─── Filter rows ─── */
    .filter-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .filter-row select,
    .filter-row input,
    .filter-row button { width: 100%; }

    /* ─── Cards / sections ─── */
    .card { padding: 16px; }
    .card h3 { font-size: 16px; }

    /* ─── Footer ─── */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* ─── Hero / product detail ─── */
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .product-detail-hero h1,
    .hero h1 {
        font-size: 28px;
        line-height: 1.2;
    }
    .hero .container,
    .product-detail-hero .container {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    /* Shopping cart */
    .cart-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .cart-row .cart-line-total {
        text-align: left;
    }

    /* Cycle picker on product page: stack instead of side-by-side */
    .cycle-options {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* ─── Admin specific ─── */
    .admin-shell {
        flex-direction: column;
    }
    .admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 18px rgba(0,0,0,0.4);
        overflow-y: auto;
    }
    body.admin-sidebar-open .admin-sidebar {
        transform: translateX(0);
    }
    /* Backdrop */
    body.admin-sidebar-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }
    .admin-main { padding: 16px; }
    .admin-topbar .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    /* Hamburger for admin (generated by JS). Sits in the dark navy
       admin topbar so we use translucent-light styling. */
    .admin-hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.06);
        color: #E6EEF8;
        cursor: pointer;
        margin-right: 8px;
        transition: background 0.15s ease;
    }
    .admin-hamburger:hover { background: rgba(255, 255, 255, 0.14); }

    /* Admin user block - hide name on mobile, just show sign out */
    .admin-user .muted { display: none; }
}

/* ─── Phones (≤640px) ─── */
@media (max-width: 640px) {

    .container { padding-left: 12px; padding-right: 12px; }

    /* Tighter typography */
    h1 { font-size: 22px; }
    h2 { font-size: 18px; }
    h3 { font-size: 16px; }

    /* ─── Hero hero hero ─── */
    .product-detail-hero h1,
    .hero h1 {
        font-size: 24px;
    }
    .product-detail-tagline,
    .hero p {
        font-size: 15px;
    }

    /* ─── Cards ─── */
    .card { padding: 14px; border-radius: 10px; }
    .card .kv {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .card .kv > strong { word-break: break-word; }

    /* ─── Buttons ─── */
    .btn-block { width: 100%; }
    .btn-sm { padding: 8px 14px; font-size: 13px; }
    /* Action button groups (often used in card headers) */
    .card > .actions,
    .card .button-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    /* ─── Tables → card stacks for the worst offenders ─── */
    /* Apply ONLY when an admin has tagged the table .data-table-stacked.
       Generic .data-table keeps horizontal scroll. This mode renders
       each row as a card - readable, but loses column alignment.
       We don't auto-stack everything because some tables (invoices,
       services) actually work fine with horizontal scroll on phone. */
    .data-table-stacked thead { display: none; }
    .data-table-stacked,
    .data-table-stacked tbody,
    .data-table-stacked tr,
    .data-table-stacked td { display: block; width: 100%; }
    .data-table-stacked tr {
        border: 1px solid var(--border);
        border-radius: 10px;
        margin-bottom: 12px;
        padding: 12px;
        background: var(--surface);
    }
    .data-table-stacked td {
        border: 0;
        padding: 6px 0;
        display: flex;
        justify-content: space-between;
        gap: 10px;
    }
    .data-table-stacked td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--muted);
        flex: 0 0 40%;
    }

    /* Status pills full-line on cards */
    .data-table-stacked .status { align-self: flex-start; }

    /* ─── Page header tighter ─── */
    .page-header {
        margin: 12px 0 16px;
        padding-bottom: 12px;
    }
    .page-header h1 {
        font-size: 22px;
    }

    /* ─── Portal dashboard tiles ─── */
    .stat-grid,
    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .stat-grid .stat-card,
    .dashboard-grid > * {
        padding: 12px;
    }

    /* ─── Topbar hides logout text ─── */
    .topbar-row .topbar-user-text { display: none; }

    /* ─── Public hero CTA stack ─── */
    .hero-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .hero-cta .btn-neo,
    .hero-cta .btn-ghost { width: 100%; }

    /* Currency picker: just the currency code, no flag/long name */
    .currency-form { min-width: 0; }

    /* ─── Forms: single-column even where grids were declared inline ─── */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Cancellation form / upgrade radios full width */
    label[style*="border:1px solid"] { width: 100%; }
}

/* Bigger touch targets on actual touch devices */
@media (hover: none) and (pointer: coarse) {
    .btn-neo,
    .btn-ghost,
    .btn-danger,
    .btn-warn {
        min-height: 44px;
    }
    .data-table tbody td a {
        padding: 4px 0;                  /* easier tap target */
    }
}