:root {
  --brand-red: #d62932;
  --brand-red-dark: #af1f27;
  --brand-green: #2eaa5f;
  --brand-green-dark: #08733f;
  --forest-950: #092e23;
  --forest-900: #0d3b2d;
  --forest-800: #14513d;
  --ink-950: #17211d;
  --ink-800: #293a33;
  --ink-600: #607068;
  --ink-500: #7b8982;
  --canvas: #f3f6f5;
  --surface: #ffffff;
  --surface-muted: #f8faf9;
  --line: #dfe7e3;
  --line-strong: #cbd8d2;
  --success-soft: #eaf7ef;
  --danger-soft: #fff0f1;
  --warning-soft: #fff8e8;
  --focus: #1677c8;
  --shadow-sm: 0 1px 2px rgba(12, 43, 32, .04), 0 4px 14px rgba(12, 43, 32, .04);
  --shadow-md: 0 12px 34px rgba(12, 43, 32, .09);
  --shadow-lg: 0 24px 65px rgba(12, 43, 32, .14);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --header-height: 72px;
  --sidebar-width: 272px;
  --content-max: 1260px;
}

* { box-sizing: border-box; }
html { min-height: 100%; font-size: 16px; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink-800);
  background: var(--canvas);
  font-family: Inter, Aptos, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-green-dark); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--brand-red); }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid rgba(22, 119, 200, .35); outline-offset: 2px; }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: .8rem; color: var(--ink-950); text-decoration: none; }
.brand:hover { color: var(--ink-950); text-decoration: none; }
.brand__image { display: block; width: auto; height: 44px; object-fit: contain; }
.brand__portal-label {
  display: grid;
  padding-left: .8rem;
  border-left: 1px solid var(--line);
  line-height: 1.05;
  text-transform: uppercase;
}
.brand__portal-label strong { color: var(--ink-800); font-size: .65rem; font-weight: 750; letter-spacing: .11em; }
.brand__portal-label small { margin-top: .2rem; color: var(--ink-500); font-size: .58rem; font-weight: 700; letter-spacing: .18em; }

/* Application frame */
.portal-page { padding-top: var(--header-height); background: var(--canvas); }
.portal-header,
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--header-height);
  border-bottom: 1px solid rgba(19, 70, 52, .1);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 12px rgba(11, 48, 35, .05);
  backdrop-filter: blur(14px);
}
.portal-header { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.portal-header__brand-zone { display: flex; align-items: center; gap: 12px; min-width: 0; }
.portal-brand { min-width: 214px; }
.portal-header__right { height: 100%; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.portal-header__right > * { display: inline-flex; align-items: center; gap: .5rem; }
.content-source {
  max-width: 230px;
  overflow: hidden;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-600);
  background: var(--surface-muted);
  font-size: .7rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 0 3px rgba(46, 170, 95, .13); }
.execution-mode {
  padding: 8px 11px;
  border: 1px solid #f3ccd0;
  border-radius: 999px;
  color: var(--brand-red-dark);
  background: var(--danger-soft);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.portal-user { max-width: 220px; overflow: hidden; padding: 8px 6px 8px 12px; color: var(--ink-600); font-size: .72rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.logout-link {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-800);
  font-size: .72rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.logout-link:hover { border-color: #f1c8cb; color: var(--brand-red-dark); background: var(--danger-soft); }

/* Reusable portal icon vocabulary. SVG masks keep the icons crisp and inherit
   the surrounding text color without introducing a client-specific logo. */
.ui-icon { width: 20px; display: inline-grid; place-items: center; flex: 0 0 20px; font-style: normal; font-weight: 750; text-align: center; }
.ui-icon::before { line-height: 1; }
.ui-icon--user::before { content: "●"; font-size: .62em; }
.ui-icon--logout::before { content: "↗"; transform: rotate(45deg); }
.ui-icon--home::before { content: "⌂"; }
.ui-icon--briefcase::before { content: "▣"; }
.ui-icon--supplier-portal::before { content: "↗"; }
.ui-icon--code::before { content: "</>"; font-size: .63em; }
.ui-icon--help::before { content: "?"; }
.ui-icon--search::before { content: "⌕"; font-size: 1.12em; }
.ui-icon--download::before { content: "↓"; }
.ui-icon--list::before { content: "≡"; }
.ui-icon--send::before { content: "↗"; }
.ui-icon--mail::before { content: "✉"; font-size: .78em; }
.ui-icon--book::before { content: "▤"; }
.ui-icon--document::before { content: "▪"; }

@supports (mask-image: url("")) {
  .ui-icon::before {
    width: 1em;
    height: 1em;
    content: "";
    background: currentColor;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
  }
  .ui-icon--home::before { -webkit-mask-image: url("../images/icons/home.svg"); mask-image: url("../images/icons/home.svg"); }
  .ui-icon--user::before { -webkit-mask-image: url("../images/icons/user.svg"); mask-image: url("../images/icons/user.svg"); }
  .ui-icon--logout::before { -webkit-mask-image: url("../images/icons/logout.svg"); mask-image: url("../images/icons/logout.svg"); }
  .ui-icon--briefcase::before { -webkit-mask-image: url("../images/icons/briefcase.svg"); mask-image: url("../images/icons/briefcase.svg"); }
  .ui-icon--supplier-portal::before { -webkit-mask-image: url("../images/icons/supplier-portal.svg"); mask-image: url("../images/icons/supplier-portal.svg"); }
  .ui-icon--code::before { -webkit-mask-image: url("../images/icons/code.svg"); mask-image: url("../images/icons/code.svg"); }
  .ui-icon--help::before { -webkit-mask-image: url("../images/icons/help.svg"); mask-image: url("../images/icons/help.svg"); }
  .ui-icon--search::before { -webkit-mask-image: url("../images/icons/search.svg"); mask-image: url("../images/icons/search.svg"); }
  .ui-icon--download::before { -webkit-mask-image: url("../images/icons/download.svg"); mask-image: url("../images/icons/download.svg"); }
  .ui-icon--send::before { -webkit-mask-image: url("../images/icons/send.svg"); mask-image: url("../images/icons/send.svg"); }
  .ui-icon--list::before { -webkit-mask-image: url("../images/icons/list.svg"); mask-image: url("../images/icons/list.svg"); }
  .ui-icon--mail::before { -webkit-mask-image: url("../images/icons/mail.svg"); mask-image: url("../images/icons/mail.svg"); }
  .ui-icon--book::before { -webkit-mask-image: url("../images/icons/book.svg"); mask-image: url("../images/icons/book.svg"); }
  .ui-icon--document::before { -webkit-mask-image: url("../images/icons/document.svg"); mask-image: url("../images/icons/document.svg"); }
}

/* Sidebar */
.portal-sidebar {
  position: fixed;
  z-index: 50;
  inset: var(--header-height) auto 0 0;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  color: #fff;
  background:
    radial-gradient(circle at 10% 0%, rgba(73, 185, 114, .18), transparent 26%),
    linear-gradient(180deg, var(--forest-900), var(--forest-950));
  box-shadow: 8px 0 28px rgba(8, 45, 33, .08);
}
.sidebar-intro { padding: 25px 22px 18px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.sidebar-intro__eyebrow { display: block; margin-bottom: 4px; color: #91caaa; font-size: .61rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sidebar-intro strong { color: #fff; font-size: 1.02rem; font-weight: 670; letter-spacing: -.015em; }
.portal-sidebar nav { flex: 1 0 auto; padding: 14px 12px 22px; }
.portal-sidebar details { margin-bottom: 6px; }
.portal-sidebar summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 9px 11px;
  border-radius: 9px;
  color: #d7e9e1;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .025em;
  list-style: none;
  text-transform: uppercase;
  transition: color .16s ease, background .16s ease;
}
.portal-sidebar summary::-webkit-details-marker { display: none; }
.portal-sidebar summary::after { content: "⌄"; margin-left: auto; color: #83a89a; font-size: .85rem; transition: transform .16s ease; }
.portal-sidebar details:not([open]) summary::after { transform: rotate(-90deg); }
.portal-sidebar summary:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.portal-sidebar summary .ui-icon { color: #7fcf9b; }
.portal-sidebar ul { margin: 2px 0 9px; padding: 0; list-style: none; }
.portal-sidebar li a,
.sidebar-logout {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 2px 0;
  padding: 8px 11px 8px 18px;
  border-radius: 9px;
  color: #aec7bc;
  font-size: .75rem;
  font-weight: 540;
  line-height: 1.3;
  text-decoration: none;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
.portal-sidebar li a .ui-icon { color: #6e9c89; font-size: .7rem; }
.portal-sidebar li a:hover,
.portal-sidebar li a.is-active {
  color: #fff;
  background: rgba(255, 255, 255, .1);
  transform: translateX(2px);
}
.portal-sidebar li a.is-active { box-shadow: inset 3px 0 0 var(--brand-red); background: rgba(255, 255, 255, .13); font-weight: 690; }
.portal-sidebar li a.is-active .ui-icon { color: #fff; }
.sidebar-logout { display: none; }
.sidebar-meta { margin: auto 16px 17px; padding: 14px 15px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(255, 255, 255, .05); }
.sidebar-meta span { display: flex; align-items: center; gap: 7px; color: #d9ece4; font-size: .68rem; font-weight: 700; }
.sidebar-meta i { width: 7px; height: 7px; border-radius: 50%; background: #60dc8c; box-shadow: 0 0 0 3px rgba(96, 220, 140, .13); }
.sidebar-meta small { display: block; margin-top: 5px; color: #7da393; font-size: .6rem; }

.nav-toggle { position: fixed; opacity: 0; pointer-events: none; }
.nav-toggle-label { display: none; }
.nav-scrim { display: none; }

/* Main workspace */
.portal-content { min-height: calc(100vh - var(--header-height)); margin-left: var(--sidebar-width); background: var(--canvas); }
.content-body { width: min(100%, var(--content-max)); margin: 0 auto; padding: 0 34px 52px; }
.breadcrumb-bar {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-500);
  font-size: .69rem;
}
.breadcrumb-bar a { color: var(--ink-500); font-weight: 620; text-decoration: none; }
.breadcrumb-bar a:hover { color: var(--brand-green-dark); }
.breadcrumb-bar span { color: #b0bbb6; }
.breadcrumb-bar strong { overflow: hidden; color: var(--ink-800); font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.portal-footer {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-left: var(--sidebar-width);
  padding: 20px max(34px, calc((100vw - var(--sidebar-width) - var(--content-max)) / 2 + 34px));
  border-top: 1px solid var(--line);
  color: var(--ink-500);
  background: var(--surface);
  font-size: .68rem;
}
.portal-footer div { display: grid; gap: 3px; }
.portal-footer strong { color: var(--ink-800); font-size: .74rem; }
.portal-footer a { font-weight: 650; text-decoration: none; }

/* Typography and content */
.section-kicker,
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  color: var(--brand-green-dark);
  font-size: .66rem;
  font-weight: 820;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-eyebrow i { width: 19px; height: 2px; border-radius: 99px; background: var(--brand-red); }
.page-heading {
  margin: 0 0 24px;
  color: var(--ink-950);
  font-size: clamp(1.75rem, 2.5vw, 2.45rem);
  font-weight: 680;
  letter-spacing: -.035em;
  line-height: 1.13;
}
.page-heading small { display: block; max-width: 680px; margin-top: .65rem; color: var(--ink-600); font-size: .82rem; font-weight: 450; letter-spacing: 0; line-height: 1.55; }
.legacy-content { max-width: 1000px; color: var(--ink-800); font-size: .9rem; line-height: 1.75; }
.legacy-content:not(.legacy-content--home) {
  padding: clamp(24px, 4vw, 46px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.legacy-content header .page-header,
.legacy-content header h1 {
  margin: 0 0 28px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-950);
  font-size: clamp(1.7rem, 2.7vw, 2.55rem);
  font-weight: 680;
  letter-spacing: -.035em;
  line-height: 1.14;
}
.legacy-content__body { max-width: 920px; }
.legacy-content__body p { margin: 0 0 1.1rem; }
.legacy-content__body a { font-weight: 680; overflow-wrap: anywhere; }
.legacy-content__body h2,
.legacy-content__body h3 { margin: 2rem 0 .8rem; color: var(--forest-800); font-weight: 680; letter-spacing: -.015em; }
.legacy-content__body ul,
.legacy-content__body ol { padding-left: 1.4rem; }
.legacy-content__body li { margin: .35rem 0; }
.legacy-content__body img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; }
.legacy-content__body img[src*="1way2italy-logo.png"] {
  display: inline-block;
  width: auto;
  max-width: 112px;
  max-height: 34px;
  margin: .15rem .25rem;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  vertical-align: middle;
}
.legacy-content__body table { width: 100%; border-collapse: separate; border: 1px solid var(--line); border-radius: 10px; border-spacing: 0; overflow: hidden; }
.legacy-content__body th,
.legacy-content__body td { padding: .7rem .8rem; border: 0; border-bottom: 1px solid var(--line); text-align: left; }
.legacy-content__body th { color: var(--forest-800); background: var(--success-soft); }
.legacy-content__body tr:last-child td { border-bottom: 0; }
.legacy-content__body pre,
.legacy-content__body code { overflow-wrap: anywhere; border-radius: 5px; color: #17643b; background: #edf7f1; }
.legacy-content__meta { margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--ink-500); font-size: .68rem; }

/* Home hero */
.legacy-content--home {
  position: relative;
  max-width: none;
  min-height: 320px;
  overflow: hidden;
  padding: clamp(30px, 5vw, 60px);
  border: 1px solid #d5e4dc;
  border-radius: 24px;
  color: #eef8f3;
  background:
    radial-gradient(circle at 91% 18%, rgba(74, 190, 115, .2), transparent 24%),
    linear-gradient(135deg, var(--forest-950), var(--forest-800));
  box-shadow: var(--shadow-md);
}
.legacy-content--home::after {
  content: "";
  position: absolute;
  right: -95px;
  bottom: -125px;
  width: 330px;
  height: 330px;
  border: 48px solid rgba(255, 255, 255, .035);
  border-radius: 50%;
  pointer-events: none;
}
.legacy-content--home .hero-eyebrow { color: #8ee0ab; }
.legacy-content--home header,
.legacy-content--home .legacy-content__body,
.legacy-content--home .hero-actions { position: relative; z-index: 1; max-width: 790px; }
.legacy-content--home header .page-header,
.legacy-content--home header h1 {
  max-width: 760px;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 3.8rem);
  font-weight: 680;
  letter-spacing: -.055em;
  line-height: 1.02;
}
.legacy-content--home header b[style*="green"] { color: #72d796 !important; }
.legacy-content--home header b[style*="red"] { color: #ff6970 !important; }
.legacy-content--home .legacy-content__body { max-width: 670px; color: #c7ded4; font-size: .94rem; line-height: 1.72; }
.legacy-content--home .legacy-content__body p { margin: 0; }
.legacy-content--home .legacy-content__body b { color: #fff; font-weight: 650; }
.legacy-content--home .legacy-content__body img {
  width: auto;
  max-width: 112px;
  max-height: 34px;
  margin: 0 4px;
  border: 0;
  border-radius: 0;
  filter: brightness(0) invert(1);
  object-fit: contain;
  vertical-align: middle;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* Buttons and tools */
.action-button,
.export-grid button,
.login-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 9px 15px;
  color: #fff;
  background: var(--brand-green-dark);
  font-size: .75rem;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 5px 14px rgba(8, 115, 63, .16);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.action-button:hover,
.export-grid button:hover,
.login-button:hover { color: #fff; background: #056535; box-shadow: 0 8px 20px rgba(8, 115, 63, .22); transform: translateY(-1px); }
.action-button--primary { color: var(--forest-950); background: #7adc9d; box-shadow: none; }
.action-button--primary:hover { color: var(--forest-950); background: #91e7ad; }
.action-button--secondary { border-color: rgba(255, 255, 255, .2); color: #fff; background: rgba(255, 255, 255, .07); box-shadow: none; }
.action-button--secondary:hover { border-color: rgba(255, 255, 255, .32); color: #fff; background: rgba(255, 255, 255, .12); }
.action-button:disabled,
.export-grid button:disabled,
.login-button:disabled { cursor: not-allowed; box-shadow: none; opacity: .5; transform: none; }

.local-tools { max-width: none; margin-top: 34px; }
.local-tools__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 16px; }
.local-tools__heading h2 { margin: 0; color: var(--ink-950); font-size: 1.35rem; font-weight: 700; letter-spacing: -.025em; }
.local-tools__heading p { margin: 5px 0 0; color: var(--ink-600); font-size: .76rem; }
.environment-summary {
  display: grid;
  grid-template-columns: 8px auto;
  gap: 1px 8px;
  align-items: center;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink-600);
  background: var(--surface);
  font-size: .6rem;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.environment-summary i { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 0 3px rgba(46, 170, 95, .12); }
.environment-summary strong { color: var(--ink-950); font-size: .65rem; font-weight: 780; }
.local-tools__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.local-tools__links a {
  min-height: 112px;
  display: grid;
  grid-template-columns: 44px 1fr 18px;
  gap: 12px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink-800);
  background: var(--surface);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.local-tools__links a:hover { border-color: #acd3bc; color: var(--ink-800); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.local-tools__links .tool-icon { width: 44px; height: 44px; border-radius: 11px; color: var(--brand-green-dark); background: var(--success-soft); font-size: 1rem; }
.local-tools__links a:nth-child(2) .tool-icon { color: #9e5a14; background: var(--warning-soft); }
.local-tools__links a:nth-child(3) .tool-icon { color: var(--brand-red-dark); background: var(--danger-soft); }
.local-tools__links a > span:not(.tool-icon) { min-width: 0; display: grid; gap: 4px; }
.local-tools__links strong { color: var(--ink-950); font-size: .8rem; font-weight: 720; }
.local-tools__links small { color: var(--ink-600); font-size: .67rem; line-height: 1.4; }
.local-tools__links b { color: var(--ink-500); font-size: 1rem; transition: color .16s ease, transform .16s ease; }
.local-tools__links a:hover b { color: var(--brand-red); transform: translateX(2px); }

/* Panels, tables and forms */
.workspace-panel {
  margin-bottom: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.workspace-panel__heading {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-800);
  background: var(--surface-muted);
}
.workspace-panel__heading h1,
.workspace-panel__heading h2 { margin: 0; color: var(--ink-950); font-size: .96rem; font-weight: 720; letter-spacing: -.01em; }
.workspace-panel__heading p { margin: 4px 0 0; color: var(--ink-600); font-size: .7rem; }
.panel-tag {
  padding: 5px 8px;
  border: 1px solid #f0d998;
  border-radius: 6px;
  color: #8a6415;
  background: var(--warning-soft);
  font-size: .57rem;
  font-weight: 820;
  letter-spacing: .04em;
  white-space: nowrap;
}
.portal-form { padding: 24px 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.form-grid--compact { padding: 24px 20px; }
.form-field { display: grid; gap: 7px; }
.form-field--wide { grid-column: 1 / -1; }
.form-field--wide textarea { min-height: 180px; }
.form-field label,
.xml-form label,
.sample-picker label { margin: 0; color: var(--ink-800); font-size: .7rem; font-weight: 700; }
.form-field input,
.form-field select,
.form-field textarea,
.sample-picker select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 8px 11px;
  color: var(--ink-800);
  background: #fff;
  font-size: .77rem;
  box-shadow: 0 1px 2px rgba(12, 43, 32, .03);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.sample-picker select:focus,
.xml-form textarea:focus {
  outline: 0;
  border-color: #55aa78;
  box-shadow: 0 0 0 3px rgba(46, 170, 95, .12);
}
.form-field > span { color: var(--brand-red); font-size: .66rem; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.inline-notice {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid #ead9a9;
  border-radius: 9px;
  color: #71551c;
  background: var(--warning-soft);
  font-size: .71rem;
}
.inline-notice--success { border-color: #b9dfc7; color: var(--brand-green-dark); background: var(--success-soft); }
.contact-panel { max-width: 940px; }
.contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.empty-state {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 18px;
  padding: 22px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--ink-600);
  background: rgba(255, 255, 255, .6);
}
.empty-state > span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border-radius: 50%; color: var(--brand-green-dark); background: var(--success-soft); font-size: 1rem; font-weight: 750; }
.empty-state h2 { margin: 0 0 3px; color: var(--ink-950); font-size: .86rem; }
.empty-state p { margin: 0; font-size: .71rem; }

.table-wrap { overflow-x: auto; }
.portal-table { width: 100%; margin: 0; border-collapse: collapse; font-size: .73rem; }
.portal-table th { color: var(--ink-600); background: var(--surface-muted); font-size: .62rem; font-weight: 790; letter-spacing: .045em; text-align: left; text-transform: uppercase; }
.portal-table th,
.portal-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.portal-table tr:last-child td { border-bottom: 0; }
.portal-table tbody tr { transition: background .14s ease; }
.portal-table tbody tr:hover { background: #f6fbf8; }
.portal-table td strong { color: var(--ink-950); font-weight: 700; }
.portal-table code { padding: 3px 6px; border-radius: 5px; color: #17643b; background: var(--success-soft); font-size: .67rem; }
.portal-table a { font-weight: 680; text-decoration: none; }
.status-pill { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: .58rem; font-weight: 780; white-space: nowrap; }
.status-pill--off { color: var(--brand-red-dark); background: var(--danger-soft); }
.status-pill--local { color: var(--brand-green-dark); background: var(--success-soft); }

/* Booking results */
.booking-results { margin-top: 20px; }
.results-count { margin: 0 0 9px; color: var(--ink-500); font-size: .68rem; text-align: right; }
.booking-result { margin-bottom: 11px; overflow: hidden; border: 1px solid var(--line); border-left: 4px solid var(--brand-green); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow-sm); }
.booking-result > summary { display: grid; grid-template-columns: 18px 1.35fr 1.1fr .8fr .8fr 1fr .72fr; gap: 12px; align-items: center; padding: 15px 16px; cursor: pointer; list-style: none; background: var(--surface); }
.booking-result > summary::-webkit-details-marker { display: none; }
.booking-result > summary::before { content: "⌄"; color: var(--brand-green-dark); font-size: 1rem; }
.booking-result[open] > summary::before { transform: rotate(180deg); }
.booking-result summary span { min-width: 0; }
.booking-result small { display: block; margin-bottom: 3px; color: var(--ink-500); font-size: .58rem; font-style: normal; font-weight: 620; text-transform: uppercase; }
.booking-result strong { display: block; overflow: hidden; color: var(--ink-950); font-size: .71rem; font-weight: 710; text-overflow: ellipsis; white-space: nowrap; }
.booking-result em { display: block; margin-top: 3px; overflow: hidden; color: var(--ink-500); font-size: .56rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.booking-result__body { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 18px; padding: 18px; border-top: 1px solid var(--line); background: var(--surface-muted); }
.booking-result__body strong { white-space: normal; }
.booking-result__body p { grid-column: 1 / -1; margin: 0; padding-top: 11px; border-top: 1px solid var(--line); color: var(--ink-500); font-size: .65rem; }
.booking-result--quotation { border-left-color: #3b91ac; }
.booking-result--optioned { border-left-color: #9a5b9a; }

/* Product export */
.export-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 0 0 15px; }
.export-grid article { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.export-grid article > span { display: inline-block; padding: 4px 7px; border-radius: 6px; color: var(--brand-green-dark); background: var(--success-soft); font-size: .58rem; font-weight: 820; letter-spacing: .04em; }
.export-grid h2 { margin: 15px 0 6px; color: var(--ink-950); font-size: .9rem; font-weight: 700; }
.export-grid p { min-height: 38px; color: var(--ink-600); font-size: .71rem; }
.export-grid button { margin-top: 7px; }
.export-grid button.is-loading { color: var(--brand-green-dark); background: #e7f3ef; opacity: 1; cursor: progress; }

/* XML workspace */
.api-section { margin: 0; border: 0; border-bottom: 1px solid var(--line); }
.api-section summary { padding: 13px 20px; color: var(--forest-800); background: var(--success-soft); cursor: pointer; font-size: .72rem; font-weight: 720; }
.api-section summary::marker { color: var(--brand-green); }
.api-section div { padding: 16px 20px; color: var(--ink-600); font-size: .72rem; line-height: 1.7; }
.sample-picker { display: grid; grid-template-columns: minmax(130px, auto) minmax(0, 1fr) auto; align-items: end; gap: 12px; padding: 20px; border-bottom: 1px solid var(--line); }
.sample-picker label { align-self: center; }
.xml-form { display: grid; gap: 8px; padding: 20px; }
.xml-form textarea { min-height: 370px; padding: 15px; border: 1px solid #25443a; border-radius: 10px; color: #dcebe4; background: #10231d; font-family: "Cascadia Code", Consolas, monospace; font-size: .72rem; line-height: 1.6; resize: vertical; tab-size: 2; }
.xml-form > span { color: var(--brand-red); font-size: .67rem; }
.validation-success { margin: 0 20px 20px; padding: 12px 14px; border: 1px solid #b9dfc7; border-radius: 9px; color: var(--brand-green-dark); background: var(--success-soft); font-size: .71rem; }

/* Public shell and authentication */
.site-header__inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; }
.site-header__label { color: var(--ink-500); font-size: .67rem; font-weight: 720; letter-spacing: .09em; text-transform: uppercase; }
.page-shell { min-height: calc(100vh - var(--header-height) - 94px); padding-top: var(--header-height); background: radial-gradient(circle at 75% 15%, rgba(46, 170, 95, .1), transparent 31%), var(--canvas); }
.login-main { width: min(100%, 620px); margin: 0 auto; padding: 64px 20px 35px; }
.contact-main { width: min(100%, 940px); }
.login-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); }
.login-card__header { padding: 30px 28px 22px; border-bottom: 1px solid var(--line); text-align: center; }
.login-card__icon { width: 46px; height: 46px; display: grid; place-items: center; margin: 0 auto 13px; border-radius: 13px; color: var(--brand-green-dark); background: var(--success-soft); }
.login-card__eyebrow { display: block; margin: 0 0 5px; color: var(--brand-green-dark); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.login-card h1 { margin: 0; color: var(--ink-950); font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; }
.login-form { padding: 25px 28px 28px; }
.field-group + .field-group { margin-top: 14px; }
.field-group > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.field-control { min-height: 45px; display: grid; grid-template-columns: 44px 1fr; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; }
.field-control:focus-within { border-color: #55aa78; box-shadow: 0 0 0 3px rgba(46, 170, 95, .12); }
.field-control span { display: grid; place-items: center; border-right: 1px solid var(--line); color: var(--ink-500); background: var(--surface-muted); font-size: .58rem; }
.field-control input { min-width: 0; border: 0; outline: 0; padding: 9px 12px; color: var(--ink-800); background: transparent; }
.login-button { margin: 19px 0 0 auto; }
.login-note { margin: 11px 0 0; color: var(--ink-500); font-size: .67rem; text-align: right; }
.login-help { margin-top: 24px; color: var(--ink-600); font-size: .74rem; text-align: center; }
.login-help p { display: inline; margin-right: 4px; }
.site-footer { min-height: 94px; padding: 20px; color: var(--ink-500); background: var(--surface); font-size: .67rem; text-align: center; }
.site-footer p { margin: 3px 0; }
.app-version { display: block; margin-top: 8px; color: #9ca8a2; font-size: .6rem; }
.status-card { width: min(760px, calc(100% - 30px)); margin: 80px auto; padding: 28px; border: 1px solid var(--line); border-left: 5px solid var(--brand-red); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-md); }
.status-card .eyebrow { color: var(--brand-red); font-size: .67rem; font-weight: 780; text-transform: uppercase; }
.btn { display: inline-block; }
.btn-primary { border-color: var(--brand-green-dark); color: #fff; background: var(--brand-green-dark); }

@media (max-width: 1080px) {
  :root { --sidebar-width: 248px; }
  .content-source { display: none; }
  .content-body { padding-inline: 24px; }
  .local-tools__links { grid-template-columns: 1fr; }
  .local-tools__links a { min-height: 92px; }
}

@media (max-width: 820px) {
  :root { --header-height: 64px; }
  .portal-header { padding: 0 14px; }
  .portal-header__brand-zone { gap: 8px; }
  .brand__image { height: 38px; }
  .portal-brand { min-width: 0; }
  .portal-user { display: none; }
  .nav-toggle-label {
    width: 38px;
    height: 38px;
    display: grid;
    place-content: center;
    gap: 4px;
    flex: 0 0 38px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface-muted);
    cursor: pointer;
  }
  .nav-toggle-label span { width: 17px; height: 2px; display: block; border-radius: 2px; background: var(--ink-800); transition: transform .18s ease, opacity .18s ease; }
  .portal-sidebar { width: min(290px, 86vw); transform: translateX(-105%); transition: transform .22s ease; box-shadow: var(--shadow-lg); }
  .nav-toggle:checked ~ .portal-sidebar { transform: translateX(0); }
  .nav-scrim { position: fixed; z-index: 45; inset: var(--header-height) 0 0; background: rgba(4, 26, 19, .42); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
  .nav-toggle:checked ~ .nav-scrim { display: block; opacity: 1; pointer-events: auto; }
  .portal-content,
  .portal-footer { margin-left: 0; }
  .content-body { padding: 0 18px 40px; }
  .breadcrumb-bar { margin-bottom: 20px; }
  .portal-footer { padding-inline: 20px; }
  .sidebar-logout { display: flex; }
  .legacy-content--home { min-height: 0; padding: 34px 28px; border-radius: 18px; }
  .legacy-content--home header .page-header,
  .legacy-content--home header h1 { font-size: clamp(2rem, 8vw, 3rem); }
  .form-grid,
  .export-grid { grid-template-columns: 1fr; }
  .booking-result > summary { grid-template-columns: 18px repeat(3, 1fr); }
  .booking-result > summary span:nth-of-type(4),
  .booking-result > summary span:nth-of-type(5) { display: none; }
}

@media (max-width: 560px) {
  .brand__portal-label { display: none; }
  .portal-header__right { gap: 5px; }
  .execution-mode { padding: 7px 9px; font-size: .58rem; }
  .logout-link { display: none; }
  .content-body { padding-inline: 13px; }
  .breadcrumb-bar { min-height: 46px; font-size: .63rem; }
  .legacy-content:not(.legacy-content--home) { padding: 22px 18px; border-radius: 14px; }
  .legacy-content--home { padding: 28px 21px; }
  .legacy-content--home .legacy-content__body { font-size: .84rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .action-button { width: 100%; }
  .local-tools__heading { align-items: flex-start; flex-direction: column; }
  .environment-summary { align-self: stretch; }
  .local-tools__links a { grid-template-columns: 42px 1fr 15px; padding: 15px; }
  .workspace-panel__heading { align-items: flex-start; flex-direction: column; padding: 15px; }
  .portal-form,
  .form-grid--compact,
  .sample-picker,
  .xml-form { padding: 16px; }
  .sample-picker { grid-template-columns: 1fr; align-items: stretch; }
  .sample-picker label { align-self: auto; }
  .sample-picker .action-button { width: 100%; }
  .form-actions .action-button { width: 100%; }
  .portal-table th,
  .portal-table td { padding: 11px 12px; }
  .booking-result > summary { grid-template-columns: 18px 1fr 1fr; }
  .booking-result > summary span:nth-of-type(2),
  .booking-result > summary span:nth-of-type(3),
  .booking-result > summary span:nth-of-type(4),
  .booking-result > summary span:nth-of-type(5) { display: none; }
  .booking-result__body { grid-template-columns: 1fr; }
  .booking-result__body p { grid-column: 1; }
  .portal-footer { align-items: flex-start; flex-direction: column; }
  .login-main { padding: 36px 14px 24px; }
  .login-card__header,
  .login-form { padding-inline: 20px; }
  .site-header__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Graphics redesign — a restrained supplier workspace language inspired by the
   Legacy portal: deep teal navigation, cool canvas, clear data density and
   motion that never competes with operational tasks. */
:root {
  --brand-teal: #004a43;
  --brand-teal-deep: #003b36;
  --brand-mint: #b8eee4;
  --canvas: #f4f7fc;
  --surface-muted: #f8faff;
  --ink-950: #082f3b;
  --ink-800: #173f4b;
  --ink-600: #69808e;
  --ink-500: #8a9ba7;
  --line: #e5eaf2;
  --line-strong: #d7e0eb;
  --shadow-sm: 0 4px 14px rgba(16, 50, 76, .06);
  --shadow-md: 0 14px 32px rgba(17, 48, 71, .10);
  --shadow-lg: 0 24px 65px rgba(8, 48, 61, .16);
  --sidebar-width: 220px;
  --header-height: 54px;
}

body { color: var(--ink-800); background: var(--canvas); }
a { color: var(--brand-teal); }
a:hover { color: #0d796f; }
.portal-header { padding: 0 22px; background: rgba(255,255,255,.95); border-bottom-color: #e8edf3; box-shadow: 0 1px 10px rgba(19,55,72,.04); }
.portal-header__brand-zone { min-width: var(--sidebar-width); }
.portal-header__context { display: grid; gap: 0; padding-left: 13px; border-left: 1px solid var(--line); color: var(--ink-800); line-height: 1.15; }
.portal-header__context-kicker { color: var(--ink-500); font-size: .54rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.portal-header__context strong { font-size: .76rem; font-weight: 700; }
.portal-brand { display: none; }
.portal-header__right { gap: 15px; }
.content-source { max-width: 180px; padding: 6px 9px; border: 0; color: #6d818d; background: #f4f8fb; font-size: .6rem; }
.execution-mode { gap: 6px !important; padding: 6px 9px; border: 1px solid #c8eee5; color: #087d71; background: #effbf8; font-size: .58rem; letter-spacing: .06em; }
.execution-mode i { width: 6px; height: 6px; display: block; border-radius: 50%; background: #0aa993; box-shadow: 0 0 0 3px rgba(10,169,147,.12); }
.topbar-action { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border: 1px solid #d9e1e8; border-radius: 999px; color: var(--ink-800); background: #fff; font-size: .61rem; font-weight: 700; text-decoration: none; transition: all .18s ease; }
.topbar-action:hover { border-color: #a9d9d0; color: var(--brand-teal); background: #f2fbfa; transform: translateY(-1px); }
.topbar-action--supplier { border: 0; color: var(--brand-teal); text-transform: uppercase; letter-spacing: .04em; }
.topbar-chevron { color: #8497a1; font-size: .8rem; }
.portal-user { max-width: 210px; gap: 8px !important; padding: 0 !important; }
.portal-user__avatar { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 28px; border-radius: 50%; color: #fff; background: var(--brand-teal-deep); font-size: .62rem; font-weight: 800; }
.portal-user__copy { display: grid; gap: 0; min-width: 0; }
.portal-user__copy strong { overflow: hidden; color: var(--ink-800); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.portal-user__copy small { color: var(--ink-500); font-size: .48rem; font-weight: 800; letter-spacing: .05em; }
.logout-link { min-height: 32px; padding: 0 9px; border-color: transparent; color: var(--ink-500); font-size: .6rem; }
.logout-link:hover { border-color: #f1c8cb; }
.portal-sidebar { inset: 0 auto 0 0; width: var(--sidebar-width); padding-top: var(--header-height); color: #fff; background: linear-gradient(180deg, #003f3a, #00352f); box-shadow: none; }
.sidebar-brand { min-height: 70px; display: flex; align-items: center; gap: 10px; padding: 15px 14px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); text-decoration: none; }
.sidebar-brand:hover { color: #fff; background: rgba(255,255,255,.04); }
.sidebar-brand__mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 5px; background: var(--brand-mint); }
.sidebar-brand__mark img { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) saturate(100%) invert(20%) sepia(19%) saturate(1272%) hue-rotate(131deg) brightness(86%); }
.sidebar-brand strong { display: block; font-size: .78rem; font-weight: 780; letter-spacing: -.02em; }
.sidebar-brand small { display: block; margin-top: 2px; color: #8cc6bb; font-size: .45rem; font-weight: 800; letter-spacing: .1em; }
.sidebar-intro { padding: 15px 17px 11px; border-bottom: 0; }
.sidebar-intro__eyebrow { color: #71b2a7; font-size: .53rem; }
.sidebar-intro strong { color: #eefaf7; font-size: .79rem; }
.portal-sidebar nav { padding: 7px 10px 18px; }
.portal-sidebar details { margin-bottom: 3px; }
.portal-sidebar summary { min-height: 36px; padding: 7px 9px; border-radius: 6px; color: #a3cdc5; font-size: .62rem; letter-spacing: .065em; }
.portal-sidebar summary:hover { color: #fff; background: rgba(255,255,255,.06); }
.portal-sidebar summary .ui-icon { color: #7ac9bc; }
.portal-sidebar summary::after { font-size: .72rem; }
.portal-sidebar ul { margin: 2px 0 6px; }
.portal-sidebar li a, .sidebar-logout { min-height: 33px; margin: 1px 0; padding: 7px 9px 7px 16px; border-radius: 5px; color: #81b5ab; font-size: .63rem; }
.portal-sidebar li a:hover, .portal-sidebar li a.is-active { color: #fff; background: #07564e; transform: none; }
.portal-sidebar li a.is-active { box-shadow: inset 3px 0 0 #b9f0e6; }
.portal-sidebar li a .ui-icon { color: #65a59a; font-size: .65rem; }
.sidebar-meta { margin: auto 12px 13px; padding: 11px 12px; border-color: rgba(255,255,255,.09); border-radius: 7px; background: rgba(255,255,255,.045); }
.sidebar-meta span { font-size: .58rem; }
.sidebar-meta small { font-size: .52rem; }
.sidebar-meta a { display: flex; justify-content: space-between; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.1); color: #9bd8ce; font-size: .55rem; text-decoration: none; }
.portal-content { margin-left: var(--sidebar-width); background: var(--canvas); }
.content-body { width: min(100%, 1280px); padding: 0 27px 55px; }
.breadcrumb-bar { min-height: 42px; margin-bottom: 26px; border-bottom: 1px solid #e7ecf3; font-size: .61rem; }
.breadcrumb-bar strong { color: #51717d; }
.portal-footer { margin-left: var(--sidebar-width); min-height: 66px; padding-block: 15px; border-color: #e6ebf2; font-size: .58rem; }
.portal-footer strong { font-size: .62rem; }
.section-kicker { margin-bottom: 6px; color: #0b8b7b; font-size: .58rem; letter-spacing: .13em; }
.page-heading { margin-bottom: 22px; font-size: clamp(1.5rem, 2.1vw, 2.15rem); letter-spacing: -.045em; }
.page-heading small { margin-top: .45rem; font-size: .72rem; }
.page-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.page-heading-row .page-heading { margin-bottom: 0; }
.action-button { border-radius: 8px; }
.action-button--solid { min-height: 40px; color: #fff !important; background: var(--brand-teal); box-shadow: 0 7px 14px rgba(0,74,67,.18); }
.action-button--solid:hover { background: #056158; box-shadow: 0 10px 18px rgba(0,74,67,.24); }
.action-button--primary { color: var(--brand-teal-deep); background: var(--brand-mint); }
.legacy-content--home { min-height: 316px; padding: 41px 44px; border: 1px solid #d9e8e7; border-radius: 16px; background: linear-gradient(118deg, #eef9f8 0%, #eef2fc 65%, #f5f8ff 100%); box-shadow: var(--shadow-sm); color: var(--ink-800); }
.legacy-content--home::after { border-color: rgba(0,85,76,.06); }
.home-hero__content { position: relative; z-index: 2; max-width: 650px; }
.legacy-content--home .hero-eyebrow { color: #0d7f75; }
.legacy-content--home .hero-eyebrow i { background: #0ca494; }
.legacy-content--home header h1, .legacy-content--home header .page-header { max-width: 570px; color: var(--ink-950); font-size: clamp(2.05rem, 4vw, 3.35rem); line-height: 1.02; }
.legacy-content--home header b[style*="green"] { color: #05877c !important; }
.legacy-content--home header b[style*="red"] { color: #da626f !important; }
.legacy-content--home .legacy-content__body { max-width: 560px; color: #5f7382; font-size: .79rem; line-height: 1.65; }
.legacy-content--home .legacy-content__body b { color: var(--ink-800); }
.legacy-content--home .hero-actions { margin-top: 21px; }
.legacy-content--home .action-button--secondary { border-color: var(--brand-teal); color: var(--brand-teal); background: rgba(255,255,255,.5); }

/* Booking-file action group: keep the safe penalty preview separate from the
   mutating cancellation action at every viewport width. */
.booking-result__actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
.booking-result__actions .booking-cancel-form { margin:0; }
.booking-result__actions .action-button--secondary { border-color:rgba(13,59,45,.25); color:var(--brand-teal-deep); background:#fffdf8; box-shadow:0 8px 18px rgba(13,59,45,.08); }
.booking-result__actions .action-button--secondary:hover { border-color:var(--brand-teal); color:var(--brand-teal-deep); background:#fff; }
.booking-note--warning { margin:1rem 0 0; padding:.8rem 1rem; border-left:3px solid #d99a2b; background:rgba(246,178,66,.12); color:#62451a; }
@media (max-width:560px) { .booking-result__actions .booking-cancel-form, .booking-result__actions .action-button { width:100%; } }

/* Booking search feedback: preserve the form layout while the server-side
   AVES request is in flight, then replace it with the real result cards. */
.booking-search-loading { margin-top: 1.1rem; padding: 1rem 1.15rem 1.1rem; border: 1px solid rgba(13,59,45,.12); border-radius: 14px; background: rgba(248,252,250,.92); }
.booking-search-loading > p { margin: .7rem 0 0; color: var(--ink-500); font-size: .72rem; font-weight: 650; }
.booking-skeleton { display: grid; grid-template-columns: minmax(120px,1.1fr) minmax(100px,1fr) minmax(130px,1.1fr) minmax(80px,.7fr); gap: 1rem; margin-top: .65rem; }
.booking-skeleton--heading { grid-template-columns: 8rem 5rem; margin-top: 0; }
.booking-skeleton span { display: block; height: 2.55rem; border-radius: 8px; background: linear-gradient(100deg, #e8efec 20%, #f7faf8 38%, #e8efec 56%); background-size: 220% 100%; animation: booking-skeleton-shimmer 1.35s ease-in-out infinite; }
.booking-skeleton--heading span { height: .7rem; }
@keyframes booking-skeleton-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
.booking-search-form .search-actions { align-items: center; }
.booking-search-form [data-booking-search-submit] { min-width: 9.2rem; transition: background-color .2s ease, color .2s ease, opacity .2s ease, transform .2s ease; }
.booking-search-form [data-booking-search-submit][aria-busy="true"] { color: rgba(255,255,255,.9); background: #4e9589; cursor: wait; transform: translateY(1px); }
.booking-search-form [data-booking-search-submit]:disabled { opacity: .95; }
@media (max-width: 720px) {
  .booking-skeleton { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; }
  .booking-skeleton span:nth-child(n+3) { display: none; }
}

/* Search states and expanded booking data stay in their own flow row. This
   avoids the loading/empty panel appearing between the filter controls and
   the result cards while keeping a predictable target for screen readers. */
.booking-results-region { min-width: 0; margin-top: 18px; }
.booking-results-region > .booking-search-loading { margin-top: 0; }
.booking-results-region > .operation-message { margin: 0 0 14px; }
.booking-results-region > .booking-results-state { margin-top: 0; }
.booking-results-region > .booking-results { margin-top: 0; }
.booking-results-state { min-height: 86px; padding: 20px 22px; background: rgba(255,255,255,.78); }
.booking-results-state--idle { border-style: solid; border-color: #dce7e2; box-shadow: var(--shadow-sm); }
.booking-results-state--empty { border-style: solid; border-color: #e5e8ef; background: rgba(255,255,255,.9); }

/* A compact visual summary makes passenger/document counts scannable in the
   expanded card. Every count gets one small, crisp SVG-mask icon. */
.booking-data-summary { grid-column: 1 / -1; min-width: 0; padding-top: 2px; }
.booking-data-summary > small { margin-bottom: 8px; }
.booking-data-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.booking-data-metric { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid rgba(213,226,220,.9); border-radius: 9px; background: rgba(255,255,255,.78); }
.booking-data-metric > span:last-child { min-width: 0; color: var(--ink-600); font-size: .62rem; line-height: 1.25; white-space: nowrap; }
.booking-data-metric > span:last-child strong { display: inline; margin-right: 2px; color: var(--ink-950); font-size: .72rem; }
.booking-count-icons { min-height: 17px; display: inline-flex; align-items: center; gap: 1px; flex: 0 0 auto; }
.booking-count-icon { width: 14px; height: 14px; flex: 0 0 14px; color: var(--brand-teal, #087d70); }
.booking-count-icons--services .booking-count-icon { color: #5d83b6; }
.booking-count-icons--people .booking-count-icon { color: #148d78; }
.booking-count-icons--documents .booking-count-icon { color: #9a6bb3; }
.booking-result__detail-section { grid-column: 1 / -1; min-width: 0; display: grid; gap: 9px; padding-top: 2px; }
.booking-result__detail-section h3 { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--ink-800); font-size: .75rem; font-weight: 760; }
.booking-result__detail-section h3 .ui-icon { width: 16px; flex-basis: 16px; color: var(--brand-teal); }
.booking-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr)); gap: 8px; }
.booking-detail-card { min-width: 0; display: grid; gap: 5px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.78); }
.booking-detail-card__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.booking-detail-card__heading strong { white-space: normal; }
.booking-detail-card__heading code { color: var(--ink-500); font-size: .62rem; }
.booking-detail-card p { margin: 0; color: var(--ink-600); font-size: .66rem; line-height: 1.45; }
.booking-detail-card > small { margin: 0; color: var(--ink-500); font-size: .61rem; text-transform: none; }
.booking-passenger-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.booking-passenger-chip { min-width: 180px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.78); }
.booking-passenger-chip > .ui-icon { width: 15px; flex-basis: 15px; color: #148d78; }
.booking-passenger-chip strong { white-space: normal; }
.booking-passenger-chip small { margin: 2px 0 0; font-size: .59rem; text-transform: none; }
.booking-document-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.booking-document-list li { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.78); }
.booking-document-list li > .ui-icon { width: 15px; flex-basis: 15px; color: #9a6bb3; }
.booking-document-list li > span:nth-child(2) { min-width: 0; flex: 1; }
.booking-document-list li strong { white-space: normal; }
.booking-document-list li small { margin: 2px 0 0; font-size: .59rem; text-transform: none; }
.booking-document-list li time { color: var(--ink-500); font-size: .62rem; white-space: nowrap; }
.booking-document-list li a { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--brand-teal); font-size: .63rem; font-weight: 720; text-decoration: none; white-space: nowrap; }
.booking-document-list li a:hover { border-color: #a9d9d0; background: #f2fbfa; }
.booking-document-action { margin: 0; }
.booking-document-action button { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--brand-teal); background: transparent; font-size: .63rem; font-weight: 720; cursor: pointer; white-space: nowrap; }
.booking-document-action button:hover { border-color: #a9d9d0; background: #f2fbfa; }
.booking-document-pending { color: var(--ink-500); font-size: .59rem; white-space: nowrap; }

@media (max-width: 720px) {
  .booking-data-metrics { grid-template-columns: 1fr; }
  .booking-data-metric { justify-content: flex-start; }
}

.ai-chat-launcher { position:fixed; right:1.25rem; bottom:1.25rem; z-index:50; display:flex; align-items:center; gap:.65rem; padding:.7rem .9rem; border:1px solid rgba(255,255,255,.4); border-radius:999px; color:#fff; background:linear-gradient(135deg,#0d3b2d,#137b55 70%,#d94141); box-shadow:0 14px 30px rgba(13,59,45,.25); }
.ai-chat-launcher__icon { width:1.45rem; height:1.45rem; background-color:#fff; }
.ai-chat-launcher strong,.ai-chat-launcher small { display:block; line-height:1.1; }
.ai-chat-launcher strong { font-size:.8rem; letter-spacing:.02em; }
.ai-chat-launcher small { margin-top:.18rem; opacity:.8; font-size:.68rem; }
@media (max-width:560px) { .ai-chat-launcher { right:.75rem; bottom:.75rem; } }
.home-hero__visual { position: absolute; inset: 0 0 0 auto; width: 39%; overflow: hidden; }
.hero-visual__glow { position: absolute; width: 260px; height: 260px; right: 40px; top: 27px; border-radius: 50%; background: radial-gradient(circle, rgba(149,231,216,.7), rgba(149,231,216,0)); filter: blur(2px); }
.hero-visual__window { position: absolute; right: 52px; top: 36px; width: 190px; height: 222px; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.7); border-radius: 12px; color: #0b746b; background: rgba(255,255,255,.68); box-shadow: 0 20px 40px rgba(56,116,135,.12); transform: rotate(5deg); animation: float-window 6s ease-in-out infinite; }
.hero-visual__window b { margin-bottom: 7px; font-size: .65rem; letter-spacing: .05em; }
.hero-visual__window i { width: 100%; height: 9px; display: block; border-radius: 4px; background: #c7ebe5; }
.hero-visual__window i:nth-of-type(2) { width: 76%; background: #d9e2fa; }
.hero-visual__window i:nth-of-type(3) { width: 90%; background: #f5d9dc; }
.hero-visual__window em { margin-top: auto; color: #75909b; font-size: .58rem; font-style: normal; line-height: 1.45; }
.hero-visual__ring { position: absolute; border: 1px solid rgba(8,129,115,.14); border-radius: 50%; }
.hero-visual__ring--one { width: 310px; height: 310px; right: -100px; top: -62px; }
.hero-visual__ring--two { width: 220px; height: 220px; right: -33px; bottom: -102px; }
@keyframes float-window { 0%,100% { transform: translateY(0) rotate(5deg); } 50% { transform: translateY(-7px) rotate(5deg); } }
.dashboard-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 13px 0 29px; }
.dashboard-metrics article { display: flex; align-items: center; gap: 11px; min-height: 74px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: var(--shadow-sm); }
.metric-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 9px; font-size: .8rem; font-weight: 800; }
.metric-icon--mint { color: #078979; background: #dff7f2; }
.metric-icon--blue { color: #4b6ec0; background: #e7edff; }
.metric-icon--violet { color: #7f5fb1; background: #f0e9ff; }
.dashboard-metrics article div { display: grid; gap: 1px; min-width: 0; }
.dashboard-metrics strong { color: var(--ink-800); font-size: .72rem; }
.dashboard-metrics small { color: var(--ink-500); font-size: .56rem; }
.metric-state { margin-left: auto; color: #0a9786; font-size: .56rem; }
.local-tools { margin-top: 0; }
.local-tools__heading h2 { font-size: 1.1rem; }
.local-tools__heading p { font-size: .67rem; }
.local-tools__links { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.local-tools__links a { min-height: 104px; grid-template-columns: 38px 1fr 15px; padding: 15px; border-radius: 11px; }
.local-tools__links .tool-icon { width: 38px; height: 38px; border-radius: 9px; }
.workspace-panel { margin-bottom: 18px; border-radius: 12px; box-shadow: var(--shadow-sm); }
.workspace-panel__heading { min-height: 64px; padding: 14px 17px; background: #fff; }
.workspace-panel__heading h2 { font-size: .81rem; }
.workspace-panel__heading p { font-size: .61rem; }
.panel-heading-icon { display: inline-grid; width: 23px; height: 23px; place-items: center; margin-right: 5px; border-radius: 6px; color: #07887c; background: #e3f7f3; font-size: .8rem; }
.panel-tag { padding: 5px 8px; border-color: #cae9e4; color: #078278; background: #effaf8; font-size: .5rem; }
.portal-form { padding: 18px 17px; }
.form-grid--search { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 15px 17px; }
.form-field { gap: 6px; }
.form-field label { color: #5f7681; font-size: .6rem; font-weight: 750; }
.form-field input, .form-field select { min-height: 39px; border-color: #e1e7f0; border-radius: 8px; padding: 7px 10px; color: var(--ink-800); background: #f8faff; font-size: .68rem; }
.form-field input::placeholder { color: #a1afbd; }
.form-actions { margin-top: 16px; }
.search-actions { align-items: center; }
.clear-filters, .text-action { margin-right: auto; color: var(--ink-600); font-size: .62rem; font-weight: 700; text-decoration: none; }
.clear-filters:hover, .text-action:hover { color: var(--brand-teal); }
.booking-results { margin-top: 24px; }
.results-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.results-heading .section-kicker { margin: 0 8px 0 0; }
.results-heading > div:first-child { display: flex; align-items: baseline; gap: 4px; }
.results-heading strong { color: var(--ink-500); font-size: .65rem; font-weight: 500; }
.results-view-toggle { display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.results-view-toggle span { width: 30px; height: 30px; display: grid; place-items: center; color: #81919e; font-size: .84rem; }
.results-view-toggle .is-active { color: #fff; background: var(--brand-teal); }
.booking-result { display: block; margin-bottom: 12px; border: 1px solid var(--line); border-left: 0; border-radius: 12px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; animation: rise-in .36s both; }
.booking-result:nth-of-type(3) { animation-delay: .05s; }
.booking-result:nth-of-type(4) { animation-delay: .1s; }
.booking-result:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.booking-result > summary { display: grid; grid-template-columns: 1.15fr 1.25fr 1.3fr .65fr; gap: 18px; padding: 19px 20px 16px; cursor: pointer; list-style: none; background: #fff; }
.booking-result > summary::before { display: none; }
.booking-card__head, .booking-card__meta, .booking-card__description, .booking-card__footer { min-width: 0; }
.booking-card__head { display: grid; grid-template-columns: 33px 1fr auto; align-items: start; gap: 9px; }
.booking-card__icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 8px; color: #0d8075; background: #ecf7fb; font-size: 1rem; }
.booking-result small { margin-bottom: 4px; color: #91a0ab; font-size: .52rem; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; }
.booking-result strong { color: var(--ink-800); font-size: .68rem; }
.booking-result em { color: #8496a1; font-size: .55rem; }
.status-badge { align-self: start; padding: 5px 9px; border-radius: 999px; font-size: .55rem !important; font-weight: 780 !important; white-space: nowrap; }
.status-badge--confirmed { color: #087f6d !important; background: #c8f2e9; }
.status-badge--optioned { color: #4264a6 !important; background: #dce8ff; }
.status-badge--quotation { color: #8663a1 !important; background: #f0e6fa; }
.status-badge--cancelled { color: #b74e55 !important; background: #ffe0e0; }
.booking-card__meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; }
.booking-card__meta span, .booking-card__description { display: grid; align-content: start; gap: 1px; }
.booking-card__description strong, .booking-card__description em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booking-card__footer { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 12px; }
.booking-card__footer > strong { font-size: .73rem; }
.booking-card__footer b { color: var(--brand-teal); font-size: .63rem; font-weight: 750; white-space: nowrap; }
.booking-result__body { grid-template-columns: 1.5fr 1fr 1fr; padding: 16px 20px; }
@keyframes rise-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.empty-state { margin-top: 18px; border-color: #dce5ee; border-radius: 12px; background: rgba(255,255,255,.7); }
.environment-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #cbe9e4; border-radius: 999px; color: #0a8075; background: #effbf8; font-size: .57rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.environment-chip i { width: 6px; height: 6px; display: block; border-radius: 50%; background: #10a890; }
.impersonate-workspace { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 17px; align-items: start; }
.impersonate-panel { margin: 0; }
.impersonate-search { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.input-with-icon { position: relative; }
.input-with-icon > span { position: absolute; left: 11px; top: 50%; color: #8b9ca7; font-size: .95rem; transform: translateY(-50%); }
.input-with-icon input { padding-left: 32px; }
.account-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--line); }
.account-suggestions > span { margin-right: 3px; color: var(--ink-500); font-size: .58rem; font-weight: 700; }
.account-chip { padding: 5px 8px; border: 1px solid #d9e5ee; border-radius: 999px; color: #5b7581; background: #f8fbfe; font-size: .56rem; cursor: pointer; transition: all .16s ease; }
.account-chip:hover { border-color: #a9d9d0; color: var(--brand-teal); background: #f0fbf8; transform: translateY(-1px); }
.impersonate-panel .form-actions { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }
.impersonate-guide { padding: 20px; border: 1px solid #d4ebe7; border-radius: 12px; background: linear-gradient(160deg, #eaf9f7, #f7fcfd); box-shadow: var(--shadow-sm); }
.guide-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #087d70; background: #c5f0e8; font-weight: 800; }
.impersonate-guide h2 { margin: 14px 0 6px; color: var(--ink-800); font-size: .84rem; }
.impersonate-guide p { margin: 0 0 15px; color: #6e8590; font-size: .62rem; line-height: 1.55; }
.guide-row { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid #d6ebe8; color: #78909a; font-size: .59rem; }
.guide-row strong { color: #087d70; font-size: .58rem; }
.login-page { background: #eef3fb; }
.login-page .site-header { display: none; }
.login-page .page-shell { min-height: 100vh; padding: 0; background: radial-gradient(circle at 9% 5%, rgba(186,241,232,.75), transparent 31%), linear-gradient(145deg, #f4f8ff, #eaf1fb); background-size: 145% 145%; animation: login-page-gradient 28s ease-in-out infinite alternate; }
.login-main { width: min(100%, 1060px); min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 36px 22px 26px; }
.login-layout { display: grid; grid-template-columns: 1fr 470px; overflow: hidden; border: 1px solid rgba(213,225,235,.9); border-radius: 18px; background: rgba(255,255,255,.68); box-shadow: 0 24px 70px rgba(37,69,101,.13); }
.login-intro { position: relative; isolation: isolate; min-height: 540px; display: flex; flex-direction: column; justify-content: space-between; padding: 42px 45px; overflow: hidden; color: #fff; background: linear-gradient(140deg, #003b36 3%, #005b54 52%, #00766b 100%); background-size: 180% 180%; animation: login-gradient-shift 24s ease-in-out infinite alternate; }
.login-intro::before { position: absolute; inset: -24%; z-index: -1; content: ""; background: radial-gradient(ellipse at 24% 22%, rgba(235,255,250,.42), transparent 35%), radial-gradient(ellipse at 76% 72%, rgba(116,231,211,.38), transparent 43%); filter: blur(18px); animation: login-gradient-glow 26s ease-in-out infinite alternate; pointer-events: none; }
.login-intro > * { position: relative; z-index: 1; }
.login-brand { display: inline-flex; align-items: center; gap: 9px; width: fit-content; color: #fff; text-decoration: none; }
.login-brand:hover { color: #fff; }
.login-brand__mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; background: var(--brand-mint); }
.login-brand__mark img { width: 25px; height: 25px; object-fit: contain; filter: brightness(0) saturate(100%) invert(20%) sepia(19%) saturate(1272%) hue-rotate(131deg) brightness(86%); }
.login-brand strong { display: block; font-size: .84rem; font-weight: 780; }
.login-brand small { display: block; margin-top: 2px; color: #9cd9d0; font-size: .48rem; font-weight: 800; letter-spacing: .1em; }
.login-intro__copy { max-width: 380px; }
.login-intro__copy .login-card__eyebrow { color: #9ee2d8; }
.login-intro__copy h2 { margin: 11px 0 14px; color: #fff; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.04; letter-spacing: -.055em; }
.login-intro__copy h2 span { color: #aee9df; }
.login-intro__copy p { margin: 0; color: #c4e1dd; font-size: .8rem; line-height: 1.7; }
.login-intro__footer { display: grid; gap: 5px; color: #c8e9e4; font-size: .62rem; }
.login-intro__footer span { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.login-intro__footer i { width: 7px; height: 7px; display: block; border-radius: 50%; background: #7de4b0; box-shadow: 0 0 0 4px rgba(125,228,176,.16); }
.login-intro__footer small { color: #8fc6be; font-size: .56rem; }
.login-card { align-self: stretch; border: 0; border-radius: 0; box-shadow: none; background: #fff; }
.login-card__header { padding: 58px 51px 23px; border: 0; text-align: left; }
.login-card__icon { width: 39px; height: 39px; margin: 0 0 16px; border-radius: 10px; color: #fff; background: var(--brand-teal); font-size: .98rem; }
.login-card__eyebrow { margin-bottom: 6px; color: #0a8a7d; font-size: .56rem; letter-spacing: .13em; }
.login-card h1 { font-size: 1.6rem; }
.login-card__header > div > small { display: block; margin-top: 7px; color: var(--ink-500); font-size: .66rem; }
.login-form { padding: 19px 51px 27px; }
.login-validation { margin-bottom: 10px; color: #b64f59; font-size: .62rem; }
.field-group + .field-group { margin-top: 14px; }
.field-group > label { position: static; width: auto; height: auto; display: block; margin-bottom: 6px; clip: auto; color: #58717c; font-size: .59rem; font-weight: 760; }
.field-control { min-height: 42px; grid-template-columns: 37px 1fr; border-color: #dce5ef; border-radius: 8px; background: #f8faff; }
.field-control span { border-right: 0; color: #8295a2; background: transparent; }
.field-control input { padding: 8px 10px; font-size: .68rem; }
.forgot-link { display: block; margin-top: 6px; color: #6b8490; font-size: .57rem; text-align: right; text-decoration: none; }
.login-button { width: 100%; min-height: 43px; margin-top: 20px; border-radius: 8px; color: #fff; background: var(--brand-teal); box-shadow: 0 7px 14px rgba(0,74,67,.2); }
.login-button:hover { background: #056158; }
.login-note { margin: 10px 0 0; color: #84949f; font-size: .57rem; text-align: center; }
.login-preview { display: flex; align-items: center; gap: 15px; margin: 0 51px 23px; padding: 13px 0 0; border-top: 1px solid #edf1f5; }
.login-preview > div { display: grid; gap: 3px; min-width: 0; }
.login-preview strong { color: #526b77; font-size: .59rem; }
.login-preview span { color: #8798a3; font-size: .54rem; line-height: 1.35; }
.login-preview form { margin-left: auto; flex: 0 0 auto; }
.login-preview__button { min-height: 31px; padding: 0 11px; border: 1px solid #c9ddd9; border-radius: 7px; color: #08786d; background: #f5fbfa; font-size: .57rem; font-weight: 760; cursor: pointer; }
.login-preview__button:hover { border-color: #89c6bd; background: #eaf7f4; }
.login-card__status { display: flex; align-items: center; gap: 6px; margin: 0 51px 38px; padding: 10px; border-radius: 7px; color: #7d909b; background: #f6f8fd; font-size: .54rem; }
.login-card__status .status-dot { width: 6px; height: 6px; flex-basis: 6px; background: #11ad91; box-shadow: none; }
.login-card__status strong { color: #66808a; font-size: .54rem; }
.login-card__status small { margin-left: auto; font-size: .5rem; }
.login-help { margin-top: 17px; color: #7a8c99; font-size: .62rem; }
.login-help a { color: var(--brand-teal); font-weight: 750; }
.site-footer { min-height: 55px; padding: 10px 20px; color: #8b9ba9; background: transparent; font-size: .55rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; padding: 0; margin: -1px; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes login-page-gradient {
  from { background-position: 0% 20%; }
  to { background-position: 100% 80%; }
}
@keyframes login-gradient-shift {
  from { background-position: 0% 30%; }
  to { background-position: 100% 70%; }
}
@keyframes login-gradient-glow {
  0% { transform: translate3d(-5%, -4%, 0) scale(.96); opacity: .48; }
  32% { transform: translate3d(22%, 14%, 0) scale(1.06); opacity: .72; }
  68% { transform: translate3d(35%, 45%, 0) scale(1.1); opacity: .58; }
  100% { transform: translate3d(4%, 64%, 0) scale(1.02); opacity: .7; }
}
@keyframes sidebar-ambient-light {
  0% { transform: translate3d(-8%, -5%, 0) scale(.92); opacity: .26; }
  34% { transform: translate3d(42%, 16%, 0) scale(1.12); opacity: .48; }
  68% { transform: translate3d(8%, 48%, 0) scale(1.02); opacity: .34; }
  100% { transform: translate3d(46%, 76%, 0) scale(1.16); opacity: .44; }
}

@media (prefers-reduced-motion: reduce) {
  .login-page .page-shell,
  .login-intro,
  .login-intro::before,
  .portal-sidebar::after { animation: none; }
}

@media (max-width: 1080px) {
  .portal-header__context { display: none; }
  .portal-header__brand-zone { min-width: 0; }
  .home-hero__visual { width: 33%; opacity: .72; }
  .hero-visual__window { right: 20px; }
}
@media (max-width: 820px) {
  :root { --header-height: 62px; --sidebar-width: 220px; }
  .portal-header { padding: 0 14px; }
  .nav-toggle-label { display: grid; }
  .portal-header__right { gap: 7px; }
  .topbar-action--supplier, .content-source { display: none; }
  .portal-user__copy { display: none; }
  .portal-user { max-width: none; }
  .portal-sidebar { padding-top: var(--header-height); }
  .page-heading-row { align-items: flex-start; flex-direction: column; gap: 12px; }
  .page-heading-row > .action-button { align-self: stretch; }
  .home-hero__visual { display: none; }
  .legacy-content--home { padding: 32px 28px; }
  .dashboard-metrics { grid-template-columns: 1fr; }
  .form-grid--search { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .booking-result > summary { grid-template-columns: 1fr 1fr; }
  .booking-card__description { display: none; }
  .booking-card__footer { align-items: flex-start; }
  .impersonate-workspace { grid-template-columns: 1fr; }
  .login-main { width: min(100%, 620px); }
  .login-layout { grid-template-columns: 1fr; }
  .login-intro { min-height: 270px; padding: 28px 30px; }
  .login-intro__copy { margin-top: 32px; }
  .login-intro__copy h2 { font-size: 2.1rem; }
  .login-intro__footer { display: none; }
}
@media (max-width: 560px) {
  .portal-header__right { gap: 4px; }
  .execution-mode { padding: 6px 7px; font-size: .52rem; }
  .logout-link span:last-child { display: none; }
  .content-body { padding-inline: 14px; }
  .legacy-content--home { padding: 27px 21px; }
  .legacy-content--home header h1, .legacy-content--home header .page-header { font-size: 2.1rem; }
  .form-grid--search { grid-template-columns: 1fr; }
  .search-actions { align-items: stretch; flex-direction: column-reverse; }
  .clear-filters { margin: 0; padding: 7px; text-align: center; }
  .booking-result > summary { grid-template-columns: 1fr; gap: 13px; padding: 15px; }
  .booking-card__meta { grid-template-columns: repeat(3,1fr); }
  .booking-card__footer { flex-direction: row; align-items: center; }
  .impersonate-search { grid-template-columns: 1fr; }
  .impersonate-search .action-button { width: 100%; }
  .login-main { padding: 17px 10px 12px; }
  .login-intro { min-height: 220px; padding: 24px 22px; }
  .login-intro__copy { margin-top: 27px; }
  .login-intro__copy h2 { font-size: 1.85rem; }
  .login-intro__copy p { font-size: .68rem; }
  .login-card__header { padding: 32px 24px 18px; }
  .login-form { padding-inline: 24px; }
  .login-preview { align-items: flex-start; flex-direction: column; margin-inline: 24px; }
  .login-preview form { width: 100%; margin-left: 0; }
  .login-preview__button { width: 100%; }
  .login-card__status { margin-inline: 24px; }
}

/* Corrective pass: stable responsive booking layouts and accessible view switch. */
.execution-mode--production { border-color: #f1d8c9; color: #a85d2a; background: #fff8f2; }
.form-field > span[data-valmsg-for] { display: block; min-height: 14px; font-size: .57rem; line-height: 1.2; }
.form-field > span.field-validation-valid { visibility: hidden; }
.form-field > span.field-validation-error { visibility: visible; color: #b64e5b; }
.form-grid--search .form-field { grid-template-rows: auto 39px 14px; align-content: start; }
.form-grid--search .form-field > span[data-valmsg-for] { min-height: 14px; }
.results-view-toggle button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; color: #81919e; background: #fff; font: inherit; font-size: .84rem; cursor: pointer; transition: color .16s ease, background .16s ease; }
.results-view-toggle button + button { border-left: 1px solid var(--line); }
.results-view-toggle button:hover { color: var(--brand-teal); background: #f2fbfa; }
.results-view-toggle button.is-active { color: #fff; background: var(--brand-teal); }
.results-view-toggle button.is-active:hover { color: #fff; background: #056158; }
.booking-result { --booking-accent: #13aa94; border-left: 4px solid var(--booking-accent); }
.booking-result--confirmed { --booking-accent: #14b79f; }
.booking-result--optioned { --booking-accent: #7797e4; }
.booking-result--quotation { --booking-accent: #a674c7; }
.booking-result--cancelled { --booking-accent: #e77a7d; }
.booking-results[data-view="list"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.booking-results[data-view="list"] .results-heading { grid-column: 1; }
.booking-results[data-view="list"] .booking-result { margin: 0; }
.booking-results[data-view="list"] .booking-result > summary { grid-template-columns: minmax(190px, 1.15fr) minmax(205px, 1.2fr) minmax(170px, 1fr) minmax(120px, .7fr); gap: 14px; align-items: center; padding: 16px 18px; }
.booking-results[data-view="list"] .booking-card__meta { display: grid; }
.booking-results[data-view="list"] .booking-card__description { display: grid; }
.booking-results[data-view="list"] .booking-card__footer { display: flex; }
.booking-results[data-view="compact"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.booking-results[data-view="compact"] .results-heading { grid-column: 1; }
.booking-results[data-view="compact"] .booking-result { margin: 0; border-radius: 8px; box-shadow: 0 2px 8px rgba(16,50,76,.04); }
.booking-results[data-view="compact"] .booking-result > summary { display: grid; grid-template-columns: minmax(180px,1.1fr) minmax(240px,1.4fr) minmax(190px,1.1fr) minmax(115px,.65fr); gap: 14px; align-items: center; min-height: 56px; padding: 9px 13px; }
.booking-results[data-view="compact"] .booking-card__head { align-items: center; }
.booking-results[data-view="compact"] .booking-card__meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.booking-results[data-view="compact"] .booking-card__description { display: grid; }
.booking-results[data-view="compact"] .booking-card__footer { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 12px; }
.booking-results[data-view="compact"] .booking-result__body { grid-column: 1 / -1; grid-template-columns: 1.5fr 1fr 1fr; padding: 13px 15px; }
.booking-results[data-view="compact"] .booking-result__body p { font-size: .59rem; }
.booking-results[data-view="list"] .booking-card__head { align-items: flex-start; }
.booking-results[data-view="list"] .booking-card__footer { align-items: flex-end; }
.booking-results[data-view="list"] .booking-result__body { grid-template-columns: 1.5fr 1fr 1fr; }

@media (max-width: 1140px) {
  .booking-results[data-view="list"] .booking-result > summary { grid-template-columns: minmax(175px, 1fr) minmax(160px, 1fr); gap: 14px 20px; }
  .booking-results[data-view="list"] .booking-card__description { grid-column: 1; }
  .booking-results[data-view="list"] .booking-card__footer { grid-column: 2; grid-row: 1 / span 2; }
  .booking-results[data-view="compact"] .booking-result > summary { grid-template-columns: minmax(165px,1.1fr) minmax(200px,1.25fr) minmax(110px,.6fr); }
  .booking-results[data-view="compact"] .booking-card__description { display: none; }
  .booking-results[data-view="compact"] .booking-card__footer { grid-column: 3; grid-row: 1; }
}

@media (max-width: 820px) {
  .portal-content, .portal-footer { margin-left: 0; }
  .page-heading-row { margin-bottom: 17px; }
  .search-panel .workspace-panel__heading { gap: 10px; }
  .booking-results[data-view="list"] .booking-result > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .booking-results[data-view="list"] .booking-card__meta { grid-column: 1; }
  .booking-results[data-view="list"] .booking-card__description { grid-column: 1; }
  .booking-results[data-view="list"] .booking-card__footer { grid-column: 2; grid-row: 1 / span 3; }
  .booking-results[data-view="list"] .booking-result__body { grid-template-columns: 1fr 1fr; }
  .booking-results[data-view="compact"] .booking-result > summary { grid-template-columns: minmax(150px,1.15fr) minmax(190px,1.2fr) minmax(95px,.55fr); gap: 10px; }
  .booking-results[data-view="compact"] .booking-card__meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .booking-results[data-view="compact"] .booking-card__meta > span:nth-child(3) { display: none; }
  .booking-results[data-view="compact"] .booking-card__footer { grid-column: 3; }
}

@media (max-width: 620px) {
  .content-body { padding-inline: 13px; }
  .form-grid--search { grid-template-columns: 1fr; }
  .booking-results[data-view="list"] .booking-result > summary { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .booking-results[data-view="list"] .booking-card__meta,
  .booking-results[data-view="list"] .booking-card__description,
  .booking-results[data-view="list"] .booking-card__footer { grid-column: 1; grid-row: auto; }
  .booking-results .booking-card__head > span:not(.booking-card__icon) { display: grid !important; }
  .booking-results .booking-card__meta > span { display: grid !important; }
  .booking-results[data-view="list"] .booking-card__footer { flex-direction: row; align-items: center; }
  .booking-results[data-view="list"] .booking-result__body { grid-template-columns: 1fr; }
  .booking-results[data-view="list"] .booking-result__body p { grid-column: 1; }
  .booking-results[data-view="compact"] .booking-result > summary { grid-template-columns: minmax(0,1fr) auto; gap: 8px; min-height: 48px; padding: 7px 10px; }
  .booking-results[data-view="compact"] .booking-card__meta { display: none; }
  .booking-results[data-view="compact"] .booking-card__description { display: none; }
  .booking-results[data-view="compact"] .booking-card__footer { grid-column: 2; grid-row: 1; }
  .booking-results[data-view="compact"] .booking-result__body { grid-template-columns: 1fr; }
  .search-actions { gap: 8px; }
}

/* A quiet status rail gives each practice a clear visual anchor without
   competing with the status badge or the content. */
.booking-result { position: relative; border-left: 0 !important; }
.booking-result::before { content: ""; position: absolute; z-index: 2; inset: 9px auto 9px 0; width: 4px; border-radius: 0 6px 6px 0; pointer-events: none; }
.booking-result--confirmed::before { background: linear-gradient(180deg, #14b79f 0%, rgba(20,183,159,.3) 100%); }
.booking-result--optioned::before { background: linear-gradient(180deg, #7797e4 0%, rgba(119,151,228,.28) 100%); }
.booking-result--quotation::before { background: linear-gradient(180deg, #a674c7 0%, rgba(166,116,199,.28) 100%); }
.booking-result--cancelled::before { background: linear-gradient(180deg, #e77a7d 0%, rgba(231,122,125,.28) 100%); }
.booking-results[data-view="compact"] .booking-result::before { inset-block: 6px; }
.operation-message { margin: 14px 0; padding: 11px 14px; border: 1px solid #cfe5e1; border-radius: 9px; color: #0b746a; background: #f0fbf8; font-size: .66rem; }
.operation-message--error { border-color: #f1d5d5; color: #a84f58; background: #fff7f7; }
.booking-cancel-form { margin-top: 8px; }
.action-button--danger { border: 0; color: #fff; background: #a84f58; }
.action-button--danger:hover { background: #873d47; }

/* Keep the supplier action and account controls on one responsive header row. */
.portal-header__right { min-width: 0; overflow: hidden; }
.portal-header__right > * { min-width: 0; }
.topbar-action--supplier,
.topbar-action--impersonate,
.portal-user,
.logout-link { flex: 0 1 auto; white-space: nowrap; }
.topbar-action--supplier,
.topbar-action--impersonate { overflow: hidden; text-overflow: ellipsis; }
.portal-user__copy { min-width: 0; overflow: hidden; }
.portal-user__copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1080px) {
  .portal-header { padding-inline: 14px; }
  .portal-header__right { gap: 8px; }
  .topbar-action--supplier { max-width: 128px; }
  .topbar-action--impersonate { max-width: 138px; }
  .portal-user { flex-basis: 155px; }
}

@media (max-width: 920px) {
  .portal-header__right { gap: 6px; }
  .topbar-action { padding-inline: 8px; }
  .topbar-action--supplier { max-width: 112px; }
  .topbar-action--impersonate { max-width: 120px; }
  .portal-user { flex-basis: 125px; }
}

/* Small visual refinements for the workspace chrome and reusable panels. */
.breadcrumb-bar { background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(246,250,252,.42)); }
.breadcrumb-bar a,
.portal-footer a { transition: color .16s ease, text-decoration-color .16s ease; }
.portal-footer { box-shadow: 0 -6px 18px rgba(19,55,72,.025); }
.portal-footer a { color: var(--brand-teal); text-underline-offset: 3px; }
.portal-footer a:hover { color: var(--brand-teal-deep); text-decoration: underline; }
.workspace-panel { transition: border-color .18s ease, box-shadow .18s ease; }
.workspace-panel:hover { border-color: #d3e3e8; box-shadow: 0 10px 26px rgba(16,50,76,.075); }

/* Brand harmony pass for the internal workspace. The home hero keeps its
   existing treatment; authenticated/content pages use a warmer neutral base
   so the green/red logo and status accents feel intentional rather than
   competing with a cool blue canvas. */
.portal-header {
  background: linear-gradient(105deg, rgba(255,255,255,.98), rgba(255,251,245,.96));
  border-bottom-color: #e9e1d7;
  box-shadow: 0 1px 12px rgba(53,73,59,.06);
}
.portal-sidebar {
  overflow: hidden;
  background:
    radial-gradient(circle at 110% 8%, rgba(214,41,50,.16), transparent 28%),
    linear-gradient(180deg, #17483b 0%, #10382f 52%, #0c2d2b 100%);
}
.portal-sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 14% 90%, rgba(93,190,102,.12), transparent 30%);
}
.portal-sidebar::after {
  content: "";
  position: absolute;
  top: 8%;
  left: -30%;
  width: 72%;
  height: 44%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(154, 229, 191, .11) 0%, rgba(117, 206, 168, .055) 42%, transparent 74%);
  filter: blur(28px);
  opacity: .5;
  mix-blend-mode: screen;
  animation: sidebar-ambient-light 26s ease-in-out infinite alternate;
}
.portal-sidebar > * { position: relative; z-index: 1; }
.sidebar-brand__mark {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 10px;
  background: linear-gradient(135deg, #fffdf4 0%, #e4f5cc 100%);
  box-shadow: 0 6px 15px rgba(0,0,0,.15);
}
.sidebar-brand__mark img {
  width: 29px;
  height: 29px;
  filter: none;
}
.portal-sidebar li a:hover,
.portal-sidebar li a.is-active { background: rgba(89,190,105,.16); }
.portal-sidebar li a.is-active { box-shadow: inset 3px 0 0 #f06b70; }
.content-source {
  border: 1px solid #eadfce;
  color: #657365;
  background: #fbf7ee;
}
.execution-mode {
  border-color: #cfe4c5;
  color: #08733f;
  background: #edf7e9;
}
.execution-mode i { background: #4da85c; box-shadow: 0 0 0 3px rgba(77,168,92,.13); }
.topbar-action { border-color: #e2dcd3; background: rgba(255,255,255,.8); }
.topbar-action:hover { border-color: #b8d49e; color: #08733f; background: #f3faed; }
.portal-page--internal .portal-content {
  background: linear-gradient(180deg, #f8f7f2 0%, #f4f6f0 54%, #f6f1ea 100%);
}
.portal-page--internal .breadcrumb-bar {
  border-bottom-color: #e9e0d4;
  background: linear-gradient(180deg, rgba(255,255,255,.56), rgba(251,247,239,.5));
}
.portal-page--internal .breadcrumb-bar strong { color: #53675b; }
.portal-page--internal .legacy-content:not(.legacy-content--home) {
  position: relative;
}
.portal-page--internal .legacy-content:not(.legacy-content--home)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: inherit;
  background: linear-gradient(90deg, #54b75e, #d62932 58%, #f0ad49);
  opacity: .78;
}
.workspace-panel {
  border-color: #e7dfd3;
  box-shadow: 0 5px 18px rgba(53,73,59,.065);
}
.workspace-panel__heading {
  background: linear-gradient(105deg, #fffdf8, #f6f8f2);
}
.workspace-panel:hover { border-color: #d4d9c8; box-shadow: 0 12px 28px rgba(53,73,59,.095); }
.portal-footer { border-color: #e9e0d4; box-shadow: 0 -6px 18px rgba(53,73,59,.035); }

/* Readable XML editor: the textarea stays fully editable while the aligned
   code layer supplies IDE-like token colours underneath it. */
.endpoint-workspace { max-width: 1120px; }
.xml-editor {
  position: relative;
  min-height: 370px;
  overflow: hidden;
  border: 1px solid #25443a;
  border-radius: 10px;
  background: #10231d;
}
.xml-editor__highlight,
.xml-editor__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 370px;
  margin: 0;
  padding: 15px;
  border: 0;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: .72rem;
  font-variant-ligatures: none;
  line-height: 1.6;
  letter-spacing: 0;
  tab-size: 2;
  white-space: pre;
  word-spacing: normal;
}
.xml-editor__highlight {
  position: absolute;
  inset: 0;
  overflow: auto;
  color: #dcebe4;
  pointer-events: none;
}
.xml-editor__highlight code { color: inherit; font: inherit; }
.xml-editor__input {
  position: relative;
  z-index: 1;
  display: block;
  resize: vertical;
  overflow: auto;
  color: #dcebe4;
  background: transparent;
  caret-color: #f5fff9;
}
.xml-form .xml-editor__input {
  border: 0;
  background: transparent;
}
.xml-form .xml-editor__input:focus {
  border: 0;
  box-shadow: none;
}
.xml-editor:focus-within {
  border-color: #55aa78;
  box-shadow: 0 0 0 3px rgba(46, 170, 95, .12);
}
.xml-editor.is-enhanced .xml-editor__input {
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.xml-editor__input::selection { background: rgba(131, 230, 171, .25); }
.xml-token-punctuation { color: #9fb9ad; }
.xml-token-tag { color: #78e08f; }
.xml-token-attribute { color: #8fc7ff; }
.xml-token-string { color: #f5c76b; }
.xml-token-comment { color: #7f9b91; font-style: italic; }
.xml-token-declaration { color: #c8a9f7; }

@media (max-width: 700px) {
  .endpoint-workspace { max-width: none; }
  .xml-editor__highlight,
  .xml-editor__input { padding: 13px; font-size: .68rem; }
}

/* Impersonation workspace: account selection is the primary task, while the
   current admin context and recent accounts stay visible without competing
   status copy or oversized pills. */
.impersonate-workspace { grid-template-columns: minmax(0, 1fr) 294px; gap: 20px; }
.impersonate-panel { overflow: hidden; border-color: #e5ddd1; background: #fffdf9; }
.impersonate-panel .workspace-panel__heading { min-height: 76px; padding: 17px 21px; background: linear-gradient(105deg, #fffdf8, #f6f8f2); }
.impersonate-panel .workspace-panel__heading h2 { display: flex; align-items: center; gap: 8px; font-size: .89rem; }
.impersonate-panel .workspace-panel__heading p { margin-left: 31px; color: #84918a; }
.impersonate-panel .panel-heading-icon { width: 27px; height: 27px; margin: 0; border: 1px solid #cfe4c5; border-radius: 8px; color: #2d8c4e; background: #eff8e9; }
.impersonate-panel .panel-heading-icon .ui-icon { width: 17px; flex-basis: 17px; }
.impersonate-session { display: flex; align-items: center; gap: 10px; margin: 17px 21px 0; padding: 11px 12px; border: 1px solid #e7e4d9; border-radius: 9px; background: #fcfbf6; }
.impersonate-session__icon { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 29px; border-radius: 8px; color: #2d8c4e; background: #eaf5e5; }
.impersonate-session__icon .ui-icon { width: 16px; flex-basis: 16px; }
.impersonate-session div { display: grid; gap: 2px; min-width: 0; }
.impersonate-session small { color: #8c9890; font-size: .52rem; }
.impersonate-session strong { overflow: hidden; color: #405a4a; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.impersonate-session__environment { margin-left: auto; color: #6a8a68; font-size: .53rem; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.impersonate-panel .portal-form { padding: 18px 21px 17px; }
.impersonate-search { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; }
.impersonate-search .action-button { min-height: 40px; align-self: end; }
.impersonate-search .action-button .ui-icon { width: 14px; flex-basis: 14px; }
.impersonate-search__hint { display: flex; align-items: center; gap: 5px; min-height: 16px; margin-top: 6px; color: #94a39a; font-size: .53rem; }
.impersonate-search__hint > .ui-icon { width: 13px; flex-basis: 13px; color: #77a477; }
.impersonate-search__hint i { width: 1px; height: .78rem; display: inline-block; margin-left: 1px; background: #4aa064; animation: impersonate-caret .82s steps(1, end) infinite; }
@keyframes impersonate-caret { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
.impersonate-panel .form-actions { margin-top: 15px; padding-top: 13px; border-top: 1px solid #eee9df; }
.impersonate-recent { min-width: 0; overflow: hidden; border: 1px solid #e5ddd1; border-radius: 12px; background: #fffdf9; box-shadow: 0 5px 18px rgba(53,73,59,.065); }
.impersonate-recent__heading { display: flex; align-items: center; gap: 9px; padding: 15px 15px 13px; border-bottom: 1px solid #eee9df; background: linear-gradient(105deg, #fffdf8, #f8f8f2); }
.impersonate-recent__icon { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 27px; border-radius: 8px; color: #8d7045; background: #f8efdb; }
.impersonate-recent__icon .ui-icon { width: 15px; flex-basis: 15px; }
.impersonate-recent__heading div { display: grid; gap: 2px; min-width: 0; }
.impersonate-recent__heading h2 { margin: 0; color: #405a4a; font-size: .75rem; }
.impersonate-recent__heading small { color: #94a098; font-size: .53rem; }
.impersonate-recent__heading > strong { min-width: 20px; margin-left: auto; color: #8d7045; font-size: .58rem; text-align: right; }
.impersonate-recent .account-suggestions { display: grid; gap: 5px; margin: 0; padding: 10px; border: 0; }
.account-chip { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 7px; width: 100%; min-height: 36px; padding: 5px 8px; border: 1px solid transparent; border-radius: 8px; color: #587060; background: #fbfaf6; font-size: .58rem; text-align: left; }
.account-chip .ui-icon { width: 17px; flex-basis: 17px; color: #79a477; }
.account-chip > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chip__arrow { color: #9aac9d; font-size: .72rem; opacity: 0; transform: translateX(-3px); transition: opacity .16s ease, transform .16s ease; }
.account-chip:hover, .account-chip:focus-visible { border-color: #d6e6ce; color: #267547; background: #f3faef; outline: none; }
.account-chip:hover .account-chip__arrow, .account-chip:focus-visible .account-chip__arrow { opacity: 1; transform: translateX(0); }
.impersonate-recent__empty { margin: 2px 4px 5px; color: #8d9b93; font-size: .57rem; line-height: 1.45; }

@media (max-width: 820px) {
  .impersonate-workspace { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .impersonate-search__hint i,
  .account-chip__arrow { animation: none; transition: none; }
}

/* Legacy-compatible account picker. The full active-account set remains
   visible and is filtered in place as the administrator types; the native
   browser datalist is intentionally not used so the surface stays styled. */
.impersonate-suggestions { margin-top: 11px; overflow: hidden; border: 1px solid #e7e2d8; border-radius: 9px; background: #fff; }
.impersonate-suggestions__header { display: flex; align-items: center; justify-content: space-between; min-height: 31px; padding: 0 10px; border-bottom: 1px solid #eee9df; color: #7c8b82; background: #fbfaf6; font-size: .53rem; font-weight: 760; letter-spacing: .04em; text-transform: uppercase; }
.impersonate-suggestions__header strong { min-width: 20px; color: #5d8e62; font-size: .57rem; text-align: right; }
.impersonate-suggestions__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; max-height: 216px; padding: 7px; overflow-y: auto; scrollbar-color: #c9dac7 transparent; scrollbar-width: thin; }
.account-option { display: grid; grid-template-columns: 21px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; min-height: 32px; padding: 4px 7px; border: 1px solid transparent; border-radius: 7px; color: #566b5d; background: #fcfbf8; font-size: .57rem; text-align: left; cursor: pointer; }
.account-option .ui-icon { width: 15px; flex-basis: 15px; color: #7ba477; }
.account-option > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-option__arrow { color: #9aab9d; opacity: 0; transform: translateX(-3px); transition: opacity .15s ease, transform .15s ease; }
.account-option:hover, .account-option:focus-visible, .account-option.is-active { border-color: #d6e5cf; color: #267547; background: #f2f9ef; outline: none; }
.account-option:hover .account-option__arrow, .account-option:focus-visible .account-option__arrow, .account-option.is-active .account-option__arrow { opacity: 1; transform: translateX(0); }
.suggestion-empty { grid-column: 1 / -1; padding: 11px 8px; color: #8b9890; font-size: .57rem; }
.impersonate-loading { display: flex; align-items: center; gap: 10px; margin: 0 21px 4px; padding: 11px 12px; border: 1px solid #d8e8d1; border-radius: 9px; color: #50715b; background: #f4faef; }
.impersonate-loading__spinner { width: 17px; height: 17px; flex: 0 0 17px; border: 2px solid #cae1c5; border-top-color: #44945a; border-radius: 50%; animation: impersonate-spin .72s linear infinite; }
.impersonate-loading div { display: grid; gap: 2px; }
.impersonate-loading strong { font-size: .59rem; }
.impersonate-loading small { color: #87988b; font-size: .53rem; }
@keyframes impersonate-spin { to { transform: rotate(360deg); } }
#impersonateForm[aria-busy="true"] .impersonate-suggestions { opacity: .58; pointer-events: none; }

@media (max-width: 620px) {
  .impersonate-suggestions__list { grid-template-columns: 1fr; max-height: 205px; }
  .impersonate-session { align-items: flex-start; flex-wrap: wrap; }
  .impersonate-session__environment { width: 100%; margin-left: 39px; }
}

@media (prefers-reduced-motion: reduce) {
  .impersonate-loading__spinner,
  .account-option__arrow { animation: none; transition: none; }
}

/* Final density pass: let the searchable account list use the full primary
   panel, keep the action on its own centered row, and make recent accounts a
   narrow shortcut rail. */
.impersonate-workspace { grid-template-columns: minmax(0, 1fr) 198px; gap: 20px; }
.impersonate-panel .workspace-panel__heading { min-height: 84px; padding: 20px 26px; }
.impersonate-panel .workspace-panel__heading h2 { font-size: 1rem; }
.impersonate-panel .workspace-panel__heading p { margin-top: 6px; margin-left: 35px; font-size: .66rem; }
.impersonate-panel .portal-form { padding: 23px 26px 20px; }
.impersonate-search { grid-template-columns: minmax(0, 1fr); gap: 0; }
.impersonate-search .action-button { justify-self: center; align-self: center; min-width: 220px; min-height: 46px; margin-top: 19px; padding-inline: 20px; font-size: .7rem; white-space: nowrap; }
.impersonate-search .form-field input { min-height: 45px; padding-inline: 13px 12px; font-size: .72rem; }
.impersonate-search__hint { min-height: 18px; margin-top: 7px; font-size: .58rem; }
.impersonate-suggestions { margin-top: 13px; }
.impersonate-suggestions__header { min-height: 36px; padding-inline: 13px; font-size: .58rem; }
.impersonate-suggestions__header strong { font-size: .62rem; }
.impersonate-suggestions__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; max-height: 300px; padding: 9px; }
.account-option { grid-template-columns: 25px minmax(0, 1fr) auto; gap: 8px; min-height: 38px; padding: 5px 9px; border-radius: 8px; font-size: .66rem; }
.account-option .ui-icon { width: 17px; flex-basis: 17px; }
.account-option__arrow { font-size: .78rem; }
.impersonate-recent { border-radius: 10px; }
.impersonate-recent__heading { gap: 7px; padding: 13px 12px 11px; }
.impersonate-recent__icon { width: 25px; height: 25px; flex-basis: 25px; }
.impersonate-recent__heading h2 { font-size: .7rem; }
.impersonate-recent__heading small { font-size: .5rem; }
.impersonate-recent__heading > strong { font-size: .56rem; }
.impersonate-recent .account-suggestions { gap: 4px; padding: 8px; }
.account-chip { grid-template-columns: 21px minmax(0, 1fr) auto; gap: 5px; min-height: 34px; padding: 4px 6px; font-size: .62rem; }
.account-chip .ui-icon { width: 15px; flex-basis: 15px; }
.impersonate-panel .form-actions { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 13px; border-top: 1px solid #eee9df; }
.impersonate-panel .form-actions .text-action { margin-right: 0; margin-left: auto; padding: 7px 11px; border: 1px solid #e4c7c8; border-radius: 7px; color: #8d404a; background: #fff5f4; font-size: .6rem; }
.impersonate-panel .form-actions .text-action:hover { border-color: #c9878b; color: #732d38; background: #fce9e8; }

@media (max-width: 1030px) {
  .impersonate-suggestions__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1350px) {
  .impersonate-suggestions__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .impersonate-workspace { grid-template-columns: 1fr; }
  .impersonate-recent { order: -1; }
  .impersonate-recent .account-suggestions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .impersonate-suggestions__list,
  .impersonate-recent .account-suggestions { grid-template-columns: 1fr; }
}

/* Final interaction pass: the navigation and endpoint panels open with a
   deliberate motion curve instead of the browser's abrupt disclosure. */
.portal-sidebar details > ul {
  display: block !important;
  max-height: 0;
  margin-block: 0 !important;
  overflow: hidden;
  opacity: 0;
  transition: max-height .34s cubic-bezier(.22, 1, .36, 1), margin .34s ease, opacity .2s ease;
}
.portal-sidebar details[open] > ul {
  max-height: 500px;
  margin-block: 4px 9px !important;
  opacity: 1;
}
.portal-sidebar summary::after {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: #85b3a6;
  content: "";
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), color .18s ease;
}
.portal-sidebar details:not([open]) summary::after { transform: rotate(-45deg) translate(-1px, -1px); }
.portal-sidebar summary:hover::after { color: #d6f1e9; }

@media (max-width: 820px) {
  .portal-sidebar { transition: transform .38s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
  .nav-scrim { transition: opacity .34s ease; }
  .portal-user { display: inline-flex !important; flex-basis: 142px; max-width: 142px; }
  .portal-user__copy { display: grid !important; max-width: 102px; }
  .portal-user__copy small { display: none; }
}

@media (max-width: 560px) {
  .portal-user { flex-basis: 112px; max-width: 112px; gap: 6px !important; }
  .portal-user__avatar { width: 25px; height: 25px; flex-basis: 25px; font-size: .55rem; }
  .portal-user__copy strong { font-size: .54rem; }
}

/* Supplier directory cards keep the Legacy hierarchy while using safe,
   deterministic initials instead of guessing at customer-owned logo assets. */
.supplier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 14px;
  padding: 20px;
}
.supplier-card {
  min-width: 0;
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid #e5e1d8;
  border-radius: 13px;
  background: linear-gradient(145deg, #fffefa, #f8faf6);
  box-shadow: 0 4px 13px rgba(53, 73, 59, .045);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.supplier-card:hover { border-color: #c6ddc5; box-shadow: 0 10px 24px rgba(53, 73, 59, .1); transform: translateY(-2px); }
.supplier-card__header { min-width: 0; display: flex; align-items: center; gap: 12px; }
.supplier-card__logo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  border: 1px solid #cfe4c8;
  border-radius: 14px;
  color: #176447;
  background: linear-gradient(145deg, #eff9e9, #dcefe1);
  font-size: .82rem;
  font-weight: 820;
  letter-spacing: .04em;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.58);
}
.supplier-card__logo--image { padding: 6px; object-fit: contain; background: #fff; }
.supplier-card__identity { min-width: 0; }
.supplier-card__identity h2 { margin: 0; overflow: hidden; color: var(--ink-950); font-size: .86rem; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.supplier-card__identity p { margin: 3px 0 0; overflow: hidden; color: var(--ink-500); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.supplier-card__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding-top: 13px; border-top: 1px solid #e6e9df; }
.supplier-card__details > div { min-width: 0; }
.supplier-card__details dt { margin-bottom: 5px; color: #7b8d82; font-size: .56rem; font-weight: 780; letter-spacing: .055em; text-transform: uppercase; }
.supplier-card__details dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supplier-card__details code { padding: 4px 7px; border: 1px solid #d8ead8; border-radius: 6px; color: #17643b; background: #eff8ee; font-size: .66rem; }
.supplier-card__link { display: inline-flex; align-items: center; gap: 7px; color: #14766d; font-size: .64rem; font-weight: 740; text-decoration: none; }
.supplier-card__link:hover { color: #a7242e; }
.supplier-card__link-icon { position: relative; width: 10px; height: 10px; display: inline-block; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.supplier-card__link-icon::after { position: absolute; top: 3px; left: 0; width: 8px; height: 1.5px; display: block; content: ""; background: currentColor; transform: rotate(-45deg); transform-origin: left center; }
.supplier-card__documents { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid #e6e9df; }
.supplier-card__documents h3 { margin: 0 0 6px; color: #7b8d82; font-size: .6rem; font-weight: 780; letter-spacing: .055em; text-transform: uppercase; }
.supplier-card__documents ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.supplier-card__documents li { padding: 4px 7px; border: 1px solid #e1e9df; border-radius: 6px; color: var(--ink-700); background: #f4f8f1; font-size: .68rem; line-height: 1.3; }

/* Softer IDE treatment for the XML workspace and explicit, readable accordions. */
.endpoint-workspace { max-width: 1120px; }
.panel-heading__eyebrow { display: block; margin-bottom: 3px; color: #0b8b7b; font-size: .56rem; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }
.action-button--secondary-light { border-color: #cfe4dd; color: #17675f; background: #f2fbf8; box-shadow: none; }
.action-button--secondary-light:hover { border-color: #a8d2c7; color: #0e574f; background: #e7f7f2; box-shadow: none; }
.api-sections { border-bottom: 1px solid #e7e4dc; }
.api-section { overflow: hidden; border: 0; border-bottom: 1px solid #e7e4dc; background: #fffefa; }
.api-section:last-child { border-bottom: 0; }
.api-section summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 20px; color: #24594f; background: #f4faf6; cursor: pointer; font-size: .7rem; font-weight: 760; list-style: none; transition: color .18s ease, background .18s ease; }
.api-section summary::-webkit-details-marker { display: none; }
.api-section summary:hover { color: #0d7468; background: #eef8f3; }
.api-section__index { min-width: 25px; color: #6b9a72; font-size: .57rem; font-weight: 820; letter-spacing: .04em; }
.api-section__chevron { width: 8px; height: 8px; flex: 0 0 8px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; color: #80a395; transform: rotate(45deg) translate(-1px, -1px); transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
.api-section[open] > summary .api-section__chevron { transform: rotate(225deg) translate(-1px, -1px); }
.api-section__body { max-height: 0; overflow: hidden; padding: 0 20px; color: var(--ink-600); font-size: .7rem; line-height: 1.7; opacity: 0; transition: max-height .32s ease, padding .32s ease, opacity .2s ease; }
.api-section > .api-section__body { display: block !important; }
.api-section[open] > .api-section__body { max-height: 360px; padding-block: 16px; opacity: 1; }
.api-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.api-facts > div { min-width: 0; padding: 10px 11px; border: 1px solid #e3ebe3; border-radius: 9px; background: #fbfdf9; }
.api-facts dt { margin-bottom: 3px; color: #7b8c83; font-size: .56rem; font-weight: 780; letter-spacing: .05em; text-transform: uppercase; }
.api-facts dd { margin: 0; overflow: hidden; color: #315e51; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.api-facts code { color: #17643b; font-size: .65rem; }
.api-note { margin: 13px 0 0; color: #7c8d84; font-size: .64rem; }
.xml-form { gap: 10px; }
.xml-form__heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.xml-form__heading > div { min-width: 0; }
.xml-form__heading label { display: block; }
.xml-form__heading p { margin: 3px 0 0; color: #7b8d84; font-size: .62rem; }
.text-action { border: 0; color: #14766d; background: transparent; font-size: .63rem; font-weight: 750; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.text-action:hover { color: #a7242e; }
.topbar-chevron { width: 7px; height: 7px; flex: 0 0 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; color: #8497a1; transform: rotate(45deg) translate(-1px, -1px); transition: transform .22s ease; }
.topbar-action:hover .topbar-chevron { transform: rotate(225deg) translate(-1px, -1px); }
.topbar-external { position: relative; width: 10px; height: 10px; display: inline-block; flex: 0 0 10px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.topbar-external::after { position: absolute; top: 3px; left: 0; width: 8px; height: 1.5px; display: block; content: ""; background: currentColor; transform: rotate(-45deg); transform-origin: left center; }
.xml-editor { min-height: 370px; border-color: #3d6558; border-radius: 13px; background: #172f29; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 5px 14px rgba(21, 55, 43, .08); }
.xml-editor__highlight, .xml-editor__input { min-height: 370px; padding: 17px; font-size: .73rem; line-height: 1.65; }
.xml-editor:focus-within { border-color: #65bd8b; box-shadow: 0 0 0 3px rgba(46,170,95,.12), inset 0 1px 0 rgba(255,255,255,.04); }
.api-section--result { margin-top: 0; border-top: 1px solid #e7e4dc; }
.api-section--result .api-section__body { padding-inline: 20px; }
.api-section--result[open] > .api-section__body { max-height: 760px; overflow-y: auto; }
.api-section--result .validation-success { margin: 0; }

@media (max-width: 700px) {
  .supplier-grid { grid-template-columns: 1fr; padding: 16px; }
  .api-facts { grid-template-columns: 1fr; }
  .xml-form__heading { align-items: flex-start; flex-direction: column; gap: 7px; }
  .text-action { align-self: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-sidebar details > ul,
  .portal-sidebar summary::after,
  .api-section__body,
  .api-section__chevron,
  .supplier-card { transition: none; }
}

/* Live request feedback: keep the action legible while the gateway call is
   in flight and present the returned XML as a quiet, IDE-like result. */
.xml-form__error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #edc4c7;
  border-radius: 8px;
  color: #8e3741;
  background: #fff4f3;
  font-size: .67rem;
}
.xml-form__error:empty { display: none; }
.xml-form .form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.xml-form [data-request-submit] {
  min-width: 178px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.xml-form [data-request-submit][aria-busy="true"],
.xml-form [data-request-submit][disabled] {
  color: #ecfff7;
  background: #5f9d8b;
  border-color: #5f9d8b;
  box-shadow: 0 5px 13px rgba(34, 114, 91, .14);
  cursor: wait;
  opacity: .92;
}
.request-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #5d8175;
  font-size: .63rem;
}
.request-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: inline-block;
  border: 2px solid rgba(255,255,255,.5);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: request-spin .75s linear infinite;
}
.request-loading .request-spinner { border-color: #cce3da; border-top-color: #4a8c78; }
@keyframes request-spin { to { transform: rotate(360deg); } }
.xml-response {
  margin-top: 14px;
  max-height: 560px;
  overflow: auto;
  border: 1px solid #d6e6df;
  border-radius: 10px;
  background: #f5faf7;
}
.xml-response pre {
  min-width: max-content;
  margin: 0;
  padding: 15px 17px;
  color: #24594f;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: .68rem;
  line-height: 1.62;
  white-space: pre;
}
@media (max-width: 700px) {
  .xml-form .form-actions { align-items: stretch; flex-direction: column; }
  .xml-form [data-request-submit] { width: 100%; }
  .request-loading { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .request-spinner,
  .xml-form [data-request-submit] { animation: none; transition: none; }
}

/* Polished design: use the supplied editorial artwork as a quiet visual
   anchor while keeping the portal content and actions fully readable. */
.legacy-content--home {
  min-height: 360px;
  padding: 48px 50px;
  border-color: rgba(191, 220, 214, .88);
  background: #0e4b42;
  box-shadow: 0 14px 30px rgba(27, 68, 62, .13);
}
.legacy-content--home::after {
  right: -120px;
  bottom: -150px;
  border-color: rgba(255, 255, 255, .08);
}
.legacy-content--home .home-hero__content {
  max-width: min(620px, 62%);
}
.legacy-content--home .hero-eyebrow,
.legacy-content--home header h1,
.legacy-content--home header .page-header,
.legacy-content--home .legacy-content__body,
.legacy-content--home .legacy-content__body b {
  color: #fff;
}
.legacy-content--home .hero-eyebrow { color: #b5eed8; }
.legacy-content--home .hero-eyebrow i { background: #71d3a8; }
.legacy-content--home .legacy-content__body { color: rgba(235, 250, 244, .84); }
.legacy-content--home .legacy-content__meta { position: relative; z-index: 1; border-top-color: rgba(255, 255, 255, .18); color: rgba(235, 250, 244, .68); }
.legacy-content--home header b[style*="green"] { color: #8ce1a3 !important; }
.legacy-content--home header b[style*="red"] { color: #ff8b82 !important; }
.legacy-content--home .action-button--primary {
  color: #083b34;
  background: #f6fff8;
  box-shadow: 0 8px 18px rgba(3, 44, 36, .22);
}
.legacy-content--home .action-button--primary:hover { background: #fff; }
.legacy-content--home .action-button--secondary {
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  background: rgba(255, 255, 255, .1);
}
.legacy-content--home .action-button--secondary:hover { background: rgba(255, 255, 255, .18); }
.legacy-content--home .home-hero__visual {
  position: absolute;
  inset: 0;
  width: 100%;
  display: block;
  overflow: hidden;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}
.legacy-content--home .home-hero__visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 54%;
  opacity: .9;
}
.legacy-content--home .hero-visual__veil {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(90deg, rgba(7, 57, 48, .98) 0%, rgba(7, 57, 48, .92) 28%, rgba(7, 57, 48, .55) 54%, rgba(7, 57, 48, .08) 100%);
}
.portal-page--internal .breadcrumb-bar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.portal-page--internal .breadcrumb-bar::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 0;
  width: min(270px, 38%);
  height: 40px;
  background: url("../images/generated/italy-landmarks.png") right bottom / contain no-repeat;
  opacity: .16;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 820px) {
  .legacy-content--home { min-height: 340px; padding: 38px 30px; }
  .legacy-content--home .home-hero__content { max-width: 74%; }
  .legacy-content--home .home-hero__visual img { object-position: 64% 54%; }
  .legacy-content--home .hero-visual__veil { background: linear-gradient(90deg, rgba(7, 57, 48, .98) 0%, rgba(7, 57, 48, .9) 48%, rgba(7, 57, 48, .35) 100%); }
}
@media (max-width: 560px) {
  .legacy-content--home { min-height: 0; padding: 30px 22px; }
  .legacy-content--home .home-hero__content { max-width: none; }
  .legacy-content--home .home-hero__visual img { object-position: 72% 54%; opacity: .42; }
  .legacy-content--home .hero-visual__veil { background: linear-gradient(90deg, rgba(7, 57, 48, .99), rgba(7, 57, 48, .78)); }
  .portal-page--internal .breadcrumb-bar::after { display: none; }
}

.api-reference-workspace { max-width: 1380px; overflow: hidden; }
.api-reference-header { align-items: center; }
.api-reference-header .panel-tag { white-space: nowrap; }
.api-reference-notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 16px 18px 0;
  padding: 12px 14px;
  border: 1px solid #d8e7e1;
  border-radius: 9px;
  color: #41615b;
  background: #f5faf7;
}
.api-reference-notice .ui-icon { flex: 0 0 18px; margin-top: 2px; color: #138575; }
.api-reference-notice p { margin: 0; font-size: .72rem; line-height: 1.55; }
.api-reference-layout {
  display: grid;
  grid-template-columns: minmax(210px, 270px) minmax(0, 1fr);
  gap: 16px;
  padding: 16px 18px 18px;
}
.api-reference-nav {
  align-self: start;
  max-height: min(72vh, 820px);
  overflow: auto;
  padding: 7px;
  border: 1px solid #e8e3d8;
  border-radius: 10px;
  background: #fbfaf6;
}
.api-reference-nav__group + .api-reference-nav__group { margin-top: 10px; padding-top: 11px; border-top: 1px solid #e8e3d8; }
.api-reference-nav__group h3 { margin: 3px 8px 5px; color: #153a35; font-size: .72rem; font-weight: 750; }
.api-reference-nav__group > p { margin: 0 8px 7px; color: #6c7d77; font-size: .63rem; line-height: 1.45; }
.api-reference-nav__group ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.api-reference-nav__group a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 7px;
  color: #405953;
  font-size: .68rem;
  text-decoration: none;
  transition: color .16s ease, background .16s ease;
}
.api-reference-nav__group a:hover,
.api-reference-nav__group a.is-active { color: #064d42; background: #e7f3ed; }
.api-reference-nav__group code { color: inherit; font-size: .68rem; }
.api-reference-risk {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid #f0d3c6;
  border-radius: 999px;
  color: #8a402d;
  background: #fff4ee;
  font-size: .54rem;
  font-weight: 760;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.api-reference-risk--large { padding: 6px 10px; font-size: .61rem; }
.api-reference-detail { min-width: 0; }
.api-reference-method-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 2px 12px; }
.api-reference-method-heading h2 { margin: 4px 0 0; color: #102f2b; font-size: 1.08rem; }
.api-reference-method-heading h2 code { color: inherit; font-size: inherit; }
.api-reference-description { margin: 0 2px 14px; color: #61736c; font-size: .74rem; line-height: 1.6; white-space: pre-line; }
.api-reference-warning { margin: 0 0 14px; padding: 10px 12px; border: 1px solid #f0d3c6; border-radius: 8px; color: #783f31; background: #fff6f1; font-size: .68rem; line-height: 1.5; }
.api-reference-schema { margin-top: 14px; overflow: hidden; border: 1px solid #e8e3d8; border-radius: 9px; background: #fff; }
.api-reference-schema__heading { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-bottom: 1px solid #eee9df; background: #fbfaf6; }
.api-reference-schema__heading > span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; color: #087466; background: #e5f3ec; font-size: .58rem; font-weight: 800; }
.api-reference-schema__heading h3 { margin: 0; color: #173d37; font-size: .75rem; }
.api-reference-schema__empty { margin: 0; padding: 14px; color: #6c7d77; font-size: .68rem; }
.api-reference-table-wrap { max-width: 100%; overflow: auto; }
.api-reference-table { width: 100%; border-collapse: collapse; font-size: .64rem; }
.api-reference-table th { position: sticky; top: 0; padding: 8px 10px; color: #60726c; background: #fff; font-size: .57rem; font-weight: 760; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.api-reference-table td { padding: 8px 10px; border-top: 1px solid #f0eee8; color: #52655f; line-height: 1.45; vertical-align: top; }
.api-reference-table tbody tr:hover { background: #fbfcfa; }
.api-reference-field { display: inline-block; padding-left: calc(5px + (var(--api-depth, 0) * 14px)); color: #143f36; white-space: nowrap; }
.api-reference-type { color: #576f86; font-family: "Cascadia Code", Consolas, monospace; font-size: .61rem; white-space: nowrap; }
.api-reference-rule { display: inline-block; margin: 1px 3px 2px 0; padding: 2px 5px; border-radius: 4px; color: #536760; background: #eef2ee; font-size: .53rem; white-space: nowrap; }
.api-reference-rule--required { color: #80551b; background: #fff3d9; }
.api-reference-values { margin-top: 4px; color: #6a8176; font-size: .6rem; overflow-wrap: anywhere; }
.api-reference-empty { display: grid; min-height: 250px; place-content: center; justify-items: center; padding: 24px; color: #71817a; text-align: center; }
.api-reference-empty .ui-icon { margin-bottom: 10px; color: #178577; }
.api-reference-empty h2 { margin: 0 0 5px; color: #193b34; font-size: .92rem; }
.api-reference-empty p { margin: 0; font-size: .68rem; }
@media (max-width: 900px) {
  .api-reference-layout { grid-template-columns: 1fr; }
  .api-reference-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); max-height: 350px; }
  .api-reference-nav__group + .api-reference-nav__group { margin-top: 0; padding-top: 0; border-top: 0; }
}
@media (max-width: 600px) {
  .api-reference-notice { margin-inline: 12px; }
  .api-reference-layout { padding: 12px; }
  .api-reference-header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .api-reference-method-heading { align-items: flex-start; flex-direction: column; }
  .api-reference-table { min-width: 660px; }
}