/* ============================================================================
   FORTIS  ·  PRODUCT READOUTS
   ----------------------------------------------------------------------------
   Every product screenshot on this site is real HTML and CSS. There is no PNG
   of the interface anywhere in the build. That is deliberate:

     - it stays crisp at any DPI and in print;
     - it is text, so it is searchable, translatable and read by a screen reader;
     - the sample data is authored, not captured, so no customer record, test
       reference or broken calculation can leak onto a public page;
     - and there is no asset to re-cut every time the product moves.

   FIDELITY. These readouts reproduce the real interface of frontend-payroll
   (umbrella, :8092), frontend-agency (:8093) and frontend-msp (:8095) - the
   same chrome, the same components, the same column headings, the same status
   vocabulary. The tokens below are copied from frontend-agency/web-ui/css/ui.css
   so the readouts carry the product's own palette rather than the marketing
   site's sand and orange. A reader who books a demo should recognise what they
   were shown.

   COLOUR CARRIES MEANING. The agency dashboard's `--acd-*` set is semantic and
   runs through every surface: GREEN is the PAYE and NIC liability owed to HMRC,
   TEAL is what the agency was invoiced, ORANGE is the allocation released to
   the umbrella. Badges, figures, charts, stat-card accents and action buttons
   all take their colour from which of the three they concern, so a reader can
   follow one amount across the split without reading a label. Do not recolour
   any of them independently.

   ONLY WHAT EXISTS. No readout on this site depicts a screen, panel, column or
   control that is not in one of those three applications today. When the
   product gains a screen, a readout can be added; not before.

   SCALE. Every internal dimension is in em, and .fx-app sets the one font-size
   they all resolve against. Changing that single value rescales a whole panel
   into whatever column it has to sit in.

   ALL FIGURES ARE ILLUSTRATIVE. Worker names, umbrella names, PAYE references,
   amounts and dates are authored sample data describing the shape of the
   interface. They are not a customer's records and not a claim about volumes
   processed.
   ========================================================================== */


/* ==========================================================================
   1  CHASSIS AND TOKENS
   Tokens mirror :root in frontend-agency/web-ui/css/ui.css.
   ========================================================================== */

.fx-app
{
	--compli-primary: #275D8A;
	--compli-primary-dark: #1e4a6d;
	--compli-success: #28a745;
	--compli-info: #17a2b8;
	--compli-warning: #ffc107;
	--compli-danger: #dc3545;
	--compli-secondary: #6c757d;
	--compli-light: #f8f9fa;
	--compli-text: #212529;
	--compli-text-muted: #6c757d;
	--compli-border: #d1d5db;
	--compli-rule: #e9ecef;

	/* The agency dashboard's semantic palette. Colour carries meaning here and
	   is consistent across every surface: green is the PAYE/NIC liability owed
	   to HMRC, teal is what the agency was invoiced, orange is the allocation
	   released to the umbrella. Copied from the `--acd-*` block in
	   frontend-agency/web-ui/css/ui.css. */
	--acd-hmrc: #1a7a4a;
	--acd-hmrc-soft: #e3f3ea;
	--acd-hmrc-dark: #15613b;
	--acd-invoice: #17a2b8;
	--acd-invoice-soft: #e3f5f8;
	--acd-invoice-dark: #128596;
	--acd-umbrella: #e2622c;
	--acd-umbrella-soft: #fdece3;
	--acd-umbrella-dark: #c04f1f;
	--acd-blue: #2f6296;
	--acd-blue-soft: #e5edf6;
	--acd-amber: #d9a326;
	--acd-amber-soft: #fbf2dc;
	--acd-red: #c0392b;
	--acd-red-soft: #fbe6e3;

	font-size: 15px;
	font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
	line-height: 1.5;
	color: var(--compli-text);
	background: var(--compli-light);
	border: 1px solid #cfd6de;
	border-radius: 0.65rem;
	overflow: hidden;
	box-shadow: 0 1.5rem 3rem -1.5rem rgba(61, 54, 45, 0.28);
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.fx-app *
{
	box-sizing: border-box;
}

.fx-app--sm { font-size: 12.5px; }
.fx-app--lg { font-size: 16px; }

/* A readout is a figure. It carries no caption: the copy it sits beside says
   what it is. */
.fx-figure
{
	margin: 0;
}

.fx-figure figcaption,
.fx-caption
{
	margin-top: 0.85rem;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 0.7rem;
	line-height: 1.55;
	letter-spacing: 0.02em;
	color: #6b6154;
	text-transform: none;
}

.fx-caption strong
{
	font-weight: 500;
	color: #3d362d;
}


/* Page-level slot for a readout. Full measure, not the prose measure - these
   are a reproduction of a wide desktop application and cutting them to 48rem
   would make their tables unreadable. */
.stage-shot
{
	max-width: 100%;
	margin-top: 2rem;
}

.stage .stage-shot
{
	margin-top: 1.75rem;
}


/* ==========================================================================
   1b  THE PRESENTATION FRAME
   Only on readouts that open a section. A header band carrying the Fortis
   lock-up, a title and a subtitle; the panel in a recessed well; and a
   three-up takeaway row beneath it. Proportions follow the 1200-unit grid the
   earlier framed assets were drawn on - band 108u, logo 207u, cards 157u -
   expressed here in rem so the frame keeps its own scale whatever font-size
   the panel inside it is running at.
   ========================================================================== */

.fx-frame
{
	--fx-frame-pad: 1.75rem;
	padding: var(--fx-frame-pad);
	border-radius: 1.25rem;
	background: #f4f4f2;
	border: 1px solid #e6e2da;
}

.fx-frame__band
{
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1rem 1.5rem;
	margin-bottom: var(--fx-frame-pad);
	border-radius: 0.875rem;
	background: #e3ecf4;
	border: 1px solid #d5e1ec;
}

.fx-frame__logo
{
	flex: none;
	display: block;
	width: 126px;
	height: 36px;
}

.fx-frame__titles
{
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
	flex: 1;
}

.fx-frame__title
{
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #1f2933;
}

.fx-frame__sub
{
	font-size: 0.9375rem;
	line-height: 1.4;
	color: #55606b;
}

/* The verified pill. NOTE FOR PUBLICATION: this is a brand assertion, not a
   certification the site can currently evidence. The copy deck's claim-control
   list (p31) covers exactly this kind of mark. Keep or drop it as a claims
   decision - it is deliberately the only element of the frame that is not
   derived from the product or the dataset. */
.fx-frame__pill
{
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	height: 2.75rem;
	padding: 0 1.25rem;
	border-radius: 10rem;
	background: #14342a;
	color: #ffffff;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	white-space: nowrap;
}

.fx-frame__pill i
{
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 50%;
	background: #17b26a;
}

/* The panel sits on the frame's field rather than in a box of its own: the
   readout already carries its own border and shadow. */
.fx-frame__well > .fx-app
{
	width: 100%;
}

/* Inside a frame the band already carries the lock-up, so the panel's own top
   bar would put the same logo on screen twice. The framed assets this design
   follows all crop to the page surface for the same reason. Unframed readouts
   keep their top bar - it is how they read as the application. */
.fx-frame .fx-topbar
{
	display: none;
}

.fx-frame .fx-page
{
	padding-top: 1.2em;
}

.fx-frame__stats
{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: var(--fx-frame-pad);
}

.fx-fstat
{
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.125rem;
	padding: 1.375rem 1.5rem 1.375rem 2rem;
	background: #ffffff;
	border: 1px solid #eceae5;
	border-radius: 0.875rem;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.fx-fstat::before
{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 8px;
	background: var(--fx-accent);
}

.fx-fstat--blue   { --fx-accent: #1f4e79; --fx-accent-soft: #e5edf6; }
.fx-fstat--green  { --fx-accent: #1a7a4a; --fx-accent-soft: #e3f3ea; }
.fx-fstat--orange { --fx-accent: #e2622c; --fx-accent-soft: #fdece3; }
.fx-fstat--teal   { --fx-accent: #17a2b8; --fx-accent-soft: #e3f5f8; }
.fx-fstat--amber  { --fx-accent: #d9a326; --fx-accent-soft: #fbf2dc; }

.fx-fstat__icon
{
	flex: none;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--fx-accent-soft);
	color: var(--fx-accent);
}

.fx-fstat__icon .fx-i
{
	width: 1.375rem;
	height: 1.375rem;
	stroke-width: 2.1;
}

.fx-fstat__body
{
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.fx-fstat__label
{
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #55606b;
}

.fx-fstat__value
{
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: #1f2933;
}

.fx-fstat__caption
{
	font-size: 0.875rem;
	line-height: 1.4;
	color: #6b7580;
}


/* ==========================================================================
   2  TOP BAR   (nav.navbar-top)
   ========================================================================== */

.fx-topbar
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 3.4em;
	padding: 0 1.2em;
	background: #dce5ed;
}

.fx-topbar__brand
{
	display: flex;
	align-items: center;
	gap: 0.55em;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.05;
}

/* The real lock-up, at the 54px the applications' navbar renders it at. Height
   is in em so it scales with the panel; width follows the artwork's ratio. */
.fx-topbar__brand img
{
	display: block;
	height: 3.6em;
	width: auto;
}

.fx-topbar__right
{
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.fx-topbar__icon
{
	color: var(--compli-text);
	font-size: 0.95em;
	padding: 0.35em 0.55em;
	opacity: 0.75;
}

.fx-user
{
	display: flex;
	align-items: center;
	padding: 0.3em 0.6em;
	border-radius: 0.3em;
}

.fx-user__avatar
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.3em;
	height: 2.3em;
	margin-right: 0.5em;
	border-radius: 50%;
	background: var(--compli-primary);
	color: #fff;
	font-size: 0.78em;
	font-weight: 600;
}

.fx-user__info
{
	display: flex;
	flex-direction: column;
}

.fx-user__name
{
	font-size: 0.78em;
	font-weight: 600;
	line-height: 1.2;
}

.fx-user__role
{
	font-size: 0.68em;
	color: var(--compli-text-muted);
	line-height: 1.2;
}


/* ==========================================================================
   3  PAGE SURFACE AND BANNER   (.dashboard-container / .welcome-banner)
   ========================================================================== */

.fx-page
{
	padding: 0.75em 1.2em 1.2em;
	background: var(--compli-light);
}

.fx-banner
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	flex-wrap: wrap;
	padding: 1.2em 1.5em;
	margin-bottom: 1.2em;
	background: #e3ecf4;
	border: 1px solid #d8e2ec;
	border-radius: 0.5em;
}

.fx-banner h2
{
	margin: 0 0 0.2em;
	font-size: 1.32em;
	font-weight: 600;
	line-height: 1.25;
}

.fx-banner p
{
	margin: 0;
	font-size: 0.85em;
	color: var(--compli-text-muted);
}

.fx-banner__date
{
	padding: 0.45em 0.9em;
	border-radius: 0.3em;
	background: rgba(39, 93, 138, 0.12);
	border: 1px solid rgba(39, 93, 138, 0.2);
	font-size: 0.78em;
	font-weight: 500;
	color: var(--compli-primary);
	white-space: nowrap;
}


/* ==========================================================================
   5  STAT CARDS   (.acd-card)
   A left accent bar in the card's semantic colour, a soft-tinted icon disc,
   an uppercase label, a tabular figure and a caption. Colour is not decoration:
   green is the HMRC liability, orange the umbrella allocation, teal the
   invoice, blue a count, amber/red an exception state.
   ========================================================================== */

.fx-stats
{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1em;
	margin-bottom: 1.2em;
}

.fx-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.fx-stat
{
	position: relative;
	display: block;
	min-width: 0;
	padding: 1.05em 1.15em 1.1em 1.35em;
	background: #fff;
	border: 1px solid #e8ecf1;
	border-radius: 0.65em;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.fx-stat::before
{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 5px;
	background: var(--fx-accent, var(--compli-primary));
}

.fx-stat--blue     { --fx-accent: var(--acd-blue);     --fx-accent-soft: var(--acd-blue-soft); }
.fx-stat--green    { --fx-accent: var(--acd-hmrc);     --fx-accent-soft: var(--acd-hmrc-soft); }
.fx-stat--orange   { --fx-accent: var(--acd-umbrella); --fx-accent-soft: var(--acd-umbrella-soft); }
.fx-stat--teal     { --fx-accent: var(--acd-invoice);  --fx-accent-soft: var(--acd-invoice-soft); }
.fx-stat--amber    { --fx-accent: var(--acd-amber);    --fx-accent-soft: var(--acd-amber-soft); }
.fx-stat--red      { --fx-accent: var(--acd-red);      --fx-accent-soft: var(--acd-red-soft); }

.fx-stat__head
{
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin-bottom: 0.7em;
}

.fx-stat__icon
{
	flex: none;
	display: grid;
	place-items: center;
	width: 2.8em;
	height: 2.8em;
	border-radius: 50%;
	font-size: 1em;
	background: var(--fx-accent-soft, #e8eef5);
	color: var(--fx-accent, var(--compli-primary));
}

.fx-stat__label
{
	min-width: 0;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.25;
	color: #4a5764;
}

.fx-stat__value
{
	margin-bottom: 0.3em;
	font-size: 1.85em;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.fx-stat__link
{
	margin: 0;
	font-size: 0.78em;
	line-height: 1.4;
	color: var(--compli-text-muted);
}


/* ==========================================================================
   5  DASHBOARD CARDS   (.dashboard-card)
   ========================================================================== */

.fx-grid
{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1em;
}

.fx-grid > .fx-span2 { grid-column: 1 / -1; }

.fx-card
{
	background: #f8f9fa;
	border: 1px solid var(--compli-border);
	border-radius: 0.5em;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.fx-card + .fx-card { margin-top: 1em; }

.fx-card__head
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	padding: 0.85em 1.05em;
	border-bottom: 1px solid var(--compli-rule);
}

.fx-card__title
{
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	font-size: 0.86em;
	font-weight: 600;
}

.fx-card__title .fx-i { color: var(--acd-invoice-dark); }

.fx-card__aside
{
	font-size: 0.76em;
	font-weight: 500;
	color: var(--compli-primary);
	white-space: nowrap;
}

.fx-card__body
{
	padding: 1.05em;
}

.fx-card__body--tight { padding: 0.65em; }

.fx-note
{
	margin: 0;
	font-size: 0.82em;
	color: var(--compli-text-muted);
}


/* ==========================================================================
   6  LIST ROWS   (.agency-item / .agency-badge)
   ========================================================================== */

.fx-item
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	flex-wrap: wrap;
	padding: 0.8em 0.9em;
	margin-bottom: 0.45em;
	background: var(--compli-light);
	border: 1px solid var(--compli-rule);
	border-radius: 0.3em;
}

.fx-item:last-child { margin-bottom: 0; }

/* A liability row carries a reference, a status, three fixed-width metric
   badges, a settlement badge, its due-date detail and up to five action
   buttons. How wide that comes out depends on the row's state: "Awaiting
   Umbrella" draws two two-icon buttons where "Open" draws two one-icon ones.
   Left to wrap on its own, one row breaks onto a second line while the rows
   either side of it stay single, which reads as a broken row rather than a
   narrow column. Below the width where the widest state still fits, every row
   stacks together. The query is on the panel, not the viewport, because the
   same readout sits in columns of different widths on different pages. */
.fx-app { container-type: inline-size; }

@container (max-width: 1080px)
{
	.fx-item
	{
		flex-direction: column;
		align-items: flex-start;
	}
}

.fx-item__lead
{
	display: flex;
	align-items: baseline;
	gap: 0.55em;
	flex-wrap: wrap;
	min-width: 0;
}

.fx-item__lead strong
{
	font-size: 0.88em;
	font-weight: 600;
}

.fx-item__meta
{
	font-size: 0.76em;
	color: var(--compli-text-muted);
}

.fx-item__right
{
	display: flex;
	align-items: center;
	gap: 0.45em;
	flex-wrap: wrap;
}

.fx-badge
{
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	height: 1.75em;
	padding: 0 0.6em;
	border-radius: 0.22em;
	background: var(--acd-hmrc);
	color: #fff;
	font-size: 0.72em;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

/* The three metric badges share a fixed width so they align as columns down a
   list of liabilities - as they do in the product. */
.fx-badge--metric { flex: 0 0 auto; min-width: 10.75em; }

/* The three metric badges are the split, and they carry the split's colours:
   green is owed to HMRC, teal is what the agency was invoiced, orange is what
   is released to the umbrella. The same three run through the charts, the
   figures and the action buttons. */
.fx-badge--jsl      { background: var(--acd-hmrc); }
.fx-badge--invoice  { background: var(--acd-invoice); }
.fx-badge--umbrella { background: var(--acd-umbrella); }
.fx-badge--due      { background: var(--compli-warning); color: #212529; }
.fx-badge--notdue   { background: var(--compli-secondary); }
.fx-badge--overdue  { background: var(--compli-danger); }
.fx-badge--received { background: var(--acd-hmrc); }
.fx-badge--count    { background: var(--acd-hmrc); border-radius: 10em; padding: 0 0.7em; }

/* Status words carry the product's text colours, and always a word as well as
   an icon so the state survives greyscale and a screen reader. */
.fx-status
{
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: 0.76em;
	font-weight: 600;
}

.fx-status--open     { color: #b5860b; }
.fx-status--awaiting { color: #b5860b; }
.fx-status--ready    { color: var(--acd-invoice-dark); }
.fx-status--resolved { color: var(--acd-hmrc); }


/* ==========================================================================
   7  BUTTONS   (Bootstrap .btn-sm outline set as the product uses them)
   ========================================================================== */

.fx-btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	min-width: 2em;
	height: 2em;
	padding: 0 0.5em;
	border: 1px solid currentColor;
	border-radius: 0.25em;
	background: transparent;
	font-size: 0.78em;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
}

.fx-btn--primary   { color: var(--compli-primary); }
.fx-btn--secondary { color: var(--compli-secondary); }
.fx-btn--danger    { color: #b32d3b; }

/* Outline and solid variants of the three semantic actions - the product's
   .acd-obtn--* / .acd-sbtn--* pair. An action is coloured by what it settles:
   the HMRC confirmation is green, the umbrella payment notification orange,
   the invoice teal. */
.fx-btn--hmrc     { color: var(--acd-hmrc);     border-color: var(--acd-hmrc); }
.fx-btn--umbrella { color: var(--acd-umbrella); border-color: var(--acd-umbrella); }
.fx-btn--invoice  { color: var(--acd-invoice);  border-color: var(--acd-invoice); }

.fx-btn--hmrc-solid
{
	border-color: transparent;
	background: var(--acd-hmrc);
	color: #fff;
}

.fx-btn--umbrella-solid
{
	border-color: transparent;
	background: var(--acd-umbrella);
	color: #fff;
}

.fx-btn--solid
{
	border-color: transparent;
	background: var(--compli-primary);
	color: #fff;
}

.fx-btn--muted
{
	color: #adb5bd;
	border-color: #dee2e6;
	background: #fff;
}

.fx-btn--wide { padding: 0 0.8em; }


/* ==========================================================================
   8  TABLES   (.table.table-sm)
   ========================================================================== */

.fx-tablewrap { overflow-x: auto; }

.fx-table
{
	width: 100%;
	border-collapse: collapse;
	font-size: 0.82em;
}

.fx-table th,
.fx-table td
{
	padding: 0.42em 0.5em;
	border-bottom: 1px solid #dee2e6;
	white-space: nowrap;
	vertical-align: middle;
}

.fx-table thead th
{
	border-bottom: 2px solid #dee2e6;
	font-weight: 600;
	text-align: left;
}

.fx-table .fx-num { text-align: right; }
.fx-table .fx-mid { text-align: center; }

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

.fx-table--bordered th,
.fx-table--bordered td { border: 1px solid #dee2e6; }

.fx-table--bordered thead th { background: #f2f3f5; }

.fx-table tfoot td
{
	border-top: 2px solid var(--acd-hmrc);
	border-bottom: 0;
	font-weight: 700;
}

.fx-liab { color: var(--acd-hmrc); font-weight: 700; }

.fx-pill
{
	display: inline-flex;
	align-items: center;
	padding: 0.2em 0.6em;
	border-radius: 10em;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
}

.fx-pill--success   { background: var(--acd-hmrc); }
.fx-pill--warning   { background: var(--compli-warning); color: #212529; }
.fx-pill--secondary { background: var(--compli-secondary); }
.fx-pill--info      { background: var(--acd-invoice); }
.fx-pill--danger    { background: var(--compli-danger); }

.fx-ok    { color: var(--acd-hmrc); }
.fx-warn  { color: var(--compli-warning); }
.fx-muted { color: var(--compli-text-muted); }
.fx-bad   { color: var(--compli-danger); }
.fx-small { font-size: 0.86em; }


/* ==========================================================================
   9  TABS AND FILE PICKER   (the import panel)
   ========================================================================== */

.fx-tabs
{
	display: flex;
	gap: 0.15em;
	border-bottom: 1px solid #dee2e6;
	padding: 0 0.5em;
}

.fx-tab
{
	display: flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.62em 0.95em;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 0.3em 0.3em 0 0;
	font-size: 0.82em;
	color: var(--compli-primary);
	margin-bottom: -1px;
}

.fx-tab.is-on
{
	background: #fff;
	border-color: #dee2e6 #dee2e6 #fff;
	color: var(--compli-text);
	font-weight: 600;
}

.fx-field
{
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.9em;
	background: #fff;
	border: 1px solid #dee2e6;
	border-top: 0;
}

.fx-file
{
	display: flex;
	flex: 1;
	min-width: 0;
	border: 1px solid #ced4da;
	border-radius: 0.25em;
	background: #fff;
	font-size: 0.82em;
	overflow: hidden;
}

.fx-file span:first-child
{
	padding: 0.4em 0.75em;
	background: #e9ecef;
	border-right: 1px solid #ced4da;
	white-space: nowrap;
}

.fx-file span:last-child
{
	padding: 0.4em 0.75em;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fx-label
{
	display: block;
	margin-bottom: 0.35em;
	font-size: 0.82em;
}


/* ==========================================================================
   10  ALERTS   (Bootstrap .alert as the product uses them)
   ========================================================================== */

.fx-alert
{
	display: flex;
	align-items: flex-start;
	gap: 0.55em;
	padding: 0.7em 0.95em;
	margin-bottom: 1em;
	border: 1px solid transparent;
	border-radius: 0.35em;
	font-size: 0.84em;
}

.fx-alert--primary { background: #cfe2ff; border-color: #b6d4fe; color: #084298; }
.fx-alert--info    { background: #cff4fc; border-color: #b6effb; color: #055160; }
.fx-alert--warning { background: #fff3cd; border-color: #ffecb5; color: #664d03; }
.fx-alert--success { background: #d1e7dd; border-color: #badbcc; color: #0f5132; }
.fx-alert--danger  { background: #f8d7da; border-color: #f5c2c7; color: #842029; }


/* ==========================================================================
   11  MODALS   (Bootstrap modal-content as the product uses it)
   ========================================================================== */

.fx-modal
{
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 0.5em;
	overflow: hidden;
}

.fx-modal__head
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.9em 1.05em;
	border-bottom: 1px solid #dee2e6;
}

.fx-modal__title
{
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	font-size: 1.05em;
	font-weight: 500;
}

.fx-modal__x { color: #6c757d; font-size: 0.95em; }

.fx-modal__body { padding: 1.05em; }

.fx-modal__foot
{
	display: flex;
	justify-content: flex-end;
	gap: 0.5em;
	padding: 0.75em 1.05em;
	border-top: 1px solid #dee2e6;
}

.fx-modal .fx-table th,
.fx-modal .fx-table td { white-space: nowrap; }

.fx-pager
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding-top: 0.75em;
	font-size: 0.8em;
	color: var(--compli-text-muted);
}

.fx-pager__nums { display: flex; gap: 0.25em; }

.fx-pager__nums span
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.9em;
	height: 1.9em;
	padding: 0 0.4em;
	border: 1px solid #dee2e6;
	color: var(--compli-primary);
}

.fx-pager__nums span.is-on
{
	background: var(--compli-primary);
	border-color: var(--compli-primary);
	color: #fff;
}


/* ==========================================================================
   12  FIGURE ROWS   (the four-up label/value row inside an evidence card)
   ========================================================================== */

.fx-figs
{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.85em;
	margin-bottom: 0.9em;
}

.fx-fig__label
{
	display: block;
	font-size: 0.74em;
	color: var(--compli-text-muted);
}

.fx-fig__value
{
	font-size: 0.95em;
	font-weight: 700;
}

.fx-fig__value .fx-fig__sub
{
	font-weight: 400;
	font-size: 0.85em;
	color: var(--compli-text-muted);
}


/* ==========================================================================
   13  ICONS
   The product draws these from Font Awesome. An icon font is not redistributed
   here, so each readout icon is an inline 16-unit stroke glyph carrying the
   same meaning. Icons never stand alone: every status also states its word.
   ========================================================================== */

.fx-i
{
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	flex: 0 0 auto;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fx-i--fill { fill: currentColor; stroke: none; }


/* ==========================================================================
   14  NARROW VIEWPORTS
   The panels are a faithful reproduction of a desktop application, so below
   the tablet breakpoint they scale down and let their tables scroll rather
   than reflowing into something the product does not do.
   ========================================================================== */

@media (max-width: 1024px)
{
	.fx-frame { --fx-frame-pad: 1.25rem; }
	.fx-frame__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; }
	.fx-fstat { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
	.fx-frame__title { font-size: 1.25rem; }
	.fx-app { font-size: 12px; }
	.fx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fx-grid  { grid-template-columns: minmax(0, 1fr); }
	.fx-figs  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px)
{
	.fx-frame__band { flex-wrap: wrap; gap: 0.875rem 1rem; }
	.fx-frame__titles { flex: 1 1 100%; order: 3; }
	.fx-frame__pill { height: 2.25rem; padding: 0 0.875rem; font-size: 0.875rem; }
	.fx-frame__stats { grid-template-columns: minmax(0, 1fr); }
	.fx-fstat { flex-direction: row; align-items: center; }
	.fx-app { font-size: 10.5px; }
	.fx-user__info { display: none; }
}

@media print
{
	.fx-app { box-shadow: none; }
}