/*
 * BrightSaaS Theme — Visual Reskin for dark_mode body class
 * ──────────────────────────────────────────────────────────
 * Loaded AFTER the application's combined stylesheet.
 * Only visual styles are changed; no layout, routing, or JS is touched.
 * All rules are scoped to body.dark_mode to prevent affecting other themes.
 *
 * Source design system: appb350.css (BrightSaaS / Softnio)
 * Palette: deep navy #020617 → surface #1e293b → accent #6366f1
 */

/* ═══════════════════════════════════════════════════════════════════
   0. DARK_MODE OVERRIDE — Re-map existing CSS variables to BrightSaaS
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode {
    /* Page backgrounds */
    --chat-page-primary-bg-color:          var(--bs-bg-deepest);
    --chat-page-secondary-bg-color:        var(--bs-accent);
    --chat-page-tertiary-bg-color:         var(--bs-bg-surface);
    --chat-page-quaternary-bg-color:       var(--bs-bg-main);
    --chat-page-quinary-bg-color:          var(--bs-accent-dark);
    --chat-page-senary-bg-color:           var(--bs-bg-surface);
    --chat-page-septenary-bg-color:        var(--bs-bg-deepest);
    --chat-page-primary-border-color:      var(--bs-border-color);
    --chat-page-primary-text-color:        var(--bs-accent-light);
    --chat-page-secondary-text-color:      var(--bs-text-heading);
    --chat-page-tertiary-text-color:       var(--bs-text-muted);
    --chat-page-quaternary-text-color:     var(--bs-text-body);

    /* Side navigation */
    --side-navigation-primary-bg-color:    var(--bs-bg-main);
    --side-navigation-secondary-bg-color:  var(--bs-bg-surface);
    --side-navigation-tertiary-bg-color:   rgba(99, 102, 241, 0.06);
    --side-navigation-quaternary-bg-color: var(--bs-accent);
    --side-navigation-primary-text-color:  var(--bs-text-body);
    --side-navigation-secondary-text-color: var(--bs-text-heading);
    --side-navigation-tertiary-text-color: var(--bs-accent-light);
    --side-navigation-quaternary-text-color: var(--bs-text-white);
    --side-navigation-primary-border-color: var(--bs-border-color);

    /* Left side / aside */
    --left-side-content-primary-bg-color:  var(--bs-bg-surface);
    --left-side-content-secondary-bg-color: var(--bs-bg-main);
    --left-side-content-tertiary-bg-color: var(--bs-bg-main);
    --left-side-content-quaternary-bg-color: var(--bs-accent);
    --left-side-content-quinary-bg-color:  var(--bs-accent-glow);
    --left-side-content-senary-bg-color:   var(--bs-bg-surface);
    --left-side-content-septenary-bg-color: var(--bs-bg-main);
    --left-side-content-octonary-bg-color: var(--bs-bg-deepest);
    --left-side-content-nonary-bg-color:   var(--bs-bg-surface);
    --left-side-content-denary-bg-color:   var(--bs-bg-surface);
    --left-side-content-primary-text-color: var(--bs-text-heading);
    --left-side-content-secondary-text-color: var(--bs-text-muted);
    --left-side-content-tertiary-text-color: var(--bs-accent);
    --left-side-content-quaternary-text-color: var(--bs-accent-light);
    --left-side-content-quinary-text-color: var(--bs-text-heading);
    --left-side-content-senary-text-color: var(--bs-text-white);
    --left-side-content-primary-border-color: var(--bs-border-color);
    --left-side-content-secondary-border-color: var(--bs-bg-surface);
    --left-side-content-tertiary-border-color: var(--bs-accent);
    --left-side-content-quaternary-border-color: #334155;

    /* Form area */
    --form-primary-bg-color:               var(--bs-bg-surface);
    --form-secondary-bg-color:             var(--bs-bg-main);
    --form-tertiary-bg-color:              var(--bs-accent);
    --form-quaternary-bg-color:            #8b5cf6;
    --form-quinary-bg-color:               var(--bs-bg-deepest);
    --form-senary-bg-color:                var(--bs-bg-surface);
    --form-septenary-bg-color:             var(--bs-bg-deepest);
    --form-octonary-bg-color:              var(--bs-bg-surface);
    --form-primary-text-color:             var(--bs-text-body);
    --form-secondary-text-color:           var(--bs-text-white);
    --form-tertiary-text-color:            var(--bs-accent-light);
    --form-quaternary-text-color:          #a78bfa;
    --form-quinary-text-color:             var(--bs-text-heading);
    --form-primary-border-color:           var(--bs-border-color);
    --form-secondary-border-color:         var(--bs-bg-surface);
    --form-tertiary-border-color:          var(--bs-accent);

    /* Info panel */
    --info-panel-primary-bg-color:         var(--bs-bg-surface);
    --info-panel-secondary-bg-color:       var(--bs-bg-main);
    --info-panel-tertiary-bg-color:        var(--bs-accent);
    --info-panel-quaternary-bg-color:      #334155;
    --info-panel-quinary-bg-color:         var(--bs-bg-main);
    --info-panel-senary-bg-color:          #334155;
    --info-panel-primary-text-color:       var(--bs-text-heading);
    --info-panel-secondary-text-color:     var(--bs-text-body);
    --info-panel-tertiary-text-color:      var(--bs-accent);
    --info-panel-quaternary-text-color:    var(--bs-accent-light);
    --info-panel-quinary-text-color:       var(--bs-text-white);
    --info-panel-primary-border-color:     var(--bs-border-color);
    --info-panel-secondary-border-color:   var(--bs-bg-surface);
    --info-panel-tertiary-border-color:    var(--bs-accent);

    /* Chat window / middle */
    --chat-window-primary-bg-color:        var(--bs-bg-deepest);
    --chat-window-secondary-bg-color:      var(--bs-bg-surface);
    --chat-window-tertiary-bg-color:       var(--bs-bg-deepest);
    --chat-window-quaternary-bg-color:     rgba(99, 102, 241, 0.25);
    --chat-window-quinary-bg-color:        var(--bs-bg-surface);
    --chat-window-senary-bg-color:         var(--bs-bg-main);
    --chat-window-septenary-bg-color:      var(--bs-bg-main);
    --chat-window-octonary-bg-color:       var(--bs-accent);
    --chat-window-nonary-bg-color:         var(--bs-accent-dark);
    --chat-window-denary-bg-color:         var(--bs-bg-surface);
    --chat-window-primary-text-color:      var(--bs-text-body);
    --chat-window-secondary-text-color:    var(--bs-text-heading);
    --chat-window-tertiary-text-color:     var(--bs-text-white);
    --chat-window-quaternary-text-color:   var(--bs-text-white);
    --chat-window-quinary-text-color:      var(--bs-accent);
    --chat-window-senary-text-color:       var(--bs-accent-light);
    --chat-window-septenary-text-color:    #475569;
    --chat-window-octonary-text-color:     #e2e8f0;
    --chat-window-nonary-text-color:       var(--bs-accent-light);
    --chat-window-denary-text-color:       var(--bs-text-heading);
    --chat-window-undenary-text-color:     #fbbf24;
    --chat-window-duodenary-text-color:    #fbbf24;
    --chat-window-primary-border-color:    var(--bs-border-color);
    --chat-window-secondary-border-color:  var(--bs-text-white);
    --chat-window-tertiary-border-color:   var(--bs-bg-deepest);
    --chat-window-quaternary-border-color: #475569;
    --chat-window-quinary-border-color:    var(--bs-accent);
    --chat-window-senary-border-color:     #475569;
    --chat-window-septenary-border-color:  #334155;

    /* Welcome screen */
    --welcome-screen-primary-bg-color:     var(--bs-bg-main);
    --welcome-screen-primary-text-color:   var(--bs-text-heading);
    --welcome-screen-secondary-text-color: var(--bs-text-body);
    --welcome-screen-primary-border-color: var(--bs-border-color);

    /* Statistics */
    --statistics-primary-bg-color:         var(--bs-bg-main);
    --statistics-secondary-bg-color:       var(--bs-bg-surface);
    --statistics-tertiary-bg-color:        var(--bs-bg-deepest);
    --statistics-quaternary-bg-color:      var(--bs-bg-deepest);
    --statistics-quinary-bg-color:         var(--bs-accent);
    --statistics-senary-bg-color:          var(--bs-bg-main);
    --statistics-septenary-bg-color:       #334155;
    --statistics-primary-text-color:       var(--bs-text-heading);
    --statistics-secondary-text-color:     var(--bs-text-muted);
    --statistics-tertiary-text-color:      var(--bs-text-white);
    --statistics-quaternary-text-color:    var(--bs-text-body);
    --statistics-quinary-text-color:       var(--bs-accent);
    --statistics-senary-text-color:        var(--bs-accent-light);
    --statistics-septenary-text-color:     var(--bs-text-white);
    --statistics-octonary-text-color:      var(--bs-text-white);
    --statistics-primary-border-color:     var(--bs-border-color);

    /* Membership info */
    --membership_info-primary-bg-color:    var(--bs-bg-main);
    --membership_info-secondary-bg-color:  var(--bs-bg-surface);
    --membership_info-tertiary-bg-color:   var(--bs-bg-deepest);
    --membership_info-quaternary-bg-color: #050917;
    --membership_info-quinary-bg-color:    var(--bs-accent);
    --membership_info-senary-bg-color:     var(--bs-bg-main);
    --membership_info-septenary-bg-color:  var(--bs-bg-deepest);
    --membership_info-octonary-bg-color:   var(--bs-accent-light);
    --membership_info-nonary-bg-color:     var(--bs-bg-deepest);
    --membership_info-denary-bg-color:     var(--bs-bg-main);
    --membership_info-primary-text-color:  var(--bs-text-heading);
    --membership_info-secondary-text-color: var(--bs-text-body);
    --membership_info-tertiary-text-color: var(--bs-text-white);
    --membership_info-quaternary-text-color: var(--bs-text-muted);
    --membership_info-quinary-text-color:  var(--bs-accent);
    --membership_info-senary-text-color:   var(--bs-accent-light);
    --membership_info-septenary-text-color: var(--bs-text-heading);
    --membership_info-octonary-text-color: #fbbf24;
    --membership_info-nonary-text-color:   var(--bs-bg-deepest);
    --membership_info-denary-text-color:   var(--bs-bg-deepest);
    --membership_info-primary-border-color: var(--bs-border-color);

    /* Custom page */
    --custom-page-primary-bg-color:        var(--bs-bg-main);
    --custom-page-secondary-bg-color:      var(--bs-bg-surface);
    --custom-page-primary-text-color:      var(--bs-text-body);
    --custom-page-secondary-text-color:    var(--bs-accent);
    --custom-page-tertiary-text-color:     var(--bs-accent-light);
    --custom-page-primary-border-color:    var(--bs-border-color);

    /* Audio player */
    --audio-player-primary-bg-color:       var(--bs-bg-deepest);
    --audio-player-secondary-bg-color:     var(--bs-text-heading);
    --audio-player-tertiary-bg-color:      var(--bs-accent);
    --audio-player-quaternary-bg-color:    var(--bs-bg-surface);
    --audio-player-quinary-bg-color:       var(--bs-bg-surface);
    --audio-player-senary-bg-color:        #334155;
    --audio-player-primary-text-color:     var(--bs-text-heading);
    --audio-player-secondary-text-color:   var(--bs-text-body);
    --audio-player-tertiary-text-color:    var(--bs-text-muted);
    --audio-player-quaternary-text-color:  var(--bs-text-white);
    --audio-player-quinary-text-color:     var(--bs-text-heading);
    --audio-player-senary-text-color:      var(--bs-accent-light);
    --audio-player-primary-border-color:   var(--bs-border-color);
}

/* ═══════════════════════════════════════════════════════════════════
   1. BASE / BODY
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode {
    font-family: var(--bs-font-family);
    font-size: var(--bs-font-size-base);
    font-weight: var(--bs-font-weight-normal);
    line-height: var(--bs-line-height);
    background-color: var(--bs-bg-deepest);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(99, 102, 241, 0.12) 0%, transparent 65%),
        radial-gradient(ellipse 60% 40% at 80% 90%, rgba(139, 92, 246, 0.08) 0%, transparent 60%);
    background-attachment: fixed;
    color: var(--bs-text-body);
}

/* ═══════════════════════════════════════════════════════════════════
   2. TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode h1,
body.dark_mode h2,
body.dark_mode h3,
body.dark_mode h4,
body.dark_mode h5,
body.dark_mode h6 {
    font-family: var(--bs-font-family);
    color: var(--bs-text-heading);
    font-weight: var(--bs-font-weight-semibold);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

body.dark_mode p,
body.dark_mode span:not(.icon):not(.unread):not(.badge),
body.dark_mode label,
body.dark_mode small {
    font-family: var(--bs-font-family);
    color: var(--bs-text-body);
}

body.dark_mode a {
    color: var(--bs-accent-light);
    transition: color var(--bs-transition-fast);
}
body.dark_mode a:hover {
    color: var(--bs-text-heading);
}

/* ═══════════════════════════════════════════════════════════════════
   3. SCROLLBARS
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
body.dark_mode ::-webkit-scrollbar-track {
    background: var(--bs-bg-main);
}
body.dark_mode ::-webkit-scrollbar-thumb {
    background: var(--bs-scrollbar-thumb);
    border-radius: 3px;
}
body.dark_mode ::-webkit-scrollbar-thumb:hover {
    background: var(--bs-scrollbar-thumb-hover);
}

/* ═══════════════════════════════════════════════════════════════════
   4. PRELOADER
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode .preloader {
    background: var(--bs-bg-deepest);
}
body.dark_mode .preloader .loading {
    border-color: var(--bs-border-color);
    border-top-color: var(--bs-accent);
}

/* ═══════════════════════════════════════════════════════════════════
   5. SIDE NAVIGATION — Visual reskin (structure unchanged)
   ═══════════════════════════════════════════════════════════════════ */

/* Container */
body.dark_mode .main .side_navigation {
    background: var(--bs-bg-main);
    border-right-color: var(--bs-border-color);
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.4);
}

/* Top logo area */
body.dark_mode .main .side_navigation > .top {
    background: linear-gradient(135deg, #0f172a 0%, #16213a 100%);
    border-bottom-color: var(--bs-border-color);
}

/* Icon color in top bar */
body.dark_mode .main .side_navigation > .top > .icon {
    color: var(--bs-text-muted);
    transition: color var(--bs-transition-base);
}
body.dark_mode .main .side_navigation > .top > .icon:hover {
    color: var(--bs-accent-light);
}

/* Menu items */
body.dark_mode .main .side_navigation .menu_items > li > .menu_item {
    color: var(--bs-text-body);
    border-top-color: transparent;
    border-bottom-color: transparent;
    transition: background var(--bs-transition-base), color var(--bs-transition-base);
    border-radius: 0;
}

/* Remove alternating row background — use uniform surface */
body.dark_mode .main .side_navigation .menu_items > li:nth-child(even) > .menu_item {
    background: rgba(99, 102, 241, 0.04);
    border-top-color: var(--bs-border-color);
    border-bottom-color: var(--bs-border-color);
}

/* Hover state */
body.dark_mode .main .side_navigation .menu_items > li:hover > .menu_item,
body.dark_mode .main .side_navigation .menu_items > li:nth-child(even):hover > .menu_item {
    background: rgba(99, 102, 241, 0.12);
    color: var(--bs-text-heading);
    border-top-color: var(--bs-border-color);
    border-bottom-color: var(--bs-border-color);
}

/* Icon hover glow */
body.dark_mode .main .side_navigation .menu_items > li:hover > .menu_item > .icon {
    color: var(--bs-accent-light);
}

/* Active/selected item */
body.dark_mode .main .side_navigation .menu_items > li.active > .menu_item,
body.dark_mode .main .side_navigation .menu_items > li.selected > .menu_item {
    background: var(--bs-accent-glow);
    color: var(--bs-text-heading);
    border-left: 2px solid var(--bs-accent);
}
body.dark_mode .main .side_navigation .menu_items > li.active > .menu_item > .icon,
body.dark_mode .main .side_navigation .menu_items > li.selected > .menu_item > .icon {
    color: var(--bs-accent-light);
}

/* Unread badge */
body.dark_mode .main .side_navigation .menu_items > li > .menu_item > .unread > span {
    background: var(--bs-accent);
    color: var(--bs-text-white);
    border-radius: var(--bs-border-radius-pill);
    font-size: 0.7rem;
    font-weight: var(--bs-font-weight-semibold);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.5);
}

/* Child dropdown menu */
body.dark_mode .main .side_navigation .child_menu {
    background: var(--bs-bg-deepest);
    color: var(--bs-text-body);
}
body.dark_mode .main .side_navigation .child_menu > ul > li {
    border-bottom-color: var(--bs-border-color);
    color: var(--bs-text-body);
    transition: background var(--bs-transition-base), color var(--bs-transition-base);
}
body.dark_mode .main .side_navigation .child_menu > ul > li:hover {
    background: rgba(99, 102, 241, 0.12);
    color: var(--bs-text-heading);
}

/* Child menu header span */
body.dark_mode .main .side_navigation .child_menu > span {
    background: linear-gradient(135deg, var(--bs-bg-surface) 0%, var(--bs-bg-main) 100%);
    color: var(--bs-text-heading);
    border-bottom-color: var(--bs-border-color);
}
body.dark_mode .main .side_navigation .child_menu > span > i {
    background: linear-gradient(to right, var(--bs-accent-light), #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Bottom user info */
body.dark_mode .main .side_navigation > .bottom > .user_info {
    background: linear-gradient(135deg, var(--bs-bg-surface) 0%, var(--bs-bg-main) 100%);
    border-top-color: var(--bs-border-color);
    transition: background var(--bs-transition-base);
}
body.dark_mode .main .side_navigation > .bottom > .user_info:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, var(--bs-bg-surface) 100%);
}
body.dark_mode .main .side_navigation > .bottom > .user_info > .center > .title {
    background: linear-gradient(to right, var(--bs-text-heading), var(--bs-accent-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.dark_mode .main .side_navigation > .bottom > .user_info > .center > .sub_title {
    color: var(--bs-text-muted);
}
body.dark_mode .main .side_navigation > .bottom > .user_info > .right > .icon {
    color: var(--bs-text-muted);
}

/* Bottom child menu */
body.dark_mode .main .side_navigation > .bottom .child_menu {
    background: var(--bs-bg-main);
    border-right-color: var(--bs-border-color);
}
body.dark_mode .main .side_navigation > .bottom .child_menu > ul > li {
    border-top-color: var(--bs-border-color);
}
body.dark_mode .main .side_navigation .bottom .child_menu > span {
    background: var(--bs-bg-surface);
    border-top-color: var(--bs-border-color);
}

/* ═══════════════════════════════════════════════════════════════════
   6. ASIDE (Left side content panel)
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode .main .aside {
    background: var(--bs-bg-surface);
    border-right: 1px solid var(--bs-border-color);
}

body.dark_mode .main .aside > .head {
    background: linear-gradient(135deg, var(--bs-bg-surface) 0%, var(--bs-bg-main) 100%);
    border-bottom-color: var(--bs-border-color);
    color: var(--bs-text-heading);
}

/* User logged-in avatar area */
body.dark_mode .main .side_navigation > .center > .userloggedin {
    background: linear-gradient(135deg, var(--bs-bg-surface) 0%, var(--bs-bg-main) 100%);
    border-bottom-color: var(--bs-border-color);
}
body.dark_mode .main .side_navigation > .center > .userloggedin > .userimg > img {
    border-color: var(--bs-accent);
    box-shadow: 0 0 0 2px var(--bs-bg-main), 0 0 12px rgba(99, 102, 241, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════
   7. MIDDLE / CHAT WINDOW
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode .main .middle {
    background: var(--bs-bg-deepest);
    border-left-color: var(--bs-border-color);
}

body.dark_mode .main .middle > .head,
body.dark_mode .main .chatbox > .head {
    background: linear-gradient(135deg, var(--bs-bg-surface) 0%, var(--bs-bg-main) 100%);
    border-bottom-color: var(--bs-border-color);
}

body.dark_mode .main .middle > .bottom,
body.dark_mode .main .chatbox > .bottom {
    background: var(--bs-bg-surface);
    border-top-color: var(--bs-border-color);
}

/* Pinned messages bar */
body.dark_mode .main .middle .pinned_messages {
    background: var(--bs-bg-surface);
    border-bottom-color: var(--bs-border-color);
}

/* Chat message composer */
body.dark_mode .main .chatbox > .footer > .editor {
    background: transparent;
    border-top: none;
}

body.dark_mode .main .chatbox > .footer > .editor .msg_editor_composer_box {
    background: #141b2d;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
}

body.dark_mode .main .chatbox > .footer > .editor .msg_editor_composer_box.is_focused,
body.dark_mode .main .chatbox > .footer > .editor .msg_editor_composer_box:focus-within {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22) !important;
}

body.dark_mode .main .chatbox > .footer > .editor .msg_editor_format_tools .note-btn {
    color: #94a3b8;
}

body.dark_mode .main .chatbox > .footer > .editor .msg_editor_format_tools .note-btn:hover {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.08);
}

body.dark_mode .main .chatbox > .footer > .editor .btn_action {
    color: #94a3b8;
}

body.dark_mode .main .chatbox > .footer > .editor .btn_action:hover {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.08);
}

body.dark_mode .main .chatbox > .footer > .editor .send_message_button {
    background: #8b5cf6;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.4);
}

body.dark_mode .main .chatbox > .footer > .editor .send_message_button:hover {
    background: #7c3aed;
}

body.dark_mode .mention_dropdown_popup {
    background: #141b2d;
    border-color: rgba(255, 255, 255, 0.12);
}

body.dark_mode .mention_dropdown_popup .mention_search_input {
    background: #0b0f19;
    border-color: #8b5cf6;
    color: #f8fafc;
}

/* ═══════════════════════════════════════════════════════════════════
   8. FORM BOX (right panel)
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode .main .formbox {
    background: var(--bs-bg-surface);
    border-left-color: var(--bs-border-color);
}

body.dark_mode .main .formbox > .head {
    background: linear-gradient(135deg, var(--bs-bg-surface) 0%, var(--bs-bg-main) 100%);
    border-bottom-color: var(--bs-border-color);
}

body.dark_mode .main .formbox > .head > .title {
    background: linear-gradient(to right, var(--bs-accent-light), #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.dark_mode .main .formbox > .bottom {
    background: var(--bs-bg-main);
    border-top-color: var(--bs-border-color);
}

/* Form submit gradient button */
body.dark_mode .main .formbox > .bottom > span.submit {
    background: linear-gradient(135deg, var(--bs-accent) 0%, #8b5cf6 100%);
    border: none;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.35);
    transition: box-shadow var(--bs-transition-base), opacity var(--bs-transition-base);
}
body.dark_mode .main .formbox > .bottom > span.submit:hover {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.55);
    opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════════
   9. INFO PANEL (right side)
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode .main .info_panel {
    background: var(--bs-bg-surface);
    border-left-color: var(--bs-border-color);
}

body.dark_mode .main .info_panel > .controls > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

body.dark_mode .main .info_panel > .controls > div > span > span {
    background: var(--bs-accent, #6366f1);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.875rem;
    border: 1px solid var(--bs-accent, #6366f1);
    padding: 4px 16px;
    border-radius: 50rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease;
    cursor: pointer;
}

body.dark_mode .main .info_panel > .controls > div > span > span:hover {
    background: var(--bs-accent-dark, #4f46e5);
    border-color: var(--bs-accent-light, #818cf8);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.55);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    transform: translateY(-1px);
}

body.dark_mode .main .info_panel > .controls > div > span > span:active {
    transform: translateY(0);
}

body.dark_mode .main .info_panel > .controls > div > .options > .text {
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: var(--bs-accent-light, #a5b4fc) !important;
    -webkit-text-fill-color: var(--bs-accent-light, #a5b4fc) !important;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 4px 16px;
    border-radius: 50rem;
    margin-bottom: 0;
    background: transparent;
    transition: all 0.2s ease;
}

body.dark_mode .main .info_panel > .controls > div > .options > .text:hover {
    border-color: var(--bs-accent, #6366f1);
    background: rgba(99, 102, 241, 0.12);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   10. CARDS / PANELS / WIDGETS
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode .card,
body.dark_mode .panel,
body.dark_mode .widget {
    background: var(--bs-bg-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-shadow);
    color: var(--bs-text-body);
    transition: box-shadow var(--bs-transition-base), border-color var(--bs-transition-base);
}
body.dark_mode .card:hover,
body.dark_mode .panel:hover,
body.dark_mode .widget:hover {
    box-shadow: var(--bs-shadow-glow);
    border-color: rgba(99, 102, 241, 0.35);
}

body.dark_mode .card-header,
body.dark_mode .panel-header {
    background: linear-gradient(135deg, var(--bs-bg-surface) 0%, var(--bs-bg-main) 100%);
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-text-heading);
    font-weight: var(--bs-font-weight-semibold);
}

body.dark_mode .card-body {
    color: var(--bs-text-body);
}

body.dark_mode .card-title {
    color: var(--bs-text-heading);
}

/* ═══════════════════════════════════════════════════════════════════
   11. FORMS — Inputs, Selects, Textareas
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
body.dark_mode textarea,
body.dark_mode select {
    background-color: var(--bs-input-bg);
    border: 1px solid var(--bs-input-border);
    border-radius: var(--bs-border-radius);
    color: var(--bs-input-text);
    font-family: var(--bs-font-family);
    font-size: var(--bs-font-size-base);
    transition: border-color var(--bs-transition-fast), box-shadow var(--bs-transition-fast);
    outline: none;
}
body.dark_mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])::placeholder,
body.dark_mode textarea::placeholder {
    color: var(--bs-input-placeholder);
}
body.dark_mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
body.dark_mode textarea:focus,
body.dark_mode select:focus {
    border-color: var(--bs-input-border-focus);
    box-shadow: var(--bs-input-shadow-focus);
    background-color: rgba(0, 0, 0, 0.1);
}

body.dark_mode label {
    color: var(--bs-text-body);
    font-size: var(--bs-font-size-base);
    font-weight: var(--bs-font-weight-medium);
    font-family: var(--bs-font-family);
}

/* Bootstrap form-control scoped */
body.dark_mode .form-control {
    background-color: var(--bs-input-bg);
    border-color: var(--bs-input-border);
    color: var(--bs-input-text);
}
body.dark_mode .form-control:focus {
    border-color: var(--bs-input-border-focus);
    box-shadow: var(--bs-input-shadow-focus);
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--bs-text-heading);
}
body.dark_mode .form-control::placeholder {
    color: var(--bs-input-placeholder);
}

/* ── Custom checkmark widget (formbox checkbox list) ───────────────
   In dark_mode --form-primary-border-color resolves to #1e293b, the
   same colour as the surface background, making the unchecked box
   border invisible.  Match form.css specificity (0,8,0) to win. */
body.dark_mode .main .formbox > .fields > div > form > .formdata > .field > .checkbox > label > .checkbox > .checkmark {
    border-color: #a5b4fc;   /* bs-accent-light — always visible on dark surface */
}
body.dark_mode .main .formbox > .fields > div > form > .formdata > .field > .checkbox > label:hover > .checkbox > .checkmark {
    border-color: #6366f1;
    background-color: rgba(99, 102, 241, 0.12);
}
body.dark_mode .main .formbox > .fields > div > form > .formdata > .field > .checkbox > label > .checkbox > input:checked ~ .checkmark {
    background-color: #6366f1;
    border-color: #6366f1;
}

/* ═══════════════════════════════════════════════════════════════════
   12. BUTTONS (global, scoped to dark_mode)
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode .btn {
    font-family: var(--bs-font-family);
    font-size: 0.875rem;
    font-weight: var(--bs-font-weight-medium);
    border-radius: var(--bs-border-radius);
    transition: background-color var(--bs-transition-base),
                border-color var(--bs-transition-base),
                box-shadow var(--bs-transition-base),
                color var(--bs-transition-base);
}

body.dark_mode .btn-primary {
    --gradient-bg-angle: 360deg;
    --gradient-border-angle: 360deg;
    background-color: #6366f1;
    background-image: linear-gradient(var(--gradient-bg-angle, 360deg), #6366f1 0%, #4338ca 50%, #6366f1 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 200% 200%;
    background-position: 0 0;
    border: 1px solid rgba(99, 102, 241, 1);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: inset 0 -5px 8px rgba(99, 102, 241, 0.4),
                0 0 15px rgba(99, 102, 241, 0.45),
                0 0 25px rgba(99, 102, 241, 0.25);
    animation: rotate-gradient 4s linear infinite, brightsaas-glow-pulse 2.8s ease-in-out infinite;
    transition: all 0.4s ease-in-out;
}
body.dark_mode .btn-primary:hover {
    background-position: 100% 100%;
    border-color: #7375f2;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: inset 0 -5px 8px rgba(99, 102, 241, 0.5),
                0 0 22px rgba(99, 102, 241, 0.8),
                0 0 40px rgba(99, 102, 241, 0.5);
    transform: translateY(-1px);
}

body.dark_mode .btn-secondary {
    background: var(--bs-bg-surface);
    border-color: var(--bs-border-color);
    color: var(--bs-text-body);
}
body.dark_mode .btn-secondary:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.4);
    color: var(--bs-text-heading);
}

body.dark_mode .btn-outline,
body.dark_mode .btn-outline-primary {
    background: transparent;
    border: 1px solid var(--bs-accent);
    color: var(--bs-accent-light);
}
body.dark_mode .btn-outline:hover,
body.dark_mode .btn-outline-primary:hover {
    background: var(--bs-accent-glow);
    color: var(--bs-text-heading);
}

body.dark_mode .btn-glow {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid #475569;
    color: #d5dcf2 !important;
    -webkit-text-fill-color: #d5dcf2 !important;
    box-shadow: inset 0 -4px 6px rgba(99, 102, 241, 0.1);
    transition: all 0.3s ease-in-out;
}
body.dark_mode .btn-glow:hover {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.6);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: inset 0 -4px 6px rgba(99, 102, 241, 0.15),
                0 0 14px rgba(99, 102, 241, 0.35);
    transform: translateY(-1px);
}

body.dark_mode .btn-pill {
    border-radius: var(--bs-border-radius-pill);
}

/* ═══════════════════════════════════════════════════════════════════
   13. MODALS / DIALOGS
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode .modal-content {
    background: var(--bs-bg-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-shadow-lg), 0 0 40px rgba(99, 102, 241, 0.15);
    color: var(--bs-text-body);
}

body.dark_mode .modal-header {
    background: linear-gradient(135deg, var(--bs-bg-surface) 0%, var(--bs-bg-main) 100%);
    border-bottom: 1px solid var(--bs-border-color);
}

body.dark_mode .modal-title {
    color: var(--bs-text-heading);
    font-weight: var(--bs-font-weight-semibold);
}

body.dark_mode .modal-footer {
    background: var(--bs-bg-main);
    border-top: 1px solid var(--bs-border-color);
}

body.dark_mode .modal-backdrop.show {
    opacity: 0.85;
    background-color: var(--bs-bg-deepest);
}

/* Popup dialogs */
body.dark_mode .popup-dialog,
body.dark_mode .dialog {
    background: var(--bs-bg-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-shadow-lg);
}

/* ═══════════════════════════════════════════════════════════════════
   14. DROPDOWN MENUS
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode .dropdown-menu {
    background: var(--bs-bg-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-shadow);
}
body.dark_mode .dropdown-item {
    color: var(--bs-text-body);
    transition: background var(--bs-transition-fast), color var(--bs-transition-fast);
}
body.dark_mode .dropdown-item:hover {
    background: rgba(99, 102, 241, 0.12);
    color: var(--bs-text-heading);
}
body.dark_mode .dropdown-divider {
    border-top-color: var(--bs-border-color);
}

/* ═══════════════════════════════════════════════════════════════════
   15. TABLES
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode table {
    color: var(--bs-text-body);
}
body.dark_mode .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-text-body);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: rgba(99, 102, 241, 0.04);
    --bs-table-hover-bg: rgba(99, 102, 241, 0.08);
}
body.dark_mode .table thead th {
    color: var(--bs-text-heading);
    border-bottom-color: var(--bs-border-color);
    font-weight: var(--bs-font-weight-semibold);
}
body.dark_mode .table td,
body.dark_mode .table th {
    border-color: var(--bs-border-color);
}

/* ═══════════════════════════════════════════════════════════════════
   16. BADGES & TAGS
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode .badge {
    font-family: var(--bs-font-family);
    font-weight: var(--bs-font-weight-medium);
    border-radius: var(--bs-border-radius);
}
body.dark_mode .badge.bg-primary,
body.dark_mode .badge-primary {
    background: var(--bs-accent) !important;
    color: var(--bs-text-white);
}

/* ═══════════════════════════════════════════════════════════════════
   17. CONFIRM BOX (ACTION SHEET)
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode .confirm_box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body.dark_mode .confirm_box .confirm_box_card {
    background: #182030 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--bs-text-body);
}
body.dark_mode .confirm_box .btn.cancel {
    background: #242e42 !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
body.dark_mode .confirm_box .btn.cancel:hover {
    background: #2d3a52 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
body.dark_mode .confirm_box .btn.submit {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.45);
}
body.dark_mode .confirm_box .btn.submit:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   18. LOADER SKELETONS
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode .main .loader > ul > li > div {
    background: var(--bs-bg-surface);
    border-bottom-color: var(--bs-border-color);
}
body.dark_mode .main .loader > ul > li > div > .center > .title,
body.dark_mode .main .loader > ul > li > div > .center > .subtitle {
    background: linear-gradient(90deg, var(--bs-bg-surface) 25%, #2d3d5a 50%, var(--bs-bg-surface) 75%);
    background-size: 200% 100%;
    animation: bs-shimmer 1.5s infinite;
    border-radius: var(--bs-border-radius);
}

@keyframes bs-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   19. WELCOME SCREEN
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode .main .welcome_screen {
    background: var(--bs-bg-main);
    color: var(--bs-text-body);
}
body.dark_mode .main .welcome_screen > .title {
    color: var(--bs-text-heading);
}

/* ═══════════════════════════════════════════════════════════════════
   20. CALL NOTIFICATION
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode .call_notification {
    background: linear-gradient(135deg, var(--bs-bg-surface) 0%, var(--bs-bg-main) 100%);
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--bs-shadow-lg), 0 0 30px rgba(99, 102, 241, 0.2);
    border-radius: var(--bs-border-radius-lg);
    color: var(--bs-text-body);
}
body.dark_mode .call_notification .action-button.attend_video_call {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    border: none;
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}
body.dark_mode .call_notification .action-button.reject_video_call {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: var(--bs-border-radius);
}

/* ═══════════════════════════════════════════════════════════════════
   21. STATISTICS / DASHBOARD WIDGETS
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode .main .middle > .content > .statistics {
    background: var(--bs-bg-main);
}

body.dark_mode .main .statistics .stat_card,
body.dark_mode .main .statistics .stat-item {
    background: var(--bs-bg-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-shadow);
    transition: transform var(--bs-transition-base), box-shadow var(--bs-transition-base);
}
body.dark_mode .main .statistics .stat_card:hover,
body.dark_mode .main .statistics .stat-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--bs-shadow-glow);
}

/* Statistics totals are generated as .item > div.load_aside rather than
   .stat_card/.stat-item. Give those actionable dashboard tiles their own
   raised surface so they remain distinct from the deepest page background. */
body.dark_mode .main .middle > .content > .statistics > .contents > .total_numbers > div > .item > div.load_aside {
    background: var(--bs-bg-surface);
    border: 1px solid var(--bs-border-color-light);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .35);
    transition: background var(--bs-transition-base), border-color var(--bs-transition-base), transform var(--bs-transition-base), box-shadow var(--bs-transition-base);
}

body.dark_mode .main .middle > .content > .statistics > .contents > .total_numbers > div > .item > div.load_aside:hover {
    background: var(--bs-bg-raised);
    border-color: rgba(165, 180, 252, .38);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45), var(--bs-shadow-glow);
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════
   22. INFOTIP / TOOLTIP
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode .infotip {
    background: var(--bs-bg-surface);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-text-body);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-shadow);
}

/* ═══════════════════════════════════════════════════════════════════
   23. AUDIO PLAYER
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode .audio_player_box {
    background: var(--bs-bg-deepest);
    border-top: 1px solid var(--bs-border-color);
}
body.dark_mode .audio_player_box .playlist {
    background: var(--bs-bg-main);
}
body.dark_mode .audio_player_box .player_controls {
    background: linear-gradient(135deg, var(--bs-bg-surface) 0%, var(--bs-bg-main) 100%);
}

/* ═══════════════════════════════════════════════════════════════════
   24. ACCESSIBILITY — Respect reduced motion
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    body.dark_mode *,
    body.dark_mode *::before,
    body.dark_mode *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    body.dark_mode::before {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   25. ASIDE BOTTOM DOCK
   ═══════════════════════════════════════════════════════════════════ */
body.dark_mode .main .aside .tools > .dock_container {
    background: rgba(15, 23, 42, 0.92) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
}
body.dark_mode .main .aside .tools > .dock_container .icon .tiptext {
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f8fafc;
}
body.dark_mode .main .aside .tools > .dock_container .icon .tiptext:after {
    border-top-color: rgba(30, 41, 59, 0.95);
}