/* ============================================================
   Cre8work DARK MODE - agent panel AND customer portal
   Server path: /var/www/html/osticket/assets/custom/css/cre8work-dark.css
   Active only when <html data-c8theme="dark"> (set in <head> from the
   c8theme cookie by the header snippet, before anything paints, so the
   page never flashes white). Each user picks Light / Dark / Match my
   device under their profile (assets/custom/js/c8-theme.js).

   Same rule as the light theme: colours only, never sizes or layout.
   ============================================================ */
html[data-c8theme="dark"] {
    --d-bg: #141619;
    --d-surface: #1c1f23;
    --d-surface-2: #23272c;
    --d-surface-3: #2b3036;
    --d-line: #353b42;
    --d-text: #e4e6e9;
    --d-muted: #9aa2ab;
    --d-red: #e5484f;
    --d-red-hover: #f0646a;
    --d-red-tint: #3a1d20;
    --d-link: #8ab4f8;
    --d-focus: rgba(229, 72, 79, .45);
    /* the light theme's own tokens, re-pointed: every rule that uses them follows */
    --c8-ink: var(--d-text);
    --c8-charcoal: var(--d-text);
    --c8-grey: var(--d-muted);
    --c8-line: var(--d-line);
    --c8-bg-soft: var(--d-surface-2);
    --c8-red-tint: var(--d-red-tint);
    color-scheme: dark;
}

/* ---------- page, frame, text ---------- */
html[data-c8theme="dark"], html[data-c8theme="dark"] body { background: var(--d-bg) !important; color: var(--d-text); }
html[data-c8theme="dark"] #container,
html[data-c8theme="dark"] #content,
html[data-c8theme="dark"] #pjax-container { background: var(--d-surface) !important; color: var(--d-text); border-color: var(--d-line) !important; }
html[data-c8theme="dark"] a { color: var(--d-link); }
html[data-c8theme="dark"] a:hover { color: #b3cdfb; }
html[data-c8theme="dark"] h1, html[data-c8theme="dark"] h2, html[data-c8theme="dark"] h3,
html[data-c8theme="dark"] h4, html[data-c8theme="dark"] legend { color: var(--d-text) !important; }
html[data-c8theme="dark"] .faded, html[data-c8theme="dark"] small, html[data-c8theme="dark"] .muted { color: var(--d-muted) !important; }
html[data-c8theme="dark"] hr { border-color: var(--d-line); background: var(--d-line); }
html[data-c8theme="dark"] ::selection { background: var(--d-red-tint); color: #fff; }

/* ---------- header, logo, navigation ---------- */
html[data-c8theme="dark"] #header { background: var(--d-surface) !important; border-bottom-color: var(--d-red) !important; color: var(--d-text); }
html[data-c8theme="dark"] #header p, html[data-c8theme="dark"] #header #info,
html[data-c8theme="dark"] #header .pull-right { background: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-line) !important; }
/* the logo has dark lettering: give it its own light plate */
html[data-c8theme="dark"] #logo img, html[data-c8theme="dark"] #header a#logo img,
html[data-c8theme="dark"] .c8-logo img { background: #fff; border-radius: 6px; padding: 3px 8px; }
html[data-c8theme="dark"] #nav { background: var(--d-surface-2) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] #nav li.active, html[data-c8theme="dark"] #nav li.inactive:hover { background: var(--d-surface) !important; }
html[data-c8theme="dark"] #nav li a, html[data-c8theme="dark"] #nav .inactive a { color: var(--d-muted) !important; }
html[data-c8theme="dark"] #nav li.active a, html[data-c8theme="dark"] #nav li a:hover,
html[data-c8theme="dark"] #nav li a.active { color: var(--d-text) !important; }
html[data-c8theme="dark"] #nav li.inactive > ul, html[data-c8theme="dark"] .customQ-dropdown,
html[data-c8theme="dark"] .jb-overflowmenu-menu-secondary, html[data-c8theme="dark"] .jb-overflowmenu .jb-overflowmenu-container,
html[data-c8theme="dark"] .action-dropdown, html[data-c8theme="dark"] .action-dropdown ul,
html[data-c8theme="dark"] .dropdown-menu { background: var(--d-surface-2) !important; border-color: var(--d-line) !important; box-shadow: 0 8px 24px rgba(0,0,0,.5) !important; }
html[data-c8theme="dark"] #nav .inactive li a:hover, html[data-c8theme="dark"] .action-dropdown li a:hover,
html[data-c8theme="dark"] .customQ-dropdown li:hover, html[data-c8theme="dark"] .jb-overflowmenu-menu-secondary li.item:hover,
html[data-c8theme="dark"] #customQ_nav .jb-overflowmenu-menu-primary li.item:hover { background: var(--d-red-tint) !important; color: #fff !important; }
html[data-c8theme="dark"] .action-dropdown a, html[data-c8theme="dark"] .customQ-dropdown a { color: var(--d-text) !important; }
html[data-c8theme="dark"] #sub_nav, html[data-c8theme="dark"] #breadcrumbs,
html[data-c8theme="dark"] .customQ-dropdown li h4, html[data-c8theme="dark"] .customQ-dropdown li.top-level,
html[data-c8theme="dark"] .customQ-dropdown li.personalQ { background: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] #sub_nav a { color: var(--d-muted); }
html[data-c8theme="dark"] #sub_nav a.active, html[data-c8theme="dark"] #sub_nav a:hover { color: var(--d-red) !important; }

/* ---------- tables ---------- */
html[data-c8theme="dark"] table.list, html[data-c8theme="dark"] table.dashboard-stats { background: var(--d-line) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] table.list caption { background: var(--d-surface-3) !important; color: var(--d-text) !important; }
html[data-c8theme="dark"] table.list thead th, html[data-c8theme="dark"] table.list th,
html[data-c8theme="dark"] table tfoot td, html[data-c8theme="dark"] #ticketTable th,
html[data-c8theme="dark"] table.custom-data th, html[data-c8theme="dark"] .ticket_info.custom-data thead th { background: var(--d-surface-3) !important; color: var(--d-text) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] table.list thead th a { color: var(--d-text) !important; }
html[data-c8theme="dark"] table.list tbody td, html[data-c8theme="dark"] #ticketTable td,
html[data-c8theme="dark"] .table td, html[data-c8theme="dark"] table.dashboard-stats td { background: var(--d-surface) !important; color: var(--d-text); border-color: var(--d-line) !important; }
html[data-c8theme="dark"] table.list tbody tr:nth-child(2n+1) td, html[data-c8theme="dark"] #ticketTable tr.alt td,
html[data-c8theme="dark"] table.dashboard-stats tbody:nth-child(2) tr:nth-child(odd) td { background: var(--d-surface-2) !important; }
html[data-c8theme="dark"] table.list tbody tr:hover td, html[data-c8theme="dark"] table.list tbody tr.highlight td,
html[data-c8theme="dark"] #ticketTable tr:hover td { background: #2f2326 !important; }
html[data-c8theme="dark"] tr.disabled td, html[data-c8theme="dark"] tr.disabled th { background: var(--d-surface-3) !important; color: var(--d-muted) !important; }
html[data-c8theme="dark"] .form_table, html[data-c8theme="dark"] .ticket_info, html[data-c8theme="dark"] .infoTable,
html[data-c8theme="dark"] table.ticket_info td, html[data-c8theme="dark"] .form_table td { background: var(--d-surface) !important; color: var(--d-text); border-color: var(--d-line) !important; }
html[data-c8theme="dark"] .form_table th, html[data-c8theme="dark"] div.section-break,
html[data-c8theme="dark"] table .headline, html[data-c8theme="dark"] table.custom-data .headline { background: var(--d-surface-3) !important; color: var(--d-text) !important; border-color: var(--d-line) !important; }

/* ---------- forms ---------- */
html[data-c8theme="dark"] input[type=text], html[data-c8theme="dark"] input[type=password], html[data-c8theme="dark"] input[type=email],
html[data-c8theme="dark"] input[type=search], html[data-c8theme="dark"] input[type=number], html[data-c8theme="dark"] input[type=date],
html[data-c8theme="dark"] input[type=tel], html[data-c8theme="dark"] input[type=url], html[data-c8theme="dark"] input:not([type]),
html[data-c8theme="dark"] textarea, html[data-c8theme="dark"] select,
html[data-c8theme="dark"] #response_options input[type=text], html[data-c8theme="dark"] #response_options textarea:not(.richtext),
html[data-c8theme="dark"] .search input[type=text], html[data-c8theme="dark"] #basic_search,
html[data-c8theme="dark"] .select2-container .select2-selection { background: var(--d-bg) !important; color: var(--d-text) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] input::placeholder, html[data-c8theme="dark"] textarea::placeholder { color: #737b85 !important; }
html[data-c8theme="dark"] input:disabled, html[data-c8theme="dark"] select:disabled, html[data-c8theme="dark"] textarea:disabled { background: var(--d-surface-3) !important; color: var(--d-muted) !important; }
html[data-c8theme="dark"] input:focus, html[data-c8theme="dark"] textarea:focus, html[data-c8theme="dark"] select:focus { border-color: var(--d-red) !important; box-shadow: 0 0 0 3px var(--d-focus) !important; outline: none; }
html[data-c8theme="dark"] .redactor-box, html[data-c8theme="dark"] .redactor-layer, html[data-c8theme="dark"] .redactor-editor,
html[data-c8theme="dark"] .redactor-in, html[data-c8theme="dark"] .redactor-styles { background: var(--d-bg) !important; color: var(--d-text) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] .redactor-toolbar, html[data-c8theme="dark"] .redactor-toolbar-wrapper,
html[data-c8theme="dark"] .redactor-air { background: var(--d-surface-3) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] .redactor-toolbar a, html[data-c8theme="dark"] .re-button { color: var(--d-text) !important; }
html[data-c8theme="dark"] .redactor-dropdown, html[data-c8theme="dark"] .redactor-context-toolbar { background: var(--d-surface-2) !important; color: var(--d-text) !important; }

/* ---------- buttons ---------- */
html[data-c8theme="dark"] input[type="submit"], html[data-c8theme="dark"] input[type="reset"],
html[data-c8theme="dark"] input[type="button"], html[data-c8theme="dark"] button, html[data-c8theme="dark"] .button,
html[data-c8theme="dark"] .action-button, html[data-c8theme="dark"] .btn { background: var(--d-surface-3) !important; color: var(--d-text) !important; border-color: #46505a !important; }
html[data-c8theme="dark"] input[type="submit"]:hover, html[data-c8theme="dark"] button:hover, html[data-c8theme="dark"] .button:hover,
html[data-c8theme="dark"] .action-button:hover { background: #343a41 !important; }
html[data-c8theme="dark"] input[type="submit"].primary, html[data-c8theme="dark"] .button.primary, html[data-c8theme="dark"] .btn.green,
html[data-c8theme="dark"] .c8-btn-primary, html[data-c8theme="dark"] .btn-primary,
html[data-c8theme="dark"] #c8-reports button.button[type=submit] { background: var(--d-red) !important; border-color: var(--d-red) !important; color: #fff !important; }
html[data-c8theme="dark"] .action-button.danger:hover, html[data-c8theme="dark"] .button.danger { background: #8c171d !important; color: #fff !important; }

/* ---------- ticket thread ---------- */
html[data-c8theme="dark"] .thread-entry .header, html[data-c8theme="dark"] .thread-entry.response .header,
html[data-c8theme="dark"] .thread-entry.message .header { background: var(--d-surface-3) !important; color: var(--d-text) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] .thread-entry.note .header { background: #3a3220 !important; border-color: #5a4a26 !important; }
html[data-c8theme="dark"] .thread-entry.system .header { background: var(--d-surface-2) !important; }
html[data-c8theme="dark"] .thread-body, html[data-c8theme="dark"] .thread-entry .thread-body { background: var(--d-surface) !important; color: var(--d-text) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] .thread-entry.note .thread-body { background: #24211a !important; }
html[data-c8theme="dark"] .thread-body .attachments, html[data-c8theme="dark"] .freetext-files,
html[data-c8theme="dark"] .thread-body pre, html[data-c8theme="dark"] pre, html[data-c8theme="dark"] code { background: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] .thread-body table td, html[data-c8theme="dark"] .thread-body table th { background: transparent !important; color: var(--d-text) !important; border-color: var(--d-line) !important; }
/* email HTML pasted into the thread carries its own black text: keep it readable */
html[data-c8theme="dark"] .thread-body [style*="color:#000"], html[data-c8theme="dark"] .thread-body [style*="color: #000"],
html[data-c8theme="dark"] .thread-body [style*="color:black"], html[data-c8theme="dark"] .thread-body [style*="color: black"],
html[data-c8theme="dark"] .thread-body [style*="color:rgb(0"], html[data-c8theme="dark"] .thread-body [style*="color: rgb(0"],
html[data-c8theme="dark"] .thread-body font[color] { color: var(--d-text) !important; }
html[data-c8theme="dark"] .thread-body [style*="background"] { background-color: transparent !important; }
html[data-c8theme="dark"] .thread-entry .info, html[data-c8theme="dark"] #ticket_notes .info,
html[data-c8theme="dark"] .thread-preview-entry .header, html[data-c8theme="dark"] .thread-preview-entry.collapsed,
html[data-c8theme="dark"] .thread-preview-entry.collapsed .thread-body { background: var(--d-surface-2) !important; color: var(--d-text) !important; }
html[data-c8theme="dark"] #ticket_actions, html[data-c8theme="dark"] #response_options > form,
html[data-c8theme="dark"] #reply, html[data-c8theme="dark"] .sticky.bar.fixed, html[data-c8theme="dark"] .sticky.bar.opaque,
html[data-c8theme="dark"] div.selected-signature { background: var(--d-surface) !important; color: var(--d-text) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] ul.tabs { background: var(--d-surface-2) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] ul.tabs li, html[data-c8theme="dark"] ul.tabs li a { background: transparent !important; color: var(--d-muted) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] ul.tabs li.active, html[data-c8theme="dark"] ul.tabs li.active a { background: var(--d-surface) !important; color: var(--d-text) !important; }

/* ---------- dialogs, tips, sidebars, notices ---------- */
html[data-c8theme="dark"] .dialog, html[data-c8theme="dark"] .ui-dialog, html[data-c8theme="dark"] .ui-widget-content,
html[data-c8theme="dark"] .tip_content, html[data-c8theme="dark"] .tip_box, html[data-c8theme="dark"] .sidebar,
html[data-c8theme="dark"] .sidebar .content, html[data-c8theme="dark"] .cat-manage-bar, html[data-c8theme="dark"] .typeahead,
html[data-c8theme="dark"] .ui-datepicker, html[data-c8theme="dark"] .select2-dropdown { background: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] .dialog th, html[data-c8theme="dark"] .dialog .table td:not(:empty),
html[data-c8theme="dark"] .ui-widget-header, html[data-c8theme="dark"] .ui-datepicker-header { background: var(--d-surface-3) !important; color: var(--d-text) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] .typeahead li.active, html[data-c8theme="dark"] .typeahead li:hover,
html[data-c8theme="dark"] .select2-results__option--highlighted { background: var(--d-red-tint) !important; color: #fff !important; }
html[data-c8theme="dark"] #msg_notice, html[data-c8theme="dark"] .notice_bar { background: #1d3324 !important; color: #b8e6c4 !important; border-color: #2f5a3b !important; }
html[data-c8theme="dark"] #msg_warning, html[data-c8theme="dark"] .warning_bar, html[data-c8theme="dark"] .message.bar { background: #3a3220 !important; color: #f0d9a0 !important; border-color: #5a4a26 !important; }
html[data-c8theme="dark"] #msg_error, html[data-c8theme="dark"] .error_bar, html[data-c8theme="dark"] .error { background-color: var(--d-red-tint) !important; color: #ffc4c7 !important; border-color: #6a2a2e !important; }
html[data-c8theme="dark"] .error:not(div):not(p) { background-color: transparent !important; }
html[data-c8theme="dark"] #footer, html[data-c8theme="dark"] footer { background: var(--d-bg) !important; color: var(--d-muted) !important; }

/* ---------- Cre8work modules (register, reports, suites, analytics) ---------- */
html[data-c8theme="dark"] #c8-reports .c8-kpi, html[data-c8theme="dark"] .c8-rep-kpi, html[data-c8theme="dark"] .c8-kpi-cell,
html[data-c8theme="dark"] #c8-reports .c8-fig, html[data-c8theme="dark"] .c8-rep-section, html[data-c8theme="dark"] .c8-rep-tablewrap,
html[data-c8theme="dark"] .c8-card, html[data-c8theme="dark"] .c8-panel, html[data-c8theme="dark"] #c8-an .c8-an-ir span,
html[data-c8theme="dark"] .c8-rep-note, html[data-c8theme="dark"] .c8-rep-filter, html[data-c8theme="dark"] .c8-rep-head { background-color: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] .c8-rep-table th { background: var(--d-surface-3) !important; color: var(--d-text) !important; }
html[data-c8theme="dark"] .c8-rep-table td { background: var(--d-surface) !important; color: var(--d-text) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] .c8-rep-muted, html[data-c8theme="dark"] .c8-rep-sub, html[data-c8theme="dark"] .c8-rep-kpi-l,
html[data-c8theme="dark"] .c8-rep-kpi-s, html[data-c8theme="dark"] .c8-an-who { color: var(--d-muted) !important; }
html[data-c8theme="dark"] .c8-rep-kpi-n, html[data-c8theme="dark"] #c8-reports .c8-kpi b { color: var(--d-text) !important; }
html[data-c8theme="dark"] #c8-reports .c8-kpi-bad b, html[data-c8theme="dark"] #c8-reports .c8-fig.bad b,
html[data-c8theme="dark"] #c8-an .c8-an-ir b { color: var(--d-red) !important; }
html[data-c8theme="dark"] #c8-reports .c8-fig:hover, html[data-c8theme="dark"] #c8-reports .c8-fig.on { background: var(--d-red-tint) !important; border-color: var(--d-red) !important; }
html[data-c8theme="dark"] .c8-rep-types a, html[data-c8theme="dark"] #c8-an .c8-an-tabs a,
html[data-c8theme="dark"] .c8-nav a, html[data-c8theme="dark"] #c8-reports .c8-tab { color: var(--d-text) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] .c8-rep-types a.active, html[data-c8theme="dark"] #c8-an .c8-an-tabs a.on { background: var(--d-red) !important; border-color: var(--d-red) !important; color: #fff !important; }
html[data-c8theme="dark"] #c8-reports .c8-tab.active { color: var(--d-red) !important; border-bottom-color: var(--d-red) !important; }
html[data-c8theme="dark"] #c8-reports .c8-find input { background: var(--d-bg) !important; color: var(--d-text) !important; border-color: var(--d-red) !important; }
html[data-c8theme="dark"] #c8-reports .c8-sug { background: var(--d-surface-2) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] #c8-reports .c8-sug a { color: var(--d-text) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] #c8-reports .c8-sug a:hover, html[data-c8theme="dark"] #c8-reports .c8-sug a.on { background: var(--d-red-tint) !important; }
html[data-c8theme="dark"] #c8-reports table.c8-emp tbody tr:hover td { background: #2f2326 !important; }
/* panels drawn with inline light backgrounds (notes, warnings, info boxes): dark surface, keep the coloured edge */
html[data-c8theme="dark"] #content [style*="background:#f"], html[data-c8theme="dark"] #content [style*="background: #f"],
html[data-c8theme="dark"] #content [style*="background-color:#f"], html[data-c8theme="dark"] #content [style*="background:#e"],
html[data-c8theme="dark"] #content [style*="background:#fff"], html[data-c8theme="dark"] #content [style*="background:white"],
html[data-c8theme="dark"] #content [style*="background: white"] { background: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] #content [style*="color:#231F20"], html[data-c8theme="dark"] #content [style*="color:#212529"],
html[data-c8theme="dark"] #content [style*="color:#54595F"], html[data-c8theme="dark"] #content [style*="color:#7a5c00"] { color: var(--d-text) !important; }
/* charts (server-drawn SVG): light lettering and grid on the dark page */
html[data-c8theme="dark"] svg text { fill: #c9ced4 !important; }
html[data-c8theme="dark"] svg line, html[data-c8theme="dark"] svg path[stroke="#e0e0e0"], html[data-c8theme="dark"] svg path[stroke="#eee"] { stroke: #3a4048 !important; }
html[data-c8theme="dark"] svg rect[fill="#fff"], html[data-c8theme="dark"] svg rect[fill="#ffffff"], html[data-c8theme="dark"] svg rect[fill="white"] { fill: var(--d-surface) !important; }
html[data-c8theme="dark"] svg circle[fill="#fff"] { fill: var(--d-surface) !important; }

/* ---------- customer portal ---------- */
html[data-c8theme="dark"] #landing_page, html[data-c8theme="dark"] .main-content, html[data-c8theme="dark"] #faq,
html[data-c8theme="dark"] #kb, html[data-c8theme="dark"] .front-page, html[data-c8theme="dark"] .c8-hero,
html[data-c8theme="dark"] .c8-news, html[data-c8theme="dark"] .c8-news-item, html[data-c8theme="dark"] .c8-tile,
html[data-c8theme="dark"] #ticketInfo, html[data-c8theme="dark"] #clientLogin, html[data-c8theme="dark"] #ticketForm { background: var(--d-surface) !important; color: var(--d-text) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] #faq ol li:hover, html[data-c8theme="dark"] #faq ol li a:hover, html[data-c8theme="dark"] #faq .article-meta { background: var(--d-surface-2) !important; }
html[data-c8theme="dark"] .c8-hero-kicker { color: var(--d-red) !important; }

/* ---------- the preview pop-up and the theme picker ---------- */
html[data-c8theme="dark"] .c8-pv-box { background: var(--d-surface) !important; }
html[data-c8theme="dark"] .c8-pv-btn { border-color: var(--d-red) !important; color: var(--d-red) !important; }
html[data-c8theme="dark"] .c8-pv-btn:hover { background: var(--d-red) !important; color: #fff !important; }
html[data-c8theme="dark"] img:not([src*="logo"]):not(.avatar) { opacity: .95; }

/* ---------- the Appearance card on the profile pages (both themes) ---------- */
.c8-appearance { margin: 0 0 18px; padding: 14px 16px; border: 1px solid #e0e0e0; border-left: 4px solid #A71C23; border-radius: 6px; background: #fafafa; }
.c8-appearance h3 { margin: 0 0 4px; font-size: 15px; }
.c8-appearance p { margin: 0 0 10px; font-size: 12.5px; opacity: .75; }
.c8-appearance .c8-modes { display: flex; gap: 10px; flex-wrap: wrap; }
.c8-appearance label { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #d6d8db; border-radius: 6px; cursor: pointer; background: #fff; font-size: 13px; }
.c8-appearance label.on { border-color: #A71C23; box-shadow: inset 0 0 0 1px #A71C23; }
.c8-appearance .sw { width: 26px; height: 18px; border-radius: 4px; border: 1px solid #c4c7cb; }
.c8-appearance .sw.l { background: linear-gradient(135deg, #fff 50%, #f1f1f2 50%); }
.c8-appearance .sw.d { background: linear-gradient(135deg, #1c1f23 50%, #2b3036 50%); }
.c8-appearance .sw.a { background: linear-gradient(135deg, #fff 50%, #1c1f23 50%); }
html[data-c8theme="dark"] .c8-appearance { background: var(--d-surface-2); border-color: var(--d-line); border-left-color: var(--d-red); }
html[data-c8theme="dark"] .c8-appearance label { background: var(--d-surface); border-color: var(--d-line); color: var(--d-text); }
html[data-c8theme="dark"] .c8-appearance label.on { border-color: var(--d-red); box-shadow: inset 0 0 0 1px var(--d-red); }
html[data-c8theme="dark"] .c8-pv-x { background: var(--d-red) !important; color: #fff !important; }

/* ---------- round 2 (2026-10-07): checked in the browser on the queue, a ticket and the register ---------- */
/* priority, status and other coloured pills: keep THEIR colour, dark lettering on it (as in light mode) */
html[data-c8theme="dark"] table.list td div[style*="background-color"], html[data-c8theme="dark"] table.list td span[style*="background-color"],
html[data-c8theme="dark"] .ticket_info td [style*="background-color"] { color: #1d1f22 !important; border-radius: 10px; font-weight: 600; filter: brightness(.86) saturate(1.2); }
html[data-c8theme="dark"] table.list tbody td[style*="background-color"] { background: var(--d-surface) !important; }
html[data-c8theme="dark"] table.list tbody tr:nth-child(2n+1) td[style*="background-color"] { background: var(--d-surface-2) !important; }
/* queue sub-menu and saved searches */
html[data-c8theme="dark"] #sub_nav a, html[data-c8theme="dark"] #customQ_nav a, html[data-c8theme="dark"] #customQ_nav li > a,
html[data-c8theme="dark"] .jb-overflowmenu-menu-primary a, html[data-c8theme="dark"] .jb-overflowmenu a { color: var(--d-text) !important; }
html[data-c8theme="dark"] #customQ_nav, html[data-c8theme="dark"] .jb-overflowmenu, html[data-c8theme="dark"] .jb-overflowmenu-menu-primary,
html[data-c8theme="dark"] #customQ_nav li { background: var(--d-surface-2) !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] #customQ_nav li.active > a, html[data-c8theme="dark"] #customQ_nav li:hover > a { color: var(--d-red) !important; }
/* rich text editor */
html[data-c8theme="dark"] .redactor-toolbar, html[data-c8theme="dark"] .redactor-toolbar ul, html[data-c8theme="dark"] .redactor-toolbar li,
html[data-c8theme="dark"] .redactor-toolbar a, html[data-c8theme="dark"] .redactor-toolbar .re-button { background: var(--d-surface-3) !important; color: #c9ced4 !important; border-color: var(--d-line) !important; }
html[data-c8theme="dark"] .redactor-toolbar a:hover, html[data-c8theme="dark"] .redactor-toolbar a.redactor-button-active,
html[data-c8theme="dark"] .redactor-toolbar .re-button:hover { background: var(--d-red-tint) !important; color: #fff !important; }
html[data-c8theme="dark"] .redactor-placeholder:before, html[data-c8theme="dark"] .redactor-in[placeholder]:empty:before,
html[data-c8theme="dark"] .redactor-styles[placeholder]:empty:before, html[data-c8theme="dark"] .redactor-editor[placeholder]:empty:before,
html[data-c8theme="dark"] [contenteditable][placeholder]:empty:before { color: #7d858e !important; }
html[data-c8theme="dark"] .redactor-box, html[data-c8theme="dark"] .redactor-statusbar, html[data-c8theme="dark"] .redactor_editor_footer,
html[data-c8theme="dark"] .draft-saved, html[data-c8theme="dark"] .filedrop, html[data-c8theme="dark"] .filedrop .dropzone { background: var(--d-surface-2) !important; color: var(--d-muted) !important; border-color: var(--d-line) !important; }
/* dark pills on dark rows: lift them */
html[data-c8theme="dark"] [style*="background:#231F20"], html[data-c8theme="dark"] [style*="background: #231F20"],
html[data-c8theme="dark"] [style*="background:#54595F"], html[data-c8theme="dark"] [style*="background:#8a8f96"] { background: #555c65 !important; color: #fff !important; }
/* primary actions stay Cre8work red */
html[data-c8theme="dark"] input[type="submit"], html[data-c8theme="dark"] button[type="submit"], html[data-c8theme="dark"] .button.save,
html[data-c8theme="dark"] input.save { background: var(--d-red) !important; border-color: var(--d-red) !important; color: #fff !important; }
html[data-c8theme="dark"] input[type="submit"]:hover, html[data-c8theme="dark"] button[type="submit"]:hover { background: var(--d-red-hover) !important; }
html[data-c8theme="dark"] input[type="reset"], html[data-c8theme="dark"] input[type="button"] { background: var(--d-surface-3) !important; color: var(--d-text) !important; }
/* form labels and ticket info keys */
html[data-c8theme="dark"] .ticket_info th, html[data-c8theme="dark"] .form_table td.required, html[data-c8theme="dark"] label,
html[data-c8theme="dark"] .form-header, html[data-c8theme="dark"] .ticket_info td:first-child { color: var(--d-text); }
html[data-c8theme="dark"] .ticket_info th, html[data-c8theme="dark"] table.custom-data th { background: transparent !important; }