/* ==========================================================================
   Quick1099 Mobile Responsiveness (additive)
   Purpose: close the mobile/responsive gaps between the Product Website and
   the Marketing Website's mobile UX, WITHOUT altering desktop layout.
   Every rule below is scoped inside a max-width media query so desktop
   (>= 993px) behavior is untouched.
   Load LAST, after q-tokens.css / q-base.css / q-components.css /
   q-layout.css / q-dashboard.css / dashboard.css / style.css / styleV2.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Global overflow safety net (mobile only)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    img,
    svg,
    video,
    canvas {
        max-width: 100%;
        height: auto;
    }

    .container,
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* --------------------------------------------------------------------------
   1. Header / Navbar (Bootstrap 3 based public layout)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .header-home-one .navbar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .header-home-one .navbar-brand {
        max-width: 65%;
    }

    .header-home-one .navbar-brand img {
        max-width: 100%;
        height: auto;
    }

    .header-home-one .navbar-toggle {
        margin-top: 0;
        margin-bottom: 0;
    }

    .header-home-one .navbar-collapse {
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

    .header-home-one .navbar-nav {
        width: 100%;
    }

    .header-home-one .navbar-nav > li {
        width: 100%;
    }

    .header-home-one .navbar-nav > li > a {
        white-space: normal;
        word-break: break-word;
    }

    .header-home-one .dropdown-menu {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   2. Footer (stack columns cleanly on mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .q-footer-grid [class*="col-"] {
        margin-bottom: 24px;
    }

    .q-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .q-footer-legal {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }

    .q-footer-legal a {
        margin-left: 0;
    }

    .footer-home-one-newsletter {
        width: 100%;
    }

        .footer-home-one-newsletter input[type="text"],
        .footer-home-one-newsletter input[type="email"] {
            width: 100%;
            max-width: 100%;
        }
}

/* --------------------------------------------------------------------------
   3. Buttons / Links (fit viewport, wrap, keep touch target)
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    .btn,
    .q-btn,
    button[type="submit"],
    input[type="submit"] {
        white-space: normal;
        word-break: break-word;
        max-width: 100%;
    }

    .btn-group,
    .q-btn-group {
        flex-wrap: wrap;
        gap: 8px;
    }

    a.btn,
    button.btn {
        min-height: 40px;
    }
}

/* --------------------------------------------------------------------------
   4. Tables (contain horizontal scroll inside the table, not the page)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .table-responsive {
        border: 0;
    }

    /* Fallback for tables not already wrapped in .table-responsive */
    table.table:not(.table-responsive table),
    table.dataTable:not(.table-responsive table) {
        display: table-row;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------------------
   5. Forms (stack side-by-side fields)
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    .form-row,
    .q-form-row,
    .two-col-form,
    .dashboard-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .filter-item {
        width: 100%;
    }

    .dashboard-select,
    .form-control,
    select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"] {
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   6. Modals / Dropdowns (fit viewport, allow internal scroll)
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    .modal-dialog {
        width: auto;
        margin: 12px;
    }

    .modal-content {
        max-height: calc(100vh - 24px);
        overflow-y: auto;
    }

    .dropdown-menu {
        max-width: calc(100vw - 24px);
        overflow-x: hidden;
    }
}

/* --------------------------------------------------------------------------
   7. Dashboard shell: sidebar / topbar / main content spacing
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .dashboard-main {
        padding-left: 12px;
        padding-right: 12px;
    }

    .topbar,
    .dashboard-topbar {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* --------------------------------------------------------------------------
   8. Dashboard grid / cards (stack Section A / Section B like Marketing site)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "metrics"
            "reminders"
            "next"
            "activity";
        gap: 16px;
    }

    .dashboard-reminders,
    .dashboard-nextstep,
    .dashboard-activity {
        margin: 0;
    }
}

@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        margin: 0 0 20px 0;
        gap: 12px;
    }

    .dashboard-title h1 {
        font-size: 28px;
    }

    .dashboard-filters {
        width: 100%;
    }

    .filter-item {
        width: 100%;
    }

    .dashboard-select {
        width: 100%;
        min-width: 0;
    }

    .metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }
}

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

    .metric-card {
        min-height: auto;
    }

    .alert-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .dashboard-alert-btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}

/* --------------------------------------------------------------------------
   9. Generic card grids used across marketing-style pages (About, Home, etc.)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .card-grid,
    .q-card-grid,
    .feature-grid,
    .price-grid,
    .topic-grid,
    .trust-grid {
        display: flex;
        flex-direction: column;
    }

        .card-grid > *,
        .q-card-grid > *,
        .feature-grid > *,
        .price-grid > *,
        .topic-grid > *,
        .trust-grid > * {
            width: 100%;
            margin-bottom: 16px;
        }
}

/* --------------------------------------------------------------------------
   10. Fix percentage-width legacy buttons that clip their label on mobile
   (.btnn.btnnDefault width:18% in style.css was sized for wide desktop
   containers; on narrow mobile modals/forms it clips "Save"/"Pay" text)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .btnn.btnnDefault {
        width: auto;
        min-width: 90px;
        white-space: nowrap;
        padding-left: 16px;
        padding-right: 16px;
    }

    .btnn,
    .btnCancel,
    .btnInner,
    .btnnDefault,
    .btnSubmit,
    .btnDefault,
    #exportButtonsContainer .btnn { /* ← add this line */
        white-space: nowrap;
        overflow: visible;
        text-overflow: unset;
        width: 100%;
    }
}
/* --------------------------------------------------------------------------
   10b. Export buttons (Export PDF / Export CSV) carry .btnnAddNew, which is
   forced to width:auto by styleV2.css's `.quick1099-header .btnn.btnnAddNew`
   rule (!important, specificity 30) regardless of screen size. Beat it here
   with higher specificity + !important, mobile-only. The container itself
   is a flex-item inside .page-head (flex row) and shrink-wraps by default,
   so it also needs to be forced to stretch/stack before the button width
   fix has any visible effect.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    #exportButtonsContainer {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        align-self: stretch !important;
        gap: 10px !important;
    }

        #exportButtonsContainer .btnn.btnnAddNew {
            width: 100% !important;
            min-width: 0 !important;
            margin: 0 !important;
        }
}


/* --------------------------------------------------------------------------
   11. Modal / form footer action button spacing (Save, Cancel, No/Yes, etc.)
   Prevent buttons crowding or overlapping when pull-right/inline on mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    .modal-footer,
    .quick1099-form .modal-footer,
    .modal-footer-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px;
    }

        .modal-footer .btnn,
        .modal-footer .btnCancel,
        .modal-footer .btnInner,
        .modal-footer-actions .btnn,
        .modal-footer-actions .btnCancel {
            flex: 0 0 auto;
            margin: 0 !important;
            float: none !important;
        }

    .pull-right {
        float: none !important;
    }

    form .btnn.pull-right,
    form .btnSubmit.pull-right {
        display: block;
        width: 100%;
        margin-top: 12px !important;
    }
}

/* --------------------------------------------------------------------------
   12. Form Filing header action buttons (Pay / Create new filing / Form
   Import Options) - stop them overlapping in the cramped col-xs-7 column
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .modal-body .col-xs-7,
    .modal-body .col-xs-5,
    .modal-body .col-xs-3,
    .modal-body .col-xs-2 {
        width: 100%;
        text-align: left !important;
        padding-top: 12px !important;
    }

    .modal-body [style*="text-align: right"] {
        text-align: left !important;
    }

    .modal-body .btnn.small-btn,
    .modal-body .btnnDefault.payRedirect,
    .modal-body .btnInnerSingle,
    .modal-body .btnInnerBulk {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        white-space: nowrap;
        margin: 0 8px 8px 0 !important;
    }
}

/* --------------------------------------------------------------------------
   16. Pre-login layout (_LayoutSignup.cshtml): its navbar-toggle has no
   #navbar collapse target (no nav menu on login/register/OTP screens), so
   hide the dead toggle button and stop the logo from absolute-positioning
   itself (that rule in style.css was meant for the marketing header, which
   has nav items to offset against).
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .header-home-one .navbar-header .navbar-toggle[data-target="#navbar"] {
        display: none;
    }

    .header-home-one .navbar-header .navbar-brand {
        position: static;
        width: auto;
        max-width: 60%;
        float: none;
        margin: 0 auto;
        display: block;
        text-align: center;
    }

    .header-home-one .navbar-header .navbar-brand .logo-main-head {
        position: static;
        width: auto;
        max-width: 100%;
        padding: 6px 0;
    }

    .header-home-one .navbar-header {
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   13. Footer content (styleV2.css defines a global .container with
   overflow-x: auto !important / width: 95% !important intended for table
   pages; on the footer it clips/scrolls away the footer columns instead of
   letting them stack. Reset it here so the footer renders full content.)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .footer-home-one .container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: visible !important;
        display: block !important;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    .footer-home-one .row.q-footer-grid,
    .footer-home-one .row.q-footer-bottom {
        display: flex;
        flex-wrap: wrap;
        margin-left: 0;
        margin-right: 0;
    }

    .footer-home-one .q-footer-grid [class*="col-"],
    .footer-home-one .q-footer-bottom [class*="col-"] {
        width: 100%;
        float: none;
    }

    .FooterContent {
        padding-left: 0;
        font-size: 14px !important;
        line-height: 1.5;
        text-align: center;
        word-break: break-word;
        overflow-wrap: break-word;
        margin: 0;
    }

    .footer-home-one .padding-top-6 {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

/* --------------------------------------------------------------------------
   13b. Footer content - narrow phones only (320-576px). The 767px rule above
   already centers/wraps the text and is correct at 577-767px; below 577px
   the text was still getting clipped/misaligned, so tighten sizing/wrapping
   here without touching anything at >=577px.
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    .footer-home-one .FooterContent {
        font-size: 12px !important;
        line-height: 1.4;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 8px;
        white-space: normal;
        overflow-wrap: anywhere;
        height: auto;
    }
}

/* --------------------------------------------------------------------------
   14. Form Report filter dropdowns (Search.cshtml) - inline !important widths
   were removed from markup; size them properly here for mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .form-report-year-select,
    .form-report-form-select {
        width: 100%;
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   15. Table containers: allow internal horizontal scroll (fixes right-scroll
   regression caused by dashboard.css setting overflow-x: hidden previously).
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .quick1099-table,
    .dataTables_wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}


/* ==========================================================================
   MOBILE FOOTER — NORMAL DOCUMENT FLOW
   ==========================================================================
   Footer stays below the page content on mobile.
   It does NOT remain fixed and therefore cannot overlap cards/content.
   ========================================================================== */

@media (max-width: 991px) {

    body.dashboard-body {
        padding-bottom: 0 !important;
    }

        body.dashboard-body .footer-home-one {
            position: static !important;
            top: auto !important;
            right: auto !important;
            bottom: auto !important;
            left: auto !important;
            display: block !important;
            width: calc(100% - 16px) !important;
            max-width: none !important;
            min-width: 0 !important;
            margin: 16px 8px 8px 8px !important;
            border-radius: var(--q-radius-md, 12px) !important;
            float: none !important;
            clear: both !important;
            z-index: auto !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
            height: auto;
        }

            body.dashboard-body .footer-home-one .FooterContent {
                width: 100% !important;
                max-width: none !important;
                margin: 0 !important;
                padding: 12px 16px !important;
                text-align: center !important;
                font-size: 12px !important;
                line-height: 1.4 !important;
                box-sizing: border-box !important;
            }
}


/* ==========================================================================
   SMALL MOBILE — MATCH TOPBAR 6px GAP
   ========================================================================== */

@media (max-width: 576px) {

    body.dashboard-body .footer-home-one {
        width: calc(100% - 12px) !important;
        margin: 14px 6px 6px 6px !important;
        border-radius: 9px !important;
        height: auto;
    }

        body.dashboard-body .footer-home-one .FooterContent {
            padding: 10px 12px !important;
            font-size: 11px !important;
        }
}

/* =========================================================
   MOBILE SIDEBAR - ALWAYS EXPANDED
   ========================================================= */
@media (max-width: 768px) {

    /* Sidebar must have enough width for full menu text */
    body.dashboard-body .sidebar {
        width: 250px !important;
        min-width: 250px !important;
    }

    /* Even if JS adds sidebar-collapsed, keep it expanded on mobile */
    body.dashboard-body.sidebar-collapsed .sidebar {
        width: 250px !important;
        min-width: 250px !important;
    }

    /* Keep the full Quick1099 logo */
    body.dashboard-body .sidebar-brand {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

        body.dashboard-body .sidebar-brand img {
            display: block !important;
            max-width: 100%;
            height: auto;
        }

    /* Never show the small Q/favorite logo */
    body.dashboard-body .sidebar-brand-fav,
    body.dashboard-body .sidebar-toggle-logo {
        display: none !important;
    }

    /* Sidebar menu takes the complete width */
    body.dashboard-body .sidebar-menu {
        width: 100% !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Every menu item should use the full width */
    body.dashboard-body .sidebar-item {
        width: 100% !important;
    }

    /* IMPORTANT:
       Override collapsed-sidebar icon-only styling */
    body.dashboard-body.sidebar-collapsed .sidebar-link,
    body.dashboard-body .sidebar-link {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 10px 16px !important;
        text-align: left !important;
        gap: 10px !important;
    }

        /* Always show menu text */
        body.dashboard-body.sidebar-collapsed .sidebar-link > span:last-of-type,
        body.dashboard-body .sidebar-link > span:last-of-type {
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
            width: auto !important;
            max-width: none !important;
            white-space: nowrap !important;
            overflow: visible !important;
            text-align: left !important;
        }

        /* Icons stay visible */
        body.dashboard-body.sidebar-collapsed .sidebar-link .theme-icon,
        body.dashboard-body .sidebar-link .theme-icon,
        body.dashboard-body.sidebar-collapsed .sidebar-link .sidebar-svg-icon,
        body.dashboard-body .sidebar-link .sidebar-svg-icon {
            display: inline-flex !important;
            flex-shrink: 0 !important;
            width: 18px !important;
            height: 18px !important;
        }

    /* Parent menu arrow stays visible */
    body.dashboard-body.sidebar-collapsed .submenu-arrow,
    body.dashboard-body .submenu-arrow {
        display: block !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    /* Parent menu text MUST remain visible */
    body.dashboard-body.sidebar-collapsed .parent-menu-link > span,
    body.dashboard-body .parent-menu-link > span {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Submenus remain inside the sidebar */
    body.dashboard-body.sidebar-collapsed .submenu,
    body.dashboard-body .submenu {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding-left: 20px !important;
        transform: none !important;
    }

        /* Submenu links */
        body.dashboard-body.sidebar-collapsed .submenu .sidebar-link,
        body.dashboard-body .submenu .sidebar-link {
            padding-left: 35px !important;
        }

    /* Do not center icons in collapsed mode on mobile */
    body.dashboard-body.sidebar-collapsed .sidebar-menu {
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    /* Sidebar toggle stays available */
    body.dashboard-body .sidebar-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}
@media (max-width: 768px) {

    /* Child menus must stay inside the mobile sidebar */
    body.dashboard-body .submenu,
    body.dashboard-body.sidebar-collapsed .submenu {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: calc(100% - 24px) !important;
        margin: 0 12px 8px !important;
        padding: 0 !important;
        background: #fff !important;
        border: 1px solid #d9e1ea;
        border-radius: 8px;
        box-shadow: none !important;
    }

        /* Child menu items */
        body.dashboard-body .submenu li {
            width: 100% !important;
        }

        body.dashboard-body .submenu .sidebar-link {
            width: 100% !important;
            padding: 12px 16px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 10px !important;
        }

    /* Don't position submenu to the right on mobile */
    body.dashboard-body .submenu-arrow {
        margin-left: auto !important;
    }
}

/* --------------------------------------------------------------------------
   9. Footer overlap fix (mobile only)
   The footer is fixed on desktop with a fixed body padding reserved for it,
   but on mobile its content wraps to multiple lines and grows taller than
   the reserved space, hiding the bottom of page content/forms.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    #footer {
        position: static !important;
    }

    body {
        padding-bottom: 0 !important;
    }

    #return-to-top {
        bottom: 24px !important;
    }
}

/* --------------------------------------------------------------------------
   10. Form card clipping fix (mobile only)
   #payerform/#recipientform/.dialogg/#loginModal reuse Bootstrap modal
   classes as static page containers (not real modals). On mobile, the
   modal-content max-height + overflow rules clipped the form and hid the
   remaining fields with no way to scroll to them. Let the form grow and
   scroll naturally instead.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    #payerform .modal-content,
    #recipientform .modal-content,
    .dialogg .modal-content,
    #loginModal .modal-content {
        max-height: none !important;
        overflow: visible !important;
    }
}

@media (max-width: 768px) {

    .dashboard-alert {
        display: grid;
        grid-template-columns: 40px 1fr auto;
        grid-template-areas:
            "icon content close"
            "icon button close";
        align-items: start;
        gap: 10px 12px;
        padding: 14px;
    }

    .dashboard-alert-icon {
        grid-area: icon;
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        flex: 0 0 36px;
        border-radius: 50%;
    }

        .dashboard-alert-icon .theme-icon {
            width: 20px;
            height: 20px;
        }

    .dashboard-alert-content {
        grid-area: content;
        min-width: 0;
    }

    .dashboard-alert-title {
        font-size: 14px;
        line-height: 1.45;
    }

    .dashboard-alert-description {
        margin-top: 5px;
        font-size: 13px;
        line-height: 1.45;
    }

    .dashboard-alert-btn {
        grid-area: button;
        justify-self: start;
        margin-top: 2px;
        padding: 8px 14px;
        font-size: 13px;
        white-space: nowrap;
    }

    .dashboard-alert-close {
        grid-area: close;
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        padding: 0;
        margin: 0;
    }

        .dashboard-alert-close .theme-icon {
            width: 18px;
            height: 18px;
        }
}
@media (max-width: 480px) {

    .dashboard-alert {
        grid-template-columns: 36px 1fr 30px;
        gap: 8px 10px;
        padding: 12px;
    }

    .dashboard-alert-icon {
        width: 20px;
        height: 30px;
    }

        .dashboard-alert-icon .theme-icon {
            width: 18px;
            height: 18px;
        }

    .dashboard-alert-title {
        font-size: 13px;
    }

    .dashboard-alert-description {
        font-size: 12px;
    }

    .dashboard-alert-btn {
        padding: 7px 11px;
        font-size: 12px;
    }

    .dashboard-alert-close {
        width: 28px;
        height: 28px;
    }
}
@media (max-width: 768px) {
    .reminder-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}