: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;
    --warning: #f97316; /* laranja — pagamento pendente (distinto do vermelho/amarelo) */

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

/* Datepicker year/month dropdown (Materialize FormSelect) is appended to
   <body> with the default z-index 9999 — BEHIND the picker modal (10010),
   so the year list rendered hidden behind the calendar. While the picker is
   open, raise every dropdown above it (only the picker's own list is
   interactive then, since the overlay blocks the rest of the page). */
body.datepicker-active .dropdown-content {
    z-index: 10012 !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;
}

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

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

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

/* Project-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) {
    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;
}

/* Pagamento pendente: barra lateral laranja (nem vermelho de erro, nem
   amarelo de aguardando) */
.campaign-table .row.status-pending-payment {
    border-left: 4px solid var(--warning) !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: left-aligned, vertically centered, tidy vertical rhythm
   (the legacy column inherited text-align:center, scattering everything) */
.creative-info {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    /* Conteúdo centralizado na horizontal, mas começando no TOPO (padrão
       Bibi) — sem justify-content/align-self, que empurravam pro meio. */
    justify-content: flex-start !important;
    align-items: center !important;
    align-self: flex-start !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: flex-start;
}

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

/* Smaller, softer video play badge */
.video-icon {
    position: absolute;
    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;
    color: var(--primary-color) !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 empty promotion table that appears below Google results */
.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;
}

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

/* Kill ALL Bootstrap modal styling within google-modal */
.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;
}

.google-modal .modal-content {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.google-modal .modal-header,
.google-modal .modal-body,
.google-modal .modal-footer {
    display: none !important;
}

/* The actual preview container */
.google-ads-preview-main-container {
    background: var(--white) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08) !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Body content area where previews are injected */
.google-preview-body-content {
    padding: 20px 28px 24px !important;
    min-height: 200px !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* While only the loader is present, keep it centered */
.google-preview-body-content:has(> .loader:only-child) {
    justify-content: center !important;
}

/* Close button — inside container, top right */
.google-preview-close-btn {
    position: absolute !important;
    right: 16px !important;
    top: 16px !important;
    z-index: 10 !important;
    background: #f1f3f4 !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    color: #5f6368 !important;
    padding: 0 !important;
}

.google-preview-close-btn:hover {
    background: #dadce0 !important;
    color: #202124 !important;
}

.google-preview-close-btn i {
    /* Absolute centering: immune to stray flex items/whitespace */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* Loader centering */
.google-preview-body-content .loader {
    margin: auto !important;
}

/* Override preview-list styles injected inline from google_ad_preview.html */
.google-preview-body-content .preview-list {
    width: 100% !important;
}

.google-preview-body-content .preview-list-item {
    border-radius: 12px !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);
}


/* =====================================================================
   PEÇA RARA — project-specific adjustments (kept at the end of the file)
   ===================================================================== */

/* "Ver unidades" action button uses the filial hierarchy here (kumon used
   btn-regional). Same pastel + inverted-hover pattern. */
.btn-action-icon.btn-filial { background: #f0f9ff !important; color: #0284c7 !important; }
.btn-action-icon.btn-filial:hover { background: #0284c7 !important; color: white !important; }

/* BMD's .btn carries margin-right:1px — breaks the Sair/Filtros/card right-edge
   alignment (off by exactly 1px measured via getBoundingClientRect) */
.show-filter-btn {
    margin-right: 0 !important;
}

/* Hidden qtip bubbles still occupy layout (visibility:hidden keeps the 220px
   box) and stretch the page when the icon sits near the right edge — remove
   them from layout entirely when not shown. Redesign tooltips are instant,
   so losing the fade transition is intended. */
.qtip:not(:hover):not(:focus):before,
.qtip:not(:hover):not(:focus):after {
    display: none !important;
}

/* Form-field qtips in the right-most column: anchor the bubble by the right
   so it opens inward instead of crossing the viewport edge. */
.bucket-form .row > [class*="col-"]:last-child .qtip.tip-bottom:before {
    left: auto !important;
    right: -8px !important;
    transform: translate(0, calc(100% + 8px)) !important;
}
.bucket-form .row > [class*="col-"]:last-child .qtip.tip-bottom:after {
    left: auto !important;
    right: 0 !important;
    transform: translate(0, 0) !important;
}

/* Mobile: stacked form columns — the Materialize .row bottom margin (20px)
   stacks on top of each field's own 18px margin and makes the vertical
   rhythm uneven (measured 18/38/60 between consecutive fields). Let the
   field margins drive the rhythm. */
@media (max-width: 767px) {
    .bucket-form .briefing .row {
        margin-bottom: 0 !important;
    }
}

/* Legacy CSS forces white-space: nowrap on card dt labels, which cancels the
   overflow-wrap and makes long labels bleed over the column divider at
   tablet widths — let them wrap. */
.campaign-table dt {
    white-space: normal !important;
}

/* ============================================================
   Ajustes por paridade com kumon-marktech (referência mais recente)
   ============================================================ */

/* Coluna AÇÕES alinhada ao TOPO do card, como as demais colunas */
.btns-wrapper {
    align-self: flex-start !important;
    height: auto !important;
}

/* A coluna de ações é a última visível do card, mas costuma ser seguida
   por irmãos ocultos (.campaign-result, modais) — o :not(:last-child) do
   padrão lhe dava um divisor à direita sobrando. */
.campaign-table .row:not(.filter-section) > div.btns-wrapper:not(.modal):not(.campaign-result) {
    border-right: none !important;
}

/* Dados da mídia (título, meta, chips, status) centralizados na coluna —
   regra base .creative-info já centraliza H+V; aqui só a linha de meta */
.creative-info .creative-meta {
    justify-content: center !important;
}

/* Ícones de ação sempre quadrados 40x40: templates legados setam
   min-width:100px nas classes compartilhadas (btn-approve, btn-state,
   remove-keyword...) e min-width vence width — trava os dois limites. */
.btn-action-icon {
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
}

/* Materialize pinta QUALQUER <button> cru de teal (#2ab7a9) no :focus —
   verde fora da paleta. Neutraliza; cada componente define seus estados. */
button:focus {
    background-color: transparent;
}

/* Tooltips longos quebram em até 280px em vez de vazar da tela;
   curtos seguem em uma linha via max-content */
[data-tooltip]::after {
    white-space: normal;
    width: max-content;
    max-width: 280px;
    line-height: 1.45;
    text-align: center;
}

/* Seleção de endereço (address_fill/kml_fill): .image-access tem altura
   fixa de 290px mas o corpo (inputs + mapa de 250px) passa de 570px — o
   card overflow:hidden cortava o fim do mapa e o botão. Nos cards que
   contêm o mapa, deixa a coluna crescer na vertical. */
.wrap-login100:has(.location-picker) .image-access,
.wrap-login100:has(.location-picker) .login100-form,
.wrap-login100:has(.location-picker) {
    height: auto !important;
}

/* Modal "Copys personalizados": campos rotulados no padrão (label uppercase
   muted + valor em caixa suave estilo readonly) e aviso informativo com
   ícone em vez do texto vermelho legado. */
.copys-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
    width: 100%;
}
.copys-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.copys-value {
    background: #f8fafc;
    border: 1.5px solid #edf2f7;
    border-radius: 12px;
    padding: 10px 14px;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-main);
    min-height: 20px;
    word-break: break-word;
    white-space: pre-wrap;
}
.copys-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.45;
}
.copys-note .material-icons {
    font-size: 18px;
    color: var(--secondary-accent, #8DA9C2);
    flex-shrink: 0;
}

/* Grid de promoções/mídias (image-picker): nome com clamp de 3 linhas +
   reticências — o nome completo vai para o tooltip (title setado por JS
   após o init do picker). Evita legendas cortadas no meio pelo card. */
.image_picker_selector .thumbnail p {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    line-clamp: 3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    /* overflow:hidden corta na borda do PADDING — com padding-bottom a
       4ª linha aparecia pela fresta. Zera embaixo. */
    padding-bottom: 0 !important;
}

/* Tooltip instantâneo do padrão nos cards do picker: abre abaixo do card
   (acima seria cortado pelo topo do form). O vendor põe overflow:hidden no
   .thumbnail (e auto no ul) — clipava o balão; libera SÓ nos grids com
   data-tooltip (o strip rolável do Impulsionamento usa title nativo e não
   entra no :has). */
.image_picker_selector:has(.thumbnail[data-tooltip]) {
    overflow: visible !important;
}
.image_picker_selector .thumbnail[data-tooltip] {
    overflow: visible !important;
}
.image_picker_selector .thumbnail[data-tooltip]::after {
    bottom: auto;
    top: calc(100% + 9px);
    z-index: 50;
}

/* Strip horizontal de posts (Impulsionamento): scrollbar fina do padrão
   (mesma do obs-body) em vez da barra grossa nativa. */
ul.thumbnails.image_picker_selector {
    scrollbar-width: thin;
    scrollbar-color: #d7dce6 transparent;
    padding-bottom: 6px;
}
ul.thumbnails.image_picker_selector::-webkit-scrollbar {
    height: 6px;
}
ul.thumbnails.image_picker_selector::-webkit-scrollbar-track {
    background: transparent;
}
ul.thumbnails.image_picker_selector::-webkit-scrollbar-thumb {
    background: #d7dce6;
    border-radius: 6px;
}
ul.thumbnails.image_picker_selector::-webkit-scrollbar-thumb:hover {
    background: #b9c1d1;
}

/* Textareas no padrão dos inputs modernos (a regra base fixa 48px de
   altura para inputs — textarea precisa crescer) */
textarea.form-control.modern-input {
    height: auto !important;
    min-height: 96px !important;
    border-radius: 15px !important;
    padding: 12px 16px !important;
    resize: vertical;
    line-height: 1.5 !important;
}

/* Aviso em caixa (padrão OMO): fundo vermelho suave + borda-esquerda 4px
   vermelha + texto vermelho escuro. Usado nos avisos de Minhas mídias
   (formatos recomendados e limite de 5 mídias ativas). */
.upload-format-notice {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid var(--error);
    border-radius: 12px;
    color: #b91c1c;
    font-size: 0.88rem;
    line-height: 1.55;
    padding: 14px 16px;
    margin: 6px 0 14px;
}

/* Play badge sempre centrado na imagem: a tabela de resultados monta o
   wrapper via JS e o badge caía no canto inferior-esquerdo (dependia do
   flex do wrapper); e o box de 19px fixado no template esmagava o glyph
   de 40px. Centralização explícita por top/left/transform, box ajustado
   ao glyph — independe do display do wrapper. */
.video-wrapper {
    position: relative !important;
}
.video-icon {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Na tabela de resultados o <i> herda margin-right de `.campaign-table i`,
   alargando o box (45x40) e ovalando o círculo de radius 50%. */
.video-icon i {
    margin: 0 !important;
}