:root {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

.nav-theme-toggle {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: rgba(15, 23, 42, 0.62);
  color: #d7e2f3;
  font-weight: 650;
  cursor: pointer;
}

.nav-theme-toggle:hover {
  background: rgba(79, 155, 191, 0.14);
  border-color: rgba(79, 155, 191, 0.6);
}

.theme-toggle-icon {
  font-size: 14px;
  line-height: 1;
}

html[data-theme="light"] body {
  background: radial-gradient(130% 130% at 10% 5%, #f7fbff, #edf2fa 60%, #e7eef9 100%) !important;
  color: #1f2d45 !important;
}

html[data-theme="light"] a {
  color: #1c6ea1 !important;
}

html[data-theme="light"] .so-nav {
  background: rgba(255, 255, 255, 0.92) !important;
  border-right: 1px solid rgba(26, 42, 66, 0.14) !important;
}

html[data-theme="light"] .so-nav-brand {
  color: #1f6f97 !important;
}

html[data-theme="light"] .so-nav-link {
  color: #445a79 !important;
}

html[data-theme="light"] .so-nav-link:hover {
  color: #19324f !important;
  background: rgba(31, 122, 155, 0.1) !important;
}

html[data-theme="light"] .so-nav-link.is-active {
  background: #2b86aa !important;
  color: #ffffff !important;
}

html[data-theme="light"] .so-nav-link.is-logout {
  border-color: rgba(204, 76, 76, 0.6) !important;
  color: #b24141 !important;
}

html[data-theme="light"] .nav-theme-toggle {
  border-color: rgba(22, 48, 79, 0.22);
  background: #f4f8ff;
  color: #1f2d45;
}

html[data-theme="light"] .card,
html[data-theme="light"] .tile,
html[data-theme="light"] .versions.empty,
html[data-theme="light"] .versions.error,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .panel {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(22, 48, 79, 0.14) !important;
  color: #22324d !important;
  box-shadow: 0 12px 28px rgba(20, 33, 54, 0.1) !important;
}

html[data-theme="light"] .status-item {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(22, 48, 79, 0.14) !important;
}

html[data-theme="light"] .status-item .label {
  color: #5f7393 !important;
}

html[data-theme="light"] .status-item .value {
  color: #22324d !important;
}

html[data-theme="light"] .progress-track {
  background: rgba(22, 48, 79, 0.16) !important;
}

html[data-theme="light"] .event {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(22, 48, 79, 0.14) !important;
}

html[data-theme="light"] .muted,
html[data-theme="light"] .label,
html[data-theme="light"] .status,
html[data-theme="light"] .table-sub,
html[data-theme="light"] .table-meta,
html[data-theme="light"] .meta,
html[data-theme="light"] .hint {
  color: #5f7393 !important;
}

html[data-theme="light"] .subtitle,
html[data-theme="light"] .event-time,
html[data-theme="light"] .events-empty {
  color: #5f7393 !important;
}

html[data-theme="light"] .error {
  color: #ba4a4a !important;
}

html[data-theme="light"] table th {
  color: #657a99 !important;
}

html[data-theme="light"] table td {
  color: #263754 !important;
  border-bottom-color: rgba(22, 48, 79, 0.14) !important;
}

html[data-theme="light"] .status-pill,
html[data-theme="light"] .chip {
  background: rgba(34, 55, 84, 0.08) !important;
  color: #2a3f60 !important;
  border-color: rgba(34, 55, 84, 0.2) !important;
}

html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="date"],
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .table-input,
html[data-theme="light"] .table-controls input,
html[data-theme="light"] .table-controls select,
html[data-theme="light"] .pager input {
  background: #f9fbff !important;
  color: #1f2d45 !important;
  border-color: rgba(27, 52, 84, 0.24) !important;
}

html[data-theme="light"] button,
html[data-theme="light"] .btn,
html[data-theme="light"] .ghost {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #1d7294 !important;
  border-color: rgba(29, 114, 148, 0.5) !important;
}

html[data-theme="light"] button:hover,
html[data-theme="light"] .btn:hover,
html[data-theme="light"] .ghost:hover {
  background: rgba(29, 114, 148, 0.12) !important;
  color: #184f66 !important;
}

html[data-theme="light"] .toast {
  background: #ffffff !important;
  color: #20314c !important;
  border-color: rgba(24, 45, 71, 0.2) !important;
}

html[data-theme="light"] .toast-message {
  color: #4e6383 !important;
}