/* =================================================================
   dark.css — "Deep Night" theme for MyChat Client
   Activate: document.body.classList.add('dark')
   ================================================================= */

body.dark {
    /* === MESSAGE BACKGROUNDS: колір + прозорість окремими токенами
       (значення зняті з пікселів колишніх img/transparent_*_dark.png) === */
    --msg-user-bg-color  : 228, 94, 32;
    --msg-my-bg-color    : 61, 139, 78;
    --msg-user-bg-opacity: .1;
    --msg-my-bg-opacity  : .1;
    --msg-user-bg: rgba(var(--msg-user-bg-color), var(--msg-user-bg-opacity));
    --msg-my-bg  : rgba(var(--msg-my-bg-color),   var(--msg-my-bg-opacity));
    --msg-user-name-color: #e45e20;
    --msg-my-name-color: #5ecf5e;
    --msg-user-name-hover: #ff8050;
    --msg-my-name-hover: #7fe07f;
    --msg-time-color: #6a7a8a;
    --msg-time-hover-color: #aab8c2;
    --msg-text-shadow: none;

    /* === NAVIGATION / SIDEBAR === */
    --nav-primary: #17212b;
    --nav-dark-header: #0d1621;
    --nav-bg-mc: rgba(35, 46, 60, 0.85);
    --dialogs-header-bg: #17212b;
    --accordion-header-bg: #17212b;
    --accordion-header-color: #e45e20;

    /* === AREA BACKGROUNDS === */
    --bg-private: #1a2840;
    --bg-gradient: #1a2d3e;
    --bg-gradient2: #191e2f;
    --bg-header: #17212b;
    --bg-darkness: #0f1923;
    --bg-info: #1e2f3e;
    --bg-maxsize: #0d1621;
    --bg-white-panel: #17212b;

    /* === GRADIENTS === */
    --gradient-start: #1a2d3e;
    --gradient-end: #1c3248;
    --gradient2-start: #191e2f;
    --gradient2-end: #1b2a3e;

    /* === TEXT === */
    --text-primary: #b4b4b4;
    --text-primary-hover: #e8e8e8;
    --text-secondary: #aab8c2;
    --text-nav: #aab8c2;
    --text-spec: #e45e20;
    --text-link: #7dbae3;
    --text-file-link: #7dbae3;
    --text-deleted: #4a5e70;
    --white: #fff;

    /* === BORDERS === */
    --border-light: rgba(43, 58, 74, 0.7);
    --border-medium: #4c657fd9;
    --border-dark: #3a4e62;
    --border-subtle: rgb(49 81 115 / 62%);

    /* Plugin UI */
    --plugin-card-bg      : var(--webix-bg);
    --plugin-card-border  : var(--border-medium);
    --plugin-sub-color    : #9aa0a6;
    --plugin-badge-color  : #ffffff;
    --plugin-badge-neutral: #5f6368;
    --plugin-badge-ok     : #388e3c;
    --plugin-badge-bad    : #d32f2f;
    --plugin-reason-color : #ef9a9a;
    --plugin-icon-empty   : #666666;
    --plugin-switch-off   : #555555;
    --plugin-switch-on    : #388e3c;
    --plugin-switch-knob  : #eeeeee;
    --plugin-action-off   : #666666;
    --plugin-divider      : var(--border-medium);
    --plugin-btn-hover-bg : rgba(255, 255, 255, 0.06);
    --plugin-input-bg     : var(--input-bg);
    --plugin-primary-bg   : #2c9fb8;
    --plugin-warn-color   : #e0a030;
    --plugin-danger-color : #ef5350;
    --plugin-progress-bar : #4a90d9;

    /* Chat background */
    --chatbg-dim: rgba(0, 0, 0, 0.55);
    --chatbg-none-color: #9aa7b3;
    --chatbg-none-border: rgba(154, 167, 179, 0.4);
    --msg-separator-border: rgba(43, 58, 74, 0.3);

    /* Перемикач режиму списку діалогів (tabs): база = заголовок акордеону; активний — лише верхній акцент (сірий) */
    --dlg-tab-active-color: #b6bfc7;

    /* History search */
    --hist-snippet-hover-bg: rgba(255, 255, 255, 0.06);
    --hist-snippet-active-bg: rgba(2, 123, 178, 0.28);
    --hist-hit-bg: #b59a00;
    --hist-hit-color: #fff;
    --hist-err-color: #e74c3c;
    --hist-msg-mine-bg: rgba(94, 207, 94, 0.10);
    --hist-flash-bg: rgba(181, 154, 0, 0.55);

    /* === SCROLLBAR === */
    --scrollbar-track: rgba(13, 22, 33, 0.4);
    --scrollbar-thumb: rgba(43, 58, 74, 0.6);
    --scrollbar-thumb-hover: rgba(60, 82, 105, 0.85);

    /* === HOVER OVERLAYS === */
    --hover-bg: rgba(43, 58, 74, 0.6);
    --hover-bg-subtle: rgba(43, 58, 74, 0.5);
    --hover-bg-faint: rgba(43, 58, 74, 0.2);

    /* === SELECTION / ACCENT OVERLAYS === */
    --accent-bg: rgba(228, 94, 32, 0.2);
    --accent-bg-medium: rgba(228, 94, 32, 0.25);
    --accent-bg-subtle: rgba(228, 94, 32, 0.15);
    --loading-progress-bg: rgba(228, 94, 32, 0.4);

    /* === BADGES / ACCENTS === */
    --badge-color: #e45e20;
    --status-circle: #2b3a4a;
    --find-bg: #2a3d1e;
    --find-border: #3d5c2a;
    --quote-border: #e45e20;
    --fwd-badge-color: #9fb3c6;
    --fwd-chip-hover-bg: rgb(228 94 32 / 0.24);
    --upload-progress: #1a3450;

    /* === SHADOWS === */
    --shadow-color: rgba(0, 0, 0, 0.6);
    --shadow-medium: rgba(0, 0, 0, 0.7);
    --shadow-dark: rgba(0, 0, 0, 0.8);
    --shadow-soft: rgba(0, 0, 0, 0.4);
    --text-shadow-light: rgba(0, 0, 0, 0.5);
    --popup-shadow: 0 0 0 1px rgba(228, 94, 32, 0.18), 0 0 16px rgba(228, 94, 32, 0.38);
    /*--popup-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(91, 184, 255, 0.08);*/

    /* === EMOJI / REACTIONS === */
    --emj-count-color: #e45e20;
    --emj-block-bg: rgba(255, 255, 255, 0.05);
    --emj-block-border: rgba(43, 58, 74, 0.6);
    --emj-plus-color: #7a8a9a;

    /* === IMAGES / FILES === */
    --thumb-border: #2b3a4a;
    --thumb-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    --file-unit-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
    --file-unit-bg: rgba(35, 46, 60, 0.6);
    --file-unit-border: rgba(43, 58, 74, 0.5);

    /* === INPUTS === */
    --input-bg: rgba(35, 46, 60, 0.8);
    --item-bg: rgba(35, 46, 60, 0.6);
    --btn-hover-bg: rgb(57 78 101 / 68%);

    /* === WEBIX COMPONENTS === */
    --webix-bg: #1e2b38;       /* popup/window panels — трохи відрізняються від bg */
    --webix-list-bg: #17212b;  /* list items — той самий що основний фон sidebar */
    --webix-text-color: #aab8c2;
    --webix-border: #2b3a4a;
    --webix-tooltip-bg: #1a2635;
    --webix-header-bg: #0d1621;
    --webix-header-color: #aab8c2;

    /* === STATUS COLORS === */
    --status-online:  #2bca2e;
    --status-offline: #929292;
    --status-away:    #5bb8ff;
    --status-dnd:     #e57373;
    --status-default: #545454;

    --user-status-online: #a0a9b4;
    --user-status-offline: #595959;

    /* === COMPONENT SPECIFIC === */
    --user-count-color: rgba(170, 184, 194, 0.6);
    --user-count-hover: rgba(170, 184, 194, 0.8);
    --day-separator-bg: rgb(110 128 147 / 9%);
    --error-link: #7ec8e3;
    --error-link-hover: #a8daec;
    --code-bg: rgba(0, 0, 0, 0.3);
    --code-text: #e0e0e0;
    --hljs-bg: #dfdfdfc2;
    --hljs-text: #3b3b3b;
    --danger-bg: rgba(180, 40, 40, 0.45);
    --danger-border: rgba(180, 40, 40, 0.6);
    --terminal-bg: #0d1117;
    --terminal-text: #c9d1d9;
    --cal-disabled-color: rgba(170, 184, 194, 0.25);
    --cal-outside-color: rgba(170, 184, 194, 0.4);

    /* Overrides for light.css vars that need dark values */
    --terminal-cursor: var(--text-spec);
    --terminal-cursor-bg: #4ecca3;
    --terminal-cursor-bg-muted: #1c3a4a;
    --terminal-cursor-text: #181818;
    --terminal-selection-bg: #5f9bd7;
    --terminal-selection-text: #fff;
    --divider-color: var(--border-medium);
    --list-right-bg: var(--webix-bg);
    --border-msg: var(--border-medium);
    --table-stripe-even: rgba(43, 58, 74, 0.12);
    --table-stripe-odd: rgba(43, 58, 74, 0.06);
    --ntf-item-border: rgba(228, 94, 32, 0.1);
    --accent-blue: var(--text-link);
    --cp-panel-bg: rgba(23, 33, 43, 0.94);
    --cp-control-bg: rgba(30, 47, 62, 0.94);
    --cp-control-border: var(--border-medium);
    --cp-control-hover-border: var(--text-link);
    --cp-control-text: var(--text-primary);
    --cp-active-bg: var(--text-spec);
    --cp-active-color: #fff;
    --cp-panel-shadow: 0 0 0 1px rgba(228, 94, 32, 0.18), 0 0 16px rgba(228, 94, 32, 0.38);
    --webinar-panel-bg: rgba(23, 33, 43, 0.94);
    --webinar-panel-border: var(--border-medium);
    --webinar-status-color: var(--text-primary);
    --webinar-toggle-color: var(--text-primary);
    --webinar-toggle-hover-color: var(--text-link);
    --webinar-toggle-active-bg: var(--text-spec);
    --webinar-toggle-active-color: #fff;
    --media-conf-mic-active-color: #d6e0e8;

    /* BundleFiles (type 66) browser */
    --bundle-bg: rgba(255, 255, 255, 0.04);
    --bundle-border: rgba(255, 255, 255, 0.10);
    --bundle-btn-bg: rgba(255, 255, 255, 0.06);
    --bundle-stripe: rgba(255, 255, 255, 0.04);

    /* Video conference grid */
    --vconf-tile-bg      : #2b2d31;
    --vconf-speaking     : #66bb6a;
    --vconf-avatar-color : #ffffff;
    --vconf-overlay-bg   : rgba(0, 0, 0, 0.55);
    --vconf-overlay-color: #ffffff;
    --vconf-mic-off      : #ef7070;

    /* === OTHER === */
    --replace-green: #c79476;
    --cpanel-bg: #b68466;

    background-color: var(--bg-white-panel);
    color: var(--text-primary);
}

/* ================================================================
   Body & global
   ================================================================ */

body.dark,
body.dark #appBody,
body.dark .iFrameFit,
body.dark .wrapperChat {
    background-color: var(--bg-white-panel);
}

body.dark .bgDarkness > .webix_view {
    background-color: var(--bg-darkness);
}

/* ================================================================
   Chat area backgrounds — gradient overrides
   ================================================================ */

body.dark .gradient {
    background: linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
}

body.dark .gradient2 {
    background: linear-gradient(180deg, var(--gradient2-start) 0%, var(--gradient2-end) 100%);
}

/* ================================================================
   Scrollbar
   ================================================================ */

body.dark ::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track);
}

body.dark ::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
}

body.dark ::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

body.dark .hiddenScrollMenu:hover::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track);
}

body.dark .hiddenScrollMenu:hover::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
}

/* ================================================================
   Message bubbles & text
   ================================================================ */

body.dark .messageText,
body.dark .messageKanban {
    text-shadow: none;
}

body.dark .msgWrap:hover .messageText {
    text-shadow: none;
    color: var(--text-primary-hover);
}

body.dark .messageUser .messageUserName:hover {
    color: var(--msg-user-name-hover);
    text-shadow: 1px 1px 1px var(--text-shadow-light);
}

body.dark .messageMy .messageUserName:hover {
    color: var(--msg-my-name-hover);
    text-shadow: 1px 1px 1px var(--text-shadow-light);
}

body.dark .messageUser:hover .messageTime,
body.dark .messageMy:hover .messageTime {
    color: var(--msg-time-hover-color);
}

body.dark .messageKanbanTime {
    color: var(--msg-time-color);
}

body.dark .replyMessageEx,
body.dark .msgMenu {
    color: var(--text-secondary);
}

/* ================================================================
   Message controls (trash, reply, edit, copy)
   ================================================================ */

body.dark .messageTrash:hover,
body.dark .deleteMessage:hover,
body.dark .replyMessage:hover,
body.dark .editMessage:hover,
body.dark .copyMessage:hover {
    color: var(--text-primary);
}

/* ================================================================
   Images / files / media
   ================================================================ */

body.dark .thumbImage {
    border-color: var(--thumb-border);
    box-shadow: var(--thumb-shadow);
}

body.dark .fileUnit {
    background-color: var(--file-unit-bg);
    border-color: var(--file-unit-border);
    color: var(--text-secondary);
    box-shadow: var(--file-unit-shadow);
}

body.dark .fileLink,
body.dark .fileLink:hover,
body.dark .fileLink:visited {
    color: var(--text-file-link);
}

/* ================================================================
   Emoji / Reactions
   ================================================================ */

body.dark .emjBlock {
    background-color: var(--emj-block-bg);
    border-color: var(--emj-block-border);
}

body.dark .emjMore {
    background-color: var(--emj-block-bg);
    border-color: var(--emj-block-border);
}

body.dark .emjCount {
    color: var(--emj-count-color);
}

body.dark .emjPlusBtn {
    color: var(--emj-plus-color);
    border-color: var(--emj-block-border);
}

body.dark .emjFirstSelect {
    background-color: var(--webix-bg) !important;
    box-shadow: 4px 4px 5px -3px var(--shadow-dark);
}

/* ================================================================
   Reply / Edit info bar
   ================================================================ */

body.dark ._info {
    background-color: var(--bg-info);
    color: var(--text-secondary);
}

/* ================================================================
   Quote
   ================================================================ */

body.dark .quoteMessage {
    border-left-color: var(--quote-border);
}

/* ================================================================
   Message separator
   ================================================================ */

body.dark .msgSeparator {
    border-top-color: var(--msg-separator-border);
}

body.dark .daySeparator {
    background-color: var(--day-separator-bg);
}

/* ================================================================
   Status indicators (badges, circles)
   ================================================================ */

body.dark .webix_selected .stateCircle,
body.dark .webix_list_item:hover .stateCircle {
    border: 2px solid var(--border-dark);
    background-color: var(--border-dark);
}

/* ================================================================
   Dialogs list
   ================================================================ */

body.dark .userCount {
    color: var(--user-count-color);
}

body.dark .webix_list_item:hover .userCount,
body.dark .webix_selected .userCount {
    color: var(--user-count-hover);
}

/* ================================================================
   Utility shadows
   ================================================================ */

body.dark .whitePanelBG {
    background-color: var(--bg-white-panel);
    box-shadow: -1px -2px 4px -1px var(--shadow-color);
}

body.dark .boxShadow1px {
    box-shadow: 1px 1px 1px var(--text-shadow-light);
}

body.dark .shadow1px {
    text-shadow: 1px 1px 1px var(--shadow-color);
}

body.dark .shadow2px {
    text-shadow: 1px 1px 2px var(--shadow-medium);
}

body.dark .shadow1pxWhite {
    text-shadow: 1px 1px 2px var(--text-shadow-light);
}

body.dark .webix_selected .boxShadow,
body.dark .webix_list_item:hover .boxShadow {
    box-shadow: 0 0 2px var(--shadow-dark);
}

body.dark .smallVideo {
    box-shadow: 0 0 6px 0 var(--shadow-medium);
}

body.dark #cPanel.whitePanelBG {
    background: var(--cpanel-bg);
    opacity: .9;
}

/* ================================================================
   Call controls
   ================================================================ */

body.dark #callTime {
    text-shadow: 1px 1px 0 var(--shadow-soft);
}

/* ================================================================
   Loading
   ================================================================ */

body.dark #loadingLabel {
    color: var(--text-secondary);
}

body.dark #loadingProgress {
    background-color: var(--loading-progress-bg);
}

/* ================================================================
   Utility color classes — dark theme overrides
   ================================================================ */

/* Темні кольори (#008000, #800000) нечитабельні на темному фоні */
body.dark .green,
body.dark .green .webix_img_btn * { color: var(--replace-green); }
body.dark .brown { color: var(--replace-green); }

/* Синій — замінити на світліший */
body.dark .blue { color: var(--text-link); }

/* Білий фон — замінити на темний */
body.dark .whiteBG,
body.dark .whiteBG button,
body.dark .whiteBG .header { background: var(--bg-white-panel); }
body.dark .whiteBgAll *,
body.dark .whiteBgAll { background-color: var(--bg-white-panel); }

/* listBG — темний overlay */
body.dark .listBG { background-color: var(--hover-bg-faint); }

/* findBackground — темна текстура */
body.dark .findBackground { background: var(--bg-darkness) url(img/transparent_r_dark.png) repeat; }

/* ================================================================
   Links & special colors
   ================================================================ */

body.dark .linkColor,
body.dark .linkColor * {
    color: var(--text-link);
}

body.dark .webix_view a,
body.dark .webix_view a:visited,
body.dark .webix_view a:focus {
    color: var(--text-link);
}

body.dark .webix_view a:hover {
    color: var(--text-link);
    opacity: 0.8;
}

body.dark .spec,
body.dark .specAll *,
body.dark .specAll {
    color: var(--text-spec);
}

body.dark .toolIconNotify {
    color: var(--badge-color);
}

/* ================================================================
   Dialogs list hover states
   ================================================================ */

body.dark .webix_selected .greenLight,
body.dark .webix_selected .brownLight,
body.dark .webix_selected .grayLight,
body.dark .webix_list_item:hover .greenLight,
body.dark .webix_list_item:hover .brownLight,
body.dark .webix_list_item:hover .grayLight,
body.dark .webix_selected .dLinkColor,
body.dark .webix_list_item:hover .dLinkColor {
    color: var(--text-secondary);
}

body.dark .webix_drag_zone .shortMsg .brownLight,
body.dark .webix_drag_zone .shortMsg .greenLight {
    color: var(--text-secondary);
}

/* ================================================================
   Input area
   ================================================================ */

body.dark .borderTop {
    border-top-color: var(--border-medium);
}

body.dark .borderBottom {
    border-bottom-color: var(--border-medium);
}

body.dark .borderBottomLeft {
    border-bottom-color: var(--border-medium);
    border-left-color: var(--border-medium);
}

body.dark .borderTopBottom {
    border-top-color: var(--border-medium);
    border-bottom-color: var(--border-medium);
}

body.dark .grayBorderTop {
    border-top-color: var(--border-subtle);
}

body.dark .darkGrayBorderTop {
    border-top-color: var(--border-dark);
}

body.dark .enterChatText,
body.dark .enterChatText textarea {
    color: var(--text-primary);
    caret-color: var(--badge-color);
}

body.dark .prInp input,
body.dark .prInp select,
body.dark .prInp .webix_inp_static {
    border-bottom-color: var(--border-medium);
    color: var(--text-nav);
}

body.dark .prInp label {
    color: var(--text-secondary);
}

/* ================================================================
   Find / search highlight
   ================================================================ */

body.dark .findItem {
    background-color: var(--find-bg);
    border-color: var(--find-border);
}

/* ================================================================
   Accordion / Headers
   ================================================================ */

body.dark .accordionListHeader .webix_accordionitem_header,
body.dark .accordionListHeader .webix_accordionitem_header:hover,
body.dark .dialogsHeaderLight .webix_el_label {
    background-color: var(--accordion-header-bg);
    color: var(--accordion-header-color);
}

body.dark .accordionListHeader .webix_accordionitem_label:hover {
    background-color: var(--hover-bg-subtle);
    color: var(--text-primary);
}

body.dark .header .webix_template,
body.dark .header {
    background: var(--bg-header);
    color: var(--text-primary);
}

body.dark .headerAccordion .webix_accordionitem_header {
    background-color: var(--bg-white-panel);
    color: var(--text-secondary);
}

body.dark .headerAccordion .webix_accordionitem_header:hover,
body.dark .headerAccordion .webix_accordionitem_label:hover {
    background-color: var(--hover-bg);
}

body.dark .headerLineHeight .webix_template,
body.dark .headerLineHeight .webix_property_label_line {
    background: var(--nav-primary);
    color: var(--white);
}

/* ================================================================
   WEBIX: Popup (mcPopup) — context menus, attach/emoji/top/user menus
   ================================================================ */

body.dark .mcPopup {
    background: var(--webix-bg);
    box-shadow: var(--popup-shadow);
}
body.dark .mcPopup .webix_list_item { background: var(--webix-bg); color: var(--webix-text-color); }
body.dark .mcPopup .webix_inp_label,
body.dark .mcPopup .webix_label_right,
body.dark .mcPopup .webix_inp_top_label { color: var(--webix-text-color); }
body.dark .mcPopup .webix_list_item:hover { background: var(--hover-bg); }
body.dark .mcPopup .webix_view { background: var(--webix-bg); color: var(--webix-text-color); }
body.dark .mcPopup .webix_template { background: var(--webix-bg); color: var(--webix-text-color); }

body.dark .webix_selected {
    background: var(--accent-bg);
}

body.dark .webix_column > div.webix_row_select,
body.dark .webix_column > div.webix_cell_select,
body.dark .webix_column > div.webix_column_select {
    color: var(--webix-text-color);
    background: var(--accent-bg);
}

/* ================================================================
   WEBIX: Segmented buttons
   ================================================================ */

body.dark .webix_segment_0,
body.dark .webix_segment_1,
body.dark .webix_segment_N {
    background-color: var(--webix-bg);
    color: var(--webix-text-color);
    border-color: var(--webix-border);
}

body.dark .webix_segment_0.webix_selected,
body.dark .webix_segment_1.webix_selected,
body.dark .webix_segment_N.webix_selected {
    background-color: var(--nav-primary);
    color: var(--white);
    border-color: var(--nav-primary);
}

body.dark .yellowSelect .webix_selected {
    background-color: var(--badge-color) !important;
    color: var(--white);
    border-color: var(--badge-color);
}

/* ================================================================
   WEBIX: Popup arrow/point indicator
   ================================================================ */

body.dark .webix_point_top,
body.dark .webix_point_bottom,
body.dark .webix_point_left,
body.dark .webix_point_right {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAArAgMAAAA1R1HHAAAACVBMVEUAAAAeKzgWIzC56tx/AAAAAXRSTlMAQObYZgAAAGFJREFUCNc9z9EJwDAIBNAjX80eTSeqwc+M4hDJvvWEXiAPQZQTxywwbALdHGi2AJxIHuS7CFTdZOdvb9LJIEdVJ9XF1oS2BFnEySQWZBFXFX/XNRFEWSpfJa3Mlb7uqIs+DNgWHU45n5oAAAAASUVORK5CYII=);
}


/* ================================================================
   WEBIX: Tooltip
   ================================================================ */

body.dark .webix_tooltip {
    background-color: var(--webix-tooltip-bg);
    color: var(--webix-text-color);
    border-color: var(--webix-border);
    box-shadow: 1px 1px 4px var(--shadow-color);
}

/* ================================================================
   WEBIX: Toolbar (mcToolbar) — sidebar toolbar, bbs toolbar
   ================================================================ */

body.dark .mcToolbar {
    background: var(--webix-header-bg);
    border-color: var(--border-medium);
}

body.dark .mcToolbar .webix_el_box {
    background: var(--webix-header-bg);
}

body.dark .mcToolbar .webix_inp_label,
body.dark .mcToolbar .webix_el_label {
    color: var(--webix-header-color);
}

body.dark .webix_header {
    background: var(--webix-header-bg);
    color: var(--webix-header-color);
}

/* ================================================================
   WEBIX: Accordion item header
   ================================================================ */

body.dark .webix_accordionitem_header {
    background: var(--accordion-header-bg);
    color: var(--accordion-header-color);
    border-color: var(--border-medium);
}

/* ================================================================
   WEBIX: Scroll container
   ================================================================ */

body.dark .webix_scroll_cont {
    background: transparent;
}

body.dark .webix_accordionitem_body,
body.dark .webix_accordionitem,
body.dark .webix_accordionitem .webix_view,
body.dark .webix_accordionitem .webix_scroll_cont,
body.dark .webix_list,
body.dark .webix_list_item_active {
    background: transparent;
}

/* ================================================================
   WEBIX: General view / list items
   ================================================================ */

body.dark .webix_list_item {
    color: var(--webix-text-color);
    background: transparent;
    border-bottom-color: var(--border-subtle);
}

body.dark .webix_list_item:hover {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

body.dark .webix_list_item.webix_selected,
body.dark .webix_list_item.webix_selected:hover {
    background-color: var(--accent-bg-medium);
    color: var(--text-primary);
}

/*body.dark .webix_view {*/
/*    color: var(--text-primary);*/
/*}*/

body.dark .webix_template {
    color: var(--text-primary);
    background: transparent;
}

body.dark .webix_disabled_box button,
body.dark .webix_disabled_box button.webixtype_base,
body.dark .webix_disabled_box span {
    color: var(--text-deleted) !important;
    border: none !important;
    background: transparent !important;
}

/* ================================================================
   WEBIX: Dropdown popup (richselect, combo, datepicker, menu)
   ================================================================ */

body.dark .webix_popup.webix_view {
    background: var(--webix-bg);
    border-color: var(--webix-border);
}
body.dark .webix_popup .webix_win_body,
body.dark .webix_popup .webix_view {
    background: var(--webix-bg);
    color: var(--webix-text-color);
}

/* ================================================================
   WEBIX: Popup buttons (confirm/cancel)
   ================================================================ */

body.dark .webix_popup_button {
    border-color: var(--webix-border);
    background: var(--webix-list-bg);
    color: var(--webix-text-color);
}

body.dark .webix_popup_button.confirm div {
    background: var(--badge-color);
}

body.dark .webix_popup_text {
    color: var(--webix-text-color);
}

/* ================================================================
   WEBIX: Info / modal box
   ================================================================ */

body.dark .webix_info,
body.dark .webix_modal_box {
    background: var(--webix-bg) !important;
    color: var(--webix-text-color);
    border-color: var(--webix-border);
    box-shadow: var(--popup-shadow);
}

body.dark .webix_info div{
    color: var(--webix-text-color);
}

body.dark .webix_modal_box .webix_popup_title,
body.dark .webix_modal_box .webix_popup_text,
body.dark .webix_modal_box .webix_popup_controls {
    background: var(--webix-bg) !important;
    color: var(--webix-text-color) !important;
    border-color: var(--webix-border) !important;
}

body.dark .errorLink,
body.dark .errorLink:visited { color: var(--error-link); }
body.dark .errorLink:hover   { color: var(--error-link-hover); }

/* ================================================================
   WEBIX: Input fields inside toolbar / panels
   ================================================================ */

body.dark .webix_view input,
body.dark .webix_view textarea,
body.dark .webix_view select {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

/* ================================================================
   WEBIX: Form elements (buttons, checkboxes, inputs, labels)
   ================================================================ */

body.dark .webix_el_button button {
    color: var(--text-primary);
    background: transparent;
    border-color: transparent;
}

body.dark .webix_el_button button:hover {
    background: var(--btn-hover-bg);
    border-color: var(--webix-border);
}

/* вкладки діалогів (tabs-режим): колір як у заголовка «Інструменти», а не як у webix-кнопок */
body.dark .dialogsTab button {
    color: var(--accordion-header-color);
}

body.dark .webix_custom_checkbox {
    background-color: var(--webix-list-bg);
    border-color: var(--border-medium);
}

body.dark .webix_custom_checkbox.checked {
    background-color: var(--badge-color);
    border-color: var(--badge-color);
}

body.dark .webix_inp_label,
body.dark .webix_inp_top_label,
body.dark .webix_label_right,
body.dark .webix_el_label { color: var(--webix-text-color); }

body.dark .webix_view a.webix_list_item:focus,
body.dark .webix_view div:focus,
body.dark .webix_view span:focus,
body.dark .webix_view.webix_window:focus { outline: none; }

body.dark .webix_inp_static,
body.dark .webix_el_combo input,
body.dark .webix_el_select select {
    background: var(--webix-list-bg);
    color: var(--webix-text-color);
    border-color: var(--webix-border);
}

/* Override .webix_view .webix_layout_form { border: 1px solid #fff; padding: 0 } */
body.dark .webix_layout_form .webix_inp_static,
body.dark .webix_layout_form input,
body.dark .webix_layout_form select {
    background: var(--webix-list-bg);
    border-color: var(--webix-border);
    color: var(--webix-text-color);
    padding-left: 5px;
}

/* ================================================================
   Uploader progress
   ================================================================ */

body.dark .uploader_progress {
    background-color: var(--upload-progress);
}

/* ================================================================
   BBS panel & messages
   ================================================================ */

body.dark .mcBbs .webix_view {
    background-color: var(--bg-white-panel);
}

body.dark .mcBbs .webix_toolbar,
body.dark .mcBbs .webix_toolbar .webix_view {
    background: var(--webix-header-bg);
}

body.dark .bbsMessage {
    border-bottom-color: var(--msg-my-name-color);
}

/* ================================================================
   Code block colors override
   ================================================================ */

body.dark .messageText code,
body.dark .messageText pre {
    background-color: var(--code-bg);
    border: 1px solid var(--border-medium);
    color: var(--code-text);
}

body.dark .hljs {
    background: var(--hljs-bg);
    color: var(--hljs-text);
}

/* ================================================================
   Inline table (intextTable)
   ================================================================ */

body.dark .intextTable td {
    border-color: var(--border-medium);
    color: var(--text-primary);
}

/* ================================================================
   Scroll down button
   ================================================================ */

body.dark .scrollDownButton {
    border-color: var(--border-medium);
    background-color: var(--webix-bg);
}

/* ================================================================
   Resizer between dialogs and chat
   ================================================================ */

body.dark .webix_resizer,
body.dark .webix_resizer_x,
body.dark .webix_resizer_y {
    background-color: transparent;
}

/* ================================================================
   WEBIX: Window (mcWin) — all app modal windows
   ================================================================ */

body.dark .mcWin { background: var(--webix-bg); box-shadow: var(--popup-shadow); }
body.dark .mcWin .webix_win_head { background: var(--webix-header-bg); color: var(--webix-header-color); }
body.dark .mcWin .webix_win_head > *,
body.dark .mcWin .webix_win_head .webix_template { background: var(--webix-header-bg); color: var(--webix-header-color); }
body.dark .mcWin .webix_win_content { background: var(--webix-bg); }
body.dark .mcWin .webix_win_body { background: var(--webix-bg); color: var(--webix-text-color); }
body.dark .mcWin .webix_view { background: var(--webix-bg); color: var(--webix-text-color); }
body.dark .mcWin .webix_template { background: var(--webix-bg); color: var(--webix-text-color); }
body.dark .mcWin .webix_template img { filter: brightness(0.55) saturate(0.6); }
body.dark .mcWin input,
body.dark .mcWin textarea { background: var(--webix-list-bg); color: var(--webix-text-color); border-color: var(--webix-border); }
body.dark .mcWinToolbar,
body.dark .mcWinToolbar .webix_el_box { background: var(--webix-header-bg); color: var(--webix-header-color); }

/* ================================================================
   WEBIX: Button and icon color overrides
   ================================================================ */

body.dark .color54 { color: var(--text-primary); }
body.dark .mcToolbar .color54 { color: var(--webix-header-color); }
body.dark .frameTopBtnLeft { color: var(--text-primary); }
body.dark .imgBtn { color: var(--text-primary); }

/* ================================================================
   UserProfile panel
   ================================================================ */

body.dark .mcUserProfile .webix_view {
    background-color: var(--webix-bg);
    border-color: transparent !important;
}

/* Main section text inputs — Material Design bottom-border (без prInp) */
body.dark .mcUserProfile .webix_el_text input {
    border: none !important;
    border-bottom: 1px solid var(--border-medium) !important;
    background-color: transparent;
    color: var(--text-nav);
}

/* Selects in main section (sex, country, marital status) */
body.dark .mcUserProfile .webix_el_select select {
    background-color: var(--webix-bg);
    color: var(--text-nav);
    border-color: var(--border-medium);
}

/* Clear photo button */
body.dark .mcUserProfile .button_danger button {
    background-color: var(--danger-bg);
    color: var(--white);
    border-color: var(--danger-border);
}

/* ================================================================
   Settings panel
   ================================================================ */

body.dark .mcSettings .webix_view {
    background-color: var(--webix-bg);
    border-color: transparent !important;
}

/* Заголовки секцій — окрема темніша смуга, щоб не зливались із панеллю налаштувань */
body.dark .mcSettings .dialogsHeader {
    background-color: var(--nav-dark-header);
}

body.dark .mcSettings .webix_el_text input {
    border: none !important;
    border-bottom: 1px solid var(--border-medium) !important;
    background-color: transparent;
    color: var(--text-nav);
}

body.dark .mcSettings .webix_el_counter input {
    background-color: var(--webix-list-bg);
    color: var(--text-nav);
    border-color: var(--border-medium);
}

body.dark .mcSettings .webix_inp_counter_next,
body.dark .mcSettings .webix_inp_counter_prev {
    background-color: var(--webix-list-bg);
    color: var(--text-nav);
    border-color: var(--border-medium);
}

body.dark .mcSettings .webix_label_right,
body.dark .mcSettings .webix_inp_label {
    color: var(--text-nav);
}

body.dark .mcSettings .webix_accordionitem_label:hover {
    background-color: var(--hover-bg-subtle);
    color: var(--text-primary);
}

/* ================================================================
   Private info panel — active process app name
   ================================================================ */

body.dark .piAppName {
    color: var(--text-nav);
}

/* ================================================================
   ViewLogs panel (Electron logs viewer)
   ================================================================ */

/*body.dark .mcViewLogs .webix_template,*/
body.dark .mcViewLogs .selectable {
    background-color: var(--webix-bg);
}

/* ================================================================
   Terminal panel
   ================================================================ */

/*body.dark .mcTerminal .webix_template,*/
body.dark .mcTerminal .selectable {
    background-color: var(--terminal-bg);
    color: var(--terminal-text);
}

body.dark .mcTerminal pre,
body.dark .mcTerminal .inline_pre {
    color: var(--terminal-text);
    mix-blend-mode: normal !important;
}

body.dark .mcTerminal ._terminalCursor {
    mix-blend-mode: normal !important;
    color: #181818;
}

body.dark .mcTerminal #__terminal-input-wrapper {
    border-top-color: #30363d;
    background-color: #161b22;
}

body.dark .mcTerminal .terminal-cmd-echo,
body.dark .mcTerminal .terminal-cmd-prefix {
    color: var(--terminal-cursor);
}

/* ================================================================
   Webix tree (treetable)
   ================================================================ */

body.dark .webix_dtable .webix_tree_item { color: var(--text-secondary); }
body.dark .webix_dtable .webix_tree_item.green { color: var(--replace-green); }

/* ================================================================
   Webix calendar (daterangepicker / datepicker)
   ================================================================ */

body.dark .webix_cal_day              { color: var(--webix-text-color); }
body.dark .webix_cal_day:hover        { background-color: var(--hover-bg); }
body.dark .webix_cal_day_disabled,
body.dark .webix_cal_day_disabled:hover { background-color: transparent; color: var(--cal-disabled-color); cursor: default; }
body.dark .webix_cal_day_now,
body.dark .webix_cal_today            { background-color: var(--accent-bg-subtle) !important; color: var(--badge-color) !important; }
body.dark .webix_cal_range            { background-color: var(--accent-bg-subtle); }
body.dark .webix_cal_range_start,
body.dark .webix_cal_range_end        { background-color: var(--badge-color); color: var(--white); }
body.dark .webix_cal_navline          { background-color: var(--webix-header-bg); color: var(--webix-header-color); }
body.dark .webix_cal_navline button   { color: var(--webix-header-color); }
body.dark .webix_cal_outside          { color: var(--cal-outside-color); }

/* ================================================================
   Plugin manager + plugin slot windows
   ================================================================ */

body.dark .mc-plugin-manager .webix_view,
body.dark .mc-plugin-manager .webix_template {
    background: var(--webix-bg);
    color: var(--webix-text-color);
}

body.dark .mc-plugin-manager-toolbar .webix_view,
body.dark .mc-plugin-manager-toolbar .webix_el_box {
    /*background: var(--webix-header-bg);*/
}

body.dark .mc-plugin-manager-toolbar .webix_el_label {
    color: var(--webix-header-color);
}

body.dark .mc-plugin-slot-window .webix_win_head .webix_header,
body.dark .mc-plugin-slot-window .webix_win_head .webix_template {
    background: var(--webix-header-bg);
    color: var(--webix-header-color);
}

body.dark .mc-plugin-slot-window .mc-plugin-slot-head,
body.dark .mc-plugin-slot-window .mc-plugin-slot-head .webix_el_label,
body.dark .mc-plugin-slot-window .mc-plugin-slot-head .webix_el_box {
    background: var(--webix-header-bg);
    color: var(--webix-header-color);
}

body.dark .mc-plugin-slot-window .webix_win_body,
body.dark .mc-plugin-slot-window .webix_win_body .webix_template,
body.dark .mc-plugin-slot-window .mc-plugin-slot {
    background: var(--webix-bg);
    color: var(--webix-text-color);
}
