/* Profile themes and 15% larger desktop font */
:root {
    --vario-accent: #0076e5;
    --vario-app-bg: #d5dbe3;
    --vario-shell-bg: #d5dbe3;
    --vario-nav-bg: #e6e9ed;
    --vario-brand-bg: var(--vario-accent);
    --vario-brand-border: var(--vario-accent);
    --vario-brand-muted: #dbeafe;
    --vario-titlebar-bg: #f7f9fb;
    --vario-statusbar-bg: #e6e9ed;
    --vario-content-bg: #dde2e8;
    --vario-workbench-bg: #eef1f4;
    --vario-toolbar-bg: linear-gradient(#f7f9fb, #dce3eb);
    --vario-surface: #f8fafc;
    --vario-surface-alt: #e8edf3;
    --vario-surface-muted: #dce3eb;
    --vario-surface-hover: #e4f0ff;
    --vario-border: #98a4b2;
    --vario-border-strong: #7f8fa0;
    --vario-border-soft: #c5cfdb;
    --vario-text: #1f2937;
    --vario-text-strong: #111827;
    --vario-text-muted: #536173;
    --vario-active-text: #111827;
    --vario-active-bg: color-mix(in srgb, var(--vario-accent) 16%, #ffffff);
    --vario-grid-bg: #ffffff;
    --vario-grid-header-bg: linear-gradient(#f0f3f7, #ced8e4);
    --vario-grid-hover-bg: color-mix(in srgb, var(--vario-accent) 10%, #ffffff);
    --vario-input-bg: #ffffff;
    --vario-input-readonly-bg: #edf1f5;
    --vario-modal-bg: #f8fafc;
    --vario-modal-body-bg: #e8edf3;
    --vario-empty-bg: #f8fbff;
    --vario-empty-border: #d8e4f2;
    --vario-preview-border: #98a4b2;
}

html[data-vario-theme="windows-dark"] {
    --vario-app-bg: #0f1117;
    --vario-shell-bg: #0f1117;
    --vario-nav-bg: #171a21;
    --vario-brand-bg: color-mix(in srgb, var(--vario-accent) 34%, #0f172a);
    --vario-brand-border: var(--vario-accent);
    --vario-brand-muted: color-mix(in srgb, var(--vario-accent) 45%, #dbeafe);
    --vario-titlebar-bg: #1f232b;
    --vario-statusbar-bg: #1b1f27;
    --vario-content-bg: #111318;
    --vario-workbench-bg: #151922;
    --vario-toolbar-bg: #1d232d;
    --vario-surface: #181d26;
    --vario-surface-alt: #1d232d;
    --vario-surface-muted: #252b36;
    --vario-surface-hover: #222a36;
    --vario-border: #3a4250;
    --vario-border-strong: #4b5563;
    --vario-border-soft: #293241;
    --vario-text: #e5e7eb;
    --vario-text-strong: #f8fafc;
    --vario-text-muted: #9ca3af;
    --vario-active-text: #ffffff;
    --vario-active-bg: color-mix(in srgb, var(--vario-accent) 26%, #171a21);
    --vario-grid-bg: #10141b;
    --vario-grid-header-bg: #252b36;
    --vario-grid-hover-bg: #172033;
    --vario-input-bg: #10141b;
    --vario-input-readonly-bg: #161b24;
    --vario-modal-bg: #181d26;
    --vario-modal-body-bg: #111318;
    --vario-empty-bg: #1f2937;
    --vario-empty-border: #4b5563;
    --vario-preview-border: #4b5563;
}

html[data-vario-theme="forest"] {
    --vario-app-bg: #0d120f;
    --vario-shell-bg: #0d120f;
    --vario-nav-bg: #101813;
    --vario-brand-bg: color-mix(in srgb, var(--vario-accent) 28%, #052e1a);
    --vario-brand-border: var(--vario-accent);
    --vario-brand-muted: #86efac;
    --vario-titlebar-bg: #17211b;
    --vario-statusbar-bg: #17211b;
    --vario-content-bg: #101813;
    --vario-workbench-bg: #141d18;
    --vario-toolbar-bg: #17211b;
    --vario-surface: #141d18;
    --vario-surface-alt: #17211b;
    --vario-surface-muted: #1d2a22;
    --vario-surface-hover: #17251c;
    --vario-border: #2d4a37;
    --vario-border-strong: #355c42;
    --vario-border-soft: #23382b;
    --vario-text: #e7f5ec;
    --vario-text-strong: #f0fff5;
    --vario-text-muted: #a7d6b6;
    --vario-active-text: #f0fff5;
    --vario-active-bg: color-mix(in srgb, var(--vario-accent) 28%, #101813);
    --vario-grid-bg: #111a15;
    --vario-grid-header-bg: #1d2a22;
    --vario-grid-hover-bg: #15291e;
    --vario-input-bg: #0f1712;
    --vario-input-readonly-bg: #121d16;
    --vario-modal-bg: #141d18;
    --vario-modal-body-bg: #111a15;
    --vario-empty-bg: #14211a;
    --vario-empty-border: #355c42;
    --vario-preview-border: #355c42;
}

html,
body {
    font-size: 15px;
}

.vario-login-display {
    gap: 0.45rem;
}

.vario-login-display-name {
    color: var(--vario-text-strong);
}

.vario-login-user-name {
    color: var(--vario-text-muted);
}

.vario-profile-settings {
    padding: 0.55rem;
}

.vario-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.6rem;
}

.vario-theme-tile {
    cursor: pointer;
    display: grid;
    gap: 0.35rem;
    padding: 0.65rem;
    color: var(--vario-text);
    background: var(--vario-surface);
    border: 1px solid var(--vario-border);
}

.vario-theme-tile:hover,
.vario-theme-tile.selected {
    border-color: var(--vario-accent);
    background: var(--vario-surface-hover);
}

.vario-theme-tile input {
    margin: 0;
}

.vario-theme-tile strong {
    color: var(--vario-text-strong);
}

.vario-theme-tile small {
    color: var(--vario-text-muted);
    line-height: 1.25;
}

.vario-profile-coming-soon {
    display: grid;
    gap: 3px;
    min-height: 48px;
    align-content: center;
    padding: 0 12px;
    color: var(--vario-text);
    background: var(--vario-surface-alt);
    border: 1px solid var(--vario-border-soft);
    border-radius: 8px;
    font: 600 11px/16px Inter, "Segoe UI", Arial, sans-serif;
}

.vario-profile-coming-soon strong {
    color: var(--vario-text-strong);
    font-weight: 800;
}

.vario-profile-coming-soon span {
    color: var(--vario-text-muted);
}

.vario-theme-preview {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: 18px 18px;
    overflow: hidden;
    height: 36px;
    border: 1px solid var(--vario-preview-border);
}

.vario-theme-preview span:first-child {
    grid-row: 1 / span 2;
}

.theme-preview-light {
    background: #f2f5f9;
}

.theme-preview-light span:first-child {
    background: #134f8c;
}

.theme-preview-light span:nth-child(2) {
    background: #ffffff;
}

.theme-preview-light span:nth-child(3) {
    background: #1464ed;
}

.theme-preview-dark {
    background: #0f141b;
}

.theme-preview-dark span:first-child {
    background: #111a25;
}

.theme-preview-dark span:nth-child(2) {
    background: #202730;
}

.theme-preview-dark span:nth-child(3) {
    background: #1464ed;
}

.theme-preview-forest {
    background: #101813;
}

.theme-preview-forest span:first-child {
    background: #14211a;
}

.theme-preview-forest span:nth-child(2) {
    background: #1d2a22;
}

.theme-preview-forest span:nth-child(3) {
    background: #059669;
}

.vario-color-suggestion-row {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.8rem;
}

.vario-color-suggestion-row span {
    width: 34px;
    height: 22px;
    border: 1px solid var(--vario-preview-border);
}

.vario-profile-subtitle {
    margin: 1rem 0 0.45rem;
    color: var(--vario-text-strong);
    font-size: 0.98rem;
    font-weight: 800;
}

.vario-accent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 0.45rem;
}

.vario-accent-tile {
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 26px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.45rem;
    align-items: center;
    padding: 0.42rem;
    color: var(--vario-text);
    background: var(--vario-surface);
    border: 1px solid var(--vario-border);
}

.vario-accent-tile:hover,
.vario-accent-tile.selected {
    background: var(--vario-surface-hover);
    border-color: var(--vario-accent);
}

.vario-accent-tile input {
    grid-row: 1 / span 2;
    margin: 0;
}

.vario-accent-swatch {
    grid-row: 1 / span 2;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.vario-accent-tile strong {
    color: var(--vario-text-strong);
    font-size: 0.82rem;
}

.vario-accent-tile small {
    color: var(--vario-text-muted);
    font-size: 0.72rem;
}

html[data-vario-theme="windows-light"] body {
    color: #1f2937;
    background: #d5dbe3;
}

html[data-vario-theme="windows-light"] .vario-win-shell {
    color: #1f2937;
    background: #d5dbe3;
}

html[data-vario-theme="windows-light"] .vario-win-nav,
html[data-vario-theme="windows-light"] .nav-scrollable {
    background: #e6e9ed;
}

html[data-vario-theme="windows-light"] .vario-win-nav {
    border-right-color: #98a4b2;
}

html[data-vario-theme="windows-light"] .vario-win-brand {
    background: var(--vario-accent);
    border-bottom-color: var(--vario-accent);
}

html[data-vario-theme="windows-light"] .vario-win-brand span {
    color: #dbeafe;
}

html[data-vario-theme="windows-light"] .vario-win-titlebar,
html[data-vario-theme="windows-light"] .vario-win-statusbar,
html[data-vario-theme="windows-light"] .vario-win-commandbar,
html[data-vario-theme="windows-light"] .vario-erp-section-header,
html[data-vario-theme="windows-light"] .modal-header,
html[data-vario-theme="windows-light"] .modal-footer {
    color: #1f2937;
    background: #f5f5f5;
    border-color: #b7c0ca;
}

html[data-vario-theme="windows-light"] .vario-win-title,
html[data-vario-theme="windows-light"] .vario-win-title small,
html[data-vario-theme="windows-light"] .vario-login-display-name,
html[data-vario-theme="windows-light"] .vario-login-user-name {
    color: #1f2937;
}

html[data-vario-theme="windows-light"] .vario-win-content {
    background: #dde2e8;
}

html[data-vario-theme="windows-light"] .vario-win-workbench,
html[data-vario-theme="windows-light"] .vario-erp-header,
html[data-vario-theme="windows-light"] .vario-erp-section,
html[data-vario-theme="windows-light"] .vario-erp-module-card,
html[data-vario-theme="windows-light"] .vario-erp-process-card,
html[data-vario-theme="windows-light"] .vario-erp-register-row,
html[data-vario-theme="windows-light"] .vario-panel,
html[data-vario-theme="windows-light"] .admin-action,
html[data-vario-theme="windows-light"] .modal-content,
html[data-vario-theme="windows-light"] .vario-theme-tile {
    color: #1f2937;
    background: #ffffff;
    border-color: #98a4b2;
}

html[data-vario-theme="windows-light"] .vario-win-document-tabs {
    background: #d9dee6;
    border-bottom-color: #7f8fa0;
}

html[data-vario-theme="windows-light"] .vario-win-tab {
    color: #334155;
    background: #dce3eb;
    border-color: #98a4b2;
}

html[data-vario-theme="windows-light"] .vario-win-tab.active,
html[data-vario-theme="windows-light"] .vario-win-grid-pane,
html[data-vario-theme="windows-light"] .modal-body {
    color: #1f2937;
    background: #ffffff;
}

html[data-vario-theme="windows-light"] .vario-win-details-pane {
    color: #1f2937;
    background: #e6e9ed;
    border-left-color: #98a4b2;
}

html[data-vario-theme="windows-light"] .form-control,
html[data-vario-theme="windows-light"] .form-select {
    color: #1f2937;
    background-color: #ffffff;
    border-color: #7f8fa0;
}

html[data-vario-theme="windows-light"] .vario-data-grid,
html[data-vario-theme="windows-light"] .table {
    color: #1f2937;
    background: #ffffff;
}

html[data-vario-theme="windows-light"] .vario-data-grid thead th {
    color: #1f2937;
    background: #ced8e4;
    border-color: #98a4b2;
}

html[data-vario-theme="windows-light"] .vario-data-grid tbody td {
    background: #ffffff;
}

html[data-vario-theme="windows-light"] .nav-tree-parent,
html[data-vario-theme="windows-light"] .nav-item .nav-link {
    color: #1f2937;
}

html[data-vario-theme="windows-light"] .nav-item a.active {
    color: #111827;
    background: color-mix(in srgb, var(--vario-accent) 16%, #ffffff);
    border-color: var(--vario-accent);
}

html[data-vario-theme="forest"] body,
html[data-vario-theme="forest"] .vario-win-shell {
    color: #e7f5ec;
    background: #0d120f;
}

html[data-vario-theme="forest"] .vario-win-nav,
html[data-vario-theme="forest"] .nav-scrollable,
html[data-vario-theme="forest"] .vario-win-content {
    background: #101813;
}

html[data-vario-theme="forest"] .vario-win-brand {
    background: #052e1a;
    border-bottom-color: #14532d;
}

html[data-vario-theme="forest"] .vario-win-brand span {
    color: #86efac;
}

html[data-vario-theme="forest"] .vario-win-titlebar,
html[data-vario-theme="forest"] .vario-win-statusbar,
html[data-vario-theme="forest"] .vario-win-commandbar,
html[data-vario-theme="forest"] .vario-erp-section-header,
html[data-vario-theme="forest"] .modal-header,
html[data-vario-theme="forest"] .modal-footer {
    background: #17211b;
    border-color: #2d4a37;
}

html[data-vario-theme="forest"] .vario-win-workbench,
html[data-vario-theme="forest"] .vario-erp-header,
html[data-vario-theme="forest"] .vario-erp-section,
html[data-vario-theme="forest"] .vario-erp-module-card,
html[data-vario-theme="forest"] .vario-erp-process-card,
html[data-vario-theme="forest"] .vario-erp-register-row,
html[data-vario-theme="forest"] .vario-panel,
html[data-vario-theme="forest"] .admin-action,
html[data-vario-theme="forest"] .modal-content,
html[data-vario-theme="forest"] .vario-theme-tile {
    color: #e7f5ec;
    background: #141d18;
    border-color: #2d4a37;
}

html[data-vario-theme="forest"] .vario-win-document-tabs,
html[data-vario-theme="forest"] .vario-win-filterbar {
    background: #101813;
    border-color: #2d4a37;
}

html[data-vario-theme="forest"] .vario-win-tab {
    color: #d1fae5;
    background: #17211b;
    border-color: #2d4a37;
}

html[data-vario-theme="forest"] .vario-win-tab.active,
html[data-vario-theme="forest"] .vario-win-grid-pane,
html[data-vario-theme="forest"] .modal-body {
    background: #111a15;
}

html[data-vario-theme="forest"] .vario-win-details-pane {
    color: #e7f5ec;
    background: #16201a;
    border-left-color: #2d4a37;
}

html[data-vario-theme="forest"] .btn-primary,
html[data-vario-theme="forest"] .vario-win-commandbar .btn-primary,
html[data-vario-theme="forest"] .vario-erp-workspace .btn-primary,
html[data-vario-theme="forest"] .vario-purchase-form .btn-primary {
    background-color: var(--vario-accent);
    border-color: var(--vario-accent);
}

html[data-vario-theme="forest"] .vario-win-commandbar .btn-primary:hover,
html[data-vario-theme="forest"] .btn-primary:hover {
    background-color: var(--vario-accent);
}

html[data-vario-theme="forest"] .form-control,
html[data-vario-theme="forest"] .form-select {
    color: #e7f5ec;
    background-color: #0f1712;
    border-color: #355c42;
}

html[data-vario-theme="forest"] .vario-data-grid {
    color: #e7f5ec;
    background: #111a15;
}

html[data-vario-theme="forest"] .vario-data-grid thead th {
    color: #bbf7d0;
    background: #1d2a22;
    border-color: #355c42;
}

html[data-vario-theme="forest"] .vario-data-grid tbody td {
    background: #111a15;
}

html[data-vario-theme="forest"] .nav-item a.active {
    background: color-mix(in srgb, var(--vario-accent) 26%, #101813);
    border-color: var(--vario-accent);
}

html[data-vario-theme="forest"] .vario-theme-tile:hover,
html[data-vario-theme="forest"] .vario-theme-tile.selected {
    border-color: var(--vario-accent);
    background: #17251c;
}

html[data-vario-theme] a,
html[data-vario-theme] .btn-link {
    color: var(--vario-accent);
}

html[data-vario-theme] .text-muted {
    color: var(--vario-text-muted) !important;
}

html[data-vario-theme] .btn-primary,
html[data-vario-theme] .vario-win-commandbar .btn-primary,
html[data-vario-theme] .vario-erp-workspace .btn-primary,
html[data-vario-theme] .vario-purchase-form .btn-primary {
    color: #ffffff;
    background-color: var(--vario-accent);
    border-color: var(--vario-accent);
}

html[data-vario-theme] .btn-primary:hover,
html[data-vario-theme] .vario-win-commandbar .btn-primary:hover {
    color: #ffffff;
    background-color: color-mix(in srgb, var(--vario-accent) 88%, #000000);
    border-color: color-mix(in srgb, var(--vario-accent) 88%, #000000);
}

html[data-vario-theme] .vario-win-workbench {
    color: var(--vario-text);
    background: var(--vario-workbench-bg);
    border-color: var(--vario-border);
}

html[data-vario-theme] .vario-win-document-tabs {
    background: var(--vario-surface-muted);
    border-bottom-color: var(--vario-border-strong);
}

html[data-vario-theme] .vario-win-tab {
    color: var(--vario-text);
    background: var(--vario-surface-muted);
    border-color: var(--vario-border);
}

html[data-vario-theme] .vario-win-tab.active,
html[data-vario-theme] .vario-win-grid-pane {
    color: var(--vario-text-strong);
    background: var(--vario-grid-bg);
}

html[data-vario-theme] .vario-win-commandbar {
    background: var(--vario-toolbar-bg);
    border-bottom-color: var(--vario-border);
}

html[data-vario-theme] .vario-win-commandbar .btn,
html[data-vario-theme] .input-group .btn {
    color: var(--vario-text);
    background: var(--vario-surface-muted);
    border-color: var(--vario-border-strong);
}

html[data-vario-theme] .vario-win-commandbar .btn:hover,
html[data-vario-theme] .input-group .btn:hover {
    color: var(--vario-text-strong);
    background: var(--vario-surface-hover);
    border-color: var(--vario-accent);
}

html[data-vario-theme] .vario-win-command-separator {
    background: var(--vario-border);
}

html[data-vario-theme] .vario-win-filterbar {
    background: var(--vario-surface-alt);
    border-bottom-color: var(--vario-border);
}

html[data-vario-theme] .vario-win-details-pane {
    color: var(--vario-text);
    background: var(--vario-surface-alt);
    border-left-color: var(--vario-border);
}

html[data-vario-theme] .vario-win-details-title {
    color: var(--vario-text-strong);
    border-bottom-color: var(--vario-border);
}

html[data-vario-theme] .vario-win-details-row span:first-child {
    color: var(--vario-text-muted);
}

html[data-vario-theme] .vario-erp-workspace,
html[data-vario-theme] .vario-purchase-form {
    --erp-border: var(--vario-border);
    --erp-muted: var(--vario-text-muted);
    --erp-header: var(--vario-surface-muted);
    --erp-accent: var(--vario-accent);
    color: var(--vario-text);
}

html[data-vario-theme] .vario-erp-header,
html[data-vario-theme] .vario-erp-section,
html[data-vario-theme] .vario-erp-module-card,
html[data-vario-theme] .vario-erp-process-card,
html[data-vario-theme] .vario-erp-register-row,
html[data-vario-theme] .vario-panel,
html[data-vario-theme] .vario-module-card {
    color: var(--vario-text);
    background: var(--vario-surface);
    border-color: var(--vario-border);
}

html[data-vario-theme] .vario-erp-header h1,
html[data-vario-theme] .vario-erp-section-header h2,
html[data-vario-theme] .vario-erp-module-card strong,
html[data-vario-theme] .vario-erp-process-card strong,
html[data-vario-theme] .vario-erp-register-row strong,
html[data-vario-theme] .vario-panel h2 {
    color: var(--vario-text-strong);
}

html[data-vario-theme] .vario-erp-subtitle,
html[data-vario-theme] .vario-erp-section-header p,
html[data-vario-theme] .vario-erp-module-card span,
html[data-vario-theme] .vario-erp-process-card span,
html[data-vario-theme] .vario-erp-register-row span,
html[data-vario-theme] .vario-panel p {
    color: var(--vario-text-muted);
}

html[data-vario-theme] .vario-erp-section-header {
    background: var(--vario-surface-muted);
    border-color: var(--vario-border);
}

html[data-vario-theme] .vario-erp-workspace .form-label,
html[data-vario-theme] .vario-purchase-form .form-label {
    color: var(--vario-text-muted);
}

html[data-vario-theme] .form-control:read-only,
html[data-vario-theme] .vario-erp-workspace .form-control:read-only {
    background-color: var(--vario-input-readonly-bg);
}

html[data-vario-theme] .form-control::placeholder {
    color: var(--vario-text-muted);
}

html[data-vario-theme] .table {
    color: var(--vario-text);
    background: var(--vario-grid-bg);
}

html[data-vario-theme] .vario-data-grid thead th {
    color: var(--vario-text-strong);
    background: var(--vario-grid-header-bg);
    border-color: var(--vario-border);
}

html[data-vario-theme] .vario-data-grid th,
html[data-vario-theme] .vario-data-grid td {
    border-color: var(--vario-border-soft);
}

html[data-vario-theme] .vario-data-grid tbody td {
    background: var(--vario-grid-bg);
}

html[data-vario-theme] .vario-data-grid tfoot th {
    color: var(--vario-text-strong);
    background: var(--vario-surface-alt);
}

html[data-vario-theme] .vario-erp-tag {
    color: var(--vario-active-text);
    background: var(--vario-active-bg);
    border-color: var(--vario-accent);
}

html[data-vario-theme] .vario-erp-empty {
    color: var(--vario-text);
    background: var(--vario-empty-bg);
    border-color: var(--vario-empty-border);
}

html[data-vario-theme] .modal-header,
html[data-vario-theme] .modal-footer,
html[data-vario-theme] .vario-erp-modal-content .modal-header {
    color: var(--vario-text);
    background: var(--vario-toolbar-bg);
    border-color: var(--vario-border);
}

html[data-vario-theme] .modal-body,
html[data-vario-theme] .vario-erp-modal-body {
    background: var(--vario-modal-body-bg);
}

html[data-vario-theme] .vario-theme-tile,
html[data-vario-theme] .vario-accent-tile {
    color: var(--vario-text);
    background: var(--vario-surface);
    border-color: var(--vario-border);
}

html[data-vario-theme] .vario-theme-tile:hover,
html[data-vario-theme] .vario-theme-tile.selected,
html[data-vario-theme] .vario-accent-tile:hover,
html[data-vario-theme] .vario-accent-tile.selected {
    background: var(--vario-surface-hover);
    border-color: var(--vario-accent);
}

html[data-vario-theme] .vario-theme-tile strong,
html[data-vario-theme] .vario-accent-tile strong,
html[data-vario-theme] .vario-profile-subtitle,
html[data-vario-theme] .vario-login-display-name {
    color: var(--vario-text-strong);
}

html[data-vario-theme] .vario-theme-tile small,
html[data-vario-theme] .vario-accent-tile small,
html[data-vario-theme] .vario-login-user-name {
    color: var(--vario-text-muted);
}

.admin-back-bar {
    margin-bottom: 1rem;
}