/* XAML live preview – imitates the default Windows (Aero2 / Win10) look of WPF controls. Colours here are fixed on purpose (a WPF window is always "light"). */
.x-stage {
  position: relative;
  padding: 12px;
  font: 12px/normal "Segoe UI", "Segoe UI Variable", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: #000;
  min-height: 60px;
  overflow: visible;
}
.x-stage *, .x-stage *::before, .x-stage *::after { box-sizing: border-box; }
.x-fit { display: block; }
.x-fit.x-surface { background: #fff; border: 1px solid #c9ced8; min-height: 48px; display: grid; }
.x-fit.x-surface > .x { align-self: start; }
.x-fit.x-fit-window { display: block; }
.x { min-width: 0; }
.x-error { margin: 12px; padding: 12px 14px; border-radius: 8px; background: #fde8ea; color: #7d1220; border: 1px solid #f3b4bb; font: 13px/1.5 "Segoe UI", system-ui, sans-serif; }
.x-error strong { display: block; margin-bottom: 4px; }
.x-unknown { border: 1px dashed #c2185b; background: rgba(194, 24, 91, .06); padding: 4px; color: #8e1450; font: 11px/1.4 Consolas, monospace; }
.x-unk-label { margin-bottom: 2px; }
.x-unk-body { display: flex; flex-direction: column; }
.x-text { white-space: pre; }
.x-disabled { opacity: .55; }
.x-invalid { border-color: #db000c !important; box-shadow: 0 0 0 1px #db000c; }

/* Window */
.x-Window { display: flex; flex-direction: column; background: #fff; border: 1px solid #6b6b6b; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
.x-titlebar { display: flex; align-items: center; height: 31px; background: #fff; flex: none; padding-left: 10px; user-select: none; }
.x-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-chrome { display: flex; align-self: stretch; }
.x-chrome i { width: 44px; display: grid; place-items: center; font-style: normal; font-size: 11px; color: #222; }
.x-chrome i:hover { background: #e5e5e5; }
.x-chrome i.x-close:hover { background: #e81123; color: #fff; }
.x-client { flex: 1; min-height: 0; background: #f0f0f0; display: grid; overflow: visible; }

/* Buttons */
.x-Button, .x-RepeatButton, .x-ToggleButton {
  display: flex; justify-content: center; align-items: center;
  background: #ddd; border: 1px solid #707070; padding: 1px; color: #000;
  cursor: default; user-select: none; white-space: nowrap;
}
.x-Button:hover, .x-RepeatButton:hover, .x-ToggleButton:hover { background: #bee6fd; border-color: #3c7fb1; }
.x-Button:active, .x-RepeatButton:active, .x-ToggleButton:active { background: #c4e5f6; border-color: #2c628b; }
.x-ToggleButton.x-checked { background: #bcddee; border-color: #245a83; }
.x-Button.x-default { border-color: #3399ff; box-shadow: inset 0 0 0 1px #3399ff; }
.x-Button:focus-visible, .x-ToggleButton:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.x-Button.x-disabled, .x-ToggleButton.x-disabled { background: #f4f4f4; border-color: #adb2b5; color: #838383; opacity: 1; }
.x.x-templated, .x.x-templated:hover, .x.x-templated:active, .x.x-templated.x-checked { background: none; border: 0; padding: 0; box-shadow: none; outline: none; }
.x-Label { padding: 5px; }
.x-Hyperlink { color: #0000ff; text-decoration: underline; cursor: pointer; }
.x-Hyperlink:hover { color: #ff0000; }
.x-Bold { font-weight: 700; } .x-Italic { font-style: italic; } .x-Underline { text-decoration: underline; }

/* CheckBox / RadioButton */
.x-CheckBox, .x-RadioButton { cursor: default; user-select: none; }
.x-CheckBox .x-cb-content, .x-RadioButton .x-cb-content { padding-left: 4px; }
.x-templated .x-cb-box, .x-templated .x-rb-dot, .x-templated .x-cb-content { display: none; }
.x-cb-box { width: 13px; height: 13px; border: 1px solid #8e8f8f; background: #fff; display: inline-grid; place-items: center; flex: none; color: #212121; position: relative; }
.x-cb-box svg { opacity: 0; }
.x-cb-ind { position: absolute; inset: 2px; background: #212121; opacity: 0; }
.x-checked > .x-cb-box svg, .x-checked .x-cb-box svg { opacity: 1; }
.x-indeterminate > .x-cb-box .x-cb-ind { opacity: 1; }
.x-CheckBox:hover .x-cb-box, .x-RadioButton:hover .x-rb-dot { border-color: #5593ff; background: #f3f9ff; }
.x-rb-dot { width: 13px; height: 13px; border: 1px solid #8e8f8f; background: #fff; border-radius: 50%; display: inline-grid; place-items: center; flex: none; }
.x-rb-dot i { width: 5px; height: 5px; border-radius: 50%; background: #212121; opacity: 0; }
.x-RadioButton.x-checked .x-rb-dot i { opacity: 1; }
.x-CheckBox:focus-visible, .x-RadioButton:focus-visible { outline: 1px dotted #000; outline-offset: 1px; }

/* Text inputs */
.x-TextBox, .x-PasswordBox, .x-DatePicker {
  border: 1px solid #abadb3; background: #fff; padding: 1px; color: #000; font: inherit; outline: none; min-height: 20px; border-radius: 0;
}
textarea.x-TextBox { min-height: 40px; }
.x-TextBox:hover, .x-PasswordBox:hover, .x-DatePicker:hover { border-color: #7eb4ea; }
.x-TextBox:focus, .x-PasswordBox:focus, .x-DatePicker:focus { border-color: #569de5; }
.x-TextBox:read-only { background: #fff; }

/* Slider / ProgressBar */
.x-Slider { -webkit-appearance: none; appearance: none; background: transparent; height: 22px; margin: 0; min-width: 40px; }
.x-Slider::-webkit-slider-runnable-track { height: 4px; background: #e7eaea; border: 1px solid #d6d6d6; }
.x-Slider::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 19px; margin-top: -9px; background: #f0f0f0; border: 1px solid #acacac; }
.x-Slider:hover::-webkit-slider-thumb { background: #dcecfc; border-color: #7eb4ea; }
.x-Slider.x-vertical { writing-mode: vertical-lr; direction: rtl; width: 22px; height: auto; min-height: 60px; }
.x-ProgressBar { height: 18px; background: #e6e6e6; border: 1px solid #bcbcbc; overflow: hidden; position: relative; }
.x-pb-fill { height: 100%; background: #06b025; }
.x-ProgressBar.x-pb-v { height: auto; width: 18px; min-height: 60px; display: flex; align-items: flex-end; }
.x-ProgressBar.x-indeterminate .x-pb-fill { width: 30%; position: absolute; animation: x-indet 1.6s linear infinite; }
@keyframes x-indet { from { left: -30%; } to { left: 100%; } }

/* Images & shapes */
.x-Image { overflow: hidden; }
.x-Image img { display: block; }
.x-img-ph { min-width: 40px; min-height: 40px; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #e4e6ea 0 6px, #eef0f3 6px 12px); color: #5a6070; font-size: 11px; padding: 4px; text-align: center; }
.x-Path, .x-Line, .x-Polyline, .x-Polygon { display: block; }
.x-Viewbox { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.x-vb-inner { flex: none; }

/* Containers */
.x-GroupBox { position: relative; border: 1px solid #d5dfe5; margin-top: 9px; padding: 12px 6px 6px; display: flex; flex-direction: column; }
.x-gb-head { position: absolute; top: -9px; left: 8px; background: #f0f0f0; padding: 0 3px; }
.x-gb-body { display: grid; flex: 1; min-height: 0; }
.x-Expander { display: flex; flex-direction: column; }
.x-ex-head { display: flex; align-items: center; cursor: default; padding: 2px 0; }
.x-ex-arrow { width: 19px; height: 19px; border: 1px solid #333; border-radius: 50%; margin-right: 4px; display: grid; place-items: center; font-size: 9px; background: #fff; flex: none; }
.x-ex-arrow::before { content: '▼'; transform: scale(.7); }
.x-Expander:not(.x-open) .x-ex-arrow::before { content: '▶'; }
.x-ex-body { display: grid; padding: 4px 0 0 4px; }
.x-ToolBar { background: linear-gradient(#fafafa, #ebebeb); border: 1px solid #e3e3e3; padding: 2px 4px; gap: 2px; }
.x-StatusBar { background: #f1f1f1; border-top: 1px solid #d6d6d6; padding: 2px 4px; gap: 8px; }
.x-sep-h { height: 1px; background: #a0a0a0; margin: 2px 0; align-self: stretch; }
.x-sep-v { width: 1px; align-self: stretch; background: #a0a0a0; margin: 0 3px; }
.x-dockwrap, .x-dockrest { min-width: 0; min-height: 0; }
.x-dockrest { flex: 1 1 auto; }

/* Lists */
.x-ListBox, .x-ListView, .x-TreeView, .x-DataGrid { background: #fff; border: 1px solid #828790; }
.x-ListBox { padding: 1px; }
.x-ListBoxItem, .x-ComboBoxItem, .x-ListViewItem { padding: 2px 3px; border: 1px solid transparent; cursor: default; user-select: none; }
.x-ListBoxItem:hover, .x-ComboBoxItem:hover { background: #e5f3fb; border-color: #cce8ff; }
.x-ListBoxItem.x-selected, .x-ComboBoxItem.x-selected { background: #cbe8f6; border-color: #26a0da; }
.x-ListViewItem { padding: 0; display: grid; }
.x-templated.x-ListBoxItem:hover, .x-templated.x-ListBoxItem.x-selected { background: none; border: 0; }
.x-thead, .x-tbody.x-grid { display: grid; }
.x-th { padding: 4px 8px; background: linear-gradient(#fff, #f2f2f2); border-right: 1px solid #e0e0e0; border-bottom: 1px solid #d5d5d5; white-space: nowrap; user-select: none; position: relative; }
.x-th::after { content: attr(data-dir); position: absolute; right: 6px; font-size: 8px; color: #666; }
.x-tcell { padding: 3px 8px; border-bottom: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0; display: flex; align-items: center; min-height: 20px; overflow: hidden; }
.x-ListViewItem:hover > .x-tcell { background: #e5f3fb; }
.x-ListViewItem.x-selected > .x-tcell { background: #cbe8f6; }
.x-DataGrid { }
.x-DataGridRow:hover > .x-tcell { background: #eef6fc; }
.x-DataGridRow.x-alt > .x-tcell { background: var(--alt); }
.x-DataGridRow.x-selected > .x-tcell { background: #3399ff; color: #fff; }
.x-DataGrid.x-gl-none .x-tcell, .x-DataGrid.x-gl-horizontal .x-tcell { border-right-color: transparent; }
.x-DataGrid.x-gl-none .x-tcell, .x-DataGrid.x-gl-vertical .x-tcell { border-bottom-color: transparent; }
.x-tcell input { width: 100%; font: inherit; border: 1px solid #569de5; padding: 0 2px; outline: none; }
.x-tcell.x-checked .x-cb-box svg { opacity: 1; }

/* ComboBox & popups */
.x-ComboBox { position: relative; min-height: 22px; border: 1px solid #acacac; background: linear-gradient(#f0f0f0, #e5e5e5); align-items: stretch; cursor: default; user-select: none; }
.x-ComboBox:hover { border-color: #7eb4ea; background: linear-gradient(#ecf4fc, #dcecfc); }
.x-cmb-main { flex: 1; padding: 2px 4px; display: flex; align-items: center; min-width: 0; background: #fff; margin: 1px 0 1px 1px; }
.x-cmb-main input { width: 100%; border: 0; outline: none; font: inherit; background: transparent; }
.x-cmb-arrow { width: 18px; display: grid; place-items: center; color: #555; }
.x-popup { display: none; position: absolute; z-index: 1000; background: #fff; border: 1px solid #8e8f8f; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); overflow: auto; }
.x-cmb-pop { top: 100%; left: -1px; min-width: calc(100% + 2px); max-height: 240px; padding: 1px; }
.x-ComboBox.x-open > .x-cmb-pop { display: flex; flex-direction: column; }

/* Tabs */
.x-TabControl { }
.x-tabs-head { display: flex; align-items: flex-end; padding-left: 2px; }
.x-TabItem { padding: 2px 6px; border: 1px solid #acacac; border-bottom: 0; background: linear-gradient(#f0f0f0, #e5e5e5); margin-right: -1px; cursor: default; user-select: none; position: relative; top: 1px; font-size: 12px; white-space: nowrap; }
.x-TabItem:hover { background: linear-gradient(#ecf4fc, #dcecfc); border-color: #7eb4ea; }
.x-TabItem.x-selected { background: #fff; padding-bottom: 4px; z-index: 1; border-color: #acacac; }
.x-tabs-body { border: 1px solid #acacac; background: #fff; padding: 4px; display: grid; flex: 1; min-height: 0; }

/* TreeView */
.x-TreeView { padding: 2px; }
.x-tv-row { display: flex; align-items: center; padding: 1px 3px; cursor: default; user-select: none; }
.x-tv-row:hover { background: #e5f3fb; }
.x-tv-arrow { width: 16px; text-align: center; font-size: 9px; color: #666; flex: none; }
.x-tv-arrow::before { content: '▷'; }
.x-TreeViewItem.x-open > .x-tv-row > .x-tv-arrow::before { content: '◢'; color: #222; }
.x-TreeViewItem.x-leaf > .x-tv-row > .x-tv-arrow { visibility: hidden; }
.x-tv-children { margin-left: 16px; }
.x-TreeViewItem.x-tv-selected > .x-tv-row { background: #3399ff; color: #fff; }
.x-TreeViewItem.x-tv-selected > .x-tv-row .x-tv-arrow { color: #fff; }

/* Menu */
.x-Menu { background: linear-gradient(#fafafa, #ececec); border-bottom: 1px solid #e0e0e0; padding: 1px; }
.x-MenuItem { position: relative; }
.x-mi-head { display: flex; align-items: center; padding: 3px 8px; cursor: default; white-space: nowrap; user-select: none; border: 1px solid transparent; }
.x-MenuItem.x-top > .x-mi-head { padding: 3px 7px; }
.x-mi-head:hover, .x-MenuItem.x-open > .x-mi-head { background: #deeaf5; border-color: #aacbea; }
.x-mi-check { width: 18px; font-size: 11px; display: inline-block; text-align: center; flex: none; }
.x-MenuItem.x-top > .x-mi-head .x-mi-check { display: none; }
.x-mi-title { flex: 1; }
.x-mi-gesture { margin-left: 24px; color: #666; }
.x-mi-arrow { margin-left: 12px; font-size: 9px; }
.x-mi-sub { top: 100%; left: 0; min-width: 160px; background: #f5f5f5; border: 1px solid #979797; padding: 2px; flex-direction: column; }
.x-MenuItem.x-open > .x-mi-sub { display: flex; }
.x-mi-sub .x-MenuItem > .x-mi-sub { top: -3px; left: 100%; }
.x-mi-sub .x-MenuItem:hover > .x-mi-sub { display: flex; }
.x-ctx { background: #f5f5f5; border: 1px solid #979797; padding: 2px; min-width: 150px; display: flex; flex-direction: column; }
.x-ctx .x-mi-head { padding: 3px 10px; }