/* Intelligent Forms stylesheet bundle: administration.css. Keep feature-specific rules grouped under their source banner. */

/* ==========================================================================
   SOURCE: notification-templates.css
   ========================================================================== */
/* Notification template-specific styles. Shared user/table UI lives in users-admin.css and intelligent-forms.css. */
.notification-template-avatar {
  background: color-mix(in srgb, var(--if-secondary, #0a7cb4), white 90%);
  color: var(--if-secondary, #0a7cb4);
  font-size: 0.78rem;
}

.notification-template-description {
  max-width: 390px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-default-role {
  margin-left: 5px;
}

.notification-updated-by {
  margin-top: 3px;
  font-size: 0.875rem;
}

.notification-template-message {
  margin: 0 0 14px;
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--if-secondary, #0a7cb4), white 68%);
  border-radius: 8px;
  background: var(--if-secondary-soft, #f2f8fb);
  color: var(--if-text-muted, #64748b);
  font-size: 0.875rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .notification-template-description {
    max-width: 260px;
  }
}

/* ============================================================
   EDITOR HEADER ACTIONS
   ============================================================ */

.notification-editor-header-actions {
  display: flex;
  align-items: center;

  gap: 8px;

  flex-wrap: wrap;
}

/* ============================================================
   EDITOR GRID
   ============================================================ */

.notification-editor-grid {
  display: grid;

  grid-template-columns:
    minmax(280px, 340px)
    minmax(0, 1fr);

  align-items: start;

  gap: 18px;
}

.notification-message-card {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.notification-audit-card {
  grid-column: 1;
}

/* ============================================================
   EDITOR CARDS
   ============================================================ */

.notification-editor-card {
  position: relative;

  min-width: 0;

  overflow: hidden;

  border: 1px solid var(--if-border, #e2e8f0);

  border-radius: var(--if-radius-card, 12px);

  background: var(--if-surface, #ffffff);

  box-shadow: var(--if-shadow-card, 0 4px 18px rgba(4, 30, 66, 0.06));
}

.notification-editor-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 3px;

  background: linear-gradient(
    90deg,
    var(--if-primary, #041e42),
    var(--if-secondary, #0a7cb4)
  );
}

/* ============================================================
   CARD HEADERS
   ============================================================ */

.notification-card-heading {
  padding: 17px 18px 14px;

  border-bottom: 1px solid var(--if-border, #e2e8f0);

  background: var(--if-surface-subtle, #fafbfc);
}

.notification-card-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;
}

.notification-card-heading .if-eyebrow {
  margin: 0 0 3px;
}

.notification-card-heading h2 {
  margin: 0;

  color: var(--if-primary, #041e42);

  font-size: 1.05rem;
  font-weight: 780;

  line-height: 1.3;
}

/* ============================================================
   EDITOR FIELDS
   ============================================================ */

.notification-editor-fields {
  display: grid;

  grid-template-columns: 1fr;

  gap: 15px;

  padding: 18px;
}

.notification-message-card .notification-editor-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.notification-field-full {
  grid-column: 1 / -1;
}

.notification-editor-fields label {
  min-width: 0;
}

.notification-editor-fields label > span,
.notification-field-label {
  display: block;

  margin-bottom: 5px;

  color: var(--if-text-muted, #64748b);

  font-size: 0.875rem;
  font-weight: 800;

  letter-spacing: 0.04em;

  text-transform: uppercase;
}

.notification-editor-fields label > span small {
  color: var(--if-slate-400, #94a3b8);

  font-size: 0.875rem;
  font-weight: 650;

  letter-spacing: normal;

  text-transform: none;
}

.notification-editor-fields .if-input {
  width: 100%;

  min-height: var(--if-control-height, 36px);

  padding: 8px 10px;

  border: 1px solid var(--if-border-strong, #cbd5e1);

  border-radius: var(--if-radius-control, 8px);

  background: var(--if-surface, #ffffff);

  color: var(--if-text, #334155);

  font: inherit;
  font-size: 0.875rem;

  outline: none;

  transition:
    border-color 130ms ease,
    box-shadow 130ms ease;
}

.notification-editor-fields .if-input:focus {
  border-color: var(--if-secondary, #0a7cb4);

  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--if-secondary, #0a7cb4), transparent 87%);
}

.notification-description {
  min-height: 76px !important;

  resize: vertical;
}

.notification-body-editor {
  min-height: 285px !important;

  resize: vertical;

  font-family:
    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;

  font-size: 0.875rem !important;

  line-height: 1.55;
}

.if-rich-editor {
  overflow: hidden;
  border: 1px solid var(--if-border, #cbd5e1);
  border-radius: 10px;
  background: #fff;
}

.if-rich-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px;
  border-bottom: 1px solid var(--if-border, #e2e8f0);
  background: #f8fafc;
}

.if-rich-editor-toolbar button,
.if-rich-editor-format {
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #334155;
  background: #fff;
}

.if-rich-editor-source-toggle {
  margin-left: auto;
}

.if-rich-editor-surface {
  min-height: 285px;
  padding: 18px;
  color: #1f2937;
  line-height: 1.6;
  outline: none;
}

.if-rich-editor-surface:focus {
  box-shadow: inset 0 0 0 2px var(--if-secondary, #0a7cb4);
}
.if-rich-editor-surface:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
}
.if-rich-editor-surface img {
  max-width: 100%;
  height: auto;
}
.if-rich-editor .notification-body-editor {
  border: 0 !important;
  border-radius: 0 !important;
}

.if-rich-editor-surface .document-page-break {
  height: 0;
  margin: 28px 0;
  border-top: 2px dashed #94a3b8;
  position: relative;
}

.if-rich-editor-surface .document-page-break::before {
  content: "Page break";
  position: absolute;
  left: 50%;
  top: 0;
  padding: 2px 9px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  color: #64748b;
  background: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.notification-text-editor {
  min-height: 145px !important;

  resize: vertical;

  font-family:
    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;

  font-size: 0.875rem !important;

  line-height: 1.55;
}

/* ============================================================
   ACTIVE CHECKBOX
   ============================================================ */

.notification-check-row {
  display: flex !important;
  align-items: center;

  gap: 8px;

  min-height: 36px;

  padding: 8px 10px;

  border: 1px solid var(--if-border, #e2e8f0);

  border-radius: var(--if-radius-control, 8px);

  background: var(--if-surface-subtle, #fafbfc);
}

.notification-check-row input {
  width: 15px;
  height: 15px;

  flex: 0 0 15px;

  accent-color: var(--if-primary, #041e42);
}

.notification-check-row > span {
  margin: 0 !important;

  color: var(--if-text, #334155) !important;

  font-size: 0.875rem !important;
  font-weight: 700 !important;

  letter-spacing: normal !important;

  text-transform: none !important;
}

/* ============================================================
   DEFAULT NOTE
   ============================================================ */

.notification-default-note {
  display: grid;
  gap: 5px;
  padding: 10px 11px;

  border: 1px solid #e7d49d;

  border-radius: var(--if-radius-control, 8px);

  background: var(--if-warning-bg, #fff8e6);

  color: var(--if-warning, #805a00);

  font-size: 0.875rem;
  line-height: 1.45;
}

/* ============================================================
   MERGE TOKENS
   ============================================================ */

.notification-token-list {
  display: flex;

  gap: 6px;

  flex-wrap: wrap;
}

.notification-token {
  min-height: 28px;

  padding: 0 8px;

  border: 1px solid color-mix(in srgb, var(--if-secondary, #0a7cb4), white 62%);

  border-radius: 999px;

  background: var(--if-secondary-soft, #f2f8fb);

  color: var(--if-primary, #041e42);

  font:
    700 0.8rem ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  cursor: pointer;

  transition:
    border-color 130ms ease,
    background-color 130ms ease,
    color 130ms ease;
}

.notification-token:hover {
  border-color: var(--if-secondary, #0a7cb4);

  background: color-mix(in srgb, var(--if-secondary, #0a7cb4), white 88%);

  color: var(--if-secondary, #0a7cb4);
}

.notification-token-help {
  margin-top: 7px;

  color: var(--if-slate-400, #94a3b8);

  font-size: 0.875rem;
}

/* ============================================================
   AUDIT
   ============================================================ */

.notification-audit-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0;

  margin: 0;

  padding: 0;
}

.notification-audit-grid > div {
  min-width: 0;

  padding: 13px 15px;

  border-bottom: 1px solid var(--if-border, #e2e8f0);
}

.notification-audit-grid > div:nth-child(odd) {
  border-right: 1px solid var(--if-border, #e2e8f0);
}

.notification-audit-grid > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.notification-audit-grid dt {
  margin: 0;

  color: var(--if-slate-400, #94a3b8);

  font-size: 0.875rem;
  font-weight: 800;

  letter-spacing: 0.04em;

  text-transform: uppercase;
}

.notification-audit-grid dd {
  margin: 4px 0 0;

  overflow: hidden;

  color: var(--if-text-muted, #64748b);

  font-size: 0.875rem;
  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* ============================================================
   MODAL BACKDROP
   ============================================================ */

.notification-modal-backdrop {
  position: fixed;

  inset: 0;

  z-index: 3000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  background: rgba(15, 23, 42, 0.55);

  backdrop-filter: blur(2px);
}

/* ============================================================
   CONFIRM MODAL
   ============================================================ */

.notification-confirm-modal {
  width: min(480px, 100%);

  overflow: hidden;

  padding: 0;

  border: 1px solid var(--if-border, #e2e8f0);

  border-radius: var(--if-radius-card, 12px);

  background: var(--if-surface, #ffffff);

  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.notification-confirm-modal h2 {
  margin: 0;

  padding: 18px 20px 7px;

  color: var(--if-primary, #041e42);

  font-size: 0.875rem;
}

.notification-confirm-modal p {
  margin: 0;

  padding: 0 20px 18px;

  color: var(--if-text-muted, #64748b);

  font-size: 0.875rem;
  line-height: 1.55;
}

.notification-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 8px;

  margin: 0;

  padding: 12px 16px;

  border-top: 1px solid var(--if-border, #e2e8f0);

  background: var(--if-surface-subtle, #fafbfc);
}

.notification-danger-button {
  border-color: var(--if-danger, #b42318) !important;

  background: var(--if-danger, #b42318) !important;

  color: #ffffff !important;
}

/* ============================================================
   PREVIEW MODAL
   ============================================================ */

.notification-preview-modal {
  width: min(720px, calc(100vw - 48px));

  max-height: min(84dvh, 820px);

  display: flex;
  flex-direction: column;

  min-height: 0;

  overflow: hidden;

  border: 1px solid var(--if-border, #e2e8f0);

  border-radius: var(--if-radius-card, 12px);

  background: var(--if-surface, #ffffff);

  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.notification-insert-tools {
  overflow: hidden;
  border: 1px solid var(--if-border, #e2e8f0);
  border-radius: 10px;
  background: var(--if-surface-subtle, #f8fafc);
}

.notification-insert-tools > summary {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  color: var(--if-primary, #041e42);
  cursor: pointer;
  list-style: none;
}

.notification-insert-tools > summary::-webkit-details-marker {
  display: none;
}

.notification-insert-tools > summary:hover {
  background: var(--if-secondary-soft, #f2f8fb);
}

.notification-insert-tools > summary span:first-child {
  display: grid;
  gap: 2px;
}

.notification-insert-tools > summary strong {
  font-size: 0.95rem;
  font-weight: 760;
}

.notification-insert-tools > summary small {
  color: var(--if-text-muted, #64748b);
  font-size: 0.875rem;
}

.notification-insert-tools-chevron {
  font-size: 1.1rem;
  transition: transform 150ms ease;
}

.notification-insert-tools[open] .notification-insert-tools-chevron {
  transform: rotate(180deg);
}

.notification-insert-tools-body {
  display: grid;
  gap: 18px;
  padding: 16px;
  border-top: 1px solid var(--if-border, #e2e8f0);
  background: #ffffff;
}

.notification-restore-layout {
  width: fit-content;
  min-height: 36px;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--if-primary, #041e42);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 750;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.notification-restore-layout:hover {
  color: var(--if-secondary, #0a7cb4);
}

.notification-preview-modal-document {
  width: min(1120px, calc(100vw - 32px));
  max-height: 94dvh;
}

.notification-document-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--if-border, #e2e8f0);
  background: #fff;
  color: var(--if-text, #334155);
  font-size: 0.78rem;
  font-weight: 700;
}

.notification-document-preview-toolbar small {
  color: var(--if-text-muted, #64748b);
  font-size: 0.72rem;
  font-weight: 500;
}

.notification-document-preview-body {
  padding: 0;
  overflow: hidden;
  background: #dfe4ea;
}

.notification-document-preview-frame {
  display: block;
  width: 100%;
  height: min(78dvh, 900px);
  border: 0;
  background: #dfe4ea;
}

.notification-preview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  flex: 0 0 auto;

  padding: 17px 18px 14px;

  border-bottom: 1px solid var(--if-border, #e2e8f0);

  background: var(--if-surface-subtle, #fafbfc);
}

.notification-preview-header h2 {
  margin: 2px 0 0;

  color: var(--if-primary, #041e42);

  font-size: 0.875rem;
  font-weight: 780;
}

.notification-modal-close {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  flex: 0 0 32px;

  padding: 0;

  border: 1px solid var(--if-border-strong, #cbd5e1);

  border-radius: var(--if-radius-control, 8px);

  background: var(--if-surface, #ffffff);

  color: var(--if-primary, #041e42);

  font: inherit;
  font-size: 1rem;

  cursor: pointer;
}

.notification-modal-close:hover {
  border-color: var(--if-secondary, #0a7cb4);

  color: var(--if-secondary, #0a7cb4);
}

.notification-preview-body {
  flex: 1 1 auto;

  min-height: 0;

  overflow-y: auto;

  padding: 24px;

  color: var(--if-text, #334155);

  font-size: 0.875rem;
  line-height: 1.65;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {
  .notification-editor-grid {
    grid-template-columns: 1fr;
  }

  .notification-message-card,
  .notification-audit-card {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 700px) {
  .notification-document-preview-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
  .notification-document-preview-frame {
    height: 75dvh;
  }
}

@media (max-width: 820px) {
  .notification-template-page .if-table-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .notification-template-page .if-table-count {
    justify-self: start;
  }

  .notification-template-page .if-data-table {
    min-width: 820px;
  }

  .notification-message-card .notification-editor-fields {
    grid-template-columns: 1fr;
  }

  .notification-field-full {
    grid-column: auto;
  }
}

@media (max-width: 620px) {
  .notification-editor-header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .notification-editor-header-actions .if-btn {
    width: 100%;
  }

  .notification-audit-grid {
    grid-template-columns: 1fr;
  }

  .notification-audit-grid > div,
  .notification-audit-grid > div:nth-child(odd) {
    border-right: 0;

    border-bottom: 1px solid var(--if-border, #e2e8f0);
  }

  .notification-audit-grid > div:last-child {
    border-bottom: 0;
  }

  .notification-modal-backdrop {
    padding: 12px;
  }

  .notification-preview-modal {
    width: 100%;

    max-height: calc(100dvh - 24px);
  }

  .notification-modal-actions {
    align-items: stretch;

    flex-direction: column-reverse;
  }

  .notification-modal-actions .if-button {
    width: 100%;
  }
}

.notification-system-readonly {
  display: flex;
  align-items: center;

  min-height: 38px;

  background: var(--if-surface-subtle, #f8fafc);
  color: var(--if-text-muted, #64748b);

  cursor: default;
}

.notification-field-help {
  display: block;

  margin-top: 5px;

  color: var(--if-text-muted, #64748b);

  font-size: 0.875rem;
  line-height: 1.45;
}

.notification-system-active {
  opacity: 0.85;
}

.notification-default-note strong {
  color: var(--if-primary, #041e42);
}

.notification-default-note span {
  line-height: 1.5;
}

/* ==========================================================================
   SOURCE: users-admin.css
   ========================================================================== */
/* ============================================================
   INTELLIGENT FORMS -UNIFIED UI
   users-admin.css
   ============================================================ */

/* ============================================================
   USERS & ROLES
   ============================================================ */

.user-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 320px) auto 1fr;
  align-items: center;
  gap: 20px;

  margin-bottom: 16px;
  padding: 14px 18px;

  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-card);

  background: var(--if-surface);

  box-shadow: var(--if-shadow-card);
}

/* ============================================================
   SEARCH
   ============================================================ */

.user-search {
  position: relative;

  height: 42px;

  display: flex;
  align-items: center;

  border: 1px solid var(--if-border-strong);
  border-radius: var(--if-radius-control);

  background: var(--if-surface);
}

.user-search > span {
  position: absolute;
  left: 13px;

  color: var(--if-primary, #041e42);

  font-size: 1rem;

  pointer-events: none;
}

.user-search input {
  width: 100%;
  height: 100%;

  padding: 0 12px 0 39px;

  border: 0;
  border-radius: var(--if-radius-control);

  background: transparent;

  color: var(--if-text);

  font-size: 0.875rem;

  outline: none;
}

.user-search:focus-within {
  border-color: var(--if-secondary, #0a7cb4);

  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--if-secondary, #0a7cb4), transparent 87%);
}

/* ============================================================
   FILTERS
   ============================================================ */

.user-filter-group {
  display: flex;
  align-items: center;
  gap: 7px;
}

.user-filter {
  min-height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 0 14px;

  border: 1px solid #d9e0e8;
  border-radius: 999px;

  background: #eef2f6;

  color: var(--if-primary, #041e42);

  font-size: 0.875rem;
  font-weight: 700;

  white-space: nowrap;

  cursor: pointer;

  transition:
    background-color 130ms ease,
    border-color 130ms ease,
    color 130ms ease,
    box-shadow 130ms ease;
}

.user-filter:hover {
  background: #e5ebf1;

  border-color: #bcc8d5;
}

.user-filter > span {
  min-width: 20px;

  padding: 2px 6px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.75);

  font-size: 0.875rem;

  text-align: center;
}

.user-filter-active {
  border-color: var(--if-primary, #041e42);

  background: var(--if-primary, #041e42);

  color: var(--if-surface);

  box-shadow: 0 3px 8px rgba(4, 30, 66, 0.18);
}

.user-filter-active:hover {
  background: var(--if-primary, #041e42);

  color: var(--if-surface);
}

.user-count {
  justify-self: end;

  color: var(--if-text-muted);

  font-size: 0.7rem;
  font-weight: 650;

  white-space: nowrap;
}

/* ============================================================
   TABLE CONTAINER
   ============================================================ */

.user-table-card {
  overflow: hidden;

  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-card);

  background: var(--if-surface);

  box-shadow: var(--if-shadow-card);
}

.user-table-wrapper {
  overflow-x: auto;
}

/* ============================================================
   TABLE
   ============================================================ */

.user-table {
  width: 100%;

  border-collapse: collapse;

  background: var(--if-surface);
}

.user-table thead {
  background: linear-gradient(
    90deg,
    var(--if-primary, #041e42),
    color-mix(in srgb, var(--if-primary, #041e42), white 10%)
  );
}

.user-table th {
  height: 52px;

  padding: 0 18px;

  color: var(--if-surface);

  font-size: 0.875rem;
  font-weight: 750;

  letter-spacing: 0.02em;

  text-align: left;

  white-space: nowrap;
}

.user-table td {
  padding: 15px 18px;

  border-bottom: 1px solid var(--if-border);

  color: var(--if-slate-700);

  font-size: 0.875rem;

  vertical-align: middle;
}

.user-table tbody tr {
  transition: background-color 120ms ease;
}

.user-table tbody tr:hover {
  background: var(--if-surface-subtle);
}

.user-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ============================================================
   USER IDENTITY
   ============================================================ */

.user-identity-cell {
  display: flex;
  align-items: center;

  gap: 11px;
}

.user-avatar {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  flex: 0 0 38px;

  border-radius: 50%;

  background: linear-gradient(
    135deg,
    var(--if-secondary, #0a7cb4),
    color-mix(in srgb, var(--if-secondary, #0a7cb4), black 16%)
  );

  color: var(--if-surface);

  font-size: 0.875rem;
  font-weight: 800;

  letter-spacing: 0.03em;
}

.user-name {
  color: var(--if-text);

  font-size: 0.875rem;
  font-weight: 750;
}

.user-email {
  margin-top: 3px;

  color: var(--if-text-muted);

  font-size: 0.875rem;
}

/* ============================================================
   ROLE BADGES
   ============================================================ */

.user-role {
  display: inline-flex;
  align-items: center;

  margin: 2px 4px 2px 0;
  padding: 5px 10px;

  border-radius: 999px;

  font-size: 0.875rem;
  font-weight: 750;

  white-space: nowrap;
}

.user-role-admin {
  border: 1px solid #e7d49d;

  background: #fff5d9;

  color: #805a00;
}

.user-role-system {
  border: 1px solid #bed0f4;

  background: #ecf2ff;

  color: #3156a6;
}

.user-role-general {
  border: 1px solid #b7e5ce;

  background: #eaf8f1;

  color: #18794e;
}

/* ============================================================
   STATUS
   ============================================================ */

.user-status {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  font-size: 0.875rem;
  font-weight: 700;

  white-space: nowrap;
}

.user-status > span {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;
}

.user-status-active {
  color: #18794e;
}

.user-status-active > span {
  background: #26a269;

  box-shadow: 0 0 0 3px rgba(38, 162, 105, 0.1);
}

.user-status-inactive {
  color: var(--if-danger);
}

.user-status-inactive > span {
  background: #d64545;
}

.user-muted {
  color: var(--if-slate-400);
}

/* ============================================================
   ACTIONS
   ============================================================ */

.user-actions-heading {
  text-align: right !important;
}

.user-actions {
  display: flex;
  justify-content: flex-end;

  gap: 7px;
}

.user-action-button {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid var(--if-border-strong);
  border-radius: 7px;

  background: var(--if-surface);

  color: var(--if-primary, #041e42);

  font-size: 0.875rem;

  cursor: pointer;

  transition:
    border-color 130ms ease,
    background-color 130ms ease,
    color 130ms ease,
    transform 130ms ease;
}

.user-action-button:hover {
  border-color: var(--if-primary, #041e42);

  background: var(--if-primary, #041e42);

  color: var(--if-surface);

  transform: translateY(-1px);
}

/* ============================================================
   EMPTY / LOADING
   ============================================================ */

.user-empty-state {
  min-height: 300px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 40px;

  text-align: center;
}

.user-empty-icon {
  width: 56px;
  height: 56px;

  display: grid;
  place-items: center;

  margin-bottom: 14px;

  border-radius: 50%;

  background: color-mix(in srgb, var(--if-secondary, #0a7cb4), white 90%);

  color: var(--if-secondary, #0a7cb4);

  font-size: 1.2rem;
}

.user-empty-state h2 {
  margin: 0;

  color: var(--if-primary, #041e42);

  font-size: 1rem;
  font-weight: 750;
}

.user-empty-state p {
  margin: 7px 0 0;

  color: var(--if-text-muted);

  font-size: 0.875rem;
}

/* ============================================================
   STATUS MESSAGE
   ============================================================ */

.user-status-message {
  margin-bottom: 16px;

  padding: 11px 14px;

  border: 1px solid #b7e5ce;
  border-radius: var(--if-radius-control);

  background: #ecfdf3;

  color: #18794e;

  font-size: 0.875rem;
  font-weight: 650;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {
  .user-toolbar {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .user-count {
    justify-self: start;
  }
}

@media (max-width: 700px) {
  .user-filter-group {
    flex-wrap: wrap;
  }
}

/* ============================================================
   USER EDITOR
   ============================================================ */

.user-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;

  margin-top: 28px;
  align-items: stretch;
  min-width: 0;
}

.user-editor-card,
.user-role-guide {
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-card);

  background: var(--if-surface);

  box-shadow: var(--if-shadow-card);

  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* User Edit participates in the page's single scroll flow. Its cards must not
   become competing scroll containers when UI scaling increases their height. */
.user-editor-layout > .user-editor-card {
  overflow: visible;
  overscroll-behavior: auto;
}

.user-editor-layout > .user-role-guide {
  min-width: 0;
  overscroll-behavior: auto;
}

/* User Edit uses the application shell as its only vertical scrolling surface.
   Standalone cards below the two-column account area must not capture wheel
   input when their contents do not provide an independent scroll range. */
.user-edit-page .user-editor-card,
.user-edit-page .user-role-guide {
  overflow: visible;
  overscroll-behavior: auto;
}

.user-created-credentials {
  display: grid;
  gap: 12px;
  padding: 24px;
}

.user-created-credentials > strong {
  color: var(--if-success, #18794e);
  font-size: 1rem;
}

.user-created-credentials > p {
  margin: 0 0 4px;
  color: var(--if-text-muted);
  line-height: 1.55;
}

.user-created-credentials > label {
  margin-bottom: -6px;
  color: var(--if-text-strong);
  font-size: 0.875rem;
  font-weight: 700;
}

.user-created-password {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* ============================================================
   EDITOR HEADER
   ============================================================ */

.user-editor-card-header {
  padding: 22px 24px;

  border-bottom: 1px solid var(--if-border);
}

.user-editor-card-header h2 {
  margin: 0;

  color: var(--if-primary, #041e42);

  font-size: 1rem;
  font-weight: 750;
}

.user-editor-card-header p {
  margin: 6px 0 0;

  color: var(--if-text-muted);

  font-size: 0.875rem;
  line-height: 1.5;
}

/* ============================================================
   FORM
   ============================================================ */

.user-editor-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;

  padding: 24px;
}

.user-editor-field {
  min-width: 0;
}

.user-editor-field label {
  display: block;

  margin-bottom: 7px;

  color: var(--if-text-strong);

  font-size: 0.875rem;
  font-weight: 700;
}

.user-editor-field label > span {
  color: var(--if-danger);
}

.user-editor-input {
  width: 100%;
  height: 43px;

  padding: 0 12px;

  border: 1px solid var(--if-border-strong);
  border-radius: var(--if-radius-control);

  background: var(--if-surface);

  color: var(--if-text);

  font-size: 0.875rem;

  outline: none;

  transition:
    border-color 130ms ease,
    box-shadow 130ms ease;
}

.user-editor-input:focus {
  border-color: var(--if-secondary, #0a7cb4);

  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--if-secondary, #0a7cb4), transparent 87%);
}

.user-editor-help {
  margin-top: 6px;

  color: var(--if-text-muted);

  font-size: 0.875rem;
  line-height: 1.45;
}

/* Validation */

.user-editor-field .validation-message {
  display: block;

  margin-top: 6px;

  color: var(--if-danger);

  font-size: 0.875rem;
  font-weight: 650;
}

/* ============================================================
   ACTIVE TOGGLE
   ============================================================ */

.user-editor-toggle-row {
  grid-column: 1 / -1;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding: 16px;

  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-control);

  background: var(--if-surface-subtle);
}

.user-editor-toggle-title {
  color: var(--if-text);

  font-size: 0.875rem;
  font-weight: 750;
}

.user-toggle {
  position: relative;

  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
  flex-shrink: 0;

  margin-block: 0;

  cursor: pointer;
  line-height: 1;
}

.user-toggle input {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;

  margin: 0 !important;
  flex: none !important;

  opacity: 0 !important;
}

.user-toggle-track {
  position: relative;

  width: 42px;
  height: 24px;
  min-width: 42px;
  min-height: 24px;
  max-height: 24px;
  flex: 0 0 42px;
  flex-shrink: 0;

  display: block;

  border-radius: 999px;

  background: var(--if-border-strong);

  transition: background-color 150ms ease;
}

.user-toggle-thumb {
  position: absolute;

  top: 3px;
  left: 3px;

  width: 18px;
  height: 18px;

  border-radius: 50%;

  background: var(--if-surface);

  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);

  transition: transform 150ms ease;
}

.user-toggle input:checked + .user-toggle-track {
  background: var(--if-secondary, #0a7cb4);
}

.user-toggle input:checked + .user-toggle-track .user-toggle-thumb {
  transform: translateX(18px);
}

/* ============================================================
   FORM ACTIONS
   ============================================================ */

.user-editor-actions {
  grid-column: 1 / -1;

  display: flex;
  justify-content: flex-end;

  gap: 9px;

  padding-top: 5px;
}

/* ============================================================
   ERROR PANEL
   ============================================================ */

.user-editor-errors {
  margin: 20px 24px 0;
  padding: 13px 15px;

  border: 1px solid #f4c7c3;
  border-radius: var(--if-radius-control);

  background: #fef3f2;

  color: var(--if-danger);

  font-size: 0.875rem;
}

.user-editor-errors strong {
  display: block;

  margin-bottom: 6px;
}

.user-editor-errors ul {
  margin: 0;
  padding-left: 18px;
}

/* ============================================================
   ROLE GUIDE
   ============================================================ */

.user-role-guide {
  overflow: hidden;
}

.user-role-guide-header {
  padding: 22px;

  border-bottom: 1px solid var(--if-border);
}

.user-role-guide-header h2 {
  margin: 3px 0 0;

  color: var(--if-primary, #041e42);

  font-size: 1rem;
  font-weight: 750;
}

.user-role-guide-header > p:last-child {
  margin: 7px 0 0;

  color: var(--if-text-muted);

  font-size: 0.875rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.user-role-guide-item {
  padding: 19px 22px;

  border-bottom: 1px solid var(--if-border);
}

.user-role-guide-item:last-child {
  border-bottom: 0;
}

.user-role-guide-title {
  margin-bottom: 9px;
}

.user-role-guide-item p {
  margin: 0;

  color: var(--if-text-muted);

  font-size: 0.875rem;
  line-height: 1.5;
}

.user-role-guide-item ul {
  margin: 11px 0 0;
  padding-left: 17px;

  color: var(--if-slate-700);

  font-size: 0.875rem;
  line-height: 1.75;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {
  .user-editor-layout {
    grid-template-columns: 1fr;
  }

  .user-role-guide {
    order: -1;
  }
}

@media (max-width: 650px) {
  .user-editor-form {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   DELETE ACTIONS
   ============================================================ */

.user-action-delete {
  color: var(--if-danger);
}

.user-action-delete:hover:not(:disabled) {
  border-color: #f0c7c3;
  background: #fff5f4;
  color: var(--if-danger);
}

.user-action-delete:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.group-delete-action {
  border: 0;
  background: transparent;
  color: var(--if-danger);
  cursor: pointer;
  font: inherit;
}

.group-delete-action:hover {
  text-decoration: underline;
}

.user-delete-confirm,
.group-delete-confirm {
  border-color: var(--if-danger);
  background: var(--if-danger);
  color: var(--if-surface);
}

.user-delete-confirm:hover:not(:disabled),
.group-delete-confirm:hover:not(:disabled) {
  border-color: #912018;
  background: #912018;
}

.user-delete-confirm:disabled,
.group-delete-confirm:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.user-delete-modal,
.group-delete-modal {
  max-width: 560px;
}

/* ============================================================
   USER EDIT -DELETE USER
   Add to users-admin.css
   ============================================================ */

.user-delete-card {
  border-color: color-mix(in srgb, var(--if-danger), var(--if-border) 72%);
}

.user-delete-card .user-editor-card-header {
  border-bottom-color: color-mix(
    in srgb,
    var(--if-danger),
    var(--if-border) 78%
  );

  background: color-mix(in srgb, var(--if-danger-bg), var(--if-surface) 42%);
}

.user-delete-card .if-eyebrow {
  color: var(--if-danger);
}

.user-delete-body {
  padding: 20px 24px 24px;
}

.user-delete-warning {
  padding: 12px 14px;

  border: 1px solid #f0c7c3;
  border-radius: var(--if-radius-control);

  background: var(--if-danger-bg);
}

.user-delete-warning strong {
  color: var(--if-danger);

  font-size: 0.875rem;
  font-weight: 760;
}

.user-delete-warning p {
  margin: 5px 0 0;

  color: var(--if-text-muted);

  font-size: 0.875rem;

  line-height: 1.5;
}

.user-delete-actions {
  display: flex;
  justify-content: flex-end;

  margin-top: 16px;
}

.user-delete-button {
  min-height: 36px;

  padding: 8px 14px;

  border: 1px solid var(--if-danger);
  border-radius: var(--if-radius-control);

  background: var(--if-danger);
  color: var(--if-surface);

  font: inherit;
  font-size: 0.875rem;
  font-weight: 750;

  cursor: pointer;
}

.user-delete-button:hover:not(:disabled) {
  border-color: #912018;

  background: #912018;
}

.user-delete-button:disabled {
  cursor: not-allowed;

  opacity: 0.55;
}

.user-delete-confirmation {
  display: grid;

  gap: 16px;

  margin-top: 16px;
  padding: 16px;

  border: 1px solid #f0c7c3;
  border-radius: var(--if-radius-control);

  background: var(--if-surface-subtle);
}

.user-delete-confirmation h3 {
  margin: 0;

  color: var(--if-danger);

  font-size: 0.875rem;
}

.user-delete-confirmation p {
  margin: 5px 0 0;

  color: var(--if-text-muted);

  font-size: 0.875rem;
}

@media (max-width: 650px) {
  .user-delete-actions,
  .user-delete-confirmation .user-editor-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .user-delete-button {
    width: 100%;
  }
}

/* ============================================================
   USER EDIT -NOTIFICATION PREFERENCES
   Add to the stylesheet that currently owns the UserEdit styles.
   ============================================================ */

.user-notification-group {
  border: 1px solid var(--if-border, #e2e8f0);
  border-radius: var(--if-radius-card, 14px);
  overflow: hidden;
  background: var(--if-surface, #ffffff);
}

.user-notification-group + .user-notification-group {
  margin-top: 16px;
}

.user-notification-group-heading {
  padding: 14px 16px;
  border-bottom: 1px solid var(--if-border, #e2e8f0);
  background: var(--if-surface-subtle, #fafbfc);
}

.user-notification-group-heading h3 {
  margin: 0;
  color: var(--if-primary, #041e42);
  font-size: 0.875rem;
  font-weight: 780;
}

.user-notification-group-heading p {
  margin: 4px 0 0;
  color: var(--if-text-muted, #64748b);
  font-size: 0.875rem;
  line-height: 1.45;
}

.user-notification-group .user-editor-toggle-row {
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
}

.user-notification-group .user-editor-toggle-row + .user-editor-toggle-row {
  border-top: 1px solid var(--if-border, #e2e8f0);
}

.user-notification-note {
  display: grid;
  gap: 3px;
  margin-top: 16px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--if-secondary, #0a7cb4), white 68%);
  border-radius: var(--if-radius-control, 8px);
  background: var(--if-secondary-soft, #f2f8fb);
  color: var(--if-text-muted, #64748b);
  font-size: 0.875rem;
  line-height: 1.45;
}

.user-notification-note strong {
  color: var(--if-primary, #041e42);
  font-size: 0.875rem;
}

/* ============================================================
   USER PROFILE -SSO MANAGED IDENTITY
   ============================================================ */

.user-editor-input:disabled {
  background: var(--if-slate-50, #f8fafc);
  color: var(--if-text-muted, #64748b);
  cursor: not-allowed;
}

.user-sso-managed-help {
  color: var(--if-secondary, #0a7cb4);
  font-weight: 650;
}

.user-sso-managed-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  margin-top: 9px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--if-secondary, #0a7cb4), white 62%);
  border-radius: 999px;
  background: var(--if-secondary-soft, #f2f8fb);
  color: var(--if-primary, #041e42);
  font-size: 0.58rem;
  font-weight: 750;
}

.user-sso-managed-panel {
  margin: 20px 24px 24px;
  padding: 16px 18px;
  border: 1px solid var(--if-border, #e2e8f0);
  border-radius: var(--if-radius-control, 8px);
  background: var(--if-surface-subtle, #f8fafc);
}

.user-sso-managed-panel strong {
  display: block;
  color: var(--if-primary, #041e42);
  font-size: 0.875rem;
}

.user-sso-managed-panel p {
  margin: 7px 0 0;
  color: var(--if-text-muted, #64748b);
  font-size: 0.875rem;
  line-height: 1.55;
}
.user-status-message-inset {
  margin: 20px 24px 0;
}

/* ==========================================================================
   SOURCE: groups-admin.css
   ========================================================================== */
/* ============================================================
   INTELLIGENT FORMS -UNIFIED UI
   groups-admin.css
   ============================================================ */

/* ============================================================
   GROUP ADMIN
   ============================================================ */

/* ============================================================
   MODAL
   ============================================================ */

.group-modal-backdrop {
  position: fixed;

  inset: 0;

  z-index: 5000;

  display: grid;
  place-items: center;

  padding: 24px;

  background: rgba(15, 23, 42, 0.48);

  backdrop-filter: blur(2px);
}

.group-modal {
  width: min(100%, 520px);

  overflow: hidden;

  border: 1px solid #dce3ea;
  border-radius: var(--if-radius-card);

  background: var(--if-surface);

  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.group-modal-header {
  padding: 22px 24px 19px;

  border-bottom: 1px solid var(--if-border);

  background: #fafbfc;
}

.group-modal-header h2 {
  margin: 3px 0 0;

  color: var(--if-primary);

  font-size: 1rem;
  font-weight: 780;
}

.group-modal-header p:last-child {
  margin: 7px 0 0;

  color: var(--if-text-muted);

  font-size: 0.875rem;

  line-height: 1.5;
}

.group-modal-body {
  display: grid;

  gap: 17px;

  padding: 21px 24px;
}

.group-form-field label {
  display: block;

  margin-bottom: 6px;

  color: var(--if-text-strong);

  font-size: 0.875rem;
  font-weight: 720;
}

.group-form-field input,
.group-form-field textarea {
  width: 100%;

  border: 1px solid var(--if-border-strong);
  border-radius: var(--if-radius-control);

  background: var(--if-surface);

  color: var(--if-text);

  font: inherit;
  font-size: 0.875rem;

  outline: none;
}

.group-form-field input {
  height: 40px;

  padding: 0 11px;
}

.group-form-field textarea {
  padding: 10px 11px;

  resize: vertical;
}

.group-form-field input:focus,
.group-form-field textarea:focus {
  border-color: var(--if-secondary);

  box-shadow: 0 0 0 4px color-mix(in srgb, var(--if-secondary), transparent 87%);
}

.group-modal-error {
  margin: 18px 24px 0;

  padding: 11px 13px;

  border: 1px solid #f0b8b4;
  border-radius: var(--if-radius-control);

  background: #fff8f7;

  color: var(--if-danger);

  font-size: 0.875rem;
  font-weight: 650;
}

.group-modal-actions {
  display: flex;
  justify-content: flex-end;

  gap: 8px;

  padding: 18px 24px 22px;

  border-top: 1px solid #eef2f6;
}

/* ============================================================
   GROUP MANAGE PAGE
   ============================================================ */

.group-manage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;

  gap: 24px;

  margin-top: 26px;

  align-items: start;
}

.group-manage-description-field {
  grid-column: 1 / -1;
}

.group-manage-textarea {
  width: 100%;

  min-height: 110px;

  padding: 11px 12px;

  border: 1px solid var(--if-border-strong);
  border-radius: var(--if-radius-control);

  background: var(--if-surface);

  color: var(--if-text);

  font: inherit;
  font-size: 0.875rem;

  resize: vertical;

  outline: none;

  transition:
    border-color 130ms ease,
    box-shadow 130ms ease;
}

.group-manage-textarea:focus {
  border-color: var(--if-secondary, #0a7cb4);

  box-shadow: 0 0 0 3px rgba(10, 124, 180, 0.12);
}

.group-color-picker-row {
  display: grid;
  grid-template-columns: 46px minmax(110px, 150px) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.group-color-picker-row input[type="color"] {
  width: 46px;
  height: 38px;
  padding: 3px;
  border: 1px solid var(--if-border-strong);
  border-radius: var(--if-radius-control);
  background: var(--if-surface);
  cursor: pointer;
}

.group-color-preview-pill {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--group-color), white 45%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--group-color), white 88%);
  color: color-mix(in srgb, var(--group-color), black 28%);
  font-size: 0.875rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .group-color-picker-row {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .group-color-preview-pill {
    grid-column: 1 / -1;
  }
}

/* ============================================================
   SUMMARY
   ============================================================ */

.group-summary-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1px;

  background: var(--if-border);
}

.group-summary-item {
  display: grid;

  gap: 5px;

  padding: 18px;

  background: var(--if-surface);
}

.group-summary-item span {
  color: var(--if-text-muted);

  font-size: 0.875rem;
  font-weight: 750;

  letter-spacing: 0.05em;

  text-transform: uppercase;
}

.group-summary-item strong {
  color: var(--if-primary, #041e42);

  font-size: 0.875rem;
  font-weight: 750;
}

/* ============================================================
   SECTIONS
   ============================================================ */

.group-manage-section {
  margin-top: 34px;
}

.group-manage-section-header {
  margin-bottom: 15px;
}

.group-manage-section-header h2 {
  margin: 3px 0 0;

  color: var(--if-primary, #041e42);

  font-size: 1rem;
  font-weight: 750;
}

.group-manage-section-header p:last-child {
  margin: 6px 0 0;

  color: var(--if-text-muted);

  font-size: 0.875rem;
}

/* ============================================================
   ADD MEMBER
   ============================================================ */

.group-member-add-control {
  display: flex;
  align-items: center;

  gap: 8px;
}

.group-member-add-control select {
  min-width: 270px;
  height: 40px;

  padding: 0 10px;

  border: 1px solid var(--if-border-strong);
  border-radius: var(--if-radius-control);

  background: var(--if-surface);

  color: var(--if-text-strong);

  font-size: 0.875rem;

  outline: none;
}

.group-member-add-control select:focus {
  border-color: var(--if-secondary, #0a7cb4);

  box-shadow: 0 0 0 3px rgba(10, 124, 180, 0.12);
}

/* ============================================================
   REMOVE MEMBER
   ============================================================ */

.group-remove-member {
  color: var(--if-danger);
}

.group-remove-member:hover {
  border-color: var(--if-danger);

  background: var(--if-danger);

  color: var(--if-surface);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {
  .group-manage-layout {
    grid-template-columns: 1fr;
  }

  .group-member-add-control {
    align-items: stretch;

    flex-direction: column;
  }

  .group-member-add-control select {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   GROUP MEMBER HEADER
   ============================================================ */

.group-member-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;
}

/* ============================================================
   MEMBER TOOLBAR
   ============================================================ */

.group-member-toolbar {
  grid-template-columns:
    minmax(240px, 320px)
    1fr
    auto;
}

/* ============================================================
   ADD MEMBERS MODAL
   ============================================================ */

.group-member-modal {
  width: min(100%, 620px);

  max-height: min(760px, calc(100vh - 48px));

  display: flex;
  flex-direction: column;
}

.group-member-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;
}

.group-modal-close {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  flex: 0 0 34px;

  padding: 0;

  border: 1px solid #d9e0e8;
  border-radius: var(--if-radius-control);

  background: var(--if-surface);

  color: var(--if-primary, #041e42);

  font-size: 1rem;

  cursor: pointer;
}

.group-modal-close:hover {
  border-color: var(--if-primary, #041e42);

  background: var(--if-primary, #041e42);

  color: var(--if-surface);
}

/* ============================================================
   ADD MEMBER SEARCH
   ============================================================ */

.group-member-modal-search {
  padding: 18px 24px 10px;
}

.group-member-modal-search .if-table-search {
  width: 100%;
}

/* ============================================================
   USER SELECTION LIST
   ============================================================ */

.group-member-selection-list {
  min-height: 180px;

  overflow-y: auto;

  padding: 8px 24px 18px;
}

.group-member-selection-item {
  position: relative;

  display: grid;

  grid-template-columns:
    24px
    38px
    minmax(0, 1fr);

  align-items: center;

  gap: 11px;

  padding: 12px;

  margin-bottom: 7px;

  border: 1px solid var(--if-border);
  border-radius: 10px;

  background: var(--if-surface);

  cursor: pointer;

  transition:
    border-color 130ms ease,
    background-color 130ms ease,
    box-shadow 130ms ease;
}

.group-member-selection-item:hover {
  border-color: #b7c5d4;

  background: #fafcfe;
}

.group-member-selection-item-selected {
  border-color: var(--if-secondary, #0a7cb4);

  background: color-mix(in srgb, var(--if-secondary, #0a7cb4), white 95%);

  box-shadow: 0 0 0 2px rgba(10, 124, 180, 0.08);
}

.group-member-selection-item input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}

.group-member-selection-check {
  width: 22px;
  height: 22px;

  display: grid;
  place-items: center;

  border: 1px solid var(--if-border-strong);
  border-radius: 6px;

  background: var(--if-surface);

  color: transparent;

  font-size: 0.875rem;
  font-weight: 800;
}

.group-member-selection-item-selected .group-member-selection-check {
  border-color: var(--if-secondary, #0a7cb4);

  background: var(--if-secondary, #0a7cb4);

  color: var(--if-surface);
}

.group-member-selection-identity {
  min-width: 0;

  display: grid;

  gap: 3px;
}

.group-member-selection-identity strong {
  color: var(--if-text);

  font-size: 0.875rem;
  font-weight: 750;
}

.group-member-selection-identity span {
  overflow: hidden;

  color: var(--if-text-muted);

  font-size: 0.875rem;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* ============================================================
   EMPTY USER SELECTION
   ============================================================ */

.group-member-selection-empty {
  min-height: 220px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 30px;

  text-align: center;
}

.group-member-selection-empty h3 {
  margin: 0;

  color: var(--if-primary, #041e42);

  font-size: 0.875rem;
}

.group-member-selection-empty p {
  max-width: 330px;

  margin: 6px 0 0;

  color: var(--if-text-muted);

  font-size: 0.875rem;

  line-height: 1.5;
}

/* ============================================================
   MODAL FOOTER
   ============================================================ */

.group-member-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 16px 24px 20px;

  border-top: 1px solid var(--if-border);

  background: #fafbfc;
}

.group-member-selected-count {
  color: var(--if-text-muted);

  font-size: 0.66rem;
  font-weight: 650;
}

.group-member-modal-actions {
  padding: 0;

  border: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 700px) {
  .group-member-header {
    align-items: stretch;

    flex-direction: column;
  }

  .group-member-header .if-btn {
    align-self: flex-start;
  }

  .group-member-modal-footer {
    align-items: stretch;

    flex-direction: column;
  }

  .group-member-modal-actions {
    justify-content: flex-end;
  }
}
/* ============================================================
   GROUP CREATE MEMBERSHIP NOTE
   ============================================================ */

.group-create-membership-note {
  padding: 13px 14px;

  border: 1px solid #bed0f4;
  border-radius: 9px;

  background: #f5f8ff;
}

.group-create-membership-note strong {
  display: block;

  color: var(--if-primary, #041e42);

  font-size: 0.875rem;
  font-weight: 750;
}

.group-create-membership-note p {
  margin: 5px 0 0;

  color: var(--if-text-muted);

  font-size: 0.875rem;

  line-height: 1.5;
}

/* ============================================================
   GROUPS -USERS TABLE STANDARD
   Shared toolbar/search/filter/table appearance is owned by
   intelligent-forms.css. This file should only specialize group
   content. Keep this section LAST.
   ============================================================ */

/* ==========================================================================
   SOURCE: system-settings.css
   ========================================================================== */
/* ============================================================
   INTELLIGENT FORMS - UNIFIED UI
   system-settings.css
   ============================================================ */

/* ============================================================
   SYSTEM SETTINGS
   ============================================================ */

/* ============================================================
   MANAGED FILE STORAGE BROWSER
   ============================================================ */

.file-storage-browser {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.system-setting-color {
  min-height: 39px !important;
  padding: 4px !important;
  cursor: pointer;
}
.system-notice-appearance-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.system-notice-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--if-notice-text), transparent 78%);
  border-radius: 8px;
  color: var(--if-notice-text);
  background: var(--if-notice-bg);
  font-size: 0.875rem;
  font-weight: 650;
}

.file-storage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--if-border);
}

.file-storage-toolbar > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.file-storage-toolbar small {
  color: var(--if-text-muted);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.file-storage-toolbar strong {
  overflow-wrap: anywhere;
  color: var(--if-text);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.875rem;
}

.file-storage-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-control);
  color: var(--if-text-muted);
  background: var(--if-surface-subtle);
  overflow-wrap: anywhere;
}

.file-storage-breadcrumbs button {
  padding: 3px 7px;
  border: 0;
  border-radius: 6px;
  color: var(--if-secondary);
  background: transparent;
  font-weight: 750;
}

.file-storage-breadcrumbs button:hover,
.file-storage-breadcrumbs button:focus-visible {
  background: var(--if-secondary-soft);
  outline: none;
}

.file-storage-directory {
  cursor: pointer;
}

.file-storage-browser .if-data-table th:first-child,
.file-storage-browser .if-data-table td:first-child {
  min-width: 210px;
}

.file-storage-browser .if-data-table td {
  vertical-align: middle;
}

@media (max-width: 650px) {
  .file-storage-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .file-storage-toolbar .if-btn {
    width: 100%;
  }
}

/* Storage browser uses the same card anatomy as System Settings. */
.file-storage-page .file-storage-browser {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--if-border);
  border-radius: 12px;
  box-shadow: var(--if-shadow-card);
}
.file-storage-card-heading {
  padding: 20px 22px;
  border-bottom: 1px solid var(--if-border);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--if-primary), white 97%),
    var(--if-surface)
  );
}
.file-storage-card-heading h2 {
  margin: 2px 0 0;
  color: var(--if-primary);
  font-size: 0.9rem;
  font-weight: 760;
}
.file-storage-card-heading p:last-child {
  margin: 6px 0 0;
  color: var(--if-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
.file-storage-page .file-storage-toolbar {
  margin: 0;
  padding: 16px 22px;
  background: var(--if-surface);
}
.file-storage-page .file-storage-toolbar small {
  font-size: 0.875rem;
}
.file-storage-page .file-storage-toolbar strong {
  font-size: 0.875rem;
}
.file-storage-page .file-storage-breadcrumbs {
  margin: 0 22px 16px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.875rem;
}
.file-storage-page .if-table-wrapper {
  width: auto;
  max-width: calc(100% - 44px);
  margin: 0 22px 22px;
  overflow-x: auto;
  border: 1px solid var(--if-border);
  border-radius: 9px;
}
.file-storage-table {
  min-width: 760px;
}
.file-storage-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.file-storage-name {
  max-width: 360px;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: var(--if-primary);
  background: transparent;
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-storage-name:hover,
.file-storage-name:focus-visible {
  color: var(--if-secondary);
  text-decoration: underline;
  outline: none;
}
@media (max-width: 650px) {
  .file-storage-page .file-storage-breadcrumbs,
  .file-storage-page .if-table-wrapper {
    margin-inline: 14px;
  }
  .file-storage-page .file-storage-toolbar,
  .file-storage-card-heading {
    padding-inline: 14px;
  }
}

/* ============================================================
   CARD
   ============================================================ */

.system-settings-card {
  overflow: hidden;

  border: 1px solid var(--if-border);
  border-radius: 12px;

  background: var(--if-surface);

  box-shadow: var(--if-shadow-card);
}

.system-settings-card-header {
  padding: 20px 22px;

  border-bottom: 1px solid var(--if-border);

  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--if-primary, #041e42), white 97%),
    var(--if-surface)
  );
}

.system-settings-card-header h2 {
  margin: 2px 0 0;

  color: var(--if-primary, #041e42);

  font-size: 0.9rem;
  font-weight: 760;
}

.system-settings-card-header > div > p:last-child {
  margin: 6px 0 0;

  color: var(--if-text-muted);

  font-size: 0.875rem;

  line-height: 1.5;
}

.system-settings-card-body {
  display: grid;

  gap: 18px;

  padding: 22px;
}

/* ============================================================
   GRID
   ============================================================ */

.system-settings-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px;
}

/* ============================================================
   FIELD
   ============================================================ */

.system-setting-field {
  display: grid;

  gap: 7px;
}

.system-setting-field label,
.system-setting-toggle-title {
  color: var(--if-text-strong);

  font-size: 0.875rem;
  font-weight: 750;
}

.system-setting-field input,
.system-setting-field select {
  width: 100%;

  box-sizing: border-box;

  min-height: 38px;

  padding: 8px 10px;

  border: 1px solid var(--if-border-strong);
  border-radius: var(--if-radius-control);

  background: var(--if-surface);

  color: var(--if-text);

  font: inherit;
  font-size: 0.875rem;

  outline: none;
}

.system-setting-field input:focus,
.system-setting-field select:focus {
  border-color: var(--if-secondary, #0a7cb4);

  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--if-secondary, #0a7cb4), transparent 88%);
}

.system-setting-help {
  color: var(--if-text-muted);

  font-size: 0.875rem;

  line-height: 1.45;
}

/* ============================================================
   TOGGLE ROW
   ============================================================ */

.system-setting-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding: 13px 0;
}

.system-setting-toggle-row + .system-setting-toggle-row {
  border-top: 1px solid #eef2f6;
}

.system-setting-toggle-row > div:first-child {
  min-width: 0;
}

/* ============================================================
   NUMBER INPUT
   ============================================================ */

.system-setting-number-row {
  display: grid;

  grid-template-columns:
    minmax(0, 150px)
    auto;

  align-items: center;

  gap: 9px;
}

.system-setting-number-row > span {
  color: var(--if-text-muted);

  font-size: 0.875rem;
  font-weight: 700;
}

/* ============================================================
   WARNING
   ============================================================ */

.system-settings-warning {
  padding: 13px 14px;

  border: 1px solid #e7d7a8;
  border-radius: 9px;

  background: #fffbef;
}

.system-settings-warning strong {
  color: #7a5b00;

  font-size: 0.875rem;
}

.system-settings-warning p {
  margin: 5px 0 0;

  color: #806a27;

  font-size: 0.875rem;

  line-height: 1.5;
}

/* ============================================================
   STATUS
   ============================================================ */

.system-settings-status {
  margin-bottom: 18px;

  padding: 11px 14px;

  border: 1px solid #bfe3d0;
  border-radius: 9px;

  background: #eef9f3;

  color: #18794e;

  font-size: 0.875rem;
  font-weight: 700;
}

.system-settings-error {
  margin-bottom: 18px;

  padding: 12px 14px;

  border: 1px solid #f0c7c3;
  border-radius: 9px;

  background: #fff5f4;

  color: #7f1d1d;

  font-size: 0.875rem;
}

.system-settings-error strong {
  display: block;

  margin-bottom: 3px;

  color: var(--if-danger);
}

/* ============================================================
   SAVE ROW
   ============================================================ */

.system-settings-save-row {
  display: flex;
  justify-content: flex-end;

  gap: 9px;

  padding: 4px 0 24px;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.system-settings-sidebar {
  --if-sticky-sidebar-top: 12px;
  --if-system-settings-sidebar-reserve: 224px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  max-height: calc(
    var(--if-ui-viewport-height, 100dvh) -
      var(--if-system-settings-sidebar-reserve)
  );
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scroll-padding-bottom: 16px;
}

.system-settings-summary-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: none;
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;

  border: 1px solid var(--if-border);
  border-radius: 12px;

  background: var(--if-surface);

  box-shadow: var(--if-shadow-card);
}

.system-settings-summary-card h2 {
  margin: 3px 0 0;

  color: var(--if-primary, #041e42);

  font-size: 0.9rem;
}

.system-settings-summary-card > p:last-of-type {
  margin: 5px 0 0;

  color: var(--if-text-muted);

  font-size: 0.875rem;

  line-height: 1.5;
}

.system-settings-summary-list {
  display: grid;
  min-height: 0;
  margin-top: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.system-settings-summary-list > div {
  display: grid;

  gap: 2px;

  padding: 8px 0;

  border-top: 1px solid #eef2f6;
}

.system-settings-sidebar-actions {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--if-border);
}

.system-settings-sidebar-actions .if-btn {
  width: 100%;
  justify-content: center;
}

.system-settings-summary-list span {
  color: var(--if-text-muted);

  font-size: 0.875rem;
  font-weight: 800;

  letter-spacing: 0.04em;

  text-transform: uppercase;
}

.system-settings-summary-list strong {
  color: var(--if-slate-900);

  font-size: 0.875rem;
}

.system-version-history {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--if-border);
}
.system-version-history h3 {
  margin: 0 0 10px;
  color: var(--if-primary);
  font-size: 0.9rem;
}
.system-version-history > p {
  margin: 0;
  color: var(--if-text-muted);
  font-size: 0.875rem;
}
.system-version-history-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid #eef2f6;
}
.system-version-history-item > div {
  display: grid;
  gap: 2px;
}
.system-version-history-item > div:last-child {
  text-align: right;
}
.system-version-history-item strong {
  color: var(--if-primary);
  font-size: 0.875rem;
}
.system-version-history-item span {
  color: var(--if-text-muted);
  font-size: 0.875rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 980px) {
}

@media (max-width: 650px) {
  .system-version-history-item {
    flex-direction: column;
    gap: 5px;
  }
  .system-version-history-item > div:last-child {
    text-align: left;
  }

  .system-notice-appearance-grid {
    grid-template-columns: 1fr;
  }

  .system-settings-grid {
    grid-template-columns: 1fr;
  }

  .system-setting-toggle-row {
    align-items: center;
  }

  .system-settings-save-row {
    align-items: stretch;

    flex-direction: column-reverse;
  }

  .system-settings-save-row .if-btn {
    justify-content: center;
  }
}

/* ==========================================================================
   SOURCE: notification-deliveries.css
   ========================================================================== */
/* ============================================================
   NOTIFICATION DELIVERIES
   Page-specific styles only.

   Shared page headings, toolbars, search controls, filters,
   tables, badges, actions, and summary cards are owned by
   intelligent-forms.css.
   ============================================================ */

/* ============================================================
   PAGE
   ============================================================ */

.notification-deliveries-page {
  padding-bottom: 72px;
}

/* ============================================================
   SUMMARY -semantic number colors only
   ============================================================ */

.notification-delivery-summary-success .if-summary-value {
  color: #18794e;
}

.notification-delivery-summary-danger .if-summary-value {
  color: #b42318;
}

.notification-delivery-summary-warning .if-summary-value {
  color: #805a00;
}

/* ============================================================
   DELIVERY TABLE CONTENT
   ============================================================ */

.notification-delivery-table {
  min-width: 1120px;
}

.notification-delivery-actions-heading {
  width: 82px;
}

.notification-delivery-date {
  white-space: nowrap;
}

.notification-delivery-date > span {
  display: block;

  margin-top: 3px;

  color: var(--if-text-muted);

  font-size: 0.875rem;
}

.notification-delivery-form-name,
.notification-delivery-recipient {
  display: block;

  color: var(--if-text);

  font-size: 0.875rem;
  font-weight: 750;
}

.notification-delivery-recipient-email {
  display: block;

  margin-top: 3px;

  color: var(--if-text-muted);

  font-size: 0.875rem;
}

.notification-delivery-subject {
  max-width: 310px;

  display: -webkit-box;

  overflow: hidden;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  color: var(--if-slate-700);

  line-height: 1.45;
}

.notification-delivery-muted {
  color: var(--if-slate-400);
}

/* ============================================================
   PAGE ERROR
   ============================================================ */

.notification-delivery-page-error {
  margin-bottom: 16px;

  padding: 11px 14px;

  border: 1px solid #f0c7c3;
  border-radius: var(--if-radius-control);

  background: var(--if-danger-bg);

  color: var(--if-danger);

  font-size: 0.875rem;
  font-weight: 650;
}

/* ============================================================
   DETAIL MODAL
   ============================================================ */

.notification-delivery-modal {
  width: min(920px, calc(100vw - 36px));
  max-height: min(880px, calc(100vh - 40px));

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

.notification-delivery-modal-close {
  width: 34px;
  height: 34px;

  display: inline-grid;
  place-items: center;

  flex: 0 0 auto;

  border: 1px solid transparent;
  border-radius: 7px;

  background: transparent;

  color: var(--if-text-muted);

  font-size: 1.15rem;

  cursor: pointer;
}

.notification-delivery-modal-close:hover {
  border-color: var(--if-border);
  background: var(--if-surface-subtle);
  color: var(--if-primary);
}

.notification-delivery-detail-body {
  min-height: 0;

  flex: 1 1 auto;

  overflow-y: auto;

  padding: 22px 24px;
}

.notification-delivery-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1px;

  overflow: hidden;

  margin-bottom: 22px;

  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-card);

  background: var(--if-border);
}

.notification-delivery-detail-grid > div {
  min-width: 0;

  padding: 12px 14px;

  background: var(--if-surface);
}

.notification-delivery-detail-grid span:first-child {
  display: block;

  margin-bottom: 4px;

  color: var(--if-text-muted);

  font-size: 0.875rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.notification-delivery-detail-grid strong,
.notification-delivery-detail-grid a {
  overflow-wrap: anywhere;

  color: var(--if-text);

  font-size: 0.875rem;
  font-weight: 700;
}

.notification-delivery-failure {
  margin-bottom: 22px;

  padding: 14px 15px;

  border: 1px solid #f0c7c3;
  border-radius: var(--if-radius-control);

  background: var(--if-danger-bg);
}

.notification-delivery-failure h3,
.notification-delivery-message h3 {
  margin: 3px 0 9px;

  color: var(--if-primary);

  font-size: 0.875rem;
}

.notification-delivery-failure pre,
.notification-delivery-source pre,
.notification-delivery-text-preview {
  margin: 0;

  white-space: pre-wrap;
  overflow-wrap: anywhere;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  font-size: 0.875rem;
  line-height: 1.55;
}

.notification-delivery-failure pre {
  color: var(--if-danger);
}

.notification-delivery-subject-preview {
  margin-bottom: 18px;

  padding: 11px 13px;

  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-control);

  background: var(--if-surface-subtle);

  color: var(--if-text);

  font-size: 0.875rem;
}

.notification-delivery-html-preview {
  width: 100%;
  min-height: 320px;

  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-control);

  background: #ffffff;
}

.notification-delivery-source {
  margin-top: 10px;
}

.notification-delivery-source summary {
  color: var(--if-secondary);

  font-size: 0.875rem;
  font-weight: 700;

  cursor: pointer;
}

.notification-delivery-source pre,
.notification-delivery-text-preview {
  margin-top: 8px;

  padding: 12px;

  overflow-x: auto;

  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-control);

  background: #0f172a;

  color: #e2e8f0;
}

.notification-delivery-empty-message {
  padding: 14px;

  border: 1px dashed var(--if-border-strong);
  border-radius: var(--if-radius-control);

  color: var(--if-text-muted);

  font-size: 0.875rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .notification-delivery-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .notification-delivery-detail-grid {
    grid-template-columns: 1fr;
  }
}

   SOURCE: content-image-upload.css
   ========================================================================== */
/* ============================================================
   CONTENT IMAGE UPLOAD -NOTIFICATION TEMPLATES
   ============================================================ */

.content-image-uploader,
.notification-image-uploader {
  display: grid;
  gap: 12px;

  padding: 14px;

  border: 1px solid var(--if-border);
  border-radius: 10px;

  background: var(--if-surface-subtle);
}

.content-image-uploader-heading strong,
.notification-image-uploader-heading strong {
  display: block;

  color: var(--if-text-strong);

  font-size: 0.66rem;
  font-weight: 760;
}

.content-image-uploader-heading span,
.notification-image-uploader-heading span {
  display: block;

  margin-top: 3px;

  color: var(--if-text-muted);

  font-size: 0.57rem;
  line-height: 1.45;
}

.content-image-uploader-controls,
.notification-image-controls {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 10px;

  align-items: end;
}

.content-image-file-button {
  position: relative;

  min-height: 39px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 13px;

  overflow: hidden;

  border: 1px solid var(--if-primary);
  border-radius: var(--if-radius-control);

  background: var(--if-primary);

  color: #fff;

  font-size: 0.875rem;
  font-weight: 750;

  cursor: pointer;
}

.content-image-file-button:hover {
  filter: brightness(1.05);
}

/* Notification templates may use a very light custom primary brand
   color. Keep this file action legible regardless of that choice. */
.notification-image-controls .content-image-file-button {
  border-color: #041e42;
  background: #041e42;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: none;
}

/* The generic editor label rule targets label > span and otherwise turns the
   visible upload-button text gray. Keep this action WCAG-readable regardless
   of the configured brand palette. */
.notification-image-controls .content-image-file-button > span {
  margin: 0;
  color: #ffffff !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: 1.2;
  text-transform: none !important;
}

.notification-image-controls .content-image-file-button:hover {
  border-color: #0a365f;
  background: #0a365f;
  filter: none;
}

.notification-image-controls .content-image-file-button:focus-within {
  outline: 3px solid color-mix(in srgb, var(--if-secondary, #0a7cb4), white 42%);
  outline-offset: 2px;
}

.content-image-file-button input[type="file"] {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  opacity: 0;

  cursor: pointer;
}

.content-image-file-button-disabled {
  opacity: 0.6;

  pointer-events: none;
}

.content-image-uploaded,
.notification-image-uploaded {
  display: grid;

  grid-template-columns:
    84px
    minmax(0, 1fr);

  gap: 12px;

  align-items: center;

  padding: 10px;

  border: 1px solid #b9e0ca;
  border-radius: 9px;

  background: #f1fbf5;
}

.content-image-uploaded img,
.notification-image-uploaded img {
  width: 84px;
  height: 60px;

  object-fit: cover;

  border: 1px solid var(--if-border);
  border-radius: 7px;

  background: #fff;
}

.content-image-uploaded strong,
.notification-image-uploaded strong {
  display: block;

  color: #177245;

  font-size: 0.875rem;
}

.content-image-uploaded span,
.notification-image-uploaded span {
  display: block;

  margin-top: 3px;

  color: var(--if-text-muted);

  font-size: 0.875rem;
  line-height: 1.4;
}

.notification-image-warning,
.notification-image-error {
  padding: 9px 11px;

  border-radius: 7px;

  font-size: 0.875rem;
  line-height: 1.45;
}

.notification-image-warning {
  border: 1px solid #e9d49a;

  background: #fff9e8;

  color: #765b13;
}

.notification-image-error {
  border: 1px solid #f0c7c3;

  background: #fef3f2;

  color: var(--if-danger);
}

@media (max-width: 720px) {
  .content-image-uploader-controls,
  .notification-image-controls {
    grid-template-columns: 1fr;
  }

  .content-image-file-button {
    width: 100%;
  }
}

/* ==========================================================================
   SOURCE: incident-tracking.css
   ========================================================================== */
/* ============================================================
   INTELLIGENT FORMS -SYSTEM INCIDENT TRACKING
   Page-specific styles only. Shared headings, toolbars, tables,
   actions, buttons, and summary primitives come from
   intelligent-forms.css.
   ============================================================ */

/* Admin navigation now includes System Incidents. */
.if-admin-tabs {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.incident-page,
.incident-detail-page {
  padding-bottom: 72px;
}

.incident-summary-grid {
  gap: 10px;
  margin-bottom: 18px;
}

.incident-summary-button {
  width: 100%;
  min-height: 64px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;

  padding: 10px 14px;

  text-align: left;
  cursor: pointer;
}

.incident-summary-button .if-summary-label,
.incident-summary-button .if-summary-detail {
  min-width: 0;
}

.incident-summary-button .if-summary-label {
  grid-column: 1;
  grid-row: 1;
}

.incident-summary-button .if-summary-value {
  grid-column: 2;
  grid-row: 1 / span 2;

  font-size: 1.25rem;
}

.incident-summary-button .if-summary-detail {
  grid-column: 1;
  grid-row: 2;

  overflow: hidden;

  color: var(--if-text-muted);

  font-size: 0.875rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.incident-summary-critical .if-summary-value {
  color: #8f1d18;
}

.incident-summary-error .if-summary-value {
  color: var(--if-danger, #b42318);
}

.incident-summary-warning .if-summary-value {
  color: #805a00;
}

.incident-second-filter-label {
  margin-left: 10px;
}

.incident-page-error {
  margin-bottom: 16px;
  padding: 11px 14px;

  border: 1px solid #f0c7c3;
  border-radius: var(--if-radius-control);
  background: var(--if-danger-bg, #fef3f2);
  color: var(--if-danger, #b42318);

  font-size: 0.875rem;
  line-height: 1.5;
}

/* ============================================================
   LIST TABLE
   ============================================================ */

.incident-table {
  min-width: 1120px;
}

.incident-reference {
  margin-bottom: 4px;

  color: var(--if-secondary);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  font-size: 0.875rem;
  font-weight: 800;

  letter-spacing: 0.02em;
}

.incident-summary-text {
  max-width: 430px;

  display: -webkit-box;

  overflow: hidden;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  white-space: normal;
}

.incident-occurrence-count {
  min-width: 34px;
  min-height: 26px;

  display: inline-grid;
  place-items: center;

  padding: 0 8px;

  border: 1px solid var(--if-border);
  border-radius: 999px;

  background: var(--if-surface-subtle);

  color: var(--if-text-strong);

  font-size: 0.62rem;
  font-weight: 750;
}

/* ============================================================
   PILLS
   ============================================================ */

.incident-pill {
  min-height: 24px;

  display: inline-flex;
  align-items: center;

  padding: 0 9px;

  border-radius: 999px;

  font-size: 0.875rem;
  font-weight: 800;

  white-space: nowrap;
}

.incident-pill-critical {
  border: 1px solid #e4a8a4;
  background: #fbe9e7;
  color: #8f1d18;
}

.incident-pill-error {
  border: 1px solid #f0c7c3;
  background: #fef3f2;
  color: #b42318;
}

/* Notification-template upload guidance is instructional content, not
   secondary metadata. Keep it at a comfortable reading size. */
.notification-image-uploader-heading strong {
  font-size: 1rem;
}

.notification-image-uploader-heading span,
.notification-image-warning,
.notification-image-error,
.notification-image-uploaded span {
  font-size: 0.95rem;
  line-height: 1.55;
}

.incident-pill-warning {
  border: 1px solid #e7d49d;
  background: #fff8e8;
  color: #805a00;
}

.incident-pill-info {
  border: 1px solid #bed0f4;
  background: #ecf2ff;
  color: #3156a6;
}

.incident-pill-open {
  background: #eef2f6;
  color: var(--if-primary);
}

.incident-pill-investigating {
  background: #ecf2ff;
  color: #3156a6;
}

.incident-pill-monitoring {
  background: #fff5d9;
  color: #805a00;
}

.incident-pill-resolved {
  background: #eaf8f1;
  color: #18794e;
}

.incident-pill-muted {
  background: #f1f5f9;
  color: #64748b;
}

/* ============================================================
   DETAIL
   ============================================================ */

.incident-delete-modal {
  width: min(560px, calc(100vw - 32px));
}

.incident-detail-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    300px;

  gap: 18px;

  align-items: start;

  margin-bottom: 18px;
}

.incident-diagnostic-body {
  gap: 0;
  padding: 0;
}

.incident-detail-list {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  margin: 0;
  padding: 18px;

  gap: 1px;

  background: var(--if-border);
}

.incident-detail-list > div {
  min-width: 0;

  padding: 11px 12px;

  background: var(--if-surface);
}

.incident-detail-list dt {
  margin: 0 0 4px;

  color: var(--if-text-muted);

  font-size: 0.875rem;
  font-weight: 800;

  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.incident-detail-list dd {
  margin: 0;

  color: var(--if-text);

  font-size: 0.875rem;
  font-weight: 680;
}

.incident-break {
  overflow-wrap: anywhere;
}

.incident-context-links {
  display: grid;
  gap: 8px;

  margin: 0 18px 18px;
  padding: 14px;

  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-control);

  background: var(--if-surface-subtle);
}

.incident-context-links h3 {
  margin: 0 0 2px;

  color: var(--if-primary);

  font-size: 0.875rem;
}

.incident-context-links > div {
  display: grid;

  grid-template-columns: 90px minmax(0, 1fr);

  gap: 10px;

  align-items: center;
}

.incident-context-links span {
  color: var(--if-text-muted);

  font-size: 0.875rem;
  font-weight: 750;
}

.incident-context-links code,
.incident-context-links a {
  overflow-wrap: anywhere;

  color: var(--if-secondary);

  font-size: 0.875rem;
  font-weight: 700;
}

.incident-stack {
  margin: 0 18px 18px;
}

.incident-stack summary {
  color: var(--if-primary);

  font-size: 0.875rem;
  font-weight: 750;

  cursor: pointer;
}

.incident-stack pre,
.incident-occurrence-body pre {
  max-height: 500px;

  margin: 9px 0 0;
  padding: 13px;

  overflow: auto;

  border-radius: 8px;

  background: #0f172a;

  color: #e2e8f0;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  font-size: 0.875rem;
  line-height: 1.55;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ============================================================
   STATUS WORKFLOW
   ============================================================ */

.incident-workflow {
  gap: 14px;
}

.incident-workflow label {
  display: grid;
  gap: 5px;
}

.incident-workflow label > span {
  color: var(--if-text-muted);

  font-size: 0.875rem;
  font-weight: 800;

  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.incident-resolution-notes {
  min-height: 110px;
  resize: vertical;
}

/* ============================================================
   OCCURRENCES
   ============================================================ */

.incident-occurrences-card,
.incident-comments-card {
  margin-bottom: 18px;
}

.incident-occurrence-list {
  display: grid;
}

.incident-occurrence {
  border-bottom: 1px solid var(--if-border);
}

.incident-occurrence:last-child {
  border-bottom: 0;
}

.incident-occurrence > summary {
  display: grid;

  grid-template-columns: 190px minmax(0, 1fr) 220px;

  gap: 16px;

  align-items: center;

  padding: 13px 18px;

  color: var(--if-text-strong);

  font-size: 0.875rem;
  font-weight: 680;

  cursor: pointer;
}

.incident-occurrence > summary:hover {
  background: var(--if-surface-subtle);
}

.incident-occurrence-body {
  padding: 0 18px 18px;

  border-top: 1px solid #eef2f6;

  background: #fcfdfe;
}

.incident-occurrence-body > p {
  margin: 14px 0 0;

  color: var(--if-text);

  font-size: 0.875rem;
  line-height: 1.5;
}

.incident-occurrence-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));

  margin-top: 12px;
  padding: 0;
}

/* ============================================================
   COMMENTS
   ============================================================ */

.incident-comment-composer {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 10px;

  align-items: end;

  padding: 16px 18px;

  border-bottom: 1px solid var(--if-border);
}

.incident-comment-composer textarea {
  min-height: 82px;
  resize: vertical;
}

.incident-comments-empty {
  padding: 24px 18px;

  color: var(--if-text-muted);

  font-size: 0.875rem;
  text-align: center;
}

.incident-comment-list {
  display: grid;
}

.incident-comment {
  padding: 14px 18px;

  border-bottom: 1px solid var(--if-border);
}

.incident-comment:last-child {
  border-bottom: 0;
}

.incident-comment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

.incident-comment-meta strong {
  color: var(--if-primary);

  font-size: 0.875rem;
}

.incident-comment-meta span {
  color: var(--if-text-muted);

  font-size: 0.875rem;
}

.incident-comment p {
  margin: 7px 0 0;

  color: var(--if-text-strong);

  font-size: 0.875rem;
  line-height: 1.5;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {
  .incident-detail-grid {
    grid-template-columns: 1fr;
  }

  .incident-occurrence > summary {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .incident-occurrence > summary span:last-child {
    grid-column: 2;
  }
}

@media (max-width: 700px) {
  .incident-detail-page .if-page-heading-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .incident-detail-list,
  .incident-occurrence-meta {
    grid-template-columns: 1fr;
  }

  .incident-occurrence > summary {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .incident-occurrence > summary span:last-child {
    grid-column: auto;
  }

  .incident-comment-composer {
    grid-template-columns: 1fr;
  }

  .incident-second-filter-label {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
  }
}

@media (max-width: 1150px) {
  .if-admin-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .if-admin-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   SOURCE: admin-nav.css
   ========================================================================== */
/* ============================================================
   INTELLIGENT FORMS -FLOATING ADMIN NAVIGATION
   Canonical AdminNav component styles.
   ============================================================ */

.if-admin-nav-region {
  border-bottom: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  pointer-events: none;
}

.if-admin-nav-container {
  position: sticky;
  top: 8px;
  z-index: 200;

  padding-top: 5px;
  padding-bottom: 3px;

  pointer-events: auto;
}

.if-admin-nav {
  position: relative;
  z-index: 205;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0 auto;
  padding: 5px;
  border: 1px solid #dce5ed !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1) !important;
  backdrop-filter: blur(12px);
  scrollbar-width: thin;
}

.if-admin-nav-link {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--if-text-muted, #64748b);
  font-family: var(--if-font-nav-config, inherit);
  font-size: 0.875rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.if-admin-nav-link:hover {
  background: var(--if-secondary-soft, #f2f8fb);
  color: var(--if-primary, #041e42);
}

.if-admin-nav-link.active,
.if-admin-nav-link-active {
  background: var(--if-primary, #041e42);
  color: #ffffff;
}

.if-admin-nav-icon {
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 17px;
  font-size: 0.66rem;
  line-height: 1;
}

.if-admin-nav-menu {
  position: relative;
  z-index: 210;
}

.if-admin-nav-menu > summary {
  list-style: none;
}

.if-admin-nav-menu > summary::-webkit-details-marker {
  display: none;
}

.if-admin-nav-chevron {
  margin-left: 2px;
  font-size: 0.52rem;
  transition: transform 0.15s ease;
}

.if-admin-nav-menu[open] > summary .if-admin-nav-chevron {
  transform: rotate(180deg);
}

.if-admin-nav-link[aria-expanded="true"] .if-admin-nav-chevron {
  transform: rotate(180deg);
}

.if-admin-nav-popover {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 220;
  width: 245px;
  max-width: calc(100vw - 24px);
  max-height: min(32rem, calc(100dvh - 11rem));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--if-border, #dce5ed);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.16);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

/* Integrations has substantially more destinations than the other menus.
   Use two columns when the viewport can support them instead of creating a
   tall, cramped dropdown. */
@media (min-width: 850px) {
  .if-admin-nav-popover-integrations {
    width: min(500px, calc(100vw - 32px));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
  }
}

.if-admin-nav-popover-right {
  right: 0;
  left: auto;
}

.if-admin-nav-popover-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 11px;
  border-radius: 7px;
  color: var(--if-primary, #041e42);
  text-decoration: none;
}

.if-admin-nav-popover-link:hover,
.if-admin-nav-popover-link.active {
  background: var(--if-secondary-soft, #f2f8fb);
}

.if-admin-nav-popover-link strong {
  font-size: 0.875rem;
  line-height: 1.2;
}

.if-admin-nav-popover-link span {
  color: var(--if-text-muted, #64748b);
  font-size: 0.875rem;
  line-height: 1.35;
}

.if-admin-nav-alert-count {
  min-width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 999px;
  background: #b42318;
  color: #ffffff;
  font-size: 0.46rem;
  line-height: 1;
}

.if-admin-nav-screen {
  position: fixed;
  inset: 0;

  z-index: 190;

  padding: 0;

  border: 0;

  background: transparent;

  cursor: default;
}

/* The full-screen button only captures outside clicks. It must stay invisible
   instead of inheriting the application's global button interaction colors. */
.if-admin-nav-screen:hover,
.if-admin-nav-screen:focus,
.if-admin-nav-screen:focus-visible,
.if-admin-nav-screen:active {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Old tab underline / region line must not reappear. */
.if-admin-tabs,
.if-admin-nav-region::before,
.if-admin-nav-region::after,
.if-admin-nav-container::before,
.if-admin-nav-container::after {
  border-bottom: 0 !important;
}

@media (max-width: 720px) {
  .if-admin-nav-container {
    top: 4px;
    padding-inline: 10px;
  }

  .if-admin-nav {
    width: 100%;
    overflow-x: auto;
  }

  .if-admin-nav-popover {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100dvh - 24px);
  }

  .if-admin-nav-popover-integrations {
    display: block;
  }
}

/* ==========================================================================
   SOURCE: admin-dashboard.css
   ========================================================================== */
/* ============================================================
   ADMINISTRATION OVERVIEW
   Page-specific layout; shared cards, buttons, type, and color
   tokens continue to come from intelligent-forms.css.
   ============================================================ */

.admin-dashboard {
  padding-bottom: 54px;
}

.admin-dashboard-stats {
  margin-bottom: 18px;
}

.admin-dashboard-stat-detail {
  margin-top: 3px;
  color: var(--if-text-muted, #64748b);
  font-size: 0.875rem;
  line-height: 1.25;
}

/* System health is intentionally a panel, not one large link. */
.admin-health-panel {
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) minmax(360px, 0.85fr);
  overflow: hidden;
  margin-bottom: 30px;
  border: 1px solid var(--if-border, #dce5ed);
  border-radius: var(--if-radius-card, 14px);
  background: #ffffff;
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.05);
}

.admin-health-summary {
  padding: 22px 24px;
}

.admin-health-heading {
  display: flex;
  align-items: center;
  gap: 11px;
}

.admin-health-heading .if-eyebrow {
  margin: 0 0 3px;
}

.admin-health-heading h2 {
  margin: 0;
  color: var(--if-primary, #041e42);
  font-size: 0.92rem;
  font-weight: 780;
  line-height: 1.25;
  text-decoration: none;
}

.admin-health-indicator {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px currentColor;
}

.admin-health-indicator-healthy {
  background: #18794e;
  color: #18794e;
}

.admin-health-indicator-warning {
  background: #c2410c;
  color: #c2410c;
}

.admin-health-indicator-critical {
  background: #b42318;
  color: #b42318;
}

.admin-health-description {
  max-width: 610px;
  margin: 13px 0 17px;
  color: var(--if-text-muted, #64748b);
  font-size: 0.875rem;
  line-height: 1.55;
}

.admin-health-action {
  gap: 7px;
  text-decoration: none !important;
}

.admin-health-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  padding: 14px;
  gap: 9px;
  border-left: 1px solid var(--if-border, #dce5ed);
  background: var(--if-surface-subtle, #f8fafc);
}

.admin-health-metric {
  min-width: 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  gap: 7px;
  padding: 14px 11px;
  border: 1px solid var(--if-border, #dce5ed);
  border-radius: 10px;
  background: #ffffff;
  text-align: center;
}

.admin-health-metric span {
  color: var(--if-text-muted, #64748b);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

.admin-health-metric strong {
  color: var(--if-primary, #041e42);
  font-size: 1.35rem;
  font-weight: 820;
  line-height: 1;
}

.admin-health-metric-critical strong {
  color: #b42318;
}

/* Eight destinations make a balanced, scannable admin directory. */
.admin-dashboard-management .if-management-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-dashboard-management .if-management-card,
.admin-dashboard-management .if-management-card:last-child:nth-child(odd) {
  grid-column: auto;
  min-height: 126px;
  align-content: start;
}

.admin-dashboard-management .if-management-card p {
  max-width: none;
}

@media (max-width: 1040px) {
  .admin-health-panel {
    grid-template-columns: 1fr;
  }

  .admin-health-metrics {
    border-top: 1px solid var(--if-border, #dce5ed);
    border-left: 0;
  }

  .admin-dashboard-management .if-management-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .admin-health-summary {
    padding: 19px;
  }

  .admin-health-metrics {
    grid-template-columns: 1fr;
  }

  .admin-health-metric {
    min-height: 76px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .admin-dashboard-management .if-management-grid {
    grid-template-columns: 1fr;
  }
}