/* A compact control on both the sign-in page and the operations header. */
.login-panel { position: relative; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-width: 75px;
  padding: 6px 10px;
  border: 1px solid var(--edge);
  border-radius: 20px;
  background: var(--panel2);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
}
.theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--amber); }
.theme-toggle:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.theme-toggle span:first-child { font-size: 15px; line-height: 1; }
.login-panel > .theme-toggle { position: absolute; top: 22px; right: 24px; }

html[data-theme="light"] {
  --bg: #f2f5f6;
  --panel: #ffffff;
  --panel2: #e9eff1;
  --edge: #d4dfe3;
  --muted: #526774;
  --text: #19313e;
  --amber: #a95e0c;
  --teal: #126f69;
  --red: #ac3d38;
}
html[data-theme="light"] .login-side {
  background: radial-gradient(ellipse at 63% 83%, #d4e8ec 0, transparent 48%), linear-gradient(135deg, #eaf2f3, #dce9ec);
}
html[data-theme="light"] .login-side:before {
  background: repeating-linear-gradient(0deg, transparent 0 67px, #32657a12 68px), repeating-linear-gradient(90deg, transparent 0 67px, #32657a12 68px);
}
html[data-theme="light"] .login-side:after { color: #3d79801f; }
html[data-theme="light"] .horizon { color: #58747e; }
html[data-theme="light"] .login-panel { background: #fafcfc; border-color: var(--edge); }
html[data-theme="light"] label { color: #344e5c; }
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea { color: var(--text); background: #fff; border-color: #b8cbd2; }
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #788e99; }
html[data-theme="light"] select option { background: #fff; }
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus { box-shadow: 0 0 0 2px #a95e0c24; }
html[data-theme="light"] .primary { background: #ac6215; color: #fff; }
html[data-theme="light"] .primary:hover { background: #874a0d; }
html[data-theme="light"] .outline { border-color: #aebec5; }
html[data-theme="light"] .danger { background: #fbe9e6; color: #913832; border-color: #dfb1aa; }
html[data-theme="light"] .error { color: #90342f; background: #fbe8e5; }
html[data-theme="light"] .demo-credentials summary { color: #405d6b; }
html[data-theme="light"] .demo-credentials b { color: var(--text); }
html[data-theme="light"] aside { background: #e7eff1; border-color: var(--edge); }
html[data-theme="light"] .system-pill { border-color: #a9d2bf; background: #daf0e2; color: #1f6849; }
html[data-theme="light"] .system-pill span { color: #1f6849; }
html[data-theme="light"] nav .nav-group { color: #5c7783; }
html[data-theme="light"] nav button { color: #38515e; }
html[data-theme="light"] nav button:hover,
html[data-theme="light"] nav button.active { background: #d2e0e5; color: #18333f; }
html[data-theme="light"] nav button .ico { color: #517483; }
html[data-theme="light"] .aside-foot > span { border-color: #9aafb8; }
html[data-theme="light"] header { background: #fff; }
html[data-theme="light"] .breadcrumbs { color: #627b86; }
html[data-theme="light"] .breadcrumbs span { color: #8299a2; }
html[data-theme="light"] .breadcrumbs b { color: #203e4b; }
html[data-theme="light"] .header-right { color: #526a76; }
html[data-theme="light"] .metric:after { border-color: #19313e0d; }
html[data-theme="light"] th { background: #edf3f5; color: #536b77; }
html[data-theme="light"] td { border-color: var(--edge); color: #344d59; }
html[data-theme="light"] tr:hover td { background: #f2f7f8; }
html[data-theme="light"] td strong { color: #17313d; }
html[data-theme="light"] .badge { background: #e0f1e7; color: #216445; }
html[data-theme="light"] .badge.warn { background: #fff0d9; color: #86520e; }
html[data-theme="light"] .badge.bad { background: #fbe6e4; color: #963e37; }
html[data-theme="light"] .badge.neutral { background: #e5edf1; color: #425f6d; }
html[data-theme="light"] .mini { background: #f6f9fa; color: #24414e; }
html[data-theme="light"] .toast { background: #dff2e6; color: #195b3c; border-color: #8bc6a4; box-shadow: 0 12px 35px #18313e26; }
html[data-theme="light"] .toast.error-toast { background: #fbe8e5; color: #913832; border-color: #dfa7a0; }
html[data-theme="light"] .modal-backdrop { background: #10232bb8; }
html[data-theme="light"] .modal { background: #fff; border-color: var(--edge); box-shadow: 0 25px 80px #10232b44; }
html[data-theme="light"] .close { color: #526d79; }
html[data-theme="light"] .note { background: #fff4e3; color: #795016; }
html[data-theme="light"] .check-row { background: #f1f6f7; }

@media (max-width: 800px) {
  .header-right { display: flex; }
  .header-right > :not(.theme-toggle) { display: none; }
  .login-panel > .theme-toggle { top: 12px; right: 16px; }
  .login-panel { padding-top: 65px; }
}