/*
 * GITASIS panel colour theme contract.
 *
 * Existing vendor dark-layout support remains intact. This layer supplies the
 * semantic colour tokens used by custom panel components and adapters that do
 * not understand the legacy body.dark-layout contract.
 */

:root,
html[data-vt-theme="light"] {
  color-scheme: light;
  --vt-color-page: #f8f8f8;
  --vt-color-surface: #ffffff;
  --vt-color-surface-elevated: #ffffff;
  --vt-color-surface-muted: #f4f4f6;
  --vt-color-text: #626262;
  --vt-color-text-strong: #2c2c2c;
  --vt-color-text-muted: #828d99;
  --vt-color-border: #dae1e7;
  --vt-color-input: #ffffff;
  --vt-color-input-disabled: #f5f5f5;
  --vt-color-primary: #7367f0;
  --vt-color-primary-contrast: #ffffff;
  --vt-color-overlay: rgba(34, 41, 47, 0.55);
  --vt-color-shadow: rgba(34, 41, 47, 0.12);
  --vt-color-hover: rgba(115, 103, 240, 0.08);
  --vt-color-scrollbar: rgba(98, 98, 98, 0.35);
  --vt-color-chat-incoming: #ffffff;
  --vt-color-chat-outgoing: #7367f0;
}

html[data-vt-theme="dark"] {
  color-scheme: dark;
  --vt-color-page: #262c49;
  --vt-color-surface: #10163a;
  --vt-color-surface-elevated: #1b2244;
  --vt-color-surface-muted: #2c3353;
  --vt-color-text: #c2c6dc;
  --vt-color-text-strong: #ebeefd;
  --vt-color-text-muted: #a6abc8;
  --vt-color-border: #414561;
  --vt-color-input: #262c49;
  --vt-color-input-disabled: #202744;
  --vt-color-primary: #8f84f6;
  --vt-color-primary-contrast: #ffffff;
  --vt-color-overlay: rgba(5, 8, 24, 0.72);
  --vt-color-shadow: rgba(0, 0, 0, 0.35);
  --vt-color-hover: rgba(143, 132, 246, 0.16);
  --vt-color-scrollbar: rgba(194, 198, 220, 0.38);
  --vt-color-chat-incoming: #323957;
  --vt-color-chat-outgoing: #7367f0;
}

html[data-vt-theme] body {
  background-color: var(--vt-color-page);
  color: var(--vt-color-text);
}

html[data-vt-theme] ::selection {
  background-color: var(--vt-color-primary);
  color: var(--vt-color-primary-contrast);
}

html[data-vt-theme] * {
  scrollbar-color: var(--vt-color-scrollbar) transparent;
}

html[data-vt-theme] *::-webkit-scrollbar-thumb {
  background-color: var(--vt-color-scrollbar);
}

html[data-vt-theme="dark"] body.dark-layout,
html[data-vt-theme="dark"] .content-wrapper,
html[data-vt-theme="dark"] .content-body,
html[data-vt-theme="dark"] .app-content,
html[data-vt-theme="dark"] .pnlBody,
html[data-vt-theme="dark"] .data-items,
html[data-vt-theme="dark"] .modal-body {
  background-color: var(--vt-color-page) !important;
  color: var(--vt-color-text);
}

html[data-vt-theme="dark"] .card,
html[data-vt-theme="dark"] .modal-content,
html[data-vt-theme="dark"] .dropdown-menu,
html[data-vt-theme="dark"] .popover,
html[data-vt-theme="dark"] .list-group-item,
html[data-vt-theme="dark"] .pnlContent,
html[data-vt-theme="dark"] .add-new-data,
html[data-vt-theme="dark"] .data-list-view-header .add-new-data,
html[data-vt-theme="dark"] .data-thumb-view-header .add-new-data {
  background-color: var(--vt-color-surface) !important;
  color: var(--vt-color-text);
  border-color: var(--vt-color-border);
}

html[data-vt-theme="dark"] .card-header,
html[data-vt-theme="dark"] .card-footer,
html[data-vt-theme="dark"] .modal-header,
html[data-vt-theme="dark"] .modal-footer,
html[data-vt-theme="dark"] .dropdown-divider,
html[data-vt-theme="dark"] .list-group-item {
  border-color: var(--vt-color-border) !important;
}

html[data-vt-theme="dark"] h1,
html[data-vt-theme="dark"] h2,
html[data-vt-theme="dark"] h3,
html[data-vt-theme="dark"] h4,
html[data-vt-theme="dark"] h5,
html[data-vt-theme="dark"] h6,
html[data-vt-theme="dark"] .card-title,
html[data-vt-theme="dark"] .modal-title,
html[data-vt-theme="dark"] legend {
  color: var(--vt-color-text-strong);
}

html[data-vt-theme="dark"] p,
html[data-vt-theme="dark"] label,
html[data-vt-theme="dark"] small,
html[data-vt-theme="dark"] .text-muted,
html[data-vt-theme="dark"] .dropdown-item,
html[data-vt-theme="dark"] .nav-link:not(.active) {
  color: var(--vt-color-text);
}

html[data-vt-theme="dark"] .dropdown-item:hover,
html[data-vt-theme="dark"] .dropdown-item:focus,
html[data-vt-theme="dark"] .list-group-item-action:hover,
html[data-vt-theme="dark"] .list-group-item-action:focus {
  background-color: var(--vt-color-hover);
  color: var(--vt-color-text-strong);
}

html[data-vt-theme="dark"] .form-control,
html[data-vt-theme="dark"] .custom-select,
html[data-vt-theme="dark"] .custom-file-label,
html[data-vt-theme="dark"] .input-group-text,
html[data-vt-theme="dark"] input:not([type]),
html[data-vt-theme="dark"] input[type="text"],
html[data-vt-theme="dark"] input[type="email"],
html[data-vt-theme="dark"] input[type="tel"],
html[data-vt-theme="dark"] input[type="number"],
html[data-vt-theme="dark"] input[type="password"],
html[data-vt-theme="dark"] input[type="search"],
html[data-vt-theme="dark"] input[type="url"],
html[data-vt-theme="dark"] textarea,
html[data-vt-theme="dark"] select,
html[data-vt-theme="dark"] [contenteditable="true"] {
  background-color: var(--vt-color-input);
  border-color: var(--vt-color-border);
  color: var(--vt-color-text-strong);
}

html[data-vt-theme="dark"] .form-control::placeholder,
html[data-vt-theme="dark"] input:not([type])::placeholder,
html[data-vt-theme="dark"] input[type="text"]::placeholder,
html[data-vt-theme="dark"] input[type="email"]::placeholder,
html[data-vt-theme="dark"] input[type="tel"]::placeholder,
html[data-vt-theme="dark"] input[type="number"]::placeholder,
html[data-vt-theme="dark"] input[type="password"]::placeholder,
html[data-vt-theme="dark"] input[type="search"]::placeholder,
html[data-vt-theme="dark"] input[type="url"]::placeholder,
html[data-vt-theme="dark"] textarea::placeholder {
  color: var(--vt-color-text-muted);
  opacity: 1;
}

html[data-vt-theme="dark"] .form-control:disabled,
html[data-vt-theme="dark"] .form-control[readonly],
html[data-vt-theme="dark"] input:not([type]):disabled,
html[data-vt-theme="dark"] input:not([type])[readonly],
html[data-vt-theme="dark"] input[type="text"]:disabled,
html[data-vt-theme="dark"] input[type="text"][readonly],
html[data-vt-theme="dark"] input[type="email"]:disabled,
html[data-vt-theme="dark"] input[type="email"][readonly],
html[data-vt-theme="dark"] input[type="tel"]:disabled,
html[data-vt-theme="dark"] input[type="tel"][readonly],
html[data-vt-theme="dark"] input[type="number"]:disabled,
html[data-vt-theme="dark"] input[type="number"][readonly],
html[data-vt-theme="dark"] input[type="password"]:disabled,
html[data-vt-theme="dark"] input[type="password"][readonly],
html[data-vt-theme="dark"] input[type="search"]:disabled,
html[data-vt-theme="dark"] input[type="search"][readonly],
html[data-vt-theme="dark"] input[type="url"]:disabled,
html[data-vt-theme="dark"] input[type="url"][readonly],
html[data-vt-theme="dark"] textarea:disabled,
html[data-vt-theme="dark"] select:disabled {
  background-color: var(--vt-color-input-disabled);
  color: var(--vt-color-text-muted);
}

html[data-vt-theme="dark"] .table,
html[data-vt-theme="dark"] .table th,
html[data-vt-theme="dark"] .table td {
  color: var(--vt-color-text);
  border-color: var(--vt-color-border);
}

html[data-vt-theme="dark"] .table thead th,
html[data-vt-theme="dark"] .table-active,
html[data-vt-theme="dark"] .table-hover tbody tr:hover {
  background-color: var(--vt-color-surface-muted);
  color: var(--vt-color-text-strong);
}

html[data-vt-theme="dark"] .overlay-bg,
html[data-vt-theme="dark"] .modal-backdrop,
html[data-vt-theme="dark"] .vt-modal-overlay {
  background-color: var(--vt-color-overlay) !important;
}

/* AG Grid: preserve status-row colours; only the chrome is themed. */
html[data-vt-theme="dark"] .ag-theme-material,
html[data-vt-theme="dark"] .ag-theme-alpine,
html[data-vt-theme="dark"] .ag-theme-balham {
  --ag-background-color: var(--vt-color-surface);
  --ag-foreground-color: var(--vt-color-text);
  --ag-header-background-color: var(--vt-color-surface-muted);
  --ag-header-foreground-color: var(--vt-color-text-strong);
  --ag-border-color: var(--vt-color-border);
  --ag-secondary-border-color: var(--vt-color-border);
  --ag-input-border-color: var(--vt-color-border);
  --ag-input-focus-border-color: var(--vt-color-primary);
  --ag-control-panel-background-color: var(--vt-color-surface);
  background-color: var(--vt-color-surface);
  color: var(--vt-color-text);
}

html[data-vt-theme="dark"] .ag-header,
html[data-vt-theme="dark"] .ag-header-row,
html[data-vt-theme="dark"] .ag-floating-filter,
html[data-vt-theme="dark"] .ag-menu,
html[data-vt-theme="dark"] .ag-popup-child,
html[data-vt-theme="dark"] .ag-filter,
html[data-vt-theme="dark"] .ag-side-bar {
  background-color: var(--vt-color-surface-muted);
  color: var(--vt-color-text-strong);
  border-color: var(--vt-color-border);
}

html[data-vt-theme="dark"] .ag-root-wrapper,
html[data-vt-theme="dark"] .ag-root,
html[data-vt-theme="dark"] .ag-body-viewport,
html[data-vt-theme="dark"] .ag-center-cols-viewport,
html[data-vt-theme="dark"] .ag-center-cols-container {
  background-color: var(--vt-color-surface);
  border-color: var(--vt-color-border);
}

html[data-vt-theme="dark"] .ag-input-field-input,
html[data-vt-theme="dark"] .ag-text-field-input {
  background-color: var(--vt-color-input);
  color: var(--vt-color-text-strong);
  border-color: var(--vt-color-border);
}

/* Select2 and Form.io */
html[data-vt-theme="dark"] .select2-container .select2-selection,
html[data-vt-theme="dark"] .select2-dropdown,
html[data-vt-theme="dark"] .select2-search__field,
html[data-vt-theme="dark"] .select2-results__option,
html[data-vt-theme="dark"] .choices__inner,
html[data-vt-theme="dark"] .choices__list--dropdown {
  background-color: var(--vt-color-input) !important;
  border-color: var(--vt-color-border) !important;
  color: var(--vt-color-text-strong) !important;
}

html[data-vt-theme="dark"] .select2-results__option--highlighted,
html[data-vt-theme="dark"] .select2-results__option[aria-selected="true"],
html[data-vt-theme="dark"] .choices__item--choice.is-highlighted {
  background-color: var(--vt-color-primary) !important;
  color: var(--vt-color-primary-contrast) !important;
}

html[data-vt-theme="dark"] .formio-form,
html[data-vt-theme="dark"] .formio-component,
html[data-vt-theme="dark"] .formio-dialog-content,
html[data-vt-theme="dark"] .formio-dialog-content .card,
html[data-vt-theme="dark"] .formio-component-datagrid .table {
  background-color: transparent;
  color: var(--vt-color-text);
  border-color: var(--vt-color-border);
}

/* Calendar, date range and editors */
html[data-vt-theme="dark"] .daterangepicker,
html[data-vt-theme="dark"] .daterangepicker .calendar-table,
html[data-vt-theme="dark"] .daterangepicker td.off,
html[data-vt-theme="dark"] .daterangepicker td.off.in-range,
html[data-vt-theme="dark"] .daterangepicker td.off.start-date,
html[data-vt-theme="dark"] .daterangepicker td.off.end-date,
html[data-vt-theme="dark"] .fc,
html[data-vt-theme="dark"] .fc-theme-standard td,
html[data-vt-theme="dark"] .fc-theme-standard th,
html[data-vt-theme="dark"] .fc-scrollgrid,
html[data-vt-theme="dark"] .fc-list,
html[data-vt-theme="dark"] .fc-list-table {
  background-color: var(--vt-color-surface);
  color: var(--vt-color-text);
  border-color: var(--vt-color-border);
}

html[data-vt-theme="dark"] .daterangepicker td.available:hover,
html[data-vt-theme="dark"] .daterangepicker th.available:hover,
html[data-vt-theme="dark"] .fc .fc-daygrid-day.fc-day-today {
  background-color: var(--vt-color-surface-muted);
}

html[data-vt-theme="dark"] .ql-toolbar,
html[data-vt-theme="dark"] .ql-container,
html[data-vt-theme="dark"] .tox .tox-toolbar,
html[data-vt-theme="dark"] .tox .tox-toolbar__primary,
html[data-vt-theme="dark"] .tox .tox-editor-header,
html[data-vt-theme="dark"] .tox .tox-statusbar {
  background-color: var(--vt-color-input) !important;
  color: var(--vt-color-text) !important;
  border-color: var(--vt-color-border) !important;
}

html[data-vt-theme="dark"] .ql-editor,
html[data-vt-theme="dark"] .tox .tox-tbtn,
html[data-vt-theme="dark"] .tox .tox-statusbar__path-item {
  color: var(--vt-color-text) !important;
}

/* Drawflow, map chrome, uploads and context menus. */
html[data-vt-theme="dark"] .drawflow,
html[data-vt-theme="dark"] .drawflow .drawflow-node,
html[data-vt-theme="dark"] .parent-drawflow,
html[data-vt-theme="dark"] .dropzone,
html[data-vt-theme="dark"] .context-menu-list,
html[data-vt-theme="dark"] .context-menu-item,
html[data-vt-theme="dark"] .leaflet-control,
html[data-vt-theme="dark"] .leaflet-popup-content-wrapper,
html[data-vt-theme="dark"] .leaflet-popup-tip,
html[data-vt-theme="dark"] .leaflet-tooltip {
  background-color: var(--vt-color-surface-elevated) !important;
  color: var(--vt-color-text) !important;
  border-color: var(--vt-color-border) !important;
}

html[data-vt-theme="dark"] .context-menu-item.context-menu-hover,
html[data-vt-theme="dark"] .leaflet-control a:hover {
  background-color: var(--vt-color-hover) !important;
  color: var(--vt-color-text-strong) !important;
}

/* Chat surfaces keep message/status colours while adopting dark chrome. */
html[data-vt-theme="dark"] .chat-application .chat-app-window,
html[data-vt-theme="dark"] .chat-application .chat-content-area,
html[data-vt-theme="dark"] .chat-application .chat-sidebar,
html[data-vt-theme="dark"] .chat-application .chat-user-list-wrapper,
html[data-vt-theme="dark"] .chat-application .chat-profile-sidebar,
html[data-vt-theme="dark"] .chat-application .user-profile-sidebar,
html[data-vt-theme="dark"] .chat-application .chat-navbar,
html[data-vt-theme="dark"] .chat-application .chat-footer {
  background-color: var(--vt-color-surface) !important;
  color: var(--vt-color-text);
  border-color: var(--vt-color-border) !important;
}

html[data-vt-theme="dark"] .chat-application .chat:not(.chat-left) .chat-body .chat-content {
  background-color: var(--vt-color-chat-outgoing);
  color: var(--vt-color-primary-contrast);
}

html[data-vt-theme="dark"] .chat-application .chat.chat-left .chat-body .chat-content {
  background-color: var(--vt-color-chat-incoming);
  color: var(--vt-color-text-strong);
}

/* Charts: SVG labels and tooltip chrome. Series colours are left unchanged. */
html[data-vt-theme="dark"] .apexcharts-text,
html[data-vt-theme="dark"] .apexcharts-legend-text,
html[data-vt-theme="dark"] .apexcharts-datalabel,
html[data-vt-theme="dark"] .apexcharts-xaxis-label,
html[data-vt-theme="dark"] .apexcharts-yaxis-label {
  fill: var(--vt-color-text) !important;
  color: var(--vt-color-text) !important;
}

html[data-vt-theme="dark"] .apexcharts-tooltip,
html[data-vt-theme="dark"] .apexcharts-xaxistooltip,
html[data-vt-theme="dark"] .apexcharts-yaxistooltip {
  background-color: var(--vt-color-surface-elevated) !important;
  color: var(--vt-color-text) !important;
  border-color: var(--vt-color-border) !important;
}

/* Profile preference controls. */
.profile-theme-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.profile-theme-option {
  min-height: 3rem;
  border: 1px solid var(--vt-color-primary);
  border-radius: 0.35rem;
  background-color: var(--vt-color-surface);
  color: var(--vt-color-primary);
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.profile-theme-option:hover:not(:disabled),
.profile-theme-option:focus-visible:not(:disabled) {
  background-color: var(--vt-color-hover);
  outline: none;
}

.profile-theme-option.is-active {
  background-color: var(--vt-color-primary);
  color: var(--vt-color-primary-contrast);
}

.profile-theme-option:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.profile-theme-option i {
  margin-right: 0.45rem;
}