/* * Global application palettes. * * The existing ColorAdmin cascade remains the default palette. This file only * activates when the server places .app-skin-vscode on . Light and dark * values follow VS Code's Light Modern and Dark Modern workbench colors while * retaining the application's semantic success/warning/error meanings. */ /* -------------------------------------------------------------------------- VS Code Light Modern: palette and shared token bridges -------------------------------------------------------------------------- */ html.app-skin-vscode, html.app-skin-vscode body { color-scheme: light; --vscode-editor-bg: #ffffff; --vscode-chrome-bg: #f8f8f8; --app-browser-theme-color: #f8f8f8; --vscode-surface: #ffffff; --vscode-surface-elevated: #ffffff; --vscode-surface-soft: #f3f3f3; --vscode-input-bg: #ffffff; --vscode-hover-bg: #f2f2f2; --vscode-selected-bg: #e8e8e8; --vscode-border: #e5e5e5; --vscode-border-strong: #cecece; --vscode-text: #3b3b3b; --vscode-text-strong: #1f1f1f; --vscode-text-muted: #616161; --vscode-text-inactive: #868686; --vscode-placeholder: #767676; --vscode-accent: #005fb8; --vscode-accent-rgb: 0, 95, 184; --vscode-accent-hover: #0258a8; --vscode-link: #005fb8; --vscode-success: #2ea043; --vscode-success-rgb: 46, 160, 67; --vscode-warning: #bf8700; --vscode-warning-rgb: 191, 135, 0; --vscode-danger: #f85149; --vscode-danger-rgb: 248, 81, 73; --vscode-info: #0078d4; --vscode-info-rgb: 0, 120, 212; --vscode-button-success-bg: #238636; --vscode-button-success-hover: #196c2e; --vscode-button-success-active: #155d27; --vscode-button-danger-bg: #da3633; --vscode-button-danger-hover: #b62324; --vscode-button-danger-active: #9e1c1c; --vscode-button-info-bg: var(--vscode-accent); --vscode-button-info-hover: var(--vscode-accent-hover); --vscode-focus-ring: rgba(0, 95, 184, 0.28); --vscode-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --vscode-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); /* Bootstrap document tokens. */ --bs-body-bg: var(--vscode-editor-bg); --bs-body-bg-rgb: 255, 255, 255; --bs-body-color: var(--vscode-text); --bs-body-color-rgb: 59, 59, 59; --bs-emphasis-color: var(--vscode-text-strong); --bs-emphasis-color-rgb: 31, 31, 31; --bs-heading-color: var(--vscode-text-strong); --bs-secondary-color: var(--vscode-text-muted); --bs-secondary-color-rgb: 97, 97, 97; --bs-secondary-bg: var(--vscode-surface-soft); --bs-secondary-bg-rgb: 243, 243, 243; --bs-tertiary-color: var(--vscode-text-inactive); --bs-tertiary-color-rgb: 134, 134, 134; --bs-tertiary-bg: var(--vscode-chrome-bg); --bs-tertiary-bg-rgb: 248, 248, 248; --bs-border-color: var(--vscode-border); --bs-border-color-translucent: rgba(31, 31, 31, 0.14); --bs-primary: var(--vscode-accent); --bs-primary-rgb: var(--vscode-accent-rgb); --bs-secondary: var(--vscode-text-muted); --bs-secondary-rgb: 97, 97, 97; --bs-primary-text-emphasis: #004578; --bs-primary-bg-subtle: #e7f2fb; --bs-primary-border-subtle: #9bc8ec; --bs-link-color: var(--vscode-link); --bs-link-color-rgb: var(--vscode-accent-rgb); --bs-link-hover-color: var(--vscode-accent-hover); --bs-link-hover-color-rgb: 2, 88, 168; --bs-focus-ring-color: var(--vscode-focus-ring); --bs-success: var(--vscode-success); --bs-success-rgb: var(--vscode-success-rgb); --bs-success-text-emphasis: #196c2e; --bs-success-bg-subtle: #e9f6ec; --bs-success-border-subtle: #a8dcb3; --bs-warning: var(--vscode-warning); --bs-warning-rgb: var(--vscode-warning-rgb); --bs-warning-text-emphasis: #6b4c00; --bs-warning-bg-subtle: #fff5d6; --bs-warning-border-subtle: #e6cc7d; --bs-danger: var(--vscode-danger); --bs-danger-rgb: var(--vscode-danger-rgb); --bs-danger-text-emphasis: #a12622; --bs-danger-bg-subtle: #fff0ef; --bs-danger-border-subtle: #f4aaa6; --bs-info: var(--vscode-info); --bs-info-rgb: var(--vscode-info-rgb); --bs-info-text-emphasis: #004e8c; --bs-info-bg-subtle: #e7f3fc; --bs-info-border-subtle: #9cccef; --bs-light: var(--vscode-surface-soft); --bs-light-rgb: 243, 243, 243; --bs-dark: var(--vscode-text-strong); --bs-dark-rgb: 31, 31, 31; --bs-inverse: var(--bs-dark); --bs-inverse-rgb: var(--bs-dark-rgb); --bs-gray-100: #f8f8f8; --bs-gray-200: #f3f3f3; --bs-gray-300: #e8e8e8; --bs-gray-400: #e5e5e5; --bs-gray-500: #cecece; --bs-gray-600: #868686; --bs-gray-700: #616161; --bs-gray-800: #3b3b3b; --bs-gray-900: #1f1f1f; /* ColorAdmin tokens. The accent is intentionally important because a user's legacy .theme-* class is more local in the DOM. */ --app-theme: var(--vscode-accent) !important; --app-theme-rgb: var(--vscode-accent-rgb) !important; --app-theme-color: #ffffff !important; --app-theme-color-rgb: 255, 255, 255 !important; --app-primary: var(--vscode-accent); --app-primary-rgb: var(--vscode-accent-rgb); --app-primary-hover: var(--vscode-accent-hover); --app-success: var(--vscode-success); --app-warning: var(--vscode-warning); --app-danger: var(--vscode-danger); --app-info: var(--vscode-info); --app-secondary: var(--vscode-text-muted); --app-light: var(--vscode-surface-soft); --app-dark: var(--vscode-text-strong); --app-dark-600: #3c3c3c; --app-dark-700: #2a2d2e; --app-dark-800: #1f1f1f; --app-dark-900: #181818; --app-text-color: var(--vscode-text); --app-text-secondary: var(--vscode-text-muted); --app-card-bg: var(--vscode-surface); --app-border-color: var(--vscode-border); --app-border-color-rgb: 229, 229, 229; --app-blue: var(--vscode-accent); --app-blue-dark: var(--vscode-accent-hover); --app-blue-100: #e7f2fb; --app-blue-400: #4daafc; --app-blue-600: #005fb8; --app-blue-700: #004578; --app-indigo: #6f42c1; --app-purple: #7f4fb2; --app-purple-dark: #6b3f9b; --app-orange: #c85a17; --app-orange-dark: #a7470f; --app-yellow-100: #fff5d6; --app-yellow-400: #cca700; --app-yellow-700: #6b4c00; --app-gray-50: #ffffff; --app-gray-100: #f8f8f8; --app-gray-200: #f3f3f3; --app-gray-300: #e8e8e8; --app-gray-400: #e5e5e5; --app-gray-500: #cecece; --app-gray-600: #868686; --app-gray-700: #616161; --app-gray-800: #3b3b3b; --app-gray-900: #1f1f1f; /* Legacy page-local aliases still used by shared utility components. */ --primary: var(--vscode-accent); --primary-rgb: var(--vscode-accent-rgb); --primary-50: rgba(var(--vscode-accent-rgb), 0.08); --secondary: var(--vscode-text-muted); --secondary-rgb: 97, 97, 97; --white: var(--vscode-surface); --slate-300: var(--vscode-border-strong); --slate-600: var(--vscode-text-muted); --app-component-bg: var(--vscode-surface); --app-component-bg-rgb: 255, 255, 255; --app-component-color: var(--vscode-text); --app-component-color-rgb: 59, 59, 59; --app-component-color-muted: var(--vscode-text-muted); --app-component-border-color: var(--vscode-border); --app-component-border-color-rgb: 229, 229, 229; --app-component-secondary-bg: var(--vscode-surface-soft); --app-component-hover-bg: var(--vscode-hover-bg); --app-component-hover-color: var(--vscode-text-strong); --app-component-hover-border-color: var(--vscode-border-strong); --app-component-active-bg: var(--vscode-accent); --app-component-active-bg-rgb: var(--vscode-accent-rgb); --app-component-active-color: #ffffff; --app-component-active-color-rgb: 255, 255, 255; --app-component-active-border-color: var(--vscode-accent); --app-component-focus-border-color: var(--vscode-accent); --app-component-disabled-bg: var(--vscode-surface-soft); --app-component-disabled-color: var(--vscode-text-inactive); --app-component-disabled-border-color: var(--vscode-border); --app-component-dropdown-bg: var(--vscode-surface-elevated); --app-component-dropdown-bg-rgb: 255, 255, 255; --app-component-dropdown-hover-bg: var(--vscode-hover-bg); --app-component-dropdown-hover-bg-rgb: 242, 242, 242; --app-component-dropdown-border-color: var(--vscode-border-strong); --app-component-dropdown-border-color-rgb: 206, 206, 206; --app-component-modal-bg: var(--vscode-surface-elevated); --app-component-modal-bg-rgb: 255, 255, 255; --app-component-modal-border-color: var(--vscode-border-strong); --app-component-modal-border-color-rgb: 206, 206, 206; --app-component-table-border-color: var(--vscode-border); --app-component-table-separator-color: var(--vscode-border-strong); --app-pos-bg: var(--vscode-chrome-bg); --app-header-bg: var(--vscode-chrome-bg); --app-header-bg-rgb: 248, 248, 248; --app-header-color: var(--vscode-text); --app-header-color-rgb: 59, 59, 59; --app-header-input-bg: var(--vscode-input-bg); --app-header-input-border: var(--vscode-border-strong); --app-header-divider-bg: var(--vscode-border); --app-header-mobile-divider-bg: var(--vscode-border); --app-header-hover-bg: var(--vscode-hover-bg); --app-sidebar-bg: var(--vscode-chrome-bg); --app-sidebar-bg-rgb: 248, 248, 248; --app-sidebar-profile-bg: var(--vscode-surface-soft); --app-sidebar-profile-bg-rgb: 243, 243, 243; --app-sidebar-profile-color: var(--vscode-text); --app-sidebar-profile-color-rgb: 59, 59, 59; --app-sidebar-component-color: var(--vscode-text-muted); --app-sidebar-component-color-rgb: 97, 97, 97; --app-sidebar-active-component-bg: var(--vscode-selected-bg); --app-sidebar-active-component-bg-rgb: 232, 232, 232; --app-sidebar-menu-header-color: var(--vscode-text-muted); --app-sidebar-menu-divider-bg: var(--vscode-border); --app-sidebar-menu-badge-bg: var(--vscode-selected-bg); --app-sidebar-minify-btn-bg: var(--vscode-surface-soft); --app-sidebar-minify-btn-hover-bg: var(--vscode-selected-bg); /* Zetra shared shells, header/sidebar and notification flyout. */ --zetra-ui-bg: var(--vscode-editor-bg); --zetra-ui-surface: var(--vscode-surface); --zetra-ui-surface-soft: var(--vscode-surface-soft); --zetra-ui-surface-muted: var(--vscode-hover-bg); --zetra-ui-border: var(--vscode-border); --zetra-ui-border-strong: var(--vscode-border-strong); --zetra-ui-text: var(--vscode-text); --zetra-ui-muted: var(--vscode-text-muted); --zetra-ui-primary: var(--vscode-accent); --zetra-ui-primary-soft: rgba(var(--vscode-accent-rgb), 0.09); --zetra-ui-success-soft: rgba(var(--vscode-success-rgb), 0.1); --zetra-ui-danger-soft: rgba(var(--vscode-danger-rgb), 0.09); --zetra-ui-warning-soft: rgba(var(--vscode-warning-rgb), 0.11); --zetra-ui-shadow-sm: var(--vscode-shadow-sm); --zetra-ui-shadow: var(--vscode-shadow); --zetra-sidebar-bg: var(--vscode-chrome-bg); --zetra-sidebar-bg-soft: var(--vscode-surface-soft); --zetra-sidebar-border: var(--vscode-border); --zetra-sidebar-text: var(--vscode-text); --zetra-sidebar-muted: var(--vscode-text-muted); --zetra-sidebar-icon: var(--vscode-text-muted); --zetra-sidebar-hover-bg: var(--vscode-hover-bg); --zetra-sidebar-active-bg: var(--vscode-selected-bg); --zetra-sidebar-active-border: rgba(var(--vscode-accent-rgb), 0.34); --zetra-sidebar-active-text: var(--vscode-text-strong); --zetra-sidebar-line: var(--vscode-border); --zetra-sidebar-shadow: 8px 0 20px rgba(0, 0, 0, 0.06); --zetra-sidebar-profile-bg: linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%); --zetra-sidebar-profile-border: var(--vscode-border); --zetra-sidebar-badge-bg: var(--vscode-selected-bg); --zetra-sidebar-badge-text: var(--vscode-accent); --zetra-header-bg: rgba(248, 248, 248, 0.96); --zetra-header-surface: var(--vscode-surface-soft); --zetra-header-surface-hover: var(--vscode-hover-bg); --zetra-header-border: var(--vscode-border); --zetra-header-text: var(--vscode-text); --zetra-header-muted: var(--vscode-text-muted); --zetra-header-shadow: 0 4px 16px rgba(0, 0, 0, 0.07); --zetra-header-brand-bg: linear-gradient(135deg, rgba(0, 95, 184, 0.1), rgba(0, 120, 212, 0.06)); --zetra-header-scroll-edge: rgba(var(--vscode-accent-rgb), 0.56); --zetra-notification-bg: var(--vscode-surface-elevated); --zetra-notification-bg-soft: var(--vscode-chrome-bg); --zetra-notification-bg-hover: var(--vscode-hover-bg); --zetra-notification-border: var(--vscode-border); --zetra-notification-text: var(--vscode-text); --zetra-notification-muted: var(--vscode-text-muted); --zetra-notification-shadow: var(--vscode-shadow); } /* -------------------------------------------------------------------------- VS Code Dark Modern: override both root and body-local legacy variables -------------------------------------------------------------------------- */ html.app-skin-vscode.dark-mode, html.app-skin-vscode.dark-mode body { color-scheme: dark; --vscode-editor-bg: #1f1f1f; --vscode-chrome-bg: #181818; --app-browser-theme-color: #181818; --vscode-surface: #1f1f1f; --vscode-surface-elevated: #202020; --vscode-surface-soft: #222222; --vscode-input-bg: #313131; --vscode-hover-bg: #2a2d2e; --vscode-selected-bg: #37373d; --vscode-border: #2b2b2b; --vscode-border-strong: #3c3c3c; --vscode-text: #cccccc; --vscode-text-strong: #ffffff; --vscode-text-muted: #9d9d9d; --vscode-text-inactive: #868686; --vscode-placeholder: #989898; --vscode-accent: #0078d4; --vscode-accent-rgb: 0, 120, 212; --vscode-accent-hover: #026ec1; --vscode-link: #4daafc; --vscode-success: #2ea043; --vscode-success-rgb: 46, 160, 67; --vscode-warning: #cca700; --vscode-warning-rgb: 204, 167, 0; --vscode-danger: #f85149; --vscode-danger-rgb: 248, 81, 73; --vscode-info: #4daafc; --vscode-info-rgb: 77, 170, 252; --vscode-focus-ring: rgba(0, 120, 212, 0.44); --vscode-shadow-sm: 0 2px 9px rgba(0, 0, 0, 0.34); --vscode-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); --bs-body-bg: var(--vscode-editor-bg); --bs-body-bg-rgb: 31, 31, 31; --bs-body-color: var(--vscode-text); --bs-body-color-rgb: 204, 204, 204; --bs-emphasis-color: var(--vscode-text-strong); --bs-emphasis-color-rgb: 255, 255, 255; --bs-heading-color: var(--vscode-text-strong); --bs-secondary-color: var(--vscode-text-muted); --bs-secondary-color-rgb: 157, 157, 157; --bs-secondary-bg: var(--vscode-surface-soft); --bs-secondary-bg-rgb: 34, 34, 34; --bs-tertiary-color: var(--vscode-text-inactive); --bs-tertiary-color-rgb: 134, 134, 134; --bs-tertiary-bg: var(--vscode-chrome-bg); --bs-tertiary-bg-rgb: 24, 24, 24; --bs-border-color: var(--vscode-border-strong); --bs-border-color-translucent: rgba(255, 255, 255, 0.12); --bs-primary: var(--vscode-accent); --bs-primary-rgb: var(--vscode-accent-rgb); --bs-secondary: #616161; --bs-secondary-rgb: 97, 97, 97; --bs-primary-text-emphasis: #75beff; --bs-primary-bg-subtle: #102a3f; --bs-primary-border-subtle: #164e75; --bs-link-color: var(--vscode-link); --bs-link-color-rgb: 77, 170, 252; --bs-link-hover-color: #75beff; --bs-link-hover-color-rgb: 117, 190, 255; --bs-focus-ring-color: var(--vscode-focus-ring); --bs-success: var(--vscode-success); --bs-success-rgb: var(--vscode-success-rgb); --bs-success-text-emphasis: #6ccf7d; --bs-success-bg-subtle: #162d1d; --bs-success-border-subtle: #285d32; --bs-warning: var(--vscode-warning); --bs-warning-rgb: var(--vscode-warning-rgb); --bs-warning-text-emphasis: #e8cf58; --bs-warning-bg-subtle: #332d0d; --bs-warning-border-subtle: #665714; --bs-danger: var(--vscode-danger); --bs-danger-rgb: var(--vscode-danger-rgb); --bs-danger-text-emphasis: #ff8f89; --bs-danger-bg-subtle: #3b1818; --bs-danger-border-subtle: #7a2927; --bs-info: var(--vscode-info); --bs-info-rgb: var(--vscode-info-rgb); --bs-info-text-emphasis: #9cdcfe; --bs-info-bg-subtle: #102a3f; --bs-info-border-subtle: #164e75; --bs-light: var(--vscode-surface-soft); --bs-light-rgb: 34, 34, 34; /* `dark` is a dark surface in Bootstrap/ColorAdmin, never a foreground. Text that needs to invert in dark mode uses --vscode-text-strong. */ --bs-dark: #181818; --bs-dark-rgb: 24, 24, 24; --bs-inverse: var(--bs-dark); --bs-inverse-rgb: var(--bs-dark-rgb); --bs-gray-100: #222222; --bs-gray-200: #2b2b2b; --bs-gray-300: #313131; --bs-gray-400: #3c3c3c; --bs-gray-500: #5a5a5a; --bs-gray-600: #868686; --bs-gray-700: #9d9d9d; --bs-gray-800: #cccccc; --bs-gray-900: #ffffff; --app-theme: var(--vscode-accent) !important; --app-theme-rgb: var(--vscode-accent-rgb) !important; --app-primary: var(--vscode-accent); --app-primary-rgb: var(--vscode-accent-rgb); --app-primary-hover: var(--vscode-accent-hover); --app-success: var(--vscode-success); --app-warning: var(--vscode-warning); --app-danger: var(--vscode-danger); --app-info: var(--vscode-info); --app-secondary: var(--vscode-text-muted); --app-light: var(--vscode-surface-soft); --app-dark: var(--vscode-text-strong); --app-dark-600: #3c3c3c; --app-dark-700: #2a2d2e; --app-dark-800: #1f1f1f; --app-dark-900: #181818; --app-text-color: var(--vscode-text); --app-text-secondary: var(--vscode-text-muted); --app-card-bg: var(--vscode-surface); --app-border-color: var(--vscode-border-strong); --app-border-color-rgb: 60, 60, 60; --app-blue: var(--vscode-accent); --app-blue-dark: var(--vscode-accent-hover); --app-blue-100: #102a3f; --app-blue-400: #4daafc; --app-blue-600: #0078d4; --app-blue-700: #026ec1; --app-indigo: #b180d7; --app-purple: #c586c0; --app-purple-dark: #b180d7; --app-orange: #ce9178; --app-orange-dark: #d18668; --app-yellow-100: #332d0d; --app-yellow-400: #cca700; --app-yellow-700: #e8cf58; --app-gray-50: #181818; --app-gray-100: #222222; --app-gray-200: #2b2b2b; --app-gray-300: #313131; --app-gray-400: #3c3c3c; --app-gray-500: #5a5a5a; --app-gray-600: #868686; --app-gray-700: #9d9d9d; --app-gray-800: #cccccc; --app-gray-900: #ffffff; --primary: var(--vscode-accent); --primary-rgb: var(--vscode-accent-rgb); --primary-50: rgba(var(--vscode-accent-rgb), 0.12); --secondary: #616161; --secondary-rgb: 97, 97, 97; --white: var(--vscode-surface); --slate-300: var(--vscode-border-strong); --slate-600: var(--vscode-text-muted); --app-component-bg: var(--vscode-surface); --app-component-bg-rgb: 31, 31, 31; --app-component-color: var(--vscode-text); --app-component-color-rgb: 204, 204, 204; --app-component-color-muted: var(--vscode-text-muted); --app-component-border-color: var(--vscode-border-strong); --app-component-border-color-rgb: 60, 60, 60; --app-component-secondary-bg: var(--vscode-surface-soft); --app-component-hover-bg: var(--vscode-hover-bg); --app-component-hover-color: var(--vscode-text-strong); --app-component-hover-border-color: #505050; --app-component-active-bg: var(--vscode-accent); --app-component-active-bg-rgb: var(--vscode-accent-rgb); --app-component-active-color: #ffffff; --app-component-active-color-rgb: 255, 255, 255; --app-component-active-border-color: var(--vscode-accent); --app-component-focus-border-color: var(--vscode-accent); --app-component-disabled-bg: var(--vscode-surface-soft); --app-component-disabled-color: var(--vscode-text-inactive); --app-component-disabled-border-color: var(--vscode-border); --app-component-dropdown-bg: var(--vscode-surface-elevated); --app-component-dropdown-bg-rgb: 32, 32, 32; --app-component-dropdown-hover-bg: var(--vscode-hover-bg); --app-component-dropdown-hover-bg-rgb: 42, 45, 46; --app-component-dropdown-border-color: var(--vscode-border-strong); --app-component-dropdown-border-color-rgb: 60, 60, 60; --app-component-modal-bg: var(--vscode-surface-elevated); --app-component-modal-bg-rgb: 32, 32, 32; --app-component-modal-border-color: var(--vscode-border-strong); --app-component-modal-border-color-rgb: 60, 60, 60; --app-component-table-border-color: var(--vscode-border); --app-component-table-separator-color: var(--vscode-border-strong); --app-pos-bg: var(--vscode-chrome-bg); --app-header-bg: var(--vscode-chrome-bg); --app-header-bg-rgb: 24, 24, 24; --app-header-color: var(--vscode-text); --app-header-color-rgb: 204, 204, 204; --app-header-input-bg: var(--vscode-input-bg); --app-header-input-border: var(--vscode-border-strong); --app-header-divider-bg: var(--vscode-border); --app-header-mobile-divider-bg: var(--vscode-border); --app-header-hover-bg: var(--vscode-hover-bg); --app-sidebar-bg: var(--vscode-chrome-bg); --app-sidebar-bg-rgb: 24, 24, 24; --app-sidebar-profile-bg: var(--vscode-surface-soft); --app-sidebar-profile-bg-rgb: 34, 34, 34; --app-sidebar-profile-color: var(--vscode-text); --app-sidebar-profile-color-rgb: 204, 204, 204; --app-sidebar-component-color: var(--vscode-text); --app-sidebar-component-color-rgb: 204, 204, 204; --app-sidebar-active-component-bg: var(--vscode-selected-bg); --app-sidebar-active-component-bg-rgb: 55, 55, 61; --app-sidebar-menu-header-color: var(--vscode-text-muted); --app-sidebar-menu-divider-bg: var(--vscode-border); --app-sidebar-menu-badge-bg: var(--vscode-selected-bg); --app-sidebar-minify-btn-bg: var(--vscode-surface-soft); --app-sidebar-minify-btn-hover-bg: var(--vscode-hover-bg); --zetra-ui-bg: var(--vscode-editor-bg); --zetra-ui-surface: var(--vscode-surface); --zetra-ui-surface-soft: var(--vscode-surface-soft); --zetra-ui-surface-muted: var(--vscode-hover-bg); --zetra-ui-border: var(--vscode-border); --zetra-ui-border-strong: var(--vscode-border-strong); --zetra-ui-text: var(--vscode-text); --zetra-ui-muted: var(--vscode-text-muted); --zetra-ui-primary: var(--vscode-accent); --zetra-ui-primary-soft: rgba(var(--vscode-accent-rgb), 0.18); --zetra-ui-success-soft: rgba(var(--vscode-success-rgb), 0.18); --zetra-ui-danger-soft: rgba(var(--vscode-danger-rgb), 0.16); --zetra-ui-warning-soft: rgba(var(--vscode-warning-rgb), 0.17); --zetra-ui-shadow-sm: var(--vscode-shadow-sm); --zetra-ui-shadow: var(--vscode-shadow); --zetra-sidebar-bg: var(--vscode-chrome-bg); --zetra-sidebar-bg-soft: var(--vscode-surface-soft); --zetra-sidebar-border: var(--vscode-border); --zetra-sidebar-text: var(--vscode-text); --zetra-sidebar-muted: var(--vscode-text-muted); --zetra-sidebar-icon: var(--vscode-text-muted); --zetra-sidebar-hover-bg: var(--vscode-hover-bg); --zetra-sidebar-active-bg: var(--vscode-selected-bg); --zetra-sidebar-active-border: rgba(var(--vscode-accent-rgb), 0.6); --zetra-sidebar-active-text: var(--vscode-text-strong); --zetra-sidebar-line: var(--vscode-border); --zetra-sidebar-shadow: 8px 0 22px rgba(0, 0, 0, 0.34); --zetra-sidebar-profile-bg: linear-gradient(180deg, #222222 0%, #181818 100%); --zetra-sidebar-profile-border: var(--vscode-border); --zetra-sidebar-badge-bg: var(--vscode-selected-bg); --zetra-sidebar-badge-text: #ffffff; --zetra-header-bg: rgba(24, 24, 24, 0.97); --zetra-header-surface: var(--vscode-surface-soft); --zetra-header-surface-hover: var(--vscode-hover-bg); --zetra-header-border: var(--vscode-border); --zetra-header-text: var(--vscode-text); --zetra-header-muted: var(--vscode-text-muted); --zetra-header-shadow: 0 4px 18px rgba(0, 0, 0, 0.34); --zetra-header-brand-bg: linear-gradient(135deg, rgba(0, 120, 212, 0.22), rgba(77, 170, 252, 0.08)); --zetra-header-scroll-edge: rgba(var(--vscode-accent-rgb), 0.8); --zetra-notification-bg: var(--vscode-surface-elevated); --zetra-notification-bg-soft: var(--vscode-surface-soft); --zetra-notification-bg-hover: var(--vscode-hover-bg); --zetra-notification-border: var(--vscode-border-strong); --zetra-notification-text: var(--vscode-text); --zetra-notification-muted: var(--vscode-text-muted); --zetra-notification-shadow: var(--vscode-shadow); } /* -------------------------------------------------------------------------- Component-local token namespaces -------------------------------------------------------------------------- */ html.app-skin-vscode .ag-theme-quartz, html.app-skin-vscode [class*="ag-theme-"] { /* AG Grid 35 Quartz tokens. --ag-active-color is the source for focus, selection controls and icons; setting only the older checkbox token leaves the library's default #2196f3 visible. */ --ag-accent-color: var(--vscode-accent); --ag-browser-color-scheme: light; --ag-active-color: var(--vscode-accent); --ag-foreground-color: var(--vscode-text); --ag-data-color: var(--vscode-text); --ag-secondary-foreground-color: var(--vscode-text-muted); --ag-disabled-foreground-color: var(--vscode-text-inactive); --ag-background-color: var(--vscode-surface); --ag-header-background-color: var(--vscode-chrome-bg); --ag-header-foreground-color: var(--vscode-text-strong); --ag-header-text-color: var(--vscode-text-strong); --ag-header-cell-hover-background-color: var(--vscode-hover-bg); --ag-header-cell-moving-background-color: var(--vscode-selected-bg); --ag-header-column-separator-color: var(--vscode-border-strong); --ag-odd-row-background-color: var(--vscode-chrome-bg); --ag-row-hover-color: rgba(var(--vscode-accent-rgb), 0.1); --ag-selected-row-background-color: rgba(var(--vscode-accent-rgb), 0.18); --ag-column-hover-color: rgba(var(--vscode-accent-rgb), 0.06); --ag-border-color: var(--vscode-border); --ag-secondary-border-color: var(--vscode-border); --ag-row-border-color: var(--vscode-border); --ag-panel-background-color: var(--vscode-surface-elevated); --ag-panel-border-color: var(--vscode-border-strong); --ag-menu-background-color: var(--vscode-surface-elevated); --ag-menu-border-color: var(--vscode-border-strong); --ag-control-panel-background-color: var(--vscode-chrome-bg); --ag-subheader-background-color: var(--vscode-surface-soft); --ag-tooltip-background-color: var(--vscode-surface-elevated); --ag-chip-background-color: var(--vscode-selected-bg); --ag-input-background-color: var(--vscode-input-bg); --ag-input-border-color: var(--vscode-border-strong); --ag-input-border: 1px solid var(--vscode-border-strong); --ag-input-disabled-background-color: var(--vscode-surface-soft); --ag-input-disabled-border-color: var(--vscode-border); --ag-input-focus-border-color: var(--vscode-accent); --ag-input-focus-box-shadow: 0 0 0 2px var(--vscode-focus-ring); --ag-input-focus-border: 1px solid var(--vscode-accent); --ag-input-focus-shadow: 0 0 0 2px var(--vscode-focus-ring); --ag-range-selection-border-color: var(--vscode-accent); --ag-checkbox-background-color: var(--vscode-input-bg); --ag-checkbox-unchecked-color: var(--vscode-text-muted); --ag-checkbox-checked-color: var(--vscode-accent); --ag-checkbox-checked-background-color: var(--vscode-accent); --ag-filter-panel-apply-button-background-color: var(--vscode-accent); --ag-filter-panel-apply-button-color: #ffffff; --ag-side-button-selected-background-color: var(--vscode-selected-bg); --ag-modal-overlay-background-color: rgba(255, 255, 255, 0.68); } html.app-skin-vscode.dark-mode .ag-theme-quartz, html.app-skin-vscode.dark-mode [class*="ag-theme-"] { --ag-browser-color-scheme: dark; --ag-modal-overlay-background-color: rgba(31, 31, 31, 0.72); } html.app-skin-vscode .erp-app-shell { --pp-surface: var(--vscode-surface); --pp-surface-2: var(--vscode-chrome-bg); --pp-surface-3: var(--vscode-surface-soft); --pp-text: var(--vscode-text); --pp-text-muted: var(--vscode-text-muted); --pp-text-subtle: var(--vscode-text-muted); --pp-border: var(--vscode-border); --pp-border-strong: var(--vscode-border-strong); --pp-accent: var(--vscode-accent); --pp-success: var(--vscode-success); --pp-success-bg: rgba(var(--vscode-success-rgb), 0.12); --pp-warn: var(--vscode-warning); --pp-danger: var(--vscode-danger); --pp-purple: var(--app-purple); --pp-badge-bg: rgba(var(--vscode-accent-rgb), 0.13); --pp-badge-fg: var(--vscode-link); --pp-shadow: var(--vscode-shadow-sm); --pp-shadow-up: 0 -2px 8px rgba(0, 0, 0, 0.09); --pp-map-bg: var(--vscode-chrome-bg); } html.app-skin-vscode.dark-mode .erp-app-shell { --pp-shadow-up: 0 -2px 9px rgba(0, 0, 0, 0.34); } html.app-skin-vscode gmp-place-autocomplete { --gmpx-color-surface: var(--vscode-input-bg); --gmpx-color-on-surface: var(--vscode-text); --gmpx-color-on-surface-variant: var(--vscode-text-muted); --gmpx-color-primary: var(--vscode-accent); } html.app-skin-vscode .aa-shell { --aa-primary: var(--vscode-accent); --aa-primary-soft: rgba(var(--vscode-accent-rgb), 0.12); --aa-success: var(--vscode-success); --aa-danger: var(--vscode-danger); --aa-warning: var(--vscode-warning); --aa-surface: var(--vscode-surface); --aa-surface-soft: var(--vscode-chrome-bg); --aa-border: var(--vscode-border); --aa-text: var(--vscode-text); --aa-muted: var(--vscode-text-muted); --aa-shadow: var(--vscode-shadow-sm); } html.app-skin-vscode .file-upload-manager { --fu-bg: var(--vscode-editor-bg); --fu-panel: var(--vscode-surface); --fu-panel-soft: var(--vscode-surface-soft); --fu-border: var(--vscode-border-strong); --fu-soft-border: var(--vscode-border); --fu-text: var(--vscode-text); --fu-muted: var(--vscode-text-muted); --fu-accent: var(--vscode-accent); --fu-accent-rgb: var(--vscode-accent-rgb); --fu-info-rgb: var(--vscode-info-rgb); --fu-danger: var(--vscode-danger); } html.app-skin-vscode .task-rules-page { --task-border: var(--vscode-border); --task-panel-bg: var(--vscode-surface); --task-muted: var(--vscode-text-muted); --task-soft: rgba(var(--vscode-accent-rgb), 0.1); --task-soft-strong: rgba(var(--vscode-accent-rgb), 0.17); } html.app-skin-vscode .radni-nalog-list-page { --rn-list-border: var(--vscode-border); --rn-list-muted: var(--vscode-text-muted); --rn-list-surface: var(--vscode-surface); } html.app-skin-vscode :is(.radni-nalog-flow, .radni-nalog-flow-page, .rn-flow, .rn-detail-page) { --rn-flow-border: var(--vscode-border); --rn-flow-surface: var(--vscode-surface); } html.app-skin-vscode :is(.rn-plan-chip, .rn-status-filter) { background-color: var(--vscode-surface); border-color: var(--vscode-border); color: var(--vscode-text); } html.app-skin-vscode :is(.rn-plan-chip.active, .rn-status-filter.active) { background-color: rgba(var(--vscode-accent-rgb), 0.14); border-color: var(--vscode-accent); box-shadow: 0 0 0 2px rgba(var(--vscode-accent-rgb), 0.14); } html.app-skin-vscode .rn-workbench-heading { background-color: rgba(var(--vscode-accent-rgb), 0.09); border-color: rgba(var(--vscode-accent-rgb), 0.3); } html.app-skin-vscode .rn-workbench-heading small { color: var(--vscode-accent); } html.app-skin-vscode .zetra-card-grid { --app-primary: var(--vscode-accent); --app-success: var(--vscode-success); --app-warning: var(--vscode-warning); --app-danger: var(--vscode-danger); --app-dark: var(--vscode-text-strong); --app-gray-100: var(--vscode-chrome-bg); --app-gray-200: var(--vscode-surface-soft); --app-gray-300: var(--vscode-border); --app-gray-500: var(--vscode-text-inactive); --app-gray-600: var(--vscode-text-muted); } html.app-skin-vscode, html.app-skin-vscode body, html.app-skin-vscode .report-dashboard { --report-primary: var(--vscode-accent); --report-primary-light: var(--vscode-link); --report-primary-dark: var(--vscode-accent-hover); --report-primary-50: rgba(var(--vscode-accent-rgb), 0.08); --report-primary-100: rgba(var(--vscode-accent-rgb), 0.14); --report-success: var(--vscode-success); --report-success-light: #56b96a; --report-success-50: rgba(var(--vscode-success-rgb), 0.1); --report-warning: var(--vscode-warning); --report-warning-50: rgba(var(--vscode-warning-rgb), 0.11); --report-danger: var(--vscode-danger); --report-danger-50: rgba(var(--vscode-danger-rgb), 0.09); --report-slate-50: #ffffff; --report-slate-100: #f3f3f3; --report-slate-200: #e5e5e5; --report-slate-300: #cecece; --report-slate-400: #868686; --report-slate-500: #767676; --report-slate-600: #616161; --report-slate-700: #3b3b3b; --report-slate-800: #1f1f1f; --report-slate-900: #111111; --report-shadow-sm: var(--vscode-shadow-sm); --report-shadow-md: var(--vscode-shadow-sm); --report-shadow-lg: var(--vscode-shadow); --report-shadow-xl: var(--vscode-shadow); } html.app-skin-vscode.dark-mode, html.app-skin-vscode.dark-mode body, html.app-skin-vscode.dark-mode .report-dashboard { --report-success-light: #6ccf7d; --report-slate-50: #1f1f1f; --report-slate-100: #222222; --report-slate-200: #2b2b2b; --report-slate-300: #3c3c3c; --report-slate-400: #5a5a5a; --report-slate-500: #868686; --report-slate-600: #9d9d9d; --report-slate-700: #cccccc; --report-slate-800: #ffffff; --report-slate-900: #ffffff; } /* -------------------------------------------------------------------------- Application shell, header and sidebar -------------------------------------------------------------------------- */ html.app-skin-vscode body { background-color: var(--vscode-editor-bg); color: var(--vscode-text); } html.app-skin-vscode #app, html.app-skin-vscode #content.app-content, html.app-skin-vscode .app-content, html.app-skin-vscode .erp-app-shell { background-color: var(--vscode-editor-bg); color: var(--vscode-text); } html.app-skin-vscode #header.app-header { background: var(--vscode-chrome-bg) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text) !important; } html.app-skin-vscode #header.app-header :is(.navbar-brand, .nav-link, .navbar-nav > li > a) { color: var(--vscode-text) !important; } html.app-skin-vscode #header.app-header :is(.nav-link, .navbar-nav > li > a):hover, html.app-skin-vscode #header.app-header :is(.nav-link, .navbar-nav > li > a):focus { background-color: var(--vscode-hover-bg) !important; color: var(--vscode-text-strong) !important; } html.app-skin-vscode #header.app-header :is(.form-control, .app-header-search-input) { background-color: var(--vscode-input-bg) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode :is(#sidebar.app-sidebar, .app-sidebar-bg) { background: var(--vscode-chrome-bg) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text); } html.app-skin-vscode .app-sidebar .menu .menu-header { color: var(--vscode-text-inactive) !important; } html.app-skin-vscode .app-sidebar .menu .menu-divider { background-color: var(--vscode-border) !important; } html.app-skin-vscode .app-sidebar .menu .menu-item > .menu-link, html.app-skin-vscode .app-sidebar-float-submenu-container .menu-item > .menu-link { color: var(--vscode-text-muted) !important; } html.app-skin-vscode .app-sidebar .menu .menu-item > .menu-link:hover, html.app-skin-vscode .app-sidebar .menu .menu-item > .menu-link:focus, html.app-skin-vscode .app-sidebar-float-submenu-container .menu-item > .menu-link:hover, html.app-skin-vscode .app-sidebar-float-submenu-container .menu-item > .menu-link:focus { background-color: var(--vscode-hover-bg) !important; color: var(--vscode-text-strong) !important; } html.app-skin-vscode .app-sidebar .menu .menu-item.active > .menu-link, html.app-skin-vscode .app-sidebar-float-submenu-container .menu-item.active > .menu-link { background-color: var(--vscode-selected-bg) !important; color: var(--vscode-text-strong) !important; } html.app-skin-vscode .app-sidebar .menu .menu-item.active > .menu-link :is(.menu-icon, .menu-caret), html.app-skin-vscode .app-sidebar .menu .menu-item.active > .menu-link > .menu-icon { color: var(--vscode-accent) !important; } /* zetra-sidebar.css uses ID-scoped rules; mirror that specificity so active labels keep VS Code text hierarchy while the icon/caret retain the accent. */ html.app-skin-vscode #sidebar.app-sidebar .menu .menu-item:is(.active, .expand) > .menu-link { color: var(--vscode-text-strong) !important; } html.app-skin-vscode #sidebar.app-sidebar .menu .menu-item:is(.active, .expand) > .menu-link :is(.menu-icon, .menu-caret), html.app-skin-vscode #sidebar.app-sidebar .menu .menu-item:is(.active, .expand) > .menu-link > .menu-icon { color: var(--vscode-accent) !important; } html.app-skin-vscode .app-sidebar .menu .menu-item > .menu-link .menu-badge { background: var(--vscode-selected-bg) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .app-sidebar .menu .menu-submenu > .menu-item > .menu-link::after, html.app-skin-vscode .app-sidebar .menu .menu-submenu > .menu-item::before, html.app-skin-vscode .app-sidebar-float-submenu-container .menu-item::before, html.app-skin-vscode .app-sidebar-float-submenu-container .menu-item > .menu-link::after, html.app-skin-vscode .app-sidebar-float-submenu-arrow, html.app-skin-vscode .app-sidebar-float-submenu-line { background-color: var(--vscode-border-strong) !important; } html.app-skin-vscode .app-sidebar .menu .menu-submenu > .menu-item::after, html.app-skin-vscode .app-sidebar-float-submenu-container .menu-item::after { background-color: var(--vscode-chrome-bg) !important; border-color: var(--vscode-border-strong) !important; } html.app-skin-vscode .app-sidebar .menu .menu-submenu > .menu-item.active::after, html.app-skin-vscode .app-sidebar-float-submenu-container .menu-item.active::after { border-color: var(--vscode-accent) !important; } html.app-skin-vscode .app-sidebar .menu .menu-profile { background: var(--vscode-surface-soft) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .app-sidebar .menu .menu-profile :is(.menu-profile-link, .menu-profile-info) { color: var(--vscode-text) !important; } html.app-skin-vscode .app-sidebar .menu .menu-profile .menu-profile-info :is(small, .small) { color: var(--vscode-text-muted) !important; } html.app-skin-vscode .app-sidebar :is(.app-sidebar-minify-btn, .menu-search .form-control) { background-color: var(--vscode-input-bg) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text-muted) !important; } html.app-skin-vscode .app-sidebar .app-sidebar-minify-btn:hover, html.app-skin-vscode .app-sidebar .app-sidebar-minify-btn:focus { background-color: var(--vscode-hover-bg) !important; color: var(--vscode-text-strong) !important; } html.app-skin-vscode .app-sidebar-float-submenu-container { background: var(--vscode-surface-elevated) !important; border-color: var(--vscode-border-strong) !important; box-shadow: var(--vscode-shadow); } /* -------------------------------------------------------------------------- Bootstrap and ColorAdmin controls -------------------------------------------------------------------------- */ html.app-skin-vscode a:not(.btn) { --bs-link-color-rgb: var(--vscode-accent-rgb); } html.app-skin-vscode :is(.form-control, .form-select, .input-group-text, .form-control-plaintext) { background-color: var(--vscode-input-bg); border-color: var(--vscode-border-strong); color: var(--vscode-text); } html.app-skin-vscode :is(.form-control, .form-select):focus { background-color: var(--vscode-input-bg); border-color: var(--vscode-accent); color: var(--vscode-text); box-shadow: 0 0 0 0.2rem var(--vscode-focus-ring); } html.app-skin-vscode :is(.form-control, .form-select):disabled, html.app-skin-vscode :is(.form-control, .form-select)[readonly] { background-color: var(--vscode-surface-soft); border-color: var(--vscode-border); color: var(--vscode-text-inactive); opacity: 1; } html.app-skin-vscode :is(.form-control, .form-select, .select2-search__field)::placeholder { color: var(--vscode-placeholder) !important; opacity: 1; } html.app-skin-vscode .form-check-input { background-color: var(--vscode-input-bg); border-color: var(--vscode-border-strong); } html.app-skin-vscode .form-check-input:checked { background-color: var(--vscode-accent); border-color: var(--vscode-accent); } html.app-skin-vscode .form-check-input:focus { border-color: var(--vscode-accent); box-shadow: 0 0 0 0.2rem var(--vscode-focus-ring); } html.app-skin-vscode .form-range::-webkit-slider-thumb { background-color: var(--vscode-accent); } html.app-skin-vscode .form-range::-moz-range-thumb { background-color: var(--vscode-accent); } html.app-skin-vscode .btn-primary, html.app-skin-vscode .btn-theme { --bs-btn-color: #ffffff; --bs-btn-bg: var(--vscode-accent); --bs-btn-border-color: var(--vscode-accent); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: var(--vscode-accent-hover); --bs-btn-hover-border-color: var(--vscode-accent-hover); --bs-btn-focus-shadow-rgb: var(--vscode-accent-rgb); --bs-btn-active-color: #ffffff; --bs-btn-active-bg: var(--vscode-accent-hover); --bs-btn-active-border-color: var(--vscode-accent-hover); --bs-btn-disabled-color: #ffffff; --bs-btn-disabled-bg: var(--vscode-accent); --bs-btn-disabled-border-color: var(--vscode-accent); } html.app-skin-vscode .btn-outline-primary { --bs-btn-color: var(--vscode-accent); --bs-btn-border-color: var(--vscode-accent); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: var(--vscode-accent); --bs-btn-hover-border-color: var(--vscode-accent); --bs-btn-focus-shadow-rgb: var(--vscode-accent-rgb); --bs-btn-active-color: #ffffff; --bs-btn-active-bg: var(--vscode-accent-hover); --bs-btn-active-border-color: var(--vscode-accent-hover); } html.app-skin-vscode :is(.btn-secondary, .btn-light, .btn-default, .btn-white) { --bs-btn-color: var(--vscode-text); --bs-btn-bg: var(--vscode-surface-soft); --bs-btn-border-color: var(--vscode-border-strong); --bs-btn-hover-color: var(--vscode-text-strong); --bs-btn-hover-bg: var(--vscode-hover-bg); --bs-btn-hover-border-color: var(--vscode-border-strong); --bs-btn-active-color: var(--vscode-text-strong); --bs-btn-active-bg: var(--vscode-selected-bg); --bs-btn-active-border-color: var(--vscode-border-strong); background-color: var(--vscode-surface-soft); border-color: var(--vscode-border-strong); color: var(--vscode-text); } html.app-skin-vscode :is(.btn-outline-secondary, .btn-outline-dark) { --bs-btn-color: var(--vscode-text-muted); --bs-btn-border-color: var(--vscode-border-strong); --bs-btn-hover-color: var(--vscode-text-strong); --bs-btn-hover-bg: var(--vscode-hover-bg); --bs-btn-hover-border-color: var(--vscode-border-strong); --bs-btn-active-color: var(--vscode-text-strong); --bs-btn-active-bg: var(--vscode-selected-bg); --bs-btn-active-border-color: var(--vscode-border-strong); } html.app-skin-vscode .btn-success { --bs-btn-color: #ffffff; --bs-btn-bg: var(--vscode-button-success-bg); --bs-btn-border-color: var(--vscode-button-success-bg); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: var(--vscode-button-success-hover); --bs-btn-hover-border-color: var(--vscode-button-success-hover); --bs-btn-active-color: #ffffff; --bs-btn-active-bg: var(--vscode-button-success-active); --bs-btn-active-border-color: var(--vscode-button-success-active); background: var(--vscode-button-success-bg); border-color: var(--vscode-button-success-bg); color: #ffffff; } html.app-skin-vscode .btn-danger { --bs-btn-color: #ffffff; --bs-btn-bg: var(--vscode-button-danger-bg); --bs-btn-border-color: var(--vscode-button-danger-bg); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: var(--vscode-button-danger-hover); --bs-btn-hover-border-color: var(--vscode-button-danger-hover); --bs-btn-active-color: #ffffff; --bs-btn-active-bg: var(--vscode-button-danger-active); --bs-btn-active-border-color: var(--vscode-button-danger-active); background: var(--vscode-button-danger-bg); border-color: var(--vscode-button-danger-bg); color: #ffffff; } html.app-skin-vscode .btn-warning { --bs-btn-color: #1f1f1f; --bs-btn-bg: var(--vscode-warning); --bs-btn-border-color: var(--vscode-warning); --bs-btn-hover-color: #1f1f1f; --bs-btn-hover-bg: #d7b51a; --bs-btn-hover-border-color: #d7b51a; --bs-btn-active-color: #1f1f1f; --bs-btn-active-bg: #b79500; --bs-btn-active-border-color: #b79500; } html.app-skin-vscode .btn-info { --bs-btn-color: #ffffff; --bs-btn-bg: var(--vscode-button-info-bg); --bs-btn-border-color: var(--vscode-button-info-bg); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: var(--vscode-button-info-hover); --bs-btn-hover-border-color: var(--vscode-button-info-hover); --bs-btn-active-color: #ffffff; --bs-btn-active-bg: var(--vscode-button-info-hover); --bs-btn-active-border-color: var(--vscode-button-info-hover); background: var(--vscode-button-info-bg); border-color: var(--vscode-button-info-bg); color: #ffffff; } html.app-skin-vscode .btn-success:is(:hover, :focus) { background: var(--vscode-button-success-hover); border-color: var(--vscode-button-success-hover); color: #ffffff; } html.app-skin-vscode .btn-success:is(:active, .active), html.app-skin-vscode .show > .btn-success.dropdown-toggle { background: var(--vscode-button-success-active); border-color: var(--vscode-button-success-active); color: #ffffff; } html.app-skin-vscode .btn-danger:is(:hover, :focus) { background: var(--vscode-button-danger-hover); border-color: var(--vscode-button-danger-hover); color: #ffffff; } html.app-skin-vscode .btn-danger:is(:active, .active), html.app-skin-vscode .show > .btn-danger.dropdown-toggle { background: var(--vscode-button-danger-active); border-color: var(--vscode-button-danger-active); color: #ffffff; } html.app-skin-vscode .btn-info:is(:hover, :focus, :active, .active), html.app-skin-vscode .show > .btn-info.dropdown-toggle { background: var(--vscode-button-info-hover); border-color: var(--vscode-button-info-hover); color: #ffffff; } html.app-skin-vscode :is(.btn-secondary, .btn-light, .btn-default, .btn-white):hover, html.app-skin-vscode :is(.btn-secondary, .btn-light, .btn-default, .btn-white):focus { background-color: var(--vscode-hover-bg); border-color: var(--vscode-border-strong); color: var(--vscode-text-strong); } html.app-skin-vscode .card { --bs-card-color: var(--vscode-text); --bs-card-bg: var(--vscode-surface); --bs-card-border-color: var(--vscode-border); --bs-card-cap-color: var(--vscode-text); --bs-card-cap-bg: var(--vscode-chrome-bg); --bs-card-title-color: var(--vscode-text-strong); --bs-card-subtitle-color: var(--vscode-text-muted); background-color: var(--vscode-surface); border-color: var(--vscode-border); color: var(--vscode-text); } html.app-skin-vscode :is(.card-header, .card-footer) { background-color: var(--vscode-chrome-bg); border-color: var(--vscode-border); } html.app-skin-vscode :is(.panel, .widget, .well) { background-color: var(--vscode-surface); border-color: var(--vscode-border); color: var(--vscode-text); } html.app-skin-vscode :is(.panel-heading, .panel-footer, .widget-header) { background-color: var(--vscode-chrome-bg); border-color: var(--vscode-border); color: var(--vscode-text-strong); } html.app-skin-vscode .dropdown-menu { --bs-dropdown-color: var(--vscode-text); --bs-dropdown-bg: var(--vscode-surface-elevated); --bs-dropdown-border-color: var(--vscode-border-strong); --bs-dropdown-divider-bg: var(--vscode-border); --bs-dropdown-link-color: var(--vscode-text); --bs-dropdown-link-hover-color: var(--vscode-text-strong); --bs-dropdown-link-hover-bg: var(--vscode-hover-bg); --bs-dropdown-link-active-color: #ffffff; --bs-dropdown-link-active-bg: var(--vscode-accent); --bs-dropdown-link-disabled-color: var(--vscode-text-inactive); --bs-dropdown-header-color: var(--vscode-text-muted); box-shadow: var(--vscode-shadow); } html.app-skin-vscode .modal-content { --bs-modal-color: var(--vscode-text); --bs-modal-bg: var(--vscode-surface-elevated); --bs-modal-border-color: var(--vscode-border-strong); --bs-modal-header-border-color: var(--vscode-border); --bs-modal-footer-border-color: var(--vscode-border); background-color: var(--vscode-surface-elevated); border-color: var(--vscode-border-strong); color: var(--vscode-text); box-shadow: var(--vscode-shadow); } html.app-skin-vscode :is(.modal-header, .modal-footer) { border-color: var(--vscode-border); } html.app-skin-vscode .offcanvas { --bs-offcanvas-color: var(--vscode-text); --bs-offcanvas-bg: var(--vscode-surface-elevated); --bs-offcanvas-border-color: var(--vscode-border-strong); } html.app-skin-vscode .popover { --bs-popover-bg: var(--vscode-surface-elevated); --bs-popover-border-color: var(--vscode-border-strong); --bs-popover-header-bg: var(--vscode-chrome-bg); --bs-popover-header-color: var(--vscode-text-strong); --bs-popover-body-color: var(--vscode-text); box-shadow: var(--vscode-shadow); } html.app-skin-vscode .toast { --bs-toast-color: var(--vscode-text); --bs-toast-bg: var(--vscode-surface-elevated); --bs-toast-border-color: var(--vscode-border-strong); --bs-toast-header-color: var(--vscode-text-muted); --bs-toast-header-bg: var(--vscode-chrome-bg); --bs-toast-header-border-color: var(--vscode-border); } html.app-skin-vscode .list-group { --bs-list-group-color: var(--vscode-text); --bs-list-group-bg: var(--vscode-surface); --bs-list-group-border-color: var(--vscode-border); --bs-list-group-action-color: var(--vscode-text); --bs-list-group-action-hover-color: var(--vscode-text-strong); --bs-list-group-action-hover-bg: var(--vscode-hover-bg); --bs-list-group-action-active-color: var(--vscode-text-strong); --bs-list-group-action-active-bg: var(--vscode-selected-bg); --bs-list-group-active-color: #ffffff; --bs-list-group-active-bg: var(--vscode-accent); --bs-list-group-active-border-color: var(--vscode-accent); --bs-list-group-disabled-color: var(--vscode-text-inactive); --bs-list-group-disabled-bg: var(--vscode-surface-soft); } html.app-skin-vscode .accordion { --bs-accordion-color: var(--vscode-text); --bs-accordion-bg: var(--vscode-surface); --bs-accordion-border-color: var(--vscode-border); --bs-accordion-btn-color: var(--vscode-text); --bs-accordion-btn-bg: var(--vscode-surface); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem var(--vscode-focus-ring); --bs-accordion-active-color: var(--vscode-text-strong); --bs-accordion-active-bg: var(--vscode-selected-bg); } html.app-skin-vscode .nav-tabs { --bs-nav-tabs-border-color: var(--vscode-border); --bs-nav-tabs-link-hover-border-color: var(--vscode-border) var(--vscode-border) var(--vscode-border-strong); --bs-nav-tabs-link-active-color: var(--vscode-text-strong); --bs-nav-tabs-link-active-bg: var(--vscode-surface); --bs-nav-tabs-link-active-border-color: var(--vscode-border-strong) var(--vscode-border-strong) var(--vscode-surface); } html.app-skin-vscode .nav-pills { --bs-nav-pills-link-active-color: #ffffff; --bs-nav-pills-link-active-bg: var(--vscode-accent); } html.app-skin-vscode .nav-link { --bs-nav-link-color: var(--vscode-text-muted); --bs-nav-link-hover-color: var(--vscode-text-strong); } html.app-skin-vscode .pagination { --bs-pagination-color: var(--vscode-text); --bs-pagination-bg: var(--vscode-surface); --bs-pagination-border-color: var(--vscode-border); --bs-pagination-hover-color: var(--vscode-text-strong); --bs-pagination-hover-bg: var(--vscode-hover-bg); --bs-pagination-hover-border-color: var(--vscode-border-strong); --bs-pagination-focus-color: var(--vscode-text-strong); --bs-pagination-focus-bg: var(--vscode-selected-bg); --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--vscode-focus-ring); --bs-pagination-active-color: #ffffff; --bs-pagination-active-bg: var(--vscode-accent); --bs-pagination-active-border-color: var(--vscode-accent); --bs-pagination-disabled-color: var(--vscode-text-inactive); --bs-pagination-disabled-bg: var(--vscode-surface-soft); --bs-pagination-disabled-border-color: var(--vscode-border); } html.app-skin-vscode .table { --bs-table-color: var(--vscode-text); --bs-table-bg: var(--vscode-surface); --bs-table-border-color: var(--vscode-border); --bs-table-striped-color: var(--vscode-text); --bs-table-striped-bg: var(--vscode-chrome-bg); --bs-table-active-color: var(--vscode-text-strong); --bs-table-active-bg: var(--vscode-selected-bg); --bs-table-hover-color: var(--vscode-text-strong); --bs-table-hover-bg: var(--vscode-hover-bg); color: var(--vscode-text); } html.app-skin-vscode .table > :not(caption) > * > * { border-color: var(--vscode-border); } html.app-skin-vscode :is(.table-light, .table-secondary) { --bs-table-color: var(--vscode-text); --bs-table-bg: var(--vscode-chrome-bg); --bs-table-border-color: var(--vscode-border); --bs-table-striped-bg: var(--vscode-surface-soft); --bs-table-hover-bg: var(--vscode-hover-bg); } html.app-skin-vscode .progress { --bs-progress-bg: var(--vscode-surface-soft); --bs-progress-bar-bg: var(--vscode-accent); } html.app-skin-vscode :is(.bg-white, .bg-body) { background-color: var(--vscode-surface) !important; } html.app-skin-vscode :is(.bg-light, .bg-body-tertiary) { background-color: var(--vscode-surface-soft) !important; } html.app-skin-vscode hr { border-color: var(--vscode-border); opacity: 1; } /* -------------------------------------------------------------------------- Worker dashboard and POS pages with legacy hard-coded neutral colors -------------------------------------------------------------------------- */ html.app-skin-vscode :is( .dashboard-card, .mobile-list-card, .attendance-card, .shift-card, .pa-card, .settings-card, .shift-info, .summary-card, .detail-section, .form-section, .request-card, .holiday-card, .zapisnik-card, .radni-nalog-card, .narudzba-list-card, .tovarni-list-card, .utrosak-card, .priprema-card, .pn3-card, .artikal-editor-form, .calendar-container, .quick-nav-card, .shift-info-card, .detail-card, .time-block, .stat-item, .vehicle-card, .image-upload-card, .stavka-item, .stavka-detailed, .check-item, .check-item-detailed, .materijal-card, .korisnik-card, .faza-card, .artikal-card, .artikli-card, .stavke-card, .order-card, .aktivacije-card, .wh-chart-card, .app-stats-card, .info-card, .list-card, .list-item, .pos-sidebar, .product-modal-content, .confirm-modal-content, .event-modal, .ag-grid-content ) { background-color: var(--vscode-surface) !important; color: var(--vscode-text); } html.app-skin-vscode :is( .settings-card-header, .detail-card .detail-header, .wh-section-header, .wh-section > .section-header, .tabs-container, .zapisnik-tab-nav, .app-bottom-bar, .narudzba-summary, .bottom-fixed-container, .narudzba-header, .narudzba-search, .zapisnik-status-bar, .ag-grid-header, .ag-grid-search, .week-selector, .month-selector, .year-selector, .view-toggle, .category-scroll, .calendar-legend ) { background-color: var(--vscode-chrome-bg) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text); } html.app-skin-vscode :is( .time-display, .stats-row, .attendance-meta, .shift-meta, .breaks-section, .detail-row, .narudzba-list-footer, .totals-summary, .zapisnik-info-item, .pn3-detalji-item, .actual-attendance-section, .team-member, .swap-visual, .request-reason, .days-preview, .faza-materials, .artikal-history-nav, .artikal-history-summary > div, .artikal-price-calc-row, .sp-quantity-factor-calculator ) { background-color: var(--vscode-surface-soft) !important; border-color: var(--vscode-border) !important; } html.app-skin-vscode :is( .card-title, .card-value, .attendance-date, .shift-date, .pa-broj, .zapisnik-broj, .rn-broj, .detail-date, .form-section-title, .request-type, .holiday-name, .priprema-broj, .pn3-broj, .artikal-editor-title, .current-week, .current-month, .current-year, .summary-value, .time-value, .shift-time-value, .stat-value, .user-name, .colleague-name, .korisnik-name, .artikal-name, .materijal-name, .stavka-naziv, .comment-author, .modal-title, .modal-value, .detail-title, .detail-value, .zapisnik-info-value, .narudzba-item-naziv, .narudzba-list-broj, .tovarni-broj, .tovarni-vozilo-naziv, .tl-partner-naziv, .utrosak-datum, .utrosak-vozilo-naziv, .utrosak-detail-value, .priprema-item-naziv, .priprema-qty-needed, .pn3-vozac-ime, .pn3-detalji-value, .pn3-relacija-do, .faza-name, .check-item-text, .shift-info-title, .breaks-title, .correction-title, .pending-correction-title, .timer-display, .order-partner, .item-name, .task-rule-stat span ) { color: var(--vscode-text-strong) !important; } html.app-skin-vscode :is( .card-subtitle, .attendance-day, .shift-day, .pa-tip, .rn-tip, .time-label, .shift-time-label, .meta-item, .shift-meta-item, .pa-meta-item, .zapisnik-meta-item, .rn-meta-item, .request-meta, .holiday-meta, .holiday-meta-item, .tovarni-meta-item, .pn3-meta-item, .user-role, .colleague-shift, .korisnik-role, .artikal-sifra, .materijal-detail, .comment-date, .comment-text, .summary-label, .stat-label, .detail-day, .detail-label, .modal-label, .form-label, .zapisnik-info-label, .narudzba-item-sifra, .narudzba-list-date, .tovarni-vozilo-reg, .tl-partner-adresa, .utrosak-vozilo-reg, .utrosak-detail-label, .priprema-item-lokacija, .pn3-detalji-label, .pn3-relacija-od, .pn3-relacija-km-label, .faza-status-text, .actual-hours, .team-label, .empty-state, .empty-state p, .empty-notice, .empty-stavke, .file-upload-text, .photo-upload-text, .photo-upload-hint, .days-preview-label, .balance-item-label, .artikal-form-label, .artikal-toggle-label, .utrosak-form-title, .tovarni-detalji-title, .order-amount-label, .order-meta-item, .order-note, .item-category, .item-id, .item-barcode, .item-note, .item-action-hint ) { color: var(--vscode-text-muted) !important; } html.app-skin-vscode :is( .filter-chip, .view-toggle-btn, .week-nav-btn, .month-nav-btn, .year-nav-btn, .quick-action-btn.secondary, .grid-filter-btn, .wh-tab-btn, .category-chip, .type-option, .shift-option, .colleague-option, .priority-option .priority-label, .order-status-btn, .filter-toggle ) { background-color: var(--vscode-surface-soft) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode :is( .filter-chip, .view-toggle-btn, .week-nav-btn, .month-nav-btn, .year-nav-btn, .quick-action-btn.secondary, .grid-filter-btn, .wh-tab-btn, .category-chip, .type-option, .shift-option, .colleague-option, .order-status-btn, .filter-toggle ):hover { background-color: var(--vscode-hover-bg) !important; border-color: var(--vscode-accent) !important; color: var(--vscode-text-strong) !important; } html.app-skin-vscode :is( .filter-chip.active, .view-toggle-btn.active, .grid-filter-btn.active, .wh-tab-btn.active, .category-chip.active, .type-option.active, .type-option.selected, .shift-option.active, .colleague-option.active, .filter-toggle.active, .artikal-card.selected, .vehicle-card.selected ) { background-color: rgba(var(--vscode-accent-rgb), 0.18) !important; border-color: var(--vscode-accent) !important; color: var(--vscode-text-strong) !important; } html.app-skin-vscode :is( .file-upload-area, .photo-upload-area, .artikal-image-upload, .image-upload-card ) { background-color: var(--vscode-surface-soft) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text-muted) !important; } html.app-skin-vscode :is( .artikal-form-input, .filter-input, .date-input, .wh-grid-filter input, .ag-grid-search input ) { background-color: var(--vscode-input-bg) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode :is(.loading-overlay, .calendar-wrapper) { background-color: var(--vscode-surface-elevated) !important; color: var(--vscode-text) !important; } /* Report pages use a second, older component vocabulary. */ html.app-skin-vscode :is(.reports-page, .report-dashboard) { background: var(--vscode-editor-bg) !important; color: var(--vscode-text); } html.app-skin-vscode :is( .report-topbar, .report-dashboard .card, .report-type-selector, .filter-card, .reports-page .summary-card, .filter-drawer ) { background-color: var(--vscode-surface) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text); } html.app-skin-vscode .reports-page .tabs-container, html.app-skin-vscode .reports-page .nav-tabs .nav-link.active, html.app-skin-vscode .quick-tip code { background-color: var(--vscode-surface-soft) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .report-type-btn:hover { background-color: var(--vscode-hover-bg) !important; } html.app-skin-vscode .report-type-btn.active { background-color: var(--vscode-accent) !important; color: #ffffff !important; } /* -------------------------------------------------------------------------- Route planning and calendar pages -------------------------------------------------------------------------- */ html.app-skin-vscode :is( #pickingPlanBar, .route-user-filter, .route-stops-panel, .route-header-bar, .route-optimizer-options, .route-optimization-panel, .stops-list-container, .weekly-calendar, .route-filter-tabs ) { background-color: var(--vscode-editor-bg) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text); } html.app-skin-vscode :is( .route-sidebar-header-card, .route-optimization-summary, .add-stop-bar, .route-sidebar-empty ) { background-color: var(--vscode-surface-soft) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text-muted); } html.app-skin-vscode :is(.stop-card, .day-card, .route-stop-card) { background-color: var(--vscode-surface) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text); } html.app-skin-vscode :is(.stop-card, .day-card, .route-stop-card):hover { background-color: var(--vscode-hover-bg) !important; border-color: var(--vscode-border-strong) !important; } html.app-skin-vscode :is(.stop-card.active, .day-card.today, .route-stop-next) { background-color: rgba(var(--vscode-accent-rgb), 0.13) !important; border-color: var(--vscode-accent) !important; } html.app-skin-vscode :is(.stop-card.optimization-preview, .route-stop-completed, .day-card.status-zavrseno) { background-color: rgba(var(--vscode-success-rgb), 0.12) !important; border-color: var(--vscode-success) !important; } html.app-skin-vscode .stop-card.preview-missing-gps { background-color: rgba(var(--vscode-warning-rgb), 0.13) !important; border-color: var(--vscode-warning) !important; } html.app-skin-vscode :is(.stop-partner-name, .day-card-date, .route-stop-name, .weekly-nav h5) { color: var(--vscode-text-strong) !important; } html.app-skin-vscode :is( .stop-address, .stop-meta, .day-card-dayname, .day-card-stats, .route-stop-time, .route-stop-address, .route-stop-note, .route-progress-text ) { color: var(--vscode-text-muted) !important; } html.app-skin-vscode .route-filter-tab { color: var(--vscode-text-muted) !important; } html.app-skin-vscode .route-filter-tab:hover { background-color: var(--vscode-hover-bg) !important; color: var(--vscode-text-strong) !important; } html.app-skin-vscode .route-filter-tab.active { border-color: var(--vscode-accent) !important; color: var(--vscode-accent) !important; } html.app-skin-vscode .route-filter-count { background-color: var(--vscode-surface-soft) !important; color: var(--vscode-text-muted) !important; } html.app-skin-vscode .route-filter-tab.active .route-filter-count { background-color: var(--vscode-accent) !important; color: #ffffff !important; } html.app-skin-vscode :is(.leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-control-layers) { background-color: var(--vscode-surface-elevated); color: var(--vscode-text); } html.app-skin-vscode .leaflet-container a.leaflet-popup-close-button { color: var(--vscode-text-muted); } html.app-skin-vscode .leaflet-bar a, html.app-skin-vscode .leaflet-bar a:hover { background-color: var(--vscode-surface-elevated); border-color: var(--vscode-border); color: var(--vscode-text); } html.app-skin-vscode .calendar { background-color: var(--vscode-surface) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text); } html.app-skin-vscode .fc { --fc-page-bg-color: var(--vscode-surface); --fc-neutral-bg-color: var(--vscode-surface-soft); --fc-neutral-text-color: var(--vscode-text-muted); --fc-border-color: var(--vscode-border); --fc-button-text-color: #ffffff; --fc-button-bg-color: var(--vscode-accent); --fc-button-border-color: var(--vscode-accent); --fc-button-hover-bg-color: var(--vscode-accent-hover); --fc-button-hover-border-color: var(--vscode-accent-hover); --fc-button-active-bg-color: var(--vscode-accent-hover); --fc-button-active-border-color: var(--vscode-accent-hover); --fc-event-bg-color: var(--vscode-accent); --fc-event-border-color: var(--vscode-accent); --fc-event-text-color: #ffffff; --fc-list-event-hover-bg-color: var(--vscode-hover-bg); --fc-today-bg-color: rgba(var(--vscode-accent-rgb), 0.1); color: var(--vscode-text); } html.app-skin-vscode .fc-theme-standard :is(td, th, .fc-scrollgrid) { border-color: var(--vscode-border); } html.app-skin-vscode .fc :is(.fc-col-header-cell, .fc-list-day-cushion) { background-color: var(--vscode-chrome-bg); color: var(--vscode-text-strong); } html.app-skin-vscode .fc :is(.fc-daygrid-day-number, .fc-col-header-cell-cushion, .fc-list-event-title) { color: var(--vscode-text); } html.app-skin-vscode .fc .fc-day-today { background-color: rgba(var(--vscode-accent-rgb), 0.1) !important; } html.app-skin-vscode #eventFormModal .modal-header { background-color: var(--vscode-chrome-bg) !important; border-color: var(--vscode-border) !important; } html.app-skin-vscode :is(#detailAttendees, #detailReminders) .list-group-item { background-color: var(--vscode-surface); border-color: var(--vscode-border); color: var(--vscode-text); } /* -------------------------------------------------------------------------- Third-party widgets -------------------------------------------------------------------------- */ html.app-skin-vscode .select2-container--default .select2-selection--single, html.app-skin-vscode .select2-container--default .select2-selection--multiple, html.app-skin-vscode .select2-container--classic .select2-selection--single, html.app-skin-vscode .select2-container--classic .select2-selection--multiple { background-color: var(--vscode-input-bg) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .select2-container--default .select2-selection--single .select2-selection__rendered, html.app-skin-vscode .select2-container--classic .select2-selection--single .select2-selection__rendered, html.app-skin-vscode .select2-container--default .select2-selection--multiple .select2-selection__rendered, html.app-skin-vscode .select2-container--classic .select2-selection--multiple .select2-selection__rendered { color: var(--vscode-text) !important; } html.app-skin-vscode .select2-container--default.select2-container--focus .select2-selection, html.app-skin-vscode .select2-container--classic.select2-container--focus .select2-selection, html.app-skin-vscode .select2-container--open .select2-selection { border-color: var(--vscode-accent) !important; box-shadow: 0 0 0 2px var(--vscode-focus-ring); } html.app-skin-vscode .select2-dropdown { background-color: var(--vscode-surface-elevated) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; box-shadow: var(--vscode-shadow); } html.app-skin-vscode .select2-search--dropdown .select2-search__field { background-color: var(--vscode-input-bg) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .select2-results__option { background-color: transparent; color: var(--vscode-text); } html.app-skin-vscode .select2-results__option--highlighted[aria-selected], html.app-skin-vscode .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--vscode-accent) !important; color: #ffffff !important; } html.app-skin-vscode .select2-results__option--selected, html.app-skin-vscode .select2-results__option[aria-selected="true"] { background-color: var(--vscode-selected-bg) !important; color: var(--vscode-text-strong) !important; } html.app-skin-vscode .select2-selection__choice { background-color: var(--vscode-selected-bg) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .swal2-popup { background: var(--vscode-surface-elevated) !important; border: 1px solid var(--vscode-border-strong); color: var(--vscode-text) !important; } html.app-skin-vscode :is(.swal2-title, .swal2-html-container, .swal2-content) { color: var(--vscode-text) !important; } html.app-skin-vscode :is(.swal2-input, .swal2-textarea, .swal2-select) { background-color: var(--vscode-input-bg) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .swal2-confirm { background-color: var(--vscode-accent) !important; } html.app-skin-vscode .swal2-cancel { background-color: var(--vscode-surface-soft) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .swal2-deny { background-color: var(--vscode-danger) !important; } html.app-skin-vscode .flatpickr-calendar { background: var(--vscode-surface-elevated) !important; border-color: var(--vscode-border-strong) !important; box-shadow: var(--vscode-shadow) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .flatpickr-calendar :is(.flatpickr-months, .flatpickr-month, .flatpickr-weekdays, .flatpickr-weekday) { background: var(--vscode-chrome-bg) !important; color: var(--vscode-text) !important; fill: var(--vscode-text) !important; } html.app-skin-vscode .flatpickr-calendar :is(.flatpickr-current-month, .flatpickr-current-month input.cur-year, .flatpickr-day) { color: var(--vscode-text) !important; } html.app-skin-vscode .flatpickr-day:hover, html.app-skin-vscode .flatpickr-day:focus { background: var(--vscode-hover-bg) !important; border-color: var(--vscode-border-strong) !important; } html.app-skin-vscode .flatpickr-day.today { border-color: var(--vscode-accent) !important; } html.app-skin-vscode .flatpickr-day.selected, html.app-skin-vscode .flatpickr-day.startRange, html.app-skin-vscode .flatpickr-day.endRange { background: var(--vscode-accent) !important; border-color: var(--vscode-accent) !important; color: #ffffff !important; } html.app-skin-vscode .flatpickr-day.inRange { background: rgba(var(--vscode-accent-rgb), 0.16) !important; border-color: transparent !important; box-shadow: none !important; } html.app-skin-vscode .daterangepicker { background-color: var(--vscode-surface-elevated) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; box-shadow: var(--vscode-shadow); } html.app-skin-vscode .daterangepicker::before { border-bottom-color: var(--vscode-border-strong) !important; } html.app-skin-vscode .daterangepicker::after { border-bottom-color: var(--vscode-surface-elevated) !important; } html.app-skin-vscode .daterangepicker :is(.calendar-table, td.off, td.off.in-range, td.off.start-date, td.off.end-date) { background-color: var(--vscode-surface-elevated) !important; border-color: transparent !important; color: var(--vscode-text-inactive) !important; } html.app-skin-vscode .daterangepicker td.available:hover, html.app-skin-vscode .daterangepicker th.available:hover { background-color: var(--vscode-hover-bg) !important; color: var(--vscode-text-strong) !important; } html.app-skin-vscode .daterangepicker td.in-range { background-color: rgba(var(--vscode-accent-rgb), 0.14) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .daterangepicker td.active, html.app-skin-vscode .daterangepicker td.active:hover { background-color: var(--vscode-accent) !important; color: #ffffff !important; } html.app-skin-vscode .daterangepicker .drp-buttons { border-color: var(--vscode-border) !important; } html.app-skin-vscode .jconfirm .jconfirm-box { background-color: var(--vscode-surface-elevated) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; box-shadow: var(--vscode-shadow); } html.app-skin-vscode .jconfirm .jconfirm-box :is(.jconfirm-title, .jconfirm-content) { color: var(--vscode-text) !important; } html.app-skin-vscode :is(.dataTables_wrapper, .dt-container) { color: var(--vscode-text); } html.app-skin-vscode :is(.dataTables_wrapper, .dt-container) :is(input, select) { background-color: var(--vscode-input-bg); border-color: var(--vscode-border-strong); color: var(--vscode-text); } html.app-skin-vscode :is(.dataTables_wrapper, .dt-container) :is(.dataTables_info, .dataTables_length, .dataTables_filter, .dt-info, .dt-length, .dt-search) { color: var(--vscode-text-muted) !important; } html.app-skin-vscode :is(.dataTables_wrapper, .dt-container) :is(.paginate_button, .dt-paging-button) { background: var(--vscode-surface) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text) !important; } html.app-skin-vscode :is(.dataTables_wrapper, .dt-container) :is(.paginate_button, .dt-paging-button):hover { background: var(--vscode-hover-bg) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text-strong) !important; } html.app-skin-vscode .jodit-container, html.app-skin-vscode .jodit-dialog, html.app-skin-vscode .jodit-popup { --jd-color-background-default: var(--vscode-surface); --jd-color-background-active: var(--vscode-selected-bg); --jd-color-background-button-hover: var(--vscode-hover-bg); --jd-color-button-background-hover: var(--vscode-hover-bg); --jd-color-background-gray: var(--vscode-surface-soft); --jd-color-background-light-gray: var(--vscode-chrome-bg); --jd-color-background-selection: rgba(var(--vscode-accent-rgb), 0.18); --jd-color-background-filebrowser-folders: var(--vscode-chrome-bg); --jd-color-border: var(--vscode-border); --jd-color-border-dark: var(--vscode-border-strong); --jd-color-border-active: var(--vscode-accent); --jd-color-border-selected: var(--vscode-accent); --jd-color-default: var(--vscode-text); --jd-color-dark: var(--vscode-text-strong); --jd-color-text: var(--vscode-text); --jd-color-text-icons: var(--vscode-text-muted); --jd-color-icon: var(--vscode-text-muted); --jd-color-label: var(--vscode-text-muted); --jd-color-gray: var(--vscode-text-inactive); --jd-color-gray-dark: var(--vscode-text-muted); --jd-color-placeholder: var(--vscode-placeholder); --jd-color-panel: var(--vscode-chrome-bg); --jd-color-separator: var(--vscode-border); --jd-color-selection: var(--vscode-accent); --jd-color-selection-area: rgba(var(--vscode-accent-rgb), 0.16); --jd-color-source-area: var(--vscode-input-bg); --jd-color-white: var(--vscode-surface); --jd-color-blue: var(--vscode-accent); --jd-color-light-blue: var(--vscode-link); --jd-color-red: var(--vscode-danger); --jd-color-error: var(--vscode-danger); --jd-source-bg: var(--vscode-input-bg); --jd-source-border: var(--vscode-border-strong); --jd-sidebar-bg: var(--vscode-surface-elevated); --jd-sidebar-border-color: var(--vscode-border); --jd-sidebar-color: var(--vscode-text); --jd-tooltip-background-color: var(--vscode-surface-elevated); --jd-tooltip-border-color: var(--vscode-border-strong); --jd-tooltip-color: var(--vscode-text); --jd-popup-box-shadow: var(--vscode-shadow); --jd-focus-input-box-shadow: 0 0 0 2px var(--vscode-focus-ring); color: var(--vscode-text); } html.app-skin-vscode :is( .jodit-container:not(.jodit_inline), .jodit-workplace, .jodit-wysiwyg, .jodit-wysiwyg_iframe, .jodit-source, .jodit-dialog__panel, .jodit-popup__content ) { background-color: var(--vscode-surface) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text) !important; } html.app-skin-vscode :is( .jodit-toolbar__box, .jodit-toolbar-editor-collection, .jodit-status-bar, .jodit-dialog__header, .jodit-dialog__footer ) { background-color: var(--vscode-chrome-bg) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .jodit-ui-button:hover, html.app-skin-vscode .jodit-toolbar-button:hover { background-color: var(--vscode-hover-bg) !important; } html.app-skin-vscode .jodit-ui-button[aria-pressed="true"], html.app-skin-vscode .jodit-toolbar-button_active { background-color: var(--vscode-selected-bg) !important; color: var(--vscode-text-strong) !important; } /* Smaller feature-specific surfaces not fully backed by shared variables. */ html.app-skin-vscode .company-switcher-menu { background-color: var(--vscode-surface-elevated) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .company-switcher-menu .dropdown-header { color: var(--vscode-text-strong) !important; } html.app-skin-vscode .company-switcher-menu .dropdown-item { color: var(--vscode-text) !important; } html.app-skin-vscode .company-switcher-menu .dropdown-item:hover:not(.disabled) { background-color: var(--vscode-hover-bg) !important; } html.app-skin-vscode .company-switcher-menu .dropdown-item.active { background-color: rgba(var(--vscode-accent-rgb), 0.18) !important; color: var(--vscode-link) !important; } html.app-skin-vscode #company-switcher-refresh:hover { background-color: var(--vscode-hover-bg) !important; } html.app-skin-vscode :is( #suggestionsSidebar .erp-subsection, .suggestions-period-selector, .suggestions-coverage, .target-achievement, .suggestion-card, .partner-wizard-doc-card, .partner-wizard-switch-row .form-check, .partner-wizard-person-row, .partner-wizard-summary-grid > div ) { background-color: var(--vscode-surface) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text); } html.app-skin-vscode :is( #suggestionsSidebar .erp-subsection > .erp-subsection-header, .suggestions-nav-tabs, .suggestions-coverage-bar, .target-progress, .partner-wizard-map ) { background-color: var(--vscode-surface-soft) !important; border-color: var(--vscode-border) !important; } html.app-skin-vscode :is(.suggestion-card-name, .suggestions-coverage-title, .target-achievement-head, .partner-wizard-person-main strong) { color: var(--vscode-text-strong) !important; } html.app-skin-vscode :is(.suggestion-card-meta, .suggestions-period-selector label, .partner-wizard-person-meta, .partner-wizard-summary-grid span) { color: var(--vscode-text-muted) !important; } /* Mobile AG Grid cards contain hard-coded white row backgrounds. */ html.app-skin-vscode .zetra-card-grid .ag-row { background-color: var(--vscode-surface) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .zetra-card-grid .ag-row-hover { background-color: var(--vscode-hover-bg) !important; } html.app-skin-vscode .zetra-card-grid .ag-row-selected { background-color: rgba(var(--vscode-accent-rgb), 0.18) !important; border-color: var(--vscode-accent) !important; } html.app-skin-vscode .erp-app-shell .ag-theme-quartz, html.app-skin-vscode .erp-app-shell [class*="ag-theme-"] { --ag-foreground-color: var(--vscode-text); --ag-secondary-foreground-color: var(--vscode-text-muted); --ag-background-color: var(--vscode-surface); --ag-header-background-color: var(--vscode-chrome-bg); --ag-header-foreground-color: var(--vscode-text-strong); --ag-odd-row-background-color: var(--vscode-chrome-bg); --ag-row-hover-color: rgba(var(--vscode-accent-rgb), 0.1); --ag-selected-row-background-color: rgba(var(--vscode-accent-rgb), 0.18); --ag-border-color: var(--vscode-border); --ag-secondary-border-color: var(--vscode-border); --ag-row-border-color: var(--vscode-border); --ag-input-background-color: var(--vscode-input-bg); --ag-input-border-color: var(--vscode-border-strong); --ag-input-focus-border-color: var(--vscode-accent); --ag-input-focus-box-shadow: 0 0 0 2px var(--vscode-focus-ring); } html.app-skin-vscode .erp-app-shell .ag-theme-quartz :is(.ag-root-wrapper, .ag-row), html.app-skin-vscode .erp-app-shell [class*="ag-theme-"] :is(.ag-root-wrapper, .ag-row) { background-color: var(--vscode-surface); border-color: var(--vscode-border); color: var(--vscode-text); } html.app-skin-vscode .erp-app-shell .ag-theme-quartz :is(.ag-header, .ag-row-odd), html.app-skin-vscode .erp-app-shell [class*="ag-theme-"] :is(.ag-header, .ag-row-odd) { background-color: var(--vscode-chrome-bg); border-color: var(--vscode-border); } html.app-skin-vscode .erp-app-shell .ag-theme-quartz :is(.ag-row-hover, .ag-row:hover), html.app-skin-vscode .erp-app-shell [class*="ag-theme-"] :is(.ag-row-hover, .ag-row:hover) { background-color: rgba(var(--vscode-accent-rgb), 0.1); } html.app-skin-vscode .erp-app-shell .ag-theme-quartz :is(.ag-row-selected, .ag-row.ag-row-selected), html.app-skin-vscode .erp-app-shell [class*="ag-theme-"] :is(.ag-row-selected, .ag-row.ag-row-selected) { background-color: rgba(var(--vscode-accent-rgb), 0.18) !important; } html.app-skin-vscode :is(.ag-menu, .ag-tabs, .ag-popup-editor, .ag-picker-field-wrapper) { background-color: var(--vscode-surface-elevated); border-color: var(--vscode-border-strong); color: var(--vscode-text); } /* -------------------------------------------------------------------------- Final cascade bridges for legacy utilities and AG Grid 35 -------------------------------------------------------------------------- */ /* Bootstrap's dark token is a surface token. Foreground usages are bridged explicitly so dark-mode text never becomes dark-on-dark. */ html.app-skin-vscode :is(.erp-slide-header-dark, .text-bg-dark, .bg-dark), html.app-skin-vscode #povratnaAmbalazaKaucijaPanel .povratna-ambalaza-decision-header { background-color: var(--bs-dark) !important; color: #ffffff !important; } html.app-skin-vscode.dark-mode :is(.text-dark, .link-dark, .erp-action-item.erp-action-dark) { color: var(--vscode-text-strong) !important; } /* AG Grid's Quartz theme and application-specific grid CSS both contain concrete colors, so keep the variables and the rendered surfaces aligned. */ html.app-skin-vscode [class*="ag-theme-"] :is( .ag-root-wrapper, .ag-root, .ag-body, .ag-body-viewport, .ag-center-cols-viewport, .ag-center-cols-container, .ag-row ) { background-color: var(--vscode-surface) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text) !important; } html.app-skin-vscode [class*="ag-theme-"] :is( .ag-header, .ag-header-row, .ag-paging-panel, .ag-status-bar, .ag-side-bar, .ag-tool-panel-wrapper ) { background-color: var(--vscode-chrome-bg) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text) !important; } html.app-skin-vscode [class*="ag-theme-"] :is( .ag-header-cell, .ag-header-group-cell, .ag-header-cell-text, .ag-header-group-text ) { color: var(--vscode-text-strong) !important; } html.app-skin-vscode [class*="ag-theme-"] :is(.ag-header-cell, .ag-header-group-cell):hover { background-color: var(--vscode-hover-bg) !important; } html.app-skin-vscode [class*="ag-theme-"] .ag-row-odd:not(.ag-row-selected):not(.ag-row-hover) { background-color: var(--vscode-chrome-bg) !important; } html.app-skin-vscode [class*="ag-theme-"] .ag-row.ag-row-today:not(.ag-row-selected) { background-color: rgba(var(--vscode-accent-rgb), 0.08) !important; border-left: 3px solid var(--vscode-accent) !important; } html.app-skin-vscode.dark-mode [class*="ag-theme-"] .ag-row.ag-row-today:not(.ag-row-selected) { background-color: rgba(var(--vscode-accent-rgb), 0.16) !important; } html.app-skin-vscode [class*="ag-theme-"] :is(.ag-row-hover, .ag-row:hover):not(.ag-row-selected) { background-color: rgba(var(--vscode-accent-rgb), 0.1) !important; } html.app-skin-vscode [class*="ag-theme-"] :is(.ag-row-selected, .ag-row.ag-row-selected) { background-color: rgba(var(--vscode-accent-rgb), 0.18) !important; } html.app-skin-vscode [class*="ag-theme-"] .ag-row-selected.ag-row-hover { background-color: rgba(var(--vscode-accent-rgb), 0.24) !important; } html.app-skin-vscode [class*="ag-theme-"] :is( .ag-cell, .ag-cell-value, .ag-group-value, .ag-paging-row-summary-panel, .ag-paging-page-summary-panel, .ag-paging-description ) { color: var(--vscode-text) !important; } html.app-skin-vscode [class*="ag-theme-"] :is(.ag-cell a, .ag-group-value a) { color: var(--vscode-link) !important; } html.app-skin-vscode [class*="ag-theme-"] :is(.ag-cell-focus, .ag-cell:focus-within) { border-color: var(--vscode-accent) !important; box-shadow: inset 0 0 0 1px var(--vscode-accent) !important; outline: none !important; } html.app-skin-vscode [class*="ag-theme-"] :is( input[class^="ag-"], textarea[class^="ag-"], .ag-picker-field-wrapper ) { background-color: var(--vscode-input-bg) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode [class*="ag-theme-"] :is( input[class^="ag-"], textarea[class^="ag-"], .ag-picker-field-wrapper ):focus-within { border-color: var(--vscode-accent) !important; box-shadow: 0 0 0 2px var(--vscode-focus-ring) !important; } html.app-skin-vscode [class*="ag-theme-"] .ag-checkbox-input-wrapper::after { color: var(--vscode-text-muted) !important; } html.app-skin-vscode [class*="ag-theme-"] .ag-checkbox-input-wrapper:is(.ag-checked, .ag-indeterminate)::after { color: var(--vscode-accent) !important; } html.app-skin-vscode [class*="ag-theme-"] :is(.ag-menu, .ag-tabs, .ag-popup-editor, .ag-picker-list) { background-color: var(--vscode-surface-elevated) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } /* The dark input fill is part of VS Code Dark Modern and must beat older page rules which declare their own dark background with !important. */ html.app-skin-vscode.dark-mode :is( .form-control, .form-select, .input-group-text, .select2-search__field, .ag-input-field-input, .jodit-ui-input__input, .jodit-ui-select__input ) { background-color: #313131 !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode.dark-mode :is(.form-control, .form-select):disabled, html.app-skin-vscode.dark-mode :is(.form-control, .form-select)[readonly] { background-color: var(--vscode-surface-soft) !important; color: var(--vscode-text-inactive) !important; } /* Gray ramp variables remain suitable for borders. Only semantic text elements are lifted to the accessible muted foreground. */ html.app-skin-vscode :is( .text-muted, .text-secondary, .form-text, .help-block, .card-subtitle, .table caption, .dropdown-header, .price-sub, .price-main small, .shift-option-times, .swap-item-label, .time-row-body, .expected-time, .week-names, .list-item-subtitle, .list-item-arrow, .status-date, .progress-label, .vehicle-serial, .vehicle-card-subtitle, .list-card-subtitle, .list-card-info, .check-item-meta, .stavka-sifra, .modal-text ) { color: var(--vscode-text-muted) !important; } /* Exact class used by radni-nalog-flow.css (the older bridge used .active). */ html.app-skin-vscode .rn-status-filter.is-active { background-color: rgba(var(--vscode-accent-rgb), 0.14) !important; border-color: var(--vscode-accent) !important; box-shadow: 0 0 0 2px rgba(var(--vscode-accent-rgb), 0.14) !important; color: var(--vscode-text-strong) !important; } /* Sidebar light-mode rules near the end of zetra-utilities.css have the same specificity as the base bridge. Mirror their full selector chain. */ html.app-skin-vscode:not(.dark-mode) .app-sidebar .menu .menu-search .form-control, html.app-skin-vscode.dark-mode .app-sidebar .menu .menu-search .form-control { background: var(--vscode-input-bg) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .app-sidebar .menu .menu-search .form-control:focus { border-color: var(--vscode-accent) !important; box-shadow: 0 0 0 2px var(--vscode-focus-ring) !important; } html.app-skin-vscode:not(.dark-mode) .app-sidebar-float-submenu-container, html.app-skin-vscode.dark-mode .app-sidebar-float-submenu-container { background: var(--vscode-surface-elevated) !important; border-color: var(--vscode-border-strong) !important; box-shadow: var(--vscode-shadow) !important; } html.app-skin-vscode .app-sidebar-float-submenu-container .app-sidebar-float-submenu .menu-item .menu-link { color: var(--vscode-text-muted) !important; } html.app-skin-vscode .app-sidebar-float-submenu-container .app-sidebar-float-submenu .menu-item .menu-link:is(:hover, :focus), html.app-skin-vscode .app-sidebar-float-submenu-container .app-sidebar-float-submenu .menu-item.active > .menu-link { background-color: var(--vscode-hover-bg) !important; color: var(--vscode-text-strong) !important; } html.app-skin-vscode .app-sidebar-float-submenu-container .app-sidebar-float-submenu .menu-item::before, html.app-skin-vscode .app-sidebar-float-submenu-container .app-sidebar-float-submenu .menu-item .menu-link::after, html.app-skin-vscode .app-sidebar-float-submenu-container :is(.app-sidebar-float-submenu-arrow, .app-sidebar-float-submenu-line) { background-color: var(--vscode-border-strong) !important; } html.app-skin-vscode .app-sidebar-float-submenu-container .app-sidebar-float-submenu .menu-item::after { background-color: var(--vscode-surface-elevated) !important; border-color: var(--vscode-border-strong) !important; } html.app-skin-vscode .app-sidebar-float-submenu-container .app-sidebar-float-submenu .menu-item.active::after { border-color: var(--vscode-accent) !important; } @media (max-width: 768px) { html.app-skin-vscode body .zetra-card-grid .ag-row { background: var(--vscode-surface) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text) !important; box-shadow: var(--vscode-shadow-sm) !important; } html.app-skin-vscode body .zetra-card-grid .ag-row-hover:not(.ag-row-selected) { background: var(--vscode-hover-bg) !important; } html.app-skin-vscode body .zetra-card-grid .ag-row-selected { background: rgba(var(--vscode-accent-rgb), 0.18) !important; border-color: var(--vscode-accent) !important; } html.app-skin-vscode body .zetra-card-grid .card-actions { border-color: var(--vscode-border) !important; } html.app-skin-vscode body .zetra-card-grid .card-actions :is(button, a, .btn) { background: var(--vscode-surface-soft) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode body .zetra-card-grid .card-actions :is(button, a, .btn):hover { background: var(--vscode-hover-bg) !important; color: var(--vscode-text-strong) !important; } html.app-skin-vscode body .zetra-card-grid .card-actions :is(button.action-primary, .btn-primary, .btn-info) { background: var(--vscode-button-info-bg) !important; border-color: var(--vscode-button-info-bg) !important; color: #ffffff !important; } html.app-skin-vscode body .zetra-card-grid .card-actions :is(button.action-danger, .btn-danger) { background: var(--vscode-button-danger-bg) !important; border-color: var(--vscode-button-danger-bg) !important; color: #ffffff !important; } html.app-skin-vscode body .zetra-card-grid .card-actions .btn-success { background: var(--vscode-button-success-bg) !important; border-color: var(--vscode-button-success-bg) !important; color: #ffffff !important; } html.app-skin-vscode body .zetra-card-grid .card-actions .btn-warning { background: var(--vscode-warning) !important; border-color: var(--vscode-warning) !important; color: #1f1f1f !important; } html.app-skin-vscode body .zetra-card-grid .card-actions :is(button.action-primary, .btn-primary, .btn-info):is(:hover, :focus, :active) { background: var(--vscode-button-info-hover) !important; border-color: var(--vscode-button-info-hover) !important; color: #ffffff !important; } html.app-skin-vscode body .zetra-card-grid .card-actions :is(button.action-danger, .btn-danger):is(:hover, :focus, :active) { background: var(--vscode-button-danger-hover) !important; border-color: var(--vscode-button-danger-hover) !important; color: #ffffff !important; } html.app-skin-vscode body .zetra-card-grid .card-actions .btn-success:is(:hover, :focus, :active) { background: var(--vscode-button-success-hover) !important; border-color: var(--vscode-button-success-hover) !important; color: #ffffff !important; } html.app-skin-vscode body .zetra-card-grid .card-actions .btn-warning:is(:hover, :focus, :active) { background: var(--bs-btn-hover-bg, #d7b51a) !important; border-color: var(--bs-btn-hover-border-color, #d7b51a) !important; color: #1f1f1f !important; } } /* -------------------------------------------------------------------------- Late-loaded file upload styles and third-party widget completion -------------------------------------------------------------------------- */ /* _FileUpload renders its stylesheets in the body after this global layer. Important custom properties deliberately win that later normal declaration. */ html.app-skin-vscode .file-upload-manager, html.app-skin-vscode.dark-mode .file-upload-manager, html.app-skin-vscode[data-bs-theme="dark"] .file-upload-manager { --fu-bg: var(--vscode-editor-bg) !important; --fu-panel: var(--vscode-surface) !important; --fu-panel-soft: var(--vscode-surface-soft) !important; --fu-border: var(--vscode-border-strong) !important; --fu-soft-border: var(--vscode-border) !important; --fu-text: var(--vscode-text) !important; --fu-muted: var(--vscode-text-muted) !important; --fu-accent: var(--vscode-accent) !important; --fu-accent-rgb: var(--vscode-accent-rgb) !important; --fu-info-rgb: var(--vscode-info-rgb) !important; --fu-danger: var(--vscode-danger) !important; } html.app-skin-vscode.dark-mode .file-upload-manager :is( .file-upload-grid-wrap .form-control, .file-upload-grid-wrap .input-group-text ) { background: #313131 !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .filepond--root { color: var(--vscode-text) !important; } html.app-skin-vscode .filepond--panel-root, html.app-skin-vscode .filepond--drop-label, html.app-skin-vscode .filepond--drip { background: var(--vscode-surface-soft) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .filepond--drop-label label, html.app-skin-vscode .filepond--file-info :is(.filepond--file-info-main, .filepond--file-info-sub), html.app-skin-vscode .filepond--file-status :is(.filepond--file-status-main, .filepond--file-status-sub) { color: var(--vscode-text) !important; } html.app-skin-vscode .filepond--label-action { color: var(--vscode-link) !important; text-decoration-color: currentColor !important; } html.app-skin-vscode .filepond--item-panel { background: var(--vscode-surface-elevated) !important; border: 1px solid var(--vscode-border-strong) !important; } html.app-skin-vscode .filepond--file-action-button { background: var(--vscode-selected-bg) !important; color: var(--vscode-text-strong) !important; } html.app-skin-vscode .filepond--item[data-filepond-item-state*="processing-error"] .filepond--item-panel, html.app-skin-vscode .filepond--item[data-filepond-item-state*="invalid"] .filepond--item-panel, html.app-skin-vscode .filepond--item[data-filepond-item-state*="load-error"] .filepond--item-panel { background: var(--vscode-danger) !important; } html.app-skin-vscode .filepond--item[data-filepond-item-state="processing-complete"] .filepond--item-panel { background: var(--vscode-success) !important; } html.app-skin-vscode .filepond--item[data-filepond-item-state*="processing"] .filepond--item-panel { border-color: var(--vscode-accent) !important; } html.app-skin-vscode .filepond--credits { color: var(--vscode-text-muted) !important; } /* Select2 Classic uses gradients and arrow backgrounds instead of tokens. */ html.app-skin-vscode .select2-container--classic :is(.select2-selection--single, .select2-selection--multiple), html.app-skin-vscode .select2-container--classic .select2-selection--single .select2-selection__arrow { background: var(--vscode-input-bg) !important; background-image: none !important; border-color: var(--vscode-border-strong) !important; } html.app-skin-vscode .select2-container--classic .select2-selection--single .select2-selection__arrow b { border-color: var(--vscode-text-muted) transparent transparent !important; } html.app-skin-vscode .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--vscode-text-muted) !important; } html.app-skin-vscode .select2-container--classic .select2-results__option--highlighted[aria-selected], html.app-skin-vscode .select2-container--classic .select2-results__option--highlighted[aria-selected="true"], html.app-skin-vscode .reports-page .select2-results__option--highlighted[aria-selected="true"] { background: var(--vscode-accent) !important; color: #ffffff !important; } /* Flatpickr navigation, time controls and disabled states are separate from the calendar/day rules above. */ html.app-skin-vscode .flatpickr-calendar :is( .flatpickr-time, .numInputWrapper, .flatpickr-time input, .flatpickr-time .flatpickr-am-pm ) { background: var(--vscode-input-bg) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .flatpickr-calendar :is(.flatpickr-time input, .flatpickr-time .flatpickr-am-pm):hover, html.app-skin-vscode .flatpickr-calendar :is(.flatpickr-time input, .flatpickr-time .flatpickr-am-pm):focus { background: var(--vscode-hover-bg) !important; } html.app-skin-vscode .flatpickr-calendar :is(.flatpickr-time-separator, .flatpickr-time .numInputWrapper span) { color: var(--vscode-text-muted) !important; } html.app-skin-vscode .flatpickr-calendar :is(.flatpickr-prev-month, .flatpickr-next-month) { color: var(--vscode-text) !important; fill: var(--vscode-text) !important; } html.app-skin-vscode .flatpickr-calendar :is(.flatpickr-prev-month, .flatpickr-next-month):hover, html.app-skin-vscode .flatpickr-calendar :is(.flatpickr-prev-month, .flatpickr-next-month):hover svg { color: var(--vscode-accent) !important; fill: var(--vscode-accent) !important; } html.app-skin-vscode .flatpickr-day:is(.flatpickr-disabled, .prevMonthDay, .nextMonthDay), html.app-skin-vscode .flatpickr-day:is(.flatpickr-disabled, .prevMonthDay, .nextMonthDay):hover { background: transparent !important; border-color: transparent !important; color: var(--vscode-text-inactive) !important; } html.app-skin-vscode .flatpickr-calendar.arrowTop::before { border-bottom-color: var(--vscode-border-strong) !important; } html.app-skin-vscode .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--vscode-surface-elevated) !important; } html.app-skin-vscode .flatpickr-calendar.arrowBottom::before { border-top-color: var(--vscode-border-strong) !important; } html.app-skin-vscode .flatpickr-calendar.arrowBottom::after { border-top-color: var(--vscode-surface-elevated) !important; } /* Daterangepicker has four arrows plus independent range and time controls. */ html.app-skin-vscode .daterangepicker.drop-up::before { border-top-color: var(--vscode-border-strong) !important; border-bottom-color: transparent !important; } html.app-skin-vscode .daterangepicker.drop-up::after { border-top-color: var(--vscode-surface-elevated) !important; border-bottom-color: transparent !important; } html.app-skin-vscode .daterangepicker :is( .calendar-table, .calendar-table table, .ranges, .drp-calendar, .drp-selected ) { background-color: var(--vscode-surface-elevated) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .daterangepicker :is(.ranges li, td.available, th.available) { color: var(--vscode-text) !important; } html.app-skin-vscode .daterangepicker .ranges li:hover { background-color: var(--vscode-hover-bg) !important; } html.app-skin-vscode .daterangepicker .ranges li.active { background-color: var(--vscode-accent) !important; color: #ffffff !important; } html.app-skin-vscode .daterangepicker :is(.hourselect, .minuteselect, .secondselect, .ampmselect) { background-color: var(--vscode-input-bg) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .daterangepicker th.prev span, html.app-skin-vscode .daterangepicker th.next span { border-color: var(--vscode-text) !important; } /* Jodit Pro can attach its file browser directly under body, outside the editor container. Give those detached roots the same token namespace. */ html.app-skin-vscode :is(.jodit-file-browser-pro, .jodit-ui-browser-panel, .jodit-ui-sidebar) { --jd-color-background-default: var(--vscode-surface); --jd-color-background-active: var(--vscode-selected-bg); --jd-color-background-button-hover: var(--vscode-hover-bg); --jd-color-button-background-hover: var(--vscode-hover-bg); --jd-color-background-filebrowser-folders: var(--vscode-chrome-bg); --jd-color-border: var(--vscode-border); --jd-color-border-dark: var(--vscode-border-strong); --jd-color-border-active: var(--vscode-accent); --jd-color-border-selected: var(--vscode-accent); --jd-color-default: var(--vscode-text); --jd-color-dark: var(--vscode-text-strong); --jd-color-text: var(--vscode-text); --jd-color-text-icons: var(--vscode-text-muted); --jd-color-label: var(--vscode-text-muted); --jd-color-white: var(--vscode-surface); --jd-fb-color: var(--vscode-text); --jd-item-info-color: var(--vscode-text); --jd-item-border-color: var(--vscode-border); --jd-folder-border: var(--vscode-border); --jd-source-border: var(--vscode-border); --jd-message-color: var(--vscode-text); --jd-message-shadow-color: transparent; --jd-sidebar-bg: var(--vscode-surface-elevated); --jd-sidebar-border-color: var(--vscode-border); --jd-sidebar-color: var(--vscode-text); color: var(--vscode-text) !important; } html.app-skin-vscode :is( .jodit-file-browser-pro__panel, .jodit-ui-browser-panel, .jodit-ui-sidebar, .jodit-file-browser-files, .jodit-file-browser-tree ) { background: var(--vscode-surface-elevated) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text) !important; } html.app-skin-vscode :is( .jodit-file-browser-pro__header, .jodit-ui-browser-settings, .jodit-file-browser-tree__source-title, .jodit-ui-form-button-generator__title ) { background: var(--vscode-chrome-bg) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text) !important; } html.app-skin-vscode :is( .jodit-file-browser-files__item-info, .jodit-file-browser-pro__header-button, .jodit-dialog__header-button, .jodit-ui-input__label, .jodit-ui-select__label ) { color: var(--vscode-text) !important; text-shadow: none !important; } html.app-skin-vscode :is( .jodit-ui-input__wrapper, .jodit-ui-select__wrapper, .jodit-ui-input__input, .jodit-ui-select__input ) { background-color: var(--vscode-input-bg) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode :is( .jodit-ui-button_variant_default, .jodit-ui-button_variant_secondary, .jodit-ui-button-variants_variant_default, .jodit-ui-button-variants_variant_secondary, .jodit-toolbar-content_variant_default, .jodit-toolbar-content_variant_secondary, .jodit-form button ) { background: var(--vscode-surface-soft) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode :is( .jodit-ui-button_variant_default, .jodit-ui-button_variant_secondary, .jodit-ui-button-variants_variant_default, .jodit-ui-button-variants_variant_secondary, .jodit-toolbar-content_variant_default, .jodit-toolbar-content_variant_secondary ) svg { fill: var(--vscode-text) !important; stroke: var(--vscode-text) !important; } html.app-skin-vscode :is(.jodit-file-browser-files__item, .jodit-file-browser-files_view_list a):hover { background: var(--vscode-hover-bg) !important; border-color: var(--vscode-accent) !important; } html.app-skin-vscode .jodit-ui-message_variant_secondary { --jd-em-color-border: var(--vscode-border-strong); --jd-em-color-bg: var(--vscode-surface-soft); --jd-em-color-color: var(--vscode-text); } /* jquery-confirm neutral/loading surfaces. Colored top borders remain owned by the plugin's semantic blue/green/red/orange variants. */ html.app-skin-vscode .jconfirm :is(.jconfirm-box, .jconfirm-content-pane, .jconfirm-buttons) { background-color: var(--vscode-surface-elevated) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .jconfirm .jconfirm-box :is(.jconfirm-title-c, .jconfirm-title, .jconfirm-content, label) { color: var(--vscode-text) !important; } html.app-skin-vscode .jconfirm .jconfirm-box .jconfirm-closeIcon { color: var(--vscode-text-muted) !important; } html.app-skin-vscode .jconfirm .jconfirm-box :is(input.form-control, textarea.form-control, select.form-control, select.form-select) { background-color: var(--vscode-input-bg) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .jconfirm .jconfirm-box .jconfirm-buttons :is(.btn-default, button.btn-default) { background-color: var(--vscode-surface-soft) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .jconfirm .jconfirm-box .jconfirm-buttons :is(.btn-default, button.btn-default):hover { background-color: var(--vscode-hover-bg) !important; color: var(--vscode-text-strong) !important; } html.app-skin-vscode .jconfirm .jconfirm-box :is(.jconfirm-spinner, .jconfirm-loading-icon) { border-color: var(--vscode-accent) transparent transparent !important; } html.app-skin-vscode .jconfirm .jconfirm-box.loading::before { background: var(--vscode-surface-elevated) !important; opacity: 0.82; } html.app-skin-vscode .jconfirm .jconfirm-bg { background-color: rgba(0, 0, 0, 0.68) !important; } /* Setup pages and legacy login variants were deliberately forced to a white card. VS Code themes instead use the same workbench surfaces as the app. */ html.app-skin-vscode :is(.setup-page, .login:not(.login-v1)) { background: linear-gradient( 135deg, var(--vscode-chrome-bg) 0%, var(--vscode-editor-bg) 64%, rgba(var(--vscode-accent-rgb), 0.16) 100% ) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .setup-content, html.app-skin-vscode .login:not(.login-v1) .login-content { background: var(--vscode-surface) !important; border: 1px solid var(--vscode-border-strong) !important; box-shadow: var(--vscode-shadow) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .setup-content :is(h1, h2, h3, h4, h5, h6, strong), html.app-skin-vscode .login:not(.login-v1) .login-content :is(h1, h2, h3, h4, h5, h6, strong) { color: var(--vscode-text-strong) !important; } html.app-skin-vscode .setup-content :is(.form-label, .form-check-label), html.app-skin-vscode .login:not(.login-v1) .login-content :is(.form-label, .form-check-label) { color: var(--vscode-text) !important; } html.app-skin-vscode .setup-content .text-muted, html.app-skin-vscode .login:not(.login-v1) .login-content .text-muted { color: var(--vscode-text-muted) !important; } html.app-skin-vscode .setup-content :is(.form-control, .form-select), html.app-skin-vscode .login:not(.login-v1) .login-content :is(.form-control, .form-select) { background-color: var(--vscode-input-bg) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .setup-content :is(.form-control, .form-select):focus, html.app-skin-vscode .login:not(.login-v1) .login-content :is(.form-control, .form-select):focus { border-color: var(--vscode-accent) !important; box-shadow: 0 0 0 0.2rem var(--vscode-focus-ring) !important; } html.app-skin-vscode .setup-content .form-control::placeholder, html.app-skin-vscode .login:not(.login-v1) .login-content .form-control::placeholder { color: var(--vscode-placeholder) !important; } html.app-skin-vscode .setup-content :is(.card, .card-header), html.app-skin-vscode .login:not(.login-v1) .login-content :is(.card, .card-header) { background-color: var(--vscode-surface-soft) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .setup-content .alert-danger, html.app-skin-vscode .login:not(.login-v1) .login-content .alert-danger { background-color: var(--bs-danger-bg-subtle) !important; border-color: var(--bs-danger-border-subtle) !important; color: var(--bs-danger-text-emphasis) !important; } html.app-skin-vscode .setup-content .alert-info, html.app-skin-vscode .login:not(.login-v1) .login-content .alert-info { background-color: var(--bs-info-bg-subtle) !important; border-color: var(--bs-info-border-subtle) !important; color: var(--bs-info-text-emphasis) !important; } html.app-skin-vscode .setup-content .btn-outline-primary, html.app-skin-vscode .login:not(.login-v1) .login-content .btn-outline-primary { color: var(--vscode-accent) !important; border-color: var(--vscode-accent) !important; } html.app-skin-vscode .setup-content .btn-outline-secondary, html.app-skin-vscode .login:not(.login-v1) .login-content .btn-outline-secondary { color: var(--vscode-text-muted) !important; border-color: var(--vscode-border-strong) !important; } html.app-skin-vscode .setup-content .select2-container--classic .select2-selection--single, html.app-skin-vscode .login:not(.login-v1) .login-content .select2-container--classic .select2-selection--single { background: var(--vscode-input-bg) !important; background-image: none !important; border-color: var(--vscode-border-strong) !important; } /* Feature-local accent literals which otherwise retain the original blue. */ html.app-skin-vscode .aa-progress-step:not(:disabled):focus-visible, html.app-skin-vscode .aa-partner-card:focus-visible, html.app-skin-vscode .aa-mode-card:has(input:focus-visible) { outline-color: rgba(var(--vscode-accent-rgb), 0.28) !important; } html.app-skin-vscode .aa-partner-card:hover { border-color: rgba(var(--vscode-accent-rgb), 0.45) !important; } html.app-skin-vscode .aa-partner-card[aria-pressed="true"] { box-shadow: 0 0 0 1px rgba(var(--vscode-accent-rgb), 0.18) !important; } html.app-skin-vscode .aa-scope-card { border-color: rgba(var(--vscode-accent-rgb), 0.28) !important; } html.app-skin-vscode .aa-spinner { border-color: rgba(var(--vscode-accent-rgb), 0.18) !important; border-top-color: var(--vscode-accent) !important; } html.app-skin-vscode .suggestions-period-info { background: linear-gradient( 180deg, rgba(var(--vscode-accent-rgb), 0.12) 0%, rgba(var(--vscode-accent-rgb), 0.06) 100% ) !important; border-color: var(--vscode-border) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .suggestions-period-info i { color: var(--vscode-link) !important; } html.app-skin-vscode :is(.partner-wizard-map-fallback, .partner-wizard-empty) { background: var(--vscode-surface-soft) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text-muted) !important; } html.app-skin-vscode :is(.partner-wizard-person-meta, .partner-wizard-summary-grid span) { color: var(--vscode-text-muted) !important; } /* Route stop states must follow the semantic palette after the neutral stop card/name rules above; completed is a distinct class from preview. */ html.app-skin-vscode .stop-card:is(.completed, .optimization-preview) { background: var(--bs-success-bg-subtle) !important; border-color: var(--bs-success-border-subtle) !important; } html.app-skin-vscode .stop-card:is(.completed, .optimization-preview) .stop-partner-name { color: var(--bs-success-text-emphasis) !important; } html.app-skin-vscode .stop-card:is(.completed, .optimization-preview) .stop-number { background: var(--vscode-success) !important; color: #ffffff !important; } html.app-skin-vscode .stop-card.preview-missing-gps { background: var(--bs-warning-bg-subtle) !important; border-color: var(--bs-warning-border-subtle) !important; } html.app-skin-vscode .stop-card.preview-missing-gps .stop-partner-name { color: var(--bs-warning-text-emphasis) !important; } html.app-skin-vscode .stop-card.preview-missing-gps .stop-number { background: var(--vscode-warning) !important; color: #1f1f1f !important; } /* -------------------------------------------------------------------------- Anonymous account pages share the layout and therefore the global palette. -------------------------------------------------------------------------- */ html.app-skin-vscode .login.login-v1 { --auth-primary: var(--vscode-accent); --auth-primary-rgb: var(--vscode-accent-rgb); --auth-accent: var(--vscode-accent); --auth-shell-start: var(--vscode-chrome-bg); --auth-shell-end: var(--vscode-editor-bg); --auth-card: var(--vscode-surface); --auth-card-border: var(--vscode-border-strong); --auth-card-shadow: var(--vscode-shadow); --auth-header-bg: var(--vscode-chrome-bg); --auth-header-border: var(--vscode-accent); --auth-text: var(--vscode-text); --auth-muted: var(--vscode-text-muted); --auth-soft: var(--vscode-surface-soft); --auth-line: var(--vscode-border); --auth-input-bg: var(--vscode-input-bg); --auth-input-border: var(--vscode-border-strong); --auth-input-placeholder: var(--vscode-placeholder); --auth-focus-ring: var(--vscode-focus-ring); background: linear-gradient(135deg, #f8f8f8 0%, #f3f3f3 62%, #e7f2fb 100%) !important; color: var(--vscode-text); } html.app-skin-vscode .login.login-v1 .login-container, html.app-skin-vscode .login.login-v1 .login-container .login-body, html.app-skin-vscode .login.login-v1 .login-container .login-body .login-content { background: var(--vscode-surface) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .login.login-v1 .login-container .login-header { background: var(--vscode-chrome-bg) !important; border-color: var(--vscode-accent) !important; color: var(--vscode-text-strong) !important; } html.app-skin-vscode .login.login-v1 .login-container .login-header .brand, html.app-skin-vscode .login.login-v1 .login-container .login-header .brand small, html.app-skin-vscode .login.login-v1 .login-container .login-header .icon { color: var(--vscode-text) !important; } html.app-skin-vscode .login.login-v1 .auth-theme-toggle { background: var(--vscode-surface-soft) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text-muted) !important; } html.app-skin-vscode .login.login-v1 .auth-theme-toggle:hover { background: var(--vscode-hover-bg) !important; color: var(--vscode-text-strong) !important; } html.app-skin-vscode .login.login-v1 :is(.form-label, .form-check-label, .auth-page-title) { color: var(--vscode-text) !important; } html.app-skin-vscode .login.login-v1 :is(.auth-page-copy, .text-muted) { color: var(--vscode-text-muted) !important; } html.app-skin-vscode .login.login-v1 .login-container .login-body .login-content .form-control { background: var(--vscode-input-bg) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .login.login-v1 :is(.google-btn, .auth-back-link) { background: var(--vscode-surface) !important; border-color: var(--vscode-border-strong) !important; color: var(--vscode-text) !important; } html.app-skin-vscode .login.login-v1 :is(.google-btn, .auth-back-link):hover { background: var(--vscode-hover-bg) !important; } html.app-skin-vscode .login.login-v1 .google-icon { background: var(--vscode-chrome-bg) !important; border-color: var(--vscode-border) !important; } html.app-skin-vscode.dark-mode .login.login-v1 { --auth-card: #1f1f1f; --auth-card-border: #3c3c3c; --auth-header-bg: #181818; --auth-text: #cccccc; --auth-muted: #9d9d9d; --auth-soft: #222222; --auth-line: #2b2b2b; --auth-input-bg: #313131; --auth-input-border: #3c3c3c; --auth-input-placeholder: #989898; background: linear-gradient(140deg, #181818 0%, #1f1f1f 58%, #102a3f 100%) !important; } html.app-skin-vscode.dark-mode .login.login-v1 .login-container, html.app-skin-vscode.dark-mode .login.login-v1 .login-container .login-body, html.app-skin-vscode.dark-mode .login.login-v1 .login-container .login-body .login-content { background: #1f1f1f !important; border-color: #3c3c3c !important; color: #cccccc !important; } html.app-skin-vscode.dark-mode .login.login-v1 .login-container .login-header { background: #181818 !important; border-color: #0078d4 !important; color: #ffffff !important; } html.app-skin-vscode.dark-mode .login.login-v1 .login-container .login-header .brand, html.app-skin-vscode.dark-mode .login.login-v1 .login-container .login-header .brand small, html.app-skin-vscode.dark-mode .login.login-v1 .login-container .login-header .icon { color: #cccccc !important; } html.app-skin-vscode.dark-mode .login.login-v1 .login-container .login-body .login-content .form-control, html.app-skin-vscode.dark-mode .login.login-v1 .google-btn { background: #313131 !important; border-color: #3c3c3c !important; color: #cccccc !important; } /* -------------------------------------------------------------------------- Printing must not inherit the dark workbench canvas. -------------------------------------------------------------------------- */ @media print { html.app-skin-vscode, html.app-skin-vscode.dark-mode, html.app-skin-vscode body, html.app-skin-vscode.dark-mode body { color-scheme: light; --vscode-editor-bg: #ffffff; --vscode-chrome-bg: #ffffff; --app-browser-theme-color: #ffffff; --vscode-surface: #ffffff; --vscode-surface-elevated: #ffffff; --vscode-surface-soft: #f4f4f4; --vscode-input-bg: #ffffff; --vscode-hover-bg: #f4f4f4; --vscode-selected-bg: #eeeeee; --vscode-border: #d0d0d0; --vscode-border-strong: #b8b8b8; --vscode-text: #000000; --vscode-text-strong: #000000; --vscode-text-muted: #444444; --vscode-text-inactive: #666666; --vscode-placeholder: #666666; --bs-body-bg: #ffffff; --bs-body-bg-rgb: 255, 255, 255; --bs-body-color: #000000; --bs-body-color-rgb: 0, 0, 0; --bs-emphasis-color: #000000; --bs-heading-color: #000000; --bs-secondary-color: #444444; --bs-tertiary-bg: #f4f4f4; --bs-border-color: #d0d0d0; --app-component-bg: #ffffff; --app-component-color: #000000; --app-component-color-rgb: 0, 0, 0; --app-component-color-muted: #444444; --app-component-border-color: #d0d0d0; --app-component-border-color-rgb: 208, 208, 208; --app-component-dropdown-bg: #ffffff; --app-component-modal-bg: #ffffff; --zetra-ui-bg: #ffffff; --zetra-ui-surface: #ffffff; --zetra-ui-surface-soft: #f4f4f4; --zetra-ui-text: #000000; --zetra-ui-muted: #444444; --zetra-ui-border: #d0d0d0; --report-slate-50: #ffffff; --report-slate-100: #f4f4f4; --report-slate-200: #d0d0d0; --report-slate-500: #555555; --report-slate-700: #222222; --report-slate-800: #000000; --report-slate-900: #000000; } html.app-skin-vscode body, html.app-skin-vscode #app, html.app-skin-vscode #content.app-content, html.app-skin-vscode .app-content, html.app-skin-vscode .erp-app-shell, html.app-skin-vscode .login.login-v1, html.app-skin-vscode :is(.reports-page, .report-dashboard) { background: #ffffff !important; color: #000000 !important; } html.app-skin-vscode :is( .card, .panel, .widget, .modal-content, .dropdown-menu, .dashboard-card, .mobile-list-card, .summary-card, .detail-section, .form-section, .report-dashboard .card, .filter-card, .login.login-v1 .login-container, .login.login-v1 .login-body, .login.login-v1 .login-content, .login.login-v1 .login-header, .ag-root-wrapper, .ag-row ) { background: #ffffff !important; border-color: #d0d0d0 !important; box-shadow: none !important; color: #000000 !important; } html.app-skin-vscode :is(.form-control, .form-select, .input-group-text) { background: #ffffff !important; border-color: #b8b8b8 !important; color: #000000 !important; } html.app-skin-vscode.dark-mode .login.login-v1 .login-container, html.app-skin-vscode.dark-mode .login.login-v1 .login-container .login-body, html.app-skin-vscode.dark-mode .login.login-v1 .login-container .login-body .login-content, html.app-skin-vscode.dark-mode .login.login-v1 .login-container .login-header { background: #ffffff !important; border-color: #d0d0d0 !important; box-shadow: none !important; color: #000000 !important; } html.app-skin-vscode .table, html.app-skin-vscode .table > :not(caption) > * > * { --bs-table-color: #000000; --bs-table-bg: #ffffff; --bs-table-striped-color: #000000; --bs-table-striped-bg: #f4f4f4; border-color: #d0d0d0 !important; color: #000000 !important; } }