/* =====================================================================
   Meta Expenses theme
   Design system taken from the Meta Reporting app (assets/app-style.css):
   Inter 14px, ink text, blue accent, white panels with soft borders,
   tinted fields, blue-grey table headers, pills, light dialogs.
   Colours are the --mr-* tokens below; change them there.
   ===================================================================== */

/* ---------- 1) Tokens ---------- */
html[data-skin][data-bs-theme="light"],
html[data-skin]:not([data-bs-theme]) {
    --mr-bg: #EEF1F5;
    --mr-panel: #FFFFFF;
    --mr-ink: #000000;   /* as Banks (--ink) */
    --mr-ink-2: #3A4456;
    --mr-muted: #5E6878;
    --mr-line: #D8DEE7;
    --mr-line-soft: #E4E8EE;
    --mr-head-bg: #F6F8FB;
    --mr-row-hover: #F6F9FD;
    --mr-hover: #F4F7FB;
    --mr-field-bg: #b2cdef25;
    --mr-field-line: #E4E8EE;
    --mr-field-ink: #172031;
    --mr-field-icon: #8A94A6;
    --mr-field-hover: #b2cdef25;
    --mr-field-line-hover: #C3D3E8;
    --mr-field-focus: #FFFFFF;
    --mr-field-line-focus: #B9C6D8;
    --mr-field-ring: rgba(20, 87, 168, 0.08);
    --mr-field-placeholder: #8A94A6;
    --mr-footer-bg: #FAFBFC;
    --mr-blue: #1457A8;
    --mr-blue-hover: #0F4A92;
    --mr-blue-soft: #E3ECF8;
    --mr-green: #1E7F4F;
    --mr-green-soft: #DDF1E5;
    --mr-amber: #A86A00;
    --mr-amber-soft: #FBEFD5;
    --mr-red: #B3261E;
    --mr-red-soft: #F9DEDC;
    --mr-teal: #3E7C8C;
    --mr-purple: #6E56CF;
    --mr-pink: #D6409F;
    --mr-grey: #6B7585;
    --mr-grey-soft: #ECEEF1;
    --mr-shadow: 0 6px 20px rgba(23, 32, 49, 0.12);
}

html[data-skin][data-bs-theme="dark"] {
    --mr-bg: #12161f;
    --mr-panel: #1a202b;
    --mr-ink: #e6eaf1;
    --mr-ink-2: #c4ccd8;
    --mr-muted: #9ba6b8;
    --mr-line: #2c3442;
    --mr-line-soft: #2c3442;
    --mr-head-bg: #202836;
    --mr-row-hover: #222a38;
    --mr-hover: #222a38;
    --mr-field-bg: #1f2a3a;
    --mr-field-line: #2f3b4d;
    --mr-field-ink: #e6eaf1;
    --mr-field-icon: #9ba6b8;
    --mr-field-hover: #1f2a3a;
    --mr-field-line-hover: #45556d;
    --mr-field-focus: #1a202b;
    --mr-field-line-focus: #5b6f8c;
    --mr-field-ring: rgba(91, 147, 224, 0.18);
    --mr-field-placeholder: #8a94a6;
    --mr-footer-bg: #1e2531;
    --mr-blue: #5b93e0;
    --mr-blue-hover: #77a7ea;
    --mr-blue-soft: rgba(91, 147, 224, 0.16);
    --mr-green: #4cbf86;
    --mr-green-soft: rgba(76, 191, 134, 0.15);
    --mr-amber: #e0a53a;
    --mr-amber-soft: rgba(224, 165, 58, 0.15);
    --mr-red: #ef7a72;
    --mr-red-soft: rgba(239, 122, 114, 0.15);
    --mr-teal: #6bbccc;
    --mr-purple: #a593f0;
    --mr-pink: #f07ab3;
    --mr-grey: #9ba6b8;
    --mr-grey-soft: #2a3240;
    --mr-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* Feed the tokens into the Bootstrap / theme variables */
html[data-skin][data-bs-theme] {
    --theme-font-sans-serif: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif !important;
    --theme-font-family-secondary: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif !important;
    --theme-body-font-size: 14px;
    --theme-body-line-height: 1.45;
    --theme-body-bg: var(--mr-bg);
    --theme-body-color: var(--mr-ink);
    --theme-emphasis-color: var(--mr-ink);
    --theme-heading-color: var(--mr-ink);
    --theme-secondary-color: var(--mr-muted);
    --theme-border-color: var(--mr-line);
    --theme-link-color: var(--mr-blue);
    --theme-link-hover-color: var(--mr-blue-hover);
    --theme-topbar-height: 52px;
    --theme-sidenav-width: 224px;
    --theme-theme-card-border-color: var(--mr-line);
    --theme-theme-card-box-shadow: none;
    --theme-box-shadow: none;

    --theme-primary: #1457A8;
    --theme-primary-rgb: 20, 87, 168;
    --theme-success: #1E7F4F;
    --theme-success-rgb: 30, 127, 79;
    --theme-danger: #B3261E;
    --theme-danger-rgb: 179, 38, 30;
    --theme-warning: #A86A00;
    --theme-warning-rgb: 168, 106, 0;
    --theme-info: #3E7C8C;
    --theme-info-rgb: 62, 124, 140;
    --theme-secondary: #5E6878;
    --theme-secondary-rgb: 94, 104, 120;
    --theme-primary-bg-subtle: var(--mr-blue-soft);
    --theme-success-bg-subtle: var(--mr-green-soft);
    --theme-danger-bg-subtle: var(--mr-red-soft);
    --theme-warning-bg-subtle: var(--mr-amber-soft);
    --theme-primary-text-emphasis: var(--mr-blue);
    --theme-success-text-emphasis: var(--mr-green);
    --theme-danger-text-emphasis: var(--mr-red);
    --theme-warning-text-emphasis: var(--mr-amber);
    --theme-chart-primary-rgb: 20, 87, 168;
}

/* ---------- 2) Base ---------- */
body {
    background: var(--mr-bg);
    color: var(--mr-ink);
    font-size: 14px;
    line-height: 1.45;
}

:focus-visible {
    outline: 2px solid var(--mr-blue);
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--mr-ink);
}

a {
    color: var(--mr-blue);
}

.text-muted,
.text-secondary {
    color: var(--mr-muted) !important;
}

.text-primary { color: var(--mr-blue) !important; }
.text-success { color: var(--mr-green) !important; }
.text-danger { color: var(--mr-red) !important; }
.text-warning { color: var(--mr-amber) !important; }

.num,
.table td {
    font-variant-numeric: tabular-nums;
}

/* ---------- 3) Top bar ---------- */
.app-topbar {
    background: var(--mr-panel) !important;
    border-bottom: 1px solid var(--mr-line);
    box-shadow: 0 1px 3px rgba(23, 32, 49, 0.04);
}

.app-topbar .topbar-link {
    color: var(--mr-ink-2);
}

/* Page title + breadcrumb */
.page-title-head h4,
.page-title-head .page-main-title,
.page-title-box h4 {
    color: var(--mr-ink);
    font-size: 16px;
    font-weight: 650;
}

.breadcrumb {
    font-size: 12.5px;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--mr-muted);
}

.breadcrumb-item.active {
    color: var(--mr-ink-2);
}

/* ---------- 4) Cards / panels ---------- */
.card {
    background: var(--mr-panel);
    border: 1px solid var(--mr-line);
    border-radius: 10px;
    box-shadow: none;
    margin-bottom: 16px;
}

.card-header {
    background: var(--mr-panel);
    border-bottom: 1px solid var(--mr-line);
    padding: 12px 16px;
    border-radius: 10px 10px 0 0 !important;
}

.card-title,
.card-header h4,
.card-header h5 {
    color: var(--mr-ink);
    font-size: 15px;
    font-weight: 650;
    margin-bottom: 0;
}

.card-footer {
    background: var(--mr-footer-bg);
    border-top: 1px solid var(--mr-line);
    border-radius: 0 0 10px 10px !important;
}

/* ---------- 5) Buttons ---------- */
.btn {
    min-height: 35px;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none !important;
}

.btn-sm {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 13px;
}

.btn-xs {
    min-height: 0;
    padding: 2px 8px;
    font-size: 12px;
}

.btn-icon {
    min-height: 0;
}

td .btn {
    min-height: 0;
}

.btn-primary {
    --theme-btn-bg: var(--mr-blue);
    --theme-btn-border-color: var(--mr-blue);
    --theme-btn-hover-bg: var(--mr-blue-hover);
    --theme-btn-hover-border-color: var(--mr-blue-hover);
    --theme-btn-active-bg: var(--mr-blue-hover);
    --theme-btn-active-border-color: var(--mr-blue-hover);
    background-color: var(--mr-blue);
    border-color: var(--mr-blue);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--mr-blue-hover) !important;
    border-color: var(--mr-blue-hover) !important;
    color: #fff !important;
}

.btn-light,
.btn-default,
.btn-secondary,
.btn-outline-secondary {
    background-color: var(--mr-panel);
    border: 1px solid var(--mr-line-soft);
    color: var(--mr-ink);
}

.btn-light:hover,
.btn-default:hover,
.btn-secondary:hover,
.btn-outline-secondary:hover {
    background-color: var(--mr-panel);
    border-color: #AEB8C7;
    color: var(--mr-ink);
}

.btn-outline-primary {
    background-color: var(--mr-panel);
    border-color: var(--mr-line-soft);
    color: var(--mr-blue);
}

.btn-outline-primary:hover {
    background-color: var(--mr-blue-soft);
    border-color: var(--mr-blue);
    color: var(--mr-blue);
}

.btn-success {
    background-color: var(--mr-green);
    border-color: var(--mr-green);
    color: #fff;
}

.btn-danger {
    background-color: var(--mr-red);
    border-color: var(--mr-red);
    color: #fff;
}

.btn-outline-danger {
    background-color: var(--mr-panel);
    border-color: #F0C7C3;
    color: var(--mr-red);
}

.btn-outline-danger:hover {
    background-color: var(--mr-red-soft);
    border-color: var(--mr-red);
    color: var(--mr-red);
}

.btn-success:hover,
.btn-danger:hover {
    filter: brightness(0.92);
    color: #fff;
}

.btn-link {
    color: var(--mr-blue);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.5;
}

/* ---------- 6) Form fields (Meta Reporting: light green fields) ---------- */
.form-label,
.col-form-label {
    color: var(--mr-muted);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

/* every text field, dropdown and picker input */
.form-control,
.form-select,
.input-group-text,
.dt-container .dt-search input,
html .select2-container--default .select2-selection--single,
html .select2-container--default .select2-selection--multiple,
.sel-btn {
    background-color: var(--mr-field-bg);
    border: 1px solid var(--mr-field-line);
    border-radius: 4px;
    color: var(--mr-field-ink);
    font-size: 14px;
    transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.form-control,
.form-select,
html .select2-container--default .select2-selection--single,
.sel-btn {
    min-height: 35px;
}

.form-control-sm,
.form-select-sm {
    min-height: 30px;
    font-size: 13px;
}

.input-group-text,
.input-icon-group .input-icon {
    color: var(--mr-field-icon);
}

.input-icon-group .input-icon {
    z-index: 3;
    pointer-events: none;
}

.form-control:hover,
.form-select:hover,
.dt-container .dt-search input:hover,
html .select2-container--default .select2-selection--single:hover,
html .select2-container--default .select2-selection--multiple:hover,
.sel-btn:hover {
    background-color: var(--mr-field-hover);
    border-color: var(--mr-field-line-hover);
}

.form-control:focus,
.form-select:focus,
.dt-container .dt-search input:focus,
html .select2-container--default.select2-container--focus .select2-selection--single,
html .select2-container--default.select2-container--focus .select2-selection--multiple,
html .select2-container--default.select2-container--open .select2-selection--single,
html .select2-container--default.select2-container--open .select2-selection--multiple,
.sel-btn[aria-expanded="true"],
.sel-btn:focus-visible {
    background-color: var(--mr-field-focus);
    border-color: var(--mr-field-line-focus);
    box-shadow: 0 0 0 3px var(--mr-field-ring);
    outline: none;
}

.form-control::placeholder {
    color: var(--mr-field-placeholder);
}

.form-control:disabled,
.form-control[readonly]:not(.flatpickr-input):not([data-provider]),
.form-select:disabled,
.sel-btn:disabled {
    background-color: var(--mr-grey-soft);
    border-color: var(--mr-line-soft);
    color: var(--mr-muted);
    opacity: 1;
}

.form-text {
    color: var(--mr-muted);
    font-size: 12px;
}

/* up/down chevron, as in Meta Reporting */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3e%3cpath d='M3 7l3-3.2L9 7M3 11l3 3.2L9 11' fill='none' stroke='%238A94A6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 18px;
    padding-right: 32px;
}

/* ---------- Select2 dropdowns, restyled as Meta Reporting's dropdown ---------- */
html .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--mr-field-ink);
    line-height: 33px;
    padding-left: 12px;
    padding-right: 34px;
}

html .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--mr-field-ink);
}

html .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 6px;
    width: 18px;
    height: 33px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3e%3cpath d='M3 7l3-3.2L9 7M3 11l3 3.2L9 11' fill='none' stroke='%238A94A6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center / 12px 18px no-repeat;
}

html .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

html .select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 26px;
    z-index: 2;
    float: none;
    height: auto;
    margin: 0;
    transform: translateY(-50%);
}

html .select2-container--default .select2-selection--single.select2-selection--clearable .select2-selection__rendered {
    padding-right: 52px;
}

html .select2-container--default .select2-selection__clear {
    background: none;
    border: none;
    color: var(--mr-muted);
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    padding: 0 3px;
    border-radius: 4px;
}

html .select2-container--default .select2-selection__clear:hover {
    color: var(--mr-ink);
    background: #DDE3EB;
}

html .select2-dropdown {
    background: var(--mr-panel);
    color: var(--mr-ink);
    border: 1px solid var(--mr-line-soft) !important;
    border-radius: 4px !important;
    box-shadow: 0 12px 32px rgba(23, 32, 49, 0.14), 0 2px 6px rgba(23, 32, 49, 0.06);
    overflow: hidden;
    animation: mrPopIn 0.15s cubic-bezier(0.2, 0.8, 0.3, 1);
}

html .select2-dropdown--below {
    margin-top: 4px;
}

html .select2-dropdown--above {
    margin-top: -4px;
}

/* search box: magnifier + borderless input over a thin line */
html .select2-container .select2-search--dropdown {
    margin: 0 14px;
    padding: 12px 4px 12px 30px;
    border-bottom: 1px solid #E9EDF2;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='7' cy='7' r='4.8' fill='none' stroke='%238A94A6' stroke-width='1.5'/%3e%3cpath d='M10.6 10.6L14 14' stroke='%238A94A6' stroke-width='1.5' stroke-linecap='round'/%3e%3c/svg%3e") left 4px center / 16px no-repeat;
}

html .select2-container--default .select2-search--dropdown .select2-search__field {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 2px 0;
    color: var(--mr-ink);
    font-size: 14.5px;
    outline: none;
}

html .select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
    color: #8A94A6;
}

html .select2-container--default .select2-results > .select2-results__options {
    max-height: 300px;
    margin-top: 6px;
    overscroll-behavior: contain;
}

html .select2-container--default .select2-results__options--nested,
html .select2-results__options {
    margin: 0;
    padding: 0;
}

html .select2-container--default .select2-results__option {
    margin: 0;
    border-radius: 0;
    padding: 11px 18px;
    font-size: 14.5px;
    line-height: 1.35;
    color: var(--mr-ink-2);
}

html .select2-container--default .select2-results__option + .select2-results__option {
    border-top: 1px solid #EEF1F5;
}

html .select2-container--default .select2-results__option[aria-selected="true"],
html .select2-container--default .select2-results__option--selected {
    background: transparent;
    color: var(--mr-ink);
    font-weight: 600;
}

html .select2-container--default .select2-results__option--highlighted[aria-selected],
html .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: #F3F4F6;
    color: var(--mr-ink);
}

html .select2-container--default .select2-results__group {
    padding: 10px 18px 6px;
    color: var(--mr-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

html .select2-container--default .select2-results__option .select2-results__option {
    padding-left: 18px;
}

html .select2-container--default .select2-results__message {
    color: var(--mr-muted);
}

html .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--mr-field-hover);
    border: 1px solid var(--mr-field-line);
    border-radius: 999px;
    color: var(--mr-field-ink);
    font-size: 12.5px;
}

/* ---------- Plain dropdowns (mr-components.js turns each <select> into this) ---------- */
.mr-sel-src {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0);
    pointer-events: none !important;
}

.sel {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.sel.sel-inline {
    display: inline-block;
    width: auto;
    min-width: 72px;
    vertical-align: middle;
}

.sel-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 35px;
    padding: 0 10px 0 12px;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.sel.sel-sm .sel-btn {
    height: 30px;
    min-height: 30px;
    padding: 0 8px 0 10px;
    font-size: 13px;
}

.input-icon-group .sel-btn {
    padding-left: 36px;
}

.sel.is-invalid .sel-btn {
    border-color: var(--mr-red);
    background-color: #FFF7F6;
}

.sel-ico img {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 5px;
}

.sel-ico[hidden],
.sel-x[hidden] {
    display: none;
}

.sel-val {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sel.has .sel-val {
    font-weight: 500;
}

.sel-x {
    color: var(--mr-muted);
    font-size: 17px;
    line-height: 1;
    padding: 0 3px;
    border-radius: 4px;
}

.sel-x:hover {
    color: var(--mr-ink);
    background: #DDE3EB;
}

.sel-chev {
    flex: none;
    width: 12px;
    height: 18px;
    color: var(--mr-field-icon);
}

.sel-drop {
    position: fixed;
    z-index: 2000;
    width: max-content;
    max-width: min(440px, calc(100vw - 16px));
    background: var(--mr-panel);
    color: var(--mr-ink);
    border: 1px solid var(--mr-line-soft);
    border-radius: 4px;
    box-shadow: 0 12px 32px rgba(23, 32, 49, 0.14), 0 2px 6px rgba(23, 32, 49, 0.06);
    overflow: hidden;
    animation: mrPopIn 0.15s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes mrPopIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sel-drop,
    html .select2-dropdown,
    html .daterangepicker,
    .flatpickr-calendar.open {
        animation: none !important;
    }
}

.sel-sbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 14px;
    padding: 12px 4px;
    border-bottom: 1px solid #E9EDF2;
    color: #8A94A6;
}

.sel-sbox svg {
    flex: none;
    width: 16px;
    height: 16px;
}

.sel-search {
    flex: 1;
    min-width: 0;
    padding: 2px 0;
    border: none;
    background: transparent;
    color: var(--mr-ink);
    font-size: 14.5px;
    outline: none;
}

.sel-search::placeholder {
    color: #8A94A6;
}

.sel-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    max-height: 300px;
    overflow: auto;
    overscroll-behavior: contain;
}

.sel-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    color: var(--mr-ink-2);
    font-size: 14.5px;
    line-height: 1.35;
    white-space: nowrap;
    cursor: pointer;
}

.sel-list li + li {
    border-top: 1px solid #EEF1F5;
}

.sel-list li.act {
    background: #F3F4F6;
    color: var(--mr-ink);
}

.sel-list li.cur {
    color: var(--mr-ink);
    font-weight: 600;
}

.sel-list li.none {
    color: var(--mr-muted);
    cursor: default;
}

.sel-list li.grp {
    padding: 10px 18px 6px;
    color: var(--mr-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: default;
}

.sel-list mark {
    padding: 0;
    background: #FFF0B3;
    color: inherit;
    border-radius: 2px;
}

.sel-img {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 5px;
}

html[data-bs-theme="dark"] .sel-list li + li,
html[data-bs-theme="dark"] .select2-results__option + .select2-results__option {
    border-top-color: var(--mr-line);
}

html[data-bs-theme="dark"] .sel-list li.act,
html[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--mr-hover);
}

/* Checkboxes */
.form-check-input[type="checkbox"]:not([role="switch"]),
input[type="checkbox"].form-check-input {
    width: 16px;
    height: 16px;
    border: 1px solid #BFC7D3;
    border-radius: 4px;
    background-color: var(--mr-panel);
    cursor: pointer;
}

.form-check-input:hover:not(:disabled) {
    border-color: #8FA2BF;
}

.form-check-input:checked,
.form-check-input:indeterminate {
    background-color: var(--mr-blue) !important;
    border-color: var(--mr-blue) !important;
}

.form-check-input:focus {
    border-color: #7FA6DA;
    box-shadow: 0 0 0 3px rgba(20, 87, 168, 0.22);
}

/* Switches: small Ads-Manager-style toggle */
.form-switch .form-check-input {
    width: 28px !important;
    height: 16px !important;
    border-radius: 999px !important;
    border-color: #C5CCD6;
    background-color: #C5CCD6;
    --theme-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-image: var(--theme-form-switch-bg) !important;
    cursor: pointer;
}

.form-switch .form-check-input:checked {
    background-color: #1877F2 !important;
    border-color: #1877F2 !important;
}

/* ---------- 7) Tables ---------- */
.table {
    --theme-table-bg: transparent;
    --theme-table-hover-bg: var(--mr-row-hover);
    --theme-table-striped-bg: transparent;
    color: var(--mr-ink);
    font-size: 13px;
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: 7px 10px;
    border-bottom-color: var(--mr-line);
}

.table > thead > tr > th,
.table thead th,
table.dataTable thead th {
    background-color: var(--mr-head-bg) !important;
    color: var(--mr-ink-2) !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    border-bottom: 1px solid var(--mr-line);
}

.table thead th:hover {
    color: var(--mr-blue) !important;
}

.table-hover > tbody > tr:hover > * {
    --theme-table-accent-bg: var(--mr-row-hover);
    background-color: var(--mr-row-hover);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --theme-table-accent-bg: transparent;
}

.table-bordered > :not(caption) > * > * {
    border-color: var(--mr-line);
}

.table > tfoot > tr > td,
.table > tfoot > tr > th {
    background-color: var(--mr-head-bg);
    border-top: 1px solid #BFC8D6;
    font-weight: 650;
}

.table tr.selected > td,
.table tr.sel > td {
    background-color: var(--mr-blue-soft) !important;
}

/* DataTables chrome: search box with a magnifier, length dropdown, info line */
.dt-container {
    font-size: 13px;
    color: var(--mr-muted);
}

.dt-container .dt-search label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.dt-container .dt-search input {
    width: 220px;
    height: 35px;
    margin-left: 0 !important;
    padding: 0 12px 0 34px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='7' cy='7' r='4.8' fill='none' stroke='%238A94A6' stroke-width='1.5'/%3e%3cpath d='M10.6 10.6L14 14' stroke='%238A94A6' stroke-width='1.5' stroke-linecap='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: 11px center;
    background-size: 15px;
}

.dt-container .dt-length label {
    margin-left: 8px;
    color: var(--mr-muted);
    font-size: 12.5px;
}

.dt-container .dt-info {
    color: var(--mr-muted);
    font-size: 12px;
}

/* sorting: no double arrows; the sorted column gets a blue ▾ / ▴ after its title */
table.dataTable thead > tr > th span.dt-column-order,
table.dataTable thead > tr > td span.dt-column-order {
    display: none !important;
}

table.dataTable thead > tr > th.dt-orderable-asc,
table.dataTable thead > tr > th.dt-orderable-desc {
    cursor: pointer;
}

table.dataTable thead > tr > th.dt-ordering-desc .dt-column-title::after {
    content: " ▾";
    color: var(--mr-blue);
}

table.dataTable thead > tr > th.dt-ordering-asc .dt-column-title::after {
    content: " ▴";
    color: var(--mr-blue);
}

/* column resize handles (colResizable): a faint line in the header, blue while dragging */
.JCLRgrip .JColResizer {
    border: none !important;
}

.JCLRgrip .JColResizer::after {
    content: "";
    position: absolute;
    top: 25%;
    bottom: 25%;
    right: 2px;
    width: 1px;
    background: #C9D1DD;
}

.JCLRgrip .JColResizer:hover::after,
.JCLRgrip.JCLRgripDrag .JColResizer::after {
    top: 0;
    bottom: 0;
    right: 1px;
    width: 3px;
    background: var(--mr-blue);
}

.page-link {
    border-radius: 4px !important;
    border-color: var(--mr-line-soft);
    color: var(--mr-ink-2);
    margin: 0 2px;
    font-size: 13px;
}

.page-item.active .page-link,
.active > .page-link {
    background-color: var(--mr-blue);
    border-color: var(--mr-blue);
    color: #fff;
}

/* ---------- 8) Pills / badges ---------- */
.badge {
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 600;
}

.badge.bg-primary, .badge.text-bg-primary, .badge.bg-primary-subtle, .badge.badge-soft-primary { background: var(--mr-blue-soft) !important; color: var(--mr-blue) !important; }
.badge.bg-success, .badge.text-bg-success, .badge.bg-success-subtle, .badge.badge-soft-success { background: var(--mr-green-soft) !important; color: var(--mr-green) !important; }
.badge.bg-warning, .badge.text-bg-warning, .badge.bg-warning-subtle, .badge.badge-soft-warning { background: var(--mr-amber-soft) !important; color: var(--mr-amber) !important; }
.badge.bg-danger, .badge.text-bg-danger, .badge.bg-danger-subtle, .badge.badge-soft-danger { background: var(--mr-red-soft) !important; color: var(--mr-red) !important; }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light, .badge.bg-secondary-subtle, .badge.badge-soft-secondary { background: var(--mr-grey-soft) !important; color: var(--mr-muted) !important; }
.badge.bg-info, .badge.text-bg-info, .badge.bg-info-subtle, .badge.badge-soft-info { background: #DDEFF2 !important; color: var(--mr-teal) !important; }

.bg-primary-subtle { background-color: var(--mr-blue-soft) !important; }
.bg-success-subtle { background-color: var(--mr-green-soft) !important; }
.bg-danger-subtle { background-color: var(--mr-red-soft) !important; }
.bg-warning-subtle { background-color: var(--mr-amber-soft) !important; }

/* ---------- 9) Dialogs (modals) ---------- */
.modal-backdrop.show {
    background-color: rgb(23, 32, 49);
    opacity: 0.45;
}

.modal-content {
    background: var(--mr-panel);
    border: none;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(23, 32, 49, 0.3);
    color: var(--mr-ink);
    overflow: hidden;
}

.modal-header,
.modal-header.bg-light {
    padding: 14px 18px;
    border-bottom: 1px solid var(--mr-line);
    background: var(--mr-panel) !important;
}

.modal-title {
    color: var(--mr-ink);
    font-size: 16px;
    font-weight: 650;
}

.modal-body {
    padding: 16px 18px;
    background-color: var(--mr-panel) !important;
}

.modal-footer {
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--mr-line);
    background-color: var(--mr-footer-bg) !important;
}

.modal-footer > * {
    margin: 0;
}

/* ---------- 10) Dropdowns, tabs, alerts, toasts ---------- */
.dropdown-menu {
    background: var(--mr-panel);
    border: 1px solid var(--mr-line);
    border-radius: 10px;
    box-shadow: var(--mr-shadow);
    padding: 6px;
    font-size: 13.5px;
}

.dropdown-item {
    border-radius: 6px;
    color: var(--mr-ink-2);
    padding: 7px 10px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--mr-hover);
    color: var(--mr-ink);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--mr-blue-soft);
    color: var(--mr-blue);
}

.dropdown-header {
    color: var(--mr-muted);
}

.dropdown-divider {
    border-color: var(--mr-line);
}

/* tabs inside a page: underline style */
.nav-tabs {
    border-bottom: 1px solid var(--mr-line);
}

.nav-tabs .nav-link {
    position: relative;
    border: none;
    background: none;
    color: var(--mr-muted);
    font-weight: 500;
    padding: 10px 14px;
}

.nav-tabs .nav-link:hover {
    color: var(--mr-ink);
}

.nav-tabs .nav-link.active {
    background: none;
    color: var(--mr-blue);
    font-weight: 600;
}

.nav-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--mr-blue);
}

.nav-pills .nav-link.active {
    background: var(--mr-blue-soft);
    color: var(--mr-blue);
    font-weight: 600;
}

.alert {
    border-radius: 10px;
    font-size: 13px;
}

.alert-warning {
    background: #FFF8E6;
    border: 1px solid #F1DFB0;
    color: #6B4A00;
}

#toast-container > div {
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(23, 32, 49, 0.25);
    font-size: 13px;
    opacity: 1;
}

/* ---------- Date range picker (daterangepicker), as Meta Reporting's range picker ---------- */
html .daterangepicker {
    margin-top: 6px;
    padding: 0;
    width: auto;
    max-width: calc(100vw - 16px);
    background: var(--mr-panel);
    color: var(--mr-ink);
    border: 1px solid var(--mr-line);
    border-radius: 4px;
    box-shadow: 0 12px 32px rgba(23, 32, 49, 0.22);
    font-family: inherit;
    font-size: 13.5px;
    animation: mrPopIn 0.15s cubic-bezier(0.2, 0.8, 0.3, 1);
}

html .daterangepicker::before,
html .daterangepicker::after {
    display: none;
}

/* presets on the left */
html .daterangepicker .ranges {
    margin: 0;
}

html .daterangepicker .ranges ul {
    width: 190px;
    padding: 6px 0;
}

html .daterangepicker .ranges li {
    margin: 0;
    padding: 8px 16px;
    border-radius: 0;
    background: none;
    color: var(--mr-ink-2);
    font-size: 13.5px;
}

html .daterangepicker .ranges li + li {
    border-top: 1px solid #EEF1F5;
}

html .daterangepicker .ranges li:hover {
    background: #F6F8FB;
    color: var(--mr-ink-2);
}

html .daterangepicker .ranges li.active {
    background: #EEF1F5 !important;
    color: var(--mr-ink) !important;
    font-weight: 600;
}

html .daterangepicker.show-ranges.ltr .drp-calendar.left {
    border-left: 1px solid var(--mr-line);
}

/* the two months */
html .daterangepicker .drp-calendar {
    max-width: none;
}

html .daterangepicker .drp-calendar.left,
html .daterangepicker .drp-calendar.right {
    padding: 10px 14px 12px !important;
}

html .daterangepicker .calendar-table {
    border: none;
    background: transparent;
}

html .daterangepicker .calendar-table table {
    border-collapse: separate;
    border-spacing: 0 2px;
}

html .daterangepicker .calendar-table th,
html .daterangepicker .calendar-table td {
    width: 38px;
    min-width: 38px;
    height: 34px;
    line-height: 34px;
    border: none;
    border-radius: 0;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

html .daterangepicker th.month {
    color: var(--mr-ink);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

html .daterangepicker .calendar-table thead tr:nth-child(2) th {
    height: 28px;
    line-height: 28px;
    color: var(--mr-ink-2);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

html .daterangepicker .calendar-table th.prev,
html .daterangepicker .calendar-table th.next {
    border-radius: 6px;
}

html .daterangepicker .calendar-table .next span,
html .daterangepicker .calendar-table .prev span {
    border-color: var(--mr-ink);
}

html .daterangepicker th.available:hover,
html .daterangepicker td.available:hover {
    background: #EEF1F5;
    border-radius: 6px;
}

html .daterangepicker td.off,
html .daterangepicker td.off.in-range,
html .daterangepicker td.off.start-date,
html .daterangepicker td.off.end-date,
html .daterangepicker td.off.active,
html .daterangepicker td.off.active:hover {
    background: transparent !important;
    color: #AEB5C0 !important;
    font-weight: 400;
}

/* days of the next / previous month that fall inside the range: a lighter tint */
html .daterangepicker td.off.in-range:not(.start-date):not(.end-date) {
    background: #F2F6FC !important;
}

html .daterangepicker td.in-range {
    background: var(--mr-blue-soft);
    color: var(--mr-ink);
    border-radius: 0;
}

html .daterangepicker td.active,
html .daterangepicker td.active:hover {
    background: var(--mr-blue) !important;
    color: #fff !important;
    font-weight: 600;
}

html .daterangepicker td.start-date {
    border-radius: 6px 0 0 6px;
}

html .daterangepicker td.end-date {
    border-radius: 0 6px 6px 0;
}

html .daterangepicker td.start-date.end-date {
    border-radius: 6px;
}

html .daterangepicker td.disabled {
    color: #D3D8E0;
    text-decoration: none;
}

/* footer: chosen range, then Cancel / Apply as round buttons */
html .daterangepicker .drp-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--mr-line);
}

html .daterangepicker .drp-selected {
    margin-right: 6px;
    padding: 0;
    color: var(--mr-ink-2);
    font-size: 13.5px;
}

html .daterangepicker .drp-buttons .btn {
    margin: 0;
    min-height: 34px;
    padding: 6px 16px;
    border-radius: 999px !important;
    font-size: 13.5px;
    font-weight: 600;
}

/* ---------- Single date picker (flatpickr), same calendar look ---------- */
.flatpickr-calendar {
    padding: 10px 14px 8px;
    width: auto;
    background: var(--mr-panel);
    border: 1px solid var(--mr-line);
    border-radius: 4px;
    box-shadow: 0 12px 32px rgba(23, 32, 49, 0.22) !important;
    font-family: inherit;
}

.flatpickr-calendar.open {
    animation: mrPopIn 0.15s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
    display: none;
}

.flatpickr-months {
    margin-bottom: 6px;
}

.flatpickr-months .flatpickr-month {
    height: 34px;
    color: var(--mr-ink);
    fill: var(--mr-ink);
}

.flatpickr-current-month {
    padding-top: 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-weight: 700;
    text-transform: uppercase;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    top: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    color: var(--mr-ink);
    fill: var(--mr-ink);
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: #EEF1F5;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--mr-ink);
}

span.flatpickr-weekday {
    color: var(--mr-ink-2);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.flatpickr-day {
    height: 34px;
    line-height: 34px;
    border: none;
    border-radius: 6px;
    color: var(--mr-ink);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: #EEF1F5;
    border: none;
}

.flatpickr-day.today {
    background: #EEF1F5;
    border: none;
    font-weight: 700;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--mr-blue) !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff;
    font-weight: 600;
}

.flatpickr-day.inRange {
    background: var(--mr-blue-soft);
    border-radius: 0;
    box-shadow: none;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #AEB5C0;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #D3D8E0;
}

/* =====================================================================
   Sidebar (Meta Reporting style: white, 13.5px items, coloured icons)
   ===================================================================== */
.sidenav-menu {
    --sb-text: var(--mr-ink-2);
    --sb-title: var(--mr-muted);
    --sb-border: var(--mr-line);
    --sb-hover-bg: var(--mr-hover);
    --sb-active-bg: var(--mr-blue-soft);
    --sb-active-text: var(--mr-blue);
    --sb-control-bg: transparent;
    --sb-control-border: var(--mr-line);
    background: var(--mr-panel) !important;
    border-right: 1px solid var(--sb-border) !important;
}

/* Header: collapse button, logo, badge */
.sidenav-menu .sb-head {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--theme-topbar-height, 52px);
    padding: 0 12px;
    border-bottom: 1px solid var(--sb-border);
}

.sidenav-menu .sb-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--sb-control-border);
    border-radius: 10px;
    background: var(--sb-control-bg);
    color: var(--mr-ink);
    font-size: 20px;
    cursor: pointer;
}

.sidenav-menu .sb-toggle:hover {
    background: var(--mr-head-bg);
    border-color: #AEB8C7;
}

.sidenav-menu .sb-brand {
    display: flex;
    align-items: center;
    min-width: 0;
}

.sidenav-menu .sb-brand img {
    height: 22px;
    width: auto;
}

.sidenav-menu .sb-badge {
    margin-left: auto;
    padding: 1px 7px;
    border: 1px solid var(--sb-control-border);
    border-radius: 999px;
    color: var(--mr-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Section titles and dividers */
.sidenav-menu .side-nav {
    padding: 6px 0 20px;
}

.sidenav-menu .side-nav .side-nav-title {
    padding: 14px 20px 8px;
    color: var(--sb-title);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sidenav-menu .side-nav .sb-divider {
    height: 1px;
    margin: 8px 16px;
    background: var(--sb-border);
}

/* Menu items */
.sidenav-menu .side-nav .side-nav-item .side-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1px 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--sb-text);
    font-size: 13.5px;
    font-weight: 500;
    transition: background-color 0.12s, color 0.12s;
}

.sidenav-menu .side-nav .side-nav-item .side-nav-link:hover {
    background: var(--sb-hover-bg);
    color: var(--mr-ink);
}

.sidenav-menu .side-nav .side-nav-item .side-nav-link.active,
.sidenav-menu .side-nav .side-nav-item.active > .side-nav-link {
    background: var(--sb-active-bg);
    color: var(--sb-active-text);
    font-weight: 600;
}

.sidenav-menu .side-nav .side-nav-link .menu-icon {
    display: inline-flex;
    width: 18px;
    margin: 0;
    font-size: 18px;
}

.sidenav-menu .side-nav .side-nav-link .menu-icon i {
    font-size: inherit;
}

/* Icon colours (same families as Meta Reporting's sidebar) */
.sidenav-menu .sb-ic-blue { color: var(--mr-blue) !important; }
.sidenav-menu .sb-ic-purple { color: var(--mr-purple) !important; }
.sidenav-menu .sb-ic-green { color: var(--mr-green) !important; }
.sidenav-menu .sb-ic-teal { color: var(--mr-teal) !important; }
.sidenav-menu .sb-ic-pink { color: var(--mr-pink) !important; }
.sidenav-menu .sb-ic-amber { color: var(--mr-amber) !important; }
.sidenav-menu .sb-ic-grey { color: var(--mr-grey) !important; }
.sidenav-menu .sb-ic-red { color: var(--mr-red) !important; }

/* Collapsed (icon only) */
html[data-sidenav-size="condensed"] .sidenav-menu .side-nav .side-nav-title {
    display: none;
}

html[data-sidenav-size="condensed"] .sidenav-menu .side-nav .sb-divider {
    margin: 8px 14px;
}

html[data-sidenav-size="condensed"] .sidenav-menu .side-nav .side-nav-item .side-nav-link {
    margin: 3px 14px;
    padding: 10px 14px;
}

/* the theme widens the icon box to 55px when collapsed; keep it 18px so it sits centred in the rail */
html[data-sidenav-size="condensed"] .sidenav-menu .side-nav .side-nav-item .side-nav-link .menu-icon {
    width: 18px !important;
    min-width: 18px !important;
    justify-content: center;
}

/* =====================================================================
   Report building blocks (Meta Reporting style)
   page heading, filter bar, KPI strip, chart legend
   ===================================================================== */
.mr-pagehead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 14px;
}

.mr-pagehead-title {
    margin: 0;
    color: var(--mr-ink);
    font-size: 20px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.mr-pagehead-sub {
    margin: 2px 0 0;
    color: var(--mr-muted);
    font-size: 12.5px;
}

/* filter bar */
.mr-fbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 14px;
    margin-bottom: 16px;
    padding: 10px 14px 12px;
    background: var(--mr-panel);
    border: 1px solid var(--mr-line);
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(23, 32, 49, 0.07);
}

.mr-ffield {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mr-ffield > label {
    color: var(--mr-muted);
    font-size: 12px;
    font-weight: 600;
    margin: 0;
}

/* KPI strip: one card of cells, a coloured line on top of each.
   8 cells in a row on wide screens, 4 + 4 on laptops, 2 per row on phones (the 1px gap draws the lines) */
.mr-kpis {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 16px;
    background: var(--mr-line);
    border: 1px solid var(--mr-line);
    border-radius: 10px;
    overflow: hidden;
}

@media (max-width: 1599.98px) {
    .mr-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .mr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mr-kpi {
    position: relative;
    padding: 12px 16px;
    background: var(--mr-panel);
    min-width: 0;
}

.mr-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: transparent;
}

.mr-kpi.tone-blue::before { background: var(--mr-blue); opacity: 0.55; }
.mr-kpi.tone-green::before { background: var(--mr-green); opacity: 0.55; }
.mr-kpi.tone-red::before { background: var(--mr-red); opacity: 0.5; }
.mr-kpi.tone-amber::before { background: var(--mr-amber); opacity: 0.55; }

.mr-kpi-l {
    color: var(--mr-muted);
    font-size: 12.5px;
}

.mr-kpi-v {
    margin-top: 2px;
    color: var(--mr-ink);
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mr-kpi.tone-blue .mr-kpi-v { color: var(--mr-blue); }
.mr-kpi.tone-green .mr-kpi-v { color: var(--mr-green); }
.mr-kpi.tone-red .mr-kpi-v { color: var(--mr-red); }
.mr-kpi.tone-amber .mr-kpi-v { color: var(--mr-amber); }

.mr-kpi-d {
    margin-top: 1px;
    font-size: 12px;
}

.up-good { color: var(--mr-green); }
.up-bad { color: var(--mr-red); }
.flat { color: var(--mr-muted); }

/* chart legend */
.mr-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    color: var(--mr-muted);
    font-size: 12.5px;
}

.mr-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mr-legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.mr-legend i.line {
    width: 14px;
    height: 2px;
    border-radius: 1px;
}

.apexcharts-tooltip {
    font-family: inherit !important;
    border-radius: 8px !important;
    box-shadow: var(--mr-shadow) !important;
}

/* =====================================================================
   Tables like Meta Reporting's Performance table (mr-components.js)
   ===================================================================== */
.mr-tbl-scroll {
    overflow: auto;
    max-height: 70vh;
    overscroll-behavior-x: contain;
}

table.mr-tbl {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    max-width: none;
}

table.mr-tbl > thead > tr > th,
table.mr-tbl > tbody > tr > td,
table.mr-tbl > tfoot > tr > td,
table.mr-tbl > tfoot > tr > th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* detail rows (one wide cell) keep their own layout */
table.mr-tbl > tbody > tr > td[colspan] {
    overflow: visible;
    white-space: normal;
}

table.mr-tbl .mr-col-off {
    display: none !important;
}

/* sticky header and total row */
.mr-tbl-scroll > table.mr-tbl > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 3;
}

.mr-tbl-scroll > table.mr-tbl > tfoot > tr > td,
.mr-tbl-scroll > table.mr-tbl > tfoot > tr > th {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background-color: var(--mr-head-bg) !important;
    border-top: 1px solid #BFC8D6;
    font-weight: 650;
}

/* header: drag to move (grab cursor), right edge to resize */
table.mr-tbl > thead > tr > th.mr-th {
    cursor: grab;
}

table.mr-tbl > thead > tr > th.mr-th.mr-fixed {
    cursor: default;
}

.mr-rz {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
}

.mr-rz::after {
    content: "";
    position: absolute;
    top: 25%;
    bottom: 25%;
    right: 2px;
    width: 1px;
    background: #C9D1DD;
}

.mr-rz:hover::after,
.mr-rz.on::after {
    top: 0;
    bottom: 0;
    right: 1px;
    width: 3px;
    background: var(--mr-blue);
}

table.mr-tbl > thead > tr > th.mr-col-drag {
    opacity: 0.45;
}

table.mr-tbl > thead > tr > th.mr-drop-before {
    box-shadow: inset 3px 0 0 var(--mr-blue);
}

table.mr-tbl > thead > tr > th.mr-drop-after {
    box-shadow: inset -3px 0 0 var(--mr-blue);
}

body.mr-resizing,
body.mr-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

body.mr-dragging,
body.mr-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
}

/* measuring the natural widths (for a moment, while fitting) */
table.mr-tbl.mr-measuring {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 0 !important;
}

table.mr-tbl.mr-measuring > * > tr > * {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* toolbar: Columns menu + fit button */
.mr-has-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.mr-tbl-tools {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.mr-tbl-tools-row {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 10px;
}

.mr-tbl-tools .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 10px;
    font-size: 13.5px;
}

.mr-tbl-tools svg {
    width: 15px;
    height: 15px;
    color: var(--mr-ink-2);
}

.mr-tbl-tools .mr-caret {
    font-size: 10px;
    color: var(--mr-muted);
}

.mr-tbl-tools .mr-fit-btn {
    width: 34px;
    justify-content: center;
    padding: 4px 0;
}

.mr-tbl-tools .btn[aria-expanded="true"] {
    background: var(--mr-blue-soft);
    border-color: #A9C3E6;
    color: var(--mr-blue);
}

.mr-tbl-note {
    padding: 8px 16px;
    color: var(--mr-muted);
    font-size: 12px;
    text-align: right;
}

/* Columns menu: tick boxes, as Meta Reporting's multi-select */
.mr-cols-drop .sel-list {
    margin: 4px 0;
}

.mr-cols-drop .sel-list li {
    padding: 9px 14px;
    font-size: 14px;
}

.mr-cols-drop .sel-list li:hover {
    background: #F3F4F6;
}

.mr-cols-drop li.mr-cols-all {
    color: var(--mr-ink);
    font-weight: 600;
}

.mr-tick {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid #C3CBD7;
    border-radius: 4px;
    background: var(--mr-panel);
    color: transparent;
}

.mr-tick svg {
    width: 13px;
    height: 13px;
}

.mr-tick.on {
    background: var(--mr-blue);
    border-color: var(--mr-blue);
    color: #fff;
}

.mr-cols-foot {
    padding: 6px 10px;
    border-top: 1px solid var(--mr-line-soft);
    text-align: right;
}

.mr-cols-foot .btn-link {
    min-height: 0;
    padding: 4px 6px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

/* the scroll box may sit in a flex row (DataTables): let it shrink, so wide tables scroll inside it */
.mr-tbl-scroll {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
}

/* narrow card headers (half-width cards): the Columns button shows just its icon */
.card-header.mr-has-tools {
    container-type: inline-size;
}

@container (max-width: 600px) {
    .mr-tbl-tools .mr-cols-btn > span:not(.mr-caret) {
        display: none;
    }
}

/* keep the toolbar on the header's line: other header bits (e.g. a date label) shorten with "…" */
.card-header.mr-has-tools {
    flex-wrap: nowrap !important; /* the theme wraps every card header with !important */
}

.card-header.mr-has-tools > .card-title {
    flex: none;
}

.card-header.mr-has-tools > :not(.mr-tbl-tools):not(.card-title) {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-header.mr-has-tools > .mr-tbl-tools {
    flex: none;
}

/* sorted column (tables sorted by the table component): a blue ▾ / ▴ after the title */
table.mr-tbl > thead > tr > th.mr-sorted {
    color: var(--mr-blue) !important;
}

table.mr-tbl > thead > tr > th.mr-sorted::after {
    content: " ▾";
    color: var(--mr-blue);
}

table.mr-tbl > thead > tr > th.mr-sorted.mr-asc::after {
    content: " ▴";
}

/* =====================================================================
   Filter bar (Meta Reporting): labelled fields in one white card
   ===================================================================== */
.mr-fbar {
    align-items: flex-end;
    padding: 12px 16px 14px;
}

.mr-fbar .mr-ffield > label {
    margin: 0;
    color: var(--mr-muted);
    font-size: 12px;
    font-weight: 600;
}

/* one field height everywhere in the bar */
.mr-fbar .form-control,
.mr-fbar .form-select,
.mr-fbar .sel-btn,
.mr-fbar .select2-container--default .select2-selection--single {
    height: 38px;
    min-height: 38px;
}

.mr-fbar .select2-container--default .select2-selection--single .select2-selection__rendered,
.mr-fbar .select2-container--default .select2-selection--single .select2-selection__arrow {
    line-height: 36px;
    height: 36px;
}

.mr-fbar .app-search .form-control {
    padding-left: 36px;
}

.mr-fbar .app-search .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 36px;
}

.mr-fbar .app-search-icon,
.mr-fbar .input-icon {
    z-index: 3;
    color: var(--mr-field-icon) !important;
    pointer-events: none;
}

.mr-fbar .app-search > .select2-container {
    width: 100% !important;
}

/* "Clear filters": a plain blue link at the end of the row */
.mr-fbar .mr-fbar-clear {
    align-self: flex-end;
    min-height: 38px;
    padding: 0 4px;
    color: var(--mr-blue);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
}

.mr-fbar .mr-fbar-clear:hover {
    text-decoration: underline;
}

/* date range text: "Last 7 days · Oct 4 – Oct 10" over the real input */
.mr-dr-input {
    color: transparent !important;
    caret-color: transparent;
}

.mr-dr-input::placeholder {
    color: transparent !important;
}

.mr-dr-text {
    position: absolute;
    inset: 0 32px 0 36px;
    display: block;
    line-height: 38px;
    overflow: hidden;
    color: var(--mr-field-ink);
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}

.mr-dr-text b {
    font-weight: 650;
}

.mr-dr-text .mr-dr-sep {
    color: var(--mr-muted);
}

.mr-dr-text .mr-dr-empty {
    color: var(--mr-field-placeholder);
}

/* the up/down chevron at the end of the date field, like the dropdowns */
.mr-fbar .app-search:has(> .mr-dr-input)::after,
.mr-fbar .input-icon-group:has(> .mr-dr-input)::after,
.mr-dr-field:has(> .mr-dr-input)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 12px;
    height: 18px;
    margin-top: -9px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3e%3cpath d='M3 7l3-3.2L9 7M3 11l3 3.2L9 11' fill='none' stroke='%238A94A6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center / 12px 18px no-repeat;
    pointer-events: none;
}

/* page heading actions (buttons on the right of the title) */
.mr-pagehead-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.mr-switch-label {
    color: var(--mr-muted);
    font-size: 12.5px;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .mr-fbar .mr-ffield,
    .mr-fbar .mr-ffield .app-search {
        width: 100% !important;
    }
}

/* a date range field the page made read-only (typed dates not allowed) still looks like a normal field */
.form-control.mr-dr-input[readonly] {
    background-color: var(--mr-field-bg) !important;
    border-color: var(--mr-field-line) !important;
    cursor: pointer;
}

.form-control.mr-dr-input[readonly]:hover {
    border-color: var(--mr-field-line-hover) !important;
}

/* field icons in the filter bar: same spot on every page (some pages nudge .app-search-icon) */
.mr-fbar .app-search .app-search-icon {
    left: 0 !important;
    width: 36px !important;
    text-align: center;
}

/* =====================================================================
   Compact tables (Meta Reporting density): 13px text, 7px x 10px cells
   ===================================================================== */
table.mr-tbl > thead > tr > th,
table.mr-tbl > tbody > tr > td,
table.mr-tbl > tfoot > tr > td,
table.mr-tbl > tfoot > tr > th {
    padding: 7px 10px !important;
    font-size: 13px;
    line-height: 1.45;
    vertical-align: middle;
}

table.mr-tbl > tbody > tr,
table.mr-tbl > tfoot > tr {
    height: auto !important;
}

/* text helpers inside cells follow the table's 13px */
table.mr-tbl .fs-base,
table.mr-tbl .fs-14,
table.mr-tbl .fs-15,
table.mr-tbl h5,
table.mr-tbl h6 {
    font-size: inherit !important;
    margin: 0;
}

table.mr-tbl small,
table.mr-tbl .fs-xs,
table.mr-tbl .fs-12 {
    font-size: 11.5px !important;
}

/* row icons / logos */
table.mr-tbl td img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain;
}

table.mr-tbl td .avatar-sm,
table.mr-tbl td .avatar-xs {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
}

/* the "+" toggle of rows that open */
table.mr-tbl td.dt-control .avatar-sm {
    width: 20px !important;
    height: 20px !important;
}

/* pills: small, as in Meta Reporting */
table.mr-tbl .badge {
    padding: 1px 8px !important;
    font-size: 12px !important;
    line-height: 1.45;
}

/* action buttons: plain icon buttons (26px, grey, blue on hover; delete red on hover) */
table.mr-tbl td .btn-icon,
table.mr-tbl td .btn.rounded-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px !important;
    height: 26px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 6px !important;
    background: none !important;
    color: #7D8898 !important;
    font-size: 15px;
}

table.mr-tbl td .btn-icon i,
table.mr-tbl td .btn.rounded-circle i {
    font-size: 15px !important;
}

table.mr-tbl td .btn-icon:hover,
table.mr-tbl td .btn.rounded-circle:hover {
    background: var(--mr-blue-soft) !important;
    color: var(--mr-blue) !important;
}

table.mr-tbl td .btn-icon:has(.ti-trash):hover,
table.mr-tbl td .btn.rounded-circle:has(.ti-trash):hover,
table.mr-tbl td [class*="delete"]:hover {
    background: #FDECEA !important;
    color: var(--mr-red) !important;
}

table.mr-tbl td .d-flex.gap-1,
table.mr-tbl td .d-flex.gap-2 {
    gap: 2px !important;
}

/* other small buttons in cells (e.g. "View") */
table.mr-tbl td .btn-sm:not(.btn-icon):not(.rounded-circle),
table.mr-tbl td .btn-xs {
    min-height: 0 !important;
    padding: 2px 9px !important;
    font-size: 12.5px !important;
    line-height: 1.4;
}

/* switches in cells: Meta's small toggle */
table.mr-tbl td .form-switch {
    min-height: 0;
    margin: 0;
}

/* =====================================================================
   Tab panel (one full-width card, a tab per table) + Meta's segmented switch
   ===================================================================== */
.mr-seg {
    display: inline-flex;
    height: 35px;
    border: 1px solid var(--mr-line-soft);
    border-radius: 4px;
    overflow: hidden;
    background: var(--mr-panel);
}

.mr-seg > button {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: none;
    border-right: 1px solid var(--mr-line-soft);
    background: var(--mr-panel);
    color: var(--mr-ink-2);
    font-size: 13.5px;
    white-space: nowrap;
    cursor: pointer;
}

.mr-seg > button:last-child {
    border-right: none;
}

.mr-seg > button:hover {
    background: var(--mr-head-bg);
    color: var(--mr-ink);
}

.mr-seg > button[aria-selected="true"] {
    background: var(--mr-blue-soft);
    color: var(--mr-blue);
    font-weight: 600;
}

.mr-seg > button:focus-visible {
    outline: 2px solid var(--mr-blue);
    outline-offset: -2px;
}

.mr-tabcard > .card-header {
    flex-wrap: wrap;
    row-gap: 8px;
}

.mr-tabcard .mr-tab-date {
    white-space: nowrap;
}

.mr-tabcard .mr-tab-tools {
    display: flex;
    flex: none;
    margin-left: auto;
}

.mr-tabcard .mr-tab-tools .mr-tbl-tools {
    margin-left: 0;
}

.mr-tabcard .mr-tab-tools .mr-tbl-tools[hidden],
.mr-tabcard .mr-tabpane[hidden] {
    display: none !important;
}

@media (max-width: 767.98px) {
    .mr-seg {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* =====================================================================
   Action icons in tables (Meta Reporting's Action column):
   24px, no background or border, a colour per action, grow a little on hover
   ===================================================================== */
table.mr-tbl td .btn-icon,
table.mr-tbl td .btn.rounded-circle {
    width: 24px !important;
    height: 24px !important;
    border-radius: 4px !important;
    background: none !important;
    color: #5E6878 !important;
    transition: transform 0.12s, opacity 0.12s;
}

table.mr-tbl td .btn-icon i,
table.mr-tbl td .btn.rounded-circle i {
    font-size: 17px !important;
    line-height: 1;
}

table.mr-tbl td .btn-icon:hover,
table.mr-tbl td .btn.rounded-circle:hover,
table.mr-tbl td .btn-icon:has(.ti-trash):hover,
table.mr-tbl td .btn.rounded-circle:has(.ti-trash):hover,
table.mr-tbl td [class*="delete"]:hover {
    background: none !important;
    transform: scale(1.15);
}

table.mr-tbl td .d-flex.gap-1,
table.mr-tbl td .d-flex.gap-2 {
    gap: 6px !important;
}

/* colour by action */
table.mr-tbl td .btn:has(.ti-edit, .ti-pencil, .ti-edit-circle, .ti-copy, .ti-files) { color: #2563EB !important; }       /* edit / duplicate: blue */
table.mr-tbl td .btn:has(.ti-trash, .ti-trash-x) { color: #DC2626 !important; }                                        /* delete: red */
table.mr-tbl td .btn:has(.ti-eye, .ti-download, .ti-printer, .ti-file-download) { color: #0E9384 !important; }         /* view / export: teal */
table.mr-tbl td .btn:has(.ti-history, .ti-clock, .ti-list-details) { color: #7C3AED !important; }                      /* history: purple */
table.mr-tbl td .btn:has(.ti-device-floppy, .ti-check, .ti-circle-check) { color: #16A34A !important; }                /* save / confirm: green */
table.mr-tbl td .btn:has(.ti-user-plus, .ti-plus, .ti-circle-plus) { color: #16A34A !important; }                       /* add (e.g. add account): green */
table.mr-tbl td .btn:has(.ti-settings, .ti-adjustments) { color: #6E56CF !important; }                                 /* settings / rules: violet */
table.mr-tbl td .btn:has(.ti-alarm, .ti-hourglass) { color: #C2410C !important; }                                      /* schedule: orange */
table.mr-tbl td .btn:has(.ti-x) { color: #7D8898 !important; }                                                         /* remove from list: grey */

/* text action buttons in cells (e.g. Funds "View"): a coloured icon + label, no box */
table.mr-tbl td .btn-sm:not(.btn-icon):not(.rounded-circle) {
    border: none !important;
    background: none !important;
    padding: 2px 4px !important;
    color: var(--mr-ink-2) !important;
    font-weight: 500;
    transition: transform 0.12s;
}

table.mr-tbl td .btn-sm:not(.btn-icon):not(.rounded-circle):hover {
    color: var(--mr-blue) !important;
}

table.mr-tbl td .btn-sm:not(.btn-icon):not(.rounded-circle):has(.ti-history) i { color: #7C3AED; font-size: 16px; }
table.mr-tbl td .btn-sm:not(.btn-icon):not(.rounded-circle):has(.ti-eye) i { color: #0E9384; font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
    table.mr-tbl td .btn { transition: none !important; }
    table.mr-tbl td .btn:hover { transform: none !important; }
}

/* =====================================================================
   Accordion rows (Cost Report: day -> offers -> traffic sources), Meta style
   ===================================================================== */
/* (open rows are not tinted: levels read from weight and indent, as in the tree tables) */

/* rows inside: lighter, numbers muted, P&L / ROI keep their colour */
table.mr-tbl > tbody > tr.mr-acc-row > td {
    color: var(--mr-ink-2);
}

table.mr-tbl > tbody > tr.mr-acc-l2 > td {
    font-weight: 500;
}

table.mr-tbl > tbody > tr.mr-acc-l3 > td {
    font-weight: 400;
}

table.mr-tbl > tbody > tr.mr-acc-row > td.mr-good { color: var(--mr-green); font-weight: 600; }
table.mr-tbl > tbody > tr.mr-acc-row > td.mr-bad { color: var(--mr-red); font-weight: 600; }

.mr-acc-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--mr-ink-2);
    vertical-align: middle;
}

.mr-acc-name img {
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px;
}

.mr-acc-cell:has(.mr-acc-toggle) {
    cursor: pointer;
}

.mr-acc-cell .mr-acc-text,
.mr-acc-cell .mr-acc-name {
    color: var(--mr-ink);
}

table.mr-tbl > tbody > tr:not(.mr-acc-row) .mr-acc-cell .mr-acc-text {
    font-weight: 600;
}

table.mr-tbl > tbody > tr.mr-acc-row[hidden] {
    display: none !important;
}

/* pill + name side by side; the name (not the pill) shortens with "…" when the column is narrow */
.mr-acc-cell {
    display: flex;
    align-items: center;
    min-width: 0;
}

.mr-acc-name {
    display: flex;
    align-items: center;
    min-width: 0;
}

.mr-acc-name > img,
.mr-acc-name > i {
    flex: none;
}

.mr-acc-name > span,
.mr-acc-cell > .mr-acc-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* locked columns (Date, Offer, Traffic source in the reports) stay put: no grab cursor */
table.mr-tbl > thead > tr > th.mr-th.mr-locked {
    cursor: pointer;
}

/* =====================================================================
   Tree table (dashboard: Media buyer > Offer > Traffic source)
   ===================================================================== */
table.mr-tree .mr-tree-name {
    font-weight: 600;
    color: var(--mr-ink);
}

table.mr-tree .mr-tree-name > * {
    vertical-align: middle;
}

table.mr-tree .mr-tree-l2 {
    font-weight: 500;
    color: var(--mr-ink-2);
}

table.mr-tree .mr-tree-l3 {
    font-weight: 400;
    color: var(--mr-ink-2);
}

/* indent by level (margin on the caret, so cell padding rules do not matter) */
table.mr-tree .mr-tree-l2 > :first-child { margin-left: 24px; }
table.mr-tree .mr-tree-l3 > :first-child { margin-left: 48px; }

.mr-tree-toggle,
.mr-tree-toggle-space {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 6px;
}

.mr-tree-toggle {
    padding: 0;
    border: none;
    border-radius: 4px;
    background: none;
    color: #8A94A6;
    cursor: pointer;
}

.mr-tree-toggle i {
    font-size: 11px;
    transition: transform 0.15s;
}

.mr-tree-toggle:hover {
    background: var(--mr-hover);
    color: var(--mr-ink);
}

.mr-tree-toggle[aria-expanded="true"] i {
    transform: rotate(90deg);
}

table.mr-tree .mr-tree-name img {
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px;
    border-radius: 4px;
}

table.mr-tree .mr-tree-name {
    cursor: default;
}

table.mr-tree tr:has(.mr-tree-toggle) .mr-tree-name {
    cursor: pointer;
}

.mr-tree-count {
    margin-left: 6px;
    color: #8A94A6;
    font-weight: 400;
}

.mr-tree-none {
    color: #AEB5C0;
}

table.mr-tree td.mr-good { color: var(--mr-green); }
table.mr-tree td.mr-bad { color: var(--mr-red); }

/* share of spend: a thin gold bar + the percentage */
.mr-share {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mr-share-bar {
    position: relative;
    flex: 1 1 auto;
    min-width: 80px;
    height: 8px;
    border: 1px solid #DCE2EA;
    border-radius: 999px;
    background: #F4F6F9;
    overflow: hidden;
}

.mr-share-bar > i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    background: #BF9346;
}

.mr-share-pct {
    flex: none;
    min-width: 44px;
    color: var(--mr-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

table.mr-tree .mr-tree-r1 > td {
    border-top: 1px solid var(--mr-line);
}

/* Cost Report: one tree column (day > offer > traffic source), indent by level */
.mr-acc-cell.mr-tree-l1 .mr-acc-text { font-weight: 600; color: var(--mr-ink); }
.mr-acc-cell.mr-tree-l2 { padding-left: 24px; }
.mr-acc-cell.mr-tree-l2 .mr-acc-text { font-weight: 500; color: var(--mr-ink); }
.mr-acc-cell.mr-tree-l3 { padding-left: 48px; }
.mr-acc-cell.mr-tree-l3 .mr-acc-text { font-weight: 400; color: var(--mr-ink-2); }

.mr-acc-cell .mr-tree-count {
    flex: none;
}

/* Cost Report tree, open rows:
   a day row is tinted green (ROI up) or red (ROI down); an open offer row is grey (the row-hover colour) and bold */
table.mr-tbl > tbody > tr.mr-acc-open.mr-roi-pos > td {
    background-color: #E6F4EC !important;
}

table.mr-tbl > tbody > tr.mr-acc-open.mr-roi-neg > td {
    background-color: #FBE7E5 !important;
}

table.mr-tbl > tbody > tr.mr-acc-row.mr-acc-l2.mr-acc-open > td {
    background-color: #E9EDF2 !important;
    font-weight: 700;
}

/* an open day is framed: thick line on top of the date row, and under the last row of its group */
table.mr-tbl > tbody > tr.mr-acc-open:not(.mr-acc-row) > td {
    border-top: 2px solid #9AA6B8 !important;
}

table.mr-tbl > tbody > tr.mr-acc-last > td {
    border-bottom: 2px solid #9AA6B8 !important;
}

table.mr-tbl > tbody > tr.mr-acc-row.mr-acc-l2.mr-acc-open .mr-acc-text {
    font-weight: 700;
}

html[data-bs-theme="dark"] table.mr-tbl > tbody > tr.mr-acc-open.mr-roi-pos > td { background-color: rgba(76, 191, 134, 0.14) !important; }
html[data-bs-theme="dark"] table.mr-tbl > tbody > tr.mr-acc-open.mr-roi-neg > td { background-color: rgba(239, 122, 114, 0.14) !important; }

/* traffic source rows: an arrow on the left, from the offer above */
.mr-tree-leaf {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    color: #8A94A6;
}

.mr-tree-leaf i {
    font-size: 15px;
}

/* ROI with an up / down arrow (Cost Report tree rows) */
.mr-roi {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mr-roi i {
    font-size: 13px;
}

.mr-roi-up { color: var(--mr-green); }
.mr-roi-down { color: var(--mr-red); }
.mr-roi-flat { color: var(--mr-muted); font-weight: 500; }

/* ROI arrow right after an offer / traffic source name */
.mr-name-trend {
    display: inline-flex;
    flex: none;
    align-items: center;
    margin-left: 6px;
}

.mr-name-trend i {
    font-size: 14px;
}

/* filter-bar dropdowns: room for the field icon; the open list is as wide as its longest option (one line each) */
.mr-fbar .app-search .sel-btn,
.mr-fbar .input-icon-group .sel-btn {
    padding-left: 36px;
}

.sel-drop {
    max-width: min(560px, calc(100vw - 16px));
}

.sel-list li > span {
    white-space: nowrap;
}

/* dialog bodies are white, also over page rules (e.g. a grey .modal-body-custom) */
.modal-content > .modal-body,
.modal-content > form > .modal-body,
.modal-content .modal-body.modal-body-custom {
    background-color: var(--mr-panel) !important;
}

/* a 4-figure KPI strip (e.g. the totals in the Add / Edit cost dialog) */
.mr-kpis.mr-kpis-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 767.98px) {
    .mr-kpis.mr-kpis-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* date fields with a calendar icon: the same height as the dropdowns next to them */
.input-icon-group > input.form-control {
    height: 35px;
    padding-top: 0;
    padding-bottom: 0;
}

/* a field with an icon inside on the left (the dashboard's date range, the Add Cost date) */
.input-icon-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon-group > .input-icon {
    position: absolute;
    left: 12px;
    font-size: 16px;
}

.input-icon-group > input.form-control {
    padding-left: 36px;
}

/* dropdowns in the Add / Edit cost rows fill their cell */
#trafficCategoryModal .entry-row .mr-sel {
    width: 100%;
}

/* Add / Edit cost rows: P&L and ROI per row, the table's red trash icon to remove a row */
#trafficCategoryModal .entry-row .row-pnl,
#trafficCategoryModal .entry-row .row-roi {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#trafficCategoryModal .entry-row .input-group-text {
    padding-left: 7px;
    padding-right: 7px;
}

.btn.mr-row-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-height: 0;
    padding: 0;
    border: none;
    background: none;
    color: #DC2626;
    transition: transform 0.12s;
}

.btn.mr-row-del i {
    font-size: 17px;
    line-height: 1;
}

.btn.mr-row-del:hover,
.btn.mr-row-del:focus-visible {
    background: none;
    color: #DC2626;
    transform: scale(1.15);
}

/* a wider dialog than modal-xl (the Add / Edit cost dialog) */
@media (min-width: 1200px) {
    .modal-dialog.mr-modal-wide {
        max-width: min(1440px, calc(100vw - 64px));
    }
}

/* ---------- Date picker extras, as Meta Reporting: dots on days with data, today, footer note, Clear ---------- */
html .daterangepicker td.mr-data,
.flatpickr-day.mr-data {
    position: relative;
}

html .daterangepicker td.mr-data::after,
.flatpickr-day.mr-data::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--mr-green);
    pointer-events: none;
}

html .daterangepicker td.mr-data.active::after,
html .daterangepicker td.mr-data.start-date::after,
html .daterangepicker td.mr-data.end-date::after,
.flatpickr-day.mr-data.selected::after {
    background: #fff;
}

html .daterangepicker td.off.mr-data::after {
    opacity: 0.5;
}

html .daterangepicker td.mr-today:not(.active):not(.in-range) {
    font-weight: 700;
    background: #EEF1F5;
    border-radius: 6px;
}

html .daterangepicker .drp-buttons .mr-dr-note {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-right: auto;
    color: var(--mr-muted);
    font-size: 12px;
}

html .daterangepicker .drp-buttons .mr-dr-note i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mr-green);
}

html .daterangepicker .drp-buttons .cancelBtn {
    background: var(--mr-panel) !important;
    border: 1px solid var(--mr-line) !important;
    color: var(--mr-ink) !important;
}

html .daterangepicker .drp-buttons .cancelBtn:hover {
    background: #F6F8FB !important;
}

html .daterangepicker .ranges li {
    white-space: nowrap;
}

html .daterangepicker .ranges li {
    line-height: 1.5;
}

html .daterangepicker.show-calendar .drp-buttons,
html .daterangepicker.show-ranges .drp-buttons {
    display: flex;
    line-height: 1.4;
}

html .daterangepicker td.off.in-range:not(.start-date):not(.end-date) {
    background: none;
}

html .daterangepicker.single .drp-selected {
    display: inline-block;
}

/* =====================================================================
   Sidebar layout as Meta Reporting: header, scrolling menu, footer buttons.
   Collapsed: an icon rail; the header keeps its full width over the top bar so the logo stays visible.
   ===================================================================== */
.sidenav-menu {
    display: flex;
    flex-direction: column;
}

.sidenav-menu > .scrollbar {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
}

.sidenav-menu .sb-head {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 100%;
    background: var(--mr-panel);
}

.sidenav-menu .side-nav .side-nav-item .side-nav-link {
    padding: 9px 12px;
    font-size: 14px;
}

.sidenav-menu .side-nav .side-nav-link .menu-icon {
    width: 20px;
    font-size: 19px;
}

/* footer: main action (blue) and a plain button */
.sidenav-menu .sb-foot {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 12px;
    padding: 12px 0 14px;
    border-top: 1px solid var(--sb-border);
}

.sidenav-menu .sb-foot .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.sidenav-menu .sb-foot .btn i {
    font-size: 18px;
}

.sidenav-menu .sb-foot .sb-foot-btn {
    background: var(--mr-panel);
    border: 1px solid var(--mr-line);
    color: var(--mr-ink);
}

.sidenav-menu .sb-foot .sb-foot-btn:hover {
    background: var(--mr-head-bg);
    border-color: #AEB8C7;
}

/* collapsed: the header stays as wide as the open sidebar (logo + badge visible) */
@media (min-width: 768px) {
    html[data-sidenav-size="condensed"] .sidenav-menu .sb-head {
        width: 268px;
        padding: 0 calc((var(--theme-sidenav-width-sm, 70px) - 36px) / 2);
        border-right: 1px solid var(--sb-border);
    }

    html[data-sidenav-size="condensed"] .app-topbar .topbar-menu {
        padding-left: calc(268px - var(--theme-sidenav-width-sm, 70px) + 12px);
    }

    html[data-sidenav-size="condensed"] .sidenav-menu .sb-foot {
        margin: 0 10px;
    }

    html[data-sidenav-size="condensed"] .sidenav-menu .sb-foot .btn {
        height: 44px;
        padding: 0;
    }

    html[data-sidenav-size="condensed"] .sidenav-menu .sb-foot .btn span {
        display: none;
    }
}

/* the theme makes the collapsed rail as tall as the page; keep it fixed to the window so the footer stays in view */
@media (min-width: 768px) {
    html[data-sidenav-size="condensed"] .sidenav-menu {
        position: fixed !important;
        top: 0;
        bottom: 0;
        height: 100vh !important;
    }

    html[data-sidenav-size="condensed"] .sidenav-menu > .scrollbar {
        overflow-x: hidden;
        overflow-y: auto;
    }
}

/* the icon rail scrolls on short windows without showing a scrollbar */
html[data-sidenav-size="condensed"] .sidenav-menu > .scrollbar {
    scrollbar-width: none;
}

html[data-sidenav-size="condensed"] .sidenav-menu > .scrollbar::-webkit-scrollbar {
    display: none;
}

html[data-sidenav-size="condensed"] .sidenav-menu .simplebar-track {
    display: none;
}

/* Inter everywhere: text, form fields, buttons, plugin popups, chart labels (SVG text).
   Icon fonts keep theirs: their classes (.ti, .ri-*, .bx) set font-family with !important and a class beats "*". */
html,
body,
body *:not(code):not(pre):not(kbd):not(samp) {
    font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif !important;
}

/* sidebar text weights as Meta Reporting: regular items, semibold active item, lighter section titles and buttons */
.sidenav-menu .side-nav .side-nav-item .side-nav-link {
    font-weight: 400;
}

.sidenav-menu .side-nav .side-nav-item .side-nav-link.active,
.sidenav-menu .side-nav .side-nav-item.active > .side-nav-link {
    font-weight: 600;
}

.sidenav-menu .side-nav .side-nav-title {
    font-weight: 600;
}

.sidenav-menu .sb-foot .btn {
    font-weight: 500;
}

.sidenav-menu .sb-badge {
    font-weight: 500;
}

/* Date range + Month in the page heading: a borderless group next to the main button */
.mr-fbar.mr-fbar-inline {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.mr-fbar.mr-fbar-inline .mr-ffield {
    gap: 0;
}

.mr-pagehead-actions {
    justify-content: flex-end;
}

.mr-pagehead-actions > .btn {
    height: 38px;
    display: inline-flex;
    align-items: center;
}

/* "Clear filters": an icon button the size of the fields, on their line */
.mr-fbar .mr-fbar-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border: 1px solid var(--mr-field-line);
    border-radius: 6px;
    background: var(--mr-panel);
    color: var(--mr-muted);
    text-decoration: none;
}

.mr-fbar .mr-fbar-clear i {
    font-size: 18px;
}

.mr-fbar .mr-fbar-clear:hover,
.mr-fbar .mr-fbar-clear:focus-visible {
    background: #FDECEA;
    border-color: #F3C3BE;
    color: var(--mr-red);
    text-decoration: none;
}

@media (max-width: 767.98px) {
    .mr-fbar.mr-fbar-inline {
        flex-wrap: wrap;
    }
}

/* heading row: date fields a little narrower so title + buttons fit on one line on laptop screens */
.mr-fbar-inline .mr-ffield:has(.mr-dr-input) .app-search,
.mr-fbar-inline .mr-ffield:has(.mr-dr-input) .input-icon-group,
.mr-fbar-inline .mr-ffield:has(.mr-dr-input) input {
    width: 250px !important;
}

.mr-fbar-inline .mr-ffield:has(select) .app-search,
.mr-fbar-inline .mr-ffield:has(select) .input-icon-group,
.mr-fbar-inline .mr-ffield:has(select) .sel {
    width: 190px !important;
}

.mr-pagehead > :first-child {
    flex: 0 1 auto;
    min-width: 200px;
}

.mr-pagehead-actions {
    flex: 1 1 auto;
}

/* page buttons (Export, Add ...) at the right end of the filter box, on the fields' line */
.mr-fbar .mr-fbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    align-self: flex-end;
}

.mr-fbar .mr-fbar-actions > .btn {
    display: inline-flex;
    align-items: center;
    height: 38px;
    white-space: nowrap;
}

/* icon-only button (Export) the size of the fields */
.btn.mr-icon-btn {
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--mr-panel);
    border: 1px solid var(--mr-field-line);
    color: var(--mr-ink-2);
}

.btn.mr-icon-btn i {
    font-size: 18px;
}

.btn.mr-icon-btn:hover,
.btn.mr-icon-btn:focus-visible {
    background: var(--mr-blue-soft);
    border-color: #B9CDEA;
    color: var(--mr-blue);
}

/* heading date range + month: white fields */
.mr-fbar.mr-fbar-inline .form-control,
.mr-fbar.mr-fbar-inline .form-select,
.mr-fbar.mr-fbar-inline .sel-btn {
    background-color: #fff;
}

.mr-fbar.mr-fbar-inline .form-control:hover,
.mr-fbar.mr-fbar-inline .sel-btn:hover {
    background-color: #F6F8FB;
}

/* date fields: a pointer, they open a calendar */
input.mr-dr-input,
.mr-dr-field input,
input[data-provider="flatpickr"],
input.flatpickr-input,
.daterangepicker td.available,
.daterangepicker .ranges li {
    cursor: pointer !important;
}

/* open day group: top and closing borders green (ROI positive) or red (ROI negative) */
table.mr-tbl > tbody > tr.mr-acc-open.mr-roi-pos:not(.mr-acc-row) > td {
    border-top-color: var(--mr-green) !important;
}

table.mr-tbl > tbody > tr.mr-acc-open.mr-roi-neg:not(.mr-acc-row) > td {
    border-top-color: var(--mr-red) !important;
}

table.mr-tbl > tbody > tr.mr-acc-last.mr-acc-last-pos > td {
    border-bottom-color: var(--mr-green) !important;
}

table.mr-tbl > tbody > tr.mr-acc-last.mr-acc-last-neg > td {
    border-bottom-color: var(--mr-red) !important;
}

/* table (70%) with KPI cards beside it (30%); stacked on smaller screens */
.mr-split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 16px;
    align-items: start;
}

.mr-split-main {
    min-width: 0;
}

.mr-split-side {
    position: sticky;
    top: calc(var(--theme-topbar-height, 52px) + 16px);
    min-width: 0;
}

.mr-kpis.mr-kpis-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 0;
}

.mr-kpis.mr-kpis-side .mr-kpi-v {
    font-size: 22px;
}

@media (max-width: 1199.98px) {
    .mr-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .mr-split-side {
        position: static;
        order: -1;
    }

    .mr-kpis.mr-kpis-side {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .mr-kpis.mr-kpis-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Cost Report: table and side panel half each; KPI cells 4 across, then the two top lists side by side */
.mr-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.mr-split-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.mr-split-side > .mr-kpis {
    grid-column: 1 / -1;
}

.mr-kpis.mr-kpis-side {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mr-kpis.mr-kpis-side .mr-kpi-v {
    font-size: 20px;
}

/* top performers list */
.mr-top {
    min-width: 0;
    background: var(--mr-panel);
    border: 1px solid var(--mr-line);
    border-radius: 10px;
    overflow: hidden;
}

.mr-top-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--mr-line);
    color: var(--mr-ink);
    font-size: 13.5px;
    font-weight: 600;
}

.mr-top-cols {
    display: flex;
    gap: 0;
    color: var(--mr-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mr-top-cols > span:first-child { width: 92px; text-align: right; }
.mr-top-cols > span:last-child { width: 78px; text-align: right; }

.mr-top-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mr-top-list > li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.mr-top-list > li + li {
    border-top: 1px solid #EEF1F5;
}

.mr-top-rank {
    flex: none;
    width: 18px;
    color: var(--mr-muted);
    font-size: 12px;
    font-weight: 600;
}

.mr-top-name {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--mr-ink);
}

.mr-top-name img {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: contain;
}

.mr-top-name > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-top-pnl {
    flex: none;
    width: 92px;
    text-align: right;
    font-weight: 600;
}

.mr-top-roi {
    flex: none;
    width: 78px;
    text-align: right;
    white-space: nowrap;
}

.mr-top-list > li.mr-top-empty {
    justify-content: center;
    padding: 18px 12px;
    color: var(--mr-muted);
}

@media (max-width: 1599.98px) {
    .mr-kpis.mr-kpis-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mr-split-side {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1199.98px) {
    .mr-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .mr-split-side {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .mr-kpis.mr-kpis-side {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .mr-split-side {
        grid-template-columns: minmax(0, 1fr);
    }

    .mr-kpis.mr-kpis-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* the side panel is taller now: scroll with the page */
.mr-split-side {
    position: static;
}

/* top lists one under the other beside the table, so names have room */
@media (min-width: 1200px) {
    .mr-split-side {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Cost Report: table 60%, side panel 40% */
@media (min-width: 1200px) {
    .mr-split {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
}

/* columns are fixed (no drag / resize): plain header cursor */
table.mr-tbl > thead > tr > th.mr-th {
    cursor: default;
}

table.mr-tbl > thead > tr > th.mr-th.dt-orderable-asc,
table.mr-tbl > thead > tr > th.mr-th.dt-orderable-desc,
table.mr-tbl > thead > tr > th.mr-th.sorting {
    cursor: pointer;
}

/* top lists: Revenue, Spend, P&L, ROI columns (narrower so names keep room) */
.mr-top-cols > span,
.mr-top-cols > span:first-child,
.mr-top-cols > span:last-child {
    width: 74px;
    text-align: right;
}

.mr-top-cols > span:last-child {
    width: 66px;
}

.mr-top-list > li {
    gap: 6px;
    font-size: 12.5px;
}

.mr-top-num,
.mr-top-pnl {
    flex: none;
    width: 74px;
    text-align: right;
    white-space: nowrap;
}

.mr-top-num {
    color: var(--mr-ink-2);
}

.mr-top-roi {
    width: 66px;
}

.mr-top-head {
    gap: 6px;
}

.mr-top-cols {
    gap: 6px;
}

/* top lists: compact money ($22.2K) so names keep room; title on its own line above the column labels */
.mr-top-head {
    flex-wrap: wrap;
    row-gap: 4px;
}

.mr-top-head > span:first-child {
    flex: 1 0 100%;
}

.mr-top-cols {
    margin-left: auto;
}

.mr-top-cols > span,
.mr-top-cols > span:first-child,
.mr-top-cols > span:last-child,
.mr-top-num,
.mr-top-pnl,
.mr-top-roi {
    width: 58px;
}

.mr-top-cols > span:last-child,
.mr-top-roi {
    width: 64px;
}

/* filter box: flat (no shadow), just the border */
.mr-fbar {
    box-shadow: none;
}

/* filter fields without titles above them (the placeholder / "All ..." text says what they are);
   the labels stay for screen readers */
.mr-fbar .mr-ffield > label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.mr-fbar:not(.mr-fbar-inline) {
    align-items: center;
    padding: 12px 16px;
}

.mr-fbar .mr-fbar-actions,
.mr-fbar .mr-fbar-clear {
    align-self: center;
}

/* a chart card whose chart is switched off: just its header, no line under it */
.card > .card-header:has(+ .card-body[style*="display: none"]),
.card > .card-header:has(+ .card-body.d-none) {
    border-bottom-color: transparent;
}

/* Traffic Source page tree: traffic source rows (icon, name, account count), account rows under them */
#ts-tree > tbody > tr.ts-src > td {
    background-color: var(--mr-head-bg);
    font-weight: 600;
}

#ts-tree > tbody > tr.ts-src.mr-acc-open > td {
    border-top: 1px solid var(--mr-line) !important;
}

#ts-tree .ts-icon {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    object-fit: contain;
}

#ts-tree .ts-icon-fallback {
    flex: none;
    color: var(--mr-muted);
    font-size: 18px;
}

#ts-tree .mr-acc-cell {
    gap: 8px;
}

#ts-tree > tbody > tr.ts-acc > td {
    font-weight: 400;
}

#ts-tree > tbody > tr.ts-empty > td {
    padding: 28px 12px;
    text-align: center;
    color: var(--mr-muted);
}

#ts-tree .badge {
    font-weight: 600;
}

/* account rows: an empty slot where a source row has "Add account", so edit / delete line up */
#ts-tree .ts-act-space {
    display: inline-block;
    width: 26px;
    flex: none;
}

/* Traffic Source tree: money columns and the total row */
#ts-tree td.text-end {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#ts-tree > tfoot > tr.ts-total > td {
    background-color: var(--mr-head-bg);
    border-top: 1px solid #BFC8D6;
    font-weight: 650;
    text-transform: uppercase;
    font-size: 12.5px;
}

#ts-tree > tfoot > tr.ts-total > td.text-end {
    font-size: 13.5px;
    text-transform: none;
}

/* Traffic Source tree: traffic source rows bold on a light blue background */
#ts-tree > tbody > tr.ts-src > td {
    background-color: var(--mr-blue-soft) !important;
    font-weight: 700;
}

#ts-tree > tbody > tr.ts-src > td .mr-acc-text {
    font-weight: 700;
}

#ts-tree > tbody > tr.ts-src:hover > td {
    background-color: #DCE8F7 !important;
}

/* Traffic Source tree: space between the Actions column and the money columns (Top-ups) */
html body #ts-tree.mr-tbl > thead > tr > th:nth-child(4),
html body #ts-tree.mr-tbl > tbody > tr > td:nth-child(4),
html body #ts-tree.mr-tbl > tfoot > tr > td:nth-child(4) {
    padding-left: 36px !important;
}

/* Traffic Source tree: status pill (opens a menu) and the menu */
#ts-tree .ts-status {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.5;
}

#ts-tree .ts-status i {
    font-size: 11px;
    opacity: 0.7;
}

.ts-status-menu {
    position: absolute;
    z-index: 1080;
    min-width: 170px;
    padding: 6px;
    background: var(--mr-panel);
    border: 1px solid var(--mr-line);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(23, 32, 49, 0.18);
    animation: mrPopIn 0.12s ease-out;
}

.ts-status-menu button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    background: none;
    text-align: left;
    cursor: pointer;
}

.ts-status-menu button:hover {
    background: #F3F6FA;
}

.ts-status-menu button i {
    color: var(--mr-blue);
    font-size: 15px;
}

.ts-status-menu .badge {
    font-size: 12px;
}

.ts-status-note {
    margin-top: 4px;
    padding: 6px 8px 2px;
    border-top: 1px solid #EEF1F5;
    color: var(--mr-muted);
    font-size: 11.5px;
}

/* Cost Report summary cards: Revenue, Spent, P&L, Share (total / daily avg / monthly est, trend line, estimate) */
.mr-sumcards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.mr-sumcard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 14px 16px 12px;
    background: var(--mr-panel);
    border: 1px solid var(--mr-line);
    border-radius: 10px;
}

.mr-sumcard-head {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mr-muted);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mr-sumcard-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sc) 12%, transparent);
    color: var(--sc);
    font-size: 16px;
}

.mr-sumcard-figs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px;
}

.mr-sumcard-figs > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 0 10px;
}

.mr-sumcard-figs > div:first-child {
    padding-left: 0;
}

.mr-sumcard-figs > div + div {
    border-left: 1px solid #EEF1F5;
}

.mr-sumcard-figs span {
    color: var(--mr-muted);
    font-size: 12px;
}

.mr-sumcard-figs b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mr-ink);
    font-size: 17px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mr-sumcard-spark {
    min-height: 64px;
    margin: 12px -4px 8px;
}

.mr-sumcard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #EEF1F5;
}

.mr-sumcard-pill {
    padding: 2px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--sc) 12%, transparent);
    color: var(--sc);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.mr-sumcard-range {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    color: var(--mr-muted);
    font-size: 11.5px;
    white-space: nowrap;
}

.mr-sumcard-range > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1399.98px) {
    .mr-sumcards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .mr-sumcards {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* the side panel keeps ROI, Margin and Days: three across */
.mr-kpis.mr-kpis-side.mr-kpis-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* summary card figures: shrink a little on narrower screens so $117,226 fits */
.mr-sumcard-figs b {
    font-size: clamp(14px, 1.02vw, 17px);
}

.mr-sumcard-figs > div {
    padding: 0 8px;
}

.mr-sumcard-figs {
    grid-template-columns: auto auto auto;
    justify-content: start;
}

/* =====================================================================
   Page change: the content zooms out as you leave a page and zooms in on the new one
   (cross-page view transition; the sidebar and top bar stay put).
   Table loading: no "..." dots, the rows fade while new data loads.
   ===================================================================== */
/* page changes now show a spinner (partials/page-spinner.blade.php) instead of the zoom: */
@view-transition {
    navigation: none;
}

/* the content gets its transition name only while the page changes (set in the layout head), since a
   name makes its own layer: dialogs inside the content would sit under the sidebar and top bar */
.content-page.mr-vt {
    view-transition-name: mr-page;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
}

::view-transition-old(mr-page) {
    animation: mrPageOut 0.18s ease-in both;
}

::view-transition-new(mr-page) {
    animation: mrPageIn 0.32s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes mrPageOut {
    to { opacity: 0; transform: scale(0.97); }
}

@keyframes mrPageIn {
    from { opacity: 0; transform: scale(1.03); }
}

/* browsers without page transitions: the new page still zooms in */
@supports not (view-transition-name: none) {
    .content-page {
        animation: mrPageIn 0.32s cubic-bezier(0.2, 0.8, 0.3, 1) both;
    }
}

/* DataTables "processing" dots: hidden; the table body fades and eases back in when the data arrives */
div.dt-processing {
    display: none !important;
}

.dt-container:has(> div.dt-processing[style*="display: block"]) table > tbody,
.dt-container:has(div.dt-processing[style*="display: block"]) table > tbody {
    opacity: 0.4;
    transform: scale(0.995);
}

.dt-container table > tbody {
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform-origin: top center;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(mr-page),
    ::view-transition-new(mr-page),
    .content-page {
        animation: none !important;
    }

    .dt-container table > tbody {
        transition: none;
    }
}

/* summary card figures: the three columns share the card's width (never narrower than their numbers) */
.mr-sumcard-figs {
    grid-template-columns: repeat(3, minmax(max-content, 1fr));
    justify-content: stretch;
}

/* top lists: full amounts ($22,214), so the number columns are a little wider */
.mr-top-cols > span,
.mr-top-cols > span:first-child,
.mr-top-num,
.mr-top-pnl {
    width: 66px;
}

.mr-top-cols > span:last-child,
.mr-top-roi {
    width: 62px;
}

/* selection bar: its own strip between the card header and the table */
.card > .ts-bulk {
    margin: 0;
    padding: 8px 16px;
    border: 0;
    border-bottom: 1px solid #C9D9EF;
    border-radius: 0;
}

/* a ticked traffic source row: a slightly stronger blue */
#ts-tree > tbody > tr.ts-src.ts-selected > td {
    background-color: #D5E3F7 !important;
}

.ts-bulk .ts-bulk-delete:disabled {
    opacity: 0.45;
}

/* =====================================================================
   App chrome: Meta Expenses top bar and sidebar, the same as the Banks part
   (resources/views/Layout/header.blade.php mirrors layouts/partials/{topbar,sidebar}.blade.php)
   ===================================================================== */
:root {
    --theme-sidenav-width: 224px;
    --theme-sidenav-width-sm: 64px;
    --theme-topbar-height: 52px;
    --px-line: #D8DEE7;
    --px-ink: #172031;
    --px-ink-2: #3A4456;
    --px-muted: #5E6878;
    --px-subtle: #8A94A6;
    --px-brand: #1457A8;
    --px-brand-soft: #E3ECF8;
    --px-hover: #F4F7FB;
    --px-surface-2: #F3F5F8;
}

body {
    background: #EEF1F5;
}

/* icons inside the chrome */
.px-topbar svg,
.px-side svg {
    flex: none;
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
}

.px-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--px-muted);
    cursor: pointer;
    transition: background-color .12s, color .12s;
}

.px-icon-btn:hover {
    background: var(--px-surface-2);
    color: var(--px-ink);
}

/* ---------- top bar ---------- */
.app-topbar.px-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    min-height: 52px;
    padding: 0 24px;
    background: #fff !important;
    border-bottom: 1px solid var(--px-line);
    box-shadow: 0 1px 3px rgba(23, 32, 49, 0.04);
}

.px-only-mobile {
    display: none;
    margin-left: -4px;
}

.px-crumb {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 13.5px;
}

.px-crumb-section {
    color: var(--px-subtle);
}

.px-crumb .px-crumb-sep {
    width: 14px;
    height: 14px;
    color: var(--px-subtle);
}

.px-crumb-page {
    overflow: hidden;
    color: var(--px-ink);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.px-topbar-end {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.px-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 4px;
    border: 0;
    border-radius: 8px;
    background: none;
    cursor: pointer;
}

.px-user-btn:hover {
    background: var(--px-surface-2);
}

.px-topbar .px-user-caret {
    width: 16px;
    height: 16px;
    color: var(--px-subtle);
}

.px-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--px-brand);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.px-user-menu {
    width: 240px;
    padding: 6px;
    border: 1px solid var(--px-line);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(23, 32, 49, 0.18);
}

.px-user-menu-head {
    padding: 6px 10px 10px;
    border-bottom: 1px solid var(--px-line);
}

.px-user-name {
    overflow: hidden;
    margin: 0;
    color: var(--px-ink);
    font-size: 13.5px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.px-user-email,
.px-user-role {
    overflow: hidden;
    margin: 0;
    color: var(--px-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.px-user-role {
    color: var(--px-subtle);
}

.px-user-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--px-ink-2);
    font-size: 13.5px;
    text-decoration: none;
}

.px-user-menu-item:hover {
    background: var(--px-surface-2);
    color: var(--px-ink);
}

.px-user-menu-item.is-danger:hover {
    background: #FDECEA;
    color: #C0392B;
}

.px-user-menu-item svg {
    width: 16px;
    height: 16px;
}

/* light / dark icon on the theme button */
.px-when-dark { display: none; }
html[data-bs-theme="dark"] .px-when-dark { display: block; }
html[data-bs-theme="dark"] .px-when-light { display: none; }

/* ---------- sidebar ---------- */
.sidenav-menu.px-side {
    display: flex;
    flex-direction: column;
    width: var(--theme-sidenav-width);
    background: #fff !important;
    border-right: 1px solid var(--px-line) !important;
}

.px-side-head {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 12px 0 16px;
    border-bottom: 1px solid var(--px-line);
}

.px-side-logo {
    display: flex;
    min-width: 0;
    align-items: center;
}

.px-side-logo img {
    height: 22px;
    width: auto;
}

.px-side-badge {
    margin-left: auto;
    padding: 1px 7px;
    border: 1px solid var(--px-line);
    border-radius: 999px;
    color: var(--px-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.px-side-toggle {
    width: 32px;
    height: 32px;
}

.px-when-collapsed { display: none; }

.px-side-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px 12px;
    scrollbar-width: thin;
}

.px-side-section + .px-side-section {
    margin-top: 20px;
}

.px-side-title {
    margin: 0;
    padding: 4px 10px 8px;
    color: var(--px-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.px-side-rule {
    display: none;
    margin: 0 4px 8px;
    border-top: 1px solid var(--px-line);
}

.px-side-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.px-side-nav li + li {
    margin-top: 2px;
}

.px-side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--px-ink-2);
    font-size: 13.5px;
    line-height: 1.43;
    text-decoration: none;
    transition: background-color .12s, color .12s;
}

.px-side-link:hover {
    background: var(--px-hover);
    color: var(--px-ink);
}

.px-side-link.is-on {
    background: var(--px-brand-soft);
    color: var(--px-brand);
    font-weight: 600;
}

.px-side .px-side-ico {
    width: 16px;
    height: 16px;
}

.px-side-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.px-tone-blue { color: #1457A8; }
.px-tone-green { color: #1E7F4F; }
.px-tone-amber { color: #A86A00; }
.px-tone-teal { color: #3E7C8C; }
.px-tone-purple { color: #6E56CF; }
.px-tone-pink { color: #D6409F; }
.px-tone-grey { color: #6B7585; }

.px-side-user {
    flex: none;
    padding: 12px;
    border-top: 1px solid var(--px-line);
}

.px-side-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
    border-radius: 8px;
}

.px-side-user-text {
    flex: 1 1 auto;
    min-width: 0;
}

.px-side-user-text .px-user-name {
    font-size: 13px;
}

.px-side-logout {
    width: 32px;
    height: 32px;
    color: var(--px-subtle);
}

.px-side-logout:hover {
    background: var(--px-surface-2);
    color: #C0392B;
}

/* ---------- collapsed: an icon rail, as in Banks ---------- */
@media (min-width: 768px) {
    html[data-sidenav-size="condensed"] .sidenav-menu.px-side {
        width: var(--theme-sidenav-width-sm);
        position: fixed !important;
        top: 0;
        bottom: 0;
        height: 100vh !important;
    }

    html[data-sidenav-size="condensed"] .px-side-head {
        justify-content: center;
        padding: 0;
    }

    html[data-sidenav-size="condensed"] .px-side-logo,
    html[data-sidenav-size="condensed"] .px-side-badge,
    html[data-sidenav-size="condensed"] .px-side-title,
    html[data-sidenav-size="condensed"] .px-side-label,
    html[data-sidenav-size="condensed"] .px-side-user-text,
    html[data-sidenav-size="condensed"] .px-side-logout,
    html[data-sidenav-size="condensed"] .px-when-open {
        display: none;
    }

    html[data-sidenav-size="condensed"] .px-when-collapsed {
        display: block;
    }

    html[data-sidenav-size="condensed"] .px-side-nav {
        padding: 14px 8px;
    }

    html[data-sidenav-size="condensed"] .px-side-rule {
        display: block;
    }

    html[data-sidenav-size="condensed"] .px-side-link {
        justify-content: center;
        padding: 10px 0;
    }

    html[data-sidenav-size="condensed"] .px-side .px-side-ico {
        width: 18px;
        height: 18px;
    }

    html[data-sidenav-size="condensed"] .px-side-user-row {
        justify-content: center;
        padding: 6px 0;
    }
}

/* phones: menu button in the top bar, the sidebar slides in */
@media (max-width: 767.98px) {
    .px-only-mobile {
        display: inline-flex;
    }

    .app-topbar.px-topbar {
        padding: 0 16px;
    }

    .px-crumb-section,
    .px-crumb .px-crumb-sep {
        display: none;
    }
}

/* page area: the same padding as Banks */
.content-page > .container-fluid {
    max-width: 1680px;
    padding: 20px 26px 40px;
}

/* ---------- dark mode (the light / dark choice shared with Banks) ---------- */
html[data-bs-theme="dark"] {
    --px-line: #2A3242;
    --px-ink: #E6EAF0;
    --px-ink-2: #C3CAD5;
    --px-muted: #9AA4B2;
    --px-subtle: #7C8696;
    --px-brand-soft: rgba(91, 147, 224, 0.16);
    --px-hover: #1B2230;
    --px-surface-2: #1B2230;
}

html[data-bs-theme="dark"] body { background: #0B0D12; }
html[data-bs-theme="dark"] .app-topbar.px-topbar,
html[data-bs-theme="dark"] .sidenav-menu.px-side { background: #12161F !important; }
html[data-bs-theme="dark"] .px-side-link.is-on { color: #6A9FF0; }

/* page heading: same top spacing as the Banks pages */
.content-page .mr-pagehead {
    margin-top: 0;
}

/* =====================================================================
   Meta pages in the Banks style (the combined app's model): filter bar with labels, 35px fields
   and buttons, white secondary buttons, sticky filter bar under the top bar
   ===================================================================== */

/* filter fields keep their labels (12px, semibold, muted) */
.mr-fbar .mr-ffield > label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: nowrap !important;
    color: var(--mr-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.43;
}

.mr-fbar:not(.mr-fbar-inline) {
    position: sticky;
    top: 52px;
    z-index: 20;
    align-items: flex-end;
    gap: 10px 12px;
    padding: 10px 14px 12px;
    box-shadow: 0 4px 14px rgba(23, 32, 49, 0.07);
}

.mr-fbar .mr-fbar-actions,
.mr-fbar .mr-fbar-clear {
    align-self: flex-end;
}

/* fields: 35px, as Banks .ui-field */
.mr-fbar .form-control,
.mr-fbar .form-select,
.mr-fbar .sel-btn,
.mr-fbar .select2-container--default .select2-selection--single,
.input-icon-group > input.form-control,
.form-control,
.form-select,
.sel-btn {
    height: 35px;
    min-height: 35px;
}

textarea.form-control {
    height: auto;
}

.mr-fbar .select2-container--default .select2-selection--single .select2-selection__rendered,
.mr-fbar .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 33px;
    line-height: 33px;
}

.mr-fbar .mr-fbar-clear {
    width: 35px;
    height: 35px;
    min-height: 35px;
}

/* buttons: 35px, 4px corners, 14px medium; secondary = white with a field border */
.btn:not(.btn-sm):not(.btn-icon):not(.btn-xs):not(.btn-link):not(.mr-row-del):not(.mr-tree-toggle) {
    min-height: 35px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
}

.mr-pagehead-actions > .btn,
.mr-fbar-actions > .btn {
    height: 35px;
    padding: 0 12px;
    gap: 6px;
}

.btn-light,
.btn.btn-light {
    background-color: #fff;
    border: 1px solid var(--mr-field-line);
    color: var(--mr-ink);
}

.btn-light:hover,
.btn.btn-light:hover,
.btn-light:focus-visible {
    background-color: #F6F8FB;
    border-color: var(--mr-field-line-hover);
    color: var(--mr-ink);
}

.btn-primary,
.btn.btn-primary {
    background-color: #1457A8;
    border-color: #1457A8;
}

.btn-primary:hover,
.btn.btn-primary:hover {
    background-color: #10478A;
    border-color: #10478A;
}

/* page heading: buttons beside the title, as in Banks */
.mr-pagehead {
    align-items: center;
}

.mr-pagehead-actions {
    flex: 0 0 auto;
    gap: 8px;
}

/* filter fields as narrow as the Banks ones, so a bar fits on one row */
.mr-fbar:not(.mr-fbar-inline) .mr-ffield > .app-search,
.mr-fbar:not(.mr-fbar-inline) .mr-ffield > .input-icon-group {
    width: 175px !important;
}

.mr-fbar:not(.mr-fbar-inline) .mr-ffield:has(.mr-dr-input) > .app-search,
.mr-fbar:not(.mr-fbar-inline) .mr-ffield:has(.mr-dr-input) > .input-icon-group {
    width: 230px !important;
}

.mr-fbar:not(.mr-fbar-inline) .mr-ffield .sel,
.mr-fbar:not(.mr-fbar-inline) .mr-ffield input.mr-dr-input {
    width: 100% !important;
}

/* page description as an (i) tooltip next to the title (same styles as partials/page-tip.blade.php) */
        .px-tip {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            margin-left: 6px;
            border-radius: 50%;
            color: #8A94A6;
            vertical-align: middle;
            cursor: help;
            outline: none;
        }
        .px-tip:hover, .px-tip:focus-visible { color: #1457A8; background: #E3ECF8; }
        .px-tip > svg { width: 16px; height: 16px; }
        .px-tip-bubble {
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            z-index: 60;
            width: max-content;
            max-width: 320px;
            padding: 8px 10px;
            border-radius: 6px;
            background: #172031;
            color: #fff;
            font-size: 12.5px;
            font-weight: 400;
            letter-spacing: normal;
            line-height: 1.45;
            text-align: left;
            white-space: normal;
            box-shadow: 0 8px 24px rgba(23, 32, 49, .22);
            opacity: 0;
            visibility: hidden;
            transform: translate(-50%, -4px);
            transition: opacity .12s, transform .12s, visibility .12s;
            pointer-events: none;
        }
        .px-tip-bubble::before {
            content: "";
            position: absolute;
            top: -4px;
            left: 50%;
            width: 8px;
            height: 8px;
            margin-left: -4px;
            background: #172031;
            transform: rotate(45deg);
        }
        .px-tip:hover .px-tip-bubble, .px-tip:focus-visible .px-tip-bubble {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, 0);
        }
        /* the date range / month pickers at the right end of a page heading: white fields */
        .px-head-dates .ui-field { background-color: #fff; }
        .px-head-dates .ui-field:hover { background-color: #F6F8FB; }
    
.mr-pagehead-title {
    display: flex;
    align-items: center;
}

.px-tip-bubble .px-tip-text {
    margin: 0;
    color: #fff;
    font-size: 12.5px;
}

.mr-pagehead {
    margin-bottom: 14px;
}

/* Date range / Month in the heading: no labels (kept for screen readers) */
.mr-fbar.mr-fbar-inline .mr-ffield > label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

/* sidebar head: menu button first, then the logo */
.px-side-head {
    padding: 0 16px;   /* as the Banks sidebar (px-4) */
}