/* Flat, restrained controls shared by login, dashboard and body-mounted dialogs. */
body {
  --control-radius: 6px;
  --control-border: #cad3df;
  --control-bg: #fff;
  --control-hover: #f3f5f8;
  --control-focus: #3a67ad;
}
body.dark {
  --control-border: #3a495e;
  --control-bg: #111d2c;
  --control-hover: #1b2b40;
  --control-focus: #93b3e4;
}
#login-screen {
  --control-border: #39465a;
  --control-bg: #0b1320;
  --control-hover: #172235;
  --control-focus: #a0b9dc;
}
/* Shadows are not focus indicators. Preserve explicit keyboard outlines instead. */
body :is(button, input, select, textarea) { box-shadow: none !important; text-shadow: none; }
body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
body dialog .modal-card :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
#login-screen .pin-input-wrap input,
#dashboard-screen .settings-ip-field input,
body .rule-table :is(input:not([type="checkbox"]), select) {
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  color: var(--text);
  background: var(--control-bg);
  font-weight: 400;
  transition: border-color .12s ease, background-color .12s ease;
}
body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):hover:not(:disabled) { border-color: color-mix(in srgb, var(--control-border) 75%, var(--text-2)); }
body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):focus,
body dialog .modal-card :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):focus,
#login-screen .pin-input-wrap input:focus {
  border-color: var(--control-focus);
  outline: 1px solid var(--control-focus);
  outline-offset: 1px;
  background: var(--control-bg);
}
body :is(input, textarea)::placeholder { color: var(--text-3); font-weight: 400; opacity: 1; }
body :is(input, select, textarea):disabled { opacity: .6; cursor: not-allowed; }
body input[aria-invalid="true"], #login-screen .pin-form.has-error input { border-color: #b95d69; outline-color: #b95d69; }
body :is(input[type="checkbox"], input[type="radio"]) { accent-color: #3d65a1; }
/* Choice controls need a keyboard ring, not the background/border of a text
   field: changing those on focus can obscure native checked-state rendering. */
body :is(input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 2px solid var(--control-focus);
  outline-offset: 3px;
}
/* Search fields retain one outer contour, not a nested input inside another box. */
body #dashboard-screen .search-wrap,
body dialog .search-wrap { border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--control-bg); box-shadow: none; }
body #dashboard-screen .search-wrap input,
body dialog .search-wrap input { border: 0; background: transparent; border-radius: 0; outline: 0; }
body #dashboard-screen .search-wrap:focus-within,
body dialog .search-wrap:focus-within { border-color: var(--control-focus); outline: 1px solid var(--control-focus); outline-offset: 1px; }
body :is(.primary-button, .soft-button, .text-button, .filter-pill, .icon-button, .language-switch) {
  border-radius: var(--control-radius);
  font-weight: 500;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
body :is(#dashboard-screen, dialog) :is(.primary-button, .soft-button, .text-button),
#login-screen .login-button { font-weight: 500; border-radius: var(--control-radius); }
body :is(.primary-button, .soft-button, .text-button):hover,
body :is(.primary-button, .soft-button, .text-button):active { transform: none; }
body .primary-button,
body .primary-button:disabled,
#login-screen .login-button,
#login-screen .login-button:disabled {
  color: #fff; background: #315d9c; border: 1px solid #315d9c;
  background-image: none;
}
body .primary-button:hover:not(:disabled),
#login-screen .login-button:hover:not(:disabled) { background: #284f87; border-color: #284f87; }
body.dark .primary-button, body.dark .primary-button:disabled { background: #416ca9; border-color: #416ca9; }
body.dark .primary-button:hover:not(:disabled) { background: #4a77b6; border-color: #4a77b6; }
body .soft-button, body .soft-button:disabled { background: var(--control-bg); color: var(--text-2); border-color: var(--control-border); background-image: none; }
body .soft-button:hover:not(:disabled) { background: var(--control-hover); color: var(--text); border-color: var(--control-border); }
body :is(#dashboard-screen, dialog) .icon-button { border-radius: var(--control-radius); }
body .icon-button:disabled { background: transparent; color: var(--text-2); }
body :is(.primary-button, .soft-button, .icon-button, .text-button):focus-visible,
body :is(#dashboard-screen, dialog) button:focus-visible { outline: 2px solid var(--control-focus); outline-offset: 3px; }
body button:disabled { opacity: .5; cursor: not-allowed; }
body button.is-loading { cursor: progress; }
/* Adjacent actions share one height regardless of primary/secondary emphasis. */
body :is(#dashboard-screen, dialog) .header-actions > :is(.primary-button, .soft-button),
body #dashboard-screen .section-header-large > :is(.primary-button, .soft-button) {
  min-height: 40px;
  height: 40px;
  padding: 0 14px;
  box-sizing: border-box;
  align-self: center;
}
/* Preserve danger intent: a destructive action must never look like a neutral save. */
body :is(.danger-button, .primary-button.danger, .primary-button.is-danger),
body :is(.danger-button, .primary-button.danger, .primary-button.is-danger):disabled { background: #a33e4a; border-color: #a33e4a; color: #fff; }
body :is(.danger-button, .primary-button.danger, .primary-button.is-danger):hover:not(:disabled) { background: #8d3440; border-color: #8d3440; }
body #dashboard-screen :is(.panel, .provider-card, .profile-card, .stat-card, .sidebar-status, .provider-logo, .stat-icon, .orbit-center),
body dialog .modal-card { box-shadow: none; }
#login-screen .login-panel { background: #0e1724ed; border-color: #2b3748; border-radius: 12px; box-shadow: none; }
#login-screen .login-button { min-height: 46px; }
#login-screen .pin-input-wrap input { min-height: 52px; font-size: 16px; }
#login-screen .login-kicker .status-dot { box-shadow: none; }
body dialog.modal-dialog { box-shadow: none; border-radius: 12px; }
body dialog .modal-card { border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
  body :is(button, input, select, textarea) { transition: none; }
}