/* ═══════════════════════════════════════════════════════════════════════════
   ePS Brand Override
   Font family, font sizes, icons, and colour palette are fully delegated to
   Inspinia's theme system. Only the ePS brand colour (teal), sidebar palette,
   and structural layout fixes live here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. Global scale — matches 90% browser zoom for all traders ─────────── */
/* Setting font-size on html (not body) scales every rem unit in Bootstrap   */
/* and Inspinia: spacing, component sizes, typography — all proportional.    */
html {
    font-size: 85%; /* default = A; JS overrides with saved localStorage preference */
}

/* ── 1. ePS primary colour ──────────────────────────────────────────────── */
:root {
    --theme-primary:        #0E9DB0;
    --theme-primary-rgb:    14, 157, 176;
    --bs-primary:           #0E9DB0;
    --bs-primary-rgb:       14, 157, 176;
    --bs-link-color:        #0E9DB0;
    --bs-link-hover-color:  #0B7E8E;
    --ins-topbar-height:    58px;
    --ins-sidenav-width:    205px;
}

.text-primary   { color:            #0E9DB0 !important; }
.bg-primary     { background-color: #0E9DB0 !important; }
.border-primary { border-color:     #0E9DB0 !important; }

.btn-primary {
    --bs-btn-bg:                 #0E9DB0;
    --bs-btn-border-color:       #0E9DB0;
    --bs-btn-hover-bg:           #0B7E8E;
    --bs-btn-hover-border-color: #0B7E8E;
    --bs-btn-active-bg:          #0B7E8E;
    --bs-btn-color:              #fff;
    --bs-btn-hover-color:        #fff;
    --bs-btn-active-color:       #fff;
}

.btn-outline-primary {
    --bs-btn-color:              #0E9DB0;
    --bs-btn-border-color:       #0E9DB0;
    --bs-btn-hover-bg:           #0E9DB0;
    --bs-btn-hover-border-color: #0E9DB0;
    --bs-btn-hover-color:        #fff;
}

/* ── 2. Topbar — ghost sidebar toggle, teal hover ───────────────────────── */
.sidenav-toggle-button {
    background:   transparent !important;
    border-color: transparent !important;
    color:        #6c757d    !important;
    box-shadow:   none       !important;
}
.sidenav-toggle-button:hover {
    background:   rgba(14,157,176,.08) !important;
    border-color: transparent !important;
    color:        #0E9DB0    !important;
}

html[data-topbar-color=light],
html:not([data-topbar-color]) {
    --theme-topbar-item-hover-color: #0E9DB0;
}

/* ── 3. Sidebar — ePS ink palette (dark menu only) ─────────────────────── */
html[data-menu-color=dark] {
    --theme-sidenav-bg:                #0A1F33;
    --theme-sidenav-border-color:      #0A1F33;
    --theme-sidenav-item-color:        rgba(241,247,249,0.55);
    --theme-sidenav-item-hover-color:  #E2F4F6;
    --theme-sidenav-item-hover-bg:     rgba(14,157,176,0.10);
    --theme-sidenav-item-active-color: #ffffff;
    --theme-sidenav-item-active-bg:    rgba(14,157,176,0.18);
}

html[data-menu-color=dark] .side-nav-item.active > .side-nav-link,
html[data-menu-color=dark] .side-nav-item > .side-nav-link.active {
    border-left: 3px solid #0E9DB0;
}

html[data-menu-color=dark] .side-nav-title {
    color:          rgba(14,157,176,0.60);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── 4. Sidebar footer ──────────────────────────────────────────────────── */
.sidenav-menu {
    display:        flex;
    flex-direction: column;
}

.sidenav-menu .scrollbar {
    flex:       1;
    min-height: 0;
}

.sidenav-footer {
    flex-shrink: 0;
    padding:     12px 16px;
    border-top:  1px solid rgba(14,157,176,0.15);
}

.sidenav-footer-logout:hover i { color: #ff6b6b !important; }

.sidenav-menu[data-sidenav-size="condensed"] .sidenav-footer-text,
.sidenav-menu[data-sidenav-size="sm"] .sidenav-footer-text {
    display: none;
}

/* ── 5. Select2 — only highlight colour, fonts left to Inspinia ─────────── */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #0E9DB0 !important;
    color:            #fff    !important;
}

/* ── 6. Toastr — compact, ePS-themed ───────────────────────────────────── */
#toast-container > div {
    padding:       10px 14px 10px 46px !important;
    border-radius: 6px                 !important;
    font-size:     12px                !important;
    font-weight:   500                 !important;
    min-width:     200px               !important;
    max-width:     280px               !important;
    box-shadow:    0 4px 16px rgba(0,0,0,.12) !important;
    opacity:       1                   !important;
}
#toast-container > .toast-success { background-color: #0acf97 !important; }
#toast-container > .toast-error   { background-color: #ed5565 !important; }
#toast-container > .toast-warning { background-color: #f8ac59 !important; }
#toast-container > .toast-info    { background-color: #0E9DB0 !important; }
#toast-container > div::before {
    font-size:   16px  !important;
    top:         50%   !important;
    margin-top: -8px   !important;
    left:        14px  !important;
}
.toast-progress {
    height: 2px !important;
}


/* ── 7. Profile vertical nav — active highlight ─────────────────────────── */
/* wizard-tabs.wizard-bordered keeps active border transparent by default.   */
/* Override to show the ePS teal left stripe + subtle teal wash.             */
#profileTabs.wizard-tabs.wizard-bordered .nav-link.active {
    border-left-color: #0E9DB0 !important;
    background-color:  rgba(14,157,176,0.07) !important;
}
#profileTabs.wizard-tabs.wizard-bordered .nav-link.active .avatar-title {
    background-color: rgba(14,157,176,0.12) !important;
}
#profileTabs.wizard-tabs .nav-link:hover:not(.active) {
    background-color: rgba(14,157,176,0.04) !important;
}

/* ── 8. Structural ──────────────────────────────────────────────────────── */

/* Tooltip z-index above collapsed sidebar */
.tooltip { z-index: 1080; }

/* ── 8a. Topbar notification / message dropdowns ────────────────────────── */

.hdr-notify-menu {
    min-width:    340px;
    max-width:    360px;
    border:       1px solid #e2e8f0;
    border-radius:10px;
    box-shadow:   0 8px 32px rgba(0,0,0,0.12);
    overflow:     hidden;
}
.hdr-notify-hdr {
    display:     flex;
    align-items: center;
    padding:     12px 16px;
    border-bottom: 1px solid #f0f3f6;
    background:  #f8f9fa;
}
.hdr-notify-title {
    font-size:   13px;
    font-weight: 700;
    color:       #0d2235;
    letter-spacing: -0.01em;
}
.hdr-notify-body {
    max-height:  360px;
    overflow-y:  auto;
}
.hdr-notify-empty {
    padding:     32px 16px;
    text-align:  center;
    font-size:   12px;
    color:       #adb5bd;
}
/* Individual notification item — use class .hdr-notify-item when dynamic items are added */
.hdr-notify-item {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    padding:     12px 16px;
    border-bottom: 1px solid #f5f7fa;
    cursor:      pointer;
    transition:  background .15s;
}
.hdr-notify-item:hover { background: #f8f9fc; }
.hdr-notify-item.unread { background: rgba(14,157,176,0.04); }
.hdr-notify-item-icon {
    width:         36px;
    height:        36px;
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     1rem;
    flex-shrink:   0;
}
.hdr-notify-item-body { flex: 1; min-width: 0; }
.hdr-notify-item-text {
    font-size:   12px;
    color:       #3d4a5c;
    line-height: 1.5;
    white-space: normal;
}
.hdr-notify-item-time {
    font-size: 10px;
    color:     #adb5bd;
    margin-top: 3px;
}
.hdr-notify-footer {
    padding:     10px 16px;
    border-top:  1px solid #f0f3f6;
    background:  #f8f9fa;
    text-align:  center;
}
.hdr-notify-footer-link {
    font-size:   12px;
    font-weight: 500;
    text-decoration: none;
}
.hdr-notify-footer-link:hover { color: #0E9DB0 !important; }

/* Badge on topbar icons */
.topbar-badge {
    position:    absolute;
    top:         2px;
    right:       2px;
    min-width:   17px;
    height:      17px;
    padding:     0 4px;
    font-size:   9px;
    font-weight: 700;
    line-height: 17px;
    border-radius: 20px;
    color:       #fff;
    text-align:  center;
    pointer-events: none;
}

/* ── 9. Profile page — govTech tab & section polish ────────────────────── */

/* Tab content panel: teal dashed border replaces plain grey */
#profileTabPanes {
    border-color: rgba(14,157,176,0.38) !important;
    box-shadow:   0 0 0 3px rgba(14,157,176,0.06),
                  0 2px 12px rgba(0,0,0,0.07);
    transition:   box-shadow .35s ease;
}

/* Brief glow burst when a tab is clicked (JS toggles .tab-focus) */
#profileTabPanes.tab-focus {
    box-shadow: 0 0 0 4px rgba(14,157,176,0.22),
                0 6px 28px rgba(14,157,176,0.13);
}

/* Section heading: official teal left-accent stripe */
#profileTabPanes .tab-pane > h5 {
    border-left:   3px solid #0E9DB0;
    padding-left:  10px;
    color:         #0d2f42;
    letter-spacing:-0.01em;
}

/* Sub-description text aligned under heading accent */
#profileTabPanes .tab-pane > p.text-muted {
    padding-left: 13px;
}

/* Active tab: sub-label picks up teal tint */
#profileTabs .nav-link.active .fs-xs.text-muted {
    color: rgba(14,157,176,0.85) !important;
}

/* Active tab: icon container — slightly stronger teal wash */
#profileTabs.wizard-tabs.wizard-bordered .nav-link.active .avatar-title {
    background-color: rgba(14,157,176,0.15) !important;
    border: 1px solid rgba(14,157,176,0.20);
}

/* ── 10. Policy Acceptance Modal ────────────────────────────────────────── */

.policy-modal-dialog { height: calc(100dvh - 3rem); }

.policy-modal-content {
    display:        flex;
    flex-direction: column;
    height:         100%;
    border:         none;
    border-radius:  10px;
    overflow:       hidden;
    box-shadow:     0 24px 64px rgba(0,0,0,0.28);
}

/* Header — deep navy-to-teal gradient */
.policy-modal-hdr {
    background:    linear-gradient(130deg, #0d2235 0%, #0B7E8E 100%);
    border-bottom: none;
    padding:       18px 24px;
    flex-shrink:   0;
}
.policy-seal {
    width:         48px;
    height:        48px;
    border-radius: 50%;
    background:    rgba(255,255,255,0.12);
    border:        1px solid rgba(255,255,255,0.2);
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
}
.policy-modal-label {
    font-size:   10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:       rgba(255,255,255,0.65);
    margin-bottom: 3px;
}
.policy-modal-title {
    font-size:   1.1rem;
    font-weight: 700;
    color:       #fff;
    margin:      0;
    line-height: 1.2;
}
.policy-version-badge {
    background:  rgba(255,255,255,0.18);
    border:      1px solid rgba(255,255,255,0.3);
    color:       #fff;
    font-size:   10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding:     3px 8px;
    border-radius: 20px;
}
.policy-modal-sub {
    font-size: 10px;
    color:     rgba(255,255,255,0.5);
}

/* Tab nav strip */
.policy-tab-nav {
    background:  #f8f9fa;
    border-bottom: 1px solid #e2e8f0;
    padding:     0 20px;
    flex-shrink: 0;
}
.policy-nav {
    gap:        4px;
    flex-wrap:  nowrap;
    padding:    8px 0;
    overflow-x: auto;
}
.policy-nav-link {
    font-size:     12px;
    font-weight:   600;
    color:         #566273 !important;
    border-radius: 6px !important;
    padding:       6px 14px !important;
    white-space:   nowrap;
    position:      relative;
    transition:    background .2s, color .2s;
}
.policy-nav-link.active {
    background: #0E9DB0 !important;
    color:      #fff    !important;
}
.policy-nav-link:disabled,
.policy-nav-link[disabled] {
    opacity: 0.42;
    pointer-events: none;
}
.policy-ack-tab.active {
    background: #0d2235 !important;
}
.policy-read-dot {
    display:       inline-block;
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    #e2e8f0;
    margin-left:   5px;
    vertical-align: middle;
    transition:    background .3s;
}
.policy-read-dot.read {
    background: #0acf97;
}

/* Scrollable body */
.policy-modal-body {
    flex:      1;
    overflow-y: auto;
    padding:   0;
}

/* Tab pane wrapper */
.policy-pane {
    padding: 24px 28px;
}

/* Policy document header (icon + title) */
.policy-doc-header {
    display:       flex;
    align-items:   flex-start;
    gap:           14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9ecef;
}
.policy-doc-icon {
    width:         52px;
    height:        52px;
    border-radius: 10px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     1.55rem;
    flex-shrink:   0;
    box-shadow:    0 2px 8px rgba(0,0,0,0.06);
}
.policy-doc-title {
    font-size:   1rem;
    font-weight: 700;
    color:       #0d2235;
    margin-bottom: 4px;
}
.policy-doc-sub {
    font-size: 11px;
    color:     #8898aa;
    margin:    0;
}

/* Policy text */
.policy-text {
    font-size:   13px;
    line-height: 1.75;
    color:       #3d4a5c;
}
.policy-text h6 {
    font-size:   12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color:       #0d2235;
    margin-top:  20px;
    margin-bottom: 6px;
    padding-left: 10px;
    border-left:  3px solid #0E9DB0;
}
.policy-text p { margin-bottom: 10px; }

/* In-pane next-tab button */
.policy-nav-footer {
    display:     flex;
    margin-top:  24px;
    padding-top: 16px;
    border-top:  1px solid #e9ecef;
}

/* Acknowledgement cards */
.policy-ack-wrap { display: flex; flex-direction: column; gap: 12px; }

.policy-ack-card {
    border:        1px solid #e2e8f0;
    border-radius: 8px;
    padding:       0;
    transition:    border-color .2s, box-shadow .2s;
}
.policy-ack-card.checked {
    border-color: #0acf97;
    box-shadow:   0 0 0 3px rgba(10,207,151,0.1);
}
.policy-ack-label {
    display:     flex;
    align-items: center;
    gap:         14px;
    padding:     14px 16px;
    cursor:      pointer;
    margin:      0;
    width:       100%;
}
.policy-ack-icon {
    font-size:  1.3rem;
    flex-shrink: 0;
    width:       36px;
    text-align:  center;
}
.policy-ack-name {
    font-size:   13px;
    font-weight: 600;
    color:       #0d2235;
    margin-bottom: 2px;
}
.policy-ack-desc {
    font-size: 12px;
    color:     #8898aa;
}
.policy-ack-check { flex-shrink: 0; }
.policy-ack-input {
    width:  1.15em !important;
    height: 1.15em !important;
    cursor: pointer;
    border-color: #adb5bd;
}
.policy-ack-input:checked {
    background-color: #0E9DB0 !important;
    border-color:     #0E9DB0 !important;
}

/* Master agreement */
.policy-master-agree {
    margin-top:    8px;
    padding:       18px 16px;
    background:    linear-gradient(135deg, rgba(14,157,176,0.04), rgba(13,34,53,0.03));
    border:        2px solid rgba(14,157,176,0.25);
    border-radius: 8px;
}
.policy-master-text {
    font-size:   13px;
    color:       #0d2235;
    line-height: 1.6;
    margin-bottom: 6px;
}
.policy-master-sub {
    font-size: 11px;
    color:     #8898aa;
}

/* Footer */
.policy-modal-footer {
    border-top:  1px solid #e2e8f0;
    background:  #f8f9fa;
    padding:     14px 24px;
    flex-shrink: 0;
    display:     flex;
    align-items: center;
    justify-content: space-between;
}
.policy-footer-note {
    font-size: 12px;
    color:     #8898aa;
}
.policy-accept-btn {
    min-width:   180px;
    font-weight: 600;
    font-size:   13px;
    padding:     8px 20px;
    transition:  box-shadow .2s;
}
.policy-accept-btn:not(:disabled) {
    box-shadow: 0 4px 14px rgba(14,157,176,0.35);
}

/* ── 11. Submission History page ────────────────────────────────────────── */

/* KPI strip left accent and hover */
#hist-kpi-strip .card { transition: transform .15s, box-shadow .15s; }
#hist-kpi-strip .card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.1)!important; }

/* Table: tighter DataTable controls  */
#sub-history-table_wrapper .dataTables_filter input {
    border-radius: 6px;
    padding-left: 10px;
    font-size: 12px;
}
#sub-history-table_wrapper .dataTables_length select {
    border-radius: 6px;
    font-size: 12px;
    padding: 3px 24px 3px 8px;
}

/* Responsive detail row icon */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    background-color: #0E9DB0;
}

/* ── 12. Trader Dashboard ─────────────────────────────────────── */

/* KPI cards — dashed border Inspinia style */
.card .card-header.border-dashed { border-bottom: 1px dashed rgba(0,0,0,.1) !important; }
.card .border-dashed { border-color: rgba(0,0,0,.08) !important; }

/* KPI card hover lift */
.card { transition: box-shadow .15s; }
.card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.09) !important; }

/* Urgent action card pulse border */
.eps-card-urgent { border: 1px solid rgba(241,85,108,0.35) !important; }

/* FX Ticker — fintech dark card */
.eps-fx-ticker:hover { background: rgba(255,255,255,0.1) !important; cursor: default; }
.eps-fx-ticker .fs-rate { font-variant-numeric: tabular-nums; }

/* Action row hover */
.eps-action-row { transition: background .12s; }
.eps-action-row:hover { background: rgba(241,85,108,0.04); }

/* Quick action button variants */
.btn-soft-primary   { background: rgba(14,157,176,0.1);  color: #0E9DB0; border: none; }
.btn-soft-primary:hover  { background: rgba(14,157,176,0.2);  color: #0A3550; }
.btn-soft-secondary { background: rgba(108,117,125,0.1); color: #6c757d; border: none; }
.btn-soft-secondary:hover { background: rgba(108,117,125,0.2); color: #495057; }
.btn-soft-danger    { background: rgba(241,85,108,0.1);  color: #f1556c; border: none; }
.btn-soft-danger:hover  { background: rgba(241,85,108,0.2);  color: #f1556c; }

/* Progress bars on split card */
.progress { overflow: visible; }

/* Product portfolio avatar circle sizing */
.avatar-sm.rounded-circle { width: 32px; height: 32px; display: inline-flex; }

/* thead-sm sizing tweak */
.thead-sm th { padding-top: .45rem !important; padding-bottom: .45rem !important; }

/* Announcement rows — dashboard card */
.eps-ann-row { transition: background .12s; }
.eps-ann-row:hover { background: rgba(14,157,176,0.05); }
.eps-ann-row:focus-visible { outline: 2px solid #0E9DB0; outline-offset: -2px; border-radius: 4px; }

/* Announcement body text (modal + page) */
.eps-ann-body { white-space: pre-wrap; word-break: break-word; }
.eps-ann-body br + br { display: block; content: ''; margin-top: .5rem; }

/* Announcements page — accordion button custom style */
.eps-acc-btn { background: #fff !important; box-shadow: none !important; }
.eps-acc-btn:not(.collapsed) { background: rgba(14,157,176,0.04) !important; color: inherit !important; }
.eps-acc-btn::after { filter: none; opacity: .5; }
.eps-acc-btn:not(.collapsed)::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   Section 13 — Help & Support / Helpdesk
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Badge variants for ticket status ────────────────────────────────────── */
.badge-soft-warning   { background: rgba(240,173,78,.15);  color: #c8830a; }
.badge-soft-primary   { background: rgba(114,124,245,.15); color: #4250e0; }
.badge-soft-secondary { background: rgba(108,117,125,.12); color: #495057; }
.badge-soft-success   { background: rgba(10,207,151,.15);  color: #0a8f69; }
.badge-soft-info      { background: rgba(14,157,176,.15);  color: #0a7d8e; }
.badge-soft-danger    { background: rgba(241,85,108,.15);  color: #c73352; }
.eps-badge-closed     { background: rgba(52,58,64,.12);    color: #343a40; }

/* ── Ticket list row ─────────────────────────────────────────────────────── */
.eps-ticket-row { cursor: pointer; transition: background .12s; }
.eps-ticket-row:hover { background: rgba(14,157,176,.04); }

/* btn-xs (smaller than btn-sm) */
.btn-xs { padding: .2rem .55rem; font-size: .72rem; line-height: 1.4; border-radius: .25rem; }

/* ── Message thread bubbles ──────────────────────────────────────────────── */
.eps-bubble          { max-width: 78%; }
.eps-bubble-meta     { line-height: 1.2; }

.eps-bubble-body {
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Trader bubble — right side, teal gradient */
.eps-bubble-body-trader {
    background: linear-gradient(135deg, #0A3550, #0E9DB0);
    color: #fff;
    border-radius: 14px 14px 4px 14px;
}
.eps-bubble-body-trader a { color: #7ee8f5; }

/* Staff bubble — left side, white with border */
.eps-bubble-body-staff {
    background: #fff;
    border: 1px solid #dee2e6;
    color: #343a40;
    border-radius: 14px 14px 14px 4px;
}

/* Newly appended reply highlight */
.eps-new-msg .eps-bubble-body-trader {
    animation: bubblePop .25s ease-out;
}
@keyframes bubblePop {
    from { transform: scale(.96); opacity: .7; }
    to   { transform: scale(1);   opacity: 1;  }
}

/* ── Helpdesk: filter pill buttons ──────────────────────────────────────── */
.eps-filter-btn {
    background: #f1f3f7;
    color: #495057;
    border: 1px solid #e9ecef;
    font-size: 12px;
    padding: .25rem .65rem;
    border-radius: 20px;
    transition: all .15s;
    white-space: nowrap;
}
.eps-filter-btn:hover  { background: #e9ecef; color: #343a40; }
.eps-filter-btn.active { background: #0A3550; color: #fff; border-color: #0A3550; }

/* ── Status stepper ──────────────────────────────────────────────────────── */
.eps-step-item { min-width: 64px; }

/* ── Activity timeline connector line ────────────────────────────────────── */
.eps-timeline-line {
    display: block;
    width: 2px;
    background: #dee2e6;
    height: 100%;
    min-height: 20px;
    margin: 4px auto 0;
}

/* ── Notification preference toggles — teal checked state ───────────────── */
.notif-toggle {
    cursor: pointer;
    width: 2.5em;
    height: 1.4em;
    flex-shrink: 0;
}
.notif-toggle:checked {
    background-color: #0acf97;
    border-color:     #0acf97;
}
.notif-toggle:focus {
    border-color: rgba(10,207,151,.5);
    box-shadow:   0 0 0 .2rem rgba(10,207,151,.25);
}

/* ── Dark mode: support ticket conversation card ────────────────────────── */
[data-bs-theme=dark] #ct-meta-strip {
    background: #1e2a38 !important;
    border-color: #2d3f52 !important;
}
[data-bs-theme=dark] #threadContainer {
    background: #1a2332 !important;
}
[data-bs-theme=dark] .ct-staff-bubble {
    background: #243040 !important;
    color: #d1dae6 !important;
    border-color: #2d3f52 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.3) !important;
}
[data-bs-theme=dark] .ct-staff-name {
    color: #7eb8d4 !important;
}
[data-bs-theme=dark] #ct-reply-area {
    background: #1e2a38 !important;
}
[data-bs-theme=dark] .ct-sys-line {
    background: #2d3f52 !important;
}
[data-bs-theme=dark] .ct-sys-pill {
    background: #243040 !important;
    color: #8da3b8 !important;
}
[data-bs-theme=dark] .ct-attach-pill {
    background: #1e3040 !important;
    border-color: #2a4a60 !important;
    color: #7eb8d4 !important;
}