:root {
    /* Colors */
    --primary-color: #333652;
    --accent-color: #fad02c;
    --accent-hover: #ffd927;
    --bg-color: #f8f9ff;
    --bg-light: #f8f9ff;
    --aux-blue: #8DA9C2;
    --secondary-accent: #8DA9C2; /* was referenced but never defined */
    --white: #ffffff;
    --text-main: #2d3748;
    --text-muted: #718096;
    --error: #e74c3c;
    --success: #2ecc71;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 15px;
    --radius-lg: 25px;
    --radius-pill: 50px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --shadow-accent: 0 4px 14px 0 rgba(250, 208, 44, 0.39);

    /* Transitions */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global Overrides */
body {
    background-color: var(--bg-light) !important;
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.main-panel {
    background-color: var(--bg-light) !important;
    min-height: 100vh !important;
}

.content {
    padding: 10px 30px 90px !important; /* Bottom space so floating action buttons never cover content */
    margin-top: 65px !important; /* Balanced space for fixed navbar */
    min-height: auto !important;
}

@media (max-width: 767px) {
    .content {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Inline width of 350px overflows small screens */
    .unit-selector-wrapper {
        width: min(58vw, 350px) !important;
    }
}

/* Card Styling */
.card {
    border-radius: var(--radius-lg) !important;
    border: none !important;
    box-shadow: var(--shadow-md) !important;
    background: var(--white) !important;
    transition: var(--transition) !important;
}

.card:hover {
    box-shadow: var(--shadow-lg) !important;
}

.card .card-header {
    background: transparent !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 20px 25px !important;
}

/* Modern Pill Buttons */
.btn, .btn-blue, .login100-form-btn, .btn-access, .logout-btn {
    border-radius: var(--radius-pill) !important;
    padding: 10px 25px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    transition: var(--transition) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Mobile: quando as colunas col-6 empilham (<576px), os wrappers de campo
   (.select-div não tem margem) deixam o label seguinte colado no campo
   anterior — impõe o ritmo vertical de ~18px entre grupos */
@media (max-width: 575px) {
    .bucket-form [class*="col-"] > .select-div,
    .bucket-form [class*="col-"] > .form-group,
    .bucket-form [class*="col-"] > .form-group.bmd-form-group {
        margin-bottom: 18px !important;
    }
}

/* Mobile: long-label buttons (ex.: "Actualizar el estado de la página de
   Facebook") herdam white-space:nowrap do BMD e estouram a tela — deixe o
   texto quebrar e limite à largura disponível */
@media (max-width: 767px) {
    .btn, .btn-blue, .logout-btn {
        max-width: 100% !important;
        white-space: normal !important;
        height: auto !important;
        min-height: 44px !important;
        line-height: 1.35 !important;
        text-align: center !important;
    }
}

/* The `display: inline-flex !important` above would otherwise block
   jQuery's .hide() (inline display:none) on any .btn — honor it. */
.btn[style*="display: none"],
.btn[style*="display:none"] {
    display: none !important;
}

.btn-blue, .btn-primary {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

.btn-blue:hover {
    background-color: #434766 !important;
    box-shadow: var(--shadow-md) !important;
}

.btn-accent, .login100-form-btn, .btn-access {
    background-color: var(--accent-color) !important;
    color: var(--primary-color) !important;
    border: 2px solid rgba(0,0,0,0.1) !important;
    font-weight: 800 !important;
    transition: all 0.3s ease !important;
}

.btn-accent:hover, .login100-form-btn:hover, .btn-access:hover {
    background-color: var(--accent-hover) !important;
    box-shadow: 0 6px 20px rgba(250, 208, 44, 0.5) !important;
    transform: translateY(-2px) !important;
    opacity: 1 !important;
}

.btn-outline-primary {
    border: 2px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    background: transparent !important;
    font-weight: 700 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary.active {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

/* Scope tabs (Todas / Pendentes / ...) on admin campaign lists */
.campaign-scope-tabs .btn {
    padding: 8px 18px !important;
    font-size: 0.8rem !important;
    margin: 0 !important;
}

.btn-outline-danger {
    border: 2px solid var(--error) !important;
    color: var(--error) !important;
    background: transparent !important;
}

.btn-outline-danger:hover {
    background-color: var(--error) !important;
    color: var(--white) !important;
}

/* Inputs Modernization - Be specific to avoid breaking plugins */
/* Ensure vertical centering for Select2 and standard inputs */
.modern-input, 
/* Selects nativos com .modern-input (ex.: "Valor a agregar" no modal
   Investir+, fora do .bucket-form): visual padrão com seta desenhada
   dentro do campo */
select.modern-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 100% !important;
    height: 48px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: var(--radius-md) !important;
    background-color: var(--white) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23718096'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 18px !important;
    padding: 0 42px 0 18px !important;
    font-size: 0.95rem !important;
    color: var(--text-main) !important;
    box-shadow: var(--shadow-sm) !important;
    cursor: pointer !important;
}

select.modern-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(51, 54, 82, 0.1) !important;
    outline: none !important;
}

/* Readonly fields (ex.: "Inversión actual" no modal Investir+): visual de
   desabilitado — fundo cinza, texto muted, sem anel de foco */
.modern-input[readonly],
input.form-control[readonly] {
    background-color: #f1f5f9 !important;
    color: var(--text-muted) !important;
    border-color: #e8edf3 !important;
    box-shadow: none !important;
    cursor: default !important;
}

.modern-input[readonly]:focus,
input.form-control[readonly]:focus {
    border-color: #e8edf3 !important;
    box-shadow: none !important;
    outline: none !important;
}

.form-control.modern-input,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--radius-md) !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 0 18px !important;
    background-color: var(--white) !important;
    background-image: none !important; /* mata o sublinhado do BMD */
    transition: var(--transition) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-main) !important;
    font-size: 0.9rem !important;
    height: 48px !important;
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 0 !important; /* Override BMD */
    margin-bottom: 0 !important; /* Override BMD */
}

/* Fix BMD (Material Design) conflicts for form groups */
.modern-form-group.bmd-form-group {
    padding-top: 0 !important;
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.modern-form-group label,
.modern-form-group.bmd-form-group label,
.modern-form-group.bmd-form-group label.bmd-label-static {
    position: static !important;
    transform: none !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    height: 14px !important; /* Fixed height for all labels */
    line-height: 14px !important;
    display: block !important;
}

/* Standard label reset for non-BMD groups */
.modern-form-group label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    height: 14px !important;
    line-height: 14px !important;
}

/* Ensure Select2 text is also centered */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 45px !important; /* Slightly less to account for border */
    padding-left: 0 !important;
    padding-right: 20px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 45px !important;
}

/* Fix for Select2 multiple height */
.select2-container--default .select2-selection--multiple {
    height: auto !important;
    min-height: 48px !important;
    padding: 4px 12px !important;
}

/* Inline search field inside multiple selects: keep the placeholder
   vertically centered instead of clipped */
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    max-height: none !important;
    height: 38px !important;
    line-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.9rem !important;
    color: var(--text-muted) !important;
}

.modern-input:focus, 
.form-control.modern-input:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(51, 54, 82, 0.1) !important;
    outline: none !important;
}

/* Filter Section - Matching campaign card exactly */
.filter-section {
    background-color: var(--white) !important;
    border-radius: 16px !important;
    padding: 22px 20px !important;
    /* Same rhythm as the gap between campaign cards */
    margin: 0 0 16px 0 !important;
    border: 1px solid #edf2f7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04) !important;
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Inside filter panels every control shares the same 15px radius
   (single selects would otherwise render as 50px pills) */
.filter-section .select2-container--default .select2-selection--single,
.filter-report .select2-container--default .select2-selection--single {
    border-radius: var(--radius-md) !important;
}

/* Specific for Datepicker Input */
.modern-input.datepicker, .datepicker.modern-input {
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23718096'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px !important;
    padding-right: 40px !important;
}

/* Datepicker Popup Modernization (Materialize/Bootstrap) */
.datepicker-modal {
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-lg) !important;
}

.datepicker-date-display {
    background-color: var(--primary-color) !important;
}

.datepicker-day-button:focus {
    background-color: rgba(51, 54, 82, 0.1) !important;
    color: var(--primary-color) !important;
}

.is-today {
    color: var(--primary-color) !important;
}

.is-selected {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

.datepicker-cancel, .datepicker-done {
    color: var(--primary-color) !important;
    font-weight: 700 !important;
}

.datepicker-table td.is-selected {
    background-color: var(--primary-color) !important;
}

.datepicker-table td.is-today {
    color: var(--primary-color) !important;
    font-weight: bold !important;
}

input[type="file"] {
    background: #f8f9fa !important;
    padding: 8px 12px !important;
    border: 2px dashed #cbd5e0 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: var(--transition) !important;
}

input[type="file"]:hover {
    border-color: var(--primary-color) !important;
    background: #edf2f7 !important;
}

/* Sidebar Modernization */
.sidebar {
    background-color: var(--primary-color) !important;
    box-shadow: var(--shadow-lg) !important;
    border: none !important;
    transition: var(--transition) !important;
    z-index: 999 !important; /* Lower than modal backdrops (1000+) */
}

/* Desktop: wider fixed sidebar with rounded corner */
@media (min-width: 992px) {
    .sidebar {
        width: 280px !important;
        border-radius: 0 var(--radius-lg) 0 0 !important;
    }
}

/* Mobile: keep the vendor off-canvas width (260px) so the
   translate3d(260px) hide transform fully conceals the sidebar */
@media (max-width: 991px) {
    .sidebar {
        display: block !important;
        width: 260px !important;
        border-radius: 0 !important;
    }

    /* Vendor theme paints these white/dark on mobile, hiding the
       white nav text — keep the brand navy everywhere */
    .sidebar .sidebar-wrapper {
        background: transparent !important;
    }

    .sidebar::before {
        background-color: var(--primary-color) !important;
    }
}

/* Hide native scrollbar in sidebar, keep only perfect-scrollbar */
.sidebar .sidebar-wrapper {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}
.sidebar .sidebar-wrapper::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari/Opera */
    width: 0 !important;
}

/* Override perfect-scrollbar: always use the slim elegant bar */
.sidebar .ps-scrollbar-y-rail {
    width: 8px !important;
    right: 2px !important;
    background-color: transparent !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.sidebar:hover .ps-scrollbar-y-rail,
.sidebar .ps-container:hover > .ps-scrollbar-y-rail {
    opacity: 0.5 !important;
    background-color: transparent !important;
}

.sidebar .ps-scrollbar-y-rail:hover,
.sidebar .ps-scrollbar-y-rail:active {
    background-color: transparent !important;
    width: 8px !important;
    opacity: 0.7 !important;
}

.sidebar .ps-scrollbar-y {
    width: 4px !important;
    right: 0 !important; /* Hug the edge instead of the menu items */
    background-color: rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    transition: background-color 0.2s ease, width 0.2s ease !important;
}

.sidebar .ps-scrollbar-y-rail:hover .ps-scrollbar-y,
.sidebar .ps-scrollbar-y-rail:active .ps-scrollbar-y {
    width: 5px !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
}

/* Prevent scrollbar from expanding wide on active scroll */
.sidebar .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
    background-color: transparent !important;
    width: 8px !important;
}

.sidebar .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
    width: 4px !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
}

.sidebar .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
    background-color: transparent !important;
}

.sidebar .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
    width: 4px !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
}

/* Sidebar Logo area styling consolidated below at line 843 */

.main-panel {
    transition: var(--transition) !important;
    background-color: var(--bg-light) !important;
}

@media (min-width: 992px) {
    body.sidebar-collapsed .sidebar {
        transform: translateX(-280px) !important;
    }

    .main-panel {
        width: calc(100% - 280px) !important;
        float: right !important;
    }

    body.sidebar-collapsed .main-panel {
        width: 100% !important;
    }
}

@media (max-width: 991px) {
    .main-panel {
        width: 100% !important;
    }

    /* Dim the page behind the open off-canvas menu */
    body.nav-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(20, 22, 40, 0.45);
        z-index: 998;
    }

    /* Floating action buttons shouldn't sit on top of the open menu */
    body.nav-open .support-button,
    body.nav-open .faq-button,
    body.nav-open .obs-button {
        display: none !important;
    }
}

.sidebar .nav li a {
    margin: 4px 12px !important;
    border-radius: var(--radius-sm) !important;
    padding: 9px 16px !important;
    transition: var(--transition) !important;
    color: rgba(255,255,255,0.95) !important;
    display: flex !important;
    align-items: center !important;
    font-weight: 500 !important;
}

.sidebar .nav li.active > a,
.sidebar .nav li a:hover {
    background-color: var(--accent-color) !important;
    color: var(--primary-color) !important;
    box-shadow: var(--shadow-accent) !important;
}

.sidebar .nav li a i {
    color: inherit !important;
    margin-right: 14px !important;
    font-size: 1.2rem !important;
    opacity: 1 !important;
    width: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Submenu Styling — shallow indent so active items never touch the edge */
.sidebar .nav .sub-menu {
    margin-left: 18px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding-left: 0 !important;
    margin-bottom: 8px !important;
    list-style: none !important;
}

.sidebar .nav .sub-menu li a {
    margin: 2px 12px 2px 10px !important;
    padding: 6px 12px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sidebar .nav .sub-menu li a i {
    font-size: 1.05rem !important;
    width: 20px !important;
    margin-right: 12px !important;
}

.sidebar .nav .sub-menu li a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--accent-color) !important;
}

.sidebar .nav .sub-menu li.active a {
    background: var(--accent-color) !important;
    color: var(--primary-color) !important;
}

/* Sidebar Toggler Button - Force White/Dark */
.sidebar-toggler-btn {
    background: var(--white) !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--shadow-md) !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    color: var(--primary-color) !important;
}

.sidebar-toggler-btn:hover, 
.sidebar-toggler-btn:focus,
.sidebar-toggler-btn:active {
    background: var(--white) !important;
    color: var(--primary-color) !important;
}

.sidebar-toggler-btn:hover {
    box-shadow: var(--shadow-lg) !important;
}

body.sidebar-collapsed .sidebar-toggler-btn i {
    transform: rotate(180deg);
}

.sidebar .nav li a p {
    margin: 0 !important;
    font-size: 0.84rem !important;
    text-transform: none !important; /* keep "de" lowercase in menu labels */
}

/* Sidebar Logo Area */
/* Sidebar Logo Area - Moved and consolidated below */

/* Sidebar Logo Area Image - Moved and consolidated below */


.navbar {
    background: transparent !important;
    box-shadow: none !important;
    padding-top: 10px !important;
    z-index: 995 !important; /* Below modals and overlays */
}

/* Align navbar edges (toggler / Sair) with the content cards */
@media (min-width: 992px) {
    .navbar > .container-fluid {
        padding-left: 45px !important;
        padding-right: 45px !important;
    }
}

/* Datepicker: a single dark overlay above EVERYTHING (navbar included),
   with only the picker in focus. The `body ` prefix raises specificity so
   this wins over the generic `.modal:not(.fade)` rule below (which would
   otherwise drop the picker to 9999, behind its own overlay). */
body .modal.datepicker-modal {
    z-index: 10010 !important;
    top: 8vh !important;
    padding-top: 0 !important;
}

/* Overlay just below the picker, darkened so the rest of the page recedes */
body.datepicker-active .modal-overlay {
    z-index: 10000 !important;
    opacity: 0.5 !important;
    display: block !important;
}

/* Mês/ano do datepicker: o Materialize anexa o dropdown ao <body> com
   z-index 9999 — abaixo do modal do datepicker (10010) — e o seletor de ano
   abria ATRÁS do calendário. Eleva acima do picker enquanto ele está ativo. */
body.datepicker-active .dropdown-content {
    z-index: 10020 !important;
}

/* Materialize modals (Investir+, aprovar extra…): keep the surface above
   the overlay and the fixed navbar — Materialize's inline z-index (1003)
   loses to the navbar otherwise and the modal looks dimmed/out of focus */
.modal-overlay {
    z-index: 9998 !important;
}

.modal:not(.fade) {
    z-index: 9999 !important;
}


/* Form Groups */
.form-group {
    margin-bottom: 20px !important;
}

.form-group label {
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    margin-bottom: 8px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Custom Image Picker Placeholder */
.image-picker-container {
    border: 2px dashed var(--secondary-accent);
    border-radius: var(--radius-md);
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: #f0f4f8;
}

.image-picker-container:hover {
    border-color: var(--primary-color);
    background: #e1e9f0;
}

/* Section headings inside request forms (Promoções / Mídias) */
.section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 4px;
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.section-heading i.material-icons {
    font-size: 1.15rem;
    color: var(--aux-blue);
}

.section-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #edf2f7;
}

.section-caption {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 12px;
}

/* Image Picker Thumbnails */
ul.thumbnails.image_picker_selector li {
    vertical-align: top !important;
}

.thumbnail {
    border-radius: var(--radius-md) !important;
    border: 2px solid transparent !important;
    transition: var(--transition) !important;
    overflow: hidden !important;
    background: var(--white) !important;
    box-shadow: var(--shadow-sm) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 15px 15px 18px !important;
    /* Flexible height: grows with the caption instead of clipping it */
    height: auto !important;
    min-height: 250px !important;
    width: 180px !important;
}

.thumbnail img {
    width: 100% !important;
    height: 160px !important;
    object-fit: contain !important;
    border-radius: var(--radius-sm);
}

.thumbnail p {
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    margin: 0 !important;
    color: var(--primary-color);
    /* Long names: clamp at two lines, full name shows via tooltip */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

ul.thumbnails.image_picker_selector li .thumbnail.selected {
    background: #fffbea !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 3px 12px rgba(250, 208, 44, 0.35) !important;
}

/* Select2 Premium Overhaul */
.select2-container {
    max-width: 100% !important;
}

/* The navbar unit selector needs a comfortable minimum */
.unit-selector-wrapper .select2-container {
    min-width: 200px !important;
}

.select2-container--default .select2-selection--single {
    background-color: var(--white) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--radius-pill) !important;
    height: 48px !important;
    padding: 0 45px 0 20px !important; /* Space for arrow on the right */
    display: flex !important;
    align-items: center !important;
    transition: var(--transition) !important;
    box-shadow: var(--shadow-sm) !important;
    width: 100% !important;
    position: relative !important;
}

.select2-container--default .select2-selection--single:hover {
    border-color: var(--aux-blue) !important;
    box-shadow: var(--shadow-md) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--primary-color) !important;
    font-weight: 600 !important;
    /* The container is a flex box with align-items center — a natural
       line-height keeps the text truly centered instead of sitting low */
    line-height: 1.4 !important;
    padding: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px !important;
    right: 15px !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--primary-color) transparent transparent transparent !important;
    border-width: 6px 5px 0 5px !important;
}

.select2-dropdown {
    border: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    margin-top: 4px !important;
    overflow: hidden !important;
}

.select2-search--dropdown {
    padding: 10px 12px !important;
    background-color: var(--white) !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.select2-search--dropdown .select2-search__field {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: var(--radius-pill) !important;
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    outline: none !important;
    transition: var(--transition) !important;
    height: auto !important;
    box-sizing: border-box !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(51, 54, 82, 0.08) !important;
}

.select2-results {
    max-height: 260px !important;
    overflow-y: auto !important;
}

/* Custom slim scrollbar for Select2 results */
.select2-results::-webkit-scrollbar {
    width: 4px !important;
}

.select2-results::-webkit-scrollbar-track {
    background: transparent !important;
}

.select2-results::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 4px !important;
}

.select2-results::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

.select2-results__option {
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
    color: var(--text-main) !important;
    transition: background-color 0.15s ease !important;
    border-bottom: 1px solid #f8f9fa !important;
}

.select2-results__option:last-child {
    border-bottom: none !important;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: #f1f5f9 !important;
    color: var(--primary-color) !important;
}

.select2-results__option[aria-selected=true] {
    background-color: var(--accent-color) !important;
    color: var(--primary-color) !important;
    font-weight: 700 !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(51, 54, 82, 0.1) !important;
    outline: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bg-light) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--radius-sm) !important;
    padding: 3px 10px !important;
    margin: 4px !important;
    font-size: 0.8rem !important;
    color: var(--primary-color) !important;
    font-weight: 600 !important;
    /* Chip as flex row: × vertically centered, real gap to the label
       (select2 4.1 positions the remove button absolutely by default) */
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--error) !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    height: auto !important;
    width: auto !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: transparent !important;
    color: #c0392b !important;
}

/* Reusable Modern Form Group */
.modern-form-group {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 15px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Uniform label rhythm inside filters (selects vs date inputs) */
.filter-report .modern-form-group label,
.filter-section .modern-form-group label {
    margin-bottom: 10px !important;
}

/* Fine alignment: content wrappers share the same right edge as the
   navbar buttons (45px gutter) on every listing page */
.tab-content > .row.col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.tab-content > .row.col-12 > .row.col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.modern-form-group label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    display: block !important;
}

.modern-form-group .checkbox {
    margin-top: 10px !important;
    display: flex !important;
    align-items: center !important;
}

/* Kill the square ripple + duplicated box BMD injects around checkboxes.
   Only the styled native checkbox remains (Marktech navy). */
.checkbox .ripple-container,
.checkbox .ripple-decorator,
.checkbox .checkbox-decorator {
    display: none !important;
}

.modern-form-group .checkbox input[type="checkbox"],
.modern-form-group.checkbox input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
    margin-right: 8px !important;
    accent-color: var(--primary-color) !important;
    cursor: pointer !important;
    opacity: 1 !important;
    position: static !important;
    pointer-events: auto !important;
}

.modern-form-group .checkbox label,
.modern-form-group.checkbox label,
.modern-form-group .checkbox label.bmd-label-floating,
.modern-form-group.checkbox label.bmd-label-floating,
.modern-form-group .checkbox label.bmd-label-static,
.modern-form-group.checkbox label.bmd-label-static,
.bucket-form .modern-form-group .checkbox label.bmd-label-floating,
.bucket-form .modern-form-group.checkbox label.bmd-label-floating,
.bucket-form .modern-form-group .checkbox label.bmd-label-static,
.bucket-form .modern-form-group.checkbox label.bmd-label-static {
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-bottom: 0 !important;
    color: var(--text-main) !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
}

/* Remove default Select2 focus outlines */
.select2-container:focus {
    outline: none !important;

}

/* Filters Panel Styling — visibility is controlled by jQuery
   show/hide, so never force `display` here */
.filter-report {
    width: 100%;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid #edf2f7;
    padding: 22px 20px;
    margin-bottom: 16px;
}
/* ============================================================
   Campaign Card — Redesigned for clarity and visual elegance
   ============================================================ */

/* Campaign Row Refinements */
.campaign-info {
    margin-bottom: 4px !important;
}

.card.card-tables {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.campaign-info .campaign-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
}

.campaign-investment {
    font-weight: 700 !important;
    color: var(--text-main) !important;
    font-size: 1rem !important;
    letter-spacing: -0.2px !important;
}

.campaign-business-name {
    font-size: 0.82rem !important;
    color: var(--text-muted) !important;
    margin-top: 4px !important;
    font-weight: 500 !important;
}

.campaign-summary {
    font-size: 0.82rem !important;
    color: var(--text-muted) !important;
    margin-top: 6px !important;
    line-height: 1.5 !important;
}

.campaign-city {
    font-size: 0.85rem !important;
    color: var(--text-muted) !important;
    margin-top: 4px !important;
}

/* Data labels (dt) and values (dd) */
.campaign-table dt {
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--text-muted) !important;
    margin-bottom: 2px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.campaign-table dd {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
    margin-bottom: 10px !important;
    margin-left: 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* Buttons */
.btn-smallest {
    padding: 7px 14px !important;
    font-size: 0.75rem !important;
    margin: 3px 0 !important;
    min-width: 110px !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 600 !important;
    box-shadow: var(--shadow-sm) !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    transition: var(--transition) !important;
    border: none !important;
    cursor: pointer !important;
    text-align: center !important;
}

.btn-pay {
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%) !important;
    color: var(--primary-color) !important;
}

.btn-pay:hover {
    background: linear-gradient(135deg, var(--accent-hover) 0%, #ffe566 100%) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent) !important;
}

.btn-exclude {
    background: linear-gradient(135deg, var(--error) 0%, #c0392b 100%) !important;
    color: var(--white) !important;
}

.btn-exclude:hover {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(231, 76, 60, 0.4) !important;
}

.btn-preview {
    background: linear-gradient(135deg, var(--aux-blue) 0%, #7a9ab5 100%) !important;
    color: var(--white) !important;
}

.btn-preview:hover {
    background: linear-gradient(135deg, #7a9ab5 0%, #6d8ba6 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(141, 169, 194, 0.4) !important;
}

.btn-results {
    background: linear-gradient(135deg, var(--primary-color) 0%, #454975 100%) !important;
    color: var(--white) !important;
}

.btn-results:hover {
    background: linear-gradient(135deg, #26283d 0%, var(--primary-color) 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(51, 54, 82, 0.4) !important;
}

.btn-doc {
    background-color: #f1f5f9 !important;
    color: var(--text-main) !important;
    border: 1px solid #e2e8f0 !important;
}

.btn-doc:hover {
    background-color: #e2e8f0 !important;
    transform: translateY(-2px);
}

.btn-edit {
    background-color: #f8f9ff !important;
    color: var(--primary-color) !important;
    border: 1.5px solid var(--primary-color) !important;
}

.btn-edit:hover {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
    transform: translateY(-2px);
}

.btn-approve {
    background: linear-gradient(135deg, var(--success) 0%, #27ae60 100%) !important;
    color: var(--white) !important;
}

.btn-pay:hover, .btn-pay-now:hover {
    background-color: var(--accent-color) !important; /* Standard Yellow */
    color: var(--primary-color) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent) !important;
}

.btn-action-icon:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1) !important;
    border-color: var(--primary-color) !important;
}

.btn-results:hover { background-color: #3b82f6 !important; border-color: #3b82f6 !important; color: white !important; }
.btn-approve:hover { background-color: #10b981 !important; border-color: #10b981 !important; color: white !important; }
.btn-edit:hover { background-color: var(--accent-color) !important; border-color: var(--accent-color) !important; color: var(--primary-color) !important; }
.btn-doc:hover { background-color: #6366f1 !important; border-color: #6366f1 !important; color: white !important; }
.btn-preview:hover { background-color: #8b5cf6 !important; border-color: #8b5cf6 !important; color: white !important; }
.btn-exclude:hover { background-color: #ef4444 !important; border-color: #ef4444 !important; color: white !important; }


.actions-label {
    font-weight: bold !important;
    font-size: 0.72rem !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
}

.btns-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    justify-content: flex-start !important; /* Top-aligned like the other columns */
    align-items: center !important;         /* Horizontally centered */
    flex: 1 0 180px !important;             /* Fill the remaining column so centering is real */
    width: auto !important;
    border-right: none !important;
}

/* Cards de mídia: a coluna de texto é centralizada verticalmente, então o
   bloco AÇÕES (label + grid) acompanha, para as duas colunas se alinharem */
.campaign-table .row:has(.creative-info) .btns-wrapper {
    justify-content: center !important;
}

.action-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 2px !important;
    width: 100% !important;
}

.btn-action-icon {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    color: var(--primary-color) !important;
    transition: all 0.2s ease !important;
    border: 1px solid #f1f5f9 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03) !important;
}

.btn-action-icon i {
    font-size: 20px !important;
    margin: 0 !important;
}

.btn-action-icon:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
    background: var(--primary-color) !important;
    color: var(--white) !important;
}

.btn-action-icon.action-disabled {
    opacity: 0.3 !important;
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.btn-action-icon.action-disabled:hover {
    transform: none !important;
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
}

/* Specific button variants */
.btn-pay { background: #fffbeb !important; color: #d97706 !important; }
.btn-pay:hover { background: var(--accent-color) !important; color: var(--primary-color) !important; }

.btn-results { background: #eef2ff !important; color: #4f46e5 !important; }
.btn-results:hover { background: #4f46e5 !important; color: white !important; }

.btn-approve { background: #f0fdf4 !important; color: #16a34a !important; }
.btn-approve:hover { background: #16a34a !important; color: white !important; }

.btn-exclude { background: #fef2f2 !important; color: #dc2626 !important; }
.btn-exclude:hover { background: #dc2626 !important; color: white !important; }

.btn-pay-now {
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    box-shadow: 0 4px 12px rgba(250, 208, 44, 0.4) !important;
}

/* The white .card wrapping the campaign list shows through the 16px gaps
   between campaign cards as a blank strip — make it a plain container */
.card:has(> .table.campaign-table),
.card:has(> .campaign-table) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Kumon: the bootstrap column wrapping the campaign list adds 15px side
   padding, breaking the right-edge alignment between cards and the
   Filtros/Sair buttons — flatten it (the .content padding already provides
   the page gutter) */
.campaign-panel > .row > .col-lg-12.col-md-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Kumon: the campaign list wrapper carries the legacy `table` class, and
   BMD's `.table .checkbox { width: 15px }` crushes the filter checkboxes */
.campaign-table .filter-section .checkbox {
    width: auto !important;
}

.campaign-table .filter-section .checkbox label {
    white-space: nowrap !important;
}

/* Kumon-specific action buttons (same pastel + inverted-hover pattern) */
.btn-regional { background: #f0f9ff !important; color: #0284c7 !important; }
.btn-regional:hover { background: #0284c7 !important; color: white !important; }

/* Scoped to the icon grid only — the text "Investir +" button in the first
   column shares the class (the JS fill handler binds it) but must stay the
   accent-yellow CTA */
.btn-action-icon.btn-add-investment { background: #f0fdfa !important; color: #0d9488 !important; }
.btn-action-icon.btn-add-investment:hover { background: #0d9488 !important; color: white !important; }

.btn-approve-investment { background: #fff7ed !important; color: #ea580c !important; }
.btn-approve-investment:hover { background: #ea580c !important; color: white !important; }

.google-keywords-button { background: #fefce8 !important; color: #ca8a04 !important; }
.google-keywords-button:hover { background: #ca8a04 !important; color: white !important; }

/* Badge styles */
.badge-accent {
    background-color: var(--accent-color) !important;
    color: var(--primary-color) !important;
    padding: 4px 10px !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
}

/* Pagination — one canonical, centered style for every list */
.center:has(> .pagination) {
    width: 100%;
    text-align: center !important;
}

.pagination {
    display: inline-flex !important;
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 6px;
    float: none !important;
    margin: 10px auto 26px !important;
    padding: 0 !important;
}

.pagination a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px;
    height: 38px;
    padding: 0 12px !important;
    float: none !important;
    color: var(--primary-color) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: var(--white) !important;
    border: 1.5px solid #edf2f7 !important;
    border-radius: var(--radius-sm) !important;
    margin: 0 !important;
    transition: var(--transition) !important;
}

.pagination a:hover:not(.active) {
    background: #f1f5f9 !important;
    border-radius: var(--radius-sm) !important;
}

.pagination a.active {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
    border-color: var(--primary-color) !important;
}

/* Auth Page Premium Look */
.limiter {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a1c2c 100%) !important;
}

.container-login100 {
    background: transparent !important;
}

.wrap-login100 {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
}

.login100-form-title {
    padding-bottom: 15px !important;
}

.login100-form-title h3 {
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    margin-top: 20px !important;
}

/* Typography refinements — "Outfit" is loaded in base.html */
h1, h2, h3, h4, h5, h6 {
    font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 700;
}

/* ============================================================
   Campaign Table — Card Layout
   ============================================================ */
.campaign-table {
    background: transparent !important;
    border: none !important;
}

.campaign-table .row:not(.filter-section) {
    background: var(--white) !important;
    border-radius: 16px !important;
    margin: 0 0 16px 0 !important;
    padding: 22px 20px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04) !important;
    border: 1px solid #edf2f7 !important;
    transition: var(--transition) !important;
    display: flex !important;
    flex-wrap: wrap !important; /* Columns stack instead of squeezing on small screens */
    align-items: stretch !important;
    overflow: visible !important; /* Tooltips (qtip) must not be clipped */
}

/* Results block lives inside the card now: full-width strip with a
   soft divider, no vertical separator */
.campaign-table .row > .campaign-result {
    border-right: none !important;
    border-left: none !important;
    border-top: 1px solid #f1f5f9 !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.campaign-table .row:not(.filter-section):hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04) !important;
    border-top-color: #e2e8f0 !important;
    border-right-color: #e2e8f0 !important;
    border-bottom-color: #e2e8f0 !important;
}

/* Status side bars — every campaign card gets one.
   Declared after the base/hover rules so the left border always wins. */
.campaign-table .row.status-positive {
    border-left: 4px solid var(--success) !important;
}

.campaign-table .row.status-negative {
    border-left: 4px solid var(--error) !important;
}

/* Column separators — subtle vertical dividers (campaign cards only) */
.campaign-table .row > div {
    min-width: 0 !important; /* Prevent flex overflow */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.campaign-table .row:not(.filter-section) > div:not(:last-child):not(.modal):not(.campaign-result):not(.btns-wrapper) {
    border-right: 1px solid #f1f5f9 !important;
    padding-right: 16px !important;
}

.campaign-table .row:not(.filter-section) > div:not(:first-child):not(.modal):not(.campaign-result) {
    padding-left: 16px !important;
}

/* Modals and result strips are not data columns — no dividers/padding */
.campaign-table .row > .modal,
.campaign-table .row > .campaign-result {
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Override data label/value styles inside card */
.campaign-table .row dt {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.8px;
    margin-bottom: 3px;
    /* Spanish labels ("FECHA DE FINALIZACIÓN") are long — never bleed
       across the column divider */
    overflow-wrap: anywhere;
}

.campaign-table .row dd {
    margin-left: 0;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: var(--primary-color);
    font-weight: 600;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Status indicators — better visual weight */
.campaign-table .row dd i.material-icons {
    vertical-align: middle !important;
    margin-right: 4px !important;
    font-size: 1.1rem !important;
}

/* Action-required card states */
.campaign-table .row.action-required {
    border-left: 4px solid var(--error) !important;
}

.campaign-table .row.action-marktech-required {
    border-left: 4px solid var(--success) !important;
}

/* ============================================================
   Media (creative) cards — Todas as mídias / Minhas mídias
   ============================================================ */
.campaign-table .row.status-waiting {
    border-left: 4px solid var(--accent-color) !important;
}

/* The media list card sits directly inside a flex .row — without an
   explicit width it shrinks to its content on small screens */
.tab-content .bucket-form.card,
.tab-content .campaign-table {
    width: 100% !important;
}

/* The card wrapping the media LIST is a redundant white box — make it
   a transparent container so cards align with the filter (like the
   dashboard). Only the wrapper containing campaign cards is affected;
   the upload form card keeps its styling. */
.bucket-form.card:has(> .card-body > .col-lg-12 > .campaign-table),
.bucket-form.card:has(> .card-body > .campaign-table) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.bucket-form.card:has(> .card-body > .col-lg-12 > .campaign-table) > .card-body,
.bucket-form.card:has(> .card-body > .campaign-table) > .card-body {
    padding: 0 !important;
}

.media-total-chip {
    background: var(--white);
    border: 1px solid #edf2f7;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    padding: 10px 20px;
    font-size: 0.88rem;
    color: var(--text-main);
}

.media-total-chip b {
    color: var(--primary-color);
}

.creative-media-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.creative-media-col > dt {
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    white-space: nowrap !important;
}

.creative-media {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #edf2f7;
    background: #f8f9ff;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.creative-media:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.creative-media img {
    display: block;
    object-fit: cover;
}

img.creative-media-story {
    width: 130px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
}

img.creative-media-feed {
    width: 130px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.creative-media-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    color: #b3bdcc;
    font-size: 0.72rem;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

.creative-media-placeholder.creative-media-story {
    width: 130px;
    max-width: 100%;
    aspect-ratio: 9 / 16;
    height: auto;
}

.creative-media-placeholder.creative-media-feed {
    width: 130px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
}

.creative-media {
    max-width: 100%;
}

/* Recover side space on small screens (utility kept from the old CSS) */
@media (max-width: 769px) {
    .no-l-padding-sm {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.creative-media-placeholder i.material-icons {
    font-size: 1.6rem;
    color: #cbd5e1;
}

/* Small screens: tighter column padding so the fluid media has room */
@media (max-width: 575px) {
    .creative-media-col {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* Text block: centered column (padrão kumon-brasil) with tidy rhythm —
   title, unit, meta row and status pill stacked and center-aligned */
.creative-info {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
}

.creative-info .campaign-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
}

.creative-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 2px 0 4px;
    justify-content: center;
}

.creative-meta dt {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 2px;
}

.creative-meta dd {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.creative-rejection-reason {
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Status tags for creatives */
.status-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.status-tag i.material-icons {
    font-size: 0.95rem;
}

.status-tag-active {
    background: #f0fdf4;
    color: #16a34a;
    border-color: #dcfce7;
}

.status-tag-inactive {
    background: #f8fafc;
    color: #64748b;
    border-color: #e2e8f0;
}

.status-tag-waiting {
    background: #fffbeb;
    color: #d97706;
    border-color: #fef3c7;
}

.status-tag-rejected {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fee2e2;
}

/* Video play badge, centered on the results-table thumbnail. Page-level
   styles size this box at 19px with no offsets, which dropped the badge at
   the static position while the 40px glyph overflowed the box; the explicit
   top/left + translate and the 40px box keep circle and glyph concentric
   and centered on the image. */
.video-icon {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
    border-radius: 50%;
    display: flex;
    pointer-events: none;
}

.video-icon i {
    font-size: 40px !important;
    line-height: 1 !important;
    color: var(--primary-color) !important;
    margin: 0 !important;
}

/* Observações modal footer — Fechar on the left, downloads grouped right */
.modal .modal-footer.obs-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    padding: 18px 28px 22px !important;
    border-top: 1px solid #f1f5f9 !important;
}

.obs-footer-downloads {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.obs-footer .btn-cancel {
    margin: 0 !important;
    padding: 9px 22px !important;
}

.obs-csv-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 9px 18px !important;
    font-size: 0.82rem !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.obs-csv-btn i.material-icons {
    font-size: 1rem !important;
}

/* Modal footer shouldn't cram content against the rounded bottom edge.
   Materialize caps footers at height:56px — let them grow instead. */
.modal .modal-footer {
    padding: 16px 24px 20px !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Loaders inside modal bodies: always centered, independent of the
   body's display mode (block for previews, flex elsewhere) */
.modal .modal-body .loader {
    margin: 36px auto !important;
    display: block !important;
}

/* Support modal — clean option rows */
.support-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.support-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #edf2f7;
    border-radius: 14px;
    background: #fcfcff;
    text-decoration: none !important;
    transition: var(--transition);
}

.support-option:hover {
    border-color: #dbe3ff;
    box-shadow: 0 6px 18px rgba(51, 54, 82, 0.08);
    transform: translateY(-1px);
}

.support-option-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.support-option-icon i {
    font-size: 1.4rem;
}

.support-icon-sults {
    background: #eef2ff;
    color: #4f46e5;
}

.support-icon-whats {
    background: #e7f9ee;
    color: #25D366;
}

.support-option-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.support-option-text strong {
    color: var(--primary-color);
    font-size: 0.95rem;
    font-weight: 700;
}

.support-option-text small {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.support-option-arrow {
    color: #cbd5e1;
    transition: transform 0.2s ease;
}

.support-option:hover .support-option-arrow {
    transform: translateX(3px);
    color: var(--primary-color);
}

/* ============================================================
   Billing (Documentos Fiscais)
   ============================================================ */
.billing-card {
    margin-bottom: 16px !important;
}

/* Billing card title: match the campaign-card title scale */
.billing-card .campaign-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    line-height: 1.3 !important;
}

/* Generic empty state: big muted icon + centered phrase (never a giant h2) */
.empty-state {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 20px;
    color: var(--text-muted);
    text-align: center;
}

.empty-state i.material-icons {
    font-size: 56px;
    color: #cbd5e1;
}

.empty-state p {
    margin: 0;
    font-size: 0.95rem;
}

.billing-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px !important;
    color: var(--text-muted);
}

.billing-empty i.material-icons {
    font-size: 2.4rem;
    color: #cbd5e1;
}

.billing-empty p {
    margin: 0;
}

.billing-doc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 12px;
    background: #fcfcff;
}

.billing-doc-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.billing-doc-info > i.material-icons {
    font-size: 1.5rem;
    color: var(--aux-blue);
}

.billing-doc-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}

.billing-doc-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.billing-doc-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 18px !important;
    font-size: 0.8rem !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.billing-doc-btn i.material-icons {
    font-size: 1rem;
}

/* Custom Tags */
.custom-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    margin: 3px 2px;
    gap: 5px;
    box-shadow: none;
    border: 1px solid transparent;
}

.custom-tag i {
    font-size: 0.9rem;
}

.custom-tag-annual-2024, .custom-tag-annual-2025 {
    background-color: #e3f2fd;
    color: #1565c0;
    border-color: #bbdefb;
}

.custom-tag-incentive-2024, .custom-tag-incentive-2025 {
    background-color: #f3e5f5;
    color: #6a1b9a;
    border-color: #e1bee7;
}

.custom-tag-filial {
    background-color: #fff3e0;
    color: #e65100;
    border-color: #ffe0b2;
}

.custom-tag-city {
    background-color: #e8f5e9;
    color: #2e7d32;
    border-color: #c8e6c9;
}

.custom-tag-experiment {
    background-color: #fff9c4;
    color: #f57f17;
    border-color: #fff176;
}

/* Info tooltip refinement */
.campaign-table i.info-tooltip {
    font-size: 0.85rem !important;
    color: var(--text-muted) !important;
    cursor: help !important;
    vertical-align: middle !important;
    margin-left: 3px !important;
}

/* Channel icons */
.campaign-table .fab,
.campaign-table .fa-brands {
    font-size: 1rem !important;
    margin-right: 6px !important;
}

/* ============================================================
   Campaign Result Cards — Modern KPI Design
   ============================================================ */
.campaign-result {
    padding: 16px 0 8px !important;
    margin-top: 8px !important;
}

/* KPI rows are plain layout containers — never nested white cards.
   (Must out-rank .campaign-table .row:not(.filter-section)) */
.campaign-table .campaign-result .row,
.campaign-result .row {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
}

.campaign-table .campaign-result .row:hover,
.campaign-result .row:hover {
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Reset column separators inside result rows */
.campaign-result .row > div {
    border-right: none !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    min-width: 0 !important;
    margin-bottom: 12px !important;
}

.result-data {
    background: var(--white) !important;
    border: 1px solid #edf2f7 !important;
    /* Simple solid accent line, clipped by the card's own radius */
    border-top: 3px solid var(--aux-blue) !important;
    border-radius: 14px !important;
    min-height: auto !important;
    color: var(--text-main) !important;
    padding: 16px 20px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    transition: var(--transition) !important;
    position: relative !important;
    height: 100% !important;
    /* overflow must stay visible so the qtip tooltip isn't clipped */
    overflow: visible !important;
}

.result-data:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
    border-color: #e2e8f0 !important;
}

.result-header {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    text-transform: none !important;
    text-align: left !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.2px !important;
}

.result-header i.material-icons {
    font-size: 0.85rem !important;
    vertical-align: middle !important;
    margin-left: 3px !important;
    color: var(--text-muted) !important;
    opacity: 0.6 !important;
}

.result-body {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
    flex: 1 !important;
    display: flex !important;
    align-items: flex-start !important;
    line-height: 1.2 !important;
}

.result-body p {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    margin: 0 !important;
}

.result-footer {
    font-size: 0.65rem !important;
    color: var(--text-muted) !important;
    text-align: left !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 8px !important;
    margin-top: auto !important;
    letter-spacing: 0.3px !important;
    font-weight: 500 !important;
}

/* Hide the promotions table while it has no data. Two triggers because the
   template's <tbody> holds a whitespace text node, so tbody:empty alone fails
   during the "Carregando..." state and the bordered table renders as a thin
   ghost strip below the KPI cards. thead.hidden is the semantic "no data yet"
   flag (JS strips it only when promotions arrive), so it catches the loading
   state regardless of whitespace; tbody:empty covers the post-load empty
   result (JS sets tbody to "" then). */
.campaign-result .table:has(thead.hidden),
.campaign-result .table:has(tbody:empty) {
    display: none !important;
}

/* Fallback for browsers without :has() — hide table with empty tbody */
.campaign-result table thead.hidden + tbody:empty {
    display: none !important;
}

.campaign-result .table table thead.hidden {
    display: none !important;
}

/* Style the promotion table if it HAS data */
.campaign-result .table table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 12px !important;
    /* overflow must stay visible or the header qtip tooltips get clipped;
       rounded corners are drawn on the corner cells below instead */
    overflow: visible !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    border: 1px solid #edf2f7 !important;
    margin-top: 8px !important;
}

.campaign-result .table table thead th:first-child {
    border-top-left-radius: 11px !important;
}

.campaign-result .table table thead th:last-child {
    border-top-right-radius: 11px !important;
}

.campaign-result .table table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 11px !important;
}

.campaign-result .table table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 11px !important;
}

.campaign-result .table table th {
    background: #f8f9ff !important;
    color: var(--text-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #edf2f7 !important;
}

.campaign-result .table table td {
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
    color: var(--text-main) !important;
    border-bottom: 1px solid #f7f8fc !important;
}

.campaign-result .table table tbody tr:hover {
    background: #f8f9ff !important;
}

/* Header/body alignment and legacy shadow cleanup for the promotions
   results table (creatives breakdown) */
.campaign-result .table {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.campaign-result .table table thead,
.campaign-result .table table tbody,
.campaign-result .table table tr,
.campaign-result .table table th,
.campaign-result .table table td {
    box-shadow: none !important;
    background-image: none !important;
}

.campaign-result .table table th {
    vertical-align: middle !important;
    text-align: center !important;
}

.campaign-result .table table td {
    vertical-align: middle !important;
    text-align: center !important;
    border-top: none !important;
}

.campaign-result .table table th:first-child,
.campaign-result .table table td:first-child {
    text-align: left !important;
}

.campaign-result .table table td:first-child img {
    border-radius: 10px !important;
    box-shadow: none !important;
}

/* Sidebar Refinements */
/* Sidebar Logo Area Refinements */
.sidebar .logo {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px 20px 10px !important; /* Increased padding */
    background: rgba(255, 255, 255, 0.03) !important;
    margin-bottom: 5px !important;
    min-height: auto !important;
    position: relative !important;
    border-bottom: none !important;
    gap: 8px !important; /* Added gap between logo and text */
}

.sidebar .logo .simple-text {
    margin-top: 5px !important;
    line-height: 1.2 !important;
}

/* qTip Tooltip Fix (Font & Rendering) */
.qtip:before {
    background: var(--primary-color) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25) !important;
    z-index: 10000 !important;
    opacity: 1 !important; /* Ensure solid background */
    
    /* Crucial fix: Force a normal font to avoid inheriting 'Material Icons' */
    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif !important;
    text-transform: none !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    
    /* Layout fixes */
    width: 220px !important;
    min-width: 220px !important;
    white-space: normal !important;
    display: block !important;
    text-align: center !important;
    text-shadow: none !important;
    word-wrap: break-word !important;
    color: #ffffff !important;
}

/* Fix transparency bleed from parent icon */
.result-header i.material-icons.qtip:hover {
    opacity: 1 !important;
}

.qtip.tip-bottom:after {
    border-bottom-color: var(--primary-color) !important;
    z-index: 10001 !important;
}

/* Reposition Tooltip ABOVE the icon */
.result-header .qtip:before {
    bottom: auto !important;
    top: 0 !important;
    transform: translate(-50%, calc(-100% - 12px)) !important;
}

.result-header .qtip:after {
    bottom: auto !important;
    top: -12px !important;
    transform: translate(-50%, 0) !important;
    border-width: 8px 8px 0 8px !important;
    border-color: var(--primary-color) transparent transparent transparent !important;
    z-index: 10001 !important;
}

/* ---- Results TABLE header tooltips: keep them inside the table ---- */
/* Default: center the bubble under the icon (was left:50% + no transform,
   so it overflowed to the right) */
.campaign-result .table table th .qtip:before {
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, 6px) !important;
}

.campaign-result .table table th .qtip.tip-bottom:after,
.campaign-result .table table th .qtip:after {
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, 0) !important;
}

/* Right-most columns: anchor the bubble to the icon's right edge so it
   extends leftward and never leaves the screen */
.campaign-result .table table th:nth-last-child(-n+3) .qtip:before {
    left: auto !important;
    right: -8px !important;
    transform: translateY(6px) !important;
}

.campaign-result .table table th:nth-last-child(-n+3) .qtip:after {
    left: auto !important;
    right: 4px !important;
    transform: translateY(0) !important;
}

/* Fix "Carregando" text in KPI cards */
.result-body p {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    margin: 10px 0 !important;
    opacity: 0.7 !important;
}

/* New elegant divider */
.sidebar .logo::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 20px !important;
    right: 20px !important;
    height: 1px !important;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
}

.sidebar .logo img {
    max-width: 140px !important;
    height: auto !important;
    filter: brightness(0) invert(1) !important;
    transition: var(--transition) !important;
}

.sidebar .logo:hover img {
    filter: brightness(0) invert(1) !important;
}

/* Custom File Upload */
.custom-file-upload {
    border: 2px dashed var(--secondary-accent);
    display: inline-block;
    padding: 20px;
    cursor: pointer;
    border-radius: var(--radius-md);
    width: 100%;
    text-align: center;
    transition: var(--transition);
    background: #f8f9ff;
    margin-top: 10px;
}

.custom-file-upload:hover {
    border-color: var(--primary-color);
    background: #f0f4f8;
}

.custom-file-upload i {
    font-size: 2rem;
    color: var(--secondary-accent);
    display: block;
    margin-bottom: 10px;
}

/* Hide native file input */
input[type="file"].modern-file-input {
    display: none;
}

/* Action Badges */
.action-required {
    border-left: 4px solid var(--error) !important;
}

.action-marktech-required {
    border-left: 4px solid var(--accent-color) !important;
}

/* Navbar and Unit Selector */
.navbar-brand {
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    font-size: 1.25rem !important;
}

.unit-selector-container .select2-container--default .select2-selection--single {
    border-radius: var(--radius-pill) !important;
    border: 1.5px solid #e0e0e0 !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    padding: 0 15px !important;
}

.logout-btn {
    background-color: var(--white) !important;
    color: var(--error) !important;
    border: 1.5px solid var(--error) !important;
}

.logout-btn:hover {
    background-color: var(--error) !important;
    color: var(--white) !important;
}

/* ============================================================
   Request forms (.bucket-form) — same language as the dashboard
   filters: rounded boxes, static uppercase labels
   ============================================================ */
.bucket-form input.form-control,
.bucket-form select.form-control,
.bucket-form input[type="date"].form-control,
.bucket-form .select-wrapper input.select-dropdown {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: var(--radius-md) !important;
    background: var(--white) !important;
    height: 48px !important;
    padding: 0 18px !important;
    box-shadow: var(--shadow-sm) !important;
    font-size: 0.95rem !important;
    color: var(--text-main) !important;
    box-sizing: border-box !important;
    margin-bottom: 4px !important;
    background-image: none !important; /* remove BMD underline */
}

.bucket-form input.form-control:focus,
.bucket-form .select-wrapper input.select-dropdown:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(51, 54, 82, 0.1) !important;
    outline: none !important;
}

.bucket-form input.form-control[readonly] {
    background: #f8fafc !important;
    color: var(--text-muted) !important;
}

/* ============================================================
   Upload form (Minhas mídias) — polished field styling
   ============================================================ */
#uploadForm h5 {
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 18px;
}

#uploadForm > label,
#uploadForm .d-flex > label,
#uploadForm #end-date-label {
    display: block;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted) !important;
    margin-bottom: 8px !important;
}

/* Native file pickers: dashed drop-zone look, brand hover */
#uploadForm input[type="file"] {
    width: 100%;
    border: 1.5px dashed #cbd5e1;
    border-radius: var(--radius-md);
    background: #f8f9ff;
    padding: 12px 14px;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 4px;
}

#uploadForm input[type="file"]:hover {
    border-color: var(--accent-color);
    background: #fffef5;
}

#uploadForm input[type="file"]::file-selector-button {
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: var(--radius-pill);
    padding: 7px 16px;
    margin-right: 14px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition);
}

#uploadForm input[type="file"]:hover::file-selector-button {
    background: #434766;
}

/* The two upload columns share the row evenly and breathe */
#uploadForm .row[style*="gap"] > .d-flex {
    flex: 1 1 240px;
    min-width: 0;
}

/* Story/Feed labels have different lengths (Feed wraps to 2 lines) — reserve
   2 lines of height in both so the file inputs below stay aligned */
#uploadForm .row[style*="gap"] > .d-flex > label {
    min-height: 2.3em;
    display: flex;
    align-items: flex-start;
}

.bucket-form label.bmd-label-floating,
.bucket-form label.bmd-label-static {
    position: static !important;
    transform: none !important;
    display: block !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--text-muted) !important;
    margin-bottom: 8px !important;
    will-change: auto !important;
}

/* BMD form groups: no reserved space for the floating label */
.bucket-form .form-group.bmd-form-group {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.bucket-form .select-wrapper {
    width: 100% !important;
    display: block !important;
}

.bucket-form .select-wrapper input.select-dropdown {
    width: 100% !important;
}

.bucket-form .select-div {
    margin: 0 !important;
}

/* One caret to rule them all: drawn INSIDE the field, right-aligned,
   for both native selects and Materialize dropdown inputs */
.bucket-form select.form-control,
.bucket-form .select-wrapper input.select-dropdown {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23718096'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 18px !important;
    padding-right: 42px !important;
}

/* Hide Materialize's own caret (it hugs the field border) */
.bucket-form .select-wrapper svg.caret,
.bucket-form .select-wrapper .caret {
    display: none !important;
}

/* Materialize dropdown list — rounded, brand colors */
.dropdown-content {
    border-radius: 14px !important;
    box-shadow: var(--shadow-lg) !important;
    overflow-y: auto !important;
}

.dropdown-content li > a,
.dropdown-content li > span {
    color: var(--primary-color) !important;
    font-size: 0.92rem !important;
}

.dropdown-content li:hover,
.dropdown-content li.selected {
    background-color: #f4f6ff !important;
}

/* Primary/secondary CTAs on request forms */
.bucket-form .btn-save {
    background-color: var(--accent-color) !important;
    color: var(--primary-color) !important;
    font-weight: 800 !important;
}

.bucket-form .btn-save:hover {
    background-color: var(--accent-hover) !important;
    box-shadow: 0 6px 20px rgba(250, 208, 44, 0.5) !important;
}

.bucket-form .btn-save.disabled {
    opacity: 0.45 !important;
    pointer-events: none !important;
}

/* Navy utility buttons (Configurações etc.) — brand hover */
.btn-neutral:hover {
    background-color: #434766 !important;
    color: var(--white) !important;
    border-color: #434766 !important;
}

.btn-cancel {
    background: transparent !important;
    border: 2px solid #e2e8f0 !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
}

.btn-cancel:hover {
    border-color: var(--text-muted) !important;
    color: var(--text-main) !important;
    background: #f8fafc !important;
}

/* Success buttons are the Marktech accent-yellow CTA (green reads as a
   different brand). Icon-grid action buttons keep their own pastel colors. */
.btn.btn-success:not(.btn-action-icon),
.btn-success:not(.btn-action-icon) {
    background-color: var(--accent-color) !important;
    background-image: none !important;
    color: var(--primary-color) !important;
    font-weight: 800 !important;
    border: none !important;
}

.btn.btn-success:not(.btn-action-icon):hover,
.btn.btn-success:not(.btn-action-icon):focus,
.btn.btn-success:not(.btn-action-icon):active,
.btn-success:not(.btn-action-icon):hover,
.btn-success:not(.btn-action-icon):focus,
.btn-success:not(.btn-action-icon):active {
    background-color: var(--accent-hover) !important;
    color: var(--primary-color) !important;
    box-shadow: 0 6px 20px rgba(250, 208, 44, 0.5) !important;
}

/* Neutralize the legacy green ripple Materialize gives .waves-green
   buttons (e.g. "Vista previa") — brand-navy ripple instead */
.waves-green .waves-ripple {
    background-color: rgba(51, 54, 82, 0.25) !important;
}

/* Preview buttons: lock EVERY interactive state to navy. Materialize/BMD
   otherwise flash a green :active/:focus background (the .waves-green
   legacy), which read as the wrong brand. Not scoped to .bucket-form so
   it also covers edit_campaign etc. */
.meta-preview,
.google-preview,
.meta-preview:visited,
.google-preview:visited {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

.meta-preview:hover,
.meta-preview:focus,
.meta-preview:active,
.google-preview:hover,
.google-preview:focus,
.google-preview:active {
    background-color: #434766 !important;
    color: var(--white) !important;
    box-shadow: var(--shadow-md) !important;
}

/* ============================================================
   Radius adjustment modal — inputs, table, buttons
   ============================================================ */
label.label-icon,
.bucket-form label.bmd-label-floating.label-icon,
.bucket-form label.bmd-label-static.label-icon {
    display: inline-block !important;
    margin-right: 4px !important;
    vertical-align: top !important; /* keep the label on the same top as icon-less labels */
}

label.label-icon + i.material-icons.info-tooltip {
    vertical-align: top !important;
    top: 0 !important;
    line-height: 1 !important;
}

#extra-radius .maps-input {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: var(--white) !important;
    height: 42px !important;
    padding: 0 14px !important;
    box-shadow: var(--shadow-sm) !important;
    font-size: 0.9rem !important;
    color: var(--text-main) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

#extra-radius .maps-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(51, 54, 82, 0.1) !important;
    outline: none !important;
}

#extra-radius .maps-input-select {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: var(--white) !important;
    height: 42px !important;
    padding: 0 12px !important;
    font-size: 0.9rem !important;
    color: var(--text-main) !important;
}

#extra-radius .maps-input-label {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: var(--text-muted) !important;
}

#extra-radius #controls > div,
#extra-radius #controls > button {
    margin-bottom: 14px !important;
}

#extra-radius .btn-smallest {
    margin: 6px 0 !important;
}

/* Radius table */
/* Radius modal: widen the FIXED shell (not just the inner dialog, which
   would overflow past the 768px shell and run off-screen) and center it */
#extra-radius.modal {
    width: min(96vw, 1400px) !important;
    max-width: 96vw !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

#extra-radius .modal-dialog {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

#extra-radius .custom-table th,
#extra-radius .custom-table td {
    padding: 8px 10px !important;
    font-size: 0.78rem !important;
}

#extra-radius .custom-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #edf2f7 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    font-size: 0.85rem !important;
}

#extra-radius .custom-table thead,
#extra-radius .custom-table thead tr {
    background: #f8f9ff !important;
}

#extra-radius .custom-table th {
    background: #f8f9ff !important;
    color: var(--text-muted) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #edf2f7 !important;
    text-align: left !important;
}

/* Kill the legacy template rule that adds a 4px left inset to header
   cells (the visible white sliver on the left of the header) */
#extra-radius .custom-table th:first-child,
#extra-radius .custom-table td:first-child {
    padding-left: 14px !important;
}

#extra-radius .custom-table td {
    padding: 9px 12px !important;
    border-bottom: 1px solid #f7f8fc !important;
    color: var(--text-main) !important;
}

#extra-radius .custom-table tbody tr:last-child td {
    border-bottom: none !important;
}

#extra-radius .custom-table tbody tr:hover {
    background: #f8f9ff !important;
}

/* Yellow primary CTAs in the radius flow */
#save-trigger-btn,
#save-radius {
    background-color: var(--accent-color) !important;
    color: var(--primary-color) !important;
    font-weight: 800 !important;
}

#save-trigger-btn:hover,
#save-radius:hover {
    background-color: var(--accent-hover) !important;
    box-shadow: 0 6px 20px rgba(250, 208, 44, 0.5) !important;
}

/* Materialize "filled-in" checkboxes in brand navy (not teal/green) */
[type="checkbox"].filled-in:checked + span:not(.lever)::after {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Neutralize legacy negative margins that pushed selects under labels */
.select-icon {
    margin-top: 0 !important;
}

i.material-icons.icon-small {
    margin-top: 0 !important;
    vertical-align: middle !important;
}

/* Collapsible help box (radius adjustment modal, etc.) */
.radius-help {
    background: #f8f9ff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin: 4px 0 16px;
    overflow: hidden;
}

.radius-help summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    cursor: pointer;
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.95rem;
    user-select: none;
}

.radius-help summary::-webkit-details-marker {
    display: none;
}

.radius-help summary i.material-icons {
    font-size: 1.2rem;
    color: var(--aux-blue);
}

.radius-help summary .radius-help-chevron {
    margin-left: auto;
    transition: transform 0.25s ease;
    color: var(--text-muted);
}

.radius-help[open] summary .radius-help-chevron {
    transform: rotate(180deg);
}

.radius-help ol {
    margin: 0;
    padding: 0 20px 16px 38px;
    color: var(--text-main);
    font-size: 0.88rem;
    line-height: 1.6;
}

.radius-help ol li {
    margin-bottom: 6px;
}

/* Mercado Pago wallet: line it up with the payment select beside it
   (the neighbour column has a 23px label above its field) */
#mercado-div #btn-mercado-pago {
    margin-top: 23px;
}

/* Disabled "loading payment button" placeholder */
.form-footer-actions .btn.btn-payment-loading,
.btn-payment-loading {
    display: none !important;
    opacity: 0.75 !important;
    cursor: wait !important;
    pointer-events: none !important;
    align-items: center !important;
    gap: 10px !important;
}

.form-footer-actions .btn.btn-payment-loading.active,
.btn-payment-loading.active {
    display: inline-flex !important;
}

.btn-inline-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: btn-inline-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes btn-inline-spin {
    to { transform: rotate(360deg); }
}

/* Centered footer actions on request forms */
.form-footer-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 10px 0 4px !important;
    width: 100% !important;
}

.form-footer-actions .btn {
    padding: 0 25px !important;
    line-height: 1.2 !important;
    height: 44px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* <a>/<button> center via flex; <input> centers its value natively */
a.btn.form-footer-btn,
.form-footer-actions a.btn,
.form-footer-actions button.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.form-footer-warning {
    width: 100%;
    text-align: center;
    color: var(--error);
    font-size: 0.85rem;
    margin: 0;
}

/* <input class="btn"> renders its value as plain text — inline-flex
   tricks don't apply, so give it explicit metrics to center the label.
   NOTE: no `display` here — jQuery .hide() must still be able to hide it. */
input.btn,
input[type="button"].btn,
input[type="submit"].btn {
    height: auto !important;
    line-height: 1.2 !important;
    padding: 13px 25px !important;
}

/* ============================================================
   Instant tooltips — for icon-only buttons ([data-tooltip] is set
   from the title attribute by JS in base_dashboard.html)
   ============================================================ */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    background: var(--primary-color);
    color: var(--white);
    padding: 5px 11px;
    border-radius: 8px;
    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 10050;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Floating bottom buttons: tooltip above, anchored to the right edge
   so it never runs past the viewport */
.support-button[data-tooltip]::after,
.faq-button[data-tooltip]::after,
.obs-button[data-tooltip]::after {
    bottom: calc(100% + 10px);
    left: auto;
    right: 0;
    transform: translateY(3px);
}

.support-button[data-tooltip]:hover::after,
.faq-button[data-tooltip]:hover::after,
.obs-button[data-tooltip]:hover::after {
    transform: translateY(0);
}

/* Mobile: logout moves from the navbar into the sidebar menu */
.sidebar-logout-item {
    display: none !important;
}

@media (max-width: 767px) {
    .logout-container {
        display: none !important;
    }

    .sidebar-logout-item {
        display: list-item !important;
    }

    /* No absolute centering on mobile: hamburger and the unit selector
       flow side by side, so they can never overlap */
    .navbar > .container-fluid > div:first-child {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    .unit-selector-wrapper {
        position: static !important;
        left: auto !important;
        transform: none !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin-left: 12px !important;
    }
}

/* Info tooltip icons — quieter by default */
i.material-icons.info-tooltip {
    font-size: 1rem !important;
    color: #a3aec0 !important;
    vertical-align: middle !important;
    position: relative !important;
    top: -1.5px !important;
    cursor: help !important;
    transition: color 0.2s ease !important;
}

i.material-icons.info-tooltip:hover {
    color: var(--primary-color) !important;
}

/* ============================================================
   Modals — one clean rounded surface (fixes the "layered" look
   caused by transparent modal-content + floating grey header)
   ============================================================ */
.modal {
    top: 0 !important;
    height: auto !important;
    padding-top: 1vh !important; /* Use more of the screen */
    /* Materialize paints the .modal shell as a big squared white box
       behind the real content — make the shell invisible so the rounded
       .modal-content (or the preview container) is the only surface */
    background: transparent !important;
    box-shadow: none !important;
    max-height: none !important;
    overflow: visible !important;
}

.modal .modal-content {
    background: var(--white) !important;
    border: none !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    padding: 0 !important;
}

.modal .modal-header {
    background: var(--white) !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 18px 24px !important;
    position: relative !important;
    top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.modal .modal-body {
    background: var(--white) !important;
    max-height: 86vh !important;
    overflow-y: auto !important;
    padding: 20px 24px !important;
}

/* Kill the extra top margin Bootstrap gives dialogs */
.modal .modal-dialog {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

/* Empty state for previews (no promo/media selected) */
.preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 20px;
    width: 100%;
    color: var(--text-muted);
    font-size: 0.95rem;
    text-align: center;
}

.preview-empty i.material-icons {
    font-size: 2.6rem;
    color: #cbd5e1;
}

.preview-empty p {
    margin: 0;
    font-weight: 500;
}

/* Meta preview fallback messages (h4s in ad_preview.html) — calm, not headline */
.body-injection > h4,
.google-preview-body-content > h4,
.google-preview-body-content > h2 {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    text-align: center !important;
    padding: 40px 16px !important;
    margin: 0 !important;
    font-family: inherit !important;
}

.modal .modal-footer {
    background: var(--white) !important;
    border-top: 1px solid #f1f5f9 !important;
}

/* Round close button in modal headers */
.modal .modal-header .close {
    background: #f1f5f9 !important;
    border: none !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    line-height: 1 !important;
}

.modal .modal-header .close {
    position: relative !important;
}

.modal .modal-header .close span {
    /* Absolute centering: the &times; glyph otherwise sits high/left */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -54%) !important;
    font-size: 1.4rem !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.modal .modal-header .close:hover {
    background: #e2e8f0 !important;
    color: var(--error) !important;
}

/* The old centered-flex body clipped the left edge when the content
   was wider than the modal — block flow + centered children instead */
.modal .modal-body {
    display: block !important;
}

.body-injection {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

/* Preview (Meta) injected content: center the media pairs */
.body-injection .promo-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    justify-content: center !important;
    padding: 10px 0 !important;
}

.body-injection .pair {
    justify-content: center !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
}

/* ============================================================
   Google Ads Preview Modal — Clean Reconstruction
   ============================================================ */

/* Google preview modal — este projeto usa a estrutura Bootstrap padrão
   (.modal-content > .modal-header + .modal-body > #googleModalBody).
   A versão anterior escondia .modal-body (herança do buddha, cuja estrutura
   era outra), deixando o modal vazio. Mantém a superfície branca padrão e só
   alarga o diálogo. */
.google-modal .modal-dialog {
    max-width: min(1150px, 94vw) !important;
    width: min(1150px, 94vw) !important;
    margin: 1vh auto 12px !important;
}

/* Preview modals can use more of the screen */
.modal .modal-dialog.modal-lg {
    max-width: min(1150px, 94vw) !important;
}

/* Área onde o preview é injetado: rolagem própria e altura mínima para o
   loader/estado vazio não colapsarem o modal */
.google-modal #googleModalBody {
    min-height: 200px !important;
    max-height: 82vh !important;
    overflow-y: auto !important;
}

/* Grade de previews ocupa a largura toda do corpo do modal */
.google-modal .preview-list {
    width: 100% !important;
}

.modal-header {
    background-color: var(--white) !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 20px 30px !important;
}

.modal-title {
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    font-size: 1.25rem !important;
}

.modal-footer {
    border-top: 1px solid #f1f5f9 !important;
    padding: 15px 30px !important;
}

/* Fix for hover flicker on rows when modal is open */
.campaign-table .row:has(.modal.show) {
    transform: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04) !important;
}

.campaign-table .row:has(.modal.show):hover {
    transform: none !important;
}

/* Floating Close Button - Google Preview Fix */
.google-modal .close-modal-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 3000;
    background: var(--white) !important;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-main) !important;
    padding: 0 !important;
}

.google-modal .close-modal-btn i {
    font-size: 18px !important;
    line-height: 1 !important;
}

.close-modal-btn:hover {
    background: #f8f9fa;
    transform: rotate(90deg);
    color: var(--error);
}

.close-modal-btn i {
    font-size: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    text-align: center !important;
}

/* Modal Scrollbar Styling */
.modal-body::-webkit-scrollbar {
    width: 6px !important;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent !important;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 10px !important;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}