/* ═══════════════════════════════════════════════════════════
   mobile.css — Loot responsive overrides
   Desktop-first: nothing outside a media query touches the
   desktop layout.  The hamburger button is the only element
   declared outside a breakpoint, and it is hidden by default.
   ═══════════════════════════════════════════════════════════ */

/* ── Hamburger button: injected by mobile.js, hidden on desktop ── */
.nav-toggle {
    display: none;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    z-index: 10002;
    -webkit-tap-highlight-color: transparent;
}

/* ── Tablet + phone  (≤ 900 px) ──────────────────────────── */
@media screen and (max-width: 900px) {

    /* Prevent page from growing wider than the viewport */
    *, *::before, *::after { box-sizing: border-box; }
    body { overflow-x: hidden; }

    /* Show hamburger */
    .nav-toggle { display: block; }

    /* Hide horizontal nav links, replace with slide-down panel */
    #header nav {
        position: fixed;
        top: 3.25em;
        left: 0;
        right: 0;
        background: #333;
        height: 0;
        overflow: hidden;
        transition: height 0.28s ease;
        z-index: 9999;
        /* reset the absolute positioning from the theme */
        transform: none;
    }

    #header.nav-open nav {
        /* actual height is set by JS via scrollHeight */
        overflow: visible;
    }

    #header nav > ul {
        display: flex !important;
        flex-direction: column !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0.4rem 0 !important;
    }

    #header nav > ul > li {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #header nav > ul > li > a {
        display: block !important;
        padding: 0.85rem 1.5rem !important;
        border-radius: 0 !important;
        font-size: 1rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
        height: auto !important;
        line-height: 1.4 !important;
    }

    #header nav > ul > li:last-child > a {
        border-bottom: none !important;
    }

    /* ── General layout ── */
    #page-wrapper { padding-top: 3.25em; }

    /* Constrain all custom wrapper divs */
    div[style*="max-width: 1200px"],
    div[style*="max-width:1200px"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* ── Login box ── */
    .login-box {
        width: 92% !important;
        height: auto !important;
        padding: 1.5rem 1rem !important;
        margin: 2rem auto !important;
    }

    .login-box form {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .login-box form input {
        width: 100% !important;
    }

    .login-box .login-btn {
        width: 100% !important;
    }

    /* ── Sign-up box ── */
    .signUp-box {
        width: 95% !important;
        padding: 1.5rem 1rem !important;
        margin: 1.5rem auto !important;
    }

    .signUp-box .input-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Employee dashboard feature cards ── */
    .box.special.features .features-row {
        grid-template-columns: 1fr !important;
    }

    /* ── 2-col edit / detail grids (employee.css) ── */
    .edit-grid,
    .detail-grid {
        grid-template-columns: 1fr !important;
    }

    /* full-width overrides that span 2 cols still span 1 */
    .field-group.full-width,
    .detail-field.full-width {
        grid-column: 1 !important;
    }

    /* ── Tickets / schedule wrapper (fixed 680 px) ── */
    .tickets-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        border-radius: 0 !important;
    }

    /* ── Tables: scroll horizontally instead of overflowing ── */
    .table-scroll-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    table {
        min-width: 520px; /* keep columns readable */
    }

    /* ── Transfer wizard: account cards ── */
    .account-cards {
        grid-template-columns: 1fr 1fr !important;
    }

    /* ── Family goals: contribution account cards ── */
    div.external-accounts-container > div > div {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    /* ── Summary dashboard: filter row ── */
    .field-group[style*="min-width"] {
        min-width: 0 !important;
        width: 100%;
    }

    /* ── Modals ── */
    .modal-content {
        width: 96% !important;
        max-width: 96% !important;
        margin: 0.5rem auto !important;
        padding: 1rem !important;
        border-radius: 8px !important;
    }

    /* ── Confirm-transfer summary rows ── */
    .confirm-row {
        flex-wrap: wrap;
        gap: 0.15rem;
    }

    /* ── Touch targets: at least 44 px tall ── */
    button,
    input[type="submit"],
    input[type="button"],
    .action-btn,
    .back-btn,
    .login-btn,
    .signUp-btn {
        min-height: 44px;
    }

    /* ── Typography scale-down ── */
    h2 { font-size: 1.45rem !important; }
    h3 { font-size: 1.1rem !important; }

    /* ── Step-progress dots: slightly smaller ── */
    .step-dot {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
    }

    /* ── Radio schedule options: full-width ── */
    .schedule-option {
        width: 100% !important;
    }
}

/* ── Small phones (≤ 480 px) ────────────────────────────── */
@media screen and (max-width: 480px) {

    /* Single-column account cards on phones */
    .account-cards {
        grid-template-columns: 1fr !important;
    }

    /* Transfer confirm: stack label / value */
    .confirm-row {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Family goal header: stack title + amount */
    div[onclick*="toggleGoal"] {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }

    /* Family goal action buttons: full width */
    div[style*="justify-content: space-between"][style*="align-items: center"] > button {
        flex: 1;
    }

    /* Shrink header logo text slightly */
    #header h1 { font-size: 1rem !important; }
    #header h1 a img { height: 36px !important; }
}