/*
 * SOS Finance portal, simple modern look (shadcn style) on top of sos-theme.css
 * same navy + teal, only the look changes: light sidebar, thin borders, grey secondary text,
 * one height for inputs and buttons, soft status pills, plain white headers.
 * loaded LAST in portal/template/app.blade.php and blank.blade.php. remove that one line and the old look is back.
 * light theme only. notes for new screens are in documentation/modules/ui-theme.md
 */

:root {
    --ui-bg: #F7F8FA;
    --ui-card: #FFFFFF;
    --ui-sidebar: #FBFBFC;
    --ui-fg: #0F1324;
    --ui-fg-soft: #3A4359;
    --ui-muted: #64708A;
    --ui-subtle: #F2F4F7;
    --ui-hover: #F4F5F7;
    --ui-border: #E4E7EC;
    --ui-border-strong: #D0D5DD;
    --ui-ring: 0 0 0 3px rgba(31, 127, 122, .22);
    --ui-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --ui-shadow-md: 0 8px 24px rgba(16, 24, 40, .08);
    --ui-radius: 8px;
    --ui-radius-lg: 10px;
    --ui-control: 36px;
    --ui-control-sm: 30px;
    --ui-menu-width: 288px;
    --ui-menu-mini: 60px;
    --ui-header-h: 56px;
}

/* ---------- base ---------- */

body {
    background-color: var(--ui-bg);
    color: var(--ui-fg);
    font-size: 14px;
    line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 { color: inherit; letter-spacing: -.015em; }
.text-muted { color: var(--ui-muted) !important; }
a { color: var(--brand-navy); }
a:hover { color: var(--brand-teal-dark); }
hr { background-color: var(--ui-border); }

/* ---------- sidebar (shadcn style) ---------- */
/* logo block on top, small grey group labels, 36px items with a soft grey active fill,
   chevrons on items with a sub menu, sub items under a thin line. profile is in the top bar */

@media (min-width: 1201px) {
    .menu { width: var(--ui-menu-width); }
    .layout-wrapper { margin-left: var(--ui-menu-width); }
    body.hidden-menu .layout-wrapper { margin-left: 0; }
}
.menu,
body.hidden-menu .menu {
    background-color: var(--ui-sidebar);
    border-right: 1px solid var(--ui-border);
    box-shadow: none;
}
@media (max-width: 1200px) {
    .menu {
        width: 300px;
        background-color: var(--ui-sidebar);
        box-shadow: var(--ui-shadow-md);
    }
}

/* logo and name */
.menu .menu-header {
    display: flex !important;
    align-items: center;
    gap: .5rem;
    height: var(--ui-header-h);
    min-height: var(--ui-header-h);
    padding: 0 .75rem !important;
    border-bottom: 1px solid var(--ui-border);
}
.menu-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: .3rem .4rem;
    border-radius: var(--ui-radius);
    color: var(--ui-fg) !important;
    text-decoration: none !important;
}
.menu-brand:hover { background: var(--ui-hover); }
.menu-brand-logo {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 8px;
    border: 1px solid var(--ui-border);
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.menu-brand-logo img { width: 30px; height: 30px; object-fit: contain; }
.menu-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
/* the full company name is longer, it wraps to a second line instead of being cut with ... */
.menu-brand-text b { font-size: 13.5px; font-weight: 600; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.menu-brand-text small { font-size: 12px; color: var(--ui-muted); white-space: nowrap; }
.menu-header .menu-header-logo { display: none !important; }
.menu-header .menu-close-btn {
    background-color: transparent;
    color: var(--ui-fg-soft);
    box-shadow: none;
    border: 1px solid var(--ui-border);
    min-height: 30px;
}
.menu-header .menu-close-btn:hover { color: var(--ui-fg); background: var(--ui-hover); }
@media (min-width: 1201px) {
    .menu-header .menu-close-btn { display: none !important; }
}

.menu .menu-body { padding: .5rem 0 1rem !important; }
.menu-body > ul,
.menu-body ul { padding-left: .6rem; padding-right: .6rem; margin: 0; }

/* group labels */
.menu-body ul li.menu-divider {
    color: var(--ui-muted);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
    padding: 1rem .65rem .35rem;
    margin: 0;
    line-height: 1.2;
}
.menu-body ul li.menu-divider:first-child { padding-top: .35rem; }

/* items */
.menu-body ul li > a {
    display: flex !important;
    align-items: center;
    gap: .6rem;
    color: var(--ui-fg-soft);
    font-size: 14px;
    font-weight: 400;
    border: 0;
    border-radius: 6px;
    padding: 0 .65rem !important;
    height: 36px;
    min-height: 36px;
    margin-bottom: 1px;
    line-height: 1.2;
}
.menu-body ul li > a .nav-link-icon {
    color: var(--ui-fg-soft);
    background: transparent !important;
    width: 18px !important;
    min-width: 18px;
    height: 18px !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.menu-body ul li > a .nav-link-icon i { font-size: 16px; line-height: 1; }
.menu-body ul li > a:hover {
    color: var(--ui-fg);
    background-color: var(--ui-hover);
}
.menu-body ul li > a:hover .nav-link-icon { color: var(--ui-fg); }
/* active: soft fill, darker text, a little bolder (not a big navy block) */
.menu-body ul li > a.active,
.menu-body ul li > a.active:hover {
    background: #ECEEF2;
    color: var(--brand-navy);
    font-weight: 600;
    border: 0;
}
.menu-body ul li > a.active .nav-link-icon { color: var(--brand-navy); background: transparent !important; }
@media (max-width: 1200px) {
    .menu-body ul li > a.active .nav-link-icon { background: transparent !important; }
}
.menu-body ul li > a.disabled { color: #A0A7B4; }

/* chevron on items with a sub menu, turns down when open */
.menu-body ul li > a .sub-menu-arrow {
    margin-left: auto !important;
    font-size: 0 !important;
    width: 16px;
    height: 16px;
    color: var(--ui-muted);
    transition: transform .15s ease;
    position: static !important;
    transform: none;
}
.menu-body ul li > a .sub-menu-arrow::before {
    content: "\f285" !important; /* bi-chevron-right */
    font-family: "bootstrap-icons" !important;
    font-size: 12px;
    line-height: 16px;
}
/* turned down when the sub list is showing: opened on load (li.open) or by a click (inline display: block) */
.menu-body ul li > a .sub-menu-arrow.rotate-in { transform: none; }
.menu-body ul li:has(> ul[style*="display: block"]) > a .sub-menu-arrow,
.menu-body ul li.open:not(:has(> ul[style*="display: none"])) > a .sub-menu-arrow { transform: rotate(90deg); }
.menu-body ul li > a .menu-arrow { margin-left: auto; color: var(--ui-muted); font-size: 12px; }

/* sub items under a thin line */
.menu-body ul li ul,
.menu-body .submenu {
    margin: 2px 0 6px 1.4rem;
    padding: 0 0 0 .6rem;
    border-left: 1px solid var(--ui-border);
}
.menu-body ul li ul li > a {
    height: 32px;
    min-height: 32px;
    font-size: 13.5px;
    padding: 0 .6rem !important;
}
.menu-body ul li ul li > a .nav-link-icon { display: none !important; }

/* ---------- top bar ---------- */
/* 56px: minimize button, thin line, page title. bell and the profile on the right */

.header {
    height: var(--ui-header-h);
    min-height: var(--ui-header-h) !important;
    padding: 0 1.25rem !important;
    background-color: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--ui-border);
    backdrop-filter: saturate(180%) blur(6px);
    -webkit-backdrop-filter: saturate(180%) blur(6px);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.header .page-title {
    color: var(--ui-fg);
    font-size: 15px !important;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header .logo { display: none !important; }
.header .menu-toggle-btn { margin: 0 !important; }
.header .menu-toggle-btn a,
.header .btn-link { color: var(--ui-fg-soft); }
.header .menu-toggle-btn a:hover,
.header .btn-link:hover { color: var(--ui-fg); }
.header .btn-link {
    border-radius: var(--ui-radius);
    min-height: 34px;
    width: 34px;
    padding: 0;
    box-shadow: none;
}
.header .btn-link:hover { background-color: var(--ui-hover); }
.header .btn-link .bi { font-size: 17px !important; }
.header-sep {
    width: 1px;
    height: 18px;
    background: var(--ui-border);
    margin: 0 .35rem 0 .1rem;
    flex: none;
    display: none;
}
@media (min-width: 1201px) { .header-sep { display: block; } }
.header .header-bar { display: flex !important; align-items: center; }
/* on a phone the old theme turned the right side into a hidden drop down panel, the bell and profile stay in the bar now */
@media (max-width: 1200px) {
    .header .header-bar {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin-left: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        z-index: auto;
    }
    .header .header-mobile-buttons { display: none !important; }
}

/* profile button */
.header-user-btn {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .2rem .5rem .2rem .25rem;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--ui-fg) !important;
    text-decoration: none !important;
}
.header-user-btn:hover,
.header-user.show .header-user-btn { background: var(--ui-hover); border-color: var(--ui-border); }
.header-user-btn img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border: 1px solid var(--ui-border);
    background: #fff;
}
.header-user-name { display: flex; flex-direction: column; line-height: 1.15; }
.header-user-name b { font-size: 13px; font-weight: 600; }
.header-user-name small { font-size: 11.5px; color: var(--ui-muted); }
.header-user-btn .bi-chevron-down { font-size: 11px; color: var(--ui-muted); }
.header-user .dropdown-menu { min-width: 220px; margin-top: 6px !important; }
.header-user .dropdown-header { display: flex; flex-direction: column; padding: .45rem .65rem; color: var(--ui-fg); }
.header-user .dropdown-header b { font-size: 13.5px; font-weight: 600; }
.header-user .dropdown-header small { font-size: 12px; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 576px) {
    .header-user-name,
    .header-user-btn .bi-chevron-down { display: none; }
    .header { padding: 0 .75rem !important; }
}

.layout-wrapper > .content { padding-top: 1rem; }
@media (min-width: 992px) {
    .layout-wrapper > .content.p-2 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}
footer.content-footer { color: var(--ui-muted); font-size: 12.5px; border-top: 1px solid var(--ui-border); }
footer.content-footer a { color: var(--ui-muted); }

/* ---------- minimize the sidebar (desktop) ---------- */

.menu-collapse-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: -.35rem;
    border: 0;
    border-radius: var(--ui-radius);
    background: transparent;
    color: var(--ui-fg-soft);
    cursor: pointer;
    flex: none;
}
.menu-collapse-btn:hover { background: var(--ui-hover); color: var(--ui-fg); }
.menu-collapse-btn:focus-visible { outline: 0; box-shadow: var(--ui-ring); }
.menu-collapse-btn i { font-size: 16px; line-height: 1; }

@media (min-width: 1201px) {
    .menu-collapse-btn { display: inline-flex; }
    .menu,
    .layout-wrapper { transition: width .18s ease, margin-left .18s ease; }

    /* only icons. hover over it and it opens over the page, so the sub menus stay one move away */
    body.sidebar-mini .layout-wrapper { margin-left: var(--ui-menu-mini); }
    body.sidebar-mini .menu {
        width: var(--ui-menu-mini);
        overflow-x: hidden;
        z-index: 1001;
    }
    body.sidebar-mini .menu:hover {
        width: var(--ui-menu-width);
        box-shadow: var(--ui-shadow-md);
        transition-delay: .08s;
    }
    body.sidebar-mini .menu:not(:hover) .menu-header { padding: 0 .55rem !important; justify-content: center; }
    body.sidebar-mini .menu:not(:hover) .menu-brand { padding: .3rem; flex: none; }
    body.sidebar-mini .menu:not(:hover) .menu-brand-text { display: none; }
    body.sidebar-mini .menu:not(:hover) .menu-body { padding-left: 0 !important; padding-right: 0 !important; }
    body.sidebar-mini .menu:not(:hover) .menu-body ul { padding-left: .5rem; padding-right: .5rem; }
    body.sidebar-mini .menu:not(:hover) .menu-body ul li > a { width: 44px; margin-left: auto; margin-right: auto; }
    body.sidebar-mini .menu:not(:hover) .menu-body ul li > a {
        justify-content: center;
        padding: 0 !important;
    }
    body.sidebar-mini .menu:not(:hover) .menu-body ul li > a > :not(.nav-link-icon),
    body.sidebar-mini .menu:not(:hover) .menu-body ul li > a .badge {
        display: none !important;
    }
    /* group labels become a thin line between the groups */
    body.sidebar-mini .menu:not(:hover) .menu-body ul li.menu-divider {
        font-size: 0;
        padding: 0;
        height: 1px;
        margin: .5rem .4rem;
        background: var(--ui-border);
    }
    body.sidebar-mini .menu:not(:hover) .menu-body ul li.menu-divider:first-child { display: none; }
    /* the group holding the current page is marked, its sub items are hidden in the rail */
    body.sidebar-mini .menu:not(:hover) .menu-body ul li:has(ul a.active) > a {
        background: #ECEEF2;
        color: var(--brand-navy);
    }
    body.sidebar-mini .menu:not(:hover) .menu-body ul li:has(ul a.active) > a .nav-link-icon { color: var(--brand-navy); }
    body.sidebar-mini .menu:not(:hover) .menu-body .submenu,
    body.sidebar-mini .menu:not(:hover) .menu-body ul li ul { display: none !important; }
    /* labels are clipped while the menu slides open, so they never spill over the page */
    body.sidebar-mini .menu .menu-body ul li > a,
    body.sidebar-mini .menu .menu-brand { white-space: nowrap; overflow: hidden; }
}

/* the dim layer behind the open drawer on a phone */
body:after { background: rgba(15, 19, 36, .4); }

/* ---------- breadcrumb ---------- */

.breadcrumb { font-size: 13px; margin-bottom: .25rem; }
.breadcrumb-item,
.breadcrumb-item.active { color: var(--ui-muted); }
.breadcrumb-item a { color: var(--ui-muted); }
.breadcrumb-item a:hover { color: var(--ui-fg); text-decoration: none !important; }
.breadcrumb-item:last-child { color: var(--ui-fg); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before { color: #B8C0CC; }
#back-btn {
    border-color: var(--ui-border) !important;
    color: var(--ui-fg-soft) !important;
    background: var(--ui-card) !important;
}
#back-btn:hover { background: var(--ui-hover) !important; }

/* ---------- buttons ---------- */
/* one main button in navy, the rest are white with a thin border. same height everywhere */

.btn {
    border-radius: var(--ui-radius);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0;
    min-height: var(--ui-control);
    padding: .4rem .9rem;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    box-shadow: var(--ui-shadow-xs);
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn-sm {
    min-height: var(--ui-control-sm);
    padding: .25rem .65rem;
    font-size: 13px;
    border-radius: 6px;
}
/* the big buttons above the lists were twice as tall as the rest */
.btn-lg {
    min-height: var(--ui-control);
    padding: .4rem 1rem;
    font-size: 14px;
    border-radius: var(--ui-radius);
}
.btn-link,
.btn-close,
.dropdown-toggle-split + .dropdown-menu .btn { box-shadow: none; }
.btn-link { min-height: auto; }
.btn:focus,
.btn:focus-visible { box-shadow: var(--ui-ring) !important; }
.btn-check + .btn:focus { box-shadow: var(--ui-ring) !important; }

.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--brand-navy-hover);
    border-color: var(--brand-navy-hover);
}

/* outline style: white, thin grey border, dark text, grey on hover (not a full navy fill) */
.btn-secondary,
.btn-info,
.btn-warning,
.btn-light,
.btn-outline-primary,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-dark,
.btn-outline-secondary,
.btn-outline-light,
.dt-buttons .btn {
    color: var(--ui-fg) !important;
    background-color: var(--ui-card);
    border-color: var(--ui-border-strong);
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active,
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active,
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active,
.btn-light:hover, .btn-light:focus, .btn-light:active,
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active,
.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active, .btn-outline-info.active,
.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active, .btn-outline-warning.active,
.btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:active, .btn-outline-dark.active,
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-outline-secondary.active,
.btn-outline-light:hover, .btn-outline-light:focus,
.dt-buttons .btn:hover {
    color: var(--ui-fg) !important;
    background-color: var(--ui-hover);
    border-color: var(--ui-border-strong);
}
/* a picked option in a button group stays navy so you can see which one is on */
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-secondary,
.btn-check:checked + .btn-outline-dark,
.btn-outline-primary.active,
.btn-outline-secondary.active {
    color: #fff !important;
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
}

/* green Save / Submit / download buttons were teal, one main colour everywhere now: navy */
.btn-success,
.btn-success:disabled,
.btn-success.disabled {
    color: #fff !important;
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-check:checked + .btn-success,
.show > .btn-success.dropdown-toggle {
    color: #fff !important;
    background-color: var(--brand-navy-hover);
    border-color: var(--brand-navy-hover);
}
.btn-outline-success {
    color: var(--brand-teal-dark) !important;
    border-color: #A9D3CF;
    background-color: var(--ui-card);
}
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active {
    color: var(--brand-teal-dark) !important;
    background-color: var(--brand-teal-tint);
    border-color: var(--brand-teal);
}

.btn-danger { background-color: var(--danger); border-color: var(--danger); }
.btn-outline-danger {
    color: var(--danger) !important;
    border-color: #F3C4BF;
    background-color: var(--ui-card);
}
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active {
    color: var(--danger) !important;
    background-color: var(--danger-tint);
    border-color: var(--danger);
}

/* Edit + arrow in the list rows: one quiet outline button */
.btn-group > .btn { box-shadow: none; }
.btn-group { box-shadow: var(--ui-shadow-xs); border-radius: 6px; }
td .btn-group > .btn-primary.dropdown-toggle-split,
.dataTable .btn-group > .btn-primary.dropdown-toggle-split {
    color: var(--ui-fg-soft) !important;
    background-color: var(--ui-card);
    border-color: var(--ui-border-strong);
    border-left-color: var(--ui-border);
}
td .btn-group > .btn-primary.dropdown-toggle-split:hover,
.dataTable .btn-group > .btn-primary.dropdown-toggle-split:hover { background-color: var(--ui-hover); }

/* ---------- status pills ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1;
    padding: .38em .7em;
    border-radius: 999px;
    border: 1px solid transparent;
    vertical-align: middle;
}
.badge.bg-success::before,
.badge.bg-warning::before,
.badge.bg-danger::before,
.badge.bg-info::before,
.badge.bg-primary::before,
.badge.bg-secondary::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    flex: none;
}
.badge.bg-success { border-color: #CDE6D8; }
.badge.bg-warning { border-color: #F3DFB6; }
.badge.bg-danger { border-color: #F5CFCA; }
.badge.bg-info,
.badge.bg-primary { border-color: #CFDDF2; }
.badge.bg-secondary,
.badge.bg-light,
.badge.bg-dark { border-color: var(--ui-border); }
/* counters on the bell and the menu stay small solid dots with a number, no status dot */
.badge.position-absolute::before,
.menu-body .badge::before { display: none; }
.badge.rounded-pill.position-absolute { padding: .3em .5em; border: 2px solid #fff; }
/* mt-3 on the list badges pushed them under the row line */
td .badge.mt-3 { margin-top: 0 !important; }

/* ---------- cards ---------- */

.card {
    background-color: var(--ui-card);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-xs);
}
.card .card { box-shadow: none; }
.card-header {
    background-color: var(--ui-card);
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-fg);
    font-weight: 600;
    font-size: 15px;
    padding: .85rem 1.1rem;
}
.card-header:first-child { border-radius: calc(var(--ui-radius-lg) - 1px) calc(var(--ui-radius-lg) - 1px) 0 0; }
.card-footer {
    background-color: #FCFCFD;
    border-top: 1px solid var(--ui-border);
}
.card-title { color: var(--ui-fg); font-weight: 600; }

/* coloured card headers were navy blocks, now plain white with dark text like the rest */
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-warning,
.card-header.bg-info,
.card-header.bg-danger,
.card-header.bg-secondary,
.card-header.bg-dark,
.card-header.bg-light {
    background-color: var(--ui-card) !important;
    color: var(--ui-fg) !important;
    border-bottom-color: var(--ui-border);
}
.card-header.bg-primary *:not(.btn):not(.badge):not(.btn *),
.card-header.bg-success *:not(.btn):not(.badge):not(.btn *),
.card-header.bg-warning *:not(.btn):not(.badge):not(.btn *),
.card-header.bg-info *:not(.btn):not(.badge):not(.btn *),
.card-header.bg-danger *:not(.btn):not(.badge):not(.btn *),
.card-header.bg-secondary *:not(.btn):not(.badge):not(.btn *),
.card-header.bg-dark *:not(.btn):not(.badge):not(.btn *) {
    color: var(--ui-fg);
}
.card-header.text-white { color: var(--ui-fg) !important; }

/* page titles inside the content were up to 40px on the report pages, one calm size everywhere */
body .layout-wrapper .content h1,
body .layout-wrapper .content .h1 { font-size: 24px !important; font-weight: 600; letter-spacing: -.02em; }
body .layout-wrapper .content h2,
body .layout-wrapper .content .h2 { font-size: 19px !important; font-weight: 600; }
body .layout-wrapper .content h3,
body .layout-wrapper .content .h3 { font-size: 16px !important; font-weight: 600; }
body .layout-wrapper .content h1 i,
body .layout-wrapper .content h2 i { font-size: .85em; }

/* ---------- small number cards above the lists ---------- */

body .analytics-card,
body .analytics-loan,
body .analytics-payment,
body .analytics-repayment,
body .analytics-payout,
body .analytics-rto,
body .aggregator-loan,
body .insurance-payment {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-xs);
    padding: .75rem .9rem !important;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
body .analytics-card:hover,
body .analytics-loan:hover,
body .analytics-payment:hover,
body .analytics-repayment:hover,
body .analytics-payout:hover,
body .analytics-rto:hover,
body .aggregator-loan:hover,
body .insurance-payment:hover {
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-md);
}
body .analytics-card .card-title,
body .analytics-loan .card-title,
body .analytics-payment .card-title,
body .analytics-repayment .card-title,
body .analytics-payout .card-title,
body .analytics-rto .card-title,
body .aggregator-loan .card-title,
body .insurance-payment .card-title {
    color: var(--ui-muted);
    font-size: 12.5px;
    font-weight: 500;
    text-transform: none !important;
    letter-spacing: 0;
}
/* titles come lower case from the code, show them as a sentence */
body .card-title::first-letter,
.table thead th::first-letter { text-transform: uppercase; }
body .analytics-card label,
body .analytics-card b,
body .analytics-loan label,
body .analytics-loan b,
body .analytics-payment label,
body .analytics-payment b,
body .analytics-repayment label,
body .analytics-repayment b,
body .analytics-payout label,
body .analytics-payout b,
body .analytics-rto label,
body .analytics-rto b,
body .aggregator-loan label,
body .aggregator-loan b,
body .insurance-payment label,
body .insurance-payment b {
    color: var(--ui-fg);
    font-weight: 600;
    letter-spacing: -.02em;
}
body .analytics-card.active,
body .analytics-loan.active,
body .analytics-payment.active,
body .analytics-repayment.active,
body .analytics-payout.active,
body .analytics-rto.active,
body .aggregator-loan.active,
body .insurance-payment.active {
    background-color: var(--ui-card);
    border-color: var(--brand-navy);
    box-shadow: 0 0 0 1px var(--brand-navy), var(--ui-shadow-xs);
}
body .analytics-card.active .card-title,
body .analytics-loan.active .card-title,
body .analytics-payment.active .card-title,
body .analytics-repayment.active .card-title,
body .analytics-payout.active .card-title,
body .analytics-rto.active .card-title,
body .aggregator-loan.active .card-title,
body .insurance-payment.active .card-title {
    color: var(--brand-navy);
}

/* ---------- report and analytics pages ---------- */
/* the navy header blocks become plain white with a line under, like a card header */

body .overall-header,
body .overall-card-header,
body .section-header,
body .page-header,
body .report-header,
body .analytics-header,
body .analytics-table-header,
body .user-header,
body .sales-manager-header,
body .report-info-header,
body .report-table-header,
body .aggregator-header,
body .other-banks-header,
body .agent-month-analytics-header,
body .agent-analytics-header,
body .yearly-analytics-header {
    background: var(--ui-card) !important;
    color: var(--ui-fg) !important;
    border-bottom: 1px solid var(--ui-border);
    box-shadow: none;
}
body .overall-header :is(h1, h2, h3, h4, h5, h6, p, span, small, i, div, label, strong, b):not(.badge):not(.btn):not(.btn *),
body .overall-card-header :is(h1, h2, h3, h4, h5, h6, p, span, small, i, div, label, strong, b):not(.badge):not(.btn):not(.btn *),
body .section-header :is(h1, h2, h3, h4, h5, h6, p, span, small, i, div, label, strong, b):not(.badge):not(.btn):not(.btn *),
body .page-header :is(h1, h2, h3, h4, h5, h6, p, span, small, i, div, label, strong, b):not(.badge):not(.btn):not(.btn *),
body .report-header :is(h1, h2, h3, h4, h5, h6, p, span, small, i, div, label, strong, b):not(.badge):not(.btn):not(.btn *),
body .analytics-header :is(h1, h2, h3, h4, h5, h6, p, span, small, i, div, label, strong, b):not(.badge):not(.btn):not(.btn *),
body .analytics-table-header :is(h1, h2, h3, h4, h5, h6, p, span, small, i, div, label, strong, b):not(.badge):not(.btn):not(.btn *),
body .user-header :is(h1, h2, h3, h4, h5, h6, p, span, small, i, div, label, strong, b):not(.badge):not(.btn):not(.btn *),
body .sales-manager-header :is(h1, h2, h3, h4, h5, h6, p, span, small, i, div, label, strong, b):not(.badge):not(.btn):not(.btn *),
body .report-info-header :is(h1, h2, h3, h4, h5, h6, p, span, small, i, div, label, strong, b):not(.badge):not(.btn):not(.btn *),
body .report-table-header :is(h1, h2, h3, h4, h5, h6, p, span, small, i, div, label, strong, b):not(.badge):not(.btn):not(.btn *),
body .aggregator-header :is(h1, h2, h3, h4, h5, h6, p, span, small, i, div, label, strong, b):not(.badge):not(.btn):not(.btn *),
body .other-banks-header :is(h1, h2, h3, h4, h5, h6, p, span, small, i, div, label, strong, b):not(.badge):not(.btn):not(.btn *),
body .agent-month-analytics-header :is(h1, h2, h3, h4, h5, h6, p, span, small, i, div, label, strong, b):not(.badge):not(.btn):not(.btn *),
body .agent-analytics-header :is(h1, h2, h3, h4, h5, h6, p, span, small, i, div, label, strong, b):not(.badge):not(.btn):not(.btn *),
body .yearly-analytics-header :is(h1, h2, h3, h4, h5, h6, p, span, small, i, div, label, strong, b):not(.badge):not(.btn):not(.btn *) {
    color: inherit !important;
}
body .overall-header :is(p, small),
body .report-header :is(p, small),
body .analytics-header :is(p, small),
body .page-header :is(p, small) {
    color: var(--ui-muted) !important;
}
body .overall-card,
body .summary-card,
body .stat-card,
body .team-card,
body .analytics-table-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-xs);
}
body .overall-card:hover,
body .team-card:hover {
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-md);
}
body .overall-metric,
body .metric-item {
    background: var(--ui-card);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
}
body .metric-item:hover { border-color: var(--ui-border-strong); }
body .metric-icon,
body .overall-metric-icon,
body .stat-icon,
body .agent-icon {
    background: var(--ui-subtle);
    color: var(--ui-fg-soft);
    border-radius: var(--ui-radius);
}
body .metric-icon i,
body .overall-metric-icon i,
body .stat-icon i,
body .agent-icon i,
body .summary-icon i { color: var(--ui-fg-soft); }
body .metric-value,
body .overall-metric-value,
body .stat-value,
body .summary-value {
    color: var(--ui-fg);
    letter-spacing: -.02em;
}
body .metric-label,
body .overall-metric-label,
body .metric-description,
body .overall-metric-description,
body .summary-card .summary-title,
body .summary-card .summary-description {
    color: var(--ui-muted);
}
body .team-badge {
    background: var(--ui-subtle);
    color: var(--ui-fg-soft);
    border: 1px solid var(--ui-border);
}
body .back-button {
    background: var(--ui-card);
    color: var(--ui-fg);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
}
body .back-button:hover {
    background: var(--ui-hover);
    color: var(--ui-fg);
}
body .total-row,
body .analytics-table tfoot tr {
    background: var(--ui-subtle);
    color: var(--ui-fg);
}
body .total-row td,
body .analytics-table tfoot tr td,
body .analytics-table tfoot tr th {
    border-top: 1px solid var(--ui-border-strong);
}
body .analytics-table thead th,
body .report-table thead th {
    background: var(--ui-card);
    color: var(--ui-muted);
    border-bottom: 1px solid var(--ui-border);
}
body .analytics-table tbody tr:hover,
body .clickable-row:hover { background: #FAFBFC; }

/* ---------- tables ---------- */

.table { color: var(--ui-fg); margin-bottom: 0; }
.table > :not(caption) > * > * {
    border-bottom-color: var(--ui-border);
    padding: .7rem .85rem;
    vertical-align: middle;
}
.table thead th,
.table > thead > tr > th,
table.dataTable thead th {
    background-color: var(--ui-card);
    color: var(--ui-muted);
    font-size: 12.5px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--ui-border);
    white-space: nowrap;
}
.table thead.table-dark th,
.table > thead.table-dark > tr > th,
.table-dark,
.table-dark > td,
.table-dark > th {
    background-color: var(--ui-subtle) !important;
    --bs-table-bg: var(--ui-subtle);
    color: var(--ui-fg) !important;
}
.table.table-striped > tbody > tr:nth-of-type(odd) > *,
.table.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
    --bs-table-accent-bg: transparent;
}
.table.table-hover > tbody > tr:hover > *,
table.dataTable tbody tr:hover > td,
.table > tbody > tr:hover > td {
    background-color: #FAFBFC;
    --bs-table-accent-bg: #FAFBFC;
}
.table tfoot th,
.table tfoot td,
.table tr.total th,
.table tr.totals th,
.table tr.total td,
.table tr.totals td {
    background-color: var(--ui-subtle);
    border-top: 1px solid var(--ui-border-strong);
}
.table-primary,
.table-primary > td,
.table-primary > th { background-color: var(--ui-subtle) !important; --bs-table-bg: var(--ui-subtle); }
.table-bordered > :not(caption) > * > * { border-color: var(--ui-border); }
/* list cells wrap only at spaces, a phone number, amount or word no longer breaks in the middle (the list scrolls sideways) */
table.dataTable tbody td,
.list-scroll table tbody td,
table.dataTable .break-all,
.list-scroll .break-all {
    word-break: keep-all;
    overflow-wrap: normal;
}
table.dataTable .break-all,
.list-scroll .break-all { width: auto; }

/* a table sitting straight in a card gets no extra outer border */
.card > .table,
.card > .table-responsive > .table,
.card-body > .table-responsive:only-child { border: 0; }

/* rows coloured by state keep a soft tint but lose the heavy borders */
body tr.border-warning > td,
body tr.border-danger > td,
body tr.border-success > td,
body tr.border-info > td,
body tr.border-black > td { border-color: var(--ui-border) !important; }

/* ---------- forms ---------- */

label,
.form-label {
    color: var(--ui-fg);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: .35rem;
}
.form-text,
small.text-muted { color: var(--ui-muted); font-size: 12.5px; }

.form-control,
.form-select {
    min-height: var(--ui-control);
    font-size: 14px;
    color: var(--ui-fg);
    background-color: var(--ui-card);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-xs);
    padding: .4rem .7rem;
    transition: border-color .15s, box-shadow .15s;
}
.form-select { padding-right: 2.1rem; }
textarea.form-control { min-height: 80px; }
.form-control-sm,
.form-select-sm {
    min-height: var(--ui-control-sm);
    font-size: 13px;
    padding: .25rem .55rem;
    border-radius: 6px;
}
.form-control-lg,
.form-select-lg { min-height: 40px; font-size: 14px; border-radius: var(--ui-radius); }
.form-control::placeholder { color: #98A2B3; }
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-teal);
    box-shadow: var(--ui-ring);
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--ui-subtle);
    color: var(--ui-fg-soft);
    box-shadow: none;
}
.form-control[type="file"] { padding: .3rem .5rem; }
.form-check-input {
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-xs);
}
.form-check-input:checked {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
}
.form-check-input:focus { border-color: var(--brand-teal); box-shadow: var(--ui-ring); }
.form-switch .form-check-input:checked { background-color: var(--brand-navy); border-color: var(--brand-navy); }
.input-group-text {
    background-color: var(--ui-subtle);
    border-color: var(--ui-border-strong);
    color: var(--ui-muted);
    border-radius: var(--ui-radius);
    font-size: 13.5px;
}
.input-group > .form-control,
.input-group > .form-select { box-shadow: none; }
.invalid-feedback { font-size: 12.5px; }
.is-invalid,
.form-control.is-invalid { border-color: #E9A29A !important; }
.is-invalid:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .15) !important; }

/* tom select pickers */
body .ts-wrapper:not(.form-control, .form-select).single .ts-control,
body .ts-control {
    min-height: var(--ui-control);
    border-color: var(--ui-border-strong);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-xs);
}
body .focus .ts-control { border-color: var(--brand-teal); box-shadow: var(--ui-ring); }
body .ts-dropdown { border-color: var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-md); }
body .ts-dropdown .active { background-color: var(--ui-hover); color: var(--ui-fg); }

/* ---------- select2 (same size and look as a normal input) ---------- */

.select2-container--default .select2-selection--single,
.select2.select2-container .select2-selection--single {
    height: var(--ui-control) !important;
    min-height: var(--ui-control);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-xs);
    background-color: var(--ui-card);
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--ui-control) - 2px) !important;
    padding-left: .7rem;
    color: var(--ui-fg);
    font-size: 14px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2.select2-container .select2-selection--single .select2-selection__arrow {
    height: calc(var(--ui-control) - 2px) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #98A2B3; }
.select2-container--default .select2-selection--multiple,
.select2.select2-container .select2-selection--multiple {
    min-height: var(--ui-control);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-xs);
}
.select2.select2-container.select2-container--focus .select2-selection,
.select2.select2-container.select2-container--open .select2-selection,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--brand-teal) !important;
    box-shadow: var(--ui-ring);
}
.select2-dropdown {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-md);
    overflow: hidden;
    padding: 4px;
}
.select2-results__option {
    border-radius: 6px;
    padding: .4rem .6rem;
    font-size: 14px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--ui-hover);
    color: var(--ui-fg);
}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected {
    background-color: var(--brand-navy-tint);
    color: var(--brand-navy);
    font-weight: 500;
}
.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: 6px;
    min-height: 32px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--ui-subtle);
    border: 1px solid var(--ui-border);
    color: var(--ui-fg);
    border-radius: 6px;
}

/* ---------- datatables ---------- */

.dataTables_wrapper { font-size: 14px; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input,
div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    min-height: 34px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-xs);
    padding: .3rem .6rem;
}
div.dataTables_wrapper div.dataTables_filter input { min-width: 240px; }
/* the search box shrinks to fit, it pushed tablets and phones sideways */
div.dataTables_wrapper div.dataTables_filter { max-width: 100%; }
div.dataTables_wrapper div.dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    width: auto;
}
div.dataTables_wrapper div.dataTables_filter label input {
    flex: 1 1 auto;
    max-width: 100%;
    margin-left: 0 !important;
}
@media (max-width: 1200px) {
    div.dataTables_wrapper div.dataTables_filter input { min-width: 0; width: 100% !important; }
    div.dataTables_wrapper div.dataTables_filter label { width: 100%; }
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--ui-muted);
    font-size: 13px;
    font-weight: 400;
}
div.dataTables_wrapper div.dataTables_processing {
    color: var(--ui-fg);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-md);
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before { color: var(--ui-muted); }
table.dataTable { border-collapse: collapse !important; }

/* ---------- pagination ---------- */

.pagination { gap: 4px; }
.page-link {
    color: var(--ui-fg);
    border: 1px solid transparent;
    background-color: transparent;
    border-radius: 6px !important;
    min-width: 32px;
    height: 32px;
    padding: 0 .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    font-weight: 500;
}
.page-link:hover {
    color: var(--ui-fg);
    background-color: var(--ui-hover);
    border-color: transparent;
}
.page-link:focus { box-shadow: var(--ui-ring); }
.page-item.active .page-link {
    color: var(--ui-fg);
    background-color: var(--ui-card);
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-xs);
}
.page-item.disabled .page-link {
    color: #B8C0CC;
    background-color: transparent;
    border-color: transparent;
}

/* ---------- tabs and pills ---------- */

.nav-tabs { border-bottom: 1px solid var(--ui-border); gap: .25rem; }
.nav-tabs .nav-link {
    color: var(--ui-muted);
    font-weight: 500;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .55rem .85rem;
    margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: var(--ui-fg); border-color: transparent; }
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--ui-fg);
    background-color: transparent;
    border-color: transparent;
    border-bottom: 2px solid var(--brand-navy);
}
/* pills look like a segmented switch */
.nav-pills {
    background: var(--ui-subtle);
    border-radius: var(--ui-radius);
    padding: 3px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
}
.nav-pills .nav-link {
    border-radius: 6px;
    padding: .3rem .8rem;
    font-weight: 500;
    font-size: 13.5px;
}
.nav.nav-pills .nav-item .nav-link.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--ui-card);
    color: var(--ui-fg);
    box-shadow: var(--ui-shadow-xs);
}

/* ---------- dropdowns ---------- */

.dropdown-menu {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-md);
    padding: 4px;
    font-size: 14px;
    min-width: 11rem;
}
.dropdown-item {
    border-radius: 6px;
    padding: .4rem .65rem;
    color: var(--ui-fg);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ui-hover);
    color: var(--ui-fg);
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--ui-subtle);
    color: var(--ui-fg);
    font-weight: 500;
}
.dropdown-item.text-danger:hover { background-color: var(--danger-tint); }
.dropdown-divider { border-top-color: var(--ui-border); margin: 4px -4px; }

/* ---------- modals ---------- */

.modal-content {
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(16, 24, 40, .18);
}
body .modal-header {
    background-color: var(--ui-card);
    border-bottom: 0;
    padding: 1.1rem 1.25rem .5rem;
}
.modal-title { color: var(--ui-fg); font-weight: 600; font-size: 17px; }
.modal-body { padding: .75rem 1.25rem 1rem; }
.modal-footer {
    border-top: 0;
    padding: .5rem 1.25rem 1.1rem;
    gap: .5rem;
}
.modal-footer > * { margin: 0; }
body .modal .close {
    border: 0;
    color: var(--ui-muted);
    border-radius: 6px;
}
body .modal .close:hover { background-color: var(--ui-hover); color: var(--ui-fg); }
.modal-backdrop.show { background-color: #0F1324; opacity: .4; }

/* ---------- alerts ---------- */

.alert {
    border-radius: var(--ui-radius);
    font-size: 13.5px;
    padding: .75rem 1rem;
    border-width: 1px;
}
.alert-secondary,
.alert-light { background-color: var(--ui-card); border-color: var(--ui-border); color: var(--ui-fg); }

/* ---------- toasts ---------- */

.iziToast {
    border: 1px solid var(--ui-border);
    border-left-width: 1px !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-md);
}

/* ---------- sweetalert ---------- */

.swal2-popup { border-radius: 12px !important; font-family: var(--font-sans) !important; }
.swal2-title { color: var(--ui-fg) !important; font-size: 1.25rem !important; }
.swal2-styled { border-radius: var(--ui-radius) !important; font-weight: 500 !important; }

/* ---------- upload boxes (were orange) ---------- */

body .image_selection,
body .drop-area {
    background: #FCFCFD !important;
    border: 1.5px dashed var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-lg) !important;
}
body .image_selection:hover,
body .drop-area:hover,
body .drop-area.highlight {
    border-color: var(--brand-teal) !important;
    background: var(--brand-teal-tint) !important;
}
body .img-upload-title,
body .upload-icon,
body .image_selection i { color: var(--ui-fg-soft) !important; }

/* ---------- report page blocks with their own heavy shadows ---------- */
/* each report page styled its own cards with big blurred shadows, they all get the thin border + tiny shadow of a normal card */
body .layout-wrapper .content :is(.empty-state, .stat-card, .filter-section, .analytics-table-card, .page-header, .sales-manager-card,
    .report-info, .report-table-card, .agent-info-card, .summary-section, .user-section, .overall-summary, .teams-section, .team-card,
    .overall-card, .analytics-container, .summary-card, .analytics-section, .month-selector-card, .date-filter-card, .team-section,
    .metric-card, .quick-actions, .box) {
    box-shadow: var(--ui-shadow-xs) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    background-image: none !important;
}
body .layout-wrapper .content :is(.analytics-table, .table-responsive) { box-shadow: none !important; }
body .layout-wrapper .content :is(.stat-card, .team-card, .overall-card, .metric-card, .summary-card):hover {
    box-shadow: var(--ui-shadow-md) !important;
    transform: none !important;
}
body .layout-wrapper .content :is(.filter-card, .stat-card.filter-card).active {
    border-color: var(--brand-navy) !important;
    box-shadow: 0 0 0 1px var(--brand-navy) !important;
}
/* buttons a page styled by hand (Back, Download, Filter) look like the normal ones */
body .layout-wrapper .content :is(.back-button, .filter-btn) {
    box-shadow: var(--ui-shadow-xs) !important;
    background-image: none !important;
    transform: none !important;
}
body .layout-wrapper .content .download-btn,
body .layout-wrapper .content .btn-success {
    background: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
    color: #fff !important;
    box-shadow: var(--ui-shadow-xs) !important;
    transform: none !important;
}
body .layout-wrapper .content .download-btn:hover,
body .layout-wrapper .content .btn-success:hover { background: var(--brand-navy-hover) !important; }
/* grey boxes inside the report summary: white with a line, like the number cards */
body .layout-wrapper .content .report-info :is(.info-item, .summary-item, .stat-item) {
    background: var(--ui-card) !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: none !important;
}

/* ---------- number card icons and titles ---------- */
/* icons in the number cards were green, red, orange, teal. one calm grey, the number carries the meaning */
body .content .card.analytics-card .bi,
body .content .card.analytics-loan .bi,
body .content .card.analytics-payment .bi,
body .content .card.analytics-repayment .bi,
body .content .card.analytics-payout .bi,
body .content .card.analytics-rto .bi,
body .content .card.aggregator-loan .bi,
body .content .card.insurance-payment .bi,
body .content .card.mobile-flex .bi {
    color: var(--ui-muted) !important;
}
body .content .card.active .bi { color: var(--brand-navy) !important; }
/* a card title is one size (some were h5 at 19px next to 12px ones) */
body .content .card .card-title { font-size: 15px; }
body .content .card.mobile-flex .card-title,
body .content .card.mobile-flex h5.card-title { font-size: 12.5px; color: var(--ui-muted); font-weight: 500; }
body .content .card.mobile-flex { padding: .75rem .9rem !important; }

/* sidebar scrollbar, thin and grey */
.nicescroll-cursors { background-color: #D0D5DD !important; width: 5px !important; }

/* ---------- small things ---------- */

.progress { background-color: var(--ui-subtle); border-radius: 999px; height: 8px; }
.progress-bar { background-color: var(--brand-teal); border-radius: 999px; }
.list-group-item { border-color: var(--ui-border); }
.list-group-item.active { background-color: var(--ui-subtle); border-color: var(--ui-border); color: var(--ui-fg); font-weight: 500; }
.accordion-item { border-color: var(--ui-border); }
.accordion-button:not(.collapsed) { color: var(--ui-fg); background-color: var(--ui-subtle); box-shadow: inset 0 -1px 0 var(--ui-border); }
.tooltip-inner { background: var(--ui-fg); border-radius: 6px; font-size: 12.5px; }
.preloader { background: var(--ui-bg); }

/* ---------- login page ---------- */

body.auth {
    background-color: var(--ui-bg);
    background-image: radial-gradient(circle at 1px 1px, #E4E7EC 1px, transparent 0);
    background-size: 22px 22px;
}
body.auth .form-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--ui-card);
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .08);
    padding: 32px 28px 28px;
}
.auth-card .auth-logo { display: block; margin: 0 auto 18px; height: 84px; width: auto; }
.auth-card h1 {
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    margin: 0 0 4px;
    color: var(--ui-fg);
}
.auth-card .auth-sub {
    text-align: center;
    color: var(--ui-muted);
    margin: 0 0 24px;
}
.auth-card .form-control { min-height: 40px; }
.auth-card .btn-primary { width: 100%; min-height: 40px; margin-top: 6px; }
/* password box with the show / hide eye inside on the right */
.password-field { position: relative; }
.password-field .form-control { padding-right: 44px; }
.password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ui-muted);
    cursor: pointer;
    padding: 0;
}
.password-toggle:hover { background: var(--ui-hover); color: var(--ui-fg); }
.password-toggle:focus-visible { outline: 0; box-shadow: var(--ui-ring); }
.auth-foot {
    text-align: center;
    color: var(--ui-muted);
    font-size: 12.5px;
    margin-top: 18px;
}

/* ---------- phone width ---------- */

@media (max-width: 768px) {
    .header .page-title { font-size: 16px; }
    .btn { font-size: 13.5px; }
    div.dataTables_wrapper div.dataTables_filter input { min-width: 0; }
    .card-header { padding: .7rem .9rem; }
    .auth-card { padding: 26px 20px 22px; }
}

/* number cards above the lists: two in a row on a phone instead of one long column */
@media (max-width: 576px) {
    .row > [class*="col-"]:has(> .analytics-card),
    .row > [class*="col-"]:has(> .analytics-loan),
    .row > [class*="col-"]:has(> .analytics-payment),
    .row > [class*="col-"]:has(> .analytics-repayment),
    .row > [class*="col-"]:has(> .analytics-payout),
    .row > [class*="col-"]:has(> .analytics-rto),
    .row > [class*="col-"]:has(> .aggregator-loan),
    .row > [class*="col-"]:has(> .insurance-payment) {
        flex: 0 0 50%;
        max-width: 50%;
    }
    body .analytics-card,
    body .analytics-loan,
    body .analytics-payment,
    body .analytics-repayment,
    body .analytics-payout,
    body .analytics-rto,
    body .aggregator-loan,
    body .insurance-payment {
        display: block !important;
        min-height: 0;
        margin-bottom: .6rem;
    }
}

/* Total row under the money columns of a list (payout list) */
.list-total-row th { text-transform: none; background: #f3f6f9; border-top: 2px solid #1f2a4d !important; font-weight: 700; color: #1f2a4d; white-space: nowrap; padding-top: 10px !important; padding-bottom: 10px !important; }
.list-total-row .list-total-note { font-weight: 400; color: #6b7487; font-size: .85em; }

/* RTO list: the work stage is the badge of a pending RTO, long names (TRANSFER RECEIPT DONE) wrap */
.badge.rto-stage-badge { white-space: normal; text-align: left; line-height: 1.25; max-width: 150px; }