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

/* ==========================================================================
   SOURCE: intelligent-forms.css
   ========================================================================== */
/* ============================================================
   INTELLIGENT FORMS - UNIFIED UI
   intelligent-forms.css
   ============================================================ */

/* ============================================================
   INTELLIGENT FORMS
   Global Application Styles
   ============================================================ */

/* ============================================================
   DESIGN TOKENS / DEFAULT BRANDING
   ============================================================ */

:root {
  --if-navy: #041e42;
  --if-blue: #0a7cb4;
  --if-green: #94f553;

  /*
     * Dynamic branding fallbacks.
     * MainLayout overrides these values from SiteSettings.
     */
  --if-primary: var(--if-navy);
  --if-secondary: var(--if-blue);
  --if-accent: var(--if-green);

  --if-slate-950: #0f172a;
  --if-slate-900: #1e293b;
  --if-slate-800: #334155;
  --if-slate-700: #475569;
  --if-slate-600: #566478;
  --if-slate-500: #616b78;
  --if-slate-400: #687280;
  --if-slate-300: #cbd5e1;
  --if-slate-200: #e2e8f0;
  --if-slate-100: #f1f5f9;
  --if-slate-50: #f8fafc;

  --if-white: #ffffff;

  --if-success: #247554;
  --if-success-bg: #eaf8f1;

  --if-danger: #b42318;
  --if-danger-bg: #fef3f2;

  --if-radius-sm: 7px;
  --if-radius-md: 9px;
  --if-radius-lg: 14px;

  --if-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);

  --if-shadow-sm: 0 3px 12px rgba(4, 30, 66, 0.06);

  --if-shadow-md: 0 8px 24px rgba(4, 30, 66, 0.09);

  --if-focus: var(--if-accent);

  /* ========================================================
       UNIFIED UI TOKENS
       ======================================================== */

  --if-page-bg: #f5f7fa;

  --if-surface: #ffffff;
  --if-surface-subtle: #f8fafc;

  --if-border: var(--if-slate-200);
  --if-border-strong: var(--if-slate-300);

  --if-text: var(--if-slate-950);
  --if-text-strong: var(--if-slate-800);
  --if-text-muted: var(--if-slate-600);

  --if-brand-soft: color-mix(in srgb, var(--if-primary), white 94%);

  --if-secondary-soft: color-mix(in srgb, var(--if-secondary), white 92%);

  --if-control-height: 44px;

  --if-radius-control: 8px;
  --if-radius-card: 14px;

  --if-shadow-card: var(--if-shadow-sm);
  --if-shadow-card-hover: var(--if-shadow-md);
  --if-shadow-modal: 0 28px 80px rgba(15, 23, 42, 0.28);
  --if-modal-backdrop: rgba(15, 23, 42, 0.52);

  --if-transition-fast: 130ms ease;

  --if-space-1: 0.25rem;
  --if-space-2: 0.5rem;
  --if-space-3: 0.75rem;
  --if-space-4: 1rem;
  --if-space-5: 1.5rem;
  --if-space-6: 2rem;
  --if-touch-target: 44px;
  --if-font-small: 0.875rem;
  --if-font-body: 1rem;
}

/* ============================================================
   GLOBAL
   ============================================================ */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: #f5f7fa;
  color: var(--if-slate-950);

  font-family: Inter, "Segoe UI", Arial, sans-serif;

  -webkit-font-smoothing: antialiased;
}

/* MainLayout owns the application scrollbar. Prevent UI scaling from
   creating a second document-level scrollbar around the scaled shell. */
body:has(> .if-site-shell) {
  overflow: hidden;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* ============================================================
   APPLICATION SHELL
   ============================================================ */

.if-site-shell {
  height: 100vh;
  height: 100dvh;

  /* The document body is intentionally locked to avoid a second
       scrollbar when UI scaling is enabled. This shell owns scrolling. */
  overflow-x: hidden;
  overflow-y: auto;

  display: flex;
  flex-direction: column;

  background: linear-gradient(180deg, #f7f9fc 0, #f4f6f9 300px, #f5f7fa 100%);
}

/* ============================================================
   MASTHEAD
   ============================================================ */

.if-masthead {
  position: relative;

  background: linear-gradient(
    135deg,
    var(--if-primary) 0%,
    color-mix(in srgb, var(--if-primary), black 14%) 100%
  );

  color: white;
}

.if-masthead::after {
  content: "";

  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 3px;

  background: linear-gradient(90deg, var(--if-secondary), var(--if-accent));
}

.if-masthead-inner {
  width: min(calc(100% - 64px), 1360px);

  min-height: 138px;

  margin: 0 auto;

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

  gap: 40px;

  padding: 20px 0;
}

/* ============================================================
   BRAND LOCKUP
   ============================================================ */

.if-brand-lockup {
  display: grid;
  min-height: 44px;

  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;

  column-gap: 20px;

  align-items: center;

  color: inherit;
  text-decoration: none;
}

.if-brand-logo {
  grid-column: 1;
  grid-row: 1 / 3;

  display: block;

  width: 88px;
  height: 88px;

  object-fit: contain;
}

.if-brand-title {
  grid-column: 2;
  grid-row: 1;

  align-self: end;

  color: white;

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

  line-height: 1.1;

  letter-spacing: -0.02em;
}

.if-brand-subtitle {
  grid-column: 2;
  grid-row: 2;

  align-self: start;

  margin-top: 5px;

  color: rgba(255, 255, 255, 0.76);

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

  letter-spacing: 0.02em;
}

/* ============================================================
   HEADER USER / ADMIN CLUSTER
   ============================================================ */

.if-user-cluster {
  display: inline-flex;
  align-items: stretch;

  padding: 5px;
  gap: 4px;

  border: 1px solid rgba(4, 30, 66, 0.08);
  border-radius: 999px;

  background: var(--if-surface);

  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
}

.if-user-segment {
  min-height: 40px;

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

  gap: 9px;

  padding: 0 16px;

  border: 0;
  border-radius: 999px;

  background: transparent;

  color: var(--if-primary);

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

  text-decoration: none;

  cursor: pointer;

  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.if-user-segment:hover {
  background: color-mix(in srgb, var(--if-primary), transparent 94%);

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

.if-user-link {
  text-decoration: none;
}

.if-user-link:hover {
  color: var(--if-primary);
}

.if-user-logout {
  color: #c73535;
}

.if-user-logout:hover {
  background: #fff1f1;
  color: #a61f1f;
}

.if-avatar {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 50%;

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

  color: var(--if-surface);

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

  letter-spacing: 0.04em;
}

/* ============================================================
   PRIMARY NAVIGATION
   ============================================================ */

.if-primary-nav {
  position: relative;
  z-index: 5;

  border-bottom: 1px solid #dce3eb;

  background: white;

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

.if-primary-nav-inner {
  width: min(calc(100% - 64px), 1360px);

  height: 58px;

  margin: 0 auto;

  display: flex;
  align-items: stretch;

  gap: 34px;
}

.if-primary-nav-link {
  position: relative;

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

  padding: 0 3px;

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

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

  text-decoration: none;

  transition: color 130ms ease;
}

.if-primary-nav-link:hover {
  color: var(--if-primary);
}

.if-primary-nav-link.active {
  color: var(--if-primary);
}

.if-primary-nav-link.active::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 3px;

  border-radius: 3px 3px 0 0;

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

/* ============================================================
   ADMINISTRATION SUB-NAVIGATION
   ============================================================ */

.if-admin-nav-region {
  border-bottom: 1px solid #dde4ec;

  background: linear-gradient(180deg, #f9fbfd 0%, #f3f6f9 100%);
}

.if-admin-nav-container {
  width: min(calc(100% - 64px), 1360px);

  margin: 0 auto;

  padding: 13px 0;
}

.if-admin-tabs {
  display: grid;

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

  gap: 4px;

  padding: 4px;

  border: 1px solid #dce3eb;
  border-radius: 10px;

  background: #eaf0f5;
}

.if-admin-tab {
  min-height: 40px;

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

  gap: 6px;

  padding: 0 9px;

  border-radius: 7px;

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

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

  text-align: center;
  text-decoration: none;

  white-space: nowrap;

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

.if-admin-tab-icon {
  font-size: 0.78rem;
}

.if-admin-tab:hover {
  color: var(--if-primary);

  background: rgba(255, 255, 255, 0.58);
}

.if-admin-tab.active {
  background: white;

  color: var(--if-primary);

  box-shadow: 0 1px 4px rgba(4, 30, 66, 0.1);
}

.if-admin-tab-icon {
  font-size: 0.85rem;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */

.if-content {
  width: 100%;

  /* Required by Form Builder's flex-fill layout. */
  flex: 1 1 auto;
  min-height: 0;

  display: flex;
  flex-direction: column;
}

.if-page {
  width: min(calc(100% - 64px), 1360px);

  margin: 0 auto;

  padding: 28px 0 64px;
}

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

.if-eyebrow,
.forms-page-eyebrow,
.brand-section-eyebrow {
  margin: 0 0 5px;

  color: var(--if-secondary);

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

  letter-spacing: 0.15em;

  text-transform: uppercase;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.if-btn-primary:hover {
  background: color-mix(in srgb, var(--if-primary), white 8%);

  color: white;

  transform: translateY(-1px);
}

.if-btn-primary:disabled {
  opacity: 0.55;

  cursor: not-allowed;

  transform: none;
}

/* ============================================================
   DASHBOARD
   ============================================================ */

.if-dashboard-stats {
  display: grid;

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

  gap: 16px;

  margin-bottom: 32px;
}

.if-dashboard-stat-card {
  min-height: 118px;

  display: flex;
  align-items: center;

  gap: 16px;

  padding: 20px;

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

  background: white;

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

.if-dashboard-stat-icon {
  width: 46px;
  height: 46px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border-radius: 11px;

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

  color: var(--if-secondary);

  font-size: 1.15rem;
}

.if-dashboard-stat-label {
  color: var(--if-slate-600);

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

.if-dashboard-stat-value {
  margin-top: 4px;

  color: var(--if-primary);

  font-size: 1.7rem;
  font-weight: 760;

  line-height: 1;
}

.if-dashboard-section {
  margin-top: 30px;
}

.if-section-heading {
  margin-bottom: 14px;
}

.if-section-heading h2 {
  margin: 0;

  color: var(--if-primary);

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

.if-section-heading p {
  margin: 5px 0 0;

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

  font-size: 0.875rem;
}

/* ============================================================
   MANAGEMENT CARDS
   ============================================================ */

.if-management-grid {
  display: grid;

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

  gap: 16px;
}

.if-management-card {
  min-height: 116px;

  display: grid;

  grid-template-columns: 48px 1fr auto;

  align-items: center;

  gap: 16px;

  padding: 20px;

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

  background: white;

  color: inherit;

  text-decoration: none;

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

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

.if-management-card:hover {
  border-color: color-mix(in srgb, var(--if-secondary), white 55%);

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

  transform: translateY(-2px);
}

.if-management-card-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 11px;

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

  color: var(--if-secondary);

  font-size: 1.1rem;
}

.if-management-card h3 {
  margin: 0;

  color: var(--if-primary);

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

.if-management-card p {
  margin: 5px 0 0;

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

  font-size: 0.875rem;

  line-height: 1.45;
}

.if-management-arrow {
  color: var(--if-secondary);

  font-size: 1.15rem;
}

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

.forms-page {
  width: min(calc(100% - 64px), 1360px);

  margin: 0 auto;

  padding: 38px 0 70px;
}

.forms-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 28px;
}

.forms-page-eyebrow {
  margin-bottom: 5px;
}

.forms-page-title {
  margin: 0;

  color: var(--if-primary);

  font-size: 2.2rem;
  font-weight: 760;

  line-height: 1.08;

  letter-spacing: -0.025em;
}

.forms-page-description {
  margin: 9px 0 0;

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

  font-size: 0.875rem;
}

.forms-create-button {
  min-height: 44px;

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

  gap: 9px;

  padding: 0 19px;

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

  background: var(--if-primary);

  color: white;

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

  text-decoration: none;

  box-shadow: 0 4px 12px color-mix(in srgb, var(--if-primary), transparent 78%);

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

.forms-create-button:hover {
  background: color-mix(in srgb, var(--if-primary), white 8%);

  color: white;

  transform: translateY(-1px);
}

/* ============================================================
   FORMS TOOLBAR
   ============================================================ */

.forms-toolbar {
  display: grid;

  grid-template-columns:
    minmax(260px, 340px)
    auto
    1fr;

  align-items: center;

  gap: 26px;

  margin-bottom: 14px;

  padding: 14px 18px;

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

  background: white;

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

.forms-search {
  position: relative;
}

.forms-search-icon {
  position: absolute;

  left: 14px;
  top: 50%;

  z-index: 1;

  color: var(--if-primary);

  transform: translateY(-50%);

  pointer-events: none;
}

.forms-search input {
  width: 100%;
  height: 42px;

  padding: 0 14px 0 41px;

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

  background: white;

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

  font-size: 0.875rem;

  outline: none;

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

.forms-search input::placeholder {
  color: var(--if-slate-400);
}

.forms-search input:focus {
  border-color: var(--if-secondary);

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

.forms-filters {
  display: flex;
  align-items: center;

  gap: 8px;
}

.forms-filter {
  min-height: 37px;

  padding: 0 17px;

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

  background: #eef2f6;

  color: var(--if-primary);

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

  cursor: pointer;

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

.forms-filter:hover {
  border-color: color-mix(in srgb, var(--if-primary), white 55%);

  background: #e7edf3;
}

.forms-filter.active {
  border-color: var(--if-primary);

  background: var(--if-primary);

  color: white;

  box-shadow: 0 3px 8px color-mix(in srgb, var(--if-primary), transparent 80%);
}

.forms-count {
  justify-self: end;

  color: var(--if-primary);

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

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

.forms-table-card,
.if-table-card {
  overflow: hidden;

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

  background: white;

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

.forms-table-scroll {
  overflow-x: auto;
}

.forms-table {
  width: 100%;

  border-collapse: collapse;
}

.forms-table th {
  height: 54px;

  padding: 0 20px;

  background: linear-gradient(
    90deg,
    var(--if-primary) 0%,
    color-mix(in srgb, var(--if-primary), white 10%) 100%
  );

  color: white;

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

  text-align: left;

  letter-spacing: 0.01em;
}

.forms-table td {
  padding: 18px 20px;

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

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

  font-size: 0.875rem;

  vertical-align: middle;
}

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

.forms-table tbody tr:hover {
  background: #fafcfe;
}

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

.if-form-name {
  color: var(--if-slate-950);

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

.if-form-description {
  max-width: 430px;

  margin-top: 4px;

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

  font-size: 0.875rem;

  line-height: 1.4;
}

.if-version-number {
  color: var(--if-slate-800);

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

.if-updated-date {
  color: var(--if-slate-800);

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

.if-updated-time {
  margin-top: 3px;

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

  font-size: 0.875rem;
}

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

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

.if-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 25px;

  padding: 0 10px;

  border-radius: 999px;

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

.if-status-draft {
  border: 1px solid #d8dee8;

  background: #f1f4f8;

  color: #536174;
}

.if-status-published {
  border: 1px solid color-mix(in srgb, var(--if-accent), white 45%);

  background: color-mix(in srgb, var(--if-accent), white 78%);

  color: color-mix(in srgb, var(--if-primary), black 8%);
}

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

.if-action-btn {
  min-height: 32px;

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

  gap: 6px;

  padding: 0 11px;

  border: 1px solid color-mix(in srgb, var(--if-primary), white 15%);

  border-radius: 7px;

  background: white;

  color: var(--if-primary);

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

  text-decoration: none;

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

.if-action-btn:hover {
  background: var(--if-primary);

  color: white;

  transform: translateY(-1px);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.forms-empty,
.if-empty-state {
  min-height: 310px;

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

  padding: 42px;

  text-align: center;
}

.forms-empty-icon,
.if-empty-icon {
  width: 62px;
  height: 62px;

  display: grid;
  place-items: center;

  margin-bottom: 15px;

  border-radius: 50%;

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

  color: var(--if-secondary);

  font-size: 1.3rem;
}

.forms-empty h2,
.if-empty-state h2 {
  margin: 0;

  color: var(--if-primary);

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

.forms-empty p,
.if-empty-state p {
  margin: 7px 0 19px;

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

  font-size: 0.875rem;
}

.forms-table-footer {
  padding: 15px 20px;

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

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

  font-size: 0.875rem;
}

/* ============================================================
   BRANDING ADMINISTRATION
   ============================================================ */

.branding-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.55fr)
    minmax(300px, 0.75fr);

  gap: 24px;

  align-items: start;
}

.branding-settings {
  display: flex;
  flex-direction: column;

  gap: 18px;
}

.brand-card {
  padding: 24px;

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

  background: white;

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

.brand-card-heading {
  margin-bottom: 24px;
}

.brand-card-heading h2,
.branding-preview-heading h2 {
  margin: 3px 0 0;

  color: var(--if-primary);

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

.brand-card-heading > div > p:last-child {
  margin: 6px 0 0;

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

  font-size: 0.875rem;

  line-height: 1.45;
}

.brand-section-eyebrow {
  margin-bottom: 0;
}

/* ============================================================
   BRANDING FIELDS
   ============================================================ */

.brand-fields {
  display: grid;

  gap: 20px;
}

.brand-field label,
.brand-color-setting label {
  display: block;

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

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

.brand-field-help {
  margin: 4px 0 8px;

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

  font-size: 0.875rem;

  line-height: 1.4;
}

.brand-input {
  width: 100%;
  height: 44px;

  padding: 0 13px;

  border: 1px solid var(--if-slate-300);
  border-radius: 9px;

  background: linear-gradient(180deg, #fcfdfe 0%, #f7f9fc 100%);

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

  font-size: 0.875rem;

  outline: none;

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

.brand-input:focus {
  border-color: var(--if-secondary);

  background: white;

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

/* ============================================================
   BRANDING LOGO
   ============================================================ */

.brand-logo-editor {
  display: grid;

  grid-template-columns: 150px 1fr;

  gap: 24px;

  align-items: center;
}

.brand-current-logo {
  min-height: 130px;

  display: grid;
  place-items: center;

  padding: 16px;

  border-radius: 12px;

  background: linear-gradient(
    135deg,
    var(--if-primary),
    color-mix(in srgb, var(--if-primary), black 14%)
  );
}

.brand-current-logo img {
  display: block;

  max-width: 110px;
  max-height: 100px;

  object-fit: contain;
}

.brand-logo-upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.brand-upload-button {
  position: relative;

  min-height: 40px;

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

  gap: 8px;

  padding: 0 15px;

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

  background: white;

  color: var(--if-primary);

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

  cursor: pointer;

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

.brand-upload-button:hover {
  background: var(--if-primary);

  color: white;
}

.brand-upload-button input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  overflow: hidden;
}

.brand-logo-upload > p {
  margin: 9px 0 0;

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

  font-size: 0.68rem;
}

.brand-selected-file {
  margin-top: 8px;

  color: var(--if-secondary);

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

/* ============================================================
   BRANDING COLORS
   ============================================================ */

.brand-color-grid {
  display: grid;

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

  gap: 20px;
}

/* Keep controls aligned when neighboring color descriptions wrap differently. */
.brand-color-setting {
  min-width: 0;

  display: grid;

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

.brand-color-setting .brand-field-help {
  align-self: stretch;
}

.brand-color-input-row {
  display: grid;

  grid-template-columns: 46px 1fr;

  gap: 9px;
}

.brand-color-picker {
  width: 46px;
  height: 44px;

  padding: 3px;

  border: 1px solid var(--if-slate-300);
  border-radius: 9px;

  background: white;

  cursor: pointer;
}

.brand-hex-input {
  font-family: Consolas, "Courier New", monospace;

  text-transform: uppercase;
}

/* ============================================================
   BRANDING PREVIEW
   ============================================================ */

.branding-preview-sticky {
  position: sticky;
  top: 12px;
  display: grid;
  grid-template-rows: repeat(6, auto);
  gap: 7px;
  height: auto;
  max-width: 100%;
  max-height: calc(var(--if-ui-viewport-height, 100dvh) - 224px);
  min-height: 0;
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-padding-bottom: 16px;
  border: 1px solid var(--if-slate-200);
  border-radius: var(--if-radius-card);
  background: white;
  box-shadow: var(--if-shadow-sm);
}

.branding-preview-panel {
  align-self: stretch;
  min-width: 0;
}

.branding-preview-heading {
  position: relative;
  margin-bottom: 0;
  padding-right: 92px;
}

.branding-preview-scale {
  position: absolute;
  top: 1px;
  right: 0;
  color: var(--if-slate-500);
  font-size: 0.875rem;
  font-weight: 700;
}

.brand-preview {
  min-height: 96px;

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

  padding: 10px;

  border-radius: 12px;

  background: linear-gradient(
    135deg,
    var(--preview-primary),
    color-mix(in srgb, var(--preview-primary), black 18%)
  );

  color: white;

  text-align: center;

  box-shadow: 0 12px 30px rgba(4, 30, 66, 0.14);
}

.brand-preview img {
  max-width: 68px;
  max-height: 44px;

  margin-bottom: 5px;

  object-fit: contain;
}

.brand-preview-header {
  font-size: 0.92rem;
  font-weight: 750;
}

.brand-preview-org {
  margin-top: 2px;

  color: rgba(255, 255, 255, 0.82);

  font-size: 0.875rem;
}

.brand-preview-colors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 0;
}

.brand-preview-colors > div {
  display: flex;
  align-items: center;

  gap: 6px;

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

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

.brand-preview-colors span {
  width: 16px;
  height: 16px;

  border: 1px solid var(--if-slate-200);
  border-radius: 6px;
}

/* ============================================================
   BRANDING SAVE / STATUS
   ============================================================ */

.branding-save-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 16px;

  padding: 6px 0 20px;
}

.branding-preview-actions {
  position: sticky;
  bottom: -10px;
  z-index: 2;
  min-height: 40px;
  margin: 0 -10px -10px;
  padding: 7px 10px;
  border-top: 1px solid var(--if-slate-200);
  background: var(--if-surface-subtle);
}

.branding-preview-actions .if-btn {
  min-height: 34px;
  padding: 0 14px;
  font-size: 0.875rem;
}

.brand-status {
  margin-right: auto;

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

.brand-status-success {
  color: var(--if-success);
}

.brand-status-error {
  color: var(--if-danger);
}

/* ============================================================
   ACCESSIBILITY / FOCUS
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--if-accent);
  outline-offset: 2px;
}

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

@media (max-width: 1000px) {
  .if-dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .branding-layout {
    grid-template-columns: 1fr;
  }

  .branding-preview-sticky {
    position: static;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  .branding-preview-actions {
    position: static;
  }

  .brand-color-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   RESPONSIVE — SMALL TABLET
   ============================================================ */

@media (max-width: 850px) {
  .if-masthead-inner,
  .if-primary-nav-inner,
  .if-admin-nav-container,
  .if-page,
  .forms-page {
    width: calc(100% - 32px);
  }

  .if-masthead-inner {
    align-items: flex-start;
    flex-direction: column;

    gap: 20px;

    padding: 24px 0;
  }

  .if-user-cluster {
    width: 100%;
  }

  .if-user-segment {
    flex: 1;
  }

  .if-primary-nav-inner {
    overflow-x: auto;

    gap: 24px;
  }

  .if-admin-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .forms-toolbar {
    grid-template-columns: 1fr;

    gap: 14px;
  }

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

  .if-page-heading,
  .forms-page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .if-management-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   RESPONSIVE -MOBILE
   ============================================================ */

@media (max-width: 600px) {
  .if-brand-logo {
    width: 70px;
    height: 70px;
  }

  .if-brand-title {
    font-size: 1.35rem;
  }

  .if-user-cluster {
    flex-direction: column;
  }

  .if-user-segment {
    justify-content: flex-start;

    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }

  .if-user-segment:last-child {
    border-bottom: 0;
  }

  .if-dashboard-stats {
    grid-template-columns: 1fr;
  }

  .if-admin-tabs {
    grid-template-columns: 1fr;
  }

  .brand-logo-editor {
    grid-template-columns: 1fr;
  }

  .forms-filters {
    flex-wrap: wrap;
  }
}
/* ============================================================
   LOGIN
   ============================================================ */

.auth-shell {
  min-height: 100vh;

  display: grid;

  grid-template-columns:
    minmax(360px, 42%)
    1fr;

  background: #f5f7fa;
}

/* Authentication screens use the application's new 110% visual baseline.
   Compensated viewport dimensions prevent the browser zoom from creating
   an extra document scrollbar. */
.auth-shell-scaled {
  width: 90.9091vw;
  min-height: 90.9091vh;
  zoom: 1.1;
}

.auth-shell-scaled .auth-brand-panel,
.auth-shell-scaled .auth-content {
  min-height: 90.9091vh;
}

/* Brand side */

.auth-brand-panel {
  min-height: 100vh;

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

  padding: 48px;

  background: linear-gradient(
    145deg,
    var(--if-primary) 0%,
    color-mix(in srgb, var(--if-primary), black 16%) 100%
  );

  color: white;
}

.auth-brand-content {
  text-align: center;
}

.auth-logo {
  display: block;

  width: 120px;
  height: 120px;

  margin: 0 auto 24px;

  object-fit: contain;
}

.auth-brand-name {
  font-size: 1.8rem;
  font-weight: 760;

  letter-spacing: -0.025em;
}

.auth-organization-name {
  margin-top: 8px;

  color: rgba(255, 255, 255, 0.76);

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

/* Login side */

.auth-content {
  min-height: 100vh;

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

  padding: 48px;
}

.auth-login-card {
  width: min(100%, 430px);
}

.auth-login-heading {
  margin-bottom: 28px;
}

.auth-eyebrow {
  margin: 0 0 6px;

  color: var(--if-secondary);

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

  letter-spacing: 0.15em;
}

.auth-login-heading h1 {
  margin: 0;

  color: var(--if-primary);

  font-size: 2rem;
  font-weight: 760;

  letter-spacing: -0.025em;
}

.auth-login-heading > p:last-child {
  margin: 9px 0 0;

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

  font-size: 0.875rem;

  line-height: 1.5;
}

/* Error */

.auth-error {
  margin-bottom: 18px;

  padding: 12px 14px;

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

  background: #fef3f2;

  color: var(--if-danger);

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

/* Fields */

.auth-form {
  display: grid;

  gap: 18px;
}

.auth-field label {
  display: block;

  margin-bottom: 7px;

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

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

.auth-field input {
  width: 100%;
  height: 46px;

  padding: 0 13px;

  border: 1px solid var(--if-slate-300);
  border-radius: 9px;

  background: white;

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

  outline: none;

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

.auth-field input:focus {
  border-color: var(--if-secondary);

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

/* Submit */

.auth-submit {
  width: 100%;
  height: 46px;

  margin-top: 4px;

  border: 0;
  border-radius: 9px;

  background: var(--if-primary);

  color: white;

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

  cursor: pointer;

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

.auth-submit:hover {
  background: color-mix(in srgb, var(--if-primary), white 8%);
}

/* Logout form */

.if-logout-form {
  display: contents;
}

/* Access denied */

.auth-access-denied {
  min-height: 400px;

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

  text-align: center;
}

.auth-access-icon {
  width: 60px;
  height: 60px;

  display: grid;
  place-items: center;

  margin-bottom: 16px;

  border-radius: 50%;

  background: #fef3f2;

  color: var(--if-danger);

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

.auth-access-denied h1 {
  margin: 0;

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

.auth-access-denied p {
  margin: 8px 0 20px;

  color: var(--if-slate-600);
}

@media (max-width: 800px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-brand-panel {
    min-height: auto;

    padding: 36px;
  }

  .auth-shell-scaled .auth-brand-panel,
  .auth-shell-scaled .auth-content {
    min-height: auto;
  }

  .auth-logo {
    width: 80px;
    height: 80px;
  }

  .auth-content {
    min-height: auto;

    padding: 42px 24px;
  }
}
/* ============================================================
   CREATE FORM
   ============================================================ */

.form-create-card {
  max-width: 760px;

  margin-top: 28px;

  overflow: hidden;

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

  background: var(--if-surface);

  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}

.form-create-card-header {
  padding: 22px 24px;

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

  background: #fafbfc;
}

.form-create-card-header h2 {
  margin: 0;

  color: var(--if-primary);

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

.form-create-card-header p {
  margin: 6px 0 0;

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

  font-size: 0.875rem;

  line-height: 1.5;
}

/* ============================================================
   BODY
   ============================================================ */

.form-create-body {
  display: grid;

  gap: 22px;

  padding: 24px;
}

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

.form-create-field {
  display: grid;

  gap: 7px;
}

.form-create-field label {
  color: var(--if-slate-900);

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

.form-create-field label span {
  color: var(--if-danger);
}

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

  border: 1px solid var(--if-slate-300);
  border-radius: 9px;

  background: var(--if-surface);

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

  font: inherit;

  font-size: 0.875rem;

  outline: none;

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

.form-create-input {
  height: 44px;

  padding: 0 13px;
}

.form-create-textarea {
  min-height: 110px;

  padding: 12px 13px;

  resize: vertical;
}

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

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

.form-create-help {
  color: var(--if-slate-500);

  font-size: 0.875rem;

  line-height: 1.5;
}

/* ============================================================
   VALIDATION
   ============================================================ */

.form-create-field .validation-message {
  color: var(--if-danger);

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

.form-create-errors {
  margin: 20px 24px 0;

  padding: 13px 15px;

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

  background: #fef3f2;

  color: var(--if-danger);

  font-size: 0.875rem;
}

.form-create-errors strong {
  font-weight: 750;
}

.form-create-errors ul {
  margin: 7px 0 0;

  padding-left: 18px;
}

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

.form-create-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 9px;

  padding-top: 4px;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {
  .form-create-card {
    max-width: none;
  }

  .form-create-body {
    padding: 20px;
  }

  .form-create-actions {
    flex-direction: column-reverse;
  }

  .form-create-actions .if-btn {
    width: 100%;
  }
}

@media print {
  .submission-audit-page .submission-audit-card {
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   STANDARD DATA TABLE SYSTEM
   ============================================================ */

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

.if-table-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
   ============================================================ */

.if-table-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);
}

.if-table-search > span {
  position: absolute;

  left: 13px;

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

  font-size: 1rem;

  pointer-events: none;
}

.if-table-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;
}

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

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

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

.if-table-filters {
  display: flex;
  align-items: center;

  gap: 7px;
}

.if-table-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;
}

.if-table-filter:hover {
  border-color: #bcc8d5;

  background: #e5ebf1;
}

.if-table-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;
}

.if-table-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);
}

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

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

/* ============================================================
   COUNT
   ============================================================ */

.if-table-count {
  justify-self: end;

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

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

  white-space: nowrap;
}

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

.if-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);
}

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

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

.if-data-table {
  width: 100%;

  border-collapse: collapse;

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

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

.if-data-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;
}

.if-data-table td {
  padding: 15px 18px;

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

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

  font-size: 0.875rem;

  vertical-align: middle;
}

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

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

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

/* ============================================================
   PRIMARY / SECONDARY CELL TEXT
   ============================================================ */

.if-table-primary {
  color: var(--if-text);

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

.if-table-secondary {
  margin-top: 3px;

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

  font-size: 0.875rem;

  line-height: 1.45;
}

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

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

  gap: 6px;

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

  white-space: nowrap;
}

.if-table-status::before {
  content: "";

  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;
}

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

.if-table-status-active::before {
  background: #26a269;

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

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

.if-table-status-inactive::before {
  background: #d64545;
}

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

.if-table-badge {
  display: inline-flex;
  align-items: center;

  padding: 5px 10px;

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

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

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

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

  white-space: nowrap;
}

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

.if-table-actions {
  display: flex;
  align-items: center;

  gap: 7px;

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

  gap: 7px;
}

.if-table-action {
  min-width: 34px;
  height: 34px;

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

  gap: 6px;

  padding: 0 10px;

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

  background: var(--if-surface);

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

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

  cursor: pointer;

  text-decoration: none;

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

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

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

  color: var(--if-surface);

  transform: translateY(-1px);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.if-table-empty {
  min-height: 300px;

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

  padding: 40px;

  text-align: center;
}

.if-table-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;
}

.if-table-empty h2 {
  margin: 0;

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

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

.if-table-empty p {
  margin: 7px 0 0;

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

  font-size: 0.875rem;
}

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

@media (max-width: 1000px) {
  .if-table-toolbar {
    grid-template-columns: 1fr;

    gap: 12px;
  }

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

@media (max-width: 700px) {
  .if-table-filters {
    flex-wrap: wrap;
  }
}

/* ============================================================
   FORM MANAGEMENT ACCESS
   ============================================================ */

.forms-access-note {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-bottom: 16px;

  padding: 10px 13px;

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

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

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

  font-size: 0.875rem;
}

.forms-access-note strong {
  color: var(--if-primary, #041e42);

  font-size: 0.875rem;
}

.forms-ownership-hint {
  margin-top: 5px;

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

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

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

.forms-delete-action,
.builder-delete-form-button {
  border-color: #f0c7c3 !important;
  background: #fff5f4 !important;
  color: var(--if-danger) !important;
}

.forms-delete-action:hover:not(:disabled),
.builder-delete-form-button:hover:not(:disabled) {
  border-color: var(--if-danger) !important;
  background: #fdedec !important;
  color: #912018 !important;
}

/* ============================================================
   DELETE MODALS
   ============================================================ */

.forms-delete-modal,
.forms-import-modal,
.builder-delete-form-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;

  padding: 24px;

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

  background: var(--if-surface);

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

.forms-import-modal {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 24px;
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-card);
  background: var(--if-surface);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.2);
}

.forms-import-body {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.forms-import-warning {
  padding: 11px 13px;
  border: 1px solid #b9ddf0;
  border-radius: var(--if-radius-control);
  background: #f1f9fd;
  color: var(--if-primary);
  font-size: 0.82rem;
  line-height: 1.5;
}

.forms-transfer-notice {
  margin-bottom: 16px;
  padding: 11px 14px;
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-control);
  font-size: 0.875rem;
  font-weight: 650;
}

.forms-transfer-notice.is-success {
  border-color: #a7d8bf;
  background: #f0faf5;
  color: #17613e;
}

.forms-transfer-notice.is-error {
  border-color: #f0c7c3;
  background: #fff5f4;
  color: var(--if-danger);
}

.forms-delete-modal-header h2,
.builder-delete-form-modal-header h2 {
  margin: 4px 0 6px;

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

  font-size: 1.05rem;
}

.forms-delete-modal-header p:last-child,
.builder-delete-form-modal-header p:last-child {
  margin: 0;

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

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

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

.forms-delete-summary {
  display: grid;

  gap: 8px;

  margin-top: 18px;
}

.forms-delete-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding: 9px 11px;

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

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

.forms-delete-summary span {
  color: var(--if-text-muted);

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

.forms-delete-summary strong {
  color: var(--if-text-strong);

  font-size: 0.875rem;

  text-align: right;
}

/* ============================================================
   WARNINGS / ERRORS
   ============================================================ */

.forms-delete-warning,
.builder-delete-form-warning {
  margin-top: 16px;

  padding: 11px 13px;

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

  background: #fff9ee;

  color: #92400e;

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

.forms-delete-error,
.builder-delete-form-error {
  margin-top: 16px;

  padding: 11px 13px;

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

  background: #fff5f4;

  color: var(--if-danger);

  font-size: 0.875rem;
}

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

.forms-delete-actions,
.builder-delete-form-actions {
  display: flex;
  justify-content: flex-end;

  gap: 10px;

  margin-top: 20px;
}

.forms-delete-confirm,
.builder-delete-form-confirm {
  min-height: 36px;

  padding: 8px 14px;

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

  background: var(--if-danger);

  color: var(--if-surface);

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

  cursor: pointer;
}

.forms-delete-confirm:hover:not(:disabled),
.builder-delete-form-confirm:hover:not(:disabled) {
  border-color: #912018;
  background: #912018;
}

.forms-delete-confirm:disabled,
.builder-delete-form-confirm:disabled,
.builder-delete-form-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

@media (max-width: 600px) {
  .forms-delete-actions,
  .builder-delete-form-actions {
    flex-direction: column-reverse;
  }

  .forms-delete-actions > *,
  .builder-delete-form-actions > * {
    width: 100%;
  }
}

/* ============================================================
   UNIFIED APPLICATION UI CONTRACT
   ============================================================ */

/*
 * Page headings stay neutral across the application.
 * Institution branding is carried through text, actions, focus
 * states, navigation, cards, and subtle accents.
 */

.if-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 30px;
  padding: 0;

  border: 0;

  background: transparent;

  box-shadow: none;
}

.if-page-heading h1 {
  margin: 0;

  color: var(--if-primary);

  font-size: 2.2rem;
  font-weight: 760;

  line-height: 1.08;

  letter-spacing: -0.025em;
  color: var(--if-primary);
}

.if-page-heading > div > p:last-child {
  margin: 9px 0 0;

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

  font-size: 0.875rem;
  color: var(--if-text-muted);
}

/* Shared card surfaces */

.if-card,
.if-table-card,
.forms-table-card {
  border-color: var(--if-border);
  border-radius: var(--if-radius-card);

  background: var(--if-surface);

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

/* Shared controls */

.if-input,
.if-select,
.if-textarea,
input.if-input,
select.if-select,
textarea.if-textarea {
  border-color: var(--if-border-strong);
  border-radius: var(--if-radius-control);

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

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

  outline: none;

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

/* Shared buttons */

.if-btn {
  min-height: 42px;

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

  gap: 8px;

  padding: 0 17px;

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

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

  text-decoration: none;

  cursor: pointer;

  transition:
    background-color 130ms ease,
    border-color 130ms ease,
    color 130ms ease,
    box-shadow 130ms ease,
    transform 130ms ease;
  border-radius: var(--if-radius-control);
}

.if-btn-primary {
  border-color: var(--if-primary);

  background: var(--if-primary);

  color: white;

  box-shadow: 0 4px 10px color-mix(in srgb, var(--if-primary), transparent 78%);
  border-color: var(--if-primary);

  background: var(--if-primary);

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

.if-btn-primary:hover:not(:disabled) {
  border-color: var(--if-secondary);

  background: var(--if-secondary);

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

.if-btn-secondary {
  border-color: var(--if-border-strong);
  background: var(--if-surface);
  color: var(--if-primary);
  box-shadow: none;
}

.if-btn-secondary:hover:not(:disabled) {
  border-color: var(--if-secondary);
  background: var(--if-secondary-soft);
  color: var(--if-primary);
}

.if-btn-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Shared subtle section header */

.if-section-header {
  border-bottom: 1px solid var(--if-border);

  background: linear-gradient(
    135deg,
    var(--if-brand-soft),
    var(--if-surface) 72%
  );
}

/* Shared keyboard focus */

:where(input, select, textarea, button, a):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--if-secondary), transparent 18%);

  outline-offset: 2px;
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   INTELLIGENT FORMS -SHARED STATUS PILL CONTRACT
   Authoritative shared status styles. Page styles should only add
   page-specific layout, never redefine this visual contract.
   ============================================================ */

:root {
  --if-status-neutral-border: #d8dee8;
  --if-status-neutral-bg: #f1f4f8;
  --if-status-neutral-text: #536174;

  --if-status-success-border: #b7e5ce;
  --if-status-success-bg: #eaf8f1;
  --if-status-success-text: #18794e;

  --if-status-published-border: #c5ded5;
  --if-status-published-bg: #f2f8f6;
  --if-status-published-text: #125c47;
  --if-status-published-dot: #20966f;

  --if-status-danger-border: #f0c7c3;
  --if-status-danger-bg: #fef3f2;
  --if-status-danger-text: #b42318;

  --if-status-warning-border: #fed7aa;
  --if-status-warning-bg: #fff7ed;
  --if-status-warning-text: #c2410c;

  --if-status-review-border: color-mix(
    in srgb,
    var(--if-secondary, #0a7cb4),
    white 62%
  );
  --if-status-review-bg: var(--if-secondary-soft, #f2f8fb);
  --if-status-review-text: var(--if-secondary, #0a7cb4);
}

.if-status-badge,
.home-status-badge,
.available-form-status-badge,
.if-submissions-status,
.if-table-status,
.submission-status-submitted,
.submission-status-accepted {
  min-height: 24px !important;

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

  padding: 0 9px !important;

  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 999px !important;

  font-size: 0.56rem !important;
  font-weight: 750 !important;
  line-height: 1 !important;

  white-space: nowrap !important;
}

/*
 * Published is the primary content lifecycle state. Give it a quieter,
 * brand-compatible treatment than the generic success badge while keeping
 * accepted/completed workflow states on the shared success palette.
 */
.if-status-published {
  gap: 6px !important;
  padding-inline: 8px 10px !important;
  border-color: var(--if-status-published-border) !important;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    var(--if-status-published-bg) 100%
  ) !important;
  color: var(--if-status-published-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(15, 92, 71, 0.05);
  letter-spacing: 0.01em;
}

.if-status-published::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: var(--if-status-published-dot);
  box-shadow: 0 0 0 1px rgba(32, 150, 111, 0.2);
  content: "";
}

/* Draft / inactive / neutral */
.if-status-draft,
.home-status-draft {
  border-color: var(--if-status-neutral-border) !important;
  background: var(--if-status-neutral-bg) !important;
  color: var(--if-status-neutral-text) !important;
}

/* Submitted / accepted / complete */
.home-status-success,
.available-form-status-success,
.if-submissions-status,
.submission-status-submitted,
.submission-status-accepted {
  border-color: var(--if-status-success-border) !important;
  background: var(--if-status-success-bg) !important;
  color: var(--if-status-success-text) !important;
}

/* Rejected / failed */
.home-status-danger,
.available-form-status-danger {
  border-color: var(--if-status-danger-border) !important;
  background: var(--if-status-danger-bg) !important;
  color: var(--if-status-danger-text) !important;
}

/* Pending / warning */
.home-status-warning,
.available-form-status-warning {
  border-color: var(--if-status-warning-border) !important;
  background: var(--if-status-warning-bg) !important;
  color: var(--if-status-warning-text) !important;
}

/* Returned / review / in progress */
.home-status-review,
.available-form-status-review {
  border-color: var(--if-status-review-border) !important;
  background: var(--if-status-review-bg) !important;
  color: var(--if-status-review-text) !important;
}

/* ============================================================
   INTELLIGENT FORMS -SHARED PAGE HEADING CONTRACT
   ============================================================ */

.if-page-heading,
.home-page-heading,
.submissions-page-heading {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;

  gap: 24px !important;

  margin: 0 0 26px !important;
  padding: 0 !important;

  overflow: visible !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

.if-page-heading h1,
.home-page-heading h1,
.submissions-page-heading h1 {
  margin: 0 !important;

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

  font-size: 2rem !important;
  font-weight: 760 !important;

  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
}

.if-page-heading > div > p:last-child,
.home-page-heading > div > p:last-child,
.submissions-page-heading p:not(.if-eyebrow) {
  max-width: 800px;

  margin: 8px 0 0 !important;

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

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

.if-page-heading .if-eyebrow,
.home-page-heading .if-eyebrow,
.submissions-page-heading .if-eyebrow {
  color: var(--if-secondary, #0a7cb4) !important;
}

@media (max-width: 760px) {
  .if-page-heading,
  .home-page-heading,
  .submissions-page-heading {
    align-items: stretch !important;
    flex-direction: column !important;

    gap: 14px !important;
  }

  .if-page-heading h1,
  .home-page-heading h1,
  .submissions-page-heading h1 {
    font-size: 1.65rem !important;
  }
}

/* ============================================================
   INTELLIGENT FORMS -SHARED FORM DOCUMENT HEADER CONTRACT
   Published form, builder preview, and submission review.
   ============================================================ */

.builder-form-preview-header,
.submission-document-header {
  padding: 28px 32px 24px !important;

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

  background: linear-gradient(
    180deg,
    var(--if-surface, #ffffff) 0%,
    var(--if-surface-subtle, #f8fafc) 100%
  ) !important;
}

.builder-form-preview-header h2,
.submission-document-header h1 {
  margin: 0 !important;

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

  font-size: 1.35rem !important;
  font-weight: 780 !important;

  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

.builder-form-preview-header p,
.submission-document-header p {
  max-width: 720px !important;

  margin: 8px 0 0 !important;

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

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

@media (max-width: 700px) {
  .builder-form-preview-header,
  .submission-document-header {
    padding: 23px 22px 20px !important;
  }

  .builder-form-preview-header h2,
  .submission-document-header h1 {
    font-size: 1.2rem !important;
  }
}

/* ============================================================
   GLOBAL ADMIN / DATA LIST SYSTEM -SEMANTIC EXTENSIONS
   These extend the existing .if-table-* system so feature pages
   do not need to invent their own table, filter, action, or badge
   appearance.
   ============================================================ */

/* ------------------------------------------------------------
   PAGE ACTION ROW
   ------------------------------------------------------------ */

.if-page-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 9px;

  flex-wrap: wrap;
}

/* ------------------------------------------------------------
   SEMANTIC TABLE BADGES
   ------------------------------------------------------------ */

.if-table-badge-neutral {
  border-color: #d8dee8;

  background: #f1f4f8;

  color: #536174;
}

.if-table-badge-success {
  border-color: #b7e5ce;

  background: #eaf8f1;

  color: #18794e;
}

.if-table-badge-info {
  border-color: #bed0f4;

  background: #ecf2ff;

  color: #3156a6;
}

.if-table-badge-warning {
  border-color: #e7d49d;

  background: #fff5d9;

  color: #805a00;
}

.if-table-badge-danger {
  border-color: #f0c7c3;

  background: #fef3f2;

  color: #b42318;
}

/* Existing color aliases now share the semantic contract. */

.if-table-badge-green {
  border-color: #b7e5ce;

  background: #eaf8f1;

  color: #18794e;
}

.if-table-badge-blue {
  border-color: #bed0f4;

  background: #ecf2ff;

  color: #3156a6;
}

.if-table-badge-gold {
  border-color: #e7d49d;

  background: #fff5d9;

  color: #805a00;
}

/* ------------------------------------------------------------
   GENERIC SUMMARY / METRIC CARDS
   ------------------------------------------------------------ */

.if-summary-grid {
  display: grid;

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

  gap: 12px;

  margin-bottom: 18px;
}

.if-summary-card {
  min-width: 0;
  min-height: 82px;

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

  gap: 14px;

  padding: 16px 18px;

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

  background: var(--if-surface);

  color: inherit;

  font: inherit;
  text-align: left;

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

  cursor: default;
}

button.if-summary-card {
  cursor: pointer;

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

button.if-summary-card:hover {
  border-color: color-mix(in srgb, var(--if-secondary), white 58%);

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

  transform: translateY(-1px);
}

.if-summary-card-active {
  border-color: color-mix(in srgb, var(--if-secondary), white 45%) !important;

  background: var(--if-secondary-soft) !important;
}

.if-summary-label {
  color: var(--if-text-muted);

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

.if-summary-value {
  color: var(--if-primary);

  font-size: 1.45rem;
  font-weight: 760;

  line-height: 1;
}

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

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

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

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

@media (max-width: 560px) {
  .if-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ADMIN DASHBOARD -REFINED
   Keep this section LAST so it cleanly overrides earlier drafts.
   ============================================================ */

.admin-dashboard {
  padding-top: 34px;
}

/* ------------------------------------------------------------
   SUMMARY STATS
   ------------------------------------------------------------ */

.admin-dashboard-stats {
  gap: 14px;

  margin-bottom: 30px;
}

.admin-dashboard-stats .if-dashboard-stat-card {
  position: relative;

  min-height: 108px;

  align-items: flex-start;

  padding: 18px 18px 17px;

  overflow: hidden;

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

  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);

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

.admin-dashboard-stats .if-dashboard-stat-card::after {
  content: "";

  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 3px;

  background: color-mix(in srgb, var(--if-secondary), white 34%);

  opacity: 0.8;
}

.admin-dashboard-stats .if-dashboard-stat-icon {
  width: 40px;
  height: 40px;

  margin-top: 1px;

  border: 1px solid color-mix(in srgb, var(--if-secondary), white 72%);

  border-radius: 9px;

  background: var(--if-secondary-soft);

  font-size: 0.95rem;
}

.admin-dashboard-stats .if-dashboard-stat-label {
  color: var(--if-text-muted);

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

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

.admin-dashboard-stats .if-dashboard-stat-value {
  margin-top: 6px;

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

.admin-dashboard-stat-detail {
  margin-top: 7px;

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

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

/* ------------------------------------------------------------
   SECTION HEADINGS
   ------------------------------------------------------------ */

.admin-dashboard-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 12px;
}

.admin-dashboard-section-heading .if-eyebrow {
  margin-bottom: 4px;
}

.admin-dashboard-section-heading h2 {
  margin: 0;

  color: var(--if-primary);

  font-size: 0.98rem;
  font-weight: 760;

  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------
   ATTENTION PANEL
   ------------------------------------------------------------ */

.admin-dashboard-attention {
  margin-bottom: 30px;
}

.admin-dashboard-attention-list {
  overflow: hidden;

  border: 1px solid color-mix(in srgb, #d8b867, white 36%);

  border-radius: 12px;

  background: linear-gradient(180deg, #fffcf4 0%, #fffdf8 100%);

  box-shadow: 0 2px 8px rgba(90, 66, 0, 0.035);
}

.admin-dashboard-attention-item {
  display: grid;

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

  align-items: center;

  gap: 12px;

  padding: 13px 15px;

  border-bottom: 1px solid color-mix(in srgb, #d8b867, white 58%);

  color: inherit;

  text-decoration: none;

  transition:
    background-color var(--if-transition-fast),
    padding-left var(--if-transition-fast);
}

.admin-dashboard-attention-item:last-child {
  border-bottom: 0;
}

.admin-dashboard-attention-item:hover {
  padding-left: 18px;

  background: rgba(255, 255, 255, 0.72);
}

.admin-dashboard-attention-icon {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border: 1px solid #e6d294;
  border-radius: 50%;

  background: #fff5d9;

  color: #805a00;

  font-size: 0.65rem;
  font-weight: 850;
}

.admin-dashboard-attention-item strong {
  display: block;

  color: var(--if-primary);

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

.admin-dashboard-attention-item small {
  display: block;

  margin-top: 3px;

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

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

.admin-dashboard-attention-item > span:last-child {
  color: var(--if-secondary);

  font-size: 0.95rem;
}

/* ------------------------------------------------------------
   MANAGEMENT AREA
   ------------------------------------------------------------ */

.admin-dashboard-management {
  margin-top: 2px;
}

.admin-dashboard-management .if-management-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;
}

.admin-dashboard-management .if-management-card {
  min-height: 102px;

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

  gap: 14px;

  padding: 17px 18px;

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

  background: var(--if-surface);

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

  transition:
    border-color var(--if-transition-fast),
    background-color var(--if-transition-fast),
    box-shadow var(--if-transition-fast),
    transform var(--if-transition-fast);
}

.admin-dashboard-management .if-management-card:hover {
  border-color: color-mix(in srgb, var(--if-secondary), white 58%);

  background: linear-gradient(
    180deg,
    #ffffff 0%,
    var(--if-secondary-soft) 160%
  );

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

  transform: translateY(-1px);
}

.admin-dashboard-management .if-management-card-icon {
  width: 40px;
  height: 40px;

  border: 1px solid color-mix(in srgb, var(--if-secondary), white 72%);

  border-radius: 9px;

  background: var(--if-secondary-soft);

  font-size: 0.9rem;
}

.admin-dashboard-management .if-management-card h3 {
  font-size: 0.875rem;
  font-weight: 760;
}

.admin-dashboard-management .if-management-card p {
  max-width: 520px;

  margin-top: 4px;

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

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

.admin-dashboard-management .if-management-arrow {
  width: 22px;
  height: 22px;

  display: grid;
  place-items: center;

  border-radius: 50%;

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

  color: var(--if-secondary);

  font-size: 0.875rem;

  transition:
    background-color var(--if-transition-fast),
    transform var(--if-transition-fast);
}

.admin-dashboard-management .if-management-card:hover .if-management-arrow {
  background: var(--if-secondary-soft);

  transform: translateX(2px);
}

/* ------------------------------------------------------------
   BALANCE LAST ODD CARD
   ------------------------------------------------------------ */

.admin-dashboard-management .if-management-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.admin-dashboard-management .if-management-card:last-child:nth-child(odd) p {
  max-width: 760px;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1000px) {
  .admin-dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-dashboard-management .if-management-grid {
    grid-template-columns: 1fr;
  }

  .admin-dashboard-management .if-management-card:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

@media (max-width: 600px) {
  .admin-dashboard {
    padding-top: 26px;
  }

  .admin-dashboard-stats {
    grid-template-columns: 1fr;

    gap: 10px;
  }

  .admin-dashboard-stats .if-dashboard-stat-card {
    min-height: 92px;
  }

  .admin-dashboard-attention-item {
    grid-template-columns:
      30px
      minmax(0, 1fr)
      16px;

    gap: 10px;
  }

  .admin-dashboard-management .if-management-card {
    grid-template-columns:
      38px
      minmax(0, 1fr)
      20px;

    padding: 15px;
  }

  .admin-dashboard-management .if-management-card-icon {
    width: 36px;
    height: 36px;
  }
}

/* ============================================================
   DESTRUCTIVE ACTIONS / NOTIFICATION CLEANUP
   ============================================================ */

.if-btn-danger,
.if-btn-danger-outline {
  min-height: 38px;

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

  gap: 7px;

  padding: 0 13px;

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

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

  cursor: pointer;

  transition:
    background-color var(--if-transition-fast),
    border-color var(--if-transition-fast),
    color var(--if-transition-fast);
}

.if-btn-danger {
  border: 1px solid var(--if-danger);

  background: var(--if-danger);

  color: #ffffff;
}

.if-btn-danger:hover {
  background: color-mix(in srgb, var(--if-danger), black 8%);

  color: #ffffff;
}

.if-btn-danger-outline {
  border: 1px solid #e7b9b5;

  background: #ffffff;

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

.if-btn-danger-outline:hover {
  border-color: var(--if-danger);

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

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

.if-btn-danger:disabled,
.if-btn-danger-outline:disabled {
  opacity: 0.5;

  cursor: not-allowed;
}

.if-btn-sm {
  min-height: 30px;

  padding: 0 10px;

  font-size: 0.875rem;
}

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

.if-table-action-danger:hover {
  border-color: #e7b9b5 !important;

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

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

/* Notification / dashboard confirmation dialogs */

.notification-confirm-modal,
.admin-clear-notifications-modal {
  width: min(520px, calc(100vw - 34px));
}

.notification-confirm-summary {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);

  gap: 9px 14px;

  padding: 18px 22px;

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

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

.notification-confirm-summary span {
  color: var(--if-text-muted);

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

.notification-confirm-summary strong {
  overflow-wrap: anywhere;

  color: var(--if-text);

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

.notification-clear-warning {
  margin: 18px 22px 0;

  padding: 11px 13px;

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

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

  color: var(--if-danger);

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

/* Admin dashboard attention row with actions */

.admin-dashboard-attention-item-actions {
  grid-template-columns:
    34px
    minmax(0, 1fr)
    auto;
}

.admin-dashboard-attention-link {
  min-width: 0;

  color: inherit;

  text-decoration: none;
}

.admin-dashboard-attention-actions {
  display: flex;
  align-items: center;

  gap: 7px;
}

@media (max-width: 700px) {
  .admin-dashboard-attention-item-actions {
    grid-template-columns:
      30px
      minmax(0, 1fr);
  }

  .admin-dashboard-attention-actions {
    grid-column: 2;

    justify-content: flex-start;

    margin-top: 3px;
  }

  .if-page-heading-actions {
    width: 100%;

    justify-content: flex-start;
  }
}

/* ============================================================
   SYSTEM SETTINGS + ENTRA SSO -REFINED GLOBAL STYLING
   Append near the end of intelligent-forms.css
   ============================================================ */

/* ============================================================
   SYSTEM SETTINGS -PAGE
   ============================================================ */

.system-settings-page {
  padding-bottom: 72px;
}

.system-settings-page > .if-page-heading {
  margin-bottom: 24px;
}

/* ============================================================
   SYSTEM SETTINGS -LAYOUT
   ============================================================ */

/* ============================================================
   SYSTEM SETTINGS -CARDS
   ============================================================ */

.system-settings-card,
.system-settings-summary-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 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding: 18px 20px 16px;

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

  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.system-settings-card-header h2,
.system-settings-summary-card h2 {
  margin: 0;

  color: var(--if-primary);

  font-size: 0.92rem;
  font-weight: 760;

  letter-spacing: -0.01em;
}

.system-settings-card-header p:last-child {
  max-width: 700px;

  margin: 5px 0 0;

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

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

.system-settings-card-body {
  padding: 18px 20px 20px;
}

/* ============================================================
   SYSTEM SETTINGS -FIELDS
   ============================================================ */

.system-setting-field {
  display: grid;

  gap: 7px;

  margin-bottom: 16px;
}

.system-setting-field:last-child {
  margin-bottom: 0;
}

.system-setting-field > label {
  color: var(--if-text);

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

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

  min-height: 38px;

  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;

  transition:
    border-color var(--if-transition-fast),
    box-shadow var(--if-transition-fast),
    background-color var(--if-transition-fast);
}

.system-setting-field input,
.system-setting-field select {
  padding: 0 11px;
}

.system-setting-field input:focus,
.system-setting-field select:focus {
  outline: none;

  border-color: color-mix(in srgb, var(--if-secondary), white 34%);

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

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

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

/* ============================================================
   SYSTEM SETTINGS -TOGGLES
   ============================================================ */

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

  gap: 18px;

  min-height: 68px;

  padding: 14px 0;

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

.system-setting-toggle-row:first-child {
  padding-top: 0;
}

.system-setting-toggle-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.system-setting-toggle-title {
  color: var(--if-text);

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

.system-setting-toggle-title-with-badge {
  display: flex;
  align-items: center;

  gap: 8px;

  flex-wrap: wrap;
}

/* ============================================================
   SYSTEM SETTINGS -NUMBER INPUT
   ============================================================ */

.system-setting-number-with-unit {
  display: grid;

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

  overflow: hidden;
}

.system-setting-number-with-unit input {
  min-width: 0;

  border: 0;
  border-radius: 0;

  box-shadow: none !important;
}

.system-setting-number-with-unit span {
  display: flex;
  align-items: center;

  padding: 0 11px;

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

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

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

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

/* ============================================================
   SYSTEM SETTINGS -STATUS + SUMMARY
   ============================================================ */

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

  padding: 11px 13px;

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

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

.system-settings-status-success {
  border: 1px solid #b7e5ce;

  background: #eaf8f1;

  color: #18794e;
}

.system-settings-status-error {
  border: 1px solid #f0c7c3;

  background: #fef3f2;

  color: #b42318;
}

.system-settings-summary-card {
  padding: 18px;
}

.system-settings-summary-card .if-eyebrow {
  margin-bottom: 4px;
}

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

  gap: 0;

  margin-top: 14px;
}

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

  gap: 3px;

  padding: 10px 0;

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

.system-settings-summary-list > div:last-child {
  border-bottom: 0;
}

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

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

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

.system-settings-summary-list strong {
  overflow-wrap: anywhere;

  color: var(--if-primary);

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

/* ============================================================
   SYSTEM SETTINGS -PUBLIC URL / SSO / REFERENCE
   ============================================================ */

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

  gap: 16px;

  padding: 13px 14px;

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

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

.system-setting-sso-status span {
  display: block;

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

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

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

.system-setting-sso-status strong {
  display: block;

  margin-top: 3px;

  color: var(--if-primary);

  font-size: 0.875rem;
}

.system-setting-safety-note {
  margin-top: 7px;

  padding: 7px 9px;

  border: 1px solid #e7d49d;
  border-radius: 7px;

  background: #fff8e8;

  color: #805a00;

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

.system-setting-reference-grid {
  display: grid;

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

  gap: 14px;
}

.system-setting-reference-preview {
  margin-top: 14px;

  padding: 13px 15px;

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

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

.system-setting-reference-preview > span {
  display: block;

  margin-bottom: 5px;

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

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

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

.system-setting-reference-preview > strong {
  display: block;

  color: var(--if-primary);

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

  letter-spacing: 0.025em;
}

.system-setting-reference-preview > small {
  display: block;

  margin-top: 5px;

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

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

.system-setting-divider {
  height: 1px;

  margin: 18px 0;

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

/* ============================================================
   LOGIN / SSO
   ============================================================ */

.auth-login-card {
  width: min(100%, 430px);

  padding: 28px;

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

  background: var(--if-surface);

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

.auth-login-heading {
  margin-bottom: 22px;
}

.auth-login-heading h1 {
  margin: 2px 0 6px;

  color: var(--if-primary);

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

  letter-spacing: -0.02em;
}

.auth-login-heading p:last-child {
  margin: 0;

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

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

.auth-form {
  display: grid;

  gap: 14px;
}

.auth-field {
  display: grid;

  gap: 7px;
}

.auth-field label {
  color: var(--if-text);

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

.auth-field input {
  width: 100%;

  min-height: 40px;

  padding: 0 11px;

  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;
}

.auth-field input:focus {
  outline: none;

  border-color: color-mix(in srgb, var(--if-secondary), white 32%);

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

.auth-submit {
  min-height: 42px;

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

  gap: 8px;

  padding: 0 14px;

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

  background: var(--if-primary);

  color: #ffffff;

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

  text-decoration: none;

  cursor: pointer;

  transition:
    transform var(--if-transition-fast),
    box-shadow var(--if-transition-fast),
    background-color var(--if-transition-fast);
}

.auth-submit:hover {
  background: color-mix(in srgb, var(--if-primary), black 8%);

  color: #ffffff;

  transform: translateY(-1px);

  box-shadow: 0 5px 14px rgba(4, 30, 66, 0.14);
}

.auth-sso-button {
  width: 100%;

  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

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

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

.auth-sso-button:hover {
  background: var(--if-secondary-soft);

  border-color: color-mix(in srgb, var(--if-secondary), white 50%);

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

.auth-sso-icon {
  width: 22px;
  height: 22px;

  display: grid;
  place-items: center;

  border-radius: 5px;

  background: var(--if-secondary-soft);

  color: var(--if-secondary);

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

.auth-login-divider {
  display: flex;
  align-items: center;

  gap: 10px;

  margin: 18px 0;

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

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

.auth-login-divider::before,
.auth-login-divider::after {
  content: "";

  height: 1px;

  flex: 1;

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

.auth-error {
  margin-bottom: 16px;

  padding: 10px 12px;

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

  background: #fef3f2;

  color: #b42318;

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

/* ============================================================
   ENTRA ADMIN PAGE
   ============================================================ */

.entra-status-card {
  margin-bottom: 18px;

  overflow: hidden;

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

  background: var(--if-surface);

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

.entra-status-heading {
  display: grid;

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

  align-items: center;

  gap: 14px;

  padding: 18px 20px;

  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.entra-status-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border: 1px solid color-mix(in srgb, var(--if-secondary), white 68%);

  border-radius: 10px;

  background: var(--if-secondary-soft);

  color: var(--if-secondary);

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

.entra-status-heading h2 {
  margin: 0;

  color: var(--if-primary);

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

.entra-status-heading p:last-child {
  margin: 4px 0 0;

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

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

.entra-settings-grid {
  display: grid;

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

  gap: 16px;
}

.entra-settings-grid > .system-settings-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.entra-config-list {
  display: grid;

  gap: 0;
}

.entra-config-list > div {
  display: grid;

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

  gap: 16px;

  padding: 11px 0;

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

.entra-config-list > div:last-child {
  border-bottom: 0;
}

.entra-config-list span {
  color: var(--if-text-muted);

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

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

.entra-config-list strong {
  overflow-wrap: anywhere;

  color: var(--if-primary);

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

.entra-redirect-uri {
  padding: 13px 14px;

  overflow-wrap: anywhere;

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

  background: #0f172a;

  color: #e2e8f0;

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

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

.entra-setup-note {
  margin-top: 18px;

  padding: 14px 16px;

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

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

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

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

.entra-setup-note strong {
  display: block;

  margin-bottom: 4px;

  color: var(--if-primary);

  font-size: 0.875rem;
}

.entra-setup-note code {
  padding: 2px 5px;

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

  background: var(--if-surface);

  color: var(--if-primary);

  font-size: 0.875rem;
}

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

@media (max-width: 1050px) {
  .system-settings-layout {
    grid-template-columns: 1fr;
  }

  .system-settings-sidebar {
    position: static;
    height: auto;
    max-height: none;
  }

  .system-settings-summary-card {
    order: -1;
    max-height: none;
  }
}

@media (max-width: 850px) {
  .entra-settings-grid {
    grid-template-columns: 1fr;
  }

  .entra-settings-grid > .system-settings-card:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

@media (max-width: 700px) {
  .system-settings-card-header {
    align-items: flex-start;
    flex-direction: column;
  }

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

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

  .entra-config-list > div {
    grid-template-columns: 1fr;

    gap: 4px;
  }
}

@media (max-width: 600px) {
  .auth-login-card {
    padding: 22px 18px;
  }

  .entra-status-heading {
    grid-template-columns:
      40px
      minmax(0, 1fr);

    padding: 16px;
  }

  .entra-status-heading > .if-table-badge {
    grid-column: 2;

    justify-self: start;
  }

  .system-setting-sso-status {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* ============================================================
   GLOBAL SUBMISSION STATUS PILLS
   Add this to intelligent-forms.css.

   These are application-wide status classes. Pages should use:
       if-status-badge if-status-submitted
       if-status-badge if-status-accepted
       if-status-badge if-status-draft
       if-status-badge if-status-returned
       if-status-badge if-status-rejected
       if-status-badge if-status-review
   ============================================================ */

.if-status-badge {
  min-height: 24px;

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

  padding: 0 9px;

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

  background: #f8fafc;
  color: #475569;

  font-size: 0.56rem;
  font-weight: 750;
  line-height: 1;

  white-space: nowrap;
}

/* Submitted -Blue */
.if-status-submitted {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

/* Accepted -Green */
.if-status-accepted {
  border-color: #b7e5ce;
  background: #eaf8f1;
  color: #18794e;
}

/* Draft -Gold */
.if-status-draft {
  border-color: #f3d6a4;
  background: #fff9ee;
  color: #92400e;
}

/* Returned -Orange */
.if-status-returned {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

/* Rejected -Red */
.if-status-rejected {
  border-color: #f0c7c3;
  background: #fff5f4;
  color: #b42318;
}

/* Under Review -Teal / application accent */
.if-status-review {
  border-color: color-mix(in srgb, var(--if-secondary, #0a7cb4), white 62%);

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

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

/* Unknown / neutral */
.if-status-neutral {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #475569;
}

/* ============================================================
   FORMS MANAGEMENT TABLE — STABLE COLUMN SIZING

   Descriptions may contain long prose or unbroken values. Keep that
   content inside the form column without compressing status and actions.

   Status/Version/Owner hold pill badges. The site-wide accessibility
   application-wide readability floor enlarges every badge's font
   and padding, so these columns get a larger share of the table's width
   than their content alone would need — without growing the table's own
   min-width, so 100% UI scale still fits standard resolutions without a
   horizontal scrollbar. The wrapper still scrolls horizontally
   (.if-table-wrapper) if a window is narrower than that.
   ============================================================ */

.forms-management-table {
  min-width: 1180px;
  table-layout: fixed;
}

.forms-management-table .forms-table-column-form {
  width: 27%;
}

.forms-management-table .forms-table-column-status {
  align-items: center !important;
  width: 14%;
}

.forms-management-table .forms-table-column-version {
  align-items: center !important;
  width: 10%;
}

.forms-management-table .forms-table-column-creator {
  width: 15%;
}

.forms-management-table .forms-table-column-owner {
  align-items: center !important;
  width: 16%;
}

.forms-management-table .forms-table-column-updated {
  width: 11%;
}

.forms-management-table .forms-table-column-actions {
  width: 210px;
}

.forms-management-table td {
  min-width: 0;
}

.forms-management-table .if-table-primary,
.forms-management-table .if-table-secondary,
.forms-management-table .if-table-badge {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Status/Version pills hold a single short word (Published, Draft, v3).
   Now that their columns have room for the accessibility font floor,
   keep them on one line instead of wrapping. Group/owner pills are
   variable-length names and may still wrap. */
.forms-management-table .if-status-badge,
.forms-management-table .if-table-badge-blue {
  white-space: nowrap !important;
}

.forms-management-table .forms-table-description {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 5px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.forms-management-table .if-table-actions {
  min-width: 0;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

/* ============================================================
   CANONICAL MANAGEMENT TABLE SYSTEM - USERS STANDARD
   ============================================================

   Users & Roles is the visual reference.

   Used by:
   - Users
   - Groups
   - Forms
   - Submissions
   - Home dashboard tables

   This section intentionally belongs LAST in intelligent-forms.css.
   Page-specific styles should not redefine the shared toolbar,
   search, filter pills, count, table card, or table header.
   ============================================================ */

/* ------------------------------------------------------------
   TOOLBAR CARD
   Same separate rounded card used by Users.
   ------------------------------------------------------------ */

.if-table-toolbar {
  display: grid !important;

  grid-template-columns:
    minmax(240px, 320px)
    auto
    minmax(120px, 1fr) !important;

  align-items: center !important;

  gap: 20px !important;

  min-height: 0 !important;

  margin: 0 0 16px !important;

  padding: 14px 18px !important;

  border: 1px solid var(--if-border, #e2e8f0) !important;
  border-radius: var(--if-radius-card, 14px) !important;

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

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

/* ------------------------------------------------------------
   SEARCH — exact Users language
   ------------------------------------------------------------ */

.if-table-search {
  position: relative !important;

  width: 100% !important;
  height: 42px !important;

  display: flex !important;
  align-items: center !important;

  padding: 0 !important;

  border: 1px solid var(--if-border-strong, #cbd5e1) !important;
  border-radius: var(--if-radius-control, 8px) !important;

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

.if-table-search > span {
  position: absolute !important;

  left: 13px !important;

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

  font-size: 1rem !important;

  pointer-events: none !important;
}

.if-table-search input {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  padding: 0 12px 0 39px !important;

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

  background: transparent !important;

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

  font-size: 0.875rem !important;

  outline: none !important;
}

.if-table-search input::placeholder {
  color: var(--if-slate-400, #94a3b8) !important;
}

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

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

/* ------------------------------------------------------------
   FILTER PILLS — exact Users language
   ------------------------------------------------------------ */

.if-table-filters {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;

  gap: 7px !important;
}

.if-table-filter {
  min-height: 36px !important;

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

  gap: 7px !important;

  padding: 0 14px !important;

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

  background: #eef2f6 !important;

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

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

  text-decoration: none !important;

  white-space: nowrap !important;

  cursor: pointer !important;

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

.if-table-filter:hover {
  border-color: #bcc8d5 !important;

  background: #e5ebf1 !important;
}

.if-table-filter > span {
  min-width: 20px !important;

  padding: 2px 6px !important;

  border-radius: 999px !important;

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

  font-size: 0.875rem !important;

  text-align: left !important;
}

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

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

  color: #ffffff !important;

  box-shadow: 0 3px 8px
    color-mix(in srgb, var(--if-primary, #041e42), transparent 82%) !important;
}

.if-table-filter-active:hover {
  border-color: var(--if-primary, #041e42) !important;

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

  color: #ffffff !important;
}

.if-table-filter-active > span {
  background: rgba(255, 255, 255, 0.88) !important;

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

/* ------------------------------------------------------------
   SHOWING # OF #
   ------------------------------------------------------------ */

.if-table-count {
  justify-self: end !important;

  margin-left: 0 !important;

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

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

  white-space: nowrap !important;
}

.if-table-count strong {
  color: var(--if-text-strong, #334155) !important;

  font-weight: 750 !important;
}

/* ------------------------------------------------------------
   TABLE CARD -separate from toolbar
   ------------------------------------------------------------ */

.if-table-card {
  overflow: hidden !important;

  margin: 0 !important;

  border: 1px solid var(--if-border, #e2e8f0) !important;
  border-radius: var(--if-radius-card, 14px) !important;

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

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

.if-table-wrapper {
  width: 100% !important;

  overflow-x: auto !important;
}

/* ------------------------------------------------------------
   TABLE -exact Users language
   ------------------------------------------------------------ */

.if-data-table {
  width: 100% !important;

  border-collapse: collapse !important;

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

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

.if-data-table th {
  height: 52px !important;

  padding: 0 18px !important;

  border: 0 !important;

  background: transparent !important;

  color: #ffffff !important;

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

  letter-spacing: 0.02em !important;

  text-align: left !important;
  text-transform: none !important;

  white-space: nowrap !important;
}

.if-data-table td {
  padding: 15px 18px !important;

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

  background: transparent !important;

  color: var(--if-slate-700, #475569) !important;

  font-size: 0.875rem !important;

  vertical-align: middle !important;
}

.if-data-table tbody tr {
  background: var(--if-surface, #ffffff) !important;

  transition: background-color 120ms ease !important;
}

.if-data-table tbody tr:hover {
  background: var(--if-surface-subtle, #f8fafc) !important;
}

.if-data-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* ------------------------------------------------------------
   SORTABLE HEADERS
   ------------------------------------------------------------ */

.if-table-sort {
  width: auto !important;
  min-height: 34px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: 8px !important;

  padding: 0 !important;

  border: 0 !important;
  border-radius: 7px !important;

  background: transparent !important;

  color: #ffffff !important;

  font: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;

  letter-spacing: inherit !important;

  text-align: left !important;
  text-transform: none !important;

  cursor: pointer !important;

  white-space: nowrap !important;
}

.if-table-sort:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.if-table-sort > span:empty {
  display: none !important;
}

.if-table-sort-active {
  padding: 5px 7px !important;

  background: rgba(255, 255, 255, 0.13) !important;
}

.if-table-sort-active > span {
  width: 22px !important;
  height: 22px !important;

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

  border: 1px solid #ffffff !important;
  border-radius: 999px !important;

  background: #ffffff !important;

  color: #0f172a !important;

  font-size: 0.875rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1000px) {
  .if-table-toolbar {
    grid-template-columns: 1fr !important;

    gap: 12px !important;
  }

  .if-table-count {
    justify-self: start !important;
  }
}

@media (max-width: 700px) {
  .if-table-filters {
    flex-wrap: wrap !important;
  }
}

/* ============================================================
   TABLE PAGINATION / ROW COUNT
   ============================================================ */

.if-table-count-paged {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  gap: 14px !important;
}

.if-page-size-control {
  display: inline-flex;
  align-items: center;

  gap: 7px;

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

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

.if-page-size-control select {
  height: 34px;

  padding: 0 28px 0 9px;

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

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

  color: var(--if-text, #0f172a);

  font-size: 0.875rem;

  outline: none;
}

.if-page-size-control select:focus {
  border-color: var(--if-secondary, #0a7cb4);

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

.if-table-pagination {
  min-height: 62px;

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

  gap: 8px;

  padding: 12px 16px;

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

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

.if-pagination-pages {
  display: flex;
  align-items: center;

  gap: 5px;
}

.if-pagination-button,
.if-pagination-page {
  min-height: 44px;

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

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

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

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

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

  cursor: pointer;
}

.if-pagination-button {
  padding: 0 11px;
}

.if-pagination-page {
  min-width: 44px;

  padding: 0 8px;
}

.if-pagination-button:hover:not(:disabled),
.if-pagination-page:hover:not(:disabled) {
  border-color: var(--if-secondary, #0a7cb4);

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

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

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

  color: #ffffff;
}

.if-pagination-button:disabled {
  opacity: 0.42;

  cursor: default;
}

.if-pagination-summary {
  margin: 0 4px;

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

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

  white-space: nowrap;
}

.if-table-filter-divider {
  width: 1px;
  height: 26px;

  margin: 0 2px;

  background: var(--if-border, #e2e8f0);
}

/* ============================================================
   TABLE ROW ACTION MENU
   ============================================================ */

.if-table-actions-compact {
  justify-content: flex-end;

  gap: 6px;
}

.if-table-action-primary {
  min-width: 54px;

  justify-content: center;
}

.if-row-menu {
  position: relative;

  display: inline-block;
}

.if-row-menu > summary {
  list-style: none;
}

.if-row-menu > summary::-webkit-details-marker {
  display: none;
}

.if-row-menu-trigger {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

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

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

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

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

  cursor: pointer;

  user-select: none;
}

.if-row-menu-trigger:hover,
.if-row-menu[open] .if-row-menu-trigger {
  border-color: var(--if-secondary, #0a7cb4);

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

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

.if-row-menu-popover {
  position: absolute;

  top: calc(100% + 7px);
  right: 0;

  z-index: 80;

  width: 190px;

  overflow: hidden;

  padding: 5px;

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

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

  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}

.if-row-menu-item {
  width: 100%;
  min-height: 34px;

  display: flex;
  align-items: center;

  padding: 0 9px;

  border: 0;
  border-radius: 6px;

  background: transparent;

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

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

  text-align: left;
  text-decoration: none;

  cursor: pointer;
}

.if-row-menu-item:hover {
  background: var(--if-surface-subtle, #f8fafc);

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

.if-row-menu-item:disabled {
  opacity: 0.5;

  cursor: default;
}

.if-row-menu-divider {
  height: 1px;

  margin: 5px 3px;

  background: var(--if-border, #e2e8f0);
}

.if-row-menu-item-danger {
  color: var(--if-danger, #b42318);
}

.if-row-menu-item-danger:hover {
  background: var(--if-danger-bg, #fef3f2);

  color: var(--if-danger, #b42318);
}

/*
 * Table wrappers currently allow horizontal scrolling. Keep action
 * menus readable by adding a little lower breathing room to the
 * table card when rows are present.
 */
.if-table-wrapper {
  overflow-y: visible;
}

@media (max-width: 1000px) {
  .if-table-count-paged {
    justify-content: flex-start !important;
  }

  .if-table-pagination {
    justify-content: center;
  }
}

@media (max-width: 700px) {
  .if-table-count-paged {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .if-table-filter-divider {
    display: none;
  }
}

/* ============================================================
   TABLE ROUNDING -RESTORE ORIGINAL CLIPPING
   ============================================================ */

.if-table-card {
  overflow: hidden !important;
  border-radius: var(--if-radius-card, 14px) !important;
}

.if-table-wrapper {
  width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* ============================================================
   NATIVE TOP-LAYER ACTION POPOVERS -IMPLICIT ANCHOR
   ============================================================ */

/*
 * popovertarget establishes an implicit anchor relationship between
 * the trigger and the popover. Do not assign one shared anchor-name
 * to every row; that is what caused menus to jump to the page corner.
 */
.if-row-menu-trigger {
  flex: 0 0 auto;
}

.if-row-menu-popover-native {
  position: fixed !important;

  width: 200px;

  margin: 7px 0 0;

  padding: 6px;

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

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

  color: var(--if-text, #0f172a);

  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.2);

  /*
     * Current Chromium uses the popover invoker as the implicit
     * anchor. Place the menu below and align its right edge with
     * the trigger. Browser fallback keeps it in the top layer.
     */
  position-area: bottom span-left;

  position-try-fallbacks: flip-block, flip-inline;
}

.if-row-menu-popover-native::backdrop {
  background: transparent;
}

.if-row-menu-popover-native .if-row-menu-item {
  width: 100%;
}

/* ============================================================
   SUBMISSIONS TOOLBAR -TWO-TIER LAYOUT
   ============================================================ */

.if-table-toolbar-stacked {
  display: block !important;

  padding: 0 !important;
}

.if-table-toolbar-main {
  display: grid;

  grid-template-columns:
    minmax(240px, 320px)
    auto
    minmax(220px, 1fr);

  align-items: center;

  gap: 18px;

  padding: 14px 18px;
}

.if-table-toolbar-secondary {
  display: flex;
  align-items: center;

  gap: 12px;

  padding: 10px 18px 12px;

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

  background: color-mix(in srgb, var(--if-primary, #041e42), white 98%);
}

.if-table-filter-label {
  flex: 0 0 auto;

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

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

  letter-spacing: 0.055em;

  text-transform: uppercase;
}

.if-table-toolbar-secondary .if-table-filters {
  flex-wrap: wrap;

  gap: 7px;
}

.if-table-archive-filters {
  flex-wrap: nowrap !important;
}

.if-table-toolbar-main .if-table-count-paged {
  justify-self: end;

  margin-left: 0 !important;
}

@media (max-width: 1100px) {
  .if-table-toolbar-main {
    grid-template-columns:
      minmax(220px, 1fr)
      auto;

    gap: 12px;
  }

  .if-table-toolbar-main .if-table-count-paged {
    grid-column: 1 / -1;

    justify-self: stretch;

    justify-content: flex-start !important;
  }
}

@media (max-width: 760px) {
  .if-table-toolbar-main {
    grid-template-columns: 1fr;
  }

  .if-table-archive-filters {
    flex-wrap: wrap !important;
  }

  .if-table-toolbar-secondary {
    align-items: flex-start;
    flex-direction: column;
  }

  .if-table-toolbar-main .if-table-search {
    max-width: none;
  }
}

@media (max-width: 700px) {
  .if-row-menu-popover-native {
    width: min(220px, calc(100vw - 24px));
  }
}

/* ============================================================
   ROW ACTION POPOVER -ALIGN TO ITS OWN ... BUTTON
   ============================================================ */

.if-row-menu-popover-native:popover-open {
  /*
     * Each popover now receives a unique position-anchor inline
     * from the row's trigger button.
     */
  position: fixed !important;

  inset: auto !important;

  top: anchor(bottom) !important;
  right: anchor(right) !important;

  margin-top: 7px !important;

  /*
     * Align the popover's right edge with the trigger's right edge.
     */
  translate: 0 0;
}

/*
 * If there is not enough room below the trigger, allow Chromium
 * to flip the menu above while preserving horizontal alignment.
 */
.if-row-menu-popover-native {
  position-try-fallbacks: flip-block, flip-inline;
}

/* ============================================================
   SUBMISSIONS TWO-TIER TOOLBAR -FINISHED CARD ROUNDING
   ============================================================ */

.if-table-toolbar-stacked {
  overflow: hidden !important;

  border: 1px solid var(--if-border, #e2e8f0) !important;
  border-radius: var(--if-radius-card, 14px) !important;

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

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

.if-table-toolbar-stacked .if-table-toolbar-main {
  border-radius: var(--if-radius-card, 14px) var(--if-radius-card, 14px) 0 0;
}

.if-table-toolbar-stacked .if-table-toolbar-secondary {
  border-radius: 0 0 var(--if-radius-card, 14px) var(--if-radius-card, 14px);
}

/*
 * Ensure the secondary row itself visually closes the card.
 */
.if-table-toolbar-secondary {
  border-bottom-left-radius: var(--if-radius-card, 14px);
  border-bottom-right-radius: var(--if-radius-card, 14px);
}

/* ============================================================
   SHARED COLLAPSIBLE TABLE FILTERS
   ============================================================ */

.if-table-toolbar:has(> .if-table-filter-panel),
.if-table-toolbar-main:has(> .if-table-filter-panel) {
  display: flex !important;
  flex-wrap: wrap;
}

.if-table-toolbar:has(> .if-table-filter-panel) > .if-table-search,
.if-table-toolbar-main:has(> .if-table-filter-panel) > .if-table-search {
  flex: 1 1 280px;
  min-width: 0;
  max-width: none;
}

.if-table-filter-panel {
  display: contents;
}

.if-table-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--if-border, #e2e8f0);
  border-radius: 8px;
  background: var(--if-surface, #ffffff);
  color: var(--if-text, #334155);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.if-table-filter-toggle::-webkit-details-marker {
  display: none;
}

.if-table-filter-toggle:hover,
.if-table-filter-toggle[aria-expanded="true"] {
  border-color: var(--if-primary, #041e42);
  color: var(--if-primary, #041e42);
  background: var(--if-surface-subtle, #f8fafc);
}

.if-table-filter-toggle:focus-visible {
  outline: 2px solid var(--if-primary, #041e42);
  outline-offset: 3px;
}

.if-table-filter-selection-count {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--if-primary, #041e42);
  color: #ffffff;
  font-size: 0.75rem;
}

.if-table-filter-chevron {
  width: 7px;
  height: 7px;
  margin-left: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.if-table-filter-toggle[aria-expanded="true"] .if-table-filter-chevron {
  transform: rotate(225deg);
}

.if-table-filter-panel-content {
  flex: 1 0 100%;
  order: 2;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid var(--if-border, #e2e8f0);
}

.if-table-filter-panel-content .if-table-filters {
  flex-wrap: wrap !important;
  min-width: 0;
}

.if-table-filter-panel-content .if-table-toolbar-secondary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.if-table-filter-panel-content[hidden] {
  display: none;
}

.if-table-filter-panel-content .if-table-toolbar-secondary .if-table-filter-label:not(:first-child) {
  margin-top: 8px;
}

/* ============================================================
   STANDARD TABLE ACTION COLUMN
   Center the heading over the action controls, keep controls on
   one line, and let the column grow when a row has multiple actions.
   ============================================================ */

.if-submissions-actions-heading,
.home-table-action-heading,
.home-comments-action-heading,
.group-admin-actions-heading,
.user-actions-heading,
.notification-delivery-actions-heading {
  width: 1%;

  min-width: 72px;

  text-align: center !important;

  white-space: nowrap;
}

/*
 * Sortable/flex-based headers need explicit centering.
 */
.if-submissions-actions-heading .if-table-sort,
.home-table-action-heading .if-table-sort,
.home-comments-action-heading .if-table-sort,
.group-admin-actions-heading .if-table-sort,
.user-actions-heading .if-table-sort,
.notification-delivery-actions-heading .if-table-sort {
  width: 100%;

  justify-content: center !important;
}

/*
 * Action cells shrink when they only contain "...", but naturally
 * widen when they contain multiple controls.
 */
.if-table-actions-cell,
.if-table-action-cell,
.home-table-action-cell,
.home-comments-action-cell {
  width: 1%;

  min-width: 72px;

  text-align: center !important;

  white-space: nowrap;
}

/*
 * Never stack row actions vertically.
 */
.if-table-actions,
.if-table-actions-compact,
.if-table-row-actions,
.user-actions {
  display: inline-flex !important;
  align-items: center;
  justify-content: center !important;

  flex-wrap: nowrap !important;

  width: max-content;
  max-width: none;

  gap: 7px;

  white-space: nowrap;
}

/*
 * Keep the action group centered inside its table cell.
 */
td > .if-table-actions,
td > .if-table-actions-compact,
td > .if-table-row-actions,
td > .user-actions {
  margin-inline: auto;
}

/* ============================================================
   ROW ACTION POPOVER -VIEWPORT-AWARE PLACEMENT
   ============================================================ */

/*
 * The popover lives in the browser top layer, so it is not clipped by
 * the rounded/scrolling table card.
 *
 * Let CSS Anchor Positioning choose below the trigger normally and
 * automatically flip above the trigger when there is not enough room
 * beneath it. Do NOT hard-code top/right anchor coordinates here;
 * those coordinates prevent the flip fallback from taking effect.
 */
.if-row-menu-popover-native,
.if-row-menu-popover-native:popover-open {
  position: fixed !important;

  inset: auto !important;

  position-area: bottom span-left !important;

  position-try-fallbacks: flip-block, flip-inline !important;

  margin: 7px 0 0 !important;

  width: 200px;

  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;
}

/*
 * When the browser flips the menu above the trigger, keep a similar
 * visual gap without forcing it back below.
 */
@position-try --if-row-menu-above {
  position-area: top span-left;
  margin: 0 0 7px;
}

/*
 * Modern Chromium can use the explicit custom fallback in addition to
 * the built-in flip behavior.
 */
.if-row-menu-popover-native,
.if-row-menu-popover-native:popover-open {
  position-try-fallbacks:
    --if-row-menu-above, flip-block, flip-inline !important;
}

@media (max-width: 700px) {
  .if-row-menu-popover-native,
  .if-row-menu-popover-native:popover-open {
    width: min(220px, calc(100vw - 24px));

    max-height: calc(100vh - 20px);
  }
}
/* Shared split-page shell used by settings and editor screens. */
.if-split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--if-split-sidebar-width, 280px);
  align-items: start;
  gap: var(--if-split-gap, 22px);
}

.if-split-main {
  display: grid;
  min-width: 0;
  gap: var(--if-split-main-gap, 18px);
}

.if-sticky-sidebar {
  position: sticky;
  top: var(--if-sticky-sidebar-top, calc(var(--if-shell-sticky-offset, 0px) + 20px));
  min-width: 0;
  max-height: calc(100dvh - var(--if-sticky-sidebar-top, calc(var(--if-shell-sticky-offset, 0px) + 20px)) - 20px);
  overflow-y: auto;
  align-self: start;
}

.if-mt-8 {
  margin-top: 8px !important;
}
.if-mt-10 {
  margin-top: 10px !important;
}
.if-mt-18 {
  margin-top: 18px !important;
}
.if-mt-24 {
  margin-top: 24px !important;
}
.if-mt-28 {
  margin-top: 28px !important;
}

.if-card-narrow {
  width: min(100%, 44rem);
  margin: 4rem auto;
  padding: 2rem;
}

@media (max-width: 980px) {
  .if-split-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .if-sticky-sidebar {
    position: static;
  }
}

/* ==========================================================================
   BLAZOR AND BOOTSTRAP BASE OVERRIDES
   ========================================================================== */

/* ============================================================
   INTELLIGENT FORMS — UNIFIED UI
   ============================================================ */

a,
.btn-link {
  color: var(--if-secondary, #0a7cb4);
}

.btn-primary {
  color: #fff;

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

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

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow:
    0 0 0 0.1rem white,
    0 0 0 0.25rem #258cfb;
}

.content {
  padding-top: 1.1rem;
}

h1:focus {
  outline: none;
}

.valid.modified:not([type="checkbox"]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid #e50000;
}

.validation-message {
  color: #e50000;
}

.blazor-error-boundary {
  background:
    url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
      no-repeat 1rem/1.8rem,
    #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
  border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ==========================================================================
   APPLICATION SHELL AND MAIN LAYOUT
   ========================================================================== */

/* ============================================================
   INTELLIGENT FORMS — MAIN LAYOUT COMPACT OVERRIDES

   The main visual shell is defined in global.css.
   This scoped stylesheet intentionally overrides only sizing,
   collapse behavior, and responsive layout so the branding
   remains consistent with the rest of the application.
   ============================================================ */

/* ============================================================
   CSS-ONLY COLLAPSE TOGGLE

   Using a native checkbox + label means this works even though
   a LayoutComponent cannot safely be given its own interactive
   render mode merely for a button click.
   ============================================================ */

.if-shell-compact-toggle {
  position: absolute;

  width: 1px;
  height: 1px;

  overflow: hidden;

  clip: rect(0 0 0 0);
  clip-path: inset(50%);

  white-space: nowrap;
}

/* ============================================================
   EXPANDED MASTHEAD

   The previous global shell used a 138px masthead. This keeps
   the same branded treatment while reclaiming vertical space.
   ============================================================ */

.if-masthead {
  position: sticky;
  top: 0;

  z-index: 900;
}

.if-masthead-inner {
  width: min(calc(100% - 32px), 1600px);

  min-height: 82px;

  flex-direction: row;
  align-items: center;

  gap: 18px;

  padding: 10px 0;
}

/* ============================================================
   COLLAPSE CONTROL
   ============================================================ */

.if-shell-collapse-control {
  width: 34px;
  height: 34px;

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

  flex: 0 0 34px;

  position: relative;

  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;

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

  color: #ffffff;

  cursor: pointer;

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

.if-shell-collapse-control:hover {
  border-color: rgba(255, 255, 255, 0.52);

  background: rgba(255, 255, 255, 0.16);
}

.if-shell-collapse-chevron {
  display: block;

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

  line-height: 1;

  transform: rotate(90deg);

  transition: transform 150ms ease;
}

.if-shell-collapse-text {
  position: absolute;

  width: 1px;
  height: 1px;

  overflow: hidden;

  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* ============================================================
   BRANDING — COMPACTER EXPANDED STATE
   ============================================================ */

.if-brand-lockup {
  min-width: 0;

  column-gap: 12px;
}

.if-brand-logo {
  width: 54px;
  height: 54px;
}

.if-brand-title {
  font-size: 1.15rem;
}

.if-brand-subtitle {
  margin-top: 3px;

  font-size: 0.68rem;
}

/* ============================================================
   USER CLUSTER
   ============================================================ */

.if-user-cluster {
  flex: 0 0 auto;

  width: auto;
  max-width: 48%;

  flex-direction: row;
  align-items: center;
}

.if-user-segment {
  flex: 0 0 auto;
}

.if-user-segment {
  min-height: 36px;

  padding: 0 12px;

  font-size: 0.875rem;
}

.if-avatar {
  width: 25px;
  height: 25px;
  font-size: 0.875rem;
}

/* ============================================================
   PRIMARY NAVIGATION

   Keep the nav inside the same centered width as page content.
   Prevent it from pushing beyond either side of the viewport.
   ============================================================ */

.if-primary-nav {
  position: sticky;
  top: 82px;

  z-index: 880;

  border: 0;
  background: transparent;
  box-shadow: none;

  transition:
    max-height 160ms ease,
    opacity 130ms ease;
}

.if-primary-nav-inner {
  width: fit-content;
  max-width: calc(100% - 40px);

  height: 42px;

  padding: 5px;
  gap: 3px;

  overflow-x: auto;
  overflow-y: hidden;

  border: 1px solid var(--if-border);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(12px);

  scrollbar-width: thin;
}

.if-primary-nav .if-primary-nav-link {
  flex: 0 0 auto;

  min-height: 44px;

  padding: 0 11px;
  border-radius: var(--if-radius-control);

  font-size: 0.75rem;

  white-space: nowrap;
}

.if-primary-nav .if-primary-nav-link:hover {
  background: var(--if-secondary-soft);
}

.if-primary-nav .if-primary-nav-link.active {
  color: white;
  background: var(--if-primary);
}

.if-primary-nav .if-primary-nav-link.active::after {
  display: none;
}

/* ============================================================
   ADMIN SUB-NAVIGATION
   ============================================================ */

.if-admin-nav-region {
  position: sticky;
  top: 124px;

  z-index: 860;

  transition: top 160ms ease;
}

.if-admin-nav-container {
  width: min(calc(100% - 32px), 1600px);

  margin: 0 auto;
}

/* ============================================================
   COLLAPSED STATE

   The checkbox is immediately before the masthead, so scoped
   sibling selectors can control the shell without JavaScript.
   ============================================================ */

.if-shell-compact-toggle:checked ~ .if-masthead .if-masthead-inner {
  min-height: 48px;

  padding-top: 5px;
  padding-bottom: 5px;
}

.if-shell-compact-toggle:checked ~ .if-masthead .if-brand-logo {
  width: 32px;
  height: 32px;
}

.if-shell-compact-toggle:checked ~ .if-masthead .if-brand-title {
  font-size: 0.95rem;
}

.if-shell-compact-toggle:checked ~ .if-masthead .if-brand-subtitle {
  display: block;

  margin-top: 1px;

  font-size: 0.52rem;
}

.if-shell-compact-toggle:checked ~ .if-masthead .if-brand-lockup {
  grid-template-rows: auto;
}

.if-shell-compact-toggle:checked
  ~ .if-masthead
  .if-user-identity
  > span:last-child,
.if-shell-compact-toggle:checked ~ .if-masthead .if-user-link > span:last-child,
.if-shell-compact-toggle:checked
  ~ .if-masthead
  .if-user-logout
  > span:last-child {
  display: none;
}

.if-shell-compact-toggle:checked ~ .if-masthead .if-user-segment {
  min-width: 32px;
  min-height: 32px;

  padding: 0 7px;
}

.if-shell-compact-toggle:checked ~ .if-masthead .if-avatar {
  width: 23px;
  height: 23px;
}

.if-shell-compact-toggle:checked ~ .if-masthead .if-shell-collapse-chevron {
  transform: rotate(-90deg);
}

/* Collapse the entire primary nav. */

.if-shell-compact-toggle:checked ~ .if-primary-nav {
  max-height: 0;

  overflow: hidden;

  border-bottom-width: 0;

  opacity: 0;

  pointer-events: none;
}

.if-shell-compact-toggle:checked ~ .if-primary-nav .if-primary-nav-inner {
  height: 0;
  min-height: 0;
  max-height: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  visibility: hidden;
}

/* Admin tabs move directly beneath the compact masthead. */

.if-shell-compact-toggle:checked ~ .if-admin-nav-region {
  top: 48px;
}

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

@media (max-width: 900px) {
  .if-masthead-inner,
  .if-primary-nav-inner,
  .if-admin-nav-container {
    width: calc(100% - 24px);
  }

  .if-masthead-inner {
    min-height: 66px;

    flex-direction: row;
    align-items: center;

    gap: 10px;

    padding: 8px 0;
  }

  .if-brand-logo {
    width: 42px;
    height: 42px;
  }

  .if-brand-title {
    font-size: 0.92rem;
  }

  .if-brand-subtitle {
    font-size: 0.6rem;
  }

  .if-user-cluster {
    width: auto;
    max-width: none;

    flex-direction: row;
  }

  .if-user-identity > span:last-child {
    display: none;
  }

  .if-primary-nav {
    top: 66px;
  }

  .if-primary-nav-inner {
    height: 42px;

    gap: 18px;
  }

  .if-primary-nav .if-primary-nav-link {
    min-height: 44px;
  }

  .if-admin-nav-region {
    top: 108px;
  }

  .if-shell-compact-toggle:checked ~ .if-masthead .if-masthead-inner {
    min-height: 46px;
  }

  .if-shell-compact-toggle:checked ~ .if-admin-nav-region {
    top: 46px;
  }
}

@media (max-width: 600px) {
  .if-masthead-inner {
    width: calc(100% - 16px);

    min-height: 56px;

    gap: 7px;
  }

  .if-shell-collapse-control {
    width: 30px;
    height: 30px;

    flex-basis: 30px;
  }

  .if-brand-logo {
    width: 34px;
    height: 34px;
  }

  .if-brand-title {
    max-width: 130px;

    font-size: 0.78rem;
  }

  .if-brand-subtitle {
    display: none;
  }

  .if-user-identity {
    display: none;
  }

  .if-user-cluster {
    width: auto;
    max-width: none;

    flex-direction: row;

    padding: 2px !important;
    gap: 1px !important;
  }

  .if-user-segment {
    flex: 0 0 auto;

    min-width: 31px;
    min-height: 31px;

    padding: 0 6px;

    justify-content: center;

    border-bottom: 0;
  }

  .if-primary-nav {
    top: 56px;
  }

  .if-primary-nav-inner {
    width: calc(100% - 16px);
  }

  .if-admin-nav-region {
    top: 98px;
  }
}

@media (max-width: 420px) {
  .if-masthead-inner {
    width: calc(100% - 8px);

    min-height: 48px;

    gap: 4px;

    padding: 5px 0;
  }

  .if-brand-lockup {
    max-width: 30px;

    column-gap: 0;
  }

  .if-brand-logo {
    width: 30px;
    height: 30px;
  }

  .if-brand-title,
  .if-brand-subtitle,
  .if-user-logout > span:last-child {
    display: none;
  }

  .if-user-cluster {
    min-width: 0;

    margin-left: auto;

    border-radius: 9px !important;
  }

  .if-user-segment,
  .if-notification-bell {
    width: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;

    padding: 0 !important;
  }

  .if-shell-collapse-spacer {
    display: none;
  }

  .if-shell-collapse-control {
    width: 28px;
    height: 28px;

    flex-basis: 28px;
  }

  .if-primary-nav {
    top: 48px;
  }

  .if-admin-nav-region {
    top: 90px;
  }
}

/* ============================================================
   MASTHEAD ALIGNMENT REFINEMENT
   Logo + text remain left aligned like the original branded
   masthead. The collapse control lives on the far right with
   breathing room after the account pill.
   ============================================================ */

.if-masthead-inner {
  justify-content: flex-start;
}

.if-brand-lockup {
  flex: 0 1 auto;

  width: auto;
  max-width: min(620px, 48vw);

  margin-right: auto;
}

.if-brand-title,
.if-brand-subtitle {
  text-align: left;
}

.if-user-cluster {
  margin-left: auto;
}

.if-shell-collapse-spacer {
  width: 18px;

  flex: 0 0 18px;
}

.if-shell-collapse-control {
  margin-left: 0;

  flex: 0 0 34px;
}

/* Compact mode keeps the brand left aligned instead of centering it. */

.if-shell-compact-toggle:checked ~ .if-masthead .if-brand-lockup {
  margin-right: auto;
}

/* Slightly more separation on wider screens. */

@media (min-width: 1000px) {
  .if-shell-collapse-spacer {
    width: 26px;

    flex-basis: 26px;
  }
}

/* On narrow screens reduce the gap so the controls still fit. */

@media (max-width: 760px) {
  .if-brand-lockup {
    max-width: min(360px, 45vw);
  }

  .if-shell-collapse-spacer {
    width: 8px;

    flex-basis: 8px;
  }
}

/* ============================================================
   MAIN LAYOUT — FLEX CONTENT HEIGHT
   ============================================================ */

/*
 * The complete application shell owns exactly one viewport.
 * Navigation/header elements consume their natural height.
 * .if-content receives every remaining pixel.
 */

.if-site-shell {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

.if-masthead,
.if-primary-nav,
.if-admin-nav-region {
  flex: 0 0 auto;
}

/*
 * IMPORTANT:
 * Make the actual content region a flex column.
 *
 * FormBuilder can now use flex:1 instead of percentage heights or
 * calc(100vh - ...). Regular pages continue to work because this
 * region itself scrolls when their content is taller than available.
 */

.if-content {
  width: 100%;

  display: flex;
  flex-direction: column;

  flex: 1 1 0;

  min-width: 0;
  min-height: 0;

  overflow: auto;

  /* Let scrolling pages continue underneath the transparent area around
       the floating navigation. Padding preserves the initial page position;
       it scrolls away with the content instead of forming an opaque strip. */
  --if-floating-nav-offset: 42px;
  margin-top: calc(-1 * var(--if-floating-nav-offset));
  padding-top: var(--if-floating-nav-offset);
}

.if-content-with-admin-nav {
  --if-floating-nav-offset: 93px;
}

.if-shell-compact-toggle:checked ~ .if-content {
  --if-floating-nav-offset: 0px;
}

.if-shell-compact-toggle:checked ~ .if-content-with-admin-nav {
  --if-floating-nav-offset: 51px;
}

/* Once the primary nav is collapsed, regular pages must stop using the
   negative floating-nav overlap or their first content rows slide beneath
   the compact masthead. */
.if-shell-compact-toggle:checked ~ .if-content .if-page {
  margin-top: 0;
}

.if-shell-compact-toggle:checked ~ .if-content-with-admin-nav .if-page {
  margin-top: 0;
}

/* Keep page headings close to the floating navigation from first paint.
   The former 28px page inset made the layout look correct only after the
   user had scrolled some of that empty space away. */
.if-content .if-page {
  margin-top: -34px;
  padding-top: 20px;
}

.if-content-form-builder .if-page {
  margin-top: 0;
}

/* Form Builder is a contained workspace beneath the floating navigation.
   A small transparent gap prevents the nav and builder header from reading
   as one clipped, full-width bar. */
.if-content-form-builder {
  box-sizing: border-box;
  padding: calc(var(--if-floating-nav-offset) + 8px) 16px 12px;
}

.if-content-form-builder .form-builder-shell {
  overflow: hidden;
  border: 1px solid var(--if-border);
  border-radius: 12px;
  background: var(--if-surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.if-content-form-builder .form-builder-header {
  border-radius: 11px 11px 0 0;
  background: rgba(255, 255, 255, 0.98);
}

@media (max-width: 700px) {
  .if-content .if-page {
    margin-top: -22px;
    padding-top: 14px;
  }

  .if-content-form-builder {
    padding-right: 8px;
    padding-left: 8px;
  }
}

/*
 * Collapsed primary navigation must consume literally zero flex height.
 */

.if-shell-compact-toggle:checked ~ .if-primary-nav {
  flex-basis: 0;

  height: 0;
  min-height: 0;
  max-height: 0;

  margin-top: 0;
  margin-bottom: 0;

  padding-top: 0;
  padding-bottom: 0;

  overflow: hidden;

  border-top-width: 0;
  border-bottom-width: 0;

  opacity: 0;

  pointer-events: none;
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

/* ==========================================================================
   SOURCE: accessibility-remediation.css
   ========================================================================== */
/* Application-wide readability floor for text WAVE evaluates as undersized. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
video {
  max-width: 100%;
  height: auto;
}

:is(
  p,
  li,
  dd,
  td,
  th,
  label,
  .if-field-caption,
  [role="alert"],
  [role="status"]
) {
  overflow-wrap: anywhere;
}

:target {
  scroll-margin-block-start: 1rem;
}

body :is(label, .if-field-caption, input, select, textarea, button) {
  font-size: max(0.875rem, 1em) !important;
}

/* Maintain a readable floor for semantic text throughout every feature area. */
body :is(p, li, dt, dd, td, th, caption, small) {
  font-size: max(0.875rem, 1em) !important;
}

body
  :is(
    .if-eyebrow,
    [class$="-eyebrow"],
    [class$="-breadcrumb"],
    [class$="-breadcrumbs"],
    [class$="-metadata"],
    [class$="-meta"],
    [class$="-caption"]
  ) {
  font-size: 0.875rem !important;
  line-height: 1.4;
}

body
  :is(
    small,
    .if-field-help,
    [class$="-help"],
    [class$="-hint"],
    [class$="-description"]
  ) {
  font-size: max(0.8125rem, 1em) !important;
  line-height: 1.45;
}

.if-validation-summary:not(:empty) {
  margin-block: 0 1rem;
  padding: 0.875rem 1rem;
  border: 2px solid var(--if-danger, #b42318);
  border-radius: var(--if-radius-control, 0.5rem);
  background: var(--if-danger-bg, #fef3f2);
  color: var(--if-danger, #8a1c13);
}

.if-validation-summary ul {
  margin: 0;
  padding-inline-start: 1.25rem;
}

/* Masthead controls are one visual system: identity, bell, admin, and logout. */
.if-user-cluster .if-user-segment {
  min-height: 44px !important;
  padding-inline: 0.875rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25;
}

.if-user-cluster .if-notification-bell {
  width: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
}

.if-notification-bell-icon {
  font-size: 1rem !important;
}

.if-notification-count,
.if-admin-nav-alert-count {
  min-width: 1.25rem;
  height: 1.25rem;
  font-size: 0.75rem !important;
}

/* Primary, administration, and in-page section navigation use the
   administration navigation as their shared visual contract. */
.if-primary-nav-inner {
  height: auto !important;
  min-height: 43px;
}

.if-primary-nav .if-primary-nav-link,
.if-admin-nav .if-admin-nav-link,
.if-section-nav .if-section-nav-link {
  min-height: 44px !important;
  padding-inline: 11px !important;
  border-radius: 7px;
  color: var(--if-text-muted, #64748b) !important;
  font-family: var(--if-font-nav-config, inherit);
  font-size: 0.875rem !important;
  font-weight: 750;
  line-height: 1 !important;
}

.if-section-nav .if-section-nav-link strong {
  color: inherit;
  font: inherit;
}

.if-admin-nav-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-basis: 1.25rem;
  font-size: 0.875rem !important;
}

.if-admin-nav-chevron {
  font-size: 0.75rem !important;
}

.if-admin-nav-popover {
  width: min(19rem, calc(100vw - 1.5rem));
}

.if-admin-nav-popover-link {
  min-height: 44px;
  padding: 0.75rem 0.875rem;
}

.if-admin-nav-popover-link strong,
.if-admin-nav-popover-link span {
  font-size: 0.875rem !important;
  line-height: 1.35;
}

/* Notification content follows the same readable utility scale. */
.if-notification-header strong,
.if-notification-header span,
.if-notification-clear,
.if-notification-type,
.if-notification-copy strong,
.if-notification-copy > span,
.if-notification-copy small,
.if-notification-empty strong,
.if-notification-empty p {
  font-size: 0.875rem !important;
}

.if-notification-clear {
  min-height: 44px;
  padding-inline: 0.75rem;
}

/* Common utility copy and table UI should never return to sub-14px sizing. */
body
  :is(
    .if-table-action,
    .if-table-sort,
    .if-table-pagination,
    .if-page-size-control,
    [class$="-help"],
    [class$="-hint"],
    [class$="-description"],
    [class$="-summary"],
    [class$="-subtitle"]
  ) {
  font-size: 0.875rem !important;
  line-height: 1.4;
}

body
  :is(
    [class$="-badge"],
    [class$="-pill"],
    [class$="-status"],
    [class$="-count"]
  ) {
  font-size: 0.8125rem !important;
  line-height: 1.25;
}

/* Preserve the layout and typography of captions corrected from invalid labels. */
.if-field-caption {
  display: inline-block;
}

/* Links and buttons that share a component class must render identically. */
body
  :is(a, button):is(
    .if-btn,
    .if-table-action,
    .if-row-menu-item,
    .builder-small-button,
    .auth-submit
  ) {
  box-sizing: border-box;
  font-family: var(--if-font-button-config, "Segoe UI", Arial, sans-serif);
  font-size: 0.875rem !important;
  font-weight: var(--if-font-button-weight, 700);
  line-height: 1.25;
}

.if-row-menu-item {
  min-height: 44px;
  padding-block: 0.625rem;
}

/* Use the global secondary brand color for every non-destructive button hover. */
body
  :is(
    button:not(.if-btn-danger):not(.if-btn-danger-outline):not(
        .if-row-menu-item-danger
      ):not(.if-admin-nav-screen):not(.catalog-category-tile):not(.catalog-chip),
    a.if-btn,
    a.if-table-action,
    a.if-row-menu-item:not(.if-row-menu-item-danger),
    a.builder-small-button,
    a.auth-submit
  ):not(:disabled):not([aria-disabled="true"]):hover {
  border-color: var(--if-secondary, #0a7cb4) !important;
  background: var(--if-secondary, #0a7cb4) !important;
  color: var(--if-secondary-contrast, #fff) !important;
}

/* Complex buttons often contain labels, captions, badges, or code samples
   with a component-level color. Keep their text readable, while preserving
   self-contained brand marks and avatars whose own backgrounds need their
   original foreground colors. */
body
  :is(
    button:not(.if-btn-danger):not(.if-btn-danger-outline):not(
        .if-row-menu-item-danger
      ):not(.if-admin-nav-screen):not(.catalog-category-tile):not(.catalog-chip):not(.if-primary-nav-link):not(
        .if-admin-nav-link
      ):not(.if-section-nav-link),
    a.if-btn,
    a.if-table-action,
    a.if-row-menu-item:not(.if-row-menu-item-danger),
    a.builder-small-button,
    a.auth-submit
  ):not(:disabled):not([aria-disabled="true"]):hover
  *:not(
    [class*="logo"],
    [class*="icon"],
    [class*="avatar"],
    [class*="monogram"],
    [class*="initial"],
    .auth-sso-icon,
    [class*="logo"] *,
    [class*="icon"] *,
    [class*="avatar"] *,
    [class*="monogram"] *,
    [class*="initial"] *,
    .auth-sso-icon *
  ) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor;
}

body
  :is(
    button:not(.if-btn-danger):not(.if-btn-danger-outline):not(
        .if-row-menu-item-danger
      ):not(.if-admin-nav-screen):not(.catalog-category-tile):not(.catalog-chip):not(.if-primary-nav-link):not(
        .if-admin-nav-link
      ):not(.if-section-nav-link),
    a.if-btn,
    a.if-table-action,
    a.if-row-menu-item:not(.if-row-menu-item-danger),
    a.builder-small-button,
    a.auth-submit
  ):not(:disabled):not([aria-disabled="true"]):hover
  *:not(
    [class*="logo"],
    [class*="icon"],
    [class*="avatar"],
    [class*="monogram"],
    [class*="initial"],
    .auth-sso-icon,
    [class*="logo"] *,
    [class*="icon"] *,
    [class*="avatar"] *,
    [class*="monogram"] *,
    [class*="initial"] *,
    .auth-sso-icon *
  )::before,
body
  :is(
    button:not(.if-btn-danger):not(.if-btn-danger-outline):not(
        .if-row-menu-item-danger
      ):not(.if-admin-nav-screen):not(.if-primary-nav-link):not(
        .if-admin-nav-link
      ):not(.if-section-nav-link),
    a.if-btn,
    a.if-table-action,
    a.if-row-menu-item:not(.if-row-menu-item-danger),
    a.builder-small-button,
    a.auth-submit
  ):not(:disabled):not([aria-disabled="true"]):hover
  *:not(
    [class*="logo"],
    [class*="icon"],
    [class*="avatar"],
    [class*="monogram"],
    [class*="initial"],
    .auth-sso-icon,
    [class*="logo"] *,
    [class*="icon"] *,
    [class*="avatar"] *,
    [class*="monogram"] *,
    [class*="initial"] *,
    .auth-sso-icon *
  )::after {
  color: inherit !important;
}

/* Field palette glyphs are self-contained marks on a light tile. They keep
   the brand color when the surrounding palette button uses its hover color. */
.form-builder-palette .builder-field-button:hover .builder-field-icon,
.form-builder-sidebar .builder-field-button:hover .builder-field-icon,
.builder-field-button:hover .builder-field-icon {
  color: var(--if-secondary, #0a7cb4) !important;
  -webkit-text-fill-color: currentColor;
}

/* Destructive actions retain their warning color. */
body
  :is(.if-btn-danger, .if-btn-danger-outline, .if-row-menu-item-danger):hover {
  border-color: var(--if-danger, #b42318) !important;
  background: var(--if-danger, #b42318) !important;
  color: #fff !important;
}

/* Navigation hover remains the restrained administration-nav treatment;
   it is not a filled secondary action button. */
.if-primary-nav .if-primary-nav-link:not(.active):hover,
.if-admin-nav
  .if-admin-nav-link:not(.active):not(.if-admin-nav-link-active):hover,
.if-section-nav .if-section-nav-link:not([aria-pressed="true"]):hover {
  border-color: transparent !important;
  background: var(--if-secondary-soft, #f2f8fb) !important;
  color: var(--if-primary, #041e42) !important;
}

/* Selected navigation must retain high contrast after the global button and
   hover rules above have been applied. aria-pressed is the SectionNav source
   of truth; the classes cover routed and grouped administration navigation. */
.if-admin-nav .if-admin-nav-link:is(.active, .if-admin-nav-link-active),
.if-admin-nav .if-admin-nav-link:is(.active, .if-admin-nav-link-active):hover,
.if-primary-nav .if-primary-nav-link.active,
.if-primary-nav .if-primary-nav-link.active:hover,
.if-section-nav .if-section-nav-link[aria-pressed="true"],
.if-section-nav .if-section-nav-link[aria-pressed="true"]:hover {
  border-color: var(--if-primary, #041e42) !important;
  background: var(--if-primary, #041e42) !important;
  color: #fff !important;
}

.if-primary-nav .if-primary-nav-link.active::after,
.if-section-nav .if-section-nav-link[aria-pressed="true"]::after,
.if-admin-nav .if-admin-nav-link-active::after {
  display: none !important;
  content: none !important;
}

/* Interactive labels use readable title casing. Uppercase remains available
   for non-interactive eyebrow labels and acronyms where it carries meaning. */
body
  :is(
    button,
    summary,
    a.if-btn,
    label.if-btn,
    a.if-table-action,
    a.if-row-menu-item,
    .if-primary-nav-link,
    .if-admin-nav-link,
    .if-admin-nav-popover-link,
    [role="button"],
    [role="menuitem"],
    [role="tab"]
  ) {
  text-transform: capitalize !important;
  letter-spacing: normal !important;
}

/* Remain visible even where older component CSS removes focus outlines. */
body
  :is(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex^="-"])
  ):focus-visible {
  outline: 3px solid var(--if-secondary, #0a7cb4) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px var(--if-surface, #fff) !important;
}

.if-skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10000;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1rem;
  border: 2px solid var(--if-secondary, #0a7cb4);
  border-radius: var(--if-radius-control, 0.5rem);
  background: var(--if-surface, #fff);
  color: var(--if-primary, #041e42);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(calc(-100% - 1rem));
}

.if-skip-link:focus {
  transform: translateY(0);
}

/* The destination receives programmatic focus without outlining the whole page. */
:is(.if-content, .auth-content):focus {
  outline: none !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  body
    :is(
      a[href],
      button,
      input,
      select,
      textarea,
      summary,
      [tabindex]:not([tabindex^="-"])
    ):focus-visible {
    outline-color: Highlight !important;
  }
}

@media (max-width: 400px) {
  .if-page {
    width: calc(100% - 1.5rem) !important;
  }

  :is(.if-btn, .if-table-action) {
    white-space: normal;
  }
}

/* Submission review is a reading-heavy record, so it uses the full body scale. */
@media screen {
  /* Status pills are text-bearing table content, not decorative badges.
       Keep every legacy class family readable and allow long states to wrap
       inside the pill instead of bleeding into adjacent columns. */
  :is(
    .if-table-badge,
    .if-table-status,
    .if-status-badge,
    .if-status-pill,
    .home-status-badge,
    .if-submissions-status,
    .submission-list-status,
    .group-admin-status,
    .user-status,
    .email-status,
    .incident-pill,
    .webhook-status,
    .integration-category-status
  ) {
    width: fit-content;
    max-width: 100%;
    min-height: 36px !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px;
    padding: 6px 12px !important;
    font-size: 1rem !important;
    font-weight: 700;
    line-height: 1.35 !important;
    text-align: center;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .submission-review-page {
    font-size: 1rem;
  }

  .submission-review-page
    :is(p, li, dt, dd, label, input, select, textarea, button, a.if-btn) {
    font-size: 1rem !important;
    line-height: 1.5;
  }

  .submission-review-page
    :is(
      .submission-document-header p,
      .submission-metadata strong,
      .submission-response-question,
      .submission-response-answer,
      .submission-content-title,
      .submission-content-block,
      .submission-lookup-selection strong,
      .submission-ai-review-header strong,
      .submission-ai-feedback,
      .submission-ai-meta,
      .submission-reviewer-result strong,
      .submission-reviewer-result span,
      .submission-latest-review-comment-text,
      .submission-latest-review-comment-author,
      .submission-status-reason,
      .submission-status-reviewer,
      .submission-internal-comment-meta strong,
      .submission-internal-comment-meta span,
      .submission-internal-comment-body,
      .submission-internal-comments-empty,
      .submission-document-details strong,
      .submission-document-details small,
      .submission-document-message,
      .submission-documents-empty
    ) {
    font-size: 1rem !important;
    line-height: 1.5;
  }

  .submission-review-page
    :is(
      .submission-response-help,
      .submission-metadata span,
      .submission-lookup-selection span,
      .submission-lookup-details dt,
      .submission-ai-label,
      .submission-action-status > span,
      .submission-workflow-current span,
      .submission-status-timeline-heading span,
      .submission-latest-review-comment-heading > span,
      .submission-latest-review-comment-by,
      .submission-workflow-history-heading span,
      .submission-internal-comment-composer-footer > span
    ) {
    font-size: 0.875rem !important;
    line-height: 1.45;
  }

  .submission-review-page
    :is(
      .submission-section-heading h2,
      .submission-workflow-card-header h2,
      .submission-internal-comments-header h2,
      .submission-latest-review-comment-heading h2,
      .submission-documents-header h2,
      .submission-review-begin-card h2
    ) {
    font-size: 1.25rem !important;
    line-height: 1.3;
  }

  .submission-review-page .submission-document-header h1 {
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
  }

  .submission-review-page
    :is(.if-btn, .submission-action-back, .submission-action-menu-item) {
    min-height: 44px;
    font-size: 0.9375rem !important;
  }
}

@media print {
  /* Printed records intentionally use their dedicated page-fit typography. */
  .if-skip-link {
    display: none !important;
  }

  body :is(label, .if-field-caption, input, select, textarea, button, small) {
    font-size: revert !important;
  }
}

/* Authoritative component typography. Several feature styles predate the
   shared accessibility layer and assign different sizes to equivalent pills
   and menu rows. Keep these rules last so component appearance does not
   depend on stylesheet load order or on the element used for its text. */
@media screen {
  body
    :is(
      .if-table-badge,
      .if-table-status,
      .if-status-badge,
      .if-status-pill,
      .home-status-badge,
      .home-assigned-review-badge,
      .available-form-owner-pill,
      .available-form-new-badge,
      .available-form-status-badge,
      .if-submissions-status,
      .submission-list-status,
      .group-admin-status,
      .if-category-pill,
      .group-admin-count-pill,
      .group-color-preview-pill,
      .user-status,
      .user-sso-managed-badge,
      .email-status,
      .email-default-badge,
      .incident-pill,
      .webhook-status,
      .integration-category-status,
      .database-query-badge,
      .docusign-workflow-badge
    ) {
    font-size: 0.875rem !important;
    line-height: 1.25 !important;
  }

  body
    :is(
      .if-row-menu-item,
      .builder-header-menu-item,
      .submission-action-menu-item,
      .if-admin-nav-popover-link
    ) {
    font-size: 0.875rem !important;
    line-height: 1.35 !important;
  }

  body
    :is(
      .if-row-menu-item,
      .builder-header-menu-item,
      .submission-action-menu-item,
      .if-admin-nav-popover-link
    )
    :is(strong, span, small) {
    font-size: inherit !important;
    line-height: inherit !important;
  }
}