/**
 * CFRMS Theme Layer — 3 skins (navy/teal/maroon) x light+dark mode.
 *
 * Sits on top of AdminLTE 2 / Bootstrap 3 and restyles the chrome via
 * CSS variables. Loaded LAST so it wins over AdminLTE skins.
 *
 * Mode is driven by html[data-theme="light"|"dark"] (localStorage
 * "cfrms-theme"), skin by html[data-cf-skin="navy"|"teal"|"maroon"]
 * (localStorage "cfrms-skin"). Both applied pre-paint in header.php /
 * apps/header.php. html[data-cf-skin="X"][data-theme="Y"] rules are more
 * specific than the bare html[data-theme="Y"] navy fallback below, so
 * they only need to declare the properties that actually change per
 * skin — radius/shadow keep cascading from the navy blocks.
 *
 * No markup changes are required in module views — only variables here.
 */

/* ============================================================
   1. Variables
   ============================================================ */
:root,
html[data-theme="light"] {
    --cf-header-bg: #042C53;
    --cf-header-text: #E6F1FB;
    --cf-header-hover: #0C447C;

    --cf-sidebar-bg: #0B2440;
    --cf-sidebar-text: #B5D4F4;
    --cf-sidebar-muted: #6E93BC;
    --cf-sidebar-active-bg: #0C447C;
    --cf-sidebar-hover-bg: #093054;

    --cf-accent: #185FA5;
    --cf-accent-bright: #378ADD;
    --cf-accent-soft: #E6F1FB;

    --cf-page-bg: #F0F3F7;
    --cf-surface: #FFFFFF;
    --cf-surface-alt: #F6F8FA;
    --cf-border: #DDE3EA;
    --cf-text: #1F2933;
    --cf-text-muted: #6B7785;
    --cf-link: #185FA5;
    --cf-link-hover: #0C447C;

    --cf-input-bg: #FFFFFF;
    --cf-input-border: #C8D2DC;

    --cf-shadow: 0 1px 3px rgba(4, 44, 83, 0.08);
    --cf-radius: 8px;
}

html[data-theme="dark"] {
    --cf-header-bg: #071D36;
    --cf-header-text: #E6F1FB;
    --cf-header-hover: #0C447C;

    --cf-sidebar-bg: #0A1626;
    --cf-sidebar-text: #9FB8D4;
    --cf-sidebar-muted: #5A7699;
    --cf-sidebar-active-bg: #0C447C;
    --cf-sidebar-hover-bg: #102A47;

    --cf-accent: #378ADD;
    --cf-accent-bright: #85B7EB;
    --cf-accent-soft: #102A47;

    --cf-page-bg: #0F141A;
    --cf-surface: #171E27;
    --cf-surface-alt: #1D2733;
    --cf-border: #2A3644;
    --cf-text: #E2E8F0;
    --cf-text-muted: #8CA0B3;
    --cf-link: #85B7EB;
    --cf-link-hover: #B5D4F4;

    --cf-input-bg: #111820;
    --cf-input-border: #33404F;

    --cf-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --cf-radius: 8px;
}

/* Teal/green skin */
html[data-cf-skin="teal"][data-theme="light"] {
    --cf-header-bg: #04342C;
    --cf-header-text: #E1F5EE;
    --cf-header-hover: #085041;

    --cf-sidebar-bg: #04231D;
    --cf-sidebar-text: #9FE1CB;
    --cf-sidebar-muted: #5B9683;
    --cf-sidebar-active-bg: #085041;
    --cf-sidebar-hover-bg: #073A30;

    --cf-accent: #0F6E56;
    --cf-accent-bright: #1D9E75;
    --cf-accent-soft: #E1F5EE;

    --cf-page-bg: #F0F7F4;
    --cf-surface: #FFFFFF;
    --cf-surface-alt: #F5FAF8;
    --cf-border: #DCE9E4;
    --cf-text: #1F2933;
    --cf-text-muted: #5F7A72;
    --cf-link: #0F6E56;
    --cf-link-hover: #085041;

    --cf-input-bg: #FFFFFF;
    --cf-input-border: #C7DAD3;
}

html[data-cf-skin="teal"][data-theme="dark"] {
    --cf-header-bg: #052922;
    --cf-header-text: #E1F5EE;
    --cf-header-hover: #085041;

    --cf-sidebar-bg: #041F1A;
    --cf-sidebar-text: #9FE1CB;
    --cf-sidebar-muted: #4F8874;
    --cf-sidebar-active-bg: #085041;
    --cf-sidebar-hover-bg: #0A362C;

    --cf-accent: #1D9E75;
    --cf-accent-bright: #5DCAA5;
    --cf-accent-soft: #0A362C;

    --cf-page-bg: #0E1613;
    --cf-surface: #16211D;
    --cf-surface-alt: #1C2A25;
    --cf-border: #2C3D37;
    --cf-text: #E2E8F0;
    --cf-text-muted: #8FA69D;
    --cf-link: #5DCAA5;
    --cf-link-hover: #9FE1CB;

    --cf-input-bg: #101915;
    --cf-input-border: #34443E;
}

/* Maroon skin */
html[data-cf-skin="maroon"][data-theme="light"] {
    --cf-header-bg: #501313;
    --cf-header-text: #FCEBEB;
    --cf-header-hover: #791F1F;

    --cf-sidebar-bg: #3D0E0E;
    --cf-sidebar-text: #F7C1C1;
    --cf-sidebar-muted: #B87373;
    --cf-sidebar-active-bg: #791F1F;
    --cf-sidebar-hover-bg: #551818;

    --cf-accent: #A32D2D;
    --cf-accent-bright: #E24B4A;
    --cf-accent-soft: #FCEBEB;

    --cf-page-bg: #F8F0F0;
    --cf-surface: #FFFFFF;
    --cf-surface-alt: #FAF4F4;
    --cf-border: #E9D9D9;
    --cf-text: #1F2933;
    --cf-text-muted: #7A6363;
    --cf-link: #A32D2D;
    --cf-link-hover: #791F1F;

    --cf-input-bg: #FFFFFF;
    --cf-input-border: #DCC5C5;
}

html[data-cf-skin="maroon"][data-theme="dark"] {
    --cf-header-bg: #3A0F0F;
    --cf-header-text: #FCEBEB;
    --cf-header-hover: #791F1F;

    --cf-sidebar-bg: #2C0B0B;
    --cf-sidebar-text: #F7C1C1;
    --cf-sidebar-muted: #A66A6A;
    --cf-sidebar-active-bg: #791F1F;
    --cf-sidebar-hover-bg: #4A1616;

    --cf-accent: #E24B4A;
    --cf-accent-bright: #F09595;
    --cf-accent-soft: #4A1616;

    --cf-page-bg: #170D0D;
    --cf-surface: #241414;
    --cf-surface-alt: #2C1919;
    --cf-border: #402424;
    --cf-text: #E2E8F0;
    --cf-text-muted: #B39494;
    --cf-link: #F09595;
    --cf-link-hover: #F7C1C1;

    --cf-input-bg: #1C1010;
    --cf-input-border: #402424;
}

/* ============================================================
   2. Base
   ============================================================ */
body,
.wrapper,
.content-wrapper {
    background-color: var(--cf-page-bg) !important;
    color: var(--cf-text);
}

a { color: var(--cf-link); }
a:hover, a:focus { color: var(--cf-link-hover); }

hr { border-top-color: var(--cf-border); }

.text-muted { color: var(--cf-text-muted) !important; }

/* ============================================================
   3. Header (top navbar) — overrides all AdminLTE skins
   ============================================================ */
.main-header .navbar,
.main-header .logo {
    background-color: var(--cf-header-bg) !important;
}

.main-header .navbar .navbar-brand,
.main-header .navbar .sidebar-toggle,
.main-header .navbar-custom-menu .nav > li > a {
    color: var(--cf-header-text) !important;
}

.main-header .navbar .sidebar-toggle:hover,
.main-header .navbar-custom-menu .nav > li > a:hover,
.main-header .navbar-custom-menu .nav .open > a {
    background-color: var(--cf-header-hover) !important;
    color: #FFFFFF !important;
}

.main-header .navbar-custom-menu .nav > li > a > .label {
    background-color: #EF9F27;
    color: #412402;
}

/* ============================================================
   4. Sidebar
   ============================================================ */
.main-sidebar,
.left-side {
    background-color: var(--cf-sidebar-bg) !important;
}

.sidebar-menu > li.header {
    background: transparent !important;
    color: var(--cf-sidebar-muted) !important;
    letter-spacing: 0.05em;
    font-size: 11px;
}

.sidebar-menu > li > a {
    color: var(--cf-sidebar-text) !important;
    border-left: 3px solid transparent;
}

.sidebar-menu > li:hover > a,
.sidebar-menu > li > a:hover {
    background-color: var(--cf-sidebar-hover-bg) !important;
    color: #FFFFFF !important;
}

.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
    background-color: var(--cf-sidebar-active-bg) !important;
    color: #FFFFFF !important;
    border-left-color: var(--cf-accent-bright) !important;
}

.sidebar-menu .treeview-menu {
    background-color: rgba(0, 0, 0, 0.25) !important;
}

.sidebar-menu .treeview-menu > li > a {
    color: var(--cf-sidebar-text) !important;
}

.sidebar-menu .treeview-menu > li > a:hover,
.sidebar-menu .treeview-menu > li.active > a {
    color: #FFFFFF !important;
}

.user-panel {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.user-panel > .info > p {
    color: #FFFFFF;
}

.user-panel > .info > a {
    color: var(--cf-sidebar-text) !important;
}

/* ============================================================
   5. Content header / breadcrumbs
   ============================================================ */
.content-header {
    background: transparent;
}

.content-header .breadcrumb {
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius);
    box-shadow: var(--cf-shadow);
    padding: 8px 14px;
}

.content-header .breadcrumb > li > a,
.content-header .breadcrumb > li.active {
    color: var(--cf-text-muted);
}

.content-header .breadcrumb > li > a:hover {
    color: var(--cf-link);
}

/* ============================================================
   6. Boxes, panels, tabs
   ============================================================ */
.box {
    background: var(--cf-surface);
    border-radius: var(--cf-radius);
    border: 1px solid var(--cf-border);
    border-top: 3px solid var(--cf-accent);
    box-shadow: var(--cf-shadow);
    color: var(--cf-text);
}

.box.box-primary { border-top-color: var(--cf-accent); }

.box-header {
    color: var(--cf-text);
    border-radius: var(--cf-radius) var(--cf-radius) 0 0;
}

.box-header.with-border { border-bottom: 1px solid var(--cf-border); }

.box-header .box-title { color: var(--cf-text); }

.box-footer {
    background: var(--cf-surface-alt);
    border-top: 1px solid var(--cf-border);
    border-radius: 0 0 var(--cf-radius) var(--cf-radius);
    color: var(--cf-text);
}

.panel,
.panel-default {
    background: var(--cf-surface);
    border-color: var(--cf-border);
    border-radius: var(--cf-radius);
    box-shadow: var(--cf-shadow);
}

.panel-default > .panel-heading {
    background: var(--cf-surface-alt);
    border-color: var(--cf-border);
    color: var(--cf-text);
}

.panel-body { color: var(--cf-text); }

.nav-tabs-custom {
    background: var(--cf-surface);
    border-radius: var(--cf-radius);
    box-shadow: var(--cf-shadow);
}

.nav-tabs-custom > .nav-tabs {
    border-bottom-color: var(--cf-border);
}

.nav-tabs-custom > .nav-tabs > li > a {
    color: var(--cf-text-muted);
}

.nav-tabs-custom > .nav-tabs > li.active > a {
    background: var(--cf-surface);
    color: var(--cf-text);
    border-color: var(--cf-border);
    border-bottom-color: transparent;
}

.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--cf-accent);
}

.nav-tabs-custom > .tab-content {
    background: var(--cf-surface);
    color: var(--cf-text);
}

/* Bootstrap hardcodes background-color:#eee on ALL .nav>li>a hover/focus
   (e.g. clicking a nav-tabs-custom tab leaves it stuck light gray) */
.nav > li > a:hover,
.nav > li > a:focus {
    background-color: var(--cf-header-hover);
    color: var(--cf-text);
}

.small-box {
    border-radius: var(--cf-radius);
    box-shadow: var(--cf-shadow);
}

.info-box {
    background: var(--cf-surface);
    border-radius: var(--cf-radius);
    box-shadow: var(--cf-shadow);
    color: var(--cf-text);
}

/* Bootstrap's .list-group-item hardcodes a white background/border
   (e.g. the profile page's Email/Gender/Department info list) */
.list-group-item {
    background-color: var(--cf-surface);
    border-color: var(--cf-border);
    color: var(--cf-text);
}

.list-group-item > b,
.list-group-item > strong {
    color: var(--cf-text);
}

/* ============================================================
   7. Tables & DataTables
   ============================================================ */
.table {
    color: var(--cf-text);
    background: transparent;
}

.table > thead > tr > th {
    border-bottom: 2px solid var(--cf-border);
    color: var(--cf-text-muted);
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td {
    border-top: 1px solid var(--cf-border);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th {
    border-color: var(--cf-border) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--cf-surface-alt);
}

.table-hover > tbody > tr:hover {
    background-color: var(--cf-accent-soft);
}

.dataTables_wrapper,
.dataTables_info,
.dataTables_length,
.dataTables_filter {
    color: var(--cf-text-muted) !important;
}

.dataTables_filter input,
.dataTables_length select {
    background: var(--cf-input-bg);
    border: 1px solid var(--cf-input-border) !important;
    color: var(--cf-text);
    border-radius: 6px;
}

table.dataTable thead th,
table.dataTable thead td {
    border-bottom-color: var(--cf-border) !important;
}

table.dataTable.no-footer { border-bottom-color: var(--cf-border) !important; }

/* Bootstrap pagination (DataTables + CI pagination) */
.pagination > li > a,
.pagination > li > span {
    background: var(--cf-surface);
    border-color: var(--cf-border);
    color: var(--cf-link);
}

.pagination > li > a:hover {
    background: var(--cf-surface-alt);
    color: var(--cf-link-hover);
    border-color: var(--cf-border);
}

.pagination > .active > a,
.pagination > .active > a:hover {
    background: var(--cf-accent) !important;
    border-color: var(--cf-accent) !important;
    color: #FFFFFF !important;
}

.pagination > .disabled > a,
.pagination > .disabled > span {
    background: var(--cf-surface);
    border-color: var(--cf-border);
    color: var(--cf-text-muted);
}

/* ============================================================
   8. Forms & Select2
   ============================================================ */
.form-control {
    background-color: var(--cf-input-bg);
    border: 1px solid var(--cf-input-border);
    color: var(--cf-text);
    border-radius: 6px;
}

.form-control:focus {
    border-color: var(--cf-accent-bright);
    box-shadow: 0 0 0 2px rgba(55, 138, 221, 0.2);
}

.form-control::placeholder { color: var(--cf-text-muted); }

/* Bootstrap hardcodes background-color:#dddddd on disabled/readonly
   inputs (e.g. approval-form charge fields) - unreadable in dark mode
   since it never adapts and the text stays var(--cf-text) */
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: var(--cf-surface-alt);
    color: var(--cf-text-muted);
    opacity: 1;
}

label { color: var(--cf-text); }

/* Bootstrap hardcodes legend to color:#333 + border-bottom:#e5e5e5
   (e.g. "Consignee Info" section headings on declaration forms) -
   stayed dark/invisible in dark mode since it never adapted */
legend {
    color: var(--cf-text);
    border-bottom-color: var(--cf-border);
}

.input-group .input-group-addon {
    background: var(--cf-surface-alt);
    border-color: var(--cf-input-border);
    color: var(--cf-text-muted);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--cf-input-bg);
    border: 1px solid var(--cf-input-border);
    border-radius: 6px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--cf-text);
}

.select2-dropdown {
    background-color: var(--cf-surface);
    border-color: var(--cf-border);
    color: var(--cf-text);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--cf-input-bg);
    border-color: var(--cf-input-border);
    color: var(--cf-text);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--cf-accent);
}

/* ============================================================
   9. Buttons, labels, dropdowns, modals
   ============================================================ */
.btn { border-radius: 6px; }

.btn-default {
    background: var(--cf-surface);
    border-color: var(--cf-input-border);
    color: var(--cf-text);
}

.btn-default:hover {
    background: var(--cf-surface-alt);
    border-color: var(--cf-input-border);
    color: var(--cf-text);
}

.btn-primary {
    background-color: var(--cf-accent);
    border-color: var(--cf-accent);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--cf-link-hover);
    border-color: var(--cf-link-hover);
}

.dropdown-menu {
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius);
    box-shadow: var(--cf-shadow);
}

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

.dropdown-menu > li > a:hover {
    background: var(--cf-surface-alt);
    color: var(--cf-text);
}

.navbar-nav > .notifications-menu > .dropdown-menu > li.header,
.navbar-nav > .messages-menu > .dropdown-menu > li.header {
    background: var(--cf-surface-alt) !important;
    color: var(--cf-text) !important;
    border-radius: var(--cf-radius) var(--cf-radius) 0 0;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a {
    background: var(--cf-surface);
    color: var(--cf-text);
    border-bottom: 1px solid var(--cf-border);
}

.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover {
    background: var(--cf-surface-alt);
}

.navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a {
    background: var(--cf-surface-alt) !important;
    color: var(--cf-link) !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-header {
    background: var(--cf-header-bg) !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    background: var(--cf-surface-alt) !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default {
    background: var(--cf-surface);
    color: var(--cf-text);
}

.modal-content {
    background: var(--cf-surface);
    color: var(--cf-text);
    border-radius: var(--cf-radius);
    border: 1px solid var(--cf-border);
}

.modal-header {
    border-bottom-color: var(--cf-border);
}

.modal-footer {
    border-top-color: var(--cf-border);
}

.close { color: var(--cf-text); opacity: 0.6; }

/* ============================================================
   10. Misc
   ============================================================ */
.breadcrumb-button .btn-sm { border-radius: 6px; }

/* Control sidebar tabs (wrench/home/user-cog) sit on the always-dark
   control-sidebar-dark skin regardless of the app's light/dark toggle,
   so Bootstrap's #eee hover/focus background (fixed above for the rest
   of the app) needs a dark-appropriate override here instead of the
   theme variables, which would resolve to a light color in light mode. */
.control-sidebar-tabs > li > a:hover,
.control-sidebar-tabs > li > a:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
}

/* Control sidebar — Appearance section (theme + language switches) */
.control-sidebar-appearance {
    padding: 10px 20px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.control-sidebar-appearance .control-sidebar-heading {
    margin-top: 0;
}

.cfrms-appearance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cfrms-appearance-row:last-child { margin-bottom: 0; }

.cfrms-appearance-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.cfrms-appearance-label > .fa { width: 16px; text-align: center; margin-right: 4px; }

.cfrms-segmented {
    display: flex;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 999px;
    padding: 2px;
}

.cfrms-segmented-option {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: none !important;
    line-height: 1.4;
    white-space: nowrap;
}

.cfrms-segmented-option:hover { color: #FFFFFF !important; }

.cfrms-segmented-option.active {
    background: var(--cf-accent);
    color: #FFFFFF !important;
}

/* Skin swatches (control sidebar Appearance section) */
.cfrms-swatches {
    display: flex;
    gap: 8px;
}

.cfrms-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.cfrms-swatch:hover { border-color: rgba(255, 255, 255, 0.4); }

.cfrms-swatch.active {
    border-color: #FFFFFF;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.cfrms-swatch-navy { background: #185FA5; }
.cfrms-swatch-teal { background: #0F6E56; }
.cfrms-swatch-maroon { background: #A32D2D; }

/* File-status tab tiles (shared_views/files_menu.php) */
.btn-app {
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    color: var(--cf-text-muted);
    border-radius: var(--cf-radius) !important;
    box-shadow: var(--cf-shadow);
}

.btn-app:hover {
    background: var(--cf-surface-alt);
    color: var(--cf-text);
    border-color: var(--cf-accent-bright);
}

.btn-app.active {
    background: var(--cf-accent-soft);
    color: var(--cf-link);
    border-color: var(--cf-accent);
}

.btn-app > .fa { color: inherit; }

code {
    background: var(--cf-surface-alt);
    color: var(--cf-accent-bright);
    border-radius: 4px;
}

.progress { background: var(--cf-surface-alt); }

.main-footer {
    background: var(--cf-surface);
    border-top: 1px solid var(--cf-border);
    color: var(--cf-text-muted);
}

/* Datepicker / daterangepicker popovers */
.datepicker,
.daterangepicker {
    background: var(--cf-surface);
    color: var(--cf-text);
    border: 1px solid var(--cf-border);
}

.datepicker table tr td,
.datepicker table tr th {
    color: var(--cf-text);
}

.datepicker table tr td.old,
.datepicker table tr td.new {
    color: var(--cf-text-muted);
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover {
    background-color: var(--cf-accent) !important;
}

/* Scrollbar (WebKit) */
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--cf-page-bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--cf-border);
    border-radius: 5px;
}

/* ============================================================
   11. Polish pass (Phase 9d)
   ============================================================ */

/* Shipping-schedule voyage rows (AdminLTE .todo-list, used on
   Container/Vehicle dashboards) — were hard-coded light gray */
.todo-list > li {
    background: var(--cf-surface-alt);
    border-left: 2px solid var(--cf-accent);
    border-radius: 6px;
    color: var(--cf-text);
    margin-bottom: 4px;
}

.todo-list > li .text,
.todo-list > li small {
    color: var(--cf-text);
}

.todo-list > li .handle a { color: var(--cf-accent-bright); }

/* Expanded per-voyage record lists under each schedule row */
.todolist .ship {
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: 6px;
    color: var(--cf-text);
}

/* Morris chart hover popup — hard-coded white in morris.css */
.morris-hover.morris-default-style {
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    color: var(--cf-text);
    border-radius: 6px;
}

.morris-hover.morris-default-style .morris-hover-row-label {
    color: var(--cf-text);
}

/* Box titles: consistent weight and size across modules */
.box-header .box-title {
    font-size: 16px;
    font-weight: 600;
}

/* Status labels/badges: subtle rounding to match the theme radius */
.label {
    border-radius: 4px;
    font-weight: 600;
}

.badge { font-weight: 600; }

/* Sidebar user panel app title */
.user-panel > .info > p { font-weight: 600; }

/* Small-box KPI tiles: keep AdminLTE colors but soften the footer */
.small-box .small-box-footer {
    background: rgba(0, 0, 0, 0.12);
}

.small-box .small-box-footer:hover {
    background: rgba(0, 0, 0, 0.25);
    color: #FFFFFF;
}

/* Content section headings inside boxes */
.box-body { color: var(--cf-text); }

/* Callouts / alerts inherit surface in dark mode for readability */
html[data-theme="dark"] .alert {
    border-color: var(--cf-border);
}

/* Full calendar-style month tables (HR leave calendar) */
html[data-theme="dark"] .table-bordered > thead > tr > th {
    background: var(--cf-surface-alt);
}