/* ==========================================================================
   EASTEND SKIN
   Gives GROWCRM the look of the EastEnd Dental ERP (same Opatix family:
   Montserrat 14px, pale page, white 265px sidenav with a soft active item,
   full-width 70px topbar, bordered cards, gradient primary buttons, flat
   focus states, airy tables) - in Urban Wheels' own colour, #86764f.

   A pure style layer: loaded after opatix.css, no page markup is touched.
   To go back to the previous look, remove its <link> from
   layout/header.blade.php and layout/header-lite.blade.php.
   ========================================================================== */

:root {
    /* Urban Wheels colour scale, built from #86764f the way EastEnd's blue is built from #3175b8 */
    --ee-primary-50:  #f7f5f3;
    --ee-primary-100: #eeece6;
    --ee-primary-200: #ddd9ce;
    --ee-primary-300: #c5bdab;
    --ee-primary-400: #a79b7f;
    --ee-primary-500: #86764f;
    --ee-primary-600: #736544;
    --ee-primary-700: #5e5337;
    --ee-primary-800: #48402b;
    --ee-primary-900: #362f20;
    --ee-primary-950: #221e14;
    /* white text on #86764f alone is 4.45:1, so the gradient starts a shade darker (>= 4.5:1 everywhere) */
    --ee-gradient-button: linear-gradient(110deg, #7e6f4a 0%, #736544 45%, #5e5337 100%);

    /* EastEnd neutrals */
    --ee-body-bg: #f9fafb;
    --ee-body-color: #333333;
    --ee-border: #e7e5e4;        /* stone-200 */
    --ee-card-border: #eceef1;
    --ee-stone-50: #fafaf9;
    --ee-stone-100: #f5f5f4;
    --ee-stone-300: #d6d3d1;
    --ee-stone-400: #a8a29e;
    --ee-stone-500: #78716c;
    --ee-stone-600: #57534e;
    --ee-stone-700: #44403c;
    --ee-stone-950: #0c0a09;
    --ee-topbar: 70px;

    /* EastEnd semantic colours */
    --ox-success: #059669;
    --ox-info: #3cbade;
    --ox-warning: #d97706;
    --ox-danger: #dc2626;
    --ox-secondary: #64748b;

    /* re-point the existing Opatix layer's tokens at the new palette (opatix.css and custom.css read these) */
    --ox-primary: var(--ee-primary-500);
    --ox-primary-600: var(--ee-primary-600);
    --ox-primary-700: var(--ee-primary-700);
    --ox-primary-50: var(--ee-primary-50);
    --ox-btn: var(--ee-primary-600);
    --ox-btn-hover: var(--ee-primary-700);
    --ox-body-bg: var(--ee-body-bg);
    --ox-body-color: var(--ee-body-color);
    --ox-border: var(--ee-border);
    --ox-topbar: var(--ee-topbar);
    --gc-gold: var(--ee-primary-500);
    --gc-gold-dark: var(--ee-primary-600);
}

/* ---------- Base ---------- */
body, #main-body, .page-wrapper {
    background-color: var(--ee-body-bg) !important;
    color: var(--ee-body-color);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ee-body-color); }
a { color: var(--ee-primary-600); }
a:hover { color: var(--ee-primary-700); }
code { color: var(--ee-primary-600); }

/* ---------- Sidenav: white panel with a hairline edge, logo block 70px with a bottom border ---------- */
@media (min-width: 768px) {
    .left-sidebar {
        border-right: 1px solid var(--ee-border) !important;
        box-shadow: var(--ox-shadow);
    }
    .topbar .navbar-header {
        border-right: 1px solid var(--ee-border) !important;
        border-bottom: 1px solid var(--ee-border) !important;
    }
}

/* section labels: xs, uppercase, medium, muted */
.sidebar-nav ul li.nav-small-cap {
    color: var(--ee-stone-400);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
}

/* links: stone-700, soft stone-100 hover */
.sidebar-nav ul li a {
    color: var(--ee-stone-700) !important;
    border-radius: 6px;
}
.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 {
    background: var(--ee-stone-100);
    color: var(--ee-stone-950) !important;
    -webkit-text-fill-color: var(--ee-stone-950) !important;
}

/* active item: primary-600 text on a primary-50 wash, no accent bar */
.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(--ee-primary-50) !important;
    color: var(--ee-primary-600) !important;
}
.sidebar-nav > ul > li.active > a::before,
.sidebar-nav > ul > li > a.active::before { content: none !important; border: 0 !important; }
.sidebar-nav > ul > li > a.active .hide-menu,
.sidebar-nav > ul > li.active > a .hide-menu {
    -webkit-text-fill-color: var(--ee-primary-600) !important;
    color: var(--ee-primary-600) !important;
}
/* icons stay black, as in EastEnd, whether or not the item is active */
.sidebar-nav ul li a .gc-ico,
.sidebar-nav > ul > li.active > a .gc-ico,
.sidebar-nav > ul > li > a.active .gc-ico { color: #000 !important; }
.sidebar-nav .has-arrow::after { border-color: var(--ee-stone-400); }

/* ---------- Topbar: a full-width white bar, 70px, hairline bottom border (not a floating card) ---------- */
@media (min-width: 768px) {
    .topbar,
    .fix-header .topbar {
        left: var(--ox-sidenav);
        right: 0;
        /* the theme's `.fix-header .topbar { width: 100% }` wins over a plain `width: auto`, which pushed the bar
           one sidebar-width past the right edge and put its right-hand icons out of reach */
        width: auto !important;
        margin-left: 0 !important;
        box-sizing: border-box;
        height: var(--ee-topbar) !important;
        padding: 0 !important;
        background: #fff !important;
        border-bottom: 1px solid var(--ee-border) !important;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05) !important;
        pointer-events: auto;
    }
    .topbar > .navbar { height: 100%; }
    .topbar .navbar-collapse {
        border-radius: 0;
        box-shadow: none;
        background: transparent !important;
        min-height: var(--ee-topbar);
        height: var(--ee-topbar);
        padding: 0 24px !important;
    }
    .page-wrapper { padding-top: calc(var(--ee-topbar) + 24px) !important; }
}
.topbar .navbar-nav > .nav-item > .nav-link:hover { color: var(--ee-primary-600); }
.topbar .navbar-nav > .nav-item > a.nav-link > i,
.topbar .navbar-nav .nav-link i { color: var(--ee-stone-600); }
.topbar .app-search .form-control,
.topbar .form-control { border-radius: 4px; }
/* the menu toggle: a 40px bordered square, like EastEnd's */
.topbar .sidebartoggler,
.topbar .nav-toggler {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #e5e7eb; border-radius: 4px; background: #fff;
    padding: 0;
}
.topbar .sidebartoggler:hover,
.topbar .nav-toggler:hover { background: #f3f4f6; }

/* ---------- Page title and breadcrumb: bold primary title, "Home > Section > Page" on the right ---------- */
.page-titles { margin-bottom: 20px; }
.page-titles .text-themecolor,
.page-titles h3, .page-titles h4 {
    color: var(--ee-primary-500) !important;
    font-size: 18px;
    font-weight: 800;
    margin: 0;
}
/* Card figures: Montserrat Black, 1.5rem, in the brand gold used by the page titles */
.gc-stat .stat-val,
.gc-hero-stat-val,
.gc-hero-stat-val.gold {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    color: var(--ee-primary-500) !important;
}

/* Blur the page behind any pop-up card (modals, alerts) */
#main-wrapper > * { transition: filter .15s ease; }
body.modal-open #main-wrapper > *,
body.swal2-shown #main-wrapper > *,
body.stop-scrolling #main-wrapper > * {
    filter: blur(5px);
}

/* Heading and breadcrumb on one line: heading left, breadcrumb far right (all pages) */
.page-titles > div:has(> .breadcrumb),
#breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
/* when the title column is alone in its row, let it span the full width so the crumbs reach the far right */
.page-titles > div:has(> .breadcrumb):only-child,
.page-titles > #breadcrumbs:only-child {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}
.page-titles > div:has(> .breadcrumb) > h3,
#breadcrumbs > h3 { margin-right: 16px; }
.page-titles > div:has(> .breadcrumb) > .breadcrumb,
#breadcrumbs > .breadcrumb { margin-left: auto; }
.breadcrumb { background: transparent; padding: 0; margin: 0; }
.breadcrumb-item, .breadcrumb-item a { text-transform: none; font-size: 14px; font-weight: 500; color: var(--ee-stone-700); }
.breadcrumb-item.active { color: var(--ee-stone-700); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ee-stone-500); }

/* ---------- Cards: white, hairline border, 4px, soft shadow ---------- */
.card {
    border: 1px solid var(--ee-card-border) !important;
    border-radius: 4px !important;
    box-shadow: var(--ox-shadow) !important;
}
.card-header { border-bottom: 1px solid var(--ee-border); }
.card-footer { border-top: 1px solid var(--ee-border); }
.card-title { color: var(--ee-body-color); font-size: 16px; font-weight: 600; }

/* ---------- Buttons: gradient primary, 4px, semibold; flat success/warning/danger from EastEnd's palette ---------- */
.btn { border-radius: 4px; font-weight: 600; }
.btn-primary, .btn-info, .btn-themecolor, .btn-rounded.btn-info,
.gc-qa-primary {
    background-image: var(--ee-gradient-button) !important;
    background-color: var(--ee-primary-600) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-info:hover, .btn-themecolor:hover,
.btn-primary:focus, .btn-info:focus,
.gc-qa-primary:hover {
    background-image: var(--ee-gradient-button) !important;
    filter: brightness(1.08);
    border-color: transparent !important;
    color: #fff !important;
}
.btn-outline-primary { color: var(--ee-primary-600); border-color: var(--ee-primary-500); background: transparent; }
.btn-outline-primary:hover { background-image: var(--ee-gradient-button); background-color: var(--ee-primary-600); border-color: transparent; color: #fff; }
.btn-success { background-color: var(--ox-success) !important; border-color: var(--ox-success) !important; }
.btn-warning { background-color: var(--ox-warning) !important; border-color: var(--ox-warning) !important; }
.btn-danger  { background-color: var(--ox-danger)  !important; border-color: var(--ox-danger)  !important; }
.btn-secondary { background-color: var(--ox-secondary) !important; border-color: var(--ox-secondary) !important; }
.btn:focus, .btn:active:focus { box-shadow: none !important; }
.btn-default, .btn-light { border: 1px solid var(--ee-border); }

/* ---------- Forms: flat focus (border only, no glow), 4px, 14px ---------- */
label, .control-label { color: var(--ee-stone-600); }
.form-control,
.custom-select,
select.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--ee-border);
    border-radius: 4px;
    font-size: 14px;
    color: var(--ee-stone-700);
}
.form-control:focus,
.custom-select:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--ee-stone-300) !important;
    box-shadow: none !important;
    outline: 0;
}
input[type=checkbox]:checked,
input[type=radio]:checked { accent-color: var(--ee-primary-500); }

/* ---------- Tables: airy rows, muted plain headers, hairline dividers, soft row hover ---------- */
.table thead th,
table.dataTable thead th {
    font-size: 13px;   /* EastEnd uses 14px; 13px keeps the existing wide tables from growing */
    font-weight: 500;
    color: var(--ee-stone-500);
    text-transform: none;
    letter-spacing: 0;
    background: transparent;
    border-top: 0;
    border-bottom: 1px solid var(--ee-border);
    padding: 12px 12px;
}
.table td, .table tbody th,
table.dataTable tbody td {
    font-size: 14px;
    color: var(--ee-stone-600);
    border-top: 1px solid var(--ee-border);
    padding: 12px 12px;
    vertical-align: middle;
}
.table tbody tr:hover,
table.dataTable tbody tr:hover { background: var(--ee-stone-50); }
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }

/* ---------- Badges, chips and pills: soft-cornered rectangles (not fully round) ---------- */
:root { --ee-radius-soft: 6px; --ee-radius-small: 4px; }
.badge, .badge-pill, .label, .label-rounded, .cw-badge { border-radius: var(--ee-radius-small) !important; font-weight: 500; }
.gc-hero-badge, .gc-pill, .nav-pills .nav-link { border-radius: var(--ee-radius-soft) !important; }
.gc-pill span { border-radius: var(--ee-radius-small); }

/* ---------- Person avatar: a head-and-shoulders silhouette instead of initials ---------- */
.gc-avatar .gc-silhouette,
.gc-hero-avatar .gc-silhouette { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; }
.gc-avatar, .gc-hero-avatar {
    overflow: hidden;
    padding: 0;
    background: var(--ee-primary-50, #f5f1e8) !important;
    border: 2px solid var(--ee-primary-600);
}
.gc-hero-avatar { color: var(--ee-primary-500); }

/* ---------- Pagination ---------- */
.page-item.active .page-link,
.pagination > .active > a, .pagination > .active > span {
    background-color: var(--ee-primary-600);
    border-color: var(--ee-primary-600);
    color: #fff;
}
.page-link { color: var(--ee-primary-600); }

/* ---------- Tabs and nav pills ---------- */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--ee-primary-600); border-bottom-color: var(--ee-primary-600); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--ee-primary-600); color: #fff; }

/* ---------- "Add" actions use the primary colour (the old theme drew them coral red) ---------- */
.btn-add-circle,
.btn-add-circle.btn-danger {
    background-image: var(--ee-gradient-button) !important;
    background-color: var(--ee-primary-600) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.btn-add-circle:hover { filter: brightness(1.08); }
.topbar .mdi-plus-circle-multiple-outline.text-danger { color: var(--ee-primary-500) !important; }

/* ---------- Filter pills and semantic text colours ---------- */
.gc-pill-active, .gc-pill.gc-pill-active {
    background: var(--ee-primary-600) !important;
    border-color: var(--ee-primary-600) !important;
    color: #fff !important;
}
.btn-outline-danger { color: var(--ox-danger); border-color: var(--ox-danger); }
.btn-outline-danger:hover { background: var(--ox-danger); border-color: var(--ox-danger); color: #fff; }
.text-danger  { color: var(--ox-danger)  !important; }
.text-success { color: var(--ox-success) !important; }
.text-warning { color: var(--ox-warning) !important; }
.text-info    { color: var(--ox-info)    !important; }

.btn-link { color: var(--ee-primary-600); }
.btn-link:hover { color: var(--ee-primary-700); }

/* ---------- Filter bar = ONE card: pills on the left, search + main button on the right ---------- */
.gc-filter-bar {
    background: #fff;
    border: 1px solid var(--ee-card-border);
    border-radius: 4px;
    box-shadow: var(--ox-shadow);
    padding: 8px 12px 8px 8px;
    gap: 12px;
    margin-bottom: 24px;
}
.gc-filter-bar .gc-pills {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
.gc-filter-bar .gc-filter-actions { margin-left: auto; }
/* already inside a card (e.g. Bookings): don't draw a second frame */
.card .gc-filter-bar {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}
@media (max-width: 575px) {
    .gc-filter-bar { padding: 8px; }
    .gc-filter-bar .gc-filter-actions { width: 100%; }
    .gc-filter-bar .gc-filter-actions input { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* ---------- Detail page header: the name is brand brown, not black ---------- */
.gc-hero-name { color: var(--ee-primary-600) !important; }

/* ---------- Silhouette outline ---------- */
.gc-silhouette { stroke-width: 1.3; stroke-linejoin: round; paint-order: stroke fill; }
.gc-hero-avatar .gc-silhouette { fill: var(--ee-primary-300); stroke: var(--ee-primary-600); }
.gc-avatar .gc-silhouette      { fill: #fff;                  stroke: var(--ee-primary-800); }

/* ---------- Ticked checkboxes drawn by the theme use the brand colour ---------- */
[type="checkbox"].filled-in[class*="chk-col-"]:checked + label::after {
    background-color: var(--ee-primary-600) !important;
    border-color: var(--ee-primary-600) !important;
}
[type="checkbox"].filled-in[class*="chk-col-"]:checked + label::before { border-right-color: #fff !important; border-bottom-color: #fff !important; }

/* dashboard stat cards: plain solid icons */
.gc-stat .stat-icon { color: #57534e !important; opacity: 1 !important; }

/* Confirm pop-ups (delete etc.): dark card, no red outline, page behind is blurred */
html body .jconfirm .jconfirm-box,
html body .jconfirm .jconfirm-box.jconfirm-type-red,
html body .jconfirm .jconfirm-box.jconfirm-type-blue,
html body .jconfirm .jconfirm-box.jconfirm-type-green {
    background: var(--dk-surface, #313131) !important;
    color: var(--dk-text, #d6d6d6) !important;
    border: 1px solid var(--dk-line, #404142) !important;
    border-top: 1px solid var(--dk-line, #404142) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6) !important;
    outline: 0 !important;
}
html body .jconfirm .jconfirm-box .jconfirm-title-c .jconfirm-title,
html body .jconfirm .jconfirm-box .jconfirm-title { color: var(--dk-strong, #f2f2f2) !important; }
html body .jconfirm .jconfirm-box .jconfirm-content,
html body .jconfirm .jconfirm-box .jconfirm-content .x-details { color: var(--dk-text, #d6d6d6) !important; }
html body .jconfirm .jconfirm-box .jconfirm-buttons button.btn-outline-secondary { color: var(--dk-text, #d6d6d6) !important; border-color: var(--dk-line-2, #555) !important; background: transparent !important; }
html body .jconfirm .jconfirm-bg { background-color: rgba(0, 0, 0, .35) !important; }

body:has(.jconfirm.jconfirm-open) #main-wrapper > *,
body.jconfirm-noscroll #main-wrapper > * { filter: blur(5px); }

/* detail-page panels: values readable on the dark card, dividers mild grey */
html body .gc-panel-row .value { color: var(--dk-strong, #f2f2f2) !important; }
html body .gc-panel-row { border-bottom: 1px solid var(--dk-line, #404142) !important; }
html body .gc-panel-row:last-child { border-bottom: 0 !important; }

/* phones: footer shows the copyright line only */
@media (max-width: 767px) { html body .gc-footer .gc-footer-dev { display: none !important; } }

/* top-bar profile picture: brown ring instead of white */
html body .topbar .profile-pic img,
html body .topbar #topnav_avatar,
html body .topbar ul.dropdown-user .u-img img {
    border: 2px solid var(--ee-primary-600) !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* filter-pill count badges: dark, not white */
html body .gc-pill span { background: rgba(255, 255, 255, .1) !important; color: var(--dk-text, #d6d6d6) !important; }
html body .gc-pill.gc-pill-active span { background: rgba(255, 255, 255, .2) !important; color: #fff !important; }

/* phones: the search box spans the full width, like the Add button */
@media (max-width: 767px) { html body .gc-filter-actions .gc-search-wrap { width: 100% !important; flex: 0 0 100% !important; } }

/* profile dropdown: mild grey dividers, readable items, page behind blurred while open */
html body .topbar ul.dropdown-user li.divider,
html body .topbar ul.dropdown-user .divider,
html body .topbar .dropdown-menu .divider {
    background: var(--dk-line, #404142) !important;
    border: 0 !important;
    height: 1px !important;
    opacity: 1 !important;
}
html body .topbar ul.dropdown-user li a,
html body .topbar ul.dropdown-user li a i,
html body .topbar ul.dropdown-user li a span,
html body .topbar .dropdown-menu .dropdown-item { color: var(--dk-text, #d6d6d6) !important; }
html body .topbar ul.dropdown-user li a:hover { color: #fff !important; background: var(--dk-raised, #3a3b3c) !important; }
html body .topbar ul.dropdown-user li a:hover i { color: #fff !important; }

.page-wrapper, .left-sidebar { transition: filter .15s ease; }
body:has(.topbar .dropdown-menu.show) .page-wrapper,
body:has(.topbar .dropdown-menu.show) .left-sidebar { filter: blur(5px); }

/* admin dashboard cards: the same mild shadow as the cards on the Customers page */
html body .page-wrapper .gc-stat,
html body .page-wrapper .card,
html body .page-wrapper .gc-panel,
html body .page-wrapper .gc-quick { box-shadow: var(--ox-shadow, 0 1px 3px rgba(0,0,0,.5), 0 1px 2px -1px rgba(0,0,0,.5)) !important; }

/* admin dashboard: plain icons, same grey as the sidebar */
html body #js-trigger-home-admin-wrapper .stat-icon,
html body #js-trigger-home-admin-wrapper .gc-panel-head i,
html body #js-trigger-home-admin-wrapper .gc-panel-row .label i,
html body #js-trigger-home-admin-wrapper .gc-panel-row .icon,
html body #js-trigger-home-admin-wrapper .card-title i,
html body #js-trigger-home-admin-wrapper i.tb:not(.gc-qa-btn i) { color: #a8a29e !important; opacity: 1 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; }
html body #js-trigger-home-admin-wrapper .gc-qa-btn i { color: inherit !important; }

/* active sidebar item: translucent white highlight, white text */
html body .sidebar-nav > ul > li.active > a,
html body .sidebar-nav > ul > li > a.active,
html body .sidebar-nav ul li.active > a,
html body .sidebar-nav ul li a.active { background: rgba(255, 255, 255, .1) !important; color: #fff !important; }
html body .sidebar-nav > ul > li > a.active .hide-menu,
html body .sidebar-nav > ul > li.active > a .hide-menu,
html body .sidebar-nav ul li a.active .hide-menu { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html body .sidebar-nav ul li a.active .gc-ico,
html body .sidebar-nav ul li a.active i { color: #fff !important; }

/* Media library: section labels and breadcrumb links in the brand brown, not blue */
html body .ml-section-title { color: var(--dk-accent, #c9b98d) !important; }
html body .ml-crumbs a { color: var(--dk-accent, #c9b98d) !important; }

/* Drop-down lists: the open list and its highlight are brown, never the system blue.
   (Browsers that support styleable selects get a fully themed list; others keep the plain one.) */
html body select option:checked,
html body select option:hover { background-color: #736544 !important; color: #fff !important; background-image: linear-gradient(#736544, #736544) !important; }
@supports (appearance: base-select) {
    html body select:not([multiple]):not([size]):not(.select2-hidden-accessible),
    html body select:not([multiple]):not([size]):not(.select2-hidden-accessible)::picker(select) { appearance: base-select; }
    html body select:not([multiple]):not([size]):not(.select2-hidden-accessible)::picker(select) {
        background: var(--dk-raised, #3a3b3c); color: var(--dk-text, #e5e5e5);
        border: 1px solid var(--dk-line, #404142); border-radius: 6px; padding: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    }
    html body select:not([multiple]):not([size]):not(.select2-hidden-accessible) option { padding: 8px 10px; border-radius: 4px; background: transparent; color: inherit; }
    html body select:not([multiple]):not([size]):not(.select2-hidden-accessible) option:hover,
    html body select:not([multiple]):not([size]):not(.select2-hidden-accessible) option:focus,
    html body select:not([multiple]):not([size]):not(.select2-hidden-accessible) option:checked { background: #736544 !important; color: #fff !important; }
    html body select:not([multiple]):not([size]):not(.select2-hidden-accessible) option::checkmark { color: #fff; }
    /* the arrow sits inside the field on the right; the form-control rules made the field a block, which pushed the arrow onto a line of its own below it */
    html body select:not([multiple]):not([size]):not(.select2-hidden-accessible) {
        display: flex !important; align-items: center; justify-content: space-between; gap: 8px; box-sizing: border-box;
    }
    html body select:not([multiple]):not([size]):not(.select2-hidden-accessible)::picker-icon {
        margin: 0 0 0 auto; flex: 0 0 auto; line-height: 1; color: var(--dk-muted, #9aa0a6);
    }
    html body select:not([multiple]):not([size]):not(.select2-hidden-accessible) selectedcontent { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}