/*
 * Launchpad — mobile / small-screen layer.
 *
 * Loaded after custom.css (see layouts/header.blade.php) so it only has to win on
 * specificity + order. Everything here is scoped to a max-width media query, so the
 * desktop layout is untouched. The shell collapses at 992px (mdk-drawer-layout
 * data-responsive-width), so the "tablet and below" block uses the same breakpoint;
 * the "phone" block (<= 575.98px) is for things that only need fixing on narrow screens.
 *
 * Rules of thumb used below:
 *  - Fixed header is 30px tall; content needs ~44px of top clearance (fixed-header-clearance.mdc).
 *  - Fixed bottom toolbar (AppBottomToolbar, 44px) needs matching bottom padding or it hides the last row.
 *  - Inputs must be >= 16px or iOS Safari zooms the whole page on focus.
 *  - Touch targets ~40px; the 24px hamburger gets an invisible 44px hit area instead of changing the 30px header.
 */

/* ------------------------------------------------------------------ */
/* Tablet and below (shell collapses to off-canvas sidebar at 992px)    */
/* ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Header: bigger hit area for the hamburger without growing the 30px bar. */
    .sidebar-toggle-mobile {
        position: relative;
        flex-shrink: 0;
    }
    .sidebar-toggle-mobile::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
    .clickup-style-header {
        padding: 0 10px;
    }
    .header-company-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .user-avatar-link,
    #notifications-app .nav-link {
        position: relative;
    }
    .user-avatar-link::after,
    #notifications-app .nav-link::after {
        content: "";
        position: absolute;
        inset: -8px;
    }

    /* Off-canvas sidebars: never wider than the screen, tall enough to scroll to the last link. */
    .clickup-primary-sidebar {
        height: calc(100dvh - 30px);
        height: calc(100vh - 30px);
        height: calc(100dvh - 30px);
    }
    .clickup-secondary-sidebar {
        max-width: calc(100vw - 52px);
    }
    .clickup-secondary-content {
        max-height: calc(100dvh - 30px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 48px;
    }
    .sidebar-menu-button {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Header clearance for every page that has not opted into its own *-page-body offset. */
    body:not([class*="-page-body"]) .mdk-drawer-layout__content.page-content {
        padding-top: 44px;
    }

    /* Pages that opted into a body class but whose root is not covered by a desktop :has() offset. */
    body.launchpad-page-body:not(:has(.user-guide-page)):not(:has(.fetch-ad-links-page)) .mdk-drawer-layout__content.page-content,
    body.ad-review-page-body .mdk-drawer-layout__content.page-content {
        padding-top: 44px !important;
    }

    /* Pages that have a bottom drawer toolbar need room below the last row. */
    .mdk-drawer-layout__content.page-content:has(.app-bottom-toolbar) {
        padding-bottom: 60px;
    }

    /* Wide containers that hard-code a max-width bigger than the screen. */
    .container,
    .container-fluid,
    .page-section {
        max-width: 100% !important;
    }

    /* Dropdowns, popovers, select2 panels and datepickers must fit inside the viewport. */
    .dropdown-menu {
        max-width: calc(100vw - 16px);
    }
    .select2-container--open,
    .select2-container--open .select2-dropdown {
        max-width: calc(100vw - 16px);
    }
    .flatpickr-calendar {
        max-width: calc(100vw - 16px);
    }

    .modal-content {
        overflow: hidden;
    }
    .modal-body {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .modal-footer {
        flex-wrap: wrap;
        gap: 6px;
    }
    .modal-footer > .btn {
        flex: 1 1 auto;
    }

    /* Anything marked as a data table scrolls sideways inside its own box, not the page. */
    .table-responsive,
    .table-scroll,
    .card-body > .table,
    .card > .table {
        -webkit-overflow-scrolling: touch;
    }
    .card-body > .table:not(.table-responsive),
    .card > .table:not(.table-responsive) {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }

    /* Long unbroken strings (URLs, ids, ad names) must wrap instead of widening the page. */
    .card-body,
    .modal-body {
        overflow-wrap: break-word;
    }
    pre {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* ------------------------------------------------------------------ */
/* Phones                                                               */
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* Stacked form groups: bootstrap-vue-next's label-cols="4" leaves a 33% label column on a
       phone. Stack label over control everywhere. */
    .b-form-group > .row > [class*="col-"],
    .b-form-group > .row > .col {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        text-align: left !important;
    }
    .b-form-group > .row > [class*="col-"] > label.col-form-label {
        padding-right: 0 !important;
        padding-bottom: 2px;
    }

    /* iOS Safari zooms the page when a focused control is < 16px. Never let that happen. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    select,
    textarea,
    .form-control,
    .custom-select,
    .form-select,
    .select2-container .select2-selection--single .select2-selection__rendered,
    .select2-search__field {
        font-size: 16px !important;
    }

    /* Comfortable tap size for form controls and buttons. */
    .form-control:not(textarea):not(.form-control-sm),
    .custom-select:not(.custom-select-sm),
    .form-select:not(.form-select-sm),
    select:not([multiple]):not([size]) {
        min-height: 40px;
    }
    .btn {
        min-height: 38px;
        gap: 0.3em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn.btn-sm,
    .btn-group-sm > .btn {
        min-height: 34px;
    }
    .btn-xl {
        min-height: 40px;
    }
    .dropdown-item {
        min-height: 40px;
        display: flex;
        align-items: center;
        white-space: normal;
    }
    .nav-tabs,
    .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar {
        display: none;
    }
    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        white-space: nowrap;
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    /* Headings: the theme sets display-size headings meant for a wide canvas. */
    h1,
    .h1 {
        font-size: 1.6rem;
        line-height: 1.25;
    }
    h2,
    .h2 {
        font-size: 1.35rem;
    }

    /* Cards and page sections: tighter gutters so forms get the width. */
    .container,
    .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }
    .card-body {
        padding: 0.9rem;
    }

    /* Toasts */
    .b-toaster,
    .toast-container {
        max-width: 100vw;
    }
}

/* ------------------------------------------------------------------ */
/* Very small phones                                                    */
/* ------------------------------------------------------------------ */
@media (max-width: 380px) {
    .header-company-name {
        font-size: 12px;
    }
}

/* ------------------------------------------------------------------ */
/* Launchpad board: filter panel + floating Launch Calendar bar         */
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    body.launchpad-page-body .accordion__menu-link .row > .col-sm-auto,
    body.launchpad-page-body .accordion__menu-link .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    body.launchpad-page-body .accordion__menu-link .form-control,
    body.launchpad-page-body .accordion__menu-link .custom-select,
    body.launchpad-page-body .accordion__menu-link .select2-container,
    body.launchpad-page-body .accordion__menu-link .flatpickr-wrapper,
    body.launchpad-page-body .accordion__menu-link .date-range-trigger {
        width: 100% !important;
        max-width: 100% !important;
    }
    body.launchpad-page-body .accordion__menu-link .search-form,
    body.launchpad-page-body .accordion__menu-link .form-group {
        width: 100% !important;
        max-width: 100% !important;
    }
    body.launchpad-page-body .accordion__menu-link .select2-container,
    body.launchpad-page-body .accordion__menu-link .select2-selection {
        width: 100% !important;
    }
    /* Keep the last board row clear of the fixed Launch Calendar bar. */
    body.launchpad-page-body:has(.launchpad-page) .mdk-drawer-layout__content.page-content {
        padding-bottom: 72px !important;
    }
}

/* Fetch Ad Links: the status-filter row is a nowrap flex row that runs off a phone screen. */
@media (max-width: 767.98px) {
    .filter-section {
        flex-wrap: wrap;
        row-gap: 6px;
    }
}

/* ------------------------------------------------------------------ */
/* Launch Campaign modal (LaunchNewAdGridCampaign)                      */
/* Its settings are two-column <table class="launch-table"> rows with   */
/* nowrap toggle tables; on a phone the right column is clipped by the  */
/* body's overflow-x:hidden. Stack label over control, let toggles wrap.*/
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .launch-campaign-modal-body {
        padding: 0.5rem !important;
        max-height: calc(100dvh - 90px) !important;
    }
    .launch-campaign-modal-body table.launch-table,
    .launch-campaign-modal-body table.launch-table > tbody,
    .launch-campaign-modal-body table.launch-table > tbody > tr,
    .launch-campaign-modal-body table.launch-table > tbody > tr > td,
    .launch-campaign-modal-body table.launch-table > tbody > tr > th {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
    }
    .launch-campaign-modal-body table.launch-table > thead,
    .launch-campaign-modal-body table.launch-table > colgroup {
        display: none;
    }
    .launch-campaign-modal-body table.launch-table > tbody > tr {
        padding: 6px 0 10px;
        border-bottom: 1px solid #eef0f3;
    }
    /* label cell */
    .launch-campaign-modal-body table.launch-table > tbody > tr > td:first-child {
        text-align: left !important;
        font-weight: 600;
        padding: 4px 6px 2px !important;
        border: 0 !important;
    }
    .launch-campaign-modal-body table.launch-table > tbody > tr > td:not(:first-child) {
        padding: 2px 6px !important;
        border: 0 !important;
        overflow-wrap: anywhere;
    }
    /* Segmented toggles: wrap instead of clipping. */
    .launch-campaign-modal-body table.inner-toggle,
    .launch-campaign-modal-body table.inner-toggle > tbody,
    .launch-campaign-modal-body table.inner-toggle > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        width: 100% !important;
        max-width: 100% !important;
    }
    .launch-campaign-modal-body table.inner-toggle > tbody > tr > td {
        flex: 1 1 auto;
        width: auto !important;
        white-space: normal !important;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .launch-campaign-modal-body input,
    .launch-campaign-modal-body select,
    .launch-campaign-modal-body textarea,
    .launch-campaign-modal-body .v-select,
    .launch-campaign-modal-body .form-control {
        max-width: 100% !important;
    }
    .launch-campaign-modal-body [style*="width: 200px"],
    .launch-campaign-modal-body [style*="min-width: 180px"] {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 767.98px) {
    .launch-campaign-modal-body table.inner-toggle td,
    .launch-campaign-modal-body table.inner-toggle td * {
        white-space: normal !important;
        overflow-wrap: break-word;
    }
    .launch-campaign-modal-body table.inner-toggle > tbody > tr > td > * {
        max-width: 100%;
    }
}

/* ------------------------------------------------------------------ */
/* Scale Winning Ads: bottom toolbar + drawers                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* 8 drawer buttons do not fit 390px: let the bar scroll sideways instead of clipping the last ones. */
    .app-bottom-toolbar {
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .app-bottom-toolbar::-webkit-scrollbar { display: none; }
    .app-bottom-toolbar .app-bottom-toolbar-btn {
        flex: 0 0 auto;
        min-width: 48px;
        padding: 0 12px;
    }

    /* Win Rate / Creative Age / Strategist Spend: controls above results instead of side by side. */
    .win-rate-layout {
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    .win-rate-layout > .win-rate-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        border-right: none !important;
        border-bottom: 1px solid #e5e7eb;
        overflow: visible !important;
    }
    .win-rate-layout > :not(.win-rate-sidebar):not([class*="resize"]):not([class*="handle"]) {
        flex: 0 0 auto !important;
        min-height: 260px;
        width: 100% !important;
    }
    .win-rate-layout [class*="split-handle"],
    .win-rate-layout [class*="resizer"],
    .ai-sessions-resizer { display: none !important; }

    /* AI chat header: model / reasoning controls wrap instead of running off screen. */
    .ai-drawer-header { flex-wrap: wrap; row-gap: 4px; height: auto !important; min-height: 44px; }
    .ai-header-right { flex-wrap: wrap; max-width: 100%; gap: 6px; }
}

/* Small phones only: full-width modals (tablets keep Bootstrap's own modal widths). */
@media (max-width: 575.98px) {
    /* Bootstrap-style modals: use the screen. */
    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl,
    .modal-dialog.modal-md,
    .modal-dialog.modal-sm {
        max-width: calc(100vw - 16px) !important;
        margin: 8px auto !important;
    }
    .modal-dialog:not(.modal-dialog-scrollable) .modal-content {
        max-height: calc(100dvh - 16px);
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }
    /* Admin/other modals lay fields out with fixed col-3/col-4: one per row on a phone. */
    .modal-body .row > .col-3,
    .modal-body .row > .col-4,
    .modal-body .row > [class*="col-md-"],
    .modal-body .row > [class*="col-sm-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .btn-close,
    .modal-header .close {
        min-width: 36px;
        min-height: 36px;
    }
}

/* ------------------------------------------------------------------ */
/* Phone overlays that must open fully on screen                        */
/* ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    /* Header notifications bell: the 300px menu sits at the bell's left edge and ran off the right side. */
    .header-notifications .dropdown-menu {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        top: 34px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        max-height: calc(100dvh - 48px);
        overflow-y: auto;
    }
}

@media (max-width: 767.98px) {
    /* Scale Winning Ads toolbar menus (clients/accounts/status/columns/filters/view options) were
       positioned from the button and ended up off the left/right/bottom edge. On a phone they become
       bottom sheets sitting just above the 44px bottom toolbar. */
    .client-filter-menu,
    .status-filter-menu,
    .column-selector-dropdown,
    .filter-dropdown.filter-dropdown--portal {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        top: auto !important;
        bottom: 52px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: calc(100dvh - 150px) !important;
        overflow-y: auto !important;
        z-index: 1080 !important;
        transform: none !important;
    }

    /* Calendars: centred, always inside the viewport. */
    .flatpickr-calendar.open,
    .flatpickr-calendar.inline {
        max-width: calc(100vw - 16px);
    }
    .flatpickr-calendar.open:not(.inline) {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: 12vh !important;
        transform: translateX(-50%);
        z-index: 100000;
    }

    /* AI chat: history toggle must not sit under the wrapped model selector. */
    .ai-header-left {
        flex: 1 0 100% !important;
        order: -1;
    }
}