:root {
    --app-font-sans: Arial, sans-serif;
    --app-color-bg: #f4f7fb;
    --app-color-surface: #ffffff;
    --app-color-surface-alt: #f8fafc;
    --app-color-text: #1f2937;
    --app-color-text-muted: #4b5563;
    --app-color-primary: #1e4d8f;
    --app-color-primary-strong: #173b6d;
    --app-color-accent: #0ea5e9;
    --app-color-border: #d1d9e6;
    --app-color-success: #1f9d55;
    --app-color-warning: #b7791f;
    --app-color-danger: #c53030;
    --app-focus-ring: 0 0 0 3px rgba(14, 165, 233, 0.38);
    --app-radius-sm: 6px;
    --app-radius-md: 10px;
    --app-radius-lg: 14px;
    --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
    --app-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08);
    --app-space-1: 0.25rem;
    --app-space-2: 0.5rem;
    --app-space-3: 0.75rem;
    --app-space-4: 1rem;
    --app-space-5: 1.25rem;
    --app-space-6: 1.5rem;
}

:root[data-theme="dark"] {
    --app-color-bg: #0f172a;
    --app-color-surface: #1a2333;
    --app-color-surface-alt: #263246;
    --app-color-text: #e5e7eb;
    --app-color-text-muted: #9ca3af;
    --app-color-primary: #60a5fa;
    --app-color-primary-strong: #93c5fd;
    --app-color-accent: #22d3ee;
    --app-color-border: #334155;
    --app-color-success: #34d399;
    --app-color-warning: #f59e0b;
    --app-color-danger: #f87171;
    --app-focus-ring: 0 0 0 3px rgba(34, 211, 238, 0.38);
}

html,
body {
    font-family: var(--app-font-sans);
    background: var(--app-color-bg);
    color: var(--app-color-text);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: var(--app-color-bg) !important;
    color: var(--app-color-text) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .app-card,
html[data-theme="dark"] .app-panel {
    background-color: var(--app-color-surface) !important;
    border-color: var(--app-color-border) !important;
    color: var(--app-color-text) !important;
}

html[data-theme="dark"] .table,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .user-display,
html[data-theme="dark"] .user-display-selected {
    background-color: var(--app-color-surface) !important;
    color: var(--app-color-text) !important;
    border-color: var(--app-color-border) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: #0b1220 !important;
    color: var(--app-color-text) !important;
    border-color: var(--app-color-border) !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item a,
html[data-theme="dark"] small,
html[data-theme="dark"] label {
    color: var(--app-color-text) !important;
}

html[data-theme="dark"] a {
    color: #93c5fd;
}

html[data-theme="dark"] .dropdown-menu {
    background-color: #111827;
    border-color: var(--app-color-border);
}

html[data-theme="dark"] .dropdown-item {
    color: var(--app-color-text);
}

html[data-theme="dark"] .dropdown-item:hover {
    background-color: #1f2937;
}

html[data-theme="dark"] .text-muted {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .app-link-action {
    color: #93c5fd;
}

html[data-theme="dark"] .app-icon-warning {
    color: #fbbf24;
}

html[data-theme="dark"] .app-icon-neutral {
    color: #cbd5e1;
}

html[data-theme="dark"] .thead-light th {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .user-search-component .counts-group,
html[data-theme="dark"] .user-compliance-search-component .counts-group {
    background-color: #0b1220;
    border-color: #334155;
}

html[data-theme="dark"] .user-search-component .text-label,
html[data-theme="dark"] .user-search-component .text-value,
html[data-theme="dark"] .user-compliance-search-component .text-label,
html[data-theme="dark"] .user-compliance-search-component .text-value {
    color: #e5e7eb;
}

html[data-theme="dark"] .user-search-component .user-display-header,
html[data-theme="dark"] .user-compliance-search-component .user-display-header {
    background-color: #0b1220;
    color: #e5e7eb;
}

html[data-theme="dark"] .user-search-component .user-list-scroll,
html[data-theme="dark"] .user-compliance-search-component .user-list-scroll {
    border-color: #334155;
}

html[data-theme="dark"] .user-search-component .user-display {
    background-color: #111827;
    color: #e5e7eb;
}

html[data-theme="dark"] .user-search-component .user-display-selected {
    background-color: #1e3a8a;
    color: #eff6ff;
}

html[data-theme="dark"] .user-compliance-search-component .user-display {
    background-color: #111827;
    color: #e5e7eb;
}

html[data-theme="dark"] .user-compliance-search-component .user-display-selected {
    background-color: #1e3a8a;
    color: #eff6ff;
}

html[data-theme="dark"] .user-search-component .custom-tabs .nav-link,
html[data-theme="dark"] .user-compliance-search-component .nav-tabs .nav-link {
    background-color: #1f2937;
    color: #e5e7eb;
    border-color: #334155;
}

html[data-theme="dark"] .user-search-component .custom-tabs .nav-link.active,
html[data-theme="dark"] .user-compliance-search-component .nav-tabs .nav-link.active {
    background-color: #0f172a !important;
    color: #93c5fd !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .user-search-component .btn-outline-dark,
html[data-theme="dark"] .user-compliance-search-component .btn-outline-dark {
    color: #e5e7eb !important;
    border-color: #64748b !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .user-search-component .btn-outline-dark:hover,
html[data-theme="dark"] .user-search-component .btn-outline-dark:focus,
html[data-theme="dark"] .user-compliance-search-component .btn-outline-dark:hover,
html[data-theme="dark"] .user-compliance-search-component .btn-outline-dark:focus {
    color: #0f172a !important;
    background-color: #cbd5e1 !important;
    border-color: #cbd5e1 !important;
}