/* info-section.component.scss as plain CSS (no theme mixins). */
.info-section-row { display: flex; align-items: flex-start; border-radius: 0.5rem; padding: 0.5rem 0.75rem; margin: 0.5rem 0; font-size: 14px; }
.info-section-row.fit { display: inline-flex; width: fit-content; }
.info-section-row .icon { font-style: normal; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.25rem; height: 1.25rem; border-radius: 50%; margin-right: 0.75rem; font-size: 12px; }
.info-section-row .info-section-content { flex: 1; overflow-wrap: anywhere; }
.info-section-row.info { background: #e8f0fe; color: #1a3e8a; }
.info-section-row.info .icon { background: #1a3e8a; color: #fff; }
.info-section-row.warn { background: #fff4e5; color: #8a4b00; }
.info-section-row.warn .icon { background: #8a4b00; color: #fff; }
.info-section-row.alert { background: #fdecea; color: #a1190f; }
.info-section-row.alert .icon { background: #a1190f; color: #fff; }
/* warn-dialog.component.scss as plain CSS. */
.warn-dialog .icon-wrapper { display: flex; justify-content: center; margin: 0.5rem 0; }
.warn-dialog .icon-wrapper .icon { font-style: normal; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fdecea; color: #a1190f; font-size: 1.25rem; }
.warn-dialog .desc { margin: 0.5rem 0; }
.warn-dialog .action { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.warn-dialog .fill-space { flex: 1; }
/* modules/filter/filter.component.scss (plain CSS, light + dark via prefers-color-scheme). */
.cnsl-filter-button-wrapper { position: relative; display: inline-block; }
.cnsl-filter-button-wrapper .filter-toggle .cnsl-action-button { display: inline-flex; align-items: center; gap: 0.4rem; }
.cnsl-filter-button-wrapper .filter-icon { font-size: 1rem; line-height: 1; }
.cnsl-filter-button-wrapper .filter-count {
  font-size: 0.75rem; min-width: 1.2rem; height: 1.2rem; line-height: 1.2rem; padding: 0 0.3rem; border-radius: 50vh;
  background: #5469d4; color: #fff; text-align: center;
}
.cnsl-filter-wrapper {
  position: absolute; z-index: 60; top: calc(100% + 10px); left: 0; min-width: 300px; max-width: 90vw;
  background: #fff; border: 1px solid rgba(135, 149, 161, 0.2); border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex; flex-direction: column;
}
.cnsl-filter-wrapper .filter-top {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem;
  border-bottom: 1px solid rgba(135, 149, 161, 0.2);
}
.cnsl-filter-wrapper .filter-middle { flex: 1; text-align: center; font-size: 0.9rem; }
.cnsl-filter-wrapper .filter-row { display: flex; flex-direction: column; padding: 0.5rem 1rem; }
.cnsl-filter-wrapper .filter-row > div { padding: 0.25rem 0; }
.cnsl-filter-wrapper .cb { display: flex; align-items: center; gap: 0.5rem; }
.cnsl-filter-wrapper .subquery { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0.25rem 1.6rem; }
.cnsl-filter-wrapper .subquery .nomethod { font-size: 0.85rem; padding: 0 0.5rem; }
.cnsl-filter-wrapper .filter-select-method { width: 9rem; }
.cnsl-filter-wrapper .filter-input-value, .cnsl-filter-wrapper .filter-select-value { flex: 1; min-width: 8rem; }
@media (prefers-color-scheme: dark) {
  .cnsl-filter-wrapper { background: #2a2f45; border-color: rgba(135, 149, 161, 0.2); }
}/* nav-toggle.component.scss as plain CSS (no theme mixins). */
.nav-toggle { display: inline-flex; align-items: center; border: none; border-radius: 50vw; padding: 0.4rem 0.9rem; margin: 0 0.25rem 0.25rem 0; cursor: pointer; background: transparent; color: inherit; font-size: 14px; line-height: 1rem; transition: background-color 0.1s ease; }
.nav-toggle:hover { background: rgba(0, 0, 0, 0.06); }
.nav-toggle.active { background: #5469d4; color: #fff; }
.nav-toggle .c_label { display: flex; align-items: center; }
.nav-toggle .count { display: inline-flex; align-items: center; justify-content: center; margin-left: 0.5rem; padding: 0 0.35rem; min-width: 1rem; height: 1.1rem; border-radius: 50vw; font-size: 11px; background: rgba(0, 0, 0, 0.1); }
.nav-toggle.active .count { background: rgba(255, 255, 255, 0.25); }
/* TableWrapper (styles/table.scss .table-wrapper): scroll sideways, never
   widen the page. */
.table-wrapper { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.table-wrapper .table, .table-wrapper .paginator { width: 100%; }
/* modules/refresh-table (refresh-table.component.scss), plain CSS */
.refresh-table-header-row { display: flex; align-items: center; min-height: 3rem; gap: 0.5rem; }
.refresh-table-header-row.border-bottom { border-bottom: 1px solid rgba(135, 149, 161, 0.2); }
.refresh-table-header-row .fill-space { flex: 1; }
.refresh-table-row { display: flex; align-items: center; gap: 0.5rem; }
.refresh-table-row .count { font-weight: 600; margin-right: 0.25rem; }
.refresh-table-row .count-desc { font-size: 14px; }
.refresh-table-row .count-slash { opacity: 0.5; margin: 0 0.25rem; }
.refresh-table-spinner { margin: 0 0.5rem; }
.refresh-table-icon-button .icon { display: inline-block; font-size: 1.1rem; }
.refresh-table-icon-button .icon.rotate { animation: refresh-table-rotate 1s cubic-bezier(0.785, 0.135, 0.15, 0.86); }
@keyframes refresh-table-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* modules/paginator (paginator.component.scss), plain CSS */
.paginator-wrapper { display: flex; align-items: center; flex-wrap: wrap; padding: 0.5rem 0; }
.paginator-wrapper .col { display: flex; flex-direction: column; }
.paginator-wrapper .length { margin: 0; font-size: 14px; }
.paginator-wrapper .length span { font-weight: 600; }
.paginator-wrapper .ts { margin: 0.25rem 0 0; font-size: 12px; }
.paginator-wrapper .fill-space { flex: 1; }
.paginator-wrapper .pos { font-size: 14px; margin-right: 1rem; }
.paginator-wrapper .row { display: flex; align-items: center; gap: 0.5rem; }
.paginator-wrapper .size { width: 4.5rem; padding: 0.35rem; border-radius: 6px; border: 1px solid #cfd4dc; font: inherit; }
/* table-actions.component.scss as plain CSS. */
.cnsl-table-action-wrapper { display: flex; justify-content: flex-end; }
.cnsl-table-action { position: relative; display: inline-flex; align-items: center; gap: 0.25rem; }
.cnsl-table-action .hover-actions { visibility: hidden; display: inline-flex; gap: 0.25rem; }
tr:hover .cnsl-table-action .hover-actions, .cnsl-table-action:focus-within .hover-actions { visibility: visible; }
.table-actions-menu { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 10rem; background: #fff; border: 1px solid #d0d5dd; border-radius: 6px; box-shadow: 0 4px 12px rgba(16, 24, 40, 0.15); padding: 0.25rem 0; display: flex; flex-direction: column; }
.table-actions-menu .menu-item { background: none; border: none; text-align: left; padding: 0.45rem 0.9rem; cursor: pointer; font: inherit; color: inherit; }
.table-actions-menu .menu-item:hover:not(:disabled) { background: rgba(0, 0, 0, 0.05); }
.table-actions-menu .menu-item.danger { color: #b42318; }
.table-actions-menu .menu-item:disabled { opacity: 0.5; cursor: default; }
/* pages/users/user-list + user-table scss */
.users-title-row { display: flex; align-items: center; gap: 0.25rem; }
.users-title-row h1 { margin: 0; }
.users-title-row a .icon { font-size: 1.2rem; line-height: 1.2rem; }
.user-list-sub { margin-bottom: 1.5rem; font-size: 14px; }
.user-toggle-group { display: flex; align-items: center; gap: 0.25rem; }
.user-sub { font-size: 14px; margin: 0 0 0.5rem; }
.selection { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.no-break { white-space: nowrap; }
.user-tr-actions { width: 1%; text-align: right; }
.table tr.pointer { cursor: pointer; }
.state { font-size: 12px; border-radius: 50vw; padding: 1px 8px; white-space: nowrap; }
.state.active { background: rgba(16, 185, 129, 0.14); color: #047857; }
.state.inactive { background: rgba(255, 59, 91, 0.12); color: #b91c3c; }
html.dark-theme .state.active { color: #6ee7b7; }
html.dark-theme .state.inactive { color: #ff8fa3; }
.no-content-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0; }
.margin-left { margin-left: 0.5rem; }
/* modules/label/label.component.scss (cnsl-label-theme) as plain CSS. */
.cnsl-label-wrapper {
  display: flex;
  font-size: 12px;
  color: var(--secondary-text, #0000008a);
  transition: color 0.2s ease;
  margin-bottom: 4px;
  font-weight: 400;
}
.cnsl-label-wrapper .cnsl-label {
  display: block;
}
.cnsl-label-wrapper .cnsl-form-field-required-marker {
  margin-left: 1px;
}
.cnsl-form-field-disabled .cnsl-label-wrapper {
  color: #00000061;
}
.dark-theme .cnsl-form-field-disabled .cnsl-label-wrapper,
[data-theme="dark"] .cnsl-form-field-disabled .cnsl-label-wrapper {
  color: #ffffff80;
}
.cnsl-form-field-invalid .cnsl-label-wrapper {
  color: var(--warn, #f44336);
}
/* modules/form-field/field/form-field.component.scss (cnsl-form-field-theme)
   and animations.ts (transitionMessages). */
.ng-untouched .cnsl-error { visibility: hidden; transition: visibility 0.2s ease; }
.cnsl-form-field-wrapper { width: 100%; margin: 10px 0; }
.cnsl-form-field-wrapper .mat-datepicker-toggle button { padding: 0; height: 40px; width: 40px; display: flex; justify-content: center; align-items: center; }
.cnsl-rel { position: relative; }
[cnslsuffix], .cnsl-suffix {
  position: absolute; right: 0.5rem; top: 9px; height: inherit; vertical-align: middle; max-width: 150px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cnsl-form-field input { color: #1d2330; }
.cnsl-form-field-subscript-wrapper { position: absolute; box-sizing: border-box; width: 100%; overflow: hidden; }
.dialog .cnsl-form-field-subscript-wrapper { width: auto; }
.cnsl-form-field-hint-wrapper, .cnsl-form-field-error-wrapper { display: flex; }
.cnsl-form-field-required-marker { margin-left: 0.15rem; }
/* Angular cnsl-label-wrapper is a flex row: the required * stays on the label's line. */
.cnsl-label-wrapper { display: flex; align-items: baseline; flex-wrap: nowrap; }
.cnsl-label-wrapper .cnsl-label { display: inline; }
@keyframes cnsl-transition-messages {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: translateY(0%); }
}
.cnsl-form-field-hint-wrapper, .cnsl-form-field-error-wrapper { animation: cnsl-transition-messages 3000ms cubic-bezier(0.55, 0, 0.55, 0.2); }
/* The subscript sits in the field's flow here (the console reserves room
   under every field); keep it static so existing layouts don't overlap. */
.field .cnsl-form-field-subscript-wrapper { position: static; }
.field .cnsl-form-field-wrapper { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }/* create-layout.component.scss as plain CSS: plain close icon button, the
   uppercase title and the "Step n of m" pill right after it. */
.create-layout-container { display: flex; align-items: center; padding: 0.5rem 0 1rem; flex-wrap: wrap; row-gap: 0.5rem; }
.create-layout-container .abort { font-size: 14px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; margin-left: 1.5rem; opacity: 0.8; }
.create-layout-container .abort-2 { margin-left: 2rem; font-size: 14px; white-space: nowrap; padding: 0.15rem 0.6rem; border-radius: 50vw;
  border: 1px solid var(--divider, #0000001f); }
.create-layout-content { display: flex; flex-direction: column; }
/* pages/users/user-create/user-create-v2 scss */
.user-create-v2.content { max-width: 45rem; }
@media only screen and (max-width: 500px) { .user-create-v2.content { padding: 0 0.5rem; } }
.user-create-v2 .form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem;
  grid-template-areas: "email email" "emailVerified emailVerified" "username username" "givenName familyName" "authenticationFactor authenticationFactor"; }
.user-create-v2 .email { grid-area: email; }
.user-create-v2 .emailVerified { grid-area: emailVerified; }
.user-create-v2 .username { grid-area: username; }
.user-create-v2 .givenName { grid-area: givenName; }
.user-create-v2 .familyName { grid-area: familyName; }
.user-create-v2 .authenticationFactor { grid-area: authenticationFactor; margin-bottom: 1rem; }
.user-create-v2 .authenticationFactorRadioGroup > label { display: block; margin: 0.5rem 0; }
.user-create-v2 .authenticationFactorRadioGroup > label.disabled { opacity: 0.6; }
.user-create-v2 .full { grid-column: 1 / -1; }
.user-create-v2 input { max-width: unset; }
.user-create-v2 .machine-grid { grid-template-areas: none; row-gap: 0.5rem; align-items: start; }
@media (max-width: 599px) { .user-create-v2 .machine-grid { grid-template-columns: 1fr; } }
/* p36y3g4d2c3: user-create.component.scss (Nomen v4.16.0), the v1 form */
.user-create-main-content {
  max-width: 45rem;
}
@media only screen and (max-width: 500px) {
  .user-create-main-content {
    padding: 0 0.5rem;
  }
}
.user-create-main-content .user-create-form .user-create-content .user-create-section {
  padding: 1rem 0 0 0;
  flex-basis: 100%;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.user-create-main-content .user-create-form .user-create-content .user-create-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
}
@media only screen and (max-width: 500px) {
  .user-create-main-content .user-create-form .user-create-content .user-create-grid {
    grid-template-columns: 1fr;
  }
}
.user-create-main-content .user-create-form .user-create-content .email-is-verified,
.user-create-main-content .user-create-form .user-create-content .use-password-block {
  flex-basis: 100%;
  margin-top: 1.5rem;
}
.user-create-main-content .user-create-form .user-create-content .email-is-verified .block-checkbox,
.user-create-main-content .user-create-form .user-create-content .use-password-block .block-checkbox {
  display: block;
  margin: 0.25rem 0;
}
.user-create-main-content .user-create-form .user-create-btn-container button {
  margin-top: 3rem;
  display: block;
  padding: 0.5rem 4rem;
  height: 3.5rem;
  border-radius: 0.5rem;
}
.user-create-main-content .pwd-section .section {
  padding: 0.5rem 0;
}
.phone-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
}
.phone-grid .phone-country {
  min-width: 200px;
}
@media only screen and (max-width: 500px) {
  .phone-grid {
    grid-template-columns: 1fr;
  }
}
/* modules/card (card.component.scss + card.scss), plain CSS */
.cnsl-card.card { position: relative; padding: 1rem; padding-bottom: 0.5rem; margin: 1rem 0; border-radius: 0.5rem; box-sizing: border-box; }
.cnsl-card.card.nomargin { margin: 0; }
.cnsl-card.card.warn { border-color: #cd3d56; }
.cnsl-card .header { display: flex; flex-direction: column; }
.cnsl-card .header.bottom-margin { margin-bottom: 1rem; }
.cnsl-card .header .row { display: flex; align-items: center; }
.cnsl-card .header .title { font-size: 14px; margin: 0; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.cnsl-card .header .desc { font-size: 14px; margin: 0.5rem 0 0; }
.cnsl-card .fill-space { flex: 1; }
.cnsl-card .card-toggle { opacity: 0.7; }
.cnsl-card .card-toggle:hover { opacity: 1; }
.cnsl-card .card-content { display: flex; flex-direction: column; padding-bottom: 0.5rem; }
/* edit-dialog, code-dialog, resend-email-dialog, machine-secret-dialog */
.edit-dialog,
.code-dialog,
.resend-dialog,
.machine-secret-dialog {
  max-width: 32rem;
  width: 100%;
}
.edit-dialog .desc,
.code-dialog .desc,
.resend-dialog .desc,
.machine-secret-dialog .desc {
  font-size: 0.875rem;
  margin: 0 0 1rem;
}
.edit-dialog-verified {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0.5rem 0 1rem;
}
.one-time-code code,
.secret-row code {
  font-size: 1rem;
  word-break: break-all;
}
.secret-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.secret-row .overflow-auto {
  overflow: auto;
}
/* contact card (contact.component.scss) */
.contact-method-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--divider, rgba(127, 127, 127, 0.2));
}
.contact-method-row:last-child {
  border-bottom: none;
}
.contact-method-row .left {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.contact-method-row .label {
  font-size: 0.8rem;
}
.contact-method-row .right {
  display: flex;
  gap: 0.25rem;
}
.contact-state {
  font-size: 0.75rem;
  font-weight: 600;
}
.contact-state.verified {
  color: var(--success, #2e7d32);
}
.contact-state.notverified {
  color: var(--warn, #c62828);
}
.contact-method-row .verify {
  cursor: pointer;
  font-size: 0.8rem;
  text-decoration: underline;
  margin-left: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}
/* profile-picture.component.scss */
.profile-picture {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.profile-picture .avatar-circle img {
  object-fit: cover;
}

/* detail-form.component.html: avatar with "modify" left, User Name beside. */
.profile-top { display: flex; align-items: flex-start; gap: 1.5rem; margin: 0.5rem 0 1rem; }
.profile-top .profile-picture { flex-direction: column; align-items: center; gap: 0.25rem; }
.profile-modify { font-size: 12px; }
.profile-username { display: flex; flex-direction: column; gap: 0.25rem; font-size: 12px; flex: 1; max-width: 20rem; }
/* modules/show-token-dialog (show-token-dialog.component.scss), plain CSS */
.show-token-dialog .title { display: block; font-size: 1.2rem; margin: 0 0 1rem; }
.show-token-dialog .desc { color: rgb(201, 51, 71); font-size: 0.9rem; }
.show-token-dialog .info-section-warn { margin-bottom: 1rem; }
.show-token-dialog .action { display: flex; justify-content: flex-end; }
.show-token-dialog .action .ok-button { margin-left: 0.5rem; }
.show-token-dialog .row { display: flex; width: 100%; flex-direction: column; }
.show-token-dialog .row .left, .show-token-dialog .row .right { font-size: 14px; }
.show-token-dialog .row .left { margin: 0 1rem 0.5rem 0; }
.show-token-dialog .row .right { margin: 0 0 1rem; overflow: auto; display: flex; align-items: center; }
.show-token-dialog .row .right .token { overflow-wrap: break-word; word-break: break-all; }
.show-token-dialog .row .right .ctc { margin-right: 1rem; }
/* modules/info-dialog/info-dialog.component.scss as plain CSS. */
.info-dialog .title { font-size: 1.2rem; margin-top: 0; display: block; }
.info-dialog .icon-wrapper { display: flex; justify-content: center; padding: 1rem; margin: 1rem; align-items: center; }
.info-dialog .icon-wrapper .icon { font-size: 3rem; }
.info-dialog .desc { font-size: 0.9rem; }
.info-dialog .action { display: flex; }
.info-dialog .action button { border-radius: 0.5rem; }
.info-dialog .action .ok-button { margin-left: 0.5rem; }
.info-dialog .action .fill-space { flex: 1; }
/* auth-user-mfa.component: Add Factor, factor table, New Factor dialog. */
.mfa-card .mfa-actions { display: flex; justify-content: flex-end; margin: 0.5rem 0 1rem; }
.mfa-card .mfa-table { width: 100%; }
.mfa-card .mfa-table th { font-size: 12px; font-weight: 500; text-align: left; opacity: 0.7; }
.mfa-card .mfa-empty { text-align: center; font-style: italic; font-size: 13px; background: rgba(127, 127, 127, 0.06); padding: 0.75rem; }
.mfa-card .mfa-row-actions { text-align: right; }
.mfa-dialog .mfa-types { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; }
.mfa-dialog .mfa-type { display: flex; align-items: center; gap: 0.5rem; justify-content: flex-start; padding: 0.75rem 1rem; }
.mfa-dialog .mfa-type .las { font-size: 1.4rem; }
.password-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.password-row p { margin: 0 0 0.25rem; font-size: 13px; }
.password-mask { letter-spacing: 0.1em; }
.password-edit { color: inherit; font-size: 1.25rem; }
/* auth-passwordless / dialog-passwordless (dialog-passwordless.component.scss) and the shared spinner (mat-spinner diameter 30). */
.passwordless-dialog { max-width: 400px; }
.passwordless-dialog .passwordless-desc { display: flex; align-items: center; gap: 0.75rem; margin: 1.5rem 0 0.5rem; }
.passwordless-dialog .passwordless-desc p { margin: 0; font-size: 14px; }
.passwordless-dialog .passwordless-desc .icon { font-size: 1.5rem; }
.passwordless-dialog .ok-button, .passwordless-dialog .send-button, .passwordless-dialog .qr-button { display: block; margin: 0.5rem 0 0 auto; }
.passwordless-dialog .error { color: var(--warn, #cd3d56); font-size: 14px; min-height: 0; margin: 0.25rem 0 0; }
.passwordless-dialog .qrcode-wrapper { display: flex; justify-content: center; margin: 1rem 0; }
.mfa-spinner { display: inline-block; width: 30px; height: 30px; box-sizing: border-box; border: 3px solid rgba(135, 149, 161, 0.3); border-top-color: var(--primary, #5469d4); border-radius: 50%; animation: mfa-spin 0.8s linear infinite; }
@keyframes mfa-spin { to { transform: rotate(360deg); } }
/* modules/top-view (top-view.component.scss), plain CSS */
.cnsl-top-view { padding: 1rem 0 1.25rem; border-bottom: 1px solid rgba(128, 128, 128, 0.2); margin-bottom: 1rem; }
.cnsl-top-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.cnsl-link-row { display: flex; align-items: flex-start; gap: 0.5rem; }
.cnsl-top-view .cnsl-link { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0; background: transparent; cursor: pointer; font-size: 1.25rem; }
.cnsl-title-row { display: flex; align-items: center; gap: 0.5rem; }
.cnsl-title { margin: 0; font-size: 1.5rem; }
.cnsl-state-dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; }
.cnsl-state-dot.active { background: #22c55e; }
.cnsl-state-dot.inactive { background: #ef4444; }
.cnsl-doc-row { display: flex; align-items: center; gap: 0.25rem; }
.cnsl-type { font-size: 0.9rem; opacity: 0.75; }
.cnsl-doc-row a { text-decoration: none; }
.cnsl-top-row .fill-space { flex: 1; }
.cnsl-actions-rel { position: relative; }
.cnsl-actions-rel .cnsl-actions-trigger-mob { display: none; }
.cnsl-actions-menu { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 12rem; display: flex; flex-direction: column; padding: 0.25rem 0; border-radius: 8px; background: var(--card-bg, #fff); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
.cnsl-actions-menu > * { text-align: left; border: 0; background: transparent; padding: 0.5rem 1rem; cursor: pointer; }
.cnsl-action-button { display: inline-flex; align-items: center; gap: 0.25rem; }
@media (max-width: 599px) {
  /* scoped so the global .btn display rules cannot bring the desktop
     trigger back on phones (Angular shows only the ellipsis there) */
  .cnsl-actions-rel .cnsl-actions-trigger-desk { display: none; }
  .cnsl-actions-rel .cnsl-actions-trigger-mob { display: inline-flex; }
  .cnsl-top-view .mob-full-width { width: 100%; }
}/* sidenav.component.scss */
.sidenav-container { display: flex; gap: 1.5rem; align-items: flex-start; }
.sidenav-settings-list { flex: 0 0 220px; position: sticky; top: 1rem; }
.sidenav-settings-list.indented { padding-left: 0.5rem; }
.sidenav-sticky-rel { display: flex; flex-direction: column; gap: 0.15rem; }
.sidenav-setting-group { margin: 1rem 0 0.25rem; padding: 0 0.75rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #6b7280); }
.sidenav-setting-group:first-child { margin-top: 0; }
.sidenav-setting-list-element { display: flex; align-items: center; gap: 0.4rem; text-align: left; background: transparent; border: 0; border-radius: 0.4rem; padding: 0.4rem 0.75rem; cursor: pointer; color: inherit; font: inherit; }
.sidenav-setting-list-element:hover { background: rgba(127, 127, 127, 0.1); }
.sidenav-setting-list-element.active { background: rgba(80, 110, 230, 0.15); font-weight: 600; }
.sidenav-setting-list-element .state { font-size: 0.65rem; padding: 0 0.35rem; border-radius: 0.5rem; background: #6366f1; color: #fff; }
.sidenav-setting-list-element .warn-icon { color: #f59e0b; }
.sidenav-content { flex: 1; min-width: 0; }
.mob-only { display: none; }
@media (max-width: 600px) {
  /* stretch, not the desktop flex-start: in a column the content would
     otherwise size to its max-content width and overflow the viewport. */
  .sidenav-container { flex-direction: column; align-items: stretch; }
  .sidenav-settings-list { position: static; flex: none; width: 100%; }
  .mob-only { display: flex; }
  .sidenav-container:has(.mob-only) .hide-on-mobile { display: none; }
}
/* @angular/material icon: .mat-icon 24x24, inline-block, fill currentColor */
.mat-icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  flex-shrink: 0;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* pages/instance (instance.component.scss, instance-members.component.scss),
   modules/contributors, modules/info-row (instance part): plain CSS. */
.instance .top-view { border-bottom: 1px solid #e3e6eb; padding-bottom: 1rem; }
.instance .top-view-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.instance .top-view-head h1 { margin: 0 0 0.25rem 0; font-size: 1.5rem; }
.instance-action-wrapper { display: flex; align-items: center; gap: 0.5rem; }
.instance-settings-wrapper { margin-top: 2rem; }
.instance-table-title { font-size: 1.2rem; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 2rem; }
.instance-table-desc { font-size: 14px; }
.subinfo { display: flex; align-items: center; gap: 0.4rem; font-size: 14px; margin: -0.5rem 0 1rem 0; }
.dialog-wide { width: 820px; max-width: 95vw; }

.contributor-groups { display: flex; align-items: center; }
.contributor-img-list { display: flex; align-items: center; }
.contributor-img-list.padd-left { padding-left: 10px; }
.contributor-avatar-circle { margin-left: -10px; border: 2px solid #fff; border-radius: 50%; padding: 0; background: #fff; cursor: pointer;
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; }
.contributor-avatar-circle.count { background: #eef1f6; font-size: 0.8rem; font-weight: 600; }
.add-img { margin-left: 0.5rem; border-radius: 50%; width: 32px; height: 32px; padding: 0; }
.add-img.no-margin { margin-left: 0; }

.info-row { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1rem; }
.info-wrapper { display: flex; flex-direction: column; min-width: 110px; }
.info-wrapper.width { min-width: 200px; }
.info-row-title { margin: 0; font-size: 0.75rem; color: #5b6474; }
.info-row-desc { margin: 0.25rem 0 0 0; font-size: 0.9rem; }
.info-wrapper .state { margin: 0.25rem 0 0 0; font-size: 0.85rem; }
.info-wrapper .state.active { color: #15803d; }
.info-wrapper .state.inactive { color: #b91c1c; }
.copy-row .btn-link { padding: 0; font-size: 0.9rem; }/* modules/memberships-table/memberships-table.component.scss */
.memberships-table .membership-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.memberships-table .membership-line .goto-btn {
  margin-left: 0.5rem;
}
.memberships-table .role-row {
  min-width: 200px;
}
.memberships-table .pointer {
  outline: none;
  cursor: pointer;
}
.memberships-table .paginator {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.memberships-card .memberships-org {
  max-width: 320px;
}/* modules/metadata/metadata/metadata.component.scss */
.metadata-details { padding-bottom: 1rem; }
.metadata-details .refresh { margin-left: 0.5rem; font-size: 1.2rem; }
.metadata-details .refresh i { font-size: 1.2rem; }
.metadata-details .edit { font-size: 14px; }
.metadata-details .meta-row { display: flex; margin-bottom: 0.5rem; align-items: center; }
.metadata-details .meta-row .first { flex: 1; font-size: 13px; margin-right: 0.5rem; }
.metadata-details .meta-row .fill-space { flex: 1; }
.metadata-details .meta-row .second { font-size: 13px; }
.metadata-details .metadata-set { display: flex; flex-direction: column; margin-bottom: 0.5rem; }
.metadata-details .metadata-set .first { font-size: 14px; }
.metadata-details .refresh-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.metadata-details .no-content-row { padding: 0.75rem; color: #5b6474; }
.border-t { border-top: 1px solid #81868a40; }
.edit { font-size: 14px; cursor: pointer; }
.empty-desc { margin: 0; font-size: 14px; margin-bottom: 0.5rem; }
.refresh-btn { float: left; }
.refresh-btn .icon { font-size: 1.2rem; }
/* modules/metadata/metadata-dialog/metadata-dialog.component.scss */
.metadata-dialog .title-row { display: flex; align-items: center; }
.metadata-dialog .title-row .metadata-title { font-size: 1.3rem; margin: 0; }
.metadata-dialog .title-row .fill-space { flex: 1; }
.metadata-dialog .title-row .ts { margin: 0; font-size: 14px; }
.metadata-dialog .title-row .icon-button .icon { font-size: 1.2rem; }
.metadata-dialog-content { min-width: 400px; }
.metadata-dialog-content .content { display: flex; align-items: center; margin: 0 -0.5rem; }
.metadata-dialog-content .content .formfield { flex: 1; margin: 0 0.5rem; }
@media only screen and (max-width: 450px) { .metadata-dialog-content .content .formfield { flex-basis: 100%; } .metadata-dialog-content { min-width: 0; } }
.metadata-dialog-content .content .rm-button, .metadata-dialog-content .content .set-button { margin-top: 14px; }
.metadata-dialog .action { display: flex; justify-content: flex-end; }
.metadata-dialog .action .ok-button { margin-left: 0.5rem; }
.metadata-dialog .action button { border-radius: 0.5rem; }/* modules/changes/changes.component.scss (+ changes-theme). */
.change-header { display: flex; justify-content: space-between; align-items: center; }
.change-header .ch-header { display: block; margin-bottom: 1rem; font-weight: 400; margin-top: 1rem; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; }
.change-header .icon { font-size: 1.2rem; }
.cnsl-changes .scroll-container { border-bottom: 1px solid rgba(0, 0, 0, 0.12); margin-bottom: 0.5rem; box-sizing: border-box; padding: 0; list-style: none; }
@media only screen and (max-width: 500px) { .cnsl-changes .scroll-container { border-bottom: none; } }
.cnsl-changes .scroll-container .date { font-weight: 500; font-size: 0.8rem; display: block; margin-bottom: 0.5rem; }
.cnsl-changes .scroll-container .item { display: block; padding: 10px 0; font-size: 0.8rem; box-sizing: border-box; }
.cnsl-changes .scroll-container .item .row { display: flex; flex-direction: row; }
.cnsl-changes .scroll-container .item .row .spacer { width: 32px; }
.cnsl-changes .scroll-container .item .row .change-actions { flex: 1; display: flex; flex-direction: column; margin-top: -0.25rem; margin-left: 1rem; }
.cnsl-changes .change-action { display: flex; flex-direction: row; align-items: center; flex: 1; padding: 0.25rem 0; cursor: default; }
.cnsl-changes .change-action span { flex: 1; font-weight: 500; font-size: 0.8rem; overflow-x: hidden; }
.cnsl-changes .change-action .msg { text-overflow: ellipsis; }
.cnsl-changes .change-action .block { display: block; color: rgba(0, 0, 0, 0.54); }
.cnsl-changes .ch-sp-wrapper { padding: 0.5rem; display: flex; justify-content: center; box-sizing: border-box; }
.cnsl-changes .load-more-button { margin-bottom: 1rem; }
.cnsl-changes .end-container { margin: 1rem 0 1rem 0; display: flex; flex-direction: column; }
.cnsl-changes .end-container span { font-size: 13px; }/* add-key-dialog + show-key-dialog .component.scss (plain CSS). */
.key-dialog { max-width: 400px; }
.key-dialog .desc { margin-bottom: 1rem; }
.key-dialog .form-field, .key-dialog .add-key-form-field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; }
.key-dialog .title { font-size: 1.2rem; margin-top: 0; }
.key-dialog .desc { font-size: 14px; }
.key-dialog .row { display: flex; width: 100%; flex-direction: column; }
.key-dialog .row .left, .key-dialog .row .right { font-size: 14px; flex: 1 0 auto; }
.key-dialog .row .left { margin: 0 1rem 0.5rem 0; }
.key-dialog .row .right { margin: 0 0 1rem 0; overflow: auto; }
.key-dialog .download-button { margin-bottom: 1rem; }
.key-dialog .action { display: flex; justify-content: space-between; margin-top: 1rem; }
.key-dialog .action .ok-button { margin-left: 0.5rem; }
.key-dialog .action .fill-space { flex: 1; }
.key-dialog .notice.warn { border-left: 3px solid #e0a000; padding: 0.5rem 0.75rem; }
/* machine-keys.component.scss: the delete button shows on row hover. */
.machine-keys tr { outline: none; }
.machine-keys tr td.actions button { visibility: hidden; }
.machine-keys tr:hover td.actions button, .machine-keys tr td.actions button:focus { visibility: visible; }
.machine-keys .refresh-table-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.machine-keys .fill-space { flex: 1; }
.machine-keys .paginator { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }
/* modules/meta-layout (meta-layout.component.scss + meta.scss), plain CSS */
.meta-wrapper { display: flex; flex-direction: column; height: 100%; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); position: relative; }
.meta-wrapper .main-content { width: 100%; padding-bottom: 2rem; padding-right: 1rem; min-width: 0; box-sizing: border-box; }
.meta-wrapper .meta .meta-content { display: flex; flex-direction: column; flex-shrink: 1; }
@media only screen and (min-width: 1100px) {
  .meta-wrapper { flex-direction: row; }
  .meta-wrapper .meta { padding: 1rem 0 1rem 1rem; flex: 1 0 300px; max-width: 300px; min-width: 0; }
}
.meta-details { margin-bottom: 1rem; padding-bottom: 1rem; }
.meta-details .title-row { display: flex; align-items: center; margin: 0.5rem 0; }
.meta-details .title-row .title { font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; display: block; }
.meta-details .meta-row { display: flex; margin-bottom: 0.5rem; align-items: center; }
.meta-details .meta-row .first { flex: 1; font-size: 13px; margin-right: 0.5rem; }
.meta-details .meta-row .second { font-size: 13px; }
.meta-flex-col { display: flex; flex-direction: column; }
/* p36y3g4d2c3: user-detail.component.scss:19-33 (Nomen v4.16.0) */
.is-initial-info-section {
  margin-top: 1rem;
  display: block;
}
.is-initial-info-section .is-initial-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.is-initial-info-section .is-initial-row button {
  display: block;
  flex-shrink: 0;
}
.page-header { margin: 1rem 0 1.5rem; }
.page-header-row { display: flex; align-items: center; gap: 0.25rem; }
.page-header-row h1 { margin: 0; font-size: 2rem; font-weight: 400; }
.page-header-row a .icon { font-size: 1.2rem; line-height: 1.2rem; }
.page-header-sub { font-size: 14px; max-width: 45rem; margin-top: 1rem; }
.page-header-sub p { margin: 0 0 1rem; }
.list-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; margin: 0.5rem 0; flex-wrap: wrap; }
.btn-new .las { margin-right: 0.35rem; }
.grants-bare .card-head { justify-content: flex-end; border: 0; padding: 0; }
.grants-bare { margin-top: 0.5rem; }
.org-list-table tr.pointer { cursor: pointer; }
.org-list-table td, .org-list-table th { padding: 0.9rem 0.5rem; }
.projects-desc-line { border-bottom: 1px solid var(--divider, #e5e7eb); margin: 0.5rem 0 1rem; }
.projects-desc-line + p, .projects-own-sub { font-size: 14px; }
/* project-create / org-create: the single-question create pages */
.create-simple { max-width: 30rem; }
.create-simple-title { font-size: 1.75rem; font-weight: 400; margin: 1rem 0 1.5rem; }
.create-simple .form { gap: 1rem; }
.create-simple .create-button { margin-top: 1.5rem; min-width: 8rem; }
.create-simple.create-wide { max-width: 44rem; }
.create-simple .create-role-row { display: flex; flex-direction: column; gap: 1rem; }
.create-simple .btn-stroked { border: 1px solid var(--primary, #5469d4); color: var(--primary, #5469d4); background: transparent; }
/* app-create wizard: Angular's numbered horizontal stepper and section labels */
.app-create-wizard { max-width: 60rem; }
.create-stepper { display: flex; list-style: none; padding: 0; margin: 1rem 0 2rem; gap: 0; }
.create-stepper li { flex: 1; display: flex; flex-direction: column; align-items: flex-start; position: relative; font-size: 13px; min-width: 0; }
.create-stepper li:not(:last-child)::after { content: ""; position: absolute; top: 0.9rem; left: 2.2rem; right: 0.4rem; border-top: 1px solid var(--divider, #0000001f); }
.create-stepper-dot { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--divider, #0000001f); font-weight: 600; margin-bottom: 0.4rem; }
.create-stepper li.active .create-stepper-dot, .create-stepper li.done .create-stepper-dot { background: var(--primary, #5469d4); color: #fff; }
.create-stepper-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.create-stepper li.active .create-stepper-label { font-weight: 600; }
.create-section-label { text-transform: uppercase; letter-spacing: 0.05em; font-size: 14px; font-weight: 500; margin: 1rem 0 0.5rem; }
.create-actions { margin-top: 2rem; }
/* provider create: What now? box, callback URLs, optional toggle */
.idp-callbacks { margin: 0.5rem 0 0; }
.idp-callbacks > div { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 13px; }
.idp-callbacks dt { font-weight: 600; min-width: 9rem; }
.idp-callbacks dd { margin: 0; word-break: break-all; }
.idp-optional-toggle { background: transparent; border: 0; font-size: 1rem; padding: 0; color: inherit; cursor: pointer; align-self: flex-start; }
/* smtp wizard */
.smtp-wizard .smtp-wizard-header { display: flex; align-items: center; gap: 0.75rem; }
.smtp-wizard .smtp-envelope { font-size: 2rem; }
.smtp-wizard .create-stepper-btn { background: transparent; border: 0; padding: 0; color: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; font: inherit; max-width: 100%; }
.smtp-wizard .create-stepper-btn:disabled { cursor: default; opacity: 0.7; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-create-body .form input:not([type=checkbox]):not([type=radio]) { width: 100%; max-width: 30rem; box-sizing: border-box; }
.app-create-body .form { max-width: none; }
/* detail-layout.component.scss as plain CSS. */
.detail-layout-top-view { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.detail-layout-head .back-row { display: flex; align-items: center; gap: 0.5rem; }
.detail-layout-head .back-row h1 { margin: 0; font-size: 2rem; font-weight: 400; }
.detail-layout-head .head-desc { margin: 0.5rem 0 1rem; color: #667085; font-size: 14px; max-width: 60rem; }
.detail-layout-head .actions-wrap { display: flex; gap: 0.5rem; }
/* modules/members-table, add-member-dialog, add-member-roles-dialog */
.members-table .refresh-table-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.members-table .fill-space, .paginator .fill-space { flex: 1; }
.members-table td, .members-table th { padding: 0.5rem; }
.members-table td:first-child, .members-table th:first-child { padding-left: 0; padding-right: 1rem; }
.members-table .selection { display: inline-flex; align-items: center; gap: 0.5rem; }
.members-table .pointer { cursor: pointer; outline: none; }
.members-table .role-row { min-width: 200px; }
.members-table .member-action-tr { max-width: 100px; white-space: nowrap; }
.chip-list { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.member-role-chip { display: inline-flex; align-items: center; gap: 0.35rem; }
.chip-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.chip-remove { padding: 0; line-height: 1; }
.members-dialog .title { font-size: 1.2rem; margin-top: 0; }
.members-dialog .desc { font-size: 0.9rem; }
.roles-selection { display: flex; flex-direction: column; max-height: 400px; overflow-y: auto; box-sizing: border-box; margin: 0.75rem 0; }
.roles-selection .role-cb-content { padding-left: 0.5rem; display: inline-flex; align-items: center; gap: 0.35rem; }
.roles-selection .info-hover { font-size: 1.1rem; margin-left: 0.25rem; cursor: help; }
.members-dialog-actions { display: flex; justify-content: space-between; margin-top: 0.75rem; }
.project-autocomplete { position: relative; }
.autocomplete-options { list-style: none; margin: 0; padding: 0.25rem 0; border: 1px solid var(--border, #ccc); border-radius: 4px; max-height: 240px; overflow-y: auto; background: var(--bg, #fff); }
.autocomplete-options li { padding: 0.35rem 0.6rem; cursor: pointer; }
.autocomplete-options li:hover { background: rgba(127, 127, 127, 0.15); }
/* form_submit.js's autofill detection (input_base.scss:33-47): an
   autofilled input starts the onautofillstart animation. */
.legacy-login-form input:autofill { animation-duration: 50000s; animation-name: onautofillstart; }
.legacy-login-form input:-webkit-autofill { animation-duration: 50000s; animation-name: onautofillstart; }
@keyframes onautofillstart { from { } }
.legacy-login-form .lgn-suffix-wrapper { display: flex; align-items: center; gap: 0.25rem; }
.legacy-login-form .lgn-suffix-wrapper input { flex: 1; }
.legacy-login-form .lgn-idp-providers, .legacy-login-form .lgn-register-options { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.legacy-login-form .lgn-account-selection { display: flex; flex-direction: column; gap: 0.5rem; }
.legacy-login-form .lgn-account { display: flex; align-items: center; gap: 0.75rem; text-align: left; }
.legacy-login-form .lgn-names p { margin: 0; }
.legacy-login-form .fill-space { flex: 1; }
.legacy-login-form .lgn-checkbox { display: flex; gap: 0.5rem; align-items: baseline; }

/* main.scss:24-45: error-message.html's dialog_overlay (IdPError popup) */
.dialog_overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: 0.8;
}
.dialog_overlay.show { display: block; }
.dialog_content { position: relative; z-index: 1002; }
/* policies module */
.settings-layout { display: grid; grid-template-columns: 15rem 1fr; gap: 1.5rem; align-items: start; }
.settings-list { display: flex; flex-direction: column; gap: 0.15rem; position: sticky; top: 1rem; }
.settings-list button { text-align: left; background: none; border: 0; padding: 0.45rem 0.7rem; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; gap: 0.5rem; font: inherit; color: inherit; }
.settings-list button:hover { background: rgba(0,0,0,0.05); }
.settings-list button.active { background: rgba(84,105,212,0.12); font-weight: 600; }
.settings-content { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.plain-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.stepper { display: flex; gap: 0.3rem; align-items: center; }
.stepper input { width: 6rem; text-align: center; }
.inline-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.button-row { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.subform { border-left: 3px solid rgba(84,105,212,0.3); padding-left: 0.8rem; margin: 0.6rem 0; }
.lang-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.branding-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.branding-preview { border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; padding: 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.branding-preview button { border: 0; border-radius: 6px; padding: 0.5rem 1rem; align-self: flex-start; }
.preview-input { border: 1px solid; border-radius: 6px; padding: 0.4rem 0.6rem; opacity: 0.8; }
.asset-list li { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.4rem; }
.login-logo { display: block; margin: 0 auto 0.5rem; }
.login-links { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; font-size: 0.9em; }
.auth-page .btn-primary { background: var(--brand-primary, revert-layer); }
@media (max-width: 760px) { .settings-layout, .branding-grid, .lang-columns { grid-template-columns: 1fr; } .settings-list { position: static; } }
/* settings-list.component.scss (+ the sidenav group headers). */
.divider { margin: 2rem 0; }
.settings-list .settings-group {
  margin: 1rem 0 0.25rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #6b7280);
}
.settings-list .settings-group:first-child { margin-top: 0; }
/* The legacy .settings-layout grid (policies.css: 15rem 1fr) put the whole
   sidenav (list + screen) into its 15rem first column, squeezing every
   settings screen to ~0px. cnsl-settings-list is a plain block around the sidenav. */
.settings-layout.sidenav-indented { display: block; }
.settings-layout.sidenav-indented .settings-content > * { flex: 1 1 auto; min-width: 0; }
/* modules/filter-events (filter-events.component.scss) + action-keys caps */
.filter-button-wrapper { position: relative; display: inline-block; }
.filter-btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.2rem; height: 1.2rem;
  padding: 0 0.3rem; border-radius: 999px; background: #2754c5; color: #fff; font-size: 0.75rem; font-weight: 600; }
.action-keys { display: inline-flex; align-items: center; margin-left: 0.4rem; font-size: 0.7rem; color: #5b6474; }
.action-keys.without-margin { margin-left: 0; }
.action-key { display: inline-block; min-width: 1rem; padding: 0 0.25rem; border: 1px solid #cfd4dc; border-bottom-width: 2px;
  border-radius: 4px; background: #f6f7f9; font: inherit; text-align: center; }
.action-keys.no-contrast-mode .action-key { background: transparent; }
.transparent-backdrop { position: fixed; inset: 0; z-index: 199; background: transparent; }

.filter-events-wrapper { position: absolute; top: calc(100% + 10px); left: 0; border-radius: 0.5rem; z-index: 200;
  border: 1px solid #e3e6eb; display: flex; flex-direction: column; padding: 0.5rem 0; min-width: 360px; max-width: 450px;
  color: #1d2330; background: #fff; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12); }
.filter-events-wrapper .sp_wrapper { display: flex; align-items: center; justify-content: center; padding: 0.5rem 0; }
.filter-events-top { display: flex; justify-content: space-between; align-items: center; padding: 0 0.5rem 0.5rem 0.5rem;
  border-bottom: 2px solid #00000015; }
.filter-events-top .filter-middle { margin: 0 1rem; }

.filter-events-section { padding: 0 0.5rem; }
.filter-events-section .checkbox-wrapper { height: 40px; display: flex; align-items: center; gap: 0.4rem; }
.filter-events-section .datetime-input { width: 100%; box-sizing: border-box; }
.filter-events-section .datetime-range { display: inline-block; width: 100%; }
.filter-events-sub { display: flex; flex-direction: row; align-items: center; justify-content: space-around; gap: 0.5rem;
  padding: 0.25rem 0.5rem; background-color: #00000008; margin: 0 -0.5rem; }
.filter-events-sub .aggregate-type-select { min-width: 250px; margin-right: 0.5rem; }
.filter-events-sub .event-types-select { width: 100%; }
.filter-events-sub .filter-input-value { flex: 1; }
.filter-events-sub .filter-input-value input { height: 36px; box-sizing: border-box; font-size: 15px; }
.field select[multiple] { min-height: 6rem; }

/* events page host */
.events-table td { font-size: 0.85rem; }
.events-table code { font-size: 0.8rem; }

/* modules/events (events.component.scss) + display-json-dialog */
.events-title-row { display: flex; align-items: center; gap: 0.5rem; }
.events-title-row h2 { margin: 0; }
.events-desc { font-size: 0.9rem; max-width: 60rem; }
.events-table .editor-row, .events-table .aggregate-row { display: flex; flex-direction: column; gap: 0.15rem; }
.events-table .state { display: inline-block; width: fit-content; padding: 0 0.4rem; border-radius: 999px; background: #eef1f6; font-size: 0.75rem; }
.events-table .payload-cell { display: flex; align-items: center; gap: 0.4rem; max-width: 22rem; }
.events-table .payload-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: monospace; font-size: 0.75rem; }
.events-table .sort-header { border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.paginator { justify-content: flex-end; margin-top: 0.5rem; }
.event-dialog { width: 450px; max-width: 95vw; }
.event-data-column { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.75rem; }
.event-data-column .data-row { display: flex; justify-content: space-between; gap: 1rem; }
.event-data-column .label { font-size: 0.85rem; }
/* modules/iam-views (iam-views.component.scss), plain CSS */
.iam-views .views-desc { font-size: 14px; }
.iam-views .sort-header { border: none; background: none; padding: 0; font: inherit; font-weight: 600; color: inherit; cursor: pointer; }
/* login-policy: sections, factor box, collapsible lifetime cards */
.login-policy .lp-section { margin-bottom: 2rem; }
.login-policy .lp-section h3 { font-size: 1rem; font-weight: 600; margin: 0 0 0.5rem; }
.login-policy .lp-section > p { font-size: 14px; margin: 0 0 1rem; }
.login-policy .lp-factor-box { border: 1px solid var(--divider, #e5e7eb); border-radius: 6px; padding: 1rem; max-width: 22rem; margin-top: 1rem; }
.login-policy .lp-lifetimes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 899px) { .login-policy .lp-lifetimes { grid-template-columns: 1fr; } }
.login-policy .lp-lifetime { margin: 0; padding: 1rem 1.25rem; }
.login-policy .lp-lifetime summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 14px; font-weight: 500; }
.login-policy .lp-lifetime summary::-webkit-details-marker { display: none; }
.login-policy .lp-lifetime:not([open]) .lp-chevron { transform: rotate(180deg); }
.login-policy .lp-lifetime p { font-size: 13px; }
.login-policy .lp-section > .field-checkbox { margin: 0 0 0.9rem; }
/* modules/policies/private-labeling-policy scss */
.privatelabeling-policy { display: flex; flex-direction: column; gap: 0.5rem; }
.privatelabeling-top-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0; }
.privatelabeling-top-row .fill-space { flex: 1; }
.buttongroup { display: inline-flex; border: 1px solid rgba(135, 149, 161, 0.4); border-radius: 6px; overflow: hidden; }
.buttongroup .toggle { border: 0; border-right: 1px solid rgba(135, 149, 161, 0.4); background: transparent; color: inherit; padding: 0.4rem 0.9rem; font: inherit; font-size: 14px; cursor: pointer; }
.buttongroup .toggle:last-child { border-right: 0; }
.buttongroup .toggle.active { background: rgba(84, 105, 212, 0.16); font-weight: 600; }
.buttongroup .toggle:disabled { cursor: default; opacity: 0.7; }
.toggle-row { display: inline-flex; align-items: center; gap: 0.35rem; }
.lab-policy-content { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 0.5rem; }
.lab-policy-content .settings { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.lab-policy-content .preview-wrapper { flex: 1 1 320px; min-width: 0; }
.expansion { border-radius: 8px; border: 1px solid rgba(135, 149, 161, 0.3); background: var(--card-bg, transparent); }
.expansion > summary { cursor: pointer; padding: 0.9rem 1rem; list-style: none; }
.expansion > summary::-webkit-details-marker { display: none; }
.expansion > summary::after { content: "\2304"; float: right; }
.expansion[open] > summary::after { content: "\2303"; }
.panel-title { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.panel-title .space { width: 0.25rem; }
.expansion-body { padding: 0 1rem 1rem; }
.colors { display: flex; flex-direction: column; gap: 0.5rem; }
.logo-view { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.75rem 0; }
.img-wrapper { display: flex; align-items: center; gap: 0.5rem; min-height: 40px; }
.asset-add-btn { position: relative; cursor: pointer; }
.asset-add-btn .file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
@media (max-width: 599px) { .privatelabeling-top-row .pl-action-button { width: 100%; } }
/* edit-text.component.scss */
.edit-text-block { margin-bottom: 0.75rem; }
.edit-text-flex { display: flex; align-items: flex-start; gap: 0.5rem; }
.edit-text-formfield { flex: 1; }
.edit-text-area { width: 100%; min-height: 3.5rem; resize: vertical; font: inherit; }
.edit-text-area.defaulttext::placeholder { opacity: 0.9; font-style: italic; }
.edit-text-actions { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 1.4rem; }
.edit-text-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.edit-text-chips .chip { display: inline-flex; gap: 0.35rem; align-items: center; border-radius: 1rem; padding: 0.1rem 0.6rem; font-size: 0.75rem; border: 1px solid var(--border, #d1d5db); background: transparent; cursor: pointer; }
.edit-text-chips .chip .value { font-family: monospace; opacity: 0.8; }
.edit-text-info { margin-top: 0.35rem; }
.info-section.warn { border-left: 3px solid #f59e0b; padding: 0.35rem 0.6rem; background: rgba(245, 158, 11, 0.08); }
/* Port of smtp-provider.scss, smtp-table.component.scss, smtp-test-dialog.component.scss
   and the tiles of notification-smtp-provider.component.scss. */
.smtp-wizard-header { display: flex; align-items: center; gap: 0.75rem; }
.smtp-logo { height: 40px; max-width: 120px; object-fit: contain; }
.smtp-icon { width: 40px; height: 40px; border-radius: 8px; background: #eef4ff; display: grid; place-items: center; font-weight: 700; color: #2754c5; }
.smtp-stepper { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 1rem 0; flex-wrap: wrap; }
.smtp-stepper li { flex: 1; min-width: 8rem; text-align: center; padding: 0.4rem; border-bottom: 3px solid #e3e6eb; color: #5b6474; }
.smtp-stepper li button { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.smtp-stepper li[aria-current="step"] { border-color: #2754c5; color: #101828; font-weight: 600; }
.smtp-stepper li.done { border-color: #12b76a; }
.smtp-create-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.smtp-info-section { border: 1px solid #c7d7fe; background: #f5f8ff; border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1rem; }
.smtp-title-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.smtp-title-row h3 { margin: 0; }
.test-success { color: #067647; border-color: #12b76a !important; }
.test-error { color: #b42318; border-color: #b42318 !important; }
.smtp-table td.pointer { cursor: pointer; }
.smtp-table .availability { width: 4rem; text-align: center; }
.smtp-available { color: #12b76a; font-weight: 700; }
.new-smtp-wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin: 0.75rem 0; }
.new-smtp-wrapper .item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; text-decoration: none; color: inherit; margin: 0; }
.new-smtp-wrapper .item:hover { border-color: #2754c5; }
.smtp-dialog { position: fixed; inset: 0; background: rgba(16, 24, 40, 0.45); display: grid; place-items: center; z-index: 50; }
.smtp-dialog > div { background: #fff; border-radius: 10px; padding: 1.25rem 1.5rem; width: min(500px, 92vw); }
.smtp-dialog h2 { margin-top: 0; font-size: 1.1rem; }
.paginator { display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }/* actions-two-add-action dialog + steps, actions-two-actions-table */
.framework-change-block { display: flex; flex-direction: column; align-items: stretch; }
.execution-radio-group .execution-radio-button { display: flex; gap: 0.5rem; align-items: flex-start; margin-bottom: 1rem; }
.execution-type-text, .execution-condition-text { display: flex; flex-direction: column; }
.execution-type-text .description { font-size: 0.9rem; }
.condition-description, .target-description { margin-bottom: 0; }
.form-actions.spread { display: flex; justify-content: space-between; }
.target-key { display: flex; gap: 0.25rem; white-space: nowrap; }
.autocomplete { position: relative; }
.autocomplete-list { position: absolute; z-index: 5; left: 0; right: 0; max-height: 14rem; overflow: auto; margin: 0; padding: 0.25rem 0;
  list-style: none; background: var(--bg, #fff); border: 1px solid #8884; border-radius: 4px; }
.autocomplete-list li { padding: 0.35rem 0.75rem; cursor: pointer; }
.autocomplete-list li:hover, .autocomplete-list li[aria-selected="true"] { background: #8882; }
.drag-row { backdrop-filter: blur(10px); }
.execution-history { margin-top: 1.5rem; }
.row-error td { color: var(--danger, #b00020); }
/* features.component.scss + feature-toggle.component.scss */
.feature-title-row { display: flex; align-items: center; gap: 0.5rem; }
.features { display: flex; flex-direction: column; gap: 1.25rem; }
.feature-row { display: flex; flex-direction: column; gap: 0.4rem; }
.feature-row .buttongroup { display: inline-flex; border: 1px solid var(--border, #d1d5db); border-radius: 0.5rem; overflow: hidden; }
.feature-row .toggle { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.9rem; background: transparent; border: 0; cursor: pointer; color: inherit; font: inherit; }
.feature-row .toggle.selected { background: rgba(80, 110, 230, 0.18); font-weight: 600; }
.feature-row .current-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #22c55e; display: inline-block; }
.feature-info { font-size: 0.85rem; border-left: 3px solid #3b82f6; padding: 0.35rem 0.6rem; background: rgba(59, 130, 246, 0.06); }
.btn-danger-outline { border: 1px solid #dc2626; color: #dc2626; background: transparent; margin: 0.5rem 0 1rem; }
/* features.component.html: mat-stroked-button color="warn" (Set all to inherit). */
.feature-settings-wrapper .btn.btn-danger-outline { border: 1px solid rgba(127, 127, 127, 0.3); color: #cd3d56; background: transparent; font-size: 14px; font-weight: 500; padding: 0.45rem 1rem; border-radius: 6px; margin: 0.5rem 0 1rem; }
.feature-settings-wrapper .btn.btn-danger-outline:hover { background: rgba(205, 61, 86, 0.06); }
html.dark-theme .feature-settings-wrapper .btn.btn-danger-outline { color: #ff6b81; }
.feature-title-row h2 { font-weight: 400; }
/* password-complexity / lockout rows and domain-policy collapsible sections */
.policy-rows { border: 1px solid var(--divider, #0000001f); border-radius: 6px; padding: 0.5rem 1rem; max-width: 34rem; margin: 1rem 0; }
.policy-row { display: grid; grid-template-columns: 6.5rem 2.5rem 1fr; align-items: center; gap: 0.5rem; min-height: 3rem; }
.policy-row-stepper { display: flex; align-items: center; justify-content: space-between; }
.policy-row-stepper input { width: 2.25rem; text-align: center; border: 0; background: transparent; color: inherit; font-size: 14px; -moz-appearance: textfield; }
.policy-row-stepper input::-webkit-outer-spin-button, .policy-row-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.policy-row-stepper .icon-button { background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0.25rem; font-size: 1rem; }
.policy-row-stepper .icon-button:disabled { opacity: 0.4; cursor: default; }
.policy-row-check { display: flex; justify-content: center; }
.policy-row-check input { width: 18px; height: 18px; accent-color: var(--primary, #5469d4); }
.policy-row-icon { font-weight: 600; font-size: 14px; text-align: center; }
.policy-row-label { font-size: 14px; font-weight: 500; }
.policy-row-error { grid-column: 1 / -1; }
.policy-section { margin: 1rem 0; padding: 1rem 1.25rem; }
.policy-section summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 14px; font-weight: 500; }
.policy-section summary::-webkit-details-marker { display: none; }
.policy-section:not([open]) .policy-section-chevron { transform: rotate(180deg); }
.policy-section-desc { font-size: 14px; margin: 0.75rem 0 1rem; }
.policy-section .info-box { font-size: 13px; padding: 0.75rem 1rem; border-radius: 6px; background: var(--info-bg, #5469d41a); margin: 0.75rem 0; }
.policy-example { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.5rem 1rem; align-items: center; font-size: 13px; margin-top: 0.5rem; }
.policy-example dl { margin: 0; }
.policy-example dt { font-size: 12px; opacity: 0.7; }
.policy-example dd { margin: 0 0 0.5rem; }
/* idp-settings: title, description, and the add-provider cards (logo + name, 3 per row) */
.idp-settings-title { font-size: 1.2rem; font-weight: 400; margin: 0 0 0.5rem; }
.idp-add-title { font-size: 1.2rem; font-weight: 400; margin: 2rem 0 0.25rem; }
.new-idp-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0.75rem 0 1rem; max-width: 46rem; }
@media (max-width: 700px) { .new-idp-wrapper { grid-template-columns: 1fr; } }
.new-idp-wrapper .item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; text-decoration: none; color: inherit; margin: 0; min-height: 3rem; }
.new-idp-wrapper .item .idp-logo { width: 1.5rem; height: 1.5rem; object-fit: contain; }
.new-idp-wrapper .item .title { font-size: 14px; font-weight: 400; }
.idp-list tr.highlight { cursor: pointer; }
.idp-list tr.highlight:hover { background: rgba(127, 127, 127, 0.08); }
.badge-warn { margin-left: 0.25rem; background: #fff3cd; color: #664d03; }
.idp-options, .idp-ldap-attributes, .idp-roles { border: 1px solid rgba(127, 127, 127, 0.3); border-radius: 6px; padding: 0.75rem; margin: 0.75rem 0; }
.idp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.25rem 0; }
.chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: rgba(127, 127, 127, 0.15); }
.chip button { border: 0; background: none; cursor: pointer; padding: 0; }
.idp-next { border-left: 3px solid #4c6ef5; padding-left: 0.75rem; margin: 1rem 0; }
.copy-row { display: flex; gap: 0.5rem; align-items: center; margin: 0.25rem 0; }
.copy-row code { word-break: break-all; }
.idp-login-buttons { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0; }

/* modules/idp-table .idp-table-provider-type: logo per provider type, dark/light pairs by theme */
.idp-table-provider-type { display: flex; align-items: center; }
.idp-table-provider-type .idp-logo { margin-right: 1rem; height: 28px; width: 28px; flex-shrink: 0; }
.idp-table-provider-type .idp-logo.apple { height: 24px; width: 24px; }
.idp-table-provider-type .idp-logo.dark { display: none; }
html.dark-theme .idp-table-provider-type .idp-logo.dark { display: block; }
html.dark-theme .idp-table-provider-type .idp-logo.light { display: none; }
html.dark-theme .idp-table-provider-type .idp-logo.idp-icon { filter: invert(1); }
.idp-table-provider-type .idp-icon { margin-right: 1rem; font-size: 1.5rem; }
/* project-private-labeling-dialog.component.scss as plain CSS. */
.private-labeling-dialog .project-radio-group { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0; }
.private-labeling-dialog .radio-button { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.private-labeling-dialog .info { margin-top: 0.5rem; }
/* app-card.component.scss as plain CSS (colors instead of theme mixins). */
.cnsl-app-card { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; font-weight: 700; font-size: 0.8rem; color: #fff; background: #98a2b3; }
.cnsl-app-card.outline { background: transparent; border: 1px solid currentColor; color: inherit; }
.cnsl-app-card.add { background: #e4e7ec; color: #344054; }
.cnsl-app-card.web { background: linear-gradient(40deg, #059669, #10b981); }
.cnsl-app-card.useragent { background: linear-gradient(40deg, #db2777, #ec4899); }
.cnsl-app-card.native { background: linear-gradient(40deg, #7c3aed, #a78bfa); }
.cnsl-app-card.api { background: linear-gradient(40deg, #2563eb, #60a5fa); }
.cnsl-app-card.saml { background: linear-gradient(40deg, #ea580c, #fb923c); }
.app-tile { display: flex; align-items: center; gap: 0.75rem; }
/* application-grid tiles (56px, colors of authtypes.ts). */
.application-grid { display: flex; flex-wrap: wrap; gap: 1.75rem; margin: 1rem 0 2rem; }
.app-grid-item { display: flex; flex-direction: column; align-items: center; width: 4.5rem; text-decoration: none; color: inherit; }
.app-grid-item .cnsl-app-card { width: 3.5rem; height: 3.5rem; font-size: 1.6rem; margin-bottom: 0.6rem; }
.app-grid-item .cnsl-app-card.useragent { background: linear-gradient(40deg, #dc2626 30%, #db2777); }
.app-grid-item .cnsl-app-card.web { background: linear-gradient(40deg, #059669 30%, #047857); }
.app-grid-item .cnsl-app-card.native { background: linear-gradient(40deg, #306ccc 30%, #4f46e5); }
.app-grid-item .cnsl-app-card.api { background: linear-gradient(40deg, #1f2937, #111827); }
.app-grid-item .cnsl-app-card.add { background: #5469d4; color: #fff; font-weight: 400; }
.app-grid-name { font-size: 14px; text-align: center; word-break: break-word; }
.app-grid-type { font-size: 11px; opacity: 0.6; text-align: center; }
/* Autocomplete (search-*-autocomplete templates), plain CSS */
.autocomplete { position: relative; }
.autocomplete-input-wrap { position: relative; display: block; }
.autocomplete-input-wrap input { width: 100%; max-width: 31.25rem; box-sizing: border-box; }
.autocomplete-input-wrap input.loading { padding-right: 2.25rem; }
.autocomplete-spinner { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); }
.autocomplete-options { position: absolute; z-index: 30; left: 0; right: 0; max-width: 31.25rem; max-height: 16rem; overflow-y: auto; margin: 0; padding: 0.25rem 0;
  list-style: none; border-radius: 6px; background: var(--card-bg, #fff); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
.autocomplete-options li { display: flex; flex-direction: column; justify-content: center; min-height: 3rem; padding: 0 1rem; cursor: pointer; min-width: 0; }
.autocomplete-options li:hover, .autocomplete-options li[aria-selected="true"] { background: rgba(128, 128, 128, 0.12); }
.autocomplete-primary, .autocomplete-secondary { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.autocomplete-secondary { font-size: 13px; color: #6b7280; }
/* app-type-radio.component.scss + app-auth-method-radio.component.scss
   (theme mixins resolved against the CSS variables of the shell). */
.app-type-radio-button-wrapper { display: flex; flex-direction: row; margin: 0 -0.5rem; box-sizing: border-box; overflow-x: auto; }
.app-type-radio-button-wrapper input[type="radio"].app,
.auth-method-radio-button-wrapper input[type="radio"] { appearance: none; opacity: 0; display: none; box-sizing: border-box; }
.app-type-radio-button-wrapper input.app:checked + label,
.auth-method-radio-button-wrapper input:checked + label { border-color: var(--primary, #5469d4); border-width: 2px; box-sizing: border-box; box-shadow: 0 0 6px rgb(0 0 0 / 10%); }
.app-type-radio-button-wrapper input.app:checked + label .cnsl-type-radio-header span,
.auth-method-radio-button-wrapper input:checked + label .cnsl-radio-header span { color: white; }
.cnsl-type-radio-button, .cnsl-radio-button { margin: 0.5rem; border-radius: 0.5rem; border: 1px solid rgba(135, 149, 161, 0.2); display: flex; flex-direction: column; background-color: var(--card-bg, var(--surface, #fff)); flex: 0 1 230px; cursor: pointer; position: relative; padding-bottom: 1rem; box-sizing: border-box; }
.cnsl-type-radio-button { min-height: 300px; min-width: 150px; }
.cnsl-type-radio-header, .cnsl-radio-header { display: flex; align-items: center; justify-content: center; background: rgb(80, 110, 110); border-top-left-radius: 6px; border-top-right-radius: 6px; position: relative; }
.cnsl-type-radio-header { margin-bottom: 1rem; box-sizing: border-box; overflow: hidden; }
.cnsl-radio-header { flex-direction: column; }
.cnsl-type-radio-header span, .cnsl-radio-header span { margin: 2rem; font-size: 30px; color: #ffffff50; }
.cnsl-type-radio-button p, .cnsl-radio-button p { text-align: center; padding: 0 1rem; }
.cnsl-type-radio-button .type-desc, .cnsl-radio-button .type-desc { font-size: 14px; }
.cnsl-type-radio-button .fill-space, .cnsl-radio-button .fill-space { flex: 1; }
.cnsl-type-protocol { width: fit-content; margin: 0.5rem auto; }
.auth-method-radio-button-wrapper { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin: 0; padding-bottom: 0.5rem; padding-top: 1rem; }
.auth-method-radio-button-wrapper.compact { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; row-gap: 1rem; }
.cnsl-radio-button.first { margin-left: 0; }
.cnsl-radio-button.last { margin-right: 0; }
.cnsl-radio-button.disabled { cursor: not-allowed; opacity: 0.55; }
.cnsl-radio-button .recommended { position: absolute; bottom: 0; left: 50%; transform: translateY(50%) translateX(-50%); border-radius: 50vw; font-size: 11px; background: white; color: black; padding: 3px 1rem; box-shadow: 0 0 6px rgb(0 0 0 / 10%); white-space: nowrap; border: 1px solid rgba(135, 149, 161, 0.2); }
.cnsl-radio-button .recommended.not { background: rgb(144 75 75); color: white; }
.cnsl-radio-header .current { position: absolute; bottom: 0.5rem; left: 50%; transform: translateX(-50%); display: block; color: #ffffff90; white-space: nowrap; font-size: 12px; }
.cnsl-radio-button.compact { margin: 0; width: 230px; }
.cnsl-radio-button.compact .cnsl-radio-header span { margin: 1rem 0 1.5rem 0; }
.cnsl-radio-button .app-specs { display: block; padding: 1rem 0; margin: 0 1rem; }
.cnsl-radio-button .app-specs .row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin: 3px 0; }
.cnsl-radio-button .app-specs .row span { white-space: nowrap; }
.cnsl-radio-button .app-specs .row .space { margin-left: 0.5rem; }
.cnsl-radio-button .app-specs .row .row-entry { margin-right: 1rem; overflow: hidden; text-overflow: ellipsis; }
/* oidc-configuration.component.scss as plain CSS. */
.configuration-wrapper { display: flex; flex-direction: column; }
.configuration-wrapper .row { display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0; font-size: 14px; }
.configuration-wrapper .row .left { flex-shrink: 0; margin-right: 1rem; color: #667085; }
.configuration-wrapper .row .right { text-align: right; overflow-wrap: anywhere; }
.configuration-wrapper .row .right.name { display: flex; align-items: center; gap: 0.25rem; }
/* components/copy-row/copy-row.component.scss (+ copy-row-theme) as plain CSS. */
.cnsl-cr-row { display: flex; align-items: center; }
.cnsl-cr-row .cnsl-cr-right { flex-shrink: 0; }
.cnsl-cr-secondary-text { color: var(--secondary-text, #0000008a); }
.cnsl-cr-copy {
  flex-grow: 1;
  text-align: left;
  transition: opacity 0.15s ease-in-out;
  background-color: #8795a110;
  border: 1px solid #8795a160;
  border-radius: 4px;
  padding: 0.25rem 1rem;
  margin: 0.25rem 0rem;
  color: inherit;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: copy;
}
.cnsl-cr-copy[disabled] { color: #00000042; }
.dark-theme .cnsl-cr-copy[disabled], [data-theme="dark"] .cnsl-cr-copy[disabled] { color: #ffffff4d; }
/* auth-method-dialog.component.scss */
.auth-method-dialog { width: min(40rem, 92vw); }
.auth-method-dialog h1 { font-size: 1.5rem; font-weight: 400; margin: 0 0 1rem; }
.auth-method-dialog-content { margin-bottom: 1rem; }
.auth-method-dialog .action { display: flex; justify-content: space-between; }
.auth-method-dialog .action button { border-radius: 0.5rem; }
/* Close: mat-stroked-button color="primary" */
.auth-method-dialog .btn-stroked { border: 1px solid var(--primary, #5469d4); color: var(--primary, #5469d4); background: transparent; }
/* app-detail: OIDC compliance box and section cards */
.app-compliance { margin: 1rem 0; padding-bottom: 1rem; border-bottom: 1px solid var(--divider, #e5e7eb); }
.compliance-title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; margin: 0 0 0.75rem; }
.compliance-box { display: flex; gap: 1rem; background: #fbbf24; color: #7c2d12; border-radius: 4px; padding: 0.75rem 1rem; font-size: 14px; }
.compliance-box ul { margin: 0; padding-left: 1.25rem; }
.compliance-icon { font-weight: 700; }
html.dark-theme .compliance-box { background: #92400e; color: #fde68a; }
.app-section .section-title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; margin: 0 0 1rem; }
.app-section > * + * { margin-top: 0.75rem; }
.app-keys { margin-top: 1.5rem; border-top: 1px solid var(--divider, #e5e7eb); padding-top: 1rem; }
.app-urls dd code { word-break: break-all; }
/* token tab clock skew (app-detail.component.scss .clockskew-title / -slider) */
.app-section .clockskew-title { display: block; font-size: 14px; margin: 1rem 0.5rem 0 0.5rem; color: var(--secondary-text, #6b7280); }
.app-section .clockskew-slider { display: flex; align-items: center; gap: 0.75rem; margin: 0 0.5rem; }
.app-section .clockskew-slider input[type="range"] { flex: 1; accent-color: var(--primary, #5469d4); }
.app-section .clockskew-slider output { min-width: 2ch; font-size: 14px; }

/* app-detail oidcForm: current auth method banner + selects grid. */
.app-detail .auth-method-display { display: flex; align-items: center; gap: 1rem; color: #fff; border-radius: 6px; padding: 0.9rem 1rem; margin: 0.5rem 0 1.25rem; }
.app-detail .amd-prefix { font-size: 1.1rem; font-weight: 600; }
.app-detail .amd-desc { font-size: 13px; flex: 1; }
.app-detail .amd-edit { border: 0; background: transparent; color: inherit; cursor: pointer; width: 2.25rem; height: 2.25rem; border-radius: 50%; }
.app-detail .amd-edit:hover { background: rgba(255, 255, 255, 0.15); }
.app-detail .amd-edit .las { font-size: 1.25rem; }
.app-detail .oidc-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 0.75rem; margin-bottom: 1rem; }
.app-detail .oidc-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 12px; min-width: 0; }
.app-detail .oidc-field input, .app-detail .oidc-field select { width: 100%; min-width: 0; }
.app-detail .oidc-check { justify-content: flex-end; padding-bottom: 0.4rem; }
.app-detail .oidc-field.full-width { grid-column: 1 / -1; } /* app-formfield.full-width */
.app-detail .oidc-check .field { margin: 0; }
@media (max-width: 599px) { .app-detail .oidc-form-grid { grid-template-columns: minmax(0, 1fr); } }

/* redirect settings (app-detail .dev-col, mat-slide-toggle) and the native
   login success page checkbox */
.app-detail .dev-col { display: flex; flex-direction: column; align-items: flex-start; }
.app-detail .dev-col .devmode { margin: 1rem 0 0.5rem 0; }
.app-detail .slide-toggle { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 14px; position: relative; }
.app-detail .slide-toggle input { position: absolute; opacity: 0; width: 36px; height: 20px; margin: 0; cursor: inherit; }
.app-detail .slide-toggle-bar { position: relative; width: 36px; height: 14px; border-radius: 7px; background: rgba(0, 0, 0, 0.38); transition: background 0.15s; }
.app-detail .slide-toggle-thumb { position: absolute; top: -3px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #fafafa; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transition: transform 0.15s, background 0.15s; }
.app-detail .slide-toggle input:checked + .slide-toggle-bar { background: color-mix(in srgb, var(--primary, #5469d4) 54%, transparent); }
.app-detail .slide-toggle input:checked + .slide-toggle-bar .slide-toggle-thumb { transform: translateX(16px); background: var(--primary, #5469d4); }
.app-detail .slide-toggle input:focus-visible + .slide-toggle-bar { outline: 2px solid var(--primary, #5469d4); outline-offset: 2px; }
.app-detail .slide-toggle input:disabled + .slide-toggle-bar { opacity: 0.5; }
.app-detail .skip-success-page { margin-top: 1.5rem; }

/* Native App Links (app-detail .app-formfield, .fingerprints-input) */
.app-detail .app-desc { font-size: 14px; margin: 0; }
.app-detail .app-link-title { font-size: 1rem; font-weight: 500; margin: 1rem 0 0.5rem; }
.app-detail .app-link-endpoint { margin-top: 0.5rem; word-break: break-all; }
.app-detail .app-link-content { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.app-detail .app-link-content > .field { flex: 1 1 30%; }
.app-detail .fingerprints-field textarea { max-width: none; width: 100%; min-height: 12rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.875rem; line-height: 1.4; }

/* app-detail ?new=true: "navigate to the project" (.jumptoproject-row) */
.app-detail .jumptoproject-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.app-detail .jumptoproject { margin-top: 0.25rem; display: block; }
/* components/framework-autocomplete (framework-autocomplete.component.scss), plain CSS */
.framework-autocomplete { position: relative; }
.framework-autocomplete.full-width { width: 100%; }
.framework-autocomplete .options { position: absolute; z-index: 30; left: 0; right: 0; max-height: 16rem; overflow: auto; margin: 0; padding: 0.25rem 0; list-style: none; border-radius: 6px; background: var(--card-bg, #fff); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
.framework-autocomplete .framework-option { padding: 0.35rem 0.75rem; cursor: pointer; }
.framework-autocomplete .framework-option:hover, .framework-autocomplete .framework-option[aria-selected="true"] { background: rgba(128, 128, 128, 0.12); }
.framework-autocomplete .framework-option-column { display: flex; align-items: center; gap: 0.75rem; }
.framework-autocomplete .img-wrapper { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.framework-autocomplete .img-wrapper img { max-width: 100%; max-height: 100%; object-fit: contain; }
.framework-autocomplete .fill-space { flex: 1; }
.framework-autocomplete .is-loading { display: flex; justify-content: center; padding: 0.5rem; }
/* dark-only / light-only: the other variant is hidden when a framework has both */
html.dark-theme .framework-autocomplete .dark-only + .light-only, html:not(.dark-theme) .framework-autocomplete .dark-only:has(+ .light-only) { display: none; }
/* components/framework-change (framework-change.component.scss + dialog scss), plain CSS */
.framework-change-wrapper { margin-bottom: 1.5rem; }
.framework-card-wrapper { display: flex; align-items: center; gap: 1rem; }
.framework-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; min-width: 12rem; border-radius: 8px; }
.framework-card img { height: 40px; width: 40px; object-fit: contain; }
.framework-change-block { margin: 1rem 0; }
.framework-change-dialog .actions { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 1rem; }
/* the autocomplete itself: components/frameworkAutocomplete/frameworkAutocomplete.css *//* app-create.component.scss (+ create-layout header, framework-change) */
.app-create-page .create-layout-header { display: flex; align-items: center; gap: 0.75rem; }
/* Angular stacks the two questions in one column (create-layout content). */
.app-create-main-content { max-width: 30rem; }
.app-create-main-content h1 { font-size: 1.75rem; font-weight: 400; margin: 1.5rem 0 1rem; }
.app-create-main-content .content-wrapper { display: flex; flex-direction: column; gap: 0.5rem; }
.app-create-main-content .content-wrapper.reverse { flex-direction: column-reverse; }
.app-create-main-content input, .app-create-main-content select { width: 100%; }
.app-create-btn-container { margin-top: 3rem; }
.app-create-btn-container .btn { min-width: 8rem; }
.framework-change { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.framework-change .framework-logo { width: 2rem; height: 2rem; }
.framework-change-dialog { flex-basis: 100%; }
/* pages/projects/apps/integrate/integrate.component.scss as plain CSS
   (theme mixin app-integrate-theme mapped to the console CSS variables). */
.app-integrate-wrapper h1 { font-weight: 500; font-size: 2rem; }

.integrate-layout-container { margin: 0 -2rem 2rem -2rem; padding: 3rem 2rem 14rem 2rem; background: var(--metadata-section, rgba(135, 149, 161, 0.08)); }
.integrate-layout-container .top-control { display: flex; align-items: center; }
.integrate-layout-container .top-control .abort { margin-left: 1.5rem; text-transform: uppercase; font-size: 14px; opacity: 0.8; letter-spacing: 0.05em; }
.integrate-layout-container .top-control .progress-spinner { margin-left: 2rem; width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(135, 149, 161, 0.3); border-top-color: var(--primary, #5469d4); display: inline-block; animation: integrate-spin 0.8s linear infinite; }
@keyframes integrate-spin { to { transform: rotate(360deg); } }

.app-integrate-wrapper .offset-content { margin-top: -14rem; }

.app-integrate-wrapper .grid-layout { margin-top: 2rem; display: grid; grid-template-columns: [first] 300px [second] auto; grid-column-gap: 5rem; }
.app-integrate-wrapper .grid-layout .framework-selector { margin-bottom: 2rem; display: block; }
.app-integrate-wrapper .grid-layout .steps { margin-top: 0.5rem; }
.app-integrate-wrapper .grid-layout .steps .step { display: flex; flex-direction: column; padding: 1rem 0; }
.app-integrate-wrapper .grid-layout .steps .step.top-border { border-top: 2px solid rgba(135, 149, 161, 0.2); }
.app-integrate-wrapper .grid-layout .steps .step .step-title { font-weight: 700; font-size: 12px; opacity: 0.8; margin-bottom: 0.5rem; text-transform: uppercase; }
.app-integrate-wrapper .grid-layout .steps .step a { margin-bottom: 0.5rem; }
.app-integrate-wrapper .grid-layout a { color: var(--primary, #5469d4); }
.app-integrate-wrapper .grid-layout .redirect-p { margin-top: 0; }
.app-integrate-wrapper .redirect-description,
.app-integrate-wrapper .review-description { font-size: 14px; margin: 0.25rem 0 0 0; display: block; }
.app-integrate-wrapper .redirect-section { display: block; margin-top: 1rem; }

@media only screen and (max-width: 900px) {
  .integrate-layout-container { margin: 0 -2rem 2rem -2rem; background: transparent; padding: 3rem 2rem 14rem 2rem; }
  .app-integrate-wrapper .grid-layout { display: flex; flex-direction: column; }
  .app-integrate-wrapper .grid-layout .steps { display: none; }
}

.app-integrate-wrapper .card-wrapper { margin-top: -1rem; }
.app-integrate-wrapper .card-wrapper .duplicate-name-warning { margin-top: 0.25rem; display: block; }

.app-integrate-wrapper .framework-card-wrapper { display: flex; align-items: center; gap: 1rem; }
.app-integrate-wrapper .framework-card { position: relative; flex-shrink: 0; text-decoration: none; border-radius: 0.5rem; box-sizing: border-box; transition: all 0.1s ease-in; display: flex; flex-direction: row; height: 60px; align-items: center; justify-content: center; width: fit-content; border: 1px solid rgba(135, 149, 161, 0.2); padding: 0 0.5rem; }
.app-integrate-wrapper .framework-card img { width: 100%; height: 100%; max-width: 40px; max-height: 40px; object-fit: contain; object-position: center; }
.app-integrate-wrapper .framework-card span { margin: 0.5rem; text-align: center; }

.app-integrate-actions { margin-top: 2rem; display: flex; align-items: center; justify-content: flex-end; }
.app-integrate-actions .create-button { height: 3.5rem; padding: 0 4rem; }/* overlay backdrop / panel (styles.scss cnsl-overlay-*) and info-overlay.component.scss */
.cnsl-overlay-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1000; }
.cnsl-overlay-panel { position: fixed; z-index: 1002; max-width: 320px; }
.context_intro_overlay { background: var(--card-bg, #fff); color: inherit; border-radius: 0.5rem; padding: 0.75rem 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
.context_intro_overlay .overlay-info-row { display: flex; align-items: center; justify-content: space-between; }
.context_intro_overlay .info { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; display: flex; gap: 0.5rem; }
.context_intro_overlay p { margin: 0.5rem 0; font-size: 0.9rem; }
.context_intro_overlay .overlay-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
/* modules/string-list (string-list.component.scss), plain CSS */
.form-array-list { margin: 0.5rem 0 1rem; }
.form-field-list .list-header-wrapper { display: flex; align-items: center; gap: 0.5rem; }
.form-field-list .list-header { margin: 0; font-size: 0.85rem; }
.form-field-list .element-row { display: flex; align-items: flex-start; gap: 0.5rem; }
.form-field-list .element-row .formfield { flex: 1; }
.form-field-list .element-row input { width: 100%; }
.form-field-list .control-error { color: #dc2626; font-size: 0.8rem; }/* pages/actions (actions.component.scss), plain CSS: the info section */
.info-section.info { border-left: 3px solid #3b82f6; padding: 0.5rem 0.75rem; background: rgba(59, 130, 246, 0.08); margin: 0.5rem 0 1rem; border-radius: 4px; }.actions-beta { width: 100%; max-width: none; flex-basis: 100%; }
.actions-beta .info-section-row { width: 100%; box-sizing: border-box; }
/* modules/theme-setting (theme-setting.component.scss mixin), plain CSS with the
   is-dark-theme branches as html.dark-theme rules */
.theme-flex { display: flex; align-items: center; border: 1px solid #00000020; border-radius: 50vw; padding: 0.25rem; }
html.dark-theme .theme-flex { border-color: #ffffff20; }
.theme-setting-button { background-color: transparent; border-radius: 50vw; display: flex; align-items: center; justify-content: center; height: 2rem; width: 2rem; border: none; cursor: pointer; padding: 0; color: inherit; }
.theme-setting-button .moon, .theme-setting-button .sun { color: currentColor; fill: transparent; height: 1rem; width: 1rem; opacity: 0.7; }
.theme-setting-button .sun { height: 1.5rem; width: 1.5rem; }
.theme-setting-button:hover .moon, .theme-setting-button:hover .sun { opacity: 1; }
.theme-setting-button.active { background-color: #00000010 !important; }
html.dark-theme .theme-setting-button.active { background-color: #ffffff10 !important; }
.theme-setting-button.active .moon, .theme-setting-button.active .sun { opacity: 1; }
/* modules/footer (footer.component.scss), plain CSS */
.footer-wrapper { margin-top: 3rem; padding: 1.5rem 0; border-top: 1px solid rgba(128, 128, 128, 0.2); }
.footer-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-links a { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; text-decoration: none; }
.footer-socials { display: flex; gap: 0.75rem; flex: 1; justify-content: center; }
.footer-socials a { display: flex; align-items: center; text-decoration: none; margin: 0 0.25rem; color: #5b6474; }
.footer-socials a:hover { color: #2754c5; }
html.dark-theme .footer-socials a { color: #a3a9b5; }
html.dark-theme .footer-socials a:hover, html.dark-theme .footer-links a:hover { color: #8ea2ff; }
.footer-links a .external { visibility: hidden; margin-right: 1rem; }
.footer-links a:hover .external { visibility: visible; }
.footer-row .theme { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; flex: 1; }
@media only screen and (max-width: 800px) {
  .footer-row { flex-direction: column; }
  .footer-links { order: 2; justify-content: center; }
  .footer-links a .external { display: none; }
  .footer-row .theme { order: 2; justify-content: center; margin-left: 0; }
  .footer-socials { order: 3; }
}
/* Nomen.sh wordmark (Jesse's art, web/public/branding): light/dark pair by theme */
.footer-brand { display: inline-flex; align-items: center; margin-right: 1rem; }
.footer-brand .footer-wordmark { height: 24px; width: auto; }
.footer-brand .footer-wordmark.dark { display: none; }
html.dark-theme .footer-brand .footer-wordmark.dark { display: inline; }
html.dark-theme .footer-brand .footer-wordmark.light { display: none; }

/* modules/keyboard-shortcuts (keyboard-shortcuts.component.scss), plain CSS */
.keyboard-shortcuts { width: 400px; max-width: 100%; }
.keyboard-shortcuts .title { margin: 0 0 0.75rem; font-size: 1.25rem; }
.keyboard-shortcuts-group h2 { font-size: 0.95rem; margin: 1rem 0 0.5rem; }
.keyboard-shortcuts-wrapper { display: flex; flex-direction: column; }
.keyboard-shortcut { display: flex; align-items: center; padding: 0.35rem 0; gap: 0.25rem; }
.keyboard-shortcut-name { font-size: 0.9rem; }
.keyboard-shortcut .fill-space { flex: 1; }
.keyboard-shortcuts-action-key { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; margin-left: 0.25rem; border-radius: 6px; border: 1px solid rgba(128, 128, 128, 0.45); box-shadow: 0 1px 0 rgba(128, 128, 128, 0.45); }
.keyboard-shortcuts-key-overlay { position: absolute; inset: 0; border-radius: 6px; background: rgba(128, 128, 128, 0.08); }
.keyboard-shortcuts-span { position: relative; font-size: 0.8rem; text-transform: uppercase; }
.keyboard-shortcuts .action { display: flex; margin-top: 1rem; }/* pages/org-actions: actions.component.scss, action-table, add-action-dialog */
.org-actions .actions-title-row { display: flex; align-items: center; gap: 0.5rem; }
.org-actions .title-section { display: flex; align-items: center; margin-top: 2.5rem; }
.org-actions .title-section h3 { margin: 0; }
.org-actions .actions-flow { display: flex; flex-direction: column; max-width: 1000px; }
.org-actions .formfield { max-width: 300px; }
.org-actions .flow-type { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0; padding: 0 1rem; }
.org-actions .type-icon { color: var(--primary, #5469d4); }
.org-actions .trigger-wrapper { border-left: 2px solid var(--primary, #5469d4); margin-left: 1.25rem; padding-left: 1rem; }
.org-actions .trigger-top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.org-actions .fill-space { flex: 1; }
.org-actions .flow-action-wrapper { list-style: none; margin: 0; padding: 0 0.5rem; }
.org-actions .flow-action { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; padding: 0.5rem 0; cursor: move; }
.org-actions .flow-action.dragging { opacity: 0.4; }
.org-actions .reorder { display: inline-flex; gap: 0.25rem; }
.org-actions .add-btn { align-self: flex-start; margin: 1rem 0; }
.org-actions .state { padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 12px; }
.org-actions .state.active { background: #d1fadf; color: #05603a; }
.org-actions .state.inactive { background: #fee4e2; color: #912018; }
.org-actions .btn.state-active { background: #d1fadf; }
.org-actions .btn.state-inactive { background: #fee4e2; }
.org-action-table th.selection, .org-action-table td.selection { width: 2rem; }
.org-action-dialog { max-height: 90vh; overflow: auto; }
.smtp-dialog > div:has(.org-action-dialog), .smtp-dialog > .org-action-dialog { background: #fff; border-radius: 10px; padding: 1.25rem 1.5rem; width: min(640px, 94vw); }
.code-editor { border: 1px solid #8886; border-radius: 4px; font-size: 13px; }
.code-editor .cm-editor { min-height: 14rem; max-height: 50vh; }
.code-editor .cm-scroller { font-family: ui-monospace, Menlo, Consolas, monospace; }
.field-invalid .code-editor { border-color: var(--danger, #b00020); }
/* modules/shortcuts (shortcuts.component.scss, light theme) */
.shortcut-container { width: 100%; margin: 0 25px 25px 0; display: inline-block; vertical-align: top; }
.shortcut-title-container { display: flex; align-items: center; }
.shortcut-title-container h2 { text-transform: uppercase; font-size: 1.2rem; }
.shortcut-title-container .shortcut-btn { margin-left: 0.5rem; }

.shortcut-list-row { display: grid; grid-template-columns: 1fr; grid-gap: 1rem; width: 100%; }
@media only screen and (min-width: 800px) { .shortcut-list-row { grid-template-columns: 1fr 1fr; } }
@media only screen and (min-width: 1200px) { .shortcut-list-row { grid-template-columns: 1fr 1fr 1fr; } }
.shortcut-list { border: 1px solid rgba(135, 149, 161, 0.2); min-height: 60px; background-color: #eef1f5; border-radius: 1rem;
  overflow: hidden; display: block; padding: 1rem; }
.shortcut-list.drop-target { outline: 2px dashed #c7d7fe; }

.shortcut-desc { align-self: center; font-size: 14px; margin-top: 0; text-align: center; }

.shortcut-box { padding: 1rem; color: #1d2330; display: flex; flex-direction: row; align-items: center; box-sizing: border-box;
  font-size: 14px; background-color: #fff; border: 1px solid rgba(135, 149, 161, 0.2); border-radius: 1rem; margin: 1rem 0;
  text-decoration: none; }
.shortcut-box.edit-state { cursor: move; }
.shortcut-box.disabled { cursor: not-allowed; }
.shortcut-box.dragging { opacity: 0.4; }
.shortcut-box:first-child, .shortcut-desc + .shortcut-box { margin-top: 0; }
.shortcut-box:last-child { margin-bottom: 0; }
.shortcut-box.no-margin { margin: 0; }

.shortcuts-avatar { flex-shrink: 0; height: 40px; width: 40px; margin-right: 1rem; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; background: linear-gradient(40deg, rgb(129, 85, 185) 30%, #7b8ada); }
.shortcuts-avatar.purple { background: linear-gradient(40deg, #7c3aed 30%, #6d28d9); }
.shortcuts-avatar.red { background: linear-gradient(40deg, #dc2626 30%, #db2777); }
.shortcuts-avatar.green { background: linear-gradient(40deg, #059669 30%, #047857); }
.shortcuts-avatar.blue { background: linear-gradient(40deg, #3b82f6 30%, #4f46e5); }
.shortcuts-avatar.yellow { background: linear-gradient(40deg, #f59e0b 30%, #b45309); }
.shortcuts-avatar.black { background: linear-gradient(40deg, #1f2937, #111827); }
.shortcuts-avatar .icon { font-size: 1.3rem; line-height: 1.2rem; color: white; }
.shortcuts-avatar .shortcuts-avatar-label { font-size: 18px; color: white; }

.shortcut-col { display: flex; flex-direction: column; }
.shortcut-col .shortcut-item-desc { font-size: 13px; margin-top: 0.5rem; }
.shortcut-box .fill-space { flex: 1; }
.shortcut-state-dot { height: 8px; width: 8px; border-radius: 50%; margin-left: 1rem; flex-shrink: 0; }
.shortcut-state-dot.active { background-color: #12b76a; }
.shortcut-state-dot.inactive { background-color: #f04438; }

.available-shortcut-wrapper { border: 1px solid rgba(135, 149, 161, 0.2); border-radius: 1rem; padding: 1rem; }
.available-shortcut-list { display: grid; grid-template-columns: 1fr; grid-gap: 1rem; }
@media only screen and (min-width: 800px) { .available-shortcut-list { grid-template-columns: 1fr 1fr; } }
@media only screen and (min-width: 1200px) { .available-shortcut-list { grid-template-columns: 1fr 1fr 1fr; } }
.available-shortcut-list .shortcut-box { margin: 0; }
/* pages/home (home.component.scss), modules/onboarding (onboarding.component.scss),
   components/quickstart (quickstart.component.scss): plain CSS, no theme mixins. */
.home-title { font-size: 1.6rem; margin: 0 0 1rem 0; }
.home-wrapper { display: flex; flex-direction: column; gap: 1.5rem; }
.home-desc { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; color: #5b6474; margin: 1rem 0 0 0; }
.home-grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.home-grid-container .grid-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; border: 1px solid #e3e6eb;
  border-radius: 0.5rem; color: inherit; text-decoration: none; }
.home-grid-container .grid-item:hover { border-color: #2754c5; }
.icon-wrapper { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.icon-wrapper .inner { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.text-block { display: flex; flex-direction: column; gap: 0.25rem; }
.more-shortcuts-description p { margin: 0; font-size: 0.85rem; }

.onboarding-header .desc { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.75rem 0; }
.onboarding-progress-bar-wrapper { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.onboarding-progress-bar-wrapper .progress { flex: 1; max-width: 360px; height: 8px; }
.prog-desc { font-size: 0.85rem; white-space: nowrap; }
.action-card-wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.action-card { position: relative; display: flex; flex-direction: column; min-height: 180px; padding: 1rem; color: inherit; text-decoration: none; }
.action-card.done { opacity: 0.6; }
.action-card .state-circle { position: absolute; top: 0.6rem; right: 0.6rem; }
.action-card .success-icon { color: #15803d; font-size: 1.1rem; }
.action-content { display: flex; flex-direction: column; flex: 1; }
.action-content-row { display: flex; gap: 0.75rem; align-items: flex-start; }
.action-content .name { font-weight: 600; }
.action-content .description { font-size: 0.85rem; }
.action-row { display: flex; align-items: center; justify-content: space-between; color: #2754c5; font-size: 0.9rem; margin-top: 1rem; }
.fill-space { flex: 1; }

.quickstart-header { display: flex; flex-wrap: wrap; gap: 2rem; padding: 1.5rem; border: 1px solid #e3e6eb; border-radius: 0.5rem; }
.quickstart-left { flex: 1 1 280px; }
.quickstart-left h2 { margin-top: 0; }
.quickstart-card-wrapper { flex: 2 1 400px; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 0.75rem; }
.quickstart-card { display: flex; align-items: center; justify-content: center; height: 64px; padding: 0.5rem; }
.quickstart-card img { max-width: 40px; max-height: 40px; }
.quickstart-card .dark-only { display: none; }
@media (prefers-color-scheme: dark) {
  .quickstart-card .dark-only { display: block; }
  .quickstart-card .light-only { display: none; }
}/* Port of org-context.component.scss (light palette). */
.org-context-card {
  border-radius: 0.5rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  min-width: 220px;
  max-width: 240px;
  padding-bottom: 0.5rem;
  position: relative;
  color: var(--text, #1f2937);
  background: var(--card, #fff);
}
.org-context-card .filter-wrapper { padding: 0.5rem; }
.org-context-card .spinner-w {
  top: 1rem; left: 0; right: 0; position: absolute;
  display: flex; justify-content: center; align-items: center; pointer-events: none;
}
.org-context-card .show-all,
.org-context-card .new-org {
  width: 100%; text-align: center; padding: 0.5rem; color: inherit; text-decoration: none;
}
.org-context-card .show-all { border-top: 1px solid rgba(0, 0, 0, 0.12); }
.org-context-card .org-wrapper {
  max-height: 350px; display: flex; align-items: stretch; flex-direction: column;
  overflow-y: auto; width: 100%; border-top: 1px solid rgba(135, 149, 161, 0.2);
}
.org-context-card .org-button-with-pin {
  min-height: 36px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
}
.org-context-card .org-button-with-pin.active { background: rgba(80, 110, 228, 0.12); }
.org-context-card .org-select {
  flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0 0.75rem; min-height: 36px; color: inherit; cursor: pointer;
}
.org-context-card .org-span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-context-card .edit-button {
  height: 36px; width: 36px; font-size: 1.2rem; line-height: 1rem; margin-right: 0;
  visibility: hidden; opacity: 0.5; padding: 0; background: none; border: 0; color: inherit; cursor: pointer;
}
.org-context-card .edit-button.selected { visibility: visible; }
.org-context-card .edit-button:hover, .org-context-card .edit-button:focus { opacity: 1; visibility: visible; }
.org-context-card .org-button-with-pin.border-bottom { border-bottom: 1px solid #66666630; }
.org-context-card .org-button-with-pin:hover .edit-button { visibility: visible; }/* modules/accounts-card/accounts-card.component.scss (plain CSS). */
.accounts-card {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 300;
  border-radius: 0.5rem; background: #fff; border: 1px solid rgba(135, 149, 161, 0.2); box-sizing: border-box;
  width: 350px; max-width: 95vw; display: flex; flex-direction: column; align-items: center; padding: 1rem 0; color: inherit;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.accounts-card .avatar-button { border: 0; background: none; padding: 0; cursor: pointer; margin-bottom: 1rem; }
.accounts-card .avatar { border-radius: 50%; border: 2px solid rgba(135, 149, 161, 0.2); }
.accounts-card .avatar.iam-user { border: 2px solid #5469d4; }
.accounts-card .u-name { font-size: 1rem; line-height: 1rem; }
.accounts-card .u-email { font-size: 0.8rem; margin: 0.5rem 0; }
.accounts-card > .btn { border-radius: 50vh; margin: 0.5rem; }
.accounts-card .btn-warn { color: #cd3d56; border-color: #cd3d56; }
.accounts-card .error { margin: 0 1rem; font-size: 0.8rem; }
.accounts-card .l-accounts {
  display: flex; flex-direction: column; width: 100%; padding: 0.5rem 0; max-height: 450px; overflow-y: auto;
  border-top: 1px solid rgba(135, 149, 161, 0.3); border-bottom: 1px solid rgba(135, 149, 161, 0.3);
}
.accounts-card .progress-bar { height: 4px; width: 100%; background: linear-gradient(90deg, #5469d4 0 30%, transparent 30%); background-size: 200% 100%; animation: accounts-progress 1s linear infinite; }
@keyframes accounts-progress { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.accounts-card .row { padding: 0.5rem; display: flex; align-items: center; color: inherit; text-decoration: none; }
.accounts-card .row:hover { cursor: pointer; background-color: #00000010; }
.accounts-card .small-avatar { height: 35px; width: 35px; display: inline-flex; align-items: center; justify-content: center; margin: 0 1rem; }
.accounts-card .icon-wrapper { height: 35px; width: 35px; border-radius: 50%; margin: 0 1rem; display: flex; align-items: center; justify-content: center; }
.accounts-card .col { flex: 1; display: flex; flex-direction: column; overflow-x: hidden; }
.accounts-card .user-title { font-weight: 500; font-size: 0.9rem; line-height: 1rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.accounts-card .state, .accounts-card .loginname { font-size: 0.8rem; line-height: 1rem; white-space: nowrap; width: fit-content; }
.accounts-card .loginname { color: #8795a1; text-overflow: ellipsis; overflow: hidden; }
.accounts-card .state { margin-top: 3px; font-size: 11px; padding: 1px 0.5rem; border-radius: 50vh; background: rgba(205, 61, 86, 0.15); color: #cd3d56; }
.accounts-card .chevron { font-size: 1.4rem; padding: 0 0.5rem; }
@media (prefers-color-scheme: dark) {
  .accounts-card { background: #2a2f45; }
  .accounts-card .row:hover { background-color: #ffffff10; }
}/* modules/onboarding-card (onboarding-card.component.scss), plain CSS */
.onboarding-card { position: relative; width: 340px; max-width: 90vw; padding: 1rem; }
.onboarding-card .spinner-w { position: absolute; right: 0.75rem; top: 0.75rem; min-height: 20px; }
.onboarding-card .progress-header h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.onboarding-card .progress-header p { margin: 0 0 0.75rem; font-size: 0.85rem; }
.onboarding-card .prog-desc { font-size: 0.8rem; margin-bottom: 0.5rem; }
.onboarding-card .actions-list { display: flex; flex-direction: column; }
.onboarding-card .action-element { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.25rem; border-radius: 6px; text-decoration: none; color: inherit; }
.onboarding-card .action-element:hover { background: rgba(128, 128, 128, 0.1); }
.onboarding-card .state-circle { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(128, 128, 128, 0.5); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.onboarding-card .action-element.done .state-circle { border-color: #22c55e; }
.onboarding-card .success-icon { color: #22c55e; font-size: 0.85rem; }
.onboarding-card .action-element.done .name { text-decoration: line-through; opacity: 0.7; }
.onboarding-card .name { flex: 1; font-size: 0.9rem; }
.onboarding-card .no-thanks-wrapper { display: flex; justify-content: center; margin-top: 0.75rem; }
.onboarding-card .no-thanks-btn { cursor: pointer; font-size: 0.8rem; text-decoration: underline; background: none; border: 0; color: inherit; }/* pages/signedout (signedout.component.scss), plain CSS */
.signed-out-wrap { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.signed-out-wrap .signed-out-header { display: flex; flex-direction: column; align-items: center; margin-top: 50px; }
.signed-out-wrap .signed-out-header p { text-align: center; font-size: 14px; margin: 2rem 0 3rem 0; }
.signed-out-wrap .signed-out-header img { height: 140px; object-fit: contain; object-position: center; max-width: 170px; }
.signed-out-wrap .cnsl-action-button { display: inline-flex; align-items: center; gap: 0.5rem; }
/* pages/org-settings (org-settings.component.scss), plain CSS */
.org-settings .settings-top-view { display: flex; align-items: center; padding-top: 2rem; }
.org-settings .settings-top-view .settings-title-row { display: flex; align-items: center; }
.org-settings .settings-top-view .settings-title-row h1 { margin: 0; }
.org-settings .settings-top-view .fill-space { flex: 1; }
.org-settings .desc { margin-bottom: 2rem; font-size: 14px; }
.section-nav { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-bottom: 1px solid #e3e6eb; position: relative; z-index: 20; flex-wrap: wrap; }
.section-wrap { position: relative; }
.section-btn { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border: 0; border-radius: 50vw; background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.section-btn:hover { background: #00000010; }
.section-btn.active { background: #e8eefc; color: #2754c5; }
.section-menu { position: absolute; top: 32px; left: 0; width: 340px; max-width: 90vw; background: #fff; color: #1a1d23; border: 1px solid #d5dae2; border-radius: 10px; box-shadow: 0 8px 24px #0002; padding: 8px; }
.section-what { margin: 4px 6px 8px; font-size: 13px; color: #555b66; }
.section-item { display: block; padding: 8px; border-radius: 8px; color: inherit; text-decoration: none; }
.section-item:hover, .section-item:focus { background: #f1f4f9; }
.section-item-label { display: block; font-weight: 600; font-size: 14px; }
.section-item-help { display: block; font-size: 12px; color: #5b6270; }
.guide-dock { position: fixed; right: 16px; bottom: 16px; z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.guide-toggle { border: 0; border-radius: 50vw; padding: 8px 16px; background: #2754c5; color: #fff; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px #0003; order: 2; }
.guide-panel { order: 1; width: 360px; max-width: 92vw; max-height: 70vh; overflow: auto; background: #fff; color: #1a1d23; border: 1px solid #d5dae2; border-radius: 12px; box-shadow: 0 12px 32px #0003; padding: 12px 14px; font-size: 14px; }
.guide-panel h3 { margin: 0 0 4px; font-size: 15px; }
.guide-block { margin: 0 0 12px; }
.guide-welcome, .guide-step { background: #f3f6fd; border-radius: 8px; padding: 8px 10px; }
.guide-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.guide-note { color: #8a5a00; font-size: 13px; }
.guide-tips { padding-left: 18px; margin: 0; }
.guide-tips li { margin-bottom: 4px; }
.link-btn { border: 0; background: none; color: #2754c5; cursor: pointer; padding: 0; font: inherit; font-size: 12px; }
.guide-ai code { font-size: 12px; word-break: break-all; }
.guide-links { font-size: 13px; margin: 0; }
[data-guide-highlight] { outline: 3px solid #f0a020; outline-offset: 2px; border-radius: 8px; }
.guide-page, .activity-page { padding: 16px 24px; max-width: 1100px; }
.guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.guide-card { border: 1px solid #d5dae2; border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; }
.guide-card h2 { margin-top: 0; font-size: 18px; }
.activity-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.activity-table th, .activity-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e3e6eb; }

.show-advanced { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; margin-right: 0.5rem; }
.task-group + .task-group { border-top: 1px solid var(--border, #ddd); margin-top: 0.4rem; padding-top: 0.4rem; }
.guide-ask { display: flex; gap: 0.4rem; }
.guide-ask input { flex: 1; min-width: 0; }
.guide-answer { white-space: pre-wrap; }
/* The dark theme (the console's dark-theme class, the default): shared
   styles of styles.css and the component styles that hard-code light
   surfaces, overridden under html.dark-theme. */
html.dark-theme {
  color-scheme: dark;
  --bg: #1a1b1e; --card-bg: #232428; --surface: #232428; --text: #e4e6eb; --border: #3a3d44; --primary: #7b8ff7; --danger: #ff6b81;
}
html.dark-theme body { background: #1a1b1e; color: #e4e6eb; }
html.dark-theme a { color: #8ea2ff; }
html.dark-theme .card, html.dark-theme .dialog, html.dark-theme table, html.dark-theme .shell-card, html.dark-theme .accounts-card,
html.dark-theme .cnsl-filter-wrapper, html.dark-theme .smtp-dialog > div, html.dark-theme .smtp-dialog > .org-action-dialog,
html.dark-theme .shortcut-box, html.dark-theme .tab, html.dark-theme .token, html.dark-theme .contributor-avatar-circle { background: #232428; color: #e4e6eb; }
html.dark-theme th { background: #2b2d33; }
html.dark-theme th, html.dark-theme td, html.dark-theme .card, html.dark-theme .shell-card, html.dark-theme .nav-row, html.dark-theme .role-list,
html.dark-theme .subform, html.dark-theme .home-grid-container .grid-item, html.dark-theme .quickstart-header, html.dark-theme .instance .top-view,
html.dark-theme .smtp-stepper li { border-color: #3a3d44; }
html.dark-theme .btn { background: #2b2d33; color: #e4e6eb; border-color: #464a52; }
html.dark-theme .btn-primary { background: #5469d4; border-color: #5469d4; color: #fff; }
html.dark-theme .btn-danger { color: #ff8a80; border-color: #7a2e2e; }
html.dark-theme input, html.dark-theme select, html.dark-theme textarea, html.dark-theme .search, html.dark-theme .cnsl-form-field input {
  background: #1f2024; color: #e4e6eb; border-color: #464a52; }
html.dark-theme .muted, html.dark-theme .cnsl-secondary-text, html.dark-theme .info dt, html.dark-theme .smtp-stepper li { color: #a3a9b5; }
html.dark-theme .notice, html.dark-theme .smtp-info-section { background: #1e2a4a; border-color: #2f4280; color: #dbe4ff; }
html.dark-theme .notice-warning { background: #3a2e12; border-color: #6b5413; color: #fde68a; }
html.dark-theme .row-highlight td, html.dark-theme tr.row-current td, html.dark-theme .row-detail td { background: #262a35; }
html.dark-theme .breadcrumb-link:hover, html.dark-theme .org-link:hover, html.dark-theme .org-switch-button:hover, html.dark-theme .shell-org-item:hover,
html.dark-theme .shell-org-item.active, html.dark-theme .count, html.dark-theme .shortcut-list, html.dark-theme .events-table .state,
html.dark-theme .contributor-avatar-circle.count, html.dark-theme .badge-role, html.dark-theme .role-group, html.dark-theme .badge-inactive { background: #2f323a; color: #e4e6eb; }
html.dark-theme .user-option[aria-selected="true"], html.dark-theme .user-option:hover { background: #2a3350; }
html.dark-theme .card-forbidden { background: #3a1f1f; border-color: #7a2e2e; }
html.dark-theme .smtp-icon { background: #1e2a4a; color: #8ea2ff; }
html.dark-theme .autocomplete-secondary { color: #a3a9b5; }

/* parity-structure follow-up: visible input outlines like Angular dark */
html.dark-theme .field input, html.dark-theme .field select, html.dark-theme .field textarea { border-color: #6b7280; }
/* form labels: --secondary-text is not set in dark, so the light fallback
   (#0000008a) made every field label nearly invisible. Angular dark uses
   white at 54%. */
html.dark-theme .cnsl-label-wrapper { color: #ffffff8a; }
html.dark-theme .cnsl-form-field-invalid .cnsl-label-wrapper { color: var(--warn, #f44336); }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.75rem; margin: 0.75rem 0; }
.project-card { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; text-decoration: none; color: inherit; }
.project-card h3 { font-size: 1rem; }
.project-card-inactive { opacity: 0.7; }
.project-card { position: relative; min-height: 8rem; padding: 1rem; }
.project-card-link { display: flex; flex-direction: column; gap: 0.5rem; color: inherit; text-decoration: none; flex: 1; }
.project-card-meta { font-size: 12px; opacity: 0.7; }
.project-card-name { font-size: 1rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.5rem; }
.project-card .state-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #4caf50; }
.project-card .state-dot.inactive { background: #f44336; }
.project-card-pin { position: absolute; top: 0.5rem; right: 0.5rem; }
.project-card-add { align-items: center; justify-content: center; gap: 0.5rem; color: inherit; min-height: 8rem; }
.project-card-add .las { font-size: 2rem; }
.view-toggle .las { font-size: 1.25rem; }
.btn-link { background: none; border: 0; padding: 0; color: #b42318; cursor: pointer; font: inherit; }
.grant-illustration p { margin: 0 0 0.5rem; }
.project-apps { margin-bottom: 1rem; }
.project-apps-head { display: flex; align-items: center; gap: 0.5rem; }
.project-apps-head h3 { margin: 0; }
.btn-link.view-toggle { border: 0; background: transparent; color: inherit; cursor: pointer; }
.project-branding-title { font-size: 15px; font-weight: 500; }
.project-branding-row { display: flex; align-items: center; gap: 0.5rem; font-size: 13px; margin-top: 0.5rem; }
.project-branding-row .amd-pencil .las { font-size: 1.2rem; }
.project-settings-divider { border: 0; border-top: 1px solid rgba(127, 127, 127, 0.25); margin: 1rem 0; }
.project-settings-form .field-checkbox { margin: 1rem 0 0.5rem; }
/* modules/header + modules/nav (header.component.scss, nav.component.scss) */
.header-wrapper { position: relative; display: block; padding: 0.25rem 0; }
.header-content { display: flex; align-items: center; min-height: 56px; flex-wrap: nowrap; }
.header-content .title { display: flex; align-items: center; text-decoration: none; }
.header-content .logo { height: 32px; width: 32px; object-fit: contain; }
.logo-placeholder { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.logo-placeholder .spinner { width: 16px; height: 16px; border: 2px solid #cfd4dc; border-top-color: #2754c5; border-radius: 50%; animation: shell-spin 0.8s linear infinite; }
@keyframes shell-spin { to { transform: rotate(360deg); } }
.header-content .crumb { display: inline-flex; align-items: center; min-width: 0; }
/* Breadcrumbs give way so the header never widens the page; logo, context
   button and avatar keep their size. .header-content has no gap (neither has
   header.component.scss), so a collapsed crumb takes no room at all. */
/* header.component.scss: .breadcrumb-context clips (overflow hidden) so a long
   crumb ends in an ellipsis instead of running under the context button.
   The page crumbs (Header.jsx .page-crumbs) only take the room that is left
   (flex basis 0), so they never make the org name shrink. Each one shows at
   least its slash and an ellipsis (--page-crumb-min) or is not shown at all:
   .page-crumbs is a wrapping row one crumb high with overflow hidden, and its
   empty ::before item starts the first line, so a crumb without room wraps to
   the hidden second line instead of being cut to a sliver (at 390 px the
   context button leaves them no room, as in the console). A crumb with room
   grows up to its own width. The org name shrinks (ellipsis) only when logo,
   org, context button and avatar alone do not fit; it clips its own link, not
   its wrapper, so the org switcher card can still open. The free space left
   after the crumbs goes to .fill-space as an auto margin. */
.header-content .breadcrumb-context { display: flex; align-items: center; min-width: 0; overflow: hidden; }
.header-content .page-crumbs { --page-crumb-min: calc(32px + 2.5rem); /* slash + link padding and "…" */
  flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; height: 2.5rem; overflow: hidden; }
.header-content .page-crumbs::before { content: ""; height: 2.5rem; } /* one crumb high, so a wrapped crumb starts below it */
.header-content .page-crumbs .crumb { flex: 1 1 var(--page-crumb-min); min-width: var(--page-crumb-min); max-width: max-content; height: 2.5rem; }
.header-content .org-context { min-width: 0; }
.header-content .crumb.org-crumb { flex-shrink: 1; max-width: 45%; }
.header-content .title, .system-rel, .account-card-wrapper { flex-shrink: 0; }
.header-content .slash { color: #9aa3b1; flex-shrink: 0; }
/* header.component.scss: crumbs and the org name are in the text colour
   (foreground text), 14px, 2.5rem high, 0.5rem 0.75rem padding. */
.header-content .breadcrumb-link, .header-content .org-link { color: inherit; font-size: 14px; text-decoration: none; padding: 0.5rem 0.75rem; height: 2.5rem; border-radius: 6px; white-space: nowrap;
  display: inline-flex; align-items: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; transition: all ease 0.1s; }
/* The links are flex boxes, where text-overflow has no effect: the text sits in
   a span that may shrink (min-width: 0) and carries the ellipsis. */
.header-content .breadcrumb-link span, .header-content .org-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb-link:hover, .org-link:hover { background: #eef1f5; }
.breadcrumb-link .mob { display: none; }
.org-context { display: inline-flex; align-items: center; position: relative; }
.org-context-wrapper { position: relative; }
/* header.component.scss: the chevron sits in the button's right padding
   (absolute .svgspan), so the button is 0.75rem + 1.5rem wide. */
.org-switch-button { position: relative; display: flex; align-items: center; border: none; background: transparent; color: inherit; font-weight: bold; font-size: 14px; height: 2.5rem; cursor: pointer; padding: 0.5rem 1.5rem 0.5rem 0.75rem; border-radius: 6px; transition: all ease 0.2s; }
.org-switch-button .svgspan { position: absolute; top: 0; bottom: 0; right: 0; display: flex; align-items: center; padding-right: 0.5rem; pointer-events: none; }
.org-switch-button .svgspan svg { opacity: 0.7; height: 1.25rem; width: 1.25rem; }
.org-switch-button:hover { background: #eef1f5; }
.fill-space { flex: 1; }
/* Header-scoped above .main-container .fill-space (flex: 1), which wraps it. */
.header-wrapper .header-content .fill-space { flex: 0 0 0; margin-left: auto; }
/* .topbar (styles.css) made the header a flex row, so .header-content shrank
   to its content and fill-space had no room: Instance / avatar sat left. */
.header-wrapper.topbar { display: block; }
.header-wrapper.topbar > .header-content { width: 100%; }
/* header.component.html: doc / custom links and the Instance / Organization
   context button are mat-stroked-button (36px, transparent, hairline), not .btn. */
.header-content .doc-link.btn, .header-content .custom-link.btn, .header-content .system-rel .btn {
  display: inline-flex; align-items: center; height: 36px; box-sizing: border-box; padding: 0 15px;
  background: transparent; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 6px;
  color: inherit; font-size: 14px; font-weight: 500; line-height: 36px; white-space: nowrap; }
.header-content .doc-link.btn:hover, .header-content .custom-link.btn:hover, .header-content .system-rel .btn:hover { background: rgba(0, 0, 0, 0.04); }
html.dark-theme .header-content .doc-link.btn, html.dark-theme .header-content .custom-link.btn, html.dark-theme .header-content .system-rel .btn { border-color: rgba(255, 255, 255, 0.12); }
html.dark-theme .header-content .doc-link.btn:hover, html.dark-theme .header-content .custom-link.btn:hover, html.dark-theme .header-content .system-rel .btn:hover { background: rgba(255, 255, 255, 0.04); }
.system-rel .cnsl-action-button { display: inline-flex; align-items: center; gap: 0.5rem; }
.custom-link, .doc-link { margin-right: 1rem; }
.system-rel { margin-right: 1rem; display: flex; position: relative; }
.account-card-wrapper { position: relative; }
.icon-container { border: none; background: transparent; padding: 0; cursor: pointer; border-radius: 50%; }
.icon-container.iam-user { box-shadow: 0 0 0 2px #2754c5; }
.shell-card { position: absolute; z-index: 50; top: calc(100% + 10px); background: #fff; border: 1px solid #e3e6eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 0.75rem; min-width: 260px; display: flex; flex-direction: column; gap: 0.5rem; }
.context_card { left: 0; }
.a_card, .onboarding_card { right: 0; }
.shell-org-list, .shell-onboarding-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto; }
.shell-org-item { display: block; width: 100%; text-align: left; border: none; background: transparent; padding: 0.4rem 0.5rem; border-radius: 6px; cursor: pointer; font: inherit; }
.shell-org-item:hover, .shell-org-item.active { background: #eef1f5; font-weight: 600; }
.shell-account { display: flex; gap: 0.75rem; align-items: center; }
.shell-onboarding-list li.done a { color: #2e7d32; }
.nav-col { margin-bottom: 1rem; }
/* header.component.scss breakpoints: doc / custom links go at 800px, the
   crumbs tighten at 700px and 500px (where the instance crumb hides and
   every crumb but the last reads "..."), the context button label shrinks
   at 375px. The .btn rules above have the same specificity, hence the
   .header-content prefix. */
@media (max-width: 800px) {
  .header-content .custom-link.btn, .header-content .doc-link.btn { display: none; }
}
@media (max-width: 700px) {
  .header-content .breadcrumb-link, .header-content .org-link { padding: 0.25rem; }
}
@media (max-width: 500px) {
  .header-content .hide-on-small { display: none; }
  .header-content .breadcrumb-link, .header-content .org-link { padding: 0; }
  .header-content .breadcrumb-link .desk { display: none; }
  .header-content .breadcrumb-link .mob { display: inline; }
}
@media (max-width: 375px) {
  .header-content .iam-label { font-size: x-small; }
}

/* modules/nav nav.component.scss: 36px row, horizontally scrolling pill items in the text colour; active = primary pill */
.nav-row { position: relative; width: 100%; height: 36px; border-bottom: 1px solid #e3e6eb; }
.nav-row-abs { position: absolute; inset: 0; display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.nav-row-abs::-webkit-scrollbar { display: none; }
.nav-item { display: flex; align-items: center; box-sizing: border-box; height: 27px; margin: 0.25rem 2px; padding: 0.4rem 12px; font-size: 14px; line-height: 14px; font-weight: 500; color: inherit; text-decoration: none; border-radius: 50vw; white-space: nowrap; flex: 0 0 auto; transition: all 0.2s ease; }
.nav-item:hover { background: #00000010; }
.nav-item.active { background-color: #2754c5; color: #fff; }
.c_label { display: inline-flex; align-items: center; gap: 0.4rem; }
.count { display: none; font-size: 11px; height: 17px; min-width: 17px; line-height: 17px; text-align: center; border-radius: 50%; margin-left: 6px; background: #00000020; }
.nav-item.active .count { display: inline-block; background: #ffffff20; }
.progress-rel { position: relative; }
.progress-bar { cursor: pointer; padding: 0.25rem 0.5rem; }
.progress-bar .progress { width: 120px; }
.nav-shortcut-action-key { cursor: pointer; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 1px solid #cfd4dc; border-radius: 6px; margin-left: 0.5rem; }
.dialog-backdrop .dialog { position: static; }

/* nav.component.ts navrow / navrowproject :enter animations (leave animations not ported) */
.nav-row { animation: shell-navrow .2s ease-in; overflow: hidden; }
.nav-row-abs { animation: shell-navrowproject .2s ease-in; }
@keyframes shell-navrow { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 80px; } }
@keyframes shell-navrowproject { from { opacity: 0; transform: translateY(50%); } to { opacity: 1; transform: translateY(0); } }
/* app.component.scss (main-theme). */
.main-container { display: flex; flex-direction: column; width: 100%; min-height: 100%; position: relative; }
.main-container .router-container { padding: 0 2rem 50px 2rem; }
@media only screen and (max-width: 500px) { .main-container .router-container { padding: 0 1rem; } }
.main-container .router-container .outlet { margin: 0 auto; }
.main-container .nav {
  position: sticky; top: 0; right: 0; left: 0; background-color: var(--cnsl-toolbar); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cnsl-divider); z-index: 50;
}
@-moz-document url-prefix() { .main-container .nav { background-color: var(--cnsl-moz-toolbar); backdrop-filter: none; } }
.main-container .nav.shadow { box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%); }
.main-container .fill-space { flex: 1; }/* MatSnackBar position (horizontal end, vertical top) and surface. */
.cnsl-snackbar-container { position: fixed; top: 1rem; right: 1rem; z-index: 1000; display: flex; flex-direction: column; gap: 0.5rem; max-width: 30rem; }
.cnsl-snackbar-surface { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 0.75rem 0.6rem 1rem; border-radius: 4px;
  background: #323232; color: #fff; box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14); }
.cnsl-snackbar-message { flex: 1; }.update-notice {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  background: #323232;
  color: #fff;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14);
}
body { font-family: system-ui, sans-serif; margin: 0; background: #f6f7f9; color: #1d2330; }
a { color: #2754c5; }
.app { max-width: 960px; margin: 2rem auto; padding: 0 1rem; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topbar nav { display: flex; gap: 1rem; }
.topbar nav a { text-decoration: none; padding: 0.25rem 0; border-bottom: 2px solid transparent; }
.topbar nav a.active { border-bottom-color: #2754c5; font-weight: 600; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid #e3e6eb; }
th { background: #eef1f5; }
td.actions { text-align: right; }

.search { width: 100%; box-sizing: border-box; padding: 0.5rem 0.75rem; margin: 0.5rem 0 1rem;
  border: 1px solid #cfd4dc; border-radius: 6px; font: inherit; }

.btn { display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid #cfd4dc; border-radius: 6px;
  background: #fff; color: #1d2330; font: inherit; text-decoration: none; cursor: pointer; }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-primary { background: #2754c5; border-color: #2754c5; color: #fff; }
.btn-danger { color: #b42318; border-color: #f0b4ae; }

.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem;
  font-weight: 600; vertical-align: middle; }
.badge-active { background: #dcfae6; color: #067647; }
.badge-locked { background: #fee4e2; color: #b42318; }

.card { background: #fff; border: 1px solid #e3e6eb; border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.card h3 { margin-top: 0; font-size: 1rem; }
.info { display: grid; grid-template-columns: 10rem 1fr; gap: 0.4rem 1rem; margin: 0; }
.info dt { color: #5b6474; }
.info dd { margin: 0; }

.form { display: flex; flex-direction: column; gap: 0.9rem; max-width: 560px; }
.field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.field input, .field select { padding: 0.45rem 0.6rem; border: 1px solid #cfd4dc; border-radius: 6px; font: inherit; }
.field-invalid input, .field-invalid select { border-color: #b42318; }
.field-row { display: flex; gap: 1rem; }
.form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }

.notice { background: #eef4ff; border: 1px solid #c7d7fe; padding: 0.5rem 0.75rem; border-radius: 6px; }
.notice-warning { background: #fffaeb; border-color: #fedf89; color: #7a2e0e; margin: 0 0 1rem; }
.muted { color: #5b6474; }
.error { color: #b42318; }
.error p { margin: 0.25rem 0; }

/* users: management + machine users */
.button-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.btn-danger-solid { background: #b42318; border-color: #b42318; color: #fff; }

.badge-inactive { background: #eaecf0; color: #475467; }
.badge-type-human { background: #eef4ff; color: #3538cd; }
.badge-type-machine { background: #fdf2fa; color: #c11574; }

.tabs { display: flex; gap: 0.25rem; margin-top: 1rem; }
.tab { padding: 0.35rem 0.8rem; border: 1px solid #cfd4dc; border-radius: 999px; background: #fff;
  font: inherit; cursor: pointer; }
.tab-active { background: #2754c5; border-color: #2754c5; color: #fff; }

.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.card-head h3 { margin: 0; }
.card-danger { border-color: #f0b4ae; }
.lifecycle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0; border-top: 1px solid #f2f4f7; }
.lifecycle-row:first-of-type { border-top: 0; }
.lifecycle-row p { margin: 0.2rem 0 0; }

.field textarea { padding: 0.45rem 0.6rem; border: 1px solid #cfd4dc; border-radius: 6px; font: inherit; resize: vertical; }
.field-invalid textarea { border-color: #b42318; }

table.compact th, table.compact td { padding: 0.35rem 0.5rem; }
.inline-form { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.inline-form input { padding: 0.35rem 0.5rem; border: 1px solid #cfd4dc; border-radius: 6px; font: inherit; }
.token-notice { display: flex; flex-direction: column; gap: 0.5rem; }
.token-notice p { margin: 0; }
.token { display: block; padding: 0.5rem; background: #fff; border: 1px dashed #c7d7fe; border-radius: 6px;
  word-break: break-all; font-size: 0.85rem; }

/* orgs */
.row-highlight td { background: #f0f9ff; }

/* orgs: detail page, domains, members */
.badge-primary { background: #eef4ff; color: #2754c5; }
.badge-warning { background: #fef0c7; color: #93370d; }
.chip { display: inline-block; margin: 0 0.25rem 0.25rem 0; padding: 0.1rem 0.5rem; border: 1px solid #d0d5dd;
  border-radius: 999px; font-size: 0.8rem; background: #f9fafb; }
.button-row-end { justify-content: flex-end; }
.row-detail td { background: #f9fafb; }
.challenge p { margin-top: 0; }
.challenge .info { grid-template-columns: 4rem 1fr; }
.role-list { border: 1px solid #e3e6eb; border-radius: 6px; padding: 0.5rem 0.75rem; margin: 0; gap: 0.35rem; }
.role-list legend { padding: 0 0.25rem; }
.subform { border: 1px solid #e3e6eb; border-radius: 6px; padding: 0.75rem; margin: 0 0 0.75rem;
  display: flex; flex-direction: column; gap: 0.75rem; }
.subform legend { padding: 0 0.25rem; font-weight: 600; }
.subform > p { margin: 0; }

/* passwords */
.checkbox { display: flex; align-items: baseline; gap: 0.4rem; cursor: pointer; }
.field-checkbox { gap: 0.15rem; }
.pw-checks { list-style: none; margin: -0.5rem 0 0; padding: 0; font-size: 0.85rem; display: flex;
  flex-wrap: wrap; gap: 0.15rem 1rem; }
.pw-ok { color: #067647; }
.pw-todo { color: #5b6474; }

/* sign-in and account security */
.session { display: flex; align-items: center; gap: 0.75rem; }
.session a { text-decoration: none; font-weight: 600; }
.session a.active { text-decoration: underline; }
.auth-page { max-width: 440px; margin-top: 4rem; }
.auth-card { padding: 1.5rem 1.75rem; }
.auth-card h1 { font-size: 1rem; color: #5b6474; margin: 0 0 0.25rem; }
.auth-card h2 { margin: 0 0 1rem; }
.steps { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.steps li > .token, .steps li > .muted, .steps li > .button-row { margin-top: 0.4rem; }
.steps li > .muted { display: block; font-size: 0.85rem; }
.steps .token { letter-spacing: 0.05em; }

/* Access control */
.card-forbidden { border-color: #f0b4ae; background: #fff6f5; }
.card-forbidden h3 { color: #b42318; }
.badge-role { background: #f2f4f7; color: #344054; text-transform: capitalize; }
table.sessions td { vertical-align: top; }
tr.row-current td { background: #f5f8ff; }ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { margin: 0 0 0.25rem; }

/* Notices and small text. */
.notice p { margin: 0.25rem 0; }
.btn-small { padding: 0.15rem 0.6rem; font-size: 0.85em; }
p.small, .small { font-size: 0.85em; }

/* OIDC consent page */
.consent { max-width: 34rem; margin: 2rem auto; }
.consent-scopes { padding-left: 1.25rem; }
.consent-scopes li { margin-bottom: 0.5rem; }


/* modules/avatar */
.avatar-circle { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  overflow: hidden; flex-shrink: 0; vertical-align: middle; user-select: none; }
.avatar-circle.active { box-shadow: 0 0 0 2px #2754c5; }
.avatar-circle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-machine { font-size: 1.1em; line-height: 1; }
.user-cell { display: inline-flex; align-items: center; gap: 0.5rem; }
/* modules/project-role-chip */
.project-role-chip { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0 0.25rem 0.25rem 0; padding: 0.1rem 0.55rem;
  border: 1px solid; border-radius: 999px; font-size: 0.85rem; }
.role-rm { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.role-group { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 6px; background: #f2f4f7; cursor: pointer; }
.role-group.no-selection { cursor: default; }
/* modules/search-user-autocomplete */
.user-autocomplete { position: relative; }
.found-user-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; }
.user-name-column { display: flex; flex-direction: column; }
.user-name-column .smaller, .user-option .smaller { font-size: 0.8rem; }
.fill-space { flex: 1; }
.user-options { list-style: none; margin: 0.25rem 0 0; padding: 0.25rem 0; border: 1px solid #cfd4dc; border-radius: 6px;
  background: #fff; max-height: 16rem; overflow-y: auto; }
.user-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.6rem; cursor: pointer; }
.user-option[aria-selected="true"], .user-option:hover { background: #eef4ff; }
.user-autocomplete-target-desc { font-size: 0.85rem; }
/* The one dialog backdrop (was also redefined in shell.css; the values here
   are the ones that were in effect). */
.dialog-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center;
  justify-content: center; padding-top: 8vh; z-index: 100; }
.dialog { background: #fff; border-radius: 8px; padding: 1rem 1.25rem; width: min(30rem, 92vw); max-height: 84vh; overflow-y: auto; }
.dialog h3 { margin-top: 0; }

/* parity-structure follow-up: copy rows, full-width create inputs, 390px form wrap */
.copy-row .btn-link { color: inherit; }
.user-create-v2 .field input:not([type=checkbox]):not([type=radio]), .user-create-v2 .field select { width: 100%; box-sizing: border-box; }
.field { min-width: 0; }
.field input, .field select, .field textarea { max-width: 100%; box-sizing: border-box; }
@media (max-width: 599px) { .field-row { flex-wrap: wrap; } .field-row > .field { flex-basis: 100%; } }

/* Angular tables: the name is plain text in a clickable row. */
a.row-link { color: inherit; text-decoration: none; }
a.row-link:hover { text-decoration: underline; }
.card-title-caps { text-transform: uppercase; font-size: 14px; font-weight: 500; letter-spacing: 0.05em; }
/* Global style entry (angular.json "styles": styles.scss + codemirror). */
/* src/styles/lato-font.scss: the Lato faces (files copied from
   console/src/assets/fonts/lato to web/public/assets/fonts/lato). */
@font-face { font-family: Lato; font-style: normal; font-weight: 400; src: url(/assets/fonts/lato/Lato-Regular.ttf) format("truetype"); }
@font-face { font-family: Lato; font-style: normal; font-weight: 900; src: url(/assets/fonts/lato/Lato-Black.ttf) format("truetype"); }
@font-face { font-family: Lato; font-style: italic; font-weight: 900; src: url(/assets/fonts/lato/Lato-BlackItalic.ttf) format("truetype"); }
@font-face { font-family: Lato; font-style: normal; font-weight: 700; src: url(/assets/fonts/lato/Lato-Bold.ttf) format("truetype"); }
@font-face { font-family: Lato; font-style: italic; font-weight: 700; src: url(/assets/fonts/lato/Lato-BoldItalic.ttf) format("truetype"); }
@font-face { font-family: Lato; font-style: italic; font-weight: 400; src: url(/assets/fonts/lato/Lato-Italic.ttf) format("truetype"); }
@font-face { font-family: Lato; font-style: normal; font-weight: 300; src: url(/assets/fonts/lato/Lato-Light.ttf) format("truetype"); }
@font-face { font-family: Lato; font-style: italic; font-weight: 300; src: url(/assets/fonts/lato/Lato-LightItalic.ttf) format("truetype"); }
@font-face { font-family: Lato; font-style: normal; font-weight: 100; src: url(/assets/fonts/lato/Lato-Thin.ttf) format("truetype"); }
@font-face { font-family: Lato; font-style: italic; font-weight: 100; src: url(/assets/fonts/lato/Lato-ThinItalic.ttf) format("truetype"); }
/* src/styles/ailerons.scss (file copied to web/public/assets/ailerons.otf). */
@font-face { font-family: ailerons; font-display: auto; src: url(/assets/ailerons.otf) format("opentype"); }
/* src/styles/palette.scss + palette-helper.scss as CSS custom properties.
   palette.scss defines the primary / warn palettes of the dark and light
   themes; palette-helper's modify-palette() swaps the background and
   foreground maps of a theme, which here is the html.dark-theme /
   html.light-theme blocks re-pointing the --cnsl-* tokens. */
:root {
  --cnsl-dark-theme-text: #ffffff;
  --cnsl-light-theme-text: hsla(0, 0%, 0%, 0.87);

  /* $caos-dark-primary */
  --caos-dark-primary-50: #f1f7fd; --caos-dark-primary-100: #afd1f2; --caos-dark-primary-200: #7fb5ea;
  --caos-dark-primary-300: #4192e0; --caos-dark-primary-400: #2782dc; --caos-dark-primary-500: #2073c4;
  --caos-dark-primary-600: #1c64aa; --caos-dark-primary-700: #17548f; --caos-dark-primary-800: #134575;
  --caos-dark-primary-900: #0f355b; --caos-dark-primary-A100: #e4f2ff; --caos-dark-primary-A200: #7ebfff;
  --caos-dark-primary-A400: #278df0; --caos-dark-primary-A700: #1d80e0;

  /* $caos-light-primary */
  --caos-light-primary-50: #ffffff; --caos-light-primary-100: #ebedfa; --caos-light-primary-200: #bec6ef;
  --caos-light-primary-300: #8594e0; --caos-light-primary-400: #6c7eda; --caos-light-primary-500: #5469d4;
  --caos-light-primary-600: #3c54ce; --caos-light-primary-700: #2f46bc; --caos-light-primary-800: #293da3;
  --caos-light-primary-900: #23348b; --caos-light-primary-A100: #ffffff; --caos-light-primary-A200: #c5cefc;
  --caos-light-primary-A400: #7085ea; --caos-light-primary-A700: #6478de;

  /* $caos-dark-warn */
  --caos-dark-warn-50: #ffe7eb; --caos-dark-warn-100: #ffc4ce; --caos-dark-warn-200: #ff9dad;
  --caos-dark-warn-300: #ff768c; --caos-dark-warn-400: #ff5874; --caos-dark-warn-500: #ff3b5b;
  --caos-dark-warn-600: #ff3553; --caos-dark-warn-700: #ff2d49; --caos-dark-warn-800: #ff2640;
  --caos-dark-warn-900: #ff192f; --caos-dark-warn-A100: #ffffff; --caos-dark-warn-A200: #fffdfd;
  --caos-dark-warn-A400: #ffcace; --caos-dark-warn-A700: #ffb1b7;

  /* $caos-light-warn */
  --caos-light-warn-50: #f9e8eb; --caos-light-warn-100: #f0c5cc; --caos-light-warn-200: #e69eab;
  --caos-light-warn-300: #dc7789; --caos-light-warn-400: #d55a6f; --caos-light-warn-500: #cd3d56;
  --caos-light-warn-600: #c8374f; --caos-light-warn-700: #c12f45; --caos-light-warn-800: #ba273c;
  --caos-light-warn-900: #ae1a2b; --caos-light-warn-A100: #ffe4e6; --caos-light-warn-A200: #ffb1b9;
  --caos-light-warn-A400: #ff7e8b; --caos-light-warn-A700: #ff6474;
}

/* modify-palette(theme, background / foreground, ...): the active theme's
   tokens, read by the other files in this folder. Dark is the default. */
:root, html.dark-theme {
  --cnsl-primary: var(--caos-dark-primary-500);
  --cnsl-primary-light: var(--caos-dark-primary-200);
  --cnsl-warn: var(--caos-dark-warn-500);
  --cnsl-text: var(--theme-dark-text, #ffffff);
  --cnsl-secondary-text: var(--theme-dark-secondary-text, #ffffffc7);
  --cnsl-placeholder-text: #ffffff80;
  --cnsl-divider: rgba(255, 255, 255, 0.12);
  --cnsl-background: var(--theme-dark-background-500, #111827);
  --cnsl-cards: var(--theme-dark-background-400, #1a253c);
  --cnsl-cardhovered: var(--theme-dark-background-300, #243252);
  --cnsl-hover: rgba(0, 0, 0, 0.04);
  --cnsl-state: var(--theme-dark-background-300, #243252);
  --cnsl-state-active: #68cf8340;
  --cnsl-state-inactive: #af455359;
  --cnsl-toast: var(--theme-dark-background-400, #1a253c);
  --cnsl-toolbar: rgba(17, 24, 39, 0.9);
  --cnsl-moz-toolbar: var(--theme-dark-background-500, #111827);
}
html.light-theme {
  --cnsl-primary: var(--caos-light-primary-500);
  --cnsl-primary-light: var(--caos-light-primary-200);
  --cnsl-warn: var(--caos-light-warn-500);
  --cnsl-text: var(--theme-light-text, #000000);
  --cnsl-secondary-text: var(--theme-light-secondary-text, #000000c7);
  --cnsl-placeholder-text: rgba(0, 0, 0, 0.42);
  --cnsl-divider: rgba(0, 0, 0, 0.12);
  --cnsl-background: var(--theme-light-background-500, #fafafa);
  --cnsl-cards: var(--theme-light-background-400, #ffffff);
  --cnsl-cardhovered: var(--theme-light-background-300, #ffffff);
  --cnsl-hover: rgba(0, 0, 0, 0.04);
  --cnsl-state: #e4e7e4;
  --cnsl-state-active: #cbf4c9;
  --cnsl-state-inactive: #ffc1c1;
  --cnsl-toast: var(--theme-light-background-400, #ffffff);
  --cnsl-toolbar: rgba(250, 250, 250, 0.9);
  --cnsl-moz-toolbar: var(--theme-light-background-500, #fafafa);
}
/* src/styles.scss: the global tokens and rules. The Angular Material theme
   builders (mat.*-theme / typography / overrides, mat-mdc-* selectors) and
   the flag-icons / material-icons imports have no counterpart in the React
   build; everything else is here as plain CSS. */
:root {
  --grey: #8795a1;
  --warn: #ff3b5b;
  --success: #10b981;
  --table-row-back: #363738;

  --theme-dark-background-50: #7c93c6; --theme-dark-background-100: #4a69aa; --theme-dark-background-200: #395183;
  --theme-dark-background-300: #243252; --theme-dark-background-400: #1a253c; --theme-dark-background-500: #111827;
  --theme-dark-background-600: #080b12; --theme-dark-background-700: #000000; --theme-dark-background-800: #000000;
  --theme-dark-background-900: #000000; --theme-dark-background-A100: #5782e0; --theme-dark-background-A200: #204eb1;
  --theme-dark-background-A400: #182b53; --theme-dark-background-A700: #17223b;
  --theme-dark-background-contrast-50: hsla(0, 0%, 0%, 0.87); --theme-dark-background-contrast-100: #ffffff;
  --theme-dark-background-contrast-200: #ffffff; --theme-dark-background-contrast-300: #ffffff;
  --theme-dark-background-contrast-400: #ffffff; --theme-dark-background-contrast-500: #ffffff;
  --theme-dark-background-contrast-600: #ffffff; --theme-dark-background-contrast-700: #ffffff;
  --theme-dark-background-contrast-800: #ffffff; --theme-dark-background-contrast-900: #ffffff;
  --theme-dark-background-contrast-A100: hsla(0, 0%, 0%, 0.87); --theme-dark-background-contrast-A200: #ffffff;
  --theme-dark-background-contrast-A400: #ffffff; --theme-dark-background-contrast-A700: #ffffff;

  --theme-light-background-50: #ffffff; --theme-light-background-100: #ffffff; --theme-light-background-200: #ffffff;
  --theme-light-background-300: #ffffff; --theme-light-background-400: #ffffff; --theme-light-background-500: #fafafa;
  --theme-light-background-600: #ebebeb; --theme-light-background-700: #dbdbdb; --theme-light-background-800: #cccccc;
  --theme-light-background-900: #bdbdbd; --theme-light-background-A100: #ffffff; --theme-light-background-A200: #ffffff;
  --theme-light-background-A400: #ffffff; --theme-light-background-A700: #ffffff;
  --theme-light-background-contrast-50: hsla(0, 0%, 0%, 0.87); --theme-light-background-contrast-100: hsla(0, 0%, 0%, 0.87);
  --theme-light-background-contrast-200: hsla(0, 0%, 0%, 0.87); --theme-light-background-contrast-300: hsla(0, 0%, 0%, 0.87);
  --theme-light-background-contrast-400: hsla(0, 0%, 0%, 0.87); --theme-light-background-contrast-500: hsla(0, 0%, 0%, 0.87);
  --theme-light-background-contrast-600: hsla(0, 0%, 0%, 0.87); --theme-light-background-contrast-700: hsla(0, 0%, 0%, 0.87);
  --theme-light-background-contrast-800: hsla(0, 0%, 0%, 0.87); --theme-light-background-contrast-900: hsla(0, 0%, 0%, 0.87);
  --theme-light-background-contrast-A100: hsla(0, 0%, 0%, 0.87); --theme-light-background-contrast-A200: hsla(0, 0%, 0%, 0.87);
  --theme-light-background-contrast-A400: hsla(0, 0%, 0%, 0.87); --theme-light-background-contrast-A700: hsla(0, 0%, 0%, 0.87);

  --theme-dark-text: #ffffff;
  --theme-dark-secondary-text: #ffffffc7;
  --theme-light-text: #000000;
  --theme-light-secondary-text: #000000c7;
}

.progress { --progress-active-indicator-color: var(--success); --progress-track-height: 8px; --progress-track-color: #00000010; }

.cnsl-action-button { display: flex; align-items: center; margin-left: -0.5rem; padding-left: 0.25rem; height: 36px; }
.cnsl-action-button i:not(.no-margin) { margin-right: 0.25rem; font-size: 1.3rem; }

html.light-theme { --warn: #cd3d56; --success: #10b981; }
html.light-theme .progress { --progress-track-color: #00000010; }
html.light-theme .main-container { background-color: var(--theme-light-background-500); transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
html.light-theme ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); background-color: var(--theme-light-background-500); border-radius: 8px; }
html.light-theme ::-webkit-scrollbar { width: 6px; height: 6px; background-color: var(--theme-light-background-500); }
html.light-theme ::-webkit-scrollbar-thumb { background-color: #737c8850; border-radius: 8px; cursor: pointer; }
html.light-theme .root-header { box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12); }
html.light-theme .desc-link { color: var(--theme-light-text); }

html.dark-theme { --warn: #ff3b5b; --success: #10b981; }
html.dark-theme .progress { --progress-track-color: #ffffff20; }
html.dark-theme .main-container { background-color: var(--theme-dark-background-500); color: var(--theme-dark-text); transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
html.dark-theme ::-webkit-scrollbar-track { box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); background-color: var(--theme-dark-background-500); border-radius: 8px; }
html.dark-theme ::-webkit-scrollbar { width: 6px; height: 6px; background-color: var(--theme-dark-background-500); }
html.dark-theme ::-webkit-scrollbar-thumb { background-color: #737c8870; border-radius: 8px; cursor: pointer; }
html.dark-theme .root-header { box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12); }
html.dark-theme .desc-link { color: var(--theme-dark-text); }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -moz-osx-font-smoothing: inherit;
  -webkit-font-smoothing: auto;
}
body * { -moz-osx-font-smoothing: inherit !important; -webkit-font-smoothing: auto !important; }
h1 { font-weight: 400; }
h2 { font-size: 1.3rem; font-weight: 400; }
.transparent-backdrop { background: transparent !important; opacity: 0; }
.max-width-container { max-width: 80rem; margin: 0 auto; }
.max-width-description { max-width: 50rem; }
.enlarged-container { padding: 2rem 0 0 0; }
/* `i { font-size: 1.5rem }` sizes the console's line-awesome icon tags; the
   React port renders icons as text/SVG and uses <i> for italics, so it is
   scoped to the icon classes. */
i.las, i.lab, i.la { font-size: 1.5rem; }
/* src/component-themes.scss: the component-themes() mixin includes the
   shared style partials and every component's theme. The shared partials
   are imported here; each React component imports its own ported CSS
   (card.css, changes.css, nav.css ...) next to its JSX. */
/* src/styles/table.scss (table-theme). The mat-mdc-table / calendar /
   checkbox selectors have no React counterpart; the shared table classes
   below are used by the React tables. */
th { text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; font-size: 11px; font-weight: 500; }
.pointer { cursor: pointer; }
tr.highlight:hover td { transition: background 0.1s ease; background: var(--cnsl-hover); }
tr .cnsl-table-action { visibility: hidden; transition: color 0.2s ease; }
tr .cnsl-table-action:active, tr .cnsl-table-action:hover, tr .cnsl-table-action:focus, tr .cnsl-table-action:focus-within, tr:hover .cnsl-table-action { visibility: visible; }
.no-content-row {
  background-color: #ffffff10; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; display: flex;
  align-items: center; padding: 0.5rem; font-size: 14px; justify-content: center; font-style: italic;
}
html.light-theme .no-content-row { background-color: #f4f4f470; }
.selection { width: 80px; max-width: 80px; }
.selection .checkbox { margin-right: auto; }
.selection .hidden { visibility: hidden; }
th .selection { margin-left: 1rem; }
.state {
  border-radius: 50vw; padding: 2px 0.5rem; letter-spacing: 0.05em; font-weight: 500; font-size: 12px; white-space: nowrap;
  background-color: var(--cnsl-state); box-shadow: 0 0 3px #0000001a;
}
.state.active { background-color: var(--cnsl-state-active); color: #cbf4c9; }
.state.inactive { background-color: var(--cnsl-state-inactive); color: #ffc1c1; }
.state.neutral { background: #01489c78; color: #47a8ff; }
html.light-theme .state.active { color: #0e6245; }
html.light-theme .state.inactive { color: #620e0e; }
html.light-theme .state.neutral { background: #47a8ff82; color: #01489c; }
.bg-state { background-color: var(--cnsl-state) !important; }
.bg-state.active { background-color: var(--cnsl-state-active) !important; color: #cbf4c9 !important; }
.bg-state.inactive { background-color: var(--cnsl-state-inactive) !important; color: #ffc1c1 !important; }
html.light-theme .bg-state.active { color: #0e6245 !important; }
html.light-theme .bg-state.inactive { color: #620e0e !important; }
.color-shadow { border: 1px solid rgba(135, 149, 161, 0.2); box-shadow: 0 0 3px #0000001a; }
/* src/styles/input.scss (input-theme): [cnslInput] / .mat-mdc-select look,
   here on [cnslinput] and .cnsl-input (the React Input / native selects). */
[cnslinput], .cnsl-input {
  box-sizing: border-box; padding-inline-start: 10px; outline: none; display: inline-block; text-align: start;
  cursor: text; font-size: 1rem; border-radius: 4px; height: 40px; padding: 10px; width: 100%; margin-bottom: 2px;
  border: 1px solid #f9f7f775; background-color: #00000040; color: var(--cnsl-text);
  transition: border-color 0.15s ease-in-out, background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
html.light-theme [cnslinput], html.light-theme .cnsl-input { border-color: #1a191954; background-color: #00000004; }
[cnslinput]:hover, .cnsl-input:hover { border-color: #e0e0e0; }
html.light-theme [cnslinput]:hover, html.light-theme .cnsl-input:hover { border-color: #1a1b1b; }
[cnslinput]:active, [cnslinput]:focus, .cnsl-input:active, .cnsl-input:focus { border-color: var(--cnsl-primary); }
[cnslinput].ng-touched.ng-invalid, .cnsl-input.ng-touched.ng-invalid, [cnslinput][aria-invalid="true"], .cnsl-input[aria-invalid="true"] { border-color: var(--cnsl-warn); }
[cnslinput][disabled], .cnsl-input[disabled] { border-color: #36373850; color: #ffffff80; }
[cnslinput][disabled]::placeholder, .cnsl-input[disabled]::placeholder { color: #ffffff80; }
html.light-theme [cnslinput][disabled], html.light-theme .cnsl-input[disabled] { border-color: #cccdce50; color: #00000061; }
html.light-theme [cnslinput][disabled]::placeholder, html.light-theme .cnsl-input[disabled]::placeholder { color: #00000061; }
[cnslinput]::placeholder, .cnsl-input::placeholder { font-size: 14px; color: var(--cnsl-placeholder-text); font-style: italic; }
.paginator .cnsl-input, .cnsl-paginator .cnsl-input { background-color: inherit; }
/* src/styles/error.scss (cnsl-error-theme). */
.cnsl-error { display: block; font-size: 12px; color: var(--cnsl-warn); margin-bottom: 5px; }
/* src/styles/link.scss (link-theme): every rule in the mixin is commented
   out in the console, so it contributes no CSS; links keep the app color. */
/* src/styles/color.scss (cnsl-color-theme): secondary text color. */
.cnsl-secondary-text { color: var(--cnsl-secondary-text); }
/* src/styles/toast.scss (toast-theme): failure snackbars in the warn color
   on the toast background (services/toast host, web/src/services/toast). */
.data-e2e-failure .cnsl-snackbar-surface { background-color: var(--cnsl-toast) !important; color: var(--cnsl-warn) !important; }
.data-e2e-failure .cnsl-snackbar-surface * { color: var(--cnsl-warn) !important; }
/* src/styles/codemirror.scss: the "material" CodeMirror theme. CodeMirror 6
   (orgActions/CodeEditor.jsx) uses .cm-* DOM classes and, with the
   classHighlighter, .tok-* token classes; the colors are the console's. */
.cm-s-material .cm-editor { background-color: #00000020; color: #eff; font-size: 14px; border-radius: 4px; border: 1px solid #403e3e; }
html.light-theme .cm-s-material .cm-editor { background-color: #263238; border-color: #00000040; }
.cm-s-material .cm-gutters { background: #263238; color: #546e7a; border: none; }
.cm-s-material .cm-lineNumbers .cm-gutterElement, .cm-s-material .cm-foldGutter .cm-gutterElement { color: #546e7a; }
.cm-s-material .cm-content { caret-color: #fc0; }
.cm-s-material .cm-cursor, .cm-s-material .cm-dropCursor { border-left: 1px solid #fc0; }
.cm-s-material .cm-selectionBackground, .cm-s-material .cm-focused .cm-selectionBackground, .cm-s-material .cm-line::selection, .cm-s-material .cm-line > span::selection { background: rgba(128, 203, 196, 0.2) !important; }
.cm-s-material .cm-activeLine, .cm-s-material .cm-activeLineGutter { background: rgba(0, 0, 0, 0.5); }
.cm-s-material .tok-keyword { color: #c792ea; }
.cm-s-material .tok-operator, .cm-s-material .tok-punctuation { color: #89ddff; }
.cm-s-material .tok-variableName2, .cm-s-material .tok-variableName.tok-local { color: #eff; }
.cm-s-material .tok-variableName { color: #f07178; }
.cm-s-material .tok-variableName.tok-definition, .cm-s-material .tok-function { color: #82aaff; }
.cm-s-material .tok-bool, .cm-s-material .tok-atom { color: #f78c6c; }
.cm-s-material .tok-number { color: #ff5370; }
.cm-s-material .tok-string { color: #c3e88d; }
.cm-s-material .tok-string2 { color: #f07178; }
.cm-s-material .tok-comment { color: #546e7a; }
.cm-s-material .tok-tagName { color: #ff5370; }
.cm-s-material .tok-meta { color: #ffcb6b; }
.cm-s-material .tok-attributeName, .cm-s-material .tok-propertyName { color: #c792ea; }
.cm-s-material .tok-typeName, .cm-s-material .tok-className { color: #decb6b; }
.cm-s-material .tok-invalid { color: rgba(255, 255, 255, 1); background-color: #ff5370; }
.cm-s-material .cm-matchingBracket { text-decoration: underline; color: white !important; }
/* animations.ts: the console's Angular animation triggers as CSS. */
@keyframes anim-toolbar { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes anim-adminline { from { transform: translateY(100%); opacity: 0.5; } to { transform: translateY(0); opacity: 1; } }
@keyframes anim-accounts { from { transform: scale(0.9) translateY(-10%); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes anim-appearfade { from { transform: scale(0.9) translateY(-10%); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes route-enter-add { from { transform: translateX(30vw); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes route-enter-detail { from { transform: translateX(20%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes route-enter-home { from { opacity: 0; } to { opacity: 1; } }

.anim-toolbar { animation: anim-toolbar 0.2s ease-out; }
.anim-adminline { animation: anim-adminline 0.2s ease-out; }
.anim-accounts { animation: anim-accounts 0.1s ease-out; }
.anim-appearfade { animation: anim-appearfade 100ms ease-in-out; }
.route-enter-add { animation: route-enter-add 250ms ease-out; }
.route-enter-detail { animation: route-enter-detail 0.35s ease-in; }
.route-enter-home { animation: route-enter-home 0.35s ease-out; }
.route-anim { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  .anim-toolbar, .anim-adminline, .anim-accounts, .anim-appearfade,
  .route-enter-add, .route-enter-detail, .route-enter-home { animation: none; }
}
/* The one round icon button (mat-icon-button). Every component uses
   .btn-icon; .small / .large only change the size, .warn the colour. */
.btn-icon, .btn.btn-icon {
  --icon-button-size: 2.25rem;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--icon-button-size); height: var(--icon-button-size); min-width: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: inherit;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
/* As a link (docs icons): no underline, and not the link colour, which the
   dark theme's "html.dark-theme a" would otherwise impose. */
a.btn-icon, html.dark-theme a.btn-icon { color: inherit; text-decoration: none; }
.btn-icon:hover:not(:disabled) { background: rgba(127, 127, 127, 0.12); }
.btn-icon:disabled { opacity: 0.4; cursor: default; }
.btn-icon.small { --icon-button-size: 2rem; font-size: 1.1rem; }
.btn-icon.large { --icon-button-size: 2.5rem; }
.btn-icon.warn { color: #dc2626; }
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
.tw\:absolute{position:absolute}.tw\:relative{position:relative}.tw\:inset-0{inset:0}.tw\:inset-2{inset:calc(var(--tw-spacing) * 2)}.tw\:mr-4{margin-right:calc(var(--tw-spacing) * 4)}.tw\:ml-4{margin-left:calc(var(--tw-spacing) * 4)}.tw\:block{display:block}.tw\:flex{display:flex}.tw\:h-full{height:100%}.tw\:max-h-full{max-height:100%}.tw\:w-full{width:100%}.tw\:max-w-125{max-width:calc(var(--tw-spacing) * 125)}.tw\:max-w-full{max-width:100%}.tw\:min-w-0{min-width:0}.tw\:flex-col{flex-direction:column}.tw\:items-center{align-items:center}.tw\:justify-center{justify-content:center}.tw\:justify-end{justify-content:flex-end}.tw\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tw\:overflow-y-scroll{overflow-y:scroll}.tw\:pr-9{padding-right:calc(var(--tw-spacing) * 9)}.tw\:text-\[13px\]{font-size:13px}.tw\:text-gray-500{color:var(--tw-color-gray-500)}:root,:host{--tw-color-gray-500:oklch(55.1% .027 264.364);--tw-spacing:.25rem}
/* Nomen brand layer (visual-parity pass, 2026-10-12). Loaded last.
   Restores the Angular console frame (full-width header/nav, padded outlet,
   one continuous dark surface) and applies the Nomen.sh Stage B palette:
   ink #EDEAE2, cool #7DD3FC, warm #F2C879 (web/public/branding). */
:root { --nomen-ink: #edeae2; --nomen-cool: #7dd3fc; --nomen-warm: #f2c879; --nomen-night: #111827; }

/* 1. Frame: Angular .main-container is full width; the .app 960px box made
      the whole console float in a two-tone void. */
.app.main-container { max-width: none; margin: 0; padding: 0; min-height: 100vh; box-sizing: border-box; }
.main-container > .header-wrapper,
.main-container > .nav,
.main-container > .footer-wrapper { padding-left: 2rem; padding-right: 2rem; }
.main-container > .route-anim { padding: 1rem 2rem 50px; }
.main-container > .route-anim > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
@media only screen and (max-width: 500px) {
  .main-container > .header-wrapper, .main-container > .nav, .main-container > .footer-wrapper,
  .main-container > .route-anim { padding-left: 1rem; padding-right: 1rem; }
}
html.dark-theme body { background: var(--nomen-night); }
html.light-theme body { background: var(--theme-light-background-500, #fafafa); }
.main-container > .nav .nav-row { border-bottom: 0; }
.main-container > .nav .nav-col { margin-bottom: 0; }

/* 2. Brand accent: nav underline + focus ring in Nomen cool. */
html.dark-theme .nav-item { color: var(--nomen-ink); }
html.dark-theme .nav-item:hover { background: #ffffff40; }
html.dark-theme .nav-item.active { background-color: var(--nomen-cool); color: var(--nomen-night); }
html.dark-theme .main-container > .nav { border-bottom-color: rgba(125, 211, 252, 0.18); }
:focus-visible { outline: 2px solid var(--nomen-cool); outline-offset: 2px; }

/* 3. Sortable table headers: the global .btn-link (projects.css, a red danger
      link) leaked into list headers, painting Name/Username/Email/State red. */
th .sort-header, .sort-header { color: inherit; font: inherit; font-weight: 600; text-transform: inherit; letter-spacing: inherit; }

/* 4. Chips/badges were light-only (white chip, light text in dark mode:
      "Owner" and permission chips unreadable). */
html.dark-theme .chip { background: #1f2937; color: var(--nomen-ink); border-color: #374151; }
html.dark-theme .badge-active { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; }
html.dark-theme .badge-locked { background: rgba(255, 59, 91, 0.16); color: #ff8fa3; }
html.dark-theme .badge-type-human { background: rgba(125, 211, 252, 0.14); color: var(--nomen-cool); }
html.dark-theme .badge-type-machine { background: rgba(242, 200, 121, 0.14); color: var(--nomen-warm); }

/* 5. Surfaces: cards/tables on the Angular night palette instead of grey-on-navy. */
html.dark-theme .card, html.dark-theme table, html.dark-theme .cnsl-filter-wrapper { background: #1a2333; border-color: #2a3446; }
html.dark-theme th { background: #202a3c; }
html.dark-theme th, html.dark-theme td { border-color: #2a3446; }

/* 6. Onboarding progress (native <progress> rendered as an empty grey pill). */
.progress-bar .progress { appearance: none; -webkit-appearance: none; height: 6px; border: 0; border-radius: 999px; overflow: hidden;
  background: var(--progress-track-color, #ffffff20); vertical-align: middle; }
.progress-bar .progress::-webkit-progress-bar { background: var(--progress-track-color, #ffffff20); border-radius: 999px; }
.progress-bar .progress::-webkit-progress-value { background: linear-gradient(90deg, var(--nomen-cool), var(--nomen-warm)); border-radius: 999px; }
.progress-bar .progress::-moz-progress-bar { background: linear-gradient(90deg, var(--nomen-cool), var(--nomen-warm)); }

/* 7. Sign-in: was a #fafafa light strip around a dark card, black-54% labels
      (invisible on dark) and the repo name "nomen-react-go" as the title. */
main.app.auth-page { max-width: none; margin: 0; padding: 0 1rem; min-height: 100vh; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; background: transparent; color: inherit; }
html.dark-theme main.app.auth-page {
  background-image: radial-gradient(circle at 85% 10%, rgba(125, 211, 252, 0.12), transparent 40%),
              radial-gradient(circle at 10% 90%, rgba(242, 200, 121, 0.08), transparent 40%); }
.auth-page .auth-card { width: min(420px, 100%); box-sizing: border-box; padding: 2rem 2rem 1.5rem; border-radius: 12px; }
html.dark-theme .auth-page .auth-card { background: rgba(26, 35, 51, 0.92); border: 1px solid rgba(125, 211, 252, 0.22);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }
.auth-card h1.auth-brand { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.25rem; }
.auth-brand .auth-mark { width: 44px; height: 44px; }
.auth-brand .auth-wordmark { height: 30px; width: auto; }
.auth-brand .light-only { display: none; }
html.light-theme .auth-brand .dark-only { display: none; }
html.light-theme .auth-brand .light-only { display: inline; }
.auth-page .auth-card h2 { font-size: 1.25rem; margin: 0 0 1.25rem; }
.auth-page .form { max-width: none; }
.auth-page .cnsl-form-field, .auth-page .cnsl-rel, .auth-page input { width: 100%; box-sizing: border-box; }
html.dark-theme .auth-page .cnsl-label-wrapper { color: #a8b3c4; }
.auth-page .form-actions .btn-primary { width: 100%; padding: 0.6rem; font-weight: 700; }
/* the signed-in name above the password / passkey step, with the way back */
.auth-page .login-user { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; font-weight: 600; overflow-wrap: anywhere; }
/* dark primary of the label policy is a light tint (#a5b4fc): dark text keeps AA contrast */
html.dark-theme .auth-page .btn-primary { background: var(--brand-primary, #5469d4); border-color: var(--brand-primary, #5469d4); color: #0b1020; }
.auth-page .login-links { color: #8b96a8; }.auth-page .passkey-init-user { flex-direction: column; align-items: flex-start; gap: 0.15rem; }