@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 */
    }

    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 {
      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 */

    .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;
    }

    /* === 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*/

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

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

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

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

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


    /* === 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;
      }

    /* === 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;
    }

    /* === 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;
    }
    }