@media (max-width: 768px) {
        .tabs-separator {
            top: 30px !important;
            /* Try values like 36px, 38px, or 40px */
        }

        /* === Buttons === */

        /* Compact primary buttons for all search types */
        .videosearch-form__search-button,
        .channelsearch-form__search-button,
        .popularsearch__button {
            font-size: 0.8rem !important;
            padding: 0.35rem 0.65rem !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 0.25rem !important;
            /* reduce icon–text spacing */
            line-height: 1.1 !important;
            white-space: nowrap !important;
        }

        /* Make icons slightly smaller for a balanced look */
        .videosearch-form__search-button i,
        .channelsearch-form__search-button i,
        .popularsearch__button i {
            font-size: 0.8rem !important;
            margin-right: 0 !important;
            /* ensure no extra space from icon tag */
            vertical-align: middle !important;
        }

        /* === Forms === */

        .form-check-input {
            width: 16px !important;
            /* reduce size */
            height: 16px !important;
            margin-top: 0.1em !important;
            /* less top offset */
        }

        .form-check-label {
            font-size: 0.75rem;
            font-weight: 400;
        }

        .bottom-nav__label {
            display: none !important;
        }

        .form-label {
            font-size: 0.85rem;
            /* or try 0.75rem for smaller */
        }

        img.img-rounded {
            max-width: 60px !important;
            /* reduce from default size */
            height: auto !important;
        }

        /* === Navbar === */

        /* Target only the mobile menu button inside topNav */

        #topNav .common-dropdown-btn {
            --bs-btn-padding-x: 0.75rem;
            /* remove horizontal padding */
            margin-bottom: 0.25rem;
            /* keep button height */
            min-width: auto;
            /* remove min-width so button shrinks to icon */
        }

        .navbar-collapse .navbar__dropdown-mode-switch,
        .offcanvas-body .navbar__dropdown-mode-switch {
            width: 2.5em !important;
            height: 1.25em !important;
            border-radius: 2em;
            background-color: var(--bs-form-check-bg, #fff);
            border: 1px solid var(--bs-border-color, #ced4da);
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            cursor: pointer;
            transition: background-color 0.2s, border-color 0.2s;
        }

        .navbar__offcanvas-toggle {
            display: inline-flex !important;
            font-size: 1.3rem;
            margin-left: auto;
            margin-right: 1rem;
            color: currentColor;
            background: transparent;
            z-index: 9999;
        }

        .navbar__controls {
            display: flex !important;
            align-items: center;
            flex: 0 0 auto;
        }

        .navbar__controls .navbar__mode-toggle-item,
        .navbar__controls .navbar-nav {
            display: none !important;
        }

        /* === Datatable === */

        table.common-table th {
            font-size: 14px !important;
            padding: 8px 10px !important;
        }

        table.common-table td {
            font-size: 13px !important;
            padding: 6px 8px !important;
        }

        .table-header-checkbox {
            -webkit-appearance: checkbox;
            -moz-appearance: checkbox;
            appearance: checkbox;
            margin-left: 0 !important;
            /* remove desktop margin */
            padding-left: 0 !important;
            width: 16px !important;
            height: 16px !important;
            margin: 0;
            vertical-align: middle;
            border: 1px solid var(--bs-border-color);
            background-color: var(--bs-custom-white-dark) !important;
            border-radius: 0.25em;
        }

        /* Change background & border when checked */
        .table-header-checkbox:checked {
            background-color: var(--bs-custom-white-dark) !important;
            border-color: var(--bs-custom-stroke-strong);
        }

        th.text-center {
            text-align: center;
            /* center checkbox in header */
        }

        #video-table_wrapper {
            padding-bottom: 40px;
            /* or slightly more than bottom-nav height */
        }

        #keyword-table_wrapper {
            padding-bottom: 40px;
            /* or slightly more than bottom-nav height */
        }

        #influencer-table_wrapper {
            padding-bottom: 40px;
            /* or slightly more than bottom-nav height */
        }

        #siteResultsTable_wrapper {
            padding-bottom: 40px;
            /* or slightly more than bottom-nav height */
        }



        div.dt-info {
            font-size: 11px !important;
        }

        /* 3 bars dropdown inside datatable */

        .datatable-dropdown {
            width: 220px !important;
            font-size: 12px !important;
        }

        .datatable-dropdown .dropdown-item i {
            font-size: 13px !important;
            width: 16px !important;
        }

        .datatable-dropdown .dropdown-item {
            padding: 3px 4px !important;
        }

        .datatable-dropdown li a {
            padding: 0.4rem 0.75rem !important;
            gap: 6px !important;
            /* 👈 reduce gap between icon and text */
        }

        .dropdown-toggle svg {
            width: 16px !important;
            height: 16px !important;
        }

        /* === PAGINATION === */
        .page-link {
            font-size: 0.7rem !important;
            padding: 0.15rem 0.4rem !important;
        }

        .active>.page-link,
        .page-link.active {
            font-size: 0.65rem !important;
            padding: 0.2rem 0.5rem !important;
        }

        /* === Bottom Action Bar === */

        #bottom-nav {
            -webkit-overflow-scrolling: auto;
        }

        #bottom-nav a {
            touch-action: manipulation;
        }

        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            padding: 0 20px;
            background-color: var(--bs-custom-white-dark, #fff);
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.2) 0 5px 10px,
                rgba(0, 0, 0, 0.4) 0 15px 40px;
            margin: 0 !important;
        }

        .bottom-nav__list {
            display: flex;
            width: 100%;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .bottom-nav__item {
            flex: 1;
            text-align: center;
        }

        .bottom-nav__link {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            font-size: 1.25rem;
            /* keep icon sized */
            /* - Icon color */
            color: #666;
            padding: 4px 6px;
            border-radius: 0.375rem;
            text-decoration: none;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .bottom-nav__icon svg {
            width: 1.4em;
            height: 1.4em;
            stroke: currentColor;
            fill: currentColor;
            margin-bottom: 2px;
        }

        /* Hover state */
        .bottom-nav__link:hover {
            background-color: var(--bs-custom-stroke-weak);
            color: var(--bs-custom-sidenav-hover-dark-white);
        }

        /* Active state */
        .bottom-nav__link--active {
            background-color: var(--bs-custom-text-weak);
            color: var(--bs-custom-white-dark);
        }

        /* Explicitly set icon and text inside the active link */
        .bottom-nav__link--active .bottom-nav__icon svg,
        .bottom-nav__link--active span {
            color: var(--bs-custom-white-dark);
            stroke: var(--bs-custom-white-dark);
            fill: var(--bs-custom-white-dark);
            /* if any icons use fill */
        }

        /* Active & Hover icon colors */
        .bottom-nav__link:hover .bottom-nav__icon svg,
        .bottom-nav__link:hover span {
            color: var(--bs-custom-sidenav-hover-dark-white);
            stroke: var(--bs-custom-sidenav-hover-dark-white);
        }

        /* Icon styles */
        .bottom-nav__icon {
            font-size: 1.25rem;
            line-height: 1;
            margin-bottom: 2px;
        }

        /* Ensure SVG inherits currentColor from parent */
        .bottom-nav__icon svg {
            width: 1.4em;
            height: 1.4em;
            stroke: currentColor;
            fill: none;
            display: block;
        }

        /* === Sidebar + Layout === */

        .sidebar,
        footer.sticky-footer {
            display: none !important;
        }

        .main-content {
            margin-left: 0 !important;
            margin-top: 50px !important;
            height: auto !important;
            overflow: visible !important;
            flex: unset !important;
            position: relative;
            z-index: 1;
            padding: 0 1rem;
            background-color: var(--bs-custom-bg-fill-dark) !important;
        }

        #wrapper,
        #content-wrapper {
            background-color: var(--bs-custom-bg-fill-dark) !important;
            flex-grow: 0 !important;
            height: auto !important;
            min-height: 0 !important;
        }

        .common-bg-wrapper {
            margin-top: 0 !important;
            /* just in case */
        }

        .common-bg-wrapper>table {
            margin-top: 0 !important;
            /* remove table margin */
            border-spacing: 0 !important;
            /* remove any table spacing */
        }

        .mobile-footer {
            display: block !important;
            font-size: 12px;
            color: #666;
            padding: 5px 2px;
            margin-bottom: 80px !important;
            text-align: center;
            background-color: var(--bs-custom-bg-white-dark);
        }

        /* === Row + Breadcrumb === */

        .breadcrumb-mobile-wrapper {
            flex: 1 1 auto;
            padding-left: 0.75rem;
            overflow-x: auto;
            white-space: nowrap;
            min-width: 0;
        }

        .breadcrumb {
            font-size: 0.85rem;
            display: flex;
            white-space: nowrap;
            overflow-x: auto;
        }

        .breadcrumb-item+.breadcrumb-item::before {
            padding: 0 0.4rem;
        }

        .row.align-items-center {
            display: flex !important;
            flex-wrap: nowrap;
            gap: 0.4rem;
            margin-bottom: 0 !important;
        }

        .row.align-items-center>[class^='col-'] {
            flex-shrink: 1;
            flex-grow: 0;
            min-width: 0 !important;
            width: auto !important;
            display: flex;
            align-items: center;
            padding: 0;
        }

        /* Container for both elements in one row */

        .d-md-none .col-4 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            width: 100%;
            flex-wrap: nowrap;
        }

        /* Rows select and label */
        .d-md-none .rows-container {
            display: flex;
            align-items: center;
            flex-shrink: 1;
            white-space: nowrap;
        }

        /* Select dropdown */
        .d-md-none .rows-container select {
            margin-right: 0.25rem;
            max-width: 70px;
        }

        /* Search input container (with relative positioning for icon) */
        .d-md-none .search-container {
            position: relative;
            flex-grow: 1;
        }

        /* Search input */
        .d-md-none input[type='search'],
        .d-md-none input[type='text'],
        .d-md-none input {
            height: 36px !important;
            font-size: 14px !important;
            padding-left: 30px !important;
            box-sizing: border-box !important;
        }

        /* === Bulk Actions === */
        .bulk-actions-column {
            display: none !important;
        }

        .bulk-actions-column-mobile {
            display: flex !important;
            position: relative !important;
            z-index: 1100;
            margin: 0.5rem 0 0.25rem;
            padding-left: 2.5rem !important;
            max-width: 40%;
            gap: 0.75rem;
            align-items: center;
            justify-content: flex-start;
        }

        .bulk-actions-column-mobile.bulk-actions-visible {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }

        .bulk-actions-column-mobile .common-dropdown-btn {
            padding: 0.65rem 0.35rem !important;
            font-size: 0.75rem !important;
            line-height: 1 !important;
            height: auto !important;
            border-radius: 0.25rem !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 0.25rem !important;
            min-height: unset !important;
        }

        .bulk-actions-column-mobile .dropdown {
            position: relative;
        }

        .bulk-actions-column-mobile .dropdown-menu {
            position: absolute !important;
            top: 100%;
            left: 0 !important;
            right: auto !important;
            transform: none !important;
            min-width: 180px !important;
            z-index: 1300 !important;
        }

        .selected-rows-text-mobile {
            font-size: 0.85rem;
            padding-left: 0;
        }

        #pageLengthSelectMobile {
            width: 100% !important;
            height: 36px !important;
            font-size: 14px !important;
        }

        .bi-search {
            font-size: 16px !important;
            left: 8px !important;
            top: 50% !important;
            position: absolute !important;
            transform: translateY(-50%) !important;
        }

        .btn-outline-primary span {
            white-space: nowrap;
        }

        /* Lottie */

        .empty-lottie-wrapper {
            max-width: 10vw !important;
            max-height: 10vw !important;
        }

        .empty-state h5 {
            font-size: 1rem;
        }

        .empty-state p {
            font-size: 0.85rem;
        }

        /* Select2 container height shrink & font smaller */
        .select2-container--default .select2-selection--single {
            height: 2rem !important;
            /* shrink from 2.5rem */
            line-height: 2rem !important;
            /* align text vertically */
            padding-left: 0.25rem !important;
            padding-right: 0.5rem !important;
            font-size: 13px !important;
            border-radius: 0.25rem !important;
        }

        /* Adjust rendered text line height */
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 2rem !important;
            padding-right: 16px !important;
            /* keep arrow spacing */
        }

        /* Position arrow a bit higher */
        .select2-container--default .select2-selection--single::after {
            top: 50% !important;
            right: 8px !important;
            width: 7px !important;
            height: 7px !important;
            border-width: 1.5px 1.5px 0 0 !important;
            transform: translateY(-50%) rotate(135deg) !important;
        }

        input[type='date'] {
            height: 2rem !important;
            /* same as Select2 */
            line-height: 2rem !important;
            /* vertical align text */
            font-size: 13px !important;
            /* match Select2 */
            padding: 0 0.5rem !important;
            /* horizontal padding */
            box-sizing: border-box !important;
            /* include padding in height */
        }

        /* === Dashboard === */

        /* ----------------------------
      Analytics Cards
    ----------------------------- */
        .dashboard-analytics__card {
            width: 100%;
            padding: 0.2rem 0.1rem !important;
        }

        .dashboard-analytics__card>.common-bg-wrapper {
            padding: 0.2rem 0.3rem !important;
        }

        .dashboard-analytics__title {
            font-size: 0.75rem !important;
            margin-bottom: 0.1rem !important;
            margin-left: 0.5rem;
            /* adjust as needed */
        }

        .dashboard-analytics__value {
            font-size: 1rem !important;
            margin-top: 0.1rem !important;
            margin-left: 0.5rem;
            /* adjust as needed */
        }

        .dashboard-analytics__icon-box {
            width: 24px;
            height: 24px;
            min-width: 24px;
            min-height: 24px;
            font-size: 0.75rem !important;
            margin-right: 0.5rem;
            /* adjust as needed */
            margin-top: 0.3rem;
            /* adjust as needed */
        }

        .dashboard-analytics__card.highlighted-card {
            box-shadow: 0 0 1px var(--bs-custom-green-light, rgba(0, 128, 0, 0.2)) !important;
        }

        /* ----------------------------
      Section Headings
    ----------------------------- */

        h2.section-heading:first-of-type,
        h2.section-heading:nth-of-type(2),
        h2.section-heading:nth-of-type(3) {
            font-size: 1rem !important;
            margin-top: 0.5rem !important;
        }

        h2.section-heading:first-of-type {
            margin-bottom: 0.5rem !important;
            margin-top: -12px !important;
        }

        h2.section-heading:nth-of-type(2) {
            margin-bottom: 0.25rem !important;
        }

        /* ----------------------------
      Chart & Table Rows
    ----------------------------- */
        .chart-table-row {
            flex-direction: column !important;
        }

        .chart-table-row>div {
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin-bottom: 0.5rem !important;
        }

        .row.chart-table-row {
            margin-bottom: 0.25rem !important;
        }

        /* ----------------------------
                  Charts
      ----------------------------- */

        .dashboard-chart .common-bg-wrapper {
            padding: 0.25rem !important;
            margin: 0.25rem 0 !important;
            min-height: auto !important;
        }

        .dashboard-chart,
        .dashboard-table {
            padding: 0.25rem 0 !important;
        }

        .dashboard-chart__title {
            margin: 0.2rem 0 !important;
            font-size: 0.75rem !important;
        }

        .dashboard-chart__canvas {
            max-height: 160px !important;
        }

        .dashboard-chart__canvas canvas {
            width: 100% !important;
            height: 160px !important;
            display: block;
            margin: 0 auto;
        }

        .dashboard-chart__canvas>div {
            margin-bottom: 0 !important;
            padding-bottom: 0 !important;
        }

        .dashboard-chart__dropdown button {
            width: 28px !important;
            height: 28px !important;
            font-size: 0.75rem !important;
        }

        /* ----------------------------
      Dashboard Table: Manage Button & Spinner
      ----------------------------- */

        .dashboard-table .btn.btn-primary.btn-sm {
            padding: 0.25rem 0.5rem !important;
            font-size: 0.7rem !important;
            height: auto !important;
            line-height: 1 !important;
        }

        #ajax-loader .spinner {
            width: 30px !important;
            height: 30px !important;
            border-width: 3px !important;
        }

        #ajax-loader .loading-text {
            font-size: 0.75rem !important;
            margin-top: 0.25rem !important;
        }

        /* ----------------------------
      Recent Videos Table
    ----------------------------- */

        .dashboard-table--videos {
            height: auto !important;
            max-height: 300px !important;
            padding: 0 !important;
            display: flex;
            flex-direction: column;
        }

        .dashboard-table--videos-scroll {
            max-height: 280px !important;
            overflow-y: auto;
            width: 100%;
        }

        /* Scrollbar */
        .dashboard-table--videos-scroll::-webkit-scrollbar {
            width: 6px;
        }

        .dashboard-table--videos-scroll::-webkit-scrollbar-thumb {
            border-radius: 3px;
        }

        .dashboard-table--videos .dashboard-table__title {
            font-size: 0.85rem !important;
            margin-bottom: 0.25rem !important;
        }

        .dashboard-table__recent-videos th,
        .dashboard-table__recent-videos td {
            padding: 0.25rem 0.5rem !important;
            font-size: 0.75rem !important;
        }

        .dashboard-table__recent-videos td img {
            max-width: 80px !important;
            height: auto !important;
        }

        .dashboard-table__recent-videos tbody tr {
            margin-bottom: 0.25rem !important;
        }

        /* Keyword Research */

          .kw-progressbar__wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100%;
  }

  .kw-progressbar__status-text {
    white-space: nowrap;
    font-size: 12px;
    flex: 0 0 auto;
  }

  .kw-progressbar__progessbar-counter {
    display: flex;
    flex: 1;
    align-items: center;
  }

  .kw-progressbar__status-text {
  line-height: 0;
  margin-top:0px;
}

  .progress {
    flex: 1;
    height: 6px;
    margin: 0 6px;
  }


        .kwsearch-form {
            display: flex !important;
            flex-wrap: wrap !important;
        }

        .kwsearch-form__options-row {
            transform: translateX(-8px);
        }

        /* Search input full width */
        .kwsearch-form>.col-md-4 {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            padding: 0 !important;
            margin-bottom: 10px !important;
        }

        .kwsearch-form__search-input {
            height: 36px !important;
            font-size: 14px !important;
            padding-left: 30px !important;
        }

        .kwsearch-form__search-icon {
            font-size: 16px !important;
            left: 8px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
        }

        /* Select box: fixed width */
        .kwsearch-form>.col-md-3.offset-1:nth-of-type(2) {
            flex: 0 0 130px !important;
            max-width: 130px !important;
            padding-left: 0 !important;
            padding-right: 4px !important;
            /* reduce gap between select and button */
            margin-top: 4px !important;
            /* reduce vertical gap from search */
            margin-left: 0 !important;
            /* ensure no horizontal offset */
        }

        .kwsearch-form__max-results-select {
            width: 100% !important;
            height: 36px !important;
            font-size: 14px !important;
        }

        /* Button */
        .kwsearch-form>.col-md-3.offset-1:nth-of-type(3) {
            flex: 1 1 0 !important;
            max-width: calc(100% - 134px) !important;
            padding-left: 0 !important;
            margin-top: 4px !important;
            /* reduce vertical gap */
            display: flex !important;
            justify-content: flex-end !important;
            align-items: center !important;
        }

        .kwsearch-form__search-button {
            font-size: 0.8rem !important;
            padding: 0.35rem 0.65rem !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 0.25rem !important;
            /* reduce icon–text spacing */
            line-height: 1.1 !important;
            white-space: nowrap !important;
        }

        /* Make icons slightly smaller for a balanced look */
        .kwsearch-form__search-button i {
            font-size: 0.8rem !important;
            margin-right: 0 !important;
            /* ensure no extra space from icon tag */
            vertical-align: middle !important;
        }

        .kwsearch-form>.col-md-4 {
            margin-bottom: 0px !important;
        }

        /* Kw Column Selector */

        .kwcolumnselector-dropdown .form-switch .form-check-input {
            appearance: none !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            width: 2.5em !important;
            height: 1.5em !important;
            background-color: var(--bs-form-check-bg, #fff) !important;
            border: var(--bs-border-width, 1px) solid var(--bs-border-color, #ced4da) !important;
            border-radius: 2em !important;
            position: relative;
            transition: background-color 0.15s ease-in-out,
                border-color 0.15s ease-in-out;
            cursor: pointer;
            display: inline-block;
            vertical-align: middle;
        }

        .kwcolumnselector-dropdown .form-switch .form-check-input::before {
            content: '';
            position: absolute;
            top: 0.2em;
            left: 0.2em;
            width: 1.1em;
            height: 1.1em;
            background-color: #adb5bd;
            /* 🎯 Bootstrap's thumb color match */
            border-radius: 50%;
            transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
        }

        .kwcolumnselector-dropdown .form-switch .form-check-input:checked {
            background-color: var(--bs-primary, #0d6efd) !important;
            border-color: var(--bs-primary, #0d6efd) !important;
        }

        .kwcolumnselector-dropdown .form-switch .form-check-input:checked::before {
            transform: translateX(1em);
            background-color: #fff;
        }

        .kwcolumnselector-dropdown .form-switch .form-check-input:focus {
            outline: none;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
            border-color: var(--bs-primary);
        }

        .kwcolumnselector-dropdown .form-check-label {
            font-size: 0.9rem;
        }

        .kweditcolumnselector-dropdown .form-switch .form-check-input {
            appearance: none !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            width: 2.5em !important;
            height: 1.5em !important;
            background-color: var(--bs-form-check-bg, #fff) !important;
            border: var(--bs-border-width, 1px) solid var(--bs-border-color, #ced4da) !important;
            border-radius: 2em !important;
            position: relative;
            transition: background-color 0.15s ease-in-out,
                border-color 0.15s ease-in-out;
            cursor: pointer;
            display: inline-block;
            vertical-align: middle;
        }

        .kweditcolumnselector-dropdown .form-switch .form-check-input::before {
            content: '';
            position: absolute;
            top: 0.2em;
            left: 0.2em;
            width: 1.1em;
            height: 1.1em;
            background-color: #adb5bd;
            /* 🎯 Bootstrap's thumb color match */
            border-radius: 50%;
            transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
        }

        .kweditcolumnselector-dropdown .form-switch .form-check-input:checked {
            background-color: var(--bs-primary, #0d6efd) !important;
            border-color: var(--bs-primary, #0d6efd) !important;
        }

        .kweditcolumnselector-dropdown .form-switch .form-check-input:checked::before {
            transform: translateX(1em);
            background-color: #fff;
        }

        .kweditcolumnselector-dropdown .form-switch .form-check-input:focus {
            outline: none;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
            border-color: var(--bs-primary);
        }

        .kweditcolumnselector-dropdown .form-check-label {
            font-size: 0.9rem;
        }

        .mobile-keyword-toolbar-btn {
            height: 36px !important;
            font-size: 14px !important;
            padding: 0 10px !important;
            /* Reduce overall padding */
            padding-left: 6px !important;
            /* Tighten icon to left */
            white-space: nowrap !important;
            display: flex;
            align-items: center;
            gap: 6px;
            justify-content: flex-start;
            /* Align everything to left */
        }

        .mobile-keyword-toolbar-btn i {
            font-size: 14px;
            margin-left: 0 !important;
            /* Remove default margin */
            padding-left: 0 !important;
            width: 16px;
            min-width: 16px;
            text-align: center;
        }

        .mobile-keyword-toolbar-btn.customize-columns-btn {
            margin-left: -8px;
            /* Adjust as needed for perfect left alignment */
            width: calc(100%-4px);
            /* Account for left/right margins */
            font-size: 13px !important;
            padding: 0 12px !important;
            padding-left: 6px !important;
            white-space: nowrap !important;
            height: 36px !important;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .mobile-keyword-toolbar-btn.customize-columns-btn i {
            margin-left: 0 !important;
            padding-left: 0 !important;
            font-size: 14px;
            width: 16px;
            min-width: 16px;
            text-align: center;
        }

        .keyword-toolbar-btn {
            margin-left: -8px;
            /* Adjust as needed for perfect left alignment */
            width: calc(100%-4px);
            /* Account for left/right margins */
            font-size: 13px !important;
            padding: 0 12px !important;
            padding-left: 6px !important;
            white-space: nowrap !important;
            height: 36px !important;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* Export KW Options */

        #modalExportKeywordsOptions .modal-dialog {
            max-width: calc(100% - 1rem) !important;
            /* slightly smaller than full width */
            margin-left: 2rem !important;
            /* slight left padding to center */
            margin-right: 0.5rem !important;
            /* slight right padding */
        }

        #modalExportKeywordsEditOptions .modal-dialog {
            max-width: calc(100% - 1rem) !important;
            /* slightly smaller than full width */
            margin-left: 2rem !important;
            /* slight left padding to center */
            margin-right: 0.5rem !important;
            /* slight right padding */
        }

        /* Video Search */

        /* === Nav Pills === */

        /* Prevent wrapping and enable scroll */

        .nav-pills {
            display: flex;
            flex-wrap: nowrap !important;
            overflow-x: hidden;
            overflow-y: hidden;
            padding: 0 0.5rem;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            margin-bottom: 1rem;
            /* Optional spacing under tabs */
        }

        /* Hide scrollbar on WebKit */
        .nav-pills::-webkit-scrollbar {
            display: none;
        }

        /* Keep items in a row, no wrap */
        .nav-pills .nav-item {
            flex: 0 0 auto;
            white-space: nowrap;
        }

        /* Mobile tab button styling */
        .nav-pills>li>button {
            font-size: 13px !important;
            padding: 0.4rem 0.75rem !important;
            font-weight: 600;
            line-height: 1.4;
        }

        /* Active tab styling for mobile */
        .nav-pills>li>button.active {
            border-bottom: 2px solid var(--bs-primary) !important;
            margin-top: 0;
        }

        /* Optional: hover color on mobile */
        .nav-pills>li>button:hover {
            color: var(--bs-primary) !important;
        }

        .videosearch-form {
            display: flex !important;
            flex-wrap: wrap !important;
        }

        /* Search input full width */
        .videosearch-form>.col-md-4 {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            padding: 0 !important;
            margin-bottom: 10px !important;
        }

        .videosearch-form__search-input {
            height: 36px !important;
            font-size: 14px !important;
            padding-left: 30px !important;
        }

        .videosearch-form__search-icon {
            font-size: 16px !important;
            left: 8px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
        }

        /* Select box: fixed width */
        .videosearch-form>.col-md-3.offset-1:nth-of-type(2) {
            flex: 0 0 130px !important;
            max-width: 130px !important;
            padding-left: 0 !important;
            padding-right: 4px !important;
            /* reduce gap between select and button */
            margin-top: 4px !important;
            /* reduce vertical gap from search */
            margin-left: 0 !important;
            /* ensure no horizontal offset */
        }

        .videosearch-form__max-results-select {
            width: 100% !important;
            height: 36px !important;
            font-size: 14px !important;
        }

        /* Button */
        .videosearch-form>.col-md-3.offset-1:nth-of-type(3) {
            flex: 1 1 0 !important;
            max-width: calc(100% - 134px) !important;
            padding-left: 0 !important;
            margin-top: 4px !important;
            /* reduce vertical gap */
            display: flex !important;
            justify-content: flex-end !important;
            align-items: center !important;
        }

        .videosearch-form__search-button {
            height: 36px !important;
            font-size: 14px !important;
            padding: 0 12px !important;
            white-space: nowrap !important;
        }

        .videosearch-form>.col-md-4 {
            margin-bottom: 0px !important;
        }

        /* Keep button sizing compact and reduce icon-text gap */
        .video-advance-search__search-button,
        .video-advance-search__reset-button {
            font-size: 0.8rem !important;
            padding: 0.35rem 0.65rem !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 0.25rem !important;
            /* reduce space between icon & text */
        }

        .videocolumnselector-dropdown .form-switch .form-check-input {
            appearance: none !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            width: 2.5em !important;
            height: 1.5em !important;
            background-color: var(--bs-form-check-bg, #fff) !important;
            border: var(--bs-border-width, 1px) solid var(--bs-border-color, #ced4da) !important;
            border-radius: 2em !important;
            position: relative;
            transition: background-color 0.15s ease-in-out,
                border-color 0.15s ease-in-out;
            cursor: pointer;
            display: inline-block;
            vertical-align: middle;
        }

        .videocolumnselector-dropdown .form-switch .form-check-input::before {
            content: '';
            position: absolute;
            top: 0.2em;
            left: 0.2em;
            width: 1.1em;
            height: 1.1em;
            background-color: #adb5bd;
            /* 🎯 Bootstrap's thumb color match */
            border-radius: 50%;
            transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
        }

        .videocolumnselector-dropdown .form-switch .form-check-input:checked {
            background-color: var(--bs-primary, #0d6efd) !important;
            border-color: var(--bs-primary, #0d6efd) !important;
        }

        .videocolumnselector-dropdown .form-switch .form-check-input:checked::before {
            transform: translateX(1em);
            background-color: #fff;
        }

        .videocolumnselector-dropdown .form-switch .form-check-input:focus {
            outline: none;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
            border-color: var(--bs-primary);
        }

        .videocolumnselector-dropdown .form-check-label {
            font-size: 0.9rem;
        }

        .videoeditcampaigncolumnselector-dropdown .form-switch .form-check-input {
            appearance: none !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            width: 2.5em !important;
            height: 1.5em !important;
            background-color: var(--bs-form-check-bg, #fff) !important;
            border: var(--bs-border-width, 1px) solid var(--bs-border-color, #ced4da) !important;
            border-radius: 2em !important;
            position: relative;
            transition: background-color 0.15s ease-in-out,
                border-color 0.15s ease-in-out;
            cursor: pointer;
            display: inline-block;
            vertical-align: middle;
        }

        .videoeditcampaigncolumnselector-dropdown .form-switch .form-check-input::before {
            content: '';
            position: absolute;
            top: 0.2em;
            left: 0.2em;
            width: 1.1em;
            height: 1.1em;
            background-color: #adb5bd;
            /* 🎯 Bootstrap's thumb color match */
            border-radius: 50%;
            transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
        }

        .videoeditcampaigncolumnselector-dropdown .form-switch .form-check-input:checked {
            background-color: var(--bs-primary, #0d6efd) !important;
            border-color: var(--bs-primary, #0d6efd) !important;
        }

        .videoeditcampaigncolumnselector-dropdown .form-switch .form-check-input:checked::before {
            transform: translateX(1em);
            background-color: #fff;
        }

        .videoeditcampaigncolumnselector-dropdown .form-switch .form-check-input:focus {
            outline: none;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
            border-color: var(--bs-primary);
        }

        .videoeditcampaigncolumnselector-dropdown .form-check-label {
            font-size: 0.9rem;
        }

        .mobile-video-toolbar-btn {
            height: 36px !important;
            font-size: 14px !important;
            padding: 0 10px !important;
            /* Reduce overall padding */
            padding-left: 6px !important;
            /* Tighten icon to left */
            white-space: nowrap !important;
            display: flex;
            align-items: center;
            gap: 6px;
            justify-content: flex-start;
            /* Align everything to left */
        }

        .mobile-video-toolbar-btn i {
            font-size: 14px;
            margin-left: 0 !important;
            /* Remove default margin */
            padding-left: 0 !important;
            width: 16px;
            min-width: 16px;
            text-align: center;
        }

        .mobile-video-toolbar-btn.customize-columns-btn {
            margin-left: -8px;
            /* Adjust as needed for perfect left alignment */
            width: calc(100%-4px);
            /* Account for left/right margins */
            font-size: 14px !important;
            padding: 0 12px !important;
            padding-left: 6px !important;
            white-space: nowrap !important;
            height: 36px !important;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .mobile-video-toolbar-btn.customize-columns-btn i {
            margin-left: 0 !important;
            padding-left: 0 !important;
            font-size: 14px;
            width: 16px;
            min-width: 16px;
            text-align: center;
        }

        .video-advance-search-input {
            width: 2.5em !important;
            height: 1.25em !important;
            border-radius: 2em;
            background-color: var(--bs-form-check-bg, #fff);
            border: 1px solid var(--bs-border-color, #ced4da);
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            cursor: pointer;
            transition: background-color 0.2s, border-color 0.2s;
        }

        .video-advance-search-wrapper__title {
            font-size: 14px !important;
            /* smaller font for mobile */
        }

        .moreless-button {
            font-size: 0.75rem !important;
            /* smaller text */
            margin-left: 2px !important;
            /* reduce left margin */
            line-height: 1;
            /* keep compact */
            padding: 0 !important;
            /* ensure no extra padding */
        }

        /* Channel Search */

        .channelsearch-form {
            display: flex !important;
            flex-wrap: wrap !important;
        }

        /* Search input: full width */
        .channelsearch-form>.col-md-4 {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            padding: 0 !important;
            margin-bottom: 4px !important;
        }

        .channelsearch-form__search-input {
            height: 36px !important;
            font-size: 14px !important;
            padding-left: 30px !important;
        }

        .channelsearch-form__icon {
            font-size: 16px !important;
            left: 8px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            position: absolute !important;
            color: #666 !important;
        }

        /* Select: left side of second row */
        .channelsearch-form>.col-md-3.offset-1:nth-of-type(2) {
            flex: 0 0 130px !important;
            max-width: 130px !important;
            padding-left: 0 !important;
            padding-right: 4px !important;
            margin-top: 4px !important;
            margin-left: 0 !important;
        }

        .channelsearch-form__max-results-select {
            width: 100% !important;
            height: 36px !important;
            font-size: 14px !important;
        }

        /* Button: right side of second row */

        .channelsearch-form>.col-md-3.offset-1:nth-of-type(3) {
            flex: 1 1 0 !important;
            max-width: calc(100% - 134px) !important;
            padding-left: 0 !important;
            margin-top: 4px !important;
            display: flex !important;
            justify-content: flex-end !important;
            align-items: center !important;
        }

        .channelsearch-form__search-button {
            height: 36px !important;
            font-size: 14px !important;
            padding: 0 12px !important;
            white-space: nowrap !important;
        }




        /* Force Advance Search buttons to align flush left */

        /* Keep button sizing compact and reduce icon-text gap */
        .channel-advance-search__search-button,
        .channel-advance-search__reset-button {
            font-size: 0.8rem !important;
            padding: 0.35rem 0.65rem !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 0.25rem !important;
            /* reduce space between icon & text */
        }

        .influencer-advance-search-wrapper__title {
            font-size: 14px !important;
            /* smaller font for mobile */
        }

        .channel-advance-search-input {
            width: 2.5em !important;
            height: 1.25em !important;
            border-radius: 2em;
            background-color: var(--bs-form-check-bg, #fff);
            border: 1px solid var(--bs-border-color, #ced4da);
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            cursor: pointer;
            transition: background-color 0.2s, border-color 0.2s;
        }

        /* ===========================
      📱 Mobile ≤786px: Popular Search
    =========================== */


        .popularsearch__container {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        /* Stack selects vertically */
        .popularsearch__container .row {
            display: flex;
            flex-direction: column !important;
            flex-wrap: nowrap !important;
            width: 100%;
        }

        /* Each select block full width with even spacing */
        .popularsearch__container .col-4,
        .popularsearch__field {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            width: 100% !important;
            margin: 0 0 1rem 0 !important;
            /* nice vertical gap */
            padding: 0 !important;
        }

        /* Label styling (above each select) */
        .popularsearch__container .popularsearch__label {
            display: block;
            width: 100%;
            font-size: 0.8rem;
            margin-bottom: 0.3rem;
            line-height: 1.2;
            text-align: left;
        }

        /* Make sure select2 or select input spans full width */
        .popularsearch__container .popularsearch__select,
        .popularsearch__container select {
            width: 100% !important;
            min-width: 100% !important;
        }

        /* Remove any leftover horizontal gaps */
        .popularsearch__container.row [class*='col-'],
        .popularsearch__container .col-4:not(:last-child) {
            margin-right: 0 !important;
        }

        /* Button row below selects */
        .popularsearch__field.mt-4 {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            width: 100% !important;
            display: flex !important;
            justify-content: flex-end;
            margin-top: 0.5rem !important;
        }

        /* Influencer Search */

        .influencer-advance-search-input {
            width: 2.5em !important;
            height: 1.25em !important;
            border-radius: 2em;
            background-color: var(--bs-form-check-bg, #fff);
            border: 1px solid var(--bs-border-color, #ced4da);
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            cursor: pointer;
            transition: background-color 0.2s, border-color 0.2s;
        }

        .influencer-channel-toolbar-btn {
            height: 36px !important;
            font-size: 14px !important;
            padding: 0 10px !important;
            /* Reduce overall padding */
            padding-left: 6px !important;
            /* Tighten icon to left */
            white-space: nowrap !important;
            display: flex;
            align-items: center;
            gap: 6px;
            justify-content: flex-start;
            /* Align everything to left */
        }

        .influencer-channel-toolbar-btn i {
            font-size: 14px;
            margin-left: 0 !important;
            /* Remove default margin */
            padding-left: 0 !important;
            width: 16px;
            min-width: 16px;
            text-align: center;
        }

        .influencersearch-form {
            display: flex !important;
            flex-wrap: wrap !important;
        }

        /* Search input full width */
        .influencersearch-form>.col-md-4 {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            padding: 0 !important;
            margin-bottom: 10px !important;
        }

        .influencersearch-form__search-input {
            height: 36px !important;
            font-size: 14px !important;
            padding-left: 30px !important;
        }

        .influencersearch-form__search-icon {
            font-size: 16px !important;
            left: 8px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
        }

        /* Select box: fixed width */
        .influencersearch-form>.col-md-3.offset-1:nth-of-type(2) {
            flex: 0 0 130px !important;
            max-width: 130px !important;
            padding-left: 0 !important;
            padding-right: 4px !important;
            /* reduce gap between select and button */
            margin-top: 4px !important;
            /* reduce vertical gap from search */
            margin-left: 0 !important;
            /* ensure no horizontal offset */
        }

        .influencersearch-form__max-results-select {
            width: 100% !important;
            height: 36px !important;
            font-size: 14px !important;
        }

        /* Button */
        .influencersearch-form>.col-md-3.offset-1:nth-of-type(3) {
            flex: 1 1 0 !important;
            max-width: calc(100% - 134px) !important;
            padding-left: 0 !important;
            margin-top: 4px !important;
            /* reduce vertical gap */
            display: flex !important;
            justify-content: flex-end !important;
            align-items: center !important;
        }

        .influencersearch-form__search-button {
            font-size: 0.8rem !important;
            padding: 0.35rem 0.65rem !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 0.25rem !important;
            /* reduce icon–text spacing */
            line-height: 1.1 !important;
            white-space: nowrap !important;
        }

        .influencersearch-form__search-button i {
            font-size: 0.8rem !important;
            margin-right: 0 !important;
            /* ensure no extra space from icon tag */
            vertical-align: middle !important;
        }

        .influencersearch-form>.col-md-4 {
            margin-bottom: 0px !important;
        }

        .influencer-advance-search__search-button,
        .influencer-advance-search__reset-button {
            font-size: 0.875rem;
            padding: 0.4rem 0.75rem;
            white-space: nowrap;
            /* Prevent text wrapping */
            max-width: 100%;
        }

        .influencercolumnselector-dropdown .form-switch .form-check-input {
            appearance: none !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            width: 2.5em !important;
            height: 1.5em !important;
            background-color: var(--bs-form-check-bg, #fff) !important;
            border: var(--bs-border-width, 1px) solid var(--bs-border-color, #ced4da) !important;
            border-radius: 2em !important;
            position: relative;
            transition: background-color 0.15s ease-in-out,
                border-color 0.15s ease-in-out;
            cursor: pointer;
            display: inline-block;
            vertical-align: middle;
        }

        .influencercolumnselector-dropdown .form-switch .form-check-input::before {
            content: '';
            position: absolute;
            top: 0.2em;
            left: 0.2em;
            width: 1.1em;
            height: 1.1em;
            background-color: #adb5bd;
            /* 🎯 Bootstrap's thumb color match */
            border-radius: 50%;
            transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
        }

        .influencercolumnselector-dropdown .form-switch .form-check-input:checked {
            background-color: var(--bs-primary, #0d6efd) !important;
            border-color: var(--bs-primary, #0d6efd) !important;
        }

        .influencercolumnselector-dropdown .form-switch .form-check-input:checked::before {
            transform: translateX(1em);
            background-color: #fff;
        }

        .influencercolumnselector-dropdown .form-switch .form-check-input:focus {
            outline: none;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
            border-color: var(--bs-primary);
        }

        .influencercolumnselector-dropdown .form-check-label {
            font-size: 0.9rem;
        }


        .influencereditcolumnselector-dropdown .form-switch .form-check-input {
            appearance: none !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            width: 2.5em !important;
            height: 1.5em !important;
            background-color: var(--bs-form-check-bg, #fff) !important;
            border: var(--bs-border-width, 1px) solid var(--bs-border-color, #ced4da) !important;
            border-radius: 2em !important;
            position: relative;
            transition: background-color 0.15s ease-in-out,
                border-color 0.15s ease-in-out;
            cursor: pointer;
            display: inline-block;
            vertical-align: middle;
        }

        .influencereditcolumnselector-dropdown .form-switch .form-check-input::before {
            content: '';
            position: absolute;
            top: 0.2em;
            left: 0.2em;
            width: 1.1em;
            height: 1.1em;
            background-color: #adb5bd;
            /* 🎯 Bootstrap's thumb color match */
            border-radius: 50%;
            transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
        }

        .influencereditcolumnselector-dropdown .form-switch .form-check-input:checked {
            background-color: var(--bs-primary, #0d6efd) !important;
            border-color: var(--bs-primary, #0d6efd) !important;
        }

        .influencereditcolumnselector-dropdown .form-switch .form-check-input:checked::before {
            transform: translateX(1em);
            background-color: #fff;
        }

        .influencereditcolumnselector-dropdown .form-switch .form-check-input:focus {
            outline: none;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
            border-color: var(--bs-primary);
        }

        .influencereditcolumnselector-dropdown .form-check-label {
            font-size: 0.9rem;
        }

        .mobile-channel-toolbar-btn {
            height: 36px !important;
            font-size: 14px !important;
            padding: 0 10px !important;
            /* Reduce overall padding */
            padding-left: 6px !important;
            /* Tighten icon to left */
            white-space: nowrap !important;
            display: flex;
            align-items: center;
            gap: 6px;
            justify-content: flex-start;
            /* Align everything to left */
        }

        .mobile-channel-toolbar-btn i {
            font-size: 14px;
            margin-left: 0 !important;
            /* Remove default margin */
            padding-left: 0 !important;
            width: 16px;
            min-width: 16px;
            text-align: center;
        }

        .mobile-channel-toolbar-btn.customize-columns-btn {
            margin-left: -8px;
            /* Adjust as needed for perfect left alignment */
            width: calc(100%-4px);
            /* Account for left/right margins */
            font-size: 14px !important;
            padding: 0 12px !important;
            padding-left: 6px !important;
            white-space: nowrap !important;
            height: 36px !important;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .mobile-channel-toolbar-btn.customize-columns-btn i {
            margin-left: 0 !important;
            padding-left: 0 !important;
            font-size: 14px;
            width: 16px;
            min-width: 16px;
            text-align: center;
        }

        /* Thumbnail column = 3rd column */
        #influencer-table td:nth-child(3) img {
            max-width: 45px !important;
            height: auto !important;
        }

        /* Channel column = 4th column (reduce link size) */
        #influencer-table td:nth-child(4) a {
            font-size: 0.75rem !important;
            line-height: 1rem !important;
        }

        /* Reduce spacing from <br> tags */
        #influencer-table td:nth-child(4) br {
            display: none;
        }

        #influencer-table td:nth-child(4) a+a {
            margin-top: 3px;
            display: block;
        }

        /* === CAMPAIGNS === */

        .campaigns-bulk-actions-column-mobile {
            overflow: visible !important;
            /* allow dropdown to escape */
            z-index: 1100;
            /* make sure it sits above table */
        }

        .campaigns-bulk-actions-column-mobile .common-dropdown-btn {
            font-size: 0.68rem !important;
            line-height: 1 !important;
            padding: 0.65rem 0.35rem !important;
            height: auto !important;
            border-radius: 0.25rem !important;
            display: inline-flex !important;
            /* override JS inline style */
            align-items: center !important;
            gap: 0.25rem !important;
            min-height: unset !important;
        }

        .campaigns-bulk-actions-column-mobile .dropdown {
            position: relative;
        }

        .campaigns-bulk-actions-column-mobile .dropdown-menu {
            position: absolute !important;
            top: 100%;
            left: 0 !important;
            right: auto !important;
            transform: none !important;
            min-width: 180px !important;
            z-index: 1500 !important;
        }

        .campaigns-bulk-actions-column-mobile .campaigns-bulk-dropdown__button-mobile {
            display: none !important;
        }

        .campaigns-bulk-actions-column-mobile.bulk-actions-visible .campaigns-bulk-dropdown__button-mobile {
            display: inline-flex !important;
            /* matches your other button styling */
        }

        /* Animate column inside */
        .campaigns-bulk-actions-column-mobile {
            opacity: 0;
            transform: translateY(-10px);
            transition: opacity 0.25s ease, transform 0.25s ease;
        }

        .campaigns-bulk-actions-column-mobile.bulk-actions-visible {
            opacity: 1;
            transform: translateY(0);
        }

        .campaigns-selected-rows-text-mobile {
            opacity: 0;
            transition: opacity 0.25s ease;
        }

        .campaigns-selected-rows-text-mobile.visible {
            opacity: 1;
            display: inline !important;
            /* override the inline display:none */
        }

        .desktop-toolbar-row {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            overflow: hidden !important;
        }

        .campaign-description-wrapper {
            font-size: 14px;
            line-height: 1.4;
        }

        .campaign-pill-btn {
            font-size: 0.7rem !important;
            padding: 0.2rem 0.35rem !important;
        }

        .dropdown.campaigns-all-dropdown {
            position: relative !important;
            z-index: 1200;
        }

        .campaigns-all-dropdown__menu {
            position: absolute !important;
            top: 100% !important;
            bottom: auto !important;
            right: 0 !important;
            left: auto !important;
            margin-top: 4px !important;
            /* Small space between button & menu */
            z-index: 2000 !important;
        }

        .campaigns-all-dropdown__button,
        .campaigns-bulk-dropdown__button {
            font-size: 0.75rem;
            padding: 0.5rem 0.75rem;
            white-space: nowrap;
        }

        /* === MOBILE TOOLBAR === */
        .campaigns-header-toolbar-mobile {
            display: flex !important;
            align-items: center;
            width: 100%;
            gap: 0.5rem;
            overflow: visible !important;
            flex-wrap: nowrap;
            /* prevent wrapping */
        }

        .search-wrapper,
        .position-relative.flex-grow-1 {
            flex-grow: 1;
            flex-shrink: 1;
            min-width: 0;
            /* crucial for shrinking */
            margin: 0 0.3rem;
        }

        .campaigns-all-dropdown__button {
            flex-shrink: 0;
            padding: 0.3rem 0.5rem;
            min-width: 36px;
            max-width: 40px;
            font-size: 1.1rem;
        }
    }

    @media (max-width: 576px) {

        /* === GLOBAL SCROLL FIXES === */
        html {
            scrollbar-gutter: stable !important;
            overflow-y: scroll !important;
        }

        * {
            scrollbar-width: auto !important;
            scrollbar-color: auto !important;
        }

        /* === GRID GUTTER RESET === */
        .row {
            --bs-gutter-x: 0;
        }

        div.dt-container .row {
            --bs-gutter-y: 0 !important;
        }


        #dropdownMenuButtonMobile {
            padding: 4px 6px !important;
            /* reduce hit area */
            font-size: 12px;
            /* icon scale */
            min-height: 25px;
            min-width: 25px;
        }

        #dropdownMenuButtonMobile i {
            font-size: 0.75rem;
            /* ellipsis icon smaller */
        }

        /* === MAIN LAYOUT === */
        .main-content {
            padding: 0 0.5rem !important;
            margin-top: 80px !important;
        }

        .breadcrumb-mobile-wrapper {
            padding-left: 0.5rem !important;
        }

        .row.align-items-center,
        .col-md-3 {
            overflow: visible !important;
        }

        .col-md-3 {
            display: flex !important;
            align-items: center;
            justify-content: flex-end;
            gap: 0.15rem;
            flex-grow: 1;
            min-width: 0;
            margin-left: 0.5rem;
        }

        /* === BREADCRUMB === */
        .breadcrumb {
            font-size: 0.75rem !important;
        }

        .row.align-items-center {
            gap: 0.3rem !important;
        }

        /* === ACTION BAR === */

        .bottom-nav {
            padding-left: 20px !important;
            padding-right: 20px !important;
            padding-bottom: 20px !important;
        }

        /* === DROPDOWNS === */

        .dropdown-menu .dropdown-item {
            font-size: 0.8rem !important;
        }

        /* === TOASTS === */

        /* Force toast container at top, centered */

        .jq-toast-wrap {
            top: 0.75rem !important;
            /* top of screen */
            left: 0 !important;
            right: 0 !important;
            margin: 0 auto !important;
            min-width: auto;
            max-width: 90%;
            /* smaller width on mobile */
            width: 90%;
            z-index: 9999;
        }

        .jq-toast-single {
            font-size: 13px !important;
            padding: 10px 12px !important;

        }

        /* Wrap text safely */
        .jq-toast-single .jq-toast-flex span,
        .jq-toast-single .jq-toast-message {
            display: block;
            word-break: break-word;
            max-width: calc(100% - 30px);
            /* space for close button */
        }

        .close-jq-toast-single {
            position: absolute;
            top: 3px;
            right: 7px;
            font-size: 18px !important;
            cursor: pointer;
            opacity: 0.7;
            color: var(--bs-custom-white-dark);
        }

        /*Loader*/

        #global-loader {
            justify-content: flex-start;
            /* keep loader from top */
            padding-top: 40px;
            /* adjust top margin */
        }

        #global-loader .preloader-content {
            width: 50px;
            /* smaller circle */
            height: 50px;
        }

        #global-loader .preloader-letter {
            font-size: 24px;
            /* smaller T */
            line-height: 50px;
            /* match circle height */
        }

        #global-loader .rotating-circle {
            width: 50px;
            height: 50px;
            border-width: 2px;
            top: 0;
            left: 0;
        }

        #global-loader .loader-text {
            font-size: 12px !important;
            /* smaller text */
            margin-top: 4px !important;
            /* closer to circle */
        }

        /* BASE POSITION (keep your centering intact) */
  #fullpage-loader,
  #keyword-search-loader,
  #video-table-loader,
  #channel-table-loader,
  #keyword-table-loader,
  #site-fullpage-loader {
      top: 100px;
  }

  /* =========================
     LOADER BOX SIZE
  ========================= */
  #fullpage-loader .preloader-content,
  #keyword-search-loader .preloader-content,
  #video-table-loader .preloader-content,
  #channel-table-loader .preloader-content,
  #keyword-table-loader .preloader-content,
  #site-fullpage-loader .site-preloader-content {
    width: 72px;
    height: 72px;
  }

  /* =========================
     ROTATING CIRCLE (IMPORTANT FIX)
     - removes visual "too far" gap
  ========================= */
  #fullpage-loader .rotating-circle,
  #keyword-search-loader .rotating-circle,
  #video-table-loader .rotating-circle,
  #channel-table-loader .rotating-circle,
  #keyword-table-loader .rotating-circle,
  #site-fullpage-loader .site-rotating-circle {
    width: 88px;
    height: 88px;

    top: -8px;
    left: -8px;
  }

  /* =========================
     LETTER CENTER FIX (CRITICAL)
  ========================= */
  #fullpage-loader .preloader-letter,
  #keyword-search-loader .preloader-letter,
  #video-table-loader .preloader-letter,
  #channel-table-loader .preloader-letter,
  #keyword-table-loader .preloader-letter,
  #site-fullpage-loader .site-preloader-letter {

    font-size: 28px;
    line-height: 72px; /* MUST match container height */

  }

  /* =========================
     LOADER TEXT (CENTER FIX)
  ========================= */
  #fullpage-loader .loader-text,
  #keyword-search-loader .loader-text,
  #video-table-loader .loader-text,
  #channel-table-loader .loader-text,
  #keyword-table-loader .loader-text,
  #site-fullpage-loader .site-loader-text {

    margin-top: 14px !important;

    transform: none !important;  /* 🚨 removes your drift bug */
    text-align: center;
    width: 100%;

    font-size: 13px;
  }
/* =========================
   ANIMATIONS
========================= */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.85; }
}



        /* === BULK ACTIONS MOBILE === */
        .bulk-actions-column-mobile {
            max-width: 100% !important;
            padding-left: 1rem !important;
        }

        /* === CAMPAIGN SEARCH === */

        .campaigns-table__search-input {
            width: 100% !important;
            max-width: 100% !important;
            flex: 1 1 auto !important;
            padding-right: 2rem;
            font-size: 0.875rem;
            height: 36px;
            box-sizing: border-box;
        }

        .campaigns-table__search-icon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #aaa;
            pointer-events: none;
            font-size: 1rem;
        }

        /* === CAMPAIGNS TABLE === */
        .campaigns-table__column--name,
        .campaigns-table__column--description {
            white-space: nowrap;
        }

        /* === CAMPAIGN BUTTONS === */

        .btn-add-campaign {
            width: auto !important;
            max-width: none !important;
            padding: 0.4rem 0.6rem !important;
            font-size: 0.75rem !important;
            white-space: nowrap !important;
            flex-shrink: 0 !important;
        }

        .campaign-pill-btn {
            font-size: 0.7rem !important;
            padding: 0.2rem 0.35rem !important;
        }

        .campaigns-all-dropdown__button {
            font-size: 0.7rem !important;
            padding: 0.2rem 0.5rem !important;
        }

        .dropdown.campaigns-all-dropdown {
            position: relative !important;
            z-index: 1200;
        }

        .campaigns-mobile-toolbar {
            margin-bottom: 0rem !important;
            /* optional: reduce space below toolbar */
        }

        /* === VIDEO INFORMATION === */

        #videoForm {
            flex-direction: row;
            flex-wrap: wrap;
        }

        #videoForm input[type='text'] {
            width: 100% !important;
            flex: 0 0 100%;
        }

        #videoForm button {
            width: auto !important;
            /* keep button natural size */
            flex: 0 0 auto;
            margin-top: 8px;
            /* small spacing below input */
        }

        /* === SITE SEARCH === */

        #siteSearchForm {
            flex-wrap: wrap;
            /* allow stacking */
        }

        #siteSearchForm .form-control,
        #siteSearchForm .form-select,
        #siteSearchForm button {
            width: 100% !important;
            /* full width on mobile */
            margin-bottom: 0.5rem;
            /* spacing between fields */
        }

        #siteResultsTable {
            display: block;
            /* allow horizontal scroll */
            width: 100%;
            overflow-x: auto;

            #modalAllSiteLinks .modal-dialog {
                max-width: calc(100% - 1rem) !important;
                /* slightly smaller than full width */
                margin-left: 2rem !important;
                /* slight left padding to center */
                margin-right: 0.5rem !important;
                /* slight right padding */
            }

            #modalAllSiteLinks .modal-dialog {
                max-width: calc(100% - 1rem) !important;
                /* slightly smaller than full width */
                margin-left: 2rem !important;
                /* slight left padding to center */
                margin-right: 0.5rem !important;
                /* slight right padding */
            }
        }

        /* === MODAL === */

        .modal .modal-title {
            font-size: 1rem !important;
            /* ~16px */
        }

        /* Smaller text inside modal body */
        .modal .modal-body,
        .modal .modal-body p,
        .modal .modal-body label,
        .modal .modal-body span,
        .modal .modal-body a,
        .modal .modal-body select {
            font-size: 0.875rem !important;
            /* ~14px */
        }

        /* Smaller buttons in footer */
        .modal .modal-footer .btn {
            font-size: 0.875rem !important;
            /* ~14px */
        }

        modal,
        .modal-dialog,
        .modal-content {
            z-index: 9999 !important;
            opacity: 1 !important;
            filter: none !important;
        }

        .modal .modal-body {
            flex: 1 1 auto !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
            min-height: 0;
        }

        .modal-footer {
            flex-wrap: nowrap !important;
        }

        /* Keep Add and Clear buttons side-by-side on left */
        .modal-footer>.left-buttons-wrapper {
            order: 1;
            gap: 0.5rem;
        }

        /* Close button on right */
        .modal-footer>.right-button-wrapper {
            order: 2;
            margin-left: auto !important;
        }

        /* Button sizing */
        .modal-footer .btn {
            white-space: nowrap;
            flex-shrink: 0;
            padding: 6px 12px;
            font-size: 14px;
        }

        /* Optional: ensure backdrop is behind */
        .modal-backdrop.show {
            z-index: 1040 !important;
            background-color: rgba(0, 0, 0, 0.85) !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
        }

        /* Make footer sticky at bottom */

        .modal .modal-footer {
            flex-direction: row !important;
            /* side by side */
            align-items: center !important;
            /* vertically center */
            justify-content: space-between !important;
            /* spread out */
            gap: 0.5rem !important;
            flex-wrap: nowrap !important;
            /* prevent wrapping */
            width: 100% !important;
            padding: 0.75rem 1rem !important;
            box-sizing: border-box !important;
        }

        .modal .modal-footer>* {
            width: auto !important;
            /* buttons take only needed width */
            margin: 0 !important;
        }

        /* ✅ FIXED: Keep spinner and title side by side */
        .modal .modal-header .d-flex {
            flex-direction: row !important;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            text-align: center;
            flex-wrap: nowrap;
        }

        .modal .modal-header i.fa-spinner {
            font-size: 1rem !important;
            flex-shrink: 0;
        }

        .modal .modal-header {
            position: sticky !important;
            top: 0 !important;
            background: #fff !important;
            z-index: 10 !important;
            flex-shrink: 0 !important;
            padding: 0.75rem 1rem !important;
            /* keep your padding */
        }

        .modal-footer {
            flex-wrap: nowrap !important;
            overflow-x: auto;
            /* Optional: allows scrolling if it ever overflows */
            gap: 0.5rem;
            /* Adds spacing between items */
        }

        /* Keep pointer events and scroll behavior outside media query */
        .modal,
        .modal-dialog,
        .modal-content,
        .modal-header,
        .modal-body,
        .modal-footer {
            pointer-events: auto !important;
            touch-action: auto !important;
            user-select: text !important;
        }

        .modal-footer button {
            pointer-events: auto !important;
            touch-action: manipulation;
        }

        /* Prevent background scroll when modal open */
        body.modal-open {
            overflow: hidden !important;
            position: fixed !important;
            width: 100% !important;
        }

        .modal.show {
            pointer-events: auto !important;
            opacity: 1 !important;
            z-index: 9999 !important;
        }

        .modal.show .modal-header,
        .modal.show .modal-footer {
            z-index: 10000 !important;
            pointer-events: auto !important;
        }

        .modal:not(.show) .modal-header,
        .modal:not(.show) .modal-footer {
            display: none !important;
        }

        .modal.show .modal-content {
            pointer-events: auto !important;
        }

        /* Keywords Modal */

        /* Filter Keywords*/

        #modalFilterKeywords {
            position: fixed !important;
            top: 0;
            left: 0;
            width: 100vw !important;
            z-index: 2000 !important;
            overflow: hidden !important;
        }

        /* Modal flush & full width */
        .modal.filter-keywords-modal {
            width: 100vw !important;
            max-width: 100vw !important;
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box !important;
        }

        /* Sticky header & footer */
        .modal.filter-keywords-modal .modal-header,
        .modal.filter-keywords-modal .modal-footer {
            flex-shrink: 0;
            position: sticky;
            z-index: 10;
            padding-left: 1rem !important;
            /* add this */
            padding-left: 1rem !important;
            /* add this */
            padding-right: 1rem !important;
            /* add this */
        }

        /* Header */
        .modal.filter-keywords-modal .modal-header {
            position: sticky !important;
            top: 0 !important;

            z-index: 10 !important;
            flex-shrink: 0 !important;
            padding: 0.75rem 2rem !important;
        }

        /* Footer */
        .modal.filter-keywords-modal .modal-footer {
            bottom: 0;
            width: 100% !important;
            flex-shrink: 0 !important;
            min-height: 60px !important;
            box-sizing: border-box !important;
            margin: 0 !important;
            padding: 0.75rem 1rem !important;
            position: sticky;
            /* sticky, NOT fixed */
        }

        /* Body scroll area */
        .modal.filter-keywords-modal .modal-body {
            padding-bottom: 60px;
            /* reserve space for footer */
            overflow-x: auto !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
            padding-right: 1rem !important;
            /* Add right padding */
            box-sizing: border-box !important;
            min-width: 100%;
            /* force horizontal scrollbar when needed */
            margin-bottom: 0 !important;
        }

        /* Dialog & content fill parent */
        #modalFilterKeywords .modal-dialog {
            margin: 0 !important;
            padding: 0 !important;
            /* add this */

        }

        .modal.filter-keywords-modal .modal-content {
            margin: 0 !important;
            height: 100% !important;
            box-sizing: border-box !important;
        }

        /* Keyword Include Exclude */

        #modalIncludeExcludeKeywords {
            width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalIncludeExcludeEditKeywords {
            width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalIncludeExcludeKeywords .modal-dialog {
            margin: 0 !important;
            max-height: 100% !important;
        }

        #modalIncludeExcludeKeywords .modal-content {
            box-sizing: border-box !important;
        }

        #modalIncludeExcludeKeywords .modal-body {
            overflow-y: auto !important;
            padding-bottom: 60px;
            /* if footer is sticky */
        }

        #modalIncludeExcludeKeywords,
        #modalIncludeExcludeKeywords .modal-dialog,
        #modalIncludeExcludeKeywords .modal-content {
            pointer-events: auto !important;
            touch-action: auto !important;
        }

        /* Keyword All Keywords */

        #modalAllKeywordsCampaign {
            width: 100vw !important;
            max-width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalAllKeywordsEditCampaign {
            width: 100vw !important;
            max-width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        /* Modal dialog identical to the others */
        #modalAllKeywordsCampaign .modal-dialog {
            margin: 0 !important;
            max-height: 100% !important;
        }

        /* Ensure proper box sizing */
        #modalAllKeywordsCampaign .modal-content {
            box-sizing: border-box !important;
        }

        /* Scrollable body with consistent padding */
        #modalAllKeywordsCampaign .modal-body {
            overflow-y: auto !important;
            padding-bottom: 60px;
            /* leave room if footer is sticky */
            padding-left: 2.5rem !important;
        }

        /* Pointer/touch settings (same as others) */
        #modalAllKeywordsCampaign,
        #modalAllKeywordsCampaign .modal-dialog,
        #modalAllKeywordsCampaign .modal-content {
            pointer-events: auto !important;
            touch-action: auto !important;
        }

        /* Add gap between label and select */
        .kw-campaign-modal .form-group.row {
            display: flex !important;
            flex-wrap: wrap !important;
            /* <-- change here */
            align-items: center !important;
            gap: 0.5rem !important;
            padding-left: 0 !important;
            padding-right: 0.5rem !important;
        }

        .kw-campaign-modal .form-group.row>label {
            flex: 0 0 auto !important;
            width: auto !important;
            max-width: 40% !important;
            text-align: left !important;
            margin-bottom: 0 !important;
        }

        .kw-campaign-modal .form-group.row label,
        .kw-campaign-modal .form-group.row select {
            line-height: 1.3;
            height: 38px;
            /* standard Bootstrap input height */
        }

        .kw-campaign-modal .form-group.row>div {
            flex: 1 1 auto !important;
            width: auto !important;
            max-width: 60% !important;
        }

        /* Add gap between label and select */
        .kw-campaign-modal .form-group.row.flex-nowrap>label.col-5 {
            padding-right: 1rem;
            text-align: left !important;
            margin-bottom: 0;
        }

        /* Remove left padding on select container */
        .kw-campaign-modal .form-group.row.flex-nowrap>div.col-7 {
            padding-left: 0;
        }

        /* Make select full width inside col */
        .kw-campaign-modal .form-group.row.flex-nowrap>div.col-7 select.form-select {
            width: 100% !important;
            min-width: 0 !important;
        }

        .kw-campaign-modal .form-group.row>div select {
            width: 100% !important;
            min-width: 0 !important;
        }

        /* KW Selected Keywords */

        #modalSelectedKeywordsCampaign {
            width: 100vw !important;
            max-width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalSelectedEditKeywordsCampaign {
            width: 100vw !important;
            max-width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalSelectedKeywordsCampaign .modal-dialog {
            margin: 0 !important;
            max-height: 100% !important;
        }

        #modalSelectedKeywordsCampaigns .modal-content {
            box-sizing: border-box !important;
        }

        #modalSelectedKeywordsCampaign .modal-body {
            overflow-y: auto !important;
            padding-bottom: 60px;
            /* if footer is sticky */
            padding-left: 2.5rem !important;
        }

        #modalSelectedKeywordsCampaign,
        #modalSelectedKeywordsCampaign .modal-dialog,
        #modalSelectedKeywordsCampaign .modal-content {
            pointer-events: auto !important;
            touch-action: auto !important;
        }

        /* KW Single Keyword */

        #modalSingleKeywordCampaign {
            width: 100vw !important;
            max-width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalSingleKeywordEditCampaign {
            width: 100vw !important;
            max-width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalSingleKeywordCampaign .modal-dialog {
            margin: 0 !important;
            max-height: 100% !important;
        }

        #modalSingleKeywordCampaign .modal-content {
            box-sizing: border-box !important;
        }

        #modalSingleKeywordCampaign .modal-body {
            overflow-y: auto !important;
            padding-bottom: 60px;
            /* if footer is sticky */
            padding-left: 2.5rem !important;
        }

        #modalSingleKeywordCampaign,
        #modalSingleKeywordCampaign.modal-dialog,
        #modalSingleKeywordCampaign.modal-content {
            pointer-events: auto !important;
            touch-action: auto !important;
        }

        /* Keyword Occurences */

        #modalOccurencesKeywords .modal-dialog {
            width: 100vw !important;
            max-width: 100vw !important;
            height: 100vh !important;
            max-height: 100vh !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        #modalOccurencesEditKeywords .modal-dialog {
            width: 100vw !important;
            max-width: 100vw !important;
            height: 100vh !important;
            max-height: 100vh !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        #modalOccurencesKeywords .modal-content {
            height: 100vh !important;
            border-radius: 0 !important;
            display: flex;
            flex-direction: column;
        }

        #modalOccurencesKeywords .modal-body {
            overflow-y: auto;
            flex: 1 1 auto;
        }

        #modalOccurencesKeywords .modal-header {
            position: sticky !important;
            top: 0 !important;

            z-index: 10 !important;
            flex-shrink: 0 !important;
            padding: 0.75rem 2rem !important;
        }

        #modalOccurencesEditKeywords .modal-header {
            position: sticky !important;
            top: 0 !important;

            z-index: 10 !important;
            flex-shrink: 0 !important;
            padding: 0.75rem 2rem !important;
        }

        #modalOccurencesKeywords .modal-footer {
            position: sticky !important;
            bottom: 0 !important;

            z-index: 10 !important;
            flex-shrink: 0 !important;
            padding: 0.75rem 2rem !important;
        }

        /* Video Search */

        /* Progress modal sits above default Bootstrap backdrop */
        .progressbar-videos-modal {
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            z-index: 1050 !important;
            /* just above backdrop (1040) */
            width: 90vw !important;
            max-width: 500px !important;
            pointer-events: auto !important;
            /* ensure clicks reach it */
        }

        /* Make sure content inside modal receives pointer events */
        .progressbar-videos-modal .modal-content {
            pointer-events: auto !important;
        }

        .progressbar-videos-modal .modal-body .progress-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }

        /* Stack footer buttons only on mobile */

        .progressbar-videos-modal .progress,
        .progressbar-videos-modal .progress-bar,
        .progressbar-videos-modal__status-scanned-text,
        .progressbar-videos-modal__status-title-text {
            pointer-events: auto !important;
            user-select: text !important;
        }

        /* Outer container */
        #modalFilterVideos {
            position: fixed !important;
            top: 0;
            left: 0;
            width: 100vw !important;
            z-index: 2000 !important;
            overflow: hidden !important;
        }

        /* Modal flush & full width */
        .modal.filter-videos-modal {
            width: 100vw !important;
            max-width: 100vw !important;
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box !important;
        }

        /* Sticky header & footer */
        .modal.filter-videos-modal .modal-header,
        .modal.filter-videos-modal .modal-footer {
            flex-shrink: 0;
            position: sticky;
            z-index: 10;
            padding-left: 1rem !important;
            /* add this */
            padding-left: 1rem !important;
            /* add this */
            padding-right: 1rem !important;
            /* add this */
        }

        /* Header */
        .modal.filter-videos-modal .modal-header {
            position: sticky !important;
            top: 0 !important;

            z-index: 10 !important;
            flex-shrink: 0 !important;
            padding: 0.75rem 2rem !important;
        }

        /* Footer */
        .modal.filter-videos-modal .modal-footer {
            bottom: 0;
            width: 100% !important;
            flex-shrink: 0 !important;
            min-height: 60px !important;
            box-sizing: border-box !important;
            margin: 0 !important;
            padding: 0.75rem 1rem !important;
            position: sticky;
            /* sticky, NOT fixed */
        }

        /* Body scroll area */
        .modal.filter-videos-modal .modal-body {
            padding-bottom: 60px;
            /* reserve space for footer */
            overflow-x: auto !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
            padding-right: 1rem !important;
            /* Add right padding */
            box-sizing: border-box !important;
            min-width: 100%;
            /* force horizontal scrollbar when needed */
            margin-bottom: 0 !important;
        }

        /* Dialog & content fill parent */
        #modalFilterVideos .modal-dialog {
            margin: 0 !important;
            padding: 0 !important;
            /* add this */
        }

        .modal.filter-videos-modal .modal-content {
            margin: 0 !important;
            height: 100% !important;
            box-sizing: border-box !important;
        }

        .modal-body .tab-content {
            padding-right: 1rem;
            box-sizing: border-box;
            overflow-x: auto;
            min-width: max-content;
            /* allow horizontal scrolling */
        }

        /* Optional: add a small right spacer inside tab-content on mobile */
        .modal-body .tab-content::after {
            content: '';
            display: inline-block;
            width: 1rem;
            flex-shrink: 0;
            pointer-events: none;
            user-select: none;
        }

        .modal .modal-header {
            background: var(--bs-modal-header-bg) !important;
        }

        /* Modal Include Exclude */

        #modalIncludeExcludeVideos {
            width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalIncludeExcludeEditVideos {
            width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalIncludeExcludeVideos .modal-dialog {
            margin: 0 !important;
            max-height: 100% !important;
        }

        #modalIncludeExcludeVideos .modal-content {
            box-sizing: border-box !important;
        }

        #modalIncludeExcludeVideos .modal-body {
            overflow-y: auto !important;
            padding-bottom: 60px;
            /* if footer is sticky */
        }

        #modalIncludeExcludeVideos,
        #modalIncludeExcludeVideos .modal-dialog,
        #modalIncludeExcludeVideos .modal-content {
            pointer-events: auto !important;
            touch-action: auto !important;
        }

        /* Outer modal itself */
        #modalAllVideosCampaign {
            width: 100vw !important;
            max-width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalAllVideosEditCampaign {
            width: 100vw !important;
            max-width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        /* Modal dialog matches others */
        #modalAllVideosCampaign .modal-dialog {
            margin: 0 !important;
            max-height: 100% !important;
        }

        /* Content box setup */
        #modalAllVideosCampaign .modal-content {
            box-sizing: border-box !important;
        }

        /* Body scrolling and spacing */
        #modalAllVideosCampaign .modal-body {
            overflow-y: auto !important;
            padding-bottom: 60px;
            /* keep space if footer is sticky */
            padding-left: 2.5rem !important;
        }

        /* Consistent pointer/touch behavior */
        #modalAllVideosCampaign,
        #modalAllVideosCampaign .modal-dialog,
        #modalAllVideosCampaign .modal-content {
            pointer-events: auto !important;
            touch-action: auto !important;
        }

        /* Add gap between label and select */
        .video-campaign-modal .form-group.row {
            display: flex !important;
            flex-wrap: wrap !important;
            /* <-- change here */
            align-items: center !important;
            gap: 0.5rem !important;
            padding-left: 0 !important;
            padding-right: 0.5rem !important;
        }

        .video-campaign-modal .form-group.row>label {
            flex: 0 0 auto !important;
            width: auto !important;
            max-width: 40% !important;
            text-align: left !important;
            margin-bottom: 0 !important;
        }

        .video-campaign-modal .form-group.row label,
        .video-campaign-modal .form-group.row select {
            line-height: 1.3;
            height: 38px;
            /* standard Bootstrap input height */
        }

        .video-campaign-modal .form-group.row>div {
            flex: 1 1 auto !important;
            width: auto !important;
            max-width: 60% !important;
        }

        /* Add gap between label and select */
        .video-campaign-modal .form-group.row.flex-nowrap>label.col-5 {
            padding-right: 1rem;
            text-align: left !important;
            margin-bottom: 0;
        }

        /* Remove left padding on select container */
        .video-campaign-modal .form-group.row.flex-nowrap>div.col-7 {
            padding-left: 0;
        }

        /* Make select full width inside col */
        .video-campaign-modal .form-group.row.flex-nowrap>div.col-7 select.form-select {
            width: 100% !important;
            min-width: 0 !important;
        }

        .video-campaign-modal .form-group.row>div select {
            width: 100% !important;
            min-width: 0 !important;
        }

        #modalSelectedVideosCampaign {
            width: 100vw !important;
            max-width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalSelectedEditVideosCampaign {
            width: 100vw !important;
            max-width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }


        #modalSelectedVideosCampaign .modal-dialog {
            margin: 0 !important;
            max-height: 100% !important;
        }

        #modalSelectedVideosCampaigns .modal-content {
            box-sizing: border-box !important;
        }

        #modalSelectedVideosCampaign .modal-body {
            overflow-y: auto !important;
            padding-bottom: 60px;
            /* if footer is sticky */
            padding-left: 2.5rem !important;
        }

        #modalSelectedVideosCampaign,
        #modalSelectedVideosCampaign .modal-dialog,
        #modalSelectedVideosCampaign .modal-content {
            pointer-events: auto !important;
            touch-action: auto !important;
        }

        #modalSingleVideoCampaign {
            width: 100vw !important;
            max-width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalSingleVideoEditCampaign {
            width: 100vw !important;
            max-width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalSingleVideoCampaign .modal-dialog {
            margin: 0 !important;
            max-height: 100% !important;
        }

        #modalSingleVideoCampaign .modal-content {
            box-sizing: border-box !important;
        }

        #modalSingleVideoCampaign .modal-body {
            overflow-y: auto !important;
            padding-bottom: 60px;
            /* if footer is sticky */
            padding-left: 2.5rem !important;
        }

        #modalSingleVideoCampaign,
        #modalSingleVideoCampaign.modal-dialog,
        #modalSingleVideoCampaign.modal-content {
            pointer-events: auto !important;
            touch-action: auto !important;
        }

        #modalOccurencesVideos .modal-dialog {
            width: 100vw !important;
            max-width: 100vw !important;
            height: 100vh !important;
            max-height: 100vh !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        #modalOccurencesEditVideos .modal-dialog {
            width: 100vw !important;
            max-width: 100vw !important;
            height: 100vh !important;
            max-height: 100vh !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        #modalOccurencesVideos .modal-content {
            height: 100vh !important;
            border-radius: 0 !important;
            display: flex;
            flex-direction: column;
        }

        #modalOccurencesVideos .modal-body {
            overflow-y: auto;
            flex: 1 1 auto;
        }

        #modalOccurencesVideos .modal-header {
            position: sticky !important;
            top: 0 !important;

            z-index: 10 !important;
            flex-shrink: 0 !important;
            padding: 0.75rem 2rem !important;
        }

        #modalOccurencesEditVideos .modal-header {
            position: sticky !important;
            top: 0 !important;

            z-index: 10 !important;
            flex-shrink: 0 !important;
            padding: 0.75rem 2rem !important;
        }

        #modalOccurencesVideos .modal-footer {
            position: sticky !important;
            bottom: 0 !important;

            z-index: 10 !important;
            flex-shrink: 0 !important;
            padding: 0.75rem 2rem !important;
        }

        #modalAllVideosLinks .modal-dialog {
            max-width: calc(100% - 1rem) !important;
            /* slightly smaller than full width */
            margin-left: 2rem !important;
            /* slight left padding to center */
            margin-right: 0.5rem !important;
            /* slight right padding */
        }

        #modalAllVideosEditLinks .modal-dialog {
            max-width: calc(100% - 1rem) !important;
            /* slightly smaller than full width */
            margin-left: 2rem !important;
            /* slight left padding to center */
            margin-right: 0.5rem !important;
            /* slight right padding */
        }



        /* Influencer Modal */

        .progressbar-channels-modal {
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            z-index: 1050 !important;
            /* just above backdrop (1040) */
            width: 90vw !important;
            max-width: 500px !important;
            pointer-events: auto !important;
            /* ensure clicks reach it */
        }

        /* Make sure content inside modal receives pointer events */
        .progressbar-channels-modal .modal-content {
            pointer-events: auto !important;
        }

        .progressbar-channels-modal .modal-body .progress-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }

        /* Stack footer buttons only on mobile */

        .progressbar-channels-modal .progress,
        .progressbar-channels-modal .progress-bar,
        .progressbar-channels-modal__status-scanned-text,
        .progressbar-channels-modal__status-title-text {
            pointer-events: auto !important;
            user-select: text !important;
        }

        /* Outer container */
        #modalFilterChannels {
            position: fixed !important;
            top: 0;
            left: 0;
            width: 100vw !important;

            z-index: 2000 !important;
            overflow: hidden !important;
        }

        /* Modal flush & full width */
        .modal.filter-channels-modal {
            width: 100vw !important;
            max-width: 100vw !important;
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box !important;
        }

        /* Sticky header & footer */
        .modal.filter-channels-modal .modal-header,
        .modal.filter-channels-modal .modal-footer {
            flex-shrink: 0;
            position: sticky;
            z-index: 10;
            padding-left: 1rem !important;
            /* add this */
            padding-left: 1rem !important;
            /* add this */
            padding-right: 1rem !important;
            /* add this */
        }

        /* Header */
        .modal.filter-channels-modal .modal-header {
            position: sticky !important;
            top: 0 !important;

            z-index: 10 !important;
            flex-shrink: 0 !important;
            padding: 0.75rem 2rem !important;
        }

        /* Header */
        .modal.editfilter-channels-modal .modal-header {
            position: sticky !important;
            top: 0 !important;

            z-index: 10 !important;
            flex-shrink: 0 !important;
            padding: 0.75rem 2rem !important;
        }

        /* Footer */
        .modal.filter-channels-modal .modal-footer {
            bottom: 0;
            width: 100% !important;
            flex-shrink: 0 !important;
            min-height: 60px !important;
            box-sizing: border-box !important;
            margin: 0 !important;
            padding: 0.75rem 1rem !important;
            position: sticky;
            /* sticky, NOT fixed */
        }

        /* Body scroll area */
        .modal.filter-channels-modal .modal-body {
            padding-bottom: 60px;
            /* reserve space for footer */
            overflow-x: auto !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
            padding-right: 1rem !important;
            /* Add right padding */
            box-sizing: border-box !important;
            min-width: 100%;
            /* force horizontal scrollbar when needed */
            margin-bottom: 0 !important;
        }

        /* Dialog & content fill parent */
        #modalFilterChannels .modal-dialog {
            margin: 0 !important;
            padding: 0 !important;
            /* add this */

        }

        .modal.filter-channels-modal .modal-content {
            margin: 0 !important;
            height: 100% !important;
            box-sizing: border-box !important;
        }

        .modal-body .tab-content {
            padding-right: 1rem;
            box-sizing: border-box;
            overflow-x: auto;
            min-width: max-content;
            /* allow horizontal scrolling */
        }

        #modalIncludeExcludeChannels {
            width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalIncludeExcludeEditChannels {
            width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalIncludeExcludeChannels .modal-dialog {
            margin: 0 !important;
            max-height: 100% !important;
        }

        #modalIncludeExcludeChannels .modal-content {
            box-sizing: border-box !important;
        }

        #modalIncludeExcludeChannels .modal-body {
            overflow-y: auto !important;
            padding-bottom: 60px;
            /* if footer is sticky */
        }

        #modalIncludeExcludeChannels,
        #modalIncludeExcludeChannels .modal-dialog,
        #modalIncludeExcludeChannels .modal-content {
            pointer-events: auto !important;
            touch-action: auto !important;
        }

        /* Outer modal itself */
        /* Match behavior of the working modals */
        #modalAllChannelsCampaign {
            width: 100vw !important;
            max-width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalAllChannelsEditCampaign {
            width: 100vw !important;
            max-width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        /* Modal dialog identical to the others */
        #modalAllChannelsCampaign .modal-dialog {
            margin: 0 !important;
            max-height: 100% !important;
        }

        /* Ensure proper box sizing */
        #modalAllChannelsCampaign .modal-content {
            box-sizing: border-box !important;
        }

        /* Scrollable body with consistent padding */
        #modalAllChannelsCampaign .modal-body {
            overflow-y: auto !important;
            padding-bottom: 60px;
            /* leave room if footer is sticky */
            padding-left: 2.5rem !important;
        }

        /* Pointer/touch settings (same as others) */
        #modalAllChannelsCampaign,
        #modalAllChannelsCampaign .modal-dialog,
        #modalAllChannelsCampaign .modal-content {
            pointer-events: auto !important;
            touch-action: auto !important;
        }

        /* Optional: reset row inside modal-body */
        #modalAllChannelsCampaign .modal-body>.row {
            margin-left: 2.5rem !important;
            margin-right: 0 !important;
        }

        /* Add gap between label and select */
        .influencer-campaign-modal .form-group.row {
            display: flex !important;
            flex-wrap: wrap !important;
            /* <-- change here */
            align-items: center !important;
            gap: 0.5rem !important;
            padding-left: 0 !important;
            padding-right: 0.5rem !important;
        }

        .influencer-campaign-modal .form-group.row>label {
            flex: 0 0 auto !important;
            width: auto !important;
            max-width: 40% !important;
            text-align: left !important;
            margin-bottom: 0 !important;
        }

        .influencer-campaign-modal .form-group.row label,
        .influencer-campaign-modal .form-group.row select {
            line-height: 1.3;
            height: 38px;
            /* standard Bootstrap input height */
        }

        .influencer-campaign-modal .form-group.row>div {
            flex: 1 1 auto !important;
            width: auto !important;
            max-width: 60% !important;
        }

        /* Add gap between label and select */
        .influencer-campaign-modal .form-group.row.flex-nowrap>label.col-5 {
            padding-right: 1rem;
            text-align: left !important;
            margin-bottom: 0;
        }

        /* Remove left padding on select container */
        .influencer-campaign-modal .form-group.row.flex-nowrap>div.col-7 {
            padding-left: 0;
        }

        /* Make select full width inside col */
        .influencer-campaign-modal .form-group.row.flex-nowrap>div.col-7 select.form-select {
            width: 100% !important;
            min-width: 0 !important;
        }

        .influencer-campaign-modal .form-group.row>div select {
            width: 100% !important;
            min-width: 0 !important;
        }

        #modalSelectedChannelsCampaign {
            width: 100vw !important;
            max-width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalSelectedEditChannelsCampaign {
            width: 100vw !important;
            max-width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalSelectedChannelsCampaign .modal-dialog {
            margin: 0 !important;
            max-height: 100% !important;
        }

        #modalSelectedChannelsCampaign .modal-content {
            box-sizing: border-box !important;
        }

        #modalSelectedChannelsCampaign .modal-body {
            overflow-y: auto !important;
            padding-bottom: 60px;
            /* if footer is sticky */
            padding-left: 2.5rem !important;
        }

        #modalSelectedChannelsCampaign,
        #modalSelectedChannelsCampaign .modal-dialog,
        #modalSelectedChannelsCampaign .modal-content {
            pointer-events: auto !important;
            touch-action: auto !important;
        }

        #modalOccurencesChannels .modal-dialog {
            width: 100vw !important;
            max-width: 100vw !important;
            height: 100vh !important;
            max-height: 100vh !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        #modalOccurencesEditChannels .modal-dialog {
            width: 100vw !important;
            max-width: 100vw !important;
            height: 100vh !important;
            max-height: 100vh !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        #modalOccurencesChannels .modal-content {
            height: 100vh !important;
            border-radius: 0 !important;
            display: flex;
            flex-direction: column;
        }

        #modalOccurencesChannels .modal-body {
            overflow-y: auto;
            flex: 1 1 auto;
        }

        #modalOccurencesChannels .modal-header {
            position: sticky !important;
            top: 0 !important;

            z-index: 10 !important;
            flex-shrink: 0 !important;
            padding: 0.75rem 2rem !important;
        }

        #modalOccurencesEditChannels .modal-header {
            position: sticky !important;
            top: 0 !important;

            z-index: 10 !important;
            flex-shrink: 0 !important;
            padding: 0.75rem 2rem !important;
        }

        #modalOccurencesChannels .modal-footer {
            position: sticky !important;
            bottom: 0 !important;

            z-index: 10 !important;
            flex-shrink: 0 !important;
            padding: 0.75rem 2rem !important;
        }

        #modalSingleChannelCampaign {
            width: 100vw !important;
            max-width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalSingleChannelEditCampaign {
            width: 100vw !important;
            max-width: 100vw !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 9999 !important;
            overflow: hidden;
        }

        #modalSingleChannelCampaign .modal-dialog {
            margin: 0 !important;
            max-height: 100% !important;
        }

        #modalSingleChannelCampaign .modal-content {
            box-sizing: border-box !important;
        }

        #modalSingleChannelCampaign .modal-body {
            overflow-y: auto !important;
            padding-bottom: 60px;
            /* if footer is sticky */
            padding-left: 2.5rem !important;
        }

        #modalSingleChannelCampaign,
        #modalSingleChannelCampaign.modal-dialog,
        #modalSingleChannelCampaign.modal-content {
            pointer-events: auto !important;
            touch-action: auto !important;
        }

        #modalAllChannelsLinks .modal-dialog {
            max-width: calc(100% - 1rem) !important;
            /* slightly smaller than full width */
            margin-left: 2rem !important;
            /* slight left padding to center */
            margin-right: 0.5rem !important;
            /* slight right padding */
        }

        #modalAllChannelsEditLinks .modal-dialog {
            max-width: calc(100% - 1rem) !important;
            /* slightly smaller than full width */
            margin-left: 2rem !important;
            /* slight left padding to center */
            margin-right: 0.5rem !important;
            /* slight right padding */
        }


        /* Campaigns Modal */

        .campaigns-modal--delete {
            z-index: 1050 !important;
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
        }

        .campaigns-modal--delete.modal {
            padding: 0 !important;
        }

        .campaigns-modal--delete .modal-dialog {
            max-width: 100% !important;
            margin: 0 !important;
            /* Remove all margin */
            width: 100% !important;
            /* Full width */
        }

        .campaigns-modal--delete .modal-content {
            border-radius: 0 !important;
            /* Optional: remove rounded corners */
        }

        /* Fullscreen fixed modal container */

        #modalAddCampaign {
            position: fixed !important;
            top: 0;
            left: 0;
            width: 100vw !important;
            height: 100vh !important;
            z-index: 1060 !important;
            overflow: hidden !important;
        }

        /* Dialog fills screen */
        #modalAddCampaign .modal-dialog {
            margin: 0 !important;
            padding: 0 !important;
            height: 100% !important;
            max-height: 100% !important;
            width: 100% !important;
        }

        /* Content fills dialog */
        #modalAddCampaign .modal-content {
            height: 100% !important;
            box-sizing: border-box !important;
            margin: 0 !important;
            padding: 0 !important;
            display: flex !important;
            flex-direction: column !important;
        }

        #modalEditCampaign .modal-body.row {
            margin: 0 !important;
            gap: 0.5rem;
            flex-direction: column;
        }

        /* Tighter spacing between form groups */
        #modalEditCampaign .form-group {
            margin-bottom: 0.5rem !important;
            position: relative;
            /* only if needed for tooltip etc */
        }

        /* Remove extra margin on labels & inputs */
        #modalEditCampaign .form-label {
            margin-top: 0 !important;
            margin-bottom: 0.25rem !important;
        }

        #modalEditCampaign .form-control {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        /* Description padding */
        #modalEditCampaign .campaigns-modal__input-description {
            padding-top: 0.25rem !important;
        }

        /* Move char counters outside input, below field */
        #modalEditCampaign .name-char-count,
        #modalEditCampaign #editDescriptionCharCount {
            position: static !important;
            display: block;
            margin-top: 0.25rem;
            font-size: 0.75rem;
            line-height: 1 !important;
            text-align: right;
        }

        /* Ensure small text like 'Max 600 characters' also fits */
        #modalEditCampaign .form-text {
            margin: 0 !important;
            font-size: 0.75rem !important;
            line-height: 1 !important;
        }


    }

    @media (max-width: 480px) {
        table.common-table th {
            font-size: 12px !important;
            padding: 6px 8px !important;
        }

        table.common-table td {
            font-size: 11px !important;
            padding: 4px 6px !important;
        }

        div.dt-info {
            font-size: 10px !important;
            text-align: center !important;
        }

        /* === ACTION BAR === */
        .bottom-nav {
            padding-left: 20px !important;
            padding-right: 20px !important;
            padding-bottom: 20px !important;
        }

        /* === TOASTS === */

        /* Keep your original working CSS */
        /* Keep your original working CSS */


        /* Individual toast */
        /* Force toast container at top, centered */
        /* Force toast container at top, centered */

        .jq-toast-wrap {
            top: 0.75rem !important;
            /* top of screen */
            left: 0 !important;
            right: 0 !important;
            margin: 0 auto !important;
            min-width: auto;
            max-width: 90%;
            /* smaller width on mobile */
            width: 90%;
            z-index: 9999;
        }

        .jq-toast-single {
            font-size: 13px !important;
            padding: 10px 12px !important;

        }

        /* Wrap text safely */
        .jq-toast-single .jq-toast-flex span,
        .jq-toast-single .jq-toast-message {
            display: block;
            word-break: break-word;
            max-width: calc(100% - 30px);
            /* space for close button */
        }

        .close-jq-toast-single {
            position: absolute;
            top: 3px;
            right: 7px;
            font-size: 18px !important;
            cursor: pointer;
            opacity: 0.7;
            color: var(--bs-custom-white-dark);
        }


        /* === LOTTIE === */

        .empty-lottie-wrapper {
            width: 90px !important;
            height: 90px !important;
        }

        .keyword-empty-lottie h5 {
            font-size: 1rem !important;
            ;
        }

        .keyword-empty-lottie p {
            font-size: 0.85rem !important;
            ;
        }


        /* === FORM CONTROLS === */
        .common-search-input,
        .common-bg-wrapper .form-select {
            font-size: 14px;
        }

        .influencer-table-column-thumbnail img {
            max-width: 35px !important;
        }

        .influencer-table-column-channel a {
            font-size: 0.7rem !important;
        }
    }