/**
 * Structra Theme
 * ==============
 *
 * This file applies the Structra design tokens to override Syncfusion's base theme
 * and establishes global styling for the application.
 *
 * Sections:
 * 1. Global Styles
 * 2. Typography
 * 3. Syncfusion Component Overrides
 */

/* ==========================================================================
   1. GLOBAL STYLES
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body,
.structra-body {
    margin: 0;
    padding: 0;
    font-family: var(--structra-font-family-base);
    font-size: var(--structra-font-size-base);
    font-weight: var(--structra-font-weight-regular);
    line-height: var(--structra-line-height-normal);
    color: var(--structra-text-primary);
    background-color: var(--structra-bg-body);
    min-height: 100vh;
}

/* Focus visible styles for accessibility */
:focus-visible {
    outline: 2px solid var(--structra-accent-500);
    outline-offset: 2px;
}

/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* Selection styling */
::selection {
    background-color: var(--structra-accent-100);
    color: var(--structra-accent-900);
}

[data-theme="dark"] ::selection {
    background-color: rgba(249, 115, 22, 0.3);
    color: var(--structra-text-primary);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--structra-bg-subtle);
}

::-webkit-scrollbar-thumb {
    background: var(--structra-neutral-400);
    border-radius: var(--structra-radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--structra-neutral-500);
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--structra-bg-surface);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--structra-neutral-600);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--structra-neutral-500);
}

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--structra-font-family-display);
    font-weight: var(--structra-font-weight-semibold);
    line-height: var(--structra-line-height-tight);
    color: var(--structra-text-primary);
}

h1 {
    font-size: var(--structra-font-size-4xl);
    letter-spacing: var(--structra-letter-spacing-tight);
}

h2 {
    font-size: var(--structra-font-size-3xl);
    letter-spacing: var(--structra-letter-spacing-tight);
}

h3 {
    font-size: var(--structra-font-size-2xl);
}

h4 {
    font-size: var(--structra-font-size-xl);
}

h5 {
    font-size: var(--structra-font-size-lg);
}

h6 {
    font-size: var(--structra-font-size-base);
}

p {
    margin: 0 0 var(--structra-spacing-4);
    line-height: var(--structra-line-height-relaxed);
}

a {
    color: var(--structra-text-link);
    text-decoration: none;
    transition: var(--structra-transition-colors);
}

a:hover {
    color: var(--structra-text-link-hover);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Nav menu link overrides
   Blazor CSS isolation does not scope child-component rendered <a> tags
   (e.g. NavLink), so the global a:hover underline bleeds through.
   These rules ensure nav links never show an underline on hover and instead
   display a subtle background highlight for visual feedback.
   Works in both light and dark themes via --structra-interactive-hover.
   --------------------------------------------------------------------------- */
.structra-nav a,
.structra-nav a:hover,
.structra-nav a:focus,
.structra-nav a:visited {
    text-decoration: none;
}

.structra-nav a.structra-nav__link,
.structra-nav a.structra-nav__sublink {
    border-radius: var(--structra-radius-md);
}

.structra-nav a.structra-nav__link:hover,
.structra-nav a.structra-nav__sublink:hover {
    color: var(--structra-text-primary);
    background-color: var(--structra-interactive-hover);
    text-decoration: none;
}

[data-theme="dark"] .structra-nav a.structra-nav__link:hover,
[data-theme="dark"] .structra-nav a.structra-nav__sublink:hover {
    color: #f1f5f9;
    background-color: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}

small {
    font-size: var(--structra-font-size-sm);
}

code {
    font-family: var(--structra-font-family-mono);
    font-size: 0.875em;
    padding: var(--structra-spacing-0-5) var(--structra-spacing-1);
    background-color: var(--structra-bg-subtle);
    border-radius: var(--structra-radius-sm);
}

/* ==========================================================================
   3. SYNCFUSION COMPONENT OVERRIDES
   ========================================================================== */

/* --- Buttons --- */
.e-btn,
.e-control.e-btn {
    font-family: var(--structra-font-family-base);
    font-weight: var(--structra-font-weight-medium);
    border-radius: var(--structra-radius-md);
    transition: var(--structra-transition-all);
}

.e-btn.e-primary,
.e-control.e-btn.e-primary {
    background-color: var(--structra-accent-500);
    border-color: var(--structra-accent-500);
    color: #ffffff;
}

.e-btn.e-primary:hover,
.e-control.e-btn.e-primary:hover {
    background-color: var(--structra-accent-600);
    border-color: var(--structra-accent-600);
}

.e-btn.e-primary:focus,
.e-control.e-btn.e-primary:focus {
    box-shadow: var(--structra-focus-ring);
}

.e-btn.e-success {
    background-color: var(--structra-success);
    border-color: var(--structra-success);
}

.e-btn.e-success:hover {
    background-color: var(--structra-success-dark);
    border-color: var(--structra-success-dark);
}

.e-btn.e-warning {
    background-color: var(--structra-warning);
    border-color: var(--structra-warning);
}

.e-btn.e-warning:hover {
    background-color: var(--structra-warning-dark);
    border-color: var(--structra-warning-dark);
}

.e-btn.e-danger {
    background-color: var(--structra-error);
    border-color: var(--structra-error);
}

.e-btn.e-danger:hover {
    background-color: var(--structra-error-dark);
    border-color: var(--structra-error-dark);
}

/* --- Inputs --- */
.e-input-group,
.e-input-group.e-control-wrapper {
    border-radius: var(--structra-radius-md);
    border-color: var(--structra-input-border);
    background-color: var(--structra-input-bg);
    transition: var(--structra-transition-all);
}

.e-input-group:not(.e-disabled):hover,
.e-input-group.e-control-wrapper:not(.e-disabled):hover {
    border-color: var(--structra-neutral-400);
}

.e-input-group.e-input-focus,
.e-input-group.e-control-wrapper.e-input-focus {
    border-color: var(--structra-input-border-focus);
    box-shadow: var(--structra-focus-ring);
}

.e-input,
.e-control .e-input {
    font-family: var(--structra-font-family-base);
    font-size: var(--structra-font-size-sm);
    color: var(--structra-text-primary);
}

.e-input::placeholder {
    color: var(--structra-input-placeholder);
}

.e-float-input label.e-float-text,
.e-float-input.e-control-wrapper label.e-float-text {
    font-family: var(--structra-font-family-base);
    color: var(--structra-text-secondary);
}

/* --- Dropdowns --- */
.e-dropdown-popup,
.e-dropdownbase.e-popup {
    border-radius: var(--structra-radius-md);
    box-shadow: var(--structra-shadow-lg);
    border: 1px solid var(--structra-border-default);
    background-color: var(--structra-bg-surface);
}

.e-list-item {
    font-family: var(--structra-font-family-base);
    font-size: var(--structra-font-size-sm);
    color: var(--structra-text-primary);
    transition: var(--structra-transition-colors);
}

.e-list-item:hover,
.e-list-item.e-hover {
    background-color: var(--structra-interactive-hover);
}

.e-list-item.e-active {
    background-color: var(--structra-interactive-selected);
    color: var(--structra-accent-600);
}

/* --- Grid/DataGrid --- */
.e-grid {
    font-family: var(--structra-font-family-base);
    border-radius: var(--structra-radius-lg);
    border-color: var(--structra-border-default);
    overflow: hidden;
}

.e-grid .e-gridheader {
    background-color: var(--structra-table-header-bg);
    border-color: var(--structra-table-border);
}

.e-grid .e-headercell {
    font-weight: var(--structra-font-weight-semibold);
    font-size: var(--structra-font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--structra-letter-spacing-wide);
    color: var(--structra-text-secondary);
    background-color: transparent;
}

.e-grid .e-rowcell {
    font-size: var(--structra-font-size-sm);
    color: var(--structra-text-primary);
    border-color: var(--structra-table-border);
}

.e-grid .e-row:hover .e-rowcell {
    background-color: var(--structra-table-row-hover);
}

.e-grid .e-row.e-altrow {
    background-color: var(--structra-bg-muted);
}

.e-grid .e-selectionbackground {
    background-color: var(--structra-table-row-selected);
}

/* --- Cards --- */
.e-card {
    font-family: var(--structra-font-family-base);
    background-color: var(--structra-card-bg);
    border: 1px solid var(--structra-card-border);
    border-radius: var(--structra-card-radius);
    box-shadow: var(--structra-card-shadow);
}

.e-card .e-card-header {
    padding: var(--structra-spacing-4) var(--structra-card-padding);
    border-bottom: 1px solid var(--structra-border-default);
}

.e-card .e-card-header-title {
    font-size: var(--structra-font-size-lg);
    font-weight: var(--structra-font-weight-semibold);
    color: var(--structra-text-primary);
}

.e-card .e-card-content {
    padding: var(--structra-card-padding);
}

/* --- Dialogs --- */
.e-dialog {
    font-family: var(--structra-font-family-base);
    border-radius: var(--structra-dialog-radius);
    box-shadow: var(--structra-dialog-shadow);
    background-color: var(--structra-dialog-bg);
    border: 1px solid var(--structra-border-default);
}

.e-dialog .e-dlg-header-content {
    padding: var(--structra-spacing-4) var(--structra-spacing-6);
    border-bottom: 1px solid var(--structra-border-default);
}

.e-dialog .e-dlg-header {
    font-size: var(--structra-font-size-lg);
    font-weight: var(--structra-font-weight-semibold);
    color: var(--structra-text-primary);
}

.e-dialog .e-dlg-content {
    padding: var(--structra-spacing-6);
    color: var(--structra-text-primary);
}

.e-dialog .e-footer-content {
    padding: var(--structra-spacing-4) var(--structra-spacing-6);
    border-top: 1px solid var(--structra-border-default);
    background-color: var(--structra-bg-muted);
}

.e-dlg-overlay {
    background-color: var(--structra-dialog-backdrop);
}

/* --- Toast/Notifications --- */
.e-toast {
    font-family: var(--structra-font-family-base);
    border-radius: var(--structra-radius-lg);
    box-shadow: var(--structra-shadow-lg);
}

.e-toast .e-toast-message .e-toast-title {
    font-weight: var(--structra-font-weight-semibold);
}

.e-toast.e-toast-success {
    background-color: var(--structra-success-light);
    border-left: 4px solid var(--structra-success);
}

.e-toast.e-toast-warning {
    background-color: var(--structra-warning-light);
    border-left: 4px solid var(--structra-warning);
}

.e-toast.e-toast-danger {
    background-color: var(--structra-error-light);
    border-left: 4px solid var(--structra-error);
}

.e-toast.e-toast-info {
    background-color: var(--structra-info-light);
    border-left: 4px solid var(--structra-info);
}

/* --- Sidebar/Navigation --- */
.e-sidebar {
    background-color: var(--structra-bg-surface);
    border-right: 1px solid var(--structra-border-default);
}

.e-sidebar .e-sidebar-header {
    padding: var(--structra-spacing-4);
    border-bottom: 1px solid var(--structra-border-default);
}

/* --- Tabs --- */
.e-tab .e-tab-header {
    border-bottom: 1px solid var(--structra-border-default);
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    font-family: var(--structra-font-family-base);
    font-weight: var(--structra-font-weight-medium);
    font-size: var(--structra-font-size-sm);
    color: var(--structra-text-secondary);
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: var(--structra-accent-600);
}

.e-tab .e-tab-header .e-indicator {
    background-color: var(--structra-accent-500);
}

/* --- Spinner --- */
.e-spinner-pane .e-spinner-inner .e-spin-material {
    stroke: var(--structra-accent-500);
}

/* --- Tooltips --- */
.e-tooltip-wrap {
    font-family: var(--structra-font-family-base);
    font-size: var(--structra-font-size-xs);
    border-radius: var(--structra-radius-md);
    box-shadow: var(--structra-shadow-md);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }

    h1 {
        font-size: var(--structra-font-size-3xl);
    }

    h2 {
        font-size: var(--structra-font-size-2xl);
    }

    h3 {
        font-size: var(--structra-font-size-xl);
    }
}

/* ==========================================================================
   4. DARK MODE OVERRIDES
   ========================================================================== */

/* Dark mode - ensure all text uses light colors */
[data-theme="dark"] body,
[data-theme="dark"] .structra-body {
    color: var(--structra-text-primary);
    background-color: var(--structra-bg-body);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--structra-text-primary);
}

[data-theme="dark"] p {
    color: var(--structra-text-primary);
}

[data-theme="dark"] a {
    color: var(--structra-text-link);
}

[data-theme="dark"] a:hover {
    color: var(--structra-text-link-hover);
}

/* Dark mode - Syncfusion component overrides */
[data-theme="dark"] .e-input,
[data-theme="dark"] .e-control .e-input,
[data-theme="dark"] .e-textbox {
    color: var(--structra-text-primary);
    background-color: var(--structra-input-bg);
}

[data-theme="dark"] .e-input::placeholder,
[data-theme="dark"] .e-textbox::placeholder {
    color: var(--structra-input-placeholder);
}

[data-theme="dark"] .e-input-group,
[data-theme="dark"] .e-input-group.e-control-wrapper {
    background-color: var(--structra-input-bg);
    border-color: var(--structra-input-border);
}

[data-theme="dark"] .e-input-group:not(.e-disabled):hover,
[data-theme="dark"] .e-input-group.e-control-wrapper:not(.e-disabled):hover {
    border-color: var(--structra-border-strong);
}

[data-theme="dark"] .e-input-group.e-input-focus,
[data-theme="dark"] .e-input-group.e-control-wrapper.e-input-focus {
    border-color: var(--structra-input-border-focus);
    box-shadow: var(--structra-focus-ring);
}

/* Dark mode - Labels and text */
[data-theme="dark"] .e-float-input label.e-float-text,
[data-theme="dark"] .e-float-input.e-control-wrapper label.e-float-text {
    color: var(--structra-text-secondary);
}

[data-theme="dark"] .structra-label {
    color: var(--structra-text-primary);
}

[data-theme="dark"] .structra-helper-text {
    color: var(--structra-text-secondary);
}

/* Dark mode - Buttons */
[data-theme="dark"] .e-btn,
[data-theme="dark"] .e-control.e-btn {
    color: var(--structra-text-primary);
}

[data-theme="dark"] .e-btn:not(.e-primary):not(.e-success):not(.e-warning):not(.e-danger) {
    background-color: var(--structra-bg-surface-raised);
    border-color: var(--structra-border-default);
}

[data-theme="dark"] .structra-button--secondary {
    color: var(--structra-text-primary);
    background-color: var(--structra-bg-surface-raised);
    border-color: var(--structra-border-default);
}

[data-theme="dark"] .structra-button--tertiary {
    color: var(--structra-text-link);
}

/* Dark mode - Cards */
[data-theme="dark"] .e-card,
[data-theme="dark"] .structra-card {
    background-color: var(--structra-card-bg);
    border-color: var(--structra-card-border);
}

[data-theme="dark"] .e-card .e-card-header-title,
[data-theme="dark"] .structra-card__header-title {
    color: var(--structra-text-primary);
}

[data-theme="dark"] .structra-card__header-subtitle {
    color: var(--structra-text-secondary);
}

[data-theme="dark"] .structra-card__footer {
    background-color: var(--structra-bg-surface-raised);
    border-color: var(--structra-border-subtle);
}

/* Dark mode - Grid/Table */
[data-theme="dark"] .e-grid {
    background-color: var(--structra-bg-surface);
    border-color: var(--structra-border-default);
}

[data-theme="dark"] .e-grid .e-gridheader {
    background-color: var(--structra-table-header-bg);
}

[data-theme="dark"] .e-grid .e-headercell {
    color: var(--structra-text-secondary);
    background-color: transparent;
}

[data-theme="dark"] .e-grid .e-rowcell {
    color: var(--structra-text-primary);
    background-color: var(--structra-bg-surface);
    border-color: var(--structra-table-border);
}

[data-theme="dark"] .e-grid .e-row:hover .e-rowcell {
    background-color: var(--structra-table-row-hover);
}

[data-theme="dark"] .e-grid .e-row.e-altrow .e-rowcell {
    background-color: var(--structra-bg-muted);
}

/* Dark mode - Dialogs */
[data-theme="dark"] .e-dialog {
    background-color: var(--structra-dialog-bg);
    border-color: var(--structra-border-default);
}

[data-theme="dark"] .e-dialog .e-dlg-header {
    color: var(--structra-text-primary);
}

[data-theme="dark"] .e-dialog .e-dlg-content {
    color: var(--structra-text-primary);
    background-color: var(--structra-dialog-bg);
}

[data-theme="dark"] .e-dialog .e-dlg-header-content {
    background-color: var(--structra-dialog-bg);
    border-color: var(--structra-border-default);
}

[data-theme="dark"] .e-dialog .e-footer-content {
    background-color: var(--structra-bg-surface-raised);
    border-color: var(--structra-border-default);
}

[data-theme="dark"] .e-dlg-overlay {
    background-color: var(--structra-dialog-backdrop);
}

/* Dark mode - Dialog close button */
[data-theme="dark"] .e-dialog .e-dlg-closeicon-btn {
    color: var(--structra-text-secondary);
}

[data-theme="dark"] .e-dialog .e-dlg-closeicon-btn:hover {
    background-color: var(--structra-interactive-hover);
    color: var(--structra-text-primary);
}

/* Dark mode - Toast notifications */
[data-theme="dark"] .e-toast {
    background-color: var(--structra-bg-surface-raised);
    color: var(--structra-text-primary);
    border-color: var(--structra-border-default);
}

[data-theme="dark"] .e-toast .e-toast-message .e-toast-title {
    color: var(--structra-text-primary);
}

[data-theme="dark"] .e-toast .e-toast-message .e-toast-content {
    color: var(--structra-text-secondary);
}

[data-theme="dark"] .e-toast.e-toast-success {
    background-color: var(--structra-success-light);
    border-left-color: var(--structra-success);
}

[data-theme="dark"] .e-toast.e-toast-warning {
    background-color: var(--structra-warning-light);
    border-left-color: var(--structra-warning);
}

[data-theme="dark"] .e-toast.e-toast-danger {
    background-color: var(--structra-error-light);
    border-left-color: var(--structra-error);
}

[data-theme="dark"] .e-toast.e-toast-info {
    background-color: var(--structra-info-light);
    border-left-color: var(--structra-info);
}

/* Dark mode toast text color - override semantic backgrounds */
[data-theme="dark"] .e-toast.e-toast-success .e-toast-message .e-toast-title,
[data-theme="dark"] .e-toast.e-toast-success .e-toast-message .e-toast-content {
    color: #86efac;
}

[data-theme="dark"] .e-toast.e-toast-warning .e-toast-message .e-toast-title,
[data-theme="dark"] .e-toast.e-toast-warning .e-toast-message .e-toast-content {
    color: #fcd34d;
}

[data-theme="dark"] .e-toast.e-toast-danger .e-toast-message .e-toast-title,
[data-theme="dark"] .e-toast.e-toast-danger .e-toast-message .e-toast-content {
    color: #fca5a5;
}

[data-theme="dark"] .e-toast.e-toast-info .e-toast-message .e-toast-title,
[data-theme="dark"] .e-toast.e-toast-info .e-toast-message .e-toast-content {
    color: #93c5fd;
}

/* Dark mode - Dropdown/Popup */
[data-theme="dark"] .e-dropdown-popup,
[data-theme="dark"] .e-dropdownbase.e-popup {
    background-color: var(--structra-bg-surface);
    border-color: var(--structra-border-default);
}

[data-theme="dark"] .e-list-item {
    color: var(--structra-text-primary);
}

[data-theme="dark"] .e-list-item:hover,
[data-theme="dark"] .e-list-item.e-hover {
    background-color: var(--structra-interactive-hover);
}

[data-theme="dark"] .e-list-item.e-active {
    background-color: var(--structra-interactive-selected);
    color: #fb923c;
}

/* Dark mode - Tabs */
[data-theme="dark"] .e-tab .e-tab-header {
    background-color: var(--structra-bg-surface);
    border-color: var(--structra-border-default);
}

[data-theme="dark"] .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    color: var(--structra-text-secondary);
}

[data-theme="dark"] .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: #fb923c;
}

[data-theme="dark"] .e-tab .e-content {
    background-color: var(--structra-bg-surface);
    color: var(--structra-text-primary);
}

/* Dark mode - Tooltips */
[data-theme="dark"] .e-tooltip-wrap {
    background-color: var(--structra-bg-surface-raised);
    color: var(--structra-text-primary);
    border-color: var(--structra-border-default);
}

/* Dark mode - Badges */
[data-theme="dark"] .structra-badge--default {
    background-color: var(--structra-bg-surface-raised);
    color: var(--structra-text-primary);
}

[data-theme="dark"] .structra-badge--primary {
    background-color: rgba(249, 115, 22, 0.2);
    color: #fdba74;
}

[data-theme="dark"] .structra-badge--success {
    background-color: var(--structra-success-light);
    color: #86efac;
}

[data-theme="dark"] .structra-badge--warning {
    background-color: var(--structra-warning-light);
    color: #fcd34d;
}

[data-theme="dark"] .structra-badge--error {
    background-color: var(--structra-error-light);
    color: #fca5a5;
}

[data-theme="dark"] .structra-badge--info {
    background-color: var(--structra-info-light);
    color: #93c5fd;
}

/* Dark mode - Alerts */
[data-theme="dark"] .structra-alert--info {
    background-color: var(--structra-info-light);
    border-color: var(--structra-info);
    color: #93c5fd;
}

[data-theme="dark"] .structra-alert--success {
    background-color: var(--structra-success-light);
    border-color: var(--structra-success);
    color: #86efac;
}

[data-theme="dark"] .structra-alert--warning {
    background-color: var(--structra-warning-light);
    border-color: var(--structra-warning);
    color: #fcd34d;
}

[data-theme="dark"] .structra-alert--error {
    background-color: var(--structra-error-light);
    border-color: var(--structra-error);
    color: #fca5a5;
}

/* Dark mode - Empty state */
[data-theme="dark"] .structra-empty-state__icon {
    background-color: var(--structra-bg-surface-raised);
    color: var(--structra-text-secondary);
}

[data-theme="dark"] .structra-empty-state__title {
    color: var(--structra-text-primary);
}

[data-theme="dark"] .structra-empty-state__description {
    color: var(--structra-text-secondary);
}

/* Dark mode - Loader */
[data-theme="dark"] .structra-loader__spinner {
    border-color: var(--structra-border-default);
    border-top-color: #fb923c;
}

[data-theme="dark"] .structra-loader__text {
    color: var(--structra-text-secondary);
}

/* Dark mode - Skeleton loader */
[data-theme="dark"] .structra-skeleton {
    background: linear-gradient(
        90deg,
        var(--structra-bg-surface-raised) 25%,
        var(--structra-bg-muted) 50%,
        var(--structra-bg-surface-raised) 75%
    );
    background-size: 200% 100%;
}

/* Dark mode - Progress bar */
[data-theme="dark"] .structra-progress {
    background-color: var(--structra-bg-surface-raised);
}

/* Dark mode - Code blocks */
[data-theme="dark"] code {
    background-color: var(--structra-bg-surface-raised);
    color: #f472b6;
}

/* Dark mode - Dividers */
[data-theme="dark"] .structra-divider {
    border-color: var(--structra-border-default);
}

/* Dark mode - Avatar */
[data-theme="dark"] .structra-avatar {
    background-color: var(--structra-primary-700);
}

[data-theme="dark"] .structra-avatar-group .structra-avatar {
    border-color: var(--structra-bg-surface);
}

/* ==========================================================================
   5. DARK MODE INPUT TEXT CONTRAST FIXES
   ========================================================================== */

/* TextBox input text color */
[data-theme="dark"] .e-textbox,
[data-theme="dark"] .e-input,
[data-theme="dark"] .e-input-group input,
[data-theme="dark"] .e-input-group .e-input,
[data-theme="dark"] .e-input-group input.e-input,
[data-theme="dark"] .e-control-wrapper input,
[data-theme="dark"] .e-float-input input,
[data-theme="dark"] .e-float-input.e-input-group input,
[data-theme="dark"] input.e-textbox,
[data-theme="dark"] textarea.e-textbox,
[data-theme="dark"] .e-multi-line-input textarea {
    color: #f1f5f9 !important;
    background-color: var(--structra-input-bg) !important;
    -webkit-text-fill-color: #f1f5f9;
}

/* DropDownList text color */
[data-theme="dark"] .e-ddl .e-input-group input.e-input,
[data-theme="dark"] .e-dropdownlist .e-input,
[data-theme="dark"] .e-dropdownlist .e-input-group input,
[data-theme="dark"] .e-ddl.e-input-group input.e-input,
[data-theme="dark"] .e-ddl.e-input-group .e-input,
[data-theme="dark"] span.e-input-group input.e-dropdownlist {
    color: #f1f5f9 !important;
    -webkit-text-fill-color: #f1f5f9;
}

/* ComboBox, AutoComplete text color */
[data-theme="dark"] .e-combobox .e-input,
[data-theme="dark"] .e-autocomplete .e-input,
[data-theme="dark"] .e-multiselect .e-input {
    color: #f1f5f9 !important;
    -webkit-text-fill-color: #f1f5f9;
}

/* Multiselect chip text */
[data-theme="dark"] .e-multiselect .e-chips,
[data-theme="dark"] .e-multiselect .e-chips-wrapper .e-chipcontent {
    color: #f1f5f9 !important;
}

/* DatePicker, TimePicker, DateTimePicker text */
[data-theme="dark"] .e-datepicker input.e-input,
[data-theme="dark"] .e-timepicker input.e-input,
[data-theme="dark"] .e-datetimepicker input.e-input,
[data-theme="dark"] .e-daterangepicker input.e-input {
    color: #f1f5f9 !important;
    -webkit-text-fill-color: #f1f5f9;
}

/* NumericTextBox text */
[data-theme="dark"] .e-numerictextbox input.e-input,
[data-theme="dark"] .e-numeric input.e-input {
    color: #f1f5f9 !important;
    -webkit-text-fill-color: #f1f5f9;
}

/* MaskedTextBox text */
[data-theme="dark"] .e-maskedtextbox input.e-input {
    color: #f1f5f9 !important;
    -webkit-text-fill-color: #f1f5f9;
}

/* Placeholder text in dark mode */
[data-theme="dark"] .e-input::placeholder,
[data-theme="dark"] .e-textbox::placeholder,
[data-theme="dark"] input.e-input::placeholder,
[data-theme="dark"] .e-input-group input::placeholder {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8;
}

/* Float label text */
[data-theme="dark"] .e-float-input label.e-float-text,
[data-theme="dark"] .e-float-input.e-control-wrapper label.e-float-text,
[data-theme="dark"] .e-float-input.e-input-focus label.e-float-text,
[data-theme="dark"] .e-float-input.e-input-group label.e-float-text {
    color: #cbd5e1 !important;
}

/* Float label when focused */
[data-theme="dark"] .e-float-input.e-input-focus label.e-float-text,
[data-theme="dark"] .e-float-input.e-input-group.e-input-focus label.e-float-text {
    color: #fb923c !important;
}

/* Input icons color */
[data-theme="dark"] .e-input-group .e-input-group-icon,
[data-theme="dark"] .e-input-group.e-control-wrapper .e-input-group-icon,
[data-theme="dark"] .e-input-group .e-clear-icon,
[data-theme="dark"] .e-ddl .e-input-group-icon,
[data-theme="dark"] .e-datepicker .e-input-group-icon,
[data-theme="dark"] .e-timepicker .e-input-group-icon {
    color: #94a3b8 !important;
}

[data-theme="dark"] .e-input-group .e-input-group-icon:hover,
[data-theme="dark"] .e-input-group.e-control-wrapper .e-input-group-icon:hover {
    color: #f1f5f9 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dropdown popup list items */
[data-theme="dark"] .e-popup .e-list-item,
[data-theme="dark"] .e-ddl-popup .e-list-item,
[data-theme="dark"] .e-dropdownbase .e-list-item,
[data-theme="dark"] .e-popup.e-ddl .e-list-item {
    color: #f1f5f9 !important;
    background-color: transparent;
}

[data-theme="dark"] .e-popup .e-list-item:hover,
[data-theme="dark"] .e-ddl-popup .e-list-item:hover,
[data-theme="dark"] .e-popup .e-list-item.e-hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .e-popup .e-list-item.e-active,
[data-theme="dark"] .e-ddl-popup .e-list-item.e-active {
    background-color: rgba(249, 115, 22, 0.2) !important;
    color: #fdba74 !important;
}

/* Popup backgrounds */
[data-theme="dark"] .e-popup,
[data-theme="dark"] .e-ddl-popup,
[data-theme="dark"] .e-dropdown-popup,
[data-theme="dark"] .e-datepicker.e-popup,
[data-theme="dark"] .e-timepicker.e-popup,
[data-theme="dark"] .e-datetimepicker.e-popup {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

/* Calendar popup text */
[data-theme="dark"] .e-calendar .e-header .e-title,
[data-theme="dark"] .e-calendar .e-header .e-icon-container,
[data-theme="dark"] .e-calendar .e-content td,
[data-theme="dark"] .e-calendar .e-content span.e-day {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .e-calendar .e-content td:hover span.e-day,
[data-theme="dark"] .e-calendar .e-content td.e-focused-date span.e-day {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .e-calendar .e-content td.e-selected span.e-day {
    background-color: #f97316 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .e-calendar .e-content td.e-other-month span.e-day {
    color: #64748b !important;
}

/* Switch component text */
[data-theme="dark"] .e-switch-wrapper .e-switch-on,
[data-theme="dark"] .e-switch-wrapper .e-switch-off {
    color: #f1f5f9 !important;
}

/* Checkbox and radio labels */
[data-theme="dark"] .e-checkbox-wrapper .e-label,
[data-theme="dark"] .e-radio-wrapper .e-label {
    color: #f1f5f9 !important;
}

/* Slider values */
[data-theme="dark"] .e-slider-tooltip,
[data-theme="dark"] .e-slider .e-range-value {
    color: #f1f5f9 !important;
}

/* Rich Text Editor */
[data-theme="dark"] .e-richtexteditor .e-rte-content,
[data-theme="dark"] .e-richtexteditor .e-content {
    color: #f1f5f9 !important;
    background-color: var(--structra-input-bg) !important;
}

/* File uploader */
[data-theme="dark"] .e-upload .e-file-name,
[data-theme="dark"] .e-upload .e-file-type,
[data-theme="dark"] .e-upload .e-file-size {
    color: #f1f5f9 !important;
}

/* Color picker input */
[data-theme="dark"] .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker {
    color: #f1f5f9 !important;
}

/* Ensure all form labels are visible */
[data-theme="dark"] label,
[data-theme="dark"] .structra-label,
[data-theme="dark"] .e-label {
    color: #f1f5f9;
}