/* ============================================================
   BankCIS "Final" design system. Scoped: only pages that explicitly
   link this stylesheet are affected. Does not touch
   applicationStyles.css / commonStyles.css or any other page's
   appearance. Started with Login + Dashboard + global nav; now also
   covers the Repayment Schedule calculator's form components (see
   "Form components" section below) - reuse those same classes
   (fd-select, fd-checkbox, fd-date-input, fd-data-table, ...) rather
   than inventing page-specific ones when modernizing further pages.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Libre+Baskerville:wght@700&display=swap');

:root {
	--fd-ink: #1D2226;
	--fd-slate-900: #1E262E;
	--fd-slate-800: #26313B;
	--fd-slate-700: #2E3946;
	--fd-slate-600: #64707D;
	--fd-slate-400: #8891A0;
	--fd-bg: #FAF9F6;
	--fd-card-border: #ECE7DC;
	--fd-input-border: #DCD5C4;
	--fd-input-bg: #FCFBF8;
	--fd-muted: #ADA898;
	--fd-blue: #245F7A;
	--fd-blue-dark: #1B4A5E;
	--fd-blue-light: #6FA9C4;
	--fd-blue-tint: #E3F0F5;
	--fd-blue-tint-border: #CFE4EC;
	--fd-gold: #B8893A;
	--fd-gold-light: #D4B889;
	--fd-amber-bg: #FBEFE2;
	--fd-amber-border: #EFD3A8;
	--fd-amber-text: #6B4A16;
	--fd-amber-icon: #9A6A1F;
	--fd-danger: #B0483F;
	--fd-danger-bg: #FBEAE8;
	--fd-danger-border: #EAC6C1;
	--fd-green: #3C7A5B;
	--fd-green-bg: #E7F3EC;
	--fd-green-border: #C9E4D6;
	--fd-maroon: #7A1F3D;
	/* BankCIS AI (CLAUDE.md, "BankCIS AI: identity and UI rules") */
	--fd-ai-teal: #1B5E7A;
	--fd-ai-aqua: #2AA9B8;
	--fd-ai-gold: #D4AA47;
	--fd-ai-tint: #EEF7F9;
	--fd-ai-tint-border: #CBE7EC;
	--fd-ai-grad: linear-gradient(90deg, #1B5E7A, #2AA9B8);
}

.fd-body {
	margin: 0;
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
	background: var(--fd-bg);
	color: var(--fd-ink);
}

.fd-body a { color: var(--fd-blue); text-decoration: none; }
/* :not(.fd-btn) matters: without it, this tied-specificity rule (class+type+pseudo)
   beats .fd-btn-primary:hover (class+pseudo) and silently overrides its white hover
   text with blue-dark - on a blue-dark hover background that reads as "text vanishes". */
.fd-body a:hover:not(.fd-btn) { color: var(--fd-blue-dark); }

/* ---- Buttons ---- */
/* menu.css has `a:link, a:visited { padding-right: 2px; }` - a type+pseudo-class
   selector that outweighs a bare class, so it silently crushed the right padding on
   every <a>-based component below (buttons, pills, rail rows) down to 2px while the
   left side stayed correct - everything looked left-hugging/off-center as a result.
   !important on padding-right (left was never touched by that rule, so it's already
   fine) fixes it everywhere it applies. */
.fd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 44px; padding: 0 18px; padding-right: 18px !important; border-radius: 8px; border: none;
	font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700;
	cursor: pointer; text-decoration: none;
}
/* applicationStyles.css has `a:link { color: black }` - a type+pseudo-class selector
   that outweighs a bare class, so it silently wins over .fd-btn-primary { color:#FFF }
   for any <a class="fd-btn-primary">. !important is the reliable fix. */
.fd-btn-primary { background: var(--fd-blue); color: #FFFFFF !important; box-shadow: 0 4px 14px rgba(36,95,122,0.30); }
.fd-btn-primary:hover { background: var(--fd-blue-dark); color: #FFFFFF !important; }
/* Committee "Finalize decision": dark-blue button with a gold check icon; !important on color for the same a:link reason as .fd-btn-primary. */
.fd-btn-finalize { background: var(--fd-blue-dark); color: #FFFFFF !important; }
.fd-btn-finalize:hover { background: var(--fd-blue); color: #FFFFFF !important; }
.fd-btn-finalize svg { color: var(--fd-gold-light); flex: none; }
.fd-btn-sm { height: 36px; padding: 0 14px; padding-right: 14px !important; font-size: 12.5px; border-radius: 8px; }

/* ---- Toast: shared, app-wide replacement for native alert()/confirm() popups.
   fdToast(message, type) in header_v2.jsp appends one of these to a fixed stack in
   the corner instead - see that file for the JS. type is 'error' (default) |
   'warning' | 'info', each just picking a color trio below; the markup/behavior
   (icon, auto-dismiss, manual close, stacking) is identical across all three. Any
   already-migrated page gets this for free via its header_v2.jsp include - call
   fdToast() instead of alert() rather than inventing a page-local message box. */
#fdToastStack {
	position: fixed; top: 18px; right: 18px; z-index: 4000;
	display: flex; flex-direction: column; gap: 10px; width: 320px; max-width: calc(100vw - 36px);
}
.fd-toast {
	display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 9px;
	font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; line-height: 1.5;
	box-shadow: 0 10px 28px rgba(20,24,28,0.16);
	background: var(--fd-danger-bg); border: 1px solid var(--fd-danger-border); color: var(--fd-danger);
	opacity: 0; transform: translateX(16px); transition: opacity .18s ease, transform .18s ease;
}
.fd-toast.fd-toast-in { opacity: 1; transform: translateX(0); }
.fd-toast-warning { background: var(--fd-amber-bg); border-color: var(--fd-amber-border); color: var(--fd-amber-text); }
.fd-toast-info { background: var(--fd-blue-tint); border-color: var(--fd-blue-tint-border); color: var(--fd-blue-dark); }
.fd-toast-icon { flex-shrink: 0; margin-top: 1px; }
.fd-toast-msg { flex: 1; min-width: 0; font-weight: 600; }
.fd-toast-close {
	flex-shrink: 0; background: none; border: none; padding: 0; cursor: pointer; line-height: 1;
	font-size: 15px; color: inherit; opacity: 0.55;
}
.fd-toast-close:hover { opacity: 1; }

/* ---- Inputs ---- */
.fd-field-label { font-size: 12px; font-weight: 600; color: #41403A; display: block; margin-bottom: 7px; }
/* ---- Help icon: a small "i" button next to a label or any component, opening a
   scrollable popover with the detail that used to be crammed into the label text
   itself (e.g. "Repayment period (in months including cushion, if any)" -> label
   just says "Repayment period (months)", the rest lives here). Reusable anywhere,
   not just next to .fd-field-label - wrap whatever you're annotating and the
   button in a .fd-label-row (or give the button's own parent position:relative)
   and it self-attaches its popover via fdHelpInit(), called once on page load. */
.fd-label-row { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; position: relative; }
.fd-label-row .fd-field-label { margin-bottom: 0; }
/* ---- Icon-prefixed value: a small muted icon in front of a piece of contact/
   identity data (contact number, e-mail, office, ID/PF no, ...) inside a kv
   row, card subtitle, or anywhere else a plain value would otherwise read as
   an undifferentiated wall of text next to its label. The icon sits with the
   VALUE, not the label - the label still says what the field is; the icon is
   a quick visual anchor for scanning a card with several such rows (matches
   the pattern already used for a page's Customer/Sol ID caption and the
   Sector/Segment pill). Reusable wherever a kv-grid or similar list needs
   this - see "Icon-prefixed values" in the design guidelines. */
.fd-kv-icon { display: inline-flex; align-items: center; gap: 6px; }
.fd-kv-icon svg { flex-shrink: 0; color: var(--fd-slate-400); }
/* text-transform/letter-spacing:none/normal on both the button and the
   popover - a legacy CSS trap discovered when this component was first
   nested inside an uppercase-transformed ancestor (.fd-table th, for the
   Customer Home Status column's help icon): text-transform is inherited,
   and neither of these ever reset it, so the "i" rendered as capital "I"
   and the ENTIRE popover paragraph rendered ALL CAPS. Never triggered
   before because every prior use sat inside .fd-card-head/.fd-field-label,
   neither of which sets text-transform - same class of bug as the
   menu.css h1/h2 traps documented elsewhere in this file: an ancestor rule
   silently wins on whatever property a new rule doesn't explicitly set,
   not discovered by reading the CSS, only by using the component
   somewhere it hadn't been used before. */
.fd-help-btn {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--fd-input-border);
	background: #FFFFFF; color: var(--fd-slate-600); font-family: Georgia, 'Times New Roman', serif;
	font-style: italic; font-weight: 700; font-size: 10.5px; line-height: 1; padding: 0; cursor: pointer;
	text-transform: none; letter-spacing: normal;
}
.fd-help-btn:hover, .fd-help-btn:focus, .fd-help-btn.fd-help-open {
	border-color: var(--fd-blue); color: #FFFFFF; background: var(--fd-blue); outline: none;
}
.fd-help-popover {
	display: none; position: absolute; z-index: 60; top: 100%; left: 0; margin-top: 6px;
	width: 240px; max-height: 150px; overflow-y: auto;
	background: #FFFFFF; border: 1px solid var(--fd-card-border); border-radius: 8px;
	box-shadow: 0 10px 28px rgba(30,38,46,0.16); padding: 10px 12px;
	font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 400;
	line-height: 1.5; color: var(--fd-slate-700); text-transform: none; letter-spacing: normal;
}
.fd-help-popover.fd-help-open { display: block; }
.fd-input {
	height: 44px; width: 100%; border: 1px solid var(--fd-input-border); border-radius: 8px;
	background: #FFFFFF; padding: 0 13px; font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 14px; color: var(--fd-ink); box-sizing: border-box;
}
.fd-input::placeholder { color: #ADA898; }
.fd-input-sm { height: 32px; font-size: 11.5px; border-radius: 8px; background: var(--fd-input-bg); }

/* ---- Inert display-only fields (e.g. filemovementreg.jsp's receipt-date/TAT
   fields) - decorative, never bound to data (no name/id in the JSP, wrapped
   pointer-events:none), kept exactly as inert but restyled to match
   .fd-input-sm instead of the legacy .date/.textfieldDigit look (Arial 11px,
   18px tall) those classes render by default. Muted text color signals
   "not editable" without a disabled look. dojo's sx:datetimepicker renders
   its own <input> with a hardcoded inline style="width:7em" and its own
   wrapper <span> - cssClass alone can't win against that (see
   bankcis-jsp-modernization-pattern memory), hence !important here, scoped
   through this wrapper class rather than a per-widget id (both date pickers
   share the same empty id="", by design, matching the original markup). */
.fd-inert-datefield input.date {
	font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 12px !important;
	height: 32px !important; width: 100% !important; border: 1px solid var(--fd-input-border) !important;
	border-radius: 8px !important; background: var(--fd-input-bg) !important; color: var(--fd-slate-400) !important;
	padding: 0 9px !important; box-sizing: border-box !important;
}
/* This field can't actually open a picker (pointer-events:none on its
   wrapper) - showing dojo's own clickable-looking calendar .gif on a field
   that can't be clicked is misleading, not just off-brand, so hide it rather
   than try to reskin a legacy raster icon to match our SVG icon language. */
.fd-inert-datefield img { display: none !important; }
.fd-inert-tat {
	font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 12px !important;
	height: 32px !important; width: 100% !important; border: 1px solid var(--fd-input-border) !important;
	border-radius: 8px !important; background: var(--fd-input-bg) !important; color: var(--fd-slate-400) !important;
	padding: 0 9px !important; box-sizing: border-box !important;
}

/* ---- Cards / KPI ---- */
.fd-card { background: #FFFFFF; border: 1px solid var(--fd-card-border); border-radius: 10px; }
.fd-kpi { flex: 1; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; }
.fd-kpi-label { font-size: 11px; color: #7A776E; }
.fd-kpi-value { font-size: 24px; font-weight: 800; color: var(--fd-blue); letter-spacing: -0.01em; margin-top: 6px; }

/* ---- Register rail ---- */
.fd-rail-label { font-size: 10.5px; font-weight: 700; color: var(--fd-slate-600); letter-spacing: 0.06em; text-transform: uppercase; }
/* applicationStyles.css's `a:link { color: black }` (type+pseudo-class) outweighs a
   bare class like .fd-rail-row - without !important, every inactive rail row and
   pill below renders plain black text instead of the intended muted tone. */
.fd-rail-row {
	font-size: 12.5px; color: var(--fd-slate-400) !important; padding: 9px 10px; padding-right: 10px !important; border-radius: 7px;
	display: flex; align-items: center; justify-content: space-between; cursor: pointer;
	text-decoration: none;
}
.fd-rail-row:hover { background: #F5F4F1; color: var(--fd-slate-600); }
.fd-rail-row.active { background: var(--fd-blue-tint); color: var(--fd-slate-600); font-weight: 700; }
.fd-rail-row span {
	font-size: 12.5px; color: var(--fd-muted); margin-left: 10px; flex-shrink: 0;
}
.fd-rail-row.active span { color: var(--fd-slate-600); font-weight: 700; }

/* Per-row launcher (Customer Register lookup -> Annual Review/Compromise/Recovery,
   see ajaxworklist.jsp). Visually NESTED under its row - a left rule + indent, the
   same idea as a form field's helper text sitting under the field - so it reads as
   part of that row, not a second independent control floating in the rail. Sized
   below .fd-input-sm on purpose: a launcher is a secondary, occasional action, not
   the rail's primary navigation (the row's own label above it still is). The
   positive top margin matters - a launcher that hugs its label with zero gap reads
   as broken/misaligned, not "grouped". */
.fd-rail-launcher {
	margin: 5px 0 10px 14px;
	padding-left: 10px;
	border-left: 2px solid var(--fd-card-border);
}
.fd-rail-launcher select,
.fd-rail-launcher button {
	height: 28px; width: 100%; font-size: 11px; border-radius: 6px; box-sizing: border-box;
	font-family: 'Plus Jakarta Sans', sans-serif;
}
.fd-rail-launcher select {
	border: 1px solid var(--fd-input-border); background: var(--fd-input-bg);
	color: var(--fd-ink); padding: 0 8px;
}
.fd-rail-launcher button {
	border: 1px solid var(--fd-blue); background: var(--fd-blue-tint);
	color: var(--fd-blue-dark) !important; font-weight: 700; cursor: pointer; padding: 0 8px;
}
.fd-rail-launcher button:hover { background: var(--fd-blue); color: #FFFFFF !important; }

/* ---- Status pills ---- */
.fd-pill {
	font-size: 12px; font-weight: 600; padding: 7px 16px; padding-right: 16px !important; border-radius: 999px;
	border: 1px solid var(--fd-input-border); color: #6E6C68 !important; display: inline-flex;
	align-items: center; background: #FFFFFF; cursor: pointer; text-decoration: none;
}
.fd-pill.active { background: var(--fd-blue); color: #FFFFFF !important; border-color: var(--fd-blue); font-weight: 700; }
.fd-pill-danger { color: var(--fd-danger) !important; border-color: #EAC6C1; }
/* :last-child, not a blanket "span" - the earlier selector matched BOTH spans
   (label and count), giving the label an unwanted left margin too. That pushed the
   whole "label count" block right of center: 16px pad + 8px margin before the label,
   only 16px after the count - the count then sat close to the right edge, no space
   after it. Scoping to the count alone restores equal 16px padding on both sides. */
.fd-pill span:last-child { margin-left: 8px; opacity: 0.75; }

/* ---- Table ---- */
.fd-table { width: 100%; border-collapse: collapse; }
.fd-table th {
	font-size: 10.5px; font-weight: 700; color: var(--fd-blue-dark); text-transform: uppercase;
	letter-spacing: 0.05em; text-align: left; padding: 11px 15px;
	background: var(--fd-blue-tint); border-bottom: 1px solid var(--fd-blue-tint-border);
}
.fd-table td { font-size: 13px; color: #262418; padding: 12px 15px; border-bottom: 1px solid #F1EEE4; }
.fd-table tr:hover td { background: #FBFAF7; }
.fd-status-chip {
	font-size: 11.5px; font-weight: 700; background: var(--fd-blue-tint); color: var(--fd-blue-dark);
	padding: 5px 14px; border-radius: 999px; display: inline-block;
}
/* ---- Semantic status colors ----
   Only 3 values actually exist for strStatus/strPresentPosition across the
   codebase (confirmed by grepping the DAOs and matching filemovementreg.jsp's
   own stepper, which reads the exact same underlying field under a
   different action-level property name: LoanRegisterDAO.getStatus() ->
   strPresentPosition) - "Being processed", "Processing completed",
   "Cancelled". These are DISPLAY-ONLY modifier classes added alongside the
   base .fd-status-chip - never change what text a chip shows, only which
   background/color wraps the value that's already there. The base
   .fd-status-chip rule above is the fallback for any value that doesn't
   match one of the three (or a page not yet updated to add the modifier).
   Applying this: an s:if/elseif/else chain (or JS equivalent) picks the
   class using the EXACT same string comparisons already used elsewhere in
   this codebase for the same field (e.g. ProposalMovementDAO's
   strPresentPosition='Processing completed' SQL, filemovementreg.jsp's
   strType=='Cancelled') - copy the comparison, never paraphrase/re-case it,
   since unlike the color choice here, that string IS load-bearing
   elsewhere. See "Semantic status colors" in the design guidelines for the
   copy-paste snippet - reuse this same set of 3 classes on every page that
   displays a loan/proposal status, not just the one it's first added to. */
.fd-status-chip.fd-status-being-processed { background: var(--fd-amber-bg); color: var(--fd-amber-text); }
.fd-status-chip.fd-status-processing-completed { background: var(--fd-green-bg); color: var(--fd-green); }
.fd-status-chip.fd-status-cancelled { background: var(--fd-danger-bg); color: var(--fd-danger); }

/* ---- KPI / summary strip ----
   A compact metric row - uppercase label above, big value below - shown at the
   top of a redesigned register/list page to summarise the rows beneath it
   (count, longest-overdue, "N of M pending", etc). Every value is a plain
   rollup computed in the JSP from the list the action ALREADY loaded - never a
   new query or DAO call. .fd-kpi-danger tints the value red for an at-a-glance
   "this one needs attention". Add it only where a page genuinely has something
   worth summarising - not every page needs one. */
.fd-kpi-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.fd-kpi { background: #FFFFFF; border: 1px solid var(--fd-card-border); border-radius: 10px; padding: 10px 14px; min-width: 128px; }
.fd-kpi-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fd-muted); }
.fd-kpi-v { font-size: 17px; font-weight: 800; color: var(--fd-ink); margin-top: 3px; }
.fd-kpi-v.fd-kpi-danger { color: var(--fd-danger); }

/* ---- Stacked cell ----
   Two (or more) tightly-related values in one table cell, so a wide grid can
   club columns and still fit a centred page with no horizontal scroll. Each
   line is an optional tiny uppercase label (.t) + the value (.d); .d.sub is a
   muted secondary line. */
.fd-kv-stack { display: flex; flex-direction: column; gap: 8px; }
.fd-kv-stack .r { font-size: 12px; display: flex; gap: 7px; align-items: baseline; line-height: 1.35; }
.fd-kv-stack .r .t { color: var(--fd-muted); min-width: 46px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0; }
.fd-kv-stack .r .d { color: var(--fd-ink); font-weight: 600; }
.fd-kv-stack .r .d.sub { color: var(--fd-muted); font-weight: 500; }

/* ---- Severity chip ----
   "N days over" style badge - how far a row is past a threshold. Distinct from
   .fd-status-chip (which shows a status VALUE); this shows a magnitude, so it
   only has an amber (near) / red (well over) split, reusing the amber/danger
   tokens. */
.fd-sev-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.fd-sev-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.fd-sev-chip.fd-sev-amber { background: var(--fd-amber-bg); color: var(--fd-amber-text); border: 1px solid var(--fd-amber-border); }
.fd-sev-chip.fd-sev-red { background: var(--fd-danger-bg); color: var(--fd-danger); border: 1px solid var(--fd-danger-border); }

/* ---- TAT details page (tatdetails.jsp / urlTatView.action) ---- */
.fd-tat-note { font-size: 12px; color: var(--fd-slate-600); background: var(--fd-blue-tint); border: 1px solid var(--fd-blue-tint-border); border-radius: 9px; padding: 10px 13px; margin: 14px 0; line-height: 1.55; }
.fd-tat-note b { color: var(--fd-blue-dark); }
.fd-tat-note-ref { color: var(--fd-blue-dark); font-weight: 700; }
.fd-tat-msg { font-size: 12.5px; font-weight: 700; color: var(--fd-green); background: var(--fd-green-bg); border: 1px solid var(--fd-green-border); border-radius: 8px; padding: 9px 13px; margin: 0 0 14px; text-align: left; }
.fd-tat-table th .fd-label-row { display: inline-flex; margin-bottom: 0; }
.fd-tat-reason { width: 100%; min-width: 200px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; border: 1px solid var(--fd-input-border); border-radius: 7px; background: var(--fd-input-bg); padding: 7px 9px; resize: vertical; color: var(--fd-ink); }
.fd-tat-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #FFFFFF; border: 1px solid var(--fd-card-border); border-radius: 11px; padding: 11px 14px; margin: 10px 0 22px; }
.fd-tat-hint { font-size: 11.5px; color: var(--fd-muted); }

/* ---- Stepper: a small linear progress indicator (e.g. Being processed ->
   Cancelled -> Disposed of) - a modernized, accessible replacement for the
   legacy present.jpg/inactive.jpg traffic-light image pattern. Reused
   wherever a page shows a mutually-exclusive multi-state status, not just
   filemovementreg.jsp - keep it generic (see that page for a real example). */
.fd-stepper { display: flex; align-items: center; }
.fd-step { display: flex; align-items: center; gap: 10px; flex: 1; }
.fd-step-dot {
	width: 30px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
	flex-shrink: 0; font-size: 13px; font-weight: 800; border: 2px solid var(--fd-input-border);
	color: var(--fd-muted); background: #FFFFFF;
}
.fd-step.fd-step-done .fd-step-dot { background: var(--fd-green); border-color: var(--fd-green); color: #FFFFFF; }
.fd-step.fd-step-current .fd-step-dot { background: var(--fd-blue); border-color: var(--fd-blue); color: #FFFFFF; box-shadow: 0 0 0 4px var(--fd-blue-tint); }
.fd-step-label { font-size: 12.5px; font-weight: 600; color: var(--fd-slate-400); }
.fd-step.fd-step-done .fd-step-label, .fd-step.fd-step-current .fd-step-label { color: var(--fd-ink); }
.fd-step-line { flex: 1; height: 2px; background: var(--fd-input-border); margin: 0 8px; }
.fd-step-line.fd-step-line-done { background: var(--fd-green); }

/* ---- Stage register: a numbered, collapsible list of stages (e.g. the 13
   process types on filemovementreg.jsp), each opening independently to show
   its own detail/table. Pair with the "jump rail" below for quick numbered
   navigation into a specific stage. Generic - reuse for any future
   multi-stage tracking register, not just this one page. */
.fd-stage-card { background: #FFFFFF; border: 1px solid var(--fd-card-border); border-radius: 10px; margin-bottom: 10px; }
.fd-stage-card.fd-stage-has-data { border-color: var(--fd-green-border); }
.fd-stage-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; cursor: pointer; gap: 12px; border-radius: 10px; }
.fd-stage-card.fd-stage-open .fd-stage-head { border-radius: 10px 10px 0 0; }
.fd-stage-head:hover { background: var(--fd-input-bg); }
.fd-stage-num {
	width: 26px; height: 26px; border-radius: 7px; background: var(--fd-blue-tint); color: var(--fd-blue-dark);
	font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fd-stage-card.fd-stage-has-data .fd-stage-num { background: var(--fd-green); color: #FFFFFF; }
.fd-stage-title { font-size: 12.5px; font-weight: 700; color: var(--fd-ink); line-height: 1.4; }
.fd-stage-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.fd-stage-disposal { font-size: 11px; color: var(--fd-slate-600); white-space: nowrap; }
.fd-stage-disposal b { color: var(--fd-ink); }
.fd-stage-chip { font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.fd-stage-chip.fd-stage-chip-empty { background: var(--fd-input-bg); color: var(--fd-muted); border: 1px solid var(--fd-card-border); }
.fd-stage-chip.fd-stage-chip-has-data { background: var(--fd-green-bg); color: var(--fd-green); border: 1px solid var(--fd-green-border); }
.fd-stage-caret { color: var(--fd-slate-400); transition: transform .15s; flex-shrink: 0; }
.fd-stage-card.fd-stage-open .fd-stage-caret { transform: rotate(90deg); }
/* No overflow:hidden on .fd-stage-card itself (deliberately) - .fd-stage-body
   below clips its own collapse animation on its own; putting it on the card
   too clips any absolutely-positioned popover (e.g. a .fd-help-popover) that
   opens from inside the always-visible .fd-stage-head while the card is
   collapsed, since a collapsed card's box is barely taller than its head. */
.fd-stage-body { max-height: 0; overflow: hidden; border-radius: 0 0 10px 10px; transition: max-height .2s ease; }
.fd-stage-card.fd-stage-open .fd-stage-body { max-height: 900px; }
.fd-stage-body-inner { padding: 0 16px 16px; }
.fd-stage-empty { padding: 20px; text-align: center; color: var(--fd-muted); font-size: 12px; background: var(--fd-input-bg); border-radius: 8px; margin-top: 2px; }

.fd-jump-heading { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
/* menu.css has a global h2 { font-family: "Univers Condensed"; color: #c85643;
   padding: 0 0 0 25px; } (bare type selector) - same trap as the documented h1
   one, just for h2 this time. Every property that bare rule sets and this one
   doesn't leaks straight through (font-family and padding here weren't
   overridden originally, so the heading silently rendered in the legacy
   condensed serif with an unwanted 25px left indent instead of Plus Jakarta
   Sans flush-left). Set every property the legacy rule touches, not just the
   ones that visibly look wrong at a glance. */
.fd-jump-heading h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--fd-ink); margin: 0; padding: 0; }
.fd-jump-heading span { font-size: 11px; color: var(--fd-slate-600); }
.fd-jump-rail { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 14px; background: var(--fd-input-bg); border: 1px solid var(--fd-card-border); border-radius: 10px; margin-bottom: 20px; }
.fd-jump-chip {
	width: 30px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
	font-size: 11.5px; font-weight: 800; background: #FFFFFF; border: 1.5px solid var(--fd-input-border);
	color: var(--fd-slate-600); cursor: pointer;
}
.fd-jump-chip.fd-jump-chip-has-data { border-color: var(--fd-green); color: var(--fd-green); }
.fd-jump-chip.fd-jump-chip-open { background: var(--fd-blue); border-color: var(--fd-blue); color: #FFFFFF !important; }
.fd-jump-chip:hover { border-color: var(--fd-blue-light); color: var(--fd-blue); }
.fd-jump-chip.fd-jump-chip-open:hover { color: #FFFFFF !important; }

/* ---- Dashboard variants (Committee Decision Dashboard) ----
   Additive modifiers on the stage-card/jump-rail above; filemovementreg.jsp
   does not use them and renders exactly as before. .fd-stage-tall lifts the
   900px body cap so a card can hold long AJAX-loaded / 1700-line content;
   .fd-jump-chip-label lets a chip carry a word instead of a bare number. */
.fd-stage-card { scroll-margin-top: 12px; }
.fd-stage-card.fd-stage-tall.fd-stage-open .fd-stage-body { max-height: none; overflow: visible; }
.fd-jump-chip.fd-jump-chip-label { width: auto; height: auto; padding: 6px 12px; font-size: 10.5px; }
.fd-kpi-row.fd-kpi-stack .fd-kpi { display: block; flex: 1 1 150px; min-width: 0; }
.fd-kpi-sub { font-size: 10.5px; color: var(--fd-slate-400); margin-top: 2px; }
.fd-kpi-v.fd-kpi-good { color: var(--fd-green); }
.fd-kpi-v.fd-kpi-amber { color: var(--fd-amber-text); }
.fd-zone-sub { font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fd-slate-600); margin: 16px 0 10px; }
.fd-zone-sub:first-child { margin-top: 0; }
.fd-kv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px 20px; }
.fd-kv-tiles .kv .k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fd-muted); margin-bottom: 3px; }
.fd-kv-tiles .kv .v { font-size: 12.5px; font-weight: 600; color: var(--fd-ink); line-height: 1.4; }
.fd-kv-tiles .kv.wide { grid-column: span 2; }
.fd-kv-tiles .kv.full { grid-column: 1 / -1; }

/* Segmented Table/Chart toggle, comment-card grid and chart picker used by the
   Committee Dashboard's Ratio Analysis and Performance Indicators zones. */
.fd-seg { display: inline-flex; background: var(--fd-input-bg); border: 1px solid var(--fd-input-border); border-radius: 9px; padding: 3px; gap: 2px; }
.fd-seg button { border: 0; background: transparent; font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--fd-slate-600); padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.fd-seg button.active { background: var(--fd-blue); color: #FFFFFF; }
.fd-view { display: none; }
.fd-view.active { display: block; }
.fd-comment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fd-comment-card { background: #FFFFFF; border: 1px solid var(--fd-card-border); border-left: 4px solid var(--fd-blue); border-radius: 7px; padding: 8px 10px; }
.fd-comment-card.ok { border-left-color: var(--fd-green); }
.fd-comment-card.below { border-left-color: var(--fd-danger); }
.fd-comment-card .cc-name { font-size: 10.5px; font-weight: 700; color: var(--fd-ink); margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }
.fd-comment-card .cc-name .rt-pill { margin-left: auto; }
.fd-comment-card .cc-text { font-size: 11px; color: var(--fd-slate-700); line-height: 1.45; white-space: pre-wrap; }
/* Committee decision (Zone 13): stepper of members, and the Finalize confirm
   dialog (same look as Ratio Analysis's "Remove all" dialog). */
.fd-cstep-row { display: flex; align-items: center; flex-wrap: wrap; row-gap: 12px; margin: 4px 0 18px; }
.fd-cstep { display: flex; align-items: center; gap: 8px; }
.fd-cstep .dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; font-weight: 800; border: 2px solid var(--fd-input-border); color: var(--fd-muted); background: #FFFFFF; }
.fd-cstep.done .dot { background: var(--fd-green); border-color: var(--fd-green); color: #FFFFFF; }
.fd-cstep.pending .dot { border-color: var(--fd-amber-border); color: var(--fd-amber-text); background: var(--fd-amber-bg); }
.fd-cstep .lab { font-size: 11.5px; font-weight: 600; color: var(--fd-ink); line-height: 1.3; }
.fd-cstep .lab b { display: block; font-size: 10.5px; font-weight: 700; color: var(--fd-slate-600); }
.fd-cstep.done .lab b { color: var(--fd-green); }
.fd-cstep.pending .lab b { color: var(--fd-danger); }
.fd-cline { flex: 1 1 24px; min-width: 24px; height: 2px; background: var(--fd-input-border); margin: 0 10px; }
.fd-cline.done { background: var(--fd-green); }
.fd-confirm-overlay { position: fixed; inset: 0; background: rgba(29,34,38,.32); display: none; align-items: center; justify-content: center; z-index: 900; }
.fd-confirm-overlay.open { display: flex; }
.fd-confirm-box { background: #FFFFFF; border: 1px solid var(--fd-card-border); border-radius: 12px; box-shadow: 0 20px 48px rgba(29,34,38,.24); padding: 22px 24px; max-width: 400px; width: calc(100% - 40px); font-family: 'Plus Jakarta Sans', sans-serif; }
.fd-confirm-title { font-size: 15.5px; font-weight: 800; color: var(--fd-ink); margin-bottom: 8px; }
.fd-confirm-text { font-size: 12.5px; color: #41403A; line-height: 1.55; margin-bottom: 20px; }
.fd-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.fd-confirm-cancel { height: 36px; padding: 0 16px; border-radius: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--fd-input-border); background: #FFFFFF; color: var(--fd-slate-700); font-family: inherit; }
.fd-confirm-cancel:hover { background: var(--fd-input-bg); }
.fd-confirm-danger { height: 36px; padding: 0 16px; border-radius: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; border: none; background: var(--fd-blue); color: #FFFFFF; font-family: inherit; }
.fd-confirm-danger:hover { background: var(--fd-blue-dark); }
.fd-comment-note { background: var(--fd-input-bg); border: 1px solid var(--fd-card-border); border-radius: 8px; padding: 10px 12px; font-size: 11.5px; color: var(--fd-slate-700); line-height: 1.6; white-space: pre-wrap; margin-top: 10px; }
@media (max-width: 600px) { .fd-comment-grid { grid-template-columns: 1fr; } }
.fd-chart-wrap { background: var(--fd-input-bg); border: 1px solid var(--fd-card-border); border-radius: 10px; padding: 14px; min-height: 220px; }
.fd-chart-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fd-chart-chip { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 5px 12px; border: 1.5px solid var(--fd-input-border); background: #FFFFFF; color: var(--fd-slate-600); cursor: pointer; font-family: inherit; }
.fd-chart-chip.selected { border-color: transparent; color: #FFFFFF; }
.fd-chart-chip.disabled { opacity: .4; cursor: not-allowed; }
.fd-chart-note { font-size: 10.5px; color: var(--fd-muted); margin: 0 0 10px; line-height: 1.5; }

/* Dashboard tables (Zones 1-6): the shared .fd-table look, plus a green
   severity chip and a small "i" button whose text opens in a popover (one
   page-level handler in proposalcommitteedecision.jsp). */
.fd-sev-chip.fd-sev-green { background: var(--fd-green-bg); color: var(--fd-green); border: 1px solid var(--fd-green-border); }
.fd-dtable { width: 100%; border-collapse: collapse; font-size: 12.5px; font-family: 'Plus Jakarta Sans', sans-serif; }
.fd-dtable th { font-size: 10px; font-weight: 700; color: var(--fd-blue-dark); text-transform: uppercase; letter-spacing: .03em; background: var(--fd-blue-tint); border-bottom: 1px solid var(--fd-blue-tint-border); padding: 8px 10px; text-align: left; vertical-align: bottom; }
.fd-dtable td { padding: 8px 10px; border-bottom: 1px solid #F1EEE4; color: #262418; vertical-align: top; }
.fd-dtable tr:hover td { background: #F1F8FA; }
.fd-dtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.fd-dtable tr.fd-total td { font-weight: 700; background: var(--fd-input-bg); }
.fd-dtable tr.fd-group td { background: #F8F4EA; border-left: 3px solid #D9C79A; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fd-ink); }
.fd-dscroll { overflow-x: auto; }
.fd-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--fd-input-border); background: #FFFFFF; color: var(--fd-slate-600); font-family: Georgia, serif; font-size: 9.5px; font-weight: 700; cursor: pointer; padding: 0; margin-left: 4px; vertical-align: middle; line-height: 1; text-transform: none; }
.fd-info-btn:hover { border-color: var(--fd-blue); color: #FFFFFF; background: var(--fd-blue); }
.fd-info-pop { position: fixed; z-index: 500; max-width: 300px; background: #FFFFFF; border: 1px solid var(--fd-card-border); border-radius: 10px; padding: 11px 13px; box-shadow: 0 8px 24px rgba(29,34,38,.14); font-size: 11.5px; line-height: 1.55; color: var(--fd-slate-700); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500; text-transform: none; letter-spacing: 0; }
.fd-dnote { font-size: 11.5px; color: var(--fd-slate-600); line-height: 1.6; margin: 8px 0; }
.fd-dnote a { color: var(--fd-blue) !important; }

/* Credit facilities (19 columns): keep the facility name and its help icon on one line. */
.fd-dtable.fd-cf th { padding: 10px 6px; }
.fd-dtable.fd-cf td { padding: 13px 6px; }
.fd-dtable.fd-cf td:nth-child(2) { min-width: 200px; }
/* Section separators across both heading rows: Existing limit/s | Proposed limit/s | Pricing | (rest). */
.fd-cf thead tr:first-child th:nth-child(n+4) { border-left: 1px solid #B9D3DF; border-bottom: 1px solid #B9D3DF; }
.fd-cf thead tr:nth-child(2) th:nth-child(4), .fd-cf thead tr:nth-child(2) th:nth-child(10),
.fd-cf thead tr:nth-child(2) th:nth-child(15), .fd-cf thead tr:nth-child(2) th:nth-child(17) { border-left: 1px solid #B9D3DF; }
/* The same section dividers continue down the data rows, very faint. */
.fd-cf tbody tr:not(.fd-group) td:nth-child(4), .fd-cf tbody tr:not(.fd-group) td:nth-child(10),
.fd-cf tbody tr:not(.fd-group) td:nth-child(15), .fd-cf tbody tr:not(.fd-group) td:nth-child(17) { border-left: 1px solid rgba(36, 95, 122, 0.10); }
.fd-dtable.fd-cf .fd-info-btn { margin-left: 3px; }

/* Ring gauge: one ring per credit-exposure ceiling (exposure as % of ceiling). */
.fd-rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.fd-ring-card { display: flex; align-items: center; gap: 14px; background: #FFFFFF; border: 1px solid var(--fd-card-border); border-radius: 10px; padding: 14px 16px; }
.fd-ring-card.fd-ring-over { border-color: var(--fd-danger-border); }
.fd-ring { --p: 0; --c: var(--fd-green); flex: none; width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), #ECE7DC 0); display: flex; align-items: center; justify-content: center; }
.fd-ring-over .fd-ring { --c: var(--fd-danger); }
.fd-ring span { width: 56px; height: 56px; border-radius: 50%; background: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; color: var(--fd-ink); }
.fd-ring-body { min-width: 0; }
.fd-ring-name { font-size: 11.5px; font-weight: 700; color: var(--fd-ink); line-height: 1.4; margin-bottom: 4px; }
.fd-ring-nums { font-size: 11px; color: var(--fd-slate-600); margin-bottom: 6px; font-variant-numeric: tabular-nums; }

/* .fd-skin: dashboard-only re-skin of legacy table markup (GridTableInner1,
   tableHead, rowOdd/rowEven, fieldlabel) to the .fd-dtable look, used where
   the AJAX fragment is shared with other pages and its markup must not
   change. Scoped to the container, so those other pages are unaffected. */
.fd-skin table { border: 0 !important; border-collapse: collapse; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; }
.fd-skin table.GridTableInner1 { width: 100%; }
.fd-skin table, .fd-skin td, .fd-skin th, .fd-skin div, .fd-skin span, .fd-skin b, .fd-skin u { font-family: 'Plus Jakarta Sans', sans-serif !important; }
.fd-skin { overflow-x: auto; }
.fd-skin table { table-layout: auto !important; }
.fd-skin td, .fd-skin th { overflow-wrap: break-word; }
.fd-skin td, .fd-skin th { border: 0 !important; border-bottom: 1px solid #F1EEE4 !important; padding: 7px 10px; color: #262418; vertical-align: top; }
.fd-skin tr.tableHead td, .fd-skin tr.tableHead th { background: var(--fd-blue-tint) !important; color: var(--fd-blue-dark) !important; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--fd-blue-tint-border) !important; text-align: left; vertical-align: bottom; }
.fd-skin tr.rowOdd td, .fd-skin tr.rowEven td, .fd-skin tr.rowMouse td, .fd-skin tr.table td { background: #FFFFFF !important; text-align: left; }
.fd-skin tr.rowMouse td { background: #F1F8FA !important; }
.fd-skin tr.fieldlabel td, .fd-skin td.fieldlabel { background: #F8F4EA !important; border-left: 3px solid #D9C79A !important; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--fd-ink) !important; padding: 8px 10px; }
.fd-skin td.message, .fd-skin td.message b { color: var(--fd-slate-600); font-weight: 600; border-bottom: 0 !important; }
.fd-skin td.fd-wrap { padding: 0 !important; border: 0 !important; }
/* Headings use the same cell padding as the data rows (the legacy .tableHead rule set 2px, which pushed every heading 8px left of its column). */
.fd-skin table tr.tableHead td, .fd-skin table tr.tableHead th { padding: 7px 10px !important; }
/* Numeric columns: heading right-aligned to sit over the right-aligned figures; phone numbers stay left like the text columns. */
.fd-skin td.fd-numh, .fd-skin td.priSecColPresentSub, .fd-skin td.priSecColPresentSubWide, .fd-skin td.priSecColProposedSub, .fd-skin td.priSecColExcessHdr { text-align: right !important; }
.fd-skin .divLinkZeroDecDigit { text-align: left !important; }
/* "Other existing charges" boxes: account numbers read left like other identifiers; long headings wrap instead of spilling into the next column. */
.fd-skin [id^="idDivExistingCharges"] td.textRight { text-align: left !important; }
.fd-skin [id^="idDivExistingCharges"] .tooltip { display: block; white-space: normal; }
.fd-skin [id^="idDivExistingCharges"] .tooltiptext { display: none !important; }
.fd-skin [id^="idDivExistingCharges"] table { table-layout: auto !important; }
.fd-skin tr.rowOdd td, .fd-skin tr.rowEven td, .fd-skin tr.rowMouse td { vertical-align: middle !important; }
.fd-skin .divLink, .fd-skin .divLinkDigit, .fd-skin .divLinkx, .fd-skin .divLinkZeroDecDigit { color: inherit !important; text-decoration: none !important; cursor: default; background: none !important; }
.fd-skin .divLinkDigit, .fd-skin .divLinkZeroDecDigit, .fd-skin .digitFormat { text-align: right; font-variant-numeric: tabular-nums; }

/* .fd-limits: dashboard-only skin for the "Limit/s recommended" mega-table
   (Zone 11). CSS only - the markup, ids and calculation JS are untouched.
   Rows 1-2 of the table are the column headers; later .tableHead rows are the
   Roman-numeral section headings; .reportTitle rows are the totals. */
.fd-limits { overflow-x: auto; }
.fd-limits table, .fd-limits td, .fd-limits th, .fd-limits div, .fd-limits span, .fd-limits b, .fd-limits u, .fd-limits font { font-family: 'Plus Jakarta Sans', sans-serif !important; }
.fd-limits table { border: 0 !important; border-collapse: collapse; font-size: 12.5px; table-layout: auto !important; }
.fd-limits > table { width: 100%; min-width: 900px; }
.fd-limits td, .fd-limits th { border: 0 !important; border-bottom: 1px solid #F1EEE4 !important; padding: 6px 10px; color: #262418; vertical-align: middle; }
.fd-limits td td, .fd-limits td th { padding: 0; border-bottom: 0 !important; }
.fd-limits tr.fieldlabel td { background: #F8F4EA !important; border-left: 3px solid #D9C79A !important; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--fd-ink) !important; }
.fd-limits #idLimitRecommendedTable > tbody > tr.tableHead:nth-child(-n+2) td { background: var(--fd-blue-tint) !important; color: var(--fd-blue-dark) !important; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--fd-blue-tint-border) !important; text-align: center; vertical-align: bottom; }
.fd-limits #idLimitRecommendedTable > tbody > tr.tableHead:nth-child(n+3) td { background: #F8F4EA !important; border-left: 3px solid #D9C79A !important; color: var(--fd-ink) !important; font-size: 11.5px; font-weight: 800; text-align: left; }
.fd-limits tr.reportTitle td { background: var(--fd-input-bg) !important; color: var(--fd-ink) !important; font-weight: 700; font-size: 12px; text-align: left; }
.fd-limits tr.reportTitle input { font-weight: 700; }
.fd-limits input[type=text], .fd-limits input:not([type]), .fd-limits input.readonly, .fd-limits input[readonly] { border: 1px solid var(--fd-card-border) !important; border-radius: 6px; background: var(--fd-input-bg) !important; height: 26px; padding: 0 8px; font-size: 12px; font-family: 'Plus Jakarta Sans', sans-serif !important; text-align: right; font-variant-numeric: tabular-nums; color: var(--fd-ink); box-shadow: none; }

/* ---- Utility strip / module nav (used by header_v2.jsp) ---- */
.fd-utilstrip { height: 36px; background: var(--fd-slate-900); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
/* Each related pair of facts (branch+Sol ID, last-login+session-timeout, avatar+name)
   is grouped into its own quiet pill instead of running together as one long string
   or sitting scattered across the strip - makes it obvious at a glance which facts
   belong together. */
.fd-utilstrip-group {
	display: flex; align-items: center; gap: 7px;
	background: rgba(255,255,255,0.06); border-radius: 999px;
	padding: 5px 12px; font-size: 11px; line-height: 1; white-space: nowrap;
}
.fd-utilstrip-group svg { flex-shrink: 0; opacity: 0.65; color: #C9C4B4; }
.fd-utilstrip-divider { width: 1px; height: 10px; background: rgba(255,255,255,0.16); flex-shrink: 0; }
.fd-utilstrip-primary { color: #EDEBE6; font-weight: 600; }
.fd-utilstrip-secondary { color: #A29E90; }
.fd-utilstrip-warn { color: #E5A79A; font-weight: 600; }
.fd-utilstrip-units { background: rgba(111,169,196,0.16); box-shadow: inset 0 0 0 1px rgba(111,169,196,0.35); }
.fd-utilstrip-units .fd-utilstrip-secondary { color: #9FC3D4; }
.fd-utilstrip-avatar {
	width: 20px; height: 20px; border-radius: 999px; background: var(--fd-blue); color: #FFFFFF;
	font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
/* !important on both states is load-bearing, not decorative: .fd-body a / .fd-body
   a:hover:not(.fd-btn) (class+type, and class+type+pseudo+:not-class respectively)
   are BOTH more specific than a bare .fd-utilstrip-logout class selector - the same
   trap as the breadcrumb link fix above. A plain class rule here would silently lose
   its color to .fd-body's blue link styling (confirmed live: it did, right after
   this button's color moved from an inline style - which always wins regardless of
   specificity - to a class rule, which doesn't). */
.fd-utilstrip-logout {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 11.5px; font-weight: 600; color: #DAD6C9 !important;
	padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14);
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fd-utilstrip-logout svg { flex-shrink: 0; opacity: 0.85; }
.fd-utilstrip-logout:hover {
	color: #FFFFFF !important; background: rgba(224,122,111,0.16); border-color: rgba(224,122,111,0.45);
	text-decoration: none;
}
.fd-modulenav { height: 48px; background: var(--fd-slate-800); display: flex; align-items: center; padding: 0 20px; }
/* navigation_v2.jsp is pulled in via <jsp:include>, which inlines its whole
   <head>...<body> output (its own <link> tags included) into the middle of
   header_v2.jsp's <body> - browsers don't agree on where a stray nested <head>'s
   elements land in the cascade, so this can't rely on "finalDesign.css loads last
   wins". Scoping to #ddtopmenubar and using !important makes the color win no
   matter how that nested-head is resolved. */
#ddtopmenubar .fd-navitem { font-size: 13px; font-weight: 500; color: #C4C0B2 !important; padding: 0 15px; height: 44px; display: flex; align-items: center; border-bottom: 2px solid transparent; text-decoration: none; }
#ddtopmenubar .fd-navitem:hover { color: #FFFFFF !important; }
#ddtopmenubar .fd-navitem.active { color: #FFFFFF !important; border-bottom: 2px solid var(--fd-blue-light); font-weight: 700; }

/* ---- Mega-menu dropdown panels (navigation_v2.jsp's megamenu1, megamenu2, ...) ----
   These reuse two different legacy markup shapes (plain <ul><li><a> in some panels,
   <h2 class="h2link"> in others, e.g. Calculators) and jkmegamenu.css/menu.css only
   ever styled the <ul><li><a> shape - the h2link shape fell through to its
   1990s-era default (black text, white background, Verdana). This covers both
   shapes with one consistent look. !important guards against the same nested-head
   cascade-order issue noted above. */
.megamenu {
	background: #FFFFFF !important;
	border: 1px solid var(--fd-card-border);
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba(29,34,38,0.20);
	padding: 12px 6px;
}
.megamenu, .megamenu * { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; }
/* <table border="1"> doesn't just draw a border around the table - the HTML
   `border` attribute maps a border onto every individual <td>/<th> cell too, at the
   browser's presentational-attribute level (lower priority than any author CSS, but
   `.menuTable { border: none }` alone only clears the table's OWN border, not each
   cell's attribute-derived one). With these panels now single-column, that lone
   <td>'s own hard rectangular border was the sharp square edge showing through -
   sitting right against the actually-rounded, actually-shadowed outer .megamenu, but
   visually dominating since a hard 1px line reads far more strongly than a subtle
   10px radius + soft shadow one padding-width further out. */
/* width:100% matters here, not just cosmetics: <table> defaults to auto layout,
   which shrink-wraps the table (and everything inside it, including each item's
   divider) to just fit its content instead of filling .megamenu's 320px. That only
   looked right on menus whose longest item happens to exceed 320px on its own
   (Calculators); shorter menus (Registers) shrank to a much narrower table, and the
   divider line - which only ever spans its own item's box - stopped partway across
   the panel instead of reaching its edge. */
.megamenu .menuTable { border: none !important; border-spacing: 0 !important; border-collapse: collapse !important; background: transparent !important; width: 100% !important; }
.megamenu .menuTable td, .megamenu .menuTable th { border: none !important; background: transparent !important; }
.megamenu .column { padding: 0 8px; }
.megamenu .column + .column { border-left: 1px solid var(--fd-card-border); }

/* Section headers inside a column: the plain <h3> jkmegamenu.css already expects,
   PLUS every bare, non-clickable <h2> the real markup also uses for the same role
   (e.g. <h2>MIS</h2>, <h2><u>Internationalisation</u></h2>) - both get the same
   compact uppercase label treatment. text-transform is left off the h2 variant
   because a few of these hold a full sentence, not a short label, and uppercasing
   a sentence reads worse than leaving it be. */
.megamenu .column h3,
.megamenu .column > h2:not(.h2link) {
	background: none !important; color: var(--fd-slate-600) !important; font-weight: 700 !important;
	font-size: 10.5px !important; letter-spacing: 0.03em;
	padding: 8px 14px 6px; margin: 4px 0 2px; line-height: 1.4;
}
.megamenu .column h3 { text-transform: uppercase; }
.megamenu u { text-decoration: none; } /* plain-header underline reads dated - drop it */

/* Clickable rows - three different legacy markup shapes (<a> inside <li>, <h2
   class="h2link"><a>, and the bare <h2 class="h2nlink"> variant) rendered as one
   consistent item: rounded hover pill, smooth transition instead of an instant
   color snap, small left indent shift on hover so it feels like it responds to you. */
.megamenu .column ul li a,
.megamenu .h2link,
.megamenu .h2link a,
.megamenu .h2nlink {
	color: var(--fd-ink) !important;
	font-size: 12.5px !important; font-weight: 500 !important;
	display: block; padding: 7px 14px; border-radius: 6px; text-decoration: none !important;
	border-bottom: none !important;
	transition: background-color 0.12s ease, color 0.12s ease, padding-left 0.12s ease;
}
/* Row dividers, deliberately and consistently - not the accident it was before.
   menu.css's `.column li { border-bottom: 1px solid #DEF1F5; }` only matches <li>
   wrapped items, so plain <ul><li><a> rows (e.g. Administration's Change password /
   Login history) got a pale-blue divider for free while <h2 class="h2link"> rows
   (e.g. every Calculators item) never had one at all - same visual language,
   inconsistent by markup shape rather than by design. This applies one border, in
   this file's own divider tone, to exactly one element per shape (the <a> for the
   <li> shape, the <h2> itself - not its inner <a> too - for the h2link shape) so
   nothing doubles up. */
.megamenu .column ul li a,
.megamenu .h2link,
.megamenu .h2nlink {
	border-bottom: 1px solid #F1EEE4 !important;
}
.megamenu .column ul li:last-child > a,
.megamenu .column .h2link:last-child {
	border-bottom: none !important;
}
/* menu.css has `.column li { width: 160px; ... }` - a leftover from the old fixed
   3-column layout, meant to keep items from stretching wider than a 180px column.
   Nothing in this file overrode `width` on li at all, so with the panel now much
   wider that rule silently forced a text-wrapping ~160px box on every item, at any
   nesting depth (it matches the flyout's own <li>s too, hence the same wrapping
   there). width:auto lets each item fill however much its container actually is. */
.megamenu .column ul li { padding-bottom: 1px; width: auto !important; border-bottom: none !important; } /* jkmegamenu.css's 5px felt loose against the new tighter rows; border-bottom:none clears menu.css's own <li>-level divider so it doesn't double up with the one now set on the <a> itself */
.megamenu .column ul li a:hover,
.megamenu .h2link a:hover,
.megamenu .h2nlink:hover {
	background: var(--fd-blue-tint) !important; color: var(--fd-blue-dark) !important;
	padding-left: 18px;
}

/* .caret was originally just the old sidebar tree's (#bankCisUL) black ::before
   triangle bullet, so hiding the whole span seemed safe - but here it's reused as
   the actual TEXT WRAPPER for most items (<span class="caret">Loan application</span>),
   not just a bullet. display:none on the span deleted the item's label along with
   the bullet. Targeting only the ::before glyph removes the dated triangle while
   leaving the span (and whatever text is inside it) fully visible. */
.megamenu .caret::before { content: none !important; }
.megamenu .caret { cursor: inherit; }

/* ---- Single-column menu + nested flyout submenus (Administration menu) ----
   jkmegamenu.css's .column is float:left/width:180px, meant for several columns
   side by side - with only one column now, override it to fill naturally. NOTE:
   this deliberately does NOT set any overflow here. Setting only overflow-y (as an
   earlier version of this did, to cap panel height) makes the browser compute
   overflow-x as "auto" too, per the CSS spec's rule that a "visible" axis paired
   with a non-visible one becomes auto - and an ancestor that clips on EITHER axis
   also clips any absolutely-positioned flyout escaping via left:100%, no matter how
   far off that ancestor's edge the flyout is meant to sit. That silently cut every
   flyout down to a sliver. Left unconstrained; the flyout content is short enough
   in practice that this hasn't needed revisiting. */
/* Every menu is single-column now (Administration and Help - the only two that
   ever had more than one .column side by side - were both flattened into one), so
   this applies to .megamenu generally rather than staying opt-in per panel. */
.megamenu { width: 320px; }
.megamenu .column {
	float: none !important; width: auto !important; margin-right: 0 !important;
}

/* A small label-only row to separate the two plain actions (Change password,
   Login history) from the reference material below - not clickable, just a
   section break so the flyout triggers don't read as more account actions. */
/* No border-top here: the item right above this (e.g. "Login history") already
   gets its own bottom divider from the general item rule, sitting just 1px away -
   adding a second line here just doubled it up. This relies on that existing line
   for the visual break and only adds the vertical gap + label. */
.fd-menu-divider {
	margin-top: 6px; padding-top: 10px !important;
}
.fd-menu-divider span {
	font-size: 10px; font-weight: 700; color: var(--fd-slate-400); text-transform: uppercase;
	letter-spacing: 0.06em; padding: 0 14px;
}

/* A flyout trigger row (e.g. "Bare Act & Others", "Referral website") gets an
   icon, a right-pointing chevron to signal it opens a further list, and its
   <ul class="fd-flyout"> opens to the right on hover with a fade+slide - pure CSS,
   no dependency on jkmegamenu.js, so it works the same way regardless of how the
   outer panel itself is shown/hidden. */
.fd-has-flyout { position: relative; }
.fd-has-flyout > a {
	display: flex !important; align-items: center; gap: 9px;
	position: relative; padding-right: 28px !important;
}
.fd-has-flyout > a svg { color: var(--fd-slate-400); transition: color 0.12s ease; }
.fd-has-flyout:hover > a svg { color: var(--fd-blue); }
.fd-has-flyout > a::after {
	content: "\203A"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
	font-size: 16px; line-height: 1; color: var(--fd-slate-400);
	transition: transform 0.14s ease, color 0.12s ease;
}
.fd-has-flyout:hover > a::after { color: var(--fd-blue-dark); transform: translateY(-50%) translateX(2px); }
.fd-flyout {
	list-style: none; margin: 0; padding: 8px 6px;
	position: absolute; top: -9px; left: 100%; z-index: 20;
	width: 300px; max-height: 60vh; overflow-y: auto; overflow-x: hidden;
	background: #FFFFFF !important; border: 1px solid var(--fd-card-border);
	border-radius: 10px; box-shadow: 0 16px 40px rgba(29,34,38,0.20);
	visibility: hidden; opacity: 0; pointer-events: none;
	transform: translateX(-6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.fd-has-flyout:hover > .fd-flyout {
	visibility: visible; opacity: 1; pointer-events: auto;
	transform: translateX(0);
}
.fd-flyout li { padding: 0; width: auto !important; }
.fd-flyout-heading {
	font-size: 10px !important; font-weight: 700 !important; color: var(--fd-slate-400) !important;
	text-transform: uppercase; letter-spacing: 0.06em;
	padding: 6px 14px 8px !important; margin-bottom: 2px; border-bottom: 1px solid var(--fd-card-border);
}

/* Help > References: opens to the LEFT because Help is the right-most nav item and a
   300px flyout to its right would run off the viewport. Also adds the non-link rows
   (plain circular names) and sub-headings that flyout carries. */
.fd-flyout.fd-flyout-left { left: auto; right: 100%; transform: translateX(6px); }
.fd-has-flyout:hover > .fd-flyout.fd-flyout-left { transform: translateX(0); }
.fd-flyout-subhead {
	font-size: 12px; font-weight: 700; color: var(--fd-slate-600);
	padding: 10px 14px 4px !important; line-height: 1.35;
}
.fd-flyout-static {
	font-size: 12px; color: var(--fd-slate-400); padding: 4px 14px !important;
}

/* ---- Form components (Repayment Schedule and, going forward, any other
   dense data-entry page) ---- */
.fd-form-card { padding: 22px 24px; }
.fd-form-card + .fd-form-card { margin-top: 16px; }
/* Matches the panel-heading treatment bankhome.jsp's own dashboard cards already
   use (id="idRegisterHeadingText"/"idRegisterHeadingSub", inline-styled there,
   17px/700/slate-600 + 12px/#7A776E) rather than a size/color invented fresh for
   this page - the two were drifting apart (15px/slate-800 vs 17px/slate-600). */
.fd-card-head { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--fd-slate-600); margin: 0 0 4px; }
.fd-card-sub { font-size: 12px; color: #7A776E; margin: 0 0 18px; }
.fd-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px 20px; }
.fd-hint { font-size: 11.5px; color: var(--fd-slate-400); margin-top: 6px; }

.fd-select {
	height: 44px; width: 100%; border: 1px solid var(--fd-input-border); border-radius: 8px;
	background: #FFFFFF; padding: 0 36px 0 13px; font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 14px; color: var(--fd-ink); box-sizing: border-box; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364707D' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 13px center;
}
.fd-date-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2364707D' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 13px center; padding-right: 38px;
}
.fd-input[readonly] { background: var(--fd-input-bg); color: var(--fd-slate-600); }

/* Custom checkbox visual over a real <input type="checkbox">: the real input stays
   in the DOM (so name/id/onclick/checked/required all keep working exactly as
   before) but is visually hidden and made to fill the box that shows the check -
   clicking anywhere in that box still hits the real input. */
.fd-checkbox-row { display: flex; align-items: center; gap: 9px; min-height: 44px; }
.fd-checkbox-row label { font-size: 13px; color: var(--fd-slate-800); cursor: pointer; }
.fd-checkbox-box {
	position: relative; width: 18px; height: 18px; flex-shrink: 0;
}
.fd-checkbox-box input[type="checkbox"] {
	position: absolute; inset: 0; width: 18px; height: 18px; margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.fd-checkbox-box .fd-checkbox-visual {
	position: absolute; inset: 0; width: 18px; height: 18px; border-radius: 5px;
	border: 1.5px solid var(--fd-input-border); background: #FFFFFF; pointer-events: none;
	display: flex; align-items: center; justify-content: center;
}
.fd-checkbox-box .fd-checkbox-visual svg { opacity: 0; }
.fd-checkbox-box input[type="checkbox"]:checked ~ .fd-checkbox-visual {
	background: var(--fd-blue); border-color: var(--fd-blue);
}
.fd-checkbox-box input[type="checkbox"]:checked ~ .fd-checkbox-visual svg { opacity: 1; }

/* Dynamic add/delete data table (Graded instalments, Stage-by-stage disbursement) */
.fd-data-table { width: 100%; border-collapse: collapse; }
.fd-data-table th {
	font-size: 10.5px; font-weight: 700; color: var(--fd-blue-dark); text-transform: uppercase;
	letter-spacing: 0.04em; text-align: left; padding: 9px 12px; background: var(--fd-blue-tint);
}
.fd-data-table th:first-child { border-radius: 7px 0 0 7px; }
.fd-data-table th:last-child { border-radius: 0 7px 7px 0; text-align: center; }
.fd-data-table td { padding: 7px 12px; border-bottom: 1px solid #F1EEE4; }
.fd-data-table td:last-child { text-align: center; }
.fd-row-input {
	height: 32px; width: 100%; border: 1px solid var(--fd-input-border); border-radius: 6px;
	background: var(--fd-input-bg); padding: 0 10px; font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 12.5px; text-align: right; box-sizing: border-box;
}
.fd-row-delete-btn {
	width: 26px; height: 26px; border-radius: 6px; border: 1px solid #EAC6C1; background: #FFFFFF;
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
/* The shared reorderRows() (js_graded.js, used by 6 pages, kept unmodified) always
   hardcodes a row's input className back to the legacy "textfield1Digit" whenever it
   renumbers rows after a delete - so a row's boxes would revert to unstyled legacy
   inputs the moment any OTHER row above it in the Graded instalments table is
   deleted. Scoping the same look to that legacy class name, but only inside this
   table, keeps every row visually identical to .fd-row-input regardless of which
   className the shared function last set - no JS touched. */
#tblgraded input.textfield1Digit {
	height: 32px; width: 100%; border: 1px solid var(--fd-input-border); border-radius: 6px;
	background: var(--fd-input-bg); padding: 0 10px; font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 12.5px; text-align: right; box-sizing: border-box;
}

/* ---- Page header: breadcrumb trail + large title + brand accent underline ----
   Reusable across every modernized page - see repaymentschedule.jsp for the
   reference markup:
     <div class="fd-page-header">
       <div class="fd-breadcrumb"><a href="...">Section</a><span class="fd-crumb-sep">&#8250;</span><span class="current">Page name</span></div>
       <h1 class="fd-page-title">Page name</h1>
       <span class="fd-page-title-accent"></span>
     </div>
   Keep using this instead of one-off inline heading styles so every page's title
   block matches. */
.fd-page-header { margin-bottom: 26px; }
.fd-breadcrumb {
	display: flex; align-items: center; gap: 7px;
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
	font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--fd-slate-400);
	margin-bottom: 14px;
}
/* Tonal, not blue: blue elsewhere in the app marks an actual actionable link/CTA -
   using it on a breadcrumb segment makes wayfinding metadata compete with real
   links on the page for attention. Weight/darkness carries the hierarchy instead
   (mid-gray parent -> ink hover -> bold ink current), color only shows up as the
   hover affordance.
   Parent crumb uses slate-600 (not slate-400 - too faint to read comfortably at
   this size/weight; not black - see below) - the same gray already used for
   .fd-card-head/Dashboard's panel headings, so the breadcrumb's "secondary text"
   tier matches the rest of the page instead of introducing a fourth gray.
   !important is load-bearing here: applicationStyles.css has a:link{color:black}
   (type+pseudo-class, specificity 0-1-1) which TIES with the plain
   ".fd-breadcrumb a" rule below (class+type, also 0-1-1) - and that file happens
   to be linked after finalDesign.css in this page's <head>, so on a tie it won
   the rest-state color outright, rendering the link pure black instead of the
   intended gray (confirmed live via document.styleSheets). */
.fd-breadcrumb a { color: var(--fd-slate-600) !important; }
.fd-breadcrumb a:hover { color: var(--fd-ink) !important; text-decoration: underline; }
.fd-breadcrumb .fd-crumb-sep { color: var(--fd-muted); font-size: 11px; }
.fd-breadcrumb .current { color: var(--fd-ink); font-weight: 700; }
/* Page title: the one heading on the page that's allowed to look like a
   headline rather than UI chrome. Every label/button/breadcrumb on the page is
   Plus Jakarta Sans - using it for the title too (the original version of this
   class) left the title looking like a bigger, bolder body-text string with no
   real presence. Libre Baskerville is the one place BankCIS already breaks from
   Plus Jakarta Sans - the "BankCIS" wordmark itself, in the header. Reusing it
   here for the title, and nowhere else, ties the page's headline back to the
   brand mark instead of introducing a third typeface. menu.css's global h1{}
   rule (see finalDesign.css history) makes explicitly declaring font-family
   here load-bearing, not optional - do not drop it. */
.fd-page-title {
	font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
	font-size: 31px; font-weight: 700; color: var(--fd-ink);
	letter-spacing: -0.005em; line-height: 1.25; margin: 0;
}
.fd-page-title-accent {
	display: block; width: 56px; height: 4px; border-radius: 2px; margin-top: 16px;
	background: linear-gradient(90deg, var(--fd-blue) 0%, var(--fd-gold-light) 100%);
}
.fd-chip {
	background: #FFFFFF; border: 1px solid var(--fd-card-border); border-radius: 999px;
	padding: 6px 14px; font-size: 11.5px; color: var(--fd-slate-600);
}

/* ---- Repayment Schedule: conditional-section display override ----
   repaymentschedule.jsp's existing (unmodified) JS toggles these elements between
   "none" and legacy values like "table-row"/"block" - values that made sense for
   the old <tr>-based layout but not for these divs' new flex/grid roles. Since a
   NON-important inline style (what .style.display="..." always produces) loses to
   an !important rule in an external stylesheet regardless of which came later, each
   element below gets an unconditional !important display (the layout it actually
   needs now), with a second, more specific rule that re-hides it only when the JS's
   inline style attribute literally contains "display: none" - matching the exact
   "property: value;" text serialization browsers produce for element.style.display
   assignments (confirmed live: e.g. "z-index: 1013; ...; display: block;"). No JS
   changes needed; the existing show/hide calls keep working exactly as before, they
   just now toggle between "hidden" and "the new layout" instead of "hidden" and
   "table-row". */
#idTrInterestCapitalise,
#idTdAsOnDate,
#idTdArrears,
#idTrInstallments,
#showStageDisburseRepayment { display: block !important; }
#idCompoundRestdiv,
#idTrHigherInterestRate { display: block !important; }
#idTrGraded { display: block !important; }
#idAccuInterest { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; }
#idBtProcess { display: inline-flex !important; }
#idTrInterestCapitalise[style*="display: none"],
#idCompoundRestdiv[style*="display: none"],
#idTrHigherInterestRate[style*="display: none"],
#idTrGraded[style*="display: none"],
#idAccuInterest[style*="display: none"],
#idTdAsOnDate[style*="display: none"],
#idTdArrears[style*="display: none"],
#idTrInstallments[style*="display: none"],
#idBtProcess[style*="display: none"],
#showStageDisburseRepayment[style*="display: none"] { display: none !important; }

/* sx:datetimepicker (dojo) renders its own text input with a fixed inline
   style="width: 7em" that always won against the .fd-input class's width:100%
   (an inline style beats a class rule with no !important). At 11px/.date's old
   font that fit "dd/mm/yyyy"; at this design's larger Plus Jakarta Sans font it
   clipped the value. Widening it here (scoped to just these two widgets, !important
   to beat the inline style) is a display-only fix - the widget's own value,
   dojo.dtDateOfDisb hidden field, and calendar popup are all untouched. */
#idDateOfDisbursement input[dojoattachpoint="inputNode"],
#idAsOnDate input[dojoattachpoint="inputNode"] {
	width: 130px !important;
	height: 40px !important;
	box-sizing: border-box !important;
}

/* ---- Footer (footer_v2.jsp - see that file, not footer.jsp, which ~250
   not-yet-migrated pages still use unchanged). Quiet by design: a thin top
   border instead of a filled bar, copyright text muted, FiscalLogix mark small
   and boxed the same way Login's hero panel boxes it, just re-toned for a light
   background instead of the dark hero. */
.fd-footer { background: #FFFFFF; border-top: 1px solid var(--fd-card-border); margin-top: 8px; }
.fd-footer-inner {
	max-width: 1040px; margin: 0 auto; padding: 16px 20px;
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
	font-family: 'Plus Jakarta Sans', sans-serif;
}
.fd-footer-copy { font-size: 11.5px; color: var(--fd-muted); }
.fd-footer-powered { display: flex; align-items: center; gap: 8px; }
.fd-footer-powered > span { font-size: 10px; font-weight: 600; letter-spacing: 0.03em; color: var(--fd-muted); }
.fd-footer-logo-box {
	border: 1.5px solid var(--fd-gold-light); border-radius: 4px;
	padding: 3px 7px; display: inline-flex; align-items: center; background: #FFFFFF;
}

/* ---- Guided demo tour popup (demoTour.jsp) - approved mockup: 4 slides,
   Welcome (serif title, guide link, Skip/Start) then 3 instruction slides
   (recreated real-component "screenshot", instructions, prev/dot/next nav),
   plus a closing slide. Reuses .fd-btn/.fd-card tokens throughout - no new
   colors invented beyond what's already in :root. */
.fd-demotour-overlay {
	position: fixed; inset: 0; z-index: 2000; background: rgba(30,38,46,0.55);
	display: flex; align-items: center; justify-content: center;
}
.fd-demotour-modal {
	position: relative; width: 600px; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px);
	overflow-y: auto; background: #FFFFFF; border-radius: 10px;
	box-shadow: 0 24px 64px rgba(20,24,28,0.35); padding: 36px 40px 32px;
	font-family: 'Plus Jakarta Sans', sans-serif;
}
.fd-demotour-modal.fd-demotour-wide { width: 680px; padding: 32px 36px 28px; }
.fd-demotour-close {
	position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 999px;
	border: 1px solid var(--fd-card-border); background: #FFFFFF; display: flex; align-items: center;
	justify-content: center; cursor: pointer;
}
.fd-demotour-close:hover { border-color: var(--fd-slate-400); }
.fd-demotour-eyebrow {
	font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--fd-blue); margin-bottom: 14px;
}
.fd-demotour-title {
	font-family: 'Libre Baskerville', Georgia, serif; font-size: 26px; font-weight: 700;
	color: var(--fd-slate-800); letter-spacing: -0.005em; line-height: 1.3; margin: 0 0 14px;
}
.fd-demotour-body { font-size: 13.5px; line-height: 1.65; color: #41403A; margin: 0 0 20px; }
.fd-demotour-guide-link {
	display: flex; align-items: center; gap: 12px; border: 1px solid var(--fd-input-border);
	border-radius: 10px; padding: 12px 14px; margin-bottom: 24px;
}
.fd-demotour-guide-link:hover { border-color: var(--fd-slate-400); }
.fd-demotour-guide-icon {
	width: 34px; height: 34px; border-radius: 8px; background: var(--fd-blue-tint);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fd-demotour-guide-title { font-size: 13px; font-weight: 700; color: var(--fd-ink); }
.fd-demotour-guide-sub { font-size: 11.5px; color: #7A776E; }
.fd-demotour-footer-welcome, .fd-demotour-footer-common {
	display: flex; align-items: center; justify-content: space-between;
}
.fd-demotour-skip { font-size: 12.5px; font-weight: 600; color: var(--fd-slate-600); }
.fd-demotour-skip:hover { color: var(--fd-ink); }
.fd-demotour-shot {
	border: 1px solid var(--fd-card-border); border-radius: 10px; overflow: hidden; margin-bottom: 20px;
}
.fd-demotour-step-title { font-size: 18px; font-weight: 800; color: var(--fd-ink); letter-spacing: -0.01em; margin: 0 0 8px; }
.fd-demotour-dots { display: flex; align-items: center; gap: 7px; }
.fd-demotour-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--fd-input-border); border: none; padding: 0; cursor: pointer; }
.fd-demotour-dot.active { width: 18px; background: var(--fd-blue); }
.fd-demotour-nav-btn {
	width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--fd-input-border);
	background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.fd-demotour-nav-btn.fd-demotour-nav-primary {
	border: none; background: var(--fd-blue); box-shadow: 0 4px 14px rgba(36,95,122,0.30);
}
.fd-demotour-nav-btn:disabled { visibility: hidden; }

/* ---- Loan Home layout: sidebar (summary cards, stacked) + action groups
   (loanhome.jsp / urlLoanHome.action) ----
   Design C: an earlier horizontal wrapping-grid of group cards (Design A)
   left ragged gaps whenever groups had very different tile counts - the
   grid couldn't backfill a short card's leftover space from the next row.
   Groups are still stacked full-width by default, EXCEPT two ADJACENT
   groups whose visible tile counts together add up to 4 or less (only
   known after Struts' conditions resolve, so this is decided by
   fdActInit(), bottom of loanhomefunctions.jsp) get .fd-act-group-half
   instead and sit side by side - sized proportionally to how many tiles
   each actually has (a 1-button group next to a 3-button one doesn't get
   an even 50/50 split), rather than each wasting a full lonely row. Two
   paired groups are always close in height (never more than one tile-row
   each), so this doesn't reintroduce Design A's cross-group ragged-height
   problem - only a genuinely large group ever forces its own row. A
   single long label CAN wrap to two lines in the narrower tile a 3-in-a-
   pair group gets (more likely since the 12.5px label bump), so
   .fd-act-groups uses align-items:stretch to keep the two paired cards
   the same height rather than letting the shorter one end early.
   Sidebar/actions is a fixed ~37/63 split (not content-driven - an earlier
   content-sized "auto" column left the sidebar as little as ~20% on a wide
   screen, per review feedback; the actions side was later widened slightly
   from 40/60 to give the 12.5px tile labels more room to sit on one line
   without cramping the customer card). Tiles are compact icon-left/label-right
   rows (not icon-top/label-below squares) and capped at 4 per row via a
   real CSS grid (fdActInit() sets the exact column count for a paired
   group's own tile count), both to fit more of a busy group like Sanction
   & compliance (8 tiles) on screen without scrolling. */
.fd-lh-layout { display: grid; grid-template-columns: 1.85fr 3.15fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .fd-lh-layout { grid-template-columns: 1fr; } }
.fd-lh-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.fd-act-groups { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
/* Each group card carries its own accent color via --grp-accent (set inline,
   per group, in loanhomefunctions.jsp) - a faint tint of that color on both
   the card and its resting tiles gives every group a distinct identity at a
   glance, reusing the same group->color mapping the reviewed mockup used. */
.fd-act-group-card {
	/* min-width:0 - without it a flex item refuses to shrink below its own
	   content's min-content width, so a half-width card whose tile labels
	   are long enough would silently grow back past its assigned basis.
	   box-sizing:border-box - without it flex-basis (a content-box size by
	   default) gets this element's own padding+border (34px) added back on
	   top of the pixel width fdActInit() computes, so two "half" cards
	   together end up wider than the container and never actually fit
	   on the same row - the exact bug hit live getting this pairing
	   feature working (confirmed by measuring flex-basis vs the rendered
	   border-box width directly: 290px computed vs 324px rendered). */
	padding: 14px 16px; flex: 1 1 100%; min-width: 0; box-sizing: border-box;
	background: color-mix(in srgb, var(--grp-accent, var(--fd-blue)) 7%, white);
	border-color: color-mix(in srgb, var(--grp-accent, var(--fd-blue)) 28%, var(--fd-card-border));
}
/* flex-basis is set as a computed PIXEL value by fdActInit() (bottom of
   loanhomefunctions.jsp), not a CSS percentage - measured empirically that
   a percentage flex-basis silently fails to resolve against this specific
   container (its width comes from a CSS Grid fr-track through a plain
   wrapper div; every item ends up sized by its own content instead of the
   intended 50/50 split, so cards never actually pair up despite every
   flex property otherwise being correct). This rule is just the fallback
   for the instant before JS runs on load. */
.fd-act-group-card.fd-act-group-half { flex: 0 1 auto; }
.fd-act-group-label { font-size: 10.5px; font-weight: 700; color: var(--fd-slate-600); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 10px; }
/* A paired (fd-act-group-half) group's own column count is set inline by
   fdActInit() to match its actual tile count (1, 2 or 3) - not a fixed
   repeat(2,...) - since a proportionally-sized pair can now be any split
   (e.g. 1-and-3), not always an even 2-and-2. */
.fd-act-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fd-act-tile {
	/* min-width:0 for the same reason as .fd-act-group-card above - a grid
	   item defaults to min-width:auto (its own content's min-content), so a
	   tile with a long label could otherwise force its 1fr track wider than
	   its fair share instead of just wrapping the label text. */
	display: flex; flex-direction: row; align-items: center; gap: 10px; min-width: 0;
	min-height: 0; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--fd-card-border);
	background: color-mix(in srgb, var(--grp-accent, var(--fd-blue)) 3%, white); color: var(--fd-ink) !important; cursor: pointer; text-align: left;
	transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.fd-act-tile-icon {
	width: 24px; height: 24px; border-radius: 7px; background: var(--fd-blue-tint); color: var(--fd-blue);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	transition: background .14s ease, color .14s ease;
}
.fd-act-tile-icon svg { width: 13px; height: 13px; }
.fd-act-tile-label { font-size: 12.5px; font-weight: 700; line-height: 1.3; min-width: 0; }
/* Lighter than a solid fill (per review feedback) but still a clear step up
   from the 3%/7% resting tints, with a solid-color border to keep the edge
   crisp at that lower fill - reads as clearly different from the tinted
   card behind it in every group's own color, not a fixed blue that would
   nearly vanish against a blue-accented group. */
.fd-act-tile:hover { border-color: var(--grp-accent, var(--fd-blue)); background: color-mix(in srgb, var(--grp-accent, var(--fd-blue)) 20%, white); transform: translateY(-2px); box-shadow: 0 6px 14px color-mix(in srgb, var(--grp-accent, var(--fd-blue)) 20%, transparent); }
.fd-act-tile:hover .fd-act-tile-icon { background: var(--grp-accent, var(--fd-blue)); color: #FFFFFF; }
.fd-act-tile.fd-act-danger .fd-act-tile-icon { background: var(--fd-danger-bg); color: var(--fd-danger); }
.fd-act-tile.fd-act-danger:hover { border-color: var(--fd-danger); background: var(--fd-danger-bg); box-shadow: 0 6px 14px rgba(176,72,63,0.16); }
.fd-act-tile.fd-act-danger:hover .fd-act-tile-icon { background: var(--fd-danger); color: #FFFFFF; }
.fd-act-tile.fd-act-maroon { background: var(--fd-maroon); border-color: var(--fd-maroon); color: #FFFFFF !important; }
.fd-act-tile.fd-act-maroon .fd-act-tile-icon { background: rgba(255,255,255,0.18); color: #FFFFFF; }
.fd-act-tile.fd-act-maroon:hover { box-shadow: 0 8px 16px rgba(122,31,61,0.35); }
/* Matches applicationStyles.css's real .unselectable exactly: greyed out, not-allowed
   cursor, pointer-events:none (genuinely unclickable) - a real ENABLE/DISABLE state,
   not hide/show. Today only "Import data" uses this, when blCompromiseNpa is true -
   still visible, just inert, same href as the enabled tile. */
.fd-act-tile.fd-act-disabled { background: #EEEEEE !important; border-color: #DDDDDD !important; color: #9A9A9A !important; cursor: not-allowed !important; pointer-events: none; }
.fd-act-tile.fd-act-disabled .fd-act-tile-icon { background: #E2E2E2; color: #9A9A9A; }
.fd-act-disabled-tag { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #9A9A9A; display: block; }
.fd-act-tile-select { display: flex; flex-direction: column; gap: 6px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--fd-card-border); background: #FFFFFF; }
.fd-act-tile-select select { width: 100%; height: 28px; border: 1px solid var(--fd-input-border); border-radius: 6px; font-family: inherit; font-size: 11px; padding: 0 6px; background: var(--fd-input-bg); }
.fd-act-empty-hint { padding: 22px; text-align: center; color: var(--fd-muted); font-size: 12px; background: var(--fd-input-bg); border-radius: 8px; }

/* ---- Customer Home (customerhome.jsp / urlCustomerHome.action) ----
   Customer card + Actions side by side at a true 50/50 (a plain grid split
   is enough here - unlike Loan Home's action tiles, there's no post-load
   visibility/count logic that only resolves after Struts renders, so no
   equivalent of that page's percentage-resolution/box-sizing trap to route
   around), loan proposals table full width underneath both. */
.fd-ch-top { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
@media (max-width: 760px) { .fd-ch-top { grid-template-columns: 1fr; } }
.fd-ch-banner { padding: 22px 24px; }
.fd-ch-id { display: flex; gap: 16px; align-items: center; }
.fd-ch-avatar { width: 52px; height: 52px; border-radius: 13px; background: linear-gradient(150deg, var(--fd-blue), var(--fd-blue-dark)); color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fd-ch-name { font-size: 18px; font-weight: 700; color: var(--fd-ink); }
.fd-ch-sub { font-size: 11px; color: var(--fd-slate-600); margin-top: 2px; }
.fd-ch-facts { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--fd-card-border); }
.fd-ch-fact-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fd-slate-600); margin-bottom: 3px; }
.fd-ch-fact-val { font-size: 12.5px; font-weight: 600; color: var(--fd-ink); align-items: flex-start; }
.fd-ch-fact-val svg { margin-top: 2px; }
.fd-ch-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fd-slate-600); margin-bottom: 12px; }
.fd-ch-actions-card { padding: 18px 20px; background: color-mix(in srgb, var(--fd-blue) 7%, white); border-color: color-mix(in srgb, var(--fd-blue) 28%, var(--fd-card-border)); }
.fd-ch-actions-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 520px) { .fd-ch-actions-tiles { grid-template-columns: 1fr; } }
.fd-ch-act-tile {
	display: flex; flex-direction: row; align-items: center; gap: 12px; min-width: 0;
	padding: 13px 16px; border-radius: 10px; border: 1px solid var(--fd-card-border);
	background: color-mix(in srgb, var(--fd-blue) 3%, white); color: var(--fd-ink) !important;
	cursor: pointer; text-align: left; box-sizing: border-box;
	transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.fd-ch-act-tile-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--fd-blue-tint); color: var(--fd-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 0; transition: background .14s ease, color .14s ease; }
.fd-ch-act-tile-icon svg { width: 16px; height: 16px; }
.fd-ch-act-tile-label { font-size: 12.5px; font-weight: 700; line-height: 1.3; min-width: 0; }
.fd-ch-act-tile:hover { border-color: var(--fd-blue); background: color-mix(in srgb, var(--fd-blue) 20%, white); transform: translateY(-2px); box-shadow: 0 6px 14px color-mix(in srgb, var(--fd-blue) 20%, transparent); }
.fd-ch-act-tile:hover .fd-ch-act-tile-icon { background: var(--fd-blue); color: #FFFFFF; }

/* Additional security table: centred "Value" group heading + column separators */
.fd-skin table td.fd-valh { text-align: center !important; }
.fd-skin table tr.tableHead td.fd-sepl { border-left: 1px solid #B9D3DF !important; }
.fd-skin table tr:not(.tableHead) td.fd-sepl { border-left: 1px solid rgba(36, 95, 122, 0.10) !important; }
/* Numbers in the "ii. Primary security as additional security" rows sit right-aligned, like the divLinkDigit values above them */
.fd-skin table td.digitFormat { text-align: right; }
/* Existing-charges wrapper cell: no right padding, so its blue heading bar runs the full width */
.fd-skin td:has(> [id^="idDivExistingCharges"]) { padding-right: 0 !important; }
/* Collateral table: Present / Proposed centred (headings and values) */
.fd-skin table td.fd-numh.fd-ctr, .fd-skin table td.fd-ctr, .fd-skin table td.fd-ctr .divLinkDigit { text-align: center !important; }
/* Emphasised "Yes" (replaces the legacy blue text): gold pill with a check mark */
.fd-yes-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--fd-amber-bg); color: var(--fd-amber-text); border: 1px solid var(--fd-gold); box-shadow: 0 1px 0 rgba(184, 137, 58, .25); }
.fd-yes-chip::before { content: "\2713"; font-size: 11px; font-weight: 800; color: var(--fd-gold); }

/* Zone 5 (co-obligants / liabilities / other-bank facilities) */
.fd-skin table td.fd-r { text-align: right !important; }
.fd-zone-sub.fd-zone-sub2 { font-size: 10px; font-weight: 700; color: var(--fd-slate-400); margin: 6px 0 6px; }
.fd-skin .fd-zone-sub .fd-info-btn { margin-left: 5px; vertical-align: middle; }

/* Legacy red text inside dashboard sections -> design system (red kept only for real alerts/messages) */
.fd-skin font[color="red"], .fd-skin font[color="Red"], .fd-skin font[color="#FF0000"],
.fd-skin [style*="color: red"], .fd-skin [style*="color:red"], .fd-skin [style*="color: Red"] { color: var(--fd-blue-dark) !important; }
.fd-skin #tblotherBanksProposed .divLinkDigit, .fd-skin #tblotherBanksExisting .divLinkDigit { padding-right: 0 !important; }

/* ---- Committee Dashboard: credit exposure widget (top), headroom bars, plain figures (Zone 6) ---- */
.fd-topgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; margin: 0 0 16px; }
.fd-topgrid .fd-kpi-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; align-content: stretch; }
.fd-topgrid .fd-kpi-row.fd-kpi-stack .fd-kpi { flex: none; }
.fd-xw { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-content: center; background: #FFFFFF; border: 1px solid var(--fd-card-border); border-radius: 12px; padding: 12px 16px; cursor: pointer; box-shadow: 0 1px 2px rgba(29, 34, 38, .05); }
.fd-xw:hover { border-color: var(--fd-blue-light); }
.fd-xw:focus-visible { outline: 2px solid var(--fd-blue); outline-offset: 2px; }
.fd-xw.fd-xw-over { border-color: var(--fd-danger-border); }
.fd-xw-loading { font-size: 12px; color: var(--fd-slate-400); }
.fd-xw-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.fd-xw-hd .k { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fd-slate-600); display: flex; align-items: center; gap: 6px; }
.fd-xw-hd .v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--fd-ink); }
.fd-xw-go { font-size: 12px; font-weight: 700; color: var(--fd-blue-dark); white-space: nowrap; align-self: center; }
.fd-xw-go::after { content: " \203A"; }
.fd-xw-cols { grid-column: 1 / -1; display: grid; gap: 7px; }
.fd-xw-c { display: grid; grid-template-columns: 128px minmax(40px, 1fr) auto; gap: 12px; align-items: center; font-size: 11.5px; }
.fd-xw-c .t { font-weight: 600; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.fd-xw-c .f { font-variant-numeric: tabular-nums; color: var(--fd-slate-600); text-align: right; white-space: nowrap; }
.fd-xw-c .f b { color: var(--fd-ink); font-weight: 700; }
.fd-xw-c .fd-xb-track { height: 6px; }
.fd-xw .fd-info-btn, .fd-xtile .fd-info-btn, .fd-xbar .fd-info-btn, .fd-fig .fd-info-btn, .fd-mem-h .fd-info-btn, .fd-remarks .fd-info-btn { margin-left: 4px; vertical-align: middle; }
/* pill dot */
.fd-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--fd-green); margin-right: 7px; vertical-align: 1px; }
.fd-dot.fd-dot-bad { background: var(--fd-danger); }
.fd-dot[hidden] { display: none; }
.fd-stage-sum { font-size: 12px; color: var(--fd-slate-600); margin-right: 8px; }
.fd-stage-card.fd-stage-flash { outline: 3px solid var(--fd-blue-light); outline-offset: 2px; }
/* Zone 6 */
.fd-xtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 6px; }
.fd-xtile { border: 1px solid var(--fd-card-border); border-radius: 10px; padding: 12px 14px; background: var(--fd-bg); }
.fd-xtile .k { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fd-slate-600); display: flex; align-items: center; }
.fd-xtile .v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 4px; line-height: 1.15; color: var(--fd-ink); }
.fd-xtile.fd-xtile-over { border-color: var(--fd-danger-border); background: var(--fd-danger-bg); }
.fd-na { color: var(--fd-slate-400); font-weight: 600; }
.fd-xbars { display: grid; gap: 16px; margin: 4px 0 6px; }
.fd-xbar { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr) 270px; gap: 6px 20px; align-items: center; }
.fd-xb-lab { font-weight: 600; font-size: 12.5px; }
.fd-xb-track { height: 12px; border-radius: 999px; background: #EEF2F4; position: relative; overflow: hidden; }
.fd-xb-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--fd-blue); }
.fd-xbar-over .fd-xb-fill, .fd-xb-fill.bad { background: var(--fd-danger); }
.fd-xb-num { font-variant-numeric: tabular-nums; display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.fd-xb-m { color: var(--fd-slate-600); }
.fd-xb-exc { color: var(--fd-danger); font-weight: 700; font-size: 12px; }
.fd-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--fd-card-border); border-radius: 10px; overflow: hidden; }
.fd-fig { padding: 11px 14px; border-left: 1px solid #F1EEE4; }
.fd-fig:first-child { border-left: 0; }
.fd-fig .k { font-size: 10.5px; color: var(--fd-slate-600); line-height: 1.35; }
.fd-fig .v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 3px; }
.fd-fig.fd-fig-total { background: var(--fd-blue-tint); }
.fd-members { border: 1px solid var(--fd-card-border); border-radius: 10px; overflow: hidden; }
.fd-mem { display: grid; grid-template-columns: minmax(0, 260px) repeat(4, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid #F1EEE4; font-size: 12.5px; }
.fd-mem .nm { font-weight: 600; }
.fd-mem .nm small { display: block; color: var(--fd-slate-400); font-weight: 500; font-size: 11px; }
.fd-mem .r { text-align: right; font-variant-numeric: tabular-nums; }
.fd-mem .r.t { font-weight: 700; }
.fd-mem.fd-mem-h { background: var(--fd-blue-tint); border-top: 0; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fd-blue-dark); padding-block: 9px; }
.fd-mem.fd-mem-h span { line-height: 1.3; }
.fd-mem.fd-mem-tot { background: var(--fd-bg); font-weight: 700; }
.fd-minfo { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 11.5px; color: var(--fd-slate-600); padding-top: 2px; }
.fd-minfo b { color: var(--fd-ink); font-weight: 600; }
.fd-figs + .fd-minfo { margin-top: 8px; }
.fd-gfull { border: 1px solid var(--fd-card-border); border-radius: 10px; margin-top: 12px; }
.fd-gfull > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; color: var(--fd-blue-dark); font-size: 12.5px; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.fd-gfull > summary::after { content: "Show"; color: var(--fd-slate-600); }
.fd-gfull[open] > summary::after { content: "Hide"; }
.fd-remarks { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; border-top: 1px solid #F1EEE4; padding-top: 12px; margin-top: 14px; font-size: 12.5px; }
.fd-remarks .rk { font-weight: 600; color: var(--fd-slate-600); }
@media (max-width: 1000px) { .fd-topgrid { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .fd-xtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-xbar { grid-template-columns: 1fr; }
  .fd-xb-num { justify-content: flex-start; }
  .fd-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-remarks { grid-template-columns: 1fr; }
}
.fd-skin .fd-fig .v, .fd-skin .fd-xtile .v, .fd-fig .v, .fd-xtile .v { text-align: left !important; }
.fd-xbar { grid-template-columns: minmax(0, 320px) minmax(0, 1fr) 330px; }
.fd-xb-num { flex-wrap: nowrap; white-space: nowrap; }

/* exposure bars: light green within limit, amber when nearing (>= 80% of ceiling), red when exceeding */
.fd-xb-fill { background: #86C5A2; }
.fd-xbar-near .fd-xb-fill, .fd-xb-fill.near { background: #D9A24A; }
.fd-xbar-over .fd-xb-fill, .fd-xb-fill.bad { background: var(--fd-danger); }
.fd-xw.fd-xw-near { border-color: var(--fd-amber-border); }
.fd-xtile.fd-xtile-near { border-color: var(--fd-amber-border); background: var(--fd-amber-bg); }
.fd-dot.fd-dot-near { background: #D9A24A; }

/* ---- Delegated power widget (top-left, under the exposure widget) and Zone 1 cards ---- */
.fd-topleft { display: grid; gap: 12px; align-content: start; }
.fd-dw { grid-template-columns: minmax(0, 1fr) auto; }
.fd-dw .fd-xw-hd .k { }
.fd-dw-body { grid-column: 1 / -1; display: grid; gap: 6px; }
.fd-dw-msg { font-size: 12px; color: var(--fd-slate-600); }
.fd-dw .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--fd-slate-600); }
.fd-dw .meta .redn { color: var(--fd-danger); font-weight: 600; }
.fd-dw-rows { display: grid; gap: 6px; }
.fd-dw-rows .r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; font-size: 11.5px; align-items: baseline; }
.fd-dw-rows .r .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-dw-rows .r .v { color: var(--fd-slate-600); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fd-dw-rows .r .v b { color: var(--fd-danger); font-weight: 700; }
.fd-dw-rows .r .v.nod { color: var(--fd-danger); font-weight: 600; font-size: 11px; }
.fd-dw-rows .more { font-size: 11.5px; color: var(--fd-blue-dark); font-weight: 600; }
.fd-dp-red { color: var(--fd-slate-600); font-weight: 600; }
.fd-dp { border: 1px solid var(--fd-card-border); border-radius: 10px; overflow: hidden; margin: 8px 0; }
.fd-dp.fd-dp-over { border-color: var(--fd-danger-border); }
.fd-dp-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--fd-bg); border-bottom: 1px solid #F1EEE4; flex-wrap: wrap; }
.fd-dp-h .nm { font-weight: 700; font-size: 12.5px; }
.fd-dp-h .sl { font-size: 11px; color: var(--fd-slate-400); }
.fd-dp-h .chips { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.fd-dp-l { display: grid; grid-template-columns: 230px minmax(0, 1fr) 330px; gap: 6px 18px; align-items: center; padding: 11px 14px; border-top: 1px solid #F1EEE4; font-size: 12.5px; }
.fd-dp-h + .fd-dp-l { border-top: 0; }
.fd-dp-l .lab { font-weight: 600; }
.fd-dp-trk { height: 12px; border-radius: 999px; background: #EEF2F4; overflow: hidden; display: flex; }
.fd-dp-trk .a { background: #86C5A2; height: 100%; }
.fd-dp-trk .b { background: var(--fd-danger); height: 100%; }
.fd-dp-l .val { font-variant-numeric: tabular-nums; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; text-align: right; }
.fd-dp-l .val .m { color: var(--fd-slate-600); }
.fd-dp-l .val .x { color: var(--fd-danger); font-weight: 700; }
.fd-dp-l .fml { grid-column: 2 / -1; font-size: 11px; color: var(--fd-slate-400); font-variant-numeric: tabular-nums; }
@media (max-width: 820px) { .fd-dp-l { grid-template-columns: 1fr; } .fd-dp-l .val { justify-content: flex-start; } .fd-dp-l .fml { grid-column: 1; } }
.fd-xbar { grid-template-columns: minmax(0, 300px) minmax(0, 1fr) 470px; }
@media (max-width: 1100px) { .fd-xbar { grid-template-columns: 1fr; } .fd-xb-num { justify-content: flex-start; flex-wrap: wrap; white-space: normal; } }

/* Committee Dashboard jump rail: open (selected) pills in a light blue tint instead of solid dark blue */
.fd-rowc ~ .fd-jump-rail .fd-jump-chip.fd-jump-chip-open { background: #D8E9E1; border-color: #A9CDBF; color: #1F4F43 !important; font-weight: 700; }
.fd-rowc ~ .fd-jump-rail .fd-jump-chip.fd-jump-chip-open:hover { background: #C6DFD3; border-color: #8FBBAA; color: #1F4F43 !important; }

/* ---- Committee Dashboard: "About the proposal" and "Loan register details" cards ---- */
.fd-ac-row { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 18px; align-items: stretch; margin: 0 0 18px; }
.fd-ac-card { background: #FFFFFF; border: 1px solid var(--fd-card-border); border-radius: 16px; box-shadow: 0 1px 2px rgba(29, 34, 38, .05), 0 8px 24px rgba(27, 74, 94, .07); overflow: hidden; position: relative; }
.fd-ac-card.fd-ac-flash { outline: 3px solid var(--fd-blue-light); outline-offset: 2px; }
.fd-ac-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px 14px; background: linear-gradient(180deg, #F2F8FA, #FFFFFF); border-bottom: 1px solid #F1EEE4; position: relative; }
.fd-ac-h::after { content: ""; position: absolute; left: 20px; top: 0; width: 46px; height: 3px; border-radius: 0 0 3px 3px; background: var(--fd-gold); }
.fd-ac-h .ico { width: 34px; height: 34px; border-radius: 10px; background: var(--fd-blue-tint); color: var(--fd-blue-dark); display: grid; place-items: center; flex: none; }
.fd-ac-h .ico svg { width: 18px; height: 18px; }
.fd-ac-h h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 800; color: #123646; margin: 0; padding: 0; }
.fd-ac-b { padding: 16px 20px 18px; display: grid; gap: 18px; }
.fd-ac-grp { display: grid; gap: 12px; }
.fd-ac-grp h3, .fd-ac-other:not(:empty)::before { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--fd-gold); display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.fd-ac-grp h3::after, .fd-ac-other:not(:empty)::before { }
.fd-ac-grp h3::after { content: ""; flex: 1; height: 1px; background: var(--fd-card-border); }
.fd-ac-other:not(:empty)::before { content: attr(data-h); }
.fd-ac-other:empty { display: none; }
.fd-ac-card .k { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #3F5A6B; }
.fd-ac-card .kv .v { font-weight: 600; margin-top: 5px; overflow-wrap: anywhere; font-size: 13px; color: var(--fd-ink); }
.fd-ac-whorow { display: flex; gap: 16px 22px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.fd-ac-who { display: flex; gap: 14px; align-items: center; flex: 1 1 230px; min-width: 0; }
.fd-ac-who .avatar { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, var(--fd-blue) 0%, #123646 100%); color: #FFFFFF; display: grid; place-items: center; font-weight: 800; font-size: 17px; flex: none; box-shadow: 0 4px 12px rgba(27, 74, 94, .25); }
.fd-ac-who .wm { min-width: 0; }
.fd-ac-who .nm { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--fd-ink); overflow-wrap: anywhere; }
.fd-ac-who .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.fd-ac-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid; }
.fd-ac-chip-blue { background: var(--fd-blue-tint); color: var(--fd-blue-dark); border-color: var(--fd-blue-tint-border); }
.fd-ac-chip-grey { background: #EEF2F4; color: var(--fd-slate-600); border-color: var(--fd-card-border); }
.fd-ac-cstack { flex: 0 1 290px; min-width: 250px; display: grid; gap: 7px; border-left: 1px dashed var(--fd-card-border); padding-left: 18px; }
.fd-ac-cstack .ci { display: inline-flex; gap: 7px; align-items: flex-start; font-size: 12.5px; min-width: 0; }
.fd-ac-cstack .ci svg { width: 15px; height: 15px; color: var(--fd-blue); flex: none; margin-top: 2px; }
.fd-ac-cstack .ci b { font-weight: 600; overflow-wrap: anywhere; }
.fd-ac-kvg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; }
.fd-ac-kvg .span2 { grid-column: span 2; }
.fd-ac-kvg .span3 { grid-column: 1 / -1; }
.fd-ac-subh { grid-column: 1 / -1; font-size: 10.5px; font-weight: 700; color: var(--fd-blue-dark); text-decoration: underline; }
.fd-ac-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; font-weight: 500 !important; }
.fd-ac-clamp.fd-open { -webkit-line-clamp: unset; display: block; }
.fd-ac-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.fd-ac-tl { display: grid; grid-template-columns: 1fr 1fr; }
.fd-ac-tl .pt { position: relative; padding-top: 18px; }
.fd-ac-tl .pt::before { content: ""; position: absolute; top: 4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--fd-blue); }
.fd-ac-tl .pt::after { content: ""; position: absolute; top: 8px; left: 12px; right: 8px; height: 2px; background: var(--fd-blue-tint-border); }
.fd-ac-tl .pt:last-child::after { display: none; }
.fd-ac-stack { display: grid; gap: 16px; }
.fd-ac-stack .kv + .kv { padding-top: 14px; border-top: 1px dashed var(--fd-card-border); }
@media (max-width: 1100px) { .fd-ac-row { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .fd-ac-kvg, .fd-ac-two { grid-template-columns: 1fr; } .fd-ac-kvg .span2 { grid-column: auto; } .fd-ac-cstack { border-left: 0; padding-left: 0; flex-basis: 100%; } }
.fd-ac-card .pt .v { font-weight: 600; margin-top: 5px; font-size: 13px; color: var(--fd-ink); }
.fd-ac-card .v.fd-ac-nc { margin-top: 5px; padding: 10px 12px; border-radius: 12px; background: #F2F8FA; border: 1px solid var(--fd-blue-tint-border); font-size: 12px; font-weight: 500; color: var(--fd-ink); }

/* About card: sub-heading in the label style (no underline); timeline gap */
.fd-ac-subh { text-decoration: none !important; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fd-blue-dark); padding-top: 4px; border-top: 1px dashed var(--fd-card-border); }
.fd-ac-tl { margin-top: 12px; }
.fd-ac-tl .pt { padding-top: 22px; }
/* jump rail pills: a touch larger */
.fd-rowc ~ .fd-jump-rail .fd-jump-chip.fd-jump-chip-label { font-size: 11.5px; padding: 8px 15px; }
/* KPI tiles: darker labels, softer (not near-black) values */
.fd-topgrid .fd-kpi .fd-kpi-k { color: #3F5A6B; }
.fd-topgrid .fd-kpi .fd-kpi-v { color: var(--fd-blue-dark); }
.fd-topgrid .fd-kpi .fd-kpi-sub { color: var(--fd-slate-600); }
.fd-topgrid .fd-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fd-topgrid .fd-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fd-topgrid .fd-kpi .fd-kpi-v.fd-kpi-na { color: var(--fd-slate-400); font-weight: 700; }
.fd-topgrid .fd-kpi .fd-kpi-v.fd-kpi-danger { color: var(--fd-danger); }
.fd-topgrid .fd-kpi .fd-kpi-v.fd-kpi-good { color: var(--fd-green); }
.fd-kpi-of { font-size: 13px; font-weight: 600; color: var(--fd-slate-600); }
.fd-kpi .fd-info-btn { margin-left: 4px; vertical-align: middle; }
.fd-ac-tl .pt { padding-top: 36px; }
.fd-ac-tl .pt::before { top: 6px; }
.fd-ac-tl .pt::after { top: 10px; }
/* Overall health tile: his green ring (health %) and "below standard" in red when above 0 */
.fd-topgrid .fd-kpi { position: relative; }
.fd-kpi-ring { --p: 0; position: absolute; right: 14px; top: 14px; width: 42px; height: 42px; border-radius: 50%; background: conic-gradient(var(--fd-green) calc(var(--p) * 1%), #ECE7DC 0); display: grid; place-items: center; }
.fd-kpi-ring span { width: 32px; height: 32px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--fd-green); }
.fd-kpi-redtxt { color: var(--fd-danger); font-weight: 700; }
.fd-kpi-ring { top: 10px; width: 40px; height: 40px; }
.fd-kpi-ring span { width: 30px; height: 30px; }
/* Overall health tile: ring in the value row (no absolute positioning, so it can't overlap the text) */
#fdKpiHealth { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
#fdKpiHealth .fd-kpi-k { grid-column: 1 / -1; grid-row: 1; }
#fdKpiHealth .fd-kpi-v { grid-column: 1; grid-row: 2; }
#fdKpiHealth .fd-kpi-ring { position: static; grid-column: 2; grid-row: 2; width: 40px; height: 40px; margin-top: 2px; }
#fdKpiHealth .fd-kpi-sub { grid-column: 1 / -1; grid-row: 3; }

/* ---- Top of the dashboard: KPI row full width, then the row of three (rating, delegated power, credit exposure) ---- */
.fd-topgrid.fd-topgrid-kpis { grid-template-columns: 1fr; margin-bottom: 18px; }
.fd-topgrid-kpis .fd-kpi-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.fd-topgrid-kpis .fd-kpi { padding: 14px 16px; }
.fd-rowc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.3fr); gap: 18px; align-items: stretch; margin: 0 0 18px; }
.fd-rowc > .fd-xw { align-content: start; }
.fd-rc { background: #FFFFFF; border: 1px solid var(--fd-card-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(29, 34, 38, .05); overflow: hidden; display: grid; align-content: start; }
.fd-rc-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px; }
.fd-rc-h .ico { width: 28px; height: 28px; border-radius: 9px; background: var(--fd-blue-tint); color: var(--fd-blue-dark); display: grid; place-items: center; flex: none; }
.fd-rc-h .ico svg { width: 16px; height: 16px; }
.fd-rc-h h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fd-slate-600); margin: 0; padding: 0; }
.fd-rc-b { padding: 0 16px 14px; display: grid; gap: 12px; }
.fd-rc-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fd-rc-big b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--fd-blue-dark); line-height: 1; }
.fd-rc-big span { font-size: 13px; font-weight: 600; color: var(--fd-ink); }
.fd-rc-scale { display: grid; gap: 4px; }
.fd-rc-scale i { height: 8px; border-radius: 99px; background: #EEF2F4; }
.fd-rc-scale i.on { background: var(--fd-blue-light); }
.fd-rc-scale i.cur { background: var(--fd-blue); }
.fd-rc-scale-l { display: flex; justify-content: space-between; font-size: 10px; color: var(--fd-slate-400); font-weight: 600; margin-top: -6px; }
.fd-rc-red .k { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #3F5A6B; }
.fd-rc-red .v { font-size: 14px; font-weight: 700; color: var(--fd-blue-dark); margin-top: 2px; font-variant-numeric: tabular-nums; }
.fd-rc .fd-info-btn { margin-left: 4px; vertical-align: middle; }
@media (max-width: 1100px) { .fd-rowc { grid-template-columns: 1fr; } .fd-topgrid-kpis .fd-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fd-dw .meta b { color: var(--fd-blue-dark); font-weight: 700; font-variant-numeric: tabular-nums; }
.fd-dw .meta b.redn { color: var(--fd-danger); }
/* Rating card colour: green when the rating does not reduce the delegated power, amber when it does */
.fd-rc.fd-rc-ok .fd-rc-big b { color: var(--fd-green); }
.fd-rc.fd-rc-ok .fd-rc-scale i.on { background: #86C5A2; }
.fd-rc.fd-rc-ok .fd-rc-scale i.cur { background: var(--fd-green); }
.fd-rc.fd-rc-mid .fd-rc-big b { color: var(--fd-amber-icon); }
.fd-rc.fd-rc-mid .fd-rc-scale i.on { background: #EFD3A8; }
.fd-rc.fd-rc-mid .fd-rc-scale i.cur { background: #D9A24A; }

/* ---- Committee Dashboard: brighter (darker) labels, everywhere on the page ---- */
.fd-stage-card .fd-kv-tiles .kv .k { color: #3F5A6B; }
.fd-stage-card .fd-zone-sub.fd-zone-sub2 { color: var(--fd-slate-600); }
.fd-stage-card .fd-members small, .fd-stage-card .fd-mem .nm small { color: var(--fd-slate-600); }
.fd-stage-card .fd-dp-h .sl, .fd-stage-card .fd-dp-l .fml { color: var(--fd-slate-600); }
.fd-rc-scale-l { color: var(--fd-slate-600); }
.fd-stage-card .perf-kpi-label, #idRatioAnalysisEmbed [style*="letter-spacing:.07em"], #idPerfIndicatorsEmbed [style*="letter-spacing:.07em"] { color: #3F5A6B !important; }
.fd-stage-card th.hdr-top, .fd-stage-card th.hdr-top span { color: #3F5A6B !important; }
/* jump rail pills: larger */
.fd-rowc ~ .fd-jump-rail .fd-jump-chip.fd-jump-chip-label { font-size: 12.5px; padding: 9px 17px; }
.fd-stage-card th.hdr-bot, .fd-stage-card th.hdr-bot span { color: #3F5A6B !important; }
/* Delegated power card: facility name on its own line, values below (the wide values line was squeezing the name to one letter) */
.fd-dw-rows .r { grid-template-columns: 1fr; gap: 1px; }
.fd-dw-rows .r .n { white-space: normal; }
.fd-dw-rows .r .n:empty, .fd-dw-rows .r .v:empty { display: none; }
.fd-dw-rows .r .v { text-align: left; white-space: normal; }

/* Back-to-top arrow (Committee Dashboard) */
.fd-totop { position: fixed; right: 24px; bottom: 24px; z-index: 50; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--fd-blue-tint-border); background: #FFFFFF; color: var(--fd-blue-dark); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(27, 74, 94, .22); transition: background .15s, transform .15s; }
.fd-totop[hidden] { display: none; }
.fd-totop:hover { background: var(--fd-blue-tint); transform: translateY(-2px); }
.fd-totop:focus-visible { outline: 2px solid var(--fd-blue); outline-offset: 2px; }
@media print { .fd-totop { display: none !important; } }

/* KPI cards: source link, bottom-right corner */
.fd-kpi-row.fd-kpi-stack .fd-kpi { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.fd-kpi-go { align-self: flex-end; margin-top: auto; display: inline-flex; align-items: center; gap: 5px; padding: 2px 3px 2px 8px; border: 1px solid var(--fd-gold-light); border-radius: 999px; background: #FFFFFF; font: inherit; font-size: 9.5px; font-weight: 700; color: var(--fd-blue-dark); cursor: pointer; transition: background .15s, border-color .15s; }
.fd-kpi-go span { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: var(--fd-gold); color: #FFFFFF; font-size: 8.5px; line-height: 1; }
.fd-kpi .fd-kpi-sub { margin-bottom: 8px; }
.fd-kpi-go:hover { background: var(--fd-amber-bg); border-color: var(--fd-gold); }
.fd-kpi-go:focus-visible { outline: 2px solid var(--fd-blue); outline-offset: 2px; }
#fdKpiHealth { display: grid; grid-template-rows: auto auto auto 1fr; }
#fdKpiHealth .fd-kpi-go { grid-column: 1 / -1; grid-row: 4; justify-self: end; align-self: end; }

/* Multi-paragraph help popover ("# " paragraph = small heading) */
.fd-info-pop.fd-info-pop-rich { max-width: 380px; max-height: 70vh; overflow-y: auto; }
.fd-info-pop-rich p { margin: 0 0 9px; }
.fd-info-pop-rich p:last-child { margin-bottom: 0; }
.fd-info-pop-rich p.fd-info-h { margin: 12px 0 5px; padding-top: 10px; border-top: 1px solid var(--fd-card-border); font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fd-gold); }
.fd-info-pop-rich p.fd-info-h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---- Login page Terms of Use (login.jsp + common/termsOfUse.jspf). The
   checkbox reuses .fd-checkbox-box; everything here is new, nothing above
   is changed. Buttons are <button>s, not <a>s, so the a:link color traps
   don't apply. ---- */
.fd-tou-row { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; }
.fd-tou-row .fd-checkbox-box { margin-top: 1px; }
.fd-tou-row.fd-tou-locked .fd-checkbox-visual { background: var(--fd-input-bg); border-style: dashed; }
.fd-tou-row input[type="checkbox"]:focus-visible ~ .fd-checkbox-visual { outline: 2px solid var(--fd-blue-light); outline-offset: 2px; }
.fd-tou-text { font-size: 12.5px; line-height: 1.5; color: var(--fd-slate-800); }
.fd-tou-text label { cursor: pointer; }
.fd-tou-hint { display: block; font-size: 11.5px; color: #7A776E; margin-top: 3px; }
.fd-tou-row:not(.fd-tou-locked) .fd-tou-hint { display: none; }
.fd-tou-link { font: inherit; background: none; border: 0; padding: 0; margin: 0; color: var(--fd-blue); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--fd-blue-tint-border); }
.fd-tou-link:hover { color: var(--fd-blue-dark); }
.fd-tou-link:focus-visible { outline: 2px solid var(--fd-blue-light); outline-offset: 2px; border-radius: 2px; }
.fd-tou-done { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fd-slate-600); margin: 4px 0 18px; }
.fd-tou-done svg { color: var(--fd-green); flex-shrink: 0; }
.fd-btn-primary.fd-tou-gated:disabled { background: #B9C6CD; box-shadow: none; cursor: not-allowed; }
.fd-notice { border: 1px solid var(--fd-amber-border); background: var(--fd-amber-bg); border-radius: 10px; padding: 12px 14px; display: flex; gap: 10px; text-align: left; }
.fd-notice svg { color: var(--fd-amber-icon); flex-shrink: 0; margin-top: 1px; }
.fd-notice-title { font-size: 12px; font-weight: 700; color: var(--fd-amber-text); margin-bottom: 3px; }
.fd-notice-body { font-size: 11.5px; line-height: 1.55; color: var(--fd-amber-text); }

.fd-tou-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(30,38,46,0.55); display: none; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.fd-tou-overlay.open { display: flex; }
.fd-tou-modal { width: 800px; max-width: 100%; max-height: min(540px, calc(100vh - 40px)); background: #FFFFFF; border-radius: 12px; box-shadow: 0 24px 64px rgba(20,24,28,0.35); display: flex; flex-direction: column; overflow: hidden; font-family: 'Plus Jakarta Sans', sans-serif; }
.fd-tou-head { padding: 22px 26px 14px; border-bottom: 1px solid var(--fd-card-border); position: relative; }
.fd-tou-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fd-blue); }
.fd-tou-title { font-family: 'Libre Baskerville', Georgia, serif; font-size: 21px; font-weight: 700; color: var(--fd-slate-800); margin: 6px 0 4px; }
.fd-tou-meta { font-size: 11.5px; color: #7A776E; }
.fd-tou-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--fd-card-border); background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--fd-slate-600); padding: 0; }
.fd-tou-close:hover { border-color: var(--fd-slate-400); }
.fd-tou-body { padding: 16px 26px 8px; overflow-y: auto; overscroll-behavior: contain; font-size: 13px; line-height: 1.65; color: #41403A; }
.fd-tou-body h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13.5px; font-weight: 700; color: var(--fd-ink); margin: 16px 0 4px; padding: 0; display: flex; gap: 8px; }
.fd-tou-body h3 .fd-tou-n { color: var(--fd-gold); font-variant-numeric: tabular-nums; }
.fd-tou-body p { margin: 0 0 6px; }
.fd-tou-body ul { margin: 4px 0 6px; padding-left: 18px; }
.fd-tou-body li { margin-bottom: 2px; }
.fd-tou-end { font-size: 11.5px; color: #7A776E; border-top: 1px dashed var(--fd-card-border); padding: 12px 0 10px; margin-top: 16px; }
.fd-tou-foot { padding: 14px 26px; border-top: 1px solid var(--fd-card-border); display: flex; align-items: center; gap: 12px; background: var(--fd-input-bg); }
.fd-tou-progress { flex: 1; font-size: 11.5px; color: #7A776E; display: flex; align-items: center; gap: 8px; }
.fd-tou-bar { width: 90px; height: 4px; border-radius: 2px; background: var(--fd-card-border); overflow: hidden; }
.fd-tou-bar i { display: block; height: 100%; width: 0; background: var(--fd-blue); }
.fd-tou-overlay.fd-tou-view .fd-tou-progress > * , .fd-tou-overlay.fd-tou-view #idTouAgree { display: none; }
.fd-tou-btn { height: 36px; padding: 0 16px; border-radius: 8px; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.fd-tou-btn-ghost { border: 1px solid var(--fd-input-border); background: #FFFFFF; color: var(--fd-slate-700); }
.fd-tou-btn-ghost:hover { background: var(--fd-input-bg); }
.fd-tou-btn-primary { border: 0; background: var(--fd-blue); color: #FFFFFF; }
.fd-tou-btn-primary:hover { background: var(--fd-blue-dark); }
.fd-tou-btn-primary:disabled { background: #B9C6CD; cursor: not-allowed; }
.fd-tou-btn:focus-visible { outline: 2px solid var(--fd-blue-light); outline-offset: 2px; }

/* ============================================================
   BankCIS AI: AI Credit Brief card (Committee Decision Dashboard,
   aiCreditBrief.jspf + aiCreditBrief.js). Everything is .fd-ai-*,
   so nothing else on any page is affected.
   ============================================================ */
.fd-ai-card { background: #FFFFFF; border: 1px solid var(--fd-card-border); border-radius: 12px; overflow: hidden; margin: 0 0 16px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--fd-ink); font-size: 13px; line-height: 1.55; }
.fd-ai-card[hidden] { display: none !important; }
.fd-ai-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 18px; background: var(--fd-ai-tint); border-bottom: 1px solid var(--fd-ai-tint-border); }
.fd-ai-card h2.fd-ai-title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--fd-ai-teal); margin: 0; padding: 0; background: none; border: 0; text-transform: none; }
.fd-ai-ring { flex: none; display: block; }
.fd-ai-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 9px; border: 1px solid var(--fd-ai-tint-border); background: #FFFFFF; color: var(--fd-ai-teal); white-space: nowrap; }
.fd-ai-tag.fd-ai-tag-frozen { color: var(--fd-blue-dark); background: var(--fd-blue-tint); border-color: var(--fd-blue-tint-border); }
.fd-ai-tag.fd-ai-tag-flag { color: var(--fd-amber-text); background: var(--fd-amber-bg); border-color: var(--fd-amber-border); }
.fd-ai-acts { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fd-ai-lnk { background: none; border: 0; padding: 4px 2px; color: var(--fd-slate-600); font: 600 12px 'Plus Jakarta Sans', sans-serif; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
.fd-ai-lnk:hover { color: var(--fd-ink); }
.fd-ai-btn { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid transparent; border-radius: 8px; padding: 6px 13px; font: 700 12px 'Plus Jakarta Sans', sans-serif; cursor: pointer; color: var(--fd-ai-teal); background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--fd-ai-grad) border-box; }
.fd-ai-btn:hover, .fd-ai-btn:active, .fd-ai-btn.fd-ai-on { background: var(--fd-ai-grad) border-box; color: #FFFFFF; }
.fd-ai-btn:hover .fd-ai-ring path, .fd-ai-btn.fd-ai-on .fd-ai-ring path { stroke: #FFFFFF; }
.fd-ai-btn:hover .fd-ai-ring circle, .fd-ai-btn.fd-ai-on .fd-ai-ring circle { fill: #F6D27A; }
.fd-ai-btn[disabled] { opacity: .6; cursor: default; }
.fd-ai-plain { border: 1px solid var(--fd-blue-tint-border); border-radius: 8px; padding: 6px 13px; font: 700 12px 'Plus Jakarta Sans', sans-serif; cursor: pointer; color: var(--fd-blue-dark); background: #FFFFFF; }
.fd-ai-b { padding: 16px 18px; display: grid; gap: 18px; }
.fd-ai-summary { font-size: 14px; line-height: 1.65; max-width: 92ch; margin: 0; }
.fd-ai-sub { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fd-slate-600); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.fd-ai-sub .n { font-weight: 700; color: var(--fd-slate-400); letter-spacing: 0; }
.fd-ai-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 18px 28px; }
.fd-ai-items { list-style: none; margin: 0; padding: 0; display: grid; }
.fd-ai-it { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 10px 0; border-top: 1px solid #F1EEE4; }
.fd-ai-it:first-child { border-top: 0; padding-top: 0; }
.fd-ai-it .t { font-weight: 700; }
.fd-ai-it .d { color: #41403A; }
.fd-ai-sev { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 5px; padding: 2px 7px; border: 1px solid; height: fit-content; margin-top: 2px; white-space: nowrap; min-width: 62px; text-align: center; }
.fd-ai-sev-high { color: var(--fd-danger); background: var(--fd-danger-bg); border-color: var(--fd-danger-border); }
.fd-ai-sev-medium { color: var(--fd-amber-text); background: var(--fd-amber-bg); border-color: var(--fd-amber-border); }
.fd-ai-sev-low { color: var(--fd-slate-600); background: #EEF2F4; border-color: var(--fd-card-border); }
.fd-ai-sev-plus { color: var(--fd-green); background: var(--fd-green-bg); border-color: var(--fd-green-border); }
.fd-ai-src { grid-column: 2; display: flex; gap: 10px; flex-wrap: wrap; }
.fd-ai-src button { border: 0; background: none; padding: 0; font: 600 11.5px 'Plus Jakarta Sans', sans-serif; color: var(--fd-blue); cursor: pointer; }
.fd-ai-src button:hover { text-decoration: underline; }
.fd-ai-src button::after { content: " \203A"; }
.fd-ai-fig { font-weight: 700; font-variant-numeric: tabular-nums; border-bottom: 1.5px dotted var(--fd-blue-light); cursor: help; }
.fd-ai-ct { font-size: 10px; font-weight: 700; letter-spacing: .03em; color: var(--fd-slate-400); white-space: nowrap; }
.fd-ai-qs { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.fd-ai-conds { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.fd-ai-conds li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
.fd-ai-conds li::before { content: ""; width: 10px; height: 10px; border: 1.5px solid var(--fd-ai-teal); border-radius: 3px; margin-top: 4px; }
.fd-ai-mis { border: 1px solid var(--fd-amber-border); background: #FFFCF7; border-radius: 10px; overflow-x: auto; }
.fd-ai-mis table { border-collapse: collapse; width: 100%; font-size: 12px; min-width: 520px; }
.fd-ai-mis th { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fd-amber-text); text-align: left; padding: 8px 12px; background: var(--fd-amber-bg); }
.fd-ai-mis td { padding: 8px 12px; border-top: 1px solid var(--fd-amber-border); vertical-align: top; }
.fd-ai-mis .num { text-align: right; white-space: nowrap; }
.fd-ai-banner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: start; border: 1px solid var(--fd-amber-border); background: var(--fd-amber-bg); border-radius: 10px; padding: 12px 14px; color: var(--fd-amber-text); }
.fd-ai-banner.fd-ai-info { border-color: var(--fd-blue-tint-border); background: var(--fd-blue-tint); color: var(--fd-blue-dark); }
.fd-ai-banner .bt { font-weight: 700; }
.fd-ai-banner ul { margin: 6px 0 0; padding-left: 18px; color: var(--fd-ink); }
.fd-ai-banner .old { color: var(--fd-slate-400); text-decoration: line-through; }
.fd-ai-banner .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.fd-ai-dim { opacity: .72; }
.fd-ai-gen { display: flex; gap: 10px; align-items: center; color: var(--fd-slate-600); font-size: 12.5px; }
.fd-ai-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--fd-ai-tint-border); border-top-color: var(--fd-ai-teal); animation: fdAiRot .8s linear infinite; }
@keyframes fdAiRot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fd-ai-spin { animation: none; } }
.fd-ai-report { border: 1px solid var(--fd-card-border); border-radius: 10px; padding: 14px; background: #FCFBF8; display: grid; gap: 10px; }
.fd-ai-report h4 { font-size: 13px; margin: 0; }
.fd-ai-report label { display: flex; gap: 8px; align-items: center; font-size: 12.5px; cursor: pointer; }
.fd-ai-report textarea { width: 100%; box-sizing: border-box; min-height: 60px; border: 1px solid var(--fd-input-border); border-radius: 8px; padding: 8px 10px; font: 12.5px 'Plus Jakarta Sans', sans-serif; background: #FFFFFF; }
.fd-ai-report .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fd-ai-report .hint { font-size: 11.5px; color: var(--fd-slate-400); }
.fd-ai-meta { font-size: 11.5px; color: var(--fd-slate-400); display: flex; gap: 4px 16px; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid #F1EEE4; background: #FCFBF8; }
.fd-ai-meta b { color: var(--fd-slate-600); font-weight: 600; }
.fd-ai-meta .ok { color: var(--fd-green); font-weight: 600; }
.fd-ai-meta .warn { color: var(--fd-amber-text); font-weight: 600; }
.fd-ai-note { padding: 9px 18px; border-bottom: 1px solid #F1EEE4; font-size: 12.5px; font-weight: 600; color: var(--fd-ai-teal); }
.fd-ai-pop { position: fixed; z-index: 3000; max-width: 300px; background: var(--fd-ink); color: #FAF9F6; font-size: 12px; line-height: 1.5; padding: 9px 11px; border-radius: 8px; }
@media (max-width: 760px) { .fd-ai-cols { grid-template-columns: 1fr; } }
/* AI Credit Brief fold (Direction B): fixed height with a fade, "Show full brief" below. */
.fd-ai-clip { position: relative; }
.fd-ai-clip.fd-ai-closed { max-height: 440px; overflow: hidden; }
.fd-ai-clip.fd-ai-closed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(rgba(255, 255, 255, 0), #FFFFFF); pointer-events: none; }
.fd-ai-fold { display: flex; justify-content: center; margin-top: -6px; }
.fd-ai-fold[hidden] { display: none; }
.fd-ai-foldbtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--fd-blue-tint-border); background: #FFFFFF; color: var(--fd-blue-dark); border-radius: 8px; padding: 6px 13px; font: 700 12px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
.fd-ai-foldbtn:hover { border-color: var(--fd-blue-light); }
.fd-ai-foldbtn:focus-visible { outline: 2px solid var(--fd-blue); outline-offset: 2px; }
.fd-ai-foldbtn svg { transition: transform .15s; }
.fd-ai-foldbtn[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .fd-ai-foldbtn svg { transition: none; } }
/* AI Credit Brief collapse: same caret and behaviour as .fd-stage-card */
.fd-ai-h { cursor: pointer; }
.fd-ai-caret { background: none; border: 0; padding: 4px; margin: -4px -4px -4px 0; cursor: pointer; color: var(--fd-slate-400); display: inline-flex; flex-shrink: 0; }
.fd-ai-caret svg { transition: transform .15s; transform: rotate(90deg); }
.fd-ai-card.fd-ai-collapsed .fd-ai-caret svg { transform: none; }
.fd-ai-card.fd-ai-collapsed > :not(.fd-ai-h) { display: none; }
.fd-ai-card.fd-ai-collapsed .fd-ai-h { border-bottom: 0; }

/* ===================================================================
   Ask BankCIS drawer (askBankcis.jspf + askBankcis.js), on every page via
   header_v2.jsp. Everything is scoped under #fdAsk / .fd-ask-* with explicit
   fonts, colours and margins, because legacy pages still load menu.css and
   applicationStyles.css (bare h2 / a / input / table rules).
   =================================================================== */
.fd-ask-launch { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; height: 32px; padding: 0 13px 0 10px; border-radius: 8px; background: #FFFFFF; color: var(--fd-ai-teal); border: 1.5px solid var(--fd-ai-tint-border); font: 700 12.5px 'Plus Jakarta Sans', system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.fd-ask-launch:hover { border-color: var(--fd-ai-aqua); }
.fd-ask-launch[aria-expanded="true"] { background: var(--fd-ai-grad); background-origin: border-box; color: #FFFFFF; border-color: transparent; }
.fd-ask-launch[aria-expanded="true"] .fd-ai-ring path { stroke: #FFFFFF; }
.fd-ask-launch:focus-visible { outline: 2px solid var(--fd-ai-aqua); outline-offset: 2px; }
.fd-ask-launch.fd-ask-float { position: fixed; right: 16px; bottom: 16px; z-index: 2400; height: 40px; box-shadow: 0 6px 18px rgba(30, 38, 46, .18); }
/* Floating on a narrow window it would sit over the drawer's own Ask button; the drawer has its own close (X). */
.fd-ask-launch.fd-ask-float[aria-expanded="true"] { display: none; }
#fdAsk { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100vw; z-index: 95; background: #FFFFFF; border-left: 1px solid var(--fd-card-border); box-shadow: -8px 0 24px rgba(30, 38, 46, .10); display: flex; flex-direction: column; font: 13px/1.55 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--fd-ink); text-align: left; transition: width .22s ease; box-sizing: border-box; }
/* Under the menu bar's dropdowns (z-index 100+), which open over it. top is set by askBankcis.js. */
#fdAsk .fd-ask-basis { display: inline-block; font-size: 11.5px; color: var(--fd-muted, #7A776E); }
#fdAsk[hidden] { display: none !important; }
#fdAsk.fd-ask-wide { width: 62vw; }
@media (max-width: 760px) { #fdAsk, #fdAsk.fd-ask-wide { width: 100vw; } }
@media (prefers-reduced-motion: reduce) { #fdAsk { transition: none; } }
#fdAsk *, #fdAsk *::before, #fdAsk *::after { box-sizing: border-box; }
#fdAsk p { margin: 8px 0; padding: 0; font: inherit; color: inherit; }
#fdAsk ol, #fdAsk ul { margin: 8px 0; padding-left: 20px; }
#fdAsk li { margin: 3px 0; padding: 0; list-style: inherit; }
#fdAsk ol li { list-style: decimal; }
#fdAsk ul li { list-style: disc; }
#fdAsk b { font-weight: 700; }
#fdAsk button, #fdAsk input, #fdAsk textarea { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
/* A scroll that reaches the end of anything inside the drawer stays in the drawer: without this
   it carries on into the page behind, which scrolls the menu bar and Log out out of view. */
#fdAsk textarea { overscroll-behavior: contain; }
#fdAsk a, #fdAsk a:link, #fdAsk a:visited { color: var(--fd-blue) !important; font-weight: 700; text-decoration: none; }
#fdAsk a:hover { color: var(--fd-blue-dark) !important; text-decoration: underline; }
.fd-ask-h { background: var(--fd-ai-tint); border-bottom: 1px solid var(--fd-ai-tint-border); padding: 12px 12px 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; }
.fd-ask-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 15px; color: var(--fd-ink); }
.fd-ask-ctx { font-size: 11.5px; color: var(--fd-slate-600); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-ask-hbtns { display: flex; gap: 2px; flex: none; }
.fd-ask-ibtn { width: 30px; height: 30px; border-radius: 7px; border: 0; background: transparent; color: var(--fd-slate-600); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 14px; }
.fd-ask-ibtn:hover { background: rgba(27, 94, 122, .08); color: var(--fd-ai-teal); }
.fd-ask-ibtn.sm { width: 24px; height: 24px; font-size: 12px; }
.fd-ask-ibtn:focus-visible, .fd-ask-cchip:focus-visible, .fd-ask-sup:focus-visible, .fd-ask-fup:focus-visible, .fd-ask-chip:focus-visible { outline: 2px solid var(--fd-blue); outline-offset: 2px; }
/* minmax(0, 1fr): a long unbreakable chip title must truncate, not widen the column (it did, and the
   panel scrolled sideways, cutting off the start of every line). */
.fd-ask-msgs { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.fd-ask-a, .fd-ask-fups, .fd-ask-cchips, .fd-ask-cpanel { min-width: 0; }
.fd-ask-empty { color: var(--fd-slate-600); font-size: 12.5px; }
.fd-ask-empty b { color: var(--fd-ink); }
/* Example questions on the empty drawer (AI_SETTING ASK_EXAMPLES): click to ask. */
.fd-ask-exs { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 10px 0 12px; }
.fd-ask-ex { font: 600 12.5px 'Plus Jakarta Sans', sans-serif; text-align: left; color: var(--fd-ink); background: #FFFFFF; border: 1px solid var(--fd-ai-tint-border); border-radius: 10px; padding: 7px 12px; cursor: pointer; line-height: 1.4; }
.fd-ask-ex:hover { border-color: var(--fd-ai-aqua); background: var(--fd-ai-tint); color: var(--fd-ai-teal); }
.fd-ask-ex:focus-visible { outline: 2px solid var(--fd-blue); outline-offset: 2px; }
/* After logout or a restart the server no longer remembers the earlier questions. */
.fd-ask-divider { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--fd-muted, #7A776E); }
.fd-ask-divider::before, .fd-ask-divider::after { content: ""; flex: 1; border-top: 1px dashed #DDD7CA; }
.fd-ask-q { justify-self: end; background: var(--fd-blue-tint); border: 1px solid var(--fd-blue-tint-border); border-radius: 12px 12px 2px 12px; padding: 8px 12px; max-width: 88%; white-space: pre-wrap; overflow-wrap: anywhere; }
.fd-ask-masked { justify-self: end; margin-top: -10px; font-size: 11px; color: var(--fd-amber-text); }
.fd-ask-a { border: 1px solid var(--fd-card-border); border-radius: 12px; padding: 12px 14px; overflow-wrap: anywhere; }
.fd-ask-a.fd-ask-loading { color: var(--fd-slate-600); font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.fd-ask-dots { display: inline-flex; gap: 3px; }
.fd-ask-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--fd-ai-aqua); animation: fdAskDot 1s infinite ease-in-out; }
.fd-ask-dots i:nth-child(2) { animation-delay: .15s; } .fd-ask-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes fdAskDot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fd-ask-dots i { animation: none; opacity: .7; } }
.fd-ask-srcs { display: flex; gap: 6px; flex-wrap: wrap; }
.fd-ask-src { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; border: 1px solid; }
.fd-ask-src-help { background: var(--fd-green-bg); border-color: var(--fd-green-border); color: var(--fd-green); }
.fd-ask-src-screen { background: var(--fd-blue-tint); border-color: var(--fd-blue-tint-border); color: var(--fd-blue); }
.fd-ask-src-web { background: var(--fd-amber-bg); border-color: var(--fd-amber-border); color: var(--fd-amber-text); }
.fd-ask-src-none { background: #F3F1EC; border-color: #E3DED2; color: var(--fd-slate-600); }
.fd-ask-sup { font: 800 10px 'Plus Jakarta Sans', sans-serif; color: var(--fd-blue); background: var(--fd-blue-tint); border: 0; border-radius: 4px; padding: 0 4px; margin-left: 2px; vertical-align: super; line-height: 1.3; cursor: pointer; }
.fd-ask-warn { font-size: 11.5px; color: var(--fd-amber-text); background: var(--fd-amber-bg); border: 1px solid var(--fd-amber-border); border-radius: 8px; padding: 6px 10px; margin-top: 8px; }
.fd-ask-warn.fd-ask-warn-open { font-weight: 600; border-left: 3px solid var(--fd-amber-icon); }
.fd-ask-open { display: inline-flex; align-items: center; gap: 6px; background: var(--fd-blue); color: #FFFFFF !important; border: 0; border-radius: 8px; padding: 6px 12px; font-weight: 700; font-size: 12px; margin: 4px 6px 0 0; text-decoration: none !important; }
.fd-ask-opens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fd-ask-opens .fd-ask-open { margin: 0; padding: 7px 16px 7px 13px; }
.fd-ask-arrow { margin-left: 6px; }
#fdAsk a.fd-ask-open, #fdAsk a.fd-ask-open:link, #fdAsk a.fd-ask-open:visited, #fdAsk a.fd-ask-open:hover { color: #FFFFFF !important; text-decoration: none; }
.fd-ask-cchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #F3EFE6; }
/* "Sources" heading over the numbered chips: a quiet label, not a section title. */
.fd-ask-cchl { margin-top: 12px; padding-top: 9px; border-top: 1px solid #F3EFE6; font-size: 11.5px; font-weight: 600; color: #7A776E; }
.fd-ask-cchl + .fd-ask-cchips { margin-top: 6px; padding-top: 0; border-top: 0; }
.fd-ask-cchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px 3px 3px; border: 1px solid var(--fd-card-border); background: #FFFFFF; color: var(--fd-slate-700); cursor: pointer; }
.fd-ask-cchip .ct { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fd-ask-cchip .ci { width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; flex: none; }
.fd-ask-k-help .ci { background: var(--fd-green-bg); color: var(--fd-green); }
.fd-ask-k-screen .ci { background: var(--fd-blue-tint); color: var(--fd-blue); }
.fd-ask-k-web .ci { background: var(--fd-amber-bg); color: var(--fd-amber-text); }
.fd-ask-cchip[aria-expanded="true"] { border-color: var(--fd-blue); background: var(--fd-blue-tint); color: var(--fd-blue); }
.fd-ask-cpanel { margin-top: 8px; border: 1px solid var(--fd-card-border); border-radius: 10px; background: #FFFEFB; padding: 10px 12px; }
.fd-ask-cpanel[hidden] { display: none; }
.fd-ask-cph { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fd-ask-cpt { font-weight: 700; font-size: 12.5px; margin-top: 6px; }
.fd-ask-cpm { font-size: 11px; color: #7A776E; margin-top: 2px; }
.fd-ask-cpx { font-size: 12.5px; color: #3A3A36; margin-top: 8px; max-height: 220px; overflow: auto; overscroll-behavior: contain; line-height: 1.6; white-space: pre-wrap; }
.fd-ask-cpx mark { background: #FBF1D6; color: inherit; border-radius: 2px; padding: 0 1px; }
.fd-ask-cpf { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; }
.fd-ask-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.fd-ask-chip { font-size: 12px; border: 1px solid var(--fd-card-border); background: #FFFFFF; border-radius: 999px; padding: 4px 10px; cursor: pointer; color: #41403A; line-height: 1.3; }
.fd-ask-chip[aria-pressed="true"], .fd-ask-chip[aria-expanded="true"] { border-color: var(--fd-blue); background: var(--fd-blue-tint); }
.fd-ask-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--fd-input-border); background: #FFFFFF; color: var(--fd-ink); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.fd-ask-btn.pri { background: var(--fd-blue); color: #FFFFFF; border-color: var(--fd-blue); box-shadow: 0 4px 14px rgba(36, 95, 122, .30); }
.fd-ask-btn.ghost { border-color: transparent; color: var(--fd-slate-600); }
.fd-ask-btn.ai { background: var(--fd-ai-grad); color: #FFFFFF; border: 0; height: 40px; }
.fd-ask-btn:disabled { opacity: .55; cursor: default; }
.fd-ask-form { margin-top: 8px; border: 1px solid var(--fd-card-border); border-radius: 10px; padding: 10px 12px; background: #FFFEFB; }
.fd-ask-form[hidden], .fd-ask-done[hidden] { display: none; }
.fd-ask-fl { font-size: 12px; font-weight: 600; color: #41403A; display: block; margin: 0 0 4px; }
.fd-ask-fl span { font-weight: 400; color: #7A776E; }
.fd-ask-opt { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0; cursor: pointer; font-weight: 400; color: var(--fd-ink); }
.fd-ask-opt input { margin: 0; width: auto; height: auto; }
.fd-ask-in { width: 100%; border: 1px solid var(--fd-input-border); background: var(--fd-input-bg); border-radius: 8px; padding: 8px 10px; color: var(--fd-ink); font-size: 13px; margin: 0; }
textarea.fd-ask-in { min-height: 56px; resize: vertical; }
.fd-ask-done { margin-top: 8px; font-size: 12px; color: var(--fd-green); background: var(--fd-green-bg); border: 1px solid var(--fd-green-border); border-radius: 8px; padding: 6px 10px; }
.fd-ask-fups { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: -4px; }
.fd-ask-fupl { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--fd-slate-400); margin-right: 2px; }
.fd-ask-fup { font-size: 12px; text-align: left; border: 1px solid var(--fd-ai-tint-border); background: var(--fd-ai-tint); color: var(--fd-ai-teal); border-radius: 999px; padding: 4px 11px; cursor: pointer; line-height: 1.35; }
.fd-ask-fup:hover { border-color: var(--fd-ai-aqua); }
.fd-ask-composer { border-top: 1px solid var(--fd-card-border); padding: 10px 12px; display: grid; gap: 8px; flex: none; }
.fd-ask-cin { display: flex; gap: 8px; align-items: flex-end; }
.fd-ask-cin textarea.fd-ask-in { min-height: 40px; max-height: 120px; height: 40px; padding-top: 9px; }
/* Golden border on the box the question is typed in (soft gold at rest, the CIS gold with a gentle
   ring when focused). Only the composer: the report-a-problem textareas keep the plain border. */
.fd-ask-cin textarea.fd-ask-in { border: 1.5px solid var(--fd-gold-light); }
.fd-ask-cin textarea.fd-ask-in:focus { border-color: var(--fd-gold); outline: none; box-shadow: 0 0 0 3px rgba(184, 137, 58, .18); }
.fd-ask-cost { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--fd-slate-600); background: #F8F6F1; border: 1px dashed var(--fd-input-border); border-radius: 8px; padding: 5px 9px; font-variant-numeric: tabular-nums; }
.fd-ask-cost[hidden] { display: none; }
.fd-ask-cost b { color: var(--fd-ink); }
.fd-ask-meter { height: 4px; background: #EDE9DF; border-radius: 4px; overflow: hidden; flex-basis: 100%; }
.fd-ask-meter i { display: block; height: 100%; background: var(--fd-ai-grad); }
.fd-ask-fine { font-size: 11px; color: #7A776E; }

/* Knowledge library (helpLibrary.jsp), Direction A: register + upload panel. */
.fd-kl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .fd-kl-grid { grid-template-columns: 1fr; } }
.fd-kl-card { background: #FFFFFF; border: 1px solid var(--fd-card-border); border-radius: 11px; }
.fd-kl-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--fd-card-border); }
.fd-kl-tabs { display: flex; gap: 4px; }
.fd-kl-tabs button { font: 700 12.5px 'Plus Jakarta Sans', sans-serif; border: 0; background: none; color: var(--fd-slate-600); padding: 6px 10px; border-radius: 7px; cursor: pointer; }
.fd-kl-tabs button[aria-selected="true"] { background: var(--fd-blue-tint); color: var(--fd-blue); }
.fd-kl-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fd-kl-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--fd-slate-600); text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--fd-card-border); font-weight: 700; white-space: nowrap; background: #FFFFFF; }
.fd-kl-table td { padding: 10px 14px; border-bottom: 1px solid #F3EFE6; vertical-align: top; color: var(--fd-ink); }
.fd-kl-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fd-kl-table tr:last-child td { border-bottom: 0; }
.fd-kl-sub { font-size: 11.5px; color: #7A776E; margin-top: 2px; }
.fd-kl-st { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; border: 1px solid; white-space: nowrap; }
.fd-kl-st-ok { background: var(--fd-green-bg); border-color: var(--fd-green-border); color: var(--fd-green); }
.fd-kl-st-run { background: var(--fd-blue-tint); border-color: var(--fd-blue-tint-border); color: var(--fd-blue); }
.fd-kl-st-bad { background: var(--fd-danger-bg); border-color: var(--fd-danger-border); color: var(--fd-danger); }
.fd-kl-st-off { background: #F3F1EC; border-color: #E3DED2; color: var(--fd-slate-600); }
.fd-kl-link { border: 0; background: none; padding: 0; font: 700 12px 'Plus Jakarta Sans', sans-serif; color: var(--fd-blue) !important; cursor: pointer; margin-right: 10px; }
.fd-kl-link:hover { text-decoration: underline; }
.fd-kl-link.fd-kl-danger { color: var(--fd-danger) !important; }
.fd-kl-dup { font-size: 11.5px; color: var(--fd-amber-text); margin-top: 4px; }
.fd-kl-dup .fd-kl-link { font-size: 11.5px; margin: 0; color: var(--fd-amber-text) !important; text-decoration: underline; }
.fd-kl-dupbar { padding: 9px 18px; font-size: 12.5px; color: var(--fd-amber-text); background: var(--fd-amber-bg); border-bottom: 1px solid var(--fd-amber-border); }
.fd-kl-dupbar .fd-kl-link { margin: 0 0 0 4px; }
.fd-kl-form { padding: 14px 18px; display: grid; gap: 12px; }
.fd-kl-form label { font-size: 12px; font-weight: 600; color: #41403A; display: block; margin-bottom: 4px; }
.fd-kl-form .fd-kl-in { width: 100%; box-sizing: border-box; height: 38px; border: 1px solid var(--fd-input-border); background: var(--fd-input-bg); border-radius: 8px; padding: 0 10px; font: 13px 'Plus Jakarta Sans', sans-serif; color: var(--fd-ink); }
.fd-kl-form textarea.fd-kl-in { height: 64px; padding: 8px 10px; resize: vertical; }
.fd-kl-drop { border: 1.5px dashed var(--fd-input-border); border-radius: 10px; padding: 16px; text-align: center; color: #7A776E; background: var(--fd-input-bg); font-size: 12.5px; cursor: pointer; }
.fd-kl-drop b { color: var(--fd-blue); }
.fd-kl-drop.fd-kl-over { border-color: var(--fd-blue); background: var(--fd-blue-tint); }
.fd-kl-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fd-kl-filter { height: 34px; width: 220px; max-width: 100%; border: 1px solid var(--fd-input-border); background: var(--fd-input-bg); border-radius: 8px; padding: 0 10px; font: 13px 'Plus Jakarta Sans', sans-serif; }
.fd-kl-progress { padding: 10px 18px; font-size: 12.5px; color: var(--fd-blue); background: var(--fd-blue-tint); border-bottom: 1px solid var(--fd-blue-tint-border); }
.fd-kl-progress[hidden] { display: none; }
.fd-kl-empty { padding: 28px 18px; text-align: center; color: var(--fd-slate-600); font-size: 13px; }
.fd-kl-q { font-weight: 600; }
.fd-kl-note { font-size: 12px; color: #3A3A36; margin-top: 4px; white-space: pre-wrap; }

/* ---- Identity strip: who the page is about (name first, then the IDs), under a page title.
   First used on Import data (Excel Template and From documents tabs). Display only. */
.fd-id-strip { display: flex; flex-wrap: wrap; align-items: stretch; width: fit-content; max-width: 100%; background: #FFFFFF; border: 1px solid var(--fd-card-border); border-radius: 11px; margin: -4px 0 16px; overflow: hidden; }
.fd-id-who { display: flex; align-items: center; gap: 11px; padding: 11px 20px 11px 16px; min-width: 0; }
.fd-id-avatar { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(150deg, var(--fd-blue), var(--fd-blue-dark)); color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fd-id-k { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fd-slate-600); }
.fd-id-name { font-size: 15px; font-weight: 700; color: var(--fd-ink); line-height: 1.25; }
.fd-id-cell { padding: 11px 20px; border-left: 1px solid var(--fd-card-border); display: flex; flex-direction: column; justify-content: center; }
.fd-id-v { font-size: 14px; font-weight: 700; color: var(--fd-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .fd-id-cell { border-left: 0; border-top: 1px solid var(--fd-card-border); flex: 1 1 45%; } }