:root {
  color-scheme: dark;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: var(--background);
  --background: #0b161d;
  --panel: #12222e;
  --border: #2d405d;
  --text: #e7eef7;
  --muted: #9fb0c3;
  --gold: #c5a45d;
  --active: #74e0d0;
  --control-border: #48617d;
  --hover: #203547;
  --input: #0b1720;
  --primary-text: #15212b;
  --primary-border: #d8bd7d;
  --primary-hover: #d8b975;
  --error: #ffb4b4;
  --danger-bg: #45232c;
  --danger-border: #79414b;
  --danger-hover: #61303b;
  --emphasis: #fff;
  --nav-hover: #263d50;
  --table-head: #101f2c;
  --selection: #1a2c3c;
  --stack-background: var(--selection);
  --success-border: #315653;
  --success-bg: #153436;
  --expired-bg: #3c2c1b;
  --expired-border: #82562c;
  --expired: #ffad55;
  --blocked-bg: #3b252e;
  --blocked-border: #66404c;
  --blocked: #ffadad;
  --warning: #e0c987;
  --pending-bg: #3a3425;
  --warning-border: #635435;
  --warning-bg: #2a2a22;
  --success-text: #bce8dc;
  --shadow: #0006;
  --dialog-shadow: #0007;
  --backdrop: #030b12bc;
  --selection-value: #bac6d4;
  --trend-cancelled: #e38c96;
  --trend-stock: #58b9b5;
  --verification-active: #55cbbf;
  --hatch: rgb(255 255 255 / 2.5%);
  --primary-bg: #c5a45d;
}
:root[data-theme="light"] {
  color-scheme: light;
  --background: #d9dfe4;
  --panel: #e7ebef;
  --border: #c8d4df;
  --text: #203441;
  --muted: #536b7c;
  --gold: #466e8c;
  --active: #157d70;
  --control-border: #9aabb8;
  --hover: #e3eaf0;
  --input: #f0f2f4;
  --primary-border: #5f819c;
  --error: #a82e40;
  --danger-bg: #fbe7eb;
  --danger-border: #cf9aa3;
  --danger-hover: #f5d2da;
  --emphasis: #182d3b;
  --nav-hover: #dae5ed;
  --selection: #dce8f0;
  --stack-background: color-mix(in srgb, var(--table-head) 25%, var(--panel));
  --success-border: #86b5aa;
  --success-bg: #e0f2ec;
  --expired-bg: #fff0db;
  --expired-border: #cb9861;
  --expired: #995100;
  --blocked-bg: #f9e5ea;
  --blocked-border: #cc9aab;
  --blocked: #a4304b;
  --warning: #426680;
  --pending-bg: #dbe5ed;
  --warning-border: #8ea6b9;
  --warning-bg: #e0e8ef;
  --success-text: #216b55;
  --shadow: #132b3b20;
  --dialog-shadow: #132b3b30;
  --backdrop: #182b3b66;
  --selection-value: #5b6c7b;
  --trend-cancelled: #b04f61;
  --trend-stock: #18837f;
  --verification-active: #147a70;
  --hatch: rgb(20 45 65 / 3%);
  --primary-bg: #466e8c;
  --primary-text: #fff;
  --primary-hover: #355a76;
  --table-head: #52758e;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; }
body { margin: 0; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
button, input, select, textarea, summary { font: inherit; }
button, input, select, textarea { color: inherit; border: 1px solid var(--control-border); border-radius: 7px; }
button, summary { cursor: pointer; }
button { background: transparent; padding: 5px 13px; font-weight: 500; white-space: nowrap; }
button:hover, summary:hover { background: var(--hover); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:disabled:hover { background: transparent; }
input, select, textarea { background: var(--input); min-height: 31.2px; padding: 5px 11px; min-width: 0; max-width: 100%; }
textarea { resize: vertical; padding-block: 7px; line-height: 1.16; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
input[type=checkbox] { accent-color: var(--gold); width: 12.8px; height: 12.8px; min-height: 0; padding: 0; flex: none; }
.primary { background: var(--primary-bg); color: var(--primary-text); border-color: var(--primary-border); font-weight: 650; }
.primary:hover { background: var(--primary-hover); }
.primary:disabled:hover { background: var(--primary-bg); }
.danger { color: var(--error); background: var(--danger-bg); border-color: var(--danger-border); }
.danger:hover { background: var(--danger-hover); }
.icon-button { padding: 3.5px 10px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 25px; line-height: 1.2; font-weight: 550; margin-bottom: 5px; letter-spacing: -.5px; }
h2 { font-size: 19px; font-weight: 550; margin-bottom: 9px; }
h3 { font-size: 16px; font-weight: 550; }
.muted, small { color: var(--muted); }
small { font-size: 12px; line-height: 1.5; }
label { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; color: var(--muted); font-size: 12px; font-weight: 500; }
label input, label select, label textarea { width: 100%; color: var(--text); font-size: 14px; font-weight: 400; }
.inline { flex-direction: row; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
.inline input[type=checkbox] { width: 12.8px; }
#user-menu { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; font-size: 12px; }
#user-name { overflow-wrap: anywhere; }
.sidebar-document { opacity: .55; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-block: 2px; color: var(--muted); font-size: 10.5px; line-height: 1.5; text-decoration: none; border-radius: 3px; }
.sidebar-document svg { width: 18px; height: 18px; flex: none; padding: 2px; border: 1px solid var(--border); border-radius: 50%; }
.sidebar-document:hover { opacity: 1; color: var(--gold); }
.sidebar-document:focus-visible { opacity: 1; outline: 2px solid var(--gold); outline-offset: 3px; }
#logout { padding: 3px 11px; color: var(--muted); }
.environment-badge { display: inline-block; padding: 3px 7px; border: 1px solid var(--border); border-radius: 5px; color: var(--gold); font-size: 10px; font-weight: 600; letter-spacing: .7px; }
main { padding: 0; flex: 1; min-height: 0; overflow: hidden; }
main:has(#login:not([hidden])) { overflow: auto; }
#application { height: 100%; }
#loading { margin: 50px 26px; color: var(--muted); }
.app-shell { display: grid; grid-template-columns: 190px minmax(0, 1fr); height: 100%; min-height: 0; }
.sidebar { min-height: 0; overflow-y: auto; background: var(--panel); border-right: 1px solid var(--border); padding: 0; display: flex; flex-direction: column; gap: 0; padding-top: 10px; }
.nav-configuration { flex: none; margin-top: 14px; }
.nav-configuration > summary { display: flex; align-items: center; justify-content: space-between; margin: 0 10px 4px; padding: 6px 14px; border: 0; border-radius: 8px; color: var(--muted); font-size: 12px; font-weight: 400; }
.nav-configuration > summary::after { content: '›'; margin-left: 8px; }
.nav-configuration[open] > summary::after { content: '⌄'; }
.nav-configuration > summary:hover { background: var(--nav-hover); }
.nav-button { text-align: left; display: flex; align-items: center; gap: 9px; width: calc(100% - 20px); margin: 2px 10px; padding: 3.5px 14px; border: 0; border-radius: 8px; color: var(--text); }
.nav-button[data-view] { width: calc(100% - 20px); margin: 2px 10px; padding: 3.5px 14px; border: 0; border-radius: 8px; }
.nav-button.active, .nav-button[aria-current=page] { background: transparent; color: var(--emphasis); font-weight: 700; }
.nav-button:not(:disabled):hover { background: var(--nav-hover); }
.sidebar a.nav-button { text-decoration: none; font-weight: 400; }
.nav-button svg { width: 17px; height: 17px; flex: none; }
.sidebar-note { margin: auto 12px 0; padding-top: 35px; font-size: 11px; color: var(--muted); }
.sidebar-footer { margin-top: auto; padding-top: 24px; flex: none; }
.sidebar-user-actions { display: flex; align-items: center; gap: 8px; }
.sidebar-user-actions #logout { flex: 1; }
.sidebar-brand { padding: 0 12px 10px; text-align: center; }
.sidebar-brand-title { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.sidebar-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0 14px; padding: 12px 0 14px; border-top: 1px solid var(--border); }
.sidebar-brand img { display: block; width: 130px; max-width: 100%; height: auto; margin-inline: auto; }
.sidebar-brand .sidebar-logo-light { display: none; }
:root[data-theme="light"] .sidebar-brand .sidebar-logo-dark { display: none; }
:root[data-theme="light"] .sidebar-brand .sidebar-logo-light { display: block; }
.main-content { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 27px 28px 32px; }
#licenses-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#licenses-view > .page-heading, #licenses-view > .filters, #licenses-view > .list-tools { flex: none; }
#billing-view { min-height: 0; overflow-y: auto; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-heading p { color: var(--muted); margin: 0; font-size: 13px; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.toolbar label { margin: 0; }
.toolbar select { max-width: 260px; }
.filters { display: flex; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; }
.filters input[data-filter=client_name] { flex: 1; min-width: 160px; }
.filters input[data-filter=client_id] { width: 140px; }
.filter-more { position: relative; }
summary { padding: 5px 12px; border: 1px solid var(--control-border); border-radius: 7px; list-style: none; white-space: nowrap; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '⌄'; margin-left: 8px; color: var(--muted); }
.filter-more[open] { padding: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
.filter-more[open] summary { margin-bottom: 10px; }
.filter-more input { width: 160px; margin: 3px; }
.list-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
 .text-button { border-color: transparent; color: var(--muted); }
.filters > label { flex: 1; min-width: 120px; }
.filters > .search-field { flex: 1.6; min-width: 170px; }
.filters input, .filters select { width: 100%; }
.list-tools .filter-more[open] { padding: 0; border: 0; background: transparent; }
.list-tools .filter-more[open] summary { margin: 0; }
.filter-more > .toolbar, .license-actions > button { position: absolute; top: calc(100% + 7px); z-index: 5; background: var(--panel); border: 1px solid var(--control-border); box-shadow: 0 12px 30px var(--shadow); border-radius: 8px; }
.filter-more > .toolbar { padding: 14px; width: 290px; gap: 12px; }
.filter-more > .toolbar label { width: 100%; }
.filter-more > .toolbar input { margin: 0; width: 100%; }
.license-actions { position: relative; }
.license-actions > button { right: 0; padding: 16px; font-size: 12px; }
#license-subtitle { margin: 5px 0 0; font-size: 11px; overflow-wrap: anywhere; }
.billing-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1100px; }
#log-billing-note { font-size: 12px; margin: 14px 0 0; }
.list-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.count { margin-left: auto; color: var(--muted); font-size: 12px; }
.workspace { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: stretch; }
.workspace.editor-open { grid-template-columns: minmax(0, 1fr) 400px; }
.license-list { min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); overflow: hidden; }
.table-wrap { width: 100%; min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#licenses thead { position: sticky; top: 0; z-index: 1; background: var(--table-head); }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
th, td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { background: var(--table-head); color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
th button { border: 0; padding: 0; color: inherit; background: transparent; font-size: inherit; }
th button:hover { color: var(--text); background: transparent; }
td { white-space: nowrap; }
td.wrap { max-width: 240px; white-space: normal; overflow-wrap: anywhere; }
tbody tr { transition: background .12s ease; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover, tbody tr.selected { background: var(--selection); }
tbody tr.selected td:first-child { box-shadow: inset 3px 0 var(--gold); }
.client-button { padding: 0; border: 0; border-radius: 2px; text-align: left; color: var(--text); white-space: normal; font-weight: 550; }
.client-button:hover { color: var(--gold); background: transparent; }
.cell-secondary { display: block; color: var(--muted); margin-top: 4px; font-size: 11px; font-weight: 400; }
.status-badge { display: inline-block; font-size: 11px; color: var(--active); border: 1px solid var(--success-border); border-radius: 5px; padding: 3px 7px; background: var(--success-bg); white-space: nowrap; }
.status-badge.cancelled { color: var(--text); border-color: transparent; background: linear-gradient(90deg, var(--success-bg) 50%, var(--expired-bg) 50%) padding-box, linear-gradient(90deg, var(--success-border) 50%, var(--expired-border) 50%) border-box; }
.status-badge.expired { background: var(--expired-bg); border-color: var(--expired-border); color: var(--expired); }
.status-badge.blocked { background: var(--blocked-bg); border-color: var(--blocked-border); color: var(--blocked); }
.status-badge.pending { color: var(--warning); background: var(--pending-bg); border-color: var(--warning-border); }
.empty { text-align: center; height: 140px; color: var(--muted); }
.load-more { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; min-height: 66px; padding: 12px; border-top: 1px solid var(--border); }
.load-more p { color: var(--muted); margin: 0; font-size: 12px; }
.load-more button { padding: 6px 10px; font-size: 12px; }
#columns { position: relative; }
#column-options { position: absolute; right: 0; top: calc(100% + 7px); background: var(--panel); border: 1px solid var(--control-border); box-shadow: 0 12px 30px var(--shadow); border-radius: 8px; padding: 10px 14px; z-index: 5; min-width: 200px; max-height: 65dvh; overflow: auto; }
#column-options label { flex-direction: row; align-items: center; gap: 10px; margin: 7px 0; color: var(--text); }
.read-only { padding: 10px 16px; border: 1px solid var(--warning-border); background: var(--warning-bg); border-radius: 7px; color: var(--warning); font-size: 12px; margin: 0 0 20px; }
#debug-mode { margin: 0; }
#notice:empty { display: none; }
#notice { flex: none; max-height: 15dvh; overflow-y: auto; margin: 12px 26px; padding: 12px 16px; border-radius: 7px; border: 1px solid var(--success-border); background: var(--success-bg); color: var(--success-text); white-space: pre-line; }
#notice.error { background: var(--blocked-bg); border-color: var(--danger-border); color: var(--error); }
.login-card { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 30px; max-width: 400px; margin: 70px auto; }
.login-card .primary { width: 100%; margin-top: 14px; }
dialog { color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 24px; width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; box-shadow: 0 24px 80px var(--dialog-shadow); }
dialog::backdrop { background: var(--backdrop); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.dialog-heading h2 { margin: 0; }
#vendor-provider-type { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--muted); }
.dialog-heading button { border: 0; padding: 0 7px; font-size: 25px; line-height: 1.16; color: var(--muted); }
.dialog-heading + p { font-size: 12px; margin: 10px 0 16px; }
.license-editor { position: relative; top: auto; height: 100%; min-height: 0; margin: 0; padding: 0; width: 100%; max-width: none; max-height: 100%; overflow: hidden; box-shadow: none; }
.license-editor[open] { display: flex; flex-direction: column; }
.license-editor .dialog-heading { padding: 18px 20px; background: var(--selection); border-bottom: 1px solid var(--border); flex: none; }
.license-editor .dialog-heading + p { margin: 0; padding: 12px 20px 0; }
#license-form { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.form-scroll { flex: 1; overscroll-behavior: contain; overflow-y: auto; padding: 18px 20px; min-height: 0; }
.form-section { min-width: 0; padding: 0; margin: 0 0 20px; border: 0; }
.form-section + .form-section { padding-top: 17px; border-top: 1px solid var(--border); }
.form-section legend { padding: 0 0 5px; color: var(--gold); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid label { margin: 0; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid small { font-size: 11px; font-weight: 400; }
#edit-fields { margin-top: 14px; }
#edit-fields .inline { margin-bottom: 14px; }
#cancel-next { width: 100%; font-size: 12px; }
.form-scroll details summary { color: var(--muted); border-color: var(--border); }
.form-scroll p { color: var(--muted); font-size: 11px; }
.dialog-footer { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.license-editor .dialog-footer { margin: 0; padding: 14px 20px; border-top: 1px solid var(--border); flex: none; }
#delete-user { margin-right: auto; }
.license-editor .dialog-footer button { font-size: 12px; padding: 9px 11px; }
#license-result:empty { display: none; }
#license-result { white-space: pre-line; margin: 0 20px 14px; padding: 10px; border: 1px solid var(--warning-border); background: var(--warning-bg); color: var(--warning); border-radius: 6px; font-size: 12px; flex: none; }
.billing-panel { max-width: 720px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 24px; margin-bottom: 18px; }
.billing-panel p { color: var(--muted); }
.billing-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#calc-total { margin-top: 18px; color: var(--active); }
noscript { display: block; padding: 30px; color: var(--error); }
@media (min-width: 1700px) {
  .main-content { padding: 30px 38px; }
  .workspace.editor-open { grid-template-columns: minmax(0, 1fr) 430px; }
}
@media (max-width: 1250px) {
  .app-shell { grid-template-columns: 170px minmax(0, 1fr); }
  .main-content { padding: 24px 20px; }
  .workspace.editor-open { gap: 16px; grid-template-columns: minmax(0, 1fr) 370px; }
  th, td { padding: 13px 12px; }
}
@media (max-width: 1100px) {
  .workspace.editor-open { grid-template-columns: minmax(0, 1fr); }
  .workspace.editor-open .license-list { display: none; }
  .license-editor { max-width: 720px; }
  #licenses-view:has(.editor-open) > .filters, #licenses-view:has(.editor-open) > .list-tools { display: none; }
  .license-editor .dialog-footer { background: var(--panel); }
}
@media (max-width: 700px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--border); padding: 0; gap: 0; }
  .nav-button { width: auto; padding: 5px 12px; }
  .nav-button[data-view] { width: auto; margin-inline: 0; padding: 6px 12px; }
  .sidebar .sidebar-note, .sidebar .sidebar-brand, .sidebar .nav-button:disabled { display: none; }
  .main-content { padding: 22px 14px; }
  .page-heading { align-items: start; margin-bottom: 20px; }
  .page-heading h1 { font-size: 23px; }
  .page-heading p { font-size: 12px; }
  .page-heading > button { font-size: 12px; }
  .toolbar { align-items: stretch; gap: 8px; }
  .toolbar .inline { flex: 1; min-width: 120px; }
  .toolbar .inline select { flex: 1; width: 100%; }
  .filters { flex-basis: 100%; }
  .filters input[data-filter=client_name] { width: 100%; min-width: 130px; }
  .filter-more { flex-basis: auto; }
  .filters > label { min-width: 130px; }
  .filters > .search-field { flex-basis: 100%; }
  .billing-options { grid-template-columns: minmax(0, 1fr); }
  .count { flex-basis: 100%; margin-left: 0; order: -1; }
  .list-tools { align-items: center; }
  .list-tools button, .list-tools summary { font-size: 12px; padding: 3.5px 10px; }
  .workspace { gap: 14px; }
  .license-editor { width: 100%; }
  .login-card { margin: 40px 16px; max-width: none; padding: 24px; }
  #notice { flex: none; max-height: 15dvh; overflow-y: auto; margin: 12px 14px; }
  dialog { padding: 20px; }
  .billing-panel { padding: 20px; }
}
@media (max-width: 400px) {
  .page-heading { flex-wrap: wrap; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .wide { grid-column: auto; }
  .license-editor .dialog-heading, .form-scroll, .license-editor .dialog-footer { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

#users-view, #vendors-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#users-view > .page-heading, #users-view > .list-tools, #vendors-view > .page-heading, #vendors-view > .list-tools { flex: none; }
.users-table-wrap { width: 100%; min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#users thead, #vendors thead { position: sticky; top: 0; z-index: 1; background: var(--table-head); }
#user-form, #vendor-form { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#user-result:empty, #vendor-result:empty { display: none; }
#user-result, #vendor-result { white-space: pre-line; margin: 0 20px 14px; padding: 10px; border: 1px solid var(--warning-border); color: var(--warning); border-radius: 6px; font-size: 12px; flex: none; }
@media (max-width: 1100px) { #users-view:has(.editor-open) > .list-tools, #vendors-view:has(.editor-open) > .list-tools { display: none; } }

.password-field { margin: 12px 0; }
.password-field > label { margin-bottom: 6px; }
.password-control { display: flex; align-items: stretch; gap: 7px; }
.password-control input { flex: 1; width: 100%; }
.password-control button { display: flex; align-items: center; justify-content: center; flex: none; padding: 4px 11px; }
.password-field > small { display: block; margin-top: 6px; }

#sts-config-view, #sts-config-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#sts-config-view > .page-heading { flex: none; }
#sts-config-form { overflow: hidden; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.sts-config-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 20px; }
.sts-config-scroll > p { font-size: 12px; }
.sts-config-scroll label { color: var(--gold); }

.sts-setting-group { margin: 0 0 18px; padding: 12px 16px 16px; border: 1px solid var(--border); border-radius: 8px; min-width: 0; }
.sts-setting-group legend { padding: 0 7px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.sts-setting-fields { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; }
.sts-setting-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sts-setting-row label { display: grid; grid-template-columns: minmax(90px,180px) minmax(0,1fr); align-items: center; gap: 12px; flex: 1; min-width: 0; overflow-wrap: anywhere; margin: 6px 0; }
#sts-vars-fields .sts-var-row { display: grid; grid-template-columns: minmax(280px,1fr) minmax(0,1.8fr) auto; }
#sts-vars-fields .sts-var-description { color: var(--muted); }
#sts-vars-fields .sts-add-description { flex: 2; }
@media (max-width: 800px) {
 #sts-vars-fields .sts-var-row { grid-template-columns: minmax(0,1fr) auto; }
 #sts-vars-fields .sts-var-row label { grid-column: 1; }
 #sts-vars-fields .sts-var-description { grid-column: 1; grid-row: 2; margin-bottom: 4px; }
 #sts-vars-fields .sts-var-row .sts-remove-setting { grid-column: 2; grid-row: 1 / 3; }
}
.sts-remove-setting { margin-bottom: 0; padding: 4px 11px; color: var(--muted); }
.sts-add-setting-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.sts-add-setting-form label { flex: 1; min-width: 140px; }
.sts-add-setting-form button { margin-bottom: 12px; }
.sts-field-error { color: var(--error); width: 100%; font-size: 12px; margin: 0; }
.sts-masterkeys-section { margin-top: 0; }
.sts-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.sts-section-heading h2 { margin: 0; }
.sts-masterkeys-wrap { max-width: 100%; overflow-x: auto; }
#sts-masterkeys { width: 100%; min-width: 0; }
#sts-masterkeys th, #sts-masterkeys td { overflow-wrap: anywhere; white-space: normal; }
.sts-masterkey-code { display: flex; align-items: center; gap: 8px; }
.sts-masterkey-code code { min-width: 0; overflow-wrap: anywhere; user-select: text; font-size: 12px; }
.sts-masterkey-code button { flex: none; display: flex; align-items: center; padding: 2px; border: 0; color: var(--muted); }
.sts-masterkey-code button svg { width: 14px; height: 14px; }
.sts-masterkey-actions { display: flex; gap: 8px; }
.sts-masterkey-actions button { font-size: 12px; }
#masterkey-extra-fields .sts-setting-fields { grid-template-columns: minmax(0,1fr); }
#masterkey-result { color: var(--error); font-size: 12px; }
#masterkey-result:empty { display: none; }
@media (max-width: 800px) { .sts-setting-fields { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 520px) {
 .sts-config-scroll { padding: 14px; }
 .sts-config-footer { padding: 12px 14px; }
 .sts-setting-group { padding: 8px 10px 12px; }
 .sts-setting-row label { grid-template-columns: minmax(65px,30%) minmax(0,1fr); gap: 8px; }
 .sts-section-heading { align-items: flex-start; flex-direction: column; }
 .sts-masterkey-actions { flex-direction: column; align-items: flex-start; }
 #sts-masterkeys th, #sts-masterkeys td { padding: 8px 5px; font-size: 11px; }
}
.sts-config-footer { flex: none; padding: 14px 20px; border-top: 1px solid var(--border); }
.sts-config-footer .dialog-footer { margin-top: 0; }
#sts-config-result { margin: 0 0 12px; white-space: pre-line; color: var(--active); font-size: 12px; }
#sts-config-result:empty { display: none; }
#sts-config-result.error { color: var(--error); }

#products-view { display:flex; flex-direction:column; flex:1; min-height:0; }
#products-view > .page-heading, #products-view > .list-tools, #products-result { flex:none; }
#products-view > .license-list { flex:1; min-height:0; }
#products-table thead { position:sticky; top:0; z-index:1; background:var(--panel); }
#products-table th, #products-table td { vertical-align:top; }
#products-dialog { max-height:90dvh; }
#products-form { display:flex; flex-direction:column; min-height:0; }
#products-form .form-scroll { overflow-y:auto; min-height:0; }
#products-delete { margin-right:auto; }
#user-sts-fields details { margin:12px 0; }

.sts-sync-control { min-width: 0; padding: 12px 18px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.sts-sync-caption { margin-bottom: 2px; font-weight: 400; }
.sts-sync-row + .sts-sync-caption { margin-top: 10px; }
.sts-sync-indicator { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.sts-sync-row[data-state="success"] .sts-sync-indicator { color: var(--active); }
.sts-sync-row[data-state="warning"] .sts-sync-indicator { color: var(--gold); }
.sts-sync-row[data-state="error"] [id$="-label"], .sts-sync-row[data-state="error"] .sts-sync-indicator { color: var(--error); }
.sts-sync-row small { display: block; margin-top: 3px; font-size: 10px; opacity: .65; }
@media (max-width: 700px) { .sts-sync-control { flex: none; width: 260px; } }

.license-facts { display: grid; grid-template-columns: repeat(3,minmax(100px,.7fr)) minmax(300px,2.4fr); gap: 12px; margin: 0 0 20px; flex: none; }
.license-fact { min-width: 0; padding: 15px 17px 13px; background: repeating-linear-gradient(135deg, var(--hatch) 0 1px, transparent 1px 7px), var(--panel); border: 1px solid var(--border); border-radius: 9px; }
.license-fact[data-product-filter] { cursor: pointer; }
.license-fact[data-product-filter]:hover { border-color: var(--control-border); }
.license-fact[data-product-filter]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.license-fact h2 { color: var(--muted); margin: 0 0 6px; font-size: 12px; font-weight: 550; letter-spacing: .2px; }
.fact-value { display: block; color: var(--gold); font-size: clamp(26px,2.6vw,38px); line-height: 1.2; font-weight: 650; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
#facts-other-active { color: var(--active); }
#facts-selection { color: var(--selection-value); }
.license-fact > small { display: block; margin-top: 7px; font-size: 10px; }
.license-fact > .fact-usage { color: var(--trend-stock); }
.license-trend { padding: 11px 14px 8px; }
.trend-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.trend-heading small { font-size: 10px; }
.trend-chart { height: 92px; display: flex; align-items: center; color: var(--muted); font-size: 12px; }
.trend-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.trend-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.trend-axis { fill: var(--muted); font-size: 10px; }
.trend-new { color: var(--active); stroke: var(--active); }
.trend-cancelled { color: var(--trend-cancelled); stroke: var(--trend-cancelled); }
.trend-stock { color: var(--trend-stock); stroke: var(--trend-stock); opacity: .75; }
.trend-licenses-stock { color: var(--gold); stroke: var(--gold); }
.trend-dot.trend-licenses-dot { fill: var(--gold); }
.trend-bar.trend-new { fill: var(--active); stroke: none; }
.trend-bar.trend-cancelled { fill: var(--trend-cancelled); stroke: none; }
.trend-legend { display: flex; justify-content: flex-end; gap: 14px; font-size: 10px; }
.trend-legend span::before { content: ''; display: inline-block; width: 13px; border-top: 2px solid currentColor; margin-right: 5px; vertical-align: middle; }
.trend-legend .trend-new::before, .trend-legend .trend-cancelled::before { width: 6px; height: 6px; border: 0; background: currentColor; }
.trend-dot { fill: var(--trend-stock); opacity: 0; }
.trend-month:hover .trend-dot, .trend-month:focus .trend-dot { opacity: 1; }
.trend-month:focus { outline: none; }
@media (max-width: 1150px) {
 .license-facts { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 14px; }
 .license-fact { padding: 9px 12px; }
 .license-trend { grid-column: 1 / -1; padding: 8px 12px; }
 .fact-value { font-size: 28px; }
 .trend-chart { height: 80px; }
}
@media (max-width: 700px) {
 #licenses-view > .page-heading { margin-bottom: 12px; }
 .license-facts { gap: 6px; margin-bottom: 12px; }
 .license-fact { padding: 7px 8px; }
 .license-fact h2 { font-size: 10px; margin-bottom: 3px; }
 .license-fact > small { margin-top: 3px; font-size: 9px; }
 .fact-value { font-size: 25px; }
 .license-trend { padding: 6px 8px; }
 .trend-chart { height: 66px; }
 .trend-heading small, .trend-legend { font-size: 9px; }
 .trend-legend { gap: 10px; }
 #licenses-view:has(.editor-open) > .license-facts { display: none; }
 .filters > label { min-width: 100px; flex: 1; }
 .filters > .search-field { flex-basis: 0; }
}
@media (max-width: 700px) {
 .sidebar { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-block: 0; }
 .sidebar .nav-button { flex: none; width: auto; margin: 2px 6px; padding: 3px 12px; }
 .nav-configuration { flex: none; margin-top: 0; }
 .nav-configuration > summary { margin: 2px 6px; padding: 3px 12px; }
 .configuration-items { display: flex; }
 .sidebar-footer { flex: none; width: 170px; margin: 0 8px; padding: 0; }
 .sidebar-controls { margin: 0; padding: 8px; border-top: 0; border-left: 1px solid var(--border); }
 .main-content { padding-top: 14px; padding-bottom: 14px; }
 .license-fact > small { min-height: 23px; font-size: 8px; line-height: 1.3; }
 .license-facts .fact-value { font-size: 24px; }
 .license-trend .trend-chart { height: 48px; }
 .license-trend .trend-axis { font-size: 16px; }
 .license-facts .trend-heading small { font-size: 8px; }
 #licenses-view > .list-tools { gap: 6px; margin-bottom: 10px; }
 #licenses-view > .list-tools .count { flex-basis: auto; order: 0; margin-left: 0; }
 #licenses-view > .list-tools button, #licenses-view > .list-tools summary { padding: 6px 8px; font-size: 11px; }
}

.vendor-filter-row { flex: none; width: 240px; max-width: 100%; margin: 0 0 12px; }
#licenses-view > .filters { display: grid; grid-template-columns: 36px minmax(65px,.55fr) minmax(85px,.8fr) minmax(130px,1.5fr) minmax(110px,1.1fr) minmax(100px,1fr) minmax(110px,1fr) minmax(80px,.7fr) minmax(80px,.7fr); align-items: end; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; }
#licenses-view > .filters > label { min-width: 0; }
#licenses-view > .filters input, #licenses-view > .filters select { min-width: 0; width: 100%; }
.filter-reset { width: 36px; height: 32px; padding: 0; font-size: 23px; color: var(--muted); }
.filter-input { display: block; position: relative; }
#licenses-view > .filters .filter-input input { padding-right: 30px; }
.filter-input .filter-clear.text-button { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 26px; height: 22.4px; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; }
.filter-input .filter-clear.text-button:hover { color: var(--text); background: var(--hover); }
@media (max-width: 1100px) {
 #licenses-view:has(.editor-open) > .license-scope-row { display: none; }
}
@media (max-width: 700px) {
 #licenses-view > .filters { grid-template-columns: 36px 80px 100px 160px 140px 140px 140px 100px 100px; gap: 8px; margin-bottom: 10px; }
}

/* Keep vendor groups together when expanded, with a distinct stacked field area. */
.vendor-stack { margin: 12px 0; background: color-mix(in srgb, var(--background) 50%, transparent); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
:root :is(.vendor-stack, .evaluation-assignment, .evaluation-options) { background: var(--stack-background); }
.form-scroll .vendor-stack > summary { border: 0; border-radius: 0; padding: 7px 12px; }
.vendor-stack > summary::after { content: none; }
.vendor-stack > summary::before { content: '▸'; display: inline-block; width: 14px; margin-right: 6px; color: var(--muted); }
:is(.vendor-stack, .evaluation-assignment, .evaluation-options) > summary::before { display: inline-block; transform: scale(1.6); transform-origin: center; }
.vendor-stack[open] > summary::before { content: '▾'; }
.vendor-stack[open] > summary { border-bottom: 1px solid var(--border); }
.vendor-stack-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 12px; }
.vendor-stack-body > label, .vendor-stack-body > details { margin: 0; }
.vendor-instant-products table { width: 100%; table-layout: fixed; }
.vendor-instant-products caption { text-align: left; font-weight: 600; padding-bottom: 8px; }
.vendor-instant-products th:first-child { width: 54%; }
.vendor-instant-products th, .vendor-instant-products td { padding: 8px 4px; overflow-wrap: anywhere; white-space: normal; }
.vendor-instant-products th:not(:first-child), .vendor-instant-products td:not(:first-child) { text-align: center; }
.vendor-instant-products input[type="checkbox"] { width: 14.4px; height: 14.4px; margin: 0; }
.vendor-instant-products small { display: block; color: var(--muted); }
.vendor-instant-products small[hidden] { display: none; }
.vendor-instant-products .instant-excluded td:first-child { color: var(--muted); }

select[multiple] { padding: 4px; }
select[multiple] option { padding: 5px 7px; border-radius: 3px; }

/* Stable field selectors keep compact license columns aligned when visibility changes. */
#licenses { table-layout: fixed; }
#licenses [data-column="id"] { padding-inline: 8px; }
#licenses [data-column="client_name"] { white-space: normal; overflow-wrap: anywhere; }
#licenses [data-column="product"] { white-space: normal; overflow-wrap: anywhere; }
#licenses [data-column="created"] { padding-inline: 8px; }
#licenses td[data-column="created"], #licenses td[data-column="expireDate"] { font-size: 12px; }
#licenses [data-column="expireDate"] { padding-inline: 8px; }
#licenses [data-column="published"] { padding-inline: 10px; }
#licenses [data-column="comment"] { padding-inline: 10px; }
#licenses td[data-column="id"], #licenses td[data-column="comment"] { font-size: 11px; font-weight: 400; color: var(--muted); }

#licenses [data-column="actions"] { padding-inline: 8px; }

#licenses td[data-column="client_id"] { font-size: 11px; white-space: normal; overflow-wrap: anywhere; }

#verify-license { margin-right: auto; }
.license-verification { flex: none; max-height: 160px; overflow-y: auto; padding: 10px 20px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); }
.license-verification p { margin: 4px 0; }
.license-verification .verification-active { color: var(--verification-active); }
.license-verification .verification-failed { color: var(--expired); }

/* Compact configuration lists while keeping edit icons readable. */
:is(#users, #vendors, #products-table, #sts-masterkeys) tbody td { padding-block: 5px; }
:is(#users, #vendors, #products-table) .icon-button { display: inline-flex; align-items: center; justify-content: center; height: 22.4px; padding: 1px 8px; }
#sts-masterkeys .sts-masterkey-actions { align-items: center; }
#sts-masterkeys .sts-masterkey-actions button { display: inline-flex; align-items: center; justify-content: center; height: 22.4px; padding: 1px 8px; }
#sts-vars-fields .sts-setting-row label { margin-block: 2px; }
#sts-vars-fields .sts-setting-row input { min-height: 22.4px; height: 22.4px; padding-block: 0; }
#sts-vars-fields .sts-remove-setting { height: 22.4px; padding-block: 0; }

#theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:34px; height:27.2px; padding:2px 6px; flex:none; color:var(--muted); }
#theme-toggle svg { width:19px; height:19px; }
:root:not([data-theme="light"]) .theme-sun, :root[data-theme="light"] .theme-moon { display:none; }

/* Warn on cancelled/expired records without changing control contrast between themes. */
.license-editor.inactive-license .form-scroll :is(input, select, textarea) { background-color: color-mix(in srgb, var(--expired) 12%, var(--input)); }

/* Account tokens share the existing theme and editor status colors. */
.account-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.account-control { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 32.8px; padding: 3.8px 7px; border: 1px solid var(--control-border); border-radius: 7px; background: var(--input); }
.account-control:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }
.account-chips, .account-options { display: contents; }
.account-control #account-entry { flex: 1; width: 100px; min-width: 85px; min-height: 22.4px; padding: 1px 3px; border: 0; background: transparent; outline: none; }
.account-chip { display: inline-flex; align-items: center; gap: 5px; padding: .7px 7px; border: 1px solid var(--border); border-radius: 5px; background: var(--selection); color: var(--text); font-size: 12px; }
.account-chip button { padding: 0 2px; border: 0; border-radius: 3px; color: var(--muted); font-size: 16px; line-height: 16px; }
#client-account-suggestions .account-options { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.account-options button { padding: .5px 7px; font-size: 12px; font-weight: 400; color: var(--text); }
.account-control.is-disabled { opacity: .65; }
.inactive-license .account-control { background: color-mix(in srgb, var(--expired) 10%, var(--input)); }

.license-row-actions { display: inline-flex; align-items: center; gap: 6px; }

/* Stronger chrome and plain black list content belong only to the light theme. */
:root[data-theme="light"] .dialog-heading { background: var(--table-head); color: #fff; }
:root[data-theme="light"] .dialog-heading :is(.brand, small, .muted, button, #logout) { color: #fff; }
:root[data-theme="light"] th { color: #fff; }
:root[data-theme="light"] th button:hover { color: #fff; }
:root[data-theme="light"] tbody { color: #000; }
:root[data-theme="light"] tbody :is(.cell-secondary, small, .muted, .client-button) { color: #000; }
:root[data-theme="light"] #sts-vars-fields :is(label, input, .sts-var-description) { color: #000; }
:root[data-theme="light"] button:not(th button):not(tbody button):not(.nav-button):not(.client-button):not(.text-button):not(.primary):not(.danger) { background: #466e8c; color: #fff; border-color: #355a76; }
:root[data-theme="light"] button:not(th button):not(tbody button):not(.nav-button):not(.client-button):not(.text-button):not(.primary):not(.danger):not(:disabled):hover { background: #355a76; }
:root[data-theme="light"] th button, :root[data-theme="light"] th button:not(:disabled):hover { background: transparent; border: 0; }

:root[data-theme="light"] .sidebar-footer :is(#theme-toggle, #logout) { color: #fff; }

.license-code { display:flex; align-items:center; gap:8px; margin-top:6px; }
.license-code code { overflow-wrap:anywhere; user-select:all; }

.license-code button { display:inline-flex; align-items:center; flex:none; padding:2px; border:0; background:transparent; color:var(--muted); }
.license-code button svg { width:14px; height:14px; }

.vendor-profile-dialog { width: min(680px, calc(100vw - 32px)); }
.vendor-profile-dialog .dialog-heading { margin: -24px -24px 20px; padding: 18px 24px; }
.vendor-profile-dialog .dialog-heading small { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--muted); }
.vendor-profile-dialog .form-section { margin-top: 22px; }
#vendor-profile-dgs-fields label:has(textarea) { grid-column: 1 / -1; }
#vendor-profile-sync-note, #vendor-profile-result { font-size: 12px; }
#vendor-profile-result:empty { display: none; }

.vendor-profile-fraud { margin: 0; }
.vendor-profile-fraud > summary { border: 0; border-radius: 0; }
.vendor-profile-fraud-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 650px) { .vendor-profile-fraud-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .vendor-profile-fraud-fields { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .vendor-profile-dialog .dialog-heading { margin: -20px -20px 20px; padding: 18px 20px; } }

.vendor-license-prohibition { margin: 14px 12px 0; color: var(--error); white-space: normal; }
.vendor-license-prohibition input { accent-color: var(--error); flex: none; }

#vendor-profile-dgs-fields { margin-top: 12px; }
#vendor-profile-dgs-fields > .password-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
#vendor-profile-dgs-fields > .password-field > label { margin: 0; }

.vendor-product-prices th:first-child { width: 45%; }
.vendor-product-prices input { width: 100%; min-height: 25.6px; padding: 3px 7px; font-size: 12px; }
.vendor-billing-currency input { width: 85px; }

/* Backup health beside the vendor scope; credentials stay on the server. */
.license-scope-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.license-scope-row .vendor-filter-row { margin-bottom:0; }
.backup-status { margin-left:auto; color:var(--muted); font-size:12px; text-align:right; }
.backup-detail { display:block; margin-top:3px; font-size:10px; opacity:.7; line-height:1.4; overflow-wrap:anywhere; }
.backup-status::before { content:"●"; margin-right:6px; color:#b5a37d; }
.backup-status[data-tone="ok"]::before { color:#6acbb4; }
.backup-status[data-tone="error"]::before { color:#e58d96; }
.backup-status[data-tone="warning"]::before { color:#dcb45b; }
@media(max-width:600px) { .license-scope-row { flex-wrap:wrap; } }

/* Product aliases share account chips; the overview keeps one plain PID per line. */
#products-pid-entry { flex:1; width:140px; min-width:100px; min-height:22.4px; padding:1px 3px; border:0; background:transparent; outline:none; }
#products-pid-result:not(:empty) { color:var(--expired); }
#products-table .product-pids { white-space:pre-line; color:var(--muted); }

#license-changelog-dialog { width:min(780px,calc(100vw - 32px)); }
#license-changelog-dialog h2 { font-weight:500; }
.license-changelog-list { margin:0; padding:0 0 0 24px; overflow:auto; max-height:60vh; font-weight:400; }
.license-changelog-list > li { padding:10px 8px; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
.license-changelog-list p { margin:0 0 8px; font-weight:400; }
.license-changelog-list ul { padding-left:20px; white-space:pre-wrap; }