/* ==========================================================================
   Theme System – CSS Custom Properties
   Dark Mode = Default (:root), Light Mode = body.light-mode
   ========================================================================== */

:root {
    /* ── Hintergründe ─────────────────────────────────────────────────── */
    --bg-body-overlay:      rgba(0, 0, 0, 0.6);
    --bg-header:            rgba(53, 53, 53, 0.2);
    --bg-footer:            transparent;
    --bg-surface:           rgba(42, 42, 42, 0.95);
    --bg-input:             rgb(49, 49, 49);
    --bg-input-focus:       rgb(35, 35, 35);
    --bg-hover:             rgb(62, 62, 62);
    --bg-hover-subtle:      rgba(172, 172, 172, 0.081);
    --bg-hover-icon:        rgba(200, 200, 200, 0.2);
    --bg-overlay:           rgba(0, 0, 0, 0.5);
    --bg-phone:             black;
    --bg-phone-hover:       rgb(66, 66, 66);
    --bg-phone-active:      rgb(100, 100, 100);
    --bg-section:           rgba(0, 0, 0, 0.3);
    --bg-panel:             #1e1e1e;
    --bg-suggestions:       rgb(40, 40, 40);
    --bg-resize:            rgba(100, 100, 100, 0.3);
    --bg-resize-hover:      rgba(100, 100, 100, 0.5);
    --bg-subtle:            rgba(255, 255, 255, 0.08);
    --bg-subtle-hover:      rgba(255, 255, 255, 0.1);
    --bg-subtle-medium:     rgba(255, 255, 255, 0.15);
    --bg-subtle-strong:     rgba(255, 255, 255, 0.25);
    --bg-buddy-hover:       rgba(73, 73, 73, 0.5);
    --bg-modal:             rgba(0, 0, 0, 0.7);
    --bg-device-bar:        rgba(0, 0, 0, 0.7);
    --bg-unread:            rgba(59, 130, 246, 0.1);
    --bg-tooltip:           rgba(30, 30, 30, 0.95);
    --bg-bubble-tooltip:    rgba(50, 50, 50, 0.95);
    --bg-debug:             rgba(0, 0, 0, 0.3);
    --bg-input-alpha:       rgba(49, 49, 49, 0.4);
    --bg-input-hover:       rgba(49, 49, 49, 0.7);
    --bg-scrollbar-track:   rgba(49, 49, 49, 0.5);
    --bg-scrollbar-thumb:   rgba(100, 100, 100, 0.8);
    --bg-scrollbar-thumb-hover: rgba(150, 150, 150, 0.8);

    /* ── Text ─────────────────────────────────────────────────────────── */
    --text-primary:         rgb(195, 195, 195);
    --text-strong:          white;
    --text-secondary:       gray;
    --text-muted:           rgb(177, 177, 177);
    --text-link:            rgb(200, 200, 200);
    --text-placeholder:     rgba(255, 255, 255, 0.5);
    --text-label:           rgba(255, 255, 255, 0.7);
    --text-desc:            rgba(255, 255, 255, 0.6);
    --text-dim:             rgba(255, 255, 255, 0.4);
    --text-phone:           rgb(141, 141, 141);
    --text-phone-placeholder: rgb(66, 66, 66);
    --text-device:          #ccc;
    --text-device-item:     #e3e3e3;

    /* ── Rahmen ───────────────────────────────────────────────────────── */
    --border-subtle:        rgba(255, 255, 255, 0.08);
    --border-separator:     rgba(255, 255, 255, 0.15);
    --border-medium:        rgba(255, 255, 255, 0.2);
    --border-strong:        rgba(255, 255, 255, 0.3);
    --border-head-sep:      rgba(150, 150, 150, 0.5);
    --border-input:         rgb(195, 195, 195);
    --border-btn:           rgb(84, 84, 84);
    --border-btn-active:    rgb(184, 184, 184);
    --border-divider:       rgb(100, 100, 100);
    --border-line:          rgba(74, 74, 74, 0);
    --border-panel:         #333;
    --border-hover:         rgba(150, 150, 150, 0.6);
    --border-medium-alpha:  rgba(100, 100, 100, 0.5);

    /* ── Schatten ──────────────────────────────────────────────────────── */
    --shadow-sm:            0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow:               0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg:            0 4px 20px rgba(0, 0, 0, 0.5);

    /* ── Icons (Filter für SVG-Icons die weiß sind) ────────────────── */
    --icon-filter:          none;
    --icon-filter-dark:     invert(1);
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE
   ══════════════════════════════════════════════════════════════════════════ */

body.light-mode {
    /* ── Hintergründe ─────────────────────────────────────────────────── */
    --bg-body-overlay:      rgba(255, 255, 255, 0.82);
    --bg-header:            rgba(235, 235, 235, 0.4);
    --bg-footer:            rgba(235, 235, 235, 0.4);
    --bg-surface:           rgba(255, 255, 255, 0.95);
    --bg-input:             rgb(238, 238, 238);
    --bg-input-focus:       rgb(245, 245, 245);
    --bg-hover:             rgb(232, 232, 232);
    --bg-hover-subtle:      rgba(0, 0, 0, 0.04);
    --bg-hover-icon:        rgba(0, 0, 0, 0.08);
    --bg-overlay:           rgba(0, 0, 0, 0.3);
    --bg-phone:             rgb(240, 240, 240);
    --bg-phone-hover:       rgb(215, 215, 215);
    --bg-phone-active:      rgb(195, 195, 195);
    --bg-section:           rgba(0, 0, 0, 0.04);
    --bg-panel:             #ffffff;
    --bg-suggestions:       rgb(250, 250, 250);
    --bg-resize:            rgba(0, 0, 0, 0.08);
    --bg-resize-hover:      rgba(0, 0, 0, 0.15);
    --bg-subtle:            rgba(0, 0, 0, 0.04);
    --bg-subtle-hover:      rgba(0, 0, 0, 0.06);
    --bg-subtle-medium:     rgba(0, 0, 0, 0.08);
    --bg-subtle-strong:     rgba(0, 0, 0, 0.12);
    --bg-buddy-hover:       rgba(0, 0, 0, 0.05);
    --bg-modal:             rgba(0, 0, 0, 0.4);
    --bg-device-bar:        rgba(235, 235, 235, 0.9);
    --bg-unread:            rgba(59, 130, 246, 0.08);
    --bg-tooltip:           rgba(255, 255, 255, 0.95);
    --bg-bubble-tooltip:    rgba(255, 255, 255, 0.95);
    --bg-debug:             rgba(0, 0, 0, 0.04);
    --bg-input-alpha:       rgba(230, 230, 230, 0.5);
    --bg-input-hover:       rgba(220, 220, 220, 0.7);
    --bg-scrollbar-track:   rgba(0, 0, 0, 0.05);
    --bg-scrollbar-thumb:   rgba(0, 0, 0, 0.15);
    --bg-scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);

    /* ── Text ─────────────────────────────────────────────────────────── */
    --text-primary:         rgb(60, 60, 60);
    --text-strong:          rgb(20, 20, 20);
    --text-secondary:       rgb(120, 120, 120);
    --text-muted:           rgb(130, 130, 130);
    --text-link:            rgb(80, 80, 80);
    --text-placeholder:     rgba(0, 0, 0, 0.4);
    --text-label:           rgba(0, 0, 0, 0.6);
    --text-desc:            rgba(0, 0, 0, 0.5);
    --text-dim:             rgba(0, 0, 0, 0.3);
    --text-phone:           rgb(80, 80, 80);
    --text-phone-placeholder: rgb(180, 180, 180);
    --text-device:          rgb(80, 80, 80);
    --text-device-item:     rgb(40, 40, 40);

    /* ── Rahmen ───────────────────────────────────────────────────────── */
    --border-subtle:        rgba(0, 0, 0, 0.08);
    --border-separator:     rgba(0, 0, 0, 0.1);
    --border-medium:        rgba(0, 0, 0, 0.15);
    --border-strong:        rgba(0, 0, 0, 0.2);
    --border-head-sep:      rgba(0, 0, 0, 0.12);
    --border-input:         rgb(180, 180, 180);
    --border-btn:           rgb(200, 200, 200);
    --border-btn-active:    rgb(120, 120, 120);
    --border-divider:       rgb(210, 210, 210);
    --border-line:          rgba(200, 200, 200, 0);
    --border-panel:         #ddd;
    --border-hover:         rgba(0, 0, 0, 0.25);
    --border-medium-alpha:  rgba(0, 0, 0, 0.12);

    /* ── Schatten ──────────────────────────────────────────────────────── */
    --shadow-sm:            0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow:               0 4px 20px rgba(0, 0, 0, 0.12);
    --shadow-lg:            0 4px 20px rgba(0, 0, 0, 0.15);

    /* ── Icons (invertieren für dunkle SVG-Icons) ──────────────────── */
    --icon-filter:          invert(0.7);
    --icon-filter-dark:     none;
}

/* ══════════════════════════════════════════════════════════════════════════
   ICON FILTER – wendet den Modus-abhängigen Filter auf alle SVG-Icons an
   ══════════════════════════════════════════════════════════════════════════ */

.head_icon,
.head_viewmode_icon,
.dropdown_icon,
.footer_badge_icon,
.footer_scroll_icon,
.rotate_icon,
.app_search_icon,
.class_btn_icon,
.app_current_filter_toggle_icon,
.buddylist_resize_icon,
.phone_resize_icon,
.buddylist_cmd_icon,
.phone_dp_icon,
.phone_device_icon,
.dlg_ans_method_icon,
.dlg_ans_upload_file_icon,
.dlg_opmode_icon,
.numpad_back_icon,
.numpad_icon,
.dlg_edit_phonebook_pbook_icon,
.dlg_fax_dropzone_icon,
.dlg_fax_file_icon,
.dlg_ad_icon,
.app_state_icon,
.status_icon,
.app_search_cmdicon,
.rufverteilung_dropicon,
.rufverteilung_dropcheck,
.switch_drop_check,
.phone_cmd:not(.pc_red):not(.pc_green):not(.pc_blue),
.dlg_rt_item_play,
.dlg_fax_file_status,
.dlg_fax_file_delete {
    filter: var(--icon-filter);
}

.phone_callerpic[src$=".svg"] {
    filter: var(--icon-filter);
}