/* 
  DB Branding Custom Theme for RustDesk WebUI
  This file globally overrides default theme variables for popular UI frameworks 
  (MUI, Element Plus, Bootstrap, etc.) to inject the DB Branding palette.
*/

:root {
    /* Brand Colors (DB Branding) */
    --db-primary: oklch(37.18% 0.1096 253.82);
    --db-secondary: oklch(46.35% 0.1136 248.65);
    --db-bg: oklch(15% 0.01 253.82);
    --db-surface: oklch(20% 0.015 253.82);
    --db-text-light: oklch(98% 0.005 253.82);
    --db-text-muted: oklch(85% 0.01 253.82);
    --db-border: oklch(25% 0.02 253.82 / 0.1);

    /* Element Plus / Vue Overrides (commonly used in RustDesk WebUIs) */
    --el-color-primary: var(--db-primary) !important;
    --el-color-primary-light-3: var(--db-secondary) !important;
    --el-bg-color: var(--db-bg) !important;
    --el-bg-color-page: var(--db-bg) !important;
    --el-bg-color-overlay: var(--db-surface) !important;
    --el-text-color-primary: var(--db-text-light) !important;
    --el-text-color-regular: var(--db-text-muted) !important;
    --el-border-color: var(--db-border) !important;

    /* Bootstrap Overrides */
    --bs-primary: var(--db-primary) !important;
    --bs-body-bg: var(--db-bg) !important;
    --bs-body-color: var(--db-text-light) !important;
    --bs-light: var(--db-surface) !important;

    /* MUI Overrides */
    --mdc-theme-primary: var(--db-primary) !important;
    --mdc-theme-background: var(--db-bg) !important;
    --mdc-theme-surface: var(--db-surface) !important;
    --mdc-theme-text-primary-on-background: var(--db-text-light) !important;
}

/* Hard-override structural elements to ensure dark mode compliance */
body, html, #app, .app-main, .sidebar-container, .navbar {
    background-color: var(--db-bg) !important;
    color: var(--db-text-light) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* Cards & Surfaces */
.el-card, .card, .panel, .MuiPaper-root {
    background-color: var(--db-surface) !important;
    border: 1px solid var(--db-border) !important;
    box-shadow: none !important;
    color: var(--db-text-light) !important;
}

/* Ensure headings aren't dark */
h1, h2, h3, h4, h5, h6, .title {
    color: var(--db-text-light) !important;
}

/* Buttons */
.el-button--primary, .btn-primary, .MuiButton-containedPrimary {
    background-color: var(--db-primary) !important;
    border-color: var(--db-primary) !important;
    color: var(--db-text-light) !important;
    border-radius: 4px !important;
}

.el-button--primary:hover, .btn-primary:hover {
    background-color: var(--db-secondary) !important;
}

/* Inputs and Forms */
input, .el-input__inner, .form-control {
    background-color: oklch(25% 0.02 253.82) !important;
    color: var(--db-text-light) !important;
    border: 1px solid var(--db-border) !important;
}
input:focus, .el-input__inner:focus {
    border-color: var(--db-primary) !important;
}

/* Force Logo Swaps for inline SVGs or obscure image paths */
.logo img, .navbar-brand img, .header-logo, .brand img {
    content: url('/support/db-logo.png') !important;
    object-fit: contain !important;
    max-height: 40px !important;
}