/* ============================================================
 * Application stylesheet — one file for the whole product.
 *
 * GENERATED from backend/web/static/css/src/ by scripts/css/build.mjs.
 * Do not hand-edit: edit the source file for the layer you mean, then run
 *
 *     make css
 *
 * LAYERS
 *   01-03  tokens, reset, base typography
 *   04-06  application shell, header, sidebar
 *   07-13  components: buttons, cards, tables, badges, forms, modals, tabs
 *   14-15  responsive overrides and keyframes
 *   16+    remaining shared components
 *
 * THEMING
 *   Only 01-tokens.css carries colour. Every rule after it goes through
 *   var(), so a new theme is one more [data-theme="..."] block and nothing
 *   else. Switch at runtime with:
 *
 *     document.documentElement.dataset.theme = 'blue'
 *
 * Pages contribute no CSS. A page that needs a style needs a component here.
 * ============================================================ */

/* ---- 1. Design tokens -------------------------------------------------
 * The default theme, taken from dashboard/index.html.
 * Override these — and only these — to add a theme. */

:root {
  --navy: #002855;
  --navy-light: #003580;
  --navy-mid: #0047AB;
  --navy-pale: #E8EDF4;
  --navy-bg: #F4F6FA;
  --accent: #00695C;
  --accent-light: #00897b;
  --accent-bg: #E0F2F1;
  --accent-pale: #E8F5F3;
  --green: #0a8a53;
  --green-bg: #E6F7F0;
  --green-border: #A8E6CF;
  --red: #C0392B;
  --red-bg: #FDEDEC;
  --red-border: #F5B7B1;
  --amber: #D4920B;
  --amber-bg: #FEF6E7;
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #1F2937;
  --gray-800: #1F2937;
  --white: #FFFFFF;
  --radius: 8px;
  --radius-lg: 12px;

  /* The height of the sticky top header. Anything that pins itself below the
   * header offsets by this rather than repeating 56px, so the two cannot drift
   * apart and leave a gap or an overlap. */
  --header-h: 56px;

  /* The width the sidebar keeps when collapsed. The panel narrows to this
   * instead of disappearing, so the toggle that brings it back stays on
   * screen and the icons remain a usable nav. Both the panel and the content
   * offset beside it read this, so they cannot drift apart. */
  --nav-rail: 64px;

  /* Minimum tap target on a phone. WCAG 2.5.5 and the common platform
   * guidelines (Apple HIG, Material) all land on 44px. Controls that must
   * stay small on desktop grow to this inside the mobile layer. */
  --touch-min: 44px;
  --gds-bg: #E0F2F1;
  --gds-color: #00695C;
  --ndc-bg: #E8EDF4;
  --ndc-color: #0047AB;
  --lcc-bg: #FEF6E7;
  --lcc-color: #D4920B;
  --orange: #E67E22;
  --orange-bg: #FDF2E9;
  --orange-border: #F0C49B;
  --blue: #0047AB;
  --blue-bg: #E8EDF4;
  --blue-border: #B8CBE0;

  /* Introduced by the blue family, declared here as well so var() resolves on
   * every page rather than silently collapsing to nothing on the default
   * theme. The eleven pages that set these all agree on the values. */
  --gray: #5f6368;
  --gray-bg: #f1f3f4;
  --border: #e0e0e0;
  --grey: #f4f6fa;

  /* The e-wallet account type, the one status colour with no token behind it. */
  --violet: #7C3AED;
  --violet-bg: #EDE9FE;

  /* Two more status families the admin pages needed and the ramp above did not
   * cover: a system-owned record (indigo) and a critical alert, which is the
   * only badge in the product drawn light-on-dark rather than dark-on-light. */
  --indigo: #283593;
  --indigo-bg: #E8EAF6;
  --critical: #FF6B6B;
  --critical-bg: #4A1414;

  /* A promotion label, the one campaign type with no status colour behind it. */
  --pink: #BE185D;
  --pink-bg: #FCE7F3;

  /* The VIP tier badge, the only two-stop gradient in the product. */
  --gold: #FFD700;
  --gold-deep: #FFA500;
  --weekend: #FDE68A;

  /* The accent's two neighbours: one step darker for a pressed or hovered
   * control, one step lighter for the border around a tinted one. Both were
   * written as literals by the chat page, which is why they could not follow
   * a theme; every family below now names its own pair. */
  --accent-dark: #004D40;
  --accent-border: #B2DFDB;

  /* The amber family needs more than a fill and a text colour: the promo-code
   * strip on the booking pages is a control, so it has a border, a hover, an
   * open state and a button of its own. --amber-ink is the dark end, for text
   * that has to read on --amber-bg rather than beside it. */
  --amber-border: #F0D78C;
  --amber-hover: #FEF0D0;
  --amber-active: #FEECC0;
  --amber-strong: #E6A210;
  --amber-ink: #92400E;

  /* Violet's pressed state, and the star colour for a supplier or hotel
   * rating — a warmer amber than the status one, deliberately. */
  --violet-dark: #6D28D9;
  --rating: #F59E0B;

  /* Ink on a dark surface. The header is navy in every family, so text and
   * borders drawn on it are white at an opacity rather than a colour from the
   * ramp — which is why they were the last two literals left in the markup. */
  --on-dark: rgba(255, 255, 255, .8);
  --on-dark-border: rgba(255, 255, 255, .25);

  /* The airline tile on a flight result. A carrier with a brand colour in the
   * data gets it applied to the tile; this is what the rest of them show. */
  --airline-from: #E4002B;
  --airline-to: #C8102E;

  /* The ten below were introduced by the theme blocks and never declared here,
   * which broke the contract at the top of this file: a theme may override
   * these tokens and only these. A token that exists in [data-theme="blue"]
   * but not in :root does not fall back to anything — the whole declaration
   * that reads it is invalid on the default family, so the property silently
   * goes unset. That is not a theme difference, it is a hole: .toast reads
   * --card, --text and --shadow-md, so on the 60 default-family pages the
   * toast was a transparent, shadowless box.
   *
   * Values are the default family's own, taken from the tokens above rather
   * than invented: the sidebar ground is --navy, its hover is --navy-light,
   * its active row is --accent. */
  --sidebar-w: 260px;
  --sidebar: #002855;
  --sidebar-hover: #003580;
  --sidebar-active: #00695C;

  /* Elevation. The blue family tints its shadows with plain black; the default
   * family tints with navy, which is what 16-components.css already hand-wrote
   * as rgba(0,40,85,.08) before there was a token for it. */
  --shadow-sm: 0 1px 3px rgba(0, 40, 85, .06);
  --shadow-md: 0 4px 12px rgba(0, 40, 85, .08);

  /* Surface and ink, the generic names. --bg is the page ground, --card the
   * raised surface on it, --text and --text-light the two weights of ink. Each
   * aliases the named token the default family already uses for that job. */
  --bg: #F4F6FA;
  --card: #FFFFFF;
  --text: #1F2937;
  --text-light: #6B7280;
}

/* Both spellings of the neutral ramp exist in the codebase. The American one
 * is the real token; the British one aliases it so a theme overrides once.
 *
 * --grey-700 is the exception and must not be aliased. --gray-700 is body text
 * (#1F2937, the same value as --gray-800), while the 30 pages that use
 * var(--grey-700) all declare it as #374151 — the step above it — for secondary
 * text. Aliasing the two silently darkened every one of those pages the moment
 * their own :root block was removed. */

:root {
  --grey-200: var(--gray-200);
  --grey-300: var(--gray-300);
  --grey-400: var(--gray-400);
  --grey-500: var(--gray-500);
  --grey-600: var(--gray-600);
  --grey-700: #374151;
  --grey-800: var(--gray-800);
  --grey-50: var(--gray-50);
  --grey-100: var(--gray-100);
}

/* The product's second colour family, kept as a theme rather than a fork.
 * Only the tokens that actually differ are listed — that is the whole cost
 * of adding a theme. */

[data-theme="blue"] {
  --sidebar-w: 240px;
  --navy: #1e2a3a;
  --navy-light: #2a3a4e;
  --accent: #1668e3;
  --accent-bg: #e8f0fe;
  --green: #0f9d58;
  --green-bg: #e6f4ea;
  --amber: #f4b400;
  --amber-bg: #fef7e0;
  --red: #d93025;
  --red-bg: #fce8e6;
  --gray: #5f6368;
  --gray-bg: #f1f3f4;
  --border: #e0e0e0;
  --sidebar: #1e2a3a;
  --sidebar-hover: #243044;
  --sidebar-active: #1668e3;
  --accent-light: #e8f0fe;
  --grey: #f4f6fa;
  --white: #fff;
  --gray-50: #f8f9fa;
  --gray-100: #f0f2f5;
  --gray-200: #e2e5ea;
  --gray-300: #c4c9d0;
  --gray-400: #949aa6;
  --gray-700: #374151;
  --amber-border: #f0d78e;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --bg: #f5f6fa;
  --card: #fff;
  --text: #333;
  --text-light: #888;
  --accent-dark: #1557C4;
  --accent-border: #D0E3FF;
}

/* A third family, and the cheapest evidence that the token layer works: the
 * corporate pages and the finance dashboard were read as "blue" because their
 * sidebar and accent are blue, but their status palette and neutral ramp are
 * the default ones. Registering them as blue would have swapped six status
 * colours — amber from dark gold #D4920B to bright #f4b400 most visibly.
 *
 * Expressed against the default theme instead, the entire difference is these
 * six tokens. */

[data-theme="corporate"] {
  --sidebar: #1e2a3a;
  --sidebar-hover: #243044;
  --sidebar-active: #1668e3;
  --accent: #1668e3;
  --accent-light: #e8f0fe;
  --grey: #f4f6fa;
  --accent-dark: #1557C4;
  --accent-border: #D0E3FF;
}

/* The same split as corporate, one step further: ai/dashboard and
 * analytics/dashboard take the blue family's chrome AND its neutral ramp, but
 * keep the default status palette — their own :root sets --green #0a8a53,
 * --red #C0392B, --amber #D4920B, which are the default values, not blue's.
 *
 * They were registered as "blue", which was harmless only while each page
 * still carried that :root block to overrule it. Dropping the block on
 * conversion would have handed them blue's status colours, so the tag has to
 * say what they actually are. --accent-light is this family's own: a mid blue
 * used for text and borders, where blue's #e8f0fe is a background tint. */

[data-theme="slate"] {
  --sidebar-w: 240px;
  --navy: #1e2a3a;
  --navy-light: #2a3a4e;
  --sidebar: #1e2a3a;
  --sidebar-hover: #243044;
  --sidebar-active: #1668e3;
  --accent: #1668e3;
  --accent-light: #4a8bef;
  --accent-bg: #e8f0fe;
  --gray-50: #f8f9fa;
  --gray-100: #f0f2f5;
  --gray-200: #e2e5ea;
  --gray-300: #c4c9d0;
  --gray-400: #949aa6;
  --gray-700: #374151;
  --amber-border: #f0d78e;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --bg: #f5f6fa;
  --card: #fff;
  --text: #333;
  --text-light: #888;
  --accent-dark: #1557C4;
  --accent-border: #D0E3FF;
}

/* ---- Style-guide semantic layer --------------------------------------
 * admin-mockups/css/theme.css is the source of truth. Existing pages and
 * themes still write --navy / --accent / --grey-*; these names re-point at
 * those so a theme override flows through both vocabularies. Type and space
 * tokens are new — 98-guide.css is the first layer that reads them. */

:root {
  --color-primary: var(--navy);
  --color-primary-strong: #001B3A;
  --color-primary-light: var(--navy-light);
  --color-primary-mid: var(--navy-mid);
  --color-primary-soft: var(--navy-pale);
  --color-primary-surface: var(--navy-bg);
  --color-secondary: var(--accent);
  --color-secondary-light: var(--accent-light);
  --color-secondary-soft: var(--accent-bg);
  --color-secondary-surface: var(--accent-pale);
  --color-success: var(--green);
  --color-success-hover: #0D9B5E;
  --color-success-soft: var(--green-bg);
  --color-success-border: var(--green-border);
  --color-danger: var(--red);
  --color-danger-hover: #D44637;
  --color-danger-soft: var(--red-bg);
  --color-danger-border: var(--red-border);
  --color-warning: var(--amber);
  --color-warning-soft: var(--amber-bg);
  --color-info: var(--navy-mid);
  --color-info-soft: var(--navy-pale);
  --color-neutral-50: var(--gray-50);
  --color-neutral-100: var(--gray-100);
  --color-neutral-200: var(--gray-200);
  --color-neutral-300: var(--gray-300);
  --color-neutral-400: var(--gray-400);
  --color-neutral-500: var(--gray-500);
  --color-neutral-600: var(--gray-600);
  --color-neutral-700: var(--grey-700);
  --color-neutral-800: var(--gray-800);
  --color-white: var(--white);
  --color-canvas: var(--navy-bg);
  --color-surface: var(--white);
  --color-surface-muted: var(--gray-50);
  --color-surface-sunken: var(--gray-100);
  --color-surface-hover: var(--navy-pale);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-text: var(--gray-800);
  --color-text-muted: var(--gray-500);
  --color-text-subtle: var(--gray-400);
  --color-text-body: var(--gray-600);
  --color-text-inverse: var(--white);
  --color-heading: var(--navy);
  --color-focus-ring: rgba(0, 105, 92, .18);
  --color-overlay: rgba(0, 0, 0, .4);
  --color-on-primary: rgba(255, 255, 255, .7);
  --color-on-fill: #FFFFFF;
  --color-header-bg: var(--navy);
  --color-header-text: #FFFFFF;
  --color-gds: var(--gds-color);
  --color-gds-soft: var(--gds-bg);
  --color-ndc: var(--ndc-color);
  --color-ndc-soft: var(--ndc-bg);
  --color-lcc: var(--lcc-color);
  --color-lcc-soft: var(--lcc-bg);
  --color-admin: var(--indigo);
  --color-admin-soft: var(--indigo-bg);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-3xs: 9px;
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 22px;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;
  --leading-tight: 1.3;
  --leading-normal: 1.5;
  --leading-loose: 1.6;
  --tracking-wide: .5px;
  --tracking-wider: .8px;

  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;
  --space-10: 32px;

  /* Shared control height — search fields, filters, finance forms, tabs. */
  --control-h: 40px;
  --control-h-lg: 44px;

  --radius-sm: 4px;
  --radius-pill: 999px;
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, .2);
  --transition: .15s;
  --header-height: var(--header-h);
  --page-max: 1400px;
  --modal-sm: 520px;
  --modal-md: 640px;
  --modal-lg: 780px;
  --modal-xl: 860px;
}

/* ---- 2. Reset ----------------------------------------------------- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background: var(--color-canvas);
  display: flex;
  flex-direction: column;
}
html, body {
  height: 100%;
}

/* ---- 3. Base typography and links --------------------------------- */

a {
  color: inherit;
  text-decoration: none;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
}
th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--border);
  font-weight: 600;
  color: var(--gray);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ---- 4. Application shell ----------------------------------------- */

.page-content {
  flex: 1;
  padding: 24px;
  background: var(--navy-bg);
  overflow-y: auto;
}
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 24px;
}
/* The content column beside the sidebar. It kept a 240px left margin and a
 * 100vh floor from the mockups, where the sidebar was position:fixed and out of
 * flow. Every page that still uses this class now renders inside
 * .app-container, where the sidebar is a flex child taking its own width — so
 * the margin opened a second empty 240px gutter and pushed the page off the
 * right edge, and the 100vh sat below the 56px header and added a scrollbar
 * with nothing under it. Growing to fill .wrapper is the whole job. */
.content {
  flex: 1;

  /* The page gutter, the same 24px .page-content uses. This class never had
   * one: four of the six pages that use it open straight onto a .page-header,
   * and what stood in for the gutter was the left half of the margin above. */
  padding: 24px;
}

/* Two of the six bring their own centred container, and its padding is the
 * gutter there. Inside .content that would now be the second one. */
.content > .wrap,
.content > .ai-container {
  padding: 0;
}
/* Deliberately no overflow:hidden. Any overflow value other than visible makes
 * this a scroll container, and a position:sticky descendant then sticks to
 * THIS box instead of the viewport — which, since this box does not itself
 * scroll, means the topbar and sidebar inside it would simply scroll away. */
.app-container {
  display: flex;
  flex: 1;
}
.wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;

  /* Fills what is left of the viewport rather than asking for all of it. The
   * old min-height:100vh sat below a 56px header inside a body of height
   * 100%, so every page was 56px taller than the viewport — a scrollbar with
   * nothing under it — and the overflow is what squeezed the header. flex: 1
   * above already grows this to the space that remains. */
  min-height: 0;

  /* And no wider than what is left of it. A flex item's automatic minimum size
   * is its content's, so beside the sidebar this box refused to go below the
   * width of the widest thing on the page — a ten-tab bar, a wide table — and
   * pushed the whole document sideways instead. The scrollbar then ran under
   * the header and the sidebar, which is the one place a horizontal scrollbar
   * must never be. Zero here hands the overflow back to the element that
   * declared overflow-x: auto for it, so the tab bar scrolls, not the page. */
  min-width: 0;
}

/* The offset belongs to the fixed sidebar, not to .wrapper itself. #nav is
 * position:fixed and out of flow, so the content beside it has to be pushed
 * clear by hand. A server-rendered .sidebar inside .app-container is in flow
 * and already takes its own width, so the same margin there would open a
 * second 260px gap. */
#nav ~ .wrapper {
  margin-left: 260px;
  transition: margin-left .16s ease;
}
.app-container > .wrapper {
  margin-left: 0;
}

/* Collapsed, the fixed panel is a rail, so the content beside it reclaims the
 * difference. The server-rendered sidebar is in flow and narrows itself; only
 * the fixed one needs its neighbour moved by hand. */
body.nav-collapsed #nav ~ .wrapper {
  margin-left: var(--nav-rail);
}

/* ---- 5. Top bar and header ---------------------------------------- */

.header {
  background: var(--navy);
  color: var(--white);
  padding: 0 32px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 110;
  width: 100%;
  box-sizing: border-box;

  /* Without this the header was not 56px on any page — it measured 36.
   *
   * body is a flex column of height 100%, and .wrapper below asks for a
   * min-height of 100vh. That is 100vh + 56px of content in a 100vh box, so
   * the browser shrinks what it may; .wrapper has a min-height and refuses,
   * which leaves the header to absorb all 20px. It stopped at 36 only because
   * a flex item will not shrink below its content, and the user avatar is
   * 32px tall.
   *
   * Everything that pins itself below the header — the sidebar, the topbar
   * with the page title and breadcrumb — offsets by --header-h, the declared
   * 56px. So the header ended 20px above where the rest of the page began,
   * and that band of page background was the white strip across the top. */
  flex-shrink: 0;
}

/* The header's single row. js/header.js used to build this with inline styles —
 * a flex row at width:100% with margin-left:auto on the user block — and those
 * styles left with the script. Without them the header collapsed to its content
 * width and the user block sat beside the logo on the LEFT instead of at the far
 * right. The .header rule above cannot do it: space-between has no effect when
 * the header has a single child. */
.header-inner {
  display: flex;
  align-items: center;
  width: 100%;
}
.header-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: right;
}

.logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.5px;
  white-space: nowrap;
}
.logo span {
  color: var(--accent-light);
}
.header-nav {
  display: flex;
  gap: 4px;
  margin-left: 24px;
}
.header-nav a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  transition: .15s;
  font-weight: 500;
}
.header-nav a:hover {
  color: var(--white);
  background: rgba(255,255,255,.08);
}
.header-nav a.active {
  color: var(--white);
  background: rgba(255,255,255,.12);
  font-weight: 600;
}
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--accent),var(--accent-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}
.user-name {
  font-size: 13px;
  font-weight: 500;
}
.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.user-tier {
  font-size: 11px;
  color: rgba(255,255,255,.6);
}
/* The topbar stays put while the page scrolls. The viewport is what scrolls
 * here — .wrapper is min-height:100vh inside a body of height:100%, so it
 * overflows and the scroll happens at the top level — which means sticky is
 * enough and no ancestor may become a scroll container. See the note on
 * .app-container in 04-shell.css.
 *
 * It pins BELOW the header, which is itself sticky at top:0 and 56px tall. The
 * offset only applies when a header is actually rendered; the layout puts
 * has-header on <body> so pages without one pin flush to the top instead of
 * leaving a 56px gap. z-index sits under the header's 100 so the two overlap in
 * the right order. */
.topbar {
  background: var(--white);
  padding: 16px 24px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  /* Stay inside the content column — never cover the navy nav rail. */
  z-index: 85;
}
.has-header .topbar {
  top: var(--header-h);
}
/* Heading and trail stack: the trail is a row of its own under the h1, not a
 * second thing on the title line. Side by side it read as part of the heading
 * — "Corporate Audit Log  Home / Corporate / Corporate Audit Log" on one line —
 * and on the deeper trails it pushed the user block towards the right edge.
 *
 * align-items:flex-start rather than the inherited stretch so neither child
 * spans the bar's full width and the trail's links stay clickable only where
 * the words are. */
.topbar-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.topbar-left h1 {
  font-size: 20px;
  color: var(--navy);
}
.breadcrumb {
  font-size: 12px;
  color: var(--grey-500);
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* The language selector, as the dashboard authored it. The generic .lang-sw in
 * the components layer is a white-filled control used elsewhere; inside the
 * topbar it sits on the bar itself. */
.topbar .lang-sw,
.topbar .currency-sw {
  margin-right: 0;
  padding: 4px 6px;
  background: transparent;
  color: var(--grey-600);
  border: 1px solid var(--grey-300);
  border-radius: 6px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
.topbar-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
}
.topbar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--grey-800);
}
.topbar-left h1 {
  font-size: 20px;
  color: var(--navy);
}
#nav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 260px;
  background: var(--navy);
  color: var(--white);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

/* #nav is fixed at top:0 and carries the same z-index as the header, and the
 * layout mounts it after the header — so on the ten pages that have both, it
 * painted over the header's left 260px and took the logo and the Dashboard
 * link with it. The server-rendered .sidebar already offsets itself by the
 * header's height (see .app-container > .sidebar in 06-sidebar.css); this is
 * that same rule for the client-rendered panel.
 *
 * top and bottom together give the height, so the panel still ends at the
 * viewport floor and keeps scrolling on its own — there is no height to
 * correct alongside this. Only under .has-header: pages without a header must
 * keep pinning flush to the top rather than leaving a 56px gap. */
.has-header #nav {
  top: var(--header-h);
  z-index: 95;
}
#nav .logo {
  padding: 20px 20px 12px;
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 8px;
}
#nav .logo span {
  color: var(--accent-light);
}
#nav .nav-section {
  padding: 12px 20px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.4);
}
#nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-size: 13px;
  border-radius: 6px;
  margin: 0 8px;
  transition: .12s;
}
#nav a:hover {
  background: rgba(255,255,255,.08);
  color: var(--white);
}
#nav a.active {
  background: rgba(255,255,255,.12);
  color: var(--white);
  font-weight: 600;
}
#nav nav {
  padding: 0;
}
.brand {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 18px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand .b-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 16px;
  font-weight: 800;
}
/* .topbar-left was declared a second time here, identically, and being the
 * later rule it was the one that won. Removed rather than edited in both
 * places: two copies of a layout is how the stacking above would have been
 * silently undone. */
.topbar-name {
  font-size: 14px;
  font-weight: 500;
}
.topbar-role {
  font-size: 11px;
  color: var(--gray-500);
}

/* The language selector when it sits in the dark header rather than the white
 * topbar. signin and register both wrote this into a style attribute, which is
 * how a control on a navy bar ended up with the light theme's border. */
.header .lang-sw {
  background: transparent;
  color: var(--on-dark);
  border: 1px solid var(--on-dark-border);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 11px;
  cursor: pointer;
  outline: none;
  font-family: inherit;
}

/* ---- 6. Sidebar navigation ---------------------------------------- */

.sidebar {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The registry records each sidebar's authored width. It used to reach the
 * markup as style="width:240px", which is the one thing a stylesheet cannot
 * theme or override. The width travels as a data attribute instead, so the
 * value stays in the registry and the rule stays here. Both widths that exist
 * in the product are listed; 260px above remains the default for markup that
 * declares nothing. */
.sidebar[data-width="240"] { width: 240px; }
.sidebar[data-width="260"] { width: 260px; }

/* The server-rendered sidebar stays put while the page scrolls, matching the
 * client-rendered #nav, which is position:fixed and never moved.
 *
 * align-self is required: a flex child stretches to the line's full height by
 * default, so it would already be as tall as the scrollable content and would
 * never have anything to stick for. Pinning it to the top and capping its
 * height gives it somewhere to stick, and lets a long nav scroll on its own. */
.app-container > .sidebar {
  position: sticky;
  top: var(--header-h);
  align-self: flex-start;

  /* Above the white topbar (z 85) so sticky scroll never paints the topbar
   * over the navy rail. Below the brand header (z 110). */
  z-index: 95;

  /* The panel is the column, not just the links in it. This was max-height, so
   * a nav with six sections painted a dark block over the top half of the
   * column and left the rest on the page background — the panel looked cut in
   * half on every page whose nav is short. The mockups all declared
   * height: calc(100vh - 56px) on a fixed panel; this is that height on the
   * sticky one, and it is still what the nav scrolls inside. */
  height: calc(100vh - var(--header-h));
  overflow-y: auto;

  /* Every rule below styles this panel for a dark ground — the links are white
   * at 65% and the dividers are white at 10% — but nothing ever laid that
   * ground down, so the server-rendered sidebar was white text on the page
   * background and read as an empty column. #nav sets the same two values for
   * the client-rendered panel; this is that pair for its counterpart. */
  background: var(--navy);
  color: var(--white);
}
body:not(.has-header) .app-container > .sidebar {
  top: 0;
  height: 100vh;
}
.sidebar nav {
  padding: 8px 0;
  flex: 1;
  overflow-y: auto;
}
.sidebar-header {
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.sidebar-header::after {
  content: '\25B6';
  font-size: 7px;
  transition: transform 0.2s;
  color: rgba(255,255,255,0.3);
}
.sidebar-header:hover {
  color: var(--white);
  background: rgba(255,255,255,0.05);
}
.sidebar-header.active::after {
  transform: rotate(90deg);
}
.sidebar-items {
  display: none;
}
/* Expanded state. The section that matches the current page is rendered open
 * by the server; js/layout.js toggles this class thereafter. Neither writes to
 * element.style, so the open/closed look is styleable and themeable here. */
.sidebar-items.is-open {
  display: block;
}
.sidebar-items a {
  padding-left: 28px;
  font-size: 12px;
}
.sidebar-footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 11px;
  color: rgba(255,255,255,.3);
}
.sidebar-logo {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-logo .sub {
  font-size: 10px;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}
.sidebar-logo h1 {
  font-size: 18px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.5px;
}
.sidebar-logo span {
  color: var(--accent);
}
.sidebar-nav {
  padding: 12px 0;
  flex: 1;
  overflow-y: auto;
}
.sidebar-nav .nav-icon {
  width: 18px;
  text-align: center;
  font-size: 14px;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: .15s;
  border-left: 3px solid transparent;
}
.sidebar-nav a:hover {
  color: var(--white);
  background: var(--sidebar-hover);
}
.sidebar-nav a.active {
  color: var(--white);
  background: rgba(22,104,227,.12);
  border-left-color: var(--accent);
  font-weight: 600;
}
.sidebar .brand {
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar .brand .b-icon {
  width: 26px;
  height: 26px;
  background: var(--accent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 13px;
  transition: all 0.15s;
}
.sidebar nav a:hover {
  background: rgba(255,255,255,0.05);
  color: var(--white);
}
.sidebar nav a.active {
  background: var(--accent);
  color: var(--white);
}
.sidebar a {
  display: block;
  padding: 10px 20px 10px 28px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: .15s;
  border-left: 3px solid transparent;
}
.sidebar a:hover {
  color: var(--white);
  background: var(--sidebar-hover);
}
.sidebar a.active {
  color: var(--white);
  background: rgba(22,104,227,.12);
  border-left-color: var(--accent);
  font-weight: 600;
}
/* Roadmap entries (e.g. Transfers) stay visible but are not clickable. */
.sidebar .nav-link.is-disabled {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px 10px 28px;
  color: rgba(255,255,255,.35);
  font-size: 13px;
  font-weight: 500;
  border-left: 3px solid transparent;
  cursor: not-allowed;
  user-select: none;
}
.sidebar .nav-link.is-disabled .nav-soon {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.08);
}

/* ---- Collapse -------------------------------------------------------
 *
 * The panel narrows to a rail rather than disappearing, so the control that
 * brings it back is always on screen and the client-rendered nav stays usable
 * as icons. layout.js holds the state on <body> and in localStorage, so the
 * choice survives navigation — which matters now that every page the sidebar
 * links to renders one.
 *
 * Everything below is scoped to #nav or to .app-container > .sidebar. Bare
 * .sidebar is also the filter aside on flights and hotels, and that panel is
 * page content, not chrome — it must not collapse with the nav. */

/* Pinned to the panel's top corner rather than laid out above the list. In
 * flow it was a flex row of its own, and a 28px button with nothing beside it
 * pushed every entry down by ~48px — an empty band across the top of the menu
 * on every page. Here it shares the line with the first section caption, which
 * is short text on the left, and the list starts where it used to. */
.nav-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, transform .16s ease;
}
.nav-toggle:hover {
  background: rgba(255,255,255,.16);
  color: var(--white);
}
/* One glyph for both states: pointing at the edge it moves toward. */
body.nav-collapsed .nav-toggle {
  left: 50%;
  right: auto;
  transform: translateX(-50%) rotate(180deg);
}

/* The scroll moves to the list so the button stays put in a long menu: an
 * absolutely positioned child of a scroll container scrolls away with it.
 *
 * Neither panel needs position:relative to anchor the button — #nav is fixed
 * and this one is sticky, and both are already containing blocks. Setting it
 * here would land after those rules and unfix them. */
#nav,
.app-container > .sidebar {
  overflow: hidden;
  transition: width .16s ease;
}
#nav > nav,
.app-container > .sidebar > nav,
.app-container > .sidebar > .sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* The client-rendered nav keeps its icons and drops the labels. */
body.nav-collapsed #nav {
  width: var(--nav-rail);
}
/* Expanded, the button shares the first caption's line. Collapsed there is no
 * caption left to share with — the rail centres the button over the list, so
 * the list has to start below it. */
body.nav-collapsed #nav > nav {
  padding-top: 44px;
}
body.nav-collapsed #nav a {
  justify-content: center;
  gap: 0;
  padding: 10px 0;
}
body.nav-collapsed #nav a span {
  display: none;
}
/* The section captions have nothing to shorten to, so they become the rule
 * that separated them anyway. */
body.nav-collapsed #nav .nav-section {
  height: 0;
  padding: 0;
  margin: 10px 14px 6px;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.12);
}

/* The server-rendered nav is text with no icon vocabulary to fall back on, so
 * collapsing hides the list outright and leaves the rail and its toggle. */
body.nav-collapsed .app-container > .sidebar {
  width: var(--nav-rail);
  overflow: hidden;
}
body.nav-collapsed .app-container > .sidebar nav,
body.nav-collapsed .app-container > .sidebar .brand,
body.nav-collapsed .app-container > .sidebar .sidebar-nav,
body.nav-collapsed .app-container > .sidebar .sidebar-logo {
  display: none;
}

/* ---- 7. Buttons --------------------------------------------------- */

.btn {
  padding: 10px 24px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  transition: .15s;
}
.btn-outline {
  padding: 6px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--grey-300);
  background: var(--white);
  color: var(--grey-600);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: .15s;
}
/* .btn-action sets border:none and is declared after .btn-outline, so on a
 * button carrying both the outline simply disappeared. Same specificity, later
 * rule wins — put the border back for the combination. It sits above :hover so
 * the hover border-color still wins. */
.btn-action.btn-outline {
  border: 1px solid var(--grey-300);
}
.btn-outline:hover {
  border-color: var(--navy);
  color: var(--navy);
}
.btn-accent {
  background: var(--accent);
  color: var(--white);
}
.btn-accent:hover {
  background: var(--accent-light);
}
.btn-sm {
  padding: 6px 14px;
  font-size: 12px;
}
.btn-navy {
  background: var(--navy);
  color: var(--white);
}
.btn-navy:hover {
  background: var(--navy-light);
}
.btn-danger {
  background: var(--red);
  color: var(--white);
}
.btn-red {
  background: var(--red);
  color: var(--white);
}
.btn-danger:hover {
  opacity: .9;
}
.btn-primary {
  background: var(--accent);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--accent-dark);
}
.btn-red:hover {
  opacity: .9;
}
.btn:disabled {
  opacity: .5;
  cursor: default;
}
.btn-success {
  background: var(--green);
  color: var(--white);
}
.btn-green {
  background: var(--green);
  color: var(--white);
}
.btn-success:hover {
  opacity: .9;
}
.btn-green:hover {
  opacity: .9;
}
.btn-action {
  padding: 7px 14px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: .15s;
  white-space: nowrap;
}
.btn-lg {
  padding: 14px 32px;
  font-size: 15px;
  width: 100%;
}
.btn-sec {
  padding: 8px 12px;
  background: var(--white);
  color: var(--grey-600);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 12px;
  cursor: pointer;
  transition: .15s;
}
.btn-sec:hover {
  border-color: var(--navy);
  color: var(--navy);
}

/* ---- 8. Cards and panels ------------------------------------------ */

.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  overflow: hidden;
  margin-bottom: 16px;
}
/* A card standing in for a module that has no screen yet. The four stub pages
 * (the three rule engines and the dynamic wrapper) each redefined .card to get
 * this — padded, centred, muted — which cost them the shared card's border
 * radius and border colour. Named here instead, so a stub looks like a card
 * that is deliberately empty rather than a differently-built one. */
.card-placeholder {
  padding: 24px;
  text-align: center;
  color: var(--gray);
}
.card-header {
  padding: 12px 16px;
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.card-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--navy);
}
.card-body {
  padding: 0;
}
.card-stat {
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.card-stat .cs-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--white);
  flex-shrink: 0;
}
.card-stat .cs-label {
  font-size: 12px;
  color: var(--gray);
}
.card-stat .cs-num {
  font-size: 22px;
  font-weight: 700;
}
.card-header h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--grey-800);
}
/* The plain "view all" link a card header carries beside its title. A button
 * that happens to be an anchor is not one of these: this rule outweighs
 * .btn-primary's own colour, which painted the label in the accent — the same
 * colour as the button it sits on, so the text disappeared entirely. */
.card-header a:not(.btn) {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
.card-header a:not(.btn):hover {
  text-decoration: underline;
}
.stat-card {
  background: var(--white);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  min-height: 96px;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
/* A tile whose own number is the alert - the AI Control page toggles this on
 * an error-rate or slow-response tile rather than adding a second badge next
 * to a number that already says the same thing. */
.stat-card-alert {
  border-color: var(--red-border);
  background: var(--red-bg);
}
.stat-card-alert .stat-value {
  color: var(--red);
}
.card-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: stretch;
}
.stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  font-weight: 600;
  margin-bottom: 8px;
}
.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.stat-value-text {
  font-size: 18px;
}

/* ---- 9. Tables ---------------------------------------------------- */

.fx-table {
  width: 100%;
  border-collapse: collapse;
}
.fx-table td {
  padding: 10px 12px;
  text-align: center;
  border-bottom: 1px solid var(--grey-200);
  font-size: 13px;
  vertical-align: middle;
}
.fx-table th {
  padding: 8px 12px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--grey-500);
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
}
.fx-table tr:last-child td {
  border-bottom: none;
}
.fx-table tbody tr:hover {
  background: var(--navy-pale);
}
.fx-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--navy);
}
.fx-table th:first-child {
  text-align: left;
}
.fx-table tbody tr {
  cursor: pointer;
}
.fx-table tr:hover td {
  background: var(--navy-pale);
}

/* ---- 10. Badges, tags and status ----------------------------------- */

/* A badge is one label, and a two-word one ("Awaiting setup", "Pending
 * review") broke over two lines the moment its column was the narrowest on
 * the table — 10px type wrapped inside a 4px-radius pill reads as a rendering
 * fault. The column widens instead. */
.status-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.status-badge.active {
  background: var(--green-bg);
  color: var(--green);
}
.badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}
.status-badge.inactive {
  background: var(--grey-100);
  color: var(--grey-600);
}
.badge.active {
  background: var(--green-bg);
  color: var(--green);
}
.status-badge.pending {
  background: var(--amber-bg);
  color: var(--amber);
}
.status-badge.failed {
  background: var(--red-bg);
  color: var(--red);
}
.badge.pending {
  background: var(--amber-bg);
  color: var(--amber);
}
.badge.inactive {
  background: var(--gray-bg);
  color: var(--gray);
}
.status-badge.approved {
  background: var(--accent-bg);
  color: var(--accent);
}
.badge-cancelled {
  background: var(--red-bg);
  color: var(--red);
}
.badge-draft {
  background: var(--grey-100);
  color: var(--grey-600);
}
.badge-final,.badge-paid {
  background: var(--green-bg);
  color: var(--green);
}
.badge-pending_review,.badge-pending {
  background: var(--amber-bg);
  color: var(--amber);
}
.badge-unpaid,.badge-overdue {
  background: var(--orange-bg);
  color: var(--orange);
}
.badge.completed {
  background: var(--green-bg);
  color: var(--green);
}
.badge.failed {
  background: var(--red-bg);
  color: var(--red);
}
.badge.processing {
  background: var(--accent-bg);
  color: var(--accent);
}
.status-badge.completed {
  background: var(--green-bg);
  color: var(--green);
}
.status-badge.in_progress {
  background: var(--amber-bg);
  color: var(--amber);
}
.status-badge.no {
  background: var(--grey-100);
  color: var(--grey-600);
}
.status-badge.yes {
  background: var(--green-bg);
  color: var(--green);
}

/* The generic good/bad pair, for a badge whose text is the value itself
 * ("Include" / "Exclude") rather than a status word with a class of its own.
 * .yes and .no above are not it: .no is the neutral grey used for "not
 * restricted", which is an answer, not a warning. */
.status-badge.positive {
  background: var(--green-bg);
  color: var(--green);
}
.status-badge.negative {
  background: var(--red-bg);
  color: var(--red);
}

/* ---- 11. Forms -----------------------------------------------------
 * Heights and gaps use design tokens so search, finance, and module forms
 * share one control size. Do not invent per-page paddings. */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
.form-group {
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.form-label {
  display: block;
  font-size: var(--text-2xs, 11px);
  font-weight: var(--weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--grey-500);
  margin-bottom: 0;
  line-height: var(--leading-tight);
  min-height: 1.3em;
}
.form-group label {
  display: block;
  font-size: var(--text-2xs, 11px);
  font-weight: var(--weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--grey-500);
  margin-bottom: 0;
  line-height: var(--leading-tight);
  min-height: 1.3em;
}
.form-group input,
.form-group select,
.form-group textarea,
.form-control,
.form-input {
  width: 100%;
  min-height: var(--control-h);
  height: var(--control-h);
  padding: 0 var(--space-5);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: var(--text-sm, 13px);
  font-family: inherit;
  outline: none;
  background: var(--white);
  color: var(--grey-800);
  box-sizing: border-box;
}
.form-group textarea,
textarea.form-control,
textarea.form-input {
  height: auto;
  min-height: 80px;
  padding: var(--space-4) var(--space-5);
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-5);
  margin-top: var(--space-5);
  border-top: 1px solid var(--grey-200);
  align-items: center;
}
.form-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-9);
}
.form-control:focus,
.form-input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,105,92,.12);
}

/* ---- 12. Modals and overlays --------------------------------------- */

.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
}
.modal-body {
  padding: 16px 20px;
}
.modal-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--grey-100);
  cursor: pointer;
  font-size: 16px;
  color: var(--grey-500);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
}
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--grey-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 2;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-close:hover {
  background: var(--red-bg);
  color: var(--red);
}
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.4);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open {
  display: flex;
}
.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}
.modal-section {
  margin-bottom: 16px;
}
.modal-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--navy);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--grey-200);
}
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--grey-200);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.modal-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.modal-content {
  background: var(--white);
  border-radius: var(--radius);
  width: 100%;
  max-width: 520px;
  padding: 24px;
  position: relative;
}
.modal-content h2 {
  margin-bottom: 16px;
  font-size: 18px;
}
.modal-content input,.modal-content select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.modal-content input:focus,.modal-content select:focus {
  border-color: var(--accent);
}
.modal-content label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray);
  margin-bottom: 4px;
  margin-top: 12px;
}
.modal-content .form-hint {
  font-size: 11px;
  color: var(--gray);
  margin: -2px 0 8px;
  font-weight: 400;
}
.modal-content textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  min-height: 72px;
  resize: vertical;
}
.modal-content textarea:focus {
  border-color: var(--accent);
}
.modal-content .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.modal-content .form-row > div {
  min-width: 0;
}
.modal-content .form-row label:first-child {
  margin-top: 12px;
}
.modal-content-wide {
  max-width: 640px;
}
/* List-page create dialogs: full-viewport overlay (matches finance mockups).
 * Without display:none these sat inline on the page and looked "already open". */
.modal#createModal {
  display: none;
  position: fixed;
  inset: 0;
  width: auto;
  max-height: none;
  overflow-y: auto;
  background: rgba(0, 0, 0, .45);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  border-radius: 0;
  padding: 24px 16px;
}
.modal#createModal.open {
  display: flex;
}
.modal#createModal[hidden] {
  display: none !important;
}
.modal.open {
  display: flex;
}
.modal-header h2 {
  font-size: 15px;
  font-weight: 700;
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,40,85,.45);
  z-index: 200;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;
  overflow-y: auto;
}
.overlay.show {
  display: flex;
}

/* ---- 13. Tabs, filters and toolbars -------------------------------- */

.search-input {
  min-height: var(--control-h);
  height: var(--control-h);
  padding: 0 var(--space-5);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: var(--text-sm, 13px);
  font-family: inherit;
  outline: none;
  width: 200px;
  max-width: 100%;
  background: var(--white);
  box-sizing: border-box;
}
.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,105,92,.12);
}
.filter-select,
.filter-input {
  min-height: var(--control-h);
  height: var(--control-h);
  padding: 0 var(--space-5);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: var(--text-sm, 13px);
  color: var(--grey-700);
  background: var(--white);
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
}
.filter-bar {
  display: flex;
  gap: var(--space-5);
  align-items: flex-end;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.filter-group label {
  font-size: var(--text-2xs, 10px);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--grey-500);
  letter-spacing: var(--tracking-wide);
  min-height: 1.3em;
  line-height: var(--leading-tight);
}
.toolbar {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.tab-btn {
  flex: 1;
  min-height: var(--control-h-lg);
  height: var(--control-h-lg);
  padding: 0 var(--space-7);
  border: none;
  background: var(--white);
  font-size: var(--text-sm, 13px);
  font-weight: 600;
  cursor: pointer;
  transition: .15s;
  color: var(--grey-600);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.tab-btn.active {
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
}
.filter-select:focus,
.filter-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,105,92,.12);
}
.tab-btn:hover {
  color: var(--navy);
  background: var(--grey-50);
}
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}
.tab-bar {
  display: flex;
  gap: 0;
  padding: 0;
  margin-bottom: var(--space-6);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-bottom: 1px solid var(--grey-200);
  align-items: stretch;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}
/* 200px, unless the bar it sits in is narrower than that — beside a sidebar on
 * a phone it is, and a fixed width there scrolls the whole page sideways. */
.filter-input {
  padding: 6px 10px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--grey-700);
  background: var(--white);
  font-family: inherit;
  outline: none;
  width: 200px;
  max-width: 100%;
}
.filter-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,105,92,.12);
}
.tab {
  padding: 10px 20px;
  font-size: 13px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--gray);
  font-family: inherit;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.filter-apply-btn {
  width: 100%;
  padding: 8px;
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}
.filter-apply-btn:hover {
  background: var(--navy-light);
}
.filter-body {
  padding: 10px 14px;
}
.filter-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  overflow: hidden;
}
.filter-head {
  padding: 11px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--navy);
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tab-btn:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}
.tab-btn:hover:not(.active) {
  background: var(--navy-pale);
  color: var(--navy);
}
.tab-btn:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}
.tab-btn:not(:first-child) {
  border-left: 1px solid var(--grey-300);
}
.tab:hover {
  color: var(--grey-800);
}

/* ---- 14. Media queries --------------------------------------------- */

@media (max-width: 480px) {.modal-header h2{font-size:13px}}
@media (max-width: 768px) {.header{padding:0 12px}.header-nav{display:none}.user-tier{display:none}.section-title{padding:16px 12px 0;font-size:18px}.section-desc{padding:2px 12px 8px;font-size:12px}.tab-bar{padding:0 12px;overflow-x:auto;gap:0}.tab-btn{padding:8px 12px;font-size:12px}.filter-bar{padding:8px 12px}.matrix-search{width:100%}.matrix-section{margin:0 12px}.pagination{margin:8px 12px;flex-wrap:wrap;gap:8px}.page-btns .page-btn:not(.active){display:none}.page-btn.active{display:inline-block}.split-view{grid-template-columns:1fr;margin:0 12px}.split-list{border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-right:1px solid var(--grey-200)}.split-detail{border-radius:0 0 var(--radius-lg) var(--radius-lg)}.modal{max-width:100%;margin:0;border-radius:0;min-height:100vh}.modal-body{max-height:none}.overlay{padding:0;align-items:stretch}.modal-body .form-row{grid-template-columns:1fr}.calendar-layout{grid-template-columns:1fr;margin:0 12px}.calendar-grid{margin:0 12px}.calendar-header{margin:0 12px 0}.calendar-grid .cal-day{min-height:60px;font-size:11px}.matrix-table thead{display:none}.matrix-table,.matrix-table tbody,.matrix-table tr,.matrix-table td{display:block}.matrix-table tr{padding:12px;border-bottom:1px solid var(--grey-200)}.matrix-table tr:hover td{background:transparent}.matrix-table td{padding:2px 0;text-align:left;border:none;font-size:12px}.matrix-table td:first-child{padding-left:0;font-size:13px;font-weight:700}}

/* ---- 15. Keyframes ------------------------------------------------- */

@keyframes spin {to{transform:rotate(360deg)}}
@keyframes s {to{transform:rotate(360deg)}}
@keyframes slideUp {from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes tdot {
  0%,60%,100%{opacity:.3;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}
}

/* ---- 16. Components ------------------------------------------------ */

.empty-state {
  padding: 24px;
  text-align: center;
  color: var(--grey-400);
  font-style: italic;
}
.lang-sw,
.currency-sw {
  margin-right: 8px;
  padding: 2px 6px;
  font-size: 11px;
  border: 1px solid var(--grey-300);
  border-radius: 4px;
  background: var(--white);
  cursor: pointer;
}
.page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
}
.pagination {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.loading-state {
  padding: 40px;
  text-align: center;
  color: var(--grey-400);
  font-style: italic;
}
.fx-action-btn {
  padding: 4px 8px;
  font-size: 10px;
  border: 1px solid var(--grey-300);
  border-radius: 4px;
  background: var(--white);
  color: var(--grey-600);
  cursor: pointer;
  transition: .15s;
  font-weight: 600;
}
.fx-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.fx-action-btn.primary {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
/* ---- Breadcrumb -----------------------------------------------------
 *
 * The trail is an <ol> now rather than a line of text, so the rules below are
 * what turn a list back into one line. It renders in two places — inside the
 * topbar, and in a bar of its own on the 55 pages that have no topbar — and
 * both use this same component; only .breadcrumb-bar adds the surrounding
 * padding the topbar already provides.
 *
 * The separator is a ::before on every item but the first. Written into the
 * markup it would be read aloud between every step; drawn here it is decoration
 * and a screen reader skips it. */
.breadcrumb {
  font-size: 12px;
  color: var(--gray-500);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.breadcrumb li + li::before {
  content: "/";
  color: var(--gray-400);
}
.breadcrumb a {
  color: var(--gray-500);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--accent);
  text-decoration: underline;
}
/* The page you are on: the end of the trail, and the only entry that is not a
 * link, so it is weighted rather than coloured to say so. */
.breadcrumb [aria-current="page"] {
  color: var(--gray-700);
  font-weight: 600;
}

/* The standalone bar. It sits above the page body on every page without a
 * topbar, and matches the 24px the .page-content wrapper uses so the trail
 * lines up with the content beneath it rather than floating off the edge. */
.breadcrumb-bar {
  padding: 12px 24px 0;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.edit-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 12px;
}
.fx-actions {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.edit-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}
.edit-field label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
}
.page-header {
  margin-bottom: 24px;
}
.page-desc {
  font-size: 12px;
  color: var(--grey-500);
  margin-bottom: 16px;
}
.page-header .sub {
  font-size: 13px;
  color: var(--gray);
  margin-top: 2px;
}
.page-header h1 {
  font-size: 22px;
  font-weight: 600;
}
footer {
  border-top: 1px solid var(--gray-200);
  padding: 16px 24px;
  font-size: 12px;
  color: var(--gray-400);
  background: var(--white);
  text-align: center;
}
tr:hover td {
  background: var(--gray-50);
}
.summary-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.edit-field input,.edit-field select,.edit-field textarea {
  padding: 6px 10px;
  border: 1px solid var(--grey-300);
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  background: var(--white);
}
.edit-field input:focus,.edit-field select:focus,.edit-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,105,92,.12);
}
.fx-action-btn.primary:hover {
  background: var(--accent-light);
}
.edit-field textarea {
  resize: vertical;
  min-height: 60px;
}
.page-btn {
  padding: 6px 11px;
  border: 1px solid var(--grey-300);
  background: var(--white);
  border-radius: var(--radius);
  font-size: 12px;
  cursor: pointer;
  color: var(--grey-700);
}
.page-btn:disabled {
  opacity: .4;
  cursor: default;
}
.page-btn:hover {
  border-color: var(--navy);
  color: var(--navy);
}
.page-btn.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.page-btns {
  display: flex;
  gap: 3px;
}
.page-info {
  font-size: 13px;
  color: var(--grey-500);
}
.page-info strong {
  color: var(--grey-800);
}
.pagination .page-info {
  font-size: 11px;
  color: var(--grey-500);
  margin: 0 8px;
}
.edit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.error-state {
  padding: 40px;
  text-align: center;
  color: var(--red);
}
.form-error {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  line-height: 1.45;
}

/* The outcome of an action, shown in place rather than as a toast — for a
 * result the operator needs to keep reading while they carry on working.
 * Started life as .engine-result on the FX settings page; a second page wanted
 * the same thing, which is the point at which it moves here. */
.result-banner {
  padding: 10px 16px;
  margin-bottom: 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
}
.result-banner.busy {
  background: var(--amber-bg);
  color: var(--amber);
  border-color: var(--amber-border);
}
.result-banner.ok {
  background: var(--green-bg);
  color: var(--green);
  border-color: var(--green-border);
}
.result-banner.failed {
  background: var(--red-bg);
  color: var(--red);
  border-color: var(--red-border);
}
.fx-action-btn.green {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
.fx-action-btn.green:hover {
  opacity: .9;
}
.fx-action-btn.red {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.fx-action-btn.red:hover {
  opacity: .9;
}
.lang-sw option {
  color: var(--grey-800);
  background: var(--white);
}
.lang-sw:hover {
  border-color: rgba(255,255,255,.5);
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.detail-item {
  padding: 8px 10px;
  background: var(--grey-50);
  border-radius: var(--radius);
  border: 1px solid var(--grey-200);
}
.error-msg {
  font-size: 14px;
  color: var(--grey-600);
  max-width: 480px;
  margin: 0 auto 20px;
  line-height: 1.6;
}
.layout {
  display: flex;
  min-height: 100vh;
}
.pagination button {
  padding: 6px 12px;
  border: 1px solid var(--grey-300);
  border-radius: 4px;
  background: var(--white);
  color: var(--grey-600);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: .15s;
  font-family: inherit;
}
.pagination button:disabled {
  opacity: .4;
  cursor: default;
}
.pagination button:hover {
  border-color: var(--navy);
  color: var(--navy);
}
.pagination button.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.loading {
  text-align: center;
  padding: 48px;
  color: var(--grey-400);
}
.section-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
  padding: 20px 0 12px;
  border-bottom: 1px solid var(--grey-200);
  margin-bottom: 16px;
}
.fg {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  justify-content: flex-end;
}
.fg .fg-label {
  font-size: var(--text-2xs, 11px);
  font-weight: var(--weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--grey-500);
  line-height: var(--leading-tight);
  min-height: 1.3em;
}
.fg input,.fg select {
  min-height: var(--control-h);
  height: var(--control-h);
  padding: 0 var(--space-5);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: var(--text-sm, 13px);
  font-family: inherit;
  outline: none;
  min-width: 0;
  background: var(--white);
  box-sizing: border-box;
}
.fg input:focus,.fg select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,105,92,.12);
}
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--grey-200);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: s .6s linear infinite;
}
/* The same thing inside a button, where the track has to read against the
 * button's fill rather than the page's, and the size has to match the label. */
.spinner-inline {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.breadcrumb .current {
  color: var(--grey-600);
  font-weight: 600;
}
.breadcrumb .sep {
  color: var(--grey-400);
  font-size: 14px;
}
.cb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--grey-700);
}
.cb input {
  accent-color: var(--navy);
  width: 15px;
  height: 15px;
}
.fg-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
  margin-bottom: 0;
}
.module-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: .2s;
  cursor: pointer;
  text-decoration: none;
  display: block;
}
.module-card-accent {
  height: 3px;
  background: var(--navy-mid);
}
.module-card-accent.amber {
  background: var(--amber);
}
.module-card-accent.green {
  background: var(--green);
}
.module-card-accent.red {
  background: var(--red);
}
.module-card-body {
  padding: 18px 20px;
}
.module-card-desc {
  font-size: 12px;
  color: var(--grey-500);
  line-height: 1.5;
}
.module-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.module-card:hover {
  box-shadow: 0 4px 16px rgba(0,40,85,.08);
  border-color: var(--navy-mid);
}
.module-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
}
.step-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-400);
}
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 20px;
  border-radius: var(--radius);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  z-index: 400;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  animation: slideUp .3s ease;
}
.actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}
.edit-field select {
  cursor: pointer;
}
.matrix-header {
  padding: 12px 16px;
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.matrix-section {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  overflow: hidden;
}
/* The table itself can be wider than the panel once a route has more than a
   handful of airlines - this is what lets an agent scroll right to reach the
   rest of the columns instead of them being silently clipped by
   .matrix-section's overflow:hidden. */
.matrix-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.matrix-scroll .matrix-table {
  width: max-content;
}
.matrix-table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
}
/* The stops column stays put while the airline columns scroll under it, so
   the row label is never scrolled out of view along with them.
   inset-inline-start (not left) matters here: rtl.css sets this table's own
   `direction: rtl` for Arabic/Persian, which puts this "first" column on the
   table's visual RIGHT. A plain `left: 0` fought that and stuck it to the
   physical left instead, leaving the true left side of the matrix blank.
   inset-inline-start resolves against the element's own direction, so it
   sticks to whichever edge is actually the start in each mode. */
.matrix-table th:first-child,
.matrix-table td:first-child {
  position: sticky;
  inset-inline-start: 0;
  background: var(--white);
  z-index: 1;
}
.matrix-table th:first-child {
  background: var(--grey-50);
}
.matrix-table td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid var(--grey-200);
  font-size: 13px;
  vertical-align: middle;
}
.matrix-table td:first-child {
  text-align: left;
  padding-left: 14px;
  font-weight: 600;
  color: var(--navy);
  font-size: 12px;
}
.matrix-table th {
  padding: 8px 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--grey-500);
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  /* A floor so an airline column stays readable instead of being squeezed
     toward zero width as more airlines join the table - matrix-scroll is
     what makes the extra width reachable rather than clipped. */
  min-width: 90px;
  white-space: nowrap;
}
.matrix-table th:first-child {
  text-align: left;
  padding-left: 14px;
  min-width: 76px;
}
.matrix-table tr:last-child td {
  border-bottom: none;
}
.step-line {
  width: 60px;
  height: 2px;
  background: var(--grey-200);
  margin: 0 4px;
}
.step.active .step-num {
  background: var(--navy);
  color: var(--white);
}
.step.done .step-num {
  background: var(--green);
  color: var(--white);
}
.steps {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  gap: 0;
  margin-bottom: 20px;
}
/* Wraps rather than overflows: analytics/dashboard puts ten tabs in this bar
 * and they do not fit one row beside the sidebar on a 1440 screen. Without it
 * the last tabs are squeezed until their labels break mid-word. The pages with
 * two or three tabs never reach the wrap. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
/* Every .detail-item is a label above its value — a <span> pair, so both need
 * to be block or they run together as "AGENCY ID2001". The .di-label / .lbl
 * variants below are the same pair on a <div>, which is why they never showed
 * the fault. */
.detail-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
  margin-bottom: 2px;
}
.detail-value {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-800);
}
.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255,255,255,.2);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.msg {
  max-width: 92%;
}
.msg.ai {
  align-self: flex-start;
}
.page-title-bar {
  padding: 20px 0 8px;
}
/* The line of explanation under a page's heading. It came from the finance
 * layer, where it was written; reports is the second vertical to use it, so by
 * the rule at the top of 20-finance.css it belongs here instead. */
.page-subtitle {
  font-size: 13px;
  color: var(--grey-500);
  margin-top: 2px;
}
.role-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}
.sc-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--grey-500);
  margin-bottom: 6px;
}
.sc-sub {
  font-size: 11px;
  color: var(--grey-500);
  margin-top: 2px;
}
.sc-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
}
.sec-body {
  padding: 20px;
}
.sec-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  overflow: hidden;
}
.sec-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--grey-200);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--grey-50);
}
.sec-head .icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.sec-head .icon.amber {
  background: var(--amber-bg);
  color: var(--amber);
}
.sec-head .icon.blue {
  background: var(--navy-pale);
  color: var(--navy);
}
.sec-head .icon.green {
  background: var(--green-bg);
  color: var(--green);
}
.sec-sub {
  font-size: 11px;
  color: var(--grey-400);
}
.sec-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--grey-200);
  color: var(--grey-400);
}
.step.done .step-label,.step.active .step-label {
  color: var(--navy);
}
.sum-divider {
  height: 1px;
  background: var(--grey-200);
  margin: 10px 0;
}
.sum-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 0;
}
.sum-row .lbl {
  color: var(--grey-500);
}
.sum-row .val {
  font-weight: 600;
}
.summary-body {
  padding: 16px 20px;
}
.summary-card .sc-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--grey-500);
  margin-bottom: 4px;
}
.summary-card .sc-sub {
  font-size: 11px;
  color: var(--grey-400);
  margin-top: 4px;
}
.summary-card .sc-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
}
.summary-cards {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
  padding: 16px 0;
  margin-bottom: 24px;
}
.summary-head {
  padding: 16px 20px;
  background: var(--navy);
  color: var(--white);
}
.summary-head h3 {
  font-size: 14px;
  font-weight: 700;
}
.summary-head p {
  font-size: 11px;
  opacity: .7;
  margin-top: 2px;
}
.summary-sidebar {
  position: sticky;
  top: 72px;
  padding: 0;
}
.toast.show {
  display: block;
}
.type-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}
.ai-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.detail-item .di-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
  margin-bottom: 2px;
}
.detail-item .di-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  word-break: break-all;
}
.detail-item .lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
  margin-bottom: 2px;
}
.detail-item .val {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}
.detail-item.full {
  grid-column: 1/-1;
}
.empty-state-icon {
  font-size: 40px;
  margin-bottom: 10px;
  opacity: .3;
}
.fg label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
}
.file-name {
  font-size: 11px;
  color: var(--accent);
  margin-top: 4px;
  font-weight: 500;
  word-break: break-all;
}
.file-upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 2px dashed var(--grey-300);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--grey-500);
  cursor: pointer;
  transition: .15s;
  min-height: 44px;
  background: var(--grey-50);
}
.file-upload:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}
.fx-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-7);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--grey-300);
  align-items: stretch;
  min-height: var(--control-h-lg);
}
.fx-tabs .tab-btn {
  flex: 1;
  min-height: var(--control-h-lg);
  height: var(--control-h-lg);
  margin: 0;
}
.loading-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,40,85,.85);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}
.matrix-table tr:hover td {
  background: var(--grey-50);
}
.msg-bubble {
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.5;
  word-wrap: break-word;
}
.msg-time {
  font-size: 9px;
  color: var(--grey-400);
  margin-top: 3px;
}
.msg.ai .msg-bubble {
  background: var(--grey-100);
  color: var(--grey-800);
  border-bottom-left-radius: 4px;
}
.msg.user {
  align-self: flex-end;
}
.page-title-bar h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
}
.page-title-bar p {
  font-size: 12px;
  color: var(--grey-500);
  margin-top: 2px;
}
.pagination .page-btn {
  padding: 4px 10px;
  border: 1px solid var(--grey-300);
  border-radius: 4px;
  background: var(--white);
  color: var(--grey-600);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: .15s;
  font-family: inherit;
}
.pagination .page-btn.active {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.results-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}
.results-toolbar {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.role-badge.admin {
  background: var(--indigo-bg);
  color: var(--indigo);
}
.role-badge.finance {
  background: var(--green-bg);
  color: var(--green);
}
.role-badge.gsa_manager {
  background: var(--accent-bg);
  color: var(--accent);
}
.role-badge.msa_agent {
  background: var(--navy-pale);
  color: var(--navy);
}
.role-badge.support {
  background: var(--amber-bg);
  color: var(--amber);
}
.sc-value.amber {
  color: var(--amber);
}
.sc-value.green {
  color: var(--green);
}
.sc-value.red {
  color: var(--red);
}
.sort-select {
  padding: 6px 10px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--grey-700);
  background: var(--white);
  cursor: pointer;
}
.stats-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
  margin-bottom: 16px;
}
.success-card {
  background: var(--white);
  border: 1px solid var(--green-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
  padding: 48px 32px;
  margin-bottom: 24px;
}
.success-msg {
  background: var(--accent-bg);
  color: var(--accent);
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  display: none;
  border: 1px solid rgba(0,105,92,.2);
}
.summary-row {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.toast.info {
  background: var(--navy);
}
.toast.success {
  background: var(--green);
}
.toggle {
  position: relative;
  width: 44px;
  height: 22px;
  cursor: pointer;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The three-dot "still working" indicator, moved up from 29-booking.css: the
 * booking conversation was its only user until /support/chat borrowed it, and
 * this layer is where a component lands once a second vertical uses it.
 *
 * The first dot had no animation of its own — only :nth-child(2) and (3) were
 * given one, at .2s and .4s — so it sat still while the other two bounced.
 * It gets the same animation at no delay, which is what the two offsets are
 * offsets from. */
.typing-dot {
  display: inline-flex;
  gap: 2px;
  padding: 6px 0;
}
.typing-dot span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--grey-400);
  animation: tdot 1.2s ease-in-out infinite;
}
.typing-dot span:nth-child(2) {
  animation-delay: .2s;
}
.typing-dot span:nth-child(3) {
  animation-delay: .4s;
}
.msg-feedback {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.msg-feedback .fb-btn {
  width: 22px;
  height: 22px;
  border: 1px solid var(--grey-300);
  border-radius: 6px;
  background: var(--white);
  color: var(--grey-500);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
}
.msg-feedback .fb-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.msg-feedback .fb-btn.active {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}
.msg-feedback .fb-thanks {
  font-size: 10px;
  color: var(--grey-400);
}
.msg.ai .msg-bubble.msg-error {
  background: var(--red-bg);
  color: var(--red);
}
.visa-ai-prompt {
  display: flex;
  gap: 6px;
  margin: 8px 0 5px;
}
.visa-ai-prompt input {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--grey-300);
  border-radius: 6px;
  padding: 7px 9px;
  text-transform: uppercase;
}
.visa-ai-prompt input[aria-invalid="true"] {
  border-color: var(--red);
}
.visa-ai-prompt button {
  border: 0;
  border-radius: 6px;
  padding: 7px 10px;
  background: var(--accent);
  color: var(--white);
  cursor: pointer;
  font-weight: 700;
}
.visa-pax-result + .visa-pax-result {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--grey-200);
}
.visa-route-check {
  margin-top: 7px;
  padding: 8px 10px;
  border: 1px solid var(--grey-200);
  border-radius: 7px;
  background: var(--grey-50);
}

/* A section index: a grid of destinations, each one an icon, a name and a line
 * saying what is behind it. Two pages are that shape — Settings is the index of
 * the configuration screens and Admin is the index of the administration
 * screens — and both were redirect stubs with no markup of their own, so this
 * arrived as .settings-link in layer 24 and is shared from here instead.
 *
 * .card-cols is the row of reading cards these pages open with: side by side on
 * a wide screen, stacked on a narrow one.
 *
 * Both grids size their own columns, so there is no breakpoint to write. That
 * is deliberate: media queries belong to 14-responsive.css, which is
 * concatenated before this layer and would lose to it.
 *
 * Every track floor is min(Npx, 100%) rather than Npx. A bare minmax(260px,
 * 1fr) is a floor the track cannot go below, so in a container narrower than
 * that — which is what the 390px viewport leaves once the fixed 260px nav and
 * the 24px page padding are taken off — the grid is wider than the page and
 * the whole document scrolls sideways. The min() lets the track fall back to
 * the width actually available. */

.card-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  align-items: start;
  margin-bottom: 24px;
}

/* .card carries its own bottom margin for a stacked column. Inside a grid the
 * gap already supplies the spacing, and the margin on top of it puts dead
 * space under the shorter of the two cards. */
.card-cols .card {
  margin-bottom: 0;
}

/* .detail-grid is three fixed columns, which is a wide-card layout. Here the
 * card is half the row, so five items in three columns leave a ragged last
 * line — let the items decide how many fit. */
.card-cols .detail-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  margin-bottom: 0;
}

.link-group-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--grey-500);
  margin: 0 0 10px;
}

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.link-tile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  transition: .15s;
}

.link-tile:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

.link-tile .icon {
  flex: 0 0 36px;
  height: 36px;
  background: var(--navy-pale);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.link-tile-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}

.link-tile-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--grey-500);
}

/* Public API client administration. */
.public-api-filter {
  align-items: end;
  max-width: 640px;
}

.form-field-action {
  justify-content: end;
}

.public-api-scope-list {
  display: block;
  max-width: 320px;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.admin-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-modal);
}

.admin-dialog::backdrop {
  background: rgba(0, 0, 0, .45);
}

.policy-fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.policy-fieldset legend {
  padding: 0 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
}

.policy-fieldset-stack {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 12px;
}

.check-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--grey-800);
  cursor: pointer;
}

.check-option input {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.credential-block {
  display: grid;
  gap: 6px;
  margin: 16px 0;
}

.credential-block code {
  display: block;
  padding: 10px;
  overflow-wrap: anywhere;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--grey-50);
}

.metric-contract {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--grey-50);
}

.metric-contract-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 8px;
}

.metric-contract-grid {
  display: grid;
  gap: 6px 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  font-size: 13px;
  color: var(--grey-700);
}

.metric-contract-label {
  font-weight: 600;
  color: var(--navy);
}

.stat-card .metric-contract {
  margin: 8px 0 0;
  padding: 8px 10px;
}

.stat-card .metric-contract-grid {
  grid-template-columns: 1fr;
}

.andy-readiness {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  border: 1px solid var(--border);
}

.andy-readiness-green { background: var(--green-bg); color: var(--green); }
.andy-readiness-yellow { background: var(--amber-bg); color: var(--amber); }
.andy-readiness-red { background: var(--red-bg); color: var(--red); }

@media (max-width: 700px) {
  .public-api-filter {
    grid-template-columns: 1fr;
  }

  .form-field-action .btn {
    width: 100%;
  }
}

/* ---- 17. dashboard ----------------------------------------------
 * Components used by the dashboard pages and not provided by the layers
 * above. Adopted from those pages' <style> blocks when they were converted
 * to templates, so the pages themselves carry no CSS.
 *
 * These are ordinary components, not page styles: anything here is available
 * to every page, and belongs in an earlier layer once a second vertical uses
 * it. Colours must come from the tokens in 01-tokens.css so themes keep
 * working. */

.status-badge.expiring {
  background: var(--amber-bg);
  color: var(--amber);
}

.status-badge.expired {
  background: var(--red-bg);
  color: var(--red);
}

.logout-btn {
  background: transparent;
  border: 1px solid var(--gray-200);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  color: var(--gray-600);
  transition: 0.15s;
}

.logout-btn:hover {
  border-color: var(--navy);
  color: var(--navy);
}

/* The lock beside Logout: the way to /account/security from any page. */
.topbar-security {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 14px;
  text-decoration: none;
  transition: 0.15s;
}

.topbar-security:hover {
  border-color: var(--navy);
}

.stat-change {
  margin-top: 6px;
  font-size: 13px;
}

.stat-change.up {
  color: var(--green) !important;
}

.stat-change.down {
  color: var(--red) !important;
}

.welcome-box {
  margin-top: 16px;
  padding: 24px;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  color: var(--white);
  border-radius: 12px;
}

.welcome-box h2 {
  font-size: 22px;
  margin-bottom: 8px;
}

.welcome-box p {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
}

.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.quick-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  cursor: pointer;
  transition: 0.15s;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}

.quick-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.quick-link.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  color: var(--gray-500);
}

.quick-link.is-disabled:hover {
  border-color: var(--gray-200);
  color: var(--gray-500);
  transform: none;
  box-shadow: none;
}

.quick-link-soon {
  margin-left: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--gray-500);
  background: var(--gray-100);
}

.quick-link .icon {
  width: 40px;
  height: 40px;
  background: var(--navy-pale);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.points-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.points-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px;
  border: 1px solid var(--grey-200);
  text-align: center;
}

.points-card.balance {
  background: linear-gradient(135deg,var(--navy),var(--navy-mid));
  color: var(--white);
  border: none;
}

.points-card.balance .pc-value {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
}

.points-card.balance .pc-label {
  font-size: 14px;
  opacity: .8;
}

.points-card .pc-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}

.points-card .pc-label {
  font-size: 12px;
  color: var(--grey-500);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}

.points-card .pc-sub {
  font-size: 12px;
  color: var(--grey-400);
  margin-top: 4px;
}

.redeem-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.redeem-card .rc-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}

.redeem-card .rc-desc {
  font-size: 12px;
  color: var(--grey-500);
}

.redeem-card .rc-points {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}

.redeem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.type-badge.GDS {
  background: var(--accent-bg);
  color: var(--accent);
}

.type-badge.NDC {
  background: var(--navy-pale);
  color: var(--navy-mid);
}

.type-badge.LCC {
  background: var(--amber-bg);
  color: var(--amber);
}

/* ---- 19. corporate ----------------------------------------------
 * Components used by the corporate pages and not provided by the layers
 * above. Adopted from those pages' <style> blocks when they were converted
 * to templates, so the pages themselves carry no CSS.
 *
 * These are ordinary components, not page styles: anything here is available
 * to every page, and belongs in an earlier layer once a second vertical uses
 * it. Colours must come from the tokens in 01-tokens.css so themes keep
 * working. */

.tab .count {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  background: var(--grey-200);
  color: var(--grey-600);
}

.tab.active .count {
  background: var(--accent-light);
  color: var(--accent);
}

.approval-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--grey-200);
}

.approval-card:last-child {
  border-bottom: none;
}

.approval-card:hover {
  background: var(--accent-light);
}

.approval-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.approval-icon.trip {
  background: var(--accent-light);
  color: var(--accent);
}

.approval-icon.budget {
  background: var(--amber-bg);
  color: var(--amber);
}

.approval-icon.exception {
  background: var(--red-bg);
  color: var(--red);
}

.approval-info {
  flex: 1;
  min-width: 0;
}

.approval-info .ai-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-800);
}

.approval-info .ai-meta {
  font-size: 11px;
  color: var(--grey-500);
  margin-top: 2px;
}

.approval-info .ai-meta span {
  margin-right: 12px;
}

.approval-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.status-badge.rejected {
  background: var(--red-bg);
  color: var(--red);
}

.edit-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(22,104,227,.12);
}

.badge.hq {
  background: var(--accent-bg);
  color: var(--accent);
}

.badge.branch {
  background: var(--gray-bg);
  color: var(--gray);
}

.summary-card .sc-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.status-badge.active,
.status-badge.completed {
  background: var(--green-bg);
  color: var(--green);
}

.status-badge.inactive,
.status-badge.cancelled {
  background: var(--grey-200);
  color: var(--grey-600);
}

.status-badge.pending_approval {
  background: var(--amber-bg);
  color: var(--amber);
}

.status-badge.draft {
  background: var(--grey-200);
  color: var(--grey-500);
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
}

.quick-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--grey-800);
  transition: .15s;
}

.quick-action:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.quick-action .qa-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.quick-action .qa-label {
  font-size: 13px;
  font-weight: 600;
}

.quick-action .qa-desc {
  font-size: 11px;
  color: var(--grey-500);
}

.status-badge.cancelled {
  background: var(--red-bg);
  color: var(--red);
}

/* ---- 20. finance ----------------------------------------------
 * Components used by the finance pages and not provided by the layers
 * above. Adopted from those pages' <style> blocks when they were converted
 * to templates, so the pages themselves carry no CSS.
 *
 * These are ordinary components, not page styles: anything here is available
 * to every page, and belongs in an earlier layer once a second vertical uses
 * it. Colours must come from the tokens in 01-tokens.css so themes keep
 * working. */

.badge.refunded {
  background: var(--accent-bg);
  color: var(--accent);
}

.badge.expired {
  background: var(--red-bg);
  color: var(--red);
}

.badge.exhausted {
  background: var(--gray-bg);
  color: var(--gray);
}

.badge.approved {
  background: var(--green-bg);
  color: var(--green);
}

.badge.rejected {
  background: var(--red-bg);
  color: var(--red);
}

.btn-icon {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--grey-600);
  cursor: pointer;
  transition: .15s;
  font-size: 13px;
}

.btn-icon:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.btn-icon.danger:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-bg);
}

.page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.status-badge.suspended {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-border);
}

.status-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.toggle .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--grey-300);
  border-radius: 20px;
  transition: .2s;
}

.toggle .slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  bottom: 3px;
  background: var(--white);
  border-radius: 50%;
  transition: .2s;
}

.toggle input:checked+.slider {
  background: var(--accent);
}

.toggle input:checked+.slider::before {
  transform: translateX(16px);
}

.toggle input:disabled+.slider {
  opacity: .5;
  cursor: not-allowed;
}

.matrix-table tr.expanded td {
  background: var(--accent-bg);
}

.section-title .count {
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-400);
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-9);
  align-items: stretch;
}

.template-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: .2s;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.template-card:hover {
  box-shadow: 0 4px 16px rgba(0,40,85,.08);
  border-color: var(--navy-mid);
}

.template-card.selected {
  border-color: var(--navy-mid);
  box-shadow: inset 0 0 0 1px var(--navy-mid);
}

.template-card .card-accent-bar {
  height: 3px;
}

.template-card .card-accent-bar.bank {
  background: var(--navy-mid);
}

.template-card .card-accent-bar.vpos {
  background: var(--accent);
}

.template-card .card-accent-bar.cash {
  background: var(--green);
}

.template-card .card-accent-bar.cheque {
  background: var(--amber);
}

.template-card .card-accent-bar.ewallet {
  background: var(--violet);
}

.template-card .card-accent-bar.custom {
  background: var(--grey-400);
}

.template-card-body {
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.acct-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-500, var(--gray));
}
.acct-step {
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--grey-100, #f1f3f4);
  border: 1px solid var(--grey-200, var(--border));
}
.acct-step.is-active {
  background: var(--accent-bg, #e8f0fe);
  color: var(--accent, #1668e3);
  border-color: var(--accent, #1668e3);
}
.acct-step-sep {
  color: var(--grey-400, #9aa0a6);
}
.acct-config-panel {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--grey-200, var(--border));
}

.template-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
}

.template-icon.bank {
  background: var(--navy-pale);
  color: var(--navy);
}

.template-icon.vpos {
  background: var(--accent-bg);
  color: var(--accent);
}

.template-icon.cash {
  background: var(--green-bg);
  color: var(--green);
}

.template-icon.cheque {
  background: var(--amber-bg);
  color: var(--amber);
}

.template-icon.ewallet {
  background: var(--violet-bg);
  color: var(--violet);
}

.template-icon.custom {
  background: var(--grey-100);
  color: var(--grey-500);
}

.template-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}

.template-desc {
  font-size: 12px;
  color: var(--grey-500);
  line-height: 1.5;
  margin-bottom: 12px;
}

.template-fields {
  font-size: 11px;
  color: var(--grey-400);
  border-top: 1px solid var(--grey-200);
  padding-top: 8px;
}

.template-fields span {
  display: inline-block;
  background: var(--grey-50);
  padding: 1px 6px;
  border-radius: 3px;
  margin: 1px 2px;
}

.template-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

.form-header {
  padding: 14px 16px;
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-body {
  padding: 20px 16px;
}

.template-fields-group {
  background: var(--grey-50);
  border-radius: var(--radius);
  padding: 14px;
  margin-top: 6px;
}

.template-fields-group .fields-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  align-items: stretch;
}

.stat-card {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}

.config-summary {
  font-size: 11px;
  color: var(--grey-600);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.config-detail {
  font-size: 10px;
  color: var(--grey-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.results-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.results-meta {
  font-size: 12px;
  color: var(--grey-500);
  display: flex;
  gap: 10px;
}

.results-time {
  font-size: 12px;
  color: var(--grey-500);
}

.results-meta .hl {
  color: var(--green);
  font-weight: 600;
}

.fare-tabs {
  display: flex;
  gap: 2px;
}

.fare-tab {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-500);
  background: var(--grey-100);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: .15s;
}

.fare-tab:hover {
  color: var(--navy);
  background: var(--navy-pale);
}

.fare-tab.active {
  background: var(--navy);
  color: var(--white);
}

.fare-tab .tab-count {
  font-size: 10px;
  margin-left: 3px;
  opacity: .7;
}

.row-detail {
  display: none;
  padding: 16px 14px;
  background: var(--accent-bg);
  border-bottom: 1px solid var(--grey-200);
}

.row-detail-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
}

.detail-value.mono {
  font-family: monospace;
  font-size: 12px;
  background: var(--white);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid var(--grey-200);
}

.row-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.row-detail-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}

.row-detail-actions {
  display: flex;
  gap: 6px;
}

.modal-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: 600px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,40,85,.2);
}

.cb:hover {
  color: var(--navy);
}

@media(max-width:1100px) {
  .template-grid{grid-template-columns:repeat(2,1fr)}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .row-detail-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px) {
  .template-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}

.badge.maintenance {
  background: var(--amber-bg);
  color: var(--amber);
}

.badge.triggered {
  background: var(--red-bg);
  color: var(--red);
}

.badge.monitoring {
  background: var(--amber-bg);
  color: var(--amber);
}

.badge.frozen {
  background: var(--accent-bg);
  color: var(--accent);
}

.fx-rate-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  overflow: hidden;
  margin-bottom: 16px;
}

.fx-rate-header {
  padding: 12px 16px;
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.fx-rate-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--navy);
}

.fx-status {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}

.fx-status.active {
  background: var(--green-bg);
  color: var(--green);
}

.fx-status.inactive {
  background: var(--grey-100);
  color: var(--grey-600);
}

.fx-status.pending {
  background: var(--amber-bg);
  color: var(--amber);
}

.fx-status.approved {
  background: var(--green-bg);
  color: var(--green);
}

.fx-status.rejected {
  background: var(--red-bg);
  color: var(--red);
}

.fx-status.expired {
  background: var(--grey-100);
  color: var(--grey-500);
}

.fx-status.errored {
  background: var(--red-bg);
  color: var(--red);
}

.fx-status.live {
  background: var(--green-bg);
  color: var(--green);
}

.engine-status-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  overflow: hidden;
  margin-bottom: 16px;
}

.engine-status-body {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.engine-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.engine-dot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}

.engine-dot.running {
  background: var(--green-bg);
  color: var(--green);
  box-shadow: 0 0 12px rgba(10,138,83,.3);
}

.engine-dot.stopped {
  background: var(--grey-100);
  color: var(--grey-500);
}

.engine-dot.errored {
  background: var(--red-bg);
  color: var(--red);
}

.engine-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.engine-info-row {
  display: flex;
  gap: 8px;
  font-size: 13px;
}

.engine-info-label {
  font-weight: 600;
  color: var(--grey-500);
  min-width: 100px;
}

.engine-info-value {
  font-weight: 600;
  color: var(--grey-800);
}

.engine-actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.engine-refresh-note {
  font-size: 11px;
  color: var(--grey-400);
  margin-top: 6px;
  text-align: center;
}

/* The engine's state in words, beside the dot. The page used to set these
 * colours as inline styles from JavaScript, which put them outside the theme. */
.engine-state {
  font-size: 15px;
  font-weight: 700;
  color: var(--grey-500);
}
.engine-state.running { color: var(--green); }
.engine-state.stopped { color: var(--grey-500); }
.engine-state.errored { color: var(--red); }

/* A free-text note on the alert detail, spanning the grid. */
.alert-detail-note {
  grid-column: span 3;
  padding: 8px;
  background: var(--grey-50);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--grey-700);
}

.alert-detail-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin: 12px 0;
}

.alert-detail-item {
  padding: 10px;
  background: var(--grey-50);
  border-radius: var(--radius);
  border: 1px solid var(--grey-200);
}

.alert-detail-item .lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
  margin-bottom: 3px;
}

.alert-detail-item .val {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.alert-detail-item .val.red {
  color: var(--red);
}

.alert-detail-item .val.green {
  color: var(--green);
}

.alert-detail-item .val.amber {
  color: var(--amber);
}

.filter-btn {
  padding: 6px 14px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: var(--white);
  color: var(--grey-600);
  transition: .15s;
  font-family: inherit;
}

.filter-btn:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--navy-pale);
}

.filter-btn.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.edit-form {
  background: var(--accent-bg);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 4px 0;
}

.edit-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  align-items: start;
}

.edit-field input,
.edit-field select {
  min-height: var(--control-h);
  height: var(--control-h);
  padding: 0 var(--space-5);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: var(--text-sm, 13px);
  font-family: inherit;
  box-sizing: border-box;
  width: 100%;
}
  outline: none;
  background: var(--white);
}

.edit-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,105,92,.12);
}

.active-source-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green-border);
}

.filter-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filter-row label {
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-600);
  display: flex;
  align-items: center;
  gap: 4px;
}

.filter-row input,
.filter-row select {
  padding: 6px 10px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: var(--white);
}

.filter-row input:focus,
.filter-row select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,105,92,.12);
}

.status-badge.partial {
  background: var(--blue-bg);
  color: var(--blue);
}

/* A settlement opens before it is processed. It had no badge of its own, so the
   status read as unstyled text in a column of pills. */
.status-badge.open {
  background: var(--amber-bg);
  color: var(--amber-ink);
}

.status-badge.settled {
  background: var(--green-bg);
  color: var(--green);
}

/* .container centres itself with auto margins inside the column-flex .wrapper,
   and a cross-axis auto margin turns the stretch off — so it sizes to whatever
   it happens to contain. On the settlement report that made the content column
   jump between roughly 660px and its 950px cap as a filter emptied the table
   underneath it. The wallet has the same shape and the same jump: its table
   body is empty until the balance call answers, so the column arrives narrow
   and widens under the reader. Filling the width it is allowed holds the
   column still; max-width still caps it and the auto margins still centre it. */
.page-finance-11-settlement-report .container,
.page-finance-wallet .container {
  width: 100%;
}

/* The settlement report carries ten columns of dates, rates and a pair of
   action buttons, and at 1440px they were narrow enough that "View Bookings"
   broke over two lines and the rows grew to match. No value in these cells
   reads when it wraps mid-phrase, so each keeps its line and the .table-wrap
   around the table scrolls the card at the widths where the sum will not fit.
   The headings are left free to wrap: two short lines of "SETTLEMENT RATE" cost
   nothing and hold three columns' worth of width back from the values. */
.page-finance-11-settlement-report .fx-table td {
  white-space: nowrap;
}

/* Ten columns at the default 12px of side padding spend 240px on gutters, which
   is what tipped the table over the width of its card. Eight buys the rows back
   without crowding them. */
.page-finance-11-settlement-report .fx-table th,
.page-finance-11-settlement-report .fx-table td {
  padding-left: 8px;
  padding-right: 8px;
}

.gain-val {
  color: var(--green);
  font-weight: 700;
}

.loss-val {
  color: var(--red);
  font-weight: 700;
}

.neutral-val {
  color: var(--grey-700);
  font-weight: 700;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.modal-info-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.modal-info-item {
  padding: 10px;
  background: var(--grey-50);
  border-radius: var(--radius);
  border: 1px solid var(--grey-200);
}

.modal-info-item .lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
  margin-bottom: 3px;
}

.modal-info-item .val {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.modal-info-item .val.green {
  color: var(--green);
}

.modal-info-item .val.red {
  color: var(--red);
}

.modal-info-item .val.amber {
  color: var(--amber);
}

.booking-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.booking-table th {
  padding: 7px 10px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
}

.booking-table td {
  padding: 8px 10px;
  font-size: 12px;
  border-bottom: 1px solid var(--grey-100);
  color: var(--grey-700);
}

.booking-table tr:last-child td {
  border-bottom: none;
}

.process-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.process-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.process-field label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
}

.process-field input {
  padding: 8px 12px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: var(--white);
}

.process-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,105,92,.12);
}

.process-summary {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.status-badge.failed,
.status-badge.cancelled {
  background: var(--red-bg);
  color: var(--red);
}

.status-badge.refunded {
  background: var(--grey-200);
  color: var(--grey-600);
}

.summary-card .sc-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}

.summary-card .sc-badge.green {
  background: var(--green-bg);
  color: var(--green);
}

.summary-card .sc-badge.amber {
  background: var(--amber-bg);
  color: var(--amber);
}

.summary-card .sc-badge.red {
  background: var(--red-bg);
  color: var(--red);
}

.module-card-accent.accent {
  background: var(--accent);
}

.module-card-meta {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.module-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  background: var(--grey-100);
  color: var(--grey-600);
}

.status-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.status-dot.running {
  background: var(--green);
}

.status-dot.stopped {
  background: var(--red);
}

.status-dot.error {
  background: var(--amber);
}

.engine-status {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 20px;
}

.engine-status .status-text {
  font-size: 18px;
  font-weight: 700;
}

.engine-status .status-sub {
  font-size: 13px;
  color: var(--gray);
  margin-top: 2px;
}

.badge.running {
  background: var(--green-bg);
  color: var(--green);
}

.badge.stopped {
  background: var(--red-bg);
  color: var(--red);
}

.card .ci {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--white);
  flex-shrink: 0;
}

.card .cn {
  font-size: 28px;
  font-weight: 700;
}

.card .cl {
  font-size: 12px;
  color: var(--gray);
  margin-top: 2px;
}

/* Wallet / finance stat tiles: icon + value row, consistent height & border */
.page-finance-wallet .cards,
[class*="page-finance"] .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  align-items: stretch;
}

[class*="page-finance"] .card-stat {
  min-height: 96px;
  box-sizing: border-box;
  align-items: center;
  border: 1px solid var(--grey-200, var(--border));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

[class*="page-finance"] .card-stat .cs-icon {
  width: 44px;
  height: 44px;
}

[class*="page-finance"] .card-stat .cs-num {
  line-height: 1.2;
  color: var(--navy, #0a2540);
}

[class*="page-finance"] .card {
  border: 1px solid var(--grey-200, var(--border));
}

.card-full {
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 16px;
}

.card-full .ch {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-full .cb {
  padding: 0;
}

.badge.credit {
  background: var(--green-bg);
  color: var(--green);
}

.badge.debit {
  background: var(--red-bg);
  color: var(--red);
}

/* ---- 21. pills ----------------------------------------------------
 * Small status and type labels built by page scripts.
 *
 * These rows used to be assembled with the colours inline:
 *
 *   '<span style="background:'+ts.bg+';color:'+ts.color+';padding:2px 8px;...
 *
 * so the palette lived in a JavaScript lookup table where no stylesheet could
 * reach it and no theme could change it. The table now names a class and the
 * colours are here, on tokens.
 *
 * Hand-authored: unlike the vertical layers, this file is not regenerated. */

.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* The larger variant used for account status. */
.pill.pill-lg {
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 700;
}

/* Account types. */
.pill-bank    { background: var(--navy-pale);  color: var(--navy); }
.pill-vpos    { background: var(--accent-bg);  color: var(--accent); }
.pill-cash    { background: var(--green-bg);   color: var(--green); }
.pill-cheque  { background: var(--amber-bg);   color: var(--amber); }
.pill-ewallet { background: var(--violet-bg);  color: var(--violet); }
.pill-custom  { background: var(--grey-100);   color: var(--grey-500); }

/* Binary status. */
.pill-positive { background: var(--green-bg); color: var(--green); }
.pill-negative { background: var(--red-bg);   color: var(--red); }

/* Provider type, shown next to every supplier in the traffic and SLA tables.
 * The two colours already had tokens — --gds-* and --ndc-*, named for exactly
 * this and used by the flights page — while traffic-sla built the same two
 * labels from literals a shade off them. One definition, one pair of tokens. */
.status-badge.gds {
  background: var(--gds-bg);
  color: var(--gds-color);
}
.status-badge.ndc {
  background: var(--ndc-bg);
  color: var(--ndc-color);
}

/* ---- 22. admin ------------------------------------------------------
 * Components used by the /admin pages and not provided by the layers
 * above. Adopted from those pages' <style> blocks when they were converted
 * to templates, so the pages themselves carry no CSS.
 *
 * These are ordinary components, not page styles: anything here is available
 * to every page, and belongs in an earlier layer once a second vertical uses
 * it. Colours must come from the tokens in 01-tokens.css so themes keep
 * working. */

.badge-info {
  background: var(--accent-bg);
  color: var(--accent);
}

/* The counterpart to .badge-info for a classification that carries no
 * severity — "tenant-defined" beside "platform", not a warning. */
.badge-neutral {
  background: var(--grey-100);
  color: var(--grey-600);
}

.badge-warning {
  background: var(--amber-bg);
  color: var(--orange);
}

.badge-error {
  background: var(--red-bg);
  color: var(--red);
}

.badge-critical {
  background: var(--critical-bg);
  color: var(--critical);
}

.badge-open {
  background: var(--accent-bg);
  color: var(--accent);
}

.badge-acknowledged {
  background: var(--amber-bg);
  color: var(--orange);
}

.badge-resolved {
  background: var(--green-bg);
  color: var(--green);
}

.pagination .page-btn:hover:not(.active) {
  background: var(--gray-bg);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  align-items: end;
}

.filters select,
.filters input {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  background: var(--white);
}

.filters select:focus,
.filters input:focus {
  border-color: var(--accent);
}

.filters label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray);
  display: block;
  margin-bottom: 2px;
}

.filters .filter-group {
  display: flex;
  flex-direction: column;
}

.auto-refresh-indicator {
  font-size: 11px;
  color: var(--gray);
  display: flex;
  align-items: center;
  gap: 4px;
}

.auto-refresh-indicator .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
}

.anomaly-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.anomaly-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 16px;
}

.anomaly-card .ac-value {
  font-size: 28px;
  font-weight: 700;
  margin: 4px 0;
}

.anomaly-card .ac-label {
  font-size: 12px;
  color: var(--gray);
}

.anomaly-card .ac-icon {
  font-size: 20px;
}

.anomaly-card.card-total {
  border-left: 3px solid var(--accent);
}

.anomaly-card.card-open {
  border-left: 3px solid var(--accent);
}

.anomaly-card.card-acknowledged {
  border-left: 3px solid var(--amber);
}

.anomaly-card.card-critical {
  border-left: 3px solid var(--red);
}

.form-group input:focus {
  border-color: var(--accent);
}

.status-badge.archived {
  background: var(--red-bg);
  color: var(--red);
}

.modal.wide {
  width: 780px;
}

.multi-select-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: var(--white);
}

.multi-select-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--grey-200);
}

.multi-select-list label:last-child {
  border-bottom: none;
}

.multi-select-list label:hover {
  background: var(--navy-pale);
}

.multi-select-list input[type=checkbox] {
  accent-color: var(--navy);
}

.select-input {
  padding: 6px 10px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--grey-700);
  background: var(--white);
  cursor: pointer;
  font-family: inherit;
}

.toggle-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--grey-300);
  border-radius: 11px;
  transition: .2s;
}

.toggle-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background: var(--white);
  border-radius: 50%;
  transition: .2s;
}

.toggle input:checked + .toggle-slider {
  background: var(--accent);
}

.toggle input:checked + .toggle-slider:before {
  transform: translateX(22px);
}

.toggle-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--grey-700);
}

.preview-box {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  text-align: center;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.preview-box .preview-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
}

.preview-box .preview-content {
  position: relative;
  z-index: 1;
}

.preview-box h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 12px;
}

.preview-box p {
  font-size: 15px;
  opacity: .8;
  max-width: 400px;
}

.preview-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
  margin-bottom: 8px;
}

.file-upload.has-file {
  border-style: solid;
  border-color: var(--green);
  background: var(--green-bg);
  color: var(--green);
}

.file-upload input[type=file] {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}

.img-preview {
  max-width: 200px;
  max-height: 100px;
  border-radius: 4px;
  border: 1px solid var(--grey-200);
  margin-top: 6px;
  object-fit: cover;
  display: none;
}

.success-msg.show {
  display: flex;
  align-items: center;
  gap: 8px;
}

.error-msg.show {
  display: flex;
  align-items: center;
  gap: 8px;
}

.edit-row.three {
  grid-template-columns: 1fr 1fr 1fr;
}

.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.pagination .page-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.pagination .page-btn:disabled {
  opacity: .4;
  cursor: default;
}

.detail-value.full {
  grid-column: span 2;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
}

.status-badge.system {
  background: var(--indigo-bg);
  color: var(--indigo);
}

.status-badge.office {
  background: var(--accent-bg);
  color: var(--accent);
}

.status-badge.gsa {
  background: var(--green-bg);
  color: var(--green);
}

.status-badge.msa {
  background: var(--amber-bg);
  color: var(--amber);
}

.status-badge.agency {
  background: var(--grey-200);
  color: var(--grey-600);
}

.status-badge.corporate {
  background: var(--violet-bg);
  color: var(--violet);
}

.permission-group {
  margin-bottom: 12px;
}

.permission-group-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}

.permission-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
  gap: 4px;
}

.permission-checkboxes label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
}

.permission-checkboxes label:hover {
  background: var(--grey);
}

.permission-checkboxes input[type="checkbox"] {
  cursor: pointer;
}

.permission-checkboxes label input[type="checkbox"]:checked + span {
  color: var(--accent);
  font-weight: 600;
}

/* ---- 24. settings ----------------------------------------------
 * Components used by the settings pages and not provided by the layers
 * above. Adopted from those pages' <style> blocks when they were converted
 * to templates, so the pages themselves carry no CSS.
 *
 * These are ordinary components, not page styles: anything here is available
 * to every page, and belongs in an earlier layer once a second vertical uses
 * it. Colours must come from the tokens in 01-tokens.css so themes keep
 * working. */

.ops-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--grey-300);
}

.ops-tab {
  flex: 1;
  padding: 10px 20px;
  border: none;
  background: var(--white);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: .15s;
  color: var(--grey-600);
  font-family: inherit;
}

.ops-tab:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}

.ops-tab:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}

.ops-tab:not(:first-child) {
  border-left: 1px solid var(--grey-300);
}

.ops-tab.active {
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
}

.ops-tab:hover:not(.active) {
  background: var(--navy-pale);
  color: var(--navy);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-field.wide {
  grid-column: span 2;
}

.form-field.full {
  grid-column: 1 / -1;
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 10px 14px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: var(--white);
  width: 100%;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,105,92,.12);
}

.form-field label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
}

.form-field textarea {
  min-height: 100px;
  resize: vertical;
}

.parse-result {
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 14px;
  display: none;
}

.parse-result.visible {
  display: block;
}

.parse-result-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px;
}

.parse-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.parse-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
}

.parse-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-800);
}

.parse-value.mono {
  font-family: "Courier New",monospace;
  font-size: 12px;
}

.table-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
}

.table-header {
  padding: 12px 16px;
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ops-table {
  width: 100%;
  border-collapse: collapse;
}

.ops-table th {
  padding: 8px 12px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--grey-500);
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
}

.ops-table th:first-child {
  text-align: left;
  padding-left: 14px;
}

.ops-table td {
  padding: 10px 12px;
  text-align: center;
  border-bottom: 1px solid var(--grey-200);
  font-size: 13px;
  vertical-align: middle;
}

.ops-table td:first-child {
  text-align: left;
  padding-left: 14px;
  font-weight: 600;
  color: var(--navy);
}

.ops-table tr:last-child td {
  border-bottom: none;
}

.ops-table tbody tr:hover {
  background: var(--navy-pale);
}

.ops-table .td-actions {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.status-badge.failed {
  background: var(--red-bg);
  color: var(--red);
}

.status-badge.phase1_complete {
  background: var(--blue-bg);
  color: var(--blue);
}

.status-badge.rolling_back {
  background: var(--orange-bg);
  color: var(--orange);
}

.phase-stepper {
  display: flex;
  gap: 8px;
  align-items: center;
}

.phase-step {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--grey-400);
}

.phase-step .dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: var(--white);
  flex-shrink: 0;
}

.phase-step .dot.done {
  background: var(--green);
}

.phase-step .dot.active-step {
  background: var(--navy-mid);
}

.phase-step .dot.pending-step {
  background: var(--grey-300);
}

.phase-step .dot.failed-step {
  background: var(--red);
}

.phase-arrow {
  color: var(--grey-300);
  font-size: 10px;
}

.summary-card.accent {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.filter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
}

.modal-dialog {
  background: var(--white);
  border-radius: var(--radius-lg);
  max-width: 640px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,.2);
}

.modal-header .modal-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.detail-value.text-block {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  background: var(--grey-50);
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--grey-200);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "Courier New",monospace;
  max-height: 160px;
  overflow-y: auto;
}

.phase-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.phase-detail-table th {
  padding: 6px 10px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--grey-500);
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
}

.phase-detail-table th:first-child {
  text-align: left;
}

.phase-detail-table td {
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid var(--grey-200);
  vertical-align: middle;
}

.phase-detail-table td:first-child {
  text-align: left;
}

.phase-error {
  color: var(--red);
  font-size: 11px;
  font-weight: 500;
}

.comp-table {
  margin-top: 12px;
}

.comp-table th {
  padding: 5px 10px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--grey-500);
  background: var(--orange-bg);
  border-bottom: 1px solid var(--orange-border);
}

.comp-table td {
  padding: 7px 10px;
  text-align: center;
  border-bottom: 1px solid var(--grey-200);
  font-size: 12px;
}

.comp-table td:first-child {
  text-align: left;
}

.comp-table .comp-status {
  display: inline-flex;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}

.comp-table .comp-status.completed {
  background: var(--green-bg);
  color: var(--green);
}

.comp-table .comp-status.pending {
  background: var(--amber-bg);
  color: var(--amber);
}

.comp-table .comp-status.failed {
  background: var(--red-bg);
  color: var(--red);
}

.action-btn {
  padding: 4px 10px;
  font-size: 10px;
  border: 1px solid var(--grey-300);
  border-radius: 4px;
  background: var(--white);
  color: var(--grey-600);
  cursor: pointer;
  transition: .15s;
  font-weight: 600;
  font-family: inherit;
}

.action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.action-btn.navy-btn {
  background: var(--navy-pale);
  color: var(--navy);
  border-color: var(--navy-pale);
}

.action-btn.navy-btn:hover {
  background: var(--navy);
  color: var(--white);
}

.status-badge.matched {
  background: var(--green-bg);
  color: var(--green);
}

.status-badge.new-master {
  background: var(--navy-pale);
  color: var(--navy);
}

.status-badge.review {
  background: var(--red-bg);
  color: var(--red);
}

.custom-badge {
  display: inline-flex;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  background: var(--accent-bg);
  color: var(--accent);
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: .3px;
  vertical-align: middle;
}

.summary-card:hover {
  box-shadow: 0 2px 12px rgba(0,40,85,.06);
}

.sc-icon {
  font-size: 24px;
  margin-bottom: 2px;
}

.test-mapping {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.test-input {
  padding: 7px 12px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 13px;
  width: 200px;
  outline: none;
  font-family: inherit;
}

.test-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,105,92,.12);
}

.test-result {
  padding: 10px 16px;
  margin: 0 16px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  display: none;
}

.test-result.found {
  display: block;
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  color: var(--green);
}

.test-result.not-found {
  display: block;
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  color: var(--red);
}

.test-result-detail {
  margin-top: 6px;
  font-size: 12px;
  color: var(--grey-700);
}

.provider-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid var(--accent-light);
}

.sum-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}

.sum-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.sum-card.green::before {
  background: var(--green);
}

.sum-card.red::before {
  background: var(--red);
}

.sum-card.amber::before {
  background: var(--amber);
}

.sum-card.blue::before {
  background: var(--navy-mid);
}

.sum-card.navy::before {
  background: var(--navy);
}

.sum-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--grey-500);
  margin-bottom: 6px;
}

.sum-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.5px;
  line-height: 1.1;
}

.sum-sub {
  font-size: 11px;
  color: var(--grey-400);
  margin-top: 4px;
}

.sum-sub.up {
  color: var(--green);
  font-weight: 600;
}

.sum-sub.down {
  color: var(--red);
  font-weight: 600;
}

.w-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 16px 24px 0;
}

.w-card-header {
  padding: 14px 18px;
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.w-card-body {
  padding: 18px;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  align-items: end;
}

.fg input:disabled {
  background: var(--grey-100);
  color: var(--grey-500);
}

.fg-hint {
  font-size: 11px;
  color: var(--grey-400);
  margin-top: 2px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.form-grid + .checkbox-row {
  margin-top: 14px;
}

.checkbox-row input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.checkbox-row label {
  font-size: 13px;
  color: var(--grey-700);
  cursor: pointer;
}

.sim-result {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  display: none;
}

.sim-result.show {
  display: block;
}

.sim-result .sr-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
}

.sim-result .sr-label {
  color: var(--grey-600);
}

.sim-result .sr-value {
  font-weight: 700;
  color: var(--navy);
}

.sim-result .sr-value.deposit {
  color: var(--green);
}

.sim-result .sr-value.vcc {
  color: var(--amber);
}

.sim-result .sr-value.manual {
  color: var(--red);
}

.fare-tag {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.fare-tag.active {
  background: var(--green-bg);
  color: var(--green);
}

.fare-tag.hold {
  background: var(--amber-bg);
  color: var(--amber);
}

.fare-tag.released {
  background: var(--navy-pale);
  color: var(--navy);
}

.fare-tag.committed {
  background: var(--accent-bg);
  color: var(--accent);
}

.matrix-table tbody .loading-row td {
  text-align: center;
  padding: 40px;
  color: var(--grey-400);
  font-style: italic;
}

.matrix-table td.empty-row {
  padding: 30px;
  text-align: center;
  color: var(--grey-400);
  font-style: italic;
}

@media(max-width:1200px) {
  .summary-row{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:900px) {
  .summary-row{grid-template-columns:repeat(2,1fr)}
  .form-grid,.form-grid-3{grid-template-columns:1fr}
  .form-field.wide,.form-field.full{grid-column:1 / -1}
}

@media(max-width:600px) {
  .summary-row{grid-template-columns:1fr}
  .header-nav{display:none}
}

.action-btns {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}

.risk-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.risk-badge.high {
  background: var(--red-bg);
  color: var(--red);
}

.risk-badge.medium {
  background: var(--amber-bg);
  color: var(--amber);
}

.risk-badge.low {
  background: var(--green-bg);
  color: var(--green);
}

.status-badge.open {
  background: var(--accent-bg);
  color: var(--accent);
}

.status-badge.resolved {
  background: var(--green-bg);
  color: var(--green);
}

.status-badge.new {
  background: var(--accent-bg);
  color: var(--accent);
}

.status-badge.notified {
  background: var(--amber-bg);
  color: var(--amber);
}

.progress-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bg {
  flex: 1;
  height: 7px;
  background: var(--grey-200);
  border-radius: 4px;
  overflow: hidden;
  min-width: 60px;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
}

.progress-fill.green {
  background: var(--green);
}

.progress-fill.amber {
  background: var(--amber);
}

.progress-fill.red {
  background: var(--red);
}

.progress-pct {
  font-size: 11px;
  font-weight: 700;
  min-width: 36px;
  text-align: right;
}

.score-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.score-bar .score-bg {
  flex: 1;
  height: 6px;
  background: var(--grey-200);
  border-radius: 3px;
  overflow: hidden;
}

.score-bar .score-fill {
  height: 100%;
  border-radius: 3px;
}

.score-bar .score-label {
  font-size: 11px;
  font-weight: 700;
  min-width: 30px;
  text-align: right;
}

.modal-section:last-child {
  margin-bottom: 0;
}

.health-alert {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
}

.health-alert .ha-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.info-icon {
  cursor: pointer;
  font-size: 13px;
  color: var(--navy-mid);
  margin-left: 3px;
  user-select: none;
  display: inline-block;
  position: relative;
}

.info-icon:hover {
  color: var(--accent);
}

.info-popup {
  display: none;
  position: absolute;
  background: var(--navy);
  color: var(--white);
  font-size: 11px;
  padding: 8px 10px;
  border-radius: 6px;
  width: 260px;
  z-index: 200;
  line-height: 1.5;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

.info-popup.show {
  display: block;
}

.info-popup::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--navy);
}

.agency-link {
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

.agency-link:hover {
  text-decoration: underline;
  color: var(--navy-mid);
}

.action-select {
  padding: 4px 6px;
  border: 1px solid var(--grey-300);
  border-radius: 4px;
  font-size: 11px;
  font-family: inherit;
  background: var(--white);
  cursor: pointer;
  outline: none;
}

.action-select:focus {
  border-color: var(--accent);
}

.flag-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  background: var(--red-bg);
  color: var(--red);
}

.ai-panel-text {
  font-size: 13px;
  color: var(--grey-700);
  line-height: 1.7;
  margin-bottom: 10px;
  min-height: 40px;
  white-space: pre-wrap;
}

.action-form {
  display: grid;
  gap: 10px;
}

.af-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.af-row label {
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-600);
  min-width: 110px;
  padding-top: 6px;
  flex-shrink: 0;
}

.af-row select,
.af-row textarea,
.af-row input[type="date"] {
  padding: 6px 10px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: var(--white);
  flex: 1;
}

.af-row select:focus,
.af-row textarea:focus,
.af-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,105,92,.12);
}

.af-row textarea {
  resize: vertical;
  min-height: 60px;
  flex: 1;
}

.af-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--grey-700);
  cursor: pointer;
}

.af-check input {
  cursor: pointer;
}

.cal-confirm {
  padding: 8px 12px;
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  display: none;
  margin-top: 8px;
}

.history-empty {
  padding: 20px;
  text-align: center;
  color: var(--grey-400);
  font-size: 13px;
  font-weight: 500;
}

.history-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--grey-100);
  font-size: 12px;
}

.history-item:last-child {
  border-bottom: none;
}

.hi-header {
  margin-bottom: 4px;
}

.hi-date {
  font-weight: 700;
  color: var(--navy);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.hi-detail {
  color: var(--grey-600);
  line-height: 1.5;
}

.task-planner {
  margin-bottom: 16px;
}

.task-planner .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.task-planner .tp-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-500);
  margin-left: 8px;
}

.task-planner .tp-add-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--white);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
}

.task-planner .tp-add-btn:hover {
  background: var(--accent-light);
}

.tp-inline-form {
  display: none;
  padding: 12px 16px;
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.tp-inline-form.open {
  display: flex;
}

.tp-inline-form .tp-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tp-inline-form .tp-field label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
}

.tp-inline-form .tp-field select,
.tp-inline-form .tp-field input {
  padding: 5px 8px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 12px;
  font-family: inherit;
  outline: none;
}

.tp-inline-form .tp-field select:focus,
.tp-inline-form .tp-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,105,92,.12);
}

.tp-action-btn {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: .15s;
}

.tp-action-btn.complete {
  background: var(--green-bg);
  color: var(--green);
}

.tp-action-btn.complete:hover {
  background: var(--green);
  color: var(--white);
}

.tp-action-btn.delete {
  background: var(--red-bg);
  color: var(--red);
  margin-left: 4px;
}

.tp-action-btn.delete:hover {
  background: var(--red);
  color: var(--white);
}

.tp-time-input {
  display: none;
}

.tp-time-input.open {
  display: block;
}

.supervisor-toggle {
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.supervisor-toggle:hover {
  background: var(--grey-50);
}

.supervisor-toggle .st-arrow {
  font-size: 12px;
  color: var(--grey-400);
  transition: transform .2s;
}

.supervisor-toggle.open .st-arrow {
  transform: rotate(90deg);
}

.supervisor-content {
  display: none;
  padding: 16px;
}

.supervisor-content.open {
  display: block;
}

.supervisor-cards {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.supervisor-card {
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-align: center;
}

.supervisor-card .sv-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
  margin-bottom: 6px;
}

.supervisor-card .sv-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
}

.supervisor-card .sv-value.green {
  color: var(--green);
}

.supervisor-card .sv-value.amber {
  color: var(--amber);
}

.supervisor-card .sv-value.red {
  color: var(--red);
}

.comp-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.4);
  z-index: 1100;
  align-items: center;
  justify-content: center;
}

.comp-modal-overlay.open {
  display: flex;
}

.comp-modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: 420px;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
}

.comp-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--grey-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.comp-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

.comp-modal-body {
  padding: 16px 20px;
}

.comp-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--grey-200);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.comp-field {
  margin-bottom: 12px;
}

.comp-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-600);
  margin-bottom: 4px;
}

.comp-field textarea {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  min-height: 60px;
}

.comp-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,105,92,.12);
}

.comp-radio-group {
  display: flex;
  gap: 16px;
}

.comp-radio-group label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}

.status-badge.healthy {
  background: var(--green-bg);
  color: var(--green);
}

.status-badge.warning {
  background: var(--amber-bg);
  color: var(--amber);
}

.status-badge.tripped {
  background: var(--red-bg);
  color: var(--red);
}

/* /account/security: two-factor authentication. */
.mfa-page {
  max-width: 640px;
}

.mfa-required {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--amber-bg);
  color: var(--amber);
  font-size: 13px;
  font-weight: 600;
}

.mfa-text {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
}

.mfa-steps {
  margin: 0 0 16px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
}

.mfa-steps li + li {
  margin-top: 12px;
}

.mfa-qr {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px 0 0;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}

.mfa-secret {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 1px;
  word-break: break-all;
}

.mfa-code-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.mfa-code-form .form-input {
  width: 140px;
  letter-spacing: 4px;
  font-size: 16px;
}

/* ---- 25. support ----------------------------------------------
 * Components used by the support pages and not provided by the layers
 * above. Adopted from those pages' <style> blocks when they were converted
 * to templates, so the pages themselves carry no CSS.
 *
 * These are ordinary components, not page styles: anything here is available
 * to every page, and belongs in an earlier layer once a second vertical uses
 * it. Colours must come from the tokens in 01-tokens.css so themes keep
 * working. */

/* The assistant console on /support/chat.
 *
 * It used to be a centred 900px box on a page of its own: its own font stack,
 * its own greys, a height of calc(100vh - 100px) that had no relation to what
 * the shell actually leaves, and a heading centred over the conversation
 * where every other screen in the product puts one on the left. Nothing about
 * it looked like the pages the sidebar reaches it from.
 *
 * It is a console now, the same shape as /inbox/inbox and /support/support: a
 * card that fills what the shell leaves, scrolling inside itself so the page
 * behind it never scrolls, with the composer pinned to its foot.
 *
 * No viewport arithmetic. .wrapper is a flex column that already measures what
 * is left below the 56px header, so filling it is flex: 1 and a min-height of
 * 0 — the second is what lets .chat-log scroll instead of pushing the card
 * taller than its parent. */

.chat-page {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.chat-head-text h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
}

.chat-head-text p {
  margin-top: 4px;
  font-size: 13px;
  color: var(--gray-500);
  max-width: 68ch;
}

.chat-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  /* The composer sits flush in the bottom corners; without this its
   * background squares them off. */
  overflow: hidden;
}

.chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* One turn: avatar beside the bubble, the timestamp under it. The user's turn
 * is the same row reversed, which keeps the avatar on the outside edge on
 * both sides. */
.chat-turn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 76%;
}

.chat-turn.is-user {
  margin-left: auto;
  flex-direction: row-reverse;
}

.chat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
}

/* --navy-pale and --navy are a pair in every theme. --accent-light is not: it
 * is a pale tint in the blue family and a mid teal in the default one, so a
 * label drawn on it reads in one theme and disappears in the other. */
.chat-turn.is-ai .chat-avatar {
  background: var(--navy-pale);
  color: var(--navy);
}

.chat-turn.is-user .chat-avatar {
  background: var(--accent);
  color: var(--white);
}

/* min-width: 0 is what lets a long unbroken string — a PNR, a URL — wrap
 * instead of stretching the row past the card. */
.chat-turn-body {
  min-width: 0;
}

.chat-bubble {
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  font-size: 13.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.chat-turn.is-ai .chat-bubble {
  background: var(--grey-100);
  color: var(--grey-800);
  border-bottom-left-radius: 4px;
}

.chat-turn.is-user .chat-bubble {
  background: var(--accent);
  color: var(--white);
  border-bottom-right-radius: 4px;
}

/* A failure is not an answer, and must not be dressed as one. */
.chat-turn.is-error .chat-avatar {
  background: var(--red-bg);
  color: var(--red);
}

.chat-turn.is-error .chat-bubble {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-border);
}

.chat-meta {
  margin-top: 4px;
  font-size: 10px;
  color: var(--gray-400);
}

.chat-turn.is-user .chat-meta {
  text-align: right;
}

/* The model writes light Markdown and js/pages/support/chat.js renders the
 * three parts of it that carry meaning: paragraphs, bullets and emphasis. */
.chat-bubble p + p,
.chat-bubble ul {
  margin-top: 8px;
}

.chat-bubble ul {
  padding-left: 18px;
}

.chat-bubble li {
  margin: 2px 0;
}

.chat-bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .07);
}

.chat-turn.is-user .chat-bubble code {
  background: rgba(255, 255, 255, .2);
}

.chat-typing {
  display: none;
  align-items: center;
  gap: 8px;
  /* Lined up with the bubbles above it: 20px of padding plus the 28px avatar
   * and its 10px gap. */
  padding: 0 20px 12px 58px;
  font-size: 12px;
  color: var(--gray-500);
}

.chat-typing.is-on {
  display: flex;
}

.chat-foot {
  border-top: 1px solid var(--grey-200);
  background: var(--grey-50);
  padding: 12px 16px 14px;
}

.chat-sugs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.chat-sug {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--accent-border);
  background: var(--white);
  color: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: .15s;
}

.chat-sug:hover {
  background: var(--navy-pale);
  border-color: var(--accent);
}

.chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  padding: 5px 5px 5px 12px;
  transition: border-color .15s, box-shadow .15s;
}

.chat-composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--navy-pale);
}

/* The booking reference, in the composer rather than off in the page header,
 * because it changes what the next message does: with a PNR in it the server
 * answers penalty, refund and cancellation questions from the booking instead
 * of from the model. The rule on its right is the separator; it is a border on
 * the field so it cannot drift from the field's height. */
.chat-ref {
  width: 96px;
  flex-shrink: 0;
  align-self: stretch;
  border: none;
  border-right: 1px solid var(--grey-200);
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--navy);
  padding: 8px 10px 8px 0;
  margin-right: 4px;
  min-width: 0;
}

.chat-ref::placeholder {
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--gray-400);
}

/* The label is for a screen reader; the placeholder is the visible one. */
.chat-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A textarea rather than an input: a question can be a paragraph, and one that
 * scrolls sideways inside a 40px box cannot be read back before sending. It
 * grows to five lines and scrolls after that — chat.js sets the height, this
 * caps it. */
.chat-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--grey-800);
  padding: 8px 0;
  max-height: 140px;
  overflow-y: auto;
}

.chat-input::placeholder {
  color: var(--gray-400);
}

.chat-send {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--white);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
}

.chat-send:hover:not(:disabled) {
  background: var(--accent-dark);
}

.chat-send:disabled {
  background: var(--grey-300);
  cursor: not-allowed;
}

.chat-note {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--gray-400);
}

/* Scoped to the page, because 14-responsive.css is concatenated above this
 * layer and its media queries lose to the rules in it. */
@media (max-width: 768px) {
  body.page-support-chat .chat-page {
    padding: 12px;
    gap: 12px;
  }

  body.page-support-chat .chat-turn {
    max-width: 92%;
  }

  body.page-support-chat .chat-log {
    padding: 14px;
  }

  body.page-support-chat .chat-typing {
    padding-left: 52px;
  }

  body.page-support-chat .chat-foot {
    padding: 10px 12px 12px;
  }

  body.page-support-chat .chat-composer {
    flex-wrap: wrap;
  }

  /* Stacked, the reference is a row of its own: the separator becomes the
   * rule under it, and the field takes the width so a PNR is not typed into
   * 96px next to a one-line question. */
  body.page-support-chat .chat-ref {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--grey-200);
    padding: 6px 0;
    margin-right: 0;
  }
}

/* .chat-messages below is not this page's any more. /f2new borrows it for its
 * booking conversation — 29-booking.css styles only its scrollbar — so the
 * base rule stays here rather than moving with the rest of the console. */

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 16px;
}

.status-badge.in-progress {
  background: var(--amber-bg);
  color: var(--amber);
}

.status-badge.closed {
  background: var(--grey-200);
  color: var(--grey-600);
}

.priority-badge {
  display: inline-flex;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
}

.priority-badge.high {
  background: var(--red-bg);
  color: var(--red);
}

.priority-badge.medium {
  background: var(--amber-bg);
  color: var(--amber);
}

.priority-badge.low {
  background: var(--green-bg);
  color: var(--green);
}

.section-desc {
  font-size: 13px;
  color: var(--grey-500);
  padding: 2px 24px 8px;
}

.sc-strip {
  height: 3px;
  border-radius: 4px;
  margin-top: 8px;
}

.sc-strip.green {
  background: var(--green);
}

.sc-strip.amber {
  background: var(--amber);
}

.sc-strip.red {
  background: var(--red);
}

.staff-grid {
  margin: 0 24px 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
  gap: 10px;
}

.staff-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: .15s;
}

.staff-card:hover {
  border-color: var(--navy-mid);
  box-shadow: 0 2px 8px rgba(0,40,85,.08);
}

.staff-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.staff-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.staff-role {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--grey-500);
}

.staff-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.staff-status.online {
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-bg);
}

.staff-status.away {
  background: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-bg);
}

.staff-status.offline {
  background: var(--grey-300);
}

.staff-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin-top: 6px;
}

.staff-stat {
  text-align: center;
}

.staff-stat-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
}

.staff-stat-lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--grey-400);
  letter-spacing: .3px;
}

.staff-grid-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  padding: 4px 24px 8px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.tab-bar::-webkit-scrollbar {
  display: none;
}

.tab-sep {
  width: 1px;
  background: var(--grey-200);
  margin: 8px 6px;
  flex-shrink: 0;
}

.matrix-search {
  padding: 7px 12px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 12px;
  width: 220px;
  font-family: inherit;
  outline: none;
}

.matrix-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,105,92,.12);
}

.matrix-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.matrix-table tr {
  cursor: pointer;
  transition: .1s;
}

.matrix-table tr.sla-warning td {
  background: var(--amber-bg);
}

.matrix-table tr.sla-critical td {
  background: var(--red-bg);
}

.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.status-open {
  background: var(--navy-pale);
  color: var(--navy);
}

.status-ai_reviewing {
  background: var(--violet-bg);
  color: var(--violet);
}

.status-staff_review {
  background: var(--accent-bg);
  color: var(--accent);
}

.status-waiting_supplier {
  background: var(--amber-bg);
  color: var(--amber);
}

.status-supervisor_review {
  background: var(--amber-bg);
  color: var(--amber);
}

.status-resolved {
  background: var(--green-bg);
  color: var(--green);
}

.status-closed {
  background: var(--grey-100);
  color: var(--grey-500);
}

.type-cancel {
  background: var(--red-bg);
  color: var(--red);
}

.type-change {
  background: var(--violet-bg);
  color: var(--violet);
}

.type-refund {
  background: var(--amber-bg);
  color: var(--amber);
}

.type-question {
  background: var(--navy-pale);
  color: var(--navy);
}

.priority-urgent {
  color: var(--red);
  font-weight: 700;
}

.priority-high {
  color: var(--amber);
  font-weight: 700;
}

.priority-normal {
  color: var(--grey-400);
}

.priority-low {
  color: var(--grey-500);
}

.age-warning {
  color: var(--amber);
  font-weight: 600;
}

.age-critical {
  color: var(--red);
  font-weight: 700;
}

.tier-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.tier-silver {
  background: var(--grey-100);
  color: var(--grey-600);
}

.tier-gold {
  background: var(--amber-bg);
  color: var(--amber);
}

.tier-platinum {
  background: var(--violet-bg);
  color: var(--violet);
}

.tier-vip {
  background: linear-gradient(135deg,var(--gold),var(--gold-deep));
  color: var(--white);
}

.empty-state-sub {
  font-size: 12px;
  margin-top: 4px;
  color: var(--grey-500);
}

.modal-header h3 {
  font-size: 15px;
  font-weight: 700;
}

.modal-header .modal-sub {
  font-size: 11px;
  opacity: .7;
  font-weight: 400;
}

.modal-body-left {
  padding: 20px;
  border-right: 1px solid var(--grey-200);
  overflow-y: auto;
  max-height: 80vh;
}

.modal-body-right {
  padding: 20px;
  background: var(--grey-50);
  overflow-y: auto;
  max-height: 80vh;
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 0 16px;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid var(--grey-300);
  background: var(--white);
  color: var(--grey-400);
  transition: .2s;
  cursor: pointer;
}

.step.complete .step-circle {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

.step.active .step-circle {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  box-shadow: 0 0 0 3px rgba(0,40,85,.15);
}

.step.pending .step-circle {
  border-style: dashed;
  cursor: default;
}

.step.complete .step-label {
  color: var(--green);
}

.step.active .step-label {
  color: var(--navy);
  font-weight: 700;
}

.step-connector {
  width: 32px;
  height: 2px;
  background: var(--grey-300);
  margin: 0 2px;
  flex-shrink: 0;
}

.step.complete .step-connector {
  background: var(--green);
}

/* The connector is a sibling of .step, not a child of it, and carries the
 * state class itself. */
.step-connector.complete {
  background: var(--green);
}

.conversation {
  max-height: 380px;
  overflow-y: auto;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

.conversation::-webkit-scrollbar {
  width: 4px;
}

.conversation::-webkit-scrollbar-thumb {
  background: var(--grey-300);
  border-radius: 4px;
}

.msg.agency {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.msg.staff {
  align-self: flex-start;
}

.msg.system {
  align-self: center;
  max-width: 100%;
}

.msg.agency .msg-bubble {
  background: var(--accent);
  color: var(--white);
  border-bottom-right-radius: 4px;
}

.msg.staff .msg-bubble {
  background: var(--grey-100);
  color: var(--grey-800);
  border: 1px solid var(--grey-200);
  border-bottom-left-radius: 4px;
}

.msg.system .msg-bubble {
  background: var(--grey-100);
  color: var(--grey-600);
  border-radius: var(--radius);
  text-align: center;
  font-size: 12px;
  width: 100%;
}

.msg-sender {
  font-size: 10px;
  font-weight: 700;
  opacity: .7;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.msg-internal {
  border-left: 3px solid var(--amber)!important;
  background: var(--amber-bg)!important;
}

.msg-internal .msg-sender {
  color: var(--amber)!important;
}

.reply-box {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-top: 8px;
}

.reply-box textarea {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  resize: none;
  outline: none;
  min-height: 38px;
}

.reply-box textarea:focus {
  border-color: var(--accent);
}

.reply-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.reply-internal-toggle {
  font-size: 11px;
  color: var(--grey-500);
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  padding: 3px 8px;
  border-radius: 4px;
  transition: .15s;
}

.reply-internal-toggle:hover {
  background: var(--amber-bg);
  color: var(--amber);
}

.reply-internal-toggle.active {
  color: var(--amber);
}

.btn-amber {
  background: var(--amber);
  color: var(--white);
}

.btn-amber:hover {
  opacity: .9;
}

.side-section {
  margin-bottom: 14px;
}

.side-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
  margin-bottom: 6px;
}

.side-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 12px;
}

.side-row .lbl {
  color: var(--grey-500);
}

.side-row .val {
  font-weight: 600;
  color: var(--grey-800);
  text-align: right;
}

.side-divider {
  height: 1px;
  background: var(--grey-200);
  margin: 10px 0;
}

.ai-box {
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 12px;
  margin-bottom: 12px;
}

.ai-box-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}

.ai-score {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
}

.ai-suggest {
  font-size: 12px;
  color: var(--grey-600);
  margin-top: 4px;
}

.ai-confirm {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.ai-confirm button {
  padding: 5px 12px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.ai-confirm .yes {
  background: var(--green);
  color: var(--white);
}

.ai-confirm .no {
  background: var(--grey-300);
  color: var(--grey-600);
}

/* ---- the ticket queue, scoped to its page --------------------------
 *
 * /support/support is a full-bleed console: every block carries its own 24px
 * gutter, and the table wants the whole viewport. The shared components it
 * borrows are sized for narrow forms instead — .container caps at 1000px and
 * adds a second 24px of padding, .card-row is the five-column flight strip,
 * .summary-card has no padding at all, .tab-btn is the segmented control, and
 * .modal is 640px with a single-column body. Left alone they squash this
 * screen; here they get the metrics the page was drawn with.
 *
 * Layout only — no colour is set below that the components don't already use,
 * and none of it leaves the page-support-support scope. */

.page-support-support .container {
  max-width: 100%;
  margin: 0;
  padding: 0 0 24px;
}

.page-support-support .section-title {
  font-size: 20px;
  padding: 24px 24px 0;
  border-bottom: none;
  margin-bottom: 0;
}

/* Summary cards: label above value above sub, not three spans on one line. */
.page-support-support .card-row {
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 12px;
  padding: 12px 24px;
}

.page-support-support .summary-card {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-support-support .sc-label {
  font-size: 11px;
  letter-spacing: .6px;
  margin-bottom: 0;
}

.page-support-support .sc-value {
  font-size: 26px;
  line-height: 1.2;
}

/* Underline tabs. flex:1 on .tab-btn stretches nine tabs past the tab bar. */
.page-support-support .tab-btn {
  flex: 0 0 auto;
  padding: 10px 16px;
  background: none;
  border-bottom: 2px solid transparent;
  color: var(--grey-500);
}

.page-support-support .tab-btn.active {
  background: none;
  color: var(--navy);
  border-bottom-color: var(--navy);
}

/* Gutters, so the search box and the pager line up with the table. */
.page-support-support .filter-bar {
  padding: 10px 24px;
  margin-bottom: 0;
}

.page-support-support .pagination {
  margin: 8px 24px 0;
}

.page-support-support .empty-state {
  padding: 48px 20px;
  font-size: 14px;
  font-style: normal;
}

/* The ticket modal: two columns, conversation beside the detail rail. */
.page-support-support .modal {
  width: 100%;
  max-width: 1100px;
  max-height: none;
  overflow: hidden;
}

.page-support-support .modal-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  padding: 0;
}

/* The stepper is seven steps wide; the shared .step padding overflows it, and
 * a centred overflow clips the first steps as readily as the last. Wrapping
 * keeps every step reachable at any modal width. */
.page-support-support .stepper {
  flex-wrap: wrap;
  overflow-x: visible;
  row-gap: 8px;
}

.page-support-support .step {
  padding: 0;
  gap: 0;
}

.page-support-support .step-label {
  font-size: 10px;
  margin-right: 6px;
  white-space: nowrap;
}

/* Elastic connectors: they take up the slack when the seven steps fit on one
 * line and give it back before the row has to wrap. */
.page-support-support .step-connector {
  width: auto;
  flex: 1 1 8px;
  min-width: 8px;
  max-width: 32px;
}

/* .modal-body textarea (the inbox composer) is the later rule at equal
 * specificity, so the one-line reply box came out 80px tall. */
.page-support-support .reply-box textarea {
  min-height: 38px;
  resize: none;
}

.page-support-support .msg {
  display: flex;
  gap: 8px;
  max-width: 88%;
}

.page-support-support .msg-time {
  text-align: right;
}

@media (max-width: 768px) {
  /* One gutter for the whole page, 12px, including the blocks whose desktop
   * 24px is set at a weight the shared responsive layer cannot reach. */
  .page-support-support #roleBanner {
    padding: 8px 12px;
  }
  .page-support-support .section-title {
    padding: 16px 12px 0;
    font-size: 18px;
  }
  .page-support-support .section-desc {
    padding: 2px 12px 8px;
  }
  .page-support-support .matrix-section {
    margin: 0 12px;
  }
  .page-support-support .card-row {
    grid-template-columns: repeat(2,1fr);
    padding: 8px 12px;
    gap: 8px;
  }
  .page-support-support .summary-card {
    padding: 12px 14px;
  }
  .page-support-support .sc-value {
    font-size: 20px;
  }
  .page-support-support .sc-label {
    font-size: 10px;
  }
  .page-support-support .tab-btn {
    padding: 8px 12px;
  }
  .page-support-support .filter-bar {
    padding: 8px 12px;
    flex-wrap: wrap;
  }
  .page-support-support .pagination {
    margin: 8px 12px 0;
  }
  .page-support-support .staff-grid {
    grid-template-columns: 1fr 1fr;
    margin: 0 12px 12px;
    gap: 8px;
  }
  .page-support-support .staff-grid-title {
    padding: 4px 12px 8px;
  }
  /* The ticket table becomes one card per row. 14-responsive.css says as much
   * already, but it is an earlier layer than the components it is undoing, so
   * on this page the rules have to be restated at a weight that wins. */
  .page-support-support .matrix-table thead {
    display: none;
  }
  .page-support-support .matrix-table,
  .page-support-support .matrix-table tbody,
  .page-support-support .matrix-table tr,
  .page-support-support .matrix-table td {
    display: block;
  }
  .page-support-support .matrix-table tr {
    padding: 12px;
    border-bottom: 1px solid var(--grey-200);
    position: relative;
    min-height: 70px;
  }
  .page-support-support .matrix-table td,
  .page-support-support .matrix-table tr:hover td {
    padding: 2px 0;
    text-align: left;
    border: none;
    font-size: 12px;
    background: transparent;
  }
  .page-support-support .matrix-table td:first-child {
    padding-left: 0;
    font-size: 13px;
    font-weight: 700;
  }
  /* The SLA tint moves to the row: as blocks, the cells no longer tile it. */
  .page-support-support .matrix-table tr.sla-warning {
    background: var(--amber-bg);
  }
  .page-support-support .matrix-table tr.sla-critical {
    background: var(--red-bg);
  }
  /* Priority and age to the top right corner, clear of the stacked cells. */
  .page-support-support .matrix-table td:nth-child(7) {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11px;
  }
  .page-support-support .matrix-table td:nth-child(8) {
    position: absolute;
    top: 36px;
    right: 12px;
    font-size: 11px;
  }
  .page-support-support .modal {
    overflow: visible;
  }
  .page-support-support .modal-body {
    grid-template-columns: 1fr;
  }
  .page-support-support .modal-body-left {
    max-height: none;
    border-right: none;
    padding: 14px;
  }
  .page-support-support .modal-body-right {
    max-height: none;
    padding: 14px;
  }
  .page-support-support .step-label {
    font-size: 9px;
  }
  .page-support-support .step-connector {
    width: 20px;
  }
  .page-support-support .step-circle {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .page-support-support .card-row {
    grid-template-columns: 1fr;
  }
  .page-support-support .staff-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- 26. ai ----------------------------------------------
 * Components used by the ai pages and not provided by the layers
 * above. Adopted from those pages' <style> blocks when they were converted
 * to templates, so the pages themselves carry no CSS.
 *
 * These are ordinary components, not page styles: anything here is available
 * to every page, and belongs in an earlier layer once a second vertical uses
 * it. Colours must come from the tokens in 01-tokens.css so themes keep
 * working. */

.ai-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
}

.stat-card .stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  font-weight: 600;
  margin-bottom: 8px;
}

.stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}

.stat-card .stat-value.stat-value-text {
  font-size: 18px;
  overflow-wrap: anywhere;
}

.stat-card .stat-change {
  margin-top: 6px;
  font-size: 12px;
  color: var(--gray-400);
}

.stat-card .stat-change.up {
  color: var(--green);
}

.stat-card .stat-change.down {
  color: var(--red);
}

.services-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 28px;
}

.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.service-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.service-card.active {
  border-color: var(--accent);
  background: var(--accent-bg);
  box-shadow: 0 0 0 2px var(--accent-bg);
}

.service-card .icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.service-card .icon.blue {
  background: var(--accent-bg);
  color: var(--accent);
}

.service-card .icon.green {
  background: var(--green-bg);
  color: var(--green);
}

.service-card .icon.amber {
  background: var(--amber-bg);
  color: var(--amber);
}

.service-card .icon.red {
  background: var(--red-bg);
  color: var(--red);
}

.service-card .sname {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
}

.service-card .smethod {
  font-size: 10px;
  color: var(--gray-400);
  margin-top: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.interactive-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
  min-height: 200px;
}

.interactive-section .placeholder {
  text-align: center;
  padding: 48px 0;
  color: var(--gray-400);
}

.interactive-section .placeholder .big-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.interactive-section .placeholder p {
  font-size: 14px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  color: var(--gray-800);
  outline: none;
  transition: border 0.15s;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.form-group textarea {
  resize: vertical;
  min-height: 60px;
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ai-agent-panel {
  margin: 20px 0;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.ai-agent-head,
.ai-agent-form {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-agent-head {
  justify-content: space-between;
}

.ai-agent-name {
  color: var(--navy);
  font-size: 18px;
  font-weight: 700;
}

.ai-agent-title,
.ai-agent-desc,
.ai-agent-note {
  color: var(--gray-500);
}

.ai-agent-title,
.ai-agent-note {
  font-size: 12px;
}

.ai-agent-desc {
  margin: 8px 0 10px;
  font-size: 13px;
}

.ai-agent-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-agent-thread {
  display: grid;
  gap: 8px;
  max-height: 360px;
  margin: 14px 0;
  overflow-y: auto;
}

.ai-agent-message {
  max-width: 92%;
  padding: 10px 12px;
  border-radius: var(--radius);
  white-space: pre-wrap;
}

.ai-agent-message strong {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--gray-500);
}

.ai-agent-message-user {
  justify-self: end;
  background: var(--accent-bg);
}

.ai-agent-message-assistant {
  background: var(--gray-50);
  border: 1px solid var(--border);
}

.ai-agent-form textarea {
  flex: 1;
  min-width: 0;
  resize: vertical;
}

.ai-agent-form .btn {
  flex-shrink: 0;
}

.ai-agent-note {
  margin-top: 8px;
}

@media (max-width: 640px) {
  .ai-agent-form {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-agent-form .btn {
    width: 100%;
  }
}

.result-card {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gray-50);
}

.result-card .result-header {
  padding: 12px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--navy);
}

.result-card .result-body {
  padding: 16px;
}

.result-card .result-body.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  gap: 12px;
  color: var(--gray-400);
  font-size: 14px;
}

.result-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
}

.result-item:last-child {
  border-bottom: none;
}

.result-item .ri-main {
  flex: 1;
}

.result-item .ri-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

.result-item .ri-sub {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}

.result-item .ri-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-align: right;
  white-space: nowrap;
}

.result-item .ri-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.ri-badge.success {
  background: var(--green-bg);
  color: var(--green);
}

.ri-badge.danger {
  background: var(--red-bg);
  color: var(--red);
}

.ri-badge.warning {
  background: var(--amber-bg);
  color: var(--amber);
}

.activity-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.activity-section .activity-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.activity-section .activity-header h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.activity-section .activity-header span {
  font-size: 12px;
  color: var(--gray-400);
}

.activity-table {
  width: 100%;
  border-collapse: collapse;
}

.activity-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  background: var(--gray-50);
  border-bottom: 1px solid var(--border);
}

.activity-table td {
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}

.activity-table tr:last-child td {
  border-bottom: none;
}

.activity-table .at-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.at-status.success {
  background: var(--green-bg);
  color: var(--green);
}

.at-status.fail {
  background: var(--red-bg);
  color: var(--red);
}

.at-status.pending {
  background: var(--amber-bg);
  color: var(--amber);
}

.tokens-used {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
  .stats-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .ai-container { padding: 16px; }
}

/* Streaming (P2): the live bubble Zoei types into while a follow-up answer is
 * still arriving. A soft ellipsis fills it before the first fragment lands so
 * it never collapses to zero height. */
.ai-live:empty::before {
  content: "\2026";
  opacity: 0.5;
}

/* Frictionless close (P1): the one-click Book button under a Zoei reply that
 * named a default. It sits between her bubble and the timestamp and reuses the
 * result-card .btn-book look so the action is instantly recognizable. */
.msg-book-action {
  margin: 8px 0 2px;
}
/* Sized to its label: it reuses .btn-book's look, but that rule fixes the
 * width at 88px, which cuts off longer labels ("Bunu rezerve et"). */
.msg-book-action .zoei-book-btn {
  width: auto;
  min-width: 88px;
  max-width: 100%;
  padding: 0 14px;
}
.zoei-book-btn {
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
}

/* ---- 27. analytics ----------------------------------------------
 * Components used by the analytics pages and not provided by the layers
 * above. Adopted from those pages' <style> blocks when they were converted
 * to templates, so the pages themselves carry no CSS.
 *
 * These are ordinary components, not page styles: anything here is available
 * to every page, and belongs in an earlier layer once a second vertical uses
 * it. Colours must come from the tokens in 01-tokens.css so themes keep
 * working. */

/* When the reports were last run. It was a quarter-width KPI card in a
 * four-column grid, then a stamp beside a title the page drew itself; the
 * title belongs to the layout's topbar now, so what is left is one line of
 * metadata above the tabs.
 *
 * .wrap and .analytics-head went with it. The page sits in the layout's
 * .page-content like /dashboard does, and neither the centred column nor the
 * title row it held has anything left to wrap. */
.analytics-stamp {
  margin-bottom: 8px;
  text-align: right;
  font-size: 12px;
  color: var(--grey-500);
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* A second table treatment for .result-card — the AI console's output box,
 * declared in layer 26 — stood here, adopted from the prerendered tables this
 * page used to carry. The reports render .fx-table now, so the rules only
 * restyled another vertical's component from this one's layer. */

.chart-bars {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  height: 120px;
  padding: 10px 0;
}

.chart-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  min-width: 30px;
  position: relative;
  transition: .2s;
}

.chart-bar:hover {
  opacity: .8;
}

.chart-bar .lbl {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-light);
  white-space: nowrap;
}

.chart-bar .val {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: var(--navy);
}

.badge-green {
  background: var(--green-bg);
  color: var(--green);
}

.badge-red {
  background: var(--red-bg);
  color: var(--red);
}

.badge-amber {
  background: var(--amber-bg);
  color: var(--amber);
}

.badge-blue {
  background: var(--accent-bg);
  color: var(--accent);
}

/* The takeaway under a forecast table — a tinted note, not a card. Its four
 * declarations were written into the element's style attribute, background
 * included, which is why the tint could not follow the theme. */
.insight-note {
  margin-top: 16px;
  padding: 12px;
  background: var(--accent-bg);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--navy);
}

/* A report body whose shape is not fixed: prose when the model returns a
 * summary, the raw payload when it returns something this page has no table
 * for. The <pre> has to wrap — an unwrapped one is a horizontal scrollbar
 * across the whole panel.
 *
 * These sit in a plain .card, whose body carries no padding so a table can run
 * edge to edge in it the way every other table in the product does. Prose
 * cannot, so each block insets itself. */
.report-text {
  padding: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--grey-700);
  white-space: pre-wrap;
}

.report-raw {
  margin: 0;
  padding: 0 16px 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--grey-600);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

/* The name of one member of a report, above the table or block that shows it. */
.report-section {
  margin: 20px 0 8px;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--grey-500);
}

.report-section:first-child {
  margin-top: 16px;
}

/* A one-row report, read down the side instead of across. The label column is
 * a <th>, so it needs the row treatment rather than the header one. */
.report-pairs th {
  width: 34%;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-600);
  background: none;
  text-align: left;
}

/* .fx-table centres its cells and drops the rule under the last row's td only.
 * Down the side both belong to the label column's neighbour instead. */
.report-pairs td {
  text-align: left;
  font-weight: 600;
  color: var(--navy);
}

.report-pairs tr:last-child th {
  border-bottom: none;
}

/* ---- 28. inbox ----------------------------------------------
 * Components used by the inbox pages and not provided by the layers
 * above. Adopted from those pages' <style> blocks when they were converted
 * to templates, so the pages themselves carry no CSS.
 *
 * These are ordinary components, not page styles: anything here is available
 * to every page, and belongs in an earlier layer once a second vertical uses
 * it. Colours must come from the tokens in 01-tokens.css so themes keep
 * working. */

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-nav button {
  padding: 6px 12px;
  border: 1px solid var(--grey-300);
  background: var(--white);
  border-radius: var(--radius);
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
  color: var(--grey-700);
}

.calendar-nav button:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.calendar-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  border: 1px solid var(--grey-200);
  border-top: none;
  background: var(--white);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.calendar-grid .cal-day-header {
  padding: 8px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--grey-500);
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
}

.calendar-grid .cal-day {
  min-height: 80px;
  padding: 6px;
  border-bottom: 1px solid var(--grey-100);
  border-right: 1px solid var(--grey-100);
  font-size: 12px;
  cursor: pointer;
  transition: .1s;
  position: relative;
}

.calendar-grid .cal-day:nth-child(7n) {
  border-right: none;
}

.calendar-grid .cal-day:hover {
  background: var(--grey-50);
}

.calendar-grid .cal-day.other-month {
  color: var(--grey-300);
}

.calendar-grid .cal-day.today {
  background: var(--accent-pale);
}

.calendar-grid .cal-day.today .cal-day-num {
  background: var(--accent);
  color: var(--white);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The day the panel beside the grid is describing. Clicking a cell fills that
 * panel and nothing on the grid said which cell had been clicked, so the two
 * halves of the page read as unrelated. An inset ring rather than a background,
 * so today can be the selected day and still look like today. */
.calendar-grid .cal-day.selected {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.calendar-grid .cal-day .cal-day-num {
  font-weight: 600;
  margin-bottom: 2px;
}

.calendar-grid .cal-day .cal-event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  margin: 1px;
}

.calendar-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  margin-top: 16px;
}

.calendar-sidebar {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.calendar-sidebar .sidebar-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}

.calendar-sidebar .event-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calendar-sidebar .event-item {
  padding: 10px 12px;
  background: var(--grey-50);
  border-radius: var(--radius);
  border: 1px solid var(--grey-100);
  font-size: 12px;
  cursor: pointer;
}

.calendar-sidebar .event-item:hover {
  border-color: var(--accent);
}

.calendar-sidebar .event-item .event-title {
  font-weight: 600;
  color: var(--grey-800);
}

.calendar-sidebar .event-item .event-time {
  font-size: 10px;
  color: var(--grey-500);
  margin-top: 2px;
}

.event-detail {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-top: 16px;
}

.event-detail h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}

.event-detail .event-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--grey-500);
  margin-bottom: 12px;
}

.event-detail .event-desc {
  font-size: 13px;
  color: var(--grey-700);
  line-height: 1.6;
  white-space: pre-wrap;
}

.event-detail .event-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.modal-body .form-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.modal-body label {
  font-size: 12px;
  font-weight: 700;
  color: var(--grey-500);
}

.modal-body input,
.modal-body textarea,
.modal-body select {
  padding: 8px 10px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  width: 100%;
}

/* The rule above means "text fields", but it also catches the tick boxes: a
 * checkbox stretched to width:100% pushes its own label onto the next line and
 * takes the field padding as a border. */
.modal-body input[type="checkbox"],
.modal-body input[type="radio"] {
  width: auto;
  padding: 0;
  border: none;
  border-radius: 0;
}

.modal-body input:focus,
.modal-body textarea:focus,
.modal-body select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,105,92,.12);
}

.modal-body textarea {
  resize: vertical;
  min-height: 80px;
}

.modal-body .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.toast.error {
  background: var(--red);
}

.loading-spinner .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--grey-200);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin-bottom: 12px;
}

.status-badge.read {
  background: var(--grey-200);
  color: var(--grey-600);
}

.status-badge.unread {
  background: var(--accent-light);
  color: var(--accent);
}

.status-badge.urgent {
  background: var(--red-bg);
  color: var(--red);
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--red);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  margin-left: 5px;
  vertical-align: middle;
  line-height: 1;
}

.matrix-select {
  padding: 6px 10px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  background: var(--white);
  cursor: pointer;
}

.matrix-select:focus {
  border-color: var(--accent);
}

.matrix-checkbox {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-600);
  cursor: pointer;
  user-select: none;
}

.matrix-checkbox input {
  cursor: pointer;
}

.type-campaign {
  background: var(--blue-bg);
  color: var(--blue);
}

.type-promotion {
  background: var(--pink-bg);
  color: var(--pink);
}

.type-news {
  background: var(--green-bg);
  color: var(--green);
}

.type-rules_regulations {
  background: var(--amber-bg);
  color: var(--amber);
}

.type-general {
  background: var(--navy-pale);
  color: var(--navy);
}

.priority-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

.priority-urgent .priority-indicator {
  background: var(--red);
}

.priority-high .priority-indicator {
  background: var(--amber);
}

.priority-normal .priority-indicator {
  background: var(--green);
}

.priority-low .priority-indicator {
  background: var(--grey-400);
}

.modal-sm {
  max-width: 480px;
}

.modal-lg {
  max-width: 800px;
}

.split-view {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 0;
  min-height: 500px;
  margin: 0 24px;
}

.split-list {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow: hidden;
  border-right: none;
}

.split-detail {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  overflow-y: auto;
  padding: 20px;
}

.msg-list {
  list-style: none;
}

/* The left border is carried by every row, transparent until the row is
 * selected. Adding it only on .selected moved the row's text 3px sideways as
 * you clicked down the list. */
.msg-list-item {
  padding: 12px 14px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--grey-100);
  cursor: pointer;
  transition: .1s;
}

.msg-list-item:hover {
  background: var(--grey-50);
}

.msg-list-item.selected {
  background: var(--accent-pale);
  border-left-color: var(--accent);
}

.msg-list-item.unread {
  font-weight: 700;
  background: var(--navy-pale);
}

.msg-list-item .msg-sender {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
}

.msg-list-item .msg-subject {
  font-size: 13px;
  color: var(--grey-800);
  margin: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-list-item .msg-preview {
  font-size: 11px;
  color: var(--grey-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-list-item .msg-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.msg-list-item .msg-date {
  font-size: 10px;
  color: var(--grey-400);
}

.msg-list-item .msg-badges {
  display: flex;
  gap: 4px;
  align-items: center;
}

.detail-header {
  margin-bottom: 16px;
}

.detail-subject {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}

.detail-meta {
  display: flex;
  gap: 16px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--grey-500);
  flex-wrap: wrap;
}

.detail-body {
  padding: 16px 0;
  border-top: 1px solid var(--grey-200);
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--grey-700);
  white-space: pre-wrap;
}

.detail-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.reply-thread {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reply-item {
  padding: 10px 12px;
  background: var(--grey-50);
  border-radius: var(--radius);
  border: 1px solid var(--grey-100);
}

.reply-item .reply-sender {
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
}

.reply-item .reply-time {
  font-size: 10px;
  color: var(--grey-400);
  float: right;
}

.reply-item .reply-text {
  font-size: 13px;
  color: var(--grey-700);
  margin-top: 3px;
  white-space: pre-wrap;
}

.reply-input-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: flex-start;
}

.reply-input-row textarea {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  resize: none;
  outline: none;
  min-height: 36px;
}

.reply-input-row textarea:focus {
  border-color: var(--accent);
}

.calendar-today-sidebar {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.calendar-today-sidebar .sidebar-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}

.calendar-today-sidebar .event-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calendar-today-sidebar .event-item {
  padding: 10px 12px;
  background: var(--grey-50);
  border-radius: var(--radius);
  border: 1px solid var(--grey-100);
  font-size: 12px;
}

.calendar-today-sidebar .event-item .event-title {
  font-weight: 600;
  color: var(--grey-800);
}

.calendar-today-sidebar .event-item .event-time {
  font-size: 10px;
  color: var(--grey-500);
  margin-top: 2px;
}

.autocomplete-wrap {
  position: relative;
}

.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  max-height: 180px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  display: none;
}

.autocomplete-dropdown.show {
  display: block;
}

.autocomplete-dropdown .ac-item {
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--grey-100);
}

.autocomplete-dropdown .ac-item:hover {
  background: var(--accent-pale);
  color: var(--accent);
}

.autocomplete-dropdown .ac-item:last-child {
  border-bottom: none;
}

.selected-recipients {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.selected-recipients .recipient-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.selected-recipients .recipient-tag .remove-recip {
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: .6;
}

.selected-recipients .recipient-tag .remove-recip:hover {
  opacity: 1;
}

.ack-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,40,85,.45);
  z-index: 300;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.ack-overlay.show {
  display: flex;
}

.ack-modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  max-width: 520px;
  width: 100%;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 16px 64px rgba(0,40,85,.18);
}

.ack-modal .ack-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.ack-modal h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}

.ack-modal .ack-subject {
  font-size: 15px;
  font-weight: 600;
  color: var(--grey-700);
  margin-bottom: 8px;
}

.ack-modal .ack-body {
  font-size: 13px;
  color: var(--grey-600);
  margin-bottom: 16px;
  max-height: 200px;
  overflow-y: auto;
  text-align: left;
  padding: 12px;
  background: var(--grey-50);
  border-radius: var(--radius);
  white-space: pre-wrap;
}

.ack-modal .ack-check {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-700);
  cursor: pointer;
}

.ack-modal .ack-check input {
  cursor: pointer;
}

.ack-modal .ack-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.file-upload input {
  display: none;
}

.loading-spinner .spinner-text {
  font-size: 14px;
  font-weight: 600;
}

.sent-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.sent-status.delivered {
  background: var(--green-bg);
  color: var(--green);
}

.sent-status.read {
  background: var(--navy-pale);
  color: var(--navy);
}

.sent-status.pending {
  background: var(--amber-bg);
  color: var(--amber);
}

.sent-status.failed {
  background: var(--red-bg);
  color: var(--red);
}

/* The action button that shares the tab bar with the tabs. It cannot sit flush
 * against them — the tabs are full-height and it is not — so it keeps the 6px
 * inset it was authored with, here rather than on the element. */
.tab-bar .btn-action {
  margin: 6px 0 6px 6px;
}

/* ---- the message centre, scoped to its page ------------------------
 *
 * /inbox/inbox is a full-bleed console, the same shape as /support/support:
 * a split reading pane and a month grid both want the whole viewport. The
 * shared components it borrows are sized for narrow forms instead — .container
 * caps at 1000px and adds a second 24px of padding, .section-title draws a rule
 * and takes no gutter, .filter-bar takes no gutter at all, and .tab-btn is the
 * segmented control. Left alone they squeeze the whole screen into a ~700px
 * column: the filter row overflowed past the card edge and the calendar came
 * out 50px to the day.
 *
 * Layout only — no colour is set below that the components don't already use,
 * and none of it leaves the page-inbox-inbox scope. */

.page-inbox-inbox .container {
  max-width: 100%;
  margin: 0;
  padding: 0 0 24px;
}

.page-inbox-inbox .section-title {
  font-size: 20px;
  padding: 24px 24px 0;
  border-bottom: none;
  margin-bottom: 0;
}

/* Underline tabs. flex:1 on .tab-btn stretches three tabs and the compose
 * button across the whole bar, and fills the active one navy on top of the
 * bar's own bottom rule. */
.page-inbox-inbox .tab-btn {
  flex: 0 0 auto;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--grey-500);
}

.page-inbox-inbox .tab-btn.active {
  background: none;
  color: var(--navy);
  border-bottom-color: var(--navy);
}

/* Compose belongs at the far end of the bar, not wedged against the last tab.
 * The separator travels with it and keeps marking the break. */
.page-inbox-inbox .tab-bar .tab-sep {
  margin-left: auto;
}

/* Gutters, so the filters, the panes and the pager share one edge. */
.page-inbox-inbox .filter-bar {
  padding: 10px 24px;
  margin-bottom: 0;
}

.page-inbox-inbox .pagination {
  margin: 8px 24px 0;
}

/* The pager empties itself when there is nothing to page through, and an empty
 * .pagination is still a bordered white bar. */
.page-inbox-inbox .pagination:empty {
  display: none;
}

.page-inbox-inbox .empty-state {
  padding: 48px 20px;
  font-size: 14px;
  font-style: normal;
}

/* The reading pane is bounded by the viewport, so the list scrolls inside its
 * own card instead of running the page down the screen — .split-list clipped
 * it outright at overflow:hidden — and the pane stops short of a screenful
 * rather than reserving 500px of white for an inbox with nothing in it. */
.page-inbox-inbox .split-view {
  height: calc(100vh - 320px);
  min-height: 360px;
}

/* Ordinary scroll containers, deliberately not flex ones: as a column flex box
 * a pane shrinks its own content to fit instead of scrolling past it, which
 * compresses a long message body rather than letting the pane scroll. */
.page-inbox-inbox .split-list,
.page-inbox-inbox .split-detail {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Both panes state their emptiness in the middle of the pane rather than
 * pinned to the top of a tall blank card. The pane's height is definite —
 * .split-view sets it — so the percentage resolves. */
.page-inbox-inbox .split-list > .empty-state,
.page-inbox-inbox .split-detail > .empty-state,
.page-inbox-inbox .split-detail > .loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

/* Prev/title/Add Event collide before the header runs out of room, and the
 * title was the one that lost. */
.page-inbox-inbox .calendar-header {
  gap: 16px;
  flex-wrap: wrap;
}

.page-inbox-inbox .calendar-layout {
  margin: 12px 24px 0;
  align-items: start;
}

@media (max-width: 768px) {
  /* One gutter for the whole page, 12px. 14-responsive.css says as much
   * already, but it is an earlier layer than the components it is undoing, so
   * here the rules have to be restated at a weight that wins — without them
   * the 380px reading pane keeps its second column and the page scrolls
   * sideways. */
  .page-inbox-inbox .section-title {
    padding: 16px 12px 0;
    font-size: 18px;
  }
  .page-inbox-inbox .section-desc {
    padding: 2px 12px 8px;
  }
  .page-inbox-inbox .tab-bar {
    padding: 0 12px;
  }
  .page-inbox-inbox .tab-btn {
    padding: 8px 12px;
  }
  .page-inbox-inbox .filter-bar {
    padding: 8px 12px;
  }
  .page-inbox-inbox .matrix-search {
    width: 100%;
  }
  .page-inbox-inbox .matrix-section {
    margin: 0 12px;
  }
  .page-inbox-inbox .pagination {
    margin: 8px 12px 0;
    flex-wrap: wrap;
    gap: 8px;
  }
  .page-inbox-inbox .split-view {
    grid-template-columns: 1fr;
    margin: 0 12px;
    height: auto;
  }
  .page-inbox-inbox .split-list {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-right: 1px solid var(--grey-200);
    max-height: 45vh;
  }
  .page-inbox-inbox .split-detail {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-top: none;
  }
  .page-inbox-inbox .calendar-layout {
    grid-template-columns: 1fr;
    margin: 12px 12px 0;
    gap: 12px;
  }
  .page-inbox-inbox .calendar-grid .cal-day {
    min-height: 60px;
    font-size: 11px;
  }
  /* The sent table becomes one card per row, for the same layer reason. */
  .page-inbox-inbox .matrix-table thead {
    display: none;
  }
  .page-inbox-inbox .matrix-table,
  .page-inbox-inbox .matrix-table tbody,
  .page-inbox-inbox .matrix-table tr,
  .page-inbox-inbox .matrix-table td {
    display: block;
  }
  .page-inbox-inbox .matrix-table tr {
    padding: 12px;
    border-bottom: 1px solid var(--grey-200);
  }
  .page-inbox-inbox .matrix-table td {
    padding: 2px 0;
    text-align: left;
    border: none;
    font-size: 12px;
  }
  .page-inbox-inbox .matrix-table td:first-child {
    padding-left: 0;
    font-size: 13px;
    font-weight: 700;
  }
}

/* ---- /inbox/calendar -----------------------------------------------------
 *
 * The calendar tab of /inbox/inbox with a page of its own, and it inherits the
 * same mismatch: a month grid wants the width of the screen, and .container
 * caps it at 1000px and centres it. Beside a 240px sidebar that left the grid
 * in a ~700px column adrift of centre, with seven day cells too narrow to hold
 * a date and a dot, and a page title that lined up with neither edge.
 *
 * Layout only — the components below already set every colour, and none of it
 * leaves the page-inbox-calendar scope. */

.page-inbox-calendar .container {
  max-width: 100%;
  margin: 0;
  padding: 0 0 24px;
}

/* The title takes the gutter the container gave up, and the same 24px the grid
 * below it uses, so the page has one left edge. */
.page-inbox-calendar .page-title {
  padding: 24px 24px 0;
}

/* Prev/title/Add Event collide before the header runs out of room, and the
 * month title is the one that loses. */
.page-inbox-calendar .calendar-header {
  gap: 16px;
  flex-wrap: wrap;
}

/* align-items:start so the events panel is as tall as its own contents. As a
 * stretched grid item it drew a 700px white card down the side of the month
 * to hold one line of text. */
.page-inbox-calendar .calendar-layout {
  margin: 12px 24px 0;
  align-items: start;
}

@media (max-width: 768px) {
  /* One gutter for the whole page, 12px. 14-responsive.css says as much
   * already, but it is an earlier layer than the components it is undoing, so
   * the rules have to be restated here at a weight that wins. */
  .page-inbox-calendar .page-title {
    padding: 16px 12px 0;
    font-size: 18px;
  }
  /* Three things do not fit on one row at 390px, and wrapping alone left the
   * month stranded beside Next with Add Event under it. The month is what the
   * row is about, so it takes the first line and the controls take the second. */
  .page-inbox-calendar .calendar-header .calendar-title {
    order: -1;
    flex: 1 1 100%;
  }
  .page-inbox-calendar .calendar-header {
    gap: 10px;
  }
  .page-inbox-calendar .calendar-layout {
    grid-template-columns: 1fr;
    margin: 12px 12px 0;
    gap: 12px;
  }
  .page-inbox-calendar .calendar-grid .cal-day {
    min-height: 60px;
    font-size: 11px;
  }
}

/* ---- 29. booking ----------------------------------------------
 * Components used by the pages at the top of frontend/ — flight and hotel
 * search, the booking flow, and its outcome screens — and not provided by
 * the layers above. Adopted from those pages' <style> blocks when they were converted
 * to templates, so the pages themselves carry no CSS.
 *
 * These are ordinary components, not page styles: anything here is available
 * to every page, and belongs in an earlier layer once a second vertical uses
 * it. Colours must come from the tokens in 01-tokens.css so themes keep
 * working. */

.failure-card {
  background: var(--white);
  border: 1px solid var(--red-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
  padding: 48px 32px;
  margin-bottom: 24px;
}

.failure-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--red-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 40px;
  color: var(--red);
  border: 3px solid var(--red-border);
}

.failure-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--red);
  margin-bottom: 12px;
}

.reasons-box {
  text-align: left;
  max-width: 480px;
  margin: 20px auto;
  padding: 16px 24px;
  background: var(--red-bg);
  border-radius: var(--radius);
  border: 1px solid var(--red-border);
}

.reasons-box h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 10px;
}

.reasons-box li {
  font-size: 12px;
  color: var(--grey-700);
  padding: 5px 0;
  list-style: none;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.reasons-box li::before {
  content: '•';
  color: var(--red);
  font-weight: 700;
  flex-shrink: 0;
}

.review-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

.loading-overlay.show {
  display: flex;
}

.loading-text {
  color: var(--white);
  font-size: 18px;
  font-weight: 600;
}

.loading-sub {
  color: rgba(255,255,255,.6);
  font-size: 13px;
}

.flight-leg {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--grey-100);
  align-items: center;
}

.flight-leg:last-child {
  border-bottom: none;
}

.flight-leg .airline-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--navy-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--navy);
  text-align: center;
  line-height: 1.2;
  flex-shrink: 0;
}

.flight-leg .route-info {
  flex: 1;
}

.flight-leg .route-info .airline-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}

.flight-leg .route-info .flight-meta {
  font-size: 11px;
  color: var(--grey-500);
}

.flight-leg .time-block {
  text-align: right;
}

.flight-leg .time-block .time {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}

.flight-leg .time-block .dur {
  font-size: 11px;
  color: var(--grey-400);
}

.flight-leg .leg-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  margin-left: auto;
}

.flight-leg .leg-role {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey-400);
  min-width: 72px;
}

img.airline-logo {
  object-fit: contain;
  padding: 4px;
}

.pass-list-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--grey-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pass-list-item:last-child {
  border-bottom: none;
}

.pass-list-item .pass-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}

.pass-list-item .pass-detail {
  font-size: 11px;
  color: var(--grey-500);
  margin-top: 2px;
}

.price-breakdown {
  padding: 4px 0;
  display: none;
}

.price-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}

.price-row.total {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  border-top: 2px solid var(--navy);
  margin-top: 8px;
  padding-top: 12px;
}

.price-row .pr-lbl {
  color: var(--grey-500);
}

.price-row .pr-val {
  font-weight: 600;
}

.price-row.discount .pr-val {
  color: var(--green);
}

.terms-box {
  padding: 12px 16px;
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  margin-top: 4px;
}

.terms-text {
  font-size: 11px;
  color: var(--grey-500);
  line-height: 1.6;
  margin-top: 8px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s;
}

.terms-text.open {
  max-height: 200px;
}

.edit-link {
  display: inline-block;
  font-size: 12px;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  margin-top: 8px;
  text-align: center;
  width: 100%;
}

.edit-link:hover {
  color: var(--accent-light);
}

.success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--green-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 40px;
  color: var(--green);
  border: 3px solid var(--green-border);
}

.success-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--green);
  margin-bottom: 6px;
}

.success-sub {
  font-size: 14px;
  color: var(--grey-500);
  margin-bottom: 24px;
}

.ref-box {
  display: inline-block;
  background: var(--navy-pale);
  border: 2px dashed var(--navy);
  border-radius: var(--radius);
  padding: 16px 32px;
  margin-bottom: 8px;
}

.ref-box .ref-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grey-500);
  margin-bottom: 4px;
}

.ref-box .ref-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 2px;
}

.summary-box {
  text-align: left;
  max-width: 480px;
  margin: 24px auto;
  padding: 16px 24px;
  background: var(--grey-50);
  border-radius: var(--radius);
  border: 1px solid var(--grey-200);
}

.summary-box .s-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 13px;
}

.summary-box .s-row .s-lbl {
  color: var(--grey-500);
}

.summary-box .s-row .s-val {
  font-weight: 600;
  color: var(--grey-800);
}

.summary-box .s-div {
  height: 1px;
  background: var(--grey-200);
  margin: 8px 0;
}

.summary-box .s-row.s-total .s-lbl {
  font-weight: 700;
  font-size: 14px;
}

.summary-box .s-row.s-total .s-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
}

.next-steps {
  text-align: left;
  max-width: 480px;
  margin: 24px auto;
  padding: 20px 24px;
  background: var(--accent-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--green-border);
}

.next-steps h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
}

.next-steps li {
  font-size: 13px;
  color: var(--grey-700);
  padding: 6px 0;
  list-style: none;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.next-steps li::before {
  content: '✓';
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
}

.ticket-card {
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: left;
  max-width: 520px;
  margin: 0 auto;
}

.ticket-header {
  background: var(--navy);
  color: var(--white);
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-brand {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.5px;
}

.ticket-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: .8;
}

.ticket-body {
  padding: 20px 24px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.ticket-qr {
  flex-shrink: 0;
}

.ticket-qr img {
  width: 130px;
  height: 130px;
  border: 1px solid var(--grey-200);
  border-radius: 6px;
}

.ticket-info {
  flex: 1;
}

.ticket-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--grey-100);
}

.ticket-row:last-child {
  border-bottom: none;
}

.ticket-row .t-label {
  color: var(--grey-500);
  font-weight: 600;
}

.ticket-row .t-value {
  color: var(--grey-800);
  font-weight: 600;
}

.ticket-footer {
  display: flex;
  gap: 8px;
  padding: 14px 24px;
  background: var(--grey-50);
  border-top: 1px solid var(--grey-200);
  justify-content: center;
}

/* Printing. Two pages print one element and hide the rest of the page, and
 * they do it differently: the flight confirmation isolates #eticket-section
 * with visibility, the hotel confirmation prints .voucher-box and forces its
 * colours through. Merged naively, the flight rule's `body *` would blank the
 * hotel voucher too — the section it makes visible again does not exist there.
 * Each block is therefore scoped to the page that has the element it is
 * about, which is what the pages' own <style> blocks did by construction. */
@media print {
  body:has(#eticket-section) * { visibility: hidden; }
  body:has(#eticket-section) #eticket-section,
  body:has(#eticket-section) #eticket-section * { visibility: visible; }
  #eticket-section { position: absolute; left: 0; top: 0; width: 100%; display: block !important; }
  .ticket-footer .btn { display: none; }
  body:has(#eticket-section) .header,
  body:has(#eticket-section) .actions,
  body:has(#eticket-section) .success-card,
  body:has(#eticket-section) .summary-box,
  body:has(#eticket-section) .next-steps { display: none !important; }

  /* The hotel voucher, which prints in place rather than in isolation. */
  body:has(.voucher-box) { background: var(--white) !important; }
  body:has(.voucher-box) .header,
  body:has(.voucher-box) .container > .steps,
  body:has(.voucher-box) .next-steps,
  body:has(.voucher-box) .actions,
  body:has(.voucher-box) .voucher-btn,
  body:has(.voucher-box) .success-card,
  body:has(.voucher-box) .summary-box,
  body:has(.voucher-box) .ref-box { display: none !important; }
  .voucher-box {
    display: block !important;
    border: 2px solid var(--grey-800) !important;
    box-shadow: none !important;
    margin: 0 auto !important;
  }
  .voucher-head {
    background: var(--navy) !important;
    color: var(--white) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .voucher-head .v-status {
    background: var(--green) !important;
    color: var(--white) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .voucher-body { display: flex !important; }
}

.sec-head .icon.purple {
  background: var(--violet-bg);
  color: var(--violet);
}

.form-row.two {
  grid-template-columns: 1fr 1fr;
}

.form-row.three {
  grid-template-columns: 1fr 1fr 1fr;
}

.form-row.four {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.pass-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  overflow: hidden;
}

.pass-header {
  padding: 12px 20px;
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  display: flex;
  align-items: center;
  gap: 12px;
}

.pass-type {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}

.pass-type .badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.pass-type .badge.adult {
  background: var(--navy-pale);
  color: var(--navy);
}

.pass-detail {
  font-size: 11px;
  color: var(--grey-400);
  margin-left: auto;
}

.pass-body {
  padding: 16px 20px;
}

.passengers-section {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

.tooltip-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip-wrap .tooltip-box {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--white);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
  max-width: 240px;
  z-index: 500;
  pointer-events: none;
  transition: opacity .18s;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}

.tooltip-wrap .tooltip-box::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  border: 6px solid transparent;
  border-top-color: var(--navy);
  transform: translateX(-50%);
}

.tooltip-wrap:hover .tooltip-box,
.tooltip-wrap:focus .tooltip-box,
.tooltip-wrap.active .tooltip-box {
  visibility: visible;
  opacity: 1;
}

.coupon-box {
  background: var(--accent-bg);
  border: 1px solid var(--green-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-top: 12px;
}

.coupon-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.coupon-box .fg {
  flex: 1;
}

.coupon-apply-btn {
  padding: 10px 18px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--white);
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: .15s;
}

.coupon-apply-btn:hover {
  background: var(--accent-light);
}

.coupon-status {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  display: none;
}

.coupon-status.show {
  display: block;
}

.coupon-status.success {
  color: var(--green);
}

.coupon-status.error {
  color: var(--red);
}

.booking-code-box {
  margin-top: 12px;
}

.booking-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--amber-bg);
  border: 1px solid var(--amber-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--grey-700);
  transition: .15s;
}

.booking-code-head:hover {
  background: var(--amber-hover);
}

.booking-code-head.open {
  border-color: var(--amber);
  background: var(--amber-active);
}

.booking-code-head .arrow {
  transition: transform .2s;
  font-size: 10px;
}

.booking-code-head.open .arrow {
  transform: rotate(180deg);
}

.booking-code-inner {
  display: none;
  padding: 12px 0 4px;
}

.booking-code-inner.open {
  display: block;
}

.booking-code-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.booking-code-fields .fg {
  min-width: 0;
}

.booking-code-fields input {
  font-size: 12px;
  padding: 8px 10px;
}

.booking-code-apply {
  padding: 7px 14px;
  border-radius: var(--radius);
  background: var(--amber);
  color: var(--white);
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: .15s;
}

.booking-code-apply:hover {
  background: var(--amber-strong);
}

.action-history-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 16px;
}

.action-history-head {
  padding: 14px 20px;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.action-history-head h3 {
  font-size: 14px;
  font-weight: 700;
}

.action-history-head .count {
  background: rgba(255,255,255,.15);
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

.action-history-body {
  padding: 16px 20px;
}

.chat-actions-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.chat-action-btn {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--grey-300);
  background: var(--white);
  color: var(--grey-600);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: .15s;
}

.chat-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}

.chat-messages::-webkit-scrollbar {
  width: 4px;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: var(--grey-300);
  border-radius: 4px;
}

.chat-msg {
  display: flex;
  gap: 8px;
  max-width: 85%;
}

.chat-msg.agency {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-msg.staff {
  align-self: flex-start;
}

.chat-msg.system {
  align-self: center;
  max-width: 100%;
}

.chat-bubble {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  word-wrap: break-word;
}

.chat-msg.agency .chat-bubble {
  background: var(--accent);
  color: var(--white);
  border-bottom-right-radius: 4px;
}

.chat-msg.staff .chat-bubble {
  background: var(--grey-100);
  color: var(--grey-800);
  border: 1px solid var(--grey-200);
  border-bottom-left-radius: 4px;
}

.chat-msg.system .chat-bubble {
  background: var(--grey-100);
  color: var(--grey-600);
  border-radius: var(--radius);
  text-align: center;
  font-size: 12px;
  width: 100%;
}

.chat-bubble .sender {
  font-size: 10px;
  font-weight: 700;
  opacity: .7;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.chat-bubble .msg-time {
  font-size: 10px;
  opacity: .5;
  margin-top: 4px;
  text-align: right;
}

.chat-bubble .penalty-box {
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 8px;
  font-size: 12px;
}

.chat-bubble .penalty-box .pen-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}

.chat-bubble .penalty-box .pen-total {
  border-top: 1px solid var(--accent);
  margin-top: 6px;
  padding-top: 6px;
  font-weight: 700;
  font-size: 13px;
}

.chat-bubble .confirm-box {
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 8px;
}

.chat-bubble .confirm-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
}

.chat-bubble .confirm-btns {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.chat-bubble .confirm-btns .btn-confirm {
  padding: 6px 16px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.chat-bubble .confirm-btns .btn-confirm.yes {
  background: var(--green);
  color: var(--white);
}

.chat-bubble .confirm-btns .btn-confirm.no {
  background: var(--grey-300);
  color: var(--grey-700);
}

.chat-bubble .credit-notice {
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--green);
  font-weight: 600;
}

.chat-bubble .status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 6px;
}

.chat-bubble .status-badge.pending {
  background: var(--amber-bg);
  color: var(--amber);
}

.chat-bubble .status-badge.confirmed {
  background: var(--green-bg);
  color: var(--green);
}

.chat-bubble .status-badge.cancelled {
  background: var(--red-bg);
  color: var(--red);
}

.chat-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.chat-input-row textarea {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  resize: none;
  outline: none;
}

.chat-input-row textarea:focus {
  border-color: var(--accent);
}

.chat-input-row .send-btn {
  padding: 6px 16px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--white);
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.discount-row {
  color: var(--green)!important;
  font-weight: 700;
}

.discount-row .val {
  color: var(--green)!important;
}

.grand-total-row .val {
  font-size: 22px!important;
}

.booking-surcharge-row .val {
  color: var(--amber)!important;
  font-weight: 700;
}

.change-scope-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.change-scope-opt {
  padding: 6px 12px;
  border: 1.5px solid var(--grey-300);
  border-radius: 20px;
  background: var(--white);
  color: var(--grey-600);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: .15s;
  user-select: none;
}

.change-scope-opt:hover {
  border-color: var(--violet);
  color: var(--violet);
}

.change-scope-opt.sel {
  border-color: var(--violet);
  background: var(--violet-bg);
  color: var(--violet);
  font-weight: 700;
}

.ch-input-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.ch-input-row .fg {
  min-width: 0;
  flex: 1;
}

.ch-input-row input {
  font-size: 12px;
  padding: 6px 8px;
}

.ch-check-btn {
  padding: 6px 16px;
  border-radius: 20px;
  background: var(--violet);
  color: var(--white);
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: .15s;
  white-space: nowrap;
}

.ch-check-btn:hover {
  background: var(--violet-dark);
}

.ch-check-btn:disabled {
  background: var(--grey-300);
  cursor: not-allowed;
}

.suggestion-card {
  background: var(--accent-bg);
  border: 1px solid var(--green-border);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin: 4px 0;
}

.suggestion-card .sg-route {
  font-weight: 700;
  color: var(--navy);
  font-size: 12px;
}

.suggestion-card .sg-detail {
  font-size: 11px;
  color: var(--grey-600);
}

.suggestion-card .sg-avail {
  font-size: 11px;
  color: var(--green);
  font-weight: 700;
}

.suggestion-card .sg-accept-btn {
  padding: 4px 12px;
  border-radius: 14px;
  border: 1.5px solid var(--violet);
  background: var(--white);
  color: var(--violet);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.balance-topup-box {
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 12px;
  margin-top: 6px;
}

.change-fees-box {
  margin: 6px 0;
  padding: 8px 10px;
  background: rgba(124,58,237,.06);
  border: 1px solid rgba(124,58,237,.2);
  border-radius: 6px;
  font-size: 12px;
}

.change-fees-box .fee-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}

.change-fees-box .fee-total {
  border-top: 1px solid rgba(124,58,237,.2);
  margin-top: 4px;
  padding-top: 4px;
  font-weight: 700;
  font-size: 13px;
}

.change-fees-box .fee-credit {
  border-top: 1px solid rgba(0,137,123,.2);
  margin-top: 4px;
  padding-top: 4px;
  font-weight: 700;
  font-size: 13px;
  color: var(--green);
}

.change-blocked-box {
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 12px;
}

.change-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

.change-status-pill.checking {
  background: var(--amber-bg);
  color: var(--amber);
}

.change-status-pill.pending-topup {
  background: var(--red-bg);
  color: var(--red);
}

.change-status-pill.complete {
  background: var(--green-bg);
  color: var(--green);
}

.change-status-pill.suggestions {
  background: var(--violet-bg);
  color: var(--violet);
}

.pass-autocomplete {
  position: relative;
}

.pass-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  z-index: 200;
  max-height: 200px;
  overflow-y: auto;
  display: none;
}

.pass-dropdown.show {
  display: block;
}

.pass-item {
  padding: 9px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--grey-100);
  font-size: 12px;
  transition: .1s;
}

.pass-item:last-child {
  border-bottom: none;
}

.pass-item:hover {
  background: var(--navy-pale);
}

.pass-item .pass-name {
  font-weight: 600;
  color: var(--navy);
}

.pass-item .pass-detail {
  font-size: 10px;
  color: var(--grey-500);
}

.auth-btn {
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  font-size: 12px;
}

.auth-btn:hover {
  background: rgba(255,255,255,.1);
}

.search-bar {
  background: var(--white);
  border-bottom: 1px solid var(--grey-200);
  padding: 18px 0;
}

.search-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.trip-toggle {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-5);
  background: var(--grey-100);
  border-radius: var(--radius);
  overflow: hidden;
  height: var(--control-h);
  align-items: stretch;
}

.trip-btn {
  padding: 0 var(--space-7);
  border: none;
  background: transparent;
  font-size: var(--text-sm, 13px);
  font-weight: 500;
  cursor: pointer;
  transition: .15s;
  color: var(--grey-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  box-sizing: border-box;
}

.trip-btn.active {
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
}

.trip-btn:hover:not(.active) {
  background: var(--grey-200);
}

.search-form {
  display: flex;
  gap: var(--space-5);
  align-items: flex-end;
}

.flex-pax {
  flex: 1.05;
  min-width: 168px;
}

.pax-field {
  position: relative;
}

.pax-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: var(--control-h);
  height: var(--control-h);
  padding: 0 var(--space-5);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  background: var(--white);
  font-size: var(--text-sm, 13px);
  font-family: inherit;
  color: var(--gray-800);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.pax-trigger:focus,
.pax-field.is-open .pax-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,105,92,.12);
  outline: none;
}

.pax-trigger-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pax-trigger-icon {
  flex-shrink: 0;
  color: var(--accent);
  display: flex;
}

.pax-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 240;
  width: 340px;
  max-width: calc(100vw - 32px);
  padding: 16px 18px 12px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
}

.pax-pop[hidden] {
  display: none;
}

.pax-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}

.pax-row-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

.pax-row-hint {
  margin-top: 2px;
  font-size: 12px;
  color: var(--gray-500);
}

.pax-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.pax-count {
  min-width: 1.2em;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-800);
}

.pax-step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--grey-300);
  background: var(--gray-50);
  color: var(--gray-500);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
}

.pax-step:hover:not(:disabled) {
  border-color: var(--grey-400);
}

.pax-step:disabled {
  opacity: .45;
  cursor: default;
}

.pax-step-plus {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
}

.pax-step-plus:hover:not(:disabled) {
  border-color: var(--accent-light);
  background: var(--accent-light);
}

.pax-cabins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--grey-100);
}

.pax-cabin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--grey-300);
  border-radius: 999px;
  background: var(--white);
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.pax-cabin-check {
  display: none;
  font-size: 13px;
  font-weight: 700;
}

.pax-cabin.is-on {
  border-color: var(--accent);
  color: var(--accent);
}

.pax-cabin.is-on .pax-cabin-check {
  display: inline;
}

.pax-pop-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 4px;
}

.pax-done {
  border: none;
  background: none;
  padding: 8px 4px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.pax-done:hover {
  color: var(--accent-light);
}

.markup-tool {
  background: var(--white);
  border: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mt-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--accent);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.mt-modes {
  display: flex;
  gap: 0;
}

.mt-mode {
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  transition: .15s;
}

.mt-mode.active {
  background: rgba(255,255,255,.2);
  color: var(--white);
}

.mt-body {
  padding: 8px 12px;
  display: flex;
  gap: 6px;
  align-items: center;
}

.mt-body .fg-1 {
  flex: 1;
}

.mt-input {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--grey-300);
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
  font-family: inherit;
}

.mt-input:focus {
  border-color: var(--accent);
  outline: none;
}

.mt-preview {
  font-size: 11px;
  color: var(--grey-600);
  font-weight: 600;
  margin-top: 4px;
  padding: 0 12px 4px;
  text-align: right;
}

.active-filters-bar {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  padding: 10px 12px;
}

.active-filters-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--navy);
  margin-bottom: 6px;
}

.af-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--navy-pale);
  color: var(--navy);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  margin: 0 3px 3px 0;
  font-weight: 500;
}

.af-tag .x {
  font-weight: 700;
  font-size: 12px;
  margin-left: 2px;
  cursor: pointer;
}

.price-range {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.price-range input {
  width: 80px;
  flex-shrink: 0;
  padding: 4px 8px;
  border: 1px solid var(--grey-300);
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
}

.range-input {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.range-input input {
  width: 60px;
  padding: 4px 6px;
  border: 1px solid var(--grey-300);
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
}

/* Symbol only in the header - no airline name text next to it - so nothing
   here needs the margin-right a badge-plus-label layout would. */
.matrix-table th .al-badge-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  color: var(--white);
  vertical-align: middle;
}

/* Real airline logo image in the matrix header, same slot as the initials
   badge above - object-fit keeps a non-square source from stretching. */
.matrix-table th .al-badge-sm-img {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  vertical-align: middle;
  object-fit: cover;
  background: none;
  border: none;
  box-shadow: none;
}

.matrix-price {
  font-weight: 700;
}

.matrix-price.best {
  background: var(--green-bg);
  color: var(--green);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
}

.matrix-price.med {
  background: var(--amber-bg);
  color: var(--amber);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
}

/* The single cheapest 1-stop cell in the matrix - pale navy, distinct from
   the nonstop highlight (.best, pale green) above. */
.matrix-price.navy {
  background: var(--navy-pale);
  color: var(--navy-mid);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
}

.matrix-nodata {
  color: var(--grey-300);
  font-style: italic;
}

.mc-results-header {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--navy-pale);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mc-results-body {
  display: none;
  padding: 10px 0;
}

.mc-results-body.open {
  display: block;
}

.mc-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}

.mc-results-body .mc-section-title {
  font-size: 12px;
  color: var(--accent);
}

.airport-field {
  position: relative;
}

.airport-field input {
  padding-right: 34px;
}

.od-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--grey-400);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.od-clear:hover {
  color: var(--navy);
  background: var(--grey-100);
}

.route-pair {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  flex: 2.85;
  min-width: 280px;
}

.route-pair .route-od {
  flex: 1;
  min-width: 0;
}

.od-swap {
  flex-shrink: 0;
  width: 36px;
  height: var(--control-h);
  margin: 0;
  padding: 0;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: border-color .15s, background .15s, color .15s;
}

.od-swap:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--navy-pale);
}

.airport-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  max-height: 320px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.airport-suggestions.show {
  display: block;
}

.as-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--grey-100);
  display: flex;
  flex-direction: column;
}

.as-item:last-child {
  border-bottom: none;
}

.as-item:hover {
  background: var(--navy-pale);
}

.as-item .as-city {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}

.as-item .as-city .as-code {
  font-weight: 700;
  color: var(--accent);
  margin-left: 6px;
}

.as-item .as-airport {
  font-size: 11px;
  color: var(--grey-500);
  margin-top: 2px;
}

.as-item .as-country {
  font-size: 10px;
  color: var(--grey-400);
}

/* A "City — All Airports" heading ahead of a multi-airport city's individual
 * results (see initAirportAutocomplete in flights.js). Tinted and bordered
 * so it reads as a heading for the rows under it, not one more result. */
.as-item.as-group {
  background: var(--navy-pale);
  border-left: 3px solid var(--accent);
}

.as-item.as-group:hover {
  background: var(--navy-pale);
  filter: brightness(0.97);
}

.as-item.as-group .as-city {
  color: var(--accent);
}

/* A hotel-name match in the hotel destination box (see initCityAutocomplete
 * in hotels.js). Unlike .as-group above, this isn't a heading over rows
 * below it - a "hotel" result and a "city" result are two independent kinds
 * of match, so this only needs its own distinct look, not a nesting cue. */
.as-item.as-hotel {
  border-left: 3px solid var(--amber);
  background: var(--amber-bg);
}

.as-item.as-hotel:hover {
  filter: brightness(0.97);
}

.as-hotel-icon {
  margin-right: 6px;
}

.as-item.as-hotel .as-star {
  font-size: 10px;
  font-weight: 700;
  color: var(--amber);
  margin-left: 6px;
}

/* The search filter column on /flights and /hotels.
 *
 * This was class="sidebar" and had no rules of its own — it borrowed the nav's,
 * because the two happened to share a name. They are not the same thing, and
 * once every page gained the real nav there were two .sidebar elements on these
 * two pages: one the fixed navigation rail, one a column of checkboxes. The
 * geometry it was actually using is written out here so the nav's rules can
 * belong to the nav. */
.filter-panel {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search-results-wrap {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  max-width: 1400px;
  margin: 0 auto;
}

.main-area {
  flex: 1;
  min-width: 0;
}

.ai-sidebar {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cb-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--grey-400);
  background: var(--grey-100);
  padding: 1px 7px;
  border-radius: 10px;
}

.clear-btn {
  width: 100%;
  padding: 8px;
  background: transparent;
  color: var(--grey-500);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 12px;
  cursor: pointer;
  margin-top: 6px;
}

.filter-show-more {
  display: block;
  background: none;
  border: none;
  padding: 4px 0 0;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.filter-show-more:hover {
  text-decoration: underline;
}

.flight-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: .2s;
  margin-bottom: 10px;
}

.flight-card:hover {
  box-shadow: 0 4px 16px rgba(0,40,85,.08);
}

.journey-banner {
  font-size: 12px;
  color: var(--grey-600);
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 8px 0 14px;
}

.pkg-hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--grey-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 8px;
}

.pkg-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 10px;
}

.pkg-card.packaged {
  border-color: var(--navy-mid);
}

.pkg-card.mix {
  border-color: var(--accent);
}

.pkg-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--navy-pale);
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 8px;
}

.pkg-badge.mix {
  color: var(--accent);
  background: var(--accent-bg);
}

.pkg-leg {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: var(--navy);
  padding: 4px 0;
}

.pkg-route {
  font-weight: 700;
  min-width: 88px;
}

.pkg-flight,
.pkg-times {
  color: var(--grey-700);
}

.pkg-sup {
  font-size: 11px;
  color: var(--grey-400);
  margin-left: auto;
}

.pkg-note {
  font-size: 12px;
  color: var(--grey-600);
  margin: 8px 0 4px;
}

.pkg-issue {
  margin: 6px 0 0 18px;
  padding: 0;
  font-size: 11px;
  color: var(--grey-500);
}

.pkg-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--grey-100);
}

.pkg-provider {
  font-size: 12px;
  color: var(--grey-500);
}

.pkg-price {
  margin-left: auto;
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
}

.card-accent-bar {
  height: 3px;
  background: var(--navy-mid);
}

.card-accent-bar.green {
  background: var(--green);
}

.card-ckcell {
  padding: 14px;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--grey-200);
}

.card-ckcell input {
  accent-color: var(--navy);
  width: 17px;
  height: 17px;
}

.card-al {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* .card-row is a grid with this column set to `auto` - width alone is a
     floor, not a ceiling, so a long airline name ("Turkish Airlines" next to
     "TK") still grew this column past it and left every card's route/price
     columns starting at a different x from its neighbours. max-width caps
     it at the same figure so every card lines up regardless of what name
     landed in it. */
  min-width: 90px;
  max-width: 90px;
  gap: 3px;
  border-right: 1px solid var(--grey-200);
}

.al-logo {
  background: linear-gradient(135deg, var(--airline-from), var(--airline-to));
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  color: var(--white);
}

/* Real airline logo image, same slot/size as the text-badge fallback above -
   object-fit keeps a non-square source from stretching. */
.al-logo-img {
  object-fit: cover;
  background: var(--white);
}

.al-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--grey-700);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-flight {
  font-size: 10px;
  color: var(--grey-500);
}

.fare-tag.net {
  background: var(--green-bg);
  color: var(--green);
}

.fare-tag.consolidated {
  background: var(--violet-bg);
  color: var(--violet);
}

.fare-tag.public {
  background: var(--navy-pale);
  color: var(--navy);
}

.card-route {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  border-right: 1px solid var(--grey-200);
}

.route-times {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rt-time {
  text-align: left;
  flex-shrink: 0;
}

.rt-time .t {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.5px;
  line-height: 1;
}

.rt-time .code {
  font-size: 10px;
  color: var(--grey-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}

.rt-details {
  text-align: center;
  flex: 1;
  min-width: 100px;
}

.rt-stops {
  font-size: 11px;
  font-weight: 600;
}

.rt-stops.nonstop {
  color: var(--green);
}

.rt-duration {
  font-size: 12px;
  color: var(--grey-600);
  font-weight: 500;
  margin-top: 1px;
}

.rt-layover {
  font-size: 11px;
  color: var(--grey-500);
  font-weight: 500;
  margin-top: 2px;
}

.rt-line {
  height: 1px;
  background: var(--grey-300);
  margin: 5px 0;
  position: relative;
}

.rt-cabin {
  font-size: 11px;
  color: var(--navy-mid);
  font-weight: 600;
}

.rt-aircraft {
  font-size: 10px;
  color: var(--grey-400);
}

.card-price {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 170px;
  border-left: 1px solid var(--grey-100);
}

.pr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.pr-label {
  color: var(--grey-500);
  font-weight: 500;
}

.pr-value {
  font-weight: 700;
}

.pr-value.net {
  font-size: 12px;
  color: var(--grey-600);
}

.pr-value.retail {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
}

.pr-divider {
  height: 1px;
  background: var(--grey-200);
  margin: 4px 0;
}

.pr-value.margin {
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 4px;
}

.pr-value.margin.high {
  background: var(--green-bg);
  color: var(--green);
}

.pr-value.margin.med {
  background: var(--amber-bg);
  color: var(--amber);
}

.pr-value.margin.low {
  background: var(--red-bg);
  color: var(--red);
}

.fare-class {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.card-sup {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  /* Same fix as .card-al above: a long supplier name grew this grid column
     past its min-width on a per-card basis, same misalignment. */
  min-width: 140px;
  max-width: 140px;
  border-top: 1px solid var(--grey-200);
}

/* The name+type block next to .sup-icon in .sup-top is an unclassed flex
   item - min-width:0 lets it shrink below its text's natural width so
   .sup-name's ellipsis can actually take effect inside a capped-width card,
   instead of the flex item just pushing back out to fit the text. */
.sup-top > div:not(.sup-icon) {
  min-width: 0;
  overflow: hidden;
}

.sup-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sup-icon {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: var(--white);
}

.sup-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--grey-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sup-type {
  font-size: 10px;
  color: var(--grey-500);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.sup-contract {
  font-size: 10px;
  color: var(--navy-mid);
  font-weight: 600;
  background: var(--navy-pale);
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: fit-content;
  margin-top: 3px;
}

.sup-contract .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
}

.card-bottom {
  border-top: 1px solid var(--grey-200);
  padding: 10px 16px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
}

.rt-rules {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.rt-rule {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--grey-600);
}

.rt-rule.good {
  color: var(--green);
}

.rt-rule.warn {
  color: var(--amber);
  font-weight: 600;
}

.compliance {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.compliance.ok {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green-border);
}

.compliance.alert {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-border);
}

.card-acts {
  display: flex;
  gap: 6px;
}

.btn-book {
  padding: 0 8px;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: .15s;
  white-space: nowrap;
  min-width: 88px;
  width: 88px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-book:hover {
  background: var(--accent-light);
}

.btn-book span {
  display: none;
}

.no-results {
  padding: 60px 20px;
  text-align: center;
  color: var(--grey-400);
  font-size: 14px;
}

.no-results .icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.mc-search-area {
  display: none;
}

.mc-search-area.visible {
  display: block;
}

.mc-bar-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 10px;
}

.mc-fields {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex: 1;
}

.mc-add-btn {
  padding: 10px 16px;
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: .15s;
  min-width: 40px;
  height: calc(40px + 24px + 8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-add-btn:hover {
  background: var(--accent-pale);
}

.return-toggle {
  background: var(--white);
  border: 2px dashed var(--accent);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  margin: 16px 0;
  cursor: pointer;
}

.return-toggle:hover {
  background: var(--accent-pale);
}

.return-toggle .icon {
  font-size: 28px;
  margin-bottom: 6px;
}

.return-toggle .txt {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}

.return-toggle .sub {
  font-size: 12px;
  color: var(--grey-500);
  margin-top: 4px;
}

#dealsModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(0,0,0,.45);
  align-items: center;
  justify-content: center;
}

#dealsModal.show {
  display: flex;
}

.deals-modal-inner {
  background: var(--white);
  border-radius: 16px;
  max-width: 880px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.deals-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--grey-400);
  z-index: 10;
  line-height: 1;
}

.deals-close:hover {
  color: var(--grey-600);
}

.deals-summary {
  background: var(--navy);
  color: var(--white);
  padding: 18px 24px;
  border-radius: 16px 16px 0 0;
}

.deals-summary .route {
  font-size: 20px;
  font-weight: 800;
}

.deals-summary .meta {
  font-size: 13px;
  opacity: .7;
  margin-top: 4px;
}

.deals-list {
  padding: 14px 20px;
}

.deals-item {
  border: 1px solid var(--grey-200);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
}

.deals-item.open {
  border-color: var(--accent);
  box-shadow: 0 1px 8px rgba(0,105,92,.12);
}

.deals-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  cursor: pointer;
}

.deals-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.deals-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: var(--white);
}

.deals-info {
  display: flex;
  flex-direction: column;
}

.deals-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.deals-type {
  font-size: 9px;
  color: var(--grey-400);
  text-transform: uppercase;
}

.deals-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}

.deals-tag.online {
  background: var(--green-bg);
  color: var(--green);
}

.deals-tag.manual {
  background: var(--amber-bg);
  color: var(--amber-ink);
}

.deals-price {
  font-size: 17px;
  font-weight: 800;
}

.deals-price.best {
  color: var(--green);
}

.deals-best-badge {
  font-size: 10px;
  color: var(--green);
  font-weight: 700;
  background: var(--green-bg);
  padding: 2px 6px;
  border-radius: 4px;
}

.deals-price-diff {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
}

.deals-price-diff.up {
  color: var(--red);
  background: var(--red-bg);
}

.deals-arrow {
  font-size: 14px;
  color: var(--grey-300);
  transition: transform .2s;
  font-weight: 700;
}

.deals-item.open .deals-arrow {
  transform: rotate(90deg);
  color: var(--accent);
}

.deals-detail {
  display: none;
  border-top: 1px solid var(--grey-200);
  background: var(--gray-50);
}

.deals-item.open .deals-detail {
  display: block;
}

.deals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px 16px 6px;
}

.deals-grid-item {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  padding: 8px 10px;
}

.deals-grid-item.full {
  grid-column: 1/-1;
}

.deals-gl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--grey-400);
  margin-bottom: 2px;
}

.deals-gv {
  font-size: 12px;
  color: var(--grey-700);
  font-weight: 500;
}

.deals-book-btn {
  margin: 6px 16px 14px;
  width: calc(100% - 32px);
  padding: 11px;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.deals-book-btn:hover {
  background: var(--accent-light);
}

.more-deals-link {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
  padding: 0 4px;
}

.more-deals-link:hover {
  color: var(--accent-light);
}

.flight-card.selected {
  border-color: var(--navy-mid);
  border-width: 2px;
}

.card-accent-bar.amber {
  background: var(--amber);
}

.card-accent-bar.red {
  background: var(--navy-mid);
}

.rt-line::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -9px;
  color: var(--grey-300);
  font-size: 12px;
  font-weight: 700;
}

.click-wrap {
  position: relative;
  cursor: pointer;
  user-select: none;
}

.click-wrap .blur-content {
  filter: blur(4px);
  transition: filter .25s;
}

.click-wrap.revealed .blur-content {
  filter: none;
}

.click-wrap .hint-text {
  font-size: 8px;
  color: var(--grey-400);
  text-align: center;
  margin-top: 2px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.click-wrap.revealed .hint-text {
  display: none;
}

.fare-class.full {
  background: var(--navy-pale);
  color: var(--navy);
}

.fare-class.basic {
  background: var(--grey-100);
  color: var(--grey-600);
}

.fare-class.flex {
  background: var(--green-bg);
  color: var(--green);
}

.sup-rating {
  display: flex;
  gap: 1px;
  margin-top: 2px;
}

.sup-rating .star {
  color: var(--rating);
  font-size: 10px;
}

.sup-rating .empty {
  color: var(--grey-300);
}

.btn-wrap {
  position: relative;
  display: inline-block;
}

.btn-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--white);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}

.btn-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--navy);
}

.btn-wrap:hover .btn-tooltip {
  opacity: 1;
}

.btn-wrap.active .btn-tooltip {
  opacity: 1;
}

.deal-link {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 0;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
}

.deal-link:hover {
  color: var(--accent-light);
}

.deal-dd {
  display: none;
  padding: 8px 12px;
  background: var(--accent-bg);
  border-radius: var(--radius);
  margin: 4px 0;
}

.deal-dd.open {
  display: block;
}

.deal-dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 11px;
  color: var(--grey-700);
}

.deal-dd-item .deal-sup {
  font-weight: 600;
}

.deal-dd-item .deal-price {
  font-weight: 700;
  color: var(--navy);
}

.deal-dd-item .deal-type {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--grey-100);
  color: var(--grey-500);
  margin-left: 4px;
}

.ai-header {
  padding: 14px;
  border-bottom: 1px solid var(--grey-200);
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg,var(--accent),var(--accent-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--white);
  flex-shrink: 0;
}

.ai-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.ai-sub {
  font-size: 10px;
  color: var(--grey-400);
}

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 500px;
}

.msg.user .msg-bubble {
  background: var(--navy);
  color: var(--white);
  border-bottom-right-radius: 4px;
}

.ai-suggestions {
  padding: 10px 14px 14px;
  border-top: 1px solid var(--grey-200);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--grey-50);
}

.sug-btn {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--grey-300);
  border-radius: 12px;
  background: var(--white);
  color: var(--grey-600);
  cursor: pointer;
  transition: .15s;
  white-space: nowrap;
}

.sug-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}

.ai-composer {
  padding: 12px 14px;
  border-top: 1px solid var(--grey-200);
  background: var(--white);
}

.ai-composer-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 8px;
}

.ai-input {
  padding: 0;
  border-top: none;
  display: flex;
  gap: 8px;
  align-items: center;
}

.ai-input input {
  flex: 1;
  /* A flex item will not shrink below its default size without this, which
     pushed the send button out of the panel. */
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--grey-300);
  border-radius: 18px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: var(--grey-50);
}

.ai-input input:focus {
  border-color: var(--accent);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(0,105,92,.14);
}

.ai-input button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  border: none;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: .15s;
}

.ai-input button:hover {
  background: var(--accent-light);
}

.msg-bubble strong {
  font-weight: 700;
  color: var(--navy);
}

.msg-bubble .md-p {
  margin: 0 0 0.55em;
}

.msg-bubble .md-p:last-child {
  margin-bottom: 0;
}

.msg-bubble ul {
  margin: 0.35em 0 0.55em;
  padding-left: 1.2em;
}

.sup-rating.ai-stars {
  color: var(--amber);
  letter-spacing: 1px;
  font-size: 14px;
}

.sup-rating.ai-stars .ai-star-empty {
  color: var(--grey-300);
}

.flight-card.zoei-pick {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(0,105,92,.18);
}

.flight-card.zoei-default {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,105,92,.28);
}

.results-expired {
  margin: 8px 0 14px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--amber-soft, #fff8e6);
  border: 1px solid var(--amber);
  color: var(--navy);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.alert-holiday {
  padding: 8px 12px;
  background: var(--amber-bg);
  border: 1px solid var(--amber-bg);
  border-radius: var(--radius);
  font-size: 11px;
  color: var(--amber);
  font-weight: 600;
  line-height: 1.5;
}

.alert-price-drop {
  padding: 8px 12px;
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  border-radius: var(--radius);
  font-size: 11px;
  line-height: 1.5;
}

.alert-price-drop strong {
  color: var(--green);
}

.fg input,
.fg select,
.fg textarea {
  min-height: var(--control-h);
  height: var(--control-h);
  padding: 0 var(--space-5);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: var(--text-sm, 13px);
  font-family: inherit;
  outline: none;
  min-width: 0;
  background: var(--white);
  box-sizing: border-box;
}

.fg input:focus,
.fg select:focus,
.fg textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,105,92,.12);
}

.fg textarea {
  resize: vertical;
  min-height: 80px;
  height: auto;
  padding: var(--space-4) var(--space-5);
}

.search-form > .btn,
.mc-fields > .btn,
.mc-search-btn {
  min-height: var(--control-h);
  height: var(--control-h);
  padding: 0 var(--space-7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-top: 0;
  flex-shrink: 0;
}

.mc-fields {
  display: flex;
  gap: var(--space-5);
  align-items: flex-end;
}

.voucher-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: .15s;
  text-decoration: none;
  font-family: inherit;
  background: var(--navy);
  color: var(--white);
}

.voucher-btn:hover {
  background: var(--navy-light);
}

.voucher-box {
  display: none;
  max-width: 600px;
  margin: 24px auto;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

.voucher-box.show {
  display: block;
}

.voucher-head {
  background: var(--navy);
  color: var(--white);
  padding: 24px 28px;
  text-align: center;
}

.voucher-head h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .5px;
}

.voucher-head .v-ref {
  font-size: 14px;
  opacity: .8;
  margin-top: 4px;
  font-family: monospace;
  letter-spacing: 2px;
}

.voucher-head .v-status {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 16px;
  border-radius: 20px;
  background: var(--green);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.voucher-body {
  padding: 28px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.voucher-qr {
  width: 150px;
  height: 150px;
  flex-shrink: 0;
  border: 2px dashed var(--grey-300);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.voucher-qr img {
  width: 150px;
  height: 150px;
}

.voucher-details {
  flex: 1;
}

.v-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--grey-100);
}

.v-detail-row:last-child {
  border-bottom: none;
}

.v-detail-row .v-lbl {
  color: var(--grey-500);
}

.v-detail-row .v-val {
  font-weight: 600;
  color: var(--grey-800);
}

.v-detail-row.v-total .v-lbl {
  font-weight: 700;
  font-size: 14px;
  color: var(--grey-700);
}

.v-detail-row.v-total .v-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
}

.voucher-footer {
  padding: 16px 28px;
  background: var(--grey-50);
  border-top: 1px solid var(--grey-200);
  text-align: center;
  font-size: 11px;
  color: var(--grey-400);
}

.hotel-grid {
  width: 100%;
}

.hotel-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: .2s;
  cursor: pointer;
}

.hotel-card:hover {
  box-shadow: 0 4px 16px rgba(0,40,85,.08);
}

.hotel-card.open {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(0,105,92,.12);
}

.hotel-image {
  height: 180px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 12px;
  position: relative;
}

.star-badge {
  background: rgba(0,40,85,.85);
  color: var(--white);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}

.hotel-body {
  padding: 14px 16px;
}

.hotel-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px;
}

.hotel-chain {
  font-size: 11px;
  color: var(--grey-400);
  margin-bottom: 4px;
}

.hotel-stars {
  color: var(--rating);
  font-size: 13px;
  margin-bottom: 4px;
}

.hotel-location {
  font-size: 12px;
  color: var(--grey-500);
  margin-bottom: 10px;
}

.hotel-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.hotel-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hotel-price-from {
  font-size: 10px;
  color: var(--grey-400);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .5px;
}

.hotel-price-amount {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
}

.hotel-price-amount .currency {
  font-size: 14px;
}

.margin-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.margin-badge.high {
  background: var(--green-bg);
  color: var(--green);
}

.margin-badge.med {
  background: var(--amber-bg);
  color: var(--amber);
}

.margin-badge.low {
  background: var(--red-bg);
  color: var(--red);
}

.hotel-offers {
  display: none;
  border-top: 1px solid var(--grey-200);
  background: var(--grey-50);
}

.hotel-card.open .hotel-offers {
  display: block;
}

.fx-table .offer-provider {
  font-weight: 700;
  color: var(--navy);
}

.fx-table .offer-room {
  color: var(--grey-700);
}

.fx-table .offer-board {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--grey-100);
  color: var(--grey-600);
  font-weight: 600;
}

.fx-table .offer-price {
  font-weight: 700;
  color: var(--navy);
}

.fx-table .offer-total {
  font-weight: 700;
  color: var(--accent);
}

.fx-table .offer-cancel {
  font-size: 12px;
}

.fx-table .offer-cancel.free {
  color: var(--green);
  font-weight: 600;
}

.fx-table .offer-cancel.nonref {
  color: var(--red);
}

.logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg,var(--accent),var(--accent-light));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.main {
  margin-top: 56px;
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 60px;
}

.main-inner {
  max-width: 620px;
  width: 100%;
}

.step .step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--grey-300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  transition: .15s;
  flex-shrink: 0;
}

.step.active {
  color: var(--accent);
}

.step.done {
  color: var(--green);
}

.step-line.done {
  background: var(--green);
}

@media(min-width:600px) {
  .step-label{display:inline}
}

.auth-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0,40,85,.08);
}

.auth-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
}

.auth-subtitle {
  font-size: 14px;
  color: var(--grey-500);
  margin-bottom: 24px;
}

.form-section {
  margin-bottom: 0;
}

.form-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
}

.form-section.hidden {
  display: none;
}

.fg input::placeholder,
.fg textarea::placeholder {
  color: var(--grey-400);
}

.fg select {
  background: var(--white);
  cursor: pointer;
}

.fg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.fg-full {
  grid-column: 1 / -1;
}

.fg.has-error input,
.fg.has-error select,
.fg.has-error textarea {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(192,57,43,.1);
}

.fg.has-success input,
.fg.has-success select {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(10,138,83,.1);
}

.field-error {
  color: var(--red);
  font-size: 11px;
  margin-top: 4px;
  font-weight: 500;
  display: none;
}

.fg.has-error .field-error {
  display: block;
}

.form-text {
  display: block;
  font-size: 11px;
  margin-top: 4px;
  font-weight: 500;
}

.form-text.text-muted {
  color: var(--grey-500);
}

.form-text.text-success {
  color: var(--green);
}

.form-text.text-warning {
  color: var(--amber);
}

.pw-strength {
  margin-top: 6px;
  height: 4px;
  border-radius: 2px;
  background: var(--grey-200);
  overflow: hidden;
}

.pw-strength-bar {
  height: 100%;
  width: 0;
  border-radius: 2px;
  transition: width .3s,background .3s;
}

.pw-strength-text {
  font-size: 11px;
  margin-top: 4px;
  font-weight: 600;
  transition: color .2s;
}

.pw-requirements {
  font-size: 11px;
  color: var(--grey-500);
  margin-top: 6px;
}

.pw-requirements li {
  margin-bottom: 2px;
}

.pw-requirements li.met {
  color: var(--green);
}

.pw-requirements li.unmet {
  color: var(--red);
}

.btn-submit {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: .15s;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-submit:hover:not(:disabled) {
  background: var(--accent-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,105,92,.3);
}

.btn-submit:active:not(:disabled) {
  transform: translateY(0);
}

.btn-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-back {
  padding: 12px 24px;
  background: var(--white);
  color: var(--grey-600);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: .15s;
}

.btn-back:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.btn-row {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.btn-row .btn-submit {
  flex: 1;
}

@keyframes shake {
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}

@keyframes fadeIn {
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}

.success-msg .success-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
}

.recaptcha-wrap {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}

.signin-link {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--grey-600);
}

.signin-link a {
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: .15s;
}

.signin-link a:hover {
  background: var(--accent-bg);
}

.success-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,40,85,.5);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.success-overlay.show {
  display: flex;
}

.footer {
  background: var(--white);
  border-top: 1px solid var(--grey-200);
  padding: 24px 20px;
}

.footer-inner {
  max-width: 620px;
  margin: 0 auto;
}

.footer-contact {
  font-size: 13px;
  color: var(--grey-700);
}

.footer-contact .fc-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.footer-contact div {
  margin-bottom: 4px;
}

.fc-label {
  font-weight: 600;
  color: var(--navy);
  margin-right: 6px;
}

.footer-copy {
  text-align: center;
  padding: 16px 0 8px;
  font-size: 12px;
  color: var(--grey-400);
  background: var(--white);
  border-top: 1px solid var(--grey-200);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.header-logo-icon {
  width: 36px;
  height: 36px;
  background: var(--accent);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.125rem;
}

.header-logo-text {
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.header-link {
  color: var(--grey-300);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}

.header-link:hover {
  color: var(--white);
}

.login-container {
  display: flex;
  width: 100%;
  max-width: 960px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  min-height: 520px;
}

.branding {
  flex: 1;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--white);
}

.branding-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.85;
}

.branding h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.branding p {
  font-size: 1rem;
  opacity: 0.8;
  max-width: 320px;
  line-height: 1.5;
}

.branding-features {
  margin-top: 2rem;
  text-align: left;
  width: 100%;
  max-width: 300px;
}

.branding-feature {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

.branding-feature-icon {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.login-card {
  flex: 1;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 480px;
  min-width: 360px;
}

.login-card-title {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--grey-800);
  margin-bottom: 0.375rem;
}

.login-card-subtitle {
  font-size: 0.9rem;
  color: var(--grey-500);
  margin-bottom: 2rem;
}

.form-input.error {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-bg);
}

.password-wrapper {
  position: relative;
}

.password-wrapper .form-input {
  padding-right: 2.75rem;
}

.password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--grey-500);
  font-size: 1.125rem;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.password-toggle:hover {
  color: var(--grey-700);
}

.form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.form-checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.form-checkbox-group input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.form-checkbox-label {
  font-size: 0.8125rem;
  color: var(--grey-600);
}

.form-forgot {
  font-size: 0.8125rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.form-forgot:hover {
  color: var(--accent-light);
  text-decoration: underline;
}

.spinner.active {
  display: inline-block;
}

.error-message {
  background: var(--red-bg);
  color: var(--red);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  margin-bottom: 1rem;
  display: none;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(192, 57, 43, 0.2);
}

.error-message.active {
  display: flex;
}

.success-message {
  background: var(--accent-bg);
  color: var(--accent);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  margin-bottom: 1rem;
  display: none;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(0, 105, 92, 0.2);
}

.success-message.active {
  display: flex;
}

.lockout-timer {
  color: var(--red);
  font-weight: 600;
}

.register-link {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--grey-500);
}

.register-link a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.register-link a:hover {
  color: var(--accent-light);
  text-decoration: underline;
}

.footer-content {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.footer-text {
  font-size: 0.8125rem;
  color: var(--grey-500);
}

.footer-contact a {
  color: var(--accent);
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}

/* ---- Flight buy flow ------------------------------------------------
   The dialogue that takes an agent from a searched fare to a ticket:
   confirm the price, enter the travellers, hold, issue. It reuses the deals
   modal's shell, so only the contents below are new. */

#buyModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(0,0,0,.45);
  align-items: center;
  justify-content: center;
}

#buyModal.show {
  display: flex;
}

.buy-head {
  background: var(--navy);
  color: var(--white);
  padding: 18px 24px;
  border-radius: 16px 16px 0 0;
}

.buy-head .buy-route {
  font-size: 16px;
  font-weight: 700;
}

.buy-head .buy-meta {
  font-size: 12px;
  opacity: .8;
  margin-top: 4px;
}

.buy-body {
  padding: 18px 24px 24px;
}

/* The step rail tells an agent where they are in a flow that spends money,
   and - just as important - that there are steps still to come before it
   does. */
.buy-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.buy-step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 20px;
  background: var(--grey-100);
  color: var(--grey-500);
}

.buy-step.active {
  background: var(--accent);
  color: var(--white);
}

.buy-step.done {
  background: var(--green-soft, #e6f7ee);
  color: var(--green, #0a7a43);
}

.buy-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.buy-price .amount {
  font-size: 26px;
  font-weight: 800;
  color: var(--navy);
}

.buy-price .per {
  font-size: 12px;
  color: var(--grey-500);
}

/* A price that moved between search and now is the one thing on this screen
   an agent must not skim past, so it is loud on purpose. */
.buy-alert {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.buy-alert.warn {
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid var(--orange-border);
}

.buy-alert.bad {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-border);
}

.buy-alert.ok {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green-border);
}

.fare-rules {
  margin: 12px 0 4px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 10px 12px;
  max-height: 220px;
  overflow: auto;
}

.fare-rules-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.fare-rule {
  margin-bottom: 6px;
}

.fare-rule summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}

.fare-rule-text {
  margin: 8px 0 0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.45;
  color: var(--gray-700);
}

.buy-pax {
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}

.buy-pax-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--grey-600);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.buy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.buy-field label {
  display: block;
  font-size: 11px;
  color: var(--grey-500);
  margin-bottom: 3px;
}

.buy-field input,
.buy-field select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--grey-300);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
}

.buy-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
  flex-wrap: wrap;
}

.buy-tickets {
  margin-top: 12px;
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  overflow: hidden;
}

.buy-ticket-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--grey-100);
}

.buy-ticket-row:last-child {
  border-bottom: none;
}

.buy-ticket-row .num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 700;
}

/* The supplier strip above the results. An agency needs to tell "nobody had
   seats" from "we never asked" - a supplier that failed is not the same as a
   supplier with nothing to sell, and only this says which happened. */
.supplier-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 0 12px;
}

.supplier-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 20px;
  background: var(--grey-100);
  color: var(--grey-600);
  border: 1px solid var(--grey-200);
}

.supplier-chip.ok {
  background: #e9f8ef;
  color: #0a7a43;
  border-color: #a8e2c1;
}

.supplier-chip.empty {
  background: var(--grey-100);
  color: var(--grey-500);
}

.supplier-chip.bad {
  background: #fdecec;
  color: #a01b1b;
  border-color: #f5b5b5;
}

.supplier-chip .ms {
  opacity: .65;
  font-weight: 500;
  margin-left: 4px;
}

.rt-rule-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--navy-mid);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

.deals-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.deals-ai {
  margin: 12px 20px 0;
  padding: 12px 14px;
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  border-radius: 10px;
}

.deals-ai-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}

.deals-ai-body {
  font-size: 13px;
  color: var(--grey-700);
  line-height: 1.45;
}

.fare-rule-block {
  margin-top: 8px;
  font-size: 12px;
}

.fare-rule-block p {
  margin: 4px 0 0;
  white-space: pre-wrap;
  color: var(--grey-700);
}

.deals-rules {
  padding: 0 16px 12px;
  font-size: 12px;
  color: var(--grey-600);
}

.deals-book-btn {
  margin: 0;
}

@media (max-width: 1100px) {
  .search-results-wrap {
    flex-wrap: wrap;
  }

  .filter-panel,
  .ai-sidebar {
    width: 100%;
  }

  .main-area {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .search-form,
  .mc-fields {
    flex-wrap: wrap;
  }

  .route-pair {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }

  .route-pair .route-od {
    flex: 1 1 0;
    min-width: 0;
  }

  .search-form .fg,
  .search-form .fg.flex-1-2,
  .search-form .fg.flex-0-7,
  .search-form .fg.flex-0-55,
  .search-form .fg.flex-5,
  .search-form .fg.flex-pax,
  .mc-fields .fg,
  .mc-fields .fg.flex-1-2,
  .mc-fields .fg.flex-0-7,
  .mc-fields .fg.flex-0-55,
  .mc-fields .fg.flex-5,
  .mc-fields .fg.flex-pax {
    flex: 1 1 46%;
    min-width: 140px;
    max-width: none;
  }

  .search-form > .btn,
  .mc-search-btn {
    width: 100%;
  }

  .card-row {
    grid-template-columns: auto 1fr;
  }

  .card-al {
    max-width: none;
  }

  .card-route,
  .card-price,
  .card-sup {
    grid-column: 1 / -1;
    border-right: none;
    border-left: none;
    border-top: 1px solid var(--grey-200);
    max-width: none;
    min-width: 0;
  }

  .card-bottom {
    grid-template-columns: 1fr;
  }

  .card-acts {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .results-toolbar {
    flex-wrap: wrap;
  }

  .deals-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .deals-grid {
    grid-template-columns: 1fr;
  }

  .deals-modal-inner {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .filter-panel {
    flex-direction: column;
  }
}

.btn-sec.is-disabled,
.btn-sec:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.btn-icon-bm {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--grey-300);
  background: var(--white);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--amber);
  font-size: 16px;
  line-height: 1;
}

.btn-icon-bm:hover {
  border-color: var(--navy);
}

.flight-card.highlight-offer {
  outline: 2px solid var(--accent);
}

.tod-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  margin: 6px 0 4px;
}

.tod-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tod-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: var(--grey-600);
  cursor: pointer;
}

.tod-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tod-ico {
  width: 36px;
  height: 36px;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--white);
}

.tod-chip input:checked + .tod-ico {
  border-color: var(--navy);
  background: var(--navy-pale);
}

.flatpickr-day.weekend {
  background: var(--weekend);
}

.flatpickr-day.prior-to-dep {
  opacity: .35;
}

#compareCapture {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

#compareCapture.is-hidden {
  display: none;
}

.compare-capture-inner {
  background: var(--white);
  border-radius: 12px;
  padding: 20px;
  width: min(520px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.compare-capture-title {
  font-size: 13px;
  color: var(--navy);
}

.compare-capture-acts {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.compare-capture-err {
  color: var(--red);
  font-size: 12px;
}

.deals-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-height: calc(4 * 52px);
}

.deals-item {
  margin-bottom: 0;
}

.deals-row {
  padding: 8px 10px;
}

.deals-book-btn {
  margin: 0;
  width: auto;
  min-width: 72px;
  padding: 6px 10px;
  height: 32px;
}

.deals-ai {
  max-height: 64px;
  overflow: auto;
  padding: 8px 16px;
  font-size: 12px;
}

.deals-ai.compact {
  max-height: 72px;
}

@media (min-width: 768px) {
  .deals-list {
    grid-template-columns: 1fr 1fr;
    min-height: calc(3 * 52px);
  }
}

@media (min-width: 1100px) {
  .deals-list {
    min-height: calc(4 * 52px);
  }
}

.rt-change-dep {
  margin-left: 8px;
  vertical-align: middle;
}

.fare-packs {
  border-top: 1px solid var(--grey-200);
  background: var(--gray-50);
  padding: 14px 16px 16px;
}

.fare-packs-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}

.fare-packs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.fare-pack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 10px 10px 8px;
  cursor: pointer;
  min-width: 0;
  border-top-width: 3px;
}

.fare-pack input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fare-pack.tone-0 { border-top-color: var(--navy-mid); }
.fare-pack.tone-1 { border-top-color: var(--green); }
.fare-pack.tone-2 { border-top-color: var(--amber); }
.fare-pack.tone-3 { border-top-color: var(--violet); }
.fare-pack.tone-4 { border-top-color: var(--red); }

.fare-pack.is-selected {
  border-color: var(--navy-mid);
  box-shadow: 0 0 0 1px var(--navy-mid);
}

.fare-pack-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
}

.fare-pack-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 72px;
}

.fare-pack-feat {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--grey-700);
}

.fare-pack-icon {
  flex: 0 0 14px;
  font-size: 11px;
  font-weight: 800;
}

.fare-pack-feat.ok .fare-pack-icon { color: var(--green); }
.fare-pack-feat.paid .fare-pack-icon { color: var(--amber); }
.fare-pack-feat.no {
  color: var(--grey-400);
  text-decoration: line-through;
}

.fare-pack-feat.no .fare-pack-icon { color: var(--grey-400); }

.fare-pack-price {
  margin-top: auto;
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
}

.fare-pack-total {
  font-size: 11px;
  color: var(--grey-500);
}

.fare-pack-alts {
  font-size: 10px;
  color: var(--grey-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fare-packs-act {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.fare-pack-go {
  min-width: 180px;
}

@media (min-width: 768px) {
  .fare-packs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .fare-packs-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- 30. invoice ----------------------------------------------
 * Components used by the invoice pages and not provided by the layers
 * above. Adopted from those pages' <style> blocks when they were converted
 * to templates, so the pages themselves carry no CSS.
 *
 * These are ordinary components, not page styles: anything here is available
 * to every page, and belongs in an earlier layer once a second vertical uses
 * it. Colours must come from the tokens in 01-tokens.css so themes keep
 * working. */

.config-card {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--grey-200);
  padding: 24px;
  max-width: 800px;
  margin-bottom: 16px;
}

.config-card h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--sidebar);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--grey-200);
}

.form-select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: var(--white);
  cursor: pointer;
  transition: border-color .15s;
}

.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(22,104,227,.12);
}

.form-hint {
  font-size: 10px;
  color: var(--grey-400);
  margin-top: 2px;
}

.tgl {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tgl-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.tgl-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.tgl-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--grey-300);
  border-radius: 24px;
  transition: .2s;
}

.tgl-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: var(--white);
  border-radius: 50%;
  transition: .2s;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

.tgl-switch input:checked+.tgl-slider {
  background: var(--accent);
}

.tgl-switch input:checked+.tgl-slider::before {
  transform: translateX(18px);
}

.tgl-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-700);
}

.invoice-header {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--grey-200);
  padding: 20px 24px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.invoice-header-left h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--sidebar);
  margin-bottom: 6px;
}

.invoice-header-left .meta {
  font-size: 13px;
  color: var(--grey-500);
}

.invoice-header-right {
  text-align: right;
}

.section-card {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--grey-200);
  padding: 20px 24px;
  margin-bottom: 16px;
}

.section-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--sidebar);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--grey-200);
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.info-item {

}

.info-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--grey-500);
  margin-bottom: 2px;
}

.info-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-800);
}

.dates-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
}

.table-wrap {
  overflow-x: auto;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
}

.detail-table th {
  padding: 8px 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--grey-500);
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
}

.detail-table th:first-child {
  text-align: left;
  padding-left: 14px;
}

.detail-table th:last-child {
  text-align: right;
  padding-right: 14px;
}

.detail-table td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid var(--grey-200);
  font-size: 13px;
  vertical-align: middle;
}

.detail-table td:first-child {
  text-align: left;
  padding-left: 14px;
}

.detail-table td:last-child {
  text-align: right;
  padding-right: 14px;
}

.detail-table tr:last-child td {
  border-bottom: none;
}

.totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding: 16px 0 0;
  border-top: 1px solid var(--grey-200);
  margin-top: 8px;
}

.total-row {
  display: flex;
  justify-content: space-between;
  width: 280px;
  font-size: 13px;
}

.total-row strong {
  font-weight: 700;
}

.total-row.grand {
  font-size: 16px;
  font-weight: 800;
  color: var(--sidebar);
  padding-top: 8px;
  border-top: 1px solid var(--grey-300);
}

.doc-links {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.action-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.audit-table {
  width: 100%;
  border-collapse: collapse;
}

.audit-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--grey-500);
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  padding-left: 14px;
}

.audit-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--grey-200);
  font-size: 12px;
  padding-left: 14px;
}

.audit-table tr:last-child td {
  border-bottom: none;
}

.back-link {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
}

.back-link:hover {
  text-decoration: underline;
}

@media(max-width:768px) {
  .info-grid,.dates-grid{grid-template-columns:1fr}
  .invoice-header{flex-direction:column;gap:12px}
  .invoice-header-right{text-align:left}
}

.stat-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--grey-400);
}

.stat-card .stat-icon {
  float: right;
  font-size: 32px;
  opacity: .15;
}

.action-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  border: none;
  background: none;
  padding: 2px 6px;
  border-radius: 4px;
  transition: .15s;
  text-decoration: none;
}

.action-link:hover {
  background: var(--accent-bg);
}

/* .filter-group moved to layer 13 with the rest of the filter bar: the invoice
 * list is no longer the only vertical that labels a filter. */

.action-link-danger {
  font-size: 11px;
  font-weight: 600;
  color: var(--red);
  cursor: pointer;
  border: none;
  background: none;
  padding: 3px 6px;
  border-radius: 4px;
  transition: .15s;
}

.action-link-danger:hover {
  background: var(--red-bg);
}

/* ---- 31. reports ----------------------------------------------
 * Components used by the reports pages and not provided by the layers
 * above. Adopted from those pages' <style> blocks when they were converted
 * to templates, so the pages themselves carry no CSS.
 *
 * These are ordinary components, not page styles: anything here is available
 * to every page, and belongs in an earlier layer once a second vertical uses
 * it. Colours must come from the tokens in 01-tokens.css so themes keep
 * working. */

.module-card-accent.purple {
  background: var(--violet);
}

.report-type-bar {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.rt-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.rt-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
}

.rt-select {
  padding: 8px 12px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: var(--white);
  min-width: 220px;
  cursor: pointer;
}

.rt-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,105,92,.12);
}

.report-filters {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  padding: 14px 16px;
  margin-bottom: 14px;
  display: none;
}

.report-filters.visible {
  display: block;
}

.rf-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.rf-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rf-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
}

.rf-input,
.rf-select {
  padding: 8px 12px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  background: var(--white);
}

.rf-input:focus,
.rf-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,105,92,.12);
}

.rf-select {
  min-width: 130px;
}

.rf-datediv {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rf-datediv .rf-input {
  width: 130px;
}

.rf-date-sep {
  color: var(--grey-400);
  font-size: 12px;
  font-weight: 600;
}

.preset-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.preset-btn {
  padding: 7px 12px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: var(--white);
  color: var(--grey-600);
  transition: .15s;
}

.preset-btn:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--navy-pale);
}

.preset-btn.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.rf-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.card-row-wrapper {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 12px;
  margin-bottom: 14px;
  display: none;
}

.card-row-wrapper.visible {
  display: grid;
}

.report-table-wrap {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  overflow: visible;
}

.rt-toolbar {
  padding: 12px 16px;
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.export-btns {
  display: flex;
  gap: 6px;
}

.btn-export {
  padding: 6px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--grey-300);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: .15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--white);
  color: var(--grey-600);
}

.btn-export:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--navy-pale);
}

.btn-export.csv {
  color: var(--green);
  border-color: var(--green-border);
}

.btn-export.csv:hover {
  background: var(--green-bg);
}

.report-table {
  width: 100%;
  border-collapse: collapse;
}

.report-table thead th {
  padding: 8px 8px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--grey-500);
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  white-space: nowrap;
}

.report-table thead th:first-child {
  text-align: left;
  padding-left: 14px;
}

.report-table tbody td {
  padding: 10px 8px;
  text-align: center;
  border-bottom: 1px solid var(--grey-200);
  font-size: 12px;
  vertical-align: middle;
}

.report-table tbody td:first-child {
  text-align: left;
  padding-left: 14px;
}

.report-table tbody tr:last-child td {
  border-bottom: none;
}

.report-table tbody tr:hover {
  background: var(--navy-pale);
}

.report-table tbody tr.parent-row {
  cursor: pointer;
}

.report-table tbody tr.parent-row:hover {
  background: var(--accent-bg);
}

.report-table tbody tr.child-row td {
  padding-left: 34px;
}

.report-table .child-row td:first-child {
  padding-left: 34px;
}

.report-table .grandchild-row td:first-child {
  padding-left: 54px;
}

.report-table .agency-name {
  font-weight: 600;
  color: var(--navy);
}

.report-table .badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.badge-navy {
  background: var(--navy-pale);
  color: var(--navy);
}

.badge-grey {
  background: var(--grey-100);
  color: var(--grey-600);
}

.expand-icon {
  display: inline-block;
  width: 16px;
  text-align: center;
  cursor: pointer;
  color: var(--navy-mid);
  font-weight: 700;
  margin-right: 6px;
  font-size: 14px;
}

.report-pagination {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.empty-state .icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: .4;
}

.loading-overlay.visible {
  display: flex;
}

/* ---- 32. signin ----------------------------------------------
 * The signin screen, scoped to the page.
 *
 * signin and register both define .main, .btn-submit, .btn-submit:hover,
 * .footer and .footer-contact, and mean something different by every one of
 * them — a navy full-width submit against an accent-coloured one, a centred
 * footer against a left-aligned one. Sharing those names in the global layers
 * would have made whichever page was converted second look like the first.
 *
 * These are the two screens in the product with no second instance, so page
 * scope costs nothing. Anything here that a second page ever needs should move
 * to a shared layer under a name of its own.
 *
 * .page-signin comes from Page.BodyClass in the registry. */

body.page-signin * {
  margin: 0; padding: 0; box-sizing: border-box;
}

body.page-signin {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--grey-100); color: var(--grey-800); min-height: 100vh; display: flex; flex-direction: column;
}

.page-signin .header {
  background: var(--navy); padding: 0 2rem; height: 64px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.page-signin .header-logo {
  display: flex; align-items: center; gap: 0.625rem;
}

.page-signin .header-logo-icon {
  width: 36px; height: 36px; background: var(--accent); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.125rem;
}

.page-signin .header-logo-text {
  color: var(--white); font-size: 1.25rem; font-weight: 600; letter-spacing: 0.02em;
}

.page-signin .header-link {
  color: var(--grey-300); text-decoration: none; font-size: 0.875rem; transition: color 0.2s;
}

.page-signin .header-link:hover {
  color: var(--white);
}

.page-signin .main {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;
}

.page-signin .login-container {
  display: flex; width: 100%; max-width: 960px; background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); overflow: hidden; min-height: 520px;
}

.page-signin .branding {
  flex: 1; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); padding: 3rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--white);
}

.page-signin .branding-icon {
  font-size: 4rem; margin-bottom: 1.5rem; opacity: 0.85;
}

.page-signin .branding h2 {
  font-size: 1.75rem; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.3;
}

.page-signin .branding p {
  font-size: 1rem; opacity: 0.8; max-width: 320px; line-height: 1.5;
}

.page-signin .branding-features {
  margin-top: 2rem; text-align: left; width: 100%; max-width: 300px;
}

.page-signin .branding-feature {
  display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem; font-size: 0.9rem; opacity: 0.85;
}

.page-signin .branding-feature-icon {
  width: 28px; height: 28px; background: rgba(255, 255, 255, 0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0;
}

.page-signin .login-card {
  flex: 1; padding: 3rem; display: flex; flex-direction: column; justify-content: center; max-width: 480px; min-width: 360px;
}

.page-signin .login-card-title {
  font-size: 1.625rem; font-weight: 700; color: var(--grey-800); margin-bottom: 0.375rem;
}

.page-signin .login-card-subtitle {
  font-size: 0.9rem; color: var(--grey-500); margin-bottom: 2rem;
}

.page-signin .form-group {
  margin-bottom: 1.25rem; position: relative;
}

.page-signin .form-label {
  display: block; font-size: 0.8125rem; font-weight: 600; color: var(--grey-700); margin-bottom: 0.375rem;
}

.page-signin .form-input {
  width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--grey-300); border-radius: var(--radius); font-size: 0.9rem; color: var(--grey-800); transition: border-color 0.2s, box-shadow 0.2s; outline: none; background: var(--white);
}

.page-signin .form-input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg);
}

.page-signin .form-input.error {
  border-color: var(--red); box-shadow: 0 0 0 3px var(--red-bg);
}

.page-signin .password-wrapper {
  position: relative;
}

.page-signin .password-wrapper .form-input {
  padding-right: 2.75rem;
}

.page-signin .password-toggle {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--grey-500); font-size: 1.125rem; padding: 0.25rem; display: flex; align-items: center; justify-content: center; transition: color 0.2s;
}

.page-signin .password-toggle:hover {
  color: var(--grey-700);
}

.page-signin .form-options {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem;
}

.page-signin .form-checkbox-group {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none;
}

.page-signin .form-checkbox-group input {
  width: 1rem; height: 1rem; accent-color: var(--accent); cursor: pointer;
}

.page-signin .form-checkbox-label {
  font-size: 0.8125rem; color: var(--grey-600);
}

.page-signin .form-forgot {
  font-size: 0.8125rem; color: var(--accent); text-decoration: none; font-weight: 500; transition: color 0.2s;
}

.page-signin .form-forgot:hover {
  color: var(--accent-light); text-decoration: underline;
}

.page-signin .btn-submit {
  width: 100%; padding: 0.75rem 1.5rem; background: var(--navy); color: var(--white); border: none; border-radius: var(--radius); font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: background 0.2s, opacity 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px;
}

.page-signin .btn-submit:hover:not(:disabled) {
  background: var(--navy-light);
}

.page-signin .btn-submit:disabled {
  opacity: 0.7; cursor: not-allowed;
}

.page-signin .spinner {
  width: 20px; height: 20px; border: 2.5px solid rgba(255, 255, 255, 0.3); border-top-color: var(--white); border-radius: 50%; animation: spin 0.7s linear infinite; display: none;
}

.page-signin .spinner.active {
  display: inline-block;
}

@keyframes spin {
  .page-signin to {
    transform: rotate(360deg);
  }
}

.page-signin .error-message {
  background: var(--red-bg); color: var(--red); padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.8125rem; margin-bottom: 1rem; display: none; align-items: center; gap: 0.5rem; border: 1px solid rgba(192, 57, 43, 0.2);
}

.page-signin .error-message.active {
  display: flex;
}

.page-signin .success-message {
  background: var(--accent-bg); color: var(--accent); padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.8125rem; margin-bottom: 1rem; display: none; align-items: center; gap: 0.5rem; border: 1px solid rgba(0, 105, 92, 0.2);
}

.page-signin .success-message.active {
  display: flex;
}

.page-signin .lockout-timer {
  color: var(--red); font-weight: 600;
}

.page-signin .register-link {
  text-align: center; margin-top: 1.5rem; font-size: 0.8125rem; color: var(--grey-500);
}

.page-signin .register-link a {
  color: var(--accent); text-decoration: none; font-weight: 600; transition: color 0.2s;
}

.page-signin .register-link a:hover {
  color: var(--accent-light); text-decoration: underline;
}

.page-signin .footer {
  background: var(--white); border-top: 1px solid var(--grey-200); padding: 1rem 2rem; text-align: center;
}

.page-signin .footer-content {
  max-width: 960px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
}

.page-signin .footer-text {
  font-size: 0.8125rem; color: var(--grey-500);
}

.page-signin .footer-contact {
  font-size: 0.8125rem; color: var(--grey-500);
}

.page-signin .footer-contact a {
  color: var(--accent); text-decoration: none;
}

.page-signin .footer-contact a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .page-signin .login-container {
    flex-direction: column; max-width: 500px;
  }
  .page-signin .branding {
    padding: 2rem 1.5rem; min-height: auto;
  }
  .page-signin .branding h2 {
    font-size: 1.375rem;
  }
  .page-signin .branding-features {
    display: none;
  }
  .page-signin .login-card {
    padding: 2rem 1.5rem; max-width: none; min-width: auto;
  }
  .page-signin .footer-content {
    flex-direction: column; text-align: center;
  }
}

@media (max-width: 480px) {
  .page-signin .header {
    padding: 0 1rem;
  }
  .page-signin .main {
    padding: 1rem 0.5rem;
  }
  .page-signin .login-container {
    border-radius: var(--radius);
  }
  .page-signin .branding {
    padding: 1.5rem;
  }
  .page-signin .branding-icon {
    font-size: 3rem;
  }
  .page-signin .login-card {
    padding: 1.5rem 1.25rem;
  }
  .page-signin .form-options {
    flex-direction: column; align-items: flex-start; gap: 0.75rem;
  }
}

/* ---- 33. register ----------------------------------------------
 * The register screen, scoped to the page.
 *
 * signin and register both define .main, .btn-submit, .btn-submit:hover,
 * .footer and .footer-contact, and mean something different by every one of
 * them — a navy full-width submit against an accent-coloured one, a centred
 * footer against a left-aligned one. Sharing those names in the global layers
 * would have made whichever page was converted second look like the first.
 *
 * These are the two screens in the product with no second instance, so page
 * scope costs nothing. Anything here that a second page ever needs should move
 * to a shared layer under a name of its own.
 *
 * .page-register comes from Page.BodyClass in the registry. */

body.page-register * {
  box-sizing:border-box;margin:0;padding:0
}

body.page-register {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--grey-800);line-height:1.5;background:var(--navy-bg)
}

.page-register a {
  color:inherit;text-decoration:none
}

.page-register .header {
  background:var(--navy);color:var(--white);padding:0 32px;height:56px;display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;right:0;z-index:100
}

.page-register .logo {
  display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800
}

.page-register .logo-icon {
  width:36px;height:36px;background:linear-gradient(135deg,var(--accent),var(--accent-light));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px
}

.page-register .logo span {
  color:var(--accent-light)
}

.page-register .header-nav {
  display:flex;gap:4px;margin-left:24px
}

.page-register .header-nav a {
  color:rgba(255,255,255,.7);text-decoration:none;font-size:13px;padding:6px 12px;border-radius:6px;transition:.15s;font-weight:500
}

.page-register .header-nav a:hover {
  color:var(--white);background:rgba(255,255,255,.08)
}

.page-register .header-nav a.active {
  color:var(--white);background:rgba(255,255,255,.12);font-weight:600
}

.page-register .main {
  margin-top:56px;min-height:calc(100vh - 56px);display:flex;align-items:center;justify-content:center;padding:40px 20px 60px
}

.page-register .main-inner {
  max-width:620px;width:100%
}

.page-register .steps {
  display:flex;align-items:center;gap:0;margin-bottom:32px;background:var(--white);border-radius:var(--radius-lg);padding:20px 24px;box-shadow:0 4px 24px rgba(0,40,85,.08)
}

.page-register .step {
  display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--grey-400);padding:8px 0;white-space:nowrap
}

.page-register .step .step-num {
  width:28px;height:28px;border-radius:50%;border:2px solid var(--grey-300);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;transition:.15s;flex-shrink:0
}

.page-register .step.active .step-num {
  border-color:var(--accent);background:var(--accent);color:var(--white)
}

.page-register .step.done .step-num {
  border-color:var(--green);background:var(--green);color:var(--white)
}

.page-register .step.active {
  color:var(--accent)
}

.page-register .step.done {
  color:var(--green)
}

.page-register .step-label {
  display:none
}

.page-register .step-line {
  flex:1;height:2px;background:var(--grey-300);margin:0 8px
}

.page-register .step-line.done {
  background:var(--green)
}

@media(min-width:600px) {
  .page-register .step-label {
    display:inline
  }
}

.page-register .auth-card {
  background:var(--white);border-radius:var(--radius-lg);padding:32px;box-shadow:0 4px 24px rgba(0,40,85,.08)
}

.page-register .auth-title {
  font-size:22px;font-weight:800;color:var(--navy);margin-bottom:4px
}

.page-register .auth-subtitle {
  font-size:14px;color:var(--grey-500);margin-bottom:24px
}

.page-register .form-section {
  margin-bottom:0
}

.page-register .form-section-title {
  font-size:14px;font-weight:700;color:var(--navy);margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid var(--accent)
}

.page-register .form-section.hidden {
  display:none
}

.page-register .fg {
  margin-bottom:16px;position:relative
}

.page-register .fg label {
  display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--grey-500);margin-bottom:6px
}

.page-register .fg input,
.page-register .fg select,
.page-register .fg textarea {
  width:100%;padding:12px 14px;border:1px solid var(--grey-300);border-radius:var(--radius);font-size:14px;font-family:inherit;outline:none;transition:.15s
}

.page-register .fg input:focus,
.page-register .fg select:focus,
.page-register .fg textarea:focus {
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,105,92,.12)
}

.page-register .fg input::placeholder,
.page-register .fg textarea::placeholder {
  color:var(--grey-400)
}

.page-register .fg textarea {
  resize:vertical;min-height:80px
}

.page-register .fg select {
  background:var(--white);cursor:pointer
}

.page-register .fg-row {
  display:grid;grid-template-columns:1fr 1fr;gap:12px
}

.page-register .fg-full {
  grid-column:1 / -1
}

.page-register .fg.has-error input,
.page-register .fg.has-error select,
.page-register .fg.has-error textarea {
  border-color:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.1)
}

.page-register .fg.has-success input,
.page-register .fg.has-success select {
  border-color:var(--green);box-shadow:0 0 0 3px rgba(10,138,83,.1)
}

.page-register .field-error {
  color:var(--red);font-size:11px;margin-top:4px;font-weight:500;display:none
}

.page-register .fg.has-error .field-error {
  display:block
}

.page-register .form-text {
  display:block;font-size:11px;margin-top:4px;font-weight:500
}

.page-register .form-text.text-muted {
  color:var(--grey-500)
}

.page-register .form-text.text-success {
  color:var(--green)
}

.page-register .form-text.text-warning {
  color:var(--amber)
}

.page-register .pw-strength {
  margin-top:6px;height:4px;border-radius:2px;background:var(--grey-200);overflow:hidden
}

.page-register .pw-strength-bar {
  height:100%;width:0;border-radius:2px;transition:width .3s,background .3s
}

.page-register .pw-strength-text {
  font-size:11px;margin-top:4px;font-weight:600;transition:color .2s
}

.page-register .pw-requirements {
  font-size:11px;color:var(--grey-500);margin-top:6px
}

.page-register .pw-requirements li {
  margin-bottom:2px
}

.page-register .pw-requirements li.met {
  color:var(--green)
}

.page-register .pw-requirements li.unmet {
  color:var(--red)
}

.page-register .btn-submit {
  width:100%;padding:14px;background:var(--accent);color:var(--white);border:none;border-radius:var(--radius);font-size:15px;font-weight:700;cursor:pointer;transition:.15s;margin-top:8px;display:inline-flex;align-items:center;justify-content:center;gap:8px
}

.page-register .btn-submit:hover:not(:disabled) {
  background:var(--accent-light);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,105,92,.3)
}

.page-register .btn-submit:active:not(:disabled) {
  transform:translateY(0)
}

.page-register .btn-submit:disabled {
  opacity:.6;cursor:not-allowed;transform:none;box-shadow:none
}

.page-register .btn-back {
  padding:12px 24px;background:var(--white);color:var(--grey-600);border:1px solid var(--grey-300);border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;transition:.15s
}

.page-register .btn-back:hover {
  border-color:var(--navy);color:var(--navy)
}

.page-register .btn-row {
  display:flex;gap:12px;margin-top:16px
}

.page-register .btn-row .btn-submit {
  flex:1
}

.page-register .spinner {
  width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--white);border-radius:50%;animation:spin .6s linear infinite;display:inline-block;vertical-align:middle;margin-right:8px
}

@keyframes spin {
  .page-register to {
    transform:rotate(360deg)
  }
}

.page-register .error-msg {
  background:var(--red-bg);color:var(--red);padding:12px 16px;border-radius:var(--radius);font-size:13px;font-weight:600;margin-bottom:16px;display:none;border:1px solid var(--red-border)
}

.page-register .error-msg.show {
  display:flex;align-items:center;gap:8px;animation:shake .4s
}

@keyframes shake {
  .page-register 0%,
.page-register 100% {
    transform:translateX(0)
  }
  .page-register 25% {
    transform:translateX(-5px)
  }
  .page-register 75% {
    transform:translateX(5px)
  }
}

.page-register .success-msg {
  background:var(--green-bg);color:var(--green);padding:24px;border-radius:var(--radius-lg);font-size:15px;font-weight:600;text-align:center;display:none;border:1px solid var(--green-border)
}

.page-register .success-msg.show {
  display:block;animation:fadeIn .4s
}

@keyframes fadeIn {
  .page-register from {
    opacity:0;transform:translateY(-10px)
  }
  .page-register to {
    opacity:1;transform:translateY(0)
  }
}

.page-register .success-msg .success-icon {
  font-size:48px;display:block;margin-bottom:12px
}

.page-register .file-upload {
  position:relative;display:flex;align-items:center;gap:8px;padding:12px 14px;border:2px dashed var(--grey-300);border-radius:var(--radius);font-size:13px;color:var(--grey-500);cursor:pointer;transition:.15s;min-height:44px;width:100%;background:var(--grey-50)
}

.page-register .file-upload:hover {
  border-color:var(--accent);color:var(--accent);background:var(--accent-bg)
}

.page-register .file-upload.has-file {
  border-style:solid;border-color:var(--green);background:var(--green-bg);color:var(--green)
}

.page-register .file-upload input[type=file] {
  position:absolute;width:100%;height:100%;left:0;top:0;opacity:0;cursor:pointer
}

.page-register .file-name {
  font-size:11px;color:var(--accent);margin-top:4px;font-weight:500;word-break:break-all
}

.page-register .recaptcha-wrap {
  display:flex;justify-content:center;margin:16px 0
}

.page-register .signin-link {
  text-align:center;margin-top:24px;font-size:14px;color:var(--grey-600)
}

.page-register .signin-link a {
  color:var(--accent);font-weight:600;cursor:pointer;padding:4px 8px;border-radius:4px;transition:.15s
}

.page-register .signin-link a:hover {
  background:var(--accent-bg)
}

.page-register .success-overlay {
  position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,40,85,.5);z-index:300;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)
}

.page-register .success-overlay.show {
  display:flex
}

.page-register .success-card {
  background:var(--white);border-radius:var(--radius-lg);padding:48px;text-align:center;max-width:400px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:slideUp .4s
}

@keyframes slideUp {
  .page-register from {
    opacity:0;transform:translateY(30px)
  }
  .page-register to {
    opacity:1;transform:translateY(0)
  }
}

.page-register .footer {
  background:var(--white);border-top:1px solid var(--grey-200);padding:24px 20px
}

.page-register .footer-inner {
  max-width:620px;margin:0 auto
}

.page-register .footer-contact {
  font-size:13px;color:var(--grey-700)
}

.page-register .footer-contact .fc-title {
  font-weight:700;margin-bottom:8px
}

.page-register .footer-contact div {
  margin-bottom:4px
}

.page-register .fc-label {
  font-weight:600;color:var(--navy);margin-right:6px
}

.page-register .footer-copy {
  text-align:center;padding:16px 0 8px;font-size:12px;color:var(--grey-400);background:var(--white);border-top:1px solid var(--grey-200)
}

@media(max-width:600px) {
  .page-register .fg-row {
    grid-template-columns:1fr
  }
  .page-register .btn-row {
    flex-direction:column-reverse
  }
  .page-register .btn-back {
    text-align:center
  }
}

/* Transient feedback: the toast stack API.toast() renders into, and the empty
 * row API.rows() falls back to.
 *
 * These belong to the shared data layer rather than to any page, so they sit
 * after every page layer — a page rule must not be able to restyle the message
 * that tells the user their request failed. */

.toast-stack {
  position: fixed;
  z-index: 3000;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* The stack spans the corner but only the toasts themselves are hit-testable,
     so it cannot swallow clicks on whatever it is floating over. */
  pointer-events: none;
  max-width: min(360px, calc(100vw - 48px));
}

.toast {
  pointer-events: auto;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left-width: 3px;
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-md);
  font-size: 13px;
  line-height: 1.5;
  /* A supplier error message can be a paragraph; it wraps rather than
     stretching the stack past the viewport. */
  overflow-wrap: anywhere;
  animation: slideUp 0.18s ease-out;
}

.toast-info { border-left-color: var(--blue); }
.toast-success { border-left-color: var(--green); }
.toast-warn { border-left-color: var(--amber); }
.toast-error { border-left-color: var(--red); }

.toast.is-leaving {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

/* The row API.rows() writes when a table came back empty and the page has no
 * dedicated empty-state element of its own. */
.table-empty td {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-light);
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast.is-leaving { transition: none; }
}

@media (max-width: 600px) {
  .toast-stack {
    right: 12px;
    left: 12px;
    bottom: 12px;
    max-width: none;
  }
}

/* ---- Role mock dashboards ----------------------------------------- */

.rd-page {
  max-width: 1280px;
  margin: 0 auto;
}

.rd-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.rd-hero h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy, #0a2540);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.rd-hero .rd-sub {
  font-size: 13px;
  color: var(--gray, #5f6368);
  max-width: 520px;
  line-height: 1.45;
}

.rd-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--navy-pale, #e8eef5);
  color: var(--navy, #0a2540);
  border: 1px solid var(--grey-200, #e0e0e0);
  white-space: nowrap;
}

.rd-role-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.rd-role-switch a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid var(--grey-200, #e0e0e0);
  background: var(--white, #fff);
  color: var(--grey-700, #3c4043);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease;
}

.rd-role-switch a:hover {
  border-color: var(--navy-mid, #1a3a5c);
  background: var(--grey-50, #f8f9fa);
}

.rd-role-switch a.is-active {
  border-color: var(--accent, #1668e3);
  background: var(--accent-bg, #e8f0fe);
  color: var(--accent, #1668e3);
}

.rd-grid-2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.rd-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 960px) {
  .rd-grid-2,
  .rd-grid-3 {
    grid-template-columns: 1fr;
  }
}

.rd-panel {
  background: var(--white, #fff);
  border: 1px solid var(--grey-200, #e0e0e0);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin-bottom: 16px;
}

.rd-panel-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--grey-200, #e0e0e0);
  background: var(--grey-50, #f8f9fa);
}

.rd-panel-h h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy, #0a2540);
}

.rd-panel-h a,
.rd-panel-h .rd-muted {
  font-size: 12px;
  color: var(--accent, #1668e3);
  text-decoration: none;
  font-weight: 600;
}

.rd-panel-h .rd-muted {
  color: var(--gray, #5f6368);
  font-weight: 500;
}

.rd-panel-b {
  padding: 16px;
}

.rd-panel-b.p-0 {
  padding: 0;
}

.rd-kpi-delta {
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}

.rd-kpi-delta.up { color: var(--green, #0f9d58); }
.rd-kpi-delta.down { color: var(--red, #d93025); }
.rd-kpi-delta.flat { color: var(--gray, #5f6368); }

.rd-bar-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rd-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 48px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}

.rd-bar-row .lbl {
  color: var(--grey-700, #3c4043);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rd-bar-track {
  height: 8px;
  border-radius: 4px;
  background: var(--grey-100, #f1f3f4);
  overflow: hidden;
}

.rd-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent, #1668e3);
}

.rd-bar-fill.green { background: var(--green, #0f9d58); }
.rd-bar-fill.amber { background: var(--amber, #f4b400); }
.rd-bar-fill.red { background: var(--red, #d93025); }
.rd-bar-fill.violet { background: var(--violet, #7c4dff); }

.rd-w-6 { width: 6%; }
.rd-w-12 { width: 12%; }
.rd-w-14 { width: 14%; }
.rd-w-15 { width: 15%; }
.rd-w-18 { width: 18%; }
.rd-w-20 { width: 20%; }
.rd-w-24 { width: 24%; }
.rd-w-25 { width: 25%; }
.rd-w-27 { width: 27%; }
.rd-w-28 { width: 28%; }
.rd-w-30 { width: 30%; }
.rd-w-36 { width: 36%; }
.rd-w-40 { width: 40%; }
.rd-w-41 { width: 41%; }
.rd-w-42 { width: 42%; }
.rd-w-48 { width: 48%; }
.rd-w-58 { width: 58%; }
.rd-w-61 { width: 61%; }
.rd-w-64 { width: 64%; }
.rd-w-72 { width: 72%; }
.rd-w-78 { width: 78%; }
.rd-w-88 { width: 88%; }
.rd-w-92 { width: 92%; }
.rd-w-100 { width: 100%; }

.rd-bar-row .val {
  text-align: right;
  font-weight: 700;
  color: var(--navy, #0a2540);
  font-variant-numeric: tabular-nums;
}

.rd-alert {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--grey-200, #e0e0e0);
  background: var(--white, #fff);
  margin-bottom: 8px;
  align-items: flex-start;
}

.rd-alert:last-child { margin-bottom: 0; }
.rd-alert-spaced { margin-top: 14px; }

.rd-alert .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.rd-alert .dot.crit { background: var(--red, #d93025); }
.rd-alert .dot.warn { background: var(--amber, #f4b400); }
.rd-alert .dot.info { background: var(--accent, #1668e3); }
.rd-alert .dot.ok { background: var(--green, #0f9d58); }

.rd-alert .ttl {
  font-size: 13px;
  font-weight: 650;
  color: var(--navy, #0a2540);
  margin-bottom: 2px;
}

.rd-alert .meta {
  font-size: 12px;
  color: var(--gray, #5f6368);
  line-height: 1.4;
}

.rd-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.rd-hub-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--white, #fff);
  border: 1px solid var(--grey-200, #e0e0e0);
  border-radius: 8px;
  padding: 20px;
  transition: box-shadow 150ms ease, border-color 150ms ease;
  min-height: 160px;
  box-sizing: border-box;
}

.rd-hub-card:hover {
  border-color: var(--navy-mid, #1a3a5c);
  box-shadow: 0 4px 16px rgba(0, 40, 85, 0.08);
}

.rd-hub-card .rd-hub-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 12px;
  background: var(--navy-pale, #e8eef5);
}

.rd-hub-card h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--navy, #0a2540);
}

.rd-hub-card p {
  font-size: 13px;
  color: var(--gray, #5f6368);
  margin: 0;
  line-height: 1.45;
}

.rd-spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
  margin-top: 8px;
}

.rd-spark i {
  display: block;
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: var(--accent, #1668e3);
  opacity: 0.85;
  min-width: 4px;
}

.rd-h-35 { height: 35%; }
.rd-h-38 { height: 38%; }
.rd-h-42 { height: 42%; }
.rd-h-48 { height: 48%; }
.rd-h-55 { height: 55%; }
.rd-h-58 { height: 58%; }
.rd-h-62 { height: 62%; }
.rd-h-66 { height: 66%; }
.rd-h-68 { height: 68%; }
.rd-h-70 { height: 70%; }
.rd-h-72 { height: 72%; }
.rd-h-74 { height: 74%; }
.rd-h-80 { height: 80%; }
.rd-h-88 { height: 88%; }

.rd-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rd-metric-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--grey-100, #f1f3f4);
}

.rd-metric-line:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.rd-metric-line .k { color: var(--gray, #5f6368); }
.rd-metric-line .v { font-weight: 700; color: var(--navy, #0a2540); font-variant-numeric: tabular-nums; }

.rd-mock-note {
  font-size: 11px;
  color: var(--gray, #5f6368);
  margin-top: 8px;
  font-style: italic;
}

/* ---- 98. Style-guide unification ------------------------------------
 * admin-mockups/style-guide.html is the contract. Pages already speak two
 * dialects — .fx-table and .data-table, .edit-field and .field, .search-input
 * and .input. This layer makes both dialects look like the guide, using the
 * semantic tokens in 01-tokens.css.
 *
 * Sits after 99? No: numbered 98 so it loads before 99-utilities (utilities
 * must still win on a utility class) and before zz-mobile (viewport last).
 * Equal-specificity component rules here beat earlier vertical layers. */

/* ---- Page chrome ----------------------------------------------------- */

.page-content {
  max-width: var(--page-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.page-flights .page-content,
.page-hotels .page-content,
.page-f2new .page-content,
.page-booking-preview .page-content,
.page-hotel-preview .page-content,
.page-hotel-passenger .page-content,
.page-booking-success .page-content,
.page-hotel-success .page-content {
  max-width: none;
}

.page-title,
.page-title-bar .page-title,
.page-title-row .page-title,
.section-title,
.page-header h1,
.topbar-left h1,
.topbar-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  color: var(--color-heading);
  letter-spacing: -.3px;
  line-height: var(--leading-tight);
}

.page-desc,
.section-desc,
.page-subtitle,
.page-header .sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-7);
  line-height: var(--leading-normal);
}

.page-title-row,
.page-title-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

/* ---- Toolbar / filter bar -------------------------------------------- */

.toolbar,
.filter-bar {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.toolbar-label {
  margin-left: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.input,
.select,
.search-input,
.filter-select,
.filter-input {
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  outline: none;
  transition: var(--transition);
}

.select,
.filter-select {
  cursor: pointer;
}

.input:focus,
.select:focus,
.search-input:focus,
.filter-select:focus,
.filter-input:focus,
.form-control:focus,
.form-input:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.search-input,
.input--search {
  width: 240px;
  max-width: 100%;
  padding-left: var(--space-10);
  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='%239CA3AF' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: var(--space-5) center;
}

/* ---- Fields ---------------------------------------------------------- */

.field,
.edit-field,
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.field > label,
.edit-field > label,
.form-group > label,
.form-label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.field > input,
.field > select,
.field > textarea,
.edit-field > input,
.edit-field > select,
.edit-field > textarea,
.form-group input,
.form-group select,
.form-group textarea {
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  outline: none;
  transition: var(--transition);
}

.field > textarea,
.edit-field > textarea {
  min-height: 60px;
  resize: vertical;
}

.field > input:focus,
.field > select:focus,
.field > textarea:focus,
.edit-field > input:focus,
.edit-field > select:focus,
.edit-field > textarea:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.field-hint {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

/* Booking passenger/search layouts own .form-row; do not force the admin
 * two-column grid onto those pages. */
.field-row,
.edit-row,
body:not(.page-flights):not(.page-hotels):not(.page-f2new):not(.page-booking-preview):not(.page-hotel-preview):not(.page-hotel-passenger) .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.field-row--3,
.edit-row.three,
body:not(.page-flights):not(.page-hotels):not(.page-f2new):not(.page-booking-preview):not(.page-hotel-preview):not(.page-hotel-passenger) .form-row.three {
  grid-template-columns: 1fr 1fr 1fr;
}

body:not(.page-flights):not(.page-hotels):not(.page-f2new):not(.page-booking-preview):not(.page-hotel-preview):not(.page-hotel-passenger) .form-row.four {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.field--full {
  grid-column: 1 / -1;
}

/* ---- Cards -----------------------------------------------------------
 * Booking result tiles are .flight-card / hotel cards with their own chrome.
 * Keep guide card chrome off those pages so search results keep the strip
 * layout from 29-booking.css. */

body:not(.page-flights):not(.page-hotels):not(.page-f2new):not(.page-booking-preview):not(.page-hotel-preview):not(.page-hotel-passenger) .card,
.form-card,
.summary-card,
.filter-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.card-header,
.filter-head {
  padding: var(--space-6) var(--space-7);
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
}

.card-title,
.filter-head {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-heading);
}

/* ---- Data tables ----------------------------------------------------- */

.data-table,
.fx-table,
.ops-table,
.detail-table,
.audit-table,
body:not(.page-flights):not(.page-hotels) .card > table,
body:not(.page-flights):not(.page-hotels) .card .card-body > table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.fx-table th,
.ops-table th,
.detail-table th,
.audit-table th,
body:not(.page-flights):not(.page-hotels) .card > table th,
body:not(.page-flights):not(.page-hotels) .card .card-body > table th {
  padding: var(--space-4) var(--space-6);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
}

.data-table td,
.fx-table td,
.ops-table td,
.detail-table td,
.audit-table td,
body:not(.page-flights):not(.page-hotels) .card > table td,
body:not(.page-flights):not(.page-hotels) .card .card-body > table td {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-md);
  vertical-align: middle;
  color: var(--color-text);
}

.data-table td:first-child,
.fx-table td:first-child,
body:not(.page-flights):not(.page-hotels) .card > table td:first-child {
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

.data-table tbody tr:hover,
.fx-table tbody tr:hover,
.ops-table tbody tr:hover,
body:not(.page-flights):not(.page-hotels) .card > table tbody tr:hover {
  background: var(--color-surface-hover);
}

.data-table tr:last-child td,
.fx-table tr:last-child td,
body:not(.page-flights):not(.page-hotels) .card > table tr:last-child td {
  border-bottom: none;
}

.data-table--clickable tbody tr {
  cursor: pointer;
}

.cell-strong,
.cell-name {
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

/* ---- Row actions ----------------------------------------------------- */

.row-actions,
.action-btns {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.action-btn,
.fx-action-btn {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-2xs);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-body);
  cursor: pointer;
  font-family: inherit;
  font-weight: var(--weight-semibold);
  transition: var(--transition);
}

.action-btn:hover,
.fx-action-btn:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.action-btn.primary,
.fx-action-btn.primary {
  background: var(--color-secondary);
  color: var(--color-on-fill);
  border-color: var(--color-secondary);
}

.action-btn.green,
.fx-action-btn.green {
  background: var(--color-success);
  color: var(--color-on-fill);
  border-color: var(--color-success);
}

.action-btn.red,
.fx-action-btn.red {
  background: var(--color-danger);
  color: var(--color-on-fill);
  border-color: var(--color-danger);
}

/* ---- Badges ---------------------------------------------------------- */

.status-badge,
.badge,
.role-badge,
.type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.status-badge,
.badge {
  background: var(--color-surface-sunken);
  color: var(--color-text-body);
}

.status-badge.active,
.status-badge.yes,
.badge.active,
.badge.completed {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.status-badge.inactive,
.status-badge.no,
.badge.inactive {
  background: var(--color-surface-sunken);
  color: var(--color-text-body);
}

.status-badge.pending,
.badge.pending {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.status-badge.suspended,
.status-badge.archived,
.badge.failed,
.badge-cancelled {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.type-badge.GDS { background: var(--color-gds-soft); color: var(--color-gds) }
.type-badge.NDC { background: var(--color-ndc-soft); color: var(--color-ndc) }
.type-badge.LCC { background: var(--color-lcc-soft); color: var(--color-lcc) }

.role-badge.admin { background: var(--color-admin-soft); color: var(--color-admin) }
.role-badge.gsa_manager { background: var(--color-secondary-soft); color: var(--color-secondary) }
.role-badge.msa_agent { background: var(--color-primary-soft); color: var(--color-primary) }
.role-badge.finance { background: var(--color-success-soft); color: var(--color-success) }
.role-badge.support { background: var(--color-warning-soft); color: var(--color-warning) }

/* ---- Pagination ------------------------------------------------------ */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-7);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-wrap: wrap;
}

.page-info {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.page-info strong {
  color: var(--color-text);
}

.page-btn {
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-body);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-family: inherit;
  transition: var(--transition);
  min-height: 32px;
}

.page-btn:hover:not(:disabled) {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.page-btn.active {
  background: var(--color-secondary);
  color: var(--color-on-fill);
  border-color: var(--color-secondary);
}

.page-btn:disabled {
  opacity: .4;
  cursor: default;
}

/* ---- Detail grid / notes --------------------------------------------- */

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.detail-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.detail-item {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-muted);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.detail-item.full {
  grid-column: 1 / -1;
}

.detail-label {
  display: block;
  font-size: var(--text-3xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.detail-value {
  display: block;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  word-break: break-word;
}

.note-box {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-loose);
  color: var(--color-text);
  background: var(--color-surface-muted);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

/* ---- Modals ---------------------------------------------------------- */

.modal-overlay {
  background: var(--color-overlay);
}

.modal {
  width: min(var(--modal-md), 92vw);
  box-shadow: var(--shadow-modal);
  background: var(--color-surface);
}

.modal--sm { width: min(var(--modal-sm), 92vw) }
.modal--lg { width: min(var(--modal-lg), 92vw) }
.modal--xl { width: min(var(--modal-xl), 92vw) }

.modal-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
}

.modal-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-6);
}

/* ---- Async states ---------------------------------------------------- */

.loading-state,
.empty-state {
  padding: var(--space-10);
  text-align: center;
  color: var(--color-text-subtle);
  font-style: italic;
}

.error-state {
  padding: var(--space-10);
  text-align: center;
  color: var(--color-danger);
}

/* ---- Text utilities from the guide ----------------------------------- */

.text-meta {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

.text-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  word-break: break-all;
}

/* ---- Focus ----------------------------------------------------------- */

.btn:focus-visible,
.btn-outline:focus-visible,
.btn-action:focus-visible,
.nav-menu-btn:focus-visible,
.logout-btn:focus-visible,
.action-btn:focus-visible,
.page-btn:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* ---- Column widths the guide documents ------------------------------- */

.w-7 { width: 7% }
.w-8 { width: 8% }
.w-10 { width: 10% }
.w-12 { width: 12% }
.w-14 { width: 14% }
.w-15 { width: 15% }
.w-16 { width: 16% }
.w-18 { width: 18% }
.w-20 { width: 20% }
.w-22 { width: 22% }

/* ---- Module / finance / shared field polish (style-guide) ------------ */

[class*="page-finance"] .page-content,
[class*="page-finance"] .content,
[class*="page-corporate"] .page-content,
[class*="page-corporate"] .content {
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}

/* Equal vertical rhythm: tabs → content, cards → cards */
[class*="page-finance"] .fx-tabs,
[class*="page-finance"] .tab-bar,
[class*="page-finance"] .tabs,
[class*="page-corporate"] .tab-bar,
[class*="page-corporate"] .tabs {
  margin-bottom: var(--space-7);
}

[class*="page-finance"] .fx-tabs .tab-btn,
[class*="page-finance"] .tab-bar .tab,
[class*="page-finance"] .tab-bar .tab-btn {
  min-height: var(--control-h-lg);
  height: var(--control-h-lg);
}

[class*="page-finance"] .tab-panel.active > .fx-rate-card,
[class*="page-finance"] .tab-panel.active > .engine-status-card,
[class*="page-finance"] .tab-panel.active > .filter-bar + .fx-rate-card {
  margin-top: 0;
}

[class*="page-finance"] .filter-bar {
  margin-bottom: var(--space-6);
  gap: var(--space-5);
  align-items: flex-end;
}

[class*="page-finance"] .form-row,
[class*="page-corporate"] .form-row,
[class*="page-finance"] .edit-form-row {
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-5);
}

[class*="page-finance"] .form-card,
[class*="page-finance"] .card,
[class*="page-finance"] .fx-rate-card,
[class*="page-finance"] .engine-status-card,
[class*="page-corporate"] .card {
  margin-bottom: var(--space-7);
}

[class*="page-finance"] .stats-row,
[class*="page-corporate"] .stats-row,
[class*="page-finance"] .summary-cards {
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  align-items: stretch;
}

[class*="page-finance"] .stat-card,
[class*="page-finance"] .summary-card,
[class*="page-finance"] .module-card,
[class*="page-corporate"] .stat-card {
  min-height: 96px;
  box-sizing: border-box;
}

[class*="page-finance"] .form-actions,
[class*="page-corporate"] .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border, var(--grey-200));
  align-items: center;
}

/* Airport field inherits control height */
.airport-field input {
  min-height: var(--control-h);
  height: var(--control-h);
  width: 100%;
  box-sizing: border-box;
}

/* ---- 99. utilities ------------------------------------------------
 * Single-purpose classes replacing the style="..." attributes the pages
 * carried. One declaration each, composed at the call site:
 *
 *   style="font-size:11px;color:var(--grey-400)"  ->  class="text-xs text-faint"
 *
 * Names describe the effect, not the value, so a class stays truthful when
 * its value is tuned. Colours go through tokens, so these follow the theme.
 *
 * LAST LAYER, deliberately, and numbered 99 so a new vertical layer cannot
 * land after it. Every class here stands in for a declaration that was
 * written in a style attribute, and an attribute beats every rule in the
 * stylesheet. While this sat at 18 — before the vertical layers — those
 * classes lost that argument at equal specificity, so a component quietly
 * took back the value the page had overridden: .engine-info-value repainted
 * the text .text-faint was generated to grey out. Last is the only position
 * that preserves what the pages were authored to look like.
 *
 * GENERATED by scripts/templates/destyle.mjs from the classes the converted
 * templates actually use. Structural rules are not utilities — those belong
 * in a vertical layer with a name someone chose. */

.bg-accent {
  background: var(--accent);
}

.bg-accent-soft {
  background: var(--accent-bg);
}

.bg-amber {
  background: var(--amber);
}

.bg-amber-soft {
  background: var(--amber-bg);
}

.bg-gray {
  background: var(--gray);
}

.bg-green {
  background: var(--green);
}

.bg-grey {
  background: var(--grey);
}

.bg-grey-100 {
  background: var(--grey-100);
}

.bg-grey-50 {
  background: var(--grey-50);
}

.bg-navy {
  background: var(--navy);
}

.bg-red {
  background: var(--red);
}

.bg-transparent {
  background: transparent;
}

.bg-violet {
  background: var(--violet);
}

.bg-white {
  background: var(--white);
}

.border-default {
  border: 1px solid var(--border);
}

.border-grey-200 {
  border: 1px solid var(--grey-200);
}

.border-grey-300 {
  border: 1px solid var(--grey-300);
}

.border-red {
  border-color: var(--red);
}

.border-violet {
  border-color: var(--violet);
}

.break-all {
  word-break: break-all;
}

.col-span-2 {
  grid-column: span 2;
}

.cursor-default {
  cursor: default;
}

.flex {
  display: flex;
}

.flex-0-35 {
  flex: .35;
}

.flex-0-55 {
  flex: .55;
}

.flex-0-7 {
  flex: .7;
}

.flex-1 {
  flex: 1;
}

.flex-1-2 {
  flex: 1.2;
}

.flex-5 {
  flex: .5;
}

.flex-6 {
  flex: .6;
}

.flex-wrap {
  flex-wrap: wrap;
}

.font-inherit {
  font-family: inherit;
}

.fw-bold {
  font-weight: 700;
}

.fw-extrabold {
  font-weight: 800;
}

.fw-medium {
  font-weight: 500;
}

.fw-normal {
  font-weight: 400;
}

.fw-semibold {
  font-weight: 600;
}

.gap-10 {
  gap: 10px;
}

.gap-12 {
  gap: 12px;
}

.gap-16 {
  gap: 16px;
}

.gap-24 {
  gap: 24px;
}

.gap-4 {
  gap: 4px;
}

.gap-6 {
  gap: 6px;
}

.gap-8 {
  gap: 8px;
}

.grid {
  display: grid;
}

.grid-2 {
  grid-template-columns: 1fr 1fr;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-auto-160 {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.grid-auto-180 {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.inline-flex {
  display: inline-flex;
}

.is-clickable {
  cursor: pointer;
}

.is-hidden {
  display: none;
}

.italic {
  font-style: italic;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

.leading-relaxed {
  line-height: 1.6;
}

.m-10-0-8 {
  margin: 10px 0 8px;
}

.m-12-24 {
  margin: 12px 24px;
}

.m-20-0 {
  margin: 20px 0;
}

.max-w-1400 {
  max-width: 1400px;
}

.max-w-720 {
  max-width: 720px;
}

.max-w-820 {
  max-width: 820px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mb-14 {
  margin-bottom: 14px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-3 {
  margin-bottom: 3px;
}

.mb-4 {
  margin-bottom: 4px;
}

.mb-6 {
  margin-bottom: 6px;
}

.mb-8 {
  margin-bottom: 8px;
}

.min-h-50 {
  min-height: 50px;
}

.min-w-160 {
  min-width: 160px;
}

.ml-4 {
  margin-left: 4px;
}

.ml-8 {
  margin-left: 8px;
}

.ml-auto {
  margin-left: auto;
}

.mono {
  font-family: monospace;
}

.mt-12 {
  margin-top: 12px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-24 {
  margin-top: 24px;
}

.mt-4 {
  margin-top: 4px;
}

.mt-6 {
  margin-top: 6px;
}

.mt-8 {
  margin-top: 8px;
}

.mt-auto {
  margin-top: auto;
}

.mx-auto {
  margin: 0 auto;
}

.no-underline {
  text-decoration: none;
}

.normal-case {
  text-transform: none;
}

.opacity-50 {
  opacity: .5;
}

.outline-none {
  outline: none;
}

.p-0 {
  padding: 0;
}

.p-10 {
  padding: 10px;
}

.p-12 {
  padding: 12px;
}

.p-14 {
  padding: 14px;
}

.p-16 {
  padding: 16px;
}

.p-32 {
  padding: 32px;
}

.p-4 {
  padding: 4px;
}

.p-4-12-8 {
  padding: 4px 12px 8px;
}

.px-10-8 {
  padding: 8px 10px;
}

.px-12-10 {
  padding: 10px 12px;
}

.px-12-24 {
  padding: 24px 12px;
}

.px-12-6 {
  padding: 6px 12px;
}

.px-14-10 {
  padding: 10px 14px;
}

.px-16-10 {
  padding: 10px 16px;
}

.px-16-8 {
  padding: 8px 16px;
}

.px-20 {
  padding: 0 20px;
}

.px-20-10 {
  padding: 10px 20px;
}

.px-20-14 {
  padding: 14px 20px;
}

.px-20-16 {
  padding: 16px 20px;
}

.px-24-8 {
  padding: 8px 24px;
}

.px-6-4 {
  padding: 4px 6px;
}

.py-6 {
  padding: 6px 0;
}

.py-8 {
  padding: 8px 0;
}

.rounded {
  border-radius: var(--radius);
}

.rounded-4 {
  border-radius: 4px;
}

.scroll-x {
  overflow-x: auto;
}

.self-end {
  align-self: flex-end;
}

.text-2lg {
  font-size: 22px;
}

.text-2xs {
  font-size: 10px;
}

.text-3xs {
  font-size: 9px;
}

.text-6xl {
  font-size: 56px;
}

.text-accent {
  color: var(--accent);
}

.text-base {
  font-size: 13px;
}

.text-center {
  text-align: center;
}

.text-dim {
  color: var(--grey-600);
}

.text-faint {
  color: var(--grey-400);
}

.text-gray {
  color: var(--gray);
}

.text-left {
  text-align: left;
}

.text-lg {
  font-size: 16px;
}

.text-md {
  font-size: 14px;
}

.text-muted {
  color: var(--grey-500);
}

.text-navy {
  color: var(--navy);
}

.text-negative {
  color: var(--red);
}

.text-positive {
  color: var(--green);
}

.text-right {
  text-align: right;
}

.text-secondary {
  color: var(--grey-700);
}

.text-sm {
  font-size: 12px;
}

.text-violet {
  color: var(--violet);
}

.text-warning {
  color: var(--amber);
}

.text-white {
  color: var(--white);
}

.text-xl {
  font-size: 18px;
}

.text-xs {
  font-size: 11px;
}

.tracking {
  letter-spacing: .8px;
}

.tracking-slight {
  letter-spacing: .3px;
}

.tracking-tight {
  letter-spacing: .5px;
}

.underline {
  text-decoration: underline;
}

.uppercase {
  text-transform: uppercase;
}

.w-10p {
  width: 10%;
}

.w-12p {
  width: 12%;
}

.w-13p {
  width: 13%;
}

.w-14p {
  width: 14%;
}

.w-150 {
  width: 150px;
}

.w-15p {
  width: 15%;
}

.w-16p {
  width: 16%;
}

.w-18p {
  width: 18%;
}

.w-200 {
  width: 200px;
}

.w-20p {
  width: 20%;
}

.w-22p {
  width: 22%;
}

.w-28p {
  width: 28%;
}

.w-30 {
  width: 30px;
}

.w-30p {
  width: 30%;
}

.w-5p {
  width: 5%;
}

.w-60 {
  width: 60px;
}

.w-7p {
  width: 7%;
}

.w-80 {
  width: 80px;
}

.w-820 {
  width: 820px;
}

.w-8p {
  width: 8%;
}

.w-9p {
  width: 9%;
}

.w-full {
  width: 100%;
}

/* ---- zz. mobile ----------------------------------------------------
 * Viewport overrides that have to win.
 *
 * 14-responsive.css sits in the middle of the cascade. Later files redefine
 * the same classes at equal specificity, and the later rule wins even when
 * the earlier one was inside a media query. This file is named so it sorts
 * after 99-utilities.css — last layer, last word — which is the only place
 * a phone layout can actually hold.
 *
 * Breakpoints match the ones the product already used (480 / 768) plus a
 * tablet band at 1024. Touch targets are --touch-min (44px). Inputs are
 * 16px so iOS does not zoom the page on focus.
 *
 * The filter aside on flights/hotels is also class="sidebar". Every drawer
 * rule is scoped to #nav or .app-container > .sidebar so that panel stays
 * page content. */

.nav-menu-btn,
.nav-backdrop {
  display: none;
}

@media (max-width: 1024px) {
  .page-content,
  .content,
  .container {
    padding: 16px;
  }

  .topbar {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .topbar-right {
    flex-wrap: wrap;
    gap: 8px;
  }

  .review-grid,
  .passengers-section {
    grid-template-columns: 1fr;
  }

  .points-grid,
  .detail-grid,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .field-row,
  .field-row--3,
  .edit-row,
  .edit-row.three,
  .form-row,
  .form-row.two,
  .form-row.three,
  .form-row.four,
  .detail-grid,
  .detail-grid--3 {
    grid-template-columns: 1fr;
  }

  .page-title-row,
  .page-title-bar {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 768px) {
  .nav-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--touch-min);
    height: var(--touch-min);
    margin: 0 4px 0 -8px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--white);
    cursor: pointer;
  }

  .nav-menu-btn:hover,
  .nav-menu-btn:focus-visible {
    background: rgba(255, 255, 255, .12);
    outline: none;
  }

  .topbar .nav-menu-btn,
  .breadcrumb-bar .nav-menu-btn {
    color: var(--navy);
    margin: 0 4px 0 -6px;
  }

  .topbar .nav-menu-btn:hover,
  .topbar .nav-menu-btn:focus-visible,
  .breadcrumb-bar .nav-menu-btn:hover,
  .breadcrumb-bar .nav-menu-btn:focus-visible {
    background: var(--navy-pale);
  }

  .nav-menu-btn-float {
    position: fixed;
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    z-index: 210;
    margin: 0;
    background: var(--navy);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(0, 16, 40, .18);
  }

  .nav-menu-btn-bars,
  .nav-menu-btn-bars::before,
  .nav-menu-btn-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    position: relative;
    transition: transform .2s ease, top .2s ease, opacity .2s ease;
  }

  .nav-menu-btn-bars::before,
  .nav-menu-btn-bars::after {
    content: '';
    position: absolute;
    left: 0;
  }

  .nav-menu-btn-bars::before { top: -6px; }
  .nav-menu-btn-bars::after { top: 6px; }

  body.nav-open .nav-menu-btn-bars {
    background: transparent;
  }

  body.nav-open .nav-menu-btn-bars::before {
    top: 0;
    transform: rotate(45deg);
  }

  body.nav-open .nav-menu-btn-bars::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 180;
    background: rgba(0, 16, 40, .46);
  }

  body.nav-open .nav-backdrop {
    display: block;
  }

  body.nav-open {
    overflow: hidden;
  }

  /* Off-canvas. Closed by default; body.nav-open slides it in. The desktop
   * collapse rail is ignored here — a 64px strip on a 375px screen is a
   * wasted column, and the hamburger in the header is the control. */
  #nav,
  .app-container > .sidebar {
    position: fixed;
    left: 0;
    top: var(--header-h);
    bottom: 0;
    width: min(86vw, 300px);
    max-width: 100%;
    height: auto;
    z-index: 200;
    transform: translateX(-105%);
    transition: transform .2s ease;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  body:not(.has-header) #nav,
  body:not(.has-header) .app-container > .sidebar {
    top: 0;
  }

  body.nav-open #nav,
  body.nav-open .app-container > .sidebar {
    transform: translateX(0);
  }

  body.nav-collapsed #nav,
  body.nav-collapsed .app-container > .sidebar {
    width: min(86vw, 300px);
  }

  body.nav-collapsed #nav > nav {
    padding-top: 0;
  }

  body.nav-collapsed #nav a {
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 20px;
  }

  body.nav-collapsed #nav a span {
    display: inline;
  }

  body.nav-collapsed .app-container > .sidebar nav,
  body.nav-collapsed .app-container > .sidebar .sidebar-nav,
  body.nav-collapsed .app-container > .sidebar .sidebar-logo {
    display: block;
  }

  body.nav-collapsed .app-container > .sidebar .brand {
    display: flex;
  }

  body.nav-collapsed #nav .nav-section {
    height: auto;
    padding: 12px 20px 4px;
    margin: 0;
    overflow: visible;
    border-top: 0;
  }

  .nav-toggle {
    display: none;
  }

  #nav ~ .wrapper,
  body.nav-collapsed #nav ~ .wrapper {
    margin-left: 0;
  }

  .header {
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    height: var(--header-h);
  }

  .header-nav {
    display: none;
  }

  .user-tier {
    display: none;
  }

  .logo {
    font-size: 17px;
  }

  .page-content,
  .content {
    padding: 12px max(12px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .container {
    padding: 16px 12px;
  }

  .topbar {
    padding: 10px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
    align-items: center;
    column-gap: 4px;
  }

  .topbar-left {
    flex: 1;
    min-width: 0;
  }

  .topbar-left h1,
  .topbar-title {
    font-size: 16px;
  }

  .topbar-right {
    width: 100%;
    justify-content: flex-start;
  }

  .topbar-user {
    display: none;
  }

  .logout-btn {
    min-height: var(--touch-min);
    padding: 8px 14px;
  }

  .form-row,
  .form-row.two,
  .form-row.three,
  .form-row.four,
  .edit-row,
  .edit-row.three,
  .field-row,
  .field-row--3,
  .detail-grid,
  .detail-grid--3,
  .points-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .info-grid,
  .dates-grid {
    grid-template-columns: 1fr;
  }

  .search-input,
  .input--search,
  .filter-input,
  .input,
  .select,
  .filter-select {
    width: 100%;
    max-width: none;
  }

  .toolbar,
  .filter-bar {
    width: 100%;
  }

  .pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .page-btns {
    margin-left: 0;
    justify-content: center;
    flex-wrap: wrap;
  }

  .row-actions,
  .action-btns,
  .modal-actions,
  .modal-footer {
    flex-wrap: wrap;
  }

  .modal-actions .btn,
  .modal-footer .btn,
  .toolbar > .btn {
    min-height: var(--touch-min);
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
  select,
  textarea,
  .form-control,
  .form-input,
  .form-group input,
  .form-group select,
  .pax-trigger {
    font-size: 16px;
    min-height: var(--touch-min);
  }

  .btn,
  .btn-outline,
  .btn-action,
  .btn-accent,
  .btn-submit,
  .sidebar-header,
  #nav a,
  .app-container > .sidebar a,
  .app-container > .sidebar .sidebar-nav a,
  .tab-btn {
    min-height: var(--touch-min);
  }

  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .form-actions .btn,
  .form-actions .btn-outline {
    width: 100%;
  }

  .card,
  .form-card,
  .table-wrap,
  .report-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 520px;
  }

  .card-header,
  .pass-header,
  .pass-body {
    padding-left: 12px;
    padding-right: 12px;
  }

  .search-form,
  .mc-fields {
    flex-wrap: wrap;
  }

  .search-form .fg,
  .search-form .fg.flex-1-2,
  .search-form .fg.flex-0-7,
  .search-form .fg.flex-0-55,
  .search-form .fg.flex-5,
  .search-form .fg.flex-pax,
  .mc-fields .fg,
  .mc-fields .fg.flex-1-2,
  .mc-fields .fg.flex-0-7,
  .mc-fields .fg.flex-0-55,
  .mc-fields .fg.flex-5,
  .mc-fields .fg.flex-pax {
    flex: 1 1 46%;
    min-width: 140px;
    max-width: none;
  }

  .search-form > .btn,
  .mc-search-btn {
    width: 100%;
    min-height: var(--touch-min);
  }

  .card-row {
    grid-template-columns: auto 1fr;
  }

  .modal {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .overlay {
    padding: 0;
    align-items: stretch;
  }

  .split-view,
  .calendar-layout {
    grid-template-columns: 1fr;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  .page-signin .header,
  .page-register .header {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .page-signin input,
  .page-signin select,
  .page-register input,
  .page-register select,
  .page-register textarea {
    font-size: 16px;
    min-height: var(--touch-min);
  }
}

@media (max-width: 480px) {
  .search-form .fg,
  .search-form .fg.flex-1-2,
  .search-form .fg.flex-0-7,
  .search-form .fg.flex-0-55,
  .search-form .fg.flex-5,
  .search-form .fg.flex-pax,
  .mc-fields .fg,
  .mc-fields .fg.flex-1-2,
  .mc-fields .fg.flex-0-7,
  .mc-fields .fg.flex-0-55,
  .mc-fields .fg.flex-5,
  .mc-fields .fg.flex-pax {
    flex: 1 1 100%;
    min-width: 0;
  }

  .card-row {
    grid-template-columns: 1fr;
  }

  .points-grid,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .user-name {
    max-width: 28vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .section-title {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #nav,
  .app-container > .sidebar,
  .nav-menu-btn-bars,
  .nav-menu-btn-bars::before,
  .nav-menu-btn-bars::after {
    transition: none;
  }
}

/* Rules that were added to app.css directly (md.js model output, /versions)
 * and so were not in any layer; a rebuild dropped them. They stay last, where
 * they were. */
/* ---- Model output (md.js) ----------------------------------------------
 *
 * One block for every screen that paints a model's reply: the agent panel,
 * the support chat, the flight and hotel assistants, the churn analysis.
 * Before md.js each of those rendered a different subset of Markdown, so
 * each had its own spacing rules and none of them covered headings, tables
 * or code.
 *
 * Everything is scoped under .md and sized in em, so a reply inherits the
 * type scale of whatever bubble or panel it lands in rather than importing
 * a second one.
 */
.md > *:first-child { margin-top: 0; }
.md > *:last-child { margin-bottom: 0; }

.md p { margin: 0 0 0.55em; }

.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
  margin: 0.9em 0 0.4em;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
}
.md h1 { font-size: 1.2em; }
.md h2 { font-size: 1.12em; }
.md h3 { font-size: 1.05em; }
.md h4, .md h5, .md h6 { font-size: 1em; }

.md ul, .md ol { margin: 0 0 0.55em; padding-left: 1.35em; }
.md li { margin: 0.15em 0; }
.md li > p { margin: 0; }

.md a { color: var(--color-primary-mid); text-decoration: underline; }

.md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 0.1em 0.32em;
  border-radius: 4px;
  background: rgba(0, 40, 85, 0.07);
}

/* The pre carries the scroll, not the page: a long SQL line in a narrow
 * chat bubble must not widen the column it sits in. */
.md pre {
  margin: 0 0 0.6em;
  padding: 0.6em 0.75em;
  border-radius: 6px;
  background: rgba(0, 40, 85, 0.07);
  overflow-x: auto;
}
.md pre code { padding: 0; background: none; font-size: 0.88em; }

.md blockquote {
  margin: 0 0 0.55em;
  padding: 0.1em 0 0.1em 0.7em;
  border-left: 3px solid var(--color-primary-mid);
  color: var(--color-text-light, inherit);
}

.md hr { margin: 0.8em 0; border: 0; border-top: 1px solid var(--color-border, rgba(0,0,0,0.12)); }

/* Same reasoning as pre: the table scrolls inside its own box. */
.md table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 0.6em;
  border-collapse: collapse;
  font-size: 0.95em;
}
.md th, .md td {
  padding: 0.32em 0.6em;
  border: 1px solid var(--color-border, rgba(0, 40, 85, 0.15));
  text-align: left;
  vertical-align: top;
}
.md thead th { background: rgba(0, 40, 85, 0.06); font-weight: 700; }

/* ---- /versions ---------------------------------------------------------
 *
 * A diagnostics screen, so it is a table and not a dashboard: three numbers
 * that either agree with each other or explain a deploy that looks wrong.
 */
.versions-page { max-width: 860px; }

.versions-table { width: 100%; border-collapse: collapse; }

.versions-table th[scope="row"] {
  width: 7.5rem;
  padding: 0.7rem 0.9rem 0.7rem 0;
  text-align: left;
  font-weight: 600;
  color: var(--color-text);
  vertical-align: top;
}

.versions-table td { padding: 0.7rem 0.9rem 0.7rem 0; vertical-align: top; }

.versions-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
  padding: 0.15em 0.45em;
  border-radius: 4px;
  background: rgba(0, 40, 85, 0.07);
  white-space: nowrap;
}

.versions-table tr + tr th, .versions-table tr + tr td {
  border-top: 1px solid var(--color-border, rgba(0, 40, 85, 0.12));
}

.versions-note { color: var(--color-text-light, #5a6472); font-size: 0.9em; line-height: 1.45; }

/* ---- Topbar bell -----------------------------------------------------------
 * The unread inbox count sits on the bell's corner; js/layout.js fills it. */
.topbar-bell {
  position: relative;
}

.bell-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--red);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}