/* Telerik Dark Mode Override Styles */
/* This filpooe provides dark mode styling for Telerik components when the 'dark' class is applied to the html element */

/* Dark mode styles for Telerik components */
.dark .k-grid {
    background-color: #111827 !important;
    color: #f3f4f6 !important;
    border: 1px solid #374151 !important;
}

.dark .k-grid-header {
    background-color: #1f2937 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #4b5563 !important;
}

.dark .k-grid-header .k-header {
    background-color: #1f2937 !important;
    color: #ffffff !important;
    border-right: 1px solid #4b5563 !important;
    font-weight: 600 !important;
}

.dark .k-grid-content {
    background-color: #111827 !important;
}

.dark .k-grid-table {
    background-color: #111827 !important;
    color: #f3f4f6 !important;
}

.dark .k-grid tbody tr {
    background-color: #111827 !important;
    color: #f3f4f6 !important;
    border-bottom: 1px solid #374151 !important;
}

.dark .k-grid tbody tr:hover {
    background-color: #1f2937 !important;
    color: #ffffff !important;
}

.dark .k-grid tbody tr.k-alt {
    background-color: #0f172a !important;
    color: #f3f4f6 !important;
}

.dark .k-grid tbody tr.k-alt:hover {
    background-color: #1f2937 !important;
    color: #ffffff !important;
}

.dark .k-grid tbody tr.k-selected {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

.dark .k-grid tbody td {
    color: #f3f4f6 !important;
    border-right: 1px solid #374151 !important;
}

/* Buttons */
.dark .k-button {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
    border: 1px solid #4b5563 !important;
}

.dark .k-button:hover {
    background-color: #4b5563 !important;
    color: #ffffff !important;
    border-color: #6b7280 !important;
}

.dark .k-button.k-primary {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

.dark .k-button.k-primary:hover {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

/* Grid Pagination */
.dark .k-grid-pager {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border-top: 1px solid #4b5563 !important;
}

.dark .k-grid-pager .k-pager-numbers .k-link {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
    border: 1px solid #4b5563 !important;
}

.dark .k-grid-pager .k-pager-numbers .k-link:hover {
    background-color: #4b5563 !important;
    color: #ffffff !important;
}

.dark .k-grid-pager .k-pager-numbers .k-state-selected {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

.dark .k-grid-pager .k-pager-info {
    color: #d1d5db !important;
}

/* Statistics Cards and Widgets */
.dark .card,
.dark .bg-white {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border: 1px solid #374151 !important;
}

.dark .text-gray-900 {
    color: #f3f4f6 !important;
}

.dark .text-gray-600 {
    color: #d1d5db !important;
}

.dark .text-gray-500 {
    color: #9ca3af !important;
}

.dark .text-gray-700 {
    color: #e5e7eb !important;
}

.dark .text-gray-800 {
    color: #f3f4f6 !important;
}

/* Statistics numbers and values */
.dark .text-3xl,
.dark .text-2xl,
.dark .text-xl {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Additional Dark Mode Improvements for Better Contrast */

/* ServiceStack and general card styling */
.dark .bg-gray-50,
.dark .bg-gray-100 {
    background-color: #1f2937 !important;
}

.dark .bg-gray-200 {
    background-color: #374151 !important;
}

.dark .border-gray-200,
.dark .border-gray-300 {
    border-color: #4b5563 !important;
}

/* Text contrast improvements */
.dark h1,
.dark h2, 
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
    color: #ffffff !important;
}

.dark .font-bold,
.dark .font-semibold {
    color: #ffffff !important;
}

/* Statistics and metric values */
.dark .text-4xl,
.dark .text-5xl {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Links and interactive elements */
.dark a {
    color: #60a5fa !important;
}

.dark a:hover {
    color: #93c5fd !important;
}

/* Table styling improvements */
.dark table,
.dark .table {
    background-color: #111827 !important;
    color: #f3f4f6 !important;
}

.dark th {
    background-color: #1f2937 !important;
    color: #ffffff !important;
    border-color: #4b5563 !important;
}

.dark td {
    background-color: #111827 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}

.dark tbody tr:hover {
    background-color: #1f2937 !important;
}

/* ServiceStack specific components */
.dark .form-control {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}

.dark .form-control:focus {
    background-color: #374151 !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
}

/* Button improvements */
.dark .btn-primary {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

.dark .btn-secondary {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}

.dark .btn-secondary:hover {
    background-color: #4b5563 !important;
    color: #ffffff !important;
}

/* Alert and notification styling */
.dark .alert {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}

.dark .alert-info {
    background-color: #1e3a8a !important;
    color: #dbeafe !important;
    border-color: #3730a3 !important;
}

.dark .alert-success {
    background-color: #14532d !important;
    color: #dcfce7 !important;
    border-color: #166534 !important;
}

.dark .alert-warning {
    background-color: #92400e !important;
    color: #fef3c7 !important;
    border-color: #d97706 !important;
}

.dark .alert-danger {
    background-color: #991b1b !important;
    color: #fecaca !important;
    border-color: #dc2626 !important;
}

/* Dropdown and select improvements */
.dark select,
.dark .select {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}

/* Modal improvements */
.dark .modal-content {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}

.dark .modal-header {
    background-color: #111827 !important;
    color: #ffffff !important;
    border-bottom-color: #4b5563 !important;
}

.dark .modal-footer {
    background-color: #111827 !important;
    border-top-color: #4b5563 !important;
}

/* Card hover effects */
.dark .card:hover,
.dark .bg-white:hover {
    background-color: #374151 !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure strong contrast for important numbers and values */
.dark .metric-value,
.dark .statistic-value,
.dark [class*="text-"]:matches([class*="xl"], [class*="2xl"], [class*="3xl"], [class*="4xl"], [class*="5xl"]) {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Generic dark mode overrides for better visibility */
.dark .k-widget {
    color: #f9fafb !important;
}

.dark .k-icon,
.dark .k-svg-icon {
    color: #f9fafb !important;
}

/* Ensure text is visible in dark mode */
.dark .k-grid td,
.dark .k-grid th {
    color: #f9fafb !important;
}

/* Modal/Dialog dark mode */
.dark .k-dialog,
.dark .k-window {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #f9fafb !important;
}

.dark .k-dialog .k-dialog-titlebar,
.dark .k-window .k-window-titlebar {
    background-color: #111827 !important;
    color: #f9fafb !important;
    border-color: #374151 !important;
}

/* Scrollbars in dark mode */
.dark .k-scrollbar {
    background-color: #374151 !important;
}

.dark .k-scrollbar-thumb {
    background-color: #4b5563 !important;
}

.dark .k-scrollbar-thumb:hover {
    background-color: #6b7280 !important;
}

/* ============================================================
   Visual Refresh 2026 — Extended Dark Mode Coverage
   ============================================================ */

/* --- Global page background & text --- */
.dark body,
.dark .component-page {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.dark p, .dark span, .dark div, .dark label {
    color: var(--text-primary);
}

/* --- All Telerik form inputs --- */
.dark .k-textbox,
.dark .k-input,
.dark .k-input-inner,
.dark .k-textarea,
.dark .k-numerictextbox,
.dark .k-maskedtextbox,
.dark .k-datepicker,
.dark .k-datetimepicker,
.dark .k-timepicker,
.dark .k-combobox,
.dark .k-dropdown,
.dark .k-dropdownlist,
.dark .k-multiselect,
.dark .k-autocomplete,
.dark .k-colorpicker,
.dark .k-upload {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--telerik-border-color) !important;
}

.dark .k-input-inner {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

.dark .k-input:focus-within,
.dark .k-textbox:focus,
.dark .k-textarea:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
}

/* --- Telerik TabStrip --- */
.dark .k-tabstrip {
    background-color: transparent !important;
}

.dark .k-tabstrip-items {
    border-color: var(--telerik-border-color) !important;
}

.dark .k-tabstrip-items .k-item {
    color: var(--text-secondary) !important;
    background-color: transparent !important;
}

.dark .k-tabstrip-items .k-item:hover {
    color: var(--text-primary) !important;
}

.dark .k-tabstrip-items .k-item.k-active,
.dark .k-tabstrip-items .k-item.k-selected {
    color: var(--text-primary) !important;
    border-bottom-color: var(--accent-primary) !important;
    background-color: transparent !important;
}

.dark .k-tabstrip .k-content,
.dark .k-tabstrip-content,
.dark .k-tabstrip-content.k-active {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* --- Telerik PanelBar --- */
.dark .k-panelbar {
    background-color: transparent !important;
    border-color: var(--telerik-border-color) !important;
}

.dark .k-panelbar > .k-item {
    background-color: transparent !important;
    border-color: var(--telerik-border-color) !important;
}

.dark .k-panelbar > .k-item > .k-link,
.dark .k-link {
    color: var(--accent-primary) !important;
    background-color: transparent !important;
}

.dark .k-panelbar > .k-item > .k-link:hover {
    background-color: rgba(59, 130, 246, 0.08) !important;
}

.dark .k-panelbar .k-panelbar-content {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* --- Telerik TileLayout --- */
.dark .k-tilelayout {
    background-color: transparent !important;
}

.dark .k-tilelayout-item,
.dark .k-tilelayout-item.k-card {
    background-color: #0f172a !important;
    border-color: var(--telerik-border-color) !important;
    color: var(--text-primary) !important;
}

.dark .k-card-title {
    color: var(--accent-primary) !important;
}

/* --- Telerik Popup / List / DropDown --- */
.dark .k-popup,
.dark .k-list-container,
.dark .k-animation-container {
    background-color: var(--bg-card) !important;
    border-color: var(--telerik-border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.dark .k-list-item {
    color: var(--text-primary) !important;
}

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

.dark .k-list-item.k-selected {
    background-color: var(--accent-primary) !important;
    color: #ffffff !important;
}

/* Force dark mode on popup containers rendered at body level (inside dialogs etc.) */
.dark .k-animation-container .k-popup {
    background-color: #1e293b !important;
    border: 1px solid rgba(59, 130, 246, 0.15) !important;
}

.dark .k-animation-container .k-list-item,
.dark .k-animation-container .k-list-optionlabel {
    color: #f1f5f9 !important;
    background-color: transparent !important;
}

.dark .k-animation-container .k-list-item:hover,
.dark .k-animation-container .k-list-item.k-hover {
    background-color: #334155 !important;
}

.dark .k-animation-container .k-list-item.k-selected {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

.dark .k-animation-container .k-list {
    background-color: #1e293b !important;
}

/* --- Project header area --- */
.dark .project-header,
.dark [style*="background-color: white"],
.dark [style*="background: white"] {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* --- Application segment controls --- */
.dark .application-segment {
    color: var(--text-primary) !important;
}

.dark .application-label {
    color: var(--text-secondary) !important;
}

.dark .application-sub-label {
    color: var(--text-secondary) !important;
}

/* --- Inline style overrides for common patterns --- */
.dark [style*="color: black"],
.dark [style*="color:#000"],
.dark [style*="color: #000"] {
    color: var(--text-primary) !important;
}

.dark [style*="background-color: white"],
.dark [style*="background-color: #fff"],
.dark [style*="background: white"] {
    background-color: var(--bg-card) !important;
}

/* --- Checkboxes and switches --- */
.dark .k-checkbox-label,
.dark .k-radio-label {
    color: var(--text-primary) !important;
}

/* --- Telerik Notification --- */
.dark .k-notification {
    color: #ffffff !important;
}

/* --- Telerik Filter row --- */
.dark .k-grid-header .k-filtercell {
    background-color: var(--telerik-header-bg) !important;
}

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

/* --- Telerik Switch --- */
.dark .k-switch {
    background-color: var(--telerik-border-color) !important;
}

.dark .k-switch-on .k-switch-track {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

.dark .k-switch-off .k-switch-track {
    background-color: #475569 !important;
    border-color: #475569 !important;
}

.dark .k-switch-thumb {
    background-color: #f1f5f9 !important;
}

/* --- Telerik NumericTextBox spinner --- */
.dark .k-spinner-increase,
.dark .k-spinner-decrease {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--telerik-border-color) !important;
}

/* --- Inline style color overrides for dark mode --- */
.dark [style*="font-style: italic"][style*="color"] {
    color: var(--text-secondary) !important;
}

/* --- Syncfusion InPlaceEditor & components --- */
.dark .e-inplaceeditor .e-editable-value-wrapper .e-editable-value,
.dark .e-inplaceeditor .e-editable-value,
.dark .e-inplaceeditor-tip .e-editable-value,
.dark .e-editable-value {
    color: var(--text-primary) !important;
}

.dark .e-inplaceeditor,
.dark .e-inplaceeditor .e-editable-value-wrapper {
    color: var(--text-primary) !important;
}

.dark .e-input-group,
.dark .e-input-group .e-input,
.dark .e-float-input,
.dark .e-float-input input,
.dark .e-textbox {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--telerik-border-color) !important;
}

.dark .e-input-group:not(.e-disabled):not(.e-float-icon-left)::before,
.dark .e-input-group:not(.e-disabled):not(.e-float-icon-left)::after {
    background-color: var(--accent-primary) !important;
}

.dark .e-btn,
.dark .e-css.e-btn {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--telerik-border-color) !important;
}

.dark .e-btn.e-primary,
.dark .e-css.e-btn.e-primary {
    background-color: var(--accent-primary) !important;
    color: #ffffff !important;
}

.dark .e-tooltip-wrap {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--telerik-border-color) !important;
}

.dark .e-speech-recognition {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* --- Project header — force text visibility --- */
.dark .component-page div[style*="display: flex"] {
    color: var(--text-primary);
}

/* --- Telerik Charts (SVG-based) --- */
.dark .k-chart,
.dark .k-chart-surface,
.dark .k-chart .k-chart-surface {
    background-color: transparent !important;
}

.dark .k-chart .k-chart-surface svg {
    background-color: transparent !important;
}

.dark .k-chart text,
.dark .k-chart .k-chart-surface text {
    fill: var(--text-secondary) !important;
}

.dark .k-chart .k-chart-area {
    background: transparent !important;
}

/* Force ALL white SVG fills in charts to transparent */
.dark .k-chart svg path[fill="#fff"],
.dark .k-chart svg path[fill="#ffffff"],
.dark .k-chart svg path[fill="white"],
.dark .k-chart svg rect[fill="#fff"],
.dark .k-chart svg rect[fill="#ffffff"],
.dark .k-chart svg rect[fill="white"] {
    fill: transparent !important;
}

/* Chart axis lines and grid */
.dark .k-chart .k-chart-surface line,
.dark .k-chart .k-chart-surface path[stroke] {
    stroke: rgba(255, 255, 255, 0.1) !important;
}

/* --- Dashboard tile content area --- */
.dark .k-tilelayout-item,
.dark .k-tilelayout-item.k-card,
.dark .k-tilelayout-item .k-card-body,
.dark .k-tilelayout-item-body,
.dark .k-tilelayout-item > *,
.dark .tile-chart-container,
.dark .tile-chart {
    background-color: #0f172a !important;
    color: var(--text-primary) !important;
}

/* Force ALL elements inside tiles to inherit dark bg */
.dark .k-tilelayout-item div,
.dark .k-tilelayout-item span,
.dark .k-tilelayout-item table,
.dark .k-tilelayout-item td,
.dark .k-tilelayout-item th,
.dark .k-tilelayout-item .k-card-header,
.dark .k-tilelayout-item-header {
    background-color: transparent !important;
}

/* --- Donut/Pie chart legend --- */
.dark .k-chart .k-chart-legend text {
    fill: var(--text-primary) !important;
}

/* --- Catch-all: force dark bg on remaining Telerik light elements --- */
.dark .k-toolbar,
.dark .k-grid-toolbar,
.dark .k-table-thead,
.dark .k-grid-header-wrap,
.dark .k-columnmenu-item,
.dark .k-column-menu,
.dark .k-filter-menu,
.dark .k-filterable,
.dark .k-grid-filter-menu,
.dark .k-animation-container-shown,
.dark .k-child-animation-container,
.dark .k-menu,
.dark .k-menu-group,
.dark .k-menu-item,
.dark .k-context-menu,
.dark .k-pager,
.dark .k-pager-wrap,
.dark .k-tabstrip-wrapper,
.dark .k-tabstrip-content,
.dark .k-tabstrip-content.k-active,
.dark .k-detail-cell,
.dark .k-master-row .k-detail-cell,
.dark .k-hierarchy-cell,
.dark .k-grouping-header,
.dark .k-chip,
.dark .k-chip-list,
.dark .k-upload,
.dark .k-upload-files,
.dark .k-file,
.dark .k-dropzone,
.dark .k-scheduler,
.dark .k-tooltip,
.dark .k-tooltip-content {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--telerik-border-color) !important;
}

/* --- Telerik grid sub-elements that inherit white --- */
.dark .k-grid .k-toolbar {
    background-color: var(--telerik-header-bg) !important;
}

.dark .k-grid .k-table-thead,
.dark .k-grid .k-table-thead th {
    background-color: var(--telerik-header-bg) !important;
    color: var(--text-primary) !important;
}

.dark .k-grid .k-filter-row,
.dark .k-grid .k-filter-row td {
    background-color: var(--telerik-header-bg) !important;
}

.dark .k-grid .k-filter-row .k-textbox,
.dark .k-grid .k-filter-row .k-input {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* --- Browser scrollbar --- */
.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark ::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}