/* ---------- alert block: in-page status/notification message ---------- */
/* Standard variant stacks a title over the body; compact variant (a single
   paragraph with a bold lead-in) suits inline use, e.g. next to a form
   field. Each intent modifier sets the two custom properties the block
   reads for its accent colour and icon, rather than repeating a colour
   pair per rule. role is left to markup: role="alert" for danger (assertive,
   demands immediate attention), role="status" for the other three (polite). */
.nswtf-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--nswtf-spacing-sm);
  padding: var(--nswtf-spacing-md) var(--nswtf-spacing-lg);
  border-left: 4px solid var(--nswtf-alert-colour);
  border-radius: var(--nswtf-radius-sm);
  background-color: var(--nswtf-alert-bg);
}

.nswtf-alert__icon {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--nswtf-alert-colour);
  background-image: var(--nswtf-alert-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

.nswtf-alert__title {
  margin: 0 0 var(--nswtf-spacing-3xs);
  font-weight: var(--nswtf-font-weight-semibold);
  color: var(--nswtf-color-sys-text);
}

.nswtf-alert__body {
  margin: 0;
  color: var(--nswtf-color-sys-text);
  font-size: var(--nswtf-font-size-base);
  line-height: var(--nswtf-line-height-body);
}

.nswtf-alert--compact {
  align-items: center;
  padding: var(--nswtf-spacing-sm) var(--nswtf-spacing-md);
}

.nswtf-alert--compact .nswtf-alert__title {
  margin: 0;
}

.nswtf-alert--info {
  --nswtf-alert-colour: var(--nswtf-color-intent-info);
  --nswtf-alert-bg: var(--nswtf-color-intent-info-bg);
  --nswtf-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='11' x2='12' y2='17'/%3E%3Ccircle cx='12' cy='7' r='0.75' fill='white'/%3E%3C/svg%3E");
}

.nswtf-alert--success {
  --nswtf-alert-colour: var(--nswtf-color-intent-success);
  --nswtf-alert-bg: var(--nswtf-color-intent-success-bg);
  --nswtf-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5,13 10,18 19,7'/%3E%3C/svg%3E");
}

.nswtf-alert--warning {
  --nswtf-alert-colour: var(--nswtf-color-intent-warning);
  --nswtf-alert-bg: var(--nswtf-color-intent-warning-bg);
  --nswtf-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='7' x2='12' y2='13'/%3E%3Ccircle cx='12' cy='17' r='0.75' fill='white'/%3E%3C/svg%3E");
}

.nswtf-alert--danger {
  --nswtf-alert-colour: var(--nswtf-color-intent-danger);
  --nswtf-alert-bg: var(--nswtf-color-intent-danger-bg);
  --nswtf-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='7' y1='7' x2='17' y2='17'/%3E%3Cline x1='17' y1='7' x2='7' y2='17'/%3E%3C/svg%3E");
}

/* ---------- card block: shared shell for every stacked section ---------- */
.nswtf-card {
  background: var(--nswtf-color-sys-surface-raised);
  border: 1px solid var(--nswtf-color-sys-divider);
  border-radius: var(--nswtf-radius-md);
  box-shadow: var(--nswtf-elevation-sm);
  padding: var(--nswtf-spacing-lg);
}

.nswtf-card>h2 {
  margin: 0 0 var(--nswtf-spacing-sm);
}

/* card--text: the only modifier styled here. Tables, buttons, and
everything else in the page just take browser/base defaults. */
.nswtf-card--text p {
  font-family: var(--nswtf-font-family-body);
  font-size: var(--nswtf-font-size-base);
  line-height: var(--nswtf-line-height-body);
  max-width: 68ch;
  margin: 0 0 var(--nswtf-spacing-sm);
}

.nswtf-card--text p:last-child {
  margin-bottom: 0;
}

.nswtf-card--text strong {
  font-weight: var(--nswtf-font-weight-semibold);
}

@media (max-width: 768px) {
  .nswtf-card {
    padding: var(--nswtf-spacing-md);
  }
}

/* ---------- payment summary: dense GDS-style summary list ---------- */
/* Scoped to the Payment Summary content item (ciMembershipDetails) rather
   than .PanelField globally, since other panels rely on the framework's
   default wide row layout. */
#ste_container_ciMembershipDetails .PanelField {
  padding-top: var(--nswtf-spacing-sm);
  padding-bottom: var(--nswtf-spacing-sm);
  border-bottom: 1px solid var(--nswtf-color-sys-divider);
}

#ste_container_ciMembershipDetails .PanelField:last-child {
  border-bottom: none;
}

/* The label sits in an unclassed wrapper div (display:inline, sized by
   shrink-to-fit); percentage widths on the .Label span inside it can't
   resolve against that. Size the wrapper divs directly instead. */
#ste_container_ciMembershipDetails .PanelField>div:first-child {
  flex: 0 0 40%;
  max-width: 40%;
}

#ste_container_ciMembershipDetails .Label {
  float: none !important;
  width: auto !important;
  display: block;
  font-weight: var(--nswtf-font-weight-semibold);
}

#ste_container_ciMembershipDetails .PanelFieldValue {
  flex: 1 1 auto;
  width: auto;
}

/* ---------- IQA data grids: scroll within their own box, not the page ---------- */
/* [data-gridid] is the div iMIS wraps around every RadGrid results table.
   iMIS itself sets an inline overflow style there, and a page script flips
   it to "inherit" whenever the grid is short enough that overflow:auto
   would clip its Export dropdown. When that happens the grid loses its own
   scrollbox and a wide table spills into the page instead of scrolling.
   Pin the axes independently so it always scrolls horizontally without
   ever clipping the dropdown vertically. */
[data-gridid] {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

.RadGrid .rgMasterTable {
  min-width: 100%;
}

.RadGrid .rgHeader,
.RadGrid .rgRow td,
.RadGrid .rgAltRow td {
  white-space: nowrap;
}

/* Selected/active grid rows: the MetroTouch skin (99-GreatBarrierReef_Responsive.css)
   hardcodes #0d0d0d for these. Clicking a row (not just checking a
   checkbox) marks it selected, which read as a real UI state change with
   no purpose in these read-only lister grids, so make it a no-op instead
   of a tint. */
.RadGrid.RadGrid_MetroTouch .rgMasterTable .rgSelectedCell,
.RadGrid.RadGrid_MetroTouch .rgSelectedRow,
.RadGrid.RadGrid_MetroTouch td.rgEditRow .rgSelectedRow,
.RadGrid.RadGrid_MetroTouch .rgSelectedRow td.rgSorted {
  background-color: transparent;
  border-color: var(--nswtf-color-sys-border);
}

.RadGrid.RadGrid_MetroTouch .rgMasterTable .rgSelectedCell a,
.RadGrid.RadGrid_MetroTouch .rgSelectedRow a,
.RadGrid.RadGrid_MetroTouch td.rgEditRow .rgSelectedRow a,
.RadGrid.RadGrid_MetroTouch .rgSelectedRow td.rgSorted a {
  color: var(--nswtf-color-action-link) !important;
}

.RadGrid.RadGrid_MetroTouch .rgActiveRow td,
.RadGrid.RadGrid_MetroTouch .rgActiveRow td.rgSorted,
.RadGrid.RadGrid_MetroTouch .rgSelectedRow td,
.RadGrid.RadGrid_MetroTouch .rgSelectedRow td.rgSorted {
  border-color: var(--nswtf-color-sys-border);
  color: var(--nswtf-color-sys-text);
}

/* ---------- page wrapper: stop the sticky-footer table forcing page width ---------- */
/* .wrapper (99-GreatBarrierReef_Responsive.css) uses display:table for a
   sticky footer. A table box sizes to its content's minimum width rather
   than obeying width:100%, so any unshrinkable descendant anywhere on the
   page (long nowrap text, a wide grid, ...) forces the whole page wider
   than the viewport, which body's overflow-x:hidden then silently clips
   instead of showing a scrollbar. flex gives the same full-height,
   pinned-footer layout without sizing to content. */
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.footer {
  display: block;
  height: auto;
  margin-top: auto;
}

/* #hd collapses to 0 height as a flex item (it was previously an anonymous
   table-cell under .wrapper's old display:table, which sized it
   differently). Give it the height already set aside for it. */
#hd {
  flex: none;
  min-height: var(--header-height);
}