/* ── Animo Design System v3.0 — CSS Custom Properties ──── */
/* Duplicated from _variable.scss for runtime access.       */
/* SCSS compilation will eventually override these; until   */
/* then this block ensures CSS variables are available.     */
:root {
    /* Brand */
    --animo-slate-dark:  #2C3750;
    --animo-slate:       #3D4B6B;
    --animo-slate-mid:   #5A6B8C;
    --animo-slate-light: #8A9AB8;
    --animo-slate-bg:    #EDF0F5;
    --animo-lime:        #A8C83A;
    --animo-lime-dark:   #7A9420;
    --animo-lime-bg:     #F2F8E0;

    /* UI tokens */
    --animo-page-bg:     #F4F5F7;
    --animo-card-bg:     #FFFFFF;
    --animo-border:      #DDE1E9;
    --animo-border-hover:#C0C8D4;
    --animo-ink:         #1A2035;
    --animo-ink2:        #4A5568;
    --animo-ink3:        #8A95A8;

    /* Layout */
    --animo-header-height: 52px;
    --animo-sidebar-width: 200px;

    /* Sidebar — Option B (white brand + dark nav) */
    --animo-sb-bg:        #2C3750;
    --animo-sb-brand-bg:  #FFFFFF;
    --animo-sb-brand-txt: #2C3750;
    --animo-sb-brand-sub: #8A9AB8;
    --animo-sb-brand-bdr: #DDE1E9;
    --animo-sb-txt:       rgba(255,255,255,0.52);
    --animo-sb-txt-act:   #FFFFFF;
    --animo-sb-act-bg:    rgba(255,255,255,0.09);
    --animo-sb-sec:       rgba(255,255,255,0.28);
    --animo-sb-sub:       rgba(255,255,255,0.36);
    --animo-sb-sub-act:   rgba(255,255,255,0.92);
}

/* ── Animo DataTables Theme ─────────────────────────────── */
/* Built on datatables.net Bootstrap 5 integration.         */
/* All selectors scoped to .animo-table to avoid bleed.     */

table.dataTable.animo-table > thead > tr > th {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #FFFFFF !important;
    background: #2C3750 !important;
    border-top: none !important;
    border-bottom: none !important;
    padding: 8px 28px 8px 16px !important;
    white-space: nowrap !important;
}

table.dataTable.animo-table > thead > tr > th.sorting::after,
table.dataTable.animo-table > thead > tr > th.sorting_asc::after,
table.dataTable.animo-table > thead > tr > th.sorting_desc::after {
    color: #FFFFFF !important;
    opacity: 0.7 !important;
}

table.dataTable.animo-table > thead > tr > th.sorting_asc::after  { opacity: 1 !important; }
table.dataTable.animo-table > thead > tr > th.sorting_desc::after { opacity: 1 !important; }

table.dataTable.animo-table tbody td {
    font-weight: 400 !important;
    padding: 8px 16px !important;
}

table.dataTable.animo-table tr.odd {
    background-color: #F8F9FB !important;
}

table.dataTable.animo-table tr.even {
    background-color: #FFFFFF !important;
}

.animo-table tbody tr {
    transition: background 0.1s ease;
}

.animo-table tbody tr:hover td {
    background-color: #EDF0F5;
}

.animo-table tbody tr.selected td {
    background-color: rgba(61,75,107,0.12);
}

.animo-table tbody td {
    font-size: 0.875rem;
    color: #1E293B;
    padding: 12px 16px;
    vertical-align: middle;
    border-color: #F1F5F9;
}

/* Pagination — override main.css legacy DataTables styles */
.paging_simple_numbers.dataTables_paginate {
    background: transparent !important;
    padding: 0 !important;
}

.dataTables_wrapper .dataTables_paginate {
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: #3D4B6B;
    border-color: #3D4B6B;
}

.dataTables_wrapper .pagination .page-link {
    color: #3D4B6B;
}

.dataTables_wrapper .pagination .page-link:hover {
    color: #2C3750;
}

/* Fillow DataTables paginate_button overrides — prev/next arrows + all buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    color: #3D4B6B !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
    color: #FFFFFF !important;
    background: #3D4B6B !important;
}
.dataTables_wrapper .dataTables_paginate span .paginate_button {
    color: #3D4B6B !important;
}
.dataTables_wrapper .dataTables_paginate span .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate span .paginate_button.current {
    color: #FFFFFF !important;
    background: #3D4B6B !important;
}

/* Fix prev/next arrows taller than number buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    height: auto !important;
    line-height: 24px !important;
}

/* Fix length select arrow overlap from main.css */
.dataTables_wrapper .dataTables_length select.form-select {
    width: auto !important;
    display: inline-block !important;
    padding-right: 2rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Processing overlay */
.dataTables_wrapper .dataTables_processing {
    background: rgba(255,255,255,0.9);
    border: 1px solid var(--animo-border, #DDE1E9);
    border-radius: 8px;
    color: var(--animo-slate, #3D4B6B);
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Info + length text */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label {
    font-size: 0.8rem;
    color: #64748B;
}

/* Length select */
.dataTables_wrapper .dataTables_length select {
    border-color: #E2E8F0;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #1E293B;
}

/* Empty state */
.animo-table tbody td.dataTables_empty {
    text-align: center;
    padding: 48px 24px;
    color: #94A3B8;
    font-style: italic;
}

/* Status badge helpers (reused across all tables) */
.badge-active   { background-color: #DCFCE7; color: #16A34A; }
.badge-warning  { background-color: #FEF3C7; color: #D97706; }
.badge-error    { background-color: #FEE2E2; color: #DC2626; }
.badge-inactive { background-color: #F1F5F9; color: #64748B; }
.badge-running  { background-color: rgba(61,75,107,0.06); color: #3D4B6B; }

/* Badge sizing consistency */
.badge-active, .badge-warning, .badge-error, .badge-inactive, .badge-running {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3em 0.65em;
    border-radius: 4px;
}

/* Badge sizing consistency */
.badge-active, .badge-warning, .badge-error, .badge-inactive, .badge-running {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3em 0.65em;
    border-radius: 4px;
}

/* ── AnimoSelectTable slide-in panel ─────────────────────── */
.animo-select-panel {
    position:   fixed;
    top:        0;
    right:      0;
    width:      100%;
    height:     100%;
    background: #FFFFFF;
    z-index:    1050;
    display:    flex;
    flex-direction: column;
    transform:  translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
}

.animo-select-panel.open {
    transform: translateX(0);
}

.animo-select-panel-header {
    display:     flex;
    align-items: center;
    padding:     16px 24px;
    border-bottom: 1px solid #E2E8F0;
    background:  #F8FAFC;
    flex-shrink: 0;
}

.animo-select-panel-body {
    flex:       1;
    overflow-y: auto;
    padding:    24px;
}

.animo-select-panel-footer {
    display:     flex;
    align-items: center;
    justify-content: flex-end;
    padding:     16px 24px;
    border-top:  1px solid #E2E8F0;
    background:  #F8FAFC;
    flex-shrink: 0;
}

/* Prevent body scroll when panel is open */
body.animo-panel-open { overflow: hidden; }

/* ── Global DataTable Theme ─────────────────────────────── */
/* Applies to ALL DataTables (not just .animo-table)         */

table.dataTable > thead > tr > th {
    border-bottom-color: #2C3750 !important;
}

table.dataTable > thead > tr > th.sorting::after,
table.dataTable > thead > tr > th.sorting_asc::after,
table.dataTable > thead > tr > th.sorting_desc::after {
    color: #3D4B6B !important;
}

table.dataTable tbody tr:hover td {
    background-color: #EDF0F5 !important;
}

/* Global card enhancement for content pages */
.content-body .card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.content-body .card .card-header {
    border-bottom-color: #f0f0f0;
    border-radius: 1rem 1rem 0 0;
}

.content-body .card .card-body {
    border-radius: 0 0 1rem 1rem;
}

/* DataTable + global pagination — override all Fillow purple */
.dataTables_wrapper .pagination .page-item.active .page-link,
.pagination .page-item.active .page-link {
    background-color: #3D4B6B !important;
    border-color: #3D4B6B !important;
    color: #FFFFFF !important;
}

.dataTables_wrapper .pagination .page-link,
.pagination .page-link {
    color: #3D4B6B !important;
}

.dataTables_wrapper .pagination .page-link:hover,
.pagination .page-link:hover,
.pagination .page-item .page-link:hover {
    color: #FFFFFF !important;
    background-color: #3D4B6B !important;
    border-color: #3D4B6B !important;
}

/* Primary button — tinted lime with strong border */
.btn-primary,
[data-primary] .btn-primary {
    background-color: rgba(168, 200, 58, 0.12) !important;
    border: 1.5px solid #A8C83A !important;
    color: #5A7A14 !important;
    font-weight: 600;
}

.btn-primary:hover, .btn-primary:focus,
[data-primary] .btn-primary:hover, [data-primary] .btn-primary:focus {
    background-color: rgba(168, 200, 58, 0.22) !important;
    border-color: #7A9420 !important;
    color: #5A7A14 !important;
}

/* ── Global Bootstrap form control overrides ──────────────── */
/* Override compiled main.css $primary (#886CC0) for all      */
/* checkboxes, radios, switches, focus rings, etc.            */
.form-check-input:checked {
    background-color: var(--animo-lime, #A8C83A) !important;
    border-color: var(--animo-lime, #A8C83A) !important;
}
.form-check-input:focus {
    border-color: var(--animo-lime, #A8C83A) !important;
    box-shadow: 0 0 0 0.25rem rgba(168, 200, 58, 0.25) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--animo-slate, #3D4B6B) !important;
    box-shadow: 0 0 0 0.25rem rgba(61, 75, 107, 0.15) !important;
}
.form-switch .form-check-input:checked {
    background-color: var(--animo-lime, #A8C83A) !important;
}

/* Override any [data-primary] checkbox theming from Fillow */
[data-primary] .form-check-input:checked {
    background-color: var(--animo-lime, #A8C83A) !important;
    border-color: var(--animo-lime, #A8C83A) !important;
}

/* Links — override compiled $link-color */
a { color: var(--animo-slate, #3D4B6B); }
a:hover { color: var(--animo-slate-dark, #2C3750); }

/* ── Bootstrap utility color overrides ─────────────────── */
/* Override compiled main.css $primary (#886CC0) utilities  */
.text-primary { color: var(--animo-slate, #3D4B6B) !important; }
.bg-primary { background-color: var(--animo-slate, #3D4B6B) !important; }
.border-primary { border-color: var(--animo-slate, #3D4B6B) !important; }
.btn-outline-primary {
    color: var(--animo-slate, #3D4B6B) !important;
    border-color: var(--animo-slate, #3D4B6B) !important;
}
.btn-outline-primary:hover {
    background-color: var(--animo-slate, #3D4B6B) !important;
    color: #FFFFFF !important;
}
/* Override --primary CSS variable used by Fillow template.
   main.css sets --primary on :root AND on [data-primary=color_X] selectors.
   settings.js applies data-primary="color_1" on <body>, so the attribute
   selector wins over :root. We must override BOTH levels. */
:root,
[data-primary],
[data-primary="color_1"],
[data-primary="color_2"],
[data-primary="color_3"],
[data-primary="color_4"],
[data-primary="color_5"],
[data-primary="color_6"],
[data-primary="color_7"],
[data-primary="color_8"],
[data-primary="color_9"],
[data-primary="color_10"],
[data-primary="color_11"],
[data-primary="color_12"],
[data-primary="color_13"],
[data-primary="color_14"],
[data-primary="color_15"] {
    --primary: #3D4B6B !important;
    --primary-hover: #2C3750 !important;
    --primary-light: #5A6B8C !important;
    --primary-dark: #1A2035 !important;
    --rgba-primary-1: rgba(61, 75, 107, 0.1) !important;
    --rgba-primary-2: rgba(61, 75, 107, 0.2) !important;
    --rgba-primary-3: rgba(61, 75, 107, 0.3) !important;
    --rgba-primary-4: rgba(61, 75, 107, 0.4) !important;
    --rgba-primary-5: rgba(61, 75, 107, 0.5) !important;
    --rgba-primary-6: rgba(61, 75, 107, 0.6) !important;
    --rgba-primary-7: rgba(61, 75, 107, 0.7) !important;
    --rgba-primary-8: rgba(61, 75, 107, 0.8) !important;
    --rgba-primary-9: rgba(61, 75, 107, 0.9) !important;
    --bs-primary: #3D4B6B !important;
}

/* Secondary action buttons — tinted slate (Option 4 Hybrid) */
.btn-animo-secondary {
    background: rgba(61,75,107,0.07);
    color: #3D4B6B;
    border: 1px solid rgba(61,75,107,0.18);
    border-radius: 6px;
    font-weight: 500;
}
.btn-animo-secondary:hover {
    background: rgba(61,75,107,0.12);
    color: #3D4B6B;
}

/* Danger button — tinted red (Option 4 Hybrid) */
.btn-animo-danger {
    background: rgba(220,38,38,0.05);
    color: #DC2626;
    border: 1px solid rgba(220,38,38,0.18);
    border-radius: 6px;
    font-weight: 500;
}
.btn-animo-danger:hover {
    background: rgba(220,38,38,0.10);
    color: #DC2626;
}

/* ── Filter Bar — uniform controls ─────────────────────── */
.filter-bar {
    margin-bottom: 0.5rem !important;
    height: auto !important;
}

.filter-bar .card-body {
    padding: 0.75rem 1rem !important;
}

.filter-bar .filter-label {
    font-size: 0.65rem !important;
    color: var(--animo-ink3, #8A95A8) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 0.2rem !important;
    font-weight: 700 !important;
    display: block !important;
}

.filter-bar .filter-input,
.filter-bar .form-control,
.filter-bar .form-select,
.filter-bar .bootstrap-select .btn {
    height: 38px !important;
    font-size: 0.8rem !important;
    border: 1px solid #ddd !important;
    border-radius: 0.5rem !important;
    color: #333 !important;
    background-color: #fff !important;
    padding: 0.35rem 0.75rem !important;
}

/* ── Chart Stats Bar (mini KPI row inside chart cards) ──── */
.chart-stats-bar {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.chart-stat {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 0.375rem;
    flex: 1;
    min-width: 0;
}

.chart-stat-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
    color: rgba(0,0,0,0.5);
    white-space: nowrap;
}

.chart-stat-value {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(0,0,0,0.7);
    white-space: nowrap;
}

.chart-stat-total {
    background: rgba(61,75,107,0.08) !important;
    margin-left: auto;
    flex: 0 0 auto;
}

.chart-stat-total .chart-stat-label { color: var(--animo-slate, #3D4B6B); }
.chart-stat-total .chart-stat-value { color: var(--animo-ink, #1A2035); }

/* Standard chart total — badge-sigma style (all dashboards) */
.card--chart .chart-total {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #3D4B6B !important;
    background: #EEF0FA;
    padding: 2px 7px;
    border-radius: 4px;
}

.card--chart .chart-total-label {
    font-weight: 400 !important;
}

/* Avg badge — slate-mid with border */
.card--chart .chart-total.chart-total--avg {
    color: #5A6B8C !important;
    background: #F4F5F7;
    border: 1px solid #DDE1E9;
}
.card--chart .chart-total.chart-total--avg *:not(.chart-trend-badge) {
    color: #5A6B8C !important;
}

.card--chart .chart-avg-label {
    font-weight: 400 !important;
    color: #5A6B8C !important;
}

/* Always hide the native <select> inside bootstrap-select */
.filter-bar select.selectpicker {
    display: none !important;
    position: absolute !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

.filter-bar .bootstrap-select .btn {
    display: flex !important;
    align-items: center !important;
}

/* Hide native select when bootstrap-select is active */
.filter-bar .bootstrap-select select.filter-input,
.filter-bar .bootstrap-select select.selectpicker {
    display: none !important;
}

/* Select All / Deselect All on same line */
.filter-bar .bootstrap-select .bs-actionsbox .btn-group {
    display: flex !important;
    gap: 0.5rem;
}

.filter-bar .bootstrap-select .bs-actionsbox .btn-group .btn {
    flex: 1 !important;
    height: 30px !important;
    font-size: 0.75rem !important;
    border: 1px solid #ddd !important;
    background: #f8f8f8 !important;
    color: #555 !important;
    border-radius: 0.375rem !important;
    padding: 0 !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.filter-bar .bootstrap-select .bs-actionsbox .btn-group .btn:hover {
    background: #eee !important;
}

/* Force uniform text color in bootstrap-select button */
.filter-bar .bootstrap-select .filter-option,
.filter-bar .bootstrap-select .filter-option-inner,
.filter-bar .bootstrap-select .filter-option-inner-inner {
    color: #333 !important;
}

.filter-bar .btn-load-data {
    height: 38px !important;
    background: rgba(168, 200, 58, 0.12) !important;
    border: 1.5px solid #A8C83A !important;
    color: #5A7A14 !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 0.35rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
}

.filter-bar .btn-load-data:hover {
    background: rgba(168, 200, 58, 0.22) !important;
    border-color: #7A9420 !important;
}

.filter-bar .btn-load-data i {
    margin: 0 !important;
}

/* ── Sidebar — Animo design system (CSS variable driven) ── */
/* Option C: white sidebar with dark text (Animo color system) */
:root {
    --animo-sb-bg:        #FFFFFF;
    --animo-sb-brand-bg:  #FFFFFF;
    --animo-sb-brand-txt: #2C3750;
    --animo-sb-brand-sub: #8A9AB8;
    --animo-sb-brand-bdr: #DDE1E9;
    --animo-sb-txt:       #5A6B8C;
    --animo-sb-txt-act:   #3D4B6B;
    --animo-sb-act-bg:    #EDF0F5;
    --animo-sb-sec:       #8A95A8;
    --animo-sb-sub:       #8A95A8;
    --animo-sb-sub-act:   #3D4B6B;
}
.dlabnav {
    background: var(--animo-sb-bg) !important;
    border-right: 1px solid var(--animo-border, #DDE1E9) !important;
}

/* Nav items — default state */
.dlabnav .metismenu > li > a {
    font-size: 0.9375rem !important;
    color: var(--animo-sb-txt) !important;
    padding: 13px 24px !important;
}
.dlabnav .metismenu > li > a span {
    color: inherit !important;
}
.dlabnav .metismenu > li > a i,
.dlabnav .metismenu > li > a svg {
    color: var(--animo-sb-txt) !important;
}

/* Nav items — active/hover */
.dlabnav .metismenu > li.mm-active > a,
.dlabnav .metismenu > li:hover > a,
.dlabnav .metismenu > li:focus > a {
    color: var(--animo-sb-txt-act) !important;
    background: var(--animo-sb-act-bg) !important;
    border-left: 2px solid var(--animo-lime, #A8C83A) !important;
}

.dlabnav .metismenu > li.mm-active > a i,
.dlabnav .metismenu > li:hover > a i,
.dlabnav .metismenu > li.mm-active > a svg,
.dlabnav .metismenu > li:hover > a svg {
    color: var(--animo-sb-txt-act) !important;
    fill: var(--animo-sb-txt-act) !important;
}

/* Section labels */
.dlabnav .menu-title,
.dlabnav .nav-label {
    color: var(--animo-sb-sec) !important;
    border-top: none !important;
}

/* Sub-items */
.dlabnav .metismenu ul a {
    font-size: 0.85rem !important;
    color: var(--animo-sb-sub) !important;
}
.dlabnav .metismenu ul a.mm-active,
.dlabnav .metismenu ul a:hover,
.dlabnav .metismenu ul a:focus {
    color: var(--animo-sb-sub-act) !important;
}
.dlabnav .metismenu ul li.mm-active > a,
.dlabnav .metismenu ul li:hover > a {
    color: var(--animo-sb-sub-act) !important;
}

/* Arrows */
.dlabnav .metismenu > li.mm-active > a::after,
.dlabnav .metismenu > li:hover > a::after {
    border-color: var(--animo-sb-txt-act) !important;
}
.dlabnav .metismenu > li > a::after {
    border-color: var(--animo-sb-txt) !important;
}

.dlabnav .metismenu a::before {
    background: var(--animo-lime, #A8C83A) !important;
}

/* Override template data-primary color variables */
[data-primary] .dlabnav .metismenu > li.mm-active > a,
[data-primary] .dlabnav .metismenu > li:hover > a {
    color: var(--animo-sb-txt-act) !important;
}
[data-primary] .dlabnav .metismenu ul a.mm-active,
[data-primary] .dlabnav .metismenu ul a:hover {
    color: var(--animo-sb-sub-act) !important;
}
[data-primary] .dlabnav .metismenu > li.mm-active > a i,
[data-primary] .dlabnav .metismenu > li:hover > a i {
    color: var(--animo-sb-txt-act) !important;
}

/* ── Nav header (brand block) — white, shared height ─────── */
.nav-header {
    height: var(--animo-header-height, 52px) !important;
    background: var(--animo-sb-brand-bg, #FFFFFF) !important;
    border-bottom: 1px solid var(--animo-sb-brand-bdr, #DDE1E9) !important;
}
.brand-title h2,
.brand-title {
    color: var(--animo-sb-brand-txt, #2C3750) !important;
}
.brand-sub-title {
    color: var(--animo-sb-brand-sub, #8A9AB8) !important;
}

/* ── Topbar — white, shared height ───────────────────────── */
.header {
    height: var(--animo-header-height, 52px) !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--animo-border, #DDE1E9) !important;
}

/* Header page title */
.header-left .dashboard_bar {
    color: var(--animo-ink, #1A2035) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* Campaigns dropdown items — match DM Sans */
.filter-bar .bootstrap-select .dropdown-menu .dropdown-item,
.filter-bar .bootstrap-select .dropdown-menu li a,
.filter-bar .bootstrap-select .dropdown-menu li a span.text {
    font-weight: 400 !important;
    font-size: 0.8rem !important;
    font-family: 'DM Sans', sans-serif !important;
    color: var(--animo-ink, #1A2035) !important;
}

.filter-bar .bootstrap-select .dropdown-menu .bs-searchbox .form-control {
    font-size: 0.8rem !important;
    font-family: 'DM Sans', sans-serif !important;
}

/* Add button on CRUD pages */
.text-success i.fa-plus-square {
    color: var(--animo-lime, #A8C83A) !important;
}

.text-success i.fa-plus-square:hover {
    color: var(--animo-lime-dark, #7A9420) !important;
}

/* ── Tighter card spacing on dashboard/optimization pages ── */
.media-hub-card {
    height: auto !important;
    margin-bottom: 0.5rem !important;
}
.media-hub-card--placeholder {
    pointer-events: none;
    cursor: default;
}

/* ── Chart Container — responsive ───────────────────────── */
/* Equal-height cards: flex columns stretch all cards in a row to match the tallest */
.content-body .row [class*="col-xl-6"] {
    display: flex;
}
.card--chart {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    margin-bottom: 0.35rem !important;
}
.card--chart .card-body {
    flex: 1;
}

.card--chart .chart-container {
    position: relative;
    width: 100%;
}

/* Chart.js responsive — container drives size, not canvas */
.card--chart .chart-container {
    overflow: hidden;
}

/* Constrain doughnut/pie charts to match line/bar chart height */
.card--chart.card--pie .chart-container {
    max-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card--chart.card--pie .chart-container canvas {
    max-height: 180px !important;
}

.card--chart .card-body {
    padding: 0.5rem 1rem 0.75rem !important;
}

/* Empty chart — grayed out */
.card--chart.chart-empty {
    pointer-events: none;
    overflow: visible;
}
.card--chart.chart-empty .card-header {
    opacity: 0.6;
}
.card--chart.chart-empty .chart-container {
    display: none !important;
}
.card--chart.chart-empty .card-body {
    min-height: 160px;
}

/* No data overlay */
.chart-no-data-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background: rgba(255,255,255,0.95);
    border-radius: 0 0 1rem 1rem;
}
.chart-no-data-overlay .no-data-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: #a0a0b8;
    font-size: 0.8rem;
    font-weight: 500;
}
.chart-no-data-overlay .no-data-content i {
    font-size: 1.5rem;
    opacity: 0.5;
}

.card--chart .card-header {
    padding: 0.5rem 1rem 0 !important;
    border-bottom: none !important;
}

.card--chart .card-title {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #6e6e8a !important;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    position: relative;
    padding-left: 0.6rem;
}
.card--chart .card-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 70%;
    border-radius: 2px;
    background: var(--animo-slate, #3D4B6B);
}

/* ── KPI Strip — top-border accent, no icons ─────────────── */
.animo-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--animo-border, #DDE1E9);
    border-bottom: 1px solid var(--animo-border, #DDE1E9);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.animo-kpi-cell {
    background: var(--animo-card-bg, #FFFFFF);
    padding: 12px 16px;
    position: relative;
}
.animo-kpi-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--animo-ink3, #8A95A8);
    margin-bottom: 4px;
}
.animo-kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--animo-ink, #1A2035);
    letter-spacing: -0.5px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.animo-kpi-value--sm {
    font-size: 15px;
}
.animo-kpi-sub {
    font-size: 10px;
    color: var(--animo-ink3, #8A95A8);
    margin-top: 3px;
}
.animo-kpi-info {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.55rem;
    color: #bbb;
    cursor: help;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.animo-kpi-info:hover {
    opacity: 1;
    color: var(--animo-slate, #3D4B6B);
}

.card--chart .chart-total {
    font-size: 0.75rem !important;
}

/* Tighten chart row gaps */
.content-body .row.g-3 {
    --bs-gutter-y: 0.5rem;
    --bs-gutter-x: 0.75rem;
}

/* ── KPI Card — single-line colored cards ──────────────── */
.card--kpi {
    border: none !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
    height: auto !important;
}

.card--kpi .card-body {
    padding: 0.65rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.card--kpi .kpi-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.card--kpi .kpi-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    font-weight: 500;
}

.card--kpi .kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.card--kpi .kpi-trend {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    margin-left: auto;
}

.card--kpi .kpi-trend.trend-up   { background: rgba(9,189,60,0.15); color: #09BD3C; }
.card--kpi .kpi-trend.trend-down { background: rgba(252,46,83,0.15); color: #FC2E53; }
.card--kpi .kpi-trend.trend-flat { color: rgba(0,0,0,0.3); }

/* Color variants (legacy — kept for backward compat) */
.card--kpi.kpi-primary {
    background: rgba(61,75,107,0.06) !important;
}
.card--kpi.kpi-primary .kpi-icon  { background: rgba(61,75,107,0.12); color: #3D4B6B; }
.card--kpi.kpi-primary .kpi-label { color: #3D4B6B; }
.card--kpi.kpi-primary .kpi-value { color: #1A2035; }

.card--kpi.kpi-success {
    background: rgba(9,189,60,0.06) !important;
}
.card--kpi.kpi-success .kpi-icon  { background: rgba(9,189,60,0.12); color: #09BD3C; }
.card--kpi.kpi-success .kpi-label { color: #07912e; }
.card--kpi.kpi-success .kpi-value { color: #046020; }

.card--kpi.kpi-info {
    background: rgba(252,46,83,0.06) !important;
}
.card--kpi.kpi-info .kpi-icon  { background: rgba(252,46,83,0.12); color: #FC2E53; }
.card--kpi.kpi-info .kpi-label { color: #c42040; }
.card--kpi.kpi-info .kpi-value { color: #8b1630; }

.card--kpi.kpi-warning {
    background: rgba(255,207,109,0.10) !important;
}
.card--kpi.kpi-warning .kpi-icon  { background: rgba(255,207,109,0.25); color: #E8A500; }
.card--kpi.kpi-warning .kpi-label { color: #b38300; }
.card--kpi.kpi-warning .kpi-value { color: #7a5a00; }

.card--kpi.kpi-danger {
    background: rgba(232,99,107,0.10) !important;
}
.card--kpi.kpi-danger .kpi-icon  { background: rgba(232,99,107,0.20); color: #E8636B; }
.card--kpi.kpi-danger .kpi-label { color: #B84D54; }
.card--kpi.kpi-danger .kpi-value { color: #8B3A40; }

.card--kpi.kpi-secondary {
    background: rgba(91,155,213,0.10) !important;
}
.card--kpi.kpi-secondary .kpi-icon  { background: rgba(91,155,213,0.20); color: #5B9BD5; }
.card--kpi.kpi-secondary .kpi-label { color: #4A7DAA; }
.card--kpi.kpi-secondary .kpi-value { color: #365D80; }

/* KPI info icon */
.card--kpi .kpi-info-icon {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.6rem;
    color: #bbb;
    cursor: help;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.card--kpi .kpi-info-icon:hover { opacity: 1; color: var(--animo-slate, #3D4B6B); }

/* Chart info icon */
.chart-info-icon {
    font-size: 0.65rem;
    color: var(--animo-slate-light, #8A9AB8);
    cursor: help;
    margin-left: 0.4rem;
    opacity: 0.6;
    transition: opacity 0.2s, color 0.15s;
}
.chart-info-icon:hover { opacity: 1; color: var(--animo-slate, #3D4B6B); }

/* ══════════════════════════════════════════════════════════════════════════
   Campaign Timeline + Performance — unified table
   ══════════════════════════════════════════════════════════════════════════ */
.campaign-timeline-grid {
    font-size: 11px;
    color: #1A2035;
}
.cpt-header {
    background: linear-gradient(135deg, #2C3750 0%, #3D4B6B 100%);
}
.cpt-header th {
    color: rgba(255,255,255,0.85);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 6px;
    border-bottom: 2px solid #A8C83A;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 3;
}
.cpt-sticky {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    border-right: 1px solid #DDE1E9;
    padding: 6px 8px !important;
    white-space: nowrap;
}
.cpt-header .cpt-sticky {
    background: #2C3750;
    z-index: 4;
}
.campaign-timeline-grid tbody tr {
    transition: background 0.12s ease;
}
.campaign-timeline-grid tbody tr:nth-child(even) .cpt-sticky,
.campaign-timeline-grid tbody tr:nth-child(even) .cpt-data-cell {
    background: #FAFBFC;
}
.campaign-timeline-grid tbody tr:hover .cpt-sticky,
.campaign-timeline-grid tbody tr:hover .cpt-data-cell,
.campaign-timeline-grid tbody tr:hover .cpt-month-cell {
    background: #EDF0F5 !important;
}
.cpt-data-cell {
    padding: 6px 6px;
    border-bottom: 1px solid #EDF0F5;
    vertical-align: middle;
    background: #fff;
}
.cpt-month-cell {
    text-align: center;
    padding: 4px 1px;
    border: 1px solid #f0f0f0;
    vertical-align: middle;
    font-size: 10px;
}
.cpt-overlap-row td {
    border-top: 2px solid #DDE1E9;
    padding: 4px 2px;
    font-size: 10px;
}
.cpt-overlap-row .cpt-sticky {
    background: #FAFBFC;
    font-weight: 600;
    font-size: 10px;
}

/* Name cell */
.cpt-name-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 11px;
}
.cpt-status {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cpt-campaign-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* Months bar */
.cpt-months-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}
.cpt-months-num {
    font-weight: 700;
    font-size: 12px;
    min-width: 16px;
    color: #1A2035;
}
.cpt-months-bar {
    flex: 1;
    height: 3px;
    background: #EDF0F5;
    border-radius: 2px;
    overflow: hidden;
    min-width: 24px;
}
.cpt-months-fill {
    height: 100%;
    background: linear-gradient(90deg, #A8C83A, #7A9420);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* Media dots */
.cpt-media-dots {
    display: flex;
    gap: 3px;
    align-items: center;
}
.cpt-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
    cursor: default;
}
.cpt-dot:hover {
    transform: scale(1.3);
}

/* Spend */
.cpt-spend-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.cpt-spend-val {
    font-weight: 600;
    font-size: 11px;
    color: #1A2035;
}
.cpt-spend-bar {
    width: 100%;
    height: 2px;
    background: #EDF0F5;
    border-radius: 1px;
    overflow: hidden;
}
.cpt-spend-fill {
    height: 100%;
    background: linear-gradient(90deg, #3D4B6B, #5A6B8C);
    border-radius: 1px;
    transition: width 0.4s ease;
}

/* Cost */
.cpt-cost-cell {
    text-align: right;
    font-weight: 600;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: #4A5568;
}

/* Badges */
.cpt-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.cpt-badge-good { background: rgba(22,163,74,0.1); color: #15803D; }
.cpt-badge-avg  { background: rgba(37,99,235,0.1); color: #1D4ED8; }
.cpt-badge-bad  { background: rgba(220,38,38,0.1); color: #B91C1C; }
.cpt-badge-none { background: #F4F5F7; color: #94A3B8; }

/* ── Media Planner — Cancel / Update Buttons ───────────── */
.btn-mp-cancel {
    font-size: 11px;
    font-weight: 600;
    color: #5A6B8C;
    background: transparent;
    border: 1px solid #DDE1E9;
    border-radius: 6px;
    padding: 8px 24px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-mp-cancel:hover {
    background: #EDF0F5;
    border-color: #C0C8D4;
    color: #3D4B6B;
}
.btn-mp-update {
    font-size: 11px;
    font-weight: 700;
    color: #2C3750;
    background: #A8C83A;
    border: none;
    border-radius: 6px;
    padding: 8px 24px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-mp-update:hover {
    background: #7A9420;
    color: #FFFFFF;
}

/* ── Media Planner — Setup Table Styling ───────────────── */
.mp-setup-table > thead > tr > th {
    background: #2C3750 !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    border-color: #3D4B6B !important;
}
.mp-setup-table > tbody > tr:nth-child(odd) {
    background: #F8F9FB;
}
.mp-setup-table > tbody > tr:nth-child(even) {
    background: #FFFFFF;
}
.mp-setup-table > tbody > tr:hover {
    background: #EDF0F5 !important;
}

/* ── Media Planner — Media Type Pill Buttons ───────────── */
.animo-media-btn {
    font-size: 11px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
    background: transparent;
    color: #8A95A8;
    border: 1px solid #DDE1E9;
    white-space: nowrap;
}
.animo-media-btn:hover {
    background: #F4F5F7;
    color: #5A6B8C;
}
.animo-media-btn.active {
    background: #3D4B6B;
    color: #FFFFFF;
    border: none;
}
.animo-media-btn.active:hover {
    background: #2C3750;
}
.animo-media-dot {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    flex-shrink: 0;
    display: inline-block;
}

/* ── Media Planner — Row Selection Styling ─────────────── */
.mp-setup-table > tbody > tr.mp-row-selected {
    background: #FFFFFF !important;
    border-left: 3px solid var(--mp-media-color, #3D4B6B);
}
.mp-setup-table > tbody > tr.mp-row-selected td:first-child {
    padding-left: 9px;
}
.mp-setup-table > tbody > tr.mp-row-selected td {
    opacity: 1;
}
.mp-setup-table > tbody > tr.mp-row-unselected {
    background: #F8F9FB !important;
    border-left: 3px solid transparent;
}
.mp-setup-table > tbody > tr.mp-row-unselected td {
    opacity: 0.5;
}
.mp-setup-table > tbody > tr.mp-row-unselected:hover td {
    opacity: 0.75;
}
.mp-selection-counter {
    font-size: 11px;
    font-weight: 600;
    color: #5A6B8C;
}

/* ── Media Planner — Breadcrumb + Tab Navigation ──────── */
.mp-breadcrumb {
    font-size: 11px;
    color: #8A95A8;
    padding: 8px 0 4px;
}
.mp-breadcrumb a {
    color: #5A6B8C;
    text-decoration: none;
}
.mp-breadcrumb a:hover {
    color: #3D4B6B;
    text-decoration: underline;
}
.mp-breadcrumb .mp-breadcrumb-sep {
    margin: 0 6px;
    color: #C0C8D4;
}
.mp-breadcrumb .mp-breadcrumb-current {
    font-weight: 700;
    color: #1A2035;
}
.mp-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #DDE1E9;
    margin-bottom: 12px;
}
.mp-tabs a {
    font-size: 11px;
    font-weight: 600;
    color: #8A95A8;
    text-decoration: none;
    padding: 8px 14px;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.mp-tabs a:hover {
    color: #3D4B6B;
}
.mp-tabs a.mp-tab-active {
    color: #1A2035;
    border-bottom-color: var(--mp-tab-color, #3D4B6B);
}

/* ── Media Planner — Filter Bar ────────────────────────── */
.mp-filter-bar .form-label {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #8A95A8 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.mp-filter-bar .form-control,
.mp-filter-bar select.form-control {
    height: 26px;
    border: 1px solid #DDE1E9;
    border-radius: 5px;
    font-size: 10px;
    padding: 0 8px;
}

/* ── Media Planner — Sum/Total Badge ──────────────────── */
.badge-mp-sum {
    background: #EEF0FA !important;
    color: #3D4B6B !important;
    font-weight: 700;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    border: none;
}