/* TABLE OF CONTENTS (generated once, Oct 2026; line numbers are approximate and drift as rules are added, search for the heading text)
 *
 * This file is served directly (public/css/custom.css, cache-busted by filemtime) and is NOT bundled by Vite. Do not split it:
 * the cascade depends on source order (many rules say "must come after ..."; there are >1,000 !important). mobile.css and
 * select2-fixes.css are linked after it and win ties on purpose. Any new page needs a body class and 52px header clearance here
 * (.cursor/rules/fixed-header-clearance.mdc). Scoped component CSS belongs in the component, not here.
 *
 *   32-122  Utility classes, loader, launch-backdrop hiding, admin sticky header cells
 *  123-219  Button theme override, ClickUp font stack
 *  220-594  Fixed header, notification bell, dropdown overflow escapes (menus inside tables/cards)
 *  595-781  Two-panel sidebar, secondary sidebar, content offsets
 *  782-861  Launch progress minimized tab
 *  862-993  Content width variables, sidebar alignment, account-status offsets, mobile adjustments
 *  994-1153 Date picker (flatpickr) calendar fixes, first set
 * 1154-1455 Per-page layout + fixed-header clearance (launchpad, admin, account status, settings, invoice calculator, creative output)
 * 1456-2060 Admin panel width / scroll / table overrides, launchpad overflow overrides (order matters: later rules undo earlier ones)
 * 2061-2181 Multi-select artefact fixes
 * 2182-2248 Launch progress modal
 * 2249-2329 Accounts-table row overrides, hidden bootstrap-vue-next modals
 * 2330-2509 Vue-Select v4 styling
 * 2510-2637 Launch table (form controls inside table cells)
 * 2638-2915 Date range picker modal + inline flatpickr
 * 2916-3261 Date range trigger, launchpad filter-panel alignment, SingleDatePicker calendar
 * 3262-3314 Select2 filter fixes
 * 3315-3520 Scale Winning Ads shell, alerts, toolbar, exports (owned by the SWA track)
 * 3521-3641 Fixed-header clearance for the inspiration, hook library, best ads and reddit pages; creative sidebar
 * 3642-3678 ClickUp brief modal (.cu-modal-*)
 * 3679-3838 SWA nested breakdown dropdown and portaled menus
 * 3839-3896 Carousel flag, production board, ad review clearance, custom field manager
 */

.onStyle{color:CornflowerBlue!important}

.boldStyle{font-weight: bold;}

.turnOffBorder{
  border: none;
  outline: none !important;
}
.loaderCustom{  /* Loader Div Class */
    position: absolute;
    top:0px;
    right:0px;
    width:100%;
    height:100%;
    background-color:#eceaea;
    background-image: url('../images/ajax-loader.gif');
    background-size: 100px;
    background-repeat:no-repeat;
    background-position:center;
    z-index:10000000;
    opacity: 0.4;
    filter: alpha(opacity=40);
}
/* Hide Bootstrap modal backdrop during campaign launches - multiple selectors for maximum coverage */
body.launching .modal-backdrop,
body.launching .modal-backdrop.show,
body.launching .modal-backdrop.fade {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
    height: 0 !important;
    width: 0 !important;
}

/* Also hide any backdrop that appears (defensive) */
/* Note: Backdrop hiding is handled by body.launching selector below */
body.launching .modal-backdrop:not(.keep-backdrop) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.customField{
    display: inline-block;
    padding-right: 15px;
}
.txtarea {
    font-family: 'Times New Roman';  /* a proportional font makes it more difficult to calculate the position */
    font-size: 14px;
    line-height: 16px;
    padding: 24px 32px 16px 8px;    /* different paddings so position computations don't accidentally return a "correct" result */
    text-indent: 20px;
}

table.flexibleColumns th, td {border-right:1px solid #e9edf2;}

.hideRow{
    display: none;
}

.fixedHeader thead {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
}

/* Sticky header cells inside admin table scroll areas (prefer th-level sticky for frozen columns). */
.admin-table-scroll .fixedHeader thead th,
.admin-table-scroll .admin-resizable-table thead th {
    position: sticky !important;
    top: 0;
    background-color: #f8f9fa !important;
    z-index: 25;
    box-shadow: inset 0 -1px 0 #dee2e6;
}

/* Legacy thead rule — keep scroll container context */
.admin-table-scroll .fixedHeader thead {
    position: static;
    box-shadow: none;
    background-color: transparent;
}

.unsetOverflowX {
    overflow-x: unset
}

/* Override Bootstrap primary buttons to use blue instead of purple */
.btn-primary,
button.btn-primary,
a.btn-primary,
.btn.btn-primary,
button.btn.btn-primary,
.btn-primary.btn-xl,
button.btn-primary.btn-xl,
.btn.btn-primary.btn-xl {
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
button.btn-primary:hover,
button.btn-primary:focus,
button.btn-primary:active,
button.btn-primary.active {
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
    color: #fff !important;
}

.btn-outline-primary,
button.btn-outline-primary,
a.btn-outline-primary,
.btn.btn-outline-primary,
button.btn.btn-outline-primary,
.btn-outline-primary.btn-xl,
button.btn-outline-primary.btn-xl,
.btn.btn-outline-primary.btn-xl {
    color: #007bff !important;
    border-color: #007bff !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
button.btn-outline-primary:hover,
button.btn-outline-primary:focus,
button.btn-outline-primary:active,
button.btn-outline-primary.active {
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: #fff !important;
}

/*
 * Outline success/warning — DISABLED + hover was invisible.
 * app-internal.css (compiled theme; resources/scss is NOT in the Vite build) forces
 * `.btn-outline-{success,warning}:hover { color: #fff }` late in the file, which beats the
 * earlier `:disabled { color: <variant> }` rule at equal specificity, while the theme's
 * `[dir] …:disabled { background-color: transparent }` still wins over the hover fill.
 * Result: hovering a disabled button (e.g. the saved-extension "Add") showed white text on
 * a transparent background. Keep the variant colour on disabled hover, like every other
 * outline variant already does. Enabled hover (filled + white text) is unchanged.
 */
.btn-outline-success:disabled:hover,
.btn-outline-success.disabled:hover {
    color: #77c13a;
}

.btn-outline-warning:disabled:hover,
.btn-outline-warning.disabled:hover {
    color: #e4a93c;
}

/* ClickUp Font Stack - Apply globally */
body,
html {
    font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Apple Color Emoji", "Arial", sans-serif, "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

/* Apply to all text elements */
h1, h2, h3, h4, h5, h6,
p, span, div, a, button, input, textarea, select, label,
.sidebar-menu-text, .header-company-name, .clickup-section-title {
    font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Apple Color Emoji", "Arial", sans-serif, "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

/* Exclude icon fonts from font-family override */
.material-icons,
.fa,
.fas,
.far,
.fab,
[class^="fa-"],
[class*=" fa-"] {
    font-family: "Material Icons", "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
}

/* ClickUp-style Header */
.clickup-style-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e9edf2;
    padding: 0 16px;
    min-height: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.header-company-name {
    font-size: 14px;
    font-weight: 600;
    color: #2d3436;
    white-space: nowrap;
    margin-left: 0;
    margin-right: auto;
    line-height: 1;
    order: 1;
}

.sidebar-toggle-mobile {
    min-width: 24px;
    height: 24px;
    gap: 4px;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background-color: transparent;
    cursor: pointer;
    color: #2d3436;
    order: 0;
    margin-right: 8px;
}

.sidebar-toggle-mobile:hover,
.sidebar-toggle-mobile:focus-visible {
    background-color: #f5f6f7;
}

.sidebar-toggle-mobile:focus-visible {
    border: 1px solid #007bff;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1);
    outline: none;
}

.sidebar-toggle-mobile:active {
    background-color: #e9edf2;
}

.header-user-section {
    display: flex;
    align-items: center;
    gap: 4px;
    order: 2;
    margin-left: auto;
}

/* Compact notifications bell — theme uses 2rem icons meant for a tall navbar;
   this header is only 30px tall (avatar is 24px), so size the bell to match. */
#notifications-app {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
}

.header-user-section .dropdown-notifications {
    margin: 0 !important;
    line-height: 1;
}

.header-user-section .dropdown-notifications > .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    color: #2d3436;
    border-radius: 4px;
}

.header-user-section .dropdown-notifications > .nav-link:hover,
.header-user-section .dropdown-notifications > .nav-link:focus-visible {
    background-color: #f5f6f7;
}

.header-user-section .dropdown-notifications > .nav-link .material-icons {
    font-size: 20px !important;
    line-height: 1;
}

.header-user-section .dropdown-notifications .badge-notifications {
    position: absolute;
    top: -3px;
    right: -5px;
    margin-left: 0;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 9px;
    line-height: 14px;
    border-radius: 7px;
}

.user-avatar-link {
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid transparent;
    background-color: transparent;
}

.user-avatar-link:hover,
.user-avatar-link:focus-visible {
    background-color: #f5f6f7;
}

.user-avatar-link:focus-visible {
    border: 1px solid #007bff;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1);
    outline: none;
}

.user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #007bff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 11px;
    overflow: hidden;
    flex-shrink: 0;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-initials {
    line-height: 1;
}

/* Remove default navbar styling */
.clickup-style-header.navbar {
    padding: 0;
}

.clickup-style-header .navbar-nav {
    margin: 0;
}

/* Adjust header layout container */
.mdk-header__content {
    padding: 0;
}

#header.mdk-header {
    min-height: 30px;
    height: 30px;
    padding: 0;
}

.mdk-header.js-mdk-header {
    min-height: 30px;
    height: 30px;
}

/* Remove default navbar padding and margins */
.clickup-style-header.navbar-expand {
    padding: 0 16px;
}

.clickup-style-header .nav-item {
    margin: 0;
}

.clickup-style-header .dropdown-menu {
    margin-top: 8px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #e9edf2;
}

/* Make dropdown menus dynamically sized based on content */
/* Allow dropdown to grow naturally, but add scrolling if it exceeds viewport */
.dropdown-menu {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    position: absolute !important;
    z-index: 9999 !important; /* Higher z-index to appear above all containers */
    /* Let Bootstrap control display - don't force block */
}

/* If dropdown gets too large, add scrolling (but only if it exceeds viewport) */
.dropdown-menu.show {
    max-height: calc(100vh - 50px) !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
}

/* Launchpad/SWA portaled menus use viewport coords — override absolute !important above */
body > .dropdown-menu.launchpad-table-dropdown-portaled {
    position: fixed !important;
    display: block !important;
    visibility: visible !important;
    z-index: 99999 !important;
}

/* Ensure dropdown can escape parent containers with overflow hidden */
/* Only allow overflow for dropdowns within table-responsive, not the table itself */
.table-responsive.unsetOverflowX {
    overflow-x: auto !important;
    overflow-y: clip !important; /* Clip prevents scrollbar while allowing horizontal scroll */
    position: relative; /* Create positioning context */
}

/* Ensure card containers don't clip dropdowns when they contain tables */
.card .table-responsive:not(.admin-table-scroll) {
    overflow-x: auto !important;
    overflow-y: clip !important; /* Clip prevents scrollbar while allowing horizontal scroll */
    position: relative; /* Create positioning context */
}

/* Ensure table containers don't clip dropdowns */
.table-responsive:not(.admin-table-scroll) {
    overflow-x: auto !important;
    overflow-y: clip !important; /* Clip prevents scrollbar while allowing horizontal scroll */
    position: relative; /* Create positioning context */
}

/* Ensure card containers don't clip dropdowns */
.card {
    overflow: visible !important;
}

/* But restore overflow for card content that's not dropdowns */
.card > .card-body,
.card > .card-header,
.card > .card-footer {
    overflow: visible !important;
    position: relative; /* Create positioning context */
}

/* Ensure dropdowns in table cells can escape */
.table-responsive .dropdown,
.table .dropdown {
    position: static; /* Allow dropdown menu to escape container */
}

/* Ensure table cells don't clip dropdowns */
.table td,
.table th {
    overflow: visible !important;
    position: relative !important;
}

.table-responsive .dropdown-menu,
.table .dropdown-menu {
    position: absolute !important;
    z-index: 9999 !important;
    /* Bootstrap will position it correctly via JavaScript */
    /* Ensure dropdown can escape table cell boundaries */
    margin-top: 4px !important;
}

/* When dropdown is shown, ensure it can escape all containers */
/* JavaScript will handle positioning with position: fixed and width calculation */
.table-responsive .dropdown.show .dropdown-menu,
.table .dropdown.show .dropdown-menu {
    /* High z-index to appear above all content */
    z-index: 10000 !important;
    /* JavaScript will set width dynamically based on content measurement */
    /* Remove constraints that might prevent proper sizing */
    max-width: none !important;
    /* Ensure dropdown menu itself can expand to fit content */
    overflow: visible !important;
    /* Ensure items don't overflow the menu */
    box-sizing: border-box !important;
}

/* Prevent card from adding scrollbars, but allow dropdowns to escape */
.card.enable-scroll {
    overflow-y: visible !important; /* Allow dropdowns to escape */
    overflow-x: visible !important; /* Allow dropdowns to escape */
    position: relative; /* Create positioning context */
}

/* The table-responsive inside will handle scrolling */
.card.enable-scroll .table-responsive {
    overflow-x: auto !important;
    overflow-y: clip !important; /* Clip prevents scrollbar while allowing horizontal scroll */
}

/* Ensure dropdown items are fully visible */
.dropdown-item {
    white-space: nowrap !important;
    overflow: visible !important;
    display: block !important;
    text-overflow: clip !important; /* Don't truncate with ellipsis */
    box-sizing: border-box !important; /* Include padding in width calculations */
}

/* Specifically for dropdown items in tables - ensure they fit within menu */
.table-responsive .dropdown-menu .dropdown-item,
.table .dropdown-menu .dropdown-item {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    /* JavaScript will set menu width dynamically based on content */
    /* Items should fill the menu width */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure dropdown container doesn't clip */
.dropdown {
    position: relative !important;
    overflow: visible !important;
}

/* Specifically for dropdowns in tables - ensure they can escape */
.table .dropdown,
.table-responsive .dropdown {
    overflow: visible !important;
    position: relative !important;
}

/* Table cells must allow overflow for dropdowns */
.table td,
.table th {
    overflow: visible !important;
    position: relative !important;
}

/* Table rows must allow overflow */
.table tr {
    overflow: visible !important;
}

/* Table itself must allow overflow */
.table {
    overflow: visible !important;
}

/* Mobile adjustments */
@media screen and (max-width: 650px) {
    .header-company-name {
        font-size: 13px;
        margin-left: 0;
    }
}

/* ClickUp-style Two-Panel Sidebar */
.clickup-primary-sidebar {
    position: fixed;
    left: 0;
    top: 30px;
    width: 52px;
    height: calc(100vh - 30px);
    background-color: #ffffff;
    border-right: 1px solid #e9edf2;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.clickup-primary-menu {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.clickup-primary-item {
    margin: 0;
    padding: 0;
}

.clickup-primary-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 6px;
    color: #6b7280;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.clickup-primary-link:hover {
    background-color: #f5f6f7;
    color: #2d3436;
}

.clickup-primary-item.active .clickup-primary-link {
    background-color: #007bff;
    color: #ffffff;
}

.clickup-primary-link .material-icons {
    font-size: 20px;
}

/* Secondary Sidebar - overlays content */
.clickup-secondary-sidebar {
    position: fixed;
    left: 52px;
    top: 30px;
    width: 0 !important;
    height: calc(100vh - 30px);
    background-color: #ffffff;
    border-right: 1px solid #e9edf2;
    z-index: 1001; /* Higher than primary sidebar to ensure it overlays content */
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: none;
    flex-direction: column;
    min-width: 0;
}

/* Main content area - pushed by primary sidebar, secondary sidebar overlays */
.mdk-drawer-layout__content {
    margin-left: 52px !important; /* Primary sidebar width - pushes content */
    width: calc(100% - 52px) !important;
    max-width: calc(100% - 52px) !important;
    box-sizing: border-box;
}

.clickup-secondary-sidebar.open {
    width: var(--secondary-sidebar-width, 180px) !important;
    min-width: max-content;
    display: flex;
}

.clickup-secondary-sidebar.open .clickup-secondary-menu {
    width: max-content;
    min-width: 100%;
}

.clickup-close-secondary {
    background: none;
    border: none;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-left: auto;
    flex-shrink: 0;
}

.clickup-close-secondary:hover {
    background-color: #f5f6f7;
    color: #2d3436;
}

.clickup-close-secondary .material-icons {
    font-size: 18px;
}

.clickup-secondary-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    width: 100%;
}

.clickup-secondary-menu {
    width: 100%;
    min-width: max-content;
    padding: 0;
}

.clickup-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid #e9edf2;
}

.clickup-section-title span {
    flex: 1;
}

.clickup-secondary-menu .sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.clickup-secondary-menu .sidebar-menu-item {
    margin: 0;
    margin-right: 0 !important;
    border-radius: 0 !important; /* Remove rounded corners */
}

.clickup-secondary-menu .sidebar-menu-button {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    color: #2d3436;
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    white-space: nowrap;
    width: 100%;
    margin-right: 0 !important;
    border-radius: 0 !important; /* Remove rounded corners */
}

.clickup-secondary-menu .sidebar-menu-button:hover {
    background-color: #f5f6f7;
    color: #2d3436;
}

.clickup-secondary-menu .sidebar-menu-item.active .sidebar-menu-button {
    background-color: #f0f4ff;
    color: #007bff;
    border-left-color: #007bff;
    font-weight: 600;
    border-radius: 0 !important; /* Remove rounded corners on active state */
}

/* Launch Progress Minimized Tab */
.launch-progress-minimized-tab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    min-width: 300px;
    max-width: 400px;
    background: #ffffff;
    border: 2px solid #007bff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    cursor: pointer;
    z-index: 1040; /* Below Bootstrap modals (1050) but above most content */
    transition: opacity 0.3s ease, transform 0.3s ease;
    overflow: hidden;
    /* Prevent interference with Material Design Kit layout calculations */
    contain: layout style paint;
    /* Use transform instead of will-change to avoid triggering MDK layout recalculation */
    transform: translateZ(0);
}

.launch-progress-minimized-tab:hover {
    box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4);
    transform: translateY(-2px);
}

.minimized-tab-content {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.minimized-tab-content i {
    color: #007bff;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.minimized-tab-text {
    flex: 1;
    min-width: 0;
}

.minimized-tab-text strong {
    display: block;
    color: #333;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.minimized-tab-text small {
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.minimized-tab-progress {
    width: 100%;
    height: 4px;
    background-color: #e9ecef;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}

.minimized-progress-bar {
    height: 100%;
    background-color: #007bff;
    transition: width 0.3s ease;
    border-radius: 2px;
}

.clickup-secondary-menu .sidebar-menu-text {
    font-size: 14px;
    line-height: 1.5;
    margin-right: 0 !important;
}

/* This rule is now handled by the CSS variable-based rule above */

/* Content resizing is now handled by CSS variables, no need for body class override */

/* Calculate dynamic width - will be set by JavaScript */
.clickup-secondary-sidebar.open {
    --secondary-sidebar-width: 180px;
}

/* Ensure content containers respect the available width */
.mdk-drawer-layout__content .container,
.mdk-drawer-layout__content .container-fluid,
.mdk-drawer-layout__content .page-section {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto; /* Allow horizontal scroll if content is too wide */
}

/* Specifically for admin panel - remove all width constraints */
.mdk-drawer-layout__content .admin-panel-container,
.mdk-drawer-layout__content .admin-panel-container.container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hide old sidebar */
#default-drawer {
    display: none !important;
}

/* Ensure proper layout structure */
.mdk-drawer-layout {
    position: relative;
}

.mdk-drawer-layout__content {
    position: relative;
    /* Content stays full width - sidebars overlay with position: fixed */
}

/* Align page content with sidebar icon - top of filter should align with top of sidebar icon */
/* Sidebar icon starts at top: 30px (header height), so filter should also start at 30px */
.page-section {
    padding-top: 0 !important;
    margin-bottom: 8px !important;
}

/* Account Status page needs padding to account for fixed header */
/* REMOVED - Now handled by body.account-status-page-body selector below */

.create-campaign-page .page-section,
.ad-grid-page .page-section {
    padding-top: 0 !important;
    margin-top: 0;
}

/* Align filter card top with sidebar icon - both start at 30px from top */
.create-campaign-page .card:first-child,
.ad-grid-page .card:first-child {
    margin-top: 0;
    padding-top: 0;
}

/* Adjust container padding to align with sidebar */
.create-campaign-page .container,
.ad-grid-page .container {
    padding: 0 !important;
    margin-top: 0;
}

/* Remove top margin from first card to align with sidebar icon */
.create-campaign-page .create-campaign-container > .card:first-child,
.ad-grid-page .page-section > .card:first-child {
    margin-top: 0;
    border-top: none;
}

/* Ensure content starts at the same vertical position as sidebar icon */
.mdk-drawer-layout__content {
    padding-top: 0;
}

.create-campaign-page,
.ad-grid-page {
    padding-top: 0;
}

/* Ensure the filter card aligns with the sidebar icon top (30px from top) */
.create-campaign-page .create-campaign-container,
.ad-grid-page .page-section {
    margin-top: 0;
    padding-top: 0;
}

/* Remove any default margins that might push content down */
.mdk-drawer-layout__content .container {
    margin-top: 0;
    padding-top: 0;
}

/* Mobile adjustments */
@media screen and (max-width: 992px) {
    .clickup-primary-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .clickup-primary-sidebar.open {
        transform: translateX(0);
    }
    
    .clickup-secondary-sidebar {
        left: 0;
    }
    
    /* Sidebar is an off-canvas overlay below 992px (toggled by the hamburger),
       so content reclaims the full width. Must override the desktop !important
       margin-left/width/max-width rules above. */
    .mdk-drawer-layout__content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .clickup-secondary-sidebar.open ~ .mdk-drawer-layout__content {
        margin-left: 0 !important;
    }
}

/* Date Picker Calendar Fixes - More aggressive selectors */
.flatpickr-calendar {
    margin: 0 !important;
    padding-top: 0 !important;
}

.flatpickr-calendar .flatpickr-months {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 4px !important;
}

.flatpickr-calendar .flatpickr-weekdays {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
}

.flatpickr-calendar .flatpickr-innerContainer {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Allow calendar to show all rows including next month days */
.flatpickr-calendar .flatpickr-days {
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
}

/* CRITICAL: Override parent container overflow that clips the date picker modal */
.accordion__menu,
.accordion__menu.collapse,
.accordion__menu.collapse.show,
.card-header,
.flatpickr-wrapper,
.card,
.accordion,
.date-range-combined,
.date-range-combined .form-group {
    overflow: visible !important;
}


/* Allow dayContainer to grow to fit all 6 rows (including next month days) */
.flatpickr-calendar .dayContainer {
    max-height: none !important; /* Remove height constraint - let it grow */
    min-height: auto !important;
    overflow: visible !important; /* Show all days including next month */
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    height: auto !important;
}

/* Show next month days but make them faded */
.flatpickr-calendar .flatpickr-day.nextMonthDay {
    display: flex !important;
    visibility: visible !important;
    opacity: 0.3 !important; /* Make next month days slightly faded */
    color: #999 !important;
}

/* Show days 36-42 (next month's first 7 days) in the last row */
.flatpickr-calendar .dayContainer > .flatpickr-day:nth-child(n+36) {
    display: flex !important;
    visibility: visible !important;
    opacity: 0.3 !important; /* Make next month days slightly faded */
    color: #999 !important;
}

/* Ensure each day is exactly 1/7 of the width - force consistent sizing */
.flatpickr-calendar .flatpickr-day {
    width: calc(100% / 7) !important;
    max-width: calc(100% / 7) !important;
    flex: 0 0 calc(100% / 7) !important;
    min-width: calc(100% / 7) !important;
    box-sizing: border-box !important;
}

/* Ensure dayContainer maintains 7 columns even in last row */
.flatpickr-calendar .dayContainer {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

/* Hide the hidden input that's causing layout issues */
.flatpickr-calendar .flatpickr-input {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Alternative selector for the input */
.date-range-calendar .flatpickr-input,
.date-range-calendar input[data-input="true"],
.date-range-calendar .calendar-input {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Remove any height/padding/margin from the date-range-calendar container */
.date-range-calendar {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 0 !important;
}

/* Ensure the container doesn't push content down */
.date-range-calendar > * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Force dayContainer to show 6 weeks (up to 42 days) and maintain 7 columns */
.flatpickr-calendar .dayContainer {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    justify-content: flex-start !important;
    max-height: 234px !important; /* 6 weeks * 39px = 234px */
    overflow: visible !important;
}

/* Ensure all rows maintain 7 columns - prevent last row from spreading */
.flatpickr-calendar .dayContainer > .flatpickr-day {
    flex-basis: calc(100% / 7) !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

/* Show the 6th row with next month's days (days 36-42) - show only as many as needed to complete the last row */
/* Days 36-42 represent the first 7 days of the next month */
/* We want to show them in the last row, but only as many as needed to complete the 7-column layout */
.flatpickr-calendar .dayContainer > .flatpickr-day:nth-child(n+36) {
    display: flex !important;
    visibility: visible !important;
    opacity: 0.3 !important; /* Make next month days slightly faded */
    color: #999 !important;
    height: auto !important;
    width: calc(100% / 7) !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove margin/separation between sidebar and content - remove dark background */
body {
    background-color: #ffffff !important;
}

/* Prevent double scrollbars on launchpad - ensure body is the only scrollable element */
html.launchpad-page-body,
body.launchpad-page-body {
    overflow-x: hidden !important;
    overflow-y: auto !important; /* Body should scroll */
    height: auto !important;
    max-height: none !important;
}

/* Ensure html doesn't have min-height constraint on launchpad */
html:has(body.launchpad-page-body) {
    min-height: auto !important;
    height: auto !important;
}

body.launchpad-page-body .mdk-header-layout__content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

body.launchpad-page-body .mdk-drawer-layout {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

body.launchpad-page-body .mdk-drawer-layout__content {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important; /* Override min-height: 100vh from SCSS */
}

/* Ensure launchpad pages (including user-guide) have padding for fixed header */
/* Use same approach as account-status - add padding to page-content */
/* But launchpad and create-campaign pages need no extra padding - they have their own layout */
/* Only apply padding to user-guide page */
body.launchpad-page-body:has(.user-guide-page) .mdk-drawer-layout__content.page-content {
    padding-top: 64px !important; /* Account for fixed header - for user-guide */
    min-height: calc(100vh - 64px) !important;
}

/* Launchpad and create-campaign pages - need padding for fixed header */
/* Position content to align with sidebar icons (icons start at top=38px with 8px padding = 46px) */
body.launchpad-page-body:has(.launchpad-page) .mdk-drawer-layout__content.page-content,
body.launchpad-page-body:has(.create-campaign-page) .mdk-drawer-layout__content.page-content,
body.launchpad-page-body:has(.quick-add-files-page) .mdk-drawer-layout__content.page-content {
    padding-top: 38px !important; /* Align with top of sidebar icons */
}

/* Admin Panel page - ensure content is below fixed header */
/* Allow admin panel page to extend beyond viewport */
html.admin-panel-page-body,
body.admin-panel-page-body {
    overflow-x: hidden !important;
    overflow-y: auto !important; /* Allow page to scroll vertically */
    height: auto !important;
    min-height: 100vh !important; /* Ensure at least viewport height */
    max-height: none !important;
}

/* Ensure the entire layout hierarchy allows scroll */
body.admin-panel-page-body .mdk-header-layout {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

body.admin-panel-page-body .mdk-header-layout__content {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

body.admin-panel-page-body .mdk-drawer-layout {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* Override the general .mdk-drawer-layout__content padding-top: 0 rule */
body.admin-panel-page-body .mdk-drawer-layout__content,
body.admin-panel-page-body .mdk-drawer-layout__content.page-content {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important; /* Override min-height: 100vh from SCSS */
    padding-top: 64px !important; /* Account for fixed header - push content below */
    /* Ensure content can extend beyond viewport */
    position: relative !important;
}

body.admin-panel-page-body .page-section {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Also override the header layout content min-height */
body.launchpad-page-body .mdk-header-layout .mdk-drawer-layout__content {
    min-height: 0 !important; /* Override min-height: calc(100vh - navbar-height) from SCSS */
}

body.launchpad-page-body .page-section {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

.mdk-drawer-layout__content {
    background-color: #ffffff !important;
    /* Content pushed by primary sidebar (52px margin-left), secondary sidebar overlays */
}

body.secondary-sidebar-open .mdk-drawer-layout__content {
    background-color: #ffffff !important;
    /* Content remains pushed by primary sidebar, secondary sidebar overlays without pushing */
}

.page-content {
    background-color: #ffffff !important;
}

/* Account Status page - ensure content is below fixed header */
/* Follow same approach as Launchpad - use overflow visible and padding-top */
body.account-status-page-body .mdk-header-layout__content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

body.account-status-page-body .mdk-drawer-layout {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Override the general .mdk-drawer-layout__content padding-top: 0 rule (line 830) */
/* Use most specific selector to ensure it overrides */
/* Match top padding to left margin (52px sidebar width) for consistent spacing */
body.account-status-page-body .mdk-header-layout .mdk-drawer-layout .mdk-drawer-layout__content,
body.account-status-page-body .mdk-header-layout .mdk-drawer-layout .mdk-drawer-layout__content.page-content,
body.account-status-page-body .mdk-drawer-layout__content,
body.account-status-page-body .mdk-drawer-layout__content.page-content {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important; /* Override min-height: 100vh from SCSS */
    padding-top: 52px !important; /* Match left margin (52px sidebar width) for consistent spacing */
}

body.account-status-page-body .page-section {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure container has no top padding/margin - content should start right after header padding */
body.account-status-page-body .container.account-status-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Settings page - ensure content is below fixed header */
body.settings-page-body .mdk-header-layout__content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

body.settings-page-body .mdk-drawer-layout {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

body.settings-page-body .mdk-header-layout .mdk-drawer-layout .mdk-drawer-layout__content,
body.settings-page-body .mdk-header-layout .mdk-drawer-layout .mdk-drawer-layout__content.page-content,
body.settings-page-body .mdk-drawer-layout__content,
body.settings-page-body .mdk-drawer-layout__content.page-content {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding-top: 52px !important; /* Match left margin (52px sidebar width) for consistent spacing */
}

body.settings-page-body .page-section {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.settings-page-body .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Invoice Calculator — same fixed-header clearance as Settings */
body.invoice-calculator-page-body .mdk-header-layout__content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

body.invoice-calculator-page-body .mdk-drawer-layout {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

body.invoice-calculator-page-body .mdk-header-layout .mdk-drawer-layout .mdk-drawer-layout__content,
body.invoice-calculator-page-body .mdk-header-layout .mdk-drawer-layout .mdk-drawer-layout__content.page-content,
body.invoice-calculator-page-body .mdk-drawer-layout__content,
body.invoice-calculator-page-body .mdk-drawer-layout__content.page-content {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding-top: 52px !important;
}

body.invoice-calculator-page-body .page-section {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.invoice-calculator-page-body .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Creative Output — same fixed-header clearance as Invoice Calculator / Settings */
body.creative-output-page-body .mdk-header-layout__content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

body.creative-output-page-body .mdk-drawer-layout {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

body.creative-output-page-body .mdk-header-layout .mdk-drawer-layout .mdk-drawer-layout__content,
body.creative-output-page-body .mdk-header-layout .mdk-drawer-layout .mdk-drawer-layout__content.page-content,
body.creative-output-page-body .mdk-drawer-layout__content,
body.creative-output-page-body .mdk-drawer-layout__content.page-content {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding-top: 52px !important;
}

body.creative-output-page-body .page-section {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.creative-output-page-body .container,
body.creative-output-page-body .container-fluid {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.mdk-header-layout__content {
    background-color: #ffffff !important;
}

/* Remove margin around containers but keep padding inside */
.create-campaign-page .page-section,
.ad-grid-page .page-section {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 8px !important;
}

.create-campaign-page .container,
.ad-grid-page .container {
    margin: 0 !important;
    padding: 0 !important;
}

/* Allow admin panel to use full available width */
/* Override Bootstrap container constraints for admin panel using specific class */
/* Allow admin panel container to grow to show all users */
.admin-panel-container,
.admin-panel-container.container,
.admin-panel-container.container-fluid {
    height: auto !important; /* Allow container to grow based on content */
    max-height: none !important; /* Remove any max-height constraints */
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important; /* Remove top padding */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important; /* Remove top margin */
}

.admin-panel-section,
.admin-panel-section.page-section {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Override any Bootstrap container max-width at all breakpoints */
@media (min-width: 576px) {
    .admin-panel-container.container,
    .admin-panel-container.container-fluid {
        max-width: none !important;
        width: 100% !important;
    }
}

@media (min-width: 768px) {
    .admin-panel-container.container,
    .admin-panel-container.container-fluid {
        max-width: none !important;
        width: 100% !important;
    }
}

@media (min-width: 992px) {
    .admin-panel-container.container,
    .admin-panel-container.container-fluid {
        max-width: none !important;
        width: 100% !important;
    }
}

@media (min-width: 1200px) {
    .admin-panel-container.container,
    .admin-panel-container.container-fluid {
        max-width: none !important;
        width: 100% !important;
    }
}

@media (min-width: 1400px) {
    .admin-panel-container.container,
    .admin-panel-container.container-fluid {
        max-width: none !important;
        width: 100% !important;
    }
}

/* Override page__container max-width constraint that limits to 944px */
.ui .page__container,
.page__container,
.admin-panel-container.page__container,
.admin-panel-section .page__container,
.mdk-drawer-layout__content .page__container {
    max-width: none !important;
    width: 100% !important;
}

/* Nuclear option - override ALL possible container constraints for admin panel */
.mdk-drawer-layout__content .admin-panel-container,
.mdk-drawer-layout__content .admin-panel-container.container-fluid,
.mdk-drawer-layout__content .admin-panel-section,
.mdk-drawer-layout__content .admin-panel-section .card,
.mdk-drawer-layout__content #app {
    max-width: none !important;
    width: 100% !important;
}

/* Specifically target the card that contains client ad accounts table */
.mdk-drawer-layout__content .admin-panel-section .card.mb-0,
.mdk-drawer-layout__content #app .card.mb-0,
.admin-panel-section .card.mb-0 {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

/* Allow admin panel cards to use full available width - especially for wide tables */
/* Target ALL possible card selectors with highest specificity */
#app .card.mb-0,
.card.mb-0,
.mdk-drawer-layout__content .card.mb-0,
.mdk-drawer-layout__content .admin-panel-section .card,
.mdk-drawer-layout__content .admin-panel-section .card.mb-0,
.admin-panel-section .card.mb-0,
.admin-panel-container .card.mb-0,
.page-section .card.mb-0,
div.card.mb-0 {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
}

/* Ensure admin panel container doesn't constrain width */
#app {
    width: 100% !important;
    max-width: none !important;
    display: block !important;
}

/* Admin panel viewport and scrolling - allow natural page scroll */
/* Allow the admin panel to extend beyond viewport and let the page scroll */
.mdk-drawer-layout__content.page-content:not(:has(.launchpad-page)):has(.admin-panel-container) {
    height: auto !important; /* Allow natural height based on content */
    max-height: none !important; /* No height limit */
    overflow: visible !important; /* Allow content to be visible */
    display: flex !important;
    flex-direction: column !important;
}

/* Explicitly prevent overflow constraints on launchpad pages - must come after admin panel rule */
/* This ensures launchpad pages don't get nested scrollbars */
.mdk-drawer-layout__content.page-content .container.launchpad-page {
    /* Child element - parent styles handled below */
}

/* Override page-content overflow for launchpad - higher specificity to override admin panel rule */
body .mdk-drawer-layout__content.page-content .container.launchpad-page,
.mdk-drawer-layout__content.page-content:has(.launchpad-page) {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Also ensure the page-content itself doesn't scroll when launchpad is present */
/* Use body class for better browser compatibility - must be more specific than admin panel rule */
body.launchpad-page-body .mdk-drawer-layout__content.page-content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    display: block !important; /* Override flex from admin panel rule */
}

/* Also ensure mdk-drawer-layout__content doesn't create scrollbar */
body.launchpad-page-body .mdk-drawer-layout__content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Fallback using :has() for browsers that support it */
body:has(.launchpad-page) .mdk-drawer-layout__content.page-content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
}

/* Fallback for browsers that don't support :has() - target admin panel pages more specifically */
body:not(:has(.launchpad-page)) .mdk-drawer-layout__content.page-content .admin-panel-container {
    /* Parent container styles applied via JavaScript or more specific CSS */
}

/* Admin panel specific constraints - allow natural scroll */
.mdk-drawer-layout__content.page-content .admin-panel-container {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.admin-panel-container {
    height: auto !important; /* Allow container to grow based on content */
    max-height: none !important; /* Remove height constraint */
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important; /* Allow content to be visible */
    flex: 1 1 auto !important; /* Allow flex growth */
    min-height: 0 !important;
}

.admin-panel-section {
    flex: 1 1 auto !important; /* Allow section to grow */
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important; /* Allow content to be visible */
    min-height: 0 !important;
    height: auto !important; /* Allow section to grow based on content */
    max-height: none !important; /* Remove height constraint */
}

.admin-panel-section #app {
    flex: 1 1 auto !important; /* Allow app to grow */
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important; /* Changed from hidden to visible */
    min-height: 0 !important;
    height: auto !important; /* Allow height to be based on content */
    max-height: none !important; /* Remove height constraint */
}

/* Override global #app for admin panel specifically */
.admin-panel-container .admin-panel-section #app {
    display: flex !important;
    flex-direction: column !important;
}

/* Admin panel cards should fill available space */
.admin-panel-card {
    display: block !important; /* Changed from flex to block - let content determine height */
    overflow: visible !important; /* Changed from hidden to visible so table can be seen */
    min-height: 0 !important; /* Remove min-height - let card grow naturally based on table content */
    max-height: none !important; /* Allow card to grow to show all users */
    height: auto !important; /* Allow card to size based on content - will match table height */
    width: 100% !important;
}

/* Ensure accounts table card has no height constraints */
.admin-panel-card:has(.admin-table-container) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.admin-panel-card .card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important; /* Changed from hidden to visible - critical for showing all rows */
    min-height: fit-content !important; /* Changed from 0 to fit-content - prevent collapse */
    padding: 0 !important;
}

/* Ensure admin-table-container inside card-body also expands */
.admin-panel-card .card-body .admin-table-container {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    min-height: fit-content !important;
}

/* For cards without card-body, the table container should be direct child */
/* For cards with card-header, the table container should fill remaining space */
.admin-panel-card > .card-header {
    flex-shrink: 0 !important;
}

.admin-panel-card > .admin-table-container,
.admin-panel-card > .card-body > .admin-table-container {
    display: block !important; /* Changed from flex to block - let content determine height */
    min-height: fit-content !important; /* Ensure container is at least as tall as its content */
    overflow: visible !important; /* Changed from hidden to visible - critical for showing all rows */
    height: auto !important; /* Allow height to be based on content - will match table height */
    width: 100% !important;
    flex: none !important; /* Remove flex constraint */
    max-height: none !important; /* Remove height constraint */
}

/* Card header should not flex */
.admin-panel-card .card-header {
    flex-shrink: 0 !important;
}

/* Admin component wrapper */
.admin-component-wrapper {
    display: block !important; /* Changed from flex to block - let content determine height */
    overflow: visible !important; /* Changed from hidden to visible - critical for showing all rows */
    min-height: 0 !important;
    height: auto !important; /* Allow height to be based on content - will match table height */
    max-height: none !important; /* Remove height constraint */
    width: 100% !important;
}

.admin-component-wrapper > .admin-controls {
    flex-shrink: 0 !important;
    margin-top: 0 !important; /* Remove top margin */
}

/* Message panel is now a toast notification - doesn't need layout styles */

/* Remove margin from admin-controls */
.admin-component-wrapper > .admin-controls {
    margin-bottom: 0.25rem !important; /* Reduce bottom margin from mb-1 */
}

/* Excel-like table scrolling */
.admin-table-container {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: calc(100vh - 200px) !important; /* Allow vertical scroll within viewport */
    overflow-x: auto !important;
    overflow-y: auto !important; /* Enable vertical scrolling */
    display: block !important;
    min-height: 200px !important;
    min-width: 0 !important;
    position: relative !important;
}

/* Force table containers to be constrained */
.admin-panel-card .admin-table-container {
    display: block !important; /* Changed from flex - let content determine height */
    min-height: fit-content !important; /* Ensure container is at least as tall as its content */
    overflow: visible !important; /* Changed from hidden to visible */
    height: auto !important; /* Allow height to be based on content - will match table height */
    width: 100% !important;
}

.admin-table-scroll {
    display: block !important;
    overflow-x: auto !important; /* Show horizontal scrollbar when needed */
    overflow-y: auto !important; /* Enable vertical scrolling */
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 220px) !important; /* Scrollable area with visible height */
    height: auto !important;
    min-height: 200px !important;
    min-width: 0 !important;
    /* Excel-like scrolling */
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #888 #f1f1f1 !important;
    position: relative !important;
}

/* Force accounts table to use scrollable container - more specific selector */
.admin-panel-card .admin-table-container .admin-table-scroll,
.admin-panel-card .card-body .admin-table-container .admin-table-scroll,
.admin-component-wrapper .admin-table-container .admin-table-scroll {
    height: auto !important;
    max-height: calc(100vh - 220px) !important;
    overflow-y: auto !important;
    min-height: 200px !important;
}

/* Specific rule for table-responsive with admin-table-scroll (accounts table) - MUST be very specific */
.admin-table-container .table-responsive.admin-table-scroll,
.admin-table-container > .table-responsive.admin-table-scroll,
.admin-panel-card .admin-table-container .table-responsive.admin-table-scroll,
.admin-component-wrapper .admin-table-container .table-responsive.admin-table-scroll,
div.admin-table-container div.table-responsive.admin-table-scroll {
    height: auto !important;
    max-height: calc(100vh - 220px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    min-height: 200px !important;
    display: block !important;
    position: relative !important;
}

/* Override Bootstrap's table-responsive default behavior for admin tables */
.admin-table-container .table-responsive {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Most specific override for accounts table - target the exact element structure */
div.admin-table-container > div.table-responsive.admin-table-scroll,
.admin-panel-card div.admin-table-container > div.table-responsive.admin-table-scroll,
.admin-panel-card .admin-table-container .table-responsive.admin-table-scroll {
    overflow-y: auto !important;
    height: auto !important;
    max-height: calc(100vh - 220px) !important;
    min-height: 200px !important;
}

/* Override Bootstrap's default table-responsive overflow - MUST be very specific */
.table-responsive.admin-table-scroll,
div.table-responsive.admin-table-scroll,
.admin-table-container .table-responsive.admin-table-scroll,
.admin-panel-card .table-responsive.admin-table-scroll {
    overflow-y: auto !important;
    overflow-x: auto !important;
    height: auto !important;
    max-height: calc(100vh - 220px) !important;
    min-height: 200px !important;
}

/* Ensure table cells don't collapse - critical for showing full row heights */
.admin-table-scroll table td,
.admin-table-scroll table th {
    height: auto !important;
    min-height: fit-content !important;
    max-height: none !important;
    overflow: visible !important;
    vertical-align: middle !important;
}

/* Ensure table rows don't collapse */
.admin-table-scroll table tr {
    height: auto !important;
    min-height: fit-content !important;
    max-height: none !important;
}

/* Ensure scrollbars are always visible when content overflows */
.admin-table-scroll::-webkit-scrollbar {
    width: 12px !important;
    height: 12px !important;
    display: block !important;
}

.admin-table-scroll::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
}

.admin-table-scroll::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 6px !important;
}

.admin-table-scroll::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}

/* Force horizontal scrollbar when table is wider */
.admin-table-scroll table {
    width: max-content !important;
    table-layout: auto !important;
}

/* Ensure tables with min-width can exceed container */
.admin-table-scroll table[style*="min-width"] {
    min-width: inherit !important;
    width: max-content !important;
}

/* Override any width: auto rules for admin tables */
.admin-table-scroll table {
    width: max-content !important;
}

/* Prevent table-responsive from expanding beyond container */
.admin-table-scroll.table-responsive {
    overflow-x: auto !important;
    overflow-y: auto !important; /* Enable vertical scrolling */
    max-width: 100% !important;
    width: 100% !important;
    max-height: calc(100vh - 220px) !important;
}

/* Force tables to use their min-width and exceed container - override any width: 100% rules */
.admin-table-scroll table,
.admin-table-scroll.table-responsive table {
    width: max-content !important;
    min-width: inherit !important;
    table-layout: auto !important;
}

/* Override Bootstrap table-responsive behavior for admin tables */
.admin-table-scroll.table-responsive {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
}

.admin-table-scroll.table-responsive > table {
    width: max-content !important;
    min-width: inherit !important;
    margin-bottom: 0 !important;
    display: table !important;
}

/* Ensure tables inside scroll container trigger horizontal scroll */
.admin-table-scroll table {
    width: max-content !important; /* Allow table to exceed container width */
    min-width: inherit !important;
    table-layout: auto !important;
}

/* Force horizontal scrollbar when table is wider than container */
.admin-table-scroll .table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important; /* Changed from auto to visible - show all rows */
}

.admin-table-scroll::-webkit-scrollbar {
    width: 12px !important;
    height: 12px !important;
}

.admin-table-scroll::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
}

.admin-table-scroll::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 6px !important;
}

.admin-table-scroll::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}

/* Remove padding from launchpad-page and create-campaign-page containers specifically */
.container.launchpad-page,
.container.create-campaign-page {
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Prevent double scrollbars on launchpad page - ensure page-content doesn't create its own scrollbar */
/* Launchpad pages should let the body scroll naturally, not create nested scrollbars */
/* Override any overflow constraints for launchpad pages */
.launchpad-page ~ *,
.mdk-drawer-layout__content.page-content:has(.launchpad-page),
/* Fallback: target page-content when it contains launchpad-page */
.mdk-drawer-layout__content.page-content .launchpad-page {
    /* Styles applied via more specific rule below */
}

/* More specific override for launchpad - must come after admin panel rules */
.mdk-drawer-layout__content.page-content .launchpad-page {
    /* Ensure parent doesn't create scrollbar */
}

/* Direct override for page-content containing launchpad - more specific than admin panel rule */
/* This ensures launchpad pages don't get overflow: hidden from the admin panel rule */
body .mdk-drawer-layout__content.page-content .launchpad-page,
body .mdk-drawer-layout__content.page-content:not(:has(.admin-panel-container)) {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Additional override - target the page-content parent when launchpad-page exists */
.mdk-drawer-layout__content.page-content:has(.launchpad-page) {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Override Bootstrap margin classes to use 8px bottom margin */
.mb-lg-32pt,
.card.mb-lg-32pt {
    margin-bottom: 8px !important;
}

/* Override mb-2 class as well */
.mb-2 {
    margin-bottom: 8px !important;
}

/* Prevent double scrollbars on launchpad page */
/* The admin panel rule (line 1075) sets overflow: hidden on page-content */
/* We need to override this for launchpad pages to prevent nested scrollbars */
/* Use more specific selector that comes after the admin panel rule */
.launchpad-page,
.container.launchpad-page,
.mdk-drawer-layout__content.page-content .launchpad-page {
    /* Ensure parent containers don't create scrollbars */
}

/* Override page-content overflow for launchpad pages - must be more specific than admin panel rule */
.mdk-drawer-layout__content.page-content .launchpad-page,
body:has(.launchpad-page) .mdk-drawer-layout__content.page-content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Fallback for browsers without :has() support - use class-based approach */
.launchpad-page-container .mdk-drawer-layout__content.page-content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Fix horizontal scroll indicator appearing in multi-select dropdowns */
/* This prevents the browser from showing horizontal scroll indicators */
/* when they're not needed in multi-select elements */
select.custom-select[multiple],
select[multiple].custom-select,
.custom-select[multiple] {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Ensure the select element itself doesn't trigger horizontal scrolling */
select[multiple] {
    overflow-x: hidden !important;
}

/* Hide horizontal scrollbar indicators in webkit browsers */
select[multiple]::-webkit-scrollbar:horizontal,
select.custom-select[multiple]::-webkit-scrollbar:horizontal {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
}

/* Ensure only vertical scrolling is enabled */
select[multiple],
select.custom-select[multiple] {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #aaa transparent; /* Firefox */
}

/* Webkit scrollbar styling - only show vertical scrollbar */
select[multiple]::-webkit-scrollbar {
    width: 8px;
    height: 0; /* Hide horizontal scrollbar */
}

select[multiple]::-webkit-scrollbar-track {
    background: transparent;
}

select[multiple]::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 4px;
}

select[multiple]::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

/* Fix grey block/artifact appearing below multi-select dropdowns */
/* This prevents Bootstrap's custom-select styling from rendering */
/* visual artifacts below the select element */
select.custom-select[multiple],
select[multiple].custom-select {
    box-shadow: none !important;
    border-bottom: 1px solid #ced4da !important; /* Ensure only one border */
    overflow: hidden !important; /* Prevent any overflow rendering */
    position: relative !important; /* Contain any pseudo-elements */
    margin-bottom: 0 !important; /* Remove any bottom margin */
    padding-bottom: 0.375rem !important; /* Ensure consistent padding */
}

/* Remove any pseudo-elements that might be causing the grey block */
select.custom-select[multiple]::after,
select.custom-select[multiple]::before,
select[multiple].custom-select::after,
select[multiple].custom-select::before {
    display: none !important;
    content: none !important;
}

/* Ensure the select element doesn't have any background extending below */
select[multiple] {
    background-clip: padding-box !important;
    background-origin: padding-box !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
}

/* Fix for Bootstrap Vue b-form-select wrapper - hide any adjacent grey elements */
.custom-select[multiple] + *,
select[multiple].custom-select + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Target any div or span that might be rendered below the select */
td > select[multiple].custom-select + div,
td > select[multiple].custom-select + span,
td > .custom-select[multiple] + div,
td > .custom-select[multiple] + span {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Ensure table cells containing selects don't have overflow issues */
.launch-table td {
    overflow: visible !important;
    position: relative !important;
    vertical-align: top !important;
}

/* Specifically target cells with multi-select to prevent rendering artifacts */
.launch-table td:has(select[multiple]),
.launch-table td:has(.custom-select[multiple]) {
    padding-bottom: 0.5rem !important; /* Ensure consistent spacing */
}

/* Additional fix: ensure no background colors extend beyond the select */
.launch-table select[multiple] {
    background-color: #fff !important;
    background-image: none !important;
}

/* Remove any potential grey background from the select element itself */
select.custom-select[multiple] option {
    background-color: #fff !important;
}

/* Launch Progress Modal Styles */
.launch-progress {
    min-height: 300px;
}

.stages-checklist {
    padding: 1rem 0;
}

.stage-item {
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.stage-item.completed {
    border-left-color: #28a745;
    background-color: #f8f9fa;
}

.stage-item.in-progress {
    border-left-color: #007bff;
    background-color: #e7f3ff;
    font-weight: 500;
}

.stage-item.error {
    border-left-color: #dc3545;
    background-color: #f8d7da;
}

.stage-item.pending {
    opacity: 0.6;
}

#launch-progress-modal .modal-dialog {
    max-width: 600px;
}

#launch-progress-modal .progress {
    height: 30px;
    font-size: 14px;
    font-weight: 500;
}

#launch-progress-modal .alert {
    margin-bottom: 0;
}

#launch-progress-modal .modal-header {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

#launch-progress-modal .modal-header .modal-title {
    font-weight: 600;
    color: #333;
}

#launch-progress-modal .modal-header i {
    margin-right: 0.5rem;
    color: #007bff;
}

/* FINAL OVERRIDE - Accounts table must show all rows - highest specificity */
.admin-panel-card .admin-table-container .table-responsive.admin-table-scroll,
.admin-panel-card > .admin-table-container > .table-responsive.admin-table-scroll,
div.admin-panel-card div.admin-table-container div.table-responsive.admin-table-scroll {
    overflow-y: visible !important;
    overflow-x: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: fit-content !important;
    display: block !important;
}

/* Ensure table cells and rows don't collapse */
.admin-panel-card .admin-table-container .table-responsive.admin-table-scroll table td,
.admin-panel-card .admin-table-container .table-responsive.admin-table-scroll table th,
.admin-panel-card .admin-table-container .table-responsive.admin-table-scroll table tr {
    height: auto !important;
    min-height: fit-content !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Hide Bootstrap-Vue Next modals when not visible - prevent them from appearing in DOM */
/* Modal containers should not take up space when modal is hidden */
.admin-component-wrapper .modal:not(.show),
.admin-component-wrapper .modal.fade:not(.show) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: -1 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Ensure modal backdrop doesn't appear when modal is hidden */
.admin-component-wrapper .modal-backdrop:not(.show) {
    display: none !important;
    visibility: hidden !important;
}

/* Modal wrapper divs should collapse when modal is not visible */
.admin-component-wrapper > div:has(.modal:not(.show)),
.admin-component-wrapper > div:has(.modal.fade:not(.show)) {
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    z-index: -1 !important;
}

/* Prevent modal content from bleeding through - target the specific dialog components */
.admin-component-wrapper [class*="Profile"]:has(.modal:not(.show)),
.admin-component-wrapper [class*="UpdateClientsList"]:has(.modal:not(.show)),
.admin-component-wrapper [class*="UpdateAccount"]:has(.modal:not(.show)) {
    height: 0 !important;
    overflow: hidden !important;
}

/* CRITICAL: Force accounts table to show all rows - override any height constraints */
.admin-panel-card:has(.accounts-table),
.admin-panel-card:has([class*="accounts"]),
div.admin-panel-card:has(accounts-table) {
    height: auto !important;
    max-height: none !important;
    min-height: fit-content !important;
    overflow: visible !important;
}

/* Ensure accounts table container has no height limits */
.admin-panel-card accounts-table .admin-table-container,
.admin-panel-card accounts-table .admin-table-scroll,
.admin-panel-card accounts-table table {
    height: auto !important;
    max-height: none !important;
    min-height: fit-content !important;
    overflow: visible !important;
}

/* ============================================
   Vue-Select v4 Styling for Bootstrap
   These global styles fix layout issues in modal/table contexts
   ============================================ */

/* Reset list styling that Bootstrap might apply */
.v-select ul.vs__dropdown-menu,
ul.vs__dropdown-menu,
.vs__dropdown-menu {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.vs__dropdown-menu li::before,
.vs__dropdown-menu li::marker {
    content: none !important;
    display: none !important;
}

/* Force proper horizontal flex layout for dropdown toggle */
.v-select .vs__dropdown-toggle,
.vs__dropdown-toggle {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    padding: 0 !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    background-color: #fff !important;
    min-height: 38px !important;
    width: 100% !important;
}

.v-select.vs--open .vs__dropdown-toggle {
    border-color: #80bdff !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Selected options container - must grow to fill available space */
.v-select .vs__selected-options,
.vs__selected-options {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    flex-grow: 1 !important;
    flex-basis: 0 !important;
    min-width: 0 !important;
    padding: 4px !important;
    gap: 4px !important;
    align-items: center !important;
    align-content: flex-start !important;
    overflow: hidden !important;
}

/* Individual selected tag/pill styling */
.v-select .vs__selected,
.vs__selected {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #e9ecef !important;
    border: 1px solid #adb5bd !important;
    border-radius: 0.25rem !important;
    padding: 2px 6px !important;
    margin: 0 !important;
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    color: #495057 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Deselect button inside selected tag */
.v-select .vs__deselect,
.vs__deselect {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 4px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    color: #6c757d !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.v-select .vs__deselect svg,
.vs__deselect svg {
    width: 10px !important;
    height: 10px !important;
    fill: currentColor !important;
}

.v-select .vs__deselect:hover,
.vs__deselect:hover {
    color: #dc3545 !important;
}

/* Search input - inline with selected tags */
.v-select .vs__search,
.vs__search {
    border: none !important;
    padding: 4px 2px !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: #495057 !important;
    background: transparent !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    min-width: 30px !important;
    width: 0 !important;
    max-width: 100% !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Actions area - hide the dropdown arrow, keep only clear button if needed */
.v-select .vs__actions,
.vs__actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 4px 8px !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
}

/* Hide the dropdown arrow - users click the field to open */
.v-select .vs__open-indicator,
.vs__open-indicator {
    display: none !important;
}

/* Dropdown menu */
.v-select .vs__dropdown-menu,
.vs__dropdown-menu {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: #fff !important;
    border: 1px solid #ced4da !important;
    border-top: none !important;
    border-radius: 0 0 0.25rem 0.25rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    padding: 5px 0 !important;
    margin: 0 !important;
}

/* Dropdown options */
.v-select .vs__dropdown-option,
.vs__dropdown-option {
    display: block !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    color: #212529 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.v-select .vs__dropdown-option:hover,
.vs__dropdown-option:hover,
.v-select .vs__dropdown-option--highlight,
.vs__dropdown-option--highlight {
    background-color: #007bff !important;
    color: #fff !important;
}

/* ============================================
   Launch Table - Clean layout with no double borders
   ============================================ */

/* Remove all padding from cells with form controls */
.launch-table td {
    padding: 0 !important;
    vertical-align: middle !important;
}

/* First column (labels) needs some padding */
.launch-table td:first-child {
    padding: 8px 12px !important;
}

/* Last column (checkboxes) needs centered padding */
.launch-table td:last-child {
    padding: 4px 8px !important;
    text-align: center !important;
}

.launch-table td .form-control,
.launch-table td input.form-control,
.launch-table td .position-relative {
    margin: 0 !important;
}

.launch-table td .position-relative {
    padding: 0 !important;
}

.launch-table td .v-select {
    margin: 0 !important;
}

/* Compact the table rows */
.launch-table tr {
    line-height: 1.4 !important;
}

/* Force all form controls and selects to fill cell width */
.launch-table td .form-control,
.launch-table td select.form-control,
.launch-table td .form-select,
.launch-table td select,
.launch-table td .v-select,
.launch-table td .position-relative,
.launch-table td input[type="text"],
.launch-table td input[type="number"],
.launch-table td input[type="search"] {
    width: 100% !important;
    display: block !important;
}

/* Native select elements should fill the cell */
.launch-table td > select,
.launch-table td select.form-control,
.launch-table td .form-select {
    width: 100% !important;
    max-width: 100% !important;
}

/* Hide borders on form controls inside table cells - use cell border instead */
.launch-table td .form-control,
.launch-table td select.form-control,
.launch-table td .form-select,
.launch-table td select,
.launch-table td input[type="text"],
.launch-table td input[type="number"],
.launch-table td input[type="search"],
.launch-table td textarea {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    padding: 8px 12px !important;
}

/* Focus state - subtle highlight without border */
.launch-table td .form-control:focus,
.launch-table td select:focus,
.launch-table td input:focus,
.launch-table td textarea:focus {
    outline: none !important;
    box-shadow: inset 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
    background-color: rgba(0, 123, 255, 0.05) !important;
}

/* v-select in table cells - remove borders */
.launch-table td .v-select .vs__dropdown-toggle,
.launch-table .v-select .vs__dropdown-toggle {
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    min-height: 38px !important;
    padding: 4px 8px !important;
}

.launch-table td .v-select.vs--open .vs__dropdown-toggle,
.launch-table .v-select.vs--open .vs__dropdown-toggle {
    box-shadow: inset 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
    background-color: rgba(0, 123, 255, 0.05) !important;
}

/* v-select selected items - keep pill styling but make it blend better */
.launch-table td .v-select .vs__selected,
.launch-table .v-select .vs__selected {
    background-color: #e9ecef !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    margin: 2px !important;
}

/* Center text in number inputs */
.launch-table td input[type="number"],
.launch-table input[type="number"] {
    text-align: center !important;
}

/* Native select dropdown arrow positioning - align with date picker calendar icon */
.launch-table td select,
.launch-table td select.form-select,
.launch-table td .form-select {
    padding-right: 2.5rem !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}

/* ================================================
   DATE RANGE PICKER - Global Styles
   ================================================ */

/* Date range picker modal container */
.date-range-modal {
    /* Position is set dynamically via JavaScript for viewport-aware placement */
    z-index: 1050 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    background: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    width: 450px !important;
    max-width: calc(100vw - 40px) !important;
    margin-top: 4px !important;
    min-height: 280px !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Date range sidebar with quick options */
.date-range-sidebar {
    width: 130px !important;
    min-width: 110px !important;
    max-width: 130px !important;
    border-right: 1px solid #e5e7eb !important;
    padding: 12px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    background: #fafafa !important;
    border-radius: 0.5rem 0 0 0.5rem !important;
}

/* Quick option buttons */
.date-range-sidebar .quick-option {
    width: 100% !important;
    text-align: left !important;
    padding: 8px 12px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
    display: block !important;
    font-size: 13px !important;
    color: #374151 !important;
    font-weight: 500 !important;
}

.date-range-sidebar .quick-option:hover {
    background: #e5e7eb !important;
}

.date-range-sidebar .quick-option.active {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

/* Calendar container */
.date-range-calendar {
    flex: 1 !important;
    padding: 12px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-width: 280px !important;
    max-width: 320px !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 260px !important;
    background: #fff !important;
}

/* Flatpickr calendar inline styles */
.date-range-calendar .flatpickr-calendar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    box-shadow: none !important;
    border: none !important;
    width: 280px !important;
    max-width: 280px !important;
    margin: 0 !important;
    padding: 8px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #fff !important;
}

.date-range-calendar .flatpickr-calendar.inline {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide the input field when inline */
.date-range-calendar .flatpickr-input,
.date-range-calendar input.flatpickr-input {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

/* Flatpickr month navigation - FIX ARROW SIZE */
.date-range-calendar .flatpickr-months {
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 34px !important;
}

.date-range-calendar .flatpickr-month {
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
}

.date-range-calendar .flatpickr-current-month {
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 !important;
}

/* Fix the prev/next arrows - they're way too big! */
.date-range-calendar .flatpickr-prev-month,
.date-range-calendar .flatpickr-next-month {
    position: relative !important;
    width: 28px !important;
    height: 28px !important;
    padding: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    top: 0 !important;
}

.date-range-calendar .flatpickr-prev-month:hover,
.date-range-calendar .flatpickr-next-month:hover {
    background: #f3f4f6 !important;
}

.date-range-calendar .flatpickr-prev-month svg,
.date-range-calendar .flatpickr-next-month svg {
    width: 14px !important;
    height: 14px !important;
    fill: #6b7280 !important;
}

/* Fix month/year dropdowns */
.date-range-calendar .flatpickr-current-month select,
.date-range-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
    font-size: 14px !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 4px !important;
    margin: 0 !important;
    height: auto !important;
    line-height: 1.5 !important;
}

.date-range-calendar .flatpickr-current-month input.cur-year {
    font-size: 14px !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 60px !important;
    height: auto !important;
}

/* Flatpickr weekdays - fix spacing */
.date-range-calendar .flatpickr-weekdays {
    margin-bottom: 4px !important;
    height: 28px !important;
    display: flex !important;
    width: 100% !important;
}

.date-range-calendar .flatpickr-weekdaycontainer {
    display: flex !important;
    width: 100% !important;
}

.date-range-calendar .flatpickr-weekday {
    font-size: 11px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    flex: 1 !important;
    text-align: center !important;
    display: block !important;
    max-width: 36px !important;
}

/* Flatpickr days container */
.date-range-calendar .flatpickr-days {
    width: 252px !important; /* 7 days * 36px */
}

.date-range-calendar .flatpickr-innerContainer {
    display: block !important;
}

.date-range-calendar .dayContainer {
    width: 252px !important;
    min-width: 252px !important;
    max-width: 252px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}

.date-range-calendar .flatpickr-day {
    font-size: 13px !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    border-radius: 4px !important;
    max-width: 36px !important;
    flex-basis: 36px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.date-range-calendar .flatpickr-day.selected,
.date-range-calendar .flatpickr-day.startRange,
.date-range-calendar .flatpickr-day.endRange {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
}

.date-range-calendar .flatpickr-day.inRange {
    background: #dbeafe !important;
    border-color: #dbeafe !important;
    color: #1e40af !important;
    box-shadow: none !important;
}

.date-range-calendar .flatpickr-day:hover {
    background: #e5e7eb !important;
    border-color: #e5e7eb !important;
}

/* Limit the modal height */
.date-range-modal {
    max-height: 350px !important;
    overflow: hidden !important;
}

/* ================================================
   DATE RANGE TRIGGER STYLING
   ================================================ */

.date-range-combined {
    display: inline-block !important;
    width: fit-content !important;
}

.date-range-combined .form-group {
    display: inline-block !important;
    width: fit-content !important;
    margin-bottom: 0 !important;
}

.date-range-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    background: #fff !important;
    cursor: pointer !important;
    min-height: 38px !important;
    height: 38px !important;
    width: fit-content !important;
    min-width: 140px !important;
    box-sizing: border-box !important;
}

.date-range-trigger:hover {
    border-color: #adb5bd !important;
}

.date-range-trigger .calendar-icon {
    font-size: 18px !important;
    color: #6c757d !important;
    line-height: 1 !important;
}

.date-range-trigger .date-range-value {
    color: #495057 !important;
    font-size: 14px !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

/* ================================================
   LAUNCHPAD PAGE ALIGNMENT FIXES
   ================================================ */

/* Reduce left padding on Filter accordion toggle to align content */
body.launchpad-page-body .accordion__toggle {
    padding-left: 12px !important;
}

/* Accordion menu link - add left padding to match the Filter heading */
body.launchpad-page-body .accordion__menu-link {
    padding-left: 12px !important;
}

/* Card header inside accordion - no additional padding */
body.launchpad-page-body .accordion__menu-link .card-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Flatpickr wrapper - no padding */
body.launchpad-page-body .accordion__menu-link .flatpickr-wrapper {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Bootstrap row - remove negative margin that causes misalignment */
body.launchpad-page-body .accordion__menu-link .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* First column in each row - no left padding */
body.launchpad-page-body .accordion__menu-link .row > .col-sm-auto:first-child {
    padding-left: 0 !important;
}

/* Other columns - small left padding for spacing between fields */
body.launchpad-page-body .accordion__menu-link .row > .col-sm-auto {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Override for first column specifically */
body.launchpad-page-body .accordion__menu-link .row > .col-sm-auto:first-child {
    padding-left: 0 !important;
}

/* Form groups and search forms inside filter columns */
body.launchpad-page-body .accordion__menu-link .col-sm-auto .form-group,
body.launchpad-page-body .accordion__menu-link .col-sm-auto .search-form {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Clear Filter button alignment */
body.launchpad-page-body .accordion__menu-link .button-list {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

body.launchpad-page-body .accordion__menu-link .button-list .btn {
    margin-left: 0 !important;
}

/* Normalize filter input heights */
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-selection--multiple,
body.launchpad-page-body .accordion__menu-link .select2-selection--single {
    min-height: 38px !important;
    height: 38px !important;
}

/* Select2 multiple selection needs special handling for content overflow */
body.launchpad-page-body .accordion__menu-link .select2-selection--multiple {
    height: auto !important;
    min-height: 38px !important;
    max-height: 38px !important;
    overflow: hidden !important;
}

/* Ensure Select2 container matches */
body.launchpad-page-body .accordion__menu-link .select2-container {
    min-height: 38px !important;
}

body.launchpad-page-body .accordion__menu-link .select2-container .select2-selection {
    min-height: 38px !important;
}

/* Date picker trigger height */
body.launchpad-page-body .accordion__menu-link .date-range-trigger {
    min-height: 38px !important;
    height: 38px !important;
}

/* SingleDatePicker calendar styling */
.single-date-picker .date-picker-modal .flatpickr-calendar {
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    position: static !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}

.single-date-picker .date-picker-modal .flatpickr-calendar.inline {
    top: auto !important;
    left: auto !important;
}

/* Month header - single line with arrows */
.single-date-picker .date-picker-modal .flatpickr-months {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 4px !important;
    margin-bottom: 8px !important;
    height: 34px !important;
}

.single-date-picker .date-picker-modal .flatpickr-month {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important;
}

.single-date-picker .date-picker-modal .flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    font-size: 14px !important;
    padding: 0 !important;
    height: auto !important;
    width: auto !important;
    position: static !important;
}

.single-date-picker .date-picker-modal .flatpickr-current-month .flatpickr-monthDropdown-months {
    font-size: 14px !important;
    padding: 2px 4px !important;
    margin: 0 !important;
}

.single-date-picker .date-picker-modal .flatpickr-current-month .numInputWrapper {
    width: 55px !important;
    overflow: visible !important;
}

.single-date-picker .date-picker-modal .flatpickr-current-month input.cur-year {
    font-size: 14px !important;
    padding: 2px 6px !important;
    width: 55px !important;
    text-align: center !important;
}

/* Hide ALL span children inside numInputWrapper (the increment arrows) */
.single-date-picker .date-picker-modal .numInputWrapper span,
.date-picker-modal .numInputWrapper span,
.flatpickr-calendar .numInputWrapper span {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Navigation arrows */
.single-date-picker .date-picker-modal .flatpickr-prev-month,
.single-date-picker .date-picker-modal .flatpickr-next-month {
    position: static !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    width: 28px !important;
}

.single-date-picker .date-picker-modal .flatpickr-prev-month svg,
.single-date-picker .date-picker-modal .flatpickr-next-month svg {
    width: 10px !important;
    height: 10px !important;
}

/* Weekdays */
.single-date-picker .date-picker-modal .flatpickr-weekdays {
    margin-bottom: 4px !important;
    display: flex !important;
    width: 100% !important;
}

.single-date-picker .date-picker-modal .flatpickr-weekdaycontainer {
    display: flex !important;
    width: 100% !important;
}

.single-date-picker .date-picker-modal .flatpickr-weekday {
    font-size: 11px !important;
    color: #6c757d !important;
    flex: 1 !important;
    text-align: center !important;
    width: 14.28% !important;
    max-width: none !important;
}

/* Day cells - centered numbers */
.single-date-picker .date-picker-modal .dayContainer {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
}

.single-date-picker .date-picker-modal .flatpickr-day {
    width: 14.28% !important;
    max-width: 14.28% !important;
    height: 32px !important;
    line-height: 32px !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-basis: 14.28% !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.single-date-picker .date-picker-modal .flatpickr-day.selected {
    background: #4a90d9 !important;
    border-color: #4a90d9 !important;
    color: #fff !important;
}

/* Next/prev month days - make them more visible */
.single-date-picker .date-picker-modal .flatpickr-day.prevMonthDay,
.single-date-picker .date-picker-modal .flatpickr-day.nextMonthDay {
    color: #9ca3af !important;
    opacity: 0.7 !important;
}

/* Today indicator */
.single-date-picker .date-picker-modal .flatpickr-day.today {
    border-color: #4a90d9 !important;
}

/* Hover state */
.single-date-picker .date-picker-modal .flatpickr-day:hover:not(.selected) {
    background: #e9ecef !important;
}

/* Ensure inner container has enough height */
.single-date-picker .date-picker-modal .flatpickr-innerContainer {
    overflow: visible !important;
}

.single-date-picker .date-picker-modal .flatpickr-rContainer {
    width: 100% !important;
}

.single-date-picker .date-picker-modal .flatpickr-days {
    width: 100% !important;
}

/* Reduce left padding on section headers (Ready For Build, etc.) */
body.launchpad-page-body .card-header.py-12pt.d-flex.align-items-center {
    padding-left: 12px !important;
}

/* Ensure table content aligns properly */
body.launchpad-page-body .table-responsive.unsetOverflowX {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

body.launchpad-page-body .table-responsive.unsetOverflowX table {
    margin-left: 0 !important;
}

body.launchpad-page-body .table-responsive.unsetOverflowX table td:first-child,
body.launchpad-page-body .table-responsive.unsetOverflowX table th:first-child {
    padding-left: 12px !important;
}

/* ================================================
   SELECT2 FILTER FIXES
   ================================================ */

/* Fix Select2 multiple selection - prevent double X */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #e9ecef !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    padding: 2px 8px !important;
    margin: 2px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

/* Only show one X button per selection */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    order: 2 !important;
    margin-left: 6px !important;
    margin-right: 0 !important;
    color: #6c757d !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #dc3545 !important;
}

/* Hide the allowClear X when using multiple selection - it creates double X */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear {
    display: none !important;
}

/* Fix the Client/Team tag styling - keep text and X together */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 2px !important;
    gap: 2px !important;
}

/* Ensure tag text and X stay together */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* Verified ad-account badge — white bg for readable text on SWA dark rows */
body.scale-winning-ads-page-body .swa-verified-badge {
    background-color: #fff !important;
    color: #212529 !important;
    border: 1px solid #ced4da;
}

/* Scale Winning Ads — below fixed header: primary offset is .swa-shell-top-spacer in scale-winning-ads.blade.php
   (data-layout="swa-shell-top-spacer"; padding on .mdk-drawer-layout__content alone was unreliable with flex/margin collapse).
   Troubleshooting: missing body.scale-winning-ads-page-body, CSS not loaded, or spacer removed — see CLAUDE.md "Scale Winning Ads — fixed header". */
body.scale-winning-ads-page-body .mdk-header-layout__content,
html body.scale-winning-ads-page-body .mdk-header-layout.js-mdk-header-layout > .mdk-header-layout__content {
    padding-top: 0 !important;
}
body.scale-winning-ads-page-body .mdk-drawer-layout__content,
body.scale-winning-ads-page-body .mdk-drawer-layout__content.page-content {
    padding-top: 0 !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}
/* In-flow spacer: always reserves space under the fixed bar (theme navbar = 64px; safe-area for notched devices). */
body.scale-winning-ads-page-body .swa-shell-top-spacer {
    display: block;
    width: 100%;
    min-height: calc(88px + env(safe-area-inset-top, 0px));
    margin: 0;
    padding: 0;
    border: 0;
    flex-shrink: 0;
    pointer-events: none;
}
/* On phones the theme header collapses to a compact (~30px) bar, so the 88px desktop
   spacer leaves a large empty gap below the header. Shrink it to just clear the bar. */
@media (max-width: 768px) {
    body.scale-winning-ads-page-body .swa-shell-top-spacer {
        min-height: calc(38px + env(safe-area-inset-top, 0px));
    }
}

/* Bottom drawer taskbar (AI / Creative Hub / Metrics graph) — reserve space so table scroll is not hidden */
body.scale-winning-ads-page-body .mdk-drawer-layout__content,
body.best-ads-page-body .mdk-drawer-layout__content,
body.ad-inspiration-page-body .mdk-drawer-layout__content,
body.meta-inspiration-page-body .mdk-drawer-layout__content,
body.reddit-research-page-body .mdk-drawer-layout__content {
    padding-bottom: 44px;
}

/* Scale Winning Ads — status BAlerts in a fixed bottom popup (Teleport to body in ScaleWinningAdsPage.vue).
   Pinned above the taskbar (44px). z-index below bottom drawers (1055) so AI/CH/Graph panels overlay messages. */
body.scale-winning-ads-page-body .swa-status-alerts-strip--bottom-popup {
    position: fixed;
    right: 0;
    z-index: 1050;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem 0.25rem;
    pointer-events: none;
    max-height: min(45vh, 22rem);
}
body.scale-winning-ads-page-body .swa-status-alerts-strip--bottom-popup .swa-status-alerts-strip__inner {
    pointer-events: auto;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: min(45vh, 22rem);
    -webkit-overflow-scrolling: touch;
}
/* BAlert / bootstrap-vue-next may apply toast-style position:fixed; bottom:… on each alert. Neutralize. */
.swa-status-alerts-strip .alert,
.swa-status-alerts-strip [role="alert"],
.swa-status-alerts-strip .b-alert,
.swa-status-alerts-strip .toast {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;
    transform: none !important;
    width: auto;
    max-width: 100%;
}

/* Non-dismissible alerts: scroll the whole `.alert`. Dismissible alerts use an inner
   `.swa-status-alert-scroll__body` so `.btn-close` (sibling, not inside the scroller) stays
   top-right while the log scrolls; negative margin pulls the scrollbar to the alert’s edge. */
body.scale-winning-ads-page-body .swa-status-alerts-strip--bottom-popup .alert {
    max-height: min(45vh, 18rem);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0.5rem;
    box-shadow: 0 -2px 14px rgba(15, 23, 42, 0.12);
}
body.scale-winning-ads-page-body .swa-status-alerts-strip--bottom-popup .alert.alert-dismissible {
    max-height: none;
    overflow: visible;
}
/* BAlert lays out `.alert-body` and the dismiss control as flex siblings (`ms-auto`), which
   parks the × to the right of the body and leaves the scrollbar left of it. Restore Bootstrap’s
   overlay pattern so the body is full width and the close sits top-right over the same edge. */
body.scale-winning-ads-page-body .swa-status-alerts-strip--bottom-popup .alert.alert-dismissible > div {
    position: relative;
    width: 100%;
}
body.scale-winning-ads-page-body .swa-status-alerts-strip--bottom-popup .alert.alert-dismissible .alert-body {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
}
body.scale-winning-ads-page-body .swa-status-alerts-strip--bottom-popup .alert.alert-dismissible .btn-close,
body.scale-winning-ads-page-body .swa-status-alerts-strip--bottom-popup .alert.alert-dismissible .btn-close-custom {
    position: absolute !important;
    top: 0;
    right: 0;
    z-index: 5;
    margin: 0 !important;
}
body.scale-winning-ads-page-body
    .swa-status-alerts-strip--bottom-popup
    .alert.alert-dismissible
    .swa-status-alert-scroll__body {
    max-height: min(45vh, 18rem);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline-end: calc(-1 * var(--bs-alert-dismissible-padding-end, 3rem));
    padding-inline-end: var(--bs-alert-dismissible-padding-end, 3rem);
}

.swa-reload-progress-detail {
    white-space: pre-wrap;
}
body.scale-winning-ads-page-body .swa-status-alerts-strip--bottom-popup .alert:last-child {
    margin-bottom: 0;
}

/* bootstrap-vue-next BOrchestrator: toast hosts with start-0 sit flush to the viewport; inset past the primary rail. */
@media (min-width: 993px) {
    .orchestrator-container > .toast-container.position-fixed.start-0 {
        left: 52px !important;
    }
}
body.scale-winning-ads-page-body .page-section {
    padding-top: 0 !important;
}

/* SWA — table + toolbar use full content width (no horizontal page gutters) */
body.scale-winning-ads-page-body .swa-page-root.container-fluid,
body.scale-winning-ads-page-body .mdk-drawer-layout__content .swa-page-root {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* SWA selection toolbar — prevent flex children / dropdown wrappers from stretching buttons */
body.scale-winning-ads-page-body .swa-toolbar .btn,
body.scale-winning-ads-page-body .swa-toolbar .dropdown,
body.scale-winning-ads-page-body .swa-toolbar .btn-group {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
}

/* Export/Slides toolbar menus — toggle stays label-sized; menu does not stretch button */
body.scale-winning-ads-page-body .swa-toolbar .swa-toolbar-menu {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: max-content !important;
}
body.scale-winning-ads-page-body .swa-toolbar .swa-toolbar-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.2rem !important;
    padding: 0.25rem 0.5rem !important;
    line-height: 1.25 !important;
    min-height: 0 !important;
    height: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
}
/* Export btn-outline-primary — keep outline on focus/open (override global solid fill above) */
body.scale-winning-ads-page-body .swa-toolbar .swa-toolbar-menu-btn.btn-outline-primary:hover,
body.scale-winning-ads-page-body .swa-toolbar .swa-toolbar-menu-btn.btn-outline-primary:focus,
body.scale-winning-ads-page-body .swa-toolbar .swa-toolbar-menu-btn.btn-outline-primary:active,
body.scale-winning-ads-page-body .swa-toolbar .swa-toolbar-menu-btn.swa-toolbar-menu-btn--open.btn-outline-primary {
    color: #007bff !important;
    background-color: #fff !important;
    border-color: #007bff !important;
    box-shadow: none !important;
}
body.scale-winning-ads-page-body .swa-toolbar .swa-toolbar-menu-btn .material-icons {
    font-size: 14px !important;
    line-height: 1 !important;
}
body.scale-winning-ads-page-body .swa-toolbar .swa-toolbar-menu-panel {
    position: absolute !important;
    width: max-content !important;
    min-width: 12rem;
    max-width: min(90vw, 28rem);
}

/* Ad Inspiration page - push content below fixed header */
body.ad-inspiration-page-body .mdk-header-layout__content {
    padding-top: 64px !important;
}
body.ad-inspiration-page-body .mdk-drawer-layout__content,
body.ad-inspiration-page-body .mdk-drawer-layout__content.page-content {
    padding-top: 16px !important;
    overflow: visible !important;
}
body.ad-inspiration-page-body .page-section {
    padding-top: 0 !important;
}

/* Meta Inspiration page - push content below fixed header */
body.meta-inspiration-page-body .mdk-header-layout__content {
    padding-top: 64px !important;
}
body.meta-inspiration-page-body .mdk-drawer-layout__content,
body.meta-inspiration-page-body .mdk-drawer-layout__content.page-content {
    padding-top: 16px !important;
    overflow: visible !important;
}
body.meta-inspiration-page-body .page-section {
    padding-top: 0 !important;
}

/* Hook Library page — same header offset as inspiration pages */
body.hook-library-page-body .mdk-header-layout__content {
    padding-top: 64px !important;
}
body.hook-library-page-body .mdk-drawer-layout__content,
body.hook-library-page-body .mdk-drawer-layout__content.page-content {
    padding-top: 16px !important;
    overflow: visible !important;
}
body.hook-library-page-body .page-section {
    padding-top: 0 !important;
}

/* Best Ads page — same header offset as inspiration pages */
body.best-ads-page-body .mdk-header-layout__content {
    padding-top: 64px !important;
}
html body.best-ads-page-body .mdk-header-layout.js-mdk-header-layout > .mdk-header-layout__content {
    padding-top: 64px !important;
}
body.best-ads-page-body .mdk-drawer-layout__content,
body.best-ads-page-body .mdk-drawer-layout__content.page-content {
    padding-top: 16px !important;
    overflow: visible !important;
}
body.best-ads-page-body .page-section {
    padding-top: 0 !important;
}

/* Reddit Research page — same header offset as inspiration pages */
body.reddit-research-page-body .mdk-header-layout__content {
    padding-top: 64px !important;
}
body.reddit-research-page-body .mdk-drawer-layout__content,
body.reddit-research-page-body .mdk-drawer-layout__content.page-content {
    padding-top: 16px !important;
    overflow: visible !important;
}
body.reddit-research-page-body .page-section {
    padding-top: 0 !important;
}

/* Creative sidebar — nested Hook Library (third level) */
.clickup-secondary-menu .sidebar-menu-item--subnav {
    margin: 0;
    padding: 0;
    list-style: none;
}
.clickup-secondary-menu .creative-nav-group {
    width: 100%;
    border-bottom: 1px solid transparent;
}
.clickup-secondary-menu .creative-nav-summary {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    list-style: none;
    user-select: none;
    border-left: 3px solid transparent;
}
.clickup-secondary-menu .creative-nav-summary::-webkit-details-marker {
    display: none;
}
.clickup-secondary-menu .creative-nav-chevron {
    font-size: 20px;
    color: #6c757d;
    transition: transform 0.2s ease;
}
.clickup-secondary-menu .creative-nav-group[open] .creative-nav-chevron {
    transform: rotate(180deg);
}
.clickup-secondary-menu .creative-nav-summary:hover {
    background-color: #f5f6f7;
}
/* Group heading whose child page is the current page (Creative > Research) */
.clickup-secondary-menu .creative-nav-summary--active {
    color: #007bff;
    border-left-color: #007bff;
}
.clickup-secondary-menu .creative-nav-summary--active .creative-nav-chevron {
    color: #007bff;
}
.clickup-secondary-menu .creative-nav-nested {
    list-style: none;
    margin: 0;
    padding: 0 0 4px 0;
}
.clickup-secondary-menu .creative-nav-nested .sidebar-menu-button {
    padding-left: 28px;
    font-weight: 500;
}
.clickup-secondary-menu .creative-nav-nested .sidebar-menu-item.active .sidebar-menu-button {
    background-color: #f0f4ff;
    color: #007bff;
    border-left-color: #007bff;
    font-weight: 600;
}

/* Ad Inspiration — modal CSS removed; video now plays in-place inside the card */

/* Ad Inspiration — ClickUp brief modal */
.cu-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 24px;
    overflow-y: auto;
}
.cu-modal-box {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    max-width: 760px;
    box-shadow: 0 16px 60px rgba(0,0,0,0.4);
}
.cu-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #e5e5e5;
}
.cu-modal-body { padding: 20px; }
.cu-modal-footer {
    padding: 14px 20px;
    border-top: 1px solid #e5e5e5;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/*
 * SWA nested "BREAKDOWNS" dropdown — global fallback.
 *
 * The canonical positioning rules for `.swa-breakdown-dropdown` / `.swa-breakdown-buttons`
 * live in ScaleWinningAdsPage.vue's `<style scoped>` (and SwaAdTimeBreakdownMenu.vue's own
 * scoped block). Vue's `scoped` attribute is stamped per ORIGINATING component, so markup
 * for the same `<details class="swa-breakdown-dropdown ...">` pattern authored inside
 * SwaBucketSubBreakdownSubRows.vue and SwaLaunchSliceTimeBreakdownRows.vue (nested bucket /
 * launch-date weekly-slice breakdown menus) never picked up that scoped CSS at all — those
 * two files carry no matching rules of their own — so the menu rendered with browser-default
 * static/block layout: a plain wrapped row of pill buttons pushed into the table's normal
 * flow instead of floating near the BREAKDOWNS button. ScaleWinningAdsPage.vue's JS "portal"
 * mechanism (onSwaBreakdownDropdownToggle / _portalSwaBreakdownMenu / _positionSwaBreakdownMenu)
 * already matches any `.swa-breakdown-dropdown` by plain class name regardless of which
 * component rendered it, so no JS changes are needed — only the missing CSS.
 *
 * This block is loaded globally (public/css/custom.css, no Vite build required) so it applies
 * anywhere the markup appears. Vue's compiled scoped selectors (e.g. `.swa-breakdown-buttons
 * [data-v-xxxxxxxx]`) are more specific than the plain class selectors here, so components
 * that already carry the correct scoped CSS are unaffected — this only fills the gap for
 * markup that has none.
 */
.swa-breakdown-dropdown {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.swa-breakdown-dropdown[open] {
    z-index: 2050;
}

.swa-breakdown-dropdown > summary {
    list-style: none;
}

.swa-breakdown-dropdown > summary::-webkit-details-marker {
    display: none;
}

.swa-breakdown-buttons {
    position: absolute;
    top: auto;
    bottom: calc(100% + 4px);
    left: 0;
    z-index: 2050;
    display: grid;
    grid-template-columns: repeat(3, minmax(34px, 1fr));
    gap: 4px;
    min-width: 150px;
    padding: 6px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Portaled to <body> when open — escapes .table-wrapper overflow clipping */
.swa-breakdown-buttons.swa-breakdown-buttons--portaled {
    position: fixed;
    top: auto;
    bottom: auto;
    z-index: 9998;
}

.swa-breakdown-dropdown:not([open]) .swa-breakdown-buttons {
    display: none;
}

.swa-breakdown-buttons .btn,
.swa-breakdown-buttons .swa-breakdown-option-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0 !important;
    min-width: 34px;
    width: 100%;
    font-size: 0.62rem;
    line-height: 1.3;
    text-align: center;
}

.swa-breakdown-buttons .swa-breakdown-option-btn.btn-info {
    color: #055160 !important;
    background-color: #cff4fc !important;
    border-color: #0aa2c0 !important;
    font-weight: 600;
}

.swa-breakdown-buttons .swa-breakdown-option-btn.btn-warning {
    color: #664d03 !important;
    background-color: #fff3cd !important;
    border-color: #ffc107 !important;
    font-weight: 600;
}

.swa-breakdown-buttons .swa-breakdown-option-btn.btn-info .material-icons,
.swa-breakdown-buttons .swa-breakdown-option-btn.btn-warning .material-icons,
.swa-breakdown-buttons .swa-breakdown-option-btn.btn-info .swa-bd-btn-tag,
.swa-breakdown-buttons .swa-breakdown-option-btn.btn-warning .swa-bd-btn-tag,
.swa-breakdown-buttons .swa-breakdown-option-btn.btn-info .swa-bd-btn-emoji,
.swa-breakdown-buttons .swa-breakdown-option-btn.btn-warning .swa-bd-btn-emoji {
    color: inherit !important;
}

.swa-breakdown-buttons .swa-breakdown-option-btn > span {
    flex: 1 1 auto;
    min-width: 0;
}

.swa-breakdown-dropdown:has(.swa-breakdown-option-btn.btn-info) > summary.swa-breakdown-toggle-btn,
.swa-breakdown-dropdown:has(.swa-breakdown-option-btn.btn-warning) > summary.swa-breakdown-toggle-btn {
    color: #055160 !important;
    background-color: #cff4fc !important;
    border-color: #0aa2c0 !important;
}

.swa-breakdown-dropdown:has(.swa-breakdown-option-btn.btn-info) > summary.swa-breakdown-toggle-btn::after,
.swa-breakdown-dropdown:has(.swa-breakdown-option-btn.btn-warning) > summary.swa-breakdown-toggle-btn::after {
    content: 'ON';
    display: inline-block;
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.35;
    color: #fff;
    background-color: #0aa2c0;
}

.swa-breakdown-dropdown--nested {
    flex-shrink: 0;
}

.swa-breakdown-dropdown--nested .swa-breakdown-buttons {
    min-width: 150px;
    grid-template-columns: repeat(3, minmax(34px, 1fr));
}

.swa-breakdown-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.62rem;
    line-height: 1.3;
    flex-shrink: 0;
    font-style: normal;
    background-color: #fff;
    color: #495057;
    border-color: #6c757d;
}

.swa-breakdown-toggle-label {
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ── Carousel campaigns (Launchpad board) ─────────────────────────────────────
   A carousel is ONE Meta ad whose cards are its ad_grids rows, so the ad-count
   column shows 1 while the campaign holds N cards. This flag marks that so the
   number does not read as wrong; the cell title spells out "N cards launch as
   1 ad". Kept tiny and low-contrast — the count is the signal, this is context. */
.carousel-flag {
    display: inline-block;
    margin-left: 3px;
    padding: 0 3px;
    border-radius: 2px;
    background-color: #e7f1ff;
    color: #0b4a8f;
    font-size: 9px;
    font-weight: 700;
    line-height: 13px;
    vertical-align: text-top;
}

/* ── Production Board (ClickUp replacement Phase 1, read-only mirror UI) ──
   !important required: material-design-kit.js sets an INLINE paddingTop on
   .mdk-header-layout__content, which beats any non-important rule (same as the
   hook-library / best-ads / inspiration page blocks above). */
body.production-board-page-body .mdk-header-layout__content {
    padding-top: 64px !important;
}
body.production-board-page-body .mdk-drawer-layout__content,
body.production-board-page-body .mdk-drawer-layout__content.page-content {
    padding-top: 8px !important;
    overflow: visible !important;
}
body.production-board-page-body .production-board-shell {
    overflow-x: hidden; /* board columns scroll inside .pb-board, never the page body */
}

/* Ad Review - fixed-header clearance (.claude/rules/fixed-header-clearance.md). The body class has been emitted by
   layouts/app.blade.php since the page shipped, but only the <=991px override in mobile.css ever styled it, so desktop
   had no offset. Scoped to >=992px so it never fights mobile.css (which wins below that width). */
@media (min-width: 992px) {
    body.ad-review-page-body .mdk-header-layout .mdk-drawer-layout .mdk-drawer-layout__content,
    body.ad-review-page-body .mdk-header-layout .mdk-drawer-layout .mdk-drawer-layout__content.page-content,
    body.ad-review-page-body .mdk-drawer-layout__content,
    body.ad-review-page-body .mdk-drawer-layout__content.page-content {
        padding-top: 52px !important;
    }
}

/* Custom Field Manager — same shell geometry as the Production Board it configures. */
body.custom-fields-page-body .mdk-header-layout__content {
    padding-top: 64px !important;
}
body.custom-fields-page-body .mdk-drawer-layout__content,
body.custom-fields-page-body .mdk-drawer-layout__content.page-content {
    padding-top: 8px !important;
    overflow: visible !important;
}
body.custom-fields-page-body .custom-fields-shell {
    overflow-x: hidden; /* the field table scrolls inside .cfm-table-wrap, never the page body */
}

body.youtube-library-page-body .mdk-header-layout__content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

body.youtube-library-page-body .mdk-drawer-layout {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

body.youtube-library-page-body .mdk-header-layout .mdk-drawer-layout .mdk-drawer-layout__content,
body.youtube-library-page-body .mdk-header-layout .mdk-drawer-layout .mdk-drawer-layout__content.page-content,
body.youtube-library-page-body .mdk-drawer-layout__content,
body.youtube-library-page-body .mdk-drawer-layout__content.page-content {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding-top: 52px !important;
}

body.youtube-library-page-body .page-section {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.youtube-library-page-body .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}