@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&display=swap");
/* Global font override */
:root {
  --app-font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
html, body, button, input, select, textarea {
  font-family: var(--app-font) !important;
}
body {
background-color: #F7F8F9 !important;
}
.topbar {
background-color: #F7F8F9 !important;
height: auto !important;
}
.topbar-item {
height: 75px !important;
}
.btn { 
border-radius: 5px !important;
}
.is-invalid {
margin-top: 0.25rem;
font-size: 0.875rem;
color: #ef5f5f;
}
.card {
border-radius: 5px !important;
box-shadow: 0px 4px 4px 0px rgba(219, 219, 219, 0.25) !important;
border: 1px solid #E2E8F0 !important;
}
.alert {
border-radius: 5px !important; 
}
.form-control {
border-radius: 5px !important;
}
.form-label {
color: #1F2020 !important;
}

.table {
border-collapse:collapse !important;
}

.table thead, tfoot {
background-color: #f7f8f9 !important;
}
.table thead th {
color: #1F2020 !important;
}
.table tbody td {
  vertical-align: middle !important;
}

.navbar-nav .nav-link.active {
  background-color: #0D9CFF !important;
}
.navbar-nav .nav-link .nav-icon {
  color: white !important;
}

.pagination {
--bs-pagination-border-radius: 5px !important;
}

/*
.table > :not(caption) > * > * {
  padding: 0.55rem 0.55rem;
}

.card-header {
padding-top: 0.8rem !important;
padding-bottom: 0.6rem !important;
}
*/

.card-header {
  padding-top : 0.7rem !important; 
  padding-bottom: 0.7rem !important; 
}

.offcanvas-header {
padding-top : 0.95rem !important; 
padding-bottom: 0.95rem !important; 
}

.choices {
margin-bottom: 1px !important;
}

/* Data tables */

.dataTables_wrapper .dataTables_length label {
display: flex !important;
align-items: center;
flex-wrap: nowrap;
gap: 0.5rem;
white-space: nowrap;
}
.dataTables_wrapper .dataTables_length select {
min-width: 60px;
padding: 4px 8px;
background-color: #fff !important;
color: #000 !important;
border: 1px solid #ccc;
border-radius: 4px;
}
.dt-search input {
display: inline-block !important;
width: 225px !important;
height: 38px !important;
}
div.dt-search {
text-align: left !important;  
}
div.dt-container div.dt-search label {
text-align: left !important;
}

/* Ensure dropdown menus in DataTables rows appear above footer/pagination */
.table-responsive .dropdown-menu {
  z-index: 10000 !important;
}

/* Allow dropdowns to extend outside the DataTables scroll body (fix last-row clipping) */
.dt-scroll-body,
.dataTables_scrollBody {
  overflow-y: visible !important;
}

.color-picker-wrapper input[type="color"] { padding: 4px; }

/* Select2: match Choices/form-select look, scoped via .form-select2 */
.form-select2 + .select2.select2-container--default .select2-selection--single {
padding: 0.5rem 1rem !important;
background-color: var(--bs-secondary-bg);
border: 1px solid var(--bs-input-border-color);
font-size: 0.875rem;
border-radius: 5px !important;
color: var(--bs-body-color);
height: auto;
min-height: 38px;
}

.form-select2 + .select2.select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--bs-body-color);
line-height: 1.5;
padding-left: 0;
}

.form-select2 + .select2.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100%;
right: 10px;
}

/* Dropdown panel */
.form-select2 + .select2 .select2-dropdown {
background-color: #fff; /* match Choices dropdown */
border: 1px solid var(--bs-input-border-color);
border-radius: 5px; /* rounded like Choices */
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
overflow: hidden;
}

/* Search input inside dropdown (similar to .choices__input) */
.form-select2 + .select2 .select2-search--dropdown {
padding: 12px 12px 0 12px; /* inner padding like Choices */
}
.form-select2 + .select2 .select2-search--dropdown .select2-search__field {
display: block;
width: 100%;
padding: 12px 16px !important; /* larger, rounded input */
background-color: #fff;
border: 1px solid var(--bs-input-border-color);
font-size: 0.875rem;
color: var(--bs-body-color);
margin: 0 0 12px 0;
}
.form-select2 + .select2 .select2-search--dropdown .select2-search__field::placeholder {
color: var(--bs-secondary-color, #707793);
}

/* Results list */
.form-select2 + .select2 .select2-results__options { padding: 4px 8px 12px; }
.form-select2 + .select2 .select2-results__option {
color: var(--bs-body-color);
font-size: 0.875rem;
}

.form-select2 + .select2 .select2-results__option--highlighted.select2-results__option--selectable {
background-color: rgba(13, 156, 255, 0.1);
color: var(--bs-body-color);
}

/* Validation alignment: make Select2 container behave like .form-control */
.form-select2 + .select2 .select2-selection--single {
display: block;
width: 100%;
}

.select2-search--dropdown .select2-search__field {
padding: 0.5rem 1rem !important; 
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: var(--bs-body-color);
}

.select2-results__option {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
/* Ensure original select is fully hidden when Select2 is applied */
.select2-hidden-accessible { display: none !important; }

.form-switch .form-check-input {
width: 4em !important;
height: 2em !important;
}
/* Connected Platforms layout (Edit Campaign) */
.platforms-section .platforms-nav {
  background-color: var(--bs-secondary-bg);
  border: 1px solid var(--bs-input-border-color);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.platforms-section .platforms-content {
  background-color: var(--bs-secondary-bg);
  border: 1px solid var(--bs-input-border-color);
  border-radius: 16px;
  padding: 16px;
  min-height: 280px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.platforms-section .nav-link {
  color: var(--bs-body-color);
  border-radius: 12px !important;
}
.platforms-section .nav-link.active {
  background-color: #0d6efd;
  color: #fff;
  box-shadow: 0 6px 18px rgba(13, 110, 253, 0.24);
}
.platforms-section .tab-pane h4 {
  color: var(--bs-headings-color);
}
.platforms-section .tab-pane p.text-muted {
  color: var(--bs-secondary-color, #707793) !important;
}
.country-card {
  background-color: var(--bs-secondary-bg);
  border: 1px solid var(--bs-input-border-color);
  border-radius: 12px;
  padding: 12px 12px;
}
.country-card .form-select,
.country-card .form-control {
  height: auto;
  min-height: 38px;
}