/*
 * Echo911 CRM - shell adjustments on top of EchoCAD Night.
 * Small, CRM-specific tweaks that don't belong in the portable
 * echocad-ui/components.css. Tokens only; dark-only.
 */

/* DataTables wrapper polish (carried from the old Admindek layouts) */
.ec-shell .dataTables_wrapper .dt-buttons { margin-bottom: 0; }
.ec-shell .dataTables_wrapper .dt-buttons .btn { font-size: .75rem; padding: .25rem .5rem; }
.ec-shell .dataTables_wrapper .dataTables_filter { margin-bottom: 0; }
.ec-shell .dataTables_wrapper .dataTables_filter label { margin-bottom: 0; display: flex; align-items: center; }
.ec-shell .dataTables_wrapper .dataTables_filter input { border-radius: var(--ec-radius-sm); padding: .375rem .75rem; margin-left: .5rem; }
.ec-shell .dataTables_wrapper .dataTables_length { margin-bottom: 0; }
.ec-shell .dataTables_wrapper .dataTables_length label { margin-bottom: 0; display: flex; align-items: center; gap: .4rem; font-size: .875rem; }
.ec-shell .dataTables_wrapper .dataTables_length select { padding: 4px 8px; font-size: .875rem; width: auto; display: inline-block; min-width: 60px; }
.ec-shell .table > :not(caption) > * > * { vertical-align: middle; }

/* Admin global search dropdown */
.ec-shell #echo911-search-wrap { position: relative; }
.ec-shell #echo911-search-results {
    position: absolute; top: 100%; left: 0; z-index: 1050;
    min-width: 320px; width: max-content; max-width: 560px;
    background: var(--ec-bg-2); border: 1px solid var(--ec-line-1);
    border-radius: var(--ec-radius-md); max-height: 480px; overflow-y: auto; display: none;
    box-shadow: var(--ec-shadow-lg);
}
.ec-shell #echo911-search-results.show { display: block; }
.ec-shell #echo911-search-results .dropdown-item { padding: .55rem .85rem; white-space: normal; word-break: break-word; }
@media (max-width: 767.98px) {
    .ec-shell #echo911-search-wrap { width: 100% !important; }
    .ec-shell #echo911-search-results {
        position: fixed; top: auto; bottom: 0; left: 0; right: 0;
        min-width: 100%; max-width: 100%; width: 100%;
        border-radius: 16px 16px 0 0; max-height: 60vh;
    }
}

/* Mobile: reveal the topbar global search as a full-width row under the bar.
   The search is hidden by default below lg and toggled open via the topbar
   search icon (#ec-mobile-search-toggle) which adds .is-open. */
@media (min-width: 992px) {
    .ec-shell .ec-topbar__search { display: block; }
}
@media (max-width: 991.98px) {
    .ec-shell .ec-topbar { position: relative; }
    .ec-shell .ec-topbar__search { display: none; }
    .ec-shell .ec-topbar__search.is-open {
        display: block; position: absolute; top: 100%; left: 0; right: 0;
        width: 100%; padding: .5rem .75rem; z-index: 1050;
        background: var(--ec-bg-2); border-bottom: 1px solid var(--ec-line-1);
        box-shadow: var(--ec-shadow-lg);
    }
    .ec-shell .ec-topbar__search.is-open #echo911-search-wrap { width: 100% !important; }
    .ec-shell .ec-topbar__search.is-open #echo911-global-search { width: 100%; }
}

/* Mobile: stack the DataTables toolbar (length / export+colvis / search) so it
   never overflows, and keep wide listings reachable via horizontal scroll. */
@media (max-width: 991.98px) {
    .ec-shell .dataTables_wrapper > .row:first-child > div {
        flex-wrap: wrap;
        justify-content: flex-start !important;
        row-gap: .5rem;
    }
    .ec-shell .dataTables_wrapper .dataTables_length,
    .ec-shell .dataTables_wrapper .dataTables_filter,
    .ec-shell .dataTables_wrapper .dt-buttons { width: 100%; float: none; }
    .ec-shell .dataTables_wrapper .dataTables_filter label { display: flex; width: 100%; margin-left: 0; }
    .ec-shell .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; margin-top: .25rem; }
    .ec-shell .dataTables_wrapper .dt-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
    /* Smooth touch scrolling for horizontally scrollable tables */
    .ec-shell .dataTables_wrapper .dataTables_scrollBody,
    .ec-shell .table-responsive { -webkit-overflow-scrolling: touch; }
    /* Button clusters/toolbars wrap instead of overflowing the viewport */
    .ec-shell .ec-main .btn-group,
    .ec-shell .ec-main .btn-toolbar { flex-wrap: wrap; }

    /* Tabbed detail-page action bars (subtabs + action buttons) wrap instead
       of overflowing. Targets the inline flex "space-between" bar directly
       inside a tab pane, plus its nav and button clusters. */
    .ec-shell .ec-main .tab-pane > div[style*="space-between"] { flex-wrap: wrap; gap: 8px; }
    .ec-shell .ec-main .tab-pane > div[style*="space-between"] > .nav,
    .ec-shell .ec-main .tab-pane > div[style*="space-between"] > div { flex-wrap: wrap; }
    .ec-shell .ec-main .nav[style*="display:flex"] { flex-wrap: wrap; }
}

/* Topbar action icon buttons (notifications/feedback/tickets bell) */
.ec-shell .ec-topbar__actions .ec-icon-btn { position: relative; }
.ec-shell .ec-topbar__actions .echo-nav-badge {
    position: absolute; top: 2px; right: 2px;
    font-size: .6rem; min-width: 16px; height: 16px; line-height: 16px;
    padding: 0 4px; border-radius: 8px; text-align: center; pointer-events: none;
}

/* Suspended-account / closure banners keep their Bootstrap alert look under the reskin */
.ec-shell .ec-main .alert { border-radius: var(--ec-radius-md); }

/* Stat card hover (legacy .echo-stat-card used by dashboards) */
.ec-shell .echo-stat-card { transition: transform .15s; }
.ec-shell .echo-stat-card:hover { transform: translateY(-2px); }

/* Sidebar badge color variants */
.ec-shell .ec-sidebar__badge.ec-badge-danger { background: var(--ec-red); color: #fff; }
.ec-shell .ec-sidebar__badge.ec-badge-warning { background: var(--ec-yellow); color: #000; }
.ec-shell .ec-sidebar__badge.ec-badge-info { background: var(--ec-blue); color: #fff; }

/* ==========================================================================
   Admin list pattern: compact card-list on mobile, DataTable on desktop.
   (Recreates the show/hide + compact styling from the retired responsive CSS.)
   ========================================================================== */
.ec-shell .admin-list-mobile { display: none; }
.ec-shell .admin-list-desktop-table { display: block; }
@media (max-width: 991.98px) {
    .ec-shell .admin-list-mobile { display: block; }
    .ec-shell .admin-list-desktop-table { display: none; }
}

.ec-shell .e9-compact-list { display: flex; flex-direction: column; }
.ec-shell .e9-compact-item {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ec-line-1);
    text-decoration: none;
    color: var(--ec-fg-1);
}
.ec-shell .e9-compact-item:hover { background: var(--ec-bg-3); }
.ec-shell .e9-compact-item-critical { border-left: 3px solid var(--ec-red); }
.ec-shell .e9-compact-item-high { border-left: 3px solid var(--ec-yellow); }
.ec-shell .e9-compact-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ec-shell .e9-compact-id { font-family: var(--ec-font-family-mono); font-size: 12px; color: var(--ec-fg-3); }
.ec-shell .e9-compact-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.ec-shell .e9-compact-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; color: #fff; }
.ec-shell .e9-compact-time { margin-left: auto; font-size: 12px; color: var(--ec-fg-3); }
.ec-shell .e9-compact-title { font-weight: 600; color: var(--ec-fg-0); margin-top: 4px; }
.ec-shell .e9-compact-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--ec-fg-3); }
.ec-shell .e9-compact-foot-left { color: var(--ec-fg-2); }
.ec-shell .e9-compact-empty { text-align: center; padding: 32px; color: var(--ec-fg-3); }
.ec-shell .e9-compact-empty i { font-size: 28px; display: block; margin-bottom: 8px; }

/* Tables tagged for the old mobile-card transform now just render as a
   normal (responsive) table; allow horizontal scroll on small screens. */
@media (max-width: 991.98px) {
    .ec-shell .mobile-card-table { display: block; overflow-x: auto; }
}

/* ==========================================================================
   Palette calm-down: the CRM uses Bootstrap contextual colors (bg-success,
   bg-primary, bg-info...) liberally, which render as loud solid fills. Re-skin
   them as muted, tinted "soft" pills (subtle background + readable colored
   text) for a cohesive, low-noise EchoCAD Night look. !important is required
   to beat Bootstrap's own .bg-* utilities.
   ========================================================================== */
body.ec-shell .badge {
    font-weight: 600;
    border-radius: 4px;
    padding: 0.28em 0.62em;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
    vertical-align: middle;
}
body.ec-shell .badge.text-bg-success, body.ec-shell .badge.bg-success { background-color: rgba(22, 163, 74, 0.14) !important; color: #4ade80 !important; border-color: rgba(22, 163, 74, 0.4); }
body.ec-shell .badge.text-bg-danger,  body.ec-shell .badge.bg-danger  { background-color: rgba(220, 38, 38, 0.14) !important; color: #f87171 !important; border-color: rgba(220, 38, 38, 0.4); }
body.ec-shell .badge.text-bg-warning, body.ec-shell .badge.bg-warning { background-color: rgba(234, 179, 8, 0.14) !important; color: #fbbf24 !important; border-color: rgba(234, 179, 8, 0.4); }
body.ec-shell .badge.text-bg-info,    body.ec-shell .badge.bg-info    { background-color: rgba(37, 99, 235, 0.14) !important; color: #60a5fa !important; border-color: rgba(37, 99, 235, 0.4); }
body.ec-shell .badge.text-bg-primary, body.ec-shell .badge.bg-primary { background-color: rgba(37, 99, 235, 0.14) !important; color: #60a5fa !important; border-color: rgba(37, 99, 235, 0.4); }
body.ec-shell .badge.text-bg-secondary, body.ec-shell .badge.bg-secondary { background-color: rgba(161, 161, 170, 0.14) !important; color: var(--ec-fg-2) !important; border-color: var(--ec-line-2); }
body.ec-shell .badge.bg-light { background-color: var(--ec-bg-3) !important; color: var(--ec-fg-2) !important; border-color: var(--ec-line-1); }
body.ec-shell .badge.bg-dark  { background-color: var(--ec-bg-3) !important; color: var(--ec-fg-2) !important; border-color: var(--ec-line-1); }

/* Tables: HALO-style crisp dark tables (small uppercase gray headers,
   tight rows, quiet borders, subtle hover) applied to all content tables. */
.ec-shell .ec-main table.table thead th {
    text-transform: uppercase;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ec-fg-3);
    background: var(--ec-bg-3);
    border-bottom: 1px solid var(--ec-line-1);
    border-top: 0;
    padding: 0.6rem 0.75rem;
    white-space: nowrap;
}
.ec-shell .ec-main table.table tbody td {
    font-size: 0.82rem;
    padding: 0.6rem 0.75rem;
    border-color: var(--ec-line-1);
    vertical-align: middle;
    color: var(--ec-fg-1);
}
.ec-shell .ec-main table.table tbody tr:hover td { background: var(--ec-bg-3); }
/* Ticket # column must not wrap (e.g. "#2093" breaking to two lines) */
.ec-shell .echo-tickets-datatable th:first-child,
.ec-shell .echo-tickets-datatable td:first-child { white-space: nowrap; }
.ec-shell .ec-main .card { border-radius: var(--ec-radius-md); }
.ec-shell .ec-main .card .card-header {
    font-weight: 600;
    font-size: 0.95rem;
    background: var(--ec-bg-2);
    border-bottom: 1px solid var(--ec-line-1);
}
/* The compact-list badges follow the same soft treatment */
.ec-shell .e9-compact-badge.bg-success { background: rgba(22, 163, 74, 0.16) !important; color: #4ade80; }
.ec-shell .e9-compact-badge.bg-danger  { background: rgba(220, 38, 38, 0.16) !important; color: #f87171; }
.ec-shell .e9-compact-badge.bg-warning { background: rgba(234, 179, 8, 0.16) !important; color: #fbbf24; }
.ec-shell .e9-compact-badge.bg-info,
.ec-shell .e9-compact-badge.bg-primary { background: rgba(37, 99, 235, 0.16) !important; color: #60a5fa; }
.ec-shell .e9-compact-badge.bg-secondary { background: rgba(161, 161, 170, 0.16) !important; color: var(--ec-fg-2); }

/* Entity-name links inside content tables: calm foreground text that reveals
   the accent only on hover, instead of a wall of saturated blue links. */
.ec-shell .ec-main table a:not(.btn):not(.badge):not(.page-link) {
    color: var(--ec-fg-0);
    font-weight: 500;
    text-decoration: none;
}
.ec-shell .ec-main table a:not(.btn):not(.badge):not(.page-link):hover {
    color: var(--ec-blue-hi);
    text-decoration: none;
}

/* General content links: brand blue but not neon, underline on hover only */
.ec-shell .ec-main a:not(.btn):not(.badge):not(.ec-sidebar__link):not(.page-link):not(.nav-link):not(.dropdown-item) {
    text-decoration: none;
}
.ec-shell .ec-main a:not(.btn):not(.badge):not(.ec-sidebar__link):not(.page-link):not(.nav-link):not(.dropdown-item):hover {
    text-decoration: underline;
}

/* Outline buttons: soften so they read as secondary, not competing accents */
.ec-shell .btn-outline-primary { border-color: var(--ec-line-2); color: var(--ec-fg-1); }
.ec-shell .btn-outline-primary:hover { background: var(--ec-bg-3); border-color: var(--ec-line-2); color: var(--ec-fg-0); }
.ec-shell .btn-outline-secondary { border-color: var(--ec-line-2); color: var(--ec-fg-2); }
.ec-shell .btn-outline-secondary:hover { background: var(--ec-bg-3); color: var(--ec-fg-0); }

/* ==========================================================================
   SweetAlert2 dark theme (confirm dialogs + flash toasts). SweetAlert appends
   to <body> (which carries .ec-shell), so these override its default light UI.
   ========================================================================== */
body.ec-shell .swal2-container { backdrop-filter: blur(2px); }
body.ec-shell .swal2-popup {
    background: var(--ec-bg-2) !important;
    color: var(--ec-fg-1) !important;
    border: 1px solid var(--ec-line-1);
    border-radius: var(--ec-radius-lg);
    box-shadow: var(--ec-shadow-lg);
}
body.ec-shell .swal2-title { color: var(--ec-fg-0) !important; }
body.ec-shell .swal2-html-container,
body.ec-shell .swal2-content { color: var(--ec-fg-2) !important; }
body.ec-shell .swal2-html-container strong { color: var(--ec-fg-0); }
body.ec-shell .swal2-close { color: var(--ec-fg-3) !important; box-shadow: none !important; }
body.ec-shell .swal2-close:hover { color: var(--ec-fg-0) !important; }
body.ec-shell .swal2-footer { border-top-color: var(--ec-line-1); color: var(--ec-fg-3); }
body.ec-shell .swal2-styled { border-radius: var(--ec-radius-md) !important; font-weight: 600; }
body.ec-shell .swal2-styled:focus { box-shadow: none !important; }
body.ec-shell .swal2-styled.swal2-cancel {
    background: var(--ec-bg-3) !important;
    color: var(--ec-fg-1) !important;
    border: 1px solid var(--ec-line-2);
}
body.ec-shell .swal2-input,
body.ec-shell .swal2-textarea,
body.ec-shell .swal2-select {
    background: var(--ec-color-bg-sunken) !important;
    color: var(--ec-fg-0) !important;
    border: 1px solid var(--ec-color-border-strong) !important;
    box-shadow: none !important;
}
body.ec-shell .swal2-input::placeholder,
body.ec-shell .swal2-textarea::placeholder { color: var(--ec-fg-4); }
body.ec-shell .swal2-validation-message { background: var(--ec-bg-3); color: var(--ec-fg-1); }
/* Toasts (Echo911.toast / flash) */
body.ec-shell .swal2-toast {
    background: var(--ec-bg-3) !important;
    color: var(--ec-fg-0) !important;
    border: 1px solid var(--ec-line-2) !important;
    box-shadow: var(--ec-shadow-md) !important;
}
body.ec-shell .swal2-toast .swal2-title { color: var(--ec-fg-0) !important; }

/* Notifier.js toasts (admin) — dark surface */
body.ec-shell .notifier__notification {
    background: var(--ec-bg-3) !important;
    color: var(--ec-fg-0) !important;
    border: 1px solid var(--ec-line-2);
}

/* ==========================================================================
   Sidebar expandable submenus (so sub-category items are reachable).
   ========================================================================== */
.ec-shell .ec-nav-group > .ec-sidebar__link .ec-nav-caret {
    margin-left: auto;
    transition: transform 0.15s ease;
    font-size: 18px;
}
.ec-shell .ec-nav-group.is-open > .ec-sidebar__link .ec-nav-caret { transform: rotate(180deg); }
.ec-shell .ec-nav-group > .ec-sidebar__sublist[hidden] { display: none; }

/* ==========================================================================
   Auth screens (login + all auth flows) — from the EchoCAD login reference.
   ========================================================================== */
.ec-auth-card__title .ec-accent { color: var(--ec-green-hi); }
.login-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group label, .ec-auth-card .form-label {
    color: var(--ec-color-text);
    font-size: 0.875rem;
    font-weight: var(--ec-font-weight-medium);
}
.ec-auth-card .form-input {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--ec-color-bg-sunken);
    border: 1px solid var(--ec-color-border-strong);
    border-radius: var(--ec-radius-md);
    color: var(--ec-color-text);
    font-size: 0.9375rem;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ec-auth-card .form-input::placeholder { color: var(--ec-fg-4); }
.ec-auth-card .form-input:focus {
    outline: none;
    border-color: var(--ec-color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.ec-auth-card .input-wrap { position: relative; display: flex; }
.ec-auth-card .input-wrap .form-input { padding-right: 3rem; }
.ec-auth-card .input-eye {
    position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; color: var(--ec-fg-3);
    width: 2.5rem; height: 2.5rem; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
}
.error-message {
    padding: 0.875rem 1rem;
    background: var(--ec-color-danger-soft);
    border: 1px solid var(--ec-color-danger);
    border-radius: var(--ec-radius-md);
    color: var(--ec-color-danger);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}
.info-message {
    padding: 0.875rem 1rem;
    background: var(--ec-color-info-soft);
    border: 1px solid var(--ec-color-info);
    border-radius: var(--ec-radius-md);
    color: var(--ec-color-text);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}
.btn-login {
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: var(--ec-color-success);
    border: 1px solid var(--ec-color-success);
    border-radius: var(--ec-radius-md);
    color: #fff;
    font-size: 1rem;
    font-weight: var(--ec-font-weight-semibold);
    cursor: pointer;
    transition: filter 0.2s, transform 0.2s;
    margin-top: 0.5rem;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    text-decoration: none;
}
.btn-login:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.btn-login:active { transform: translateY(0); }
.btn-login--secondary {
    background: transparent; border-color: var(--ec-color-border-strong); color: var(--ec-color-text);
}
.btn-login--secondary:hover { background: rgba(255,255,255,0.04); filter: none; color: var(--ec-color-text); }
.login-tabs {
    display: flex; margin-bottom: 1.5rem;
    border-radius: var(--ec-radius-md); overflow: hidden;
    border: 1px solid var(--ec-color-border);
}
.login-tab {
    flex: 1; padding: 0.75rem; background: transparent;
    color: var(--ec-color-text-muted); border: none; cursor: pointer;
    font-weight: var(--ec-font-weight-medium); font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    white-space: nowrap; transition: background-color 0.2s, color 0.2s;
}
.login-tab.active { background: var(--ec-color-success); color: #fff; }
.ec-auth-card__footer a { color: var(--ec-color-text-link); text-decoration: none; }
.ec-auth-card__footer a:hover { text-decoration: underline; }
.ec-auth-link { color: var(--ec-color-text-link); text-decoration: none; font-size: 0.85rem; }
.ec-auth-link:hover { text-decoration: underline; }

/* Auth shell: when content is taller than the viewport (long docs like TOS /
   warranty), center only if it fits, otherwise top-align so the top (logo /
   title) stays scrollable instead of being cut off. */
body.ec-shell .ec-auth-shell { align-items: safe center; }

/* ==========================================================================
   Ticket image lightbox (#imageModal): a transparent modal that frames the
   image with a clean translucent control bar. Self-contained so it doesn't
   depend on the retired theme.
   ========================================================================== */
body.ec-shell #imageModal .modal-content {
    background: var(--ec-bg-2) !important;
    border: 1px solid var(--ec-line-2) !important;
    border-radius: var(--ec-radius-lg) !important;
    box-shadow: var(--ec-shadow-lg) !important;
    padding: 0.5rem;
}
body.ec-shell #imageModal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: transparent;
    border: 0 !important;
    border-bottom: 1px solid var(--ec-line-1) !important;
    border-radius: 0;
    padding: 0.25rem 0.5rem 0.5rem !important;
    margin-bottom: 0.5rem;
}
body.ec-shell #imageModal #imageModalLabel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
body.ec-shell #imageModal .modal-header > .d-flex { flex: 0 0 auto; }
body.ec-shell #imageModal .modal-body { padding: 0 !important; }
body.ec-shell #imageModal #imageModalImg {
    border: 1px solid var(--ec-line-1);
    border-radius: var(--ec-radius-md);
    background: var(--ec-bg-0);
}

/* ==========================================================================
   Choices.js (searchable selects, .echo-select). The base plugin CSS used to
   be bundled in Admindek's style.css (no longer loaded), so this is a
   self-contained layout + dark theme.
   ========================================================================== */
body.ec-shell .choices { position: relative; margin-bottom: 0; font-size: 0.9rem; }
body.ec-shell .choices:focus { outline: none; }
body.ec-shell .choices.is-disabled .choices__inner { opacity: 0.6; cursor: not-allowed; }
body.ec-shell .choices__inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    min-height: 42px; padding: 6px 30px 6px 10px;
    background: var(--ec-color-bg-sunken);
    border: 1px solid var(--ec-color-border-strong);
    border-radius: var(--ec-radius-md);
    color: var(--ec-fg-1); font-size: 0.9rem; cursor: pointer;
}
body.ec-shell .choices.is-open .choices__inner {
    border-color: var(--ec-color-primary);
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
body.ec-shell .choices__list--single { display: block; padding: 0; width: 100%; }
body.ec-shell .choices__list--single .choices__item { color: var(--ec-fg-0); }
body.ec-shell .choices__placeholder { color: var(--ec-fg-4); opacity: 1; }
/* dropdown arrow */
body.ec-shell .choices[data-type*="select-one"]::after {
    content: ""; position: absolute; right: 12px; top: 50%; width: 0; height: 0; margin-top: -2px;
    border: 5px solid transparent; border-top-color: var(--ec-fg-3); pointer-events: none;
}
body.ec-shell .choices[data-type*="select-one"].is-open::after {
    border-top-color: transparent; border-bottom-color: var(--ec-fg-3); margin-top: -7px;
}
/* dropdown panel */
body.ec-shell .choices__list--dropdown {
    display: none; position: absolute; z-index: 1060; top: 100%; left: 0; right: 0;
    background: var(--ec-bg-2);
    border: 1px solid var(--ec-color-primary); border-top: 0;
    border-radius: 0 0 var(--ec-radius-md) var(--ec-radius-md);
    box-shadow: var(--ec-shadow-lg); overflow: hidden;
}
body.ec-shell .choices__list--dropdown.is-active { display: block; }
body.ec-shell .choices__list--dropdown .choices__list { max-height: 280px; overflow: auto; padding: 4px; }
body.ec-shell .choices__list--dropdown .choices__item {
    padding: 8px 10px; border-radius: var(--ec-radius-sm); color: var(--ec-fg-1); font-size: 0.875rem;
}
body.ec-shell .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: var(--ec-color-primary-soft); color: var(--ec-fg-0);
}
body.ec-shell .choices__list--dropdown .choices__placeholder { display: none; }
body.ec-shell .choices__heading {
    color: var(--ec-fg-3); padding: 8px 10px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
}
/* search input inside the dropdown */
body.ec-shell .choices__list--dropdown .choices__input,
body.ec-shell .choices__input.choices__input--cloned {
    display: block; width: calc(100% - 8px); margin: 4px; padding: 8px 10px;
    background: var(--ec-color-bg-sunken) !important;
    color: var(--ec-fg-0) !important;
    border: 1px solid var(--ec-color-border-strong) !important;
    border-radius: var(--ec-radius-sm); font-size: 0.875rem;
}
body.ec-shell .choices__input::placeholder { color: var(--ec-fg-4); }
/* inline cloned input within the inner box (multi-select typing) */
body.ec-shell .choices__inner .choices__input {
    background: transparent !important; border: 0 !important; margin: 0; padding: 2px; width: auto;
    color: var(--ec-fg-0) !important;
}
/* multi-select chips */
body.ec-shell .choices__list--multiple .choices__item {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; margin: 2px;
    background: var(--ec-color-primary-soft); color: var(--ec-blue-hi);
    border: 1px solid rgba(37,99,235,0.4); border-radius: var(--ec-radius-sm); font-size: 0.8rem;
}
body.ec-shell .choices__list--multiple .choices__item .choices__button {
    border: 0; background: transparent; color: inherit; opacity: 0.7; cursor: pointer; padding: 0 2px;
}

/* ==========================================================================
   Legacy "light" utility net: views written for the old theme use Bootstrap
   light utilities (bg-white/bg-light/text-dark) that would render as bright
   surfaces on the dark shell. Flip them to theme tokens app-wide. (Inline
   style="background:#fff" cannot be caught here and is fixed per-view.)
   ========================================================================== */
body.ec-shell .ec-main .bg-white,
body.ec-shell .ec-main .bg-light,
body.ec-shell .ec-main .bg-body,
body.ec-shell .ec-main .bg-body-tertiary,
body.ec-shell .ec-main .bg-body-secondary {
    background-color: var(--ec-bg-2) !important;
    color: var(--ec-fg-1);
}
/* Keep badges using their own soft treatment (defined above), don't override */
body.ec-shell .ec-main .badge.bg-light,
body.ec-shell .ec-main .badge.bg-white { color: var(--ec-fg-2); }

body.ec-shell .ec-main .text-dark,
body.ec-shell .ec-main .text-body,
body.ec-shell .ec-main .text-black { color: var(--ec-fg-1) !important; }

body.ec-shell .ec-main .table-light {
    --bs-table-color: var(--ec-fg-1);
    --bs-table-bg: var(--ec-bg-3);
    --bs-table-border-color: var(--ec-line-1);
    --bs-table-color-state: var(--ec-fg-1);
    --bs-table-bg-state: var(--ec-bg-3);
}
/* Descendant cells (not just direct children) so nested tfoot/tr/td get
   readable light text instead of Bootstrap's default black-on-dark. */
body.ec-shell .ec-main .table-light,
body.ec-shell .ec-main .table-light th,
body.ec-shell .ec-main .table-light td {
    background-color: var(--ec-bg-3) !important;
    color: var(--ec-fg-1) !important;
    border-color: var(--ec-line-1) !important;
}
body.ec-shell .ec-main .border-light { border-color: var(--ec-line-1) !important; }