/* Centralized UI styles moved out of UI_classes.js */


/* Selection button used inside input containers (small '...') */
.input-field-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  font-family: MS Sans Serif, sans-serif;
  font-size: 12px;
  box-sizing: border-box;
  cursor: default;
    /* Let button match the input container height so sizing adapts to input size */
    flex: 0 0 auto;
  /* stretch to container height and keep square aspect */
  align-self: stretch;
  height: auto;
  aspect-ratio: 1 / 1;
  width: auto; /* width will equal computed height because of aspect-ratio */
  line-height: 1;
  /* Borders use CSS variables set by JS to allow theming via client config */
  border-top: 2px solid var(--input-field-button-border-light, #e0e0e0);
  border-left: 2px solid var(--input-field-button-border-light, #e0e0e0);
  border-right: 2px solid var(--input-field-button-border-dark, #808080);
  border-bottom: 2px solid var(--input-field-button-border-dark, #808080);
}

/* Compact variant merged: both input buttons use unified `.input-field-button` sizing */

/* Form / window */
.ui-form {
  position: absolute;
  box-sizing: border-box;
  outline: none;
  font-family: MS Sans Serif, sans-serif;
  font-size: 11px;
  -webkit-font-smoothing: antialiased;
}
.ui-form .ui-titlebar {
  background-color: #808080;
  color: #ffffff;
  font-weight: bold;
  font-size: 14px;
  padding: 2px 2px;
  cursor: default;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ui-form .ui-titlebar .ui-titlebar-buttons {
  display:flex;
  gap:2px;
  margin-left:auto;
  flex-shrink:0;
}
.ui-form .ui-titlebar button.ui-title-button {
  width:18px;height:18px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;line-height:18px;box-sizing:border-box;background:transparent;border:none;outline:none;cursor:default;
}

/* Generic buttons */
.ui-button {
  font-family: MS Sans Serif, sans-serif;
  font-size: 11px;
  cursor: default;
  outline: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Input controls */
.ui-input-container {
  display:flex;
  flex-direction:row;
  align-items: stretch; /* allow children to fill container height so buttons match input */
  width:100%;
  box-sizing:border-box;
}
.ui-input {
  position:relative;
  flex:1 1 auto;
  width:auto;
  background-color:#ffffff;
  font-family: MS Sans Serif, sans-serif;
  font-size:11px;
  padding:2px 4px;
  outline:none;
  box-sizing:border-box;
  /* let input stretch to fill container height (align-self) rather than forcing explicit height */
  align-self: stretch;
  height: auto;
}

/* Uniform textbox height (Win95 controls are a single fixed height).
   The inner white box gets a deterministic height so the presence of an
   embedded "…"/"▾" button can't make a field taller than a plain one —
   all children (input + buttons) stretch into the same box height. */
.ui-input-container.ui-textbox-box {
  height: var(--ui-control-height, 23px);
  box-sizing: border-box;
}
/* Inside tables / borderless containers the row (cell) height rules,
   so don't pin the box to a fixed height there. */
.ui-input-no-border .ui-input-container.ui-textbox-box {
  height: auto;
}

/* Helper class: remove borders/background for input containers (used inside tables) */
.ui-input-no-border {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}
.ui-input-no-border input,
.ui-input-no-border textarea,
.ui-input-no-border select,
.ui-input-no-border .ui-input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Strong override for containers that may have inline borders/styles applied by controls */
.ui-input-no-border .ui-input-container,
.ui-input-no-border .ui-textbox,
.ui-input-no-border .ui-input-container * {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.textbox-list-popup {
  position:absolute;
  background-color:#ffffff;
  font-family: MS Sans Serif, sans-serif;
  font-size:11px;
  z-index:99999;
  box-sizing:border-box;
  padding:2px;
  box-shadow:0 4px 10px rgba(0,0,0,0.25);
}

/* Labels */
.ui-label {
  font-family: MS Sans Serif, sans-serif;
  font-size: 11px;
  color: #000000;
  display:inline-block;
  box-sizing:border-box;
}

/* Toolbar */
.ui-toolbar {
  display:flex;
  align-items:center;
  box-sizing:border-box;
  font-family: MS Sans Serif, sans-serif;
  font-size:11px;
}

/* Dynamic table base */
.ui-dynamictable {
  position:relative;
  width:100%;
  height:100%;
  box-sizing:border-box;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  font-family: MS Sans Serif, sans-serif;
  font-size:11px;
  user-select:none;
  /* Таблицы должны растягиваться в flex-контейнере */
  flex: 1 1 auto;
  min-height: 0; /* Важно для корректной работы flex с overflow */
}

/* Custom checkbox visual box */
.custom-checkbox-box {
  width:13px;height:13px;position:absolute;left:0;top:0;z-index:1;background:#fff;border:1px solid #808080;box-shadow:inset 1px 1px 0px rgba(0,0,0,0.3);
}

/* Misc */
.ui-fieldset.vertical { display:flex; flex-direction:column; }
.ui-fieldset.horizontal { display:flex; flex-direction:row; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url('fall.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Color palette variables for easy theming */
:root {
  --color-light: #ffffff;
  --color-mid: #c0c0c0;
  --color-dark: #404040;
  --color-text: #000000;
}

/* Win95/Win98 style form group container */

/* Group (fieldset) styled like Win95/98 */
.ui-group {
  box-sizing: border-box;
  padding: 8px;
  margin: 0; /* spacing handled by parent flex gap */
  background: var(--color-mid);
  /* Draw framing using two pseudo-elements: light frame and a dark frame shifted -1px,-1px */
  border: none;
  box-shadow: none;
  color: var(--color-text);
  font-family: MS Sans Serif, Tahoma, Arial, sans-serif;
  font-size: 11px;
  display: flex; /* default: horizontal layout */
  flex-direction: row;
  /*align-items: center;*/
  align-items: flex-start;
  gap: 10px;
  position: relative;
  overflow: visible; /* allow shifted dark frame to be visible without clipping */
}

/* Horizontal explicit class (optional) */
.ui-group.horizontal {
  flex-direction: row;
  /*align-items: center;*/
  align-items: flex-start;
  gap: 10px;
}

/* Vertical / column layout */
.ui-group.vertical,
.ui-group.column {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.ui-group legend {
  font-family: MS Sans Serif, Tahoma, Arial, sans-serif;
  font-size: 11px;
  padding: 0 6px;
  background: var(--color-mid); /* hide border behind legend */
  color: var(--color-text);
  position: absolute; /* position relative to .ui-group */
  top: 0; /* align legend center to the top border */
  left: 8px;
  transform: translateY(-50%); /* center text vertically on the top border line */
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
  z-index: 3; /* above the pseudo-border layers */
}


/* Pseudo-elements to draw the two frames: light frame at exact bounds, dark frame offset -1px,-1px */
.ui-group::before,
.ui-group::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  pointer-events: none;
}

.ui-group::before {
  /* light frame exactly around element */
  border: 1px solid var(--color-light);
  z-index: 1;
}

.ui-group::after {
  /* dark frame same size, shifted up-left by 1px */
  border: 1px solid var(--color-dark);
  /* dark frame shifted up-left by 1px without changing size */
  transform: translate(-1px, -1px);
  z-index: 2;
}

/* Nested groups inherit same framing */

/* noBorder group — no visible frame, no padding offset (content flush with edges) */
.ui-group-no-border::before,
.ui-group-no-border::after {
    display: none;
}
.ui-group-no-border {
    margin: 0;
    padding: 0;
}
/* Legend repositioned to top-left corner (no border to sit on) */
.ui-group-no-border > legend {
    left: 0;
    top: 0;
    transform: none;
    padding: 0;
    background: transparent;
}
/* Frameless group WITH a caption: reserve top room so the corner caption does
   not overlap the content. Sides/bottom stay flush (no border padding).
   Decoupled from bold styling — applies to any captioned no-border group. */
.ui-group-no-border.ui-group-no-border-titled {
    padding-top: 16px;
}
/* Bold caption group — legend text is bold */
.ui-group-bold-caption > legend {
    font-weight: bold;
}

/* Aligned-field group (layout flag "alignFields"): two-column grid — captions
   in column 1 (auto-sized to the widest label), controls in column 2. Each
   caption+control pair shares one grid row, so they never drift vertically —
   works regardless of control height or selector/calendar buttons. Higher
   specificity than .ui-group.vertical so display:grid wins over display:flex. */
.ui-group.ui-group-aligned {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 8px;
    row-gap: 5px;
    align-items: center;
}
.ui-aligned-label {
    white-space: nowrap;
    font-family: MS Sans Serif, Tahoma, Arial, sans-serif;
    font-size: 11px;
    color: var(--color-text);
}


/* Additional UI component styles (moved from UI_classes.js) */
.ui-form {
  position: absolute;
  box-sizing: border-box;
  outline: none;
  background-color: var(--color-mid);
  border-top: 2px solid var(--color-light);
  border-left: 2px solid var(--color-light);
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
}

.ui-form-titlebar {
  background-color: #808080;
  color: #ffffff;
  font-weight: bold;
  font-size: 14px;
  padding: 2px 2px;
  cursor: default;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ui-form-title { padding-left: 4px; }

.ui-form-buttons { display:flex; gap:2px; flex-shrink:0; margin-left:auto; }

.ui-title-button { width:18px; height:18px; padding:0; margin:0; display:flex; align-items:center; justify-content:center; line-height:18px; box-sizing:border-box; background:transparent; border:none; outline:none; cursor:default; }

.ui-form-content { position:relative; width:100%; overflow:auto; box-sizing:border-box; 
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px;
}

/* Все прямые дочерние элементы content area по умолчанию не растягиваются по вертикали */
.ui-form-content > * {
  flex: 0 0 auto;
}

.ui-button { background-color: var(--color-mid); border-top:2px solid var(--color-light); border-left:2px solid var(--color-light); border-right:2px solid #808080; border-bottom:2px solid #808080; font-family: MS Sans Serif, sans-serif; font-size:11px; cursor:default; outline:none; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; }

.ui-textbox { background-color:#ffffff; border-top:2px solid #808080; border-left:2px solid #808080; border-right:2px solid #ffffff; border-bottom:2px solid #ffffff; font-family: MS Sans Serif, sans-serif; font-size:11px; padding:2px 4px; outline:none; box-sizing:border-box; }

.ui-label { display:inline-block; box-sizing:border-box; font-size:11px; font-family: MS Sans Serif, sans-serif; color:var(--color-text); }

.ui-toolbar { display:flex; align-items:center; box-sizing:border-box; background-color: var(--color-mid); }
.ui-toolbar.compact { padding:0; gap:0; }
.ui-toolbar:not(.compact):not(.table-toolbar) { padding:5px; gap:5px; }
.ui-toolbar.table-toolbar { padding: 0; gap: 0; }
.ui-toolbar.table-toolbar .ui-button { width: 22px; height: 22px; min-width: 22px; padding: 0; }

.ui-toolbar-button { display:flex; align-items:center; justify-content:center; box-sizing:border-box; cursor:default; border:1px solid transparent; padding:0 4px; user-select:none; min-width:24px; height:22px; }

.ui-toolbar-separator { width:2px; height:18px; margin-left:2px; margin-right:2px; border-left:1px solid #808080; border-right:1px solid #ffffff; }

/* --- Filter Bar --- */
.ui-filter-bar {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px 6px;
    background: #dcdcdc;
    border-bottom: 1px solid #808080;
    box-sizing: border-box;
    align-items: center;
    min-height: 26px;
}
.ui-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 5px;
    background: #ffffff;
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
    font-size: 11px;
    white-space: nowrap;
    cursor: default;
    user-select: none;
}
.ui-filter-chip--off { opacity: 0.45; }
.ui-filter-chip input[type="checkbox"] { margin: 0; cursor: pointer; }
.ui-filter-chip-label { cursor: pointer; }
.ui-filter-chip-del {
    cursor: pointer;
    padding: 0 2px;
    color: #800000;
    font-weight: bold;
    line-height: 1;
}
.ui-filter-chip-del:hover { color: #ff0000; }

.ui-checkbox { display:flex; align-items:center; cursor:default; user-select:none; }
.ui-checkbox > div { width:13px; height:13px; background-color:#ffffff; border-top:1px solid #808080; border-left:1px solid #808080; border-right:1px solid #ffffff; border-bottom:1px solid #ffffff; box-shadow: inset 1px 1px 0px #000000, 1px 1px 0px #ffffff; display:flex; align-items:center; justify-content:center; font-size:10px; margin-right:6px; color:#000000; }

.ui-radiobutton { display:flex; align-items:center; cursor:default; user-select:none; }
.ui-radiobutton .circle { width:12px; height:12px; border-radius:50%; background-color:#ffffff; border-top:1px solid #808080; border-left:1px solid #808080; border-right:1px solid #ffffff; border-bottom:1px solid #ffffff; box-shadow: inset 1px 1px 0px #000000, 1px 1px 0px #ffffff; display:flex; align-items:center; justify-content:center; margin-right:6px; }

.ui-radiogroup { position:absolute; }

.ui-combobox { display:flex; align-items:center; box-sizing:border-box; }

.ui-fieldset { box-sizing: border-box; }


/* Remove persistent 1px rounded UA border around native checkboxes (not focus styles) */
input[type="checkbox"],
.ui-checkbox input[type="checkbox"] {
  border: none !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Custom visual box that replaces native checkbox border
   Native checkbox is kept invisible (opacity:0) on top to preserve focus & keyboard interaction. */
.custom-checkbox-box {
  width: 13px;
  height: 13px;
  background-color: #ffffff;
  border: none !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #000000;
  border-radius: 0; /* ensure square corners */
}

/* Show checkmark inside visual box when native input is checked */
.ui-checkbox input[type="checkbox"]:checked + .custom-checkbox-box::after {
  content: '\2714'; /* checkmark */
  font-size: 11px;
  line-height: 1;
  /*font-weight: bold;*/
}

/* Table row styling: zebra + active highlight */
.ui-dynamictable table tbody tr.ui-table-row {
  background-color: #ffffff;
}
.ui-dynamictable table tbody tr.ui-table-row:nth-child(even) {
  background-color: #f0f0f0;
}
.ui-dynamictable table tbody tr.ui-table-row.active {
  background-color: #cdeeff !important;
}

/* Hide input buttons in non-active table rows (useful when rows are styled
   gray for inactive state). This makes buttons invisible instead of gray. */
.ui-dynamictable table tbody tr.ui-table-row:not(.active) .input-field-button,
.ui-dynamictable table tbody tr.ui-table-row:not(.active) button.input-field-button {
  visibility: hidden !important;
}

/* Hide input buttons in dynamic table rows when controls are disabled
   (table logic sets `button.disabled = true` for inactive rows). */
.ui-dynamictable table tbody tr.ui-table-row .input-field-button:disabled,
.ui-dynamictable table tbody tr.ui-table-row button.input-field-button[disabled] {
  visibility: hidden !important;
}
.ui-dynamictable table tbody tr.ui-table-row:focus {
  outline: none;
}

/* Windows 95/98 Retro Scrollbar Style */

/* Базовые настройки для Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--color-mid) #efefef;
}

/* Настройки для Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background-color: #efefef;
}

/* Трек (дорожка) - имитация точечного узора Win95 через шахматный градиент */
::-webkit-scrollbar-track {
  background-color: #efefef;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgD9R79X9MAAAAASUVORK5CYII=");
}

/* Ползунок (Thumb) с 3D рамкой */
::-webkit-scrollbar-thumb {
  background-color: var(--color-mid);
  border: 1px solid var(--color-mid);
  box-shadow: 
    inset 1px 1px 0px var(--color-light), 
    inset -1px -1px 0px #808080,
    1px 1px 0px #000000;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-mid);
}

/* Кнопки прокрутки */
::-webkit-scrollbar-button:single-button {
  background-color: var(--color-mid);
  display: block;
  border: 1px solid var(--color-mid);
  box-shadow: 
    inset 1px 1px 0px var(--color-light), 
    inset -1px -1px 0px #808080,
    1px 1px 0px #000000;
  background-position: center;
  background-repeat: no-repeat;
  height: 16px;
  width: 16px;
}

::-webkit-scrollbar-button:single-button:active {
  box-shadow: 
    inset 1px 1px 0px #000000, 
    inset -1px -1px 0px var(--color-mid);
}

/* Стрелочки для кнопок (SVG Data URI) */
::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M4 2 L1 5 L7 5 Z' fill='black'/></svg>");
}
::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M4 6 L1 3 L7 3 Z' fill='black'/></svg>");
}
::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2 4 L5 1 L5 7 Z' fill='black'/></svg>");
}
::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M6 4 L3 1 L3 7 Z' fill='black'/></svg>");
}

/* Уголок между полосами */
::-webkit-scrollbar-corner {
  background-color: var(--color-mid);
}

/* --- Tabs Win95 --- */
.ui-tabs {
    display: flex;
    flex-direction: column;
    margin-top: -8px; /* reduce gap after toolbar: 14px - 8px = 6px */
    /* Private stacking context: tab/panel z-index layering stays isolated
       from the rest of the form. */
    isolation: isolate;
}

.ui-tabs-header {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding-left: 0;
    /* No z-index here: the header must NOT create a stacking context, otherwise
       individual tab buttons could not sit in front of / behind the panel. */
}

.ui-tabs-header button {
    font-family: MS Sans Serif, sans-serif;
    font-size: 11px;
    background-color: var(--color-mid);
    border: none;
    padding: 3px 10px;
    margin-right: 0; /* tabs flush, no gap between tongues */
    position: relative;
    outline: none;
    border-top: 2px solid var(--color-light);
    border-left: 2px solid var(--color-light);
    border-right: 2px solid #808080;
    border-bottom: 2px solid var(--color-mid);
    border-radius: 2px 2px 0 0;
    cursor: default;
    /* Inactive tab: sits BEHIND the panel, so the panel's raised top line is
       painted over the bottom of the tongue → reads as "inactive". */
    z-index: 1;
}

.ui-tabs-header button.active {
    /* Same geometry as inactive tabs (no enlargement). Only the stacking order
       differs: the active tab sits IN FRONT of the panel and covers its top
       line → the tongue looks connected to the panel.

       No bottom border: a mid-coloured bottom border would form diagonal miter
       corners with the light/dark 3D side borders, and because the active tab
       is painted over the panel those corners stuck out past the panel's top
       line as a 3px artefact. Without it the side borders run straight down to
       the seam and the tab's own background (between them) covers the panel
       line — so the weld is clean and nothing leaks sideways onto the line.
       The removed 2px is added back as padding so the height stays identical
       to the inactive tabs. */
    z-index: 3;
    border-bottom: none;
    padding-bottom: 5px;
}

.ui-tabs-content {
    background-color: var(--color-mid);
    border-top: 2px solid var(--color-light);
    border-left: 2px solid var(--color-light);
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    padding: 8px;
    margin-top: -2px; /* overlap header bottom by the 2px border thickness */
    position: relative;
    /* Between inactive tabs (1) and the active tab (3): the raised top line
       covers inactive tongues but is itself covered by the active tongue. */
    z-index: 2;
    min-height: 60px;
    display: flex;
    flex-direction: column;
}

/* Tab pane: lay out its content blocks like the form body — a vertical stack
   with the same 14px gap as .ui-form-content — so groups inside a tab are spaced
   consistently with the rest of the form (a pane is a plain holder otherwise, so
   its children would sit flush against each other). */
.ui-tabs-pane {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ui-tabs-content::after {
    display: none;
}