/* Account surfaces inherit the original HBR sprites from hbr-theme.css.
   Keep image layers, control geometry, and the crop canvas untouched. */

body:has(#account-main) {
  color: var(--hbr-text, #edf5ff);
  background-color: var(--hbr-bg, #0a1023);
}

#account-main .account-intro {
  color: var(--hbr-text, #edf5ff);
}

#account-main .account-intro .eyebrow {
  color: var(--hbr-cyan, #80deec);
}

#account-main .account-intro .eyebrow i {
  background-color: var(--hbr-pink, #e8a4df);
  box-shadow: 0 0 12px rgb(232 164 223 / 20%);
}

#account-main .account-intro h1 {
  color: var(--hbr-text, #edf5ff);
  text-shadow: 0 2px 14px rgb(5 11 31 / 30%);
}

#account-main .account-intro h1 span {
  background-image: linear-gradient(transparent 76%, rgb(128 222 236 / 24%) 76%, rgb(128 222 236 / 24%) 95%, transparent 95%);
}

#account-main .intro-copy,
#account-main .role-card p {
  color: #c2d0e6;
}

#account-main .account-roles,
#account-main .role-card {
  border-color: var(--hbr-border, rgb(166 194 235 / 28%));
}

#account-main .role-mark {
  color: var(--hbr-cyan, #80deec);
  text-shadow: 0 1px 10px rgb(128 222 236 / 15%);
}

#account-main .role-card:nth-child(2) .role-mark {
  color: var(--hbr-pink, #e8a4df);
}

#account-main .role-tag {
  color: #d7f8fc;
  background-color: rgb(57 108 133 / 58%);
  border-color: rgb(128 222 236 / 32%);
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
}

#account-main .role-card:nth-child(2) .role-tag {
  color: #f3d9f2;
  background-color: rgb(101 64 118 / 58%);
  border-color: rgb(232 164 223 / 32%);
}

#account-main .back-home {
  color: var(--hbr-cyan, #80deec);
}

#account-main .back-home:hover {
  color: #c3f6ff;
}

#account-main .account-panel,
.avatar-dialog {
  color: var(--hbr-ink, #17223b);
  background-color: var(--hbr-paper, #f3f6ff);
  border-color: #adc0df;
  border-radius: 5px;
  box-shadow: 0 14px 40px rgb(3 9 28 / 28%), inset 0 1px 0 rgb(255 255 255 / 90%);
}

#account-main .account-panel :is(h2, label, .remember-login > span, .account-details dd),
.avatar-dialog :is(h2, label, .avatar-preview-row p) {
  color: var(--hbr-ink, #17223b);
}

#account-main .account-panel .eyebrow,
.avatar-dialog .eyebrow {
  color: #446991;
}

#account-main .account-panel :is(.form-heading p, .field-hint, .form-field label span,
  .form-switch, .account-loading, .service-error p, .account-feedback, .account-details dt,
  .remember-login small),
.avatar-dialog :is(.avatar-dialog-description, .avatar-file-hint, .avatar-crop-help,
  .avatar-zoom output, .avatar-preview-row p span) {
  color: #536682;
}

#account-main .auth-tabs {
  border-color: #c5d2e7;
}

#account-main .auth-tabs button {
  color: #536682;
}

#account-main .auth-tabs button:hover {
  color: #244c83;
}

#account-main .auth-tabs button[aria-selected="true"] {
  color: #244c83;
}

#account-main .auth-tabs button[aria-selected="true"]::after {
  background-color: #6088cf;
  box-shadow: 0 1px 5px rgb(118 149 242 / 20%);
}

#account-main .form-field input,
#account-main .admin-search input {
  color: var(--hbr-ink, #17223b);
  background-color: #fff;
  border-color: #b7c6de;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgb(26 49 83 / 4%);
  caret-color: #315b98;
}

#account-main .form-field input::placeholder,
#account-main .admin-search input::placeholder {
  color: #697c96;
  opacity: 1;
}

#account-main .form-field input:focus,
#account-main .admin-search input:focus {
  background-color: #fff;
  border-color: #6088cf;
  box-shadow: inset 0 1px 3px rgb(26 49 83 / 4%), 0 0 0 2px rgb(118 149 242 / 14%);
}

#account-main .form-field input[readonly] {
  color: #425875;
  background-color: #e7edf8;
  border-color: #c1cee2;
}

#account-main .password-toggle {
  color: #315b98;
}

#account-main .password-toggle:hover {
  background-color: #e8eefb;
}

#account-main .remember-login input {
  accent-color: #4774b0;
}

#account-main .primary-button,
.avatar-dialog .primary-button {
  color: #fff;
  background-color: #315b98;
  border-color: #4771ac;
  box-shadow: inset 0 1px 0 rgb(221 236 255 / 30%), 0 2px 7px rgb(40 67 108 / 12%);
  font-weight: 600;
}

#account-main .primary-button:hover:not(:disabled),
.avatar-dialog .primary-button:hover:not(:disabled) {
  background-color: #254b83;
  box-shadow: inset 0 1px 0 rgb(221 236 255 / 40%), 0 3px 10px rgb(40 67 108 / 20%);
}

.avatar-dialog #save-avatar {
  background-color: #61508a;
  border-color: #8268b2;
}

.avatar-dialog #save-avatar:hover:not(:disabled) {
  background-color: #504076;
}

#account-main .form-switch button,
#account-main .change-avatar-label,
.avatar-dialog .avatar-preview-row button {
  color: #315b98;
}

#account-main .form-switch button:hover,
#account-main .change-avatar-label:hover,
.avatar-dialog .avatar-preview-row button:hover {
  color: #684d8a;
}

#account-main .form-message,
.avatar-dialog .form-message {
  color: #793650;
  background-color: #f9eaf1;
  border-color: #deb6cd;
  border-radius: 3px;
}

#account-main .form-message.success,
.avatar-dialog .form-message.success {
  color: #235a6c;
  background-color: #e4f4f9;
  border-color: #acd1e0;
}

#account-main .local-preview-notice {
  color: #4c4f7b;
  background-color: #eaeaf7;
  border-color: #bfc0df;
}

#account-main .setup-invitation {
  color: #315b78 !important;
  background-color: #e4f1f8;
  border-color: #b3cee1;
}

#account-main .account-emblem,
.avatar-dialog .avatar-current {
  color: #315b98;
  background-color: #dfe9f8;
  border-color: #91afd8;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 60%);
}

#account-main .avatar-edit-mark {
  color: #fff;
  background-color: #315b98;
  border-color: var(--hbr-paper, #f3f6ff);
}

#account-main .change-avatar:hover .account-emblem {
  border-color: #4774b0;
  box-shadow: 0 0 0 3px rgb(118 149 242 / 16%);
}

#account-main .account-details,
#account-main .account-details > div {
  border-color: #c5d2e7;
}

#account-main .account-role {
  color: #385b83;
  background-color: #e2eafa;
  border-color: #becde9;
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
}

#account-main .logout-button {
  color: #536682;
}

#account-main .logout-button:hover {
  color: #793650;
}

#account-main .admin-section {
  color: var(--hbr-text, #edf5ff);
  border-color: var(--hbr-border, rgb(166 194 235 / 28%));
}

#account-main .admin-heading .eyebrow {
  color: var(--hbr-pink, #e8a4df);
}

#account-main .admin-heading h2 {
  color: var(--hbr-text, #edf5ff);
}

#account-main .admin-heading p,
#account-main .user-list-status {
  color: #c2d0e6;
}

#account-main .admin-badge {
  color: #f6e7fb;
  background-color: #5b4576;
  border-color: #a88aba;
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
}

#account-main .admin-search button {
  color: #fff;
  background-color: #315b98;
  border-color: #4771ac;
  box-shadow: inset 0 1px 0 rgb(221 236 255 / 30%);
}

#account-main .admin-search button:hover:not(:disabled) {
  background-color: #254b83;
}

#account-main .user-row {
  color: var(--hbr-ink, #17223b);
  background-color: var(--hbr-paper, #f3f6ff);
  border-color: #b9cbe5;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%);
}

#account-main .user-row-role {
  color: #536682;
}

#account-main .user-self {
  color: #446991;
}

#account-main .user-role-button {
  color: #57416f;
  background-color: #ece6f6;
  border-color: #bfaed5;
  font-weight: 600;
}

#account-main .user-role-button:hover:not(:disabled) {
  background-color: #e0d4f0;
  border-color: #a58ac2;
}

#account-main .empty-users {
  color: #c2d0e6;
  background-color: var(--hbr-surface, rgb(20 31 61 / 86%));
  border-color: var(--hbr-border, rgb(166 194 235 / 28%));
}

.avatar-dialog::backdrop {
  background-color: rgb(6 13 35 / 78%);
  backdrop-filter: blur(3px);
}

.avatar-dialog .avatar-close {
  color: #315b78;
  background-color: #e0e9f7;
}

.avatar-dialog .avatar-close:hover {
  color: #17223b;
  background-color: #ccdbef;
}

.avatar-dialog .avatar-secondary-button {
  color: #315b78;
  background-color: #f5f8ff;
  border-color: #aec2df;
}

.avatar-dialog .avatar-secondary-button:hover:not(:disabled) {
  background-color: #e3edf9;
  border-color: #86a7ce;
}

.avatar-dialog .avatar-crop-area {
  background-color: #dce5f2;
  border-color: #97afd0;
}

.avatar-dialog .avatar-zoom input {
  accent-color: #4774b0;
}

.avatar-dialog .avatar-preview-row canvas {
  background-color: #dfe9f8;
  border-color: #97afd0;
}

#account-main :is(a, button, input):focus-visible,
.avatar-dialog :is(button, input, canvas):focus-visible {
  outline-color: #315b98;
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 3px;
}

#account-main .account-intro a:focus-visible,
#account-main .admin-section > :is(button, input):focus-visible {
  outline-color: var(--hbr-cyan, #80deec);
}

.avatar-dialog .avatar-crop-area canvas:focus-visible {
  outline-offset: -4px;
}

#account-main :is(.primary-button, .admin-search button):focus-visible,
.avatar-dialog .primary-button:focus-visible {
  outline-color: #5b4b85;
}

@media (max-width: 540px) {
  #account-main :is(.form-field input, .admin-search input) {
    font-size: 16px;
  }

  #account-main .account-panel :is(.form-field label, .remember-login > span),
  .avatar-dialog .avatar-zoom label {
    font-size: 13px;
  }

  #account-main .account-panel :is(.field-hint, .form-field label span,
    .form-heading p, .form-switch, .remember-login small, .form-message,
    .account-feedback, .account-details dt),
  .avatar-dialog :is(.avatar-dialog-description, .avatar-file-hint, .avatar-crop-help,
    .avatar-zoom output, .avatar-preview-row p span, .form-message) {
    font-size: 11px;
  }

  #account-main :is(.primary-button, .password-toggle),
  .avatar-dialog :is(.primary-button, .avatar-secondary-button) {
    font-size: 12px;
  }
}

@media (prefers-contrast: more) {
  #account-main .account-panel,
  #account-main .user-row,
  .avatar-dialog {
    border-color: #57759f;
  }

  #account-main .account-panel :is(.form-heading p, .field-hint, .form-field label span,
    .form-switch, .account-loading, .account-feedback, .account-details dt, .remember-login small),
  .avatar-dialog :is(.avatar-dialog-description, .avatar-file-hint, .avatar-crop-help, .avatar-zoom output) {
    color: #334867;
  }
}