/* Bridge Operator Console - Dialpad Dark Theme */
/* Base: https://unpkg.com/@progress/kendo-theme-bootstrap@13.0.0/dist/bootstrap-main.css */
/* Bootstrap dark vars are handled by Bootstrap itself via data-bs-theme="dark".            */
/* This file overrides the Kendo --kendo-color-* CSS custom properties for dark mode.       */

:root {
    /* ── Kendo primary — Dialpad purple ─────────────────────────────────── */
    --kendo-color-primary:                  #7B51FF;
    --kendo-color-primary-hover:            #9070ff;
    --kendo-color-primary-active:           #a585ff;
    --kendo-color-primary-subtle:           #1f0f4d;
    --kendo-color-primary-subtle-hover:     #2b1566;
    --kendo-color-primary-subtle-active:    #381c80;
    --kendo-color-primary-on-subtle:        #c9b8ff;
    --kendo-color-primary-on-surface:       #9070ff;
    --kendo-color-primary-emphasis:         rgba(123, 81, 255, 0.4);

    /* ── App surface (outermost background / body) ───────────────────────── */
    --kendo-color-app-surface:              #000000;
    --kendo-color-on-app-surface:           #ffffff;

    /* ── Component surface (cards, panels, dialogs) ─────────────────────── */
    --kendo-color-surface:                  #101010;
    --kendo-color-surface-alt:              #0a0a0a;
    --kendo-color-on-surface:               #ffffff;

    /* ── Base (inputs, list items, rows) ────────────────────────────────── */
    --kendo-color-base:                     #151515;
    --kendo-color-base-hover:               #202020;
    --kendo-color-base-active:              #252525;
    --kendo-color-on-base:                  #ffffff;

    /* ── Borders ─────────────────────────────────────────────────────────── */
    --kendo-color-border:                   #333333;
    --kendo-color-border-alt:               #444444;

    /* ── Subtle / muted text ─────────────────────────────────────────────── */
    --kendo-color-subtle:                   #adb5bd;

    /* ── Selected state ──────────────────────────────────────────────────── */
    --kendo-color-selected:                 #7B51FF;
    --kendo-color-selected-hover:           #9070ff;
    --kendo-color-on-selected:              #ffffff;

    /* ── Header / toolbar areas ──────────────────────────────────────────── */
    --kendo-color-header-bg:                #0a0a0a;
    --kendo-color-header-text:              #ffffff;
    --kendo-color-header-border:            #333333;

    /* ── Buttons ─────────────────────────────────────────────────────────── */
    --kendo-color-button-bg:                #404040;
    --kendo-color-button-text:              #ffffff;
    --kendo-color-button-border:            #555555;
    --kendo-color-button-hover-bg:          #4d4d4d;
    --kendo-color-button-hover-text:        #ffffff;

    /* ── Tooltip ─────────────────────────────────────────────────────────── */
    --kendo-color-tooltip-bg:               #0a0a0a;
    --kendo-color-tooltip-text:             #ffffff;
}

.k-grid,
.k-grid td,
.k-grid th {
    font-size: 13px;
}

.k-chat .k-message-list,
.k-chat .k-message-list-content,
.k-message-list,
.k-message-list-content {
    background-color: #111111 !important;
}

/* Kendo Chat native upload button — far left, white icon in dark mode */
.k-chat .k-chat-upload {
    order: -1 !important;
    margin-right: auto !important;
    opacity: 1 !important;
    color: #ffffff !important;
}

/* Force white fill directly — bypasses --kendo-color-base-on-surface variable inheritance */
.k-chat .k-chat-upload .k-svg-icon,
.k-chat .k-chat-upload svg,
.k-chat .k-chat-upload svg path {
    fill: #ffffff !important;
    color: #ffffff !important;
}