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

body.dark {
    /* === MESSAGE BACKGROUNDS (dark PNG textures) === */
    --msg-user-bg: transparent url(img/transparent_r_dark.png) repeat;
    --msg-my-bg: transparent url(img/transparent_g_dark.png) repeat;
    --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%);
    --msg-separator-border: rgba(43, 58, 74, 0.3);

    /* === 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;
    --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 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: 1px 1px 5px rgba(0, 0, 0, 0.7);
    --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);
    --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);

    /* === 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);
}

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);
}

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 messages
   ================================================================ */

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 .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;
}

/* ================================================================
   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); }