/* Shared dashboard controls, loaded after page styles. */
:root {
  --dashboard-radius-control: 8px;
  --dashboard-radius-panel: 12px;
  --dashboard-control-border: #dce3ee;
  --dashboard-control-text: #263850;
}
h1,h2,h3,h4,h5,h6,b,strong,th { font-weight: 600; }
button { font-weight: 500; }
button.primary,button.secondary,.connect,.save {
  min-height: 40px;
  line-height: 1.4;
  font-size: 13px;
  border-radius: var(--dashboard-radius-control);
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
button.secondary { color: var(--dashboard-control-text); border-color: var(--dashboard-control-border); }
button.secondary:hover:not(:disabled) { background: #f5f8fd; border-color: #b7c7de; }
button.primary:hover:not(:disabled),.connect:hover:not(:disabled),.save:hover:not(:disabled) { background: var(--ph-signature-blue-hover); }
button:focus-visible,a:focus-visible { outline: 2px solid var(--ph-signature-blue); outline-offset: 3px; }
.card,.panel { border-radius: var(--dashboard-radius-panel); box-shadow: 0 2px 6px #18346305; }
.panel-head h3 { margin-top: 0; margin-bottom: 6px; }
.radar-destination-actions { margin-top: 16px; align-items: center; }
.radar-account-choice { transition: border-color .15s, background-color .15s; }
.radar-account-choice:has(input:checked) { background: #f3f7ff; border-color: #b6cef7; }
input[type=checkbox],input[type=radio] { accent-color: var(--ph-signature-blue); }
.login-card input,.login-card .login-submit,
#mfa-panel label input:not([type=checkbox]),#mfa-panel button,#security-recovery button { border-radius: var(--dashboard-radius-control); }
.status,.runtime,.mismatch,.live,.radar-mode,.settings-account-badge,.security-state { border-radius: 6px; }

/* Native select semantics retain forms, keyboard navigation and mobile pickers. */
body select {
  color: var(--dashboard-control-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  border: 1px solid var(--dashboard-control-border);
  border-radius: var(--dashboard-radius-control);
  background-color: #fff;
  min-height: 42px;
  padding: 10px 12px;
}
body select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23687890' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  cursor: pointer;
  box-shadow: 0 1px 2px #18346306;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
body select:not([multiple]):not([size]):hover:not(:disabled) { border-color: #aebfd6; background-color: #fbfcff; }
body select:focus-visible {
  outline: 2px solid var(--ph-signature-blue);
  outline-offset: 2px;
  border-color: var(--ph-signature-blue);
}
body select:disabled { color: #7b8799; background-color: #f4f6fa; cursor: not-allowed; box-shadow: none; opacity: .7; }
body select option { font-weight: 400; color: var(--dashboard-control-text); background: #fff; }
body select option:disabled { color: #8893a5; }

/* Supported desktop browsers get a styled popup without a replacement JS widget. */
@supports (appearance: base-select) {
  @media (hover: hover) and (pointer: fine) {
    body select:not([multiple]):not([size]),
    body select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
    body select:not([multiple]):not([size]) { align-items: center; }
    body select:not([multiple]):not([size])::picker-icon { display: none; }
    body select:not([multiple]):not([size])::picker(select) {
      padding: 6px;
      margin-top: 6px;
      border: 1px solid var(--dashboard-control-border);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 12px 32px #182e501c, 0 2px 6px #182e500a;
      max-height: min(360px, 60vh);
      overflow: auto;
      font: 400 13px/1.5 Poppins,ui-sans-serif,system-ui,sans-serif;
    }
    body select:not([multiple]):not([size]) option {
      min-height: 36px;
      padding: 8px 10px;
      border-radius: 5px;
      gap: 10px;
      white-space: normal;
      overflow-wrap: anywhere;
      cursor: pointer;
    }
    body select:not([multiple]):not([size]) option:hover,
    body select:not([multiple]):not([size]) option:focus { background: #f1f5fc; outline: none; }
    body select:not([multiple]):not([size]) option:checked { background: #edf3ff; color: #0a50d2; font-weight: 500; }
    body select:not([multiple]):not([size]) option::checkmark { color: var(--ph-signature-blue); }
    body select:not([multiple]):not([size]) optgroup { font-weight: 500; color: #687890; }
  }
}
@media(max-width:620px) {
  body select:not([multiple]):not([size]) { min-height: 44px; font-size: 16px; }
  .radar-destination-actions button { flex: 1 1 180px; min-height: 44px; }
}
@media(prefers-reduced-motion:reduce) {
  button.primary,button.secondary,.connect,.save,.radar-account-choice,
  body select:not([multiple]):not([size]) { transition: none; }
}
@media(forced-colors:active) {
  body select:not([multiple]):not([size]) { appearance: auto; background-image: none; }
}