/* Shared typography and native form controls, including the expanded picker. */
button, input, select, textarea { font-family: var(--font); letter-spacing: 0; }
button, .toolbar button, .header-actions button, .pagination button,
.search-actions button, .section-heading button { font-size: var(--text-sm); min-height: 36px; }
label, .filters label, .search-grid label, .duration-fields label {
  font-size: var(--text-sm); font-weight: 500; line-height: 1.6;
}
label small, .stat-detail, .description, .notice, .status-note {
  font-size: var(--text-xs); line-height: 1.7;
}
input:not([type=checkbox]):not([type=radio]), select, textarea,
.toolbar select, .pagination select, .pagination input,
.search-grid input, .search-grid select, .duration-fields input {
  font-family: var(--font); font-size: var(--text-sm); font-weight: 400;
  line-height: 20px; min-height: 38px; padding: 8px 12px;
  border-color: var(--strong-line); border-radius: 7px;
}
select:not([multiple]), .toolbar select, .pagination select, .search-grid select {
  appearance: none; cursor: pointer; padding-inline-end: 34px;
  background-image: url("/static/chevron-down.svg");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
select:disabled, input:disabled, textarea:disabled { cursor: not-allowed; opacity: .5; }
input[type=checkbox], input[type=radio] {
  appearance: none; position: relative; display: inline-grid; place-content: center;
  width: 16px; height: 16px; min-height: 16px; flex: 0 0 16px;
  margin: 0; padding: 0; border: 1px solid var(--strong-line); border-radius: 4px;
  background: var(--surface); box-shadow: 0 1px 2px #00000005; cursor: pointer;
  vertical-align: -.18em; transition: background .15s, border-color .15s, box-shadow .15s;
}
input[type=checkbox]:hover, input[type=radio]:hover { border-color: var(--muted); }
input[type=checkbox]:checked, input[type=checkbox]:indeterminate, input[type=radio]:checked {
  background: var(--accent); border-color: var(--accent);
}
input[type=checkbox]:checked::before {
  content: ""; width: 8px; height: 4px; border: solid var(--accent-ink);
  border-width: 0 0 1.8px 1.8px; transform: translateY(-1px) rotate(-45deg);
}
input[type=checkbox]:indeterminate::before {
  content: ""; width: 8px; height: 2px; background: var(--accent-ink); border-radius: 1px;
}
input[type=radio] { border-radius: 50%; }
input[type=radio]:checked::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {
  outline: 2px solid var(--muted); outline-offset: 3px;
}
.check-label { align-items: center; gap: 9px; min-height: 24px; font-weight: 400; }
.check-label input { margin: 0; }
.check-group { gap: 6px 18px; }
.permission-tristates label { margin-bottom: 18px; }
table { font-size: var(--text-sm); }
td.code { font-size: 12px; }
td .row-action { font-family: var(--font); font-size: var(--text-xs); min-height: 30px; }
.badge { font-size: var(--text-xs); min-height: 24px; }
.chart-head h2, .status-panel h2, .section-heading h2, .panel-title { font-size: var(--text-lg); font-weight: 600; }
.modal-head h2 { font-size: 20px; font-weight: 600; }
.brand img { width: 38px; height: 38px; border-radius: 10px; }
.brand { gap: 10px; padding-left: 2px; }
.brand strong { font-size: 17px; letter-spacing: -.4px; }
.brand span { font-size: var(--text-xs); }
.login-brand img { width: 40px; height: 40px; border: 0; }
.login-brand { font-size: 21px; }
.login-card input:not([type=checkbox]):not([type=radio]) { height: 42px; }
.login-card .login-remember { margin-bottom: 4px; cursor: pointer; min-height: 30px; }
.login-card > small.muted { display: block; font-size: var(--text-xs); line-height: 1.6; margin: 0 0 16px; }
.login-card .input-action { min-height: 32px; }
.command-top input { border: 0; min-height: 32px; }
.chart-tooltip { font-size: var(--text-xs); }
.chart-head { flex-wrap: wrap; margin-bottom: 20px; }
.comparison-summary { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 24px; margin-bottom: 14px; }
.comparison-summary > div { display: flex; flex-direction: column; gap: 5px; }
.comparison-label { font-size: var(--text-xs); color: var(--muted); }
.comparison-summary strong { font-size: 30px; font-weight: 600; letter-spacing: -1px; line-height: 1.2; }
.comparison-summary b { font-size: 22px; font-weight: 500; line-height: 1.45; color: var(--muted); }
.comparison-change { font-size: var(--text-xs); background: var(--subtle); border: 1px solid var(--line); padding: 4px 8px; border-radius: 5px; margin-left: auto; margin-bottom: 3px; }
.comparison-note { color: var(--muted); font-size: var(--text-xs); line-height: 1.7; margin: 12px 0 0; }
.comparison-line { stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.current-line { stroke: var(--ink); }
.previous-line { stroke: #a1a1aa; stroke-width: 1.5; }
.current-gradient stop { stop-color: var(--ink); }
.previous-gradient stop { stop-color: #a1a1aa; }
.comparison-area { pointer-events: none; }
.chart-grid-line { stroke-dasharray: none; stroke-opacity: .65; }
.chart-cursor { stroke: var(--strong-line); stroke-dasharray: 3 4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-current-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.chart-previous-dot { fill: #a1a1aa; stroke: var(--surface); stroke-width: 2; }
.legend-line.comparison-previous { background: #a1a1aa; }
.segmented button { font-size: var(--text-xs); min-height: 30px; }
.chart-detail summary { font-size: var(--text-xs); }
.maintenance-panel { margin-bottom: 22px; }
.maintenance-state { font-size: var(--text-lg); font-weight: 500; }
.license-context-menu {
  position: fixed; z-index: 80; width: 218px; max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px); overflow-y: auto; padding: 6px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 9px; box-shadow: 0 12px 36px #00000020;
}
.license-context-menu button {
  display: flex; width: 100%; justify-content: flex-start; padding: 7px 10px;
  font: 400 var(--text-sm)/1.5 var(--font); background: transparent; color: var(--ink);
  min-height: 33px; border-radius: 5px;
}
.license-context-menu button:hover, .license-context-menu button:focus {
  outline: none; background: var(--hover);
}
.license-context-menu .context-danger { color: var(--danger); }
.context-caption { color: var(--muted); font-size: var(--text-xs); padding: 7px 10px; }
.context-divider { height: 1px; background: var(--line); margin: 5px 0; }
/* Browser-native picker keeps keyboard, type-ahead and screen-reader behavior. */
@supports (appearance: base-select) {
  select:not([multiple]), select:not([multiple])::picker(select) { appearance: base-select; }
  select::picker-icon { display: none; }
  select::picker(select) {
    font: 400 var(--text-sm)/1.5 var(--font); color: var(--ink); background: var(--surface);
    border: 1px solid var(--line); border-radius: 9px; padding: 5px;
    box-shadow: 0 8px 28px #00000018; max-height: min(320px, 50dvh); overflow-y: auto;
    min-width: anchor-size(width);
  }
  select option {
    display: flex; align-items: center; gap: 12px; min-height: 34px;
    padding: 7px 10px; font: inherit; color: var(--ink); background: var(--surface);
    border-radius: 5px; cursor: pointer; white-space: normal; overflow-wrap: anywhere;
  }
  select option:hover, select option:focus, select option:checked { background: var(--hover); }
  select option::checkmark { order: 1; margin-inline-start: auto; font-size: var(--text-xs); }
  select option:disabled { color: var(--muted); cursor: not-allowed; }
}
@media (max-width: 750px) {
  input:not([type=checkbox]):not([type=radio]), select,
  .search-grid input, .search-grid select { min-height: 40px; }
  .brand img { width: 38px; height: 38px; }
  .comparison-summary { gap: 12px 20px; }
  .comparison-change { margin-left: 0; }
  .trend-svg { height: 190px; }
}


/* Agent tree and a focused reconciliation workspace. */
.sales-layout {--sales-normal:#4b9874;--sales-banned:#c86f76;--sales-frozen:#d1aa63;--sales-expired:#9b9ba7;--sales-other:#737a92;display:grid;grid-template-columns:252px minmax(0,1fr);gap:18px;align-items:start;}
.sales-main {min-width:0;}
.sales-tree {padding:16px 10px;position:sticky;top:88px;max-height:calc(100dvh - 110px);overflow:auto;}
.sales-tree-heading {display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 4px;margin-bottom:14px;font-size:var(--text-sm);}
.sales-tree-heading small,.sales-tree-hint {font-size:var(--text-xs);}
.sales-tree input {width:100%;min-width:0;font-size:var(--text-xs);}
.sales-tree-hint {color:var(--muted);margin:10px 3px 14px;}
.sales-tree-list {font-size:var(--text-sm);}
.sales-tree-row {display:flex;align-items:center;min-width:0;gap:1px;}
.sales-tree-children {margin-left:11px;border-left:1px solid var(--line);padding-left:3px;}
.sales-tree-children[hidden] {display:none;}
.sales-tree-toggle {width:19px;min-width:19px;padding:0;background:transparent;color:var(--muted);font-size:17px;border-radius:5px;}
.sales-tree-spacer {width:19px;flex:none;}
.sales-tree-select {display:flex;align-items:center;gap:6px;flex:1;min-width:0;padding:9px 7px;background:transparent;color:var(--ink);border-radius:6px;text-align:left;font-weight:400;}
.sales-tree-select:hover,.sales-tree-toggle:hover {background:var(--hover);}
.sales-tree-select.active {background:var(--soft);font-weight:600;box-shadow:inset 2px 0 var(--ink);}
.sales-tree-name {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sales-tree-count {margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px;}
.sales-tree-disabled {font-size:10px;color:var(--danger);}
.sales-breadcrumbs {display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;font-size:var(--text-xs);}
.sales-crumb {font:inherit;background:transparent;color:var(--muted);padding:0;min-height:24px;}
.sales-crumb[aria-current] {color:var(--ink);}
.sales-context {display:flex;flex-direction:column;gap:7px;margin:0 0 18px;font-size:var(--text-xs);}
.sales-context strong {font-size:17px;font-weight:600;}
.sales-context span {overflow-wrap:anywhere;}
.sales-stats {gap:10px;grid-template-columns:repeat(4,minmax(0,1fr));}
.sales-stats .stat {padding:15px 13px;}
.sales-stats .stat-label {font-size:var(--text-xs);}
.sales-stats .stat-number {font-size:28px;margin:10px 0 4px;}
.sales-stats .stat-detail {font-size:11px;}
.sales-stats .stat:nth-child(3) .stat-number {color:var(--sales-normal);}
.sales-stats .stat:nth-child(4) .stat-number {color:var(--sales-banned);}
.sales-visual {padding:18px;margin:16px 0 22px;}
.sales-visual-head {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:var(--text-sm);}
.sales-visual-head small {font-size:11px;}
.sales-distribution {display:flex;gap:26px;align-items:center;padding-top:18px;}
.sales-ring {width:128px;height:128px;border-radius:50%;flex:none;display:grid;place-items:center;}
.sales-ring-center {width:100px;height:100px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;}
.sales-ring-center strong {font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;}
.sales-ring-center span {font-size:var(--text-xs);color:var(--muted);}
.sales-legend {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));flex:1;gap:7px 20px;}
.sales-legend-item {display:flex;align-items:center;gap:8px;background:transparent;color:var(--muted);padding:4px;min-height:28px;font:400 var(--text-xs)/1.5 var(--font);}
.sales-legend-item:hover {background:var(--hover);}
.sales-legend-item strong {margin-left:auto;color:var(--ink);font-variant-numeric:tabular-nums;}
.sales-dot {width:7px;height:7px;border-radius:50%;flex:none;}
.sales-color-normal {background:var(--sales-normal);}.sales-color-banned {background:var(--sales-banned);}.sales-color-frozen {background:var(--sales-frozen);}.sales-color-expired {background:var(--sales-expired);}.sales-color-other {background:var(--sales-other);}
.sales-view-tabs {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.sales-view-tabs button {font-size:var(--text-xs);}
.sales-table-hint {font-size:var(--text-xs);color:var(--muted);margin:12px 0;line-height:1.6;}
.sales-table table {min-width:710px;}
.sales-table td,.sales-table th {font-size:var(--text-xs);font-variant-numeric:tabular-nums;padding:13px 10px;}
.sales-table td:last-child,.sales-table th:last-child {position:sticky;right:0;background:var(--surface);box-shadow:-5px 0 10px #00000006;}
.sales-agent {display:flex;flex-direction:column;gap:5px;min-width:110px;}
.sales-agent small {font-size:10px;}
.sales-state-cell {min-width:155px;display:flex;flex-direction:column;gap:7px;}
.sales-state-cell small {font-size:10px;}
.sales-stack {display:flex;height:5px;border-radius:5px;overflow:hidden;background:var(--line);width:100%;gap:1px;}
.sales-number {font:inherit;font-variant-numeric:tabular-nums;min-width:28px;padding:4px 6px;background:transparent;color:var(--ink);border-radius:5px;}
.sales-number:hover {background:var(--hover);}
.sales-normal-number {color:var(--sales-normal);}.sales-number.is-abnormal {color:var(--sales-banned);}
.sales-definitions {margin-top:20px;color:var(--muted);font-size:var(--text-xs);line-height:1.8;}
.sales-definitions summary {cursor:pointer;color:var(--muted);}
.sales-definitions p {margin:12px 0 0;}
@media(max-width:1100px){.sales-layout{grid-template-columns:216px minmax(0,1fr);gap:14px;}.sales-stats{grid-template-columns:repeat(2,minmax(0,1fr));}.sales-distribution{gap:16px;}.sales-ring{width:104px;height:104px;}.sales-ring-center{width:80px;height:80px;}.sales-ring-center strong{font-size:18px;}.sales-legend{column-gap:8px;}}
@media(max-width:750px){.sales-layout{grid-template-columns:minmax(0,1fr);}.sales-tree{position:static;max-height:260px;}.sales-tree-list{max-height:140px;overflow:auto;}.sales-tree-heading{margin-bottom:8px;}.sales-tree-hint{display:none;}.sales-tree input{margin-bottom:8px;}.sales-visual{padding:14px;}.sales-distribution{gap:14px;}.sales-legend{column-gap:8px;}.sales-stats .stat-number{font-size:25px;}}

/* Scan-friendly flat tree rows keep names readable at every nesting level. */
.sales-layout {grid-template-columns:276px minmax(0,1fr);gap:20px;}
.sales-tree {padding:15px 12px 13px;border-radius:8px;background:var(--surface);overflow:auto;}
.sales-tree-heading {padding:0 3px;margin-bottom:12px;}
.sales-tree-title {display:flex;align-items:center;gap:8px;color:var(--ink);}
.sales-tree-title>.icon {width:16px;height:16px;color:var(--accent);}
.sales-tree-total {display:grid;place-items:center;min-width:28px;height:23px;padding:0 7px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;}
.sales-tree-search {display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--subtle);}
.sales-tree-search>.icon {width:14px;height:14px;flex:none;color:var(--muted);}
.sales-tree .sales-tree-search input {width:100%;height:34px;min-height:34px;padding:4px 0;border:0;background:transparent;box-shadow:none;font-size:var(--text-xs);}
.sales-tree .sales-tree-search input:focus {outline:0;}
.sales-tree-tools {display:flex;gap:5px;margin:9px 0 5px;}
.sales-tree-tool {min-height:27px;padding:3px 8px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:10px;border-radius:5px;}
.sales-tree-tool:hover {background:var(--hover);color:var(--ink);}
.sales-tree-hint {margin:7px 3px 8px;color:var(--muted);font-size:10px;}
.sales-tree-list {padding:0 1px 2px;}
.sales-tree-row {position:relative;display:flex;align-items:center;min-width:0;min-height:34px;gap:2px;padding-left:calc(var(--tree-depth)*12px);}
.sales-tree-row:not([data-depth="0"])::before {content:"";position:absolute;left:calc((var(--tree-depth) - 1)*12px + 10px);top:0;bottom:0;border-left:1px solid color-mix(in srgb,var(--line) 82%,transparent);}
.sales-tree-row:not([data-depth="0"])::after {content:"";position:absolute;left:calc((var(--tree-depth) - 1)*12px + 10px);top:50%;width:8px;border-top:1px solid color-mix(in srgb,var(--line) 82%,transparent);}
.sales-tree-toggle {display:grid;place-items:center;width:19px;min-width:19px;height:24px;min-height:24px;border-radius:4px;color:var(--muted);}
.sales-tree-toggle .icon {width:11px;height:11px;transition:transform .14s ease;}
.sales-tree-toggle[aria-expanded="true"] .icon {transform:rotate(90deg);}
.sales-tree-spacer {width:19px;flex:none;}
.sales-tree-select {position:relative;height:30px;min-height:30px;gap:7px;padding:0 7px;border-radius:5px;transition:background-color .12s ease,color .12s ease;}
.sales-tree-select:hover {background:var(--hover);}
.sales-tree-select.active {background:color-mix(in srgb,var(--accent) 10%,var(--surface));box-shadow:inset 2px 0 var(--accent);}
.sales-tree-select.is-root .sales-tree-marker {color:var(--accent);}
.sales-tree-marker {display:grid;place-items:center;width:16px;height:18px;flex:none;color:var(--muted);}
.sales-tree-marker .icon {width:13px;height:13px;}
.sales-tree-identity {display:flex;align-items:center;gap:5px;min-width:0;}
.sales-tree-name {font-size:12px;line-height:1.4;}
.sales-tree-count {display:grid;place-items:center;min-width:24px;height:19px;margin-left:auto;padding:0 5px;border-radius:5px;background:var(--subtle);color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums;}
.sales-tree-select.active .sales-tree-count {background:var(--surface);color:var(--ink);}
.sales-tree-disabled {padding:1px 4px;border-radius:3px;background:var(--danger-bg);font-size:9px;}
.sales-tree-list>p {padding:8px 5px;font-size:var(--text-xs);}
@media(max-width:1100px){.sales-layout{grid-template-columns:248px minmax(0,1fr);gap:14px;}}
@media(max-width:750px){.sales-layout{grid-template-columns:minmax(0,1fr);}.sales-tree{position:static;max-height:340px;padding:12px 10px}.sales-tree-list{max-height:205px;overflow:auto}.sales-tree-tools{margin:6px 0 3px}.sales-tree-hint{display:block;margin:5px 3px}.sales-tree .sales-tree-row{min-height:32px}.sales-tree-select{height:29px;min-height:29px}.sales-visual{padding:14px}.sales-distribution{gap:14px}.sales-legend{column-gap:8px}.sales-stats .stat-number{font-size:25px}}