/* Shared portal appearance. Navy, sky and teal follow the public v118 brand. */
html[data-client-appearance] {
  color-scheme: light;
  --mist: #f6f9fa;
  --muted: #596b78;
  --client-success-bg: #e8f3ec;
  --client-pending-bg: #fff0ce;
  --client-pending-ink: #765215;
  --client-error-bg: #f9e9e6;
  --client-error-ink: #8b4032;
  --client-button-bg: #153b5c;
  --client-button-ink: #ffffff;
  --client-overlay: rgba(14,44,69,.35);
  --client-input-line: #718693;
  --client-walk-line: #718693;
}
html[data-client-appearance][data-theme=dark] {
  color-scheme: dark;
  --navy: #edf3f7;
  --deep: #e0e9ef;
  --teal: #a8d8da;
  --sky: #274d68;
  --sand: #233c4d;
  --ink: #e0e9ef;
  --muted: #b6c5d1;
  --mist: #0e2233;
  --line: #466479;
  --white: #17344b;
  --danger: #ffb3ac;
  --success: #b0d8bd;
  --shadow: 0 12px 34px rgba(0,0,0,.13);
  --client-success-bg: #2a4235;
  --client-pending-bg: #403722;
  --client-pending-ink: #f1d38d;
  --client-error-bg: #472e2b;
  --client-error-ink: #ffc0b6;
  --client-button-bg: #eaf4f7;
  --client-button-ink: #0e2c45;
  --client-overlay: rgba(0,0,0,.65);
  --client-input-line: #839cab;
  --client-walk-line: #839cab;
}
html[data-client-appearance] :is(button,a,input,select,textarea,summary):focus-visible { outline-color: var(--teal); }
html[data-client-appearance] body[data-area=client] :is(input,select,textarea,.enrichment-picker) { border-color: var(--client-input-line); }
html[data-client-appearance] body[data-area=client] :is(.nav,.schedule-footer) { background: var(--white); }
html[data-client-appearance] body[data-area=client] .list-walk.selected { background: var(--sky); }
/* Inset boundaries retain the complete time label and the selected outer outline. */
html[data-client-appearance] body[data-area=client] .schedule-calendar .walk-pill { box-shadow: inset 0 0 0 1px var(--client-walk-line); }
html[data-client-appearance] body[data-area=client] .addon-options { background: var(--mist); }
html[data-client-appearance] body[data-area=client] :is(.badge.confirmed,.walk-pill.confirmed,.message.success) { background: var(--client-success-bg); color: var(--success); }
html[data-client-appearance] body[data-area=client] :is(.badge.pending,.walk-pill.pending) { background: var(--client-pending-bg); color: var(--client-pending-ink); }
html[data-client-appearance] body[data-area=client] .walk-pill.pending { border-left-color: var(--client-pending-ink); }
html[data-client-appearance] body[data-area=client] :is(.badge.changes_requested,.message.error) { background: var(--client-error-bg); color: var(--client-error-ink); }
html[data-client-appearance] body[data-area=client] .danger-button { background: var(--white)!important; border-color: var(--danger)!important; }
html[data-client-appearance] body[data-area=client] .notice { border-color: var(--line); border-left-color: var(--teal); }
html[data-client-appearance] body[data-area=client] .nav a:active { background: var(--sky); color: var(--deep); }
html[data-client-appearance] body[data-area=client] .notification-count { background: var(--client-button-bg); color: var(--client-button-ink); }
html[data-client-appearance] body[data-area=client] .notification-dialog::backdrop { background: var(--client-overlay); }
html[data-client-appearance][data-theme=dark] body[data-area=client] .loading-dog { filter: brightness(0) invert(.9); }
html[data-client-appearance] .appearance-field { max-width: 320px; }
html[data-client-appearance] .appearance-help { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
html[data-client-appearance] .appearance-status { color: var(--muted); font-size: 13px; margin: 0; }
html[data-client-appearance] .appearance-status:not(:empty) { margin-top: 10px; }
html[data-client-appearance] .appearance-save-error { color: var(--danger); }