/* ================================================================
   SIMAS GLOBAL CLIENT THEME
   Load this file AFTER Bootstrap, DataTables, Select2, jQuery UI,
   nyumbasaccos.css and any page-specific stylesheet.
   ================================================================ */

/* ---------- 1. Reset and page ---------- */
html,
body,
body.body {
    min-height: 100%;
    background: var(--simas-page-bg) !important;
    color: var(--simas-text) !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

body,
body * {
    scrollbar-color: var(--simas-primary-light) var(--simas-surface-alt);
}

::selection {
    background: var(--simas-primary) !important;
    color: var(--simas-on-primary) !important;
}

.container,
.container-fluid,
.row,
[class*="col-"] {
    color: inherit;
}

/* ---------- 2. Typography ---------- */
h1, h2, h3, h4, h5, h6,
.page-header,
.panel-title,
.modal-title {
    color: var(--simas-text-strong) !important;
}

p, span, div, label, small, strong, b, em,
legend, caption, dt, dd {
    border-color: var(--simas-border);
}

.text-muted,
.help-block,
small,
.small {
    color: var(--simas-muted) !important;
}

.text-primary { color: var(--simas-primary) !important; }
.text-success { color: var(--simas-success) !important; }
.text-info { color: var(--simas-info) !important; }
.text-warning { color: var(--simas-warning) !important; }
.text-danger { color: var(--simas-danger) !important; }

hr,
hr.style-five,
hr.style-seven {
    border: 0 !important;
    height: 1px !important;
    background: var(--simas-border) !important;
}

hr.style-five {
    background: linear-gradient(
        to right,
        transparent,
        var(--simas-primary),
        var(--simas-accent),
        var(--simas-primary),
        transparent
    ) !important;
}

blockquote {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border-left: 5px solid var(--simas-accent) !important;
    border-radius: var(--simas-radius-sm) !important;
    box-shadow: 0 2px 8px var(--simas-shadow) !important;
}

/* ---------- 3. Links ---------- */
a,
a:link,
.btn-link {
    color: var(--simas-primary) !important;
}

a:hover,
a:focus,
a:active,
.btn-link:hover,
.btn-link:focus {
    color: var(--simas-primary-dark) !important;
}

a.readmore {
    color: var(--simas-primary) !important;
    font-weight: 700 !important;
}

a.readmore:hover {
    color: var(--simas-accent-dark) !important;
}

/* ---------- 4. Navbar / top navigation ---------- */
.navbar,
.navbar-default,
.navbar-inverse,
.navbar-simas,
.custom-navbar,
html body nav.navbar,
html body nav.navbar.navbar-inverse,
html body nav.navbar.navbar-inverse.navbar-simas {
    background: var(--simas-primary) !important;
    border-color: var(--simas-primary-dark) !important;
    box-shadow: 0 3px 12px var(--simas-shadow-strong) !important;
}

.navbar-brand,
.navbar-brand *,
.navbar .navbar-text,
.navbar .nav > li > a,
.navbar-inverse .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a,
.top-nav > li > a,
.navbar .glyphicon,
.navbar .fa {
    color: var(--simas-on-primary) !important;
}

.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus,
.navbar .nav > .open > a,
.navbar .nav > .open > a:hover,
.navbar .nav > .open > a:focus,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    background: var(--simas-primary-dark) !important;
    color: var(--simas-on-primary) !important;
}

.navbar-toggle {
    border-color: var(--simas-primary-light) !important;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
    background: var(--simas-primary-dark) !important;
}

.navbar-toggle .icon-bar {
    background: var(--simas-on-primary) !important;
}

/* ---------- 5. Sidebar / accordion navigation ---------- */
.sidebar,
.side-nav,
#sidebar,
.sidebar-wrapper,
.navigation-sidebar,
.panel-group#accordion,
.panel-group[id^="accordion"] {
    background: transparent !important;
    color: var(--simas-text) !important;
}

.sidebar .panel,
.side-nav .panel,
.panel-group .panel {
    background: var(--simas-surface) !important;
    border-color: var(--simas-border) !important;
}

.sidebar .panel-heading,
.side-nav .panel-heading,
.panel-group .panel-heading {
    background: var(--simas-primary) !important;
    border-color: var(--simas-primary-dark) !important;
    color: var(--simas-on-primary) !important;
}

.sidebar .panel-heading *,
.side-nav .panel-heading *,
.panel-group .panel-heading * {
    color: var(--simas-on-primary) !important;
}

.sidebar .panel-body,
.side-nav .panel-body,
.panel-group .panel-body {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
}

.sidebar .panel-body a,
.side-nav .panel-body a,
.panel-group .panel-body a {
    display: block;
    border-radius: var(--simas-radius-sm);
    padding: 7px 9px;
    color: var(--simas-text) !important;
}

.sidebar .panel-body a:hover,
.side-nav .panel-body a:hover,
.panel-group .panel-body a:hover {
    background: var(--simas-primary-soft) !important;
    color: var(--simas-primary-dark) !important;
    text-decoration: none !important;
}

/* ---------- 6. Cards, panels, widgets, wells ---------- */
.card,
.box,
.widget,
.info-box,
.small-box,
.thumbnail,
.well,
.jumbotron,
.app_form,
.registration-form,
.form-container,
.transactions,
.cart,
.calculation-row,
#printable,
.content-box,
.dashboard-card {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border: 1px solid var(--simas-border) !important;
    border-radius: var(--simas-radius) !important;
    box-shadow: 0 4px 14px var(--simas-shadow) !important;
}

.card-header,
.box-header,
.widget-header,
.info-box-header,
.dashboard-card-header {
    background: var(--simas-primary) !important;
    color: var(--simas-on-primary) !important;
    border-color: var(--simas-primary-dark) !important;
    border-radius: var(--simas-radius) var(--simas-radius) 0 0 !important;
}

.card-header *,
.box-header *,
.widget-header *,
.info-box-header *,
.dashboard-card-header * {
    color: var(--simas-on-primary) !important;
}

.panel {
    background: var(--simas-surface) !important;
    border-color: var(--simas-border) !important;
    border-radius: var(--simas-radius) !important;
    box-shadow: 0 4px 14px var(--simas-shadow) !important;
    overflow: hidden;
}

.panel-heading,
.panel-default > .panel-heading,
.panel-primary > .panel-heading,
.panel-info > .panel-heading {
    background: var(--simas-primary) !important;
    border-color: var(--simas-primary-dark) !important;
    color: var(--simas-on-primary) !important;
}

.panel-heading *,
.panel-heading a,
.panel-heading label,
.panel-heading span,
.panel-heading b,
.panel-heading strong,
.panel-heading .glyphicon,
.panel-heading .fa {
    color: var(--simas-on-primary) !important;
}

.panel-body,
.panel-footer {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border-color: var(--simas-border) !important;
}

.panel-success { border-color: var(--simas-success) !important; }
.panel-success > .panel-heading {
    background: var(--simas-success) !important;
    color: var(--simas-on-success) !important;
}
.panel-warning { border-color: var(--simas-warning) !important; }
.panel-warning > .panel-heading {
    background: var(--simas-warning) !important;
    color: var(--simas-on-warning) !important;
}
.panel-danger { border-color: var(--simas-danger) !important; }
.panel-danger > .panel-heading {
    background: var(--simas-danger) !important;
    color: var(--simas-on-danger) !important;
}

/* ---------- 7. Buttons ---------- */
.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    border-radius: var(--simas-radius-sm) !important;
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, box-shadow .18s ease, transform .08s ease !important;
}

.btn:focus,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--simas-focus-ring) !important;
}

.btn:active,
button:active {
    transform: translateY(1px);
}

.btn-default,
.btn-secondary {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border-color: var(--simas-border-strong) !important;
}

.btn-default:hover,
.btn-secondary:hover {
    background: var(--simas-surface-hover) !important;
    color: var(--simas-primary-dark) !important;
    border-color: var(--simas-primary) !important;
}

.btn-primary,
.btn-custom,
.form-container button[type="submit"] {
    background: var(--simas-primary) !important;
    color: var(--simas-on-primary) !important;
    border-color: var(--simas-primary-dark) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-custom:hover,
.btn-custom:focus,
.form-container button[type="submit"]:hover {
    background: var(--simas-primary-dark) !important;
    color: var(--simas-on-primary) !important;
    border-color: var(--simas-primary-darker) !important;
}

.btn-info {
    background: var(--simas-info) !important;
    color: var(--simas-on-info) !important;
    border-color: var(--simas-info) !important;
}
.btn-success {
    background: var(--simas-success) !important;
    color: var(--simas-on-success) !important;
    border-color: var(--simas-success) !important;
}
.btn-warning {
    background: var(--simas-warning) !important;
    color: var(--simas-on-warning) !important;
    border-color: var(--simas-warning) !important;
}
.btn-danger,
.form-container button[type="reset"] {
    background: var(--simas-danger) !important;
    color: var(--simas-on-danger) !important;
    border-color: var(--simas-danger) !important;
}

.btn-info:hover { filter: brightness(.90); }
.btn-success:hover { filter: brightness(.90); }
.btn-warning:hover { filter: brightness(.90); }
.btn-danger:hover { filter: brightness(.90); }

/* ---------- 8. Forms and controls ---------- */
form,
.app_form,
.registration-form {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border-color: var(--simas-border) !important;
}

label,
.control-label,
.form-label,
form label,
.panel-body label {
    color: var(--simas-text-strong) !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select,
.panel-body input,
.panel-body select,
.panel-body textarea,
.form-container input,
.form-container select,
.form-container textarea {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border: 1px solid var(--simas-border-strong) !important;
    border-radius: var(--simas-radius-sm) !important;
    padding: var(--simas-control-padding-y) var(--simas-control-padding-x) !important;
    box-shadow: none !important;
}

.form-control:hover,
input:hover,
textarea:hover,
select:hover {
    border-color: var(--simas-primary-light) !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border-color: var(--simas-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--simas-focus-ring) !important;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control,
input[disabled],
select[disabled],
textarea[disabled] {
    background: var(--simas-surface-alt) !important;
    color: var(--simas-disabled-text) !important;
    cursor: not-allowed;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: var(--simas-muted) !important;
    opacity: 1;
}

.input-group-addon,
.input-group-btn .btn {
    background: var(--simas-primary-soft) !important;
    color: var(--simas-primary-dark) !important;
    border-color: var(--simas-border-strong) !important;
}

legend {
    color: var(--simas-primary-dark) !important;
    border-bottom-color: var(--simas-border) !important;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--simas-primary) !important;
}

.has-success .form-control { border-color: var(--simas-success) !important; }
.has-warning .form-control { border-color: var(--simas-warning) !important; }
.has-error .form-control { border-color: var(--simas-danger) !important; }
.has-success .control-label { color: var(--simas-success) !important; }
.has-warning .control-label { color: var(--simas-warning) !important; }
.has-error .control-label { color: var(--simas-danger) !important; }

/* ---------- 9. Tables: ordinary, Bootstrap and project tables ---------- */
.table-responsive {
    background: var(--simas-surface) !important;
    border: 1px solid var(--simas-border) !important;
    border-radius: var(--simas-radius) !important;
    padding: 6px !important;
    box-shadow: 0 3px 12px var(--simas-shadow) !important;
}

table,
.table,
.table.table-striped,
.table-responsive .hover_me,
.hover_me,
#example,
.dataTable {
    width: 100% !important;
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border-color: var(--simas-border) !important;
    border-collapse: collapse !important;
}

table th,
table td,
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td,
.table-responsive .hover_me th,
.table-responsive .hover_me td,
#example th,
#example td,
table.dataTable th,
table.dataTable td {
    border-color: var(--simas-border) !important;
    color: var(--simas-text) !important;
    vertical-align: middle !important;
}

table thead th,
.table > thead > tr > th,
.table-responsive .hover_me thead tr:first-child th,
#example thead tr:first-child th,
table.dataTable thead th,
table.dataTable thead td {
    background: var(--simas-primary) !important;
    color: var(--simas-on-primary) !important;
    border-color: var(--simas-primary-dark) !important;
    font-weight: 700 !important;
}

table thead th *,
.table > thead > tr > th *,
#example thead th *,
.hover_me thead th * {
    color: var(--simas-on-primary) !important;
}

.table-responsive .hover_me thead tr:nth-child(2) th,
#example thead tr:nth-child(2) th,
table thead tr.filter-row th {
    background: var(--simas-primary-soft) !important;
    color: var(--simas-text-strong) !important;
}

table tbody tr,
.table > tbody > tr,
.hover_me tbody tr,
#example tbody tr {
    background: var(--simas-surface) !important;
}

table tbody tr:nth-child(even),
.table-striped > tbody > tr:nth-of-type(odd),
.table.table-striped tbody tr:nth-child(even),
.hover_me tbody tr:nth-child(even),
#example tbody tr:nth-child(even) {
    background: var(--simas-surface-alt) !important;
}

table tbody tr:hover,
table tbody tr:hover td,
.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > td,
.table-responsive .hover_me tbody tr:hover td,
#example tbody tr:hover td {
    background: var(--simas-surface-hover) !important;
    color: var(--simas-text-strong) !important;
}

table tbody tr.active,
table tbody tr.selected,
table tbody tr.active td,
table tbody tr.selected td,
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected > * {
    background: var(--simas-surface-selected) !important;
    color: var(--simas-text-strong) !important;
}

.table > tbody > tr.success > td,
.table > tbody > tr > td.success {
    background: var(--simas-success-soft) !important;
    color: var(--simas-text-strong) !important;
}
.table > tbody > tr.warning > td,
.table > tbody > tr > td.warning {
    background: var(--simas-warning-soft) !important;
    color: var(--simas-text-strong) !important;
}
.table > tbody > tr.danger > td,
.table > tbody > tr > td.danger {
    background: var(--simas-danger-soft) !important;
    color: var(--simas-text-strong) !important;
}
.table > tbody > tr.info > td,
.table > tbody > tr > td.info {
    background: var(--simas-info-soft) !important;
    color: var(--simas-text-strong) !important;
}

caption {
    color: var(--simas-muted) !important;
}

/* ---------- 10. DataTables all supported versions ---------- */
.dataTables_wrapper,
.dataTables_wrapper * {
    color: var(--simas-text) !important;
}

.dataTables_wrapper {
    background: transparent !important;
}

.dataTables_length label,
.dataTables_filter label,
.dataTables_info {
    color: var(--simas-text) !important;
}

.dataTables_length select,
.dataTables_filter input,
.dataTables_filter input[type="search"] {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border: 1px solid var(--simas-border-strong) !important;
    border-radius: var(--simas-radius-sm) !important;
}

.dataTables_length select:focus,
.dataTables_filter input:focus {
    border-color: var(--simas-primary) !important;
    box-shadow: 0 0 0 3px var(--simas-focus-ring) !important;
}

.dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button,
.pagination > li > a,
.pagination > li > span {
    background: var(--simas-surface) !important;
    color: var(--simas-primary) !important;
    border: 1px solid var(--simas-border) !important;
    border-radius: var(--simas-radius-sm) !important;
}

.dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.pagination > li > a:hover,
.pagination > li > span:hover {
    background: var(--simas-primary-soft) !important;
    color: var(--simas-primary-dark) !important;
    border-color: var(--simas-primary) !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background: var(--simas-primary) !important;
    color: var(--simas-on-primary) !important;
    border-color: var(--simas-primary-dark) !important;
}

.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover,
.pagination > .disabled > a,
.pagination > .disabled > span {
    background: var(--simas-surface-alt) !important;
    color: var(--simas-disabled-text) !important;
    border-color: var(--simas-border) !important;
}

.dataTables_processing {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border: 1px solid var(--simas-border) !important;
    border-radius: var(--simas-radius) !important;
    box-shadow: 0 5px 18px var(--simas-shadow-strong) !important;
}

.dt-buttons .dt-button,
button.dt-button,
div.dt-button,
a.dt-button,
.dt-button-collection .dt-button {
    background: var(--simas-primary) !important;
    color: var(--simas-on-primary) !important;
    border: 1px solid var(--simas-primary-dark) !important;
    border-radius: var(--simas-radius-sm) !important;
}

.dt-buttons .dt-button:hover,
button.dt-button:hover,
a.dt-button:hover {
    background: var(--simas-primary-dark) !important;
    color: var(--simas-on-primary) !important;
}

/* ---------- 11. Modals ---------- */
.modal-backdrop {
    background: #0F172A !important;
}

.modal-content {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border: 1px solid var(--simas-border) !important;
    border-radius: var(--simas-radius-lg) !important;
    box-shadow: 0 16px 45px var(--simas-shadow-strong) !important;
    overflow: hidden;
}

.modal-header {
    background: var(--simas-primary) !important;
    color: var(--simas-on-primary) !important;
    border-bottom-color: var(--simas-primary-dark) !important;
}

.modal-header *,
.modal-header .modal-title,
.modal-header .close,
.modal-header .close span {
    color: var(--simas-on-primary) !important;
}

.modal-header .close {
    opacity: .9 !important;
    text-shadow: none !important;
}

.modal-body,
.modal-footer {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border-color: var(--simas-border) !important;
}

/* ---------- 12. Dropdowns, menus, popovers, tooltips ---------- */
.dropdown-menu {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border: 1px solid var(--simas-border) !important;
    border-radius: var(--simas-radius) !important;
    box-shadow: 0 8px 24px var(--simas-shadow-strong) !important;
}

.dropdown-menu > li > a {
    color: var(--simas-text) !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background: var(--simas-primary-soft) !important;
    color: var(--simas-primary-dark) !important;
}

.dropdown-menu .divider {
    background: var(--simas-border) !important;
}

.popover {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border-color: var(--simas-border) !important;
    box-shadow: 0 8px 24px var(--simas-shadow-strong) !important;
}

.popover-title {
    background: var(--simas-primary-soft) !important;
    color: var(--simas-primary-dark) !important;
    border-bottom-color: var(--simas-border) !important;
}

.tooltip-inner {
    background: var(--simas-text-strong) !important;
    color: var(--simas-surface) !important;
}

/* ---------- 13. Tabs, pills, breadcrumb ---------- */
.nav-tabs {
    border-bottom-color: var(--simas-border) !important;
}

.nav-tabs > li > a,
.nav-pills > li > a {
    color: var(--simas-text) !important;
    border-radius: var(--simas-radius-sm) var(--simas-radius-sm) 0 0 !important;
}

.nav-tabs > li > a:hover,
.nav-pills > li > a:hover {
    background: var(--simas-primary-soft) !important;
    color: var(--simas-primary-dark) !important;
    border-color: var(--simas-border) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background: var(--simas-primary) !important;
    color: var(--simas-on-primary) !important;
    border-color: var(--simas-primary-dark) !important;
}

.tab-content {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border: 1px solid var(--simas-border) !important;
    border-top: 0 !important;
    border-radius: 0 0 var(--simas-radius) var(--simas-radius) !important;
    padding: 12px;
}

.breadcrumb {
    background: var(--simas-primary-soft) !important;
    color: var(--simas-text) !important;
    border: 1px solid var(--simas-border) !important;
    border-radius: var(--simas-radius) !important;
}

.breadcrumb > .active {
    color: var(--simas-muted) !important;
}

/* ---------- 14. Alerts, labels and badges ---------- */
.alert {
    border-radius: var(--simas-radius) !important;
    border-width: 1px !important;
    box-shadow: 0 3px 10px var(--simas-shadow) !important;
}

.alert-success,
.alert-succes {
    background: var(--simas-success-soft) !important;
    color: var(--simas-text-strong) !important;
    border-color: var(--simas-success) !important;
}
.alert-info {
    background: var(--simas-info-soft) !important;
    color: var(--simas-text-strong) !important;
    border-color: var(--simas-info) !important;
}
.alert-warning {
    background: var(--simas-warning-soft) !important;
    color: var(--simas-text-strong) !important;
    border-color: var(--simas-warning) !important;
}
.alert-danger {
    background: var(--simas-danger-soft) !important;
    color: var(--simas-text-strong) !important;
    border-color: var(--simas-danger) !important;
}

.alert a,
.alert .alert-link {
    color: inherit !important;
    text-decoration: underline !important;
}

.badge,
.label-primary {
    background: var(--simas-primary) !important;
    color: var(--simas-on-primary) !important;
}
.label-default { background: var(--simas-muted) !important; color: #FFFFFF !important; }
.label-success { background: var(--simas-success) !important; color: var(--simas-on-success) !important; }
.label-info { background: var(--simas-info) !important; color: var(--simas-on-info) !important; }
.label-warning { background: var(--simas-warning) !important; color: var(--simas-on-warning) !important; }
.label-danger { background: var(--simas-danger) !important; color: var(--simas-on-danger) !important; }

/* ---------- 15. Progress, list groups and media ---------- */
.progress {
    background: var(--simas-surface-alt) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 3px var(--simas-shadow) !important;
}

.progress-bar { background: var(--simas-primary) !important; color: var(--simas-on-primary) !important; }
.progress-bar-success { background: var(--simas-success) !important; }
.progress-bar-info { background: var(--simas-info) !important; }
.progress-bar-warning { background: var(--simas-warning) !important; }
.progress-bar-danger { background: var(--simas-danger) !important; }

.list-group-item {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border-color: var(--simas-border) !important;
}

.list-group-item:hover,
.list-group-item:focus,
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background: var(--simas-primary-soft) !important;
    color: var(--simas-primary-dark) !important;
    border-color: var(--simas-primary-light) !important;
}

.thumbnail,
.media {
    color: var(--simas-text) !important;
}

/* ---------- 16. Select2 old and new ---------- */
.select2-container .select2-choice,
.select2-container-multi .select2-choices,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border: 1px solid var(--simas-border-strong) !important;
    border-radius: var(--simas-radius-sm) !important;
}

.select2-container .select2-choice .select2-chosen,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: var(--simas-text) !important;
}

.select2-drop,
.select2-dropdown,
.select2-results,
.select2-results__options {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border-color: var(--simas-border) !important;
}

.select2-results .select2-highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--simas-primary) !important;
    color: var(--simas-on-primary) !important;
}

.select2-search input,
.select2-search__field {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border-color: var(--simas-border-strong) !important;
}

/* ---------- 17. Bootstrap select ---------- */
.bootstrap-select > .dropdown-toggle {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border-color: var(--simas-border-strong) !important;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.selected a {
    background: var(--simas-primary-soft) !important;
    color: var(--simas-primary-dark) !important;
}

/* ---------- 18. jQuery UI / date picker ---------- */
.ui-widget,
.ui-widget-content,
.ui-datepicker,
.ui-dialog,
.ui-menu {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border-color: var(--simas-border) !important;
}

.ui-widget-header,
.ui-datepicker-header,
.ui-dialog-titlebar {
    background: var(--simas-primary) !important;
    color: var(--simas-on-primary) !important;
    border-color: var(--simas-primary-dark) !important;
}

.ui-widget-header *,
.ui-datepicker-header * {
    color: var(--simas-on-primary) !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background: var(--simas-surface-alt) !important;
    color: var(--simas-text) !important;
    border-color: var(--simas-border) !important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-state-active,
.ui-widget-content .ui-state-active {
    background: var(--simas-primary) !important;
    color: var(--simas-on-primary) !important;
    border-color: var(--simas-primary-dark) !important;
}

/* ---------- 19. Footer ---------- */
.footer,
footer,
.print-footer {
    background: var(--simas-primary) !important;
    color: var(--simas-on-primary) !important;
    border-top: 2px solid var(--simas-accent) !important;
    box-shadow: 0 -2px 10px var(--simas-shadow) !important;
}

.footer *,
footer * {
    color: var(--simas-on-primary) !important;
}

/* ---------- 20. Loading and overlay components ---------- */
.loading,
.loader-overlay,
.processing,
.dataTables_processing,
#loading,
[id*="loading"] {
    color: var(--simas-primary) !important;
}

.spinner-border,
.loader,
.fa-spinner,
.glyphicon-refresh {
    color: var(--simas-primary) !important;
    border-color: var(--simas-primary-light) !important;
    border-top-color: var(--simas-primary) !important;
}

/* ---------- 21. Icons ---------- */
.glyphicon-hand-down,
.glyphicon-remove,
.glyphicon-trash,
.fa-trash,
.fa-times {
    color: var(--simas-danger) !important;
}

.glyphicon-ok,
.glyphicon-check,
.fa-check,
.fa-check-circle {
    color: var(--simas-success) !important;
}

.glyphicon-warning-sign,
.fa-warning,
.fa-exclamation-triangle {
    color: var(--simas-warning) !important;
}

.panel-heading .glyphicon,
.panel-heading .fa,
.navbar .glyphicon,
.navbar .fa,
.btn .glyphicon,
.btn .fa,
.alert .glyphicon,
.alert .fa {
    color: inherit !important;
}

/* ---------- 22. Semantic utility classes for new pages ---------- */
.simas-bg-primary,
.theme-primary {
    background: var(--simas-primary) !important;
    color: var(--simas-on-primary) !important;
}
.simas-bg-secondary { background: var(--simas-secondary) !important; color: var(--simas-on-secondary) !important; }
.simas-bg-accent { background: var(--simas-accent) !important; color: var(--simas-on-accent) !important; }
.simas-bg-surface,
.theme-surface { background: var(--simas-surface) !important; color: var(--simas-text) !important; }
.simas-bg-soft,
.theme-surface-alt { background: var(--simas-surface-alt) !important; color: var(--simas-text) !important; }
.simas-text-primary { color: var(--simas-primary) !important; }
.simas-text-muted,
.theme-muted { color: var(--simas-muted) !important; }
.simas-border { border: 1px solid var(--simas-border) !important; }
.simas-card {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border: 1px solid var(--simas-border) !important;
    border-radius: var(--simas-radius) !important;
    box-shadow: 0 4px 14px var(--simas-shadow) !important;
    padding: 16px;
}

/* ---------- 23. Legacy hard-coded background compatibility ----------
   These selectors override the most common inline colors found in ROOT_old.
   They let the new theme affect old JSP pages before every inline style is cleaned.
   ---------- */
[style*="background-color:#055fad" i],
[style*="background-color: #055fad" i],
[style*="background:#055fad" i],
[style*="background: #055fad" i],
[style*="background-color:#0361a8" i],
[style*="background-color: #0361a8" i],
[style*="background-color:#1e88e5" i],
[style*="background-color: #1e88e5" i],
[style*="background-color:#1666c5" i],
[style*="background-color: #1666c5" i] {
    background: var(--simas-primary) !important;
    color: var(--simas-on-primary) !important;
}

[style*="background-color:#d6cc9c" i],
[style*="background-color: #d6cc9c" i],
[style*="background:#d6cc9c" i],
[style*="background: #d6cc9c" i] {
    background: var(--simas-secondary) !important;
    color: var(--simas-on-secondary) !important;
}

[style*="background-color:#ffbb02" i],
[style*="background-color: #ffbb02" i],
[style*="background-color:#f6b912" i],
[style*="background-color: #f6b912" i] {
    background: var(--simas-accent) !important;
    color: var(--simas-on-accent) !important;
}

[style*="background-color:#cce4fc" i],
[style*="background-color: #cce4fc" i],
[style*="background-color:#7abaf0" i],
[style*="background-color: #7abaf0" i],
[style*="background-color:#e7f5e7" i],
[style*="background-color: #e7f5e7" i] {
    background: var(--simas-page-bg) !important;
    color: var(--simas-text) !important;
}

[style*="background-color:#fffbe5" i],
[style*="background-color: #fffbe5" i],
[style*="background-color:#faebcc" i],
[style*="background-color: #faebcc" i],
[style*="background-color:#fbf3c9" i],
[style*="background-color: #fbf3c9" i],
[style*="background-color:#fdf5ce" i],
[style*="background-color: #fdf5ce" i],
[style*="background-color:#ffffcc" i],
[style*="background-color: #ffffcc" i] {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
}

[style*="background-color:#a70303" i],
[style*="background-color: #a70303" i],
[style*="background-color:#7f0303" i],
[style*="background-color: #7f0303" i],
[style*="background-color:#b20000" i],
[style*="background-color: #b20000" i] {
    background: var(--simas-danger) !important;
    color: var(--simas-on-danger) !important;
}

[style*="color:#055fad" i],
[style*="color: #055fad" i],
[style*="color:#0361a8" i],
[style*="color: #0361a8" i] {
    color: var(--simas-primary) !important;
}

[style*="color:#a70303" i],
[style*="color: #a70303" i],
[style*="color:#7f0303" i],
[style*="color: #7f0303" i],
font[color="#A70303" i] {
    color: var(--simas-danger) !important;
}

/* ---------- 24. Responsive ---------- */
@media (max-width: 767px) {
    .navbar-collapse {
        background: var(--simas-primary) !important;
        border-color: var(--simas-primary-dark) !important;
    }

    .table-responsive {
        border-radius: var(--simas-radius-sm) !important;
    }

    .dataTables_filter,
    .dataTables_length,
    .dataTables_info,
    .dataTables_paginate {
        float: none !important;
        text-align: left !important;
        width: 100% !important;
    }

    .dataTables_filter input[type="search"] {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* ---------- 25. Print: preserve readability and professional reports ---------- */
@media print {
    :root {
        --simas-page-bg: #FFFFFF;
        --simas-surface: #FFFFFF;
        --simas-surface-alt: #F7F7F7;
        --simas-text: #000000;
        --simas-text-strong: #000000;
        --simas-muted: #444444;
        --simas-border: #B8B8B8;
    }

    html,
    body,
    body.body,
    form,
    .panel,
    .panel-body,
    .card,
    .table-responsive,
    table,
    .table,
    table tbody tr,
    table tbody td {
        background: #FFFFFF !important;
        color: #000000 !important;
        box-shadow: none !important;
    }

    table thead th,
    .table > thead > tr > th {
        background: #E8E8E8 !important;
        color: #000000 !important;
        border-color: #777777 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .navbar,
    .sidebar,
    .side-nav,
    .footer:not(.print-footer),
    .noprint,
    .dataTables_filter,
    .dataTables_length,
    .dataTables_paginate,
    .dt-buttons,
    button,
    .btn {
        display: none !important;
    }

    a,
    a:visited {
        color: #000000 !important;
        text-decoration: none !important;
    }
}

/* ================================================================
   26. SIMAS V2 — LAYOUT PROTECTION, READABILITY AND LEGACY FIXES
   This block must remain LAST in this file.
   It preserves the original NYUMBA SACCOS navbar/sidebar structure
   while keeping the global client colours on forms, tables and widgets.
   ================================================================ */

:root {
    --simas-font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    --simas-font-size: 14px;
    --simas-font-size-sm: 13px;
    --simas-font-size-lg: 16px;
    --simas-line-height: 1.5;
    --simas-control-height: 40px;
    --simas-table-font-size: 13.5px;
}

html,
body,
body.body {
    font-family: var(--simas-font-family) !important;
    font-size: var(--simas-font-size) !important;
    line-height: var(--simas-line-height) !important;
    font-weight: 400 !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
body p,
body span,
body div,
body label,
body a,
body input,
body select,
body textarea,
body button,
body table,
body th,
body td {
    text-shadow: none !important;
    filter: none !important;
}

/* Do not allow inherited transparency or old white body text to blur content. */
body .panel-body,
body .modal-body,
body .modal-footer,
body .card-body,
body .well,
body .table-responsive,
body .dataTables_wrapper,
body .dropdown-menu,
body .select2-dropdown {
    opacity: 1 !important;
}

body h1 { font-size: 28px !important; line-height: 1.25 !important; }
body h2 { font-size: 24px !important; line-height: 1.30 !important; }
body h3 { font-size: 20px !important; line-height: 1.35 !important; }
body h4 { font-size: 17px !important; line-height: 1.40 !important; }
body h5 { font-size: 15px !important; line-height: 1.45 !important; }
body h6 { font-size: 14px !important; line-height: 1.45 !important; }

body p,
body .panel-body,
body .modal-body,
body .card-body,
body .well,
body .alert,
body .breadcrumb {
    font-size: var(--simas-font-size) !important;
    line-height: var(--simas-line-height) !important;
}

/* ----------------------------------------------------------------
   Navbar protection
   The legacy navbar uses a table inside .navbar-brand. Generic table
   styling must never stretch or recolour that layout table.
   ---------------------------------------------------------------- */
.navbar,
.navbar-default,
.navbar-inverse,
.navbar-simas,
.custom-navbar {
    font-size: 14px !important;
    line-height: 1.35 !important;
}

.navbar ul,
.navbar ol,
.navbar li,
.top-nav,
.top-nav > li {
    list-style: none !important;
}

.navbar .nav > li,
.navbar-nav > li,
.top-nav > li {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.navbar .nav > li > a,
.navbar-nav > li > a,
.top-nav > li > a {
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-shadow: none !important;
}

.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--simas-on-primary) !important;
    text-shadow: none !important;
}

.navbar table,
.navbar-brand table,
.top-nav table,
.navbar table.table,
.navbar table.dataTable {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.navbar table tr,
.navbar table tr:nth-child(odd),
.navbar table tr:nth-child(even),
.navbar table tr:hover,
.navbar table td,
.navbar table th,
.navbar table tr:hover td,
.navbar table tr:hover th {
    width: auto !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    padding: 0 5px 0 0 !important;
    box-shadow: none !important;
    vertical-align: middle !important;
}

.navbar table img,
.navbar-brand img {
    max-width: none !important;
}

.navbar .dropdown-menu,
.navbar .dropdown-menu > li > a {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.navbar .dropdown-menu > li {
    padding: 0 !important;
}

/* ----------------------------------------------------------------
   Sidebar protection
   Preserve the existing Bootstrap 3 accordion markup, icons, widths,
   collapse behaviour and original link flow. Only colours are themed.
   ---------------------------------------------------------------- */
.panel-group#accordion,
.panel-group[id^="accordion"] {
    width: 100% !important;
    margin-bottom: 18px !important;
    background: transparent !important;
}

.panel-group#accordion > .panel,
.panel-group[id^="accordion"] > .panel,
.sidebar .panel,
.side-nav .panel {
    width: 100% !important;
    margin: 0 0 10px !important;
    border: 1px solid var(--simas-border) !important;
    border-radius: var(--simas-radius) !important;
    background: var(--simas-surface) !important;
    box-shadow: 0 3px 12px var(--simas-shadow) !important;
    overflow: hidden !important;
}

.panel-group#accordion .panel-heading,
.panel-group[id^="accordion"] .panel-heading,
.sidebar .panel-heading,
.side-nav .panel-heading {
    min-height: 48px !important;
    padding: 13px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--simas-primary-dark) !important;
    background: var(--simas-primary) !important;
    color: var(--simas-on-primary) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.panel-group#accordion .panel-heading > a,
.panel-group[id^="accordion"] .panel-heading > a,
.sidebar .panel-heading > a,
.side-nav .panel-heading > a {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: var(--simas-on-primary) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    text-decoration: none !important;
    border-radius: 0 !important;
}

.panel-group#accordion .panel-heading > a:hover,
.panel-group#accordion .panel-heading > a:focus,
.panel-group[id^="accordion"] .panel-heading > a:hover,
.panel-group[id^="accordion"] .panel-heading > a:focus {
    background: transparent !important;
    color: var(--simas-on-primary) !important;
    text-decoration: none !important;
}

.panel-group#accordion .panel-heading .glyphicon,
.panel-group#accordion .panel-heading .fa,
.panel-group[id^="accordion"] .panel-heading .glyphicon,
.panel-group[id^="accordion"] .panel-heading .fa {
    color: inherit !important;
    font-size: 14px !important;
}

.panel-group#accordion .panel-collapse,
.panel-group[id^="accordion"] .panel-collapse {
    background: var(--simas-surface) !important;
}

.panel-group#accordion .panel-body,
.panel-group[id^="accordion"] .panel-body,
.sidebar .panel-body,
.side-nav .panel-body {
    padding: 16px 20px !important;
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    border: 0 !important;
}

/* The old sidebar has: icon + inline anchor + <br><br>. Keep that layout. */
.panel-group#accordion .panel-body > a,
.panel-group#accordion .panel-body a,
.panel-group[id^="accordion"] .panel-body > a,
.panel-group[id^="accordion"] .panel-body a,
.sidebar .panel-body a,
.side-nav .panel-body a {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--simas-primary-dark) !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.panel-group#accordion .panel-body a span,
.panel-group[id^="accordion"] .panel-body a span,
.sidebar .panel-body a span,
.side-nav .panel-body a span {
    color: inherit !important;
    font-size: inherit !important;
}

.panel-group#accordion .panel-body a:hover,
.panel-group#accordion .panel-body a:focus,
.panel-group[id^="accordion"] .panel-body a:hover,
.panel-group[id^="accordion"] .panel-body a:focus,
.sidebar .panel-body a:hover,
.side-nav .panel-body a:hover {
    background: transparent !important;
    color: var(--simas-primary) !important;
    text-decoration: underline !important;
}

.panel-group#accordion .panel-body > .glyphicon,
.panel-group#accordion .panel-body > .fa,
.panel-group[id^="accordion"] .panel-body > .glyphicon,
.panel-group[id^="accordion"] .panel-body > .fa,
.sidebar .panel-body > .glyphicon,
.side-nav .panel-body > .glyphicon {
    display: inline-block !important;
    width: 28px !important;
    margin-right: 4px !important;
    color: var(--simas-text-strong) !important;
    font-size: 17px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.panel-group#accordion .panel-body br,
.panel-group[id^="accordion"] .panel-body br {
    line-height: 1.15 !important;
}

/* Do not turn nested modal/forms inside the sidebar into sidebar links. */
.panel-group#accordion .modal a,
.panel-group[id^="accordion"] .modal a {
    display: initial !important;
}

/* ----------------------------------------------------------------
   Cards, panels and standalone content
   ---------------------------------------------------------------- */
.card,
.box,
.widget,
.info-box,
.small-box,
.thumbnail,
.well,
.jumbotron,
.content-box,
.dashboard-card,
.simas-card {
    color: var(--simas-text) !important;
    font-size: var(--simas-font-size) !important;
    line-height: var(--simas-line-height) !important;
}

.panel-title,
.card-title,
.modal-title,
.widget-title {
    font-size: var(--simas-font-size-lg) !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
}

/* ----------------------------------------------------------------
   Forms
   Avoid styling navbar/search/inline forms as giant cards. A panel is
   already the card; standalone forms use .form-container/.app_form.
   ---------------------------------------------------------------- */
body form {
    color: var(--simas-text) !important;
    font-family: var(--simas-font-family) !important;
    font-size: var(--simas-font-size) !important;
}

body form:not(.form-container):not(.app_form):not(.registration-form):not(.simas-form) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body .form-container,
body .app_form,
body .registration-form,
body .simas-form {
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border: 1px solid var(--simas-border) !important;
    border-radius: var(--simas-radius) !important;
    box-shadow: 0 4px 14px var(--simas-shadow) !important;
    padding: 22px !important;
}

body .form-group {
    margin-bottom: 16px !important;
}

body label,
body .control-label,
body .form-label,
body form label,
body .panel-body label {
    color: var(--simas-text-strong) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: currentColor !important;
}

body .form-control,
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="number"],
body input[type="date"],
body input[type="datetime-local"],
body input[type="time"],
body input[type="month"],
body input[type="week"],
body input[type="tel"],
body input[type="url"],
body input[type="search"],
body textarea,
body select {
    min-height: var(--simas-control-height) !important;
    height: auto;
    background: var(--simas-surface) !important;
    color: var(--simas-text-strong) !important;
    caret-color: var(--simas-text-strong) !important;
    border: 1px solid var(--simas-border-strong) !important;
    border-radius: var(--simas-radius-sm) !important;
    padding: 8px 11px !important;
    font-family: var(--simas-font-family) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    -webkit-text-fill-color: currentColor !important;
}

body textarea,
body textarea.form-control {
    min-height: 96px !important;
    resize: vertical;
}

body select,
body select.form-control {
    height: var(--simas-control-height) !important;
    cursor: pointer !important;
}

body select option,
body select optgroup {
    background: var(--simas-surface) !important;
    color: var(--simas-text-strong) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

body .form-control::placeholder,
body input::placeholder,
body textarea::placeholder {
    color: var(--simas-muted) !important;
    font-style: normal !important;
    opacity: 1 !important;
    -webkit-text-fill-color: var(--simas-muted) !important;
}

body .form-control:hover,
body input[type="text"]:hover,
body input[type="email"]:hover,
body input[type="password"]:hover,
body input[type="number"]:hover,
body input[type="date"]:hover,
body input[type="tel"]:hover,
body input[type="search"]:hover,
body textarea:hover,
body select:hover {
    border-color: var(--simas-primary-light) !important;
}

body .form-control:focus,
body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="password"]:focus,
body input[type="number"]:focus,
body input[type="date"]:focus,
body input[type="datetime-local"]:focus,
body input[type="time"]:focus,
body input[type="tel"]:focus,
body input[type="search"]:focus,
body textarea:focus,
body select:focus {
    background: var(--simas-surface) !important;
    color: var(--simas-text-strong) !important;
    border-color: var(--simas-primary) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px var(--simas-focus-ring) !important;
    opacity: 1 !important;
}

body .form-control[disabled],
body .form-control[readonly],
body fieldset[disabled] .form-control,
body input[disabled],
body input[readonly],
body select[disabled],
body textarea[disabled],
body textarea[readonly] {
    background: var(--simas-surface-alt) !important;
    color: var(--simas-disabled-text) !important;
    -webkit-text-fill-color: var(--simas-disabled-text) !important;
    opacity: 1 !important;
}

/* Controls which must never receive full-width text-field dimensions. */
body input[type="checkbox"],
body input[type="radio"] {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 3px 5px 3px 0 !important;
    border: initial !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    vertical-align: middle !important;
    accent-color: var(--simas-primary) !important;
}

body input[type="file"] {
    min-height: 38px !important;
    width: 100% !important;
    padding: 6px 8px !important;
    background: var(--simas-surface) !important;
    color: var(--simas-text-strong) !important;
    border: 1px solid var(--simas-border-strong) !important;
    border-radius: var(--simas-radius-sm) !important;
    font-size: 14px !important;
}

body input[type="range"],
body input[type="color"] {
    width: auto !important;
    min-height: 34px !important;
    padding: 2px !important;
}

body .help-block,
body .form-text,
body small,
body .small {
    font-size: var(--simas-font-size-sm) !important;
    line-height: 1.4 !important;
}

/* Buttons remain readable and do not inherit input width/height. */
body .btn,
body button,
body input[type="button"],
body input[type="submit"],
body input[type="reset"] {
    width: auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 8px 14px !important;
    font-family: var(--simas-font-family) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    white-space: normal !important;
    text-shadow: none !important;
    opacity: 1 !important;
    -webkit-text-fill-color: currentColor !important;
}

body .btn-xs {
    min-height: 28px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
}

body .btn-sm {
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
}

body .btn-lg {
    min-height: 44px !important;
    padding: 10px 18px !important;
    font-size: 16px !important;
}

/* ----------------------------------------------------------------
   Native dropdowns, Bootstrap dropdowns, Select2 and Bootstrap Select
   ---------------------------------------------------------------- */
body .dropdown-menu {
    min-width: 180px !important;
    padding: 6px 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

body .dropdown-menu > li {
    padding: 0 !important;
    list-style: none !important;
}

body .dropdown-menu > li > a {
    display: block !important;
    padding: 8px 14px !important;
    color: var(--simas-text-strong) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    white-space: normal !important;
}

body .dropdown-menu > li > a:hover,
body .dropdown-menu > li > a:focus,
body .dropdown-menu > .active > a,
body .dropdown-menu > .active > a:hover,
body .dropdown-menu > .active > a:focus {
    background: var(--simas-primary-soft) !important;
    color: var(--simas-primary-dark) !important;
}

body .select2-container {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

body .select2-container .select2-choice,
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple,
body .bootstrap-select > .dropdown-toggle {
    min-height: var(--simas-control-height) !important;
    background: var(--simas-surface) !important;
    color: var(--simas-text-strong) !important;
    border: 1px solid var(--simas-border-strong) !important;
    border-radius: var(--simas-radius-sm) !important;
    font-size: 14px !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

body .select2-container--default .select2-selection--single .select2-selection__rendered {
    min-height: calc(var(--simas-control-height) - 2px) !important;
    padding-left: 11px !important;
    padding-right: 30px !important;
    color: var(--simas-text-strong) !important;
    line-height: calc(var(--simas-control-height) - 2px) !important;
    -webkit-text-fill-color: currentColor !important;
}

body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--simas-control-height) - 2px) !important;
}

body .select2-container--default .select2-selection__placeholder {
    color: var(--simas-muted) !important;
    -webkit-text-fill-color: var(--simas-muted) !important;
}

body .select2-dropdown,
body .select2-drop,
body .select2-results,
body .select2-results__options {
    background: var(--simas-surface) !important;
    color: var(--simas-text-strong) !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

body .select2-results__option,
body .select2-results .select2-result-label {
    padding: 8px 10px !important;
    color: var(--simas-text-strong) !important;
    background: var(--simas-surface) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

body .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--simas-primary) !important;
    color: var(--simas-on-primary) !important;
}

body .select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--simas-primary-soft) !important;
    color: var(--simas-primary-dark) !important;
}

body .select2-search input,
body .select2-search__field {
    min-height: 36px !important;
    background: var(--simas-surface) !important;
    color: var(--simas-text-strong) !important;
    caret-color: var(--simas-text-strong) !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

/* ----------------------------------------------------------------
   Tables and DataTables
   Keep all data tables themed, but reset layout tables in navbar/sidebar.
   ---------------------------------------------------------------- */
body .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border: 1px solid var(--simas-border) !important;
    border-radius: var(--simas-radius) !important;
    padding: 7px !important;
    box-shadow: 0 3px 12px var(--simas-shadow) !important;
}

body table.table,
body table.dataTable,
body table.hover_me,
body table#example,
body .table-responsive > table,
body table.simas-table {
    width: 100% !important;
    background: var(--simas-surface) !important;
    color: var(--simas-text) !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
    font-family: var(--simas-font-family) !important;
    font-size: var(--simas-table-font-size) !important;
    line-height: 1.45 !important;
    text-shadow: none !important;
}

body table.table th,
body table.table td,
body table.dataTable th,
body table.dataTable td,
body table.hover_me th,
body table.hover_me td,
body table#example th,
body table#example td,
body .table-responsive > table th,
body .table-responsive > table td,
body table.simas-table th,
body table.simas-table td {
    padding: 9px 10px !important;
    border: 1px solid var(--simas-border) !important;
    color: var(--simas-text-strong) !important;
    background-clip: padding-box !important;
    vertical-align: middle !important;
    font-size: var(--simas-table-font-size) !important;
    line-height: 1.4 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: currentColor !important;
}

body table.table thead th,
body table.dataTable thead th,
body table.hover_me thead th,
body table#example thead th,
body .table-responsive > table thead th,
body table.simas-table thead th {
    background: var(--simas-primary) !important;
    color: var(--simas-on-primary) !important;
    border-color: var(--simas-primary-dark) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    text-align: left;
    white-space: nowrap;
}

body table.table thead th *,
body table.dataTable thead th *,
body table.hover_me thead th *,
body table#example thead th *,
body .table-responsive > table thead th * {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

body table.table tbody tr:nth-child(even) > td,
body table.dataTable tbody tr:nth-child(even) > td,
body table.hover_me tbody tr:nth-child(even) > td,
body table#example tbody tr:nth-child(even) > td,
body .table-responsive > table tbody tr:nth-child(even) > td {
    background: var(--simas-surface-alt) !important;
}

body table.table tbody tr:nth-child(odd) > td,
body table.dataTable tbody tr:nth-child(odd) > td,
body table.hover_me tbody tr:nth-child(odd) > td,
body table#example tbody tr:nth-child(odd) > td,
body .table-responsive > table tbody tr:nth-child(odd) > td {
    background: var(--simas-surface) !important;
}

body table.table tbody tr:hover > td,
body table.dataTable tbody tr:hover > td,
body table.hover_me tbody tr:hover > td,
body table#example tbody tr:hover > td,
body .table-responsive > table tbody tr:hover > td {
    background: var(--simas-surface-hover) !important;
    color: var(--simas-text-strong) !important;
}

body table.table a,
body table.dataTable a,
body table.hover_me a,
body table#example a,
body .table-responsive > table a {
    color: var(--simas-primary-dark) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

body table.table a:hover,
body table.dataTable a:hover,
body table.hover_me a:hover,
body table#example a:hover,
body .table-responsive > table a:hover {
    color: var(--simas-primary) !important;
    text-decoration: underline !important;
}

body .dataTables_wrapper,
body .dataTables_wrapper label,
body .dataTables_wrapper .dataTables_info,
body .dataTables_wrapper .dataTables_length,
body .dataTables_wrapper .dataTables_filter {
    color: var(--simas-text-strong) !important;
    font-family: var(--simas-font-family) !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    opacity: 1 !important;
}

body .dataTables_length select,
body .dataTables_filter input,
body .dataTables_filter input[type="search"] {
    min-height: 36px !important;
    background: var(--simas-surface) !important;
    color: var(--simas-text-strong) !important;
    border: 1px solid var(--simas-border-strong) !important;
    border-radius: var(--simas-radius-sm) !important;
    padding: 6px 9px !important;
    font-size: 13.5px !important;
    opacity: 1 !important;
    -webkit-text-fill-color: currentColor !important;
}

body .dataTables_filter input[type="search"] {
    width: min(240px, 100%) !important;
}

body .dataTables_paginate .paginate_button,
body .dataTables_wrapper .dataTables_paginate .paginate_button,
body .pagination > li > a,
body .pagination > li > span {
    min-width: 34px !important;
    padding: 6px 10px !important;
    margin: 2px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

/* Generic table reset inside layout/navigation areas. */
.sidebar table,
.side-nav table,
.panel-heading table,
.dropdown-menu table,
.input-group table,
.form-inline table,
table.simas-layout-table {
    width: auto !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.sidebar table tr,
.sidebar table th,
.sidebar table td,
.side-nav table tr,
.side-nav table th,
.side-nav table td,
.panel-heading table tr,
.panel-heading table th,
.panel-heading table td,
table.simas-layout-table tr,
table.simas-layout-table th,
table.simas-layout-table td {
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* ----------------------------------------------------------------
   Modals, tabs and alerts
   ---------------------------------------------------------------- */
body .modal-content,
body .modal-body,
body .modal-footer {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body .modal-header {
    padding: 14px 16px !important;
}

body .modal-body {
    padding: 18px !important;
}

body .modal-footer {
    padding: 12px 16px !important;
}

body .nav-tabs > li,
body .nav-pills > li {
    padding: 0 !important;
    list-style: none !important;
}

body .nav-tabs > li > a,
body .nav-pills > li > a {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

body .alert {
    padding: 12px 14px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

/* ----------------------------------------------------------------
   Responsive refinements
   ---------------------------------------------------------------- */
@media (max-width: 991px) {
    :root {
        --simas-font-size: 14px;
        --simas-control-height: 40px;
    }

    .panel-group#accordion .panel-heading > a,
    .panel-group[id^="accordion"] .panel-heading > a {
        font-size: 13px !important;
    }
}

@media (max-width: 767px) {
    body h1 { font-size: 24px !important; }
    body h2 { font-size: 21px !important; }
    body h3 { font-size: 18px !important; }

    .navbar table,
    .navbar-brand table {
        max-width: 100% !important;
    }

    .navbar-brand img {
        max-width: 64px !important;
        height: auto !important;
    }

    .panel-group#accordion .panel-body,
    .panel-group[id^="accordion"] .panel-body {
        padding: 14px 16px !important;
    }

    body .form-container,
    body .app_form,
    body .registration-form,
    body .simas-form {
        padding: 16px !important;
    }

    body .table-responsive {
        padding: 4px !important;
    }

    body table.table th,
    body table.table td,
    body table.dataTable th,
    body table.dataTable td,
    body table.hover_me th,
    body table.hover_me td,
    body table#example th,
    body table#example td,
    body .table-responsive > table th,
    body .table-responsive > table td {
        padding: 8px !important;
        white-space: nowrap;
    }

    body .dataTables_filter input[type="search"] {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* Print stays clean; do not print interactive shadows or oversized controls. */
@media print {
    html,
    body,
    body.body {
        font-family: "Times New Roman", serif !important;
        font-size: 11pt !important;
        line-height: 1.25 !important;
    }

    body table.table,
    body table.dataTable,
    body table.hover_me,
    body table#example,
    body .table-responsive > table {
        font-size: 10pt !important;
    }

    body table.table th,
    body table.table td,
    body table.dataTable th,
    body table.dataTable td,
    body table.hover_me th,
    body table.hover_me td,
    body table#example th,
    body table#example td,
    body .table-responsive > table th,
    body .table-responsive > table td {
        padding: 5px 6px !important;
    }
}

/* ======================================================================
   SIMAS V3 FINAL READABILITY LAYER
   Keep this section LAST. It prevents old inline colours and legacy global
   selectors from making text faint, blurred, oversized or unreadable.
   ====================================================================== */

:root {
    --simas-font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    --simas-base-font-size: 15px;
    --simas-small-font-size: 13.5px;
    --simas-control-font-size: 15px;
    --simas-control-height: 42px;
    --simas-table-font-size: 14px;
}

html,
body,
body.body {
    background: var(--simas-page-bg, #F4F8FC) !important;
    color: var(--simas-page-text, #0F172A) !important;
    font-family: var(--simas-font-family) !important;
    font-size: var(--simas-base-font-size) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
}

body p,
body li,
body label,
body input,
body select,
body textarea,
body button,
body th,
body td,
body a,
body span,
body small,
body strong,
body b {
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}

body p,
body li,
body label,
body input,
body select,
body textarea,
body th,
body td,
body .panel-body,
body .card-body,
body .modal-body,
body .dropdown-menu {
    opacity: 1 !important;
}

/* --------------------------- Typography --------------------------- */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .page-header {
    color: var(--simas-page-text-strong, #0F172A) !important;
    font-family: var(--simas-font-family) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

body h1 { font-size: 28px !important; line-height: 1.25 !important; }
body h2 { font-size: 24px !important; line-height: 1.30 !important; }
body h3 { font-size: 21px !important; line-height: 1.35 !important; }
body h4 { font-size: 18px !important; line-height: 1.40 !important; }
body h5 { font-size: 16px !important; line-height: 1.45 !important; }
body h6 { font-size: 15px !important; line-height: 1.45 !important; }

body p,
body dd,
body dt,
body .help-block,
body .panel-body,
body .card-body,
body .modal-body,
body .well,
body blockquote {
    font-size: 15px !important;
    line-height: 1.55 !important;
}

body .text-muted,
body .help-block,
body small,
body .small {
    color: var(--simas-surface-muted, #526071) !important;
    opacity: 1 !important;
}

/* Generic links on page background. Surface links are overridden below. */
body a:not(.btn):not(.navbar-brand):not(.dropdown-toggle) {
    color: var(--simas-link-page, #064E8A) !important;
    font-weight: 500 !important;
}

body a:not(.btn):not(.navbar-brand):not(.dropdown-toggle):hover,
body a:not(.btn):not(.navbar-brand):not(.dropdown-toggle):focus {
    color: var(--simas-link-page-hover, #033B69) !important;
    text-decoration: underline !important;
}

/* --------------------------- Navbar --------------------------- */
body .navbar,
body .navbar-default,
body .navbar-inverse,
body .navbar-simas,
body .custom-navbar,
html body nav.navbar.navbar-inverse.navbar-simas {
    background: var(--simas-primary, #055FAD) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--simas-primary-dark, #034A87) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
    font-family: var(--simas-font-family) !important;
    box-shadow: 0 2px 8px var(--simas-shadow, rgba(15,23,42,.12)) !important;
}

body .navbar ul,
body .navbar ol,
body .navbar li,
body .top-nav,
body .top-nav > li {
    list-style: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body .navbar a,
body .navbar .navbar-text,
body .navbar .glyphicon,
body .navbar .fa,
body .navbar .caret {
    color: var(--simas-on-primary, #FFFFFF) !important;
    text-shadow: none !important;
}

body .navbar .nav > li > a,
body .navbar-nav > li > a,
body .top-nav > li > a {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}

body .navbar .nav > li > a:hover,
body .navbar .nav > li > a:focus,
body .navbar .nav > .open > a,
body .navbar .nav > .open > a:hover,
body .navbar .nav > .open > a:focus {
    background: var(--simas-primary-dark, #034A87) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
    text-decoration: none !important;
}

/* Public header currently contains hard-coded black/red text on blue. */
body .navbar-brand > div[style*="color: black" i],
body .navbar-brand > div[style*="color:black" i],
body .navbar-brand > div[style*="#a70303" i],
body .navbar-brand > div[style*="#A70303" i] {
    color: var(--simas-on-primary, #FFFFFF) !important;
}

/* Keep semantic status text visible on the primary navbar. */
body .navbar [style*="color:red" i],
body .navbar [style*="color: red" i],
body .navbar [style*="#a70303" i],
body .navbar .text-danger {
    color: var(--simas-danger-on-primary, #FFD7D7) !important;
}
body .navbar [style*="color:green" i],
body .navbar [style*="color: green" i],
body .navbar .text-success {
    color: var(--simas-success-on-primary, #D8FFE9) !important;
}
body .navbar [style*="color:chocolate" i],
body .navbar [style*="color: chocolate" i],
body .navbar .text-warning {
    color: var(--simas-warning-on-primary, #FFE6B3) !important;
}
body .navbar [style*="color:blue" i],
body .navbar [style*="color: blue" i],
body .navbar .text-info {
    color: var(--simas-info-on-primary, #D7F2FF) !important;
}

/* Protect the old logo/name layout table. */
body .navbar table,
body .navbar-brand table,
body .top-nav table {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
}

body .navbar table tr,
body .navbar table th,
body .navbar table td,
body .navbar table tr:nth-child(odd),
body .navbar table tr:nth-child(even),
body .navbar table tr:hover,
body .navbar table tr:hover td {
    width: auto !important;
    margin: 0 !important;
    padding: 0 5px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    vertical-align: middle !important;
}

body .navbar .dropdown-menu {
    background: var(--simas-surface, #FFFFFF) !important;
    color: var(--simas-surface-text, #0F172A) !important;
    border: 1px solid var(--simas-border, #C7D5E5) !important;
}

body .navbar .dropdown-menu > li > a,
body .navbar .dropdown-menu > li > a * {
    background: transparent !important;
    color: var(--simas-link-surface, #064E8A) !important;
    font-size: 14px !important;
}

body .navbar .dropdown-menu > li > a:hover,
body .navbar .dropdown-menu > li > a:focus {
    background: var(--simas-primary-soft, #EAF3FC) !important;
    color: var(--simas-link-surface-hover, #033B69) !important;
    text-decoration: none !important;
}

/* --------------------------- Sidebar --------------------------- */
body .panel-group#accordion,
body .panel-group[id^="accordion"],
body .sidebar,
body .side-nav,
body #sidebar {
    color: var(--simas-surface-text, #0F172A) !important;
    background: transparent !important;
}

body .panel-group#accordion > .panel,
body .panel-group[id^="accordion"] > .panel,
body .sidebar .panel,
body .side-nav .panel {
    width: 100% !important;
    margin: 0 0 10px !important;
    background: var(--simas-surface, #FFFFFF) !important;
    color: var(--simas-surface-text, #0F172A) !important;
    border: 1px solid var(--simas-border, #C7D5E5) !important;
    border-radius: var(--simas-radius, 8px) !important;
    box-shadow: 0 3px 12px var(--simas-shadow, rgba(15,23,42,.12)) !important;
    overflow: hidden !important;
}

body .panel-group#accordion .panel-heading,
body .panel-group[id^="accordion"] .panel-heading,
body .sidebar .panel-heading,
body .side-nav .panel-heading {
    min-height: 48px !important;
    padding: 13px 14px !important;
    background: var(--simas-primary, #055FAD) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--simas-primary-dark, #034A87) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

body .panel-group#accordion .panel-heading > a,
body .panel-group[id^="accordion"] .panel-heading > a,
body .sidebar .panel-heading > a,
body .side-nav .panel-heading > a {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
}

body .panel-group#accordion .panel-body,
body .panel-group[id^="accordion"] .panel-body,
body .sidebar .panel-body,
body .side-nav .panel-body {
    padding: 15px 18px !important;
    background: var(--simas-surface, #FFFFFF) !important;
    color: var(--simas-surface-text, #0F172A) !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    border: 0 !important;
}

/* Old sidebar markup is icon + inline link + BR. Do not convert links to blocks. */
body .panel-group#accordion .panel-body a,
body .panel-group[id^="accordion"] .panel-body a,
body .sidebar .panel-body a,
body .side-nav .panel-body a {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--simas-link-surface, #064E8A) !important;
    border-radius: 0 !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    text-decoration: none !important;
}

body .panel-group#accordion .panel-body a:hover,
body .panel-group[id^="accordion"] .panel-body a:hover,
body .sidebar .panel-body a:hover,
body .side-nav .panel-body a:hover {
    color: var(--simas-link-surface-hover, #033B69) !important;
    background: transparent !important;
    text-decoration: underline !important;
}

body .panel-group#accordion .panel-body > .glyphicon,
body .panel-group#accordion .panel-body > .fa,
body .panel-group[id^="accordion"] .panel-body > .glyphicon,
body .panel-group[id^="accordion"] .panel-body > .fa,
body .sidebar .panel-body > .glyphicon,
body .sidebar .panel-body > .fa {
    display: inline-block !important;
    width: 28px !important;
    margin-right: 4px !important;
    color: var(--simas-surface-text-strong, #0F172A) !important;
    font-size: 17px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* --------------------------- Panels and cards --------------------------- */
body .panel,
body .card,
body .box,
body .widget,
body .well,
body .thumbnail,
body .jumbotron,
body .content-box,
body .dashboard-card,
body .simas-card {
    background: var(--simas-surface, #FFFFFF) !important;
    color: var(--simas-surface-text, #0F172A) !important;
    border-color: var(--simas-border, #C7D5E5) !important;
}

body .panel-heading,
body .panel-default > .panel-heading,
body .panel-primary > .panel-heading,
body .panel-info > .panel-heading,
body .card-header,
body .box-header,
body .widget-header,
body .dashboard-card-header {
    background: var(--simas-primary, #055FAD) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
    border-color: var(--simas-primary-dark, #034A87) !important;
    font-family: var(--simas-font-family) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-shadow: none !important;
}

body .panel-heading *,
body .card-header *,
body .box-header *,
body .widget-header *,
body .dashboard-card-header * {
    color: inherit !important;
    text-shadow: none !important;
}

body .panel-body,
body .panel-footer,
body .card-body,
body .box-body,
body .widget-body,
body .modal-body,
body .modal-footer,
body .popover-content,
body .tab-content {
    background: var(--simas-surface, #FFFFFF) !important;
    color: var(--simas-surface-text, #0F172A) !important;
}

body .panel-body h1,
body .panel-body h2,
body .panel-body h3,
body .panel-body h4,
body .panel-body h5,
body .panel-body h6,
body .card-body h1,
body .card-body h2,
body .card-body h3,
body .card-body h4,
body .modal-body h1,
body .modal-body h2,
body .modal-body h3,
body .tab-content h1,
body .tab-content h2,
body .tab-content h3,
body .tab-content h4 {
    color: var(--simas-surface-text-strong, #0F172A) !important;
}

body .panel-body a:not(.btn),
body .panel-footer a:not(.btn),
body .card-body a:not(.btn),
body .box-body a:not(.btn),
body .modal-body a:not(.btn),
body .tab-content a:not(.btn),
body blockquote a:not(.btn) {
    color: var(--simas-link-surface, #064E8A) !important;
}

body .panel-body a:not(.btn):hover,
body .card-body a:not(.btn):hover,
body .modal-body a:not(.btn):hover,
body .tab-content a:not(.btn):hover {
    color: var(--simas-link-surface-hover, #033B69) !important;
}

/* Lists: remove the old global ul li spacing, then style content lists only. */
body ul,
body ol,
body li {
    color: inherit;
}

body .navbar li,
body .dropdown-menu li,
body .nav li,
body .pagination li,
body .panel-heading li {
    padding: 0 !important;
    list-style: none !important;
}

body .panel-body ul:not(.nav):not(.dropdown-menu),
body .card-body ul:not(.nav):not(.dropdown-menu),
body .modal-body ul:not(.nav):not(.dropdown-menu),
body .tab-pane ul:not(.nav):not(.dropdown-menu),
body blockquote ul {
    margin: 8px 0 12px !important;
    padding-left: 25px !important;
    color: var(--simas-surface-text, #0F172A) !important;
}

body .panel-body ul:not(.nav) > li,
body .card-body ul:not(.nav) > li,
body .modal-body ul:not(.nav) > li,
body .tab-pane ul:not(.nav) > li,
body blockquote ul > li {
    padding: 3px 0 !important;
    color: var(--simas-surface-text, #0F172A) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

body blockquote {
    margin: 18px 0 !important;
    padding: 18px 20px !important;
    background: var(--simas-surface-alt, #F7FAFD) !important;
    color: var(--simas-surface-text, #0F172A) !important;
    border-left: 6px solid var(--simas-accent, #FFBB02) !important;
    border-radius: var(--simas-radius, 8px) !important;
    box-shadow: 0 2px 8px var(--simas-shadow, rgba(15,23,42,.12)) !important;
}

/* --------------------------- Forms --------------------------- */
/* Neutralise the old global form background/padding before styling actual content forms. */
body form {
    color: inherit !important;
}

body .navbar form,
body form.navbar-form,
body form.form-inline,
body .dataTables_wrapper form,
body .panel-heading form,
body .dropdown-menu form {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body .form-container,
body .app_form,
body .registration-form,
body .simas-form,
body .panel-body > form:not(.form-inline),
body .modal-body > form:not(.form-inline),
body .tab-pane > form:not(.form-inline) {
    background: var(--simas-surface, #FFFFFF) !important;
    color: var(--simas-surface-text, #0F172A) !important;
    border: 1px solid var(--simas-border, #C7D5E5) !important;
    border-radius: var(--simas-radius, 8px) !important;
    box-shadow: 0 3px 12px var(--simas-shadow, rgba(15,23,42,.12)) !important;
    padding: 20px !important;
}

body .form-group {
    margin-bottom: 17px !important;
}

body label,
body .control-label,
body .form-label,
body form label,
body .panel-body label,
body .modal-body label {
    display: inline-block;
    margin-bottom: 6px !important;
    color: var(--simas-surface-text-strong, #0F172A) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    opacity: 1 !important;
}

body .form-control,
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="number"],
body input[type="date"],
body input[type="datetime-local"],
body input[type="time"],
body input[type="month"],
body input[type="week"],
body input[type="tel"],
body input[type="url"],
body input[type="search"],
body textarea,
body select {
    min-height: var(--simas-control-height) !important;
    background: var(--simas-surface, #FFFFFF) !important;
    color: var(--simas-surface-text-strong, #0F172A) !important;
    border: 1px solid var(--simas-border-strong, #9FB6CE) !important;
    border-radius: var(--simas-radius-sm, 5px) !important;
    padding: var(--simas-control-padding-y, 10px) var(--simas-control-padding-x, 13px) !important;
    font-family: var(--simas-font-family) !important;
    font-size: var(--simas-control-font-size) !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    -webkit-text-fill-color: currentColor !important;
}

body textarea,
body textarea.form-control {
    min-height: 105px !important;
    resize: vertical !important;
}

body select,
body select.form-control {
    cursor: pointer !important;
}

body select option,
body select optgroup {
    background: var(--simas-surface, #FFFFFF) !important;
    color: var(--simas-surface-text-strong, #0F172A) !important;
    font-size: 15px !important;
}

body .form-control:hover,
body input[type="text"]:hover,
body input[type="email"]:hover,
body input[type="password"]:hover,
body input[type="number"]:hover,
body input[type="date"]:hover,
body textarea:hover,
body select:hover {
    border-color: var(--simas-primary, #055FAD) !important;
}

body .form-control:focus,
body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="password"]:focus,
body input[type="number"]:focus,
body input[type="date"]:focus,
body input[type="datetime-local"]:focus,
body input[type="time"]:focus,
body input[type="tel"]:focus,
body input[type="search"]:focus,
body textarea:focus,
body select:focus {
    background: var(--simas-surface, #FFFFFF) !important;
    color: var(--simas-surface-text-strong, #0F172A) !important;
    border-color: var(--simas-primary, #055FAD) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--simas-focus-ring, rgba(5,95,173,.26)) !important;
}

body input::placeholder,
body textarea::placeholder,
body .form-control::placeholder {
    color: var(--simas-surface-muted, #526071) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: currentColor !important;
}

body .form-control[disabled],
body .form-control[readonly],
body fieldset[disabled] .form-control,
body input[disabled],
body input[readonly],
body select[disabled],
body textarea[disabled],
body textarea[readonly] {
    background: var(--simas-surface-alt, #F7FAFD) !important;
    color: var(--simas-disabled-text, #667085) !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

body input[type="checkbox"],
body input[type="radio"] {
    width: 17px !important;
    height: 17px !important;
    min-height: 0 !important;
    padding: 0 !important;
    accent-color: var(--simas-primary, #055FAD) !important;
    vertical-align: middle !important;
}

body input[type="file"],
body input[type="color"],
body input[type="range"],
body input[type="hidden"] {
    min-height: 0 !important;
    padding: initial !important;
    background: initial !important;
    border: initial !important;
    box-shadow: none !important;
}

/* Select2 and Bootstrap Select readability. */
body .select2-container .select2-choice,
body .select2-container-multi .select2-choices,
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple,
body .bootstrap-select > .dropdown-toggle {
    min-height: var(--simas-control-height) !important;
    background: var(--simas-surface, #FFFFFF) !important;
    color: var(--simas-surface-text-strong, #0F172A) !important;
    border: 1px solid var(--simas-border-strong, #9FB6CE) !important;
    border-radius: var(--simas-radius-sm, 5px) !important;
    font-size: 15px !important;
    opacity: 1 !important;
}

body .select2-container .select2-choice .select2-chosen,
body .select2-container--default .select2-selection--single .select2-selection__rendered,
body .bootstrap-select > .dropdown-toggle .filter-option {
    color: var(--simas-surface-text-strong, #0F172A) !important;
    line-height: 40px !important;
    opacity: 1 !important;
}

body .select2-drop,
body .select2-dropdown,
body .select2-results,
body .select2-results__options,
body .bootstrap-select .dropdown-menu {
    background: var(--simas-surface, #FFFFFF) !important;
    color: var(--simas-surface-text-strong, #0F172A) !important;
}

body .select2-results .select2-highlighted,
body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--simas-primary, #055FAD) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
}

/* --------------------------- Buttons --------------------------- */
body .btn,
body button,
body input[type="button"],
body input[type="submit"],
body input[type="reset"] {
    min-height: 38px;
    padding: 8px 14px !important;
    border-radius: var(--simas-radius-sm, 5px) !important;
    font-family: var(--simas-font-family) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

body .btn-primary,
body .btn-custom,
body input[type="submit"] {
    background: var(--simas-primary, #055FAD) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
    border-color: var(--simas-primary-dark, #034A87) !important;
}

body .btn-default,
body .btn-secondary {
    background: var(--simas-surface, #FFFFFF) !important;
    color: var(--simas-surface-text-strong, #0F172A) !important;
    border-color: var(--simas-border-strong, #9FB6CE) !important;
}

body .btn-primary:hover,
body .btn-primary:focus,
body .btn-custom:hover,
body .btn-custom:focus,
body input[type="submit"]:hover {
    background: var(--simas-primary-dark, #034A87) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
}

/* --------------------------- Tables and DataTables --------------------------- */
body .table-responsive {
    overflow-x: auto !important;
    background: var(--simas-surface, #FFFFFF) !important;
    color: var(--simas-surface-text, #0F172A) !important;
    border: 1px solid var(--simas-border, #C7D5E5) !important;
    border-radius: var(--simas-radius, 8px) !important;
    padding: 6px !important;
    box-shadow: 0 3px 12px var(--simas-shadow, rgba(15,23,42,.12)) !important;
}

body table.table,
body table.dataTable,
body table.hover_me,
body table#example,
body .table-responsive > table {
    width: 100% !important;
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
    background: var(--simas-surface, #FFFFFF) !important;
    color: var(--simas-surface-text, #0F172A) !important;
    font-family: var(--simas-font-family) !important;
    font-size: var(--simas-table-font-size) !important;
    line-height: 1.4 !important;
}

body table.table th,
body table.table td,
body table.dataTable th,
body table.dataTable td,
body table.hover_me th,
body table.hover_me td,
body table#example th,
body table#example td,
body .table-responsive > table th,
body .table-responsive > table td {
    padding: 9px 10px !important;
    border: 1px solid var(--simas-border, #C7D5E5) !important;
    color: var(--simas-surface-text, #0F172A) !important;
    font-size: var(--simas-table-font-size) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

body table.table thead th,
body table.dataTable thead th,
body table.dataTable thead td,
body table.hover_me thead tr:first-child th,
body table#example thead tr:first-child th,
body .table-responsive > table thead tr:first-child th {
    background: var(--simas-primary, #055FAD) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
    border-color: var(--simas-primary-dark, #034A87) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: .01em !important;
}

body table.table thead th *,
body table.dataTable thead th *,
body table.hover_me thead th *,
body table#example thead th * {
    color: inherit !important;
}

body table.table tbody tr:nth-child(even) > td,
body table.dataTable tbody tr:nth-child(even) > td,
body table.hover_me tbody tr:nth-child(even) > td,
body table#example tbody tr:nth-child(even) > td,
body .table-responsive > table tbody tr:nth-child(even) > td {
    background: var(--simas-surface-alt, #F7FAFD) !important;
}

body table.table tbody tr:nth-child(odd) > td,
body table.dataTable tbody tr:nth-child(odd) > td,
body table.hover_me tbody tr:nth-child(odd) > td,
body table#example tbody tr:nth-child(odd) > td,
body .table-responsive > table tbody tr:nth-child(odd) > td {
    background: var(--simas-surface, #FFFFFF) !important;
}

body table.table tbody tr:hover > td,
body table.dataTable tbody tr:hover > td,
body table.hover_me tbody tr:hover > td,
body table#example tbody tr:hover > td,
body .table-responsive > table tbody tr:hover > td {
    background: var(--simas-surface-hover, #EAF3FC) !important;
    color: var(--simas-surface-text-strong, #0F172A) !important;
}

body table.table a,
body table.dataTable a,
body table.hover_me a,
body table#example a,
body .table-responsive > table a {
    color: var(--simas-link-surface, #064E8A) !important;
    font-weight: 600 !important;
}

body .dataTables_wrapper,
body .dataTables_wrapper label,
body .dataTables_wrapper .dataTables_info,
body .dataTables_wrapper .dataTables_length,
body .dataTables_wrapper .dataTables_filter {
    color: var(--simas-surface-text-strong, #0F172A) !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

body .dataTables_length select,
body .dataTables_filter input,
body .dataTables_filter input[type="search"] {
    min-height: 38px !important;
    background: var(--simas-surface, #FFFFFF) !important;
    color: var(--simas-surface-text-strong, #0F172A) !important;
    border: 1px solid var(--simas-border-strong, #9FB6CE) !important;
    border-radius: var(--simas-radius-sm, 5px) !important;
    padding: 7px 10px !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

body .dataTables_paginate .paginate_button,
body .dataTables_wrapper .dataTables_paginate .paginate_button,
body .pagination > li > a,
body .pagination > li > span {
    min-width: 34px !important;
    margin: 2px !important;
    padding: 6px 10px !important;
    background: var(--simas-surface, #FFFFFF) !important;
    color: var(--simas-link-surface, #064E8A) !important;
    border: 1px solid var(--simas-border, #C7D5E5) !important;
    font-size: 13.5px !important;
}

body .dataTables_paginate .paginate_button.current,
body .dataTables_paginate .paginate_button.current:hover,
body .pagination > .active > a,
body .pagination > .active > span {
    background: var(--simas-primary, #055FAD) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
    border-color: var(--simas-primary-dark, #034A87) !important;
}

/* Protect non-data layout tables. */
body .navbar table,
body .sidebar table,
body .side-nav table,
body .panel-heading table,
body .modal-header table,
body .dropdown-menu table,
body .input-group table,
body .form-inline table,
body .footer table,
body table.simas-layout-table,
body table[role="presentation"] {
    width: auto !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    margin: 0 !important;
}

body .navbar table tr,
body .navbar table th,
body .navbar table td,
body .sidebar table tr,
body .sidebar table th,
body .sidebar table td,
body .panel-heading table tr,
body .panel-heading table th,
body .panel-heading table td,
body table.simas-layout-table tr,
body table.simas-layout-table th,
body table.simas-layout-table td,
body table[role="presentation"] tr,
body table[role="presentation"] th,
body table[role="presentation"] td {
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
}

/* --------------------------- Public home/index page --------------------------- */
body.body > .col-lg-8 > .tab-content,
body.body > .col-md-8 > .tab-content,
body.body > .col-sm-8 > .tab-content {
    margin-top: 14px !important;
    padding: 24px !important;
    background: var(--simas-surface, #FFFFFF) !important;
    color: var(--simas-surface-text, #0F172A) !important;
    border: 1px solid var(--simas-border, #C7D5E5) !important;
    border-radius: var(--simas-radius, 8px) !important;
    box-shadow: 0 4px 16px var(--simas-shadow, rgba(15,23,42,.12)) !important;
}

body.body > .col-lg-8 > .tab-content > .tab-pane,
body.body > .col-md-8 > .tab-content > .tab-pane,
body.body > .col-sm-8 > .tab-content > .tab-pane {
    background: transparent !important;
    color: var(--simas-surface-text, #0F172A) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
}

body.body > .col-lg-8 > .tab-content [style*="color: #2c3e50" i],
body.body > .col-lg-8 > .tab-content [style*="color:#2c3e50" i],
body.body > .col-lg-8 > .tab-content [style*="color: #34495e" i],
body.body > .col-lg-8 > .tab-content [style*="color:#34495e" i],
body.body > .col-lg-8 > .tab-content [style*="color: #333" i],
body.body > .col-lg-8 > .tab-content [style*="color:#333" i] {
    color: var(--simas-surface-text, #0F172A) !important;
}

body.body > .col-lg-8 > .tab-content [style*="background-color: #fcf8e3" i],
body.body > .col-lg-8 > .tab-content [style*="background-color:#fcf8e3" i] {
    background: var(--simas-surface-alt, #F7FAFD) !important;
}

body.body > .col-lg-8 > .tab-content h3 {
    margin-top: 4px !important;
    margin-bottom: 16px !important;
    color: var(--simas-surface-text-strong, #0F172A) !important;
    font-size: 24px !important;
}

body .nav-tabs > li > a,
body .nav-pills > li > a {
    color: var(--simas-link-page, #064E8A) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

body .nav-tabs > li.active > a,
body .nav-tabs > li.active > a:hover,
body .nav-tabs > li.active > a:focus,
body .nav-pills > li.active > a {
    background: var(--simas-surface, #FFFFFF) !important;
    color: var(--simas-link-surface, #064E8A) !important;
    border-color: var(--simas-border, #C7D5E5) !important;
}

/* Pending-request lists and numeric badges. */
body .badge,
body .label-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 4px 8px !important;
    background: var(--simas-primary, #055FAD) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    opacity: 1 !important;
}

/* Legacy inline colours used in older pages: map them to readable semantic colours. */
body [style*="color:#1F4F75" i],
body [style*="color: #1F4F75" i] {
    color: var(--simas-surface-text-strong, #0F172A) !important;
}

body .panel-body [style*="color:#a70303" i],
body .panel-body [style*="color: #a70303" i],
body .card-body [style*="color:#a70303" i],
body .tab-content [style*="color:#a70303" i],
body font[color="#A70303" i] {
    color: var(--simas-danger, #C62828) !important;
}

/* Footer remains themed but text must be clear. */
body .footer,
body footer,
body .print-footer {
    background: var(--simas-primary, #055FAD) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
    border-top: 2px solid var(--simas-accent, #FFBB02) !important;
}

body .footer *,
body footer * {
    color: inherit !important;
}

@media (max-width: 991px) {
    :root {
        --simas-base-font-size: 14.5px;
        --simas-control-font-size: 14.5px;
    }

    body.body > .col-lg-8 > .tab-content,
    body.body > .col-md-8 > .tab-content,
    body.body > .col-sm-8 > .tab-content {
        padding: 20px !important;
    }
}

@media (max-width: 767px) {
    body h1 { font-size: 24px !important; }
    body h2 { font-size: 21px !important; }
    body h3 { font-size: 19px !important; }

    body .navbar-brand img {
        max-width: 64px !important;
        height: auto !important;
    }

    body .panel-group#accordion .panel-body,
    body .panel-group[id^="accordion"] .panel-body {
        padding: 14px 16px !important;
    }

    body.body > .col-lg-8 > .tab-content,
    body.body > .col-md-8 > .tab-content,
    body.body > .col-sm-8 > .tab-content {
        margin-top: 10px !important;
        padding: 16px !important;
    }

    body table.table th,
    body table.table td,
    body table.dataTable th,
    body table.dataTable td,
    body table.hover_me th,
    body table.hover_me td,
    body table#example th,
    body table#example td {
        padding: 8px !important;
        white-space: nowrap !important;
    }
}

@media print {
    html,
    body,
    body.body {
        background: #FFFFFF !important;
        color: #000000 !important;
        font-family: "Times New Roman", serif !important;
        font-size: 11pt !important;
    }

    body .panel-body,
    body .card-body,
    body .tab-content,
    body table,
    body th,
    body td {
        background: #FFFFFF !important;
        color: #000000 !important;
        box-shadow: none !important;
    }
}


/* ========================================================================
   SIMAS GLOBAL THEME V5
   MODERN NAVBAR, COUNTERS, SIDEBAR, FORMS, TABLES AND READABILITY
   ------------------------------------------------------------------------
   IMPORTANT:
   1. Keep this section LAST in the stylesheet.
   2. Load theme_variables.jsp before this stylesheet.
   3. All colours below come from the saved client theme variables.
   ======================================================================== */

/* ------------------------------------------------------------------------
   1. Theme aliases and dimensions
   ------------------------------------------------------------------------ */
:root {
    --simas-nav-bg: var(--simas-primary, #0864A8);
    --simas-nav-bg-hover: var(--simas-primary-dark, #064E85);
    --simas-nav-bg-active: var(--simas-primary-darker, #043A64);
    --simas-nav-text: var(--simas-on-primary, #FFFFFF);

    --simas-page-background: var(--simas-page-bg, #F3F7FB);
    --simas-card-background: var(--simas-surface, #FFFFFF);
    --simas-card-background-alt: var(--simas-surface-alt, #F5F8FC);
    --simas-card-hover: var(--simas-surface-hover, #EAF2FA);

    --simas-main-text: var(--simas-text, #172033);
    --simas-strong-text: var(--simas-text-strong, #0F172A);
    --simas-soft-text: var(--simas-muted, #59677A);

    --simas-line: var(--simas-border, #CCD7E4);
    --simas-line-strong: var(--simas-border-strong, #AEBED0);

    --simas-brand-accent: var(--simas-accent, #F6B500);
    --simas-brand-accent-text: var(--simas-on-accent, #172033);

    --simas-count-bg: var(--simas-primary-dark, #064E85);
    --simas-count-text: var(--simas-on-primary, #FFFFFF);

    --simas-navbar-height: 112px;
    --simas-navbar-radius: 0 0 8px 8px;
    --simas-card-radius: var(--simas-radius, 8px);
    --simas-control-radius: var(--simas-radius-sm, 6px);

    --simas-navbar-shadow: 0 4px 16px rgba(15, 23, 42, .14);
    --simas-card-shadow: 0 4px 14px rgba(15, 23, 42, .09);
    --simas-dropdown-shadow: 0 14px 35px rgba(15, 23, 42, .18);
}

/* ------------------------------------------------------------------------
   2. Global readability
   ------------------------------------------------------------------------ */
html,
body,
body.body {
    min-height: 100%;
    background: var(--simas-page-background) !important;
    color: var(--simas-main-text) !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
}

body *,
body *::before,
body *::after {
    box-sizing: border-box;
}

body p,
body li,
body label,
body input,
body select,
body textarea,
body button,
body a,
body th,
body td,
body span,
body div {
    text-shadow: none !important;
}

body p,
body li,
body label,
body input,
body select,
body textarea,
body th,
body td {
    color: inherit;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    color: var(--simas-strong-text) !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    letter-spacing: -.015em !important;
}

body h1 { font-size: 28px !important; line-height: 1.22 !important; }
body h2 { font-size: 24px !important; line-height: 1.28 !important; }
body h3 { font-size: 21px !important; line-height: 1.32 !important; }
body h4 { font-size: 18px !important; line-height: 1.38 !important; }
body h5 { font-size: 16px !important; line-height: 1.42 !important; }
body h6 { font-size: 14px !important; line-height: 1.45 !important; }

body a:not(.btn):not(.navbar-brand):not(.dropdown-toggle) {
    color: var(--simas-primary-dark, #064E85) !important;
}

body a:not(.btn):not(.navbar-brand):not(.dropdown-toggle):hover,
body a:not(.btn):not(.navbar-brand):not(.dropdown-toggle):focus {
    color: var(--simas-primary, #0864A8) !important;
}

/* ------------------------------------------------------------------------
   3. Modern administrator navbar
   ------------------------------------------------------------------------ */
body nav.navbar.custom-navbar,
body nav.navbar.navbar-simas,
body nav.navbar.navbar-inverse.custom-navbar,
html body nav.navbar.navbar-inverse.navbar-simas {
    position: relative !important;
    z-index: 1030 !important;
    min-height: var(--simas-navbar-height) !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    background: var(--simas-nav-bg) !important;
    background-image: none !important;
    color: var(--simas-nav-text) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--simas-nav-bg-hover) !important;
    border-radius: var(--simas-navbar-radius) !important;
    box-shadow: var(--simas-navbar-shadow) !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

body nav.custom-navbar > .container-fluid,
body nav.navbar-simas > .container-fluid {
    min-height: var(--simas-navbar-height) !important;
    padding: 14px 22px !important;
}

body nav.custom-navbar .navbar-header,
body nav.navbar-simas .navbar-header {
    min-height: 84px !important;
}

body nav.custom-navbar .navbar-brand,
body nav.navbar-simas .navbar-brand {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    min-height: 84px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--simas-nav-text) !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
}

body nav.custom-navbar .navbar-brand:hover,
body nav.custom-navbar .navbar-brand:focus,
body nav.navbar-simas .navbar-brand:hover,
body nav.navbar-simas .navbar-brand:focus {
    color: var(--simas-nav-text) !important;
    text-decoration: none !important;
}

/* Protect the legacy table used for logo and client name. */
body nav.custom-navbar .navbar-brand table,
body nav.navbar-simas .navbar-brand table,
body nav.custom-navbar table,
body nav.navbar-simas table {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-collapse: separate !important;
    box-shadow: none !important;
    color: inherit !important;
}

body nav.custom-navbar .navbar-brand table tr,
body nav.custom-navbar .navbar-brand table td,
body nav.custom-navbar .navbar-brand table th,
body nav.navbar-simas .navbar-brand table tr,
body nav.navbar-simas .navbar-brand table td,
body nav.navbar-simas .navbar-brand table th {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 8px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    vertical-align: middle !important;
}

body nav.custom-navbar .navbar-brand img,
body nav.navbar-simas .navbar-brand img {
    display: block !important;
    width: 78px !important;
    max-width: 78px !important;
    height: 78px !important;
    object-fit: contain !important;
    opacity: 1 !important;
    border: 2px solid rgba(255, 255, 255, .38) !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .18) !important;
}

/* Disable the old logo zoom because it covers navbar controls. */
body nav.custom-navbar .zoom_img img,
body nav.navbar-simas .zoom_img img,
body nav.custom-navbar .zoom_img img:hover,
body nav.navbar-simas .zoom_img img:hover {
    transform: none !important;
    transition: none !important;
}

/* Client name and SIMAS title: override legacy black/red inline colours. */
body nav.custom-navbar .navbar-brand td > div,
body nav.navbar-simas .navbar-brand td > div,
body nav.custom-navbar .navbar-brand td > div[style],
body nav.navbar-simas .navbar-brand td > div[style] {
    color: var(--simas-nav-text) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

body nav.custom-navbar .navbar-brand td > div:first-child,
body nav.navbar-simas .navbar-brand td > div:first-child {
    max-width: 370px !important;
    margin-bottom: 2px !important;
    overflow: hidden !important;
    color: var(--simas-nav-text) !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body nav.custom-navbar .navbar-brand td > div[title*="SACCOS Information"],
body nav.navbar-simas .navbar-brand td > div[title*="SACCOS Information"] {
    margin-bottom: 3px !important;
    color: var(--simas-brand-accent) !important;
    font-family: Consolas, "Courier New", monospace !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

/* Branch chip. */
body nav.custom-navbar .navbar-brand td > div[title*="Umeingia"],
body nav.navbar-simas .navbar-brand td > div[title*="Umeingia"] {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 330px !important;
    min-height: 24px !important;
    margin: 2px 0 !important;
    padding: 3px 9px !important;
    overflow: hidden !important;
    background: var(--simas-surface, #FFFFFF) !important;
    color: var(--simas-primary-dark, #064E85) !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    border-radius: 999px !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body nav.custom-navbar .navbar-brand td > div[title*="Umeingia"] *,
body nav.navbar-simas .navbar-brand td > div[title*="Umeingia"] * {
    color: inherit !important;
}

/* Stop branch name from disappearing due to the old blinking animation. */
body nav.custom-navbar .blinking,
body nav.navbar-simas .blinking {
    animation: none !important;
    color: var(--simas-primary-dark, #064E85) !important;
    opacity: 1 !important;
}

/* Loan calculator chip. */
body nav.custom-navbar .navbar-brand a[title="LOAN CALCULATOR"],
body nav.navbar-simas .navbar-brand a[title="LOAN CALCULATOR"] {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    margin-top: 2px !important;
    padding: 4px 10px !important;
    background: var(--simas-brand-accent) !important;
    color: var(--simas-brand-accent-text) !important;
    border: 1px solid var(--simas-brand-accent) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .13) !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

body nav.custom-navbar .navbar-brand a[title="LOAN CALCULATOR"]:hover,
body nav.navbar-simas .navbar-brand a[title="LOAN CALCULATOR"]:hover {
    filter: brightness(.96) !important;
    transform: translateY(-1px) !important;
}

/* Remove fake Stats spacer items used by the old navbar. */
body nav.custom-navbar .top-nav > li > a[data-original-title="Stats"],
body nav.navbar-simas .top-nav > li > a[data-original-title="Stats"] {
    display: none !important;
}

/* Navbar groups. */
body nav.custom-navbar .navbar-collapse,
body nav.navbar-simas .navbar-collapse {
    border: 0 !important;
    box-shadow: none !important;
}

body nav.custom-navbar .top-nav,
body nav.navbar-simas .top-nav {
    list-style: none !important;
}

body nav.custom-navbar .top-nav > li,
body nav.navbar-simas .top-nav > li {
    list-style: none !important;
    padding: 0 !important;
}

body nav.custom-navbar .top-nav > li > a,
body nav.navbar-simas .top-nav > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    background: transparent !important;
    color: var(--simas-nav-text) !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    transition: background-color .18s ease,
                border-color .18s ease,
                transform .18s ease,
                box-shadow .18s ease !important;
}

body nav.custom-navbar .top-nav > li > a:hover,
body nav.custom-navbar .top-nav > li > a:focus,
body nav.custom-navbar .top-nav > li.open > a,
body nav.custom-navbar .top-nav > li.open > a:hover,
body nav.navbar-simas .top-nav > li > a:hover,
body nav.navbar-simas .top-nav > li > a:focus,
body nav.navbar-simas .top-nav > li.open > a {
    background: var(--simas-nav-bg-hover) !important;
    color: var(--simas-nav-text) !important;
    border-color: rgba(255, 255, 255, .20) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .13) !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

body nav.custom-navbar .top-nav > li > a *,
body nav.navbar-simas .top-nav > li > a * {
    text-shadow: none !important;
}

/* Navbar icons. */
body nav.custom-navbar .top-nav .glyphicon,
body nav.custom-navbar .top-nav .fa,
body nav.navbar-simas .top-nav .glyphicon,
body nav.navbar-simas .top-nav .fa {
    color: inherit !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

body nav.custom-navbar .top-nav .caret,
body nav.navbar-simas .top-nav .caret {
    margin-left: 7px !important;
    color: inherit !important;
    border-top-color: currentColor !important;
    border-bottom-color: currentColor !important;
}

/* Cash and remaining-days neutral chips currently use inline #E6E7E9. */
body nav.custom-navbar .top-nav > li > a[style*="#E6E7E9" i],
body nav.custom-navbar .top-nav > li > a[style*="#e6e7e9" i],
body nav.navbar-simas .top-nav > li > a[style*="#E6E7E9" i],
body nav.navbar-simas .top-nav > li > a[style*="#e6e7e9" i] {
    background: var(--simas-card-background-alt) !important;
    color: var(--simas-strong-text) !important;
    border-color: var(--simas-line) !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .09) !important;
}

body nav.custom-navbar .top-nav > li > a[style*="#E6E7E9" i] b,
body nav.custom-navbar .top-nav > li > a[style*="#e6e7e9" i] b,
body nav.navbar-simas .top-nav > li > a[style*="#E6E7E9" i] b,
body nav.navbar-simas .top-nav > li > a[style*="#e6e7e9" i] b {
    color: var(--simas-primary-dark, #064E85) !important;
    font-weight: 800 !important;
}

/* Float, Collection and SMS chips. */
body nav.custom-navbar .top-nav > li > a.alert,
body nav.navbar-simas .top-nav > li > a.alert,
body nav.custom-navbar .top-nav > li > a .alert,
body nav.navbar-simas .top-nav > li > a .alert {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .09) !important;
    opacity: 1 !important;
    white-space: nowrap !important;
}

body nav.custom-navbar .top-nav > li > a.alert-success,
body nav.navbar-simas .top-nav > li > a.alert-success,
body nav.custom-navbar .top-nav > li > a .alert-success,
body nav.navbar-simas .top-nav > li > a .alert-success {
    background: var(--simas-success-soft, #E7F6ED) !important;
    color: var(--simas-success, #198754) !important;
    border-color: var(--simas-success, #198754) !important;
}

body nav.custom-navbar .top-nav > li > a.alert-warning,
body nav.navbar-simas .top-nav > li > a.alert-warning,
body nav.custom-navbar .top-nav > li > a .alert-warning,
body nav.navbar-simas .top-nav > li > a .alert-warning {
    background: var(--simas-warning-soft, #FFF4D6) !important;
    color: var(--simas-warning-text, #7A4D00) !important;
    border-color: var(--simas-warning, #E5A100) !important;
}

body nav.custom-navbar .top-nav > li > a.alert-danger,
body nav.navbar-simas .top-nav > li > a.alert-danger,
body nav.custom-navbar .top-nav > li > a .alert-danger,
body nav.navbar-simas .top-nav > li > a .alert-danger {
    background: var(--simas-danger-soft, #FDE7EA) !important;
    color: var(--simas-danger, #C62828) !important;
    border-color: var(--simas-danger, #C62828) !important;
}

body nav.custom-navbar .top-nav > li > a.alert-info,
body nav.navbar-simas .top-nav > li > a.alert-info,
body nav.custom-navbar .top-nav > li > a .alert-info,
body nav.navbar-simas .top-nav > li > a .alert-info {
    background: var(--simas-info-soft, #E4F3FB) !important;
    color: var(--simas-info, #087EA4) !important;
    border-color: var(--simas-info, #087EA4) !important;
}

/* Defeat legacy inline green/red/orange text inside navbar chips. */
body nav.custom-navbar .top-nav > li > a.alert b[style],
body nav.custom-navbar .top-nav > li > a.alert span[style],
body nav.navbar-simas .top-nav > li > a.alert b[style],
body nav.navbar-simas .top-nav > li > a.alert span[style] {
    color: inherit !important;
    opacity: 1 !important;
}

/* SMS chip may contain alert inside an anchor. */
body nav.custom-navbar .top-nav > li > a > .alert,
body nav.navbar-simas .top-nav > li > a > .alert {
    margin: -9px -12px !important;
}

/* User name and role. */
body nav.custom-navbar .top-nav a[title] > b[style*="color:red" i],
body nav.custom-navbar .top-nav a[title] > b[style*="color: red" i],
body nav.navbar-simas .top-nav a[title] > b[style*="color:red" i],
body nav.navbar-simas .top-nav a[title] > b[style*="color: red" i] {
    margin-left: 4px !important;
    color: var(--simas-brand-accent) !important;
    font-weight: 800 !important;
}

body nav.custom-navbar .top-nav a[title] > span[style*="#ff6666" i],
body nav.navbar-simas .top-nav a[title] > span[style*="#ff6666" i] {
    color: var(--simas-brand-accent) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
}

/* Search control, whose anchor is nested inside a glyphicon span. */
body nav.custom-navbar .top-nav > li > .glyphicon-search,
body nav.navbar-simas .top-nav > li > .glyphicon-search {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    color: var(--simas-nav-text) !important;
    font-size: 17px !important;
}

body nav.custom-navbar .top-nav > li > .glyphicon-search a,
body nav.custom-navbar .top-nav > li > .glyphicon-search a span,
body nav.navbar-simas .top-nav > li > .glyphicon-search a,
body nav.navbar-simas .top-nav > li > .glyphicon-search a span {
    color: var(--simas-nav-text) !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Navbar dropdowns. */
body nav.custom-navbar .dropdown-menu,
body nav.navbar-simas .dropdown-menu {
    min-width: 230px !important;
    margin-top: 8px !important;
    padding: 7px !important;
    background: var(--simas-card-background) !important;
    color: var(--simas-main-text) !important;
    border: 1px solid var(--simas-line) !important;
    border-radius: 10px !important;
    box-shadow: var(--simas-dropdown-shadow) !important;
}

body nav.custom-navbar .dropdown-menu > li,
body nav.navbar-simas .dropdown-menu > li {
    padding: 0 !important;
    list-style: none !important;
}

body nav.custom-navbar .dropdown-menu > li > a,
body nav.navbar-simas .dropdown-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    background: transparent !important;
    color: var(--simas-main-text) !important;
    border-radius: 7px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    white-space: normal !important;
}

body nav.custom-navbar .dropdown-menu > li > a:hover,
body nav.custom-navbar .dropdown-menu > li > a:focus,
body nav.custom-navbar .dropdown-menu > .active > a,
body nav.navbar-simas .dropdown-menu > li > a:hover,
body nav.navbar-simas .dropdown-menu > li > a:focus,
body nav.navbar-simas .dropdown-menu > .active > a {
    background: var(--simas-primary-soft, #E5F1FA) !important;
    color: var(--simas-primary-dark, #064E85) !important;
}

body nav.custom-navbar .dropdown-menu > li > a *,
body nav.navbar-simas .dropdown-menu > li > a * {
    color: inherit !important;
}

body nav.custom-navbar .dropdown-menu .divider,
body nav.navbar-simas .dropdown-menu .divider {
    height: 1px !important;
    margin: 6px 4px !important;
    background: var(--simas-line) !important;
}

/* ------------------------------------------------------------------------
   4. Professional counters and badges
   ------------------------------------------------------------------------ */
body .badge,
body .label.label-primary,
body span.badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    margin-left: 6px !important;
    padding: 0 7px !important;
    background: var(--simas-count-bg) !important;
    color: var(--simas-count-text) !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: none !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* Monetary counters in navbar need a wider pill. */
body nav.custom-navbar .badge,
body nav.navbar-simas .badge {
    min-width: 34px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 3px 0 7px !important;
    padding: 0 10px !important;
    background: var(--simas-count-bg) !important;
    color: var(--simas-count-text) !important;
    border-color: rgba(255, 255, 255, .24) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
}

/* Small pending counters in ordinary lists and sidebar. */
body .panel-body li > a > .badge,
body .sidebar li > a > .badge,
body .side-nav li > a > .badge,
body .dropdown-menu li > a > .badge,
body ul:not(.top-nav) li > a > .badge {
    float: none !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: -1px 0 -1px 7px !important;
    padding: 0 6px !important;
    background: var(--simas-primary, #0864A8) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
    border-color: var(--simas-primary-dark, #064E85) !important;
    font-size: 12px !important;
}

/* Do not let old rules make zero counters transparent. */
body .badge,
body .badge *,
body .badge:empty {
    opacity: 1 !important;
    visibility: visible !important;
}

body .badge:empty {
    display: none !important;
}

/* Optional semantic badge classes for new pages. */
body .badge-success {
    background: var(--simas-success, #198754) !important;
    color: var(--simas-on-success, #FFFFFF) !important;
}

body .badge-warning {
    background: var(--simas-warning, #E5A100) !important;
    color: var(--simas-on-warning, #172033) !important;
}

body .badge-danger {
    background: var(--simas-danger, #C62828) !important;
    color: var(--simas-on-danger, #FFFFFF) !important;
}

body .badge-info {
    background: var(--simas-info, #087EA4) !important;
    color: var(--simas-on-info, #FFFFFF) !important;
}

/* ------------------------------------------------------------------------
   5. Sidebar and pending-request lists
   ------------------------------------------------------------------------ */
body .sidebar,
body .side-nav,
body #sidebar,
body .panel-group#accordion,
body .panel-group[id^="accordion"] {
    color: var(--simas-main-text) !important;
}

body .panel-group#accordion > .panel,
body .panel-group[id^="accordion"] > .panel,
body .sidebar .panel,
body .side-nav .panel {
    background: var(--simas-card-background) !important;
    border: 1px solid var(--simas-line) !important;
    border-radius: var(--simas-card-radius) !important;
    box-shadow: var(--simas-card-shadow) !important;
    overflow: hidden !important;
}

body .panel-group#accordion .panel-heading,
body .panel-group[id^="accordion"] .panel-heading,
body .sidebar .panel-heading,
body .side-nav .panel-heading {
    min-height: 48px !important;
    padding: 12px 14px !important;
    background: var(--simas-primary, #0864A8) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--simas-primary-dark, #064E85) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

body .panel-group#accordion .panel-heading *,
body .panel-group[id^="accordion"] .panel-heading *,
body .sidebar .panel-heading *,
body .side-nav .panel-heading * {
    color: inherit !important;
}

body .panel-group#accordion .panel-body,
body .panel-group[id^="accordion"] .panel-body,
body .sidebar .panel-body,
body .side-nav .panel-body {
    padding: 14px 18px !important;
    background: var(--simas-card-background) !important;
    color: var(--simas-main-text) !important;
    border: 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

/* Preserve the old icon + inline anchor + BR layout. */
body .panel-group#accordion .panel-body a,
body .panel-group[id^="accordion"] .panel-body a,
body .sidebar .panel-body a,
body .side-nav .panel-body a {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--simas-primary-dark, #064E85) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    text-decoration: none !important;
}

body .panel-group#accordion .panel-body a:hover,
body .panel-group[id^="accordion"] .panel-body a:hover,
body .sidebar .panel-body a:hover,
body .side-nav .panel-body a:hover {
    color: var(--simas-primary, #0864A8) !important;
    text-decoration: underline !important;
}

body .panel-group#accordion .panel-body > .glyphicon,
body .panel-group#accordion .panel-body > .fa,
body .panel-group[id^="accordion"] .panel-body > .glyphicon,
body .panel-group[id^="accordion"] .panel-body > .fa,
body .sidebar .panel-body > .glyphicon,
body .side-nav .panel-body > .glyphicon {
    display: inline-block !important;
    width: 27px !important;
    margin-right: 5px !important;
    color: var(--simas-strong-text) !important;
    font-size: 16px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Pending list outside the sidebar. */
body ul.pending-list,
body .pending-requests ul,
body .approval-list,
body .approval-list ul {
    margin: 8px 0 !important;
    padding-left: 22px !important;
}

body ul.pending-list li,
body .pending-requests li,
body .approval-list li {
    margin: 5px 0 !important;
    padding: 0 !important;
    color: var(--simas-main-text) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body ul.pending-list li > a,
body .pending-requests li > a,
body .approval-list li > a {
    color: var(--simas-primary-dark, #064E85) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

body ul.pending-list li > a:hover,
body .pending-requests li > a:hover,
body .approval-list li > a:hover {
    color: var(--simas-primary, #0864A8) !important;
    text-decoration: underline !important;
}

/* ------------------------------------------------------------------------
   6. Cards, panels and widgets
   ------------------------------------------------------------------------ */
body .panel,
body .card,
body .box,
body .widget,
body .well,
body .thumbnail,
body .dashboard-card,
body .info-box,
body .content-box,
body .form-container,
body .registration-form,
body .app_form {
    background: var(--simas-card-background) !important;
    color: var(--simas-main-text) !important;
    border-color: var(--simas-line) !important;
    border-radius: var(--simas-card-radius) !important;
    box-shadow: var(--simas-card-shadow) !important;
}

body .panel-heading,
body .card-header,
body .box-header,
body .widget-header,
body .dashboard-card-header {
    background: var(--simas-primary, #0864A8) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
    border-color: var(--simas-primary-dark, #064E85) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

body .panel-heading *,
body .card-header *,
body .box-header *,
body .widget-header *,
body .dashboard-card-header * {
    color: inherit !important;
}

body .panel-body,
body .panel-footer,
body .card-body,
body .card-footer,
body .box-body,
body .widget-body {
    background: var(--simas-card-background) !important;
    color: var(--simas-main-text) !important;
    border-color: var(--simas-line) !important;
    font-size: 14.5px !important;
}

/* ------------------------------------------------------------------------
   7. Forms and dropdown controls
   ------------------------------------------------------------------------ */
body label,
body .control-label,
body .form-label {
    margin-bottom: 6px !important;
    color: var(--simas-strong-text) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
}

body .form-control,
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="number"],
body input[type="date"],
body input[type="datetime-local"],
body input[type="time"],
body input[type="tel"],
body input[type="url"],
body input[type="search"],
body select,
body textarea {
    min-height: 40px !important;
    padding: 8px 11px !important;
    background: var(--simas-card-background) !important;
    color: var(--simas-main-text) !important;
    border: 1px solid var(--simas-line-strong) !important;
    border-radius: var(--simas-control-radius) !important;
    box-shadow: none !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    opacity: 1 !important;
}

body select,
body select.form-control {
    cursor: pointer !important;
}

body select option,
body select optgroup {
    background: var(--simas-card-background) !important;
    color: var(--simas-main-text) !important;
    font-size: 14px !important;
}

body textarea {
    min-height: 105px !important;
    resize: vertical !important;
}

body .form-control:hover,
body input[type="text"]:hover,
body input[type="email"]:hover,
body input[type="password"]:hover,
body input[type="number"]:hover,
body input[type="date"]:hover,
body input[type="tel"]:hover,
body input[type="search"]:hover,
body select:hover,
body textarea:hover {
    border-color: var(--simas-primary-light, #5A9FD2) !important;
}

body .form-control:focus,
body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="password"]:focus,
body input[type="number"]:focus,
body input[type="date"]:focus,
body input[type="tel"]:focus,
body input[type="search"]:focus,
body select:focus,
body textarea:focus {
    background: var(--simas-card-background) !important;
    color: var(--simas-main-text) !important;
    border-color: var(--simas-primary, #0864A8) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px var(--simas-focus-ring, rgba(8,100,168,.18)) !important;
}

body input::placeholder,
body textarea::placeholder,
body .form-control::placeholder {
    color: var(--simas-soft-text) !important;
    opacity: .9 !important;
}

body input[disabled],
body input[readonly],
body select[disabled],
body textarea[disabled],
body .form-control[disabled],
body .form-control[readonly] {
    background: var(--simas-card-background-alt) !important;
    color: var(--simas-soft-text) !important;
    border-color: var(--simas-line) !important;
    opacity: 1 !important;
}

/* Do not convert checkboxes/radios/file inputs into full-width text controls. */
body input[type="checkbox"],
body input[type="radio"] {
    min-height: 0 !important;
    padding: 0 !important;
    accent-color: var(--simas-primary, #0864A8) !important;
}

body input[type="file"],
body input[type="color"],
body input[type="range"] {
    min-height: 0 !important;
    padding: 4px !important;
}

/* Select2 old and new. */
body .select2-container .select2-choice,
body .select2-container-multi .select2-choices,
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple {
    min-height: 40px !important;
    background: var(--simas-card-background) !important;
    color: var(--simas-main-text) !important;
    border: 1px solid var(--simas-line-strong) !important;
    border-radius: var(--simas-control-radius) !important;
    box-shadow: none !important;
}

body .select2-container .select2-choice .select2-chosen,
body .select2-container--default .select2-selection--single .select2-selection__rendered {
    min-height: 38px !important;
    padding: 8px 11px !important;
    color: var(--simas-main-text) !important;
    font-size: 14.5px !important;
    line-height: 22px !important;
}

body .select2-dropdown,
body .select2-drop,
body .select2-results,
body .select2-results__options {
    background: var(--simas-card-background) !important;
    color: var(--simas-main-text) !important;
    border-color: var(--simas-line) !important;
}

body .select2-results__option,
body .select2-results .select2-result-label {
    padding: 8px 10px !important;
    color: var(--simas-main-text) !important;
    font-size: 14px !important;
}

body .select2-results__option--highlighted[aria-selected],
body .select2-results .select2-highlighted,
body .select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--simas-primary, #0864A8) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
}

/* ------------------------------------------------------------------------
   8. Professional tables and DataTables
   ------------------------------------------------------------------------ */
body .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    background: var(--simas-card-background) !important;
    border: 1px solid var(--simas-line) !important;
    border-radius: var(--simas-card-radius) !important;
    box-shadow: var(--simas-card-shadow) !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Apply report-table styling only to actual data tables. */
body table.table,
body table.dataTable,
body table.hover_me,
body table#example,
body .table-responsive > table {
    width: 100% !important;
    margin: 0 !important;
    background: var(--simas-card-background) !important;
    color: var(--simas-main-text) !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    font-size: 13.5px !important;
}

body table.table th,
body table.table td,
body table.dataTable th,
body table.dataTable td,
body table.hover_me th,
body table.hover_me td,
body table#example th,
body table#example td,
body .table-responsive > table th,
body .table-responsive > table td {
    padding: 9px 10px !important;
    color: var(--simas-main-text) !important;
    border: 1px solid var(--simas-line) !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
}

body table.table thead th,
body table.dataTable thead th,
body table.hover_me thead th,
body table#example thead th,
body .table-responsive > table thead th {
    background: var(--simas-primary, #0864A8) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
    border-color: var(--simas-primary-dark, #064E85) !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
}

body table.table thead th *,
body table.dataTable thead th *,
body table.hover_me thead th *,
body table#example thead th * {
    color: inherit !important;
}

body table.table tbody tr,
body table.dataTable tbody tr,
body table.hover_me tbody tr,
body table#example tbody tr {
    background: var(--simas-card-background) !important;
}

body table.table tbody tr:nth-child(even),
body table.dataTable tbody tr:nth-child(even),
body table.hover_me tbody tr:nth-child(even),
body table#example tbody tr:nth-child(even) {
    background: var(--simas-card-background-alt) !important;
}

body table.table tbody tr:hover,
body table.table tbody tr:hover td,
body table.dataTable tbody tr:hover,
body table.dataTable tbody tr:hover td,
body table.hover_me tbody tr:hover,
body table.hover_me tbody tr:hover td,
body table#example tbody tr:hover,
body table#example tbody tr:hover td {
    background: var(--simas-card-hover) !important;
    color: var(--simas-strong-text) !important;
}

/* Protect navbar and layout tables from report-table styling. */
body nav.navbar table,
body nav.navbar table tr,
body nav.navbar table th,
body nav.navbar table td,
body .sidebar table,
body .sidebar table tr,
body .sidebar table th,
body .sidebar table td,
body table.simas-layout-table,
body table.simas-layout-table tr,
body table.simas-layout-table th,
body table.simas-layout-table td,
body table[role="presentation"],
body table[role="presentation"] tr,
body table[role="presentation"] th,
body table[role="presentation"] td {
    width: auto !important;
    background: transparent !important;
    color: inherit !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* DataTables controls. */
body .dataTables_wrapper {
    color: var(--simas-main-text) !important;
}

body .dataTables_wrapper .dataTables_length,
body .dataTables_wrapper .dataTables_filter,
body .dataTables_wrapper .dataTables_info,
body .dataTables_wrapper .dataTables_paginate {
    margin: 8px 0 !important;
    color: var(--simas-main-text) !important;
    font-size: 13.5px !important;
}

body .dataTables_wrapper .dataTables_length select,
body .dataTables_wrapper .dataTables_filter input {
    min-height: 36px !important;
    padding: 6px 9px !important;
    background: var(--simas-card-background) !important;
    color: var(--simas-main-text) !important;
    border: 1px solid var(--simas-line-strong) !important;
    border-radius: var(--simas-control-radius) !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button,
body .pagination > li > a,
body .pagination > li > span {
    margin: 0 2px !important;
    padding: 6px 10px !important;
    background: var(--simas-card-background) !important;
    color: var(--simas-primary-dark, #064E85) !important;
    border: 1px solid var(--simas-line) !important;
    border-radius: 6px !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
body .pagination > .active > a,
body .pagination > .active > span {
    background: var(--simas-primary, #0864A8) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
    border-color: var(--simas-primary-dark, #064E85) !important;
}

/* ------------------------------------------------------------------------
   9. Buttons
   ------------------------------------------------------------------------ */
body .btn,
body button,
body input[type="button"],
body input[type="submit"],
body input[type="reset"] {
    min-height: 36px !important;
    border-radius: var(--simas-control-radius) !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    text-shadow: none !important;
    transition: background-color .18s ease,
                border-color .18s ease,
                box-shadow .18s ease,
                transform .18s ease !important;
}

body .btn-primary,
body .btn-custom,
body input[type="submit"] {
    background: var(--simas-primary, #0864A8) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
    border-color: var(--simas-primary-dark, #064E85) !important;
}

body .btn-primary:hover,
body .btn-primary:focus,
body .btn-custom:hover,
body .btn-custom:focus,
body input[type="submit"]:hover,
body input[type="submit"]:focus {
    background: var(--simas-primary-dark, #064E85) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
    border-color: var(--simas-primary-darker, #043A64) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .13) !important;
    transform: translateY(-1px) !important;
}

body .btn-default {
    background: var(--simas-card-background) !important;
    color: var(--simas-main-text) !important;
    border-color: var(--simas-line-strong) !important;
}

/* ------------------------------------------------------------------------
   10. Alerts, status labels and modals
   ------------------------------------------------------------------------ */
body .alert {
    color: var(--simas-main-text) !important;
    border-width: 1px !important;
    border-radius: var(--simas-card-radius) !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .07) !important;
}

body .alert-success {
    background: var(--simas-success-soft, #E7F6ED) !important;
    color: var(--simas-success-text, #135C37) !important;
    border-color: var(--simas-success, #198754) !important;
}

body .alert-warning {
    background: var(--simas-warning-soft, #FFF4D6) !important;
    color: var(--simas-warning-text, #7A4D00) !important;
    border-color: var(--simas-warning, #E5A100) !important;
}

body .alert-danger {
    background: var(--simas-danger-soft, #FDE7EA) !important;
    color: var(--simas-danger-text, #8E1C24) !important;
    border-color: var(--simas-danger, #C62828) !important;
}

body .alert-info {
    background: var(--simas-info-soft, #E4F3FB) !important;
    color: var(--simas-info-text, #075A77) !important;
    border-color: var(--simas-info, #087EA4) !important;
}

body .modal-content {
    background: var(--simas-card-background) !important;
    color: var(--simas-main-text) !important;
    border: 1px solid var(--simas-line) !important;
    border-radius: 12px !important;
    box-shadow: 0 22px 60px rgba(15, 23, 42, .25) !important;
    overflow: hidden !important;
}

body .modal-header {
    background: var(--simas-primary, #0864A8) !important;
    color: var(--simas-on-primary, #FFFFFF) !important;
    border-bottom-color: var(--simas-primary-dark, #064E85) !important;
}

body .modal-header *,
body .modal-header .close,
body .modal-header .close span {
    color: inherit !important;
}

body .modal-body,
body .modal-footer {
    background: var(--simas-card-background) !important;
    color: var(--simas-main-text) !important;
    border-color: var(--simas-line) !important;
}

/* ------------------------------------------------------------------------
   11. Legacy inline-colour corrections
   ------------------------------------------------------------------------ */
/* Text placed directly on the navbar must always use readable nav colours. */
body nav.custom-navbar [style*="color:black" i],
body nav.custom-navbar [style*="color: black" i],
body nav.navbar-simas [style*="color:black" i],
body nav.navbar-simas [style*="color: black" i] {
    color: var(--simas-nav-text) !important;
}

body nav.custom-navbar [style*="color:blue" i],
body nav.custom-navbar [style*="color: blue" i],
body nav.navbar-simas [style*="color:blue" i],
body nav.navbar-simas [style*="color: blue" i] {
    color: var(--simas-nav-text) !important;
}

body nav.custom-navbar [style*="color:red" i],
body nav.custom-navbar [style*="color: red" i],
body nav.navbar-simas [style*="color:red" i],
body nav.navbar-simas [style*="color: red" i] {
    color: var(--simas-brand-accent) !important;
}

/* Do not override semantic alert-chip text with the generic rule above. */
body nav.custom-navbar a.alert-success,
body nav.custom-navbar a.alert-success *,
body nav.navbar-simas a.alert-success,
body nav.navbar-simas a.alert-success * {
    color: var(--simas-success, #198754) !important;
}

body nav.custom-navbar a.alert-warning,
body nav.custom-navbar a.alert-warning *,
body nav.navbar-simas a.alert-warning,
body nav.navbar-simas a.alert-warning * {
    color: var(--simas-warning-text, #7A4D00) !important;
}

body nav.custom-navbar a.alert-danger,
body nav.custom-navbar a.alert-danger *,
body nav.navbar-simas a.alert-danger,
body nav.navbar-simas a.alert-danger * {
    color: var(--simas-danger, #C62828) !important;
}

/* Badges inside alert chips retain their own counter contrast. */
body nav.custom-navbar a.alert .badge,
body nav.custom-navbar a.alert .badge *,
body nav.navbar-simas a.alert .badge,
body nav.navbar-simas a.alert .badge * {
    color: var(--simas-count-text) !important;
}

/* ------------------------------------------------------------------------
   12. Desktop navbar layout
   ------------------------------------------------------------------------ */
@media (min-width: 1200px) {
    body nav.custom-navbar > .container-fluid,
    body nav.navbar-simas > .container-fluid {
        display: flex !important;
        align-items: center !important;
        gap: 18px !important;
    }

    body nav.custom-navbar .navbar-header,
    body nav.navbar-simas .navbar-header {
        float: none !important;
        flex: 0 0 470px !important;
        width: 470px !important;
    }

    body nav.custom-navbar .navbar-collapse,
    body nav.navbar-simas .navbar-collapse {
        display: block !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

    body nav.custom-navbar .navbar-collapse > ul.top-nav,
    body nav.navbar-simas .navbar-collapse > ul.top-nav {
        float: right !important;
        margin: 5px 0 5px 8px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body nav.custom-navbar > .container-fluid,
    body nav.navbar-simas > .container-fluid {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body nav.custom-navbar .navbar-header,
    body nav.navbar-simas .navbar-header {
        float: none !important;
        flex: 0 0 380px !important;
        width: 380px !important;
    }

    body nav.custom-navbar .navbar-collapse,
    body nav.navbar-simas .navbar-collapse {
        display: block !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

    body nav.custom-navbar .navbar-collapse > ul.top-nav,
    body nav.navbar-simas .navbar-collapse > ul.top-nav {
        float: right !important;
        margin: 4px 0 4px 6px !important;
    }

    body nav.custom-navbar .top-nav > li > a,
    body nav.navbar-simas .top-nav > li > a {
        min-height: 44px !important;
        padding: 8px 9px !important;
        font-size: 13px !important;
    }

    body nav.custom-navbar .navbar-brand td > div:first-child,
    body nav.navbar-simas .navbar-brand td > div:first-child {
        max-width: 265px !important;
        font-size: 16px !important;
    }
}

/* ------------------------------------------------------------------------
   13. Tablet and mobile navbar
   ------------------------------------------------------------------------ */
@media (max-width: 991px) {
    body nav.custom-navbar,
    body nav.navbar-simas {
        min-height: 0 !important;
        border-radius: 0 0 6px 6px !important;
    }

    body nav.custom-navbar > .container-fluid,
    body nav.navbar-simas > .container-fluid {
        display: block !important;
        min-height: 0 !important;
        padding: 10px 14px !important;
    }

    body nav.custom-navbar .navbar-header,
    body nav.navbar-simas .navbar-header {
        width: 100% !important;
        min-height: 76px !important;
    }

    body nav.custom-navbar .navbar-brand,
    body nav.navbar-simas .navbar-brand {
        min-height: 74px !important;
    }

    body nav.custom-navbar .navbar-brand img,
    body nav.navbar-simas .navbar-brand img {
        width: 64px !important;
        max-width: 64px !important;
        height: 64px !important;
    }

    body nav.custom-navbar .navbar-toggle,
    body nav.navbar-simas .navbar-toggle {
        margin-top: 18px !important;
        background: var(--simas-nav-bg-hover) !important;
        border-color: rgba(255, 255, 255, .40) !important;
        border-radius: 7px !important;
    }

    body nav.custom-navbar .navbar-toggle .icon-bar,
    body nav.navbar-simas .navbar-toggle .icon-bar {
        background: var(--simas-nav-text) !important;
    }

    body nav.custom-navbar .navbar-collapse,
    body nav.navbar-simas .navbar-collapse {
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 8px 0 !important;
        background: transparent !important;
        border-top: 1px solid rgba(255, 255, 255, .22) !important;
    }

    body nav.custom-navbar .navbar-collapse > ul.top-nav,
    body nav.navbar-simas .navbar-collapse > ul.top-nav {
        float: none !important;
        width: 100% !important;
        margin: 5px 0 !important;
    }

    body nav.custom-navbar .top-nav > li,
    body nav.navbar-simas .top-nav > li {
        width: 100% !important;
    }

    body nav.custom-navbar .top-nav > li > a,
    body nav.navbar-simas .top-nav > li > a {
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 42px !important;
        padding: 8px 10px !important;
        white-space: normal !important;
    }

    body nav.custom-navbar .dropdown-menu,
    body nav.navbar-simas .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin: 5px 0 !important;
        box-shadow: none !important;
    }
}

@media (max-width: 575px) {
    html,
    body,
    body.body {
        font-size: 14px !important;
    }

    body nav.custom-navbar .navbar-brand td > div:first-child,
    body nav.navbar-simas .navbar-brand td > div:first-child {
        max-width: 205px !important;
        font-size: 14px !important;
    }

    body nav.custom-navbar .navbar-brand td > div[title*="SACCOS Information"],
    body nav.navbar-simas .navbar-brand td > div[title*="SACCOS Information"] {
        font-size: 12px !important;
    }

    body nav.custom-navbar .navbar-brand td > div[title*="Umeingia"],
    body nav.navbar-simas .navbar-brand td > div[title*="Umeingia"] {
        display: none !important;
    }

    body nav.custom-navbar .navbar-brand img,
    body nav.navbar-simas .navbar-brand img {
        width: 54px !important;
        max-width: 54px !important;
        height: 54px !important;
    }

    body .table-responsive {
        border-radius: 6px !important;
    }

    body table.table th,
    body table.table td,
    body table.dataTable th,
    body table.dataTable td,
    body table.hover_me th,
    body table.hover_me td,
    body table#example th,
    body table#example td {
        padding: 7px 8px !important;
        white-space: nowrap !important;
    }
}

/* ------------------------------------------------------------------------
   14. Print
   ------------------------------------------------------------------------ */
@media print {
    html,
    body,
    body.body {
        background: #FFFFFF !important;
        color: #000000 !important;
        font-family: "Times New Roman", serif !important;
        font-size: 11pt !important;
    }

    body nav.navbar,
    body .sidebar,
    body .side-nav,
    body .footer:not(.print-footer),
    body .noprint,
    body .dataTables_filter,
    body .dataTables_length,
    body .dataTables_paginate,
    body .dt-buttons {
        display: none !important;
    }

    body .panel,
    body .card,
    body .table-responsive,
    body table,
    body th,
    body td {
        background: #FFFFFF !important;
        color: #000000 !important;
        box-shadow: none !important;
    }

    body table.table thead th,
    body table.dataTable thead th,
    body table.hover_me thead th,
    body table#example thead th {
        background: #E8E8E8 !important;
        color: #000000 !important;
        border-color: #777777 !important;
    }
}


/* ==========================================================================
   SIMAS NAVBAR V6 — EXACT LEGACY NAVBAR FIX
   This block is designed specifically for:
       <nav class="navbar navbar-inverse custom-navbar">
   Keep this block LAST in the stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Navbar-specific theme aliases
   -------------------------------------------------------------------------- */
:root {
    --simas-nav-primary: var(--simas-primary, #0B67A9);
    --simas-nav-primary-dark: var(--simas-primary-dark, #075187);
    --simas-nav-primary-darker: var(--simas-primary-darker, #053B63);
    --simas-nav-on-primary: var(--simas-on-primary, #FFFFFF);

    --simas-nav-surface: var(--simas-surface, #FFFFFF);
    --simas-nav-surface-alt: var(--simas-surface-alt, #F4F7FB);
    --simas-nav-border: var(--simas-border, #CED8E4);
    --simas-nav-text: var(--simas-text, #172033);
    --simas-nav-text-strong: var(--simas-text-strong, #0F172A);
    --simas-nav-muted: var(--simas-muted, #607086);

    --simas-nav-accent: var(--simas-accent, #F2B400);
    --simas-nav-on-accent: var(--simas-on-accent, #182033);

    --simas-nav-success: var(--simas-success, #198754);
    --simas-nav-success-soft: var(--simas-success-soft, #E9F7EF);
    --simas-nav-warning: var(--simas-warning, #D99000);
    --simas-nav-warning-soft: var(--simas-warning-soft, #FFF4D6);
    --simas-nav-danger: var(--simas-danger, #C73535);
    --simas-nav-danger-soft: var(--simas-danger-soft, #FDEBEC);
    --simas-nav-info: var(--simas-info, #087EA4);
    --simas-nav-info-soft: var(--simas-info-soft, #E7F5FA);

    --simas-nav-radius: 10px;
    --simas-nav-chip-height: 44px;
    --simas-nav-shadow: 0 5px 18px rgba(15, 23, 42, .15);
    --simas-nav-chip-shadow: 0 2px 7px rgba(15, 23, 42, .09);
}

/* --------------------------------------------------------------------------
   2. Main navbar shell
   -------------------------------------------------------------------------- */
html body nav.navbar.navbar-inverse.custom-navbar {
    position: relative !important;
    z-index: 1030 !important;
    min-height: 112px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    background: var(--simas-nav-primary) !important;
    background-image: none !important;
    color: var(--simas-nav-on-primary) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--simas-nav-primary-dark) !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: var(--simas-nav-shadow) !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

html body nav.navbar.navbar-inverse.custom-navbar > .container-fluid {
    display: grid !important;
    grid-template-columns: minmax(360px, 440px) minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 20px !important;
    min-height: 112px !important;
    padding: 13px 22px !important;
}

/* --------------------------------------------------------------------------
   3. Brand area
   -------------------------------------------------------------------------- */
html body nav.custom-navbar .navbar-header {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 82px !important;
}

html body nav.custom-navbar .navbar-brand {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--simas-nav-on-primary) !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

html body nav.custom-navbar .navbar-brand table,
html body nav.custom-navbar .navbar-brand tbody,
html body nav.custom-navbar .navbar-brand tr,
html body nav.custom-navbar .navbar-brand td {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    background: transparent !important;
    color: inherit !important;
    border: 0 !important;
    border-collapse: separate !important;
    box-shadow: none !important;
}

html body nav.custom-navbar .navbar-brand td {
    padding: 0 9px 0 0 !important;
    vertical-align: middle !important;
}

html body nav.custom-navbar .navbar-brand img {
    display: block !important;
    width: 76px !important;
    max-width: 76px !important;
    height: 76px !important;
    object-fit: contain !important;
    opacity: 1 !important;
    border: 2px solid rgba(255, 255, 255, .38) !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .18) !important;
}

html body nav.custom-navbar .zoom_img img,
html body nav.custom-navbar .zoom_img img:hover {
    transform: none !important;
    transition: none !important;
}

/* Client name. */
html body nav.custom-navbar .navbar-brand td > div:first-child {
    max-width: 330px !important;
    margin: 0 0 3px !important;
    overflow: hidden !important;
    color: var(--simas-nav-on-primary) !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* SIMAS title. */
html body nav.custom-navbar .navbar-brand td > div[title*="SACCOS Information"] {
    margin: 0 0 4px !important;
    color: var(--simas-nav-accent) !important;
    font-family: Consolas, "Courier New", monospace !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

/* Branch chip. */
html body nav.custom-navbar .navbar-brand td > div[title*="Umeingia"] {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 315px !important;
    min-height: 23px !important;
    margin: 1px 0 3px !important;
    padding: 3px 9px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, .94) !important;
    color: var(--simas-nav-primary-dark) !important;
    border: 1px solid rgba(255, 255, 255, .80) !important;
    border-radius: 999px !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body nav.custom-navbar .navbar-brand td > div[title*="Umeingia"] *,
html body nav.custom-navbar .navbar-brand td > div[title*="Umeingia"] span[style] {
    color: inherit !important;
}

html body nav.custom-navbar .blinking {
    animation: none !important;
    color: var(--simas-nav-primary-dark) !important;
    opacity: 1 !important;
}

/* Loan calculator. */
html body nav.custom-navbar .navbar-brand a[title="LOAN CALCULATOR"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 27px !important;
    padding: 4px 10px !important;
    background: var(--simas-nav-accent) !important;
    color: var(--simas-nav-on-accent) !important;
    border: 1px solid var(--simas-nav-accent) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .12) !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
}

html body nav.custom-navbar .navbar-brand a[title="LOAN CALCULATOR"]:hover,
html body nav.custom-navbar .navbar-brand a[title="LOAN CALCULATOR"]:focus {
    filter: brightness(.96) !important;
    transform: translateY(-1px) !important;
}

/* --------------------------------------------------------------------------
   4. Controls area
   The old page has many separate UL.top-nav elements. They are converted
   into one flexible toolbar and displayed in reverse DOM order:
   Collection, Float, Cashier, Days, SMS, Profile/Search, Home.
   -------------------------------------------------------------------------- */
html body nav.custom-navbar .navbar-collapse {
    display: flex !important;
    flex-direction: row-reverse !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: center !important;
    justify-content: flex-end !important;
    gap: 8px 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body nav.custom-navbar .navbar-collapse > ul.top-nav {
    display: flex !important;
    flex: 0 0 auto !important;
    float: none !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

html body nav.custom-navbar .top-nav > li {
    display: flex !important;
    align-items: center !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Remove old fake spacer items. */
html body nav.custom-navbar .top-nav > li > a[data-original-title="Stats"] {
    display: none !important;
}

/* Base navbar control. */
html body nav.custom-navbar .top-nav > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: var(--simas-nav-chip-height) !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    background: rgba(255, 255, 255, .08) !important;
    color: var(--simas-nav-on-primary) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: var(--simas-nav-radius) !important;
    box-shadow: none !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    transition: background-color .16s ease,
                border-color .16s ease,
                box-shadow .16s ease,
                transform .16s ease !important;
}

html body nav.custom-navbar .top-nav > li > a:hover,
html body nav.custom-navbar .top-nav > li > a:focus,
html body nav.custom-navbar .top-nav > li.open > a,
html body nav.custom-navbar .top-nav > li.open > a:hover,
html body nav.custom-navbar .top-nav > li.open > a:focus {
    background: var(--simas-nav-primary-dark) !important;
    color: var(--simas-nav-on-primary) !important;
    border-color: rgba(255, 255, 255, .28) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .13) !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

html body nav.custom-navbar .top-nav > li > a .glyphicon,
html body nav.custom-navbar .top-nav > li > a .fa {
    color: inherit !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

html body nav.custom-navbar .top-nav > li > a .caret {
    margin-left: 2px !important;
    color: inherit !important;
    border-top-color: currentColor !important;
    border-bottom-color: currentColor !important;
}

/* --------------------------------------------------------------------------
   5. Float and Collection status chips
   -------------------------------------------------------------------------- */
html body nav.custom-navbar .top-nav > li > a.alert {
    min-height: var(--simas-nav-chip-height) !important;
    margin: 0 !important;
    padding: 6px 9px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: var(--simas-nav-radius) !important;
    box-shadow: var(--simas-nav-chip-shadow) !important;
    font-size: 13.5px !important;
    line-height: 1.15 !important;
    opacity: 1 !important;
}

html body nav.custom-navbar .top-nav > li > a.alert-success {
    background: var(--simas-nav-success-soft) !important;
    color: var(--simas-nav-success) !important;
    border-color: var(--simas-nav-success) !important;
}

html body nav.custom-navbar .top-nav > li > a.alert-warning {
    background: var(--simas-nav-warning-soft) !important;
    color: #744C00 !important;
    border-color: var(--simas-nav-warning) !important;
}

html body nav.custom-navbar .top-nav > li > a.alert-danger {
    background: var(--simas-nav-danger-soft) !important;
    color: var(--simas-nav-danger) !important;
    border-color: var(--simas-nav-danger) !important;
}

html body nav.custom-navbar .top-nav > li > a.alert-info {
    background: var(--simas-nav-info-soft) !important;
    color: var(--simas-nav-info) !important;
    border-color: var(--simas-nav-info) !important;
}

/* Override old inline label colours. */
html body nav.custom-navbar .top-nav > li > a.alert > b[style],
html body nav.custom-navbar .top-nav > li > a.alert > span[style] {
    color: inherit !important;
    opacity: 1 !important;
}

html body nav.custom-navbar .top-nav > li > a.alert > b {
    color: inherit !important;
    font-size: 13.5px !important;
    font-weight: 750 !important;
}

/* Money amount badge: light surface, semantic text, easy to scan. */
html body nav.custom-navbar .top-nav > li > a.alert .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 28px !important;
    height: 29px !important;
    min-height: 29px !important;
    margin: 0 1px 0 2px !important;
    padding: 0 9px !important;
    background: rgba(255, 255, 255, .94) !important;
    color: inherit !important;
    border: 1px solid currentColor !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   6. Cashier and remaining-days chips
   -------------------------------------------------------------------------- */
html body nav.custom-navbar .top-nav > li > a[style*="#E6E7E9" i],
html body nav.custom-navbar .top-nav > li > a[style*="#e6e7e9" i] {
    background: var(--simas-nav-surface-alt) !important;
    color: var(--simas-nav-text-strong) !important;
    border-color: var(--simas-nav-border) !important;
    box-shadow: var(--simas-nav-chip-shadow) !important;
}

html body nav.custom-navbar .top-nav > li > a[style*="#E6E7E9" i] b,
html body nav.custom-navbar .top-nav > li > a[style*="#e6e7e9" i] b {
    color: var(--simas-nav-primary-dark) !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
}

/* --------------------------------------------------------------------------
   7. SMS chip
   -------------------------------------------------------------------------- */
html body nav.custom-navbar .top-nav > li > a > .alert {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: var(--simas-nav-chip-height) !important;
    margin: -7px -10px !important;
    padding: 7px 10px !important;
    border-radius: var(--simas-nav-radius) !important;
    box-shadow: var(--simas-nav-chip-shadow) !important;
}

html body nav.custom-navbar .top-nav > li > a > .alert *,
html body nav.custom-navbar .top-nav > li > a > .alert span[style],
html body nav.custom-navbar .top-nav > li > a > .alert b[style] {
    color: inherit !important;
}

/* --------------------------------------------------------------------------
   8. Profile, search and home
   -------------------------------------------------------------------------- */
html body nav.custom-navbar .top-nav > li.dropdown > a[title] {
    min-height: 52px !important;
    padding: 6px 10px !important;
    background: rgba(255, 255, 255, .08) !important;
    color: var(--simas-nav-on-primary) !important;
    line-height: 1.16 !important;
}

html body nav.custom-navbar .top-nav > li.dropdown > a[title] > b[style*="red" i] {
    margin-left: 3px !important;
    color: var(--simas-nav-accent) !important;
    font-weight: 800 !important;
}

html body nav.custom-navbar .top-nav > li.dropdown > a[title] > span[style*="#ff6666" i] {
    color: rgba(255, 255, 255, .88) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
}

/* Search is not an anchor directly under LI in the old markup. */
html body nav.custom-navbar .top-nav > li > .glyphicon-search {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: var(--simas-nav-chip-height) !important;
    padding: 7px 10px !important;
    background: rgba(255, 255, 255, .08) !important;
    color: var(--simas-nav-on-primary) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: var(--simas-nav-radius) !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

html body nav.custom-navbar .top-nav > li > .glyphicon-search a,
html body nav.custom-navbar .top-nav > li > .glyphicon-search a span[style] {
    color: var(--simas-nav-on-primary) !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Home button. */
html body nav.custom-navbar .top-nav > li > a[href*="administrator_page.jsp"] {
    width: 44px !important;
    min-width: 44px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: rgba(255, 255, 255, .10) !important;
}

html body nav.custom-navbar .top-nav > li > a[href*="administrator_page.jsp"] .glyphicon-home {
    font-size: 18px !important;
}

html body nav.custom-navbar .top-nav > li > a[href*="administrator_page.jsp"] .fa-angle-down {
    display: none !important;
}

/* --------------------------------------------------------------------------
   9. Notification / small numeric badges in navbar
   -------------------------------------------------------------------------- */
html body nav.custom-navbar .top-nav .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 27px !important;
    height: 27px !important;
    min-height: 27px !important;
    margin: 0 1px 0 3px !important;
    padding: 0 8px !important;
    background: rgba(255, 255, 255, .94) !important;
    color: var(--simas-nav-primary-dark) !important;
    border: 1px solid rgba(255, 255, 255, .90) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: none !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* Restore semantic colour for badges inside Float/Collection chips. */
html body nav.custom-navbar .top-nav > li > a.alert-success .badge {
    color: var(--simas-nav-success) !important;
    border-color: rgba(25, 135, 84, .42) !important;
}

html body nav.custom-navbar .top-nav > li > a.alert-warning .badge {
    color: #744C00 !important;
    border-color: rgba(217, 144, 0, .48) !important;
}

html body nav.custom-navbar .top-nav > li > a.alert-danger .badge {
    color: var(--simas-nav-danger) !important;
    border-color: rgba(199, 53, 53, .42) !important;
}

/* --------------------------------------------------------------------------
   10. Ordinary approval counters outside navbar
   -------------------------------------------------------------------------- */
html body .panel-body li > a > .badge,
html body .sidebar li > a > .badge,
html body .side-nav li > a > .badge,
html body .dropdown-menu li > a > .badge,
html body ul:not(.top-nav) li > a > .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    width: auto !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    margin: -1px 0 -1px 6px !important;
    padding: 0 6px !important;
    background: var(--simas-primary-soft, #E7F1F9) !important;
    color: var(--simas-primary-dark, #075187) !important;
    border: 1px solid var(--simas-primary-light, #5A9FD2) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: none !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   11. Dropdown menus
   -------------------------------------------------------------------------- */
html body nav.custom-navbar .dropdown-menu {
    min-width: 230px !important;
    margin-top: 8px !important;
    padding: 7px !important;
    background: var(--simas-nav-surface) !important;
    color: var(--simas-nav-text) !important;
    border: 1px solid var(--simas-nav-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .20) !important;
}

html body nav.custom-navbar .dropdown-menu > li {
    padding: 0 !important;
    list-style: none !important;
}

html body nav.custom-navbar .dropdown-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    background: transparent !important;
    color: var(--simas-nav-text) !important;
    border-radius: 7px !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    white-space: normal !important;
}

html body nav.custom-navbar .dropdown-menu > li > a:hover,
html body nav.custom-navbar .dropdown-menu > li > a:focus,
html body nav.custom-navbar .dropdown-menu > .active > a {
    background: var(--simas-primary-soft, #E7F1F9) !important;
    color: var(--simas-nav-primary-dark) !important;
}

html body nav.custom-navbar .dropdown-menu > li > a *,
html body nav.custom-navbar .dropdown-menu > li > a span[style],
html body nav.custom-navbar .dropdown-menu > li > a b[style] {
    color: inherit !important;
}

html body nav.custom-navbar .dropdown-menu .divider {
    height: 1px !important;
    margin: 6px 4px !important;
    background: var(--simas-nav-border) !important;
}

/* --------------------------------------------------------------------------
   12. Remove unreadable legacy inline colours from the navbar
   -------------------------------------------------------------------------- */
html body nav.custom-navbar [style*="color:black" i],
html body nav.custom-navbar [style*="color: black" i],
html body nav.custom-navbar [style*="color:blue" i],
html body nav.custom-navbar [style*="color: blue" i] {
    color: var(--simas-nav-on-primary) !important;
}

html body nav.custom-navbar [style*="color:red" i],
html body nav.custom-navbar [style*="color: red" i] {
    color: var(--simas-nav-accent) !important;
}

/* Semantic chips must keep semantic colours. */
html body nav.custom-navbar a.alert-success,
html body nav.custom-navbar a.alert-success > b,
html body nav.custom-navbar a.alert-success > span {
    color: var(--simas-nav-success) !important;
}

html body nav.custom-navbar a.alert-warning,
html body nav.custom-navbar a.alert-warning > b,
html body nav.custom-navbar a.alert-warning > span {
    color: #744C00 !important;
}

html body nav.custom-navbar a.alert-danger,
html body nav.custom-navbar a.alert-danger > b,
html body nav.custom-navbar a.alert-danger > span {
    color: var(--simas-nav-danger) !important;
}

/* Amount badges always preserve their own readable colour. */
html body nav.custom-navbar a.alert-success .badge {
    color: var(--simas-nav-success) !important;
}

html body nav.custom-navbar a.alert-warning .badge {
    color: #744C00 !important;
}

html body nav.custom-navbar a.alert-danger .badge {
    color: var(--simas-nav-danger) !important;
}

/* --------------------------------------------------------------------------
   13. Responsive navbar
   -------------------------------------------------------------------------- */
@media (max-width: 1399px) and (min-width: 992px) {
    html body nav.navbar.navbar-inverse.custom-navbar > .container-fluid {
        grid-template-columns: minmax(330px, 390px) minmax(0, 1fr) !important;
        column-gap: 14px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    html body nav.custom-navbar .navbar-brand td > div:first-child {
        max-width: 275px !important;
        font-size: 16px !important;
    }

    html body nav.custom-navbar .top-nav > li > a,
    html body nav.custom-navbar .top-nav > li > .glyphicon-search {
        min-height: 41px !important;
        padding: 6px 8px !important;
        font-size: 12.5px !important;
    }

    html body nav.custom-navbar .top-nav .badge {
        height: 25px !important;
        min-height: 25px !important;
        padding: 0 7px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 991px) {
    html body nav.navbar.navbar-inverse.custom-navbar {
        min-height: 0 !important;
        border-radius: 0 0 6px 6px !important;
    }

    html body nav.navbar.navbar-inverse.custom-navbar > .container-fluid {
        display: block !important;
        min-height: 0 !important;
        padding: 10px 14px !important;
    }

    html body nav.custom-navbar .navbar-header {
        width: 100% !important;
        min-height: 74px !important;
    }

    html body nav.custom-navbar .navbar-brand {
        width: calc(100% - 58px) !important;
        min-height: 72px !important;
    }

    html body nav.custom-navbar .navbar-brand img {
        width: 62px !important;
        max-width: 62px !important;
        height: 62px !important;
    }

    html body nav.custom-navbar .navbar-toggle {
        margin-top: 17px !important;
        background: var(--simas-nav-primary-dark) !important;
        border-color: rgba(255, 255, 255, .40) !important;
        border-radius: 7px !important;
    }

    html body nav.custom-navbar .navbar-toggle .icon-bar {
        background: var(--simas-nav-on-primary) !important;
    }

    html body nav.custom-navbar .navbar-collapse {
        display: none !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 8px 0 0 !important;
        padding: 9px 0 0 !important;
        border-top: 1px solid rgba(255, 255, 255, .22) !important;
    }

    html body nav.custom-navbar .navbar-collapse.in {
        display: flex !important;
    }

    html body nav.custom-navbar .navbar-collapse > ul.top-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    html body nav.custom-navbar .top-nav > li,
    html body nav.custom-navbar .top-nav > li > a,
    html body nav.custom-navbar .top-nav > li > .glyphicon-search {
        width: 100% !important;
    }

    html body nav.custom-navbar .top-nav > li > a,
    html body nav.custom-navbar .top-nav > li > .glyphicon-search {
        justify-content: flex-start !important;
        min-height: 41px !important;
        white-space: normal !important;
    }

    html body nav.custom-navbar .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin: 5px 0 !important;
        box-shadow: none !important;
    }
}

@media (max-width: 575px) {
    html body nav.custom-navbar .navbar-brand td > div:first-child {
        max-width: 205px !important;
        font-size: 14px !important;
    }

    html body nav.custom-navbar .navbar-brand td > div[title*="SACCOS Information"] {
        font-size: 12px !important;
    }

    html body nav.custom-navbar .navbar-brand td > div[title*="Umeingia"] {
        display: none !important;
    }

    html body nav.custom-navbar .navbar-brand img {
        width: 52px !important;
        max-width: 52px !important;
        height: 52px !important;
    }

    html body nav.custom-navbar .navbar-brand a[title="LOAN CALCULATOR"] {
        min-height: 24px !important;
        padding: 3px 8px !important;
        font-size: 11.5px !important;
    }
}

/* ==========================================================================
   SIMAS NAVBAR V7 — LARGE-SCREEN STRUCTURE RESTORATION
   --------------------------------------------------------------------------
   Designed specifically for the existing Bootstrap 3 navbar:
       <nav class="navbar navbar-inverse custom-navbar">
   This block MUST remain the final block in the stylesheet.
   It restores the original large-screen structure while retaining the
   configurable SIMAS client theme colours.
   ========================================================================== */

:root {
    --simas-navbar-bg: var(--simas-primary, #0B67A9);
    --simas-navbar-bg-hover: var(--simas-primary-dark, #075187);
    --simas-navbar-bg-active: var(--simas-primary-darker, #053B63);
    --simas-navbar-fg: var(--simas-on-primary, #FFFFFF);

    --simas-navbar-surface: var(--simas-surface, #FFFFFF);
    --simas-navbar-surface-alt: var(--simas-surface-alt, #F4F7FB);
    --simas-navbar-border: var(--simas-border, #CED8E4);
    --simas-navbar-text: var(--simas-text, #172033);
    --simas-navbar-text-strong: var(--simas-text-strong, #0F172A);

    --simas-navbar-accent: var(--simas-accent, #F2B400);
    --simas-navbar-on-accent: var(--simas-on-accent, #182033);

    --simas-navbar-success: var(--simas-success, #198754);
    --simas-navbar-success-soft: var(--simas-success-soft, #E9F7EF);
    --simas-navbar-warning: var(--simas-warning, #D99000);
    --simas-navbar-warning-soft: var(--simas-warning-soft, #FFF4D6);
    --simas-navbar-danger: var(--simas-danger, #C73535);
    --simas-navbar-danger-soft: var(--simas-danger-soft, #FDEBEC);
    --simas-navbar-info: var(--simas-info, #087EA4);
    --simas-navbar-info-soft: var(--simas-info-soft, #E7F5FA);

    --simas-navbar-radius: 8px;
    --simas-navbar-control-height: 42px;
    --simas-navbar-shadow: 0 4px 14px rgba(15, 23, 42, .13);
    --simas-navbar-control-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}

/* --------------------------------------------------------------------------
   1. Navbar shell
   -------------------------------------------------------------------------- */
html body nav.navbar.navbar-inverse.custom-navbar {
    position: relative !important;
    z-index: 1030 !important;
    min-height: 108px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    background: var(--simas-navbar-bg) !important;
    background-image: none !important;
    color: var(--simas-navbar-fg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--simas-navbar-bg-hover) !important;
    border-radius: 0 0 7px 7px !important;
    box-shadow: var(--simas-navbar-shadow) !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

/*
 * V6 used CSS Grid on this element. Restore a normal flex container so that
 * the brand remains at the far left and the controls use the remaining width.
 */
html body nav.navbar.navbar-inverse.custom-navbar > .container-fluid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
    min-height: 108px !important;
    margin: 0 !important;
    padding: 12px 20px !important;
}

/* --------------------------------------------------------------------------
   2. Brand stays at the far left
   -------------------------------------------------------------------------- */
html body nav.custom-navbar .navbar-header {
    display: block !important;
    flex: 0 0 420px !important;
    float: none !important;
    width: 420px !important;
    min-width: 420px !important;
    max-width: 420px !important;
    min-height: 80px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body nav.custom-navbar .navbar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 80px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--simas-navbar-fg) !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

html body nav.custom-navbar .navbar-brand table,
html body nav.custom-navbar .navbar-brand tbody,
html body nav.custom-navbar .navbar-brand tr,
html body nav.custom-navbar .navbar-brand td {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
    border: 0 !important;
    border-collapse: separate !important;
    box-shadow: none !important;
}

html body nav.custom-navbar .navbar-brand td {
    padding-right: 9px !important;
    vertical-align: middle !important;
}

html body nav.custom-navbar .navbar-brand img {
    display: block !important;
    width: 74px !important;
    max-width: 74px !important;
    height: 74px !important;
    object-fit: contain !important;
    opacity: 1 !important;
    border: 2px solid rgba(255, 255, 255, .34) !important;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .16) !important;
}

html body nav.custom-navbar .zoom_img img,
html body nav.custom-navbar .zoom_img img:hover {
    transform: none !important;
    transition: none !important;
}

/* Client name. */
html body nav.custom-navbar .navbar-brand td > div:first-child {
    max-width: 315px !important;
    margin: 0 0 2px !important;
    overflow: hidden !important;
    color: var(--simas-navbar-fg) !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* SIMAS label. */
html body nav.custom-navbar .navbar-brand td > div[title*="SACCOS Information"] {
    margin: 0 0 3px !important;
    color: var(--simas-navbar-accent) !important;
    font-family: Consolas, "Courier New", monospace !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

/* Branch indicator. */
html body nav.custom-navbar .navbar-brand td > div[title*="Umeingia"] {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 305px !important;
    min-height: 22px !important;
    margin: 1px 0 3px !important;
    padding: 3px 8px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, .94) !important;
    color: var(--simas-navbar-bg-hover) !important;
    border: 1px solid rgba(255, 255, 255, .76) !important;
    border-radius: 999px !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body nav.custom-navbar .navbar-brand td > div[title*="Umeingia"] *,
html body nav.custom-navbar .navbar-brand td > div[title*="Umeingia"] span[style] {
    color: inherit !important;
}

html body nav.custom-navbar .blinking {
    animation: none !important;
    color: var(--simas-navbar-bg-hover) !important;
    opacity: 1 !important;
}

/* Loan calculator. */
html body nav.custom-navbar .navbar-brand a[title="LOAN CALCULATOR"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 4px 9px !important;
    background: var(--simas-navbar-accent) !important;
    color: var(--simas-navbar-on-accent) !important;
    border: 1px solid var(--simas-navbar-accent) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .11) !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   3. Desktop controls remain in one horizontal row
   -------------------------------------------------------------------------- */
html body nav.custom-navbar .navbar-collapse {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row-reverse !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 80px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body nav.custom-navbar .navbar-collapse > ul.top-nav {
    display: flex !important;
    flex: 0 0 auto !important;
    float: none !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

html body nav.custom-navbar .top-nav > li {
    display: flex !important;
    flex: 0 0 auto !important;
    float: none !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Remove legacy empty spacer entries. */
html body nav.custom-navbar .top-nav > li > a[data-original-title="Stats"] {
    display: none !important;
}

/* Compact, readable base control. */
html body nav.custom-navbar .top-nav > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: var(--simas-navbar-control-height) !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    background: rgba(255, 255, 255, .08) !important;
    color: var(--simas-navbar-fg) !important;
    border: 1px solid rgba(255, 255, 255, .17) !important;
    border-radius: var(--simas-navbar-radius) !important;
    box-shadow: none !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
    line-height: 1.15 !important;
    text-align: left !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    transition: background-color .16s ease,
                border-color .16s ease,
                box-shadow .16s ease,
                transform .16s ease !important;
}

html body nav.custom-navbar .top-nav > li > a:hover,
html body nav.custom-navbar .top-nav > li > a:focus,
html body nav.custom-navbar .top-nav > li.open > a,
html body nav.custom-navbar .top-nav > li.open > a:hover,
html body nav.custom-navbar .top-nav > li.open > a:focus {
    background: var(--simas-navbar-bg-hover) !important;
    color: var(--simas-navbar-fg) !important;
    border-color: rgba(255, 255, 255, .27) !important;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .12) !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

html body nav.custom-navbar .top-nav > li > a .glyphicon,
html body nav.custom-navbar .top-nav > li > a .fa {
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

html body nav.custom-navbar .top-nav > li > a .caret {
    margin-left: 1px !important;
    color: inherit !important;
    border-top-color: currentColor !important;
    border-bottom-color: currentColor !important;
}

/* --------------------------------------------------------------------------
   4. Float and Collection
   -------------------------------------------------------------------------- */
html body nav.custom-navbar .top-nav > li > a.alert {
    min-height: var(--simas-navbar-control-height) !important;
    margin: 0 !important;
    padding: 5px 7px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: var(--simas-navbar-radius) !important;
    box-shadow: var(--simas-navbar-control-shadow) !important;
    font-size: 12.5px !important;
    line-height: 1.1 !important;
    opacity: 1 !important;
}

html body nav.custom-navbar .top-nav > li > a.alert-success {
    background: var(--simas-navbar-success-soft) !important;
    color: var(--simas-navbar-success) !important;
    border-color: rgba(25, 135, 84, .65) !important;
}

html body nav.custom-navbar .top-nav > li > a.alert-warning {
    background: var(--simas-navbar-warning-soft) !important;
    color: #744C00 !important;
    border-color: rgba(217, 144, 0, .72) !important;
}

html body nav.custom-navbar .top-nav > li > a.alert-danger {
    background: var(--simas-navbar-danger-soft) !important;
    color: var(--simas-navbar-danger) !important;
    border-color: rgba(199, 53, 53, .65) !important;
}

html body nav.custom-navbar .top-nav > li > a.alert > b,
html body nav.custom-navbar .top-nav > li > a.alert > b[style],
html body nav.custom-navbar .top-nav > li > a.alert > span[style] {
    color: inherit !important;
    font-size: 12.5px !important;
    font-weight: 750 !important;
    opacity: 1 !important;
}

/*
 * Monetary values are not notification bubbles. Use a compact rectangular
 * pill, with no oversized blue circle.
 */
html body nav.custom-navbar .top-nav > li > a.alert .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 27px !important;
    min-height: 27px !important;
    margin: 0 1px !important;
    padding: 0 8px !important;
    background: rgba(255, 255, 255, .95) !important;
    color: inherit !important;
    border: 1px solid currentColor !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: right !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   5. Cashier and remaining days
   -------------------------------------------------------------------------- */
html body nav.custom-navbar .top-nav > li > a[style*="#E6E7E9" i],
html body nav.custom-navbar .top-nav > li > a[style*="#e6e7e9" i] {
    background: var(--simas-navbar-surface-alt) !important;
    color: var(--simas-navbar-text-strong) !important;
    border-color: var(--simas-navbar-border) !important;
    box-shadow: var(--simas-navbar-control-shadow) !important;
}

html body nav.custom-navbar .top-nav > li > a[style*="#E6E7E9" i] b,
html body nav.custom-navbar .top-nav > li > a[style*="#e6e7e9" i] b {
    color: var(--simas-navbar-bg-hover) !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
}

/* --------------------------------------------------------------------------
   6. SMS
   -------------------------------------------------------------------------- */
html body nav.custom-navbar .top-nav > li > a > .alert {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: var(--simas-navbar-control-height) !important;
    margin: -6px -8px !important;
    padding: 6px 8px !important;
    border-radius: var(--simas-navbar-radius) !important;
    box-shadow: var(--simas-navbar-control-shadow) !important;
}

html body nav.custom-navbar .top-nav > li > a > .alert *,
html body nav.custom-navbar .top-nav > li > a > .alert span[style],
html body nav.custom-navbar .top-nav > li > a > .alert b[style] {
    color: inherit !important;
}

/* --------------------------------------------------------------------------
   7. Profile, search and home
   -------------------------------------------------------------------------- */
html body nav.custom-navbar .top-nav > li.dropdown > a[title] {
    min-height: 46px !important;
    padding: 5px 8px !important;
    background: rgba(255, 255, 255, .08) !important;
    color: var(--simas-navbar-fg) !important;
    line-height: 1.12 !important;
}

html body nav.custom-navbar .top-nav > li.dropdown > a[title] > b[style*="red" i] {
    margin-left: 2px !important;
    color: var(--simas-navbar-accent) !important;
    font-weight: 800 !important;
}

html body nav.custom-navbar .top-nav > li.dropdown > a[title] > span[style*="#ff6666" i] {
    color: rgba(255, 255, 255, .88) !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
}

/* Search markup uses a span as the direct child of LI. */
html body nav.custom-navbar .top-nav > li > .glyphicon-search {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: var(--simas-navbar-control-height) !important;
    padding: 6px 8px !important;
    background: rgba(255, 255, 255, .08) !important;
    color: var(--simas-navbar-fg) !important;
    border: 1px solid rgba(255, 255, 255, .17) !important;
    border-radius: var(--simas-navbar-radius) !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

html body nav.custom-navbar .top-nav > li > .glyphicon-search a,
html body nav.custom-navbar .top-nav > li > .glyphicon-search a span[style] {
    color: var(--simas-navbar-fg) !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
    text-decoration: none !important;
}

html body nav.custom-navbar .top-nav > li > a[href*="administrator_page.jsp"] {
    width: 40px !important;
    min-width: 40px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: rgba(255, 255, 255, .10) !important;
}

html body nav.custom-navbar .top-nav > li > a[href*="administrator_page.jsp"] .glyphicon-home {
    font-size: 17px !important;
}

html body nav.custom-navbar .top-nav > li > a[href*="administrator_page.jsp"] .fa-angle-down {
    display: none !important;
}

/* --------------------------------------------------------------------------
   8. Human-friendly badges
   -------------------------------------------------------------------------- */
/* Navbar notification count. */
html body nav.custom-navbar .top-nav .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0 1px 0 3px !important;
    padding: 0 6px !important;
    background: rgba(255, 255, 255, .95) !important;
    color: var(--simas-navbar-bg-hover) !important;
    border: 1px solid rgba(255, 255, 255, .92) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: none !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* Semantic amount colours. */
html body nav.custom-navbar .top-nav > li > a.alert-success .badge {
    color: var(--simas-navbar-success) !important;
    border-color: rgba(25, 135, 84, .40) !important;
}

html body nav.custom-navbar .top-nav > li > a.alert-warning .badge {
    color: #744C00 !important;
    border-color: rgba(217, 144, 0, .45) !important;
}

html body nav.custom-navbar .top-nav > li > a.alert-danger .badge {
    color: var(--simas-navbar-danger) !important;
    border-color: rgba(199, 53, 53, .40) !important;
}

/* Approval counters outside the navbar. */
html body .panel-body li > a > .badge,
html body .sidebar li > a > .badge,
html body .side-nav li > a > .badge,
html body .dropdown-menu li > a > .badge,
html body ul:not(.top-nav) li > a > .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    width: auto !important;
    min-width: 22px !important;
    height: 21px !important;
    min-height: 21px !important;
    margin: -1px 0 -1px 6px !important;
    padding: 0 6px !important;
    background: var(--simas-primary-soft, #E7F1F9) !important;
    color: var(--simas-navbar-bg-hover) !important;
    border: 1px solid var(--simas-primary-light, #5A9FD2) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: none !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   9. Dropdowns
   -------------------------------------------------------------------------- */
html body nav.custom-navbar .dropdown-menu {
    min-width: 225px !important;
    margin-top: 7px !important;
    padding: 6px !important;
    background: var(--simas-navbar-surface) !important;
    color: var(--simas-navbar-text) !important;
    border: 1px solid var(--simas-navbar-border) !important;
    border-radius: 9px !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .19) !important;
}

html body nav.custom-navbar .dropdown-menu > li {
    padding: 0 !important;
    list-style: none !important;
}

html body nav.custom-navbar .dropdown-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 36px !important;
    padding: 7px 9px !important;
    background: transparent !important;
    color: var(--simas-navbar-text) !important;
    border-radius: 6px !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    white-space: normal !important;
}

html body nav.custom-navbar .dropdown-menu > li > a:hover,
html body nav.custom-navbar .dropdown-menu > li > a:focus,
html body nav.custom-navbar .dropdown-menu > .active > a {
    background: var(--simas-primary-soft, #E7F1F9) !important;
    color: var(--simas-navbar-bg-hover) !important;
}

html body nav.custom-navbar .dropdown-menu > li > a *,
html body nav.custom-navbar .dropdown-menu > li > a span[style],
html body nav.custom-navbar .dropdown-menu > li > a b[style] {
    color: inherit !important;
}

/* --------------------------------------------------------------------------
   10. Legacy inline colours
   -------------------------------------------------------------------------- */
html body nav.custom-navbar [style*="color:black" i],
html body nav.custom-navbar [style*="color: black" i],
html body nav.custom-navbar [style*="color:blue" i],
html body nav.custom-navbar [style*="color: blue" i] {
    color: var(--simas-navbar-fg) !important;
}

html body nav.custom-navbar [style*="color:red" i],
html body nav.custom-navbar [style*="color: red" i] {
    color: var(--simas-navbar-accent) !important;
}

/* Semantic status colours override the generic inline-colour correction. */
html body nav.custom-navbar a.alert-success,
html body nav.custom-navbar a.alert-success > b,
html body nav.custom-navbar a.alert-success > span {
    color: var(--simas-navbar-success) !important;
}

html body nav.custom-navbar a.alert-warning,
html body nav.custom-navbar a.alert-warning > b,
html body nav.custom-navbar a.alert-warning > span {
    color: #744C00 !important;
}

html body nav.custom-navbar a.alert-danger,
html body nav.custom-navbar a.alert-danger > b,
html body nav.custom-navbar a.alert-danger > span {
    color: var(--simas-navbar-danger) !important;
}

/* --------------------------------------------------------------------------
   11. Wide desktop: force one row
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
    html body nav.navbar.navbar-inverse.custom-navbar {
        min-height: 108px !important;
    }

    html body nav.navbar.navbar-inverse.custom-navbar > .container-fluid {
        display: flex !important;
        flex-wrap: nowrap !important;
        min-height: 108px !important;
    }

    html body nav.custom-navbar .navbar-header {
        flex-basis: 420px !important;
        width: 420px !important;
        min-width: 420px !important;
        max-width: 420px !important;
    }

    html body nav.custom-navbar .navbar-collapse {
        display: flex !important;
        flex-direction: row-reverse !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-height: 80px !important;
        overflow: visible !important;
    }

    html body nav.custom-navbar .navbar-collapse > ul.top-nav {
        flex: 0 0 auto !important;
    }
}

/* --------------------------------------------------------------------------
   12. Medium desktop: preserve left brand, allow a controlled second line
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1599px) {
    html body nav.navbar.navbar-inverse.custom-navbar {
        min-height: 118px !important;
    }

    html body nav.navbar.navbar-inverse.custom-navbar > .container-fluid {
        display: flex !important;
        flex-wrap: nowrap !important;
        min-height: 118px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    html body nav.custom-navbar .navbar-header {
        flex: 0 0 350px !important;
        width: 350px !important;
        min-width: 350px !important;
        max-width: 350px !important;
    }

    html body nav.custom-navbar .navbar-brand td > div:first-child {
        max-width: 250px !important;
        font-size: 15.5px !important;
    }

    html body nav.custom-navbar .navbar-collapse {
        display: flex !important;
        flex-direction: row-reverse !important;
        flex-wrap: wrap !important;
        align-content: center !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        min-height: 92px !important;
    }

    html body nav.custom-navbar .top-nav > li > a,
    html body nav.custom-navbar .top-nav > li > .glyphicon-search {
        min-height: 39px !important;
        padding: 5px 7px !important;
        font-size: 12px !important;
    }

    html body nav.custom-navbar .top-nav > li > a.alert .badge {
        height: 25px !important;
        min-height: 25px !important;
        padding: 0 7px !important;
        font-size: 11.5px !important;
    }
}

/* --------------------------------------------------------------------------
   13. Tablet and mobile
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    html body nav.navbar.navbar-inverse.custom-navbar {
        min-height: 0 !important;
        border-radius: 0 0 6px 6px !important;
    }

    html body nav.navbar.navbar-inverse.custom-navbar > .container-fluid {
        display: block !important;
        min-height: 0 !important;
        padding: 10px 14px !important;
    }

    html body nav.custom-navbar .navbar-header {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 72px !important;
    }

    html body nav.custom-navbar .navbar-brand {
        width: calc(100% - 58px) !important;
        min-height: 70px !important;
    }

    html body nav.custom-navbar .navbar-brand img {
        width: 60px !important;
        max-width: 60px !important;
        height: 60px !important;
    }

    html body nav.custom-navbar .navbar-toggle {
        display: block !important;
        margin-top: 15px !important;
        background: var(--simas-navbar-bg-hover) !important;
        border-color: rgba(255, 255, 255, .38) !important;
        border-radius: 7px !important;
    }

    html body nav.custom-navbar .navbar-toggle .icon-bar {
        background: var(--simas-navbar-fg) !important;
    }

    html body nav.custom-navbar .navbar-collapse {
        display: none !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 8px 0 0 !important;
        padding: 9px 0 0 !important;
        border-top: 1px solid rgba(255, 255, 255, .21) !important;
    }

    html body nav.custom-navbar .navbar-collapse.in {
        display: flex !important;
    }

    html body nav.custom-navbar .navbar-collapse > ul.top-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    html body nav.custom-navbar .top-nav > li,
    html body nav.custom-navbar .top-nav > li > a,
    html body nav.custom-navbar .top-nav > li > .glyphicon-search {
        width: 100% !important;
    }

    html body nav.custom-navbar .top-nav > li > a,
    html body nav.custom-navbar .top-nav > li > .glyphicon-search {
        justify-content: flex-start !important;
        min-height: 40px !important;
        white-space: normal !important;
    }

    html body nav.custom-navbar .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin: 5px 0 !important;
        box-shadow: none !important;
    }
}

@media (max-width: 575px) {
    html body nav.custom-navbar .navbar-brand td > div:first-child {
        max-width: 195px !important;
        font-size: 14px !important;
    }

    html body nav.custom-navbar .navbar-brand td > div[title*="SACCOS Information"] {
        font-size: 11.5px !important;
    }

    html body nav.custom-navbar .navbar-brand td > div[title*="Umeingia"] {
        display: none !important;
    }

    html body nav.custom-navbar .navbar-brand img {
        width: 50px !important;
        max-width: 50px !important;
        height: 50px !important;
    }

    html body nav.custom-navbar .navbar-brand a[title="LOAN CALCULATOR"] {
        min-height: 23px !important;
        padding: 3px 7px !important;
        font-size: 11px !important;
    }
}

/* ==========================================================================
   SIMAS MEMBER NAVBAR V8
   --------------------------------------------------------------------------
   Required markup:
       <nav class="navbar navbar-inverse member-navbar">
   Keep this block LAST in the global stylesheet.
   ========================================================================== */

:root {
    --member-nav-bg: var(--simas-primary, #0B67A9);
    --member-nav-bg-hover: var(--simas-primary-dark, #075187);
    --member-nav-bg-active: var(--simas-primary-darker, #053B63);
    --member-nav-fg: var(--simas-on-primary, #FFFFFF);

    --member-nav-surface: var(--simas-surface, #FFFFFF);
    --member-nav-surface-alt: var(--simas-surface-alt, #F4F7FB);
    --member-nav-border: var(--simas-border, #CED8E4);
    --member-nav-text: var(--simas-text, #172033);
    --member-nav-text-strong: var(--simas-text-strong, #0F172A);
    --member-nav-muted: var(--simas-muted, #607086);

    --member-nav-accent: var(--simas-accent, #F2B400);
    --member-nav-on-accent: var(--simas-on-accent, #182033);

    --member-nav-radius: 9px;
    --member-nav-control-height: 44px;
    --member-nav-shadow: 0 4px 14px rgba(15, 23, 42, .13);
    --member-nav-control-shadow: 0 2px 7px rgba(15, 23, 42, .09);
}

/* --------------------------------------------------------------------------
   1. Main shell
   -------------------------------------------------------------------------- */
html body nav.navbar.navbar-inverse.member-navbar {
    position: relative !important;
    z-index: 1030 !important;
    min-height: 96px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    background: var(--member-nav-bg) !important;
    background-image: none !important;
    color: var(--member-nav-fg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--member-nav-bg-hover) !important;
    border-radius: 0 0 7px 7px !important;
    box-shadow: var(--member-nav-shadow) !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

html body nav.member-navbar > .container-fluid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    width: 100% !important;
    min-height: 96px !important;
    margin: 0 !important;
    padding: 11px 22px !important;
}

/* --------------------------------------------------------------------------
   2. Brand
   -------------------------------------------------------------------------- */
html body nav.member-navbar .navbar-header {
    display: block !important;
    flex: 0 0 610px !important;
    float: none !important;
    width: 610px !important;
    min-width: 610px !important;
    max-width: 610px !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body nav.member-navbar .navbar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--member-nav-fg) !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

html body nav.member-navbar .navbar-brand table,
html body nav.member-navbar .navbar-brand tbody,
html body nav.member-navbar .navbar-brand tr,
html body nav.member-navbar .navbar-brand td {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
    border: 0 !important;
    border-collapse: separate !important;
    box-shadow: none !important;
}

html body nav.member-navbar .navbar-brand td {
    padding-right: 11px !important;
    vertical-align: middle !important;
}

html body nav.member-navbar .navbar-brand img {
    display: block !important;
    width: 72px !important;
    max-width: 72px !important;
    height: 72px !important;
    object-fit: contain !important;
    opacity: 1 !important;
    border: 2px solid rgba(255, 255, 255, .34) !important;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .16) !important;
}

html body nav.member-navbar .zoom_img img,
html body nav.member-navbar .zoom_img img:hover {
    transform: none !important;
    transition: none !important;
}

/* Client name. */
html body nav.member-navbar .navbar-brand td > div:first-child {
    max-width: 490px !important;
    margin: 0 0 3px !important;
    overflow: hidden !important;
    color: var(--member-nav-fg) !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.16 !important;
    letter-spacing: -.015em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* System description. */
html body nav.member-navbar .navbar-brand td > div:nth-child(2) {
    max-width: 500px !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: rgba(255, 255, 255, .90) !important;
    font-family: Consolas, "Courier New", monospace !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   3. Right-side member controls
   -------------------------------------------------------------------------- */
html body nav.member-navbar .navbar-collapse {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row-reverse !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body nav.member-navbar .navbar-collapse > ul.top-nav {
    display: flex !important;
    flex: 0 0 auto !important;
    float: none !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/*
 * The final UL contains Profile and Wallet.
 * Reverse that UL so Wallet appears first, then Profile, then Home.
 */
html body nav.member-navbar .navbar-collapse > ul.top-nav:last-of-type {
    flex-direction: row-reverse !important;
}

html body nav.member-navbar .top-nav > li {
    display: flex !important;
    flex: 0 0 auto !important;
    float: none !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Remove the legacy fake Stats spacer. */
html body nav.member-navbar .top-nav > li > a[data-original-title="Stats"] {
    display: none !important;
}

/* Base control. */
html body nav.member-navbar .top-nav > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: var(--member-nav-control-height) !important;
    margin: 0 !important;
    padding: 7px 11px !important;
    background: rgba(255, 255, 255, .08) !important;
    color: var(--member-nav-fg) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: var(--member-nav-radius) !important;
    box-shadow: none !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    transition: background-color .16s ease,
                border-color .16s ease,
                box-shadow .16s ease,
                transform .16s ease !important;
}

html body nav.member-navbar .top-nav > li > a:hover,
html body nav.member-navbar .top-nav > li > a:focus,
html body nav.member-navbar .top-nav > li.open > a,
html body nav.member-navbar .top-nav > li.open > a:hover,
html body nav.member-navbar .top-nav > li.open > a:focus {
    background: var(--member-nav-bg-hover) !important;
    color: var(--member-nav-fg) !important;
    border-color: rgba(255, 255, 255, .29) !important;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .12) !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

html body nav.member-navbar .top-nav > li > a .glyphicon,
html body nav.member-navbar .top-nav > li > a .fa,
html body nav.member-navbar .top-nav > li > a .bi {
    color: inherit !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

html body nav.member-navbar .top-nav > li > a .caret {
    margin-left: 2px !important;
    color: inherit !important;
    border-top-color: currentColor !important;
    border-bottom-color: currentColor !important;
}

/* --------------------------------------------------------------------------
   4. Wallet control
   -------------------------------------------------------------------------- */
html body nav.member-navbar a[href*="electronic_wallet/services_ac.jsp"] {
    min-height: 48px !important;
    padding: 7px 10px !important;
    background: var(--member-nav-surface) !important;
    color: var(--member-nav-text-strong) !important;
    border-color: var(--member-nav-border) !important;
    box-shadow: var(--member-nav-control-shadow) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

html body nav.member-navbar a[href*="electronic_wallet/services_ac.jsp"]:hover,
html body nav.member-navbar a[href*="electronic_wallet/services_ac.jsp"]:focus {
    background: var(--member-nav-surface-alt) !important;
    color: var(--member-nav-bg-hover) !important;
    border-color: var(--simas-primary-light, #5A9FD2) !important;
}

/* Override old inline green. */
html body nav.member-navbar a[href*="electronic_wallet/services_ac.jsp"][style],
html body nav.member-navbar a[href*="electronic_wallet/services_ac.jsp"] * {
    color: inherit !important;
}

/* Wallet amount should be a readable value pill, not a notification bubble. */
html body nav.member-navbar a[href*="electronic_wallet/services_ac.jsp"] .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 29px !important;
    min-height: 29px !important;
    margin: 0 0 0 4px !important;
    padding: 0 10px !important;
    background: var(--simas-primary-soft, #E7F1F9) !important;
    color: var(--member-nav-bg-hover) !important;
    border: 1px solid var(--simas-primary-light, #5A9FD2) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: right !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    opacity: 1 !important;
}

html body nav.member-navbar a[href*="electronic_wallet/services_ac.jsp"] .badge b {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* --------------------------------------------------------------------------
   5. Profile control
   -------------------------------------------------------------------------- */
html body nav.member-navbar .top-nav > li.dropdown > a[href*="reports/profile.jsp"] {
    min-height: 48px !important;
    padding: 7px 10px !important;
    background: rgba(255, 255, 255, .08) !important;
    color: var(--member-nav-fg) !important;
}

html body nav.member-navbar .top-nav > li.dropdown > a[href*="reports/profile.jsp"] > b[style*="red" i] {
    margin-left: 3px !important;
    color: var(--member-nav-accent) !important;
    font-weight: 800 !important;
}

html body nav.member-navbar .top-nav > li.dropdown > a[href*="reports/profile.jsp"] .caret {
    margin-left: 4px !important;
}

/* --------------------------------------------------------------------------
   6. Home control
   -------------------------------------------------------------------------- */
html body nav.member-navbar .top-nav > li > a[href*="member_page.jsp"] {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, .10) !important;
    color: var(--member-nav-fg) !important;
}

html body nav.member-navbar .top-nav > li > a[href*="member_page.jsp"] .glyphicon-home {
    color: inherit !important;
    font-size: 18px !important;
}

html body nav.member-navbar .top-nav > li > a[href*="member_page.jsp"] .fa-angle-down {
    display: none !important;
}

/* --------------------------------------------------------------------------
   7. Dropdown menu
   -------------------------------------------------------------------------- */
html body nav.member-navbar .dropdown-menu {
    min-width: 225px !important;
    margin-top: 7px !important;
    padding: 6px !important;
    background: var(--member-nav-surface) !important;
    color: var(--member-nav-text) !important;
    border: 1px solid var(--member-nav-border) !important;
    border-radius: 9px !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .19) !important;
}

html body nav.member-navbar .dropdown-menu > li {
    padding: 0 !important;
    list-style: none !important;
}

html body nav.member-navbar .dropdown-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 36px !important;
    padding: 7px 9px !important;
    background: transparent !important;
    color: var(--member-nav-text) !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    white-space: normal !important;
}

html body nav.member-navbar .dropdown-menu > li > a:hover,
html body nav.member-navbar .dropdown-menu > li > a:focus,
html body nav.member-navbar .dropdown-menu > .active > a {
    background: var(--simas-primary-soft, #E7F1F9) !important;
    color: var(--member-nav-bg-hover) !important;
}

html body nav.member-navbar .dropdown-menu > li > a *,
html body nav.member-navbar .dropdown-menu > li > a span[style],
html body nav.member-navbar .dropdown-menu > li > a b[style] {
    color: inherit !important;
}

html body nav.member-navbar .dropdown-menu .divider {
    height: 1px !important;
    margin: 6px 4px !important;
    background: var(--member-nav-border) !important;
}

/* Logout remains a clear danger action without Bootstrap button distortion. */
html body nav.member-navbar .dropdown-menu > li > a.btn-danger {
    background: transparent !important;
    color: var(--simas-danger, #C73535) !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
}

html body nav.member-navbar .dropdown-menu > li > a.btn-danger:hover,
html body nav.member-navbar .dropdown-menu > li > a.btn-danger:focus {
    background: var(--simas-danger-soft, #FDEBEC) !important;
    color: var(--simas-danger, #C73535) !important;
}

/* --------------------------------------------------------------------------
   8. Legacy inline colour corrections
   -------------------------------------------------------------------------- */
html body nav.member-navbar [style*="color:black" i],
html body nav.member-navbar [style*="color: black" i] {
    color: var(--member-nav-fg) !important;
}

html body nav.member-navbar [style*="color:#a70303" i],
html body nav.member-navbar [style*="color: #a70303" i] {
    color: rgba(255, 255, 255, .90) !important;
}

html body nav.member-navbar [style*="color:red" i],
html body nav.member-navbar [style*="color: red" i] {
    color: var(--member-nav-accent) !important;
}

/* Wallet has its own readable surface colours. */
html body nav.member-navbar a[href*="electronic_wallet/services_ac.jsp"],
html body nav.member-navbar a[href*="electronic_wallet/services_ac.jsp"] * {
    color: var(--member-nav-text-strong) !important;
}

html body nav.member-navbar a[href*="electronic_wallet/services_ac.jsp"] .badge,
html body nav.member-navbar a[href*="electronic_wallet/services_ac.jsp"] .badge * {
    color: var(--member-nav-bg-hover) !important;
}

/* --------------------------------------------------------------------------
   9. Large and medium desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
    html body nav.member-navbar > .container-fluid {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    html body nav.member-navbar .navbar-header {
        flex: 0 0 610px !important;
        width: 610px !important;
        min-width: 610px !important;
        max-width: 610px !important;
    }

    html body nav.member-navbar .navbar-collapse {
        display: flex !important;
        flex-direction: row-reverse !important;
        flex-wrap: nowrap !important;
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    html body nav.member-navbar > .container-fluid {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    html body nav.member-navbar .navbar-header {
        flex: 0 0 500px !important;
        width: 500px !important;
        min-width: 500px !important;
        max-width: 500px !important;
    }

    html body nav.member-navbar .navbar-brand td > div:first-child {
        max-width: 385px !important;
        font-size: 18px !important;
    }

    html body nav.member-navbar .navbar-brand td > div:nth-child(2) {
        max-width: 395px !important;
        font-size: 12.5px !important;
    }

    html body nav.member-navbar .navbar-collapse {
        display: flex !important;
        flex-direction: row-reverse !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    html body nav.member-navbar .top-nav > li > a {
        min-height: 41px !important;
        padding: 6px 8px !important;
        font-size: 12.5px !important;
    }

    html body nav.member-navbar a[href*="electronic_wallet/services_ac.jsp"] .badge {
        height: 27px !important;
        min-height: 27px !important;
        padding: 0 8px !important;
        font-size: 12px !important;
    }
}

/* --------------------------------------------------------------------------
   10. Tablet and mobile
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    html body nav.navbar.navbar-inverse.member-navbar {
        min-height: 0 !important;
        border-radius: 0 0 6px 6px !important;
    }

    html body nav.member-navbar > .container-fluid {
        display: block !important;
        min-height: 0 !important;
        padding: 10px 14px !important;
    }

    html body nav.member-navbar .navbar-header {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 70px !important;
    }

    html body nav.member-navbar .navbar-brand {
        width: calc(100% - 58px) !important;
        min-height: 68px !important;
    }

    html body nav.member-navbar .navbar-brand img {
        width: 58px !important;
        max-width: 58px !important;
        height: 58px !important;
    }

    html body nav.member-navbar .navbar-toggle {
        display: block !important;
        margin-top: 14px !important;
        background: var(--member-nav-bg-hover) !important;
        border-color: rgba(255, 255, 255, .38) !important;
        border-radius: 7px !important;
    }

    html body nav.member-navbar .navbar-toggle .icon-bar {
        background: var(--member-nav-fg) !important;
    }

    html body nav.member-navbar .navbar-collapse {
        display: none !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 8px 0 0 !important;
        padding: 9px 0 0 !important;
        border-top: 1px solid rgba(255, 255, 255, .21) !important;
    }

    html body nav.member-navbar .navbar-collapse.in {
        display: flex !important;
    }

    html body nav.member-navbar .navbar-collapse > ul.top-nav,
    html body nav.member-navbar .navbar-collapse > ul.top-nav:last-of-type {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    html body nav.member-navbar .top-nav > li,
    html body nav.member-navbar .top-nav > li > a {
        width: 100% !important;
    }

    html body nav.member-navbar .top-nav > li > a {
        justify-content: flex-start !important;
        min-height: 40px !important;
        white-space: normal !important;
    }

    html body nav.member-navbar .top-nav > li > a[href*="member_page.jsp"] {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 10px !important;
        justify-content: flex-start !important;
    }

    html body nav.member-navbar .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin: 5px 0 !important;
        box-shadow: none !important;
    }
}

@media (max-width: 575px) {
    html body nav.member-navbar .navbar-brand td > div:first-child {
        max-width: 215px !important;
        font-size: 14px !important;
    }

    html body nav.member-navbar .navbar-brand td > div:nth-child(2) {
        max-width: 220px !important;
        font-size: 10.5px !important;
        white-space: normal !important;
    }

    html body nav.member-navbar .navbar-brand img {
        width: 49px !important;
        max-width: 49px !important;
        height: 49px !important;
    }

    html body nav.member-navbar a[href*="electronic_wallet/services_ac.jsp"] {
        flex-wrap: wrap !important;
    }
}