/* Enhanced CSS Custom Properties for Dark Mode Support */
/* This file extends the existing CSS variables to support dark mode transitions */

:root {
    /* Brand colors — Film Väst (per design-system/MASTER.md and constitution v1.6.1) */
    --main-color: #467aa7;
    --secondary-color: #2a5a7a;
    --tertiary-color: #6a93b8;
    --info-color: #467aa7;
    --success-color: #297529;
    --warning-color: #fde74c;
    --error-color: #990000;
    --dark-color: #1a1a1a;
    --light-color: #f5f5f5;
    --main-p-color: #1a1a1a;
    --delete-color: #990000;
    --light-green: #b6f5aa;
    --dark-green: #297529;

    /* Type stack — per design-system/MASTER.md */
    --font-display: "Playfair Display", Georgia, serif;
    --font-body: Georgia, "Times New Roman", serif;
    --font-ui: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Kendo theme overrides — primary palette flows into all Telerik components */
    --kendo-color-primary: #467aa7;
    --kendo-color-primary-hover: #2a5a7a;
    --kendo-color-primary-active: #2a5a7a;
    --kendo-color-info: #467aa7;
    --kendo-color-success: #297529;
    --kendo-color-error: #990000;
    --kendo-link-text: #467aa7;
    --kendo-link-hover-text: #2a5a7a;

    /* Telerik component variables */
    --telerik-bg-color: #ffffff;
    --telerik-text-color: #1a1a1a;
    --telerik-border-color: #dddddd;
    --telerik-hover-bg: #f5f5f5;
    --telerik-selected-bg: rgba(70, 122, 167, 0.12);
    --telerik-header-bg: #f5f5f5;
    --telerik-alt-row-bg: #fafafa;

    /* Visual Refresh — Light mode (Film Väst palette) */
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --text-primary: #1a1a1a;
    --text-secondary: #444444;
    --accent-primary: #467aa7;
    --accent-secondary: #2a5a7a;
    --accent-glow: rgba(70, 122, 167, 0.12);
    --border-subtle: rgba(70, 122, 167, 0.08);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 8px 25px rgba(70, 122, 167, 0.15), 0 0 0 1px rgba(70, 122, 167, 0.08);
    --shimmer-color: rgba(255, 255, 255, 0.7);
    --shimmer-duration: 6s;
    --transition-speed: 0.25s;
}

/* Dark mode variables — Film Väst palette pulled darker for nighttime contrast */
.dark {
    --main-color: #6a93b8;
    --secondary-color: #467aa7;
    --tertiary-color: #8aaccc;
    --info-color: #6a93b8;
    --success-color: #4caf50;
    --warning-color: #f59e0b;
    --error-color: #c44a4a;
    --dark-color: #0f1419;
    --light-color: #2a2a2a;
    --main-p-color: #f5f5f5;
    --delete-color: #c44a4a;
    --light-green: #1f3d1f;
    --dark-green: #4caf50;

    /* Kendo theme overrides — dark mode */
    --kendo-color-primary: #6a93b8;
    --kendo-color-primary-hover: #8aaccc;
    --kendo-color-primary-active: #467aa7;
    --kendo-color-info: #6a93b8;
    --kendo-color-success: #4caf50;
    --kendo-color-error: #c44a4a;
    --kendo-link-text: #8aaccc;
    --kendo-link-hover-text: #aac6dd;

    /* Dark mode Telerik variables */
    --telerik-bg-color: #0f1419;
    --telerik-text-color: #f5f5f5;
    --telerik-border-color: rgba(255, 255, 255, 0.08);
    --telerik-hover-bg: #2a2a2a;
    --telerik-selected-bg: rgba(106, 147, 184, 0.20);
    --telerik-header-bg: #1a1f24;
    --telerik-alt-row-bg: #14191e;

    /* Visual Refresh — Dark mode */
    --bg-primary: #0f1419;
    --bg-secondary: #1a1f24;
    --bg-card: #14191e;
    --text-primary: #f5f5f5;
    --text-secondary: #a5b3c0;
    --accent-primary: #6a93b8;
    --accent-secondary: #8aaccc;
    --accent-glow: rgba(106, 147, 184, 0.2);
    --border-subtle: rgba(106, 147, 184, 0.1);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 12px rgba(106, 147, 184, 0.04);
    --shadow-hover: 0 8px 30px rgba(106, 147, 184, 0.2), 0 0 0 1px rgba(106, 147, 184, 0.15);
    --shimmer-color: rgba(255, 255, 255, 0.04);
}

/* Apply CSS variables to Telerik components for smooth transitions */
.k-grid,
.k-grid-header,
.k-grid-content,
.k-grid-table {
    background-color: var(--telerik-bg-color) !important;
    color: var(--telerik-text-color) !important;
    border-color: var(--telerik-border-color) !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.k-grid-header .k-header {
    background-color: var(--telerik-header-bg) !important;
    color: var(--telerik-text-color) !important;
    border-color: var(--telerik-border-color) !important;
}

.k-grid tbody tr {
    background-color: var(--telerik-bg-color) !important;
    color: var(--telerik-text-color) !important;
    border-color: var(--telerik-border-color) !important;
    transition: background-color 0.2s ease;
}

.k-grid tbody tr:hover {
    background-color: var(--telerik-hover-bg) !important;
}

.k-grid tbody tr.k-alt {
    background-color: var(--telerik-alt-row-bg) !important;
}

.k-grid tbody tr.k-alt:hover {
    background-color: var(--telerik-hover-bg) !important;
}

.k-grid tbody tr.k-selected {
    background-color: var(--telerik-selected-bg) !important;
    color: #ffffff !important;
}

/* Apply to other Telerik components */
.k-button {
    background-color: var(--telerik-hover-bg) !important;
    color: var(--telerik-text-color) !important;
    border-color: var(--telerik-border-color) !important;
    transition: all 0.2s ease;
}

.k-button:hover {
    background-color: var(--telerik-border-color) !important;
}

.k-button.k-primary {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    color: #ffffff !important;
}

.k-textbox,
.k-input,
.k-dropdown,
.k-combobox {
    background-color: var(--telerik-bg-color) !important;
    color: var(--telerik-text-color) !important;
    border-color: var(--telerik-border-color) !important;
    transition: all 0.2s ease;
}

.k-popup,
.k-list-container {
    background-color: var(--telerik-bg-color) !important;
    border-color: var(--telerik-border-color) !important;
}

.k-list-item {
    color: var(--telerik-text-color) !important;
    transition: background-color 0.2s ease;
}

.k-list-item:hover,
.k-list-item.k-selected {
    background-color: var(--telerik-hover-bg) !important;
}

.k-card {
    background-color: var(--telerik-bg-color) !important;
    border-color: var(--telerik-border-color) !important;
    transition: all 0.2s ease;
}

.k-card-header {
    background-color: var(--telerik-header-bg) !important;
    color: var(--telerik-text-color) !important;
    border-color: var(--telerik-border-color) !important;
}

.k-card-title {
    color: var(--main-color) !important;
}

.k-panelbar {
    background-color: var(--telerik-bg-color) !important;
    border-color: var(--telerik-border-color) !important;
}

.k-panelbar .k-item {
    background-color: var(--telerik-bg-color) !important;
    color: var(--telerik-text-color) !important;
    border-color: var(--telerik-border-color) !important;
    transition: background-color 0.2s ease;
}

.k-panelbar .k-item:hover {
    background-color: var(--telerik-hover-bg) !important;
}

.k-listview {
    background-color: var(--telerik-bg-color) !important;
    color: var(--telerik-text-color) !important;
    border-color: var(--telerik-border-color) !important;
}

.k-listview .k-listview-item {
    background-color: var(--telerik-bg-color) !important;
    color: var(--telerik-text-color) !important;
    border-color: var(--telerik-border-color) !important;
    transition: background-color 0.2s ease;
}

.k-listview .k-listview-item:hover {
    background-color: var(--telerik-hover-bg) !important;
}

.k-svg-icon {
    color: var(--telerik-text-color) !important;
    transition: color 0.2s ease;
}

/* Type stack — body, headings, dense-data UI per design-system/MASTER.md */
body {
    font-family: var(--font-body);
    color: var(--text-primary);
}

h1, h2, h3, .k-card-title, .k-window-title {
    font-family: var(--font-display);
    color: var(--text-primary);
}

/* Telerik components, forms, tables, navigation — Inter for dense data legibility */
.k-grid, .k-grid-table,
.k-input, .k-textbox, .k-dropdown, .k-combobox, .k-numerictextbox, .k-datepicker,
.k-button, .k-toolbar,
.k-menu, .k-tabstrip, .k-panelbar,
.k-listview, .k-listbox,
.k-form, .k-label, .k-checkbox-label, .k-radio-label {
    font-family: var(--font-ui);
}