/* --- Brand palette aligned with Nav Menu --- */
:root {
    --brand-cream: #f5f4ee; /* sidebar/top-row bg */
    --brand-olive: #4e5438; /* nav link/icon */
    --brand-plum: #3e3854; /* nav active/hover */
    --brand-line: #e2dfd6; /* soft divider */
    --draft-bg: #eef2f6; /* soft slate */
    --draft-bd: #d6dee8; /* light outline */
    --draft-fg: #2e3a46; /* readable text */
    --draft-dot: #4a6782; /* accent dot */

    --mch-cream-bg: #f5f4ee;
    
    --mch-cream-shadow: 0 1px 3px rgba(0,0,0,.08);
    --mch-card-radius: .5rem;
    --mch-card-padding: 1rem;

  /* ensure cream-card border var exists */
  --mch-cream-border: var(--brand-line, #e2dfd6);
}

/* Load Roboto Flex for site titles (replaces Montserrat) */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,600;8..144,700;8..144,800&display=swap');

/* Use Roboto Flex for headings/titles across the app */
:root {
    --heading-font: "Roboto Flex", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Heading font (pick ONE import) */
/*@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600;700;800&display=swap');*/
/* Alternatives:
*/@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@600;700&display=swap');
*/

/* Apply to common title elements */
h1, h2, h3, h4,
.page-title,           /* optional page title class */
.login-title,          /* login page title */
.view-irm-popup .title-text,
.item-details-popup .title-text {
  font-family: var(--heading-font);
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--brand-plum);
}

/* Apply to the login title only */
.login-title {
  font-family: var(--heading-font);
  font-weight: 700;
  letter-spacing: .2px;
}

/* Subtitle under the login title */
.login-subtitle {
  margin: -.25rem 0 .75rem;
  color: var(--brand-olive);
  font-weight: 600;
}

/* View IRM popup header - switch to cream/olive/plum */
.view-irm-popup .view-irm-header {
  position: relative;
  background: linear-gradient(180deg, var(--brand-cream), #ffffff);
  border-bottom: 1px solid var(--brand-line);
  padding: .8rem 1rem;
  border-radius: .6rem .6rem 0 0;
}
.view-irm-popup .view-irm-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-olive), var(--brand-plum));
  border-radius: .6rem .6rem 0 0;
}

/* View IRM header: smaller title and pill chips (badges) to match brand */
.view-irm-popup .view-irm-title .title-text {
  font-size: .98rem;            /* smaller than before */
  font-weight: 700;
  color: var(--brand-plum);
  letter-spacing: .2px;
}

.view-irm-popup .view-irm-meta {
  display: flex;
  gap: .35rem;                  /* tighter spacing */
  flex-wrap: wrap;
  margin-top: .2rem;
}

.view-irm-popup .meta-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 2px 8px;             /* compact */
  border-radius: 9999px;        /* pill shape (no more squared corners) */
  font-size: .78rem;            /* smaller font */
  line-height: 1.2;
  background: #ffffff;
  border: 1px solid var(--brand-line);
  color: var(--brand-olive);
  box-shadow: 0 1px 1px rgba(0,0,0,.03);
}

/* Popup grid header and group rows */
.irm-popup-grid .dxbl-grid-header-row {
  background: #faf9f4;           /* warm cream */
  color: var(--brand-olive);
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.irm-popup-grid .dxbl-grid-header-row .dxbl-grid-cell {
  padding: 8px 10px;
}

.irm-popup-grid .dxbl-grid-group-row > td {
  background: #fbfaf6;
  border: 1px solid var(--brand-line);
  border-left: 4px solid var(--brand-plum);
  color: var(--brand-olive);
  padding: 6px 10px !important;
  border-radius: 6px;
  margin: 4px 0;
}
.irm-popup-grid .group-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid var(--brand-line);
  color: var(--brand-plum);
  font-weight: 600;
  font-size: .9rem;
}
.irm-popup-grid .group-chip::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-plum);
  box-shadow: 0 0 0 2px #eee6ff inset;
}

/* Data rows */
.irm-popup-grid .dxbl-grid-data-row .dxbl-grid-cell {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.irm-popup-grid .dxbl-grid-data-row:hover {
  background: #f2f1eb;
}
.irm-popup-grid .dxbl-grid-data-row.dx-selection,
.irm-popup-grid .dxbl-grid-data-row.dx-state-selected {
  background: #e8eef4 !important; /* subtle cool contrast */
}

/* Status badges tuned to the brand (avoid bright blues) */
.status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 9999px;
  font-weight: 600; font-size: .9rem; line-height: 1.2;
  white-space: nowrap; border: 1px solid transparent;
}
.status-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.7) inset;
}


/* Active (sage) */
.status-badge.is-active {
  background: #eef5f0;           /* soft sage */
  border-color: #d7e7dc;
  color: #2f5a3a;
}
.status-badge.is-active::before { background: #2e7d32; }

/* Draft (warm gray) */
.status-badge.is-draft {
  background: var(--draft-bg) !important;
  border-color: var(--draft-bd) !important;
  color: var(--draft-fg) !important;
}
.status-badge.is-draft::before {
  background: var(--draft-dot) !important;
  box-shadow: 0 0 0 2px #e7edf5 inset;
}

/* Complete (teal) */
.status-badge.is-complete {
  background: #eaf6f5;
  border-color: #cfeceb;
  color: #0f5c5a;
}
.status-badge.is-complete::before { background: #0e8074; }

/* Item Details popup to match View IRM header */
.item-details-popup .item-details-header {
  background: linear-gradient(180deg, var(--brand-cream), #ffffff);
  border-bottom: 1px solid var(--brand-line);
  padding: .8rem 1rem;
  border-radius: .6rem .6rem 0 0;
  position: relative;
}
.item-details-popup .item-details-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-olive), var(--brand-plum));
  border-radius: .6rem .6rem 0 0;
}
.item-details-popup .item-details-title .title-text { color: var(--brand-plum); }
.item-details-popup .meta-chip {
  background: #ffffff;
  border: 1px solid var(--brand-line);
  color: var(--brand-olive);
}

/* Item Details header chips: same pill style/sizing as View IRM */
.item-details-popup .item-details-meta .meta-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: .78rem;
  line-height: 1.2;
  background: #fff;
  border: 1px solid var(--brand-line);
  color: var(--brand-olive);
  box-shadow: 0 1px 1px rgba(0,0,0,.03);
}

/* Harmonize section cards with brand */
.item-details-popup .quad-section {
  border: 1px solid rgba(0,0,0,.07);
  border-radius: .55rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.item-details-popup .quad-section:hover {
  border-color: rgba(62,56,84,.35); /* plum tint */
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
.item-details-popup label.mch-label {
  color: #475569;
}

/* Item Details tweaks: cream cards + bold labels */
.item-details-popup .quad-section {
  background: var(--brand-cream, #f5f4ee);
}

.item-details-popup label.mch-label,
.item-details-popup .mch-label {
  font-weight: 700;
}

/* Editors: borders + focus ring aligned to brand */
.item-details-popup .dxbl-memo textarea,
.item-details-popup .dxbl-text-edit,
.item-details-popup .dxbl-number-edit,
.item-details-popup .dxbl-date-edit {
  border-color: var(--brand-line);
  border-radius: .5rem;
}
.item-details-popup .dxbl-memo textarea:focus,
.item-details-popup .dxbl-text-edit:focus-within,
.item-details-popup .dxbl-number-edit:focus-within,
.item-details-popup .dxbl-date-edit:focus-within {
  outline: none;
  box-shadow: 0 0 0 2px rgba(62,56,84,.18); /* plum focus */
  border-color: #cfc8de;
}

/* File badges: warm variant to match nav palette */
.item-details-popup .file-badge {
  background: #fbfaf6;
  color: var(--brand-plum);
  border: 1px solid var(--brand-line);
}

/* Footer: subtle divider, right-aligned actions */
.item-details-popup .footer-actions {
  border-top: 1px solid var(--brand-line);
  padding-top: .6rem;
  margin-top: .4rem;
  background: #fff;
  justify-content: flex-end;
}

/* Optional: round action buttons without changing your RenderStyle colors */
.item-details-popup .footer-actions .dxbl-button {
  border-radius: 9999px;
  font-weight: 600;
  padding: .35rem .9rem;
}

/* Optional: make the small Override dropdown feel on-brand */
.item-details-popup .status-override-dropdown .dxbl-dropdown,
.item-details-popup .status-override-dropdown .dxbl-text-edit {
  border-color: #cfc8de !important;
  box-shadow: 0 0 0 2px rgba(62,56,84,.18);
  border-radius: .5rem;
}

/* IRM Dashboard grid - align look with View IRM */
.mch-irm-grid .dxbl-grid-header-row {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #faf9f4;                  /* brand cream */
  color: var(--brand-olive);
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.mch-irm-grid .dxbl-grid-header-row .dxbl-grid-cell { padding: 8px 10px; }

/* Group rows */
.mch-irm-grid .dxbl-grid-group-row > td {
  background: #fbfaf6;
  border: 1px solid var(--brand-line);
  border-left: 4px solid var(--brand-plum);
  color: var(--brand-olive);
  padding: 6px 10px !important;
  
}
.mch-irm-grid .group-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid var(--brand-line);
  color: var(--brand-plum);
  font-weight: 600;
  font-size: .9rem;
}
.mch-irm-grid .group-chip::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-plum);
  box-shadow: 0 0 0 2px #eee6ff inset;
}

/* Shrink the tiny indent/expander area further to reduce the visible "empty" column */
.items-grid.dxbl-grid { 
  --dxbl-grid-group-indent-cell-width: 0.75rem; /* default is ~2.25rem */
}

/* Make the indent and expand cells as small as possible */
.items-grid .dxbl-grid-header-row .dxbl-grid-indent-cell,
.items-grid .dxbl-grid-data-row   .dxbl-grid-indent-cell {
  width: 0.75rem !important;
  min-width: 0.75rem !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: var(--dxbl-grid-header-bg) !important; /* avoid a contrasting sliver */
}

/* Reduce the actual expand button cell too */
.items-grid .dxbl-grid-header-row .dxbl-grid-expand-button-cell,
.items-grid .dxbl-grid-data-row   .dxbl-grid-expand-button-cell {
  width: 16px !important;
  min-width: 16px !important;
  padding: 0 2px !important;
}

/* Collapse any header spacers that can look like a thin empty column */
.items-grid .dxbl-grid-header-row .dxbl-grid-spacer,
.items-grid .dxbl-grid-header-row [class*="spacer"],
.items-grid .dxbl-grid-header-row .dxbl-grid-scroll-spacer,
.items-grid .dxbl-grid-header-row .dxbl-grid-right-spacer {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Ensure auto layout to stop phantom filler columns */
.items-grid.dxbl-grid .dxbl-grid-table,
.items-grid .dxbl-grid-table {
  table-layout: auto !important;
}

/* Data rows */
.mch-irm-grid .dxbl-grid-data-row .dxbl-grid-cell {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.mch-irm-grid .dxbl-grid-data-row:hover { background: #f2f1eb; }
.mch-irm-grid .dxbl-grid-data-row.dx-selection,
.mch-irm-grid .dxbl-grid-data-row.dx-state-selected { background: #e8eef4 !important; }

/* Use the same status-badge variants already defined */
.mch-irm-grid .status-badge { display: inline-flex; }

/* Fallback for legacy DevExpress CSS (if any) */
.mch-irm-grid .dxgvHeader { background: #faf9f4; color: var(--brand-olive); font-weight:600; }
.mch-irm-grid .dxgvDataRow:hover { background: #f2f1eb; }


/* Group badges (use same pill look across Dashboard and View IRM) */
.group-badge,
.group-chip { /* keep old class working */
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 2px 10px;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid var(--brand-line);
  color: var(--brand-plum);
  font-weight: 600;
  font-size: .85rem;
  line-height: 1.2;
  box-shadow: 0 1px 1px rgba(0,0,0,.03);
}
.group-badge::before,
.group-chip::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-plum);
  box-shadow: 0 0 0 2px #eee6ff inset;
}

/* Optional: lighten group row container to let the badge stand out */
.mch-irm-grid .dxbl-grid-group-row > td,
.irm-popup-grid .dxbl-grid-group-row > td {
  background: #fbfaf6;
  border: 1px solid var(--brand-line);
  border-left-color: transparent; /* badge carries accent now */
  padding: 6px 10px !important;

}

/* Emphasize Waiting for Review more than other statuses */
.status-badge.is-waiting {
  background: #3e3854 !important;   /* plum fill */
  color: #ffffff !important;        /* white text */
  border-color: #2f2948 !important; /* darker plum border */
  box-shadow: 0 0 0 3px rgba(62,56,84,.22);
  font-weight: 800;
  letter-spacing: .35px;
  text-transform: uppercase;
  padding: 4px 12px;                /* slightly larger */
}
.status-badge.is-waiting::before {
  background: #f5f4ee !important;   /* cream dot */
  box-shadow: 0 0 0 2px rgba(255,255,255,.35) inset;
}

/* Group badge variant for Waiting for Review groups */
.group-badge.is-waiting {
    background: #3e3854 !important; /* plum fill */
    color: #ffffff !important; /* white text */
    border-color: #2f2948 !important; /* darker plum border */
    box-shadow: 0 0 0 3px rgba(62,56,84,.22);
    font-weight: 800;
    letter-spacing: .35px;
    text-transform: uppercase;
    padding: 4px 12px;
}
    .group-badge.is-waiting::before {
        background: #f5f4ee !important; /* cream dot */
        box-shadow: 0 0 0 2px rgba(255,255,255,.35) inset;
    }
/* Simplify expander: only a plain chevron, no rounded corners or outline */
.mch-irm-grid .dxbl-grid-expand-button-cell,
.irm-popup-grid .dxbl-grid-expand-button-cell {
  width: 22px;
  padding-right: 4px;
}
.mch-irm-grid .dxbl-grid-expand-button-cell > button,
.irm-popup-grid .dxbl-grid-expand-button-cell > button {
  background: transparent;
  border: none;
  border-radius: 0;        /* remove rounded corners */
  padding: 0;
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-plum);
  box-shadow: none;        /* remove outline look */
  outline: none;
  cursor: pointer;
}

/* Hover state without borders/rounding */
.mch-irm-grid .dxbl-grid-expand-button-cell > button:hover,
.irm-popup-grid .dxbl-grid-expand-button-cell > button:hover {
  color: var(--brand-olive);
  background: transparent;
}
/* Keyboard focus: subtle focus ring, not an outline */
.mch-irm-grid .dxbl-grid-expand-button-cell > button:focus-visible,
.irm-popup-grid .dxbl-grid-expand-button-cell > button:focus-visible {
  box-shadow: 0 0 0 2px rgba(78,84,56,.25);
}

/* Override any previous expander glyphs */
.mch-irm-grid .dxbl-grid-group-row button[aria-label="Expand"]::before,
.irm-popup-grid .dxbl-grid-group-row button[aria-label="Expand"]::before,
.mch-irm-grid .dxbl-grid-expand-button-cell > button[aria-label="Expand"]::before,
.irm-popup-grid .dxbl-grid-expand-button-cell > button[aria-label="Expand"]::before {
  content: var(--expander-right);
  font-size: 13px;
  line-height: 1;
}

.mch-irm-grid .dxbl-grid-expand-button-cell > button[aria-label="Collapse"]::before,
.irm-popup-grid .dxbl-grid-expand-button-cell > button[aria-label="Collapse"]::before,
.mch-irm-grid .dxbl-grid-group-row button[aria-label="Collapse"]::before,
.irm-popup-grid .dxbl-grid-group-row button[aria-label="Collapse"]::before {
  content: var(--expander-down);
  font-size: 13px;
  line-height: 1;
}

/* Waiting for Review group badge — softer, non-gaudy (override previous fill) */
.group-badge.is-waiting {
  background: #f4f2fb !important;      /* soft plum tint */
  border-color: #e6e0f4 !important;     /* light border */
  color: var(--brand-plum) !important;  /* readable plum text */
  box-shadow: none !important;          /* remove heavy ring */
  text-transform: none !important;      /* no shouting */
  letter-spacing: 0 !important;
  font-weight: 600 !important;          /* balanced weight */
  padding: 2px 10px !important;         /* same as other pills */
}
.group-badge.is-waiting::before {
  background: #6b5ea8 !important;       /* muted accent dot */
  box-shadow: 0 0 0 2px #eee9fb inset !important; /* soft inner ring */
}

/* Optional: Draft group badge (kept subtle) */
.group-badge.is-draft {
    background: var(--draft-bg) !important;
    border-color: var(--draft-bd) !important;
    color: var(--draft-fg) !important;
}

    .group-badge.is-draft::before {
        background: var(--draft-dot) !important;
    }
/* Make the group panel clearly a drop zone */
.mch-irm-grid .dxbl-grid-top-panel {
  background: #faf9f4;                    /* warm cream */
  border: 2px dashed var(--brand-line);   /* dashed = drop target */
  color: var(--brand-olive);
  padding: .35rem .6rem;
  min-height: 42px;                       /* keep visible even when empty */
  display: flex;
  align-items: center;
  gap: .35rem;
  transition: border-color .15s ease, background .15s ease;
}

/* Group panel (no dashed) – soft card look */
.mch-irm-grid .dxbl-grid-top-panel,
.mch-irm-grid .dxbl-grid-group-panel {
  background: linear-gradient(180deg, #faf9f4, #ffffff);
  border: 1px solid var(--brand-line);
  padding: .4rem .6rem;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: .35rem;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.04);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Subtle emphasis on hover */

.mch-irm-grid .dxbl-grid-group-panel:hover {
  border-color: rgba(62,56,84,.28); /* plum tint */
  box-shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 2px 6px rgba(0,0,0,.06);
}

/* Hint text when empty */
.mch-irm-grid .dxbl-grid-group-panel::after {
  content: "Drag column headers here to group";
  font-size: .85rem;
  color: #6b6a62;
  opacity: .9;
  pointer-events: none;
}
.mch-irm-grid .dxbl-grid-group-panel:has(*:not(style))::after { content: ""; }

/* Optional: thin accent bar on the left (uncomment if you like it) */

.mch-irm-grid .dxbl-grid-top-panel::before,
.mch-irm-grid .dxbl-grid-group-panel::before {
  content: "";
  width: 3px; height: 70%;
  position: absolute;
  left: 8px; top: 15%;
  background: linear-gradient(180deg, var(--brand-olive), var(--brand-plum));
  opacity: .18;
}
.mch-irm-grid .dxbl-grid-top-panel,
.mch-irm-grid .dxbl-grid-group-panel { position: relative; }


/* Make headers feel draggable (kept minimal) */
.mch-irm-grid .dxbl-grid-header-row .dxbl-grid-cell { cursor: grab; }
.mch-irm-grid .dxbl-grid-header-row .dxbl-grid-cell:active { cursor: grabbing; }

/* Plain status (no badge) for non-grouped cells */
.status-text {
  color: inherit;
  font-weight: 600;
}
.status-text.is-waiting {
  color: #8b1d2c; /* burgundy attention */
}

/* Login page styles (no wrapper) */
.login-title {
  color: var(--brand-plum);
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 .75rem;
}
.login-row { align-items: flex-start; gap: 1rem; }
.login-card {
  background: #fff;
  border: 1px solid var(--brand-line);
  border-radius: .6rem;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* Inputs and buttons (scoped to the card) */
.login-card .form-control {
  border-color: var(--brand-line);
  border-radius: .5rem;
}
.login-card .form-control:focus {
  border-color: #cfc8de;
  box-shadow: 0 0 0 .15rem rgba(62,56,84,.18);
}
.login-card .form-check-input { accent-color: var(--brand-plum); }
.login-card .btn-primary {
  background-color: var(--brand-plum);
  border-color: var(--brand-plum);
  font-weight: 700;
}
.login-card .btn-primary:hover,
.login-card .btn-primary:focus {
  background-color: var(--brand-olive);
  border-color: var(--brand-olive);
}

/* Center and widen the Log in button (place below the current .login-btn rules) */
.login-card .login-btn {
  display: block;
  margin: .4rem auto 0;
  width: clamp(220px, 60%, 360px);
  padding: .5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .5rem;
}

@media (max-width: 576px) {
  .login-card .login-btn { width: 100%; }
}

/* Links and helper UI */
.brand-link,
.alt-link {
  color: var(--brand-plum);
  text-decoration: none;
  font-weight: 600;
}
.brand-link:hover,
.alt-link:hover {
  color: var(--brand-olive);
  text-decoration: underline;
}
.login-links {
  list-style: none;
  padding: .75rem 0 0;
  margin: .5rem 0 0;
  border-top: 1px solid var(--brand-line);
}
.login-links li { margin: .25rem 0; }
.login-divider {
  border-left: 1px solid var(--brand-line);
  min-height: 100%;
  opacity: .8;
}
.alt-login { padding-top: .5rem; }
.alt-login h4 { color: var(--brand-olive); margin: 0; }
/* Choice layout helpers */
.auth-choice { row-gap: 1rem; }

/* "OR" badge between options on md+ screens */
.option-or {
  width: 44px; height: 44px;
  border-radius: 9999px;
  background: #faf9f4;
  border: 1px solid var(--brand-line);
  color: var(--brand-olive);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; font-size: .8rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* Inline divider for small screens */
.option-or-inline {
  display: flex; align-items: center; gap: .5rem;
  color: var(--brand-olive); font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; font-size: .8rem;
  margin: .75rem 0;
}
.option-or-inline::before,
.option-or-inline::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--brand-line);
}

/* Access code card tweaks */
.access-card { border-left: 4px solid rgba(62,56,84,.18); }
.access-title {
  font-family: var(--heading-font);
  color: var(--brand-plum);
  font-weight: 700;
  margin: 0 0 .25rem;
  font-size: 1.1rem;
}
.access-desc { color: #475569; margin: 0 0 .25rem; }

/* Brand-aligned outline button (scoped) */
.login-card .btn-outline-primary {
  border-color: var(--brand-plum);
  color: var(--brand-plum);
  font-weight: 700;
  border-radius: .5rem;
}
.login-card .btn-outline-primary:hover,
.login-card .btn-outline-primary:focus {
  background: var(--brand-cream);
  border-color: var(--brand-olive);
  color: var(--brand-olive);
}

/* Reusable brand button (DevExpress + Bootstrap) */
.btn-brand,
.dxbl-button.btn-brand {
  background-color: var(--brand-plum) !important;
  border-color: var(--brand-plum) !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: .5rem;
}
.btn-brand:hover,
.dxbl-button.btn-brand:hover,
.dxbl-button.btn-brand:focus {
  background-color: var(--brand-olive) !important;
  border-color: var(--brand-olive) !important;
}

/* DevExpress safety selector (covers alternate class names) */
.dxbl-button.dxbl-primary,
.dxbl-button.dxbl-button-primary {
  background-color: var(--brand-plum) !important;
  border-color: var(--brand-plum) !important;
  color: #fff !important;
}
.dxbl-button.dxbl-primary:hover,
.dxbl-button.dxbl-button-primary:hover,
.dxbl-button.dxbl-primary:focus,
.dxbl-button.dxbl-button-primary:focus {
  background-color: var(--brand-olive) !important;
  border-color: var(--brand-olive) !important;
}

/* View IRM popup button look (scoped so other pages stay unchanged) */
.view-irm-popup .dxbl-button {
  border-radius: .6rem;                 /* softer corners */
  font-weight: 700;
}

/* Optional: pill shape */
.view-irm-popup .dxbl-button.btn-pill { border-radius: 9999px; }

/* Optional: subtle shadow + lift on hover */
.view-irm-popup .dxbl-button.btn-shadow { box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.view-irm-popup .dxbl-button.btn-shadow:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.12); }

/* Strong brand focus ring for keyboard users */
.view-irm-popup .dxbl-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(62,56,84,.28) !important; /* plum ring */
}

/* Consistent height utility (you already use .equal-size) */
.view-irm-popup .dxbl-button.equal-size {
  height: 44px !important;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 1rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1 !important; /* avoid internal line-height differences */
}
.view-irm-popup .dxbl-button.equal-size .dxbl-button-content {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Make each button fill its column and auto-equalize column heights */
.view-irm-popup .row.g-2 > [class^="col"] { display: grid; }
.view-irm-popup .row.g-2 > [class^="col"] .dxbl-button { width: 100%; }


/* View IRM popup: centered "End of items" badge under the grid */
.view-irm-popup .irm-grid-end {
  display: block;              /* full-width block */
  width: 100%;
  text-align: center;          /* center inline content */
  margin: .25rem 0 .75rem;
  border-top: 1px solid var(--brand-line);
  padding-top: .4rem;
  clear: both;                 /* avoid float side-effects */
  pointer-events: none;
}

/* Make the pill center itself even if parent layout changes */
.view-irm-popup .irm-grid-end-badge {
  display: inline-flex;        /* pill look */
  margin: 0 auto;              /* center horizontally */
  align-items: center;
  gap: .35rem;
  padding: 2px 10px;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid var(--brand-line);
  color: var(--brand-olive);
  font-weight: 700;
  font-size: .85rem;
  box-shadow: 0 1px 1px rgba(0,0,0,.03);
}
/* Optional: brand dot (matches group badge style) */
.view-irm-popup .irm-grid-end-badge::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-plum);
  box-shadow: 0 0 0 2px #eee6ff inset;
}
/* Optional: soft plum tint to match popup accents */
.view-irm-popup .irm-grid-end-badge.is-tinted {
  background: #f4f2fb;
  border-color: #e6e0f4;
  color: var(--brand-plum);
}

/* View IRM footer: force two columns side-by-side */
.view-irm-popup .row.g-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.view-irm-popup .row.g-2 > [class^="col"] {
  width: auto;           /* ignore any bootstrap max-width */
  max-width: none;
}
.view-irm-popup .row.g-2 .dxbl-button {
  width: 100%;           /* fill each column */
}



/* Brand accent line above the footer — square corners */
.mch-irm-grid::before {
  content: "";
  height: 3px;
  background: linear-gradient(90deg, var(--brand-olive), var(--brand-plum));
  border-radius: 0;                              /* no radius at top edge */
}

/* Override any previous default borders on the footer */
.mch-irm-grid .dxbl-grid-footer {
  border-top: none !important;      /* remove any default top border */
}


/* Ensure grid content (rows) render above the footer and have a bit of bottom padding */
.mch-irm-grid.footer-slim .dxbl-grid-content,
.mch-irm-grid.footer-slim .dxbl-grid-scrollable-container {
  position: relative;
  z-index: 1;
  padding-bottom: 0 !important; /* reset to avoid extra space */
}

/* Belt-and-suspenders: enforce a visible bottom border on the last data row */
.mch-irm-grid.footer-slim .dxbl-grid-table tr.dxbl-grid-data-row:last-of-type .dxbl-grid-cell {
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}

/* Decorative footer: top border acts as the last-row divider */
.dxbl-grid {
  --deco-footer-h: .5rem;                 /* default height */
  --deco-footer-space: var(--deco-footer-h);
  position: relative;
  padding-bottom: var(--deco-footer-space);
  border-radius: 0 0 .5rem .5rem;   /* match your footer radius */
  overflow: hidden;                 /* clip inner elements and ::after to this curve */
  background-color: #fff;           /* ensure the curved corner looks solid */
}
.dxbl-grid::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--deco-footer-h);
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-cream) 100%);
  border-top: 1px solid var(--brand-line);     /* NEW: top border = last-row divider */
  border-left: 1px solid var(--brand-line);    /* blend sides with grid */
  border-right: 1px solid var(--brand-line);
  border-bottom: 1px solid var(--brand-line);  /* keep bottom edge */
  border-radius: inherit;           /* same bottom corners as the container */
  z-index: 0;
  pointer-events: none;
}
/* Content above the decorative bar */
.dxbl-grid .dxbl-scroll-viewer,
.dxbl-grid .dxbl-scroll-viewer-content,
.dxbl-grid .dxbl-grid-table { position: relative; z-index: 1; }

/* Taller variant used on dashboard */
.dxbl-grid.grid-footer-075 { --deco-footer-h: .75rem; }

/* Single-line mode: hide the data row's own bottom border */
.dxbl-grid .dxbl-grid-table tbody .dxbl-grid-data-row:last-of-type .dxbl-grid-cell {
  border-bottom-color: transparent !important;
}

/* Item Details popup: add padding to quad-section cards */
.item-details-popup .quad-section {
  padding: .9rem 1rem; /* default card padding */
}

/* Compact headings inside the popup cards */
.item-details-popup .mch-label { font-weight: 700; color: #475569; margin-bottom: .35rem; display:block; }
.newirm-form .newirm-card {
  margin-bottom: 1rem; /* was .75rem */
}

/* Add space between cards inside styled popups (e.g., Add New Item) */
.item-details-popup .quad-section {
  margin-bottom: .6rem;
}



/* New Item tab: mimic Add New Item popup look-and-feel */

/* Card container reused in popup and tab */
.form-card {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .06);
    padding: 1rem 1.25rem;
}

/* Tab wrapper to center content and limit width */
.new-item-tab {
    max-width: 860px;              /* overall form width in tab */
    margin: 0 auto;
    padding: 0.5rem 0.25rem;
}

/* Header styling (matches popup header) */
.item-details-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #ececec;
    margin-bottom: .75rem;
}

.item-details-header .title-text {
    font-weight: 600;
    font-size: 1.05rem;
}

/* Section spacing and labels */
.quad-section {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.mch-label {
    font-weight: 600;
    font-size: .95rem;
    color: #3b3b3b;
}


/* Do not let inputs stretch across the page */
.item-form .form-control,
.item-form .dxbl-text-edit-input,
.item-form .dxbl-memo,
.item-form .dxbl-combobox,
.item-form .dxbl-multicombo,
.item-form .dxbl-selectbox {
    max-width: 560px;              /* hard cap on field width */
    width: 100%;
}

/* Utility fixed-widths already used in markup */
.cw-480 { width: 480px; max-width: 100%; }
.cw-360 { width: 360px; max-width: 100%; }

/* Buttons used in popups and tabs */
.btn-brand {
    background-color: #2b5c9c;
    border-color: #2b5c9c;
    color: #fff;
}
.btn-brand:hover,
.btn-brand:focus {
    background-color: #214a7d;
    border-color: #214a7d;
    color: #fff;
}
.equal-size {
    min-width: 160px;
}

/* Footer actions spacing (popup + tab footers) */
.footer-actions {
    display: flex;
    gap: .5rem;
}

/* Tighten Bootstrap row spacing for compact forms */
.row.g-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 0.75rem; }

/* Responsive: keep fields readable on small screens */
@media (max-width: 640.98px) {
    .new-item-tab { padding: 0.25rem; }
    .item-form .form-control,
    .item-form .dxbl-text-edit-input,
    .item-form .dxbl-memo,
    .item-form .dxbl-combobox,
    .item-form .dxbl-multicombo,
    .item-form .dxbl-selectbox {
        max-width: 100%;
    }
}

/* EditItemsforTemplate popup edit form header to match branded popup */
.edititemform .dxbl-dialog-header,
.edititemform .dxbl-popup-header {
  background: linear-gradient(180deg, var(--brand-cream), #ffffff);
  border-bottom: 1px solid var(--brand-line);
  padding: .8rem 1rem;
}

/* Slightly round the dialog and add soft border like other popups */
.edititemform .dxbl-dialog,
.edititemform .dxbl-popup {
  border: 1px solid var(--brand-line);
  border-radius: .6rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Memo editor inside popup form */
.my-memo-style {
  min-height: 90px;
  resize: none;
  border-color: var(--brand-line);
  border-radius: .5rem;
}
.my-memo-style:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(62,56,84,.18);
  border-color: #cfc8de;
}

/* Field cards to match popup look everywhere (popup already styles quad-section) */
.field-card {
  border: 1px solid rgba(0,0,0,.07);
  border-radius: .55rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  background: var(--brand-cream, #f5f4ee);
  padding: .9rem 1rem;
}

/* Fix DevExpress ComboBox extra space after dropdown arrow (scope to AddNewItem) */
.category-field .dxbl-combobox .dxbl-input-buttons,
.item-form .dxbl-combobox .dxbl-input-buttons {
  margin-right: 0 !important;
}
.category-field .dxbl-combobox .dxbl-button-group,
.item-form .dxbl-combobox .dxbl-button-group {
  margin-right: 0 !important;
  gap: 0 !important;
}
.category-field .dxbl-combobox .dxbl-button,
.item-form .dxbl-combobox .dxbl-button {
  margin: 0 !important;
}
.category-field .dxbl-combobox .dxbl-text-edit-input,
.item-form .dxbl-combobox .dxbl-text-edit-input {
  padding-right: 2.25rem !important; /* just enough for the arrow button */
}
.category-field .dxbl-combobox { max-width: 560px; width: 100%; }
/* AddNewItem: space between the per-field cards */
.item-form .field-card {
  margin-bottom: 1rem;         /* add vertical space between cards */
}

/* Optional: remove extra space after the last card */
.item-form .field-card:last-child {
  margin-bottom: 0;
}

/* Optional: slightly larger spacing on wide screens */
@media (min-width: 992px) {
  .item-form .field-card { margin-bottom: 1.2rem; }
}

/* NewIRM: card look for each input block */
.newirm-form .newirm-card {
  background: var(--brand-cream, #f5f4ee);
  border: 1px solid var(--mch-cream-border, #e2dfd6);
  border-radius: .55rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

/* Keep editors readable on cream cards */
.newirm-form .newirm-card .form-control,
.newirm-form .newirm-card .dxbl-text-edit-input,
.newirm-form .newirm-card .dxbl-memo,
.newirm-form .newirm-card .dxbl-combobox,
.newirm-form .newirm-card .dxbl-selectbox {
  background-color: #fff;      /* white input on cream card */
  max-width: 560px;
  width: 100%;
}

/* Consistent headings */
.newirm-form .newirm-card h6 {
  color: var(--brand-plum, #3e3854);
  font-weight: 700;
  margin-bottom: .35rem;
}

/* Optional: subtle hover emphasis */
.newirm-form .newirm-card:hover {
  border-color: rgba(62,56,84,.28); /* plum tint */
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Dark mode balance */
@media (prefers-color-scheme: dark) {
  .newirm-form .newirm-card {
    background: #1f1f1f;
    border-color: #333;
  }
  .newirm-form .newirm-card .form-control,
  .newirm-form .newirm-card .dxbl-text-edit-input,
  .newirm-form .newirm-card .dxbl-memo,
  .newirm-form .newirm-card .dxbl-combobox,
  .newirm-form .newirm-card .dxbl-selectbox {
    background-color: #242424;
    color: #eee;
  }
}

/* Right-side actions: place buttons in a cream card that scrolls with page */
.newirm-actions-card {
  background: var(--brand-cream, #f5f4ee);
  border: 1px solid var(--mch-cream-border, #e2dfd6);
  border-radius: .55rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  padding: 1rem 1.25rem;
}

/* Vertical stack, equal sizing, centered */
.newirm-actions-card .actions-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;                 /* vertical space between buttons */
}

/* Same size buttons, not too wide */
.newirm-actions-card .actions-stack .btn,
.newirm-actions-card .actions-stack .dxbl-button {
  width: 100%;
  max-width: 320px;            /* keeps them moderate width on large screens */
}

/* Consistent height */
.newirm-actions-card .actions-stack .btn.equal-size {
  height: 44px;
  min-height: 44px;
}

/* Full width on small screens */
@media (max-width: 640.98px) {
  .newirm-actions-card .actions-stack .btn {
    max-width: 100%;
  }
}

/* NewIRM: consistent button sizing and spacing */
.newirm-form .equal-size,
.newirm-form .dxbl-button.equal-size {
  height: 44px;
  min-height: 44px;
  padding: 0 1rem;
  line-height: 1;                 /* avoid extra height from line-height */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Right-side stacked actions (already in a card) */
.newirm-actions-card .actions-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;                     /* vertical spacing between buttons */
}


/* Extra white space between the grid card and the actions card on lg+ */
@media (min-width: 992px) {
  .actions-card-gap { margin-left: 1rem; }
}

/* Larger vertical spacing between buttons on the New Template tab actions card */
.templates-page .actions-stack.actions-stack-lg {
  gap: 1.25rem; /* more than default */
}
/* Allow sticky inside Syncfusion Tab content */
.templates-page .e-tab .e-content,
.templates-page .e-tab .e-content .e-item {
    overflow: visible !important;
}

/* FIX: valid sticky syntax + Safari fallback + higher z-index */
.templates-sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky !important;
    top: 1rem;
    z-index: 1030; /* above grids/headers */
}

/* Keep a visible gap between grid and actions card on wide screens */
@media (min-width: 992px) {
    .actions-card-gap {
        margin-left: 1rem;
    }
}

/* ===== STICKY ACTION CARDS FOR TEMPLATES PAGE ===== */

/* Fix Syncfusion tab content overflow issues */
.templates-page .e-content.e-lib,
.templates-page .e-content .e-item,
body .e-tab .e-content {
  overflow: visible !important;
  position: relative !important;
  contain: none !important;
}

/* Fix the template button cards */
.templates-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 20px !important;
  z-index: 1000 !important;
}

/* Prevent parents from hiding overflow */
.templates-page > div,
.templates-page .template-page,
.templates-page .e-tab,
.templates-page .e-content,
.templates-page .e-item,
.templates-page .row,
.templates-page .col-lg-3 {
  overflow: visible !important;
}

/* Ensure stacking context allows sticky to work */
.templates-page {
  isolation: isolate;
}

/* Add visual feedback when card is sticky */
.templates-sticky:not(.e-control):not(.e-widget):not(.e-template) {
  transition: box-shadow 0.3s, border-color 0.3s;
}

.templates-sticky:not(.e-control):not(.e-widget):not(.e-template):before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 0.3s;
}

/* Style while scrolled (based on position) */
.templates-sticky:not(.e-control):not(.e-widget):not(.e-template):has(~ .col-lg-9 [class*="grid"]:not(:hover)) {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.templates-sticky:not(.e-control):not(.e-widget):not(.e-template):has(~ .col-lg-9 [class*="grid"]:not(:hover)):before {
  border-color: var(--brand-plum) !important;
}


/* Compatibility for legacy layouts or specific cases */
.mch-irm-grid.is-sticky-enabled,
.irm-popup-grid.is-sticky-enabled {
  position: relative;
  z-index: 1020; /* Below the sticky card but above other content */
}

.mch-irm-grid.is-sticky-enabled + .template-card,
.irm-popup-grid.is-sticky-enabled + .template-card {
  margin-top: 1rem; /* Prevent overlap with the sticky card */
}

/* Items/Edit Item tab - consistent badge styling for group headers */
.items-grid .dxbl-grid-group-row > td,
.edit-item-grid .dxbl-grid-group-row > td {
  background: #fbfaf6;
  border: 1px solid var(--brand-line);
  border-left-color: transparent;
  padding: 6px 10px !important;
  border-radius: 6px;
  margin: 4px 0;
}

/* Consistent badge styling across all grids */
.items-grid .group-badge,
.edit-item-grid .group-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 2px 10px;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid var(--brand-line);
  color: var(--brand-plum);
  font-weight: 600;
  font-size: .85rem;
  line-height: 1.2;
  box-shadow: 0 1px 1px rgba(0,0,0,.03);
}

.items-grid .group-badge::before,
.edit-item-grid .group-badge::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-plum);
  box-shadow: 0 0 0 2px #eee6ff inset;
}

/* Remove pagination and show all rows - apply to Items/Edit Item grids */
.items-grid.dxbl-grid,
.edit-item-grid.dxbl-grid {
  --deco-footer-h: .75rem;
}


/* Additional UX enhancements for Items page */
.items-grid .dxbl-grid-data-row:hover,
.edit-item-grid .dxbl-grid-data-row:hover {
  background-color: #f2f1eb;
  cursor: pointer;
}

/* Highlight selected row */
.items-grid .dxbl-grid-data-row.dx-selection,
.edit-item-grid .dxbl-grid-data-row.dx-selection {
  background-color: #e8eef4 !important;
  border-left: 3px solid var(--brand-plum) !important;
}

/* Improve header visual hierarchy */
.items-page-header,
.edit-item-header {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--brand-line);
  padding-bottom: .75rem;
}

/* More breathing room for grid content */
.items-grid,
.edit-item-grid {
  margin: 1rem 0 2rem;
}

/* Add some visual feedback for interactive elements */
.items-grid .interactive-cell:hover,
.edit-item-grid .interactive-cell:hover {
  color: var(--brand-plum);
  text-decoration: underline;
}

/* Styled command buttons for edit/delete actions */
.items-grid .dxbl-grid-command-column .dxbl-btn {
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.2s ease;
  padding: 4px 12px;
  border: 1px solid var(--brand-line);
}

/* Command buttons – variants and utilities */
.items-grid .dxbl-grid-command-column .dxbl-btn-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--brand-line);
  color: var(--brand-plum);
  background: #f8f7f1;
  font-weight: 600;
  transition: all .15s ease-in-out;
}
.items-grid .dxbl-grid-command-column .dxbl-btn-edit.btn-pill { border-radius: 9999px; }
.items-grid .dxbl-grid-command-column .dxbl-btn-edit.is-compact { padding: 4px 10px; line-height: 1; font-size: .9rem; }

/* Brand (solid) */
.items-grid .dxbl-grid-command-column .dxbl-btn-edit.btn-brand {
  background-color: var(--brand-plum);
  border-color: var(--brand-plum);
  color: #fff;
}
.items-grid .dxbl-grid-command-column .dxbl-btn-edit.btn-brand:hover,
.items-grid .dxbl-grid-command-column .dxbl-btn-edit.btn-brand:focus {
  background-color: var(--brand-olive);
  border-color: var(--brand-olive);
}

/* Ghost (outline) variant */
.items-grid .dxbl-grid-command-column .dxbl-btn-edit.btn-ghost {
  background: transparent;
  color: var(--brand-plum);
  border-color: var(--brand-line);
}
.items-grid .dxbl-grid-command-column .dxbl-btn-edit.btn-ghost:hover {
  background: var(--brand-cream);
  border-color: var(--brand-olive);
}

/* Danger variant (use for Delete if you add one) */
.items-grid .dxbl-grid-command-column .dxbl-btn-edit.btn-danger {
  background: #fdecec;
  color: #8b1d2c;
  border-color: #f8c7cd;
}
.items-grid .dxbl-grid-command-column .dxbl-btn-edit.btn-danger:hover {
  background: #f8c7cd;
  border-color: #e29aa5;
}

/* Icon + text layout */
.items-grid .dxbl-grid-command-column .dxbl-btn-edit.with-icon .btn-icon { font-size: .95em; }
.items-grid .dxbl-grid-command-column .dxbl-btn-edit.with-icon .btn-text { white-space: nowrap; }

/* XS screens: show icon-only to save space */
@media (max-width: 576px) {
  .items-grid .dxbl-grid-command-column .dxbl-btn-edit.with-icon .btn-text { display: none; }
}

/* Focus ring and hover lift */
.items-grid .dxbl-grid-command-column .dxbl-btn-edit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(62,56,84,.28);
}
.items-grid .dxbl-grid-command-column .dxbl-btn-edit:hover { transform: translateY(-1px); }



/* DevExpress Grid: enforce brand cream on ALL header pieces (incl. spacers/fixed parts) */
.items-grid.dxbl-grid {
  --dxbl-grid-header-bg: var(--brand-cream, #f5f4ee); /* primary source of truth */
}

/* Header row + every header cell type */
.items-grid .dxbl-grid-header-row,
.items-grid .dxbl-grid-header-row .dxbl-grid-cell,
.items-grid .dxbl-grid-header-row .dxbl-grid-expand-button-cell,
.items-grid .dxbl-grid-header-row .dxbl-grid-command-column .dxbl-grid-cell,
.items-grid .dxbl-grid-header-row .dxbl-grid-spacer,
.items-grid .dxbl-grid-header-row [class*="spacer"],
.items-grid .dxbl-grid-header-row [class*="fixed"],
.items-grid .dxbl-grid-header-row [class*="corner"] {
  background-color: var(--dxbl-grid-header-bg) !important;
}

/* Optional: unify header bottom border to match brand */
.items-grid .dxbl-grid-header-row .dxbl-grid-cell {
  border-bottom-color: var(--brand-line) !important;
}

/* Override DevExpress' fixed table layout that creates a phantom/empty column */
.items-grid.dxbl-grid .dxbl-grid-table,
.items-grid .dxbl-grid-table {
  table-layout: auto !important;
}

.form-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* Make grids feel clickable: show pointer cursor on rows (applies to all grids using .mch-irm-grid) */
.mch-irm-grid .dxbl-grid-data-row,
.mch-irm-grid .dxbl-grid-table > tbody > tr {
    cursor: pointer !important;
}

.mch-irm-grid .dxbl-grid-data-row .dxbl-grid-cell,
.mch-irm-grid .dxbl-grid-table > tbody > tr > td {
    cursor: pointer !important;
}

/* Card style for each input in edit-item-grid */
.edit-item-card {
    background: var(--brand-cream, #f5f4ee);
    border: 1px solid var(--brand-line, #e2dfd6);
    border-radius: .55rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    padding: 1rem 1.25rem;
    margin-bottom: 1.1rem;
}
.edit-item-card:last-child {
    margin-bottom: 0;
}



.edit-item-card .form-control:focus,
.edit-item-card .dxbl-text-edit-input:focus-within,
.edit-item-card .dxbl-memo:focus-within,
.edit-item-card .dxbl-combobox:focus-within,
.edit-item-card .dxbl-selectbox:focus-within,
.edit-item-card textarea:focus,
.edit-item-card input[type="text"]:focus {
    border-color: #cfc8de;
    box-shadow: 0 0 0 2px rgba(62,56,84,.18);
    outline: none;
}

.edit-item-card .form-control::placeholder,
.edit-item-card .dxbl-text-edit-input::placeholder,
.edit-item-card textarea::placeholder,
.edit-item-card input[type="text"]::placeholder {
    color: #b0b0b0;
    opacity: 1;
}
.dxbl-modal {
    --dxbl-popup-max-width: 1000px !important;
}



/* make the form layout control a positioned container so we can absolutely position status icons */
.edititemform .dxbl-fl-ctrl,
.edititemform .dxbl-form-layout .dxbl-fl-ctrl {
  position: relative;
  padding-top: 0.25rem; /* small spacing between label and control */
}

/* render the inner DevExpress validation/status element as an overlay (out of flow) */
.edititemform .dxbl-edit-validation-status {
  position: absolute;
  right: 8px;
  top: 8px;
  pointer-events: none;
  z-index: 2;
  display: inline-flex;
  align-items: center;
}



/* For memo editors: ensure consistent height and remove stray extra element spacing */
.edititemform .dxbl-memo-edit,
.edititemform .dxbl-memo-edit textarea {
  min-height: 78px;
  padding-right: 1rem !important;
}

/* ComboBox: input should not be covered by the dropdown button */
.edititemform .dxbl-combo-box .dxbl-text-edit-input {
  padding-right: 2.5rem !important; /* leave room for the dropdown button */
}

/* Make the card look consistent and prevent internal stacking issues */
.edititemform .edit-item-card {
  background: var(--brand-cream);
  border-radius: .55rem;
  padding: 1rem;
  margin: .5rem .5rem .5rem .5rem;
  position: relative;
}

/* Make sure DevExpress internal wrappers don't create tiny duplicate controls visually */
.edititemform .dxbl-fl-ctrl > * { /* target direct children */
  line-height: 1.3;
}

/* Last resort: hide any tiny empty inputs that may be left in DOM but not used
   (use only if you inspected DevTools and confirmed a truly redundant input exists) */
.edititemform .dxbl-fl-ctrl input.dxbl-text-edit-input[style*="height: 1px"], 
.edititemform .dxbl-fl-ctrl input.dxbl-text-edit-input[aria-hidden="true"] {
  display: none !important;
}




/* Ensure the form layout row stacks vertically inside popup for predictable widths */
.edititemform .dxbl-form-layout .dxbl-row {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}




/* Fix the min-width issue (DevExpress sets min-width:0) – allow natural sizing */
.edititemform .dxbl-fl .dxbl-fl-item > .dxbl-fl-ctrl {
    min-width: auto !important;
}



/* Memo editors: slightly taller */
.edititemform .dxbl-memo-edit,
.edititemform .dxbl-memo-edit textarea {
    min-height: 90px !important;
    padding-right: 1rem !important;
}

/* Position validation/status icon out of normal flow so it won't push an input */
.edititemform .dxbl-edit-validation-status {
    position: absolute !important;
    right: 10px !important;
    top: 10px !important;
    z-index: 3 !important;
    pointer-events: none;
    display: inline-flex !important;
    align-items: center;
}

/* Combo box: ensure dropdown button has room and input doesn't overlap */
.edititemform .dxbl-combo-box .dxbl-text-edit-input {
    padding-right: 3rem !important;
}

/* Make Save/Cancel buttons brand-aligned in the popup footer */
.edititemform .dxbl-grid-edit-form-buttons .dxbl-btn.dxbl-btn-primary {
    background-color: var(--brand-plum) !important;
    border-color: var(--brand-plum) !important;
    color: #fff !important;
    font-weight: 700;
    border-radius: .45rem !important;
    padding: .45rem .9rem !important;
    box-shadow: none !important;
}

    .edititemform .dxbl-grid-edit-form-buttons .dxbl-btn.dxbl-btn-primary:hover {
        background-color: var(--brand-olive) !important;
        border-color: var(--brand-olive) !important;
    }

/* Secondary button: outline on white to match brand */
.edititemform .dxbl-grid-edit-form-buttons .dxbl-btn.dxbl-btn-secondary {
    background: #fff !important;
    border: 1px solid var(--brand-line) !important;
    color: var(--brand-plum) !important;
    border-radius: .45rem !important;
    padding: .4rem .85rem !important;
}

    .edititemform .dxbl-grid-edit-form-buttons .dxbl-btn.dxbl-btn-secondary:hover {
        background: var(--brand-cream) !important;
    }

/* Tidy up any tiny stray inline controls */
.edititemform .dxbl-fl-ctrl > .dxbl-text-edit-input[style*="height: 1px"],
.edititemform .dxbl-fl-ctrl > input[aria-hidden="true"] {
    display: none !important;
}

/* Small responsive tweak: reduce card max-width on small screens */
@media (max-width: 640px) {
    .edititemform .edit-item-card {
        max-width: 100%;
        padding: .75rem;
    }

    
}




/* Ensure captions stay above and are brand styled */
.edititemform .dxbl-fl-cpt {
    display: block !important;
    margin: 0 0 .45rem 0 !important;
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--brand-plum);
    font-size: .95rem;
}

/* Combo box: ensure dropdown button doesn't overlap input */
.edititemform .dxbl-combo-box .dxbl-btn-group,
.edititemform .dxbl-combo-box .dxbl-input-buttons {
    right: 0;
}

.edititemform .dxbl-combo-box .dxbl-text-edit-input {
    padding-right: 3rem !important;
}

/* Keep validation/status icon positioned without affecting flow */
.edititemform .dxbl-edit-validation-status {
    position: absolute !important;
    right: 12px !important;
    top: 10px !important;
    pointer-events: none;
    z-index: 3 !important;
}

/* Consolidated EditItemsforTemplate (popup) overrides
   - Ensures inputs are 75% of the card,
   - Moves captions above controls,
   - Fixes DevExpress min-width:0 issue,
   - Positions validation icon and reserves space for dropdown buttons,
   - Styles Save/Cancel to brand.
   Place this at the end of app.css and remove earlier duplicate popup rules. */

.edititemform .edit-item-form-container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 0.75rem 1rem 1.25rem;
    box-sizing: border-box;
}


/* Ensure layout stacks vertically inside popup */
.edititemform .dxbl-form-layout .dxbl-row {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Captions above inputs, on-brand */
.edititemform .dxbl-fl-cpt {
    display: block !important;
    margin: 0 0 .45rem 0 !important;
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--brand-plum);
    font-size: .95rem;
    letter-spacing: .2px;
}

/* Fix DevExpress min-width:0 issue and make control container predictable */
.edititemform .dxbl-fl .dxbl-fl-item > .dxbl-fl-ctrl {
    min-width: auto !important; /* override dxbl default */
    display: block !important;
    width: 100% !important;
    position: relative;
    box-sizing: border-box;
    padding-top: 0.25rem;
}





/* ComboBox: place dropdown button to the right and keep input pad to avoid overlap */
.edititemform .dxbl-combo-box .dxbl-btn-group,
.edititemform .dxbl-combo-box .dxbl-input-buttons {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
}

.edititemform .dxbl-combo-box .dxbl-text-edit-input {
    padding-right: 3.5rem !important;
}

/* Validation status icon overlay (out of flow) */
.edititemform .dxbl-edit-validation-status {
    position: absolute !important;
    right: 12px !important;
    top: 10px !important;
    z-index: 5 !important;
    pointer-events: none;
    display: inline-flex !important;
    align-items: center;
}

/* Buttons: brand-styled Save / Cancel */
.edititemform .dxbl-grid-edit-form-buttons {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-top: .5rem;
}

    .edititemform .dxbl-grid-edit-form-buttons .dxbl-btn.dxbl-btn-primary {
        background-color: var(--brand-plum) !important;
        border-color: var(--brand-plum) !important;
        color: #fff !important;
        font-weight: 700;
        border-radius: .45rem !important;
        padding: .45rem .9rem !important;
    }

        .edititemform .dxbl-grid-edit-form-buttons .dxbl-btn.dxbl-btn-primary:hover {
            background-color: var(--brand-olive) !important;
            border-color: var(--brand-olive) !important;
        }

    .edititemform .dxbl-grid-edit-form-buttons .dxbl-btn.dxbl-btn-secondary {
        background: #fff !important;
        border: 1px solid var(--brand-line) !important;
        color: var(--brand-plum) !important;
        border-radius: .45rem !important;
        padding: .4rem .85rem !important;
    }

/* Responsive: on small screens editors use full width for readability */
@media (max-width: 640.98px) {
    .edititemform .dxbl-fl-ctrl .dxbl-text-edit-input,
    .edititemform .dxbl-fl-ctrl textarea,
    .edititemform .dxbl-fl-ctrl .dxbl-memo-edit textarea,
    .edititemform .dxbl-combo-box .dxbl-text-edit-input,
    .edititemform .my-memo-style,
    .edititemform .dxbl-memo-edit {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 1rem !important;
    }
}

/* EditItemsforTemplate: row layout for Item Name + Category */
.edititemform .edit-item-row {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin-bottom: .5rem;
}

/* Left = Item Name (wider), Right = Category (narrower) */
.edititemform .edit-item-card--left {
  flex: 0 0 55%;
  max-width: 54%;
}
.edititemform .edit-item-card--right {
  flex: 0 0 45%;
  max-width: 44%;
}

/* Keep responsive: stack on small viewports */
@media (max-width: 640.98px) {
  .edititemform .edit-item-row {
    flex-direction: column;
  }
  .edititemform .edit-item-card--left,
  .edititemform .edit-item-card--right {
    flex-basis: auto;
    max-width: 100%;
  }
}
/* Ensure edit-item cards align with the popup container edges */
.edititemform .edit-item-form-container {
    box-sizing: border-box;
    padding-left: 1rem; /* match card inner spacing */
    padding-right: 1rem;
}

/* Make cards fill the container width and remove competing max-width/margins */
.edititemform .edit-item-card {
    width: 100% !important;
    
    margin: 0 0 1rem; 
    padding: 1rem !important; /* card inner padding */
    box-sizing: border-box !important;
}

/* Remove any extra left/right padding on DevExpress row children so borders line up */
.edititemform .dxbl-form-layout .dxbl-row {
    padding: 0 !important;
    gap: 0.85rem;
}

    .edititemform .dxbl-form-layout .dxbl-row > * {
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }

/* Two-column row (Item Name + Category) — children align to container edges */
.edititemform .edit-item-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}


/* Make editors fill the available card content area (no horizontal overflow) */
.edititemform .dxbl-fl-ctrl .dxbl-text-edit-input,
.edititemform .dxbl-fl-ctrl textarea,
.edititemform .dxbl-memo-edit textarea,
.edititemform .my-memo-style {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Responsive: stack side-by-side fields on small viewports */
@media (max-width: 640.98px) {
    .edititemform .edit-item-row {
        flex-direction: column;
    }

    .edititemform .edit-item-card--left,
    .edititemform .edit-item-card--right {
        flex-basis: auto;
        max-width: 100%;
    }
}
/* Force horizontal form layout items to fill the card width in the edit popup */
.edititemform .dxbl-fl-item-horizontal {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
/* Add vertical space between cards and reduce width for AddNewItem */
.new-item-tab {
    
    margin: 2.5rem auto 0 auto;
    padding: 0 1.2rem 1.5rem 1.2rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(62,56,84,0.07);
}

.form-card-row {
    margin-bottom: 1.5rem;
}

    .form-card-row:last-child {
        margin-bottom: 0;
    }

.field-card {
    width: 100%;
    border-radius: 0.55rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    background: var(--brand-cream, #f5f4ee);
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--brand-line, #e2dfd6);
}

@media (max-width: 540px) {
    .new-item-tab {
        max-width: 100%;
        padding: 0 .5rem 1rem .5rem;
    }

    .field-card {
        padding: .85rem .7rem;
    }
}
/* Make the item description textarea larger */
.item-desc-area {
    min-height: 140px;
    height: 180px;
    resize: vertical;
}

/* Remove card and centering for AddNewItem */
.item-form {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.new-item-tab {
    
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.view-irm-header .view-irm-title .title-text {
    font-family: var(--heading-font);
    font-size: 1.15rem; /* or match your other main titles */
    font-weight: 700;
    color: var(--brand-plum);
    letter-spacing: .2px;
    margin-bottom: 0;
    margin-top: 0;
    line-height: 1.2;
}
/* ManageNavMenu brand styling */
.manage-nav-menu {
    background: var(--brand-cream, #f5f4ee);
    border: 1px solid var(--brand-line, #e2dfd6);
    border-radius: .55rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    padding: 1.1rem 0.5rem;
}

    .manage-nav-menu .nav-link.manage-nav-link {
        font-family: var(--heading-font);
        font-weight: 600;
        color: var(--brand-plum);
        border-radius: .45rem;
        margin-bottom: .15rem;
        transition: background 0.15s, color 0.15s;
        padding: .55rem 1rem;
    }

        .manage-nav-menu .nav-link.manage-nav-link.active,
        .manage-nav-menu .nav-link.manage-nav-link:focus,
        .manage-nav-menu .nav-link.manage-nav-link:hover {
            background: var(--brand-plum);
            color: #fff;
            text-decoration: none;
        }
/* --- Improved DevExpress Blazor tab styling --- */
.dxbl-tabs-item {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .2px;
    border-radius: 1rem 1rem 0 0 !important; /* More pronounced rounding */
    padding: .7rem 1.7rem .65rem 1.7rem;
    margin-right: .5rem;
    background: var(--brand-cream, #f5f4ee);
    color: var(--brand-olive, #4e5438);
    border: 1.5px solid var(--brand-line, #e2dfd6);
    border-bottom: none;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s, border-color 0.18s;
    position: relative;
    z-index: 1;
    cursor: pointer;
    box-shadow: none;
}

    /* NewIRM: Make active tab look like inactive tab on hover, remove hover effect for inactive tabs */
    .dxbl-tabs-item.dxbl-active,
    .dxbl-tabs-item[aria-selected="true"] {
        background: var(--brand-olive, #4e5438) !important;
        color: #fff !important;
        border-color: var(--brand-olive, #4e5438) !important;
        z-index: 2;
        box-shadow: 0 2px 8px rgba(78,84,56,0.10);
        border-bottom: 2.5px solid var(--brand-olive, #4e5438) !important;
    }

        /* Make the active tab underline a solid brand color instead of a gradient */
        .dxbl-tabs-item.dxbl-active::after,
        .dxbl-tabs-item[aria-selected="true"]::after {
            content: "";
            display: block;
            height: 4px;
            background: var(--brand-cream); 
            border-radius: 2px 2px 0 0;
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: -4px;
        }

    /* Remove hover effect for inactive tabs */
    .dxbl-tabs-item:hover:not(.dxbl-active):not([aria-selected="true"]) {
        background: var(--brand-cream, #f5f4ee) !important;
        
    }
    

    .dxbl-tabs-item:disabled,
    .dxbl-tabs-item[aria-disabled="true"] {
        background: #e2dfd6;
        color: #b0b0b0;
        cursor: not-allowed;
        opacity: 0.7;
    }

    /* Remove text ellipsis from tab text */
    .dxbl-tabs-item .dxbl-tabs-text-overflow {
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }
.border-brand-plum {
    border-color: var(--brand-plum) !important;
}

.text-brand-plum {
    color: var(--brand-plum) !important;
}

.border-brand-olive {
    border-color: var(--brand-olive) !important;
}

.text-brand-olive {
    color: var(--brand-olive) !important;
}
.irm-complete-warning-box .dx-message-box {
    background: linear-gradient(90deg, #f7fafc 0%, #e3f0ff 100%);
    border: 2px solid #0072ce;
    border-radius: 12px;
    color: #1a2a3a;
    font-family: 'Segoe UI', 'Arial', sans-serif;
    box-shadow: 0 4px 16px 0 rgba(0, 114, 206, 0.08);
    padding: 1.5rem 2rem;
}

.irm-complete-warning-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.irm-complete-warning-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #0072ce;
}

.irm-complete-warning-desc {
    font-size: 1.05rem;
    color: #1a2a3a;
}

.irm-complete-warning-box .dx-message-box-buttons .dx-button {
    min-width: 120px;
    font-weight: 500;
}

.irm-complete-warning-box .dx-message-box-icon {
    color: #e0a800;
    font-size: 2.2rem;
}
/* Remove ellipsis from DevExpress Blazor grid cells and headers */
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-group-footer-row > td > div[dxbl-grid-summary-item],
.dxbl-grid .dxbl-grid-table > tbody > tr > td,
.dxbl-grid .dxbl-grid-table > tfoot > tr > td,
.dxbl-grid .dxbl-grid-table > tfoot > tr > td > div[dxbl-grid-summary-item],
.dxbl-grid .dxbl-grid-table > thead > tr > th > .dxbl-grid-header-content > span {
    text-overflow: unset !important;
    overflow: visible !important;
    white-space: normal !important;
}
/* Force tab underline/indicator to use brand cream, not blue */
.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl)::after,
.dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl)::after {
    background-color: var(--brand-cream, #f5f4ee) !important;
    background: var(--brand-cream, #f5f4ee) !important;
    /* Remove any gradient or default blue */
    box-shadow: none !important;
}
/* app.css */
.combo-brand {
    background-color: #f8fafc;
    border: 1px solid #bfc9d1;
    border-radius: 6px;
    font-size: 1rem;
    min-height: 40px;
    padding: 0 12px;
    color: #222;
    transition: border-color 0.2s;
}

    .combo-brand:focus-within,
    .combo-brand:focus {
        border-color: #1976d2;
        box-shadow: 0 0 0 2px #e3f2fd;
    }

    .combo-brand .dxbl-list-box-item-selected {
        background-color: #e3f2fd;
        color: #1976d2;
    }

    .combo-brand .dxbl-list-box-item:hover {
        background-color: #f1f8fe;
    }
.irm-desc-cell {
    
    
    word-break: break-word;
    font-family: "Segoe UI", Arial, sans-serif;
}
.attachment-cell {
    word-break: break-all;
    white-space: normal;
    max-width: 180px; /* or your preferred max width */
}
.white-html-editor .dx-htmleditor-content,
.white-html-editor .ql-editor {
    background: #fff !important;
}
.white-html-editor .dxbl-office-ribbon,
.white-html-editor .dxbl-toolbar,
.white-html-editor .dxbl-ribbon-toolbar,
.white-html-editor .dxbl-ribbon-toolbar-internal {
    background: #fff !important;
    background-color: #fff !important;
}
.white-html-editor .dxbl-toolbar,
.white-html-editor .dxbl-office-ribbon,
.white-html-editor .dxbl-ribbon-toolbar,
.white-html-editor .dxbl-ribbon-toolbar-internal {
    min-height: 32px !important; /* reduce height */
    height: 32px !important; /* force smaller toolbar */
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

    .white-html-editor .dxbl-toolbar .dxbl-toolbar-item,
    .white-html-editor .dxbl-office-ribbon .dxbl-toolbar-item,
    .white-html-editor .dxbl-ribbon-toolbar .dxbl-toolbar-item,
    .white-html-editor .dxbl-ribbon-toolbar-internal .dxbl-toolbar-item {
        min-height: 28px !important;
        height: 28px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .white-html-editor .dxbl-toolbar .dxbl-button,
    .white-html-editor .dxbl-office-ribbon .dxbl-button,
    .white-html-editor .dxbl-ribbon-toolbar .dxbl-button,
    .white-html-editor .dxbl-ribbon-toolbar-internal .dxbl-button {
        min-height: 24px !important;
        height: 24px !important;
        padding: 0 6px !important;
        font-size: 0.95rem !important;
    }
/* Make the Item Description HTML editor larger */
.desc-html-editor {
    min-height: 320px !important;
    height: 340px !important;
    width: 95% !important;
    max-width: 950px !important;
    margin-bottom: 1rem;
}

    .desc-html-editor .dx-htmleditor-content,
    .desc-html-editor .ql-editor {
        min-height: 220px !important;
        height: 240px !important;
    }
/* Make the Item Description HTML editor fill the card width in the edit popup */
.edititemform .edit-item-card .desc-html-editor,
.edititemform .edit-item-card .desc-html-editor .dx-htmleditor-content,
.edititemform .edit-item-card .desc-html-editor .ql-editor {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.edititemform .edit-item-card .desc-html-editor {
    min-height: 320px !important;
    height: 340px !important;
    margin-bottom: 1rem;
}

    .edititemform .edit-item-card .desc-html-editor .dx-htmleditor-content,
    .edititemform .edit-item-card .desc-html-editor .ql-editor {
        min-height: 220px !important;
        height: 240px !important;
    }
/* Make IRItems grid text smaller and more compact */
.items-grid .dxbl-grid-header-row .dxbl-grid-cell,
.items-grid .dxbl-grid-data-row .dxbl-grid-cell,
.items-grid .dxbl-grid-group-row > td,
.items-grid .dxbl-grid-footer-row .dxbl-grid-cell {
    font-size: 0.93rem !important;
    line-height: 1.25 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.items-grid .irm-desc-cell {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    padding: 0.4rem 0.7rem !important;
}
/* OVERRIDE: Make HTML editor fill the card in EditItemsforTemplate popup, even if inside .dxbl-col-md-6 */
@media (min-width: 768px) {
    .edititemform .dxbl-col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .edititemform .edit-item-card .desc-html-editor {
        width: 100% !important;
        max-width: 100% !important;
    }
}
.edititemform .desc-html-editor .dxbl-toolbar {
    background: #f5f4ee !important;
    min-height: 28px !important;
}

    .edititemform .desc-html-editor .dxbl-toolbar .dxbl-button {
        font-size: 0.92rem !important;
        border-radius: 6px !important;
    }
/* Hide the DevExpress HTML editor resize frame and handles for all editors */
.dxbl-html-editor .dxbl-widget-container .dx-quill-container .dx-resize-frame,
.dxbl-html-editor .dxbl-widget-container .dx-quill-container .dx-resizable-handle {
    display: none !important;
}
/* Custom, compact, subtle edit button for grid use */
.grid-edit-btn {
    background: transparent !important;
    color: var(--brand-olive) !important;
    border: 1px solid var(--brand-line) !important;
    font-weight: 500 !important;
    font-size: 0.93rem !important;
    padding: 2px 10px !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 28px !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}

    .grid-edit-btn:hover {
        background: var(--brand-cream) !important;
        color: var(--brand-plum) !important;
        border-color: var(--brand-olive) !important;
        text-decoration: underline !important;
        cursor: pointer !important;
    }
/* Reduce height of the Item Description HTML editor in the popup */
.edititemform .edit-item-card .small-desc-editor {
    min-height: 120px !important;
    height: 140px !important;
    max-height: 160px !important;
}

    .edititemform .edit-item-card .small-desc-editor .dx-htmleditor-content,
    .edititemform .edit-item-card .small-desc-editor .ql-editor {
        min-height: 80px !important;
        height: 100px !important;
        max-height: 120px !important;
    }
/* Remove bottom padding for the card containing the Item Description */
.edititemform .edit-item-card.no-bottom-pad {
    padding-bottom: 0 !important;
}
/* Item Description reference styling for Item Details popup */
.item-details-popup .item-desc-reference {
    background: #f9f9fc;
    border-left: 4px solid var(--brand-olive);
    border-radius: 0 8px 8px 0;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.1rem;
    font-size: 1rem;
    color: #2e3a46;
    font-family: "Segoe UI", Arial, sans-serif;
    max-height: 180px;
    overflow: auto;
    box-shadow: 0 1px 2px rgba(62,56,84,0.06);
    outline: none;
}

    .item-details-popup .item-desc-reference:focus {
        box-shadow: 0 0 0 2px var(--brand-olive, #4e5438);
    }
/* Subtle, small link-style button for toggling item description */
.item-details-popup .desc-toggle-link {
    background: none;
    border: none;
    color: var(--brand-olive);
    font-size: 0.93rem;
    font-weight: 500;
    padding: 0 0.25rem;
    margin-left: 0.5rem;
    text-decoration: underline dotted;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    line-height: 1.2;
}

    .item-details-popup .desc-toggle-link:hover,
    .item-details-popup .desc-toggle-link:focus {
        color: var(--brand-plum);
        background: #f5f4ee;
        outline: none;
        text-decoration: underline;
    }
.item-desc-reference-client {
    background: #f9f9fc;
    border-left: 4px solid var(--brand-olive);
    border-radius: 0 8px 8px 0;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.1rem;
    font-size: 1rem;
    color: #2e3a46;
    font-family: "Segoe UI", Arial, sans-serif;
    max-height: 180px;
    overflow: auto;
    box-shadow: 0 1px 2px rgba(62,56,84,0.06);
    outline: none;
}

    .item-desc-reference-client:focus {
        box-shadow: 0 0 0 2px var(--brand-olive, #4e5438);
    }
/* Smaller, pale-plum, less-bold TagBox pill style */
.dxbl-tag-box.dxbl-text-edit > .dxbl-tag {
    background: #f4f2fb !important; /* very pale plum */
    color: #3e3854 !important; /* brand plum text */
    border-radius: 999px !important;
    border: 1.2px solid #b9a7d3 !important; /* soft plum border */
    padding: 2px 10px !important; /* smaller pill */
    margin-right: 0.25em !important;
    font-weight: 500 !important; /* less bold */
    font-size: 0.95em !important; /* slightly smaller text */
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4em !important;
    min-height: 1.7em !important;
}

    /* Make the "x" (remove) button visible and on-brand */
    .dxbl-tag-box.dxbl-text-edit > .dxbl-tag .dxbl-tag-remove-button {
        color: #7c5e99 !important; /* medium plum */
        opacity: 1 !important;
        font-size: 1.1em !important;
        margin-left: 0.35em !important;
        font-weight: 700 !important;
        transition: color 0.15s;
        cursor: pointer;
        background: none !important;
        border: none !important;
    }

        .dxbl-tag-box.dxbl-text-edit > .dxbl-tag .dxbl-tag-remove-button:hover {
            color: #b3002d !important; /* burgundy accent on hover */
            background: none !important;
        }
/* Brand styling for DxLoadingPanel with mchLoading */


    /* Center the indicator and text vertically */
    .mchLoading {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.1rem;
    }

/* Brand the spinner (wait indicator) */
.loadIndicator {
    width: 48px !important;
    height: 48px !important;
    display: inline-block;
}

    .loadIndicator {
        stroke: #7c5e99 !important; /* medium plum */
        stroke-width: 5px !important;
        opacity: 0.85;
    }

    .loadIndicator {
        stroke: #e6e0f4 !important; /* pale plum */
        stroke-width: 5px !important;
        opacity: 0.45;
    }

/* Optional: loading text styling */
.mchLoading {
    color: #3e3854 !important; /* brand plum */
    font-family: var(--heading-font, "Roboto Flex", Arial, sans-serif);
    font-weight: 600;
    font-size: 1.08rem;
    letter-spacing: .2px;
    margin-top: 0.5rem;
}

.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.9rem;
    min-width: 90px;
}
/* Make item details popup cards uniform width and height in a 2-column layout */
.item-details-popup .popup-four-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.5rem; /* row gap, column gap */
}

    .item-details-popup .popup-four-grid > [class^="col-"] {
        grid-column: auto;
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

.item-details-popup .quad-section {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

/* Make single-column rows (col-12) span both columns */
.item-details-popup .popup-four-grid > .col-12 {
    grid-column: 1 / span 2;
}

/* Responsive: stack to 1 column on small screens */
@media (max-width: 900px) {
    .item-details-popup .popup-four-grid {
        grid-template-columns: 1fr;
    }

        .item-details-popup .popup-four-grid > .col-12 {
            grid-column: 1 / span 1;
        }
}
.row.g-3 {
    align-items: stretch;
}
/* Read-only field: subtle, balanced, brand-accented */
.readonly-field {
    background: var(--brand-cream, #f5f4ee);
    color: var(--brand-olive, #4e5438);
    border-left: 4px solid var(--brand-olive, #4e5438);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(78,84,56,0.04); /* olive shadow */
}

/* Input field: clean, with subtle brand focus */
.input-field {
    background: var(--brand-cream);
    border: 1.5px solid var(--brand-line, #e2dfd6);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    color: var(--brand-plum, #3e3854);
    font-size: 1.05rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    

/* Label styling for clarity */
.mch-label {
    font-weight: 600;
    color: var(--brand-plum, #3e3854);
    margin-bottom: 0.25rem;
    display: block;
}
/* Subtle content style for read-only values in IRM popup */
.mch-static-value {
    background: #f9faf9; /* very light, neutral background */
    color: darkslategrey;
    font-size: 0.97rem;
    font-weight: 400;
    border-radius: 5px;
    padding: 0.35rem 0.7rem;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    box-shadow: none;
    display: inline-block;
    min-height: 1.5em;
}
.mch-instruction {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--brand-plum, #3e3854);
    background: #f8f2ff; /* lighter than card backgrounds */
    border-left: 4px solid var(--brand-plum, #a084ca);
    border-radius: 6px;
    padding: 0.75rem 1.25rem;
    font-size: 1.02rem;
    font-weight: 500;
    box-shadow: 0 2px 8px 0 rgba(160,132,202,0.06);
    margin-bottom: 0.5rem;
}

    .mch-upload-divider {
    border-bottom: 1.5px solid var(--brand-olive, #4e5438);
    opacity: 0.18;
    margin: 0.5rem 0 0.5rem 0;
}
.mch-upload-label {
    color: var(--brand-olive, #4e5438);
    font-size: 0.97rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin-bottom: 0.25rem;
    margin-top: 0.25rem;
}