:root {
  color-scheme:dark;
  --bg:#10171c;
  --bg2:#17222a;
  --side:#111b22;
  --card:#17222a;
  --card2:#20303b;
  --border:#2c3c48;
  --text:#edf2f5;
  --muted:#a0b2be;
  --muted2:#8b9eac;
  --accent:#97c9f4;
  --accent2:#97c9f4;
  --on-accent:#142b3d;
  --green:#81d8ab;
  --red:#ffaaa5;
  --orange:#edcb86;
  --purple:#aebce0;
  --shadow:none
}

html[data-theme=light] {
  color-scheme:light;
  --bg:#f1f5f8;
  --bg2:#fff;
  --side:#e8eff4;
  --card:#fff;
  --card2:#e8eff4;
  --border:#cbd7e0;
  --text:#1c2c38;
  --muted:#4c6475;
  --muted2:#5e7484;
  --accent:#205f91;
  --accent2:#205f91;
  --on-accent:#fff;
  --green:#187044;
  --red:#ab2928;
  --orange:#855b0e;
  --purple:#535f98
}

body {
  background:var(--bg);
  color:var(--text);
  font-family:'Segoe UI',sans-serif;
  font-size:14px
}
a {
  color:var(--accent)
}
.layout {
  grid-template-columns:224px minmax(0,1fr)
}
.layout>aside {
  background:var(--side);
  padding:24px 16px;
  border-right:1px solid var(--border);
  min-width:0
}
.sidebar {
  height:100dvh
}
.main-shell {
  min-width:0;
  padding:0 28px 28px;
  max-width:1700px
}
.brand {
  gap:10px;
  margin-bottom:24px
}
.brand-logo {
  background:var(--accent);
  color:var(--on-accent);
  width:36px;
  height:36px;
  font-size:13px;
  border-radius:4px
}
.brand strong {
  font-size:18px;
  letter-spacing:-.4px
}
.brand span {
  color:var(--muted);
  font-size:12px
}
.side-nav a {
  border-radius:4px;
  color:var(--muted);
  padding:10px 12px;
  min-height:42px
}
.side-nav a.active,.side-nav a:hover {
  background:var(--card2);
  border-color:transparent;
  color:var(--text)
}
.side-nav a.active {
  border-left:3px solid var(--accent)
}
.nav-section {
  color:var(--muted2);
  font-size:10px;
  letter-spacing:.12em
}
.sidebar-footer {
  color:var(--muted);
  margin-top:22px
}
.sidebar-sync-card {
  background:var(--card);
  border-radius:4px;
  box-shadow:none
}
.theme-toggle {
  margin-top:18px;
  width:100%;
  font-size:12px;
  font-weight:500
}
.theme-toggle-floating {
  position:fixed;
  right:16px;
  top:16px;
  width:auto;
  z-index:10
}
.console-menu {
  display:none
}
.topbar {
  height:auto;
  min-height:68px;
  flex-wrap:wrap;
  padding:12px 0;
  border-color:var(--border)
}
.topbar-right {
  flex-wrap:wrap
}
.page-header {
  margin:26px 0 22px
}
h1 {
  font-size:29px;
  font-weight:600;
  letter-spacing:-.6px
}
h2,h3 {
  color:var(--text)
}
p {
  line-height:1.6
}
button,.primary {
  background:var(--accent);
  color:var(--on-accent);
  border:1px solid transparent;
  border-radius:4px;
  box-shadow:none;
  font-weight:600;
  min-height:40px
}
button:hover,.primary:hover {
  filter:none;
  opacity:.9
}
.secondary,.icon-btn,.user-actions button,.detail-close {
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:none;
  border-radius:4px
}
button:disabled {
  cursor:not-allowed;
  opacity:.45
}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px
}
input,select,textarea,.search-box,.users-toolbar input,.users-toolbar select {
  background:var(--card);
  color:var(--text);
  border-color:var(--border);
  border-radius:4px
}
input[type=checkbox],input[type=radio] {
  accent-color:var(--accent)
}
.panel,.stat-card,.system-card,.auth-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:5px;
  box-shadow:none
}
.stat-card {
  padding:16px;
  gap:12px
}
.stat-icon {
  height:40px;
  width:40px;
  border-radius:4px;
  font-size:20px;
  background:var(--card2)!important;
  color:var(--accent)!important
}
.stat-card b {
  font-size:26px;
  font-weight:600;
  font-variant-numeric:tabular-nums
}
.stat-card span,.meta b {
  color:var(--text)
}
.stat-card small {
  color:var(--muted)
}
.panel {
  padding:18px
}
.dashboard-stats {
  gap:12px
}
.systems-list.cards-mode {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))
}
.meta span {
  color:var(--muted);
  border-color:var(--border);
  background:var(--bg)
}
.badge,.group-pill,.user-group-pill,.system-name-pill {
  border-radius:4px
}
.badge.online,.status-enabled {
  color:var(--green)
}
.badge.offline,.status-disabled,.error-text {
  color:var(--red)
}
.badge.error {
  color:var(--orange)
}
.badge.unknown {
  color:var(--muted)
}
.users-toolbar {
  padding:14px;
  gap:8px;
  grid-template-columns:minmax(180px,1fr) repeat(4,minmax(120px,auto)) 40px
}
.users-global-table {
  min-width:1050px;
  table-layout:auto
}
.users-global-table col {
  width:auto!important
}
.users-global-table th,.users-global-table td {
  min-width:0!important;
  width:auto!important;
  padding:12px 10px;
  border-color:var(--border);
  color:var(--text);
  font-size:12px
}
.users-global-table th {
  background:var(--side);
  color:var(--muted)
}
.users-global-table th button {
  color:var(--muted);
  background:transparent
}
.users-global-table th:nth-child(1) {
  width:38px!important
}
.user-main-cell strong {
  font-size:13px
}
.user-main-cell small {
  display:none
}
.users-result-row,.users-bulk-toolbar {
  border-color:var(--border)
}
.users-result-row>span:first-child,.user-fullname,.user-email {
  color:var(--text)
}
.users-bulk-toolbar span,.last-sync,.small-text,.creation-note {
  color:var(--muted)
}
.user-actions {
  gap:4px
}
.user-actions button {
  padding:6px;
  min-width:32px;
  min-height:34px
}
.user-actions button:not(:disabled):hover {
  background:var(--card2);
  border-color:var(--accent)
}
.detail-modal-backdrop,.wizard-backdrop,.cloud-modal-backdrop {
  background:rgba(3,10,15,.65);
  backdrop-filter:none
}
.detail-modal-card,.wizard-dialog,.cloud-modal-card,.user-management-dialog {
  background:var(--card);
  border-color:var(--border);
  border-radius:6px;
  box-shadow:0 12px 60px #0004
}
.wizard-header,.wizard-footer,.wizard-steps {
  background:var(--side);
  border-color:var(--border)
}
.wizard-step,.wizard-type-card,.wizard-system-card,.wizard-group-item,.wizard-bulk-access,.creation-auth,.management-site,.management-status-options {
  background:var(--card);
  border-color:var(--border);
  border-radius:4px
}
.wizard-step.active,.wizard-step.is-active {
  background:var(--card2);
  border-color:var(--accent)
}
.wizard-content,.wizard-header h2,.wizard-type-card strong,.creation-panel h3,.wizard-smart-heading h4,.group-info p,.group-info summary,.wizard-smart-label {
  color:var(--text)
}
.wizard-kicker {
  color:var(--accent)
}
.wizard-content input,.wizard-content select,.wizard-bulk-access input,.wizard-bulk-access select,.creation-auth input {
  background:var(--bg);
  color:var(--text);
  border-color:var(--border)
}
.creation-results th,.management-results th {
  background:var(--side);
  color:var(--muted)
}
.creation-results td,.management-results td {
  color:var(--text);
  border-color:var(--border)
}
.creation-table-wrap,.management-site,.management-status-options {
  border-color:var(--border)
}
.creation-status.success,.creation-status.skipped {
  color:var(--green)
}
.creation-status.error,.creation-status.blocked {
  color:var(--red)
}
.creation-status.pending {
  color:var(--accent)
}
.creation-status.unverified {
  color:var(--orange)
}
.detail-table th,.systems-table th {
  color:var(--muted)
}
.group-pill,.version-pill {
  color:var(--accent);
  border-color:var(--border);
  background:var(--card2)
}
.auth-shell {
  background:var(--bg)
}
.auth-card input {
  background:var(--bg);
  color:var(--text)
}
.auth-card h1 {
  font-size:26px
}
.auth-card .links a {
  color:var(--accent)
}
.activity-item em {
  color:var(--green)
}
.table-shell {
  max-width:100%;
  overflow:auto
}
.console-sidebar nav:not(.side-nav) {
  display:grid;
  gap:12px
}
.console-sidebar nav:not(.side-nav) a {
  padding:10px;
  text-decoration:none
}
.layout>main:not(.main-shell) {
  padding:28px;
  min-width:0
}
.final-legend-row strong,.donut-legend-row strong {
  color:var(--text)
}

@media(max-width:1200px) {
  .users-toolbar {
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.users-search-field {
  grid-column:span 2
}

}

@media(max-width:760px) {
  .layout {
  display:flex;
  flex-direction:column
}
.console-menu {
  display:block;
  align-self:flex-start;
  margin:12px 16px 0;
  min-height:44px
}
.layout>.console-sidebar {
  display:none;
  position:static;
  height:auto;
  width:100%;
  border:0;
  border-bottom:1px solid var(--border)
}
.layout>.console-sidebar.console-nav-open {
  display:flex;
  flex-direction:column
}
.sidebar-sync-card {
  margin-top:20px
}
.main-shell {
  padding:0 16px 24px
}
.topbar {
  min-height:54px
}
.topbar-right {
  gap:12px
}
.user-chip span {
  max-width:170px;
  overflow-wrap:anywhere
}
.page-header {
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  margin:20px 0
}
.users-header-actions {
  width:100%
}
.users-header-actions button {
  flex:1;
  min-height:44px
}
.dashboard-stats {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.stat-card {
  padding:12px;
  gap:8px
}
.stat-icon {
  display:none
}
.stat-card b {
  font-size:23px
}
.dashboard-bottom {
  grid-template-columns:1fr
}
.panel-title-row {
  flex-wrap:wrap
}
.systems-tools {
  width:100%
}
.systems-tools input {
  width:100%
}
.users-toolbar {
  grid-template-columns:repeat(2,minmax(0,1fr));
  padding:12px
}
.users-search-field {
  grid-column:1/-1
}
.users-toolbar select,.users-toolbar input {
  min-height:44px
}
.users-result-row {
  flex-wrap:wrap;
  gap:6px
}
.users-global-table {
  display:block;
  min-width:0;
  width:100%
}
.users-global-table colgroup,.users-global-table thead {
  display:none
}
.users-global-table tbody {
  display:block
}
.users-global-table tr {
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 104px;
  padding:14px 12px;
  border-bottom:1px solid var(--border);
  gap:9px
}
.users-global-table td {
  display:block;
  border:0;
  padding:0;
  overflow-wrap:anywhere;
  white-space:normal!important
}
.users-global-table td:nth-child(1) {
  grid-column:1;
  grid-row:1
}
.users-global-table td:nth-child(2) {
  grid-column:2;
  grid-row:1
}
.users-global-table td:nth-child(9) {
  grid-column:3;
  grid-row:1;
  text-align:right
}
.users-global-table td:nth-child(6) {
  grid-column:2;
  grid-row:2
}
.users-global-table td:nth-child(7) {
  grid-column:2;
  grid-row:3
}
.users-global-table td:nth-child(11) {
  grid-column:3;
  grid-row:2/4
}
.users-global-table td:nth-child(3),.users-global-table td:nth-child(4),.users-global-table td:nth-child(5),.users-global-table td:nth-child(8),.users-global-table td:nth-child(10) {
  display:none
}
.user-actions {
  flex-wrap:wrap;
  justify-content:flex-end
}
.user-actions button {
  min-width:44px;
  min-height:44px
}
.users-bulk-toolbar {
  gap:8px;
  padding:12px
}
.users-bulk-toolbar span {
  width:100%
}
.users-bulk-toolbar button {
  min-height:44px;
  font-size:12px
}
.wizard-backdrop,.detail-modal-backdrop {
  padding:8px
}
.wizard-dialog,.user-management-dialog,.detail-modal-card {
  width:100%!important;
  max-width:100%!important;
  max-height:calc(100dvh - 16px);
  border-radius:4px
}
.wizard-header,.wizard-content,.wizard-footer {
  padding:16px
}
.wizard-footer {
  flex-wrap:wrap
}
.wizard-steps {
  gap:4px;
  padding:8px
}
.wizard-step {
  padding:10px 6px;
  min-width:0;
  font-size:11px
}
.wizard-smart-row,.wizard-profile-edit-row {
  align-items:stretch
}
.wizard-smart-row input {
  min-width:0;
  width:100%
}
.wizard-system-list,.wizard-type-grid,.wizard-form-grid {
  grid-template-columns:1fr
}
.management-results {
  display:block;
  overflow:auto;
  max-width:100%
}
.management-results td,.management-results th {
  min-width:110px
}
.detail-toolbar {
  flex-wrap:wrap
}
.detail-toolbar input {
  min-width:0;
  width:100%;
  flex-basis:100%
}
.auth-card {
  width:100%;
  max-width:420px;
  padding:24px
}
.auth-shell {
  padding:80px 16px 24px
}
.theme-toggle-floating {
  right:16px;
  left:16px;
  width:auto
}

}

.users-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px
}
.users-panel {
  padding:0
}
.users-global-table {
  width:100%!important
}
.users-global-table col {
  width:auto!important
}
.group-chip {
  color:var(--accent);
  background:var(--card2);
  border-color:var(--border);
  border-radius:4px
}
.type-badge {
  color:var(--text);
  background:var(--card2);
  border-color:var(--border)
}
.wizard-overlay {
  background:rgba(3,10,15,.65);
  backdrop-filter:none
}
.wizard-progress {
  background:var(--side)
}
.wizard-progress button.active span {
  background:var(--accent);
  color:var(--on-accent);
  box-shadow:none
}
.cloud-modal {
  background:var(--card);
  color:var(--text);
  border-radius:6px
}
.wizard-close {
  background:var(--card2);
  color:var(--text);
  box-shadow:none
}
.wizard-smart-heading span {
  color:var(--muted)
}

@media(max-width:760px) {
  .users-stats {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.wizard-overlay {
  padding:8px
}
.wizard-progress {
  padding:8px
}
.wizard-progress button {
  font-size:11px;
  gap:5px
}
.wizard-progress button span {
  width:22px;
  height:22px
}
.wizard-dialog {
  height:calc(100dvh - 16px)
}
.users-global-table td:nth-child(2) {
  min-width:0!important
}

}

.users-global-table {
  width:100%!important;
  min-width:1050px!important;
  max-width:none!important;
  table-layout:auto
}
.users-shell {
  max-width:1700px!important
}

@media(max-width:760px) {
  .users-global-table {
  min-width:0!important
}

}

.wizard-dialog {
  display:flex;
  flex-direction:column
}
.wizard-header,.wizard-progress,.wizard-footer,.wizard-alert {
  flex:none
}
.wizard-content {
  flex:1;
  min-height:0;
  overflow:auto
}
.wizard-entry-switch {
  background:var(--card2);
  border-color:var(--border)
}
.wizard-entry-switch button {
  background:transparent;
  color:var(--muted)
}
.wizard-entry-switch button.selected,.wizard-account-choice button.selected {
  background:var(--accent);
  color:var(--on-accent);
  border-color:var(--accent);
  box-shadow:none
}
.wizard-step.active {
  background:transparent;
  border:0
}
.wizard-progress button span {
  background:var(--card2);
  color:var(--muted)
}

.entry-mode-switch {
  background:var(--card2);
  border-radius:4px
}
.entry-mode-switch button.selected {
  background:var(--accent);
  color:var(--on-accent);
  box-shadow:none
}
.user-actions .user-action-edit {
  color:var(--accent)
}
.user-actions .user-action-delete {
  color:var(--red)
}
.console-select-all {
  display:none
}
.nx-modal-card {
  border-radius:6px
}
.nx-modal-backdrop {
  backdrop-filter:none
}

@media(max-width:760px) {
  .console-select-all {
  display:inline-block
}
.nx-modal-backdrop {
  padding:12px
}
.nx-modal-card {
  max-height:calc(100dvh - 24px);
  overflow:auto
}

}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}

}

/* Shared secondary surfaces keep their contrast in both themes. */
dialog,.history-tools input,.history-tools select,.wizard-system-option,.logical-group-row,.wizard-group-coverage,.coverage-item,.review-card,.review-system,.wizard-advanced,.account-type-card {
  background:var(--card);
  color:var(--text);
  border-color:var(--border);
  box-shadow:none;
}
.history-result.success,.coverage-item.ok span:last-child { color:var(--green); }
.history-result.error,.coverage-item.missing span:last-child { color:var(--red); }
.history-panel a { color:var(--accent); }
.donut-tooltip { background:var(--card2); color:var(--text); border-color:var(--border); }
.donut-hole { fill:var(--card); }
.donut-total,.donut-subtitle { fill:var(--text); }
.theme-toggle { display:flex; align-items:center; justify-content:center; gap:10px; width:auto; padding:8px 12px; align-self:flex-start; }
.theme-sun,.theme-moon { font-size:20px; line-height:1; color:var(--muted); }
.theme-switch-track { position:relative; display:block; width:40px; height:22px; border:1px solid var(--border); border-radius:20px; background:var(--accent); }
.theme-switch-track::after { content:''; position:absolute; top:3px; left:21px; width:14px; height:14px; border-radius:50%; background:var(--on-accent); transition:transform .15s ease; }
.theme-toggle[aria-checked=true] .theme-switch-track::after { transform:translateX(-18px); }
.theme-toggle[aria-checked=true] .theme-sun,.theme-toggle[aria-checked=false] .theme-moon { color:var(--accent); }
.bulk-entry-card,.bulk-preview-card,.bulk-entry-card textarea,.bulk-user-review-row,.bulk-preview-row:nth-child(odd) {
  background:var(--card);
  color:var(--text);
  border-color:var(--border);
}
.wizard-system-meta .online,.bulk-preview-row.valid .status { color:var(--green); }
.wizard-system-meta .offline,.bulk-preview-row.invalid .status { color:var(--red); }
.topbar { justify-content:flex-end; }
.topbar-right { margin-left:auto; justify-content:flex-end; }
.theme-toggle.secondary { border:0; background:transparent; box-shadow:none; padding:6px 0; margin:0 0 12px; }
.theme-toggle-floating.secondary { padding:8px 12px; margin:0; }
.permissions-button { color:var(--accent); background:var(--card2); border-color:var(--border); }
.permissions-button:hover,.permissions-button.active { color:var(--accent); background:var(--card2); border-color:var(--accent); }
.permissions-popover { color:var(--text); background:var(--card); border-color:var(--border); box-shadow:0 8px 30px #0002; border-radius:6px; }
.permissions-popover h4,.permissions-popover li { color:var(--text); }
.permissions-popover code { color:var(--muted); }
.permissions-popover li::before { background:var(--accent); }
.svg-donut-segment.segment-active { transform:none; filter:brightness(1.08); }
.final-legend-row:hover,.final-legend-row.legend-highlighted { transform:none; }
#versionSummary { min-height:190px; opacity:1; }
.donut-legend { min-width:0; }
.final-legend-row,.donut-legend-row { grid-template-columns:14px minmax(100px,auto) 1fr; }
.donut-total-label { fill:var(--muted); }

/* Semantic messages use the active theme, including wizard and account dialogs. */
.wizard-alert, .nx-modal-error, .alert.error, .error-box,
.wizard-system-meta .offline, .coverage-item.missing span:last-child,
.wizard-form-grid label span b, .badge.danger, .badge.red { color: var(--red); }
.danger-soft, .user-actions .user-action-delete { color: var(--red) !important; }
.wizard-alert.success, .alert.success { color: var(--green); }
html[data-theme="light"] .wizard-alert:not(.success),
html[data-theme="light"] .nx-modal-error,
html[data-theme="light"] .alert.error,
html[data-theme="light"] .error-box { background: rgba(171,41,40,.06); border-color: rgba(171,41,40,.25); }
.synchronization-notice { margin: 14px 0; padding: 12px 14px; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; }
.synchronization-notice.error-text { color: var(--red); }
.side-nav a[aria-disabled="true"] { opacity: .65; cursor: progress; }
.wizard-advanced summary { color: var(--accent); }
.wizard-advanced .toggle-field { background: var(--card2); border-color: var(--border); color: var(--text); }
.wizard-advanced .toggle-field strong { color: var(--text); }
.wizard-advanced .toggle-field small { color: var(--muted); }
.wizard-advanced .toggle-field input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 3px; }

#msg.error-text { color: var(--red); }
#accountPasswordFields label { display: grid; gap: 8px; margin-bottom: 14px; }
#accountPasswordFields input { width: 100%; }
