/* ==========================================================================
   DARK MODE  -  the whole system, every page.
   Loaded LAST (after the theme, opatix.css, eastend-skin.css and gc-responsive.css) from layout/header.blade.php and
   layout/header-lite.blade.php, so it only repaints; no page markup is touched. Warm "stone" darks to match the brand
   gold (#86764f). To go back to the light look, remove the <link> to this file from those two headers.
   ========================================================================== */

:root {
    color-scheme: dark;

    --dk-page:     #2a2a2a;   /* behind everything */
    --dk-surface:  #313131;   /* cards, sidebar, topbar, modals */
    --dk-raised:   #3a3b3c;   /* inputs, hovers, table headers, menus */
    --dk-raised-2: #444546;   /* hover on raised things */
    --dk-line:     #404142;   /* hairlines */
    --dk-line-2:   #505152;   /* stronger borders */
    --dk-text:     #d4d4d4;   /* body text */
    --dk-strong:   #f5f5f4;   /* headings, figures */
    --dk-muted:    #a3a3a3;   /* secondary */
    --dk-faint:    #7a7b7c;   /* placeholders, icons */
    --dk-accent:   #c9b98d;   /* gold readable on dark: links, titles, active */
    --dk-accent-bg:#3b3829;   /* gold wash: active menu item, highlights */

    /* re-point the skin's tokens (eastend-skin.css, opatix.css and the page <style> blocks read these) */
    --ee-body-bg: var(--dk-page);
    --ee-body-color: var(--dk-text);
    --ee-border: var(--dk-line);
    --ee-card-border: var(--dk-line);
    --ee-stone-50:  var(--dk-raised);
    --ee-stone-100: var(--dk-raised);
    --ee-stone-300: var(--dk-line-2);
    --ee-stone-400: var(--dk-faint);
    --ee-stone-500: var(--dk-muted);
    --ee-stone-600: #c4bfba;
    --ee-stone-700: #d6d3d1;
    --ee-stone-950: #ffffff;
    --ee-primary-50: var(--dk-accent-bg);
    --ox-body-bg: var(--dk-page);
    --ox-body-color: var(--dk-text);
    --ox-heading: var(--dk-strong);
    --ox-border: var(--dk-line);
    --ox-muted: var(--dk-muted);
    --ox-light: var(--dk-raised);
    --ox-shadow: 0 1px 3px 0 rgba(0, 0, 0, .5), 0 1px 2px -1px rgba(0, 0, 0, .5);
    --ox-shadow-md: 0 4px 10px -1px rgba(0, 0, 0, .55), 0 2px 4px -2px rgba(0, 0, 0, .5);
}

/* ---------- Base ---------- */
html, body, #main-body, .page-wrapper, .container-fluid { background-color: var(--dk-page) !important; color: var(--dk-text); }
body, .page-wrapper { color: var(--dk-text); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--dk-strong); }
label, .control-label { color: var(--dk-muted); }
a { color: var(--dk-accent); }
a:hover, a:focus { color: #e8dcb8; }
hr { border-top-color: var(--dk-line); }
code { color: var(--dk-accent); background: transparent; }
pre { background: var(--dk-raised); color: var(--dk-text); border-color: var(--dk-line); }
::selection { background: rgba(201, 185, 141, .35); color: #fff; }
.text-muted, small.text-muted, .text-secondary { color: var(--dk-muted) !important; }
.text-dark, .text-body, .text-black { color: var(--dk-text) !important; }
.text-themecolor, .page-titles .text-themecolor, .page-titles h3, .page-titles h4 { color: var(--dk-accent) !important; }
.font-weight-bold, strong, b { color: inherit; }
.bg-white, .bg-light, .bg-body, .bg-transparent.card { background-color: var(--dk-surface) !important; }
.bg-light, .table-light, .thead-light th { background-color: var(--dk-raised) !important; color: var(--dk-text) !important; }
.border, .border-top, .border-bottom, .border-left, .border-right, .b-a, .b-t, .b-b, .b-l, .b-r,
.border-light, .border-white { border-color: var(--dk-line) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: var(--ox-shadow) !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--dk-page); }
::-webkit-scrollbar-thumb { background: var(--dk-line-2); border-radius: 6px; border: 2px solid var(--dk-page); }
::-webkit-scrollbar-thumb:hover { background: #68696a; }
* { scrollbar-color: var(--dk-line-2) var(--dk-page); }

/* ---------- Sidebar and topbar ---------- */
.left-sidebar, .left-sidebar .scroll-sidebar, .left-sidebar .sidebar-nav, .sidebar-footer,
.topbar .navbar-header, .topbar .top-navbar .navbar-header { background: var(--dk-surface) !important; }
.topbar, .fix-header .topbar, .topbar > .navbar, .topbar .navbar-collapse { background: var(--dk-surface) !important; }
.left-sidebar, .topbar .navbar-header, .topbar, .fix-header .topbar { border-color: var(--dk-line) !important; }
.topbar { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .5) !important; }
.sidebar-nav ul li a, .sidebar-nav ul li a .hide-menu { color: #c4bfba !important; }
.sidebar-nav ul li a i, .sidebar-nav ul li a .gc-ico { color: #a8a29e !important; }
.sidebar-nav ul li a:not(.active):hover,
.sidebar-nav ul li a:not(.active):hover .hide-menu,
.sidebar-nav ul li a:not(.active):hover i,
.sidebar-nav ul li a:not(.active):hover .gc-ico { background: var(--dk-raised) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.sidebar-nav > ul > li.active > a, .sidebar-nav > ul > li > a.active, .sidebar-nav ul li.active > a, .sidebar-nav ul li a.active {
    background: var(--dk-accent-bg) !important; color: var(--dk-accent) !important; }
.sidebar-nav > ul > li > a.active .hide-menu, .sidebar-nav > ul > li.active > a .hide-menu {
    color: var(--dk-accent) !important; -webkit-text-fill-color: var(--dk-accent) !important; }
.sidebar-nav ul li a.active .gc-ico, .sidebar-nav > ul > li.active > a .gc-ico,
.sidebar-nav > ul > li > a.active .gc-ico, .sidebar-nav ul li a.active i { color: var(--dk-accent) !important; }
.sidebar-nav ul li.nav-small-cap { color: var(--dk-faint); }
.sidebar-nav ul ul, .sidebar-nav ul li ul { background: transparent !important; }
.sidebar-nav .has-arrow::after { border-color: var(--dk-faint); }
.topbar .navbar-nav > .nav-item > .nav-link, .topbar .navbar-nav .nav-link i, .topbar .navbar-nav > .nav-item > a.nav-link > i { color: #c4bfba; }
.topbar .navbar-nav > .nav-item > .nav-link:hover { color: #fff; }
.topbar .sidebartoggler, .topbar .nav-toggler { background: var(--dk-raised); border-color: var(--dk-line-2); color: var(--dk-text); }
.topbar .sidebartoggler:hover, .topbar .nav-toggler:hover { background: var(--dk-raised-2); }
.topbar .navbar-brand .light-logo, .topbar .navbar-header img { filter: brightness(1.15); }
.page-wrapper-overlay { background: rgba(0, 0, 0, .6); }

/* ---------- Cards, panels and the page's own panels ---------- */html body .card,
html body .card-body,
html body .card-header,
html body .card-footer,
html body .gc-panel,
html body .gc-panel-body,
html body .gc-panel-head,
html body .gc-hero,
html body .gc-stat,
html body .cw-card,
html body .cx-card,
html body .cx-action,
html body .cx-periods,
html body .cm-stat,
html body .ml-stat,
html body .ml-card,
html body .panel,
html body .well,
html body .jumbotron,
html body .box {
    background-color: var(--dk-surface); color: var(--dk-text); }html body .card,
html body .gc-panel,
html body .gc-filter-bar,
html body .cx-card,
html body .cx-action,
html body .cx-periods,
html body .cm-stat,
html body .ml-stat,
html body .ml-card,
html body .cw-card { border-color: var(--dk-line) !important; }html body .card-header,
html body .card-footer,
html body .gc-panel-head,
html body .cx-card-h,
html body .panel-heading { border-color: var(--dk-line) !important; }html body .card-header { background: var(--dk-surface); }html body .card-title,
html body .cx-card-t,
html body .gc-hero-name { color: var(--dk-strong); }html body .gc-hero-name { color: var(--dk-accent) !important; }html body .card .card,
html body .card-body .card { background: var(--dk-raised); }html body .gc-filter-bar { background: var(--dk-surface); }html body .card .gc-filter-bar { background: transparent; }

/* dashboard classes (pages/shared/dash-styles.blade.php, home, accounting, communications) */html body .cx-card-t i,
html body .cx-action .go,
html body .cx-periods .now i { color: var(--dk-faint); }html body .cx-action .t,
html body .cx-fig,
html body .cx-legend b,
html body .cx-table .who,
html body .cx-feed .tt,
html body .cx-item,
html body .cx-line { color: var(--dk-strong); }html body .cx-action .s,
html body .cx-kpi .l,
html body .cx-kpi .n,
html body .cx-key,
html body .cx-empty,
html body .cx-mini .l,
html body .cx-foot,
html body .cx-table th,
html body .cx-periods .custom label,
html body .cx-periods .now,
html body .cx-line .b { color: var(--dk-muted); }html body .cx-action:hover .go { color: var(--dk-text); }html body .cx-legend div,
html body .cx-table td,
html body .cx-attn,
html body .cx-periods .pills a,
html body .cx-periods .custom button { color: var(--dk-text); }html body .cx-empty i { color: var(--dk-line-2); }html body .cx-sub,
html body .cx-table small,
html body .cx-feed .tm,
html body .cx-line .a small { color: var(--dk-faint); }html body .cx-foot,
html body .cx-table td,
html body .cx-feed .it,
html body .cx-item,
html body .cx-line { border-color: var(--dk-line); }html body .cx-table th { border-color: var(--dk-line); }html body .cx-table tbody tr:hover { background: var(--dk-raised); }html body .cx-bar { background: var(--dk-raised-2); }html body .cx-link { color: var(--dk-accent); }html body .cx-kpi { background: rgba(var(--c), .10); border-color: rgba(var(--c), .26); }html body .cx-kpi .cx-chip { background: rgba(var(--c), .22); }html body .cx-chip { background: rgba(var(--c), .18); }html body .cx-pill { background: rgba(var(--c), .20); }html body .cx-primary { --c: 201,185,141; }html body .cx-muted { --c: 168,162,158; }html body .cx-danger { --c: 248,113,113; }html body .cx-success { --c: 52,211,153; }html body .cx-info { --c: 96,200,232; }html body .cx-warning { --c: 251,191,36; }html body .cx-purple { --c: 167,139,250; }html body .cx-periods .pills a,
html body .cx-periods .custom button { background: var(--dk-raised); border-color: var(--dk-line-2); }html body .cx-periods .pills a:hover,
html body .cx-periods .custom button:hover { border-color: var(--dk-accent); color: var(--dk-accent); }html body .cx-periods .pills a.on,
html body .cx-periods .custom button.on { background: #736544; border-color: #736544; color: #fff; }html body .cx-periods .custom input { background: var(--dk-raised); border-color: var(--dk-line-2); color: var(--dk-strong); }html body .cx-btn,
html body .cx-btn:hover { color: #fff; }html body .cx-attn { background: rgba(var(--c), .12); border-color: rgba(var(--c), .35); }html body .cx-attn b { color: rgb(var(--c)); }html body .cx-action:hover,
html body .cx-kpi:hover { box-shadow: 0 10px 18px -3px rgba(0, 0, 0, .6); }

/* the old stat/hero figures stay gold, brighter */html body .gc-stat .stat-val,
html body .gc-hero-stat-val,
html body .gc-hero-stat-val.gold { color: var(--dk-accent) !important; }html body .gc-avatar,
html body .gc-hero-avatar { background: var(--dk-accent-bg) !important; border-color: #736544; }html body .gc-hero-avatar .gc-silhouette { fill: #5e5337; stroke: #c9b98d; }html body .gc-avatar .gc-silhouette { fill: #3b3829; stroke: #c9b98d; }

/* charts drawn as inline SVG (App\Services\Comms\SvgCharts and friends) */svg [stroke="#eceef1"],
svg [stroke="#e7e5e4"] { stroke: #46474a; }svg [stroke="#f5f5f4"] { stroke: #3a3b3c; }svg [fill="#a8a29e"] { fill: #a8a29e; }svg [fill="#292524"],
svg [fill="#1c1917"],
svg [fill="#333"] { fill: #f5f5f4; }svg [fill="#fff"],
svg [fill="#ffffff"] { fill: var(--dk-surface); }svg text { fill: inherit; }

/* ---------- Buttons ---------- */
.btn-light, .btn-default, .btn-white, .btn-secondary.btn-outline, .btn-outline-secondary, .btn-outline-light {
    background-color: var(--dk-raised) !important; border-color: var(--dk-line-2) !important; color: var(--dk-text) !important; }
.btn-light:hover, .btn-default:hover, .btn-white:hover, .btn-outline-secondary:hover, .btn-outline-light:hover {
    background-color: var(--dk-raised-2) !important; color: #fff !important; }
.btn-outline-secondary.active, .btn-outline-secondary:active { background: #5e5337 !important; border-color: #736544 !important; color: #fff !important; }
.btn-outline-primary { color: var(--dk-accent); border-color: #736544; }
.btn-outline-danger { color: #f87171; border-color: #b91c1c; }
.btn-outline-danger:hover { color: #fff; }
.btn-outline-success { color: #34d399; border-color: #047857; }
.btn-outline-info { color: #60c8e8; border-color: #0e7490; }
.btn-outline-warning { color: #fbbf24; border-color: #b45309; }
.btn-link, .btn-link:hover { color: var(--dk-accent); }
.btn-default, .btn-light { border: 1px solid var(--dk-line-2); }
.close, .close:hover { color: #fff; text-shadow: none; opacity: .7; }
.text-danger { color: #f87171 !important; }
.text-success { color: #34d399 !important; }
.text-warning { color: #fbbf24 !important; }
.text-info { color: #60c8e8 !important; }
.text-primary { color: var(--dk-accent) !important; }

/* ---------- Forms ---------- */
.form-control, .custom-select, select.form-control, textarea, input[type=text], input[type=number], input[type=email], input[type=password],
input[type=tel], input[type=search], input[type=date], input[type=time], input[type=datetime-local], input[type=url], select,
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple,
.input-group-text, .bootstrap-select > .dropdown-toggle, .tagify, .note-editor .note-editing-area, .ql-container, .ql-toolbar {
    background-color: var(--dk-raised); color: var(--dk-strong); border-color: var(--dk-line-2); }
.form-control:focus, .custom-select:focus, textarea:focus, input:focus, select:focus {
    background-color: var(--dk-raised); color: #fff; border-color: #736544 !important; }
.form-control:disabled, .form-control[readonly], input:disabled, select:disabled, textarea:disabled {
    background-color: #2e2e2e; color: var(--dk-faint); opacity: 1; }
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--dk-faint); opacity: 1; }
.input-group-text, .input-group-addon { background: var(--dk-raised-2); border-color: var(--dk-line-2); color: var(--dk-muted); }
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--dk-raised) inset !important; -webkit-text-fill-color: var(--dk-strong) !important; caret-color: #fff; }
select option, select optgroup { background: var(--dk-raised); color: var(--dk-strong); }
input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator { filter: invert(.8); }
.help-block, .form-text, .invalid-feedback { color: var(--dk-muted); }
.invalid-feedback, .text-danger.help-block { color: #f87171; }
.custom-control-label::before, .custom-file-label { background-color: var(--dk-raised); border-color: var(--dk-line-2); }
.custom-file-label::after { background: var(--dk-raised-2); color: var(--dk-text); border-color: var(--dk-line-2); }
.form-group.has-error .form-control, .form-control.is-invalid { border-color: #b91c1c !important; }
input[type=checkbox], input[type=radio] { color-scheme: dark; }
[type="checkbox"].filled-in:not(:checked) + label::after, [type="checkbox"]:not(.filled-in) + label::before { border-color: var(--dk-line-2); background: var(--dk-raised); }
[type="radio"] + label::before, [type="radio"]:not(:checked) + label::before { border-color: var(--dk-line-2); }
.switch label .lever, .gc-switch .gc-slider, .qt-switch .qt-slider { background-color: #505152; }

/* select2 / bootstrap-select / chosen drop-downs */
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--dk-strong); }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--dk-raised-2); border-color: var(--dk-line-2); color: var(--dk-text); }
.select2-dropdown, .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--dk-raised); border-color: var(--dk-line-2); color: var(--dk-strong); }
.select2-container--default .select2-results__option { color: var(--dk-text); background: transparent; }
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted { background: #5e5337 !important; color: #fff !important; }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--dk-raised-2); }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--dk-faint); }
.bootstrap-select .dropdown-menu { background: var(--dk-raised); }

/* ---------- Tables ---------- */
.table, table.dataTable, .dataTables_wrapper, table { color: var(--dk-text); }
.table thead th, table.dataTable thead th, .table thead td {
    color: var(--dk-muted); background: transparent; border-color: var(--dk-line) !important; }
.table td, .table th, .table tbody th, table.dataTable tbody td, table.dataTable tbody th {
    color: var(--dk-text); border-color: var(--dk-line); background-color: transparent; }
.table tbody tr:hover, table.dataTable tbody tr:hover, .table-hover tbody tr:hover { background: var(--dk-raised) !important; color: #fff; }
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.table-striped tbody tr:nth-of-type(even), table.dataTable.stripe tbody tr.even { background: rgba(255, 255, 255, .02); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--dk-line) !important; }
table.dataTable.no-footer { border-bottom-color: var(--dk-line); }
.table tfoot td, .table tfoot th, table.gc-stack tfoot tr { background: var(--dk-raised) !important; border-color: var(--dk-line) !important; color: var(--dk-text); }
.table .table-active, .table-active > td { background: var(--dk-raised-2); }
.table-primary, .table-info { background: rgba(60, 186, 222, .12); }
.table-success { background: rgba(5, 150, 105, .15); }
.table-warning { background: rgba(217, 119, 6, .15); }
.table-danger { background: rgba(220, 38, 38, .15); }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { color: var(--dk-muted); }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--dk-text) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #736544 !important; color: #fff !important; border-color: #736544 !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--dk-raised-2) !important; color: #fff !important; border-color: var(--dk-line-2) !important; }
.table-responsive { border-color: var(--dk-line); }
tr.gc-stack-note { background: var(--dk-raised) !important; }

/* ---------- Badges, labels, alerts ---------- */
.badge-secondary, .label-default, .label-secondary { background: #44403c; color: #e7e5e4; }
.badge-light, .label-light { background: var(--dk-raised-2); color: var(--dk-text); }
.badge-warning, .label-warning { color: #1c1917; }
.alert { border-color: var(--dk-line-2); }
.alert-light, .alert-secondary, .alert-dark { background: var(--dk-raised); color: var(--dk-text); border-color: var(--dk-line-2); }
.alert-info { background: rgba(60, 186, 222, .14); color: #a5e3f5; border-color: rgba(60, 186, 222, .4); }
.alert-success { background: rgba(5, 150, 105, .16); color: #86efc5; border-color: rgba(5, 150, 105, .45); }
.alert-warning { background: rgba(217, 119, 6, .16); color: #fcd34d; border-color: rgba(217, 119, 6, .45); }
.alert-danger { background: rgba(220, 38, 38, .16); color: #fca5a5; border-color: rgba(220, 38, 38, .45); }
.alert a { color: inherit; text-decoration: underline; }
.progress { background: var(--dk-raised-2); }

/* ---------- Dropdowns, popovers, tooltips, list groups ---------- */
.dropdown-menu, .popover, .popover-body, .popover-header, .mailbox .drop-title, .notify-box, .navbar-nav .dropdown-menu {
    background: var(--dk-raised); border-color: var(--dk-line-2); color: var(--dk-text); }
.dropdown-menu { box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.popover-header { background: var(--dk-raised-2); border-bottom-color: var(--dk-line-2); color: var(--dk-strong); }
.bs-popover-top .arrow::after, .bs-popover-auto[x-placement^=top] .arrow::after { border-top-color: var(--dk-raised); }
.bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^=bottom] .arrow::after { border-bottom-color: var(--dk-raised-2); }
.bs-popover-left .arrow::after { border-left-color: var(--dk-raised); }
.bs-popover-right .arrow::after { border-right-color: var(--dk-raised); }
.dropdown-item, .dropdown-menu a, .dropdown-menu li > a { color: var(--dk-text); }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-menu a:hover, .dropdown-menu li > a:hover { background: var(--dk-raised-2); color: #fff; }
.dropdown-item.active, .dropdown-item:active { background: #5e5337; color: #fff; }
.dropdown-divider, .dropdown-menu .divider { border-color: var(--dk-line-2); background: var(--dk-line-2); }
.dropdown-header { color: var(--dk-faint); }
.list-group-item { background: var(--dk-surface); border-color: var(--dk-line); color: var(--dk-text); }
.list-group-item-action:hover, .list-group-item-action:focus { background: var(--dk-raised); color: #fff; }
.list-group-item.active { background: #5e5337; border-color: #736544; color: #fff; }
.tooltip-inner { background: #f5f5f4; color: #1c1917; }
.tooltip.bs-tooltip-top .arrow::before { border-top-color: #f5f5f4; }
.tooltip.bs-tooltip-bottom .arrow::before { border-bottom-color: #f5f5f4; }
.breadcrumb-item, .breadcrumb-item a, .breadcrumb-item.active { color: var(--dk-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--dk-faint); }
.breadcrumb-item a:hover { color: var(--dk-accent); }

/* ---------- Modals, side panels, sweet alerts, toasts ---------- */
.modal-content, .modal-header, .modal-body, .modal-footer, .modal-content .card, .sidepanel, .right-sidebar, .right-sidebar .slimscrollright,
#commonModal .modal-content, .reminder-panel, .notifications-panel, .starred-panel, .side-panel, .js-side-panel {
    background-color: var(--dk-surface); color: var(--dk-text); border-color: var(--dk-line); }
.modal-content { box-shadow: 0 20px 60px rgba(0, 0, 0, .7); border: 1px solid var(--dk-line-2); }
.modal-header, .modal-footer { border-color: var(--dk-line); }
.modal-title, .modal-header h4, .modal-header h5 { color: var(--dk-strong); }
.modal-backdrop.show { opacity: .75; }
.right-sidebar .rpanel-title { background: var(--dk-raised); color: var(--dk-strong); }
.swal2-popup, .swal2-modal, .sweet-alert { background: var(--dk-surface) !important; color: var(--dk-text) !important; border: 1px solid var(--dk-line-2); }
.swal2-title, .swal2-html-container, .sweet-alert h2, .sweet-alert p { color: var(--dk-strong) !important; }
.swal2-input, .swal2-textarea, .swal2-select { background: var(--dk-raised); color: var(--dk-strong); border-color: var(--dk-line-2); }
#toast-container > div, .toast, .noty_bar, .jq-toast-single { box-shadow: 0 6px 24px rgba(0, 0, 0, .6); }
.toast { background: var(--dk-raised); color: var(--dk-text); }
.toast-header { background: var(--dk-raised-2); color: var(--dk-strong); border-color: var(--dk-line-2); }

/* ---------- Tabs, pills, pagination ---------- */
.nav-tabs { border-color: var(--dk-line); }
.nav-tabs .nav-link { color: var(--dk-muted); }
.nav-tabs .nav-link:hover { color: #fff; border-color: transparent; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background: transparent; color: var(--dk-accent); border-color: transparent transparent var(--dk-accent); }
.nav-pills .nav-link { color: var(--dk-text); }
.nav-pills .nav-link:hover { background: var(--dk-raised); }
.tab-content, .tab-pane { color: var(--dk-text); }
.page-link { background: var(--dk-raised); border-color: var(--dk-line-2); color: var(--dk-accent); }
.page-link:hover { background: var(--dk-raised-2); color: #fff; border-color: var(--dk-line-2); }
.page-item.disabled .page-link { background: var(--dk-surface); color: var(--dk-faint); border-color: var(--dk-line); }
.page-item.active .page-link, .pagination > .active > a, .pagination > .active > span { background: #736544; border-color: #736544; color: #fff; }
.gc-pill, .gc-pills { background: var(--dk-raised); color: var(--dk-text); border-color: var(--dk-line-2); }
.gc-pill:hover { background: var(--dk-raised-2); color: #fff; }
.gc-pill-active, .gc-pill.gc-pill-active { background: #736544 !important; border-color: #736544 !important; color: #fff !important; }

/* ---------- Date pickers, calendars, editors, uploads ---------- */
.datepicker, .datepicker-dropdown, .daterangepicker, .bootstrap-datetimepicker-widget, .flatpickr-calendar, .ui-datepicker, .ui-widget-content,
.bootstrap-timepicker-widget, .bootstrap-timepicker-widget.dropdown-menu {
    background: var(--dk-raised) !important; color: var(--dk-text) !important; border-color: var(--dk-line-2) !important; }
.datepicker table tr td, .datepicker table tr th, .daterangepicker td, .daterangepicker th { color: var(--dk-text); background: transparent; border-color: transparent; }
.datepicker table tr td.day:hover, .datepicker table tr td span:hover, .daterangepicker td.available:hover, .datepicker .datepicker-switch:hover, .datepicker .prev:hover, .datepicker .next:hover {
    background: var(--dk-raised-2) !important; color: #fff; }
.datepicker table tr td.old, .datepicker table tr td.new, .daterangepicker td.off, .daterangepicker td.off.in-range { color: var(--dk-faint) !important; background: transparent !important; }
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.selected, .daterangepicker td.active, .daterangepicker td.active:hover {
    background: #736544 !important; color: #fff !important; }
.datepicker table tr td.today { background: rgba(201, 185, 141, .25) !important; color: #fff; }
.daterangepicker td.in-range { background: rgba(201, 185, 141, .16); color: var(--dk-text); }
.daterangepicker .calendar-table { background: var(--dk-raised); border-color: var(--dk-line-2); }
.daterangepicker::before, .daterangepicker::after { border-bottom-color: var(--dk-raised) !important; }
.daterangepicker .ranges li { background: var(--dk-raised-2); color: var(--dk-text); border-color: var(--dk-line-2); }
.daterangepicker .ranges li.active { background: #736544; color: #fff; }
.fc, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead, .fc-unthemed tbody, .fc-unthemed .fc-divider, .fc-unthemed .fc-row, .fc-unthemed .fc-content,
.fc-unthemed .fc-popover, .fc-unthemed .fc-list-view, .fc-unthemed .fc-list-heading td { border-color: var(--dk-line) !important; background: transparent; color: var(--dk-text); }
.fc-day-top .fc-day-number, .fc-unthemed .fc-list-item-title a, .fc-unthemed .fc-list-item-time { color: var(--dk-text); }
.fc-unthemed .fc-today { background: rgba(201, 185, 141, .12) !important; }
.fc-unthemed .fc-list-heading td, .fc-unthemed .fc-popover .fc-header { background: var(--dk-raised); }
.fc-button { background: var(--dk-raised); border-color: var(--dk-line-2); color: var(--dk-text); text-shadow: none; }
.fc-button-active, .fc-state-active { background: #736544 !important; color: #fff !important; }
.fc-toolbar h2 { color: var(--dk-strong); }
.note-editor.note-frame, .note-editor .note-toolbar, .note-editor .note-statusbar { background: var(--dk-surface); border-color: var(--dk-line-2); }
.note-editor .note-editable { background: var(--dk-raised); color: var(--dk-strong); }
.note-editor .btn-light, .note-editor .note-btn { background: var(--dk-raised-2) !important; color: var(--dk-text) !important; }
.tox .tox-edit-area__iframe { background: var(--dk-raised) !important; }
.tox .tox-toolbar, .tox .tox-toolbar__primary, .tox .tox-menubar, .tox .tox-statusbar, .tox-tinymce { background: var(--dk-surface) !important; border-color: var(--dk-line-2) !important; }
.tox .tox-tbtn, .tox .tox-mbtn, .tox .tox-statusbar a, .tox .tox-statusbar__path-item { color: var(--dk-text) !important; }
.tox .tox-tbtn svg { fill: var(--dk-text) !important; }
.dropzone, .dz-message, .dropzone .dz-preview .dz-details { background: var(--dk-raised); border-color: var(--dk-line-2); color: var(--dk-muted); }
.dz-clickable, .upload-drop { background: var(--dk-raised); border-color: var(--dk-line-2); }
.dropzone .dz-preview { background: transparent; }
.CodeMirror { background: #262626; color: #d6d3d1; border-color: var(--dk-line-2); }
.ps__rail-y, .ps__rail-x { background: transparent !important; }
.ps__thumb-y, .ps__thumb-x { background: var(--dk-line-2) !important; }
.preloader { background: var(--dk-page) !important; }
.loader-loading { border-color: var(--dk-line-2); border-top-color: var(--dk-accent); }

/* ---------- Kanban and board-style pages ---------- */html body .kanban-board,
html body .kanban-wrapper,
html body .kanban-container,
html body .kanban-column,
html body .kanban-card,
html body .board-column,
html body .board-card,
html body .gc-board-col,
html body .gc-board-card,
html body .kanban-heading,
html body .lead-card,
html body .task-card,
html body .kanban-item { background: var(--dk-surface); border-color: var(--dk-line); color: var(--dk-text); }html body .kanban-heading,
html body .board-header { background: var(--dk-raised); color: var(--dk-strong); }

/* ---------- Page-specific <style> blocks that hard-coded light colours ---------- */
/* carwash */html body .cw-wrap .cw-card,
html body .cw-setup .card-header,
html body .cw-wrap .cw-stack-card .cw-search-head { background: var(--dk-surface) !important; border-color: var(--dk-line) !important; }html body .cw-grid a.gc-panel-row:hover { background: var(--dk-raised) !important; }html body .cw-wrap .cw-badge-fleet { background: rgba(251, 191, 36, .2) !important; color: #fcd34d; }
/* communications */html body .cm-stat { background: var(--dk-surface); }html body .cm-note { background: rgba(217, 119, 6, .16); color: #fcd34d; }html body .cm-note.bad { background: rgba(220, 38, 38, .16); color: #fca5a5; }html body .cm-phone { background: var(--dk-raised); border-color: var(--dk-line-2); }html body .cm-bubble { background: var(--dk-raised-2); color: var(--dk-strong); }html body .cm-editor,
html body .cm-editor .bar button { background: var(--dk-raised); border-color: var(--dk-line-2); color: var(--dk-text); }html body .cm-editor .bar { background: var(--dk-raised-2); border-color: var(--dk-line-2); }html body .cm-editor .bar button:hover { background: #505152; }
/* the email body preview is a stand-in for the customer's white email, keep it readable */[style*="background:#fff"] { background-color: var(--dk-surface) !important; color: var(--dk-text); }[style*="background: #fff"] { background-color: var(--dk-surface) !important; color: var(--dk-text); }[style*="background:#fafafa"],
[style*="background: #fafafa"],
[style*="background:#fbfbfb"],
[style*="background:#faf9f7"],
[style*="background:#f5f5ff"],
[style*="background:#f5f5f4"],
[style*="background:#f9fafb"] { background-color: var(--dk-raised) !important; }[style*="border:1px dashed #c9c9c9"] { border-color: var(--dk-line-2) !important; }[style*="color:#333"],
[style*="color: #333"],
[style*="color:#000"],
[style*="color:#292524"],
[style*="color:#1c1917"] { color: var(--dk-strong) !important; }[style*="color:#57534e"],
[style*="color:#555"],
[style*="color:#666"],
[style*="color:#4b5563"] { color: var(--dk-text) !important; }
/* media library */html body .ml-stat,
html body .ml-card { background: var(--dk-surface); }html body .ml-thumb,
html body .ml-list .ml-mini,
html body .ml-preview { background: var(--dk-raised) !important; }html body .ml-drop { background: transparent; border-color: var(--dk-line-2); color: var(--dk-muted); }
/* fleet, rentals, reports, roles */html body .gc-vs-photo { background: var(--dk-raised) !important; }html body .gc-roles-form tr { border-color: var(--dk-line) !important; }html body .reports-top-nav .nav-link { background: var(--dk-raised); border-color: var(--dk-line-2); color: var(--dk-text); }html body .reports-top-nav .nav-link.active { background: #736544; color: #fff; }html body .acc-m table.gc-stack tfoot tr { background: var(--dk-raised) !important; border-color: var(--dk-line) !important; }html body table.gc-stack tr,
html body table.gc-stack td { border-color: var(--dk-line); }

/* ---------- Login and other full-page forms ---------- */
.login-register, .login-box, .login-sidebar, .login-form, .loginbox, .auth-card, .auth-box, .card-login {
    background-color: var(--dk-surface) !important; color: var(--dk-text); border-color: var(--dk-line); }
.login-register .form-control { background: var(--dk-raised); }

/* ---------- Print always stays on white paper ---------- */
@media print {
    html, body, #main-body, .page-wrapper, .container-fluid, .card, .card-body, .modal-content, .table, .table td, .table th {
        background: #fff !important; color: #000 !important; }
    svg [fill="#292524"], svg [fill="#f5f5f4"] { fill: #000; }
    svg [stroke="#46474a"] { stroke: #ddd; }
}

/* tinted KPI tiles read better a touch stronger on dark */
html body .cx-kpi { background: rgba(var(--c), .12); }
html body .cx-fig { color: #fff; }

/* anything in the top bar (its bottom edge, the search box) keeps a quiet dark border */
.topbar, .topbar * { border-color: var(--dk-line-2) !important; }
.topbar { border-color: var(--dk-line) !important; }
.topbar .form-control, .topbar .app-search input { background: var(--dk-raised) !important; color: var(--dk-strong); }
/* the date / crumb under a page title */
.page-titles .breadcrumb-item, .page-titles .breadcrumb-item.active, .page-titles .breadcrumb-item a { color: var(--dk-muted) !important; }
.page-titles .breadcrumb-item a:hover { color: var(--dk-accent) !important; }

/* modal edges: the theme draws these with a stronger selector */
.modal-content, .modal-header, .modal-footer, .modal-body, .modal .card, .modal hr, .modal .nav-tabs { border-color: var(--dk-line) !important; }
.modal-content { border-color: var(--dk-line-2) !important; }

/* sidebar: menu text, icons and section labels in white */
.sidebar-nav ul li a, .sidebar-nav ul li a .hide-menu, .sidebar-nav ul li a i, .sidebar-nav ul li a .gc-ico,
.sidebar-nav ul li.nav-small-cap, .sidebar-nav ul li.nav-small-cap .hide-menu, .left-sidebar .nav-small-cap,
.sidebar-nav ul ul li a, .sidebar-nav ul ul li a .hide-menu { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.sidebar-nav ul li.nav-small-cap, .left-sidebar .nav-small-cap { opacity: .6; }
.sidebar-nav .has-arrow::after { border-color: #fff; }
/* the open page keeps its gold highlight */
.sidebar-nav > ul > li.active > a, .sidebar-nav > ul > li > a.active, .sidebar-nav ul li.active > a, .sidebar-nav ul li a.active,
.sidebar-nav > ul > li > a.active .hide-menu, .sidebar-nav > ul > li.active > a .hide-menu,
.sidebar-nav ul li a.active .gc-ico, .sidebar-nav ul li a.active i { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* coloured stat cards (customers, bookings, fleet ... headers) were forced white by opatix.css */
.gc-stat, .gc-stat-grey, .gc-stat-green, .gc-stat-blue, .gc-stat-red, .gc-stat-gold, .gc-stat-purple, .gc-stat-pink {
    background: var(--dk-surface) !important; border-color: var(--dk-line) !important; color: var(--dk-text) !important; }
.gc-stat:hover { color: var(--dk-strong) !important; }
.gc-stat .stat-label { color: var(--dk-muted) !important; }
.gc-stat .stat-sub { color: var(--dk-faint) !important; }
.gc-stat .stat-icon { color: var(--dk-text) !important; }

/* more surfaces opatix.css / the skin force to white */
.gc-quick, .gc-hero, .login-split-right { background: var(--dk-surface) !important; color: var(--dk-text) !important; border-color: var(--dk-line) !important; }
.gc-quick-label, .gc-hero-since, .gc-hero-stat-label { color: var(--dk-muted) !important; }
.gc-qa-outline, .gc-qa-btn:not(.gc-qa-primary) { background: var(--dk-raised) !important; color: var(--dk-text) !important; border-color: var(--dk-line-2) !important; }
.gc-qa-outline:hover { background: var(--dk-raised-2) !important; color: #fff !important; }
.login-split-input-wrap { background: var(--dk-raised) !important; border-color: var(--dk-line-2) !important; }
.login-split-input, .login-split-input:focus { color: #fff !important; -webkit-text-fill-color: #fff !important; caret-color: #fff !important; }
.login-split-label { color: var(--dk-text) !important; }
.login-split-title { color: var(--dk-accent) !important; }
.login-split-copyright { color: var(--dk-muted) !important; }
.login-split-subtitle { color: var(--dk-muted) !important; }
.login-split-icon, .login-split-eye { color: var(--dk-faint) !important; }
.login-split-remember, .login-split-remember span { color: var(--dk-muted) !important; }
.login-split-forgot, .login-split-signup-link a { color: var(--dk-accent) !important; }
.login-split-signup-link { color: var(--dk-muted) !important; }
/* the remember-me switch: dark track and knob, gold when on */
.login-split-remember input[type="checkbox"] { background: var(--dk-raised-2) !important; border-color: var(--dk-line-2) !important; box-shadow: none !important; backdrop-filter: none !important; }
.login-split-remember input[type="checkbox"]::before { background: var(--dk-text) !important; }
.login-split-remember input[type="checkbox"]:checked { background: #86764f !important; border-color: #86764f !important; }
.login-split-remember input[type="checkbox"]:checked::before { background: #fff !important; }
/* the browser's own autofill must not turn the field white on a dark card */
.login-split-input:-webkit-autofill, .login-split-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--dk-raised) inset !important; -webkit-text-fill-color: #fff !important; caret-color: #fff; }
@media (max-width: 991px) {
    .left-sidebar, .fix-header .topbar, .topbar .navbar-collapse { background: var(--dk-surface) !important; }
}

/* ---------- Static footer: always visible along the bottom of the page ---------- */
.gc-footer {
    position: fixed; bottom: 0; left: var(--ox-sidenav, 265px); right: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px;
    padding: 9px 24px; font-size: 12px; line-height: 1.4;
    background: var(--dk-surface); color: var(--dk-muted); border-top: 1px solid var(--dk-line);
}
.gc-footer strong { color: var(--dk-accent); font-weight: 600; }
.page-wrapper { padding-bottom: 56px !important; }
@media (max-width: 991px) {
    .gc-footer { left: 0; justify-content: center; text-align: center; padding: 8px 12px; }
    .page-wrapper { padding-bottom: 72px !important; }
}
@media print { .gc-footer { display: none; } }

/* page numbers under tables were nearly invisible */
.page-item .page-link, .pagination .page-link { color: var(--dk-text) !important; background: var(--dk-raised) !important; border-color: var(--dk-line-2) !important; }
.page-item.active .page-link { background: #736544 !important; border-color: #736544 !important; color: #fff !important; }
.page-item.disabled .page-link { color: var(--dk-faint) !important; background: var(--dk-surface) !important; }
.page-item:not(.active):not(.disabled) .page-link:hover { background: var(--dk-raised-2) !important; color: #fff !important; }

/* tighter gap between the end of the page and the footer */
.page-wrapper { padding-bottom: 38px !important; }
.page-wrapper > .container-fluid { padding-bottom: 6px !important; }
@media (max-width: 991px) { .page-wrapper { padding-bottom: 56px !important; } }

/* breadcrumb separator: a small chevron, centred on the text line */
.page-titles .breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.breadcrumb-item + .breadcrumb-item::before {
    content: "" !important; font-family: inherit !important;
    display: inline-block; width: 6px; height: 6px; padding: 0; margin: 0 10px 0 6px;
    border-top: 1.5px solid var(--dk-faint); border-right: 1.5px solid var(--dk-faint);
    transform: rotate(45deg); vertical-align: middle;
}
.breadcrumb-item { display: flex; align-items: center; }
.breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.breadcrumb { align-items: center; }

/* ---------- Phone: filter pills sit in an even grid (4 -> 2 x 2, 6 -> 3 x 3) ---------- */
@media (max-width: 575px) {
    .gc-filter-bar .gc-pills, .gc-pills {
        display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%;
    }
    .gc-pills > .gc-pill {
        display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; width: 100%; margin: 0;
        padding: 10px 8px; text-align: center; white-space: nowrap;
    }
    /* 3, 5, 6 or more pills: three across, with the wording a little smaller */
    .gc-pills:has(> .gc-pill:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gc-pills:has(> .gc-pill:nth-child(3)) > .gc-pill { font-size: 12px; padding: 9px 4px; gap: 4px; }
    .gc-pills:has(> .gc-pill:nth-child(3)) > .gc-pill span { font-size: 11px; padding: 1px 6px; }
    /* exactly 4 pills: back to two across, normal size */
    .gc-pills:has(> .gc-pill:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gc-pills:has(> .gc-pill:nth-child(4):last-child) > .gc-pill { font-size: inherit; padding: 10px 8px; }
    .gc-pills:has(> .gc-pill:nth-child(4):last-child) > .gc-pill span { font-size: inherit; padding: 1px 8px; }
}

/* ---------- Phone: the breadcrumb never grows past two links (Home > Page stays tidy; a third page shows "Section > Page") ---------- */
@media (max-width: 575px) {
    .breadcrumb { flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
    .breadcrumb > .breadcrumb-item:not(:nth-last-child(-n+2)) { display: none !important; }
    .breadcrumb > .breadcrumb-item:nth-last-child(2)::before { display: none !important; }
    .breadcrumb > .breadcrumb-item { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .breadcrumb > .breadcrumb-item:nth-last-child(2) { flex: 0 1 auto; }
    .breadcrumb > .breadcrumb-item:last-child { flex: 0 1 auto; }
}

/* ---------- Form fields inside modals / wizards were still white: make the dark fields win everywhere ---------- */
html body .form-control, html body .custom-select, html body select.form-control, html body textarea.form-control,
html body input.form-control, html body .modal .form-control, html body .modal select, html body .modal textarea,
html body .modal input[type=text], html body .modal input[type=number], html body .modal input[type=email], html body .modal input[type=tel],
html body .modal input[type=password], html body .modal input[type=date], html body .modal input[type=time], html body .modal input[type=search],
html body .modal-body .form-control {
    background-color: var(--dk-raised) !important; color: var(--dk-strong) !important; border-color: var(--dk-line-2) !important; }
html body .form-control:focus, html body .modal .form-control:focus, html body .modal input:focus, html body .modal select:focus, html body .modal textarea:focus {
    background-color: var(--dk-raised-2) !important; color: #fff !important; border-color: #736544 !important; }
html body .form-control:disabled, html body .form-control[readonly], html body .modal input:disabled, html body .modal select:disabled {
    background-color: var(--dk-surface) !important; color: var(--dk-faint) !important; }
html body .form-control::placeholder, html body .modal input::placeholder, html body .modal textarea::placeholder { color: var(--dk-faint) !important; opacity: 1; }
html body .modal .modal-body, html body .modal .modal-body p, html body .modal .modal-body .help-block { color: var(--dk-text); }
html body .modal .modal-body label, html body .modal .modal-body .control-label { color: var(--dk-muted); }

/* wizard step bar (customer / carwash / fleet forms) */
#gc-vw-progress .gc-vw-dot { color: var(--dk-muted); }
#gc-vw-progress .gc-vw-num { background: var(--dk-raised-2); color: var(--dk-text); border: 1px solid var(--dk-line-2); }
#gc-vw-progress .gc-vw-dot.is-current { color: #fff; }
#gc-vw-progress .gc-vw-dot.is-current .gc-vw-num { background: #736544; border-color: #736544; color: #fff; }
#gc-vw-progress .gc-vw-dot.is-done .gc-vw-num { background: #5e5337; border-color: #736544; color: #fff; }
.gc-vw-btn.btn-secondary, #gc-vw-back { background: #505152 !important; border-color: #505152 !important; color: #fff !important; }
#gc-vw-next, #gc-vw-next.btn-danger, .gc-vw-btn.btn-danger, .gc-vw-btn.btn-primary {
    background-image: var(--ee-gradient-button) !important; background-color: #736544 !important; border-color: transparent !important; color: #fff !important; }
#gc-vw-next.gc-vw-locked { opacity: .5; filter: none; }

/* ---------- Row action buttons (view / edit / delete): one calm grey, icons clearly visible ---------- */
html body .a2-actions .btn, html body td .btn-outline-danger.btn-sm, html body td .btn-outline-primary.btn-sm, html body td .btn-outline-secondary.btn-sm,
html body .gc-stack td.a2-actions .btn {
    background: #505152 !important; border: 1px solid #68696a !important; color: #f5f5f5 !important; }
html body .a2-actions .btn i, html body td .btn-outline-danger.btn-sm i, html body td .btn-outline-primary.btn-sm i, html body td .btn-outline-secondary.btn-sm i {
    color: #f5f5f5 !important; opacity: 1 !important; font-size: 15px; }
html body .a2-actions .btn:hover, html body td .btn-outline-danger.btn-sm:hover, html body td .btn-outline-primary.btn-sm:hover, html body td .btn-outline-secondary.btn-sm:hover {
    background: #68696a !important; border-color: #8a8b8c !important; color: #fff !important; }

/* ---------- Detail-page header (customer, driver, deal ...): picture up beside the name, dark chips ---------- */
html body .gc-hero-id { align-items: flex-start !important; }
html body .gc-hero-avatar { margin-top: 2px; }
html body .gc-hero-badge { background: var(--dk-raised-2) !important; border: 1px solid var(--dk-line-2) !important; color: var(--dk-strong) !important; }
html body .gc-hero-badge i { color: var(--dk-accent) !important; }
html body .gc-hero-since { color: var(--dk-muted) !important; }
html body .gc-hero .btn-default, html body .gc-hero .btn-light { background: #505152 !important; border-color: #68696a !important; color: #f5f5f5 !important; }
/* any other chip / tag / icon-tile still painted white or near-white */
html body .gc-tag, html body .gc-chip, html body .gc-ico-box, html body .gc-icon-tile, html body .gc-panel-row .icon, html body .gc-vcard-chip,
html body .badge-light, html body .badge-white, html body .label-light { background: var(--dk-raised-2) !important; color: var(--dk-strong) !important; border-color: var(--dk-line-2) !important; }
html body .gc-panel-head i, html body .gc-panel-row .label i, html body .stat-icon, html body .gc-hero i { color: var(--dk-accent); }

/* status badge and "since ..." date share one line under the name */
html body .gc-hero-meta { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; margin-top: 8px; min-width: 0; }
html body .gc-hero-meta .badge { flex: none; margin: 0; }
html body .gc-hero-meta .gc-hero-since { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 12px; }

/* breadcrumb links in the same gold-brown as the page titles */
html body .page-titles .breadcrumb-item, html body .page-titles .breadcrumb-item a, html body .page-titles .breadcrumb-item.active,
html body .breadcrumb-item, html body .breadcrumb-item a, html body .breadcrumb-item.active { color: var(--dk-accent) !important; }
html body .breadcrumb-item a:hover, html body .page-titles .breadcrumb-item a:hover { color: #e8dcb8 !important; text-decoration: none; }

/* ---------- Loading dots: always dead centre of the thing that is loading (they sat off to one side) ---------- */
html body .loading:after, html body .loading-before:before, html body .loading-before-centre:before, html body .loading-tabs:before,
html body .loading-placeholder:after {
    left: 50% !important; right: auto !important; transform: translateX(-50%); margin: 0 !important;
    /* light dots so they show on the dark background */
    filter: brightness(0) invert(.85);
}
html body .loading-placeholder:after { position: absolute; }
html body .loading, html body .loading-before, html body .loading-before-centre, html body .loading-tabs { min-height: 48px; }
html body .loading:after, html body .loading-before:before, html body .loading-before-centre:before, html body .loading-tabs:before { top: 12px; }
html body #commonModalBody.loading:after, html body #commonModalBody.loading-before:before, html body #commonModalBody.loading-before-centre:before { top: 40px; }

/* ---------- Empty states: a search-off icon, centred, with the message under it ---------- */
html body .page-notification { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px 12px; width: 100%; }
html body .page-notification .gc-empty-ico { font-size: 46px; line-height: 1; color: var(--dk-faint); margin-bottom: 10px; display: block; }
html body .page-notification .title { color: var(--dk-text); font-size: 14px; font-weight: 500; }
html body .page-notification .sub-title { color: var(--dk-muted); font-size: 12px; margin-top: 4px; }
html body td > .page-notification, html body td.gc-stack-empty .page-notification { margin: 0 auto; }

/* ---------- Dashboard cards: plain dark cards, no coloured fills (only the small icon chip keeps its colour) ---------- */
html body .cx-kpi { background: var(--dk-surface) !important; border: 1px solid var(--dk-line) !important; box-shadow: var(--ox-shadow); }
html body .cx-kpi:hover { border-color: var(--dk-line-2) !important; }
html body .cx-kpi .l { color: var(--dk-muted); }
html body .cx-kpi .n { color: var(--dk-faint); }
html body .cx-attn { background: var(--dk-surface) !important; border-color: var(--dk-line) !important; }

/* phone: a proper gap between the top bar and the page heading */
@media (max-width: 767.98px) {
    html body .cx-home .page-titles, html body .page-titles { margin-top: 26px !important; }
    html body .cx-home .page-titles { padding-top: 0 !important; }
}

/* ---------- Phone / tablet menu drawer: dark panel, white text (the base stylesheet painted it white) ---------- */
@media (max-width: 991.98px) {
    html body .left-sidebar, html body .mini-sidebar .left-sidebar, html body.show-sidebar .left-sidebar {
        background: var(--dk-surface) !important; border: 0 !important; color: #fff; }
    html body .left-sidebar .scroll-sidebar, html body .left-sidebar .sidebar-nav, html body .left-sidebar #main-scroll-sidebar,
    html body .left-sidebar #sidebarnav, html body .left-sidebar .gc-drawer-logo { background: transparent !important; }
    html body .left-sidebar .sidebar-nav ul li a, html body .left-sidebar .sidebar-nav ul li a .hide-menu,
    html body .mini-sidebar .sidebar-nav #sidebarnav > li > a { color: #fff !important; -webkit-text-fill-color: #fff !important; }
    html body .left-sidebar .sidebar-nav ul li a i, html body .left-sidebar .sidebar-nav ul li a .gc-ico { color: #d4d4d4 !important; }
    html body .left-sidebar .sidebar-nav ul li.gc-nav-section .hide-menu, html body .mini-sidebar .sidebar-nav ul li.gc-nav-section .hide-menu {
        color: rgba(255, 255, 255, .6) !important; -webkit-text-fill-color: rgba(255, 255, 255, .6) !important; }
    html body .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a, html body .left-sidebar .sidebar-nav ul li a:not(.active):hover { background: var(--dk-raised) !important; }
    html body .left-sidebar .sidebar-nav ul li.active > a, html body .left-sidebar .sidebar-nav ul li a.active { background: var(--dk-accent-bg) !important; }
    html body .left-sidebar .ps__thumb-y { background: rgba(255, 255, 255, .25) !important; }
}

/* ---------- Phone: the currency label ("KES") is small next to the amount ---------- */
@media (max-width: 767.98px) {
    html body .gc-cur { font-size: .58em; font-weight: 600; letter-spacing: .02em; opacity: .85; margin-right: 1px; }
}

/* ---------- Info note: soft translucent white, not yellow ---------- */
html body .gc-note { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-left: 3px solid rgba(255, 255, 255, .45);
    border-radius: 6px; padding: 10px 14px; color: #e5e5e5; font-size: 13px; line-height: 1.5; }
html body .gc-note strong { color: #fff; }

/* phone: the breadcrumb links a touch smaller so long page names stay on one line */
@media (max-width: 767.98px) {
    html body .breadcrumb-item, html body .breadcrumb-item a, html body .page-titles .breadcrumb-item,
    html body .page-titles .breadcrumb-item a, html body .page-titles .breadcrumb-item.active { font-size: 12px !important; }
    html body .breadcrumb-item + .breadcrumb-item::before { width: 5px; height: 5px; margin: 0 7px 0 4px; }
}

/* phone: a breadcrumb that would drop under the heading is hidden (see the script in layout/wrapper.blade.php) */
html body .breadcrumb.gc-crumb-hide { display: none !important; }

/* phone: five pills (Brokerage) = 3 on the first row, 2 on the second, each row filling the width; long names wrap instead of spilling out */
@media (max-width: 575px) {
    html body .gc-pills > .gc-pill { white-space: normal !important; line-height: 1.2; flex-wrap: wrap; text-align: center; }
    html body .gc-pills:has(> .gc-pill:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    html body .gc-pills:has(> .gc-pill:nth-child(5):last-child) > .gc-pill { grid-column: span 2; }
    html body .gc-pills:has(> .gc-pill:nth-child(5):last-child) > .gc-pill:nth-child(n+4) { grid-column: span 3; }
    html body .gc-pills > .gc-pill span { flex: none; }
    html body .gc-filter-bar .gc-filter-actions .btn { gap: 8px; }
}

/* ---------- Select2 drop-downs (every theme variant): dark list, brown highlight instead of blue ---------- */
html body [class*="select2-container--"] .select2-dropdown, html body .select2-dropdown,
html body [class*="select2-container--"] .select2-results, html body [class*="select2-container--"] .select2-results__options {
    background: var(--dk-raised) !important; color: var(--dk-text) !important; border-color: var(--dk-line-2) !important; }
html body .select2-dropdown { box-shadow: 0 10px 30px rgba(0, 0, 0, .6); border-radius: 4px; overflow: hidden; }
html body [class*="select2-container--"] .select2-results__option { background: transparent !important; color: var(--dk-text) !important; padding: 9px 14px; }
html body [class*="select2-container--"] .select2-results__option--highlighted,
html body [class*="select2-container--"] .select2-results__option--highlighted[aria-selected],
html body [class*="select2-container--"] .select2-results__option[aria-selected="true"].select2-results__option--highlighted,
html body [class*="select2-container--"] .select2-results__option:hover {
    background: #736544 !important; color: #fff !important; }
html body [class*="select2-container--"] .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted),
html body [class*="select2-container--"] .select2-results__option--selected:not(.select2-results__option--highlighted) {
    background: var(--dk-accent-bg) !important; color: var(--dk-accent) !important; }
html body [class*="select2-container--"] .select2-results__option--disabled, html body [class*="select2-container--"] .select2-results__option[aria-disabled="true"] { color: var(--dk-faint) !important; }
html body [class*="select2-container--"] .select2-search--dropdown .select2-search__field {
    background: var(--dk-surface) !important; color: var(--dk-strong) !important; border-color: var(--dk-line-2) !important; }
html body [class*="select2-container--"] .select2-selection, html body [class*="select2-container--"] .select2-selection--single {
    background: var(--dk-raised) !important; border-color: var(--dk-line-2) !important; }
html body [class*="select2-container--"] .select2-selection__rendered { color: var(--dk-strong) !important; }
html body [class*="select2-container--"] .select2-selection__placeholder { color: var(--dk-faint) !important; }
html body [class*="select2-container--"] .select2-selection__arrow b, html body [class*="select2-container--"] .select2-selection__arrow b::after { border-top-color: var(--dk-muted) !important; border-bottom-color: var(--dk-muted) !important; }
html body [class*="select2-container--"].select2-container--focus .select2-selection, html body [class*="select2-container--"].select2-container--open .select2-selection { border-color: #736544 !important; }
html body [class*="select2-container--"] .select2-selection--multiple .select2-selection__choice { background: #5e5337 !important; border-color: #736544 !important; color: #fff !important; }
html body [class*="select2-container--"] .select2-selection__choice__remove { color: #e5e5e5 !important; }
/* the browser's own <select> lists (where Select2 is not used) */
html body select { accent-color: #736544; color-scheme: dark; }
html body select option, html body select optgroup { background-color: var(--dk-raised); color: var(--dk-strong); }
html body select option:checked, html body select option:hover { background: #736544 linear-gradient(#736544, #736544); color: #fff; }

/* ---------- Vehicle detail card + Revenue Summary: dark, readable, evenly arranged ---------- */
html body .gc-vs-name { color: var(--dk-strong); }
html body .gc-vs-plate { background: #5e5337; color: #f3e6b8; border: 1px solid #736544; }
html body .gc-vs-tag { background: var(--dk-raised-2); color: var(--dk-text); border: 1px solid var(--dk-line-2); }
html body .gc-vs-investor-strip { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: var(--dk-text); }
html body .gc-vs-investor-strip strong { color: #fff; }
html body .gc-vs-investor-strip i, html body .gc-vs-investor-strip a { color: var(--dk-accent); }
html body .gc-vs-table thead th { background: var(--dk-raised); color: var(--dk-muted); }
html body .gc-vs-table tbody tr:hover td { background: var(--dk-raised); }
html body .gc-row-overdue td { background: rgba(248, 113, 113, .08) !important; }

/* revenue summary: three equal tiles, same height, labels on one line */
html body .gc-vs-rev-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 8px 18px 18px; }
html body .gc-vs-rev-card { background: var(--dk-raised) !important; border: 1px solid var(--dk-line-2); border-radius: 6px; padding: 14px 6px; min-width: 0; width: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
html body .gc-vs-rev-val { font-size: clamp(12px, 3.6vw, 15px); font-weight: 800; white-space: nowrap; }
html body .gc-vs-rev-green .gc-vs-rev-val { color: #34d399; }
html body .gc-vs-rev-red .gc-vs-rev-val { color: #f87171; }
html body .gc-vs-rev-label { color: var(--dk-muted); font-size: 9.5px; letter-spacing: .04em; margin: 0; white-space: nowrap; }
/* the phone stylesheet turns these into rows; keep three even tiles instead */
@media (max-width: 767.98px) {
    html body .gc-fl .gc-vs-rev-row { flex-direction: unset; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    html body .gc-fl .gc-vs-rev-card { flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 12px 4px; }
    html body .gc-fl .gc-vs-rev-card .gc-vs-rev-val { order: 1; text-align: center; }
    html body .gc-fl .gc-vs-rev-card .gc-vs-rev-label { order: 2; }
}

/* ---------- Vehicle detail: status + Retire / Edit / All Vehicles sit under the details card ---------- */
html body .gc-vs-actions { padding: 4px 18px 18px; border-top: 1px solid var(--dk-line); margin-top: 6px; }
html body .gc-vs-actions #list-page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; padding-top: 14px; }
html body .gc-vs-actions #list-page-actions > .badge { flex: 0 0 100%; margin: 0 !important; padding: 7px 10px !important; text-align: center; border-radius: 4px; font-size: 13px; }
html body .gc-vs-actions #list-page-actions > :not(.btn):not(.badge) { flex: 0 0 100%; }
html body .gc-vs-actions .btn { flex: 1 1 calc(50% - 4px); min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0 !important; }
html body .gc-vs-actions a.btn:last-child { flex: 0 0 100%; }
html body .gc-vs-actions .btn-outline-secondary, html body .gc-vs-actions .btn-outline-default, html body .gc-vs-actions .btn-outline-success.ajax-request {
    background: #505152 !important; border: 1px solid #68696a !important; color: #f5f5f5 !important; }
html body .gc-vs-actions .btn-outline-secondary:hover, html body .gc-vs-actions .btn-outline-default:hover { background: #68696a !important; color: #fff !important; }
html body .gc-vs-actions .btn-outline-success.edit-add-modal-button {
    background-image: var(--ee-gradient-button) !important; background-color: #736544 !important; border-color: transparent !important; color: #fff !important; }
html body .gc-vs-actions .btn i { color: inherit !important; }

/* Fleet pages: the crumb trail goes to the far right of the heading row, and is left out on phones */
html body .gc-fl .page-titles #breadcrumbs { flex: 0 0 100% !important; max-width: 100% !important; width: 100%; display: flex !important; align-items: center; justify-content: space-between; }
html body .gc-fl .page-titles #breadcrumbs > .breadcrumb { margin-left: auto !important; justify-content: flex-end; }
@media (max-width: 767.98px) {
    html body .gc-fl .page-titles #breadcrumbs > .breadcrumb { display: none !important; }
}

/* ==========================================================================
   VEHICLE PAGE (fleet/vehicles/show): one hero card, a money row, then the tables
   ========================================================================== */
html body .gc-vp { display: flex; flex-direction: column; gap: 20px; }
html body .gc-vp > .gc-panel, html body .gc-vp > div > .gc-panel, html body .gc-vp .gc-panel { margin-bottom: 0; }
html body .gc-vp > #vehicle-documents-tab-content > .card { margin-bottom: 0; }

/* hero */
html body .gc-vp-hero { padding: 22px 24px 20px; }
html body .gc-vp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
html body .gc-vp-id { min-width: 0; flex: 1 1 320px; }
html body .gc-vp-hero .gc-vs-name { font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--dk-strong); }
html body .gc-vp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
html body .gc-vp-chips .badge { margin: 0 !important; padding: 6px 12px !important; font-size: 12px; }
html body .gc-vp-hero .gc-vs-investor-strip { margin-top: 14px; display: inline-flex; }
html body .gc-vp-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; align-self: flex-start; }
html body .gc-vp-actions .btn { min-height: 40px; padding: 8px 16px; display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; }
html body .gc-vp-actions .btn-outline-secondary, html body .gc-vp-actions .btn-outline-default, html body .gc-vp-actions .btn-outline-success.ajax-request {
    background: #505152 !important; border: 1px solid #68696a !important; color: #f5f5f5 !important; }
html body .gc-vp-actions .btn-outline-secondary:hover, html body .gc-vp-actions .btn-outline-default:hover { background: #68696a !important; color: #fff !important; }
html body .gc-vp-actions .btn-outline-success.edit-add-modal-button {
    background-image: var(--ee-gradient-button) !important; background-color: #736544 !important; border-color: transparent !important; color: #fff !important; }
html body .gc-vp-actions .btn i { color: inherit !important; }

/* the four specs: even tiles */
html body .gc-vp-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--dk-line); }
html body .gc-vp-spec { display: flex; align-items: center; gap: 12px; background: var(--dk-raised); border: 1px solid var(--dk-line); border-radius: 6px; padding: 14px 16px; min-width: 0; }
html body .gc-vp-spec > i { font-size: 20px; color: var(--dk-accent); flex: none; }
html body .gc-vp-spec > div, html body .gc-vp-kpi > div { display: flex; flex-direction: column; min-width: 0; }
html body .gc-vp-spec span, html body .gc-vp-kpi span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--dk-muted); font-weight: 600; }
html body .gc-vp-spec strong { font-size: 16px; color: var(--dk-strong); font-weight: 700; overflow-wrap: anywhere; }

/* money row: three even tiles */
html body .gc-vp-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html body .gc-vp-kpi { display: flex; align-items: center; gap: 14px; background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: 4px; padding: 18px 20px; box-shadow: var(--ox-shadow); min-width: 0; }
html body .gc-vp-kpi > i { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
html body .gc-vp-kpi strong { font-size: 22px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
html body .gc-vp-up > i { background: rgba(52, 211, 153, .16); color: #34d399; } html body .gc-vp-up strong { color: #34d399; }
html body .gc-vp-down > i { background: rgba(248, 113, 113, .16); color: #f87171; } html body .gc-vp-down strong { color: #f87171; }

/* tables below: calmer empty states */
html body .gc-vp .page-notification { padding: 22px 12px; }
html body .gc-vp .gc-panel-head, html body .gc-vp #vehicle-documents-tab-content .card-title { font-size: 14px; }
html body .gc-vp #vehicle-documents-tab-content .card-title { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--dk-text); }

@media (max-width: 991.98px) {
    html body .gc-vp-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    html body .gc-vp { gap: 14px; }
    html body .gc-vp-hero { padding: 16px; }
    html body .gc-vp-hero .gc-vs-name { font-size: 20px; }
    html body .gc-vp-top { flex-direction: column; align-items: stretch; gap: 14px; }
    html body .gc-vp-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    html body .gc-vp-actions .btn { justify-content: center; min-height: 44px; }
    html body .gc-vp-actions a.btn:last-child { grid-column: 1 / -1; }
    html body .gc-vp-specs { gap: 8px; margin-top: 14px; padding-top: 14px; }
    html body .gc-vp-spec { padding: 12px; gap: 10px; }
    html body .gc-vp-money { grid-template-columns: 1fr; gap: 10px; }
    html body .gc-vp-kpi { padding: 14px 16px; }
}

/* vehicle page lists: five rows show, anything more scrolls inside the card (header stays put) */
html body .gc-vp-scroll { max-height: 322px; overflow-y: auto !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
html body .gc-vp-scroll table { margin-bottom: 0; }
html body .gc-vp-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--dk-surface) !important; box-shadow: 0 1px 0 var(--dk-line); }
html body .gc-vp-scroll tbody tr { height: 55px; }
@media (max-width: 767.98px) { html body .gc-vp-scroll { max-height: 300px; } }

/* vehicle page, phone: no dead space (the name block was keeping a 320px-tall basis once stacked) */
@media (max-width: 767.98px) {
    html body .gc-vp-id { flex: 0 0 auto !important; }
    html body .gc-vp-top { gap: 12px; }
    html body .gc-vp-chips { margin-top: 8px; gap: 6px; }
    html body .gc-vp-hero .gc-vs-investor-strip { margin-top: 10px; }
    html body .gc-vp-actions { gap: 6px; }
    html body .gc-vp-actions .btn { min-height: 40px; }
    html body .gc-vp-hero { padding: 14px; }
    html body .gc-vp-specs { margin-top: 12px; padding-top: 12px; }
}

/* phone: money figures - "KES" smaller still, sitting on the baseline of the number */
@media (max-width: 767.98px) {
    html body .gc-vp-kpi strong .gc-cur, html body .gc-vp-spec strong .gc-cur { font-size: .5em; margin-right: 3px; vertical-align: baseline; }
}

/* vehicle page, phone: the table cards stay real tables and scroll sideways inside their card */
@media (max-width: 767.98px) {
    html body .gc-vp-scroll { overflow-x: auto !important; overflow-y: auto !important; max-width: 100%; }
    html body .gc-vp-scroll table.gc-stack { display: table !important; width: max-content !important; min-width: 100% !important; overflow: visible !important; }
    html body .gc-vp-scroll table.gc-stack thead { display: table-header-group !important; }
    html body .gc-vp-scroll table.gc-stack tbody { display: table-row-group !important; width: auto !important; }
    html body .gc-vp-scroll table.gc-stack tr { display: table-row !important; width: auto !important; }
    html body .gc-vp-scroll table.gc-stack th, html body .gc-vp-scroll table.gc-stack td {
        display: table-cell !important; width: auto !important; max-width: none !important; white-space: nowrap !important; text-align: left !important; padding: 12px 14px !important; }
    html body .gc-vp-scroll table.gc-stack td::before { content: none !important; display: none !important; }
}

/* phone / tablet drawer: the open page is a soft translucent white, not brown */
@media (max-width: 991.98px) {
    html body .left-sidebar .sidebar-nav > ul > li.active > a, html body .left-sidebar .sidebar-nav > ul > li > a.active,
    html body .left-sidebar .sidebar-nav ul li.active > a, html body .left-sidebar .sidebar-nav ul li a.active,
    html body .mini-sidebar .left-sidebar .sidebar-nav ul li.active > a {
        background: rgba(255, 255, 255, .12) !important; color: #fff !important; }
    html body .left-sidebar .sidebar-nav ul li a:not(.active):hover, html body .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a {
        background: rgba(255, 255, 255, .07) !important; }
}

/* ---------- Phone: Fleet list tables (investors, vehicles ...) get compact one-line rows like Customers ---------- */
@media (max-width: 767.98px) {
    html body .gc-fl table.gc-stack td, html body .gc-fl table.gc-stack th {
        white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; padding: 12px 14px !important; vertical-align: middle; }
    html body .gc-fl table.gc-stack td.gc-stack-title { padding-bottom: 12px !important; }
    html body .gc-fl table.gc-stack td.gc-stack-title > a, html body .gc-fl table.gc-stack td.gc-stack-title a { min-height: 0; padding: 0; font-size: 14px; display: inline; }
    html body .gc-fl table.gc-stack td.gc-stack-actions { padding-top: 12px !important; text-align: right !important; }
    html body .gc-fl table.gc-stack td.gc-stack-actions .list-table-action { display: inline-flex !important; flex-wrap: nowrap !important; gap: 6px; justify-content: flex-end; }
    html body .gc-fl table.gc-stack td.gc-stack-actions .btn { min-height: 36px; min-width: 38px; padding: 6px 10px; }
    html body .gc-fl table.gc-stack td .d-flex { flex-wrap: nowrap !important; }
    html body .gc-fl table.gc-stack td .gc-avatar { flex: none; width: 36px; height: 36px; }
    html body .gc-fl table.gc-stack tbody tr { height: auto !important; }
}

/* dividers inside forms: a mild grey line, not white */
html body .line, html body .modal .modal-dialog .modal-body .line { border-top: 1px solid #4a4b4c !important; border-color: #4a4b4c !important; }
html body .modal .modal-dialog .modal-body .highlighted-panel, html body .highlighted-panel { background-color: var(--dk-raised) !important; color: var(--dk-text); }
html body .modal-body hr, html body .modal hr { border-top: 1px solid #4a4b4c !important; opacity: 1; }

/* ---------- Page numbers under list pages (phones included) ---------- */
html body .gc-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 0 24px; }
html body .gc-pager-links { max-width: 100%; }
html body .gc-pager .pagination { margin: 0; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 767.98px) {
    html body .gc-pager { flex-direction: column; align-items: center; gap: 10px; padding: 12px 0 20px; }
    html body .gc-pager .pagination { justify-content: center; }
    html body .gc-pager .page-link { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ---------- Smart search drop-down (list pages; same look as Customers) ---------- */
html body .gc-search-wrap { position: relative; flex: 1 1 220px; min-width: 0; }
html body .gc-search-wrap > .form-control, html body .gc-search-wrap > input { width: 100% !important; max-width: none; }
html body .gc-suggest { position: absolute; z-index: 1050; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
    background: var(--dk-raised); border: 1px solid var(--dk-line-2); border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); max-height: 320px; overflow-y: auto; }
html body .gc-suggest[hidden] { display: none; }
html body .gc-suggest li { padding: 9px 10px; border-radius: 4px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; color: var(--dk-text); }
html body .gc-suggest li:hover, html body .gc-suggest li.on { background: #5e5337; color: #fff; }
html body .gc-suggest .s-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .gc-suggest .s-sub { font-size: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html body .gc-suggest .s-none { cursor: default; opacity: .7; }
html body .gc-suggest .s-none:hover { background: transparent; color: var(--dk-text); }
html body .gc-suggest mark { background: rgba(201, 185, 141, .4); color: inherit; padding: 0; border-radius: 2px; }

/* ---------- Dashboard cards with a list (donut legends, status mix): five rows show, any more scroll inside the card ---------- */
html body .cx-legend { max-height: 142px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
html body .cx-legend::-webkit-scrollbar { width: 6px; }
html body .cx-feed, html body .cx-lines { max-height: 300px; overflow-y: auto; padding-right: 6px; }

/* ==========================================================================
   CALENDAR (FullCalendar): dark grid, dark buttons, brown highlights
   ========================================================================== */
html body .fc, html body .calendar .fc {
    --fc-page-bg-color: var(--dk-surface); --fc-neutral-bg-color: var(--dk-raised); --fc-neutral-text-color: var(--dk-muted);
    --fc-border-color: var(--dk-line-2); --fc-today-bg-color: rgba(201, 185, 141, .14); --fc-highlight-color: rgba(201, 185, 141, .18);
    --fc-non-business-color: rgba(0, 0, 0, .18); --fc-bg-event-color: #736544; --fc-bg-event-opacity: .3;
    --fc-event-bg-color: #736544; --fc-event-border-color: #736544; --fc-event-text-color: #fff;
    --fc-list-event-hover-bg-color: var(--dk-raised); --fc-more-link-bg-color: var(--dk-raised-2); --fc-now-indicator-color: #f87171;
    --fc-button-bg-color: #505152; --fc-button-border-color: #68696a; --fc-button-text-color: #f5f5f5;
    --fc-button-hover-bg-color: #68696a; --fc-button-hover-border-color: #8a8b8c; --fc-button-active-bg-color: #736544; --fc-button-active-border-color: #736544;
    color: var(--dk-text);
}
html body .fc table, html body .fc .fc-scrollgrid, html body .fc td, html body .fc th { border-color: var(--dk-line-2) !important; }
html body .fc .fc-view-harness, html body .fc .fc-scrollgrid, html body .fc .fc-daygrid-day, html body .fc .fc-timegrid-slot, html body .fc .fc-list { background: var(--dk-surface); }
html body .fc .fc-col-header-cell { background: var(--dk-raised); }
html body .fc .fc-col-header-cell-cushion, html body .fc .fc-daygrid-day-number, html body .fc .fc-timegrid-axis-cushion, html body .fc .fc-timegrid-slot-label-cushion { color: var(--dk-text) !important; text-decoration: none; }
html body .fc .fc-col-header-cell-cushion { color: var(--dk-muted) !important; font-weight: 600; }
html body .fc .fc-day-other .fc-daygrid-day-top, html body .fc .fc-day-other .fc-daygrid-day-number { opacity: .4; }
html body .fc .fc-day-today { background: rgba(201, 185, 141, .14) !important; }
html body .fc .fc-day-today .fc-daygrid-day-number { color: #fff !important; font-weight: 700; }
html body .fc .fc-toolbar-title, html body .fc h2 { color: var(--dk-strong) !important; }
html body .fc .fc-list-day-cushion, html body .fc .fc-list-table th { background: var(--dk-raised) !important; color: var(--dk-text) !important; }
html body .fc .fc-list-event td { color: var(--dk-text); }
html body .fc .fc-list-event:hover td { background: var(--dk-raised) !important; }
html body .fc .fc-list-empty { background: var(--dk-surface); color: var(--dk-muted); }
html body .fc .fc-popover { background: var(--dk-raised); border-color: var(--dk-line-2); }
html body .fc .fc-popover-header { background: var(--dk-raised-2); color: var(--dk-strong); }
html body .fc .fc-more-link { color: var(--dk-accent); }
html body .fc .fc-event { border-color: #736544; }

/* the buttons (the theme paints them pale blue with !important) */
html body .calendar .fc-button, html body .fc .fc-button {
    background-color: #505152 !important; border: 1px solid #68696a !important; color: #f5f5f5 !important; border-radius: 4px; box-shadow: none !important; }
html body .calendar .fc-button:hover, html body .fc .fc-button:hover { background-color: #68696a !important; color: #fff !important; }
html body .calendar .fc-button.fc-button-active, html body .fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: #736544 !important; border-color: #736544 !important; color: #fff !important; }
html body .calendar .fc-button:disabled { opacity: .5; }
html body .calendar .fc-custom_button_add_event-button {
    background: var(--ee-gradient-button) !important; background-color: #736544 !important; border: 1px solid transparent !important; color: #fff !important; }

/* ---------- Form strips and the rich-text editor (TinyMCE) ---------- */
html body .modal-selector, html body .modal .modal-dialog .modal-body .modal-selector { background-color: var(--dk-raised) !important; color: var(--dk-text); }
html body .modal-selector label, html body .modal-selector .control-label { color: var(--dk-text); }
html body .mce-tinymce, html body .mce-container, html body .mce-panel, html body .mce-toolbar, html body .mce-toolbar-grp, html body .mce-statusbar, html body .mce-menubar,
html body .mce-stack-layout, html body .mce-btn-group, html body .mce-flow-layout, html body .mce-container-body {
    background: var(--dk-surface) !important; border-color: var(--dk-line-2) !important; color: var(--dk-text) !important; box-shadow: none !important; }
html body .mce-tinymce { border: 1px solid var(--dk-line-2) !important; border-radius: 4px; }
html body .mce-edit-area, html body .mce-edit-area iframe { background: var(--dk-raised) !important; border-color: var(--dk-line-2) !important; }
html body .mce-btn { background: transparent !important; border-color: transparent !important; }
html body .mce-btn:hover, html body .mce-btn:focus, html body .mce-btn.mce-active, html body .mce-btn.mce-active:hover {
    background: var(--dk-raised-2) !important; border-color: var(--dk-line-2) !important; }
html body .mce-btn button, html body .mce-btn .mce-txt, html body .mce-ico, html body .mce-caret { color: var(--dk-text) !important; }
html body .mce-caret { border-top-color: var(--dk-text) !important; }
html body .mce-menu, html body .mce-floatpanel, html body .mce-window, html body .mce-window .mce-container-body { background: var(--dk-raised) !important; border-color: var(--dk-line-2) !important; }
html body .mce-menu-item, html body .mce-menu-item .mce-text { color: var(--dk-text) !important; background: transparent !important; }
html body .mce-menu-item:hover, html body .mce-menu-item.mce-selected, html body .mce-menu-item:focus { background: #5e5337 !important; }
html body .mce-menu-item:hover .mce-text { color: #fff !important; }
html body .mce-textbox, html body .mce-combobox input { background: var(--dk-surface) !important; color: var(--dk-strong) !important; border-color: var(--dk-line-2) !important; }
html body .mce-label, html body .mce-title { color: var(--dk-text) !important; }
html body .mce-path .mce-txt { color: var(--dk-muted) !important; }

/* ---------- Side panels (calendar settings, filters ...): dark, and never wider than the phone ---------- */
html body .right-sidebar, html body .right-sidebar .slimscrollright, html body .right-sidebar .r-panel-body { background: var(--dk-surface) !important; color: var(--dk-text); }
html body .right-sidebar .rpanel-title { background: var(--dk-raised) !important; color: var(--dk-strong) !important; border-color: var(--dk-line) !important; }
html body .right-sidebar .rpanel-title i { color: var(--dk-text); }
html body .right-sidebar .filter-block .title { color: var(--dk-muted); }
html body .right-sidebar .alert-info { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: var(--dk-text); }
@media (max-width: 575.98px) {
    html body .right-sidebar { width: 100% !important; max-width: 100vw !important; }
    html body .right-sidebar.shw-rside { right: 0 !important; }
    html body .right-sidebar .r-panel-body { padding: 16px !important; box-sizing: border-box; }
    html body .right-sidebar .slimscrollright { width: 100% !important; }
}

/* ==========================================================================
   CALENDAR: layer chips, "whose events", reminder section of the event form
   ========================================================================== */
html body .gc-cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; }
html body .gc-cal-layers { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
html body .gc-cal-chip { --c: #736544; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    background: var(--dk-raised); color: var(--dk-muted); border: 1px solid var(--dk-line-2); cursor: pointer; transition: all .15s; }
html body .gc-cal-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); opacity: .45; flex: none; }
html body .gc-cal-chip.on { color: #fff; border-color: var(--c); background: color-mix(in srgb, var(--c) 22%, var(--dk-raised)); }
html body .gc-cal-chip.on i { opacity: 1; }
html body .gc-cal-chip:hover { border-color: var(--c); color: #fff; }
html body .gc-cal-who { display: flex; align-items: center; gap: 8px; }
html body .gc-cal-who label { margin: 0; font-size: 12px; color: var(--dk-muted); white-space: nowrap; }
html body .gc-cal-who select { min-width: 170px; }
html body .event-layer { cursor: pointer; opacity: .92; }
html body .event-layer .fc-event-title, html body .event-layer .fc-event-time { font-weight: 600; }
@media (max-width: 767.98px) {
    html body .gc-cal-layers { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    html body .gc-cal-layers::-webkit-scrollbar { display: none; }
    html body .gc-cal-chip { flex: 0 0 auto; }
    html body .gc-cal-who { width: 100%; }
    html body .gc-cal-who select { flex: 1; }
}

html body .gc-remind { background: var(--dk-raised); border: 1px solid var(--dk-line); border-radius: 6px; padding: 14px 16px; margin: 6px 0 14px; }
html body .gc-remind-title { font-weight: 700; color: var(--dk-strong); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
html body .gc-remind-title i { color: var(--dk-accent); }
html body .gc-remind-grid { display: flex; flex-wrap: wrap; gap: 8px; }
html body .gc-remind-opt { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 12px; border: 1px solid var(--dk-line-2); border-radius: 999px;
    background: var(--dk-surface); color: var(--dk-text); cursor: pointer; font-size: 13px; }
html body .gc-remind-opt input { accent-color: #736544; margin: 0; }
html body .gc-remind-opt:has(input:checked) { border-color: #736544; background: #3b3829; color: #fff; }

/* ---------- Buttons: brown for every action (save, submit, next, pay, confirm...), red ONLY for delete ----------
   The theme paints Save/Next/Submit red (btn-danger), Pay/Take Payment green (btn-success) and Save Correction/Reset orange (btn-warning).
   All solid action buttons use the brand brown, exactly like btn-primary. A real delete stays red: mark it with .btn-delete (or use
   btn-outline-danger / confirm-action-danger, which already mean "delete" and are left alone). */
html body .btn-danger:not(.btn-delete):not(.confirm-action-danger):not([data-confirm-title]):not(#delete_reminder):not(.remove-timesheet-row):not(#billing-adjustment-popover-remove):not([name^="delete"]):not(:has(> .tb-trash)),
html body .btn-success:not(.btn-delete),
html body .btn-warning:not(.btn-delete),
html body .commonModalSubmitButton, html body #commonModalSubmitButton {
    background-image: var(--ee-gradient-button) !important; background-color: #736544 !important; border-color: transparent !important; color: #fff !important; }
html body .btn-danger:not(.btn-delete):not(.confirm-action-danger):not([data-confirm-title]):not(#delete_reminder):not(.remove-timesheet-row):not(#billing-adjustment-popover-remove):not([name^="delete"]):not(:has(> .tb-trash)):hover,
html body .btn-success:not(.btn-delete):hover, html body .btn-warning:not(.btn-delete):hover,
html body .commonModalSubmitButton:hover, html body #commonModalSubmitButton:hover {
    background-image: var(--ee-gradient-button) !important; filter: brightness(1.1); color: #fff !important; }
/* the destructive ones keep the red */
html body .btn-delete, html body .btn-danger.btn-delete, html body #delete_reminder, html body .remove-timesheet-row, html body #billing-adjustment-popover-remove {
    background-image: none !important; background-color: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; }