/* ============================================================================
   WorldLink CRM — design system + responsive layer (loaded after Bootstrap 5.3).
   Green brand theme. Mobile-first. Breakpoints follow Bootstrap:
   sm 576, md 768, lg 992, xl 1200.

   Sections:
     1. Brand tokens
     2. Bootstrap re-theme (buttons, links, forms, pagination, badges, …)
     3. Layout chrome (navbar, page background, typography)
     4. Cards & tables
     5. Touch ergonomics + responsive table-cards (stacked cards on phones)
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Brand tokens
   -------------------------------------------------------------------------- */
:root {
    --wl-touch-target: 44px;

    /* Brand green scale, derived from the primary #39E75F.
       500 is the brand colour (bright); 600 is a slightly deeper "hover"
       still-vivid shade; 700+ are accessible greens for text on white. */
    --wl-green-50:  #ecfdf2;
    --wl-green-100: #d2fbe0;
    --wl-green-200: #a6f4c0;
    --wl-green-300: #6fea9b;
    --wl-green-400: #46e069;
    --wl-green-500: #39E75F;   /* ← PRIMARY BRAND */
    --wl-green-600: #22c24c;
    --wl-green-700: #15803d;
    --wl-green-800: #11602f;
    --wl-green-900: #0c3f20;
    --wl-green-950: #052e16;

    /* Semantic primary tokens.
       Bright #39E75F has low contrast against white, so anything that places
       TEXT on the primary fill uses --wl-on-primary (dark), and text that sits
       ON white (links, .text-primary) uses --wl-link (a darker green) to keep
       WCAG AA contrast. */
    --wl-primary:        #39E75F;
    --wl-primary-hover:  #22c24c;
    --wl-primary-rgb:    57, 231, 95;
    --wl-on-primary:     #04341a;   /* dark text on the bright primary fill */
    --wl-link:           #15803d;   /* accessible green for text on white */
    --wl-link-hover:     #11602f;

    /* Functional accents (harmonized with the green theme) */
    --wl-teal-600:  #0d9488;
    --wl-amber-600: #d97706;
    --wl-rose-600:  #e11d48;
    --wl-ink:       #1f2937;   /* headings / primary text */
    --wl-muted:     #6b7280;
    --wl-surface:   #ffffff;
    --wl-page-bg:   #f3faf5;   /* slightly green-tinted gray */
    --wl-border:    #e3eee7;

    /* Re-point Bootstrap globals */
    --bs-primary: var(--wl-primary);
    --bs-primary-rgb: 57, 231, 95;
    --bs-link-color: var(--wl-link);
    --bs-link-color-rgb: 21, 128, 61;
    --bs-link-hover-color: var(--wl-link-hover);
    --bs-link-hover-color-rgb: 17, 96, 47;
    --bs-focus-ring-color: rgba(57, 231, 95, .35);
}

/* ----------------------------------------------------------------------------
   2. Bootstrap re-theme — recolor compiled components to the brand green.
   -------------------------------------------------------------------------- */

/* Primary buttons — bright brand fill with dark text (high contrast). */
.btn-primary {
    --bs-btn-bg: var(--wl-primary);
    --bs-btn-border-color: var(--wl-primary);
    --bs-btn-color: var(--wl-on-primary);
    --bs-btn-hover-bg: var(--wl-primary-hover);
    --bs-btn-hover-border-color: var(--wl-primary-hover);
    --bs-btn-hover-color: var(--wl-on-primary);
    --bs-btn-active-bg: var(--wl-green-700);
    --bs-btn-active-border-color: var(--wl-green-700);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--wl-primary);
    --bs-btn-disabled-border-color: var(--wl-primary);
    --bs-btn-disabled-color: var(--wl-on-primary);
    --bs-btn-focus-shadow-rgb: var(--wl-primary-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--wl-link);
    --bs-btn-border-color: var(--wl-green-500);
    --bs-btn-hover-bg: var(--wl-primary);
    --bs-btn-hover-border-color: var(--wl-primary);
    --bs-btn-hover-color: var(--wl-on-primary);
    --bs-btn-active-bg: var(--wl-green-700);
    --bs-btn-active-border-color: var(--wl-green-700);
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--wl-primary-rgb);
}
/* Success keeps white text on a deeper, accessible green. */
.btn-success {
    --bs-btn-bg: var(--wl-green-700);
    --bs-btn-border-color: var(--wl-green-700);
    --bs-btn-hover-bg: var(--wl-green-800);
    --bs-btn-hover-border-color: var(--wl-green-800);
    --bs-btn-active-bg: var(--wl-green-900);
    --bs-btn-active-border-color: var(--wl-green-900);
}
.btn-outline-success {
    --bs-btn-color: var(--wl-link);
    --bs-btn-border-color: var(--wl-green-500);
    --bs-btn-hover-bg: var(--wl-green-700);
    --bs-btn-hover-border-color: var(--wl-green-700);
    --bs-btn-active-bg: var(--wl-green-800);
    --bs-btn-active-border-color: var(--wl-green-800);
}
.btn-link { --bs-btn-color: var(--wl-link); --bs-btn-hover-color: var(--wl-link-hover); }

/* All buttons: modern radius + weight */
.btn { border-radius: .55rem; font-weight: 600; }
.btn-sm { border-radius: .45rem; }
.btn-lg { border-radius: .65rem; }

/* Utility colors */
.bg-primary { background-color: var(--wl-primary) !important; color: var(--wl-on-primary) !important; }
.text-primary { color: var(--wl-link) !important; }   /* accessible green for text on white */
.border-primary { border-color: var(--wl-primary) !important; }
.text-bg-primary { background-color: var(--wl-primary) !important; color: var(--wl-on-primary) !important; }
.progress-bar { background-color: var(--wl-primary); color: var(--wl-on-primary); }
.spinner-border.text-primary, .spinner-grow.text-primary { color: var(--wl-green-600) !important; }

/* Forms: green focus states */
.form-control:focus,
.form-select:focus {
    border-color: var(--wl-green-400);
    box-shadow: 0 0 0 .25rem rgba(var(--wl-primary-rgb), .25);
}
.form-check-input:checked {
    background-color: var(--wl-primary);
    border-color: var(--wl-primary);
}
.form-check-input:focus {
    border-color: var(--wl-green-400);
    box-shadow: 0 0 0 .25rem rgba(var(--wl-primary-rgb), .25);
}
.form-control, .form-select { border-radius: .5rem; border-color: var(--wl-border); }
.form-label { font-weight: 600; font-size: .85rem; color: #374151; }
.input-group-text { border-radius: .5rem; background: var(--wl-green-50); border-color: var(--wl-border); color: var(--wl-green-800); }

/* Validation states keep Bootstrap red/green but with soft shadows */
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .12); }
.form-control.is-valid, .form-select.is-valid { border-color: var(--wl-green-500); }
.form-control.is-valid:focus, .form-select.is-valid:focus { box-shadow: 0 0 0 .25rem rgba(var(--wl-primary-rgb), .18); }

/* Pagination */
.pagination {
    --bs-pagination-color: var(--wl-link);
    --bs-pagination-hover-color: var(--wl-link-hover);
    --bs-pagination-hover-bg: var(--wl-green-50);
    --bs-pagination-focus-color: var(--wl-link-hover);
    --bs-pagination-focus-bg: var(--wl-green-50);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--wl-primary-rgb), .3);
    --bs-pagination-active-bg: var(--wl-primary);
    --bs-pagination-active-border-color: var(--wl-primary);
    --bs-pagination-active-color: var(--wl-on-primary);
}
.page-link { border-radius: .4rem; margin: 0 .12rem; border-color: transparent; }
.page-item.disabled .page-link { background: transparent; }

/* Nav tabs / pills (used by multi-section forms) */
.nav-tabs { --bs-nav-tabs-link-active-color: var(--wl-green-800); border-bottom-color: var(--wl-border); }
.nav-tabs .nav-link { color: var(--wl-muted); font-weight: 600; border: 0; border-bottom: 2.5px solid transparent; border-radius: 0; }
.nav-tabs .nav-link:hover { color: var(--wl-link); border-bottom-color: var(--wl-green-300); }
.nav-tabs .nav-link.active { color: var(--wl-green-800); background: transparent; border-bottom: 2.5px solid var(--wl-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--wl-primary); --bs-nav-pills-link-active-color: var(--wl-on-primary); }

/* Dropdown menus */
.dropdown-menu { border: 1px solid var(--wl-border); border-radius: .65rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .10); padding: .4rem; }
.dropdown-item { border-radius: .45rem; padding: .45rem .75rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--wl-green-50); color: var(--wl-green-900); }
.dropdown-item.active, .dropdown-item:active { background: var(--wl-primary); color: var(--wl-on-primary); }

/* Badges → soft, tinted, pill-shaped status chips */
.badge {
    border-radius: 50rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .38em .72em;
}
.badge.bg-primary   { background-color: var(--wl-green-100) !important; color: var(--wl-green-800) !important; }
.badge.bg-success   { background-color: var(--wl-green-100) !important; color: var(--wl-green-800) !important; }
.badge.bg-secondary { background-color: #eef1ef !important; color: #4b5563 !important; }
.badge.bg-info      { background-color: #e0f2fe !important; color: #075985 !important; }
.badge.bg-warning   { background-color: #fef3c7 !important; color: #92400e !important; }
.badge.bg-danger    { background-color: #ffe4e6 !important; color: #9f1239 !important; }
.badge.bg-light     { background-color: #f3f4f6 !important; color: #374151 !important; border: 1px solid var(--wl-border); }
.badge.bg-dark      { background-color: var(--wl-green-900) !important; color: #fff !important; }
.badge.text-bg-primary   { background-color: var(--wl-primary) !important; color: var(--wl-on-primary) !important; }
.badge.text-bg-secondary { background-color: #eef1ef !important; color: #4b5563 !important; }
.badge.text-bg-info      { background-color: #e0f2fe !important; color: #075985 !important; }
.badge.text-bg-danger    { background-color: #ffe4e6 !important; color: #9f1239 !important; }

/* Alerts: borderless with a colored accent bar */
.alert { border: 0; border-left: 4px solid; border-radius: .65rem; box-shadow: 0 1px 4px rgba(0, 0, 0, .05); }
.alert-success { background: var(--wl-green-50); color: var(--wl-green-900); border-left-color: var(--wl-green-600); }
.alert-danger  { border-left-color: #dc2626; }
.alert-warning { border-left-color: var(--wl-amber-600); }
.alert-info    { border-left-color: #0284c7; }

/* Modals */
.modal-content { border: 0; border-radius: .9rem; box-shadow: 0 16px 48px rgba(0, 0, 0, .18); }
.modal-header { border-bottom: 1px solid var(--wl-border); }
.modal-footer { border-top: 1px solid var(--wl-border); }

/* Accordion (case detail sections) */
.accordion-button:not(.collapsed) { background: var(--wl-green-50); color: var(--wl-green-900); box-shadow: inset 0 -1px 0 var(--wl-border); }
.accordion-button:focus { border-color: var(--wl-green-300); box-shadow: 0 0 0 .25rem rgba(var(--wl-primary-rgb), .3); }
.accordion-button:not(.collapsed)::after { filter: hue-rotate(260deg) saturate(2); }

/* List groups */
.list-group-item.active { background-color: var(--wl-primary); border-color: var(--wl-primary); color: var(--wl-on-primary); }

/* ----------------------------------------------------------------------------
   3. Layout chrome — page background, typography, green navbar
   -------------------------------------------------------------------------- */
body.bg-light { background-color: var(--wl-page-bg) !important; }
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    color: var(--wl-ink);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--wl-ink); letter-spacing: -.01em; }

/* Brand-green top navigation — bright #39E75F bar with dark, high-contrast text. */
.navbar.wl-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: linear-gradient(135deg, var(--wl-primary) 0%, var(--wl-primary-hover) 100%);
    box-shadow: 0 2px 12px rgba(5, 46, 22, .18);
}
.navbar.wl-navbar .navbar-brand { font-weight: 800; letter-spacing: -.01em; color: var(--wl-on-primary); }
.navbar.wl-navbar .navbar-brand:hover { color: var(--wl-on-primary); }
.navbar.wl-navbar .nav-link { color: rgba(4, 52, 26, .82); font-weight: 600; border-radius: .5rem; padding-left: .8rem; padding-right: .8rem; transition: background .12s, color .12s; }
.navbar.wl-navbar .nav-link:hover,
.navbar.wl-navbar .nav-link:focus { color: var(--wl-on-primary); background: rgba(255, 255, 255, .38); }
.navbar.wl-navbar .nav-link.active,
.navbar.wl-navbar .nav-link.show { color: var(--wl-on-primary); background: rgba(255, 255, 255, .45); }
/* The user-menu toggle ships with .text-white-50 in the markup — force dark. */
.navbar.wl-navbar .text-white-50 { color: rgba(4, 52, 26, .8) !important; }
.navbar.wl-navbar .navbar-toggler { border-color: rgba(4, 52, 26, .3); }
.navbar.wl-navbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(4, 52, 26, .2); }
/* Dark hamburger icon (overrides navbar-dark's white SVG). */
.navbar.wl-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(4,52,26,0.85)' stroke-width='2.2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 991.98px) {
    /* Collapsed mobile menu: comfortable spacing inside the green bar */
    .navbar.wl-navbar .navbar-collapse { padding: .5rem 0 .75rem; }
    .navbar.wl-navbar .dropdown-menu { background: rgba(255, 255, 255, .55); border: 0; box-shadow: none; }
    .navbar.wl-navbar .dropdown-menu .dropdown-item { color: var(--wl-on-primary); }
    .navbar.wl-navbar .dropdown-menu .dropdown-item:hover { background: rgba(255, 255, 255, .8); color: var(--wl-on-primary); }
    .navbar.wl-navbar .dropdown-menu .dropdown-header { color: rgba(4, 52, 26, .7); }
    .navbar.wl-navbar .dropdown-menu .dropdown-divider { border-color: rgba(4, 52, 26, .15); }
}

/* Nav: circular initial avatar (sits on the bright bar). */
.user-avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(4, 52, 26, .16);
    font-size: .75rem;
    font-weight: 700;
    color: var(--wl-on-primary);
    flex-shrink: 0;
}

/* Never let the page scroll sideways by accident. `clip` (not `hidden`) avoids
   creating a scroll container, so the sticky navbar keeps working. Wide
   tables get their own horizontal scroll container (see .table-cards rules). */
main.container-fluid { overflow-x: clip; }

/* ----------------------------------------------------------------------------
   4. Cards & tables
   -------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--wl-border);
    border-radius: .9rem;
}
.card.shadow-sm { box-shadow: 0 1px 6px rgba(15, 40, 25, .06) !important; }
.card-header { background: var(--wl-surface); border-bottom: 1px solid var(--wl-border); font-weight: 600; }

/* Tables: tinted header, soft hover, comfortable cells */
.table { --bs-table-hover-bg: var(--wl-green-50); }
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table thead th {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--wl-muted);
    white-space: nowrap;
}
.table-light { --bs-table-bg: #f7faf8; --bs-table-color: var(--wl-muted); }
.table thead th a { color: inherit; text-decoration: none; }
.table thead th a:hover { color: var(--wl-green-700); }
.table tbody td { vertical-align: middle; }

/* ----------------------------------------------------------------------------
   5. Responsive layer
   -------------------------------------------------------------------------- */

/* Spacing & typography: tighten the generous desktop padding on small screens. */
@media (max-width: 575.98px) {
    main.container-fluid { padding-left: .75rem !important; padding-right: .75rem !important; }
    .navbar .container-fluid { padding-left: .75rem !important; padding-right: .75rem !important; }
    h3 { font-size: 1.3rem; }
    .display-6 { font-size: 1.9rem; }
    .card-body { padding: .9rem; }
}

/* Touch ergonomics: on touch / coarse-pointer devices give controls real
   tap targets and use 16px inputs so iOS Safari doesn't auto-zoom on focus. */
@media (hover: none), (pointer: coarse) {
    .btn { min-height: 40px; }
    .btn-sm { min-height: 36px; }
    .form-control, .form-select { min-height: 42px; font-size: 16px; }
    .form-control-sm, .form-select-sm { min-height: 38px; font-size: 16px; }
    .form-check-input { width: 1.2em; height: 1.2em; }
    .navbar-nav .nav-link { padding-top: .65rem; padding-bottom: .65rem; }
    .dropdown-item { padding-top: .55rem; padding-bottom: .55rem; }
    .page-link { min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; }
    /* Larger hit area for the small icon delete (×) on document type chips etc. */
    .btn-close { padding: .6rem; }
}

/* Action buttons inside table rows / cards wrap instead of overflowing. */
td .btn, td form { margin-bottom: .15rem; }

/* ----------------------------------------------------------------------------
   Responsive data tables  ->  stacked cards on phones.
   Add class "table-cards" to a list <table> (its <thead> drives the labels,
   which JS copies into each cell's data-label). Below md the table becomes a
   list of cards; at md+ it stays a normal table but scrolls horizontally inside
   its parent card if it is too wide (so the page itself never scrolls).
   -------------------------------------------------------------------------- */

/* Tablet / desktop: keep the table, but contain any overflow in the card. */
@media (min-width: 768px) {
    .card:has(> .table-cards),
    .card:has(> .table-responsive > .table-cards) { overflow-x: auto; }
}

/* Phones: each table row becomes a self-contained card —
   a bold title, a clean list of "LABEL  value" details, then full-width actions. */
@media (max-width: 767.98px) {
    .table-cards { border-collapse: separate; background: transparent; }
    .table-cards thead { display: none; }                 /* no column-header sorting on cards */
    .table-cards tbody,
    .table-cards tr,
    .table-cards td { display: block; width: 100%; }

    .table-cards tr {
        border: 1px solid var(--wl-border);
        border-radius: .75rem;
        padding: .9rem 1rem;
        margin-bottom: .85rem;
        background: var(--bs-body-bg);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    }
    .table-cards tr:last-child { margin-bottom: 0; }

    /* Detail row: small upper-case label on the left, value on the right. */
    .table-cards td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        padding: .3rem 0;
        border: 0;
        text-align: right;
        overflow-wrap: anywhere;
    }
    .table-cards td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        text-align: left;
        font-size: .72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--bs-secondary-color);
        white-space: normal;
    }

    /* First cell = card title: larger, bold, full width, no label. */
    .table-cards td:first-child {
        text-align: left;
        font-size: 1.05rem;
        font-weight: 600;
        line-height: 1.3;
        padding: 0 0 .55rem;
        margin-bottom: .35rem;
        border-bottom: 1px solid var(--bs-border-color-translucent);
    }
    .table-cards td:first-child::before { content: none; }
    .table-cards td:first-child a { text-decoration: none; }

    /* Actions cell (the right-aligned column): full-width buttons at the bottom. */
    .table-cards td.text-end {
        flex-wrap: wrap;
        gap: .5rem;
        text-align: center;
        padding-top: .7rem;
        margin-top: .5rem;
        border-top: 1px solid var(--bs-border-color-translucent);
    }
    .table-cards td.text-end::before { content: none; }
    .table-cards td.text-end > *,
    .table-cards td.text-end .btn { flex: 1 1 auto; }
    .table-cards td.text-end .btn { width: 100%; }
    .table-cards td.text-end form { display: flex; }
    .table-cards td.text-end form .btn { width: 100%; }
    .table-cards td.text-end .btn-sm { padding: .5rem .7rem; }   /* comfortable tap height */

    /* Empty-state row ("No customers found.") spans the whole card, centered. */
    .table-cards td[colspan] { text-align: center; }
    .table-cards td[colspan]::before { content: none; }
}

/* ----------------------------------------------------------------------------
   Page headers (title + actions). Allow wrapping so export/new buttons drop to
   the next line on narrow screens instead of squashing the title.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .page-actions .btn,
    .page-actions > * { flex: 1 1 auto; }
}

/* ----------------------------------------------------------------------------
   Filter bar: comfortable stacked fields on mobile; the buttons go full width.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .filter-actions { width: 100%; }
    .filter-actions .btn { flex: 1 1 auto; }
}

/* ----------------------------------------------------------------------------
   Calendar (FullCalendar) — green event/today accents + phone toolbar fix.
   -------------------------------------------------------------------------- */
.fc .fc-button-primary {
    background-color: var(--wl-green-700);
    border-color: var(--wl-green-700);
}
.fc .fc-button-primary:hover { background-color: var(--wl-green-800); border-color: var(--wl-green-800); }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active { background-color: var(--wl-green-900); border-color: var(--wl-green-900); }
.fc .fc-daygrid-day.fc-day-today { background-color: var(--wl-green-50); }
.fc a { color: var(--wl-ink); }
@media (max-width: 575.98px) {
    .fc .fc-toolbar.fc-header-toolbar { flex-direction: column; gap: .5rem; }
    .fc .fc-toolbar-title { font-size: 1.05rem; }
}

/* Modals: comfortable on phones (paired with .modal-fullscreen-sm-down in markup). */
@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-fullscreen-sm-down) { margin: .5rem; }
}

/* Long text (emails, references) shouldn't blow out a card cell. */
.table-cards td { overflow-wrap: anywhere; }

/* ----------------------------------------------------------------------------
   Global confirmation dialog
   -------------------------------------------------------------------------- */
.wl-confirm-modal .modal-content { border-radius: 1rem; }
.wl-confirm-icon {
    width: 64px; height: 64px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    background: #ffe4e6;
}
.wl-confirm-modal .modal-title { font-weight: 700; }

/* ----------------------------------------------------------------------------
   Searchable client combobox  (<x-client-select>)
   A custom, accessible dropdown with an integrated search box, rich result
   rows (name + mobile + email), keyboard navigation and server-side search.
   -------------------------------------------------------------------------- */
.client-select { position: relative; }

/* The control reuses .form-select for sizing/border, minus the native arrow
   (form-select already draws a caret via background-image — keep it). */
.client-select .cs-control {
    cursor: pointer;
    display: flex;
    align-items: center;
    min-height: calc(1.5em + .75rem + 2px);
    white-space: nowrap;
    overflow: hidden;
}
.client-select .cs-control:focus,
.client-select .cs-control[aria-expanded="true"] {
    outline: 0;
    border-color: var(--wl-green-400);
    box-shadow: 0 0 0 .25rem rgba(var(--wl-primary-rgb), .25);
}
.client-select .cs-current { overflow: hidden; text-overflow: ellipsis; }
.client-select .cs-placeholder { color: var(--wl-muted); }
.client-select .cs-control.is-invalid { border-color: #dc3545; }

/* Dropdown panel */
.client-select .cs-panel {
    position: absolute;
    z-index: 1056;            /* above modals' default content */
    left: 0; right: 0;
    margin-top: .25rem;
    background: #fff;
    border: 1px solid var(--wl-border);
    border-radius: .65rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: .4rem;
    max-height: 320px;
    display: flex;
    flex-direction: column;
}
.client-select .cs-search-wrap { padding: .15rem .15rem .4rem; }
.client-select .cs-search { border-radius: .5rem; }

.client-select .cs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
}
.client-select .cs-option {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    padding: .5rem .65rem;
    border-radius: .5rem;
    cursor: pointer;
}
.client-select .cs-option .cs-opt-name { font-weight: 600; color: var(--wl-ink); line-height: 1.2; }
.client-select .cs-option .cs-opt-meta { font-size: .78rem; color: var(--wl-muted); }
.client-select .cs-option.active { background: var(--wl-green-50); }
.client-select .cs-option.active .cs-opt-name { color: var(--wl-green-900); }
.client-select .cs-option.selected { box-shadow: inset 0 0 0 1px var(--wl-green-300); }
.client-select .cs-option.selected .cs-opt-name::after { content: " ✓"; color: var(--wl-green-600); }

.client-select .cs-state { padding: .6rem .65rem; color: var(--wl-muted); font-size: .85rem; }
.client-select .cs-clear {
    margin-top: .25rem; border: 0; background: transparent;
    color: var(--wl-link); font-size: .82rem; font-weight: 600;
    padding: .4rem .65rem; border-radius: .5rem; text-align: left;
}
.client-select .cs-clear:hover { background: var(--wl-green-50); }

/* On touch devices give the search a 16px font so iOS doesn't zoom. */
@media (hover: none), (pointer: coarse) {
    .client-select .cs-search { font-size: 16px; min-height: 40px; }
    .client-select .cs-option { padding: .65rem; }
}