/*
 * Winbox theme — system-wide.
 *
 * A flat, compact, light grey-blue desktop-style interface: dense rows,
 * hairline borders, small type, and a quiet chrome so data carries the page.
 * Loaded after premium_global.css, so it intentionally overrides the rounded
 * "premium" look. Remove this one file from config/adminlte.php to revert.
 *
 * Primary: #007bc0 (Winbox blue)
 *
 * Deliberate departure from the reference system: icons inside page content
 * keep their own colours. Veteran uses colour to carry meaning there — green
 * for credit, red for arrears — and flattening it all to blue would lose
 * information. Only the chrome (sidebar, navbar) is recoloured.
 */

/* ==========================================
 * Global typography
 * ========================================== */
body,
html {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 13px !important;
    color: #1e293b !important;
    background-color: #f8fafc !important;
}

.content-wrapper,
.content-header,
.content,
.card,
.card-header,
.card-title,
.card-body,
.form-control,
.form-select,
.btn,
.modal-content,
.dropdown-menu,
.dropdown-item,
.main-header,
.navbar,
.nav-link {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
}

h1, .h1 { font-size: 18px !important; font-weight: 600 !important; color: #0f172a !important; }
h2, .h2 { font-size: 16px !important; font-weight: 600 !important; color: #1e293b !important; }
h3, .h3 { font-size: 15px !important; font-weight: 600 !important; color: #1e293b !important; }
h4, .h4 { font-size: 14px !important; font-weight: 600 !important; color: #334155 !important; }
h5, .h5 { font-size: 13px !important; font-weight: 600 !important; color: #334155 !important; }
h6, .h6 { font-size: 12px !important; font-weight: 600 !important; color: #475569 !important; }

.content-header { padding: 8px 12px !important; }
.content-header h1 { margin: 0 !important; }
.content { padding: 0 12px 12px !important; }

/* ==========================================
 * Cards — flat panels instead of rounded cards
 * ========================================== */
.card,
.card-clean,
.table-card {
    border: 1px solid #cbd5e1 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    margin-bottom: 10px !important;
}

.card-header,
.card-header-clean {
    background-color: #eef2f6 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    border-radius: 0 !important;
    padding: 6px 12px !important;
    min-height: 0 !important;
}

.card-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 !important;
}

.card-body { padding: 10px 12px !important; }
.card-body.p-0 { padding: 0 !important; }
.card-footer { background-color: #f8fafc !important; border-top: 1px solid #cbd5e1 !important; padding: 6px 12px !important; }


.stats-label,
.stat-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: #64748b !important;
}

.stats-value,
.stat-value {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

/* ==========================================
 * Tables — compact rows, alternating shading,
 * hairline separators, sticky header
 * ========================================== */
.table,
.table-clean,
.table-winbox {
    width: 100%;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    font-family: "Segoe UI", sans-serif !important;
    font-size: 12.5px !important;
    color: #1a2332 !important;
    background-color: #ffffff !important;
    margin-bottom: 0 !important;
}

.table thead th,
.table > thead > tr > th {
    background-color: #d5dde6 !important;
    color: #1a2332 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 6px 8px !important;
    border-top: 1px solid #b0bcc8 !important;
    border-bottom: 2px solid #b0bcc8 !important;
    border-right: 1px solid #c8d0d8 !important;
    white-space: nowrap;
    text-align: left !important;
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 5;
}

.table thead th:last-child { border-right: none !important; }

.table tbody tr {
    border-bottom: 1px solid #dde3e9 !important;
    transition: background-color .08s ease;
}

/* Shading is set on the cells: premium_global paints td backgrounds
   with !important and would otherwise win over a row-level rule. */
.table tbody tr:nth-child(odd) > td { background-color: #ffffff !important; }
.table tbody tr:nth-child(even) > td { background-color: #f0f4f8 !important; }
.table tbody tr:hover > td { background-color: #d6e8f7 !important; }

.table tbody td,
.table > tbody > tr > td {
    padding: 4px 8px !important;
    vertical-align: middle !important;
    border-right: 1px solid #dde3e9 !important;
    border-top: none !important;
    border-bottom: none !important;
    color: #1a2332;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
}

.table tbody td:last-child { border-right: none !important; }

.table tbody tr.selected > td,
.table tbody tr.table-active > td { background-color: #b8d4ec !important; }

.clickable-row { cursor: pointer; }

/* Figures line up when digits share a width */
.table .num,
.table .text-right,
.table .text-end { font-variant-numeric: tabular-nums; }

.scrollable-table-container { max-height: 620px; overflow: auto; }

/* ==========================================
 * Forms
 * ========================================== */
.form-control,
.form-control-clean,
.custom-select,
.form-select {
    border: 1px solid #cbd5e1 !important;
    border-radius: 2px !important;
    font-size: 12.5px !important;
    padding: 4px 8px !important;
    height: auto !important;
    min-height: 28px !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
}

.form-control:focus,
.form-control-clean:focus,
.form-select:focus {
    border-color: #007bc0 !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 192, .15) !important;
}

.form-control-sm { min-height: 25px !important; padding: 2px 6px !important; }

label,
.form-label-clean {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 2px !important;
}

.input-group-text {
    border: 1px solid #cbd5e1 !important;
    border-radius: 2px !important;
    background-color: #eef2f6 !important;
    font-size: 12.5px !important;
    padding: 4px 8px !important;
}

/* Select2 alignment with the flat inputs */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid #cbd5e1 !important;
    border-radius: 2px !important;
    min-height: 28px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px !important;
    font-size: 12.5px !important;
    color: #1e293b !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow { height: 26px !important; }
.select2-dropdown { border: 1px solid #cbd5e1 !important; border-radius: 2px !important; }
.select2-results__option { font-size: 12.5px !important; padding: 4px 8px !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #007bc0 !important; }

/* ==========================================
 * Buttons and badges
 * ========================================== */
.btn {
    border-radius: 2px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    padding: 4px 12px !important;
    box-shadow: none !important;
    transition: background-color .1s ease, border-color .1s ease;
}

.btn-sm { font-size: 11.5px !important; padding: 2px 8px !important; }
.btn-lg { font-size: 13px !important; padding: 6px 16px !important; }

.btn-primary,
.btn-clean-primary {
    background-color: #007bc0 !important;
    border-color: #007bc0 !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-clean-primary:hover {
    background-color: #005a8e !important;
    border-color: #005a8e !important;
}

.btn-light {
    background-color: #eef2f6 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

.btn-light:hover { background-color: #dce8f0 !important; color: #0f172a !important; }

.badge {
    border-radius: 2px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 6px !important;
}

/* ==========================================
 * Top navbar
 * ========================================== */
.main-header.navbar {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    background-color: #eef2f6 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    border-top: none !important;
    box-shadow: none !important;
}

.main-header.navbar .navbar-nav { align-items: center !important; height: 100% !important; }

.main-header.navbar .nav-link {
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    border-radius: 2px !important;
    color: #334155 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    transition: background-color .1s ease, color .1s ease;
}

.main-header.navbar .nav-link:hover { background-color: #e2e8f0 !important; color: #000000 !important; }
.main-header.navbar .nav-link i { color: #007bc0 !important; margin-right: 4px; font-size: 13px !important; }

/* ==========================================
 * Sidebar
 * ========================================== */
.main-sidebar,
.main-sidebar .sidebar {
    background-color: #eef2f6 !important;
    box-shadow: none !important;
    border-right: 1px solid #cbd5e1 !important;
}

.brand-link {
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 14px !important;
    background-color: #eef2f6 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
}

.brand-link .brand-text {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #1e293b !important;
    line-height: 1 !important;
}

.brand-link .brand-image { max-height: 24px !important; margin-top: 0 !important; }

.user-panel {
    border-bottom: 1px solid #cbd5e1 !important;
    background-color: #eef2f6 !important;
    padding: 8px 14px !important;
    margin-bottom: 0 !important;
}

.user-panel .info a { color: #334155 !important; font-size: 13px !important; font-weight: 500 !important; }

.sidebar .nav-sidebar { padding: 0 !important; }
.nav-sidebar .nav-item { margin: 0 !important; padding: 0 !important; }

.nav-sidebar .nav-link {
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 6px 14px !important;
    color: #2c3e50 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center;
    border-bottom: 1px solid rgba(203, 213, 225, .4) !important;
    transition: background-color .1s ease, color .1s ease;
}

.nav-sidebar .nav-link i.nav-icon,
.nav-sidebar .nav-link > i:first-child {
    color: #007bc0 !important;
    font-size: 14px !important;
    margin-right: 10px !important;
    width: 20px !important;
    text-align: center !important;
    display: inline-block !important;
}

.nav-sidebar .nav-link:hover { background-color: #e2e8f0 !important; color: #000000 !important; }

.nav-sidebar .nav-link.active,
.nav-sidebar .menu-open > .nav-link {
    background-color: #cbd5e1 !important;
    color: #000000 !important;
    font-weight: 600 !important;
}

.nav-sidebar .nav-link > p > i.right {
    transform: rotate(180deg) !important;
    color: #64748b !important;
    font-size: 10px !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    margin-top: -5px !important;
    transition: transform .15s ease-in-out !important;
}

.nav-item.menu-open > .nav-link > p > i.right { transform: rotate(270deg) !important; color: #334155 !important; }

.nav-sidebar .nav-treeview {
    background-color: #f8fafc !important;
    border-left: 2px solid #cbd5e1 !important;
    margin-left: 18px !important;
    padding: 0 !important;
}

.nav-sidebar .nav-treeview .nav-link {
    padding: 5px 14px 5px 12px !important;
    font-size: 12.5px !important;
    color: #475569 !important;
    border-bottom: 1px solid rgba(203, 213, 225, .2) !important;
}

.nav-sidebar .nav-treeview .nav-link i.nav-icon,
.nav-sidebar .nav-treeview .nav-link > i:first-child {
    color: #007bc0 !important;
    font-size: 12px !important;
}

.form-control-sidebar {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    border-radius: 2px !important;
    font-size: 13px !important;
    padding: 4px 8px !important;
}

.btn-sidebar {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #64748b !important;
    border-radius: 2px !important;
}

.btn-sidebar:hover { background-color: #e2e8f0 !important; color: #1e293b !important; }

/* ==========================================
 * Modals, dropdowns, pagination, alerts
 * ========================================== */
.modal-content,
.modal-content-clean {
    border: 1px solid #94a3b8 !important;
    border-radius: 3px !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, .3) !important;
}

.modal-header,
.modal-header-clean {
    background-color: #eef2f6 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    border-radius: 0 !important;
    padding: 8px 14px !important;
}

.modal-title,
.modal-title-clean { font-size: 13px !important; font-weight: 700 !important; color: #1e293b !important; }

.modal-body,
.modal-body-clean { padding: 14px !important; }

.modal-footer,
.modal-footer-clean {
    background-color: #f8fafc !important;
    border-top: 1px solid #cbd5e1 !important;
    border-radius: 0 !important;
    padding: 8px 14px !important;
}

.dropdown-menu {
    border: 1px solid #cbd5e1 !important;
    border-radius: 2px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .12) !important;
    font-size: 12.5px !important;
    padding: 2px 0 !important;
}

.dropdown-item { padding: 5px 12px !important; font-size: 12.5px !important; }
.dropdown-item:hover { background-color: #e2e8f0 !important; }

.page-link {
    border: 1px solid #cbd5e1 !important;
    border-radius: 2px !important;
    color: #334155 !important;
    background-color: #eef2f6 !important;
    font-size: 12px !important;
    padding: 3px 9px !important;
    margin-left: 2px !important;
}

.page-item.active .page-link,
.page-link:hover {
    background-color: #007bc0 !important;
    border-color: #007bc0 !important;
    color: #ffffff !important;
}

.alert { border-radius: 2px !important; font-size: 12.5px !important; padding: 8px 12px !important; }

/* Semantic icon colours are preserved inside alerts */
.alert-success i { color: #15803d !important; }
.alert-danger i { color: #b91c1c !important; }
.alert-warning i { color: #b45309 !important; }
.alert-info i { color: #0369a1 !important; }

/* ==========================================
 * Scrollbars
 * ========================================== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }
::-webkit-scrollbar-track { background: #f0f4f8; }

.main-sidebar ::-webkit-scrollbar { width: 6px !important; }
.main-sidebar ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; }
.main-sidebar ::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; }
.main-sidebar ::-webkit-scrollbar-track { background: transparent !important; }

/* ==========================================
 * Print — the thermal receipt must stay plain
 * ========================================== */
@media print {
    .modal-receipt-print,
    .modal-receipt-print * {
        font-family: monospace !important;
        background: #fff !important;
        color: #000 !important;
        border-color: #000 !important;
    }

    .modal-receipt-print .thermal-row { border: none !important; }
}

/* ==========================================================================
   Stat tiles - Kenyan flag palette

   Signed off on the Payments & Revenue dashboard and lifted here so the rest
   of the app matches. Three colours doing three jobs:

     Green  #006b3f   money in      collections, income, paid, completed
     Red    #bb0000   money owed    arrears, debt, overdue, failed
     Black  #111827   everything else - totals, targets, counts

   White is the card itself, which is what separates the bands the way the
   flag does.

   Two things make this reach every page without editing sixty views. A card
   can opt in explicitly with .card-ke-green / -red / -black, and anything
   that does not is read from the classes already on it: an .icon-red or a
   .bg-danger is money owed, an .icon-green or .bg-success is money in, and
   the rest fall to black. So existing screens pick up the palette as they
   are, and new ones can be explicit.

   Applies to both card families in this app - AdminLTE's .info-box and
   .small-box, and the hand-rolled .stats-card set.
   ========================================================================== */

:root {
    --ke-black: #111827;
    --ke-red:   #bb0000;
    --ke-green: #006b3f;
    --ke-white: #ffffff;

    --ke-green-tint: #e8f5e9;
    --ke-green-edge: #bbf7d0;
    --ke-red-tint:   #fef2f2;
    --ke-red-edge:   #fecaca;
    --ke-black-tint: #f1f5f9;
    --ke-black-edge: #cbd5e1;
}

/* --- the card ----------------------------------------------------------- */
.stats-card,
.stats-card-mini,
.stats-card-interactive,
.info-box-custom,
.info-box,
.small-box {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    background: var(--ke-white) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04) !important;
    transition: box-shadow .14s ease, transform .14s ease;
}

.stats-card::before,
.stats-card-mini::before,
.stats-card-interactive::before,
.info-box-custom::before,
.info-box::before,
.small-box::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: 3.5px !important;
    width: auto !important;
    border-radius: 4px 4px 0 0 !important;
    display: block !important;
    opacity: 1 !important;
    background: var(--ke-black) !important;
    background-color: var(--ke-black) !important;           /* default: Kenyan black */
}

.stats-card:hover,
.stats-card-mini:hover,
.stats-card-interactive:hover,
.info-box:hover,
.small-box:hover {
    box-shadow: 0 6px 18px rgba(17, 24, 39, .09) !important;
    transform: translateY(-1px);
}

.stats-card:hover::before,
.stats-card-mini:hover::before,
.stats-card-interactive:hover::before,
.info-box:hover::before,
.small-box:hover::before {
    height: 4.5px !important;
}

/* --- explicit opt-in ---------------------------------------------------- */
.card-ke-green::before, .stats-card.card-ke-green::before, .info-box.card-ke-green::before, .small-box.card-ke-green::before { 
    background: var(--ke-green) !important; 
    background-color: var(--ke-green) !important; 
}
.card-ke-red::before, .stats-card.card-ke-red::before, .info-box.card-ke-red::before, .small-box.card-ke-red::before { 
    background: var(--ke-red) !important; 
    background-color: var(--ke-red) !important; 
}
.card-ke-black::before, .stats-card.card-ke-black::before, .info-box.card-ke-black::before, .small-box.card-ke-black::before { 
    background: var(--ke-black) !important; 
    background-color: var(--ke-black) !important; 
}

.card-ke-green .stats-icon-wrapper,
.card-ke-green .info-box-icon,
.icon-ke-green {
    background: var(--ke-green-tint) !important;
    color: var(--ke-green) !important;
    border: 1px solid var(--ke-green-edge) !important;
}

.card-ke-red .stats-icon-wrapper,
.card-ke-red .info-box-icon,
.icon-ke-red {
    background: var(--ke-red-tint) !important;
    color: var(--ke-red) !important;
    border: 1px solid var(--ke-red-edge) !important;
}

.card-ke-black .stats-icon-wrapper,
.card-ke-black .info-box-icon,
.icon-ke-black {
    background: var(--ke-black-tint) !important;
    color: var(--ke-black) !important;
    border: 1px solid var(--ke-black-edge) !important;
}

/* --- read from what is already on the card ------------------------------ */
/* Money in / Growth / Occupied / Paid / Success */
.stats-card:has(.icon-green)::before,
.stats-card:has(.icon-paid)::before,
.stats-card:has(.icon-ke-green)::before,
.stats-card:has(.bg-success)::before,
.stats-card:has(.bg-success-light)::before,
.stats-card:has(.text-success)::before,
.stats-card-mini:has(.icon-green)::before,
.stats-card-mini:has(.icon-paid)::before,
.stats-card-mini:has(.icon-ke-green)::before,
.stats-card-mini:has(.bg-success)::before,
.stats-card-mini:has(.bg-success-light)::before,
.stats-card-mini:has(.text-success)::before,
.info-box.bg-success::before,
.info-box.bg-gradient-success::before,
.info-box:has(.text-success)::before,
.info-box:has(.bg-success)::before,
.info-box:has(.bg-success-light)::before,
.small-box.bg-success::before,
.small-box.bg-gradient-success::before,
.card-success::before,
.border-success::before {
    background: var(--ke-green) !important;
    background-color: var(--ke-green) !important;
}

/* Money owed / Debt / Vacated / Exited / Alert / Danger */
.stats-card:has(.icon-red)::before,
.stats-card:has(.icon-exited)::before,
.stats-card:has(.icon-ke-red)::before,
.stats-card:has(.bg-danger)::before,
.stats-card:has(.bg-danger-light)::before,
.stats-card:has(.text-danger)::before,
.stats-card-mini:has(.icon-red)::before,
.stats-card-mini:has(.icon-exited)::before,
.stats-card-mini:has(.icon-ke-red)::before,
.stats-card-mini:has(.bg-danger)::before,
.stats-card-mini:has(.bg-danger-light)::before,
.stats-card-mini:has(.text-danger)::before,
.stats-card-interactive:has(.icon-red)::before,
.info-box.bg-danger::before,
.info-box.bg-gradient-danger::before,
.info-box:has(.text-danger)::before,
.info-box:has(.bg-danger)::before,
.info-box:has(.bg-danger-light)::before,
.small-box.bg-danger::before,
.small-box.bg-gradient-danger::before,
.card-danger::before,
.border-danger::before {
    background: var(--ke-red) !important;
    background-color: var(--ke-red) !important;
}

/* Red & Green card hover refinement */
.stats-card:has(.icon-red):hover,
.stats-card-interactive:has(.icon-red):hover,
.stats-card.card-ke-red:hover {
    border-color: var(--ke-red-edge) !important;
    box-shadow: 0 10px 15px -3px rgba(187, 0, 0, 0.12), 0 4px 6px -2px rgba(187, 0, 0, 0.05) !important;
}
.stats-card:has(.icon-green):hover,
.stats-card.card-ke-green:hover {
    border-color: var(--ke-green-edge) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 107, 63, 0.12), 0 4px 6px -2px rgba(0, 107, 63, 0.05) !important;
}

/* --- the icon chip ------------------------------------------------------ */
.stats-icon-wrapper,
.stats-icon-mini,
.icon-wrapper,
.info-box .info-box-icon,
.small-box .icon {
    background: var(--ke-black-tint) !important;
    color: var(--ke-black) !important;
    border: 1px solid var(--ke-black-edge) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

/* Green Chips */
.icon-green, .icon-paid, .icon-ke-green,
.bg-success-light,
.info-box.bg-success .info-box-icon,
.info-box.bg-gradient-success .info-box-icon,
.small-box.bg-success .icon {
    background: var(--ke-green-tint) !important;
    color: var(--ke-green) !important;
    border: 1px solid var(--ke-green-edge) !important;
}

/* Red Chips */
.icon-red, .icon-exited, .icon-ke-red,
.bg-danger-light,
.info-box.bg-danger .info-box-icon,
.info-box.bg-gradient-danger .info-box-icon,
.small-box.bg-danger .icon {
    background: var(--ke-red-tint) !important;
    color: var(--ke-red) !important;
    border: 1px solid var(--ke-red-edge) !important;
}

/* Neutral / General chips (blue, navy, purple, orange, teal, etc. all resolve to Kenyan black) */
.icon-blue, .icon-navy, .icon-purple, .icon-orange, .icon-teal,
.icon-circle, .icon-validated, .icon-duplicate, .icon-orphaned, .icon-mismatch, .icon-ke-black,
.bg-primary-light, .bg-info-light, .bg-navy-light, .bg-warning-light {
    background: var(--ke-black-tint) !important;
    color: var(--ke-black) !important;
    border: 1px solid var(--ke-black-edge) !important;
}

/* Ensure icons inside chips inherit the chip's theme color */
.stats-icon-wrapper i,
.stats-icon-mini i,
.icon-wrapper i,
.info-box .info-box-icon i,
.small-box .icon i {
    color: inherit !important;
}

.stats-card .text-success,
.stats-card-mini .text-success,
.info-box .text-success {
    color: var(--ke-green) !important;
}

.stats-card .text-danger,
.stats-card-mini .text-danger,
.info-box .text-danger {
    color: var(--ke-red) !important;
}

.stats-card .text-primary,
.stats-card .text-info,
.stats-card .text-navy,
.stats-card-mini .text-primary,
.stats-card-mini .text-info,
.stats-card-mini .text-navy,
.info-box .text-primary,
.info-box .text-info,
.info-box .text-navy {
    color: var(--ke-black) !important;
}

/* --- AdminLTE colour classes lose their fill ---------------------------- */
/* Left alone, bg-info and friends paint the whole card and put white text on
   it, which fights the palette and hides the figure on a white ground. */
.info-box[class*="bg-"],
.small-box[class*="bg-"] {
    background: var(--ke-white) !important;
    color: var(--ke-black) !important;
}

.info-box[class*="bg-"] .info-box-number,
.small-box[class*="bg-"] h3 { color: var(--ke-black) !important; }

.info-box[class*="bg-"] .info-box-text,
.small-box[class*="bg-"] p { color: #64748b !important; }

.info-box.bg-danger .info-box-number,
.small-box.bg-danger h3 { color: var(--ke-red) !important; }

.info-box.bg-success .info-box-number,
.small-box.bg-success h3 { color: var(--ke-green) !important; }

/* --- type -------------------------------------------------------------- */
.stats-value,
.info-box .info-box-number,
.small-box h3 {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- progress bars and badges take the same three ----------------------- */
.progress-bar-ke-green { background: var(--ke-green) !important; background-color: var(--ke-green) !important; }
.progress-bar-ke-red   { background: var(--ke-red) !important; background-color: var(--ke-red) !important; }
.progress-bar-ke-black { background: var(--ke-black) !important; background-color: var(--ke-black) !important; }

.badge-ke-green { background: var(--ke-green-tint) !important; color: var(--ke-green) !important; }
.badge-ke-red   { background: var(--ke-red-tint) !important;   color: var(--ke-red) !important; }
.badge-ke-black { background: var(--ke-black-tint) !important; color: var(--ke-black) !important; }

/* --- the full tricolour, where a page wants the flag itself ------------- */
.kenyan-flag-stripe {
    height: 3.5px;
    background: linear-gradient(90deg,
        #111827 0%, #111827 30%,
        #ffffff 30%, #ffffff 35%,
        #bb0000 35%, #bb0000 65%,
        #ffffff 65%, #ffffff 70%,
        #006b3f 70%, #006b3f 100%
    );
    border-radius: 3px;
    width: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

/* ==========================================================================
   Table row height

   The cell padding already matched the sister system - 4px 8px. What made
   these rows taller was what sits inside them: action cells carrying six or
   seven buttons, status badges, and icons whose own line-height pushed the
   row past the cell.

   So the padding is left where it is and the contents are brought down to
   size instead. A row with a badge and a row of buttons now stands the same
   height as a row of plain text.
   ========================================================================== */

.table tbody td,
.table > tbody > tr > td {
    padding: 3px 8px !important;
    line-height: 1.3 !important;
}

.table.table-sm tbody td,
.table.table-sm > tbody > tr > td {
    padding: 2px 6px !important;
}

/* Nothing inside a cell may set its own height */
.table tbody td > *,
.table tbody td .btn,
.table tbody td .badge {
    vertical-align: middle;
}

/* Action cells: the main offender. Six buttons at default size make a row
   twice the height of its neighbours. */
.table tbody td .btn,
.table tbody td .btn-sm,
.table tbody td .btn-xs,
.action-buttons .btn {
    padding: 1px 6px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 2px !important;
}

.table tbody td .btn i,
.action-buttons .btn i {
    font-size: 10.5px !important;
    line-height: 1 !important;
    vertical-align: middle;
}

.action-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    align-items: center !important;
}

.action-buttons .btn { min-width: 0 !important; }

.action-buttons form,
.table tbody td form {
    margin: 0 !important;
    display: inline-block !important;
    line-height: 1 !important;
}

/* Badges in a cell label a value; they should not set the row height */
.table tbody td .badge,
.table tbody td .badge-pill {
    padding: 1px 5px !important;
    font-size: 9.5px !important;
    line-height: 1.5 !important;
    border-radius: 2px !important;
    vertical-align: middle;
}

/* Inputs and selects that sit in cells on the editable tables */
.table tbody td .form-control,
.table tbody td .custom-select {
    height: 24px !important;
    padding: 1px 6px !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
}

.table tbody td .custom-control,
.table tbody td .custom-checkbox {
    min-height: 0 !important;
    line-height: 1.2 !important;
}

/* Small print stacked under a value - a common pattern here - was adding a
   whole line to the row. */
.table tbody td small,
.table tbody td .text-muted.d-block {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    display: block;
}

/* Avatars and initials circles */
.table tbody td img,
.table tbody td .avatar,
.table tbody td .user-avatar {
    max-height: 24px !important;
    width: auto !important;
}

/* The header follows, so the whole table reads as one thing */
.table thead th,
.table > thead > tr > th {
    padding: 5px 8px !important;
    line-height: 1.25 !important;
}

/* --------------------------------------------------------------------------
   Buttons sized inline

   Several tables set width and height directly on the button element - a
   32px square for an icon. An inline declaration outranks any selector, so
   the only thing that reaches it is !important, and without that the row
   stands as tall as the button regardless of the cell padding.
   -------------------------------------------------------------------------- */

.table tbody td .btn[style],
.table tbody td button[style],
.table tbody td a.btn[style] {
    width: auto !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 0 !important;
    padding: 0 6px !important;
    border-radius: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.table tbody td .btn[style] i,
.table tbody td button[style] i {
    font-size: 10.5px !important;
    line-height: 1 !important;
}

/* The wrappers around them should not add their own height either */
.table tbody td .d-flex,
.table tbody td .btn-group {
    align-items: center !important;
    min-height: 0 !important;
    gap: 3px;
}

.table tbody td .mr-2 { margin-right: 3px !important; }