:root {
    --vt-page: #DADDE0;
    --vt-card: #ECEEEF;
    --vt-input: #F8F9FA;
    --vt-workspace: #CFD3D6;
    --vt-text: #30363B;
    --vt-muted: #586169;
    --vt-border: #D2D6D9;
    --vt-input-border: #B9C0C5;
    --vt-accent: #FFD447;
    --vt-accent-border: #E4B729;
    --vt-accent-hover: #FFCA28;
    --vt-accent-active: #F2BB13;
    --vt-button-text: #20262C;
    --vt-disabled: #D5D9DC;
    --vt-disabled-text: #626B72;
    --vt-disabled-border: #B6BDC2;
    --vt-focus: #20262C;
    --vt-radius: .5rem;
    --vt-action-transition: background-color .15s, border-color .15s;
    --vt-yellow: var(--vt-accent);
    /* Bootstrap utilities use these variables, including bg-body and border. */
    --bs-body-bg: var(--vt-card);
    --bs-body-bg-rgb: 236,238,239;
    --bs-body-color: var(--vt-text);
    --bs-body-color-rgb: 48,54,59;
    --bs-secondary-color: var(--vt-muted);
    --bs-secondary-color-rgb: 88,97,105;
    --bs-border-color: var(--vt-border);
    --bs-border-radius: var(--vt-radius);
    --bs-link-color: #30363B;
    --bs-link-color-rgb: 48,54,59;
    --bs-link-hover-color: #20262C;
    --bs-link-hover-color-rgb: 32,38,44;
}
body { background: var(--vt-page); color: var(--vt-text); font-family: system-ui,sans-serif; }
.vt-container { max-width: 1800px; }
#main { padding-block: .65rem 1.25rem; }
#main .row > * { min-width: 0; }
#footer { background: var(--vt-workspace); color: var(--vt-muted); text-align: center; font-size: .85rem; }
.vt-form, .tabbody { color: var(--vt-text); }
.vt-form.border, .tabbody, .vt-oil-edit-form > section, .vt-oil-danger {
    background: var(--vt-card); border: 1px solid var(--vt-border); border-radius: var(--vt-radius); box-shadow: none;
}
.vt-form .vt-form { background: transparent; }
.vt-form:after { content: ''; display: block; clear: both; }
.vt-fields:not(.row) { margin-bottom: 1rem; }
.vt-fields.row { margin-bottom: .5rem; }
.vt-form .form-label { margin-top: .65rem; margin-bottom: .4rem; font-weight: 600; }
.vt-form .form-check-input { margin: .75rem; }
.vt-form h2, .vt-form h3, .vt-form h6 { color: var(--vt-text); }
.vt-form hr { border-color: var(--vt-border); opacity: .65; margin-block: 1.5rem; }
.vt-form .border-bottom { border-bottom-color: var(--vt-border); }
.form-control, .form-select, .dataTables_filter input, .dataTables_length select,
#main input:not([type]), #main input:is([type=text],[type=password],[type=email],[type=number],[type=search]), #main textarea {
    color: var(--vt-text); background-color: var(--vt-input); border: 1px solid var(--vt-input-border); border-radius: var(--vt-radius);
    font: inherit; min-width: 0;
}
.form-control::placeholder, #main input::placeholder { color: #68727A; opacity: 1; }
.form-control:read-only { background-color: #E2E5E7; }
.form-control:disabled, .form-select:disabled { background-color: #DEE2E4; color: var(--vt-muted); }
.form-control:focus, .form-select:focus, .form-check-input:focus,
.dataTables_filter input:focus, .dataTables_length select:focus {
    color: var(--vt-text); border-color: var(--vt-accent-border); outline: 2px solid var(--vt-focus); outline-offset: 2px; box-shadow: none;
}
/* Explicit dark indicators keep both native and Bootstrap controls consistent. */
:root input:is([type=checkbox],[type=radio]) {
    appearance: none; width: 1.1rem; height: 1.1rem; flex-shrink: 0; vertical-align: middle;
    background: var(--vt-input) center / 100% 100% no-repeat; border: 1px solid var(--vt-input-border);
    border-radius: .25rem; accent-color: var(--vt-accent); cursor: pointer;
}
:root input[type=radio] { border-radius: 50%; }
:root input:is([type=checkbox],[type=radio]):is(:checked,:indeterminate) {
    background-color: var(--vt-accent); border-color: var(--vt-accent-border);
}
:root input[type=checkbox]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2320262C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m3.5 8 3 3 6-6'/%3E%3C/svg%3E");
}
:root input[type=radio]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.5' fill='%2320262C'/%3E%3C/svg%3E");
}
:root input[type=checkbox]:indeterminate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='%2320262C' stroke-width='2.2' stroke-linecap='round' d='M4 8h8'/%3E%3C/svg%3E");
}
:root input:is([type=checkbox],[type=radio]):focus-visible { outline: 2px solid var(--vt-focus); outline-offset: 3px; box-shadow: none; }
:root input:is([type=checkbox],[type=radio]):disabled { background-color: var(--vt-disabled); border-color: var(--vt-disabled-border); opacity: .65; cursor: not-allowed; }
input:disabled { cursor: default; }
label.error { display: block; color: #982E2E; font-size: .875rem; margin-top: .35rem; }
input.error, .form-control.error { border-color: #AA4343; }
/* One action style for native controls, Bootstrap, jQuery UI and generated controls. */
:root :is(button:not(.vt-logout), input[type=submit], input[type=button], input[type=reset], .btn, .ym-button, .button, [role=button], .ui-button, .vt-oil-edit-link,
    .dataTables_paginate a, .zoomer .zoomer-controls span) {
    --bs-btn-color: var(--vt-button-text);
    --bs-btn-bg: var(--vt-accent);
    --bs-btn-border-color: var(--vt-accent-border);
    --bs-btn-hover-color: var(--vt-button-text);
    --bs-btn-hover-bg: var(--vt-accent-hover);
    --bs-btn-hover-border-color: var(--vt-accent-border);
    --bs-btn-active-color: var(--vt-button-text);
    --bs-btn-active-bg: var(--vt-accent-active);
    --bs-btn-active-border-color: var(--vt-accent-border);
    --bs-btn-disabled-color: var(--vt-disabled-text);
    --bs-btn-disabled-bg: var(--vt-disabled);
    --bs-btn-disabled-border-color: var(--vt-disabled-border);
    --vt-action-text: var(--vt-button-text);
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 2.6rem; padding: .55rem .95rem; border: 1px solid var(--vt-accent-border); border-radius: var(--vt-radius);
    background: var(--vt-accent); color: var(--vt-action-text); font: 600 .9rem/1.4 system-ui,sans-serif;
    text-decoration: none; text-shadow: none; box-shadow: none; cursor: pointer; vertical-align: middle;
    transition: var(--vt-action-transition); touch-action: manipulation;
}
:root :is(button:not(.vt-logout), input[type=submit], input[type=button], input[type=reset], .btn, .ym-button, .button, [role=button], .ui-button, .vt-oil-edit-link,
    .dataTables_paginate a, .zoomer .zoomer-controls span):hover:not(:disabled):not(.disabled):not([aria-disabled=true]):not(.paginate_disabled_previous):not(.paginate_disabled_next):not(.ui-state-disabled) {
    background: var(--vt-accent-hover); border-color: var(--vt-accent-border); color: var(--vt-action-text);
}
:root :is(button:not(.vt-logout), input[type=submit], input[type=button], input[type=reset], .btn, .ym-button, .button, [role=button], .ui-button, .vt-oil-edit-link,
    .dataTables_paginate a, .zoomer .zoomer-controls span):is(:active,.active,[aria-pressed=true],.paginate_active):not(:disabled):not(.disabled):not([aria-disabled=true]):not(.paginate_disabled_previous):not(.paginate_disabled_next):not(.ui-state-disabled) {
    background: var(--vt-accent-active); border-color: var(--vt-accent-border); color: var(--vt-action-text);
}
:root :is(button:not(.vt-logout), input[type=submit], input[type=button], input[type=reset], .btn, .ym-button, .button, [role=button], .ui-button, .vt-oil-edit-link,
    .dataTables_paginate a, .zoomer .zoomer-controls span):focus-visible {
    outline: 3px solid var(--vt-focus); outline-offset: 3px; box-shadow: 0 0 0 2px var(--vt-input);
}
:root :is(button:not(.vt-logout), input[type=submit], input[type=button], input[type=reset], .btn, .ym-button, .button, [role=button], .ui-button, .vt-oil-edit-link,
    .dataTables_paginate a, .zoomer .zoomer-controls span):is(:disabled,.disabled,[aria-disabled=true],.paginate_disabled_previous,.paginate_disabled_next,.ui-state-disabled) {
    --vt-action-text: var(--vt-disabled-text);
    color: var(--vt-action-text); background: var(--vt-disabled); border-color: var(--vt-disabled-border);
    opacity: 1; cursor: not-allowed; box-shadow: none; text-shadow: none; transition: none;
}
/* The legacy vendor files mark these link colors important; match only that conflict. */
:root :is(.button, .dataTables_paginate a) { color: var(--vt-action-text) !important; }
:root :is(.zoomer_custom_zoom_in,.zoomer_custom_zoom_out,[data-remove-measurement],.vt-oil-edit-link,.zoomer .zoomer-controls span) {
    min-width: 2.25rem; min-height: 2.25rem; width: auto; height: auto; padding: .3rem .55rem;
}
.zoomer_custom_zoom_in, .zoomer_custom_zoom_out { margin-left: .5rem; }
.zoomer_wrapper { height: clamp(360px,75vh,900px); max-width: 100%; margin-block: 1rem; border: 1px solid var(--vt-border); border-radius: var(--vt-radius); background: var(--vt-workspace); }
.zoomer { background-color: var(--vt-workspace); }
.zoomer .zoomer-holder { background: #fff; box-shadow: 0 1px 5px #30363B26; }
.zoomer img { max-width: none; background: #fff; }
.zoomer .zoomer-controls { background: var(--vt-card); box-shadow: none; }
table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
th, td { padding: .65rem; border-bottom: 1px solid var(--vt-border); }
.table {
    --bs-table-bg: var(--vt-card); --bs-table-color: var(--vt-text); --bs-table-border-color: var(--vt-border);
    --bs-table-striped-bg: #30363B05; --bs-table-striped-color: var(--vt-text); --bs-table-hover-bg: #30363B0A; --bs-table-hover-color: var(--vt-text);
}
table.dataTable :is(th,td) { border: 0; border-bottom: 1px solid var(--vt-border); }
table.dataTable :is(tr.odd,tr.even) { background: var(--vt-card); }
table.dataTable thead :is(.sorting,.sorting_asc,.sorting_desc) { background: var(--vt-workspace); }
.sorting_asc:after { content: ' \25b2'; }.sorting_desc:after { content: ' \25bc'; }.sorting:after { content: ' \2195'; }
.dataTables_filter input, .dataTables_length select { padding: .4rem .55rem; max-width: 100%; }
.dataTables_filter { width: auto; max-width: 100%; }
.dataTables_filter input { float: none; margin-left: .5rem; }
.dataTables_paginate { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding-top: .5rem; height: auto; }
:root .dataTables_paginate a { margin: 0; float: none; }
.dataTables_paginate :is(.paginate_enabled_previous,.paginate_disabled_previous):before { content: '\2039'; font-size: 1.25rem; }
.dataTables_paginate :is(.paginate_enabled_next,.paginate_disabled_next):after { content: '\203a'; font-size: 1.25rem; }
.ui-autocomplete { z-index: 1100; max-width: calc(100vw - 2rem); }
.ui-widget-content, .ui-tooltip { background: var(--vt-input); color: var(--vt-text); border-color: var(--vt-input-border); }
.ui-menu .ui-menu-item a { color: var(--vt-text); }
.ui-menu .ui-menu-item a.ui-state-focus { background: var(--vt-workspace); color: var(--vt-text); border-color: var(--vt-accent-border); }
.vt-oil-editor { max-width: 1100px; margin-inline: auto; }
.vt-oil-back { color: var(--bs-link-color); text-decoration: none; font-weight: 600; }
.vt-oil-back:hover { color: var(--bs-link-hover-color); text-decoration: underline; }
.vt-oil-edit-form > .vt-oil-required { border-inline-start: 3px solid var(--vt-accent-border); }
.vt-oil-required-badge { background: var(--vt-accent); color: var(--vt-text); border-radius: 1rem; padding: .2rem .65rem; font-size: .75rem; font-weight: 700; }
.vt-oil-required .form-control { border-color: var(--vt-accent-border); font-weight: 600; }
.vt-oil-edit-link { margin-right: .4rem; }
.vt-oil-edit-link img { width: 16px; height: 16px; object-fit: contain; }
.vt-oil-danger { padding: 1.5rem; }
.vt-measurement-table th { font-size: .875rem; }
.vt-measurement-table td:last-child { width: 3.5rem; text-align: right; }
.vt-account-page { max-width: 640px; }
/* Header: account actions above the horizontal main navigation. */
#header { background: #000; color: #fff; }
.vt-header-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; column-gap: 2rem; row-gap: .65rem; padding: 1rem 2rem 1.1rem; }
.vt-header-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.25rem; min-width: 0; }
.vt-utility-navigation { min-width: 0; }
.vt-utility-navigation ul, #nav.vt-navigation ul { display: flex; align-items: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.vt-utility-navigation ul { gap: .5rem 1.25rem; }
.vt-utility-navigation li, #nav.vt-navigation li { margin: 0; padding: 0; list-style: none; }
.vt-header-tools a, .vt-language-option { color: #A5A5A5; font-size: .875rem; font-weight: 600; line-height: 1.5; text-decoration: none; }
.vt-header-tools a:hover { color: #fff; }
.vt-utility-navigation a { display: inline-block; padding: .5rem 0; }
.vt-utility-navigation .active a { text-decoration: underline; text-underline-offset: 5px; }
.vt-language { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.vt-language-option { display: inline-block; padding: .5rem 0; }
.vt-language-option.is-active { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.vt-language-divider { color: #777; }
.vt-account { display: flex; flex-shrink: 0; }
#header button.vt-logout {
    display: inline-flex; align-items: center; justify-content: flex-start; gap: .4rem;
    min-height: 2.25rem; padding: .4rem 0; margin: 0; border: 0; border-radius: 0;
    background: transparent; color: #A5A5A5; font: 600 .875rem/1.5 system-ui,sans-serif;
    box-shadow: none; text-shadow: none; cursor: pointer;
}
#header button.vt-logout:hover:not(:disabled) { color: #fff; }
#header button.vt-logout:active:not(:disabled) { color: var(--vt-accent); }
#header button.vt-logout:focus-visible { outline: 2px solid var(--vt-accent); outline-offset: 4px; }
#header button.vt-logout:disabled { color: var(--vt-disabled-text); cursor: not-allowed; }
#header button.vt-logout svg { color: var(--vt-accent); }
#header button.vt-logout:disabled svg { color: inherit; }
.vt-logout svg { width: 16px; height: 16px; }
.vt-brand { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.vt-brand img { display: block; width: 100%; max-width: 280px; height: auto; }
#nav.vt-navigation { grid-column: 1; grid-row: 2; min-width: 0; background: #000; border: 0; }
#nav.vt-navigation ul { gap: .25rem 2.5rem; }
#nav.vt-navigation a { display: inline-block; padding: .5rem 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #fff; font-size: 1.05rem; font-weight: 700; line-height: 1.5; text-decoration: none; }
#nav.vt-navigation a:hover { color: #fff; border-bottom-color: #777; text-decoration: none; }
#nav.vt-navigation .active a { border-bottom-color: var(--vt-accent); text-decoration: none; }
.vt-header-tools a:focus-visible, #nav.vt-navigation a:focus-visible, .vt-brand:focus-visible { outline: 2px solid var(--vt-accent); outline-offset: 4px; }
@media(max-width:767px) {
    .vt-header-layout { grid-template-columns: minmax(0,1fr) 160px; column-gap: 1rem; padding: 1rem; }
    #nav.vt-navigation ul { gap: .25rem 1.5rem; }
}
@media(max-width:575px) {
    .vt-header-layout { grid-template-columns: minmax(0,1fr) minmax(0,160px); }
    .vt-brand { grid-column: 2; grid-row: 1; }
    .vt-header-tools { grid-column: 1 / -1; grid-row: 2; }
    #nav.vt-navigation { grid-column: 1 / -1; grid-row: 3; }
}

@media(max-width:767px) {
    .dataTables_wrapper { overflow-x: auto; }
    .dataTables_filter,.dataTables_length,.dataTables_info,.dataTables_paginate { float: none; text-align: left; width: auto; }
    .dataTables_length label { float: none; display: block; text-align: left; }
    .dataTables_filter input { width: min(14rem,55vw); }
    #main { padding-block: .25rem .75rem; }
}
@media(prefers-reduced-motion:reduce) { :root { --vt-action-transition: none; } }
@media print { #header,.vt-form button,.zoomer_custom_zoom_in,.zoomer_custom_zoom_out { display: none; } body { background: #fff; }.vt-container { max-width: none; } }