@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;1,600&family=Manrope:wght@500;600;700&family=DM+Sans:wght@400;500;600&family=Noto+Sans+Arabic:wght@400;500;600;700&family=Noto+Naskh+Arabic:wght@500;600;700&display=swap');

/**
 * HAYKALA | هيكلة — Approved visual design layer.
 * ---------------------------------------------------------------------------
 * DESIGN-ONLY. Additive and enqueued LAST so it refines presentation without
 * touching product logic, data, calculation, permission or workflow. It
 * re-points the existing --resolve-* design tokens to the OWNER-APPROVED
 * palette and typography (see HAYKALA_FINAL_APPROVED_DESIGN) and adds visual
 * rules; uses CSS logical properties so it is correct in both LTR and RTL.
 *
 * Fonts: the approved Google faces are imported above with real fallback
 * stacks; where the platform's font-CDN egress is blocked, the stacks apply.
 * Canela (the English wordmark) is a licensed face not on Google Fonts — it
 * is declared first with a Playfair/serif fallback until the licensed webfont
 * is supplied. No webfont is required for the layout to be correct.
 * ========================================================================= */
:root {
	--resolve-radius: 10px;
	--resolve-radius-lg: 14px;

	/* Soft, restrained elevation (approved: minimal shadows, fine rules). */
	--rv-card-shadow: 0 1px 2px rgba(24, 28, 48, 0.04), 0 6px 18px rgba(24, 28, 48, 0.06);
	--rv-card-shadow-hover: 0 2px 6px rgba(24, 28, 48, 0.06), 0 12px 28px rgba(24, 28, 48, 0.10);
	--rv-pill-radius: 999px;
	--rv-gutter: clamp(16px, 3vw, 32px);
	--rv-maxw: 1320px;

	/* ---- APPROVED PALETTE (exact values) ---- */
	--resolve-ink: #222638;              /* main text */
	--resolve-ink-2: #3c3f52;
	--resolve-ink-3: #6a6e85;
	--resolve-ink-4: #7b7f95;
	--resolve-paper: #ffffff;            /* card surface */
	--resolve-ground: #f6f7f9;           /* workspace ground */
	--resolve-ground-2: #eceef3;
	--resolve-ground-3: #e2e4ec;
	--resolve-line: #e7e8ee;             /* fine borders */
	--resolve-line-strong: #d6d8e2;
	--resolve-accent: #6867ad;           /* UI periwinkle base */
	--resolve-accent-2: #52518f;
	--resolve-accent-soft: #ecebf6;
	--resolve-accent-ink: #ffffff;
	--resolve-brand: #8493e6;            /* Panacea brand periwinkle */
	--resolve-brand-hover: #7482d8;
	--resolve-on-dark: #cddafb;          /* pale-blue text on navy */
	--resolve-dark: #181c30;             /* workspace sidebar / header navy */
	--resolve-dark-2: #24283e;           /* hero / request panel navy */
	--resolve-dark-line: #2e3350;

	/* approved component-specific treatments */
	--rv-wordmark-ink: #3c3950;          /* wordmark on light surfaces */
	--rv-pale-blue: #cddafb;
	--rv-hero-action: #c1bce8;           /* hero primary action, dark text on it */
	--rv-hero-action-ink: #1b1f33;

	/* ---- APPROVED TYPOGRAPHY ---- */
	--resolve-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
	--resolve-serif: var(--resolve-display);
	--resolve-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--rv-head: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--rv-wordmark: "Canela", "Playfair Display", "Palatino Linotype", Georgia, serif;
}

/* Arabic faces: Noto Naskh (wordmark / editorial), Noto Sans Arabic (UI). */
:root:lang(ar), [lang="ar"], [dir="rtl"] {
	--resolve-display: "Noto Naskh Arabic", "Amiri", "Scheherazade New", "Times New Roman", serif;
	--resolve-serif: var(--resolve-display);
	--resolve-sans: "Noto Sans Arabic", "IBM Plex Sans Arabic", "Dubai", "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
	--rv-head: "Noto Sans Arabic", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
	--rv-wordmark: "Noto Naskh Arabic", "Amiri", serif;
}

/* Component/section headings take Manrope (approved: Manrope for page &
 * component headings; Playfair stays the editorial/hero face via --resolve-display). */
.resolve-panel__title, .rfa-card__name, .resolve-dash__switch-label,
.rs-pagetitle--component, .resolve-eyebrow, .rfde-form > h2, .rfde-form > h3 {
	font-family: var(--rv-head);
}

/* Pills stay fully rounded even though cards are 10px. */
.resolve-pill,
.rfa-chips > *,
.rs-lang {
	border-radius: var(--rv-pill-radius);
}

/* ===========================================================================
 * 2. Card system — one consistent card across dashboard, panels, FA, lists.
 * ========================================================================= */
.resolve-panel,
.resolve-dash__stats > *,
.rfa-dash,
.rfa-entry,
.resolve-doclist {
	border-radius: var(--resolve-radius-lg);
	box-shadow: var(--rv-card-shadow);
	background: var(--resolve-paper, #fff);
}

/* A subtle lift on interactive cards (stat cards, opportunity rows, doc rows). */
.resolve-dash__stats > a,
.resolve-doclist__item,
.resolve-outstanding__item {
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.resolve-dash__stats > a:hover,
.resolve-doclist__item:hover {
	box-shadow: var(--rv-card-shadow-hover);
}

/* ===========================================================================
 * 3. Content width & gutters — use the viewport intelligently; no narrow
 *    central column, no oversized blank margins.
 * ========================================================================= */
.rs-content,
.rs-main {
	max-width: var(--rv-maxw);
	margin-inline: auto;
	padding-inline: var(--rv-gutter);
	width: 100%;
	box-sizing: border-box;
}

/* ===========================================================================
 * 4. Header — balanced single row: brand start, controls end.
 * ========================================================================= */
.rs-header {
	display: flex;
	align-items: center;
	gap: var(--resolve-space-4, 16px);
	padding-inline: var(--rv-gutter);
	min-height: var(--resolve-shell-header, 60px);
	height: auto; /* never clip content to a fixed height */
	flex-wrap: nowrap;
}
.rs-brand {
	margin-inline-end: auto; /* pushes language/bell/account to the end */
	display: flex;
	align-items: center;
	min-width: 0;
}
.rs-header .rs-lang,
.rs-header .rs-bell__trigger,
.rs-header .rs-account {
	flex: 0 0 auto;
}

/* The account trigger reads as a compact control. */
.rs-account__trigger {
	gap: var(--resolve-space-2, 8px);
	border-radius: var(--rv-pill-radius);
}

/* The company name in the account menu is now an obvious link. */
.rs-account__companylink {
	color: var(--resolve-accent, #5A68C4);
	font-weight: 600;
	text-decoration: none;
}
.rs-account__companylink:hover,
.rs-account__companylink:focus-visible {
	text-decoration: underline;
}

/* ===========================================================================
 * 5. Internal menu / navigation drawer — opening it overlays, never reflows
 *    or compresses the page content (area 2). Presentation consistent on all
 *    internal pages. Close-on-select is already handled in resolve-platform.js.
 * ========================================================================= */
.rs-shell--drawer.is-nav-open .rs-nav {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 1000;
	max-width: 88vw;
	box-shadow: var(--rv-card-shadow-hover);
	overflow-y: auto;
}
/* The body keeps its own width; the drawer sits above it with a backdrop,
 * so opening the menu does not resize the content behind it. */
.rs-shell--drawer.is-nav-open .rs-body {
	overflow: clip;
}
.rs-shell--drawer.is-nav-open .rs-nav-backdrop {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(10, 14, 24, 0.45);
}

/* ===========================================================================
 * 6. Company Dashboard — compact, balanced cards (area 3).
 * ========================================================================= */
/* Stat row: a responsive grid that fills the width instead of one long column. */
.resolve-dash__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--resolve-space-4, 16px);
	align-items: stretch;
}
.resolve-dash__stats > * {
	padding: var(--resolve-space-5, 24px);
	display: flex;
	flex-direction: column;
	gap: var(--resolve-space-2, 8px);
}

/* Next steps + submission status read as two balanced columns on desktop. */
.resolve-dash__grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--resolve-space-5, 24px);
	align-items: start;
}

/* Panels (next steps, submission status, recent activity) are cards. */
.resolve-dash .resolve-panel {
	padding: var(--resolve-space-5, 24px);
}

/* Keep empty states concise and proportionate — no oversized blank areas. */
.resolve-empty__inline,
.resolve-panel--outstanding .resolve-panel__note {
	max-width: 56ch;
}

/* ===========================================================================
 * 7. Financial Assessment & Methodology — two columns on large screens,
 *    one column on small screens, using the right side of the viewport
 *    (area 8). Values, labels and order are untouched; only the visual
 *    reflow of EXISTING fields changes.
 * ========================================================================= */
@media (min-width: 1024px) {
	/* The entity / methodology / size forms lay their stacked fields across
	 * two columns and use the right half of the viewport. Only the EXISTING
	 * fields are reflowed; order, labels and meaning are untouched. Structural
	 * children (headings, notes, period tables, schedules, button rows) span
	 * the full width so tables are never squeezed. */
	.rfde-form,
	.resolve-form--two-col {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--resolve-space-2, 8px) var(--resolve-space-6, 32px);
		align-items: start;
	}
	.rfde-form > h2,
	.rfde-form > h3,
	.rfde-form > h4,
	.rfde-form > p,
	.rfde-form > table,
	.rfde-form > fieldset,
	.rfde-form > hr,
	.rfde-form > button,
	.rfde-form > .resolve-btn,
	.rfde-form > .rfde-sched,
	.rfde-form > .rfde-actions,
	.rfde-form > .resolve-notice,
	.rfde-form > [class*="table"],
	.rfde-form > [class*="grid"],
	.rfde-form .resolve-field--full {
		grid-column: 1 / -1;
	}
}

/* FA diagnostic cards: tidy, equal, readable. */
.rfa-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--resolve-space-3, 12px);
}
.rfa-card {
	border-radius: var(--resolve-radius);
}

/* Wide internal tables scroll inside their card rather than overflowing. */
.rfa-dash table,
.resolve-panel table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* ===========================================================================
 * 8. Footer — compact, structured groups; follows content; no giant blank.
 * ========================================================================= */
.rs-footer {
	padding-block: var(--resolve-space-6, 32px);
	padding-inline: var(--rv-gutter);
}
.rs-footer__disclosure,
.rs-footer__meta,
.rs-footer__legal {
	max-width: var(--rv-maxw);
	margin-inline: auto;
}
.rs-footer__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--resolve-space-3, 12px) var(--resolve-space-5, 24px);
	justify-content: space-between;
}

/* ===========================================================================
 * 9. Responsive — tablet and mobile. Stack two-column layouts into one,
 *    prevent horizontal overflow, keep icon order and labels intact.
 * ========================================================================= */
@media (max-width: 1023px) {
	.resolve-dash__grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 767px) {
	.rs-header {
		flex-wrap: wrap;
		gap: var(--resolve-space-2, 8px);
	}
	.resolve-dash__stats {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
}
@media (max-width: 480px) {
	.resolve-dash__stats {
		grid-template-columns: 1fr;
	}
}

/* Global overflow guard — nothing pushes the page wider than the viewport. */
.rs-shell,
.rs-body,
.rs-content,
.rs-main {
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* ===========================================================================
 * 10. RTL — the rules above use logical properties and so flip automatically.
 *     Only genuinely direction-specific affordances need a tweak.
 * ========================================================================= */
[dir="rtl"] .rs-account__caret {
	margin-inline-start: 0;
}

/* ===========================================================================
 * 11. Control Centre & admin surfaces (1.17.0) — Audit Log, Expert Scopes.
 *     The revamp layer is enqueued on these surfaces too; these rules refine
 *     their dense filters and tables within the same visual language, without
 *     removing any filter, column, event type or control.
 * ========================================================================= */

/* Panel cards pick up the same rounded, softly elevated treatment. */
.resolve-panel__adviser,
.resolve-panel__card,
.rp-card {
	border-radius: var(--resolve-radius-lg);
	box-shadow: var(--rv-card-shadow);
	background: var(--resolve-paper, #fff);
}

/* --- Audit Log: group the (many) filters into a tidy, compact row --- */
.resolve-admin__filterform {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--resolve-space-2, 8px) var(--resolve-space-3, 12px);
	padding: var(--resolve-space-4, 16px);
	border: 1px solid var(--resolve-line, #dcdce6);
	border-radius: var(--resolve-radius-lg);
	background: var(--resolve-ground, #f7f7fa);
	margin-block-end: var(--resolve-space-4, 16px);
}
.resolve-admin__filterform select,
.resolve-admin__filterform input[type="search"],
.resolve-admin__filterform input[type="text"],
.resolve-admin__filterform input[type="date"] {
	min-width: 150px;
	border-radius: var(--resolve-radius);
}
.resolve-admin__filterform button,
.resolve-admin__filterform .button {
	border-radius: var(--resolve-radius);
}
.resolve-admin__exportform {
	display: inline-flex;
	gap: var(--resolve-space-2, 8px);
	align-items: center;
}

/* --- Audit Log: a readable table, rounded frame, row hover, status pills --- */
.resolve-admin__table--audit {
	border-radius: var(--resolve-radius-lg);
	overflow: hidden;
	border: 1px solid var(--resolve-line, #dcdce6);
}
.resolve-admin__table--audit th,
.resolve-admin__table--audit td {
	padding: 10px 12px;
	vertical-align: top;
}
.resolve-admin__table--audit tbody tr:hover {
	background: var(--resolve-accent-soft, #eef0fa);
}
.resolve-admin__pill {
	display: inline-block;
	border-radius: var(--rv-pill-radius);
	padding: 1px 9px;
	font-size: 12px;
}
.resolve-admin__resultcount {
	color: var(--resolve-ink-4, #626c79);
	font-size: 13px;
}

/* --- Expert Scopes: the inline create/edit form flows in a row; the list
 *     items become aligned cards, so edit controls are no longer stacked in a
 *     narrow column. No field, action or scope semantics change. --- */
.resolve-panel__form--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--resolve-space-3, 12px) var(--resolve-space-4, 16px);
}
.resolve-panel__form--inline > * {
	flex: 1 1 220px;
	min-width: 0;
}
.resolve-panel__form--inline button,
.resolve-panel__form--inline .resolve-btn {
	flex: 0 0 auto;
}
.resolve-panel__adviser {
	padding: var(--resolve-space-4, 16px);
	margin-block-end: var(--resolve-space-3, 12px);
}
@media (min-width: 1024px) {
	.resolve-panel__adviser {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--resolve-space-4, 16px);
		align-items: center;
	}
}

/* ===========================================================================
 * English wordmark — PRODUCTION FONT SAFETY (1.17.2).
 * The wordmark is set in the licensed Playfair Display (SIL OFL) by default.
 * The Canela trial font is NOT shipped and NOT referenced here, so no
 * unlicensed face can reach production. To enable licensed Canela: drop a
 * licensed Canela-Regular.woff2 into assets/fonts/, add an @font-face for
 * "Panacea Canela" pointing at it, and prepend "Panacea Canela", below.
 * ========================================================================= */

/* The bilingual HAYKALA | هيكلة lockup takes the licensed Playfair Display for
 * the Latin wordmark on every shell. The Arabic face (Noto Naskh) is unchanged. */
:root,
.hk-on-dark,
.hk-on-light {
	--hk-latin-font: "Playfair Display", "HAYKALA Serif", "Palatino Linotype", Georgia, serif;
	--hk-latin-weight: 500;
}

/* ===========================================================================
 * Authentic Panacea sunburst on the shell chrome (approved §5/§7).
 * The mark precedes the bilingual lockup in the navy header/sidebar brand and
 * in the compact footer, drawn via CSS so no shell markup changes (keeps the
 * tested rs-* structure intact). Never distorted or mirrored.
 * ========================================================================= */
.rs-brand {
	gap: 10px;
}
.rs-brand::before,
.rs-footer__brand::before {
	content: "";
	flex: 0 0 auto;
	background: url("../brand/panacea-sunburst-original.png") center / contain no-repeat;
}
.rs-brand::before {
	width: 30px;
	height: 30px;
}
.rs-footer__brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}
.rs-footer__brand::before {
	width: 24px;
	height: 24px;
}
/* The mark does not mirror; the surrounding row mirrors as usual. */
[dir="rtl"] .rs-brand::before,
[dir="rtl"] .rs-footer__brand::before {
	transform: none;
}

/* ===========================================================================
 * Compact shared footer (approved §7) — restyle the existing rs-footer to the
 * quiet, slim composition: a subtle top hairline, restrained padding, the
 * identity + attribution on one line with the compact meta links, and the
 * mandatory disclosure/legal wording retained beneath. Markup unchanged.
 * ========================================================================= */
.rs-footer {
	background: #fbfbfc;
	border-top: 1px solid var(--resolve-line, #e7e8ee);
	padding-block: 18px;
	color: var(--resolve-ink-3, #6a6e85);
}
.rs-footer__disclosure {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 20px;
}
.rs-footer__brand .hk-lockup {
	font-size: 17px;
}
/* The identity lockup on the quiet footer ground takes the light-surface ink. */
.rs-footer__brand .hk-lockup {
	--hk-name-color: var(--rv-wordmark-ink, #3c3950);
	--hk-sep-color: #cfccdf;
}
.rs-footer__brand .hk-ar {
	color: #8c81a6;
}
.rs-footer__disclosure .resolve-disclosure__summary,
.rs-footer__legal {
	font-size: 11px;
	line-height: 1.6;
	color: var(--resolve-ink-4, #7b7f95);
	flex: 1 1 100%;
	margin: 0;
}
.rs-footer__meta {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--resolve-line, #e7e8ee);
	font-size: 11.5px;
}
.rs-footer__link {
	color: var(--resolve-ink-3, #6a6e85);
	text-decoration: none;
}
.rs-footer__link:hover,
.rs-footer__link:focus-visible {
	color: var(--resolve-accent, #6867ad);
	text-decoration: underline;
}

/* ===========================================================================
 * Control Centre presentation polish — Backup & Restore and shared admin panel.
 * VISUAL ONLY: no markup, data, permission, route, validation or workflow changes.
 * This layer is loaded after resolve-panel.css on the Control Centre shortcode.
 * ======================================================================== */
.resolve-panel {
	width: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	font-family: var(--resolve-sans, "DM Sans", system-ui, sans-serif);
	font-size: 14px;
	background: var(--resolve-ground, #f5f6f8);
}

.resolve-panel__bar {
	min-height: 64px;
	padding: 12px clamp(18px, 2vw, 30px);
	gap: 16px;
	background: #111827;
}

.resolve-panel__brandname .hk-lockup {
	font-size: 18px;
}

.resolve-panel__searchinput {
	min-height: 38px;
	padding: 8px 12px;
	border: 1px solid #344054;
	border-radius: 7px;
	background: #202a3c;
	color: #f8fafc;
}
.resolve-panel__searchinput::placeholder { color: #aab5c7; }

.resolve-panel__body {
	grid-template-columns: 252px minmax(0, 1fr);
	min-height: calc(100vh - 64px);
	align-items: stretch;
	background: var(--resolve-ground, #f5f6f8);
}
.resolve-panel.has-side .resolve-panel__body {
	grid-template-columns: 252px minmax(0, 1fr) minmax(260px, 320px);
}

.resolve-panel__nav {
	padding: 18px 0;
	background: #fff;
	border-inline-end: 1px solid #e4e7ec;
}
.resolve-panel__navgroup {
	margin: 18px 18px 7px;
	font-family: var(--rv-head, var(--resolve-sans, sans-serif));
	font-size: 10px;
	letter-spacing: .12em;
	color: #7b8495;
}
.resolve-panel__navlink {
	min-height: 38px;
	padding: 8px 16px;
	gap: 10px;
	font-size: 13px;
	line-height: 1.4;
	border-inline-start-width: 3px;
	color: #344054;
}
.resolve-panel__navlink.is-current {
	background: #eeedf8;
	border-inline-start-color: #6867ad;
	color: #53539a;
}
.resolve-panel__badge {
	min-width: 22px;
	padding: 2px 7px;
	border-radius: 999px;
	font-size: 11px;
}
.resolve-panel__navhelpbtn {
	width: 23px;
	height: 23px;
	border-color: #e0e4ec;
	border-radius: 50%;
}

.resolve-panel__main {
	min-width: 0;
	padding: clamp(22px, 2.5vw, 36px);
	background: #f5f6f8;
}
.resolve-panel__sectionhead {
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom-color: #e2e6ed;
}
.resolve-panel__sectiontitle {
	font-family: var(--resolve-display, Georgia, serif);
	font-size: clamp(28px, 2.2vw, 36px);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -.02em;
	color: #17253b;
}
.resolve-panel__sectionnote,
.resolve-panel__note {
	max-width: 78ch;
	font-size: 14px;
	line-height: 1.7;
	color: #667085;
}
.resolve-panel__subhead {
	margin: 26px 0 10px;
	font-family: var(--rv-head, var(--resolve-sans, sans-serif));
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
	color: #27364b;
}

/* Backup form controls: styled without changing the existing form actions. */
.resolve-panel__main .resolve-panel__form input[type="text"],
.resolve-panel__main .resolve-panel__form input[type="search"],
.resolve-panel__main .resolve-panel__form input[type="email"],
.resolve-panel__main .resolve-panel__form select,
.resolve-panel__main .resolve-panel__form textarea,
.resolve-panel__main #resolve-backup-label {
	min-height: 42px;
	max-width: min(100%, 520px);
	padding: 9px 12px;
	border: 1px solid #cfd6e2;
	border-radius: 7px;
	background: #fff;
	color: #263449;
	font: inherit;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.resolve-panel__main .button,
.resolve-panel__main button.button,
.resolve-panel__main input.button {
	min-height: 38px;
	padding: 8px 14px;
	border: 1px solid #d0d5df;
	border-radius: 7px;
	background: #fff;
	color: #27364b;
	font: 600 13px/1.4 var(--resolve-sans, system-ui, sans-serif);
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.resolve-panel__main .button-primary,
.resolve-panel__main button.button-primary {
	border-color: #55569b;
	background: #5d61ad;
	color: #fff;
}
.resolve-panel__main .button:hover,
.resolve-panel__main .button:focus-visible {
	border-color: #9ba5b5;
	filter: brightness(.985);
}
.resolve-panel__main .button-primary:hover,
.resolve-panel__main .button-primary:focus-visible {
	background: #4e5298;
	color: #fff;
}

.resolve-panel__tablewrap {
	margin-block: 16px 24px;
	border-color: #e0e5ed;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 5px 16px rgba(16, 24, 40, .035);
}
.resolve-panel__table {
	font-size: 13px;
	background: #fff;
}
.resolve-panel__table th,
.resolve-panel__table td {
	padding: 12px 14px;
	line-height: 1.55;
}
.resolve-panel__table thead th {
	padding-block: 13px;
	background: #f7f8fa;
	color: #667085;
	font-size: 10px;
	letter-spacing: .08em;
}
.resolve-panel__table tbody tr:hover { background: #fafbfc; }
.resolve-panel__table code {
	white-space: normal;
	overflow-wrap: anywhere;
	font-size: 12px;
}
.resolve-backup__actions {
	min-width: 180px;
	white-space: normal;
}
.resolve-backup__actions > form { margin-block-start: 6px; }
.resolve-backup__restore {
	margin-block: 6px;
}
.resolve-backup__restorebody {
	min-width: min(420px, 72vw);
	padding: 14px;
	margin-block-start: 10px;
	border: 1px solid #e1e6ee;
	border-radius: 9px;
	background: #fff;
}
.resolve-backup__restorebody p { line-height: 1.65; }

@media (max-width: 1050px) {
	.resolve-panel__body,
	.resolve-panel.has-side .resolve-panel__body {
		grid-template-columns: 220px minmax(0, 1fr);
	}
	.resolve-panel__main { padding: 22px; }
}
@media (max-width: 760px) {
	.resolve-panel__body,
	.resolve-panel.has-side .resolve-panel__body {
		grid-template-columns: minmax(0, 1fr);
	}
	.resolve-panel__nav { border-inline-end: 0; border-bottom: 1px solid #e4e7ec; }
	.resolve-panel__main { padding: 18px 14px; }
	.resolve-panel__bar { flex-wrap: wrap; }
	.resolve-panel__search { order: 3; flex: 1 1 100%; margin-inline-start: 0; }
	.resolve-panel__searchinput { width: 100%; max-width: none; }
	.resolve-panel__sectiontitle { font-size: 28px; }
}

/* Control Centre correction: full-bleed layout and section icons.
 * Presentation only. Keep all panel actions, permissions and data untouched. */
.resolve-panel {
	width: 100vw;
	max-width: 100vw;
	margin-inline-start: calc(50% - 50vw);
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.resolve-panel__body {
	grid-template-columns: clamp(190px, 17vw, 224px) minmax(0, 1fr);
}
.resolve-panel.has-side .resolve-panel__body {
	grid-template-columns: clamp(190px, 17vw, 224px) minmax(0, 1fr) minmax(260px, 320px);
}
.resolve-panel__nav {
	padding: 10px 0 18px;
}
.resolve-panel__navgroup {
	margin: 16px 16px 7px;
	font-size: 10px;
	letter-spacing: .1em;
}
.resolve-panel__navlink {
	min-height: 36px;
	padding-block: 7px;
	padding-inline-start: 12px;
	gap: 10px;
	font-size: 13px;
	line-height: 1.35;
}
.resolve-panel__navicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	color: #667085;
}
.resolve-panel__navicon svg {
	display: block;
	width: 18px;
	height: 18px;
}
.resolve-panel__navlink.is-current .resolve-panel__navicon,
.resolve-panel__navlink:hover .resolve-panel__navicon,
.resolve-panel__navlink:focus-visible .resolve-panel__navicon {
	color: #5559a5;
}
/* Keep the existing contextual help available to keyboard and pointer users,
   but quiet until requested so it does not compete with the section icons. */
.resolve-panel__navhelpbtn {
	opacity: 0;
	transition: opacity .15s ease;
}
.resolve-panel__navitem:hover .resolve-panel__navhelpbtn,
.resolve-panel__navitem:focus-within .resolve-panel__navhelpbtn,
.resolve-panel__navhelp[open] > .resolve-panel__navhelpbtn,
.resolve-panel__navgrouprow:hover .resolve-panel__navhelpbtn,
.resolve-panel__navgrouprow:focus-within .resolve-panel__navhelpbtn {
	opacity: 1;
}
.resolve-panel__main {
	padding: clamp(24px, 2.4vw, 36px);
}
.resolve-panel__sectiontitle {
	font-size: clamp(30px, 2.4vw, 38px);
}
.resolve-panel__sectionnote,
.resolve-panel__note {
	font-size: 14px;
	line-height: 1.65;
}
.resolve-panel__bar {
	min-height: 64px;
}
@media (max-width: 1050px) {
	.resolve-panel__body,
	.resolve-panel.has-side .resolve-panel__body {
		grid-template-columns: 200px minmax(0, 1fr);
	}
}
@media (max-width: 760px) {
	.resolve-panel {
		width: 100vw;
		max-width: 100vw;
		margin-inline-start: calc(50% - 50vw);
	}
	.resolve-panel__body,
	.resolve-panel.has-side .resolve-panel__body {
		grid-template-columns: minmax(0, 1fr);
	}
	.resolve-panel__navlink { font-size: 14px; }
}