/* --- 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);
}

/* Second line under a page title, naming who the page is for. Olive rather than the
   title's plum and a step down in weight, so it reads as part of the heading without
   competing with it -- the page is still ours, the name on it is theirs. */
.page-subtitle {
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .2px;
  color: var(--brand-olive);
  margin-bottom: 0;
}

/* 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;
}

/* Label lines under the popup title ("Client: …", "IRM #42: …"). Kept below the title's
   .98rem so the hierarchy reads title > labels; the label word carries a modest 600 weight
   in plum against olive values rather than shouting in full bold. */
.view-irm-popup .view-irm-meta .meta-line {
  font-size: .82rem;
  line-height: 1.3;
  color: var(--brand-olive);
  margin-right: .9rem;
  white-space: nowrap;
}

.view-irm-popup .view-irm-meta .meta-line strong {
  font-weight: 600;
  color: var(--brand-plum);
}

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

/* Group panel — the strip above the grid you drag column headers onto. Matches the header
   so the two read as one unit; the dashed edge is what says "drop here" to someone who has
   never used one. The [class*=] fallback is deliberate: it catches the panel whether or not
   DevExpress keeps that exact class name across versions. */
.mch-irm-grid .dxbl-grid-group-panel,
.mch-irm-grid [class*="grid-group-panel"] {
  background: #faf9f4;
  color: var(--brand-olive);
  border: 1px dashed var(--brand-line);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: .9rem;
}

/* 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 */
}

/* 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;
    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 */
}

/* Stretch the Edit Item popup editors to nearly fill their card */
.edititemform .edit-item-card .dxbl-fl-ctrl {
  width: 100%;
}
.edititemform .edit-item-card .dxbl-text-edit,
.edititemform .edit-item-card .dxbl-combo-box,
.edititemform .edit-item-card .dxbl-memo-edit,
.edititemform .edit-item-card .form-select,
.edititemform .edit-item-card .form-control,
.edititemform .edit-item-card .white-html-editor,
.edititemform .edit-item-card .category-field {
  width: 100%;
  max-width: 100%;
}

/* 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 0;            /* full-width cards: no horizontal inset */
  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;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* 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;
}


.desc-html-editor {
    min-height: 160px; /* adjust as needed */
    
    overflow-y: auto; /* enable vertical scrolling */
}

/* Edit Item popup — the rich-text editor's wide toolbar otherwise forces its
   form-layout cell to its intrinsic width (the min-width:auto rule above keeps
   the cell from shrinking), so the editor renders over-wide and visibly shrinks
   as the popup opens. Let just the editor's cell shrink, pin the editor to the
   card from the first paint, and wrap the toolbar so its buttons aren't cut off. */
.edititemform .dxbl-fl .dxbl-fl-item > .dxbl-fl-ctrl:has(.white-html-editor) {
    min-width: 0 !important;
}
.edititemform .edit-item-card .white-html-editor {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Edit Item popup: pin a fixed dialog width so the rich-text editor's container
   doesn't change size after the Quill editor initializes. Without this the popup
   opens near its 1000px max, the editor measures that width, then the layout
   settles narrower and the editor visibly shrinks. (It is not a CSS animation —
   the Fluent theme has no popup open-animation or editor width transition.)
   Adjust the px value to taste. */
.edititemform.dxbl-popup,
.edititemform .dxbl-popup {
    width: 820px !important;
    max-width: 95vw !important;
}

/* Edit Item popup: hold the rich-text editor hidden until it has finished its
   initial render/resize, so the width reflow ("shrink") happens off-screen and
   the editor just fades in at its final size. It stays laid out while hidden
   (opacity, not display), so the fields below it don't jump. The min-height on
   .desc-html-editor reserves the space. Bump the 450ms delay if a shrink is
   still briefly visible on a slower machine. */
.edititemform .white-html-editor {
    animation: dx-htmleditor-reveal 250ms ease 450ms both;
}
@keyframes dx-htmleditor-reveal {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.edititemform .edit-item-card .white-html-editor [class*="toolbar"] {
    
    max-width: 100%;
}

/* 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-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;
    }

    .edititemform .dxbl-grid-edit-form-buttons .dxbl-btn.dxbl-btn-secondary:hover {
        background: var(--brand-cream) !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: block;   /* one card per row: stack Item Name / Category full-width */
  gap: .75rem;
  align-items: flex-start;
  margin-bottom: .5rem;
}

/* The DxFormLayout wraps its content in a flex .dxbl-row, which lays the edit
   cards out side by side. Un-flex only the row that holds the cards (scoped via
   :has so the popup footer and other .dxbl-row stay flex) so each card gets its
   own full-width row. */
.edititemform .dxbl-row:has(.edit-item-card) {
  display: block !important;
}

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

/* 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%;
  }
}

/* ===== DxMenu NavMenu Styling (MUST BE IN GLOBAL CSS) ===== */

/* Override DevExpress menu CSS variables to match brand theme */
.dxbl-menu,
.dxbl-menu.drawer-menu {
    --dxbl-menu-bg: var(--brand-cream, #f5f4ee) !important;
    --dxbl-menu-item-bg: transparent !important;
    --dxbl-menu-item-hover-bg: var(--brand-plum, #3e3854) !important;
    --dxbl-menu-item-hover-color: #fff !important;
    --dxbl-menu-item-pressed-bg: var(--brand-plum, #3e3854) !important;
    --dxbl-menu-item-pressed-color: #fff !important;
    --dxbl-menu-item-selected-bg: rgba(78, 84, 56, 0.15) !important;
    --dxbl-menu-item-selected-color: var(--brand-olive, #4e5438) !important;
    --dxbl-menu-item-focus-bg: var(--brand-plum, #3e3854) !important;
    --dxbl-menu-item-focus-color: #fff !important;
    --dxbl-menu-item-color: var(--brand-olive, #4e5438) !important;
    --dxbl-menu-item-icon-color: var(--brand-olive, #4e5438) !important;
    --dxbl-menu-bottom-left-border-radius: 0;
    --dxbl-menu-bottom-right-border-radius: 0;
    --dxbl-menu-top-left-border-radius: 0;
    --dxbl-menu-top-right-border-radius: 0;
    background-color: var(--brand-cream, #f5f4ee) !important;
    overflow: visible !important;
}

/* Allow popups to escape parent containers */
.dxbl-drawer-body,
.nav-scrollable,
.sidebar,
.drawer-menu.dxbl-menu {
    overflow: visible !important;
}

/* Submenu popup styling and positioning */
.dxbl-popup {
    z-index: 10001 !important;
}

/* Menu item base styling */
.drawer-menu .dxbl-menu-item > .dxbl-btn,
.drawer-menu .dxbl-menu-item > a.dxbl-btn {
    color: var(--brand-olive, #4e5438) !important;
    background-color: transparent !important;
    transition: background-color 140ms ease, color 140ms ease;
}

    /* Hover */
    .drawer-menu .dxbl-menu-item > .dxbl-btn:hover,
    .drawer-menu .dxbl-menu-item > a.dxbl-btn:hover {
        background-color: var(--brand-plum, #3e3854) !important;
        color: #fff !important;
    }

    /* Pressed/Active/Focus */
    .drawer-menu .dxbl-menu-item > .dxbl-btn:active,
    .drawer-menu .dxbl-menu-item > a.dxbl-btn:active,
    .drawer-menu .dxbl-menu-item > .dxbl-btn.dxbl-focused,
    .drawer-menu .dxbl-menu-item > a.dxbl-btn.dxbl-focused,
    .drawer-menu .dxbl-menu-item > .dxbl-btn.dxbl-active,
    .drawer-menu .dxbl-menu-item > a.dxbl-btn.dxbl-active {
        background-color: var(--brand-plum, #3e3854) !important;
        color: #fff !important;
        outline: none !important;
        box-shadow: none !important;
    }

/* Icons and text inherit color */
.drawer-menu .dxbl-menu-item .dxbl-image,
.drawer-menu .dxbl-menu-item .dxbl-menu-item-text,
.drawer-menu .dxbl-menu-item i,
.drawer-menu .dxbl-menu-item .bi {
    color: inherit !important;
}

/* Submenu dropdown popup styling */
.drawer-menu .dxbl-popup,
.dxbl-menu .dxbl-popup {
    background-color: var(--brand-cream, #f5f4ee) !important;
    border: 1px solid var(--brand-line, #e2dfd6) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}

    /* Submenu items */
    .drawer-menu .dxbl-popup .dxbl-menu-item > .dxbl-btn,
    .drawer-menu .dxbl-popup .dxbl-menu-item > a.dxbl-btn {
        color: var(--brand-olive, #4e5438) !important;
        padding: 10px 16px !important;
    }

        .drawer-menu .dxbl-popup .dxbl-menu-item > .dxbl-btn:hover,
        .drawer-menu .dxbl-popup .dxbl-menu-item > a.dxbl-btn:hover,
        .drawer-menu .dxbl-popup .dxbl-menu-item > .dxbl-btn:active,
        .drawer-menu .dxbl-popup .dxbl-menu-item > a.dxbl-btn:active {
            background-color: var(--brand-plum, #3e3854) !important;
            color: #fff !important;
        }

/* Menu item spacing */
.drawer-menu .dxbl-menu-item-list {
    gap: 0.5rem;
}
/* ===== Annual Survey Question Tables ===== */

/* Constrain the Q&A tables to a reasonable max-width */
.as-question-table {
    max-width: 900px;
    table-layout: fixed;
}

    /* Question column takes most of the space, answer column is fixed */
    .as-question-table td:first-child {
        width: auto;
    }

    .as-question-table td:last-child {
        width: 150px;
        min-width: 150px;
    }

    /* For wider answer columns (dropdowns, etc.) */
    .as-question-table td.as-answer-wide {
        width: 200px;
        min-width: 200px;
    }

    /* Highlight the entire row when an input inside is focused */
    .as-question-table tr:focus-within {
        background-color: rgba(62, 56, 84, 0.08) !important; /* plum tint */
        outline: 2px solid rgba(62, 56, 84, 0.25);
        outline-offset: -2px;
        border-radius: 4px;
    }

        /* Add a left accent border on the focused row */
        .as-question-table tr:focus-within td:first-child {
            border-left: 3px solid var(--brand-plum, #3e3854) !important;
            padding-left: calc(0.5rem - 3px); /* adjust padding to account for border */
        }

    /* Smooth transition for the highlight effect */
    .as-question-table tr {
        transition: background-color 0.15s ease, outline 0.15s ease;
    }

    /* Style the question text to be more readable */
    .as-question-table td:first-child {
        padding: 0.6rem 0.75rem;
        line-height: 1.4;
        color: #374151;
    }

    /* Ensure inputs align nicely */
    .as-question-table td:last-child {
        padding: 0.4rem 0.5rem;
        vertical-align: middle;
    }

    /* Optional: Add subtle row hover for better UX */
    .as-question-table tbody tr:hover:not(:focus-within) {
        background-color: rgba(0, 0, 0, 0.02);
    }
    /* ===== Annual Survey Form Enhancements ===== */

    /* Helper text below questions */
    .as-question-table .as-helper-text {
        font-size: 0.8rem;
        color: #6b7280;
        margin-top: 0.25rem;
        font-style: italic;
    }

    /* Validation warning indicator */
    .as-question-table tr.has-warning td:first-child {
        border-left: 3px solid #f59e0b !important;
    }

    .as-question-table tr.has-error td:first-child {
        border-left: 3px solid #ef4444 !important;
    }
/* ===== Annual Survey Floating Action Button ===== */
.as-fab-container {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1040;
}

.as-fab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, var(--brand-plum) 0%, #2f2948 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(62, 56, 84, 0.35), 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

    .as-fab:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(62, 56, 84, 0.45), 0 4px 8px rgba(0, 0, 0, 0.15);
        background: linear-gradient(135deg, #4a4466 0%, var(--brand-plum) 100%);
    }

    .as-fab:active {
        transform: translateY(0);
    }

    .as-fab i {
        font-size: 1.1rem;
    }

.as-fab-label {
    white-space: nowrap;
}

/* Pulse animation when compliance result is available */
.as-fab.has-result {
    animation: fab-pulse 2s ease-in-out infinite;
}

@keyframes fab-pulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(62, 56, 84, 0.35);
    }

    50% {
        box-shadow: 0 4px 20px rgba(62, 56, 84, 0.55), 0 0 0 4px rgba(62, 56, 84, 0.1);
    }
}

/* Collapse to icon-only on small screens */
@media (max-width: 768px) {
    .as-fab {
        padding: 0.85rem;
        border-radius: 50%;
    }

    .as-fab-label {
        display: none;
    }

    .as-fab i {
        font-size: 1.25rem;
    }

    .as-fab-container {
        right: 16px;
        bottom: 16px;
    }
}

/* ===== Annual Survey Section Styling ===== */

/* Section divider between accordion items */
.as-section-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: var(--brand-olive);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .as-section-divider::before,
    .as-section-divider::after {
        content: "";
        flex: 1;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--brand-line), transparent);
    }

    .as-section-divider i {
        color: var(--brand-plum);
    }

/* ===== Annual Survey Accordion - Corrected Selectors ===== */

/* Target the actual DevExpress accordion structure */
.as-accordion.dxbl-accordion,
.as-accordion .dxbl-accordion-container {
    border: 1px solid var(--brand-line);
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Accordion GROUP headers (the actual class DevExpress uses) */
.as-accordion .dxbl-accordion-group-header {
    background: linear-gradient(180deg, #faf9f4 0%, #ffffff 100%) !important;
    border-left: 3px solid var(--brand-plum) !important;
    font-weight: 700;
    color: var(--brand-plum);
    transition: all 0.15s ease;
    padding: 0.5rem 0.75rem;
}

    .as-accordion .dxbl-accordion-group-header:hover {
        background: linear-gradient(180deg, #f5f4ee 0%, #faf9f4 100%) !important;
        border-left-color: var(--brand-olive) !important;
    }

/* Expanded state - target the parent group control with .expanded class */
.as-accordion .dxbl-accordion-group.expanded > .dxbl-accordion-group-header {
    background: var(--brand-cream) !important;
    border-left-width: 4px !important;
}

/* Accordion item text styling */
.as-accordion .dxbl-accordion-item-text {
    color: var(--brand-plum);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Accordion body/content area */
.as-accordion .dxbl-accordion-group-body {
    
    margin-left: 0.5rem;
    background: #fff;
}

/* Expand/collapse button styling */
.as-accordion .dxbl-group-expand-btn {
    color: var(--brand-olive) !important;
}

    .as-accordion .dxbl-group-expand-btn:hover {
        color: var(--brand-plum) !important;
    }

/* Section dividers between accordion items */
.as-accordion .dxbl-accordion-group + .dxbl-accordion-group {
    border-top: 1px solid var(--brand-line);
}

/* Icon color in headers */
.as-accordion .dxbl-accordion-group-header .dxbl-image {
    color: var(--brand-olive);
}

.as-accordion .dxbl-accordion-group.expanded .dxbl-accordion-group-header .dxbl-image {
    color: var(--brand-plum);
}

/* Note/info boxes within sections */
.as-note {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-left: 4px solid #0284c7;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: #0c4a6e;
    font-size: 0.9rem;
}

    .as-note i {
        color: #0284c7;
    }

    /* Warning variant */
    .as-note.as-note-warning {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        border-color: #fcd34d;
        border-left-color: #f59e0b;
        color: #78350f;
    }

        .as-note.as-note-warning i {
            color: #f59e0b;
        }

/* Section completion indicator in header */
.as-section-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

    .as-section-status.complete {
        background: #dcfce7;
        color: #166534;
    }

    .as-section-status.incomplete {
        background: #fef3c7;
        color: #92400e;
    }

/* Quick actions bar (top of form) */
.as-quick-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--brand-cream);
    border: 1px solid var(--brand-line);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

    .as-quick-actions .action-divider {
        width: 1px;
        height: 24px;
        background: var(--brand-line);
    }

/* Progress indicator */
.as-progress-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.as-progress-bar {
    flex: 1;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.as-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-olive), var(--brand-plum));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.as-progress-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand-olive);
    white-space: nowrap;
}
/* Unsaved changes indicator */
.as-unsaved-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 9999px;
    font-size: 0.8rem;
    color: #92400e;
    animation: pulse-subtle 2s ease-in-out infinite;
}

/* ===== Annual Survey Accordion - Container Background Fix ===== */

/* Main accordion container - change from white to cream */
.as-accordion.dxbl-accordion {
    background-color: var(--brand-cream) !important;
}

/* Inner container that holds all accordion items */
.as-accordion .dxbl-accordion-container {
    background-color: var(--brand-cream) !important;
}

.as-accordion .dxbl-accordion-items-container {
    background-color: var(--brand-cream) !important;
}



/* Accordion body background (when expanded) */
.as-accordion .dxbl-accordion-group-body {
    background-color: #fff; /* Keep content area white for readability */
}

/* Optional: Add a subtle top/bottom accent bar */
.as-accordion.dxbl-accordion::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-olive), var(--brand-plum));
    
}

.as-accordion.dxbl-accordion::after {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-plum), var(--brand-olive));
    
}
/* ===== Annual Survey Form Styles ===== */

/* Indicator for fields populated from imported physician data */
.imported-indicator {
    display: inline-block;
    font-size: 0.75rem;
    color: #198754;
    margin-left: 6px;
    vertical-align: middle;
}

    .imported-indicator i {
        color: #198754;
    }

/* N/A button for form fields */
.field-with-na {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .field-with-na .dxbl-masked-input,
    .field-with-na > div:first-child {
        flex: 1;
    }

.na-btn {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    opacity: 0.7;
    border: 1px solid #6c757d;
    background: transparent;
    color: #6c757d;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

    .na-btn:hover {
        opacity: 1;
        background: #6c757d;
        color: white;
    }

    .na-btn.is-na {
        background: #6c757d;
        color: white;
        opacity: 1;
    }

/* Prevent horizontal scrolling in masked input fields */
.as-question-table .dxbl-masked-input,
.as-question-table .dxbl-text-edit {
    overflow: hidden;
}

    .as-question-table .dxbl-masked-input input,
    .as-question-table .dxbl-text-edit input {
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Style for N/A fields */
.na-field input {
    text-align: center;
    font-style: italic;
    color: #6c757d;
}

/* Ensure answer column has proper width */
.as-question-table td:last-child {
    width: 180px;
    min-width: 180px;
    max-width: 200px;
}
/* ===== DxDateEdit - Fixed Width & Hide Week Numbers ===== */

/* Fixed width for date edit inputs */
.date-edit-fixed,
.dxbl-date-edit.date-edit-fixed {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
}

/* ===== Hide week numbers on ALL DxDateEdit calendar dropdowns globally ===== */
.dxbl-calendar-week-number,
.dxbl-calendar-days-of-week th:first-child,
.dxbl-calendar-days-of-week td:first-child {
    display: none !important;
}


/* ===== Fix DxDateEdit Button - Remove flex causing white space ===== */

/* Remove display:flex from .dxbl-text-edit inside date edit to eliminate white space */
.dxbl-date-edit .dxbl-text-edit {
    display: inline !important;
}

/* Reset the horizontal padding variable 
.dxbl-btn-group-vertical > .dxbl-btn-split > .dxbl-btn:where(:not(.dxbl-btn-standalone)),
.dxbl-btn-group-vertical > .dxbl-btn:where(:not(.dxbl-btn-standalone)),
.dxbl-btn-group > .dxbl-btn-split > .dxbl-btn:where(:not(.dxbl-btn-standalone)),
.dxbl-btn-group > .dxbl-btn:where(:not(.dxbl-btn-standalone)) {
    --dxbl-btn-padding-x-m: 0 !important;
}*/

/* Scoped width for DevExpress DxDateEdit instances that use CssClass="dateinput" */
.dateinput,
.dateinput .dxbl-date-edit,
.dateinput .dxbl-text-edit,
.dateinput .dxbl-text-edit-input {
    box-sizing: border-box;
    max-width: 360px !important; /* change to desired width */
    width: 100% !important; /* keep input filling the scoped container */
}

    /* Ensure the datepicker button stays aligned and not impacted by global button padding rules */
    .dateinput .dxbl-btn,
    .dateinput .dxbl-btn-group,
    .dateinput .dxbl-btn-split {
        --dxbl-btn-padding-x-m: initial !important;
    }

/* Scoped responsive layout for the key date fields (applies only to the card with class "date-fields") */
.newirm-card.date-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* four inline fields on wide screens */
    gap: 1rem;
    align-items: start;
}

    /* The markup uses .row > .col-12.col-md-6 — let the .row be ignored and let the columns become grid items */
    .newirm-card.date-fields > .row {
        display: contents; /* allows columns to participate directly in the outer grid */
    }

    /* Make sure the bootstrap column elements behave inside the grid */
    .newirm-card.date-fields .col-12.col-md-6 {
        min-width: 0; /* prevents overflow inside grid cells */
    }

/* Small screens: stack into a single column */
@media (max-width: 767.98px) {
    .newirm-card.date-fields {
        grid-template-columns: 1fr;
    }

        /* restore normal row behaviour for stacked layout to preserve spacing */
        .newirm-card.date-fields > .row {
            display: block;
        }
}
/* Replace the previous nowrap/ellipsis behaviour with wrapping + bottom-aligned inputs.
   This keeps labels readable (no "...") and still aligns the DxDateEdit controls along the bottom. */

.newirm-card.date-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* four inline fields on wide screens */
    gap: 1rem;
    align-items: stretch; /* ensure each grid cell matches the tallest cell so bottoms line up */
}

    /* Keep using the existing markup (.row > .col-*) but let the column elements participate as grid items */
    .newirm-card.date-fields > .row {
        display: contents;
    }

    /* Make the bootstrap column a vertical flex container so inputs can be pushed to the bottom */
    .newirm-card.date-fields .col-12.col-md-6 {
        min-width: 0; /* prevents overflow inside grid cells */
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* pushes the input controls to the bottom so they align across cells */
        gap: .5rem;
        min-height: 0; /* avoid flex overflow issues inside grid */
    }

    /* Allow labels to wrap (no truncation) and keep a compact gap */
    .newirm-card.date-fields h6 {
        margin: 0 0 .25rem;
        white-space: normal !important; /* allow multi-line labels */
        overflow: visible !important;
        text-overflow: clip !important;
    }

/* Small screens: stack into a single column (preserve previous responsive behaviour) */
@media (max-width: 767.98px) {
    .newirm-card.date-fields {
        grid-template-columns: 1fr;
    }

        .newirm-card.date-fields > .row {
            display: block;
        }

        /* On small screens let the column flow normally rather than bottom-aligning */
        .newirm-card.date-fields .col-12.col-md-6 {
            justify-content: flex-start;
        }
}

/* Pick-only combo boxes (e.g. the Section dropdowns in the IRM item grid).
   DevExpress renders a real <input>, so even with AllowUserInput="false" the
   browser shows a text caret and an I-beam pointer, which made the editor look
   like a text field. Hide the caret and use the pointer cursor so it reads as a
   dropdown. */
.combo-pick-only {
    caret-color: transparent;
    cursor: pointer;
    user-select: none;
}

/* CON form read-only shell ------------------------------------------------
   The CON forms wrap their body in <fieldset disabled> when staff open a
   client's submission, so every control inside is disabled at once. Strip the
   fieldset's own chrome so wrapping changes nothing about the layout;
   min-width:0 is required or a fieldset refuses to shrink inside flex/grid. */
.con-readonly-shell {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
/* Secure File Share -------------------------------------------------------
   The client upload page was raw Bootstrap -- grey buttons, default card
   chrome -- which made the one page most clients ever see the one page that
   does not look like ours. These rules borrow .login-card's vocabulary rather
   than inventing a second one: brand-line borders, the same plum focus ring,
   plum buttons going olive on hover. Everything is scoped to .file-share so a
   page-specific look cannot leak into the rest of the app. */
.file-share .card {
    background: #fff;
    border: 1px solid var(--brand-line);
    border-radius: .6rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.file-share .card-body { padding: 1.25rem; }

/* Section headings inside the card, in the nav's olive: they are signposts
   through the form, a step quieter than the plum page title above them. */
.file-share .mch-label {
    color: var(--brand-olive);
    letter-spacing: .2px;
}

.file-share hr {
    border-top: 1px solid var(--brand-line);
    opacity: 1;
}

.file-share .form-control {
    border-color: var(--brand-line);
    border-radius: .5rem;
}

.file-share .form-control:focus {
    border-color: #cfc8de;
    box-shadow: 0 0 0 .15rem rgba(62,56,84,.18);
}

.file-share .btn-primary {
    background-color: var(--brand-plum);
    border-color: var(--brand-plum);
    font-weight: 600;
}

.file-share .btn-primary:hover,
.file-share .btn-primary:focus {
    background-color: var(--brand-olive);
    border-color: var(--brand-olive);
}

/* The off state of "Choose files". Bootstrap's grey outline reads as broken;
   brand-line and olive read as not yet -- present, part of the page, waiting. */
.file-share .btn-outline-secondary.disabled {
    border-color: var(--brand-line);
    color: var(--brand-olive);
    background: var(--brand-cream);
    opacity: 1;
}

/* Progress bar in the brand rather than Bootstrap blue. */
.file-share .progress { background: var(--brand-cream); }
.file-share .progress-bar { background-color: var(--brand-plum); }

/* What they sent in this visit: a cream-backed list so it reads as a receipt
   sitting on the page rather than another card competing with the form. */
.file-share .list-group-item {
    background: var(--brand-cream);
    border-color: var(--brand-line);
    padding-left: .75rem;
    padding-right: .75rem;
}

.file-share .list-group-item:first-child { border-top-left-radius: .5rem; border-top-right-radius: .5rem; }
.file-share .list-group-item:last-child { border-bottom-left-radius: .5rem; border-bottom-right-radius: .5rem; }

/* Informational alerts only. The warning and danger alerts keep Bootstrap's
   semantic colours -- an upload that failed should not be quietly on-brand. */
.file-share .alert-info {
    background: var(--brand-cream);
    border-color: var(--brand-line);
    color: var(--brand-olive);
}

/* The staged file basket -------------------------------------------------
   A table, not cards: the job it does is scanning one column of names to find
   the file that should not be there. Header in the same cream and olive as the
   grids on the staff side, so both halves of the feature read as one product. */
.file-share .file-basket {
    border: 1px solid var(--brand-line);
    border-radius: .5rem;
    overflow: hidden;
    margin-bottom: 0;
}

.file-share .file-basket thead th {
    background: var(--brand-cream);
    color: var(--brand-olive);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .2px;
    border-bottom: 1px solid var(--brand-line);
    padding: 8px 10px;
}

.file-share .file-basket tbody td {
    border-top: 1px solid var(--brand-line);
    padding: 8px 10px;
    vertical-align: middle;
}

.file-share .file-basket tbody tr:first-child td { border-top: 0; }

/* The name is the identifying column, so it gets the weight -- and a hard
   ceiling with an ellipsis, because one long export name should not push the
   description box off the card. The full name is in the cell's title. */
.file-share .basket-name {
    font-weight: 600;
    color: var(--brand-plum);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-share .basket-size {
    width: 84px;
    white-space: nowrap;
}

.file-share .basket-remove {
    width: 44px;
    text-align: right;
}

/* Quiet until you go near it. Removing is easy to do by accident on a list you
   are reading, so it does not advertise itself the way a primary action would. */
.file-share .basket-x {
    color: #9b9a92;
    padding: .1rem .35rem;
    line-height: 1;
    text-decoration: none;
}

.file-share .basket-x:hover,
.file-share .basket-x:focus-visible {
    color: #a3352d;
    background: #faeceb;
    border-radius: .25rem;
}

.file-share .file-basket .form-control-sm {
    border-color: var(--brand-line);
    border-radius: .375rem;
    font-size: .875rem;
}

.file-share .file-basket .form-control-sm:focus {
    border-color: #cfc8de;
    box-shadow: 0 0 0 .15rem rgba(62,56,84,.18);
}

/* Required marker, matching the red asterisk the support widget already uses
   for the same job. */
.mch-req {
    color: #d92d20;
    font-weight: 700;
}

/* A description that has not been filled in yet. Amber rather than red: the row
   is incomplete, not invalid, and the person has not done anything wrong -- red
   is kept for the failure alert, where something genuinely went wrong. The state
   clears on the first keystroke because the field binds on input, so the grid
   empties of amber as it is filled in. */
.file-share .file-basket .form-control-sm.needs-value {
    border-color: #d9b168;
    background: #fdf9f1;
}

.file-share .file-basket .form-control-sm.needs-value:focus {
    border-color: #c8922e;
    box-shadow: 0 0 0 .15rem rgba(200,146,46,.22);
}

/* DxButton ships its own primary blue and its rules are specific enough to beat
   a plain class selector, which is why Submit was still rendering blue on a page
   with no blue in it. !important against DevExpress is the same lever already
   used for grid row selection a few hundred lines above. The selector list
   covers the class landing on the button itself or on a wrapper, since which one
   it is depends on the DevExpress version. */
.file-share .basket-send,
.file-share .basket-send.dxbl-btn,
.file-share .basket-send.dxbl-btn-primary,
.file-share .basket-send .dxbl-btn,
.file-share .basket-send .dxbl-btn-primary {
    background-color: var(--brand-plum) !important;
    border-color: var(--brand-plum) !important;
    color: #fff !important;
    font-weight: 600;
}

.file-share .basket-send:hover,
.file-share .basket-send:focus,
.file-share .basket-send.dxbl-btn:hover,
.file-share .basket-send.dxbl-btn-primary:hover,
.file-share .basket-send .dxbl-btn:hover,
.file-share .basket-send .dxbl-btn-primary:hover {
    background-color: var(--brand-olive) !important;
    border-color: var(--brand-olive) !important;
    color: #fff !important;
}

@media (max-width: 575.98px) {
    .file-share .basket-name { max-width: 130px; }
    .file-share .basket-size { display: none; }
    .file-share .file-basket thead th.basket-size { display: none; }
}

/* Upload receipt popup ---------------------------------------------------
   A receipt: what happened, how many, the reference, where the confirmation
   went. DxPopup renders outside the page container, so this is scoped to the
   popup's own CssClass rather than .file-share. */
.upload-receipt .receipt-body { padding: .25rem .5rem .5rem; }

.upload-receipt .receipt-status {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--brand-line);
}

.upload-receipt .receipt-icon {
    font-size: 1.6rem;
    line-height: 1;
    color: #2f7d4f;
}

.upload-receipt .receipt-title {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--brand-plum);
    letter-spacing: .2px;
}

.upload-receipt .receipt-sub {
    color: #5f5e5a;
    font-size: .9rem;
}

.upload-receipt .receipt-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1.25rem;
    row-gap: .4rem;
    margin: .9rem 0;
    font-size: .9rem;
}

.upload-receipt .receipt-details dt {
    color: var(--brand-olive);
    font-weight: 600;
}

.upload-receipt .receipt-details dd {
    margin: 0;
    color: #2c2c2a;
    overflow-wrap: anywhere;
}

.upload-receipt .receipt-note {
    color: #5f5e5a;
    font-size: .85rem;
    margin: 0;
}

/* Signing out after a submission ----------------------------------------
   A rule and a centred button, no panel: the card above is the content, and
   wrapping the closing action in a second card of its own made it compete with
   that rather than follow it. Prominence here comes from being centred, alone
   and below a divider -- not from size. It stays deliberately smaller than
   Submit, which is the button that matters while there is still work to do. */
.file-share .signout-block {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--brand-line);
    text-align: center;
}

.file-share .signout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: 180px;
    padding: .45rem 1.75rem;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .2px;
    background-color: var(--brand-olive);
    border: 1px solid var(--brand-olive);
    color: #fff;
    border-radius: .5rem;
}

.file-share .signout-btn i {
    font-size: 1rem;
    line-height: 1;
}

.file-share .signout-btn:hover,
.file-share .signout-btn:focus-visible {
    background-color: var(--brand-plum);
    border-color: var(--brand-plum);
    color: #fff;
}

.file-share .signout-btn:focus-visible {
    box-shadow: 0 0 0 .15rem rgba(62,56,84,.25);
    outline: none;
}

.file-share .signout-note {
    margin-top: .65rem;
    font-size: .85rem;
    color: #7a7a72;
}