/*
Unified coalesced CSS
Based on branding.css + minimalist.css
*/

/* ========================================
   Root / theme tokens
======================================== */

:root {
 color-scheme: light only;

 --app-bg: #ffffff;
 --app-surface: #ffffff;
 --app-surface-muted: #f8fafc;
 --app-border: #dbe3ee;
 --app-border-strong: #c8d3e1;
 --app-text: #152334;
 --app-text-soft: #5d6b7c;
 --app-primary: #7f56d9;
 --app-primary-strong: #6941c6;
 --app-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
 --app-radius: 14px;
 --app-container: 1240px;
 --app-header-height: 72px;

 --brand-accent: #ff773c;
 --brand-dark: #454554;
 --brand-light: #dedeed;

 --white: #fff;
 --black: #000;

 --gray-050: #f9fafb;
 --gray-075: #f8fafc;
 --gray-100: #f5f5f5;
 --gray-150: #efefef;
 --gray-175: #efeff5;
 --gray-200: #eee;
 --gray-225: #e4e4e7;
 --gray-250: #e2e8f0;
 --gray-275: #dedede;
 --gray-300: #ddd;
 --gray-325: #d1d5db;
 --gray-350: #ccc;
 --gray-375: #c8d3e1;
 --gray-400: #bbb;
 --gray-450: #aaa;
 --gray-500: #999;
 --gray-550: #888;
 --gray-600: #777;
 --gray-650: #666;
 --gray-700: #555;
 --gray-750: #444;
 --gray-800: #374151;
 --gray-850: #334155;
 --gray-900: #282828;

 --blue-link: #10a;
 --blue-link-hover: #33f;
 --blue-soft: #8af;
 --blue-info: #60a5fa;
 --blue-info-bg: #eff6ff;
 --blue-info-text: #1d4ed8;
 --blue-strong: #08a;
 --blue-valid: #22c55e;
 --blue-valid-bg: #ecfdf3;
 --blue-valid-text: #166534;
 --blue-ui: #2d78ff;
 --blue-ui-soft: #eaf2ff;
 --blue-ui-border: #3b82f6;
 --blue-ui-hover: #e3eeff;
 --blue-mid: #99c;
 --blue-alert: #adf;
 --blue-panel: #afb7cc;
 --blue-table-hd: #eef;
 --blue-table-even: #dde;
 --blue-user-hover: #b8b8cc;
 --blue-tooltip: #ffa;

 --orange-warn: #fb923c;
 --orange-warn-bg: #fff7ed;
 --orange-warn-text: #9a3412;
 --orange-strong: #ffb400;
 --orange-soft: #fdb;
 --orange-row-hover: rgb(245, 184, 53);
 --orange-row-selected: rgb(241, 133, 74);

 --red: #f00;
 --red-dark: #a00;
 --red-soft: #fdd;
 --red-error: #ef4444;
 --red-error-bg: #fff1f1;
 --red-error-text: #991b1b;
 --red-deep: #c00;
 --red-invalid: #600;
 --red-badge: #ff0000;
 --red-session-error: #b42318;
 --red-pva-error: #b00020;

 --yellow: #ff0;
 --yellow-soft: #ffd;
 --yellow-row: #ffa;

 --green-good: #090;

 --purple-soft: #835fff;
 --purple-mid: #c34bae;
 --purple-dark: #638;

 --shadow-soft: 0 1px 2px rgba(2, 6, 23, 0.05);
 --shadow-sm: 1px 1px 3px rgba(0, 0, 0, 0.2);
 --shadow-md: 2px 2px 3px rgba(0, 0, 0, 0.2);
 --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.18);
 --shadow-panel: 0 18px 35px rgba(15, 23, 42, 0.12);
 --shadow-dark: 0 0 8px rgba(0, 0, 0, 0.6);
 --shadow-faint: 0 0 4px 0 #0000001f;
 --shadow-faint-lg: 0 0 10px 0 #0000001f;
 --shadow-faint-strong: 0 0 10px 0 #0000003f;
}

/* ========================================
   Global elements
======================================== */

html,
body {
 /*background: var(--app-bg);*/
 color: var(--app-text);
}

html {
}

body {
 font-size: 14px;
 margin: 0;
 padding: 0;
 background-size: cover;
 min-height: 100dvh;
 display: flex;
 flex-direction: column;
}

body.app-shell {
 min-height: 100dvh;
 display: flex;
 flex-direction: column;
}

img {
 border: 0;
}

span {
 min-height: 1px;
}

table {
 border-collapse: collapse;
}

td {
 vertical-align: top;
 font-size: 14px;
}

hr {
 border: 0;
 width: 95%;
 height: 1px;
 color: var(--brand-light);
 background-color: var(--brand-light);
}

hr.divider {
 border: 0;
 border-top: 1px solid var(--app-border);
 width: 100%;
 margin: 24px 0;
 height: auto;
 color: initial;
 background: none;
}

textarea {
 height: 90px;
 font-family: Arial, Sans;
 font-size: 14px;
 line-height: 1.4em;
}

input[type="text"],
input[type="password"] {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

input.text,
textarea,
select {
 font-size: 14px;
 padding: 1px;
 border-top: 1px solid var(--gray-600);
 border-left: 1px solid var(--gray-350);
 border-right: 1px solid var(--gray-350);
 border-bottom: 1px solid var(--gray-300);
 background-color: var(--white);
 resize: none;
}

select {
 position: relative;
 top: -2px;
}

label input[type="radio"] {
 position: relative;
 top: 2px;
}

a,
a:link {
 color: var(--app-primary);
}

a:hover,
a:link:hover {
 color: var(--app-primary-strong);
}

/* bugfix from original broken selector */
.entry-content a,
.entry-content a:link {
 color: var(--blue-link) !important;
}

/* ========================================
   App shell layout
======================================== */

.app-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(255, 255, 255, 0.94);
 backdrop-filter: blur(10px);
 border-bottom: 1px solid var(--app-border);
 box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.app-container {
  position:relative;
}

.app-container,
.app-main,
.app-page-shell,
.app-page-content,
.main-content {
 min-width: 0;
 width: 100%;
 max-width: none;
}

.app-header-inner,
.app-nav-inner,
.app-footer-inner {
 width: min(var(--app-container), calc(100% - 32px));
 margin: 0 auto;
}

.app-container {
 width: 100%;
 margin: 0;
}

.app-header-inner {
 min-height: var(--app-header-height);
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
}

.app-brand {
 display: flex;
 align-items: center;
 min-width: 0;
}

.app-logo-link {
 display: inline-flex;
 align-items: center;
 text-decoration: none;
}

.app-logo {
 display: block;
 max-height: 42px;
 width: auto;
 max-width: 220px;
}

.app-header-right {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 12px;
}

.app-user-menu {
 display: flex;
 align-items: center;
 gap: 8px;
}

.app-nav {
 border-top: 1px solid rgba(219, 227, 238, 0.8);
 background: var(--white);
}

.app-nav-inner {
 min-height: 54px;
 display: flex;
 align-items: center;
}

.app-main {
 flex: 1 1 auto;
 padding: 0 0; 
 min-width: 0;
}

.app-page-shell {
 background: transparent;
 border: 0;
 border-radius: 0;
 box-shadow: none;
 overflow: visible;
 min-width: 0;
}

.app-page-content {
 padding:24px;
 min-width: 0;
 width: 100%;
}
body.Onboarding .app-page-content {
  padding:0;
}

.app-page-content.no-page-title {
 padding-top: 0;
}

.app-title-row {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 16px;
 margin-bottom:0;
}

body.Onboarding .app-title-row
{
  margin-left:24px;
}

.app-page-title {
 margin: 0;
 font-size: 2rem;
 line-height: 1.15;
 letter-spacing: -0.02em;
 color: var(--app-text);
}

.app-footer {
 border-top: 1px solid var(--app-border);
 background: transparent;
}

.app-footer-inner {
 min-height: 72px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 color: var(--app-text-soft);
 font-size: 0.95rem;
}

.app-footer-brand strong {
 color: var(--app-text);
}

/* ========================================
   Legacy layout containers
======================================== */

.topSurround {
 min-height: calc(100vh - 2em - 24px);
 padding-bottom: 16px;
}

.headerContent {
 margin: 0;
 border-bottom: 3px solid var(--brand-dark);
 background-color: var(--white);
 padding: 0;
}

.prebody {
 background-color: var(--white);
 border-bottom: 2px solid var(--brand-dark);
 height: 2px;
 overflow: hidden;
}

body.Start .bodyContent {
 max-width: 500px;
 margin-top: 80px;
}

.bodyContent {
 margin: 16px auto 0;
 width: 95%;
 max-width: 1640px;
}

.footerContent {
 padding: 0 0 4px;
 border-top: 4px solid var(--brand-dark);
 background-color: var(--white);
}

.header {
 min-height: 98px;
 position: relative;
 width: 95%;
 max-width: 1640px;
 margin: 0 auto;
}

.headerLogo {
 width: 256px;
 padding: 8px 0 4px;
}

.footer {
 text-align: center;
 color: #111;
}

.footerCredit {
 color: var(--gray-650);
 line-height: 2em;
}

.sectionContent {
 padding: 0;
 background: transparent;
 border-bottom-left-radius: 4px;
 border-bottom-right-radius: 4px;
}

.contentWrapper,
.site,
.site-content,
.content-area,
.inside-article {
 background: transparent !important;
}

.entry-content {
 padding: 0 !important;
 min-width: 0;
}

#title-flex > .flex-grow {
 min-width: 0;
}

.inside {
 margin: 4px 60px;
}

.para {
 padding: 6px 16px 16px;
}

/* ========================================
   Utilities
======================================== */

.clearer {
 clear: both;
}

.ral {
 text-align: right;
}

.cal {
 text-align: center;
}

.noSel {
 cursor: default;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 user-select: none;
}

.sel {
 cursor: text;
 -webkit-touch-callout: text;
 -webkit-user-select: text;
 -khtml-user-select: text;
 -moz-user-select: text;
 -ms-user-select: text;
 -o-user-select: text;
 user-select: text;
}

.flex-grow {
 flex-grow: 1 !important;
}

.flex-row-reverse {
 flex-direction: row-reverse;
}

.justify-end {
 justify-content: flex-end !important;
}

.visibleOnHoverOnly {
 color: rgba(255, 255, 255, 0.1) !important;
}

.visibleOnHoverOnly:hover {
 color: var(--blue-link) !important;
}

.sizeSanitizer {
 position: relative;
 overflow: hidden;
 white-space: nowrap;
}

th div.sizeSanitizer {
 padding: 8px 5px !important;
 border-left: solid 1px lightgray;
}

th:first-child div.sizeSanitizer {
 border-left: solid 1px transparent;
}

.loading {
 font-weight: normal;
 font-style: italic;
 font-size: 13px;
 text-align: center;
 display: block;
}

.noData {
 padding: 16px;
 margin: 8px;
 border: 1px solid var(--gray-300);
 text-align: center;
 background-color: var(--gray-150);
}

.noData .primary {
 font-size: 16px;
}

.noData .secondary {
 font-style: italic;
}

.miniDesc {
 font-size: 0.8em;
 color: var(--gray-650);
 font-style: italic;
 margin: 4px 8px;
}

.ordinalAnchor {
 position: relative;
 top: -4px;
 font-weight: bold;
 margin-left: 4px;
 text-decoration: none;
}

.vert {
 display: inline-block;
 margin-left: 12px;
 height: 26px;
 border-right: 2px solid var(--brand-dark);
 margin-right: 12px;
 vertical-align: middle;
}

.page-title {
 font-size: 18px;
 font-weight: bold;
 margin: 16px 0 4px;
}

.header-wrap {
 position: relative;
}

/* ========================================
   Alerts / messages / status
======================================== */

.alert {
 width: 100%;
 border-radius: 12px !important;
 padding: 12px 14px !important;
 border-width: 1px !important;
 border-style: solid !important;
 margin: 0 0 16px 0 !important;
 text-align: center !important;
}

div.error,
.error {
 background: var(--red-error-bg) !important;
 color: var(--red-error-text) !important;
 border-color: var(--red-error) !important;
}

div.error {
 border: 2px solid var(--brand-dark);
 margin: 8px;
 padding: 4px;
 text-align: center;
}

div.message,
.message {
 background-color: var(--orange-soft);
 margin-top: 12px;
 padding: 4px 8px;
}

div.message {
 background-color: var(--brand-light);
 border: 2px solid var(--brand-dark);
 margin: 8px;
 padding: 4px 0;
 text-align: center;
 border-radius: 8px;
}

.success {
 background: var(--blue-valid-bg) !important;
 color: var(--blue-valid-text) !important;
 border-color: var(--blue-valid) !important;
}

.warning {
 background: var(--orange-warn-bg) !important;
 color: var(--orange-warn-text) !important;
 border-color: var(--orange-warn) !important;
}

.info {
 background: var(--blue-info-bg) !important;
 color: var(--blue-info-text) !important;
 border-color: var(--blue-info) !important;
}

.staticContentAnnotation {
 width: 98%;
 background-color: var(--brand-light);
 border-top: 2px solid var(--brand-dark);
 border-bottom: 1px solid var(--brand-dark);
 margin: 8px 0;
 padding: 4px 1%;
 text-align: right;
}

.processingPanel {
 display: inline-block;
 margin: 0 auto;
 width: 300px;
 font-size: 1rem !important;
 vertical-align: middle;
}

.processingPanel::before {
 content: "";
 display: inline-block;
 vertical-align: middle;
 width: 32px;
 height: 32px;
 border-radius: 50%;
 border-top: 6px solid var(--orange-strong);
 border-right: 6px solid var(--brand-accent);
 border-bottom: 6px solid var(--purple-soft);
 border-left: 6px solid var(--purple-mid);
 animation: spin 2s infinite linear;
 margin-right: 12px;
}

.processingPanel::after {
 content: "...";
 color: var(--gray-550);
 animation: ellipsis 1.5s infinite linear;
}

.Install .processingPanel {
 display: block;
 margin: 32px auto;
 padding: 16px 0 8px 32px;
 background-color: rgba(0, 0, 0, 0.1);
 border-radius: 8px;
 border: 1px solid var(--gray-550);
 box-shadow: var(--shadow-md);
}

.progressBarOuter {
 position: relative;
 float: right;
 width: 300px;
 height: 18px;
 vertical-align: middle;
 border: 2px solid var(--brand-dark);
 border-radius: 5px;
 background-color: var(--gray-150);
 overflow: hidden;
}

.progressBarInner {
 position: absolute;
 width: 0%;
 height: 100%;
 left: 0;
 top: 0;
 background-color: var(--brand-dark);
 overflow: hidden;
}

.progressBarText {
 text-align: center;
 position: absolute;
 top: 0;
 left: 0;
 width: 296px;
}

.progressBarText.overlay {
 color: var(--gray-150);
}

.progressBarText.underlay {
 color: var(--brand-dark);
}

.prepopProgress {
 border: 1px solid var(--gray-300);
 padding: 12px 16px;
 background-color: var(--gray-150);
}

.prepopProgress .barOuter {
 display: block;
 position: relative;
 height: 18px;
 border: 1px solid var(--gray-500);
}

.prepopProgress .barInner {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 height: 18px;
 border-right: 1px solid var(--gray-500);
 background-color: #77f;
 transition: 0.4s width;
}

.prepopProgress .status {
 margin: 0 12px 8px;
 text-align: center;
 font-weight: bold;
}

/* ========================================
   Start / login / generic app blocks
======================================== */

.userChoice {
 display: inline-block;
 width: 140px;
 height: 65px;
 vertical-align: middle;
 line-height: 65px;
 text-align: center;
 border: 1px solid var(--gray-450);
 margin: 24px 16px;
 cursor: pointer;
 background-color: var(--gray-300);
}

.userChoice:hover {
 background-color: var(--gray-550);
 color: var(--yellow-soft);
}

.validIdentities {
 text-align: center;
}

.loginBox {
 width: 80%;
 margin: 16px auto;
 text-align: center;
}

.loginTableField {
 text-align: right;
}

.optionList a {
 color: var(--black) !important;
 background-color: var(--gray-300);
 display: block;
 border: 1px solid var(--gray-550);
 font-style: normal;
 margin: 24px auto;
 width: 80%;
 height: 65px;
 line-height: 65px;
 vertical-align: center;
 text-align: center;
 text-decoration: none;
}

.optionList a:hover {
 background-color: var(--gray-550);
 color: var(--yellow-soft) !important;
}

.userNote {
 color: var(--brand-dark);
 float: right;
 padding: 8px 10px 4px;
 line-height: 25px;
}

.logoutBtn {
 float: right;
 margin-top: -4px;
 margin-left: 6px;
}

#logoutProgressInner {
 border-right: 1px solid var(--gray-450);
 background-color: var(--blue-soft);
 margin: 0;
 padding: 0;
 height: 16px;
}

#logoutProgressOuter {
 border: 2px solid var(--gray-650);
 height: 16px;
 width: 96%;
 margin: 10px auto;
 background-color: var(--white);
 padding: 0;
 overflow: hidden;
}

/* ========================================
   Tabs / regions / dashboard
======================================== */

.tabset {
 display: flex;
 cursor: pointer;
 margin-left: 0;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 user-select: none;
 width: fit-content;
}

.tabset .tab {
 transition: all 0.2s ease-in-out;
 position: relative;
 display: inline-block;
 font-weight: 500;
 padding: 5px 8px;
 text-decoration: none;
 cursor: pointer;
}

.tabset .tab.selected,
.tabset .tab:hover {
 background-color: var(--gray-150);
}

.tabset .tab.selected {
 color: var(--black);
}

.tabContents {
 border: 3px solid var(--gray-150);
 margin-bottom: 6px;
 overflow-y: auto;
 max-height: 60vh;
}

.tabContents .tabContent {
 background-color: var(--white);
 color: var(--black);
 display: none;
 padding: 8px;
}

.tabContents .tabContent.selected {
 display: block;
 max-height: 60vh;
}

.mini .tabContent {
 min-height: inherit;
}

.tabContent .field {
 margin-bottom: 1px;
}

.topSection {
 padding: 0 1% 24px;
}

.regionRow {
 clear: both;
}

.region {
 background: var(--white);
 border-radius: 10px;
 margin: 0 1%;
 overflow: hidden;
 vertical-align: top;
 white-space: normal;
 width: 60vw;
 display: flex;
 flex-direction: column;
}

.region .region {
 background-color: #dcc;
}

.region .title {
 font-size: large;
 font-weight: bold;
 padding: 25px 30px 10px;
}

.dashboardElements {
 text-align: center;
 border: 3px solid var(--brand-dark);
 margin: 4px;
 padding: 4px;
 background-color: var(--blue-panel);
}

.dashboardElements > * {
 text-align: left;
}

.dashboardElements .objectListingTable tr:hover td {
 background-color: var(--gray-450) !important;
 transition: background 0.2s;
}

.dashboardElements .key {
 width: 16px;
 height: 16px;
 margin: 1px auto;
 border: 1px solid var(--black);
 border-radius: 4px;
}

/* ========================================
   Tables
======================================== */

.centreTable {
 margin: 8px auto;
}

.centreTable td {
 padding: 8px 10px;
}

.centreTable tr.head td {
 background-color: var(--gray-300) !important;
 color: var(--black) !important;
 font-weight: 400;
 text-align: center;
 border: 1px solid var(--white);
 border-bottom: 1px solid var(--gray-650);
 cursor: normal !important;
}

.centreTable tr.even td {
 background-color: var(--gray-200);
}

tr.underlined td {
 border-bottom: 2px solid var(--gray-650);
}

.searchResults .centreTable tr:hover td {
 cursor: pointer;
 background-color: var(--gray-550);
 color: var(--white);
}

.sensibleTable {
 width: 100%;
 margin-bottom: 12px;
}

.sensibleTable td {
 padding: 4px;
}

.sensibleTable tr.hd td,
.sensibleTable tr.hd2 td {
 font-weight: 400;
 border-bottom: 1px solid var(--gray-750);
 background-color: var(--blue-table-hd);
}

.sensibleTable tr.even td {
 background-color: var(--blue-table-even);
}

.dataColumnLeft {
 border-left: 1px solid var(--gray-500);
 padding-left: 8px;
 text-align: right;
}

.dataColumnRight {
 border-right: 1px solid var(--gray-500);
 padding-right: 8px;
}

table.subscriptions td {
 padding: 5px;
 text-align: center;
}

.aiResultTable .header td {
 font-size: 14px;
 font-weight: bold;
 text-align: center;
}

.aiResultTable td.est {
 color: var(--green-good);
 text-align: right;
}

.aiResultTable td.pred {
 color: var(--blue-strong);
 text-align: right;
}

.aiResultTable .productRow {
 border-top: 0 hidden var(--white);
}

.aiResultTable tr td {
 border-bottom: 1px dotted #dededf;
 padding: 8px 4px;
 vertical-align: middle;
}

.videoProducersTable tr.hd td {
 font-weight: bold;
}

.videoProducersTable tr:not(.hd) td:first-child {
 font-weight: bold;
 color: var(--purple-dark);
}

/* ========================================
   Forms / fields / object data
======================================== */

.objectDataTable {
 width: 100%;
}

.objectDataTable select,
.objectDataTable input[type="text"],
.objectDataTable input[type="password"],
.objectDataTable textarea,
.objectDataTable .combo {
 width: 100%;
}

.objectDataTable .combo {
 margin-top: -4px;
 border: 1px solid var(--gray-450);
 margin-right: 8px;
}

.objectDataTable button.emailable,
.objectDataTable button.dialable,
.objectDataTable button.textable,
.objectDataTable button.webable {
 position: relative;
 top: -6px;
 height: 30px;
 width: 32px;
 padding: 0;
}

.objectDataTable button.dialable {
 background: var(--white) url("/images/phone.png") no-repeat 50% 50%;
}

.objectDataTable button.textable {
 background: var(--white) url("/images/txt.png") no-repeat 50% 50%;
}

.objectDataTable button.webable {
 background: var(--white) url("/images/web.png") no-repeat 50% 50%;
}

.objectDataTable button.emailable {
 background: var(--white) url("/images/email.png") no-repeat 50% 50%;
}

.objectDataTable button.emailable:hover,
.objectDataTable button.textable:hover,
.objectDataTable button.webable:hover,
.objectDataTable button.dialable:hover {
 background-color: var(--brand-dark);
}

.objectDataTable .flr {
 text-align: right;
 width: 35px;
 float: right;
}

.objectDataTable .fll {
 margin-right: 38px;
}

.objectDataTable .flr2 {
 text-align: right;
 width: 70px;
 float: right;
}

.objectDataTable .fll2 {
 margin-right: 73px;
}

.objectDataTable textarea {
 height: 118px;
 border: 1px solid lightgray;
 padding: 4px;
 border-top-left-radius: 6px;
 border-bottom-left-radius: 6px;
 box-shadow: var(--shadow-faint) !important;
}

.objectDataTable input[type="file"] {
 width: 190px;
}

.objectDataTable input[type="text"].sliderValue {
 width: 64px;
 text-align: center;
 background-color: var(--gray-200);
 margin-right: 32px;
}

.objectDataTable .ui-slider {
 display: inline-block;
 width: 360px;
}

.objectDataTable div.field {
 clear: both;
}

div.field.required .label,
div.field.required .labelFull {
 color: var(--red-deep);
}

.objectDataTable div.label {
 float: left;
 padding: 2px;
 width: 200px;
 display: inline-block;
 vertical-align: top;
}

.objectDataTable div.value {
 margin-left: 202px;
 vertical-align: top;
 padding: 2px;
}

.objectDataTable div.labelValue {
 padding-left: 32px;
}

.field textarea {
 resize: vertical;
}

.ui-autocomplete-input.invalid {
 color: var(--red-invalid);
 background-color: var(--red-soft);
}

#jobSelectContainer .combo {
 display: block;
 margin: 8px 16px 8px 30px;
 width: 75%;
}

.notes > div {
 padding: 8px 12px;
}

.pageElementsListing .field {
 padding: 8px 0;
 margin: 8px;
 border-top: 1px solid #dedede;
}

.configSettings .parameterLine {
 background-color: #f7f4ff;
 padding: 4px 12px;
}

.configSettings .parameterLine:nth-child(2n) {
 background-color: var(--white);
}

.configSettings .parameterLine div {
 display: inline-block;
 vertical-align: top;
}

.configSettings .parameterLine .parameterKey {
 width: 200px;
}

.configSettings .parameterLine .parameterValue {
 width: 70%;
 min-width: 320px;
}

.configSettings .parameterLine .parameterValue input[type="text"],
.configSettings .parameterLine .parameterValue textarea {
 width: 100%;
 box-sizing:border-box;
}

/* ========================================
   Cross table / tree / list panes
======================================== */

.crossTable {
 height: 120px;
 overflow-y: scroll;
 overflow-x: auto;
 border: 2px solid var(--gray-450);
 border-top-left-radius: 6px;
 border-bottom-left-radius: 6px;
 padding: 4px;
}

.crossTable .children {
 margin-left: 10px;
 padding-left: 21px;
 position: relative;
}

.crossTable .children::after {
 position: absolute;
 content: "";
 border-left: 1px solid var(--gray-750);
 left: 0;
 width: 1px;
 top: 0;
 bottom: 10px;
}

.crossTable .line {
 position: relative;
 white-space: nowrap;
}

.crossTable .children .line::before {
 position: absolute;
 content: "";
 border-top: 1px solid var(--gray-750);
 left: -21px;
 width: 18px;
 top: 11px;
 height: 1px;
}

.crossTable .lineContent {
 display: inline-block;
 vertical-align: top;
 white-space: normal;
}

.crossTable .lineContent:hover {
 background-color: var(--gray-200);
}

.crossTable.CandidateLanguage {
 height: 106px;
 margin-bottom: 4px;
}

.crossTable.CandidateSource,
.crossTable.JobSource {
 height: auto;
 overflow-y: inherit;
 overflow-x: inherit;
 border: 1px solid var(--gray-150);
}

.pseudoArrayListing {
 overflow-y: scroll;
 height: 128px;
 border: 1px solid var(--black);
 background-color: var(--white);
 margin: 4px;
 padding: 4px 8px;
}

#historyList {
 max-height: 160px;
 border: 1px solid var(--black);
 background-color: var(--white);
 overflow-y: scroll;
 padding: 4px;
}

.toursContainer {
 min-height: 200px;
 max-height: 360px;
 margin: 12px;
 overflow-y: scroll;
 overflow-x: hidden;
 padding-right: 20px;
}

.alertsContainer,
.patchContainer {
 height: 200px;
 margin: 12px;
 overflow-y: scroll;
 overflow-x: hidden;
 padding-right: 20px;
}

#autocompleteOutput {
 margin: 8px 16px;
 padding: 8px;
}

/* ========================================
   Object listings
======================================== */

.objectListingContainer {
 overflow-x: auto;
 margin-top: 0.5rem;
 box-shadow: var(--shadow-faint-lg);
 border-top: none;
 border-left: none;
}

.objectListingContainer div.head {
 display: none;
}

.objectListingContainer div.data {
 min-width: 100% !important;
}

.objectListingTable.head,
.objectListingTable.data {
 display: inline-block;
}

.objectListingTable.head {
 margin: 12px 0 0;
 overflow: hidden;
 z-index: 10 !important;
}

.objectListingTable.data {
 margin: 0 0 12px;
 max-height: 400px;
 overflow-y: auto;
 overflow-x: hidden;
}

.objectListingTable.ActivityDocument,
.objectListingTable.ActivityComment {
 height: 200px;
}

.objectListingTable table {
 border: none;
}

.objectListingTable.data table {
 width: 100%;
}

.objectListingTable table thead {
 background-color: var(--gray-150);
 color: var(--white);
 position: sticky;
 top: 0;
 z-index: 1;
}

.objectListingTable table thead tr {
 border: none;
}

.objectListingTable table tbody {
 z-index: 1;
}

.objectListingTable th {
 padding: 0 !important;
 color: #1a1c1e;
 text-align: left;
 font-size: xx-small;
 border: none;
 cursor: pointer;
}

.objectListingTable td {
 height: 26px;
 vertical-align: middle;
 padding: 7px;
 cursor: pointer;
 border: none;
 font-size: x-small;
}

.objectListingTable.data td {
 white-space: nowrap;
}

.objectListingTable.head td {
 overflow: hidden;
 padding: 4px;
}

.objectListingTable tr {
 transition: all 0.2s;
}

.objectListingTable tr td:last-child {
 border-right: 0 none;
}

.objectListingTable tr:nth-child(2n+2) {
 background-color: var(--gray-100);
}

.objectListingTable table tbody tr:hover {
 background-color: var(--orange-row-hover);
}

.objectListingTable tr.selected {
 background-color: var(--orange-row-selected);
}

.objectListingTable tr.selected a {
 color: var(--white) !important;
}

.objectListingTable tr.selected a:hover {
 color: var(--black) !important;
}

.objectListingTable .preRow,
.objectListingTable .postRow {
 position: relative;
}

.objectListingTable .rowsLoadingPanel {
 position: absolute;
 background-color: var(--white);
 font-style: italic;
 left: 35%;
 width: 30%;
 border: 2px solid var(--brand-dark);
 border-radius: 5px;
 padding: 8px 16px;
 text-align: center;
}

.objectPager {
 float: left;
}

.objectPager span {
 margin-left: 12px;
 margin-right: 12px;
}

.objectToolbar {
 text-align: center;
}

.objectOverlays {
 position: relative;
 overflow: visible;
 height: 2px;
 margin-bottom: 4px;
}

.overlayContent {
 background-color: #dcdcdc;
 position: relative;
 top: 0;
 left: 0;
 width: 100%;
 margin-left: -8px;
 z-index: 2;
 border-bottom-left-radius: 12px;
 border-bottom-right-radius: 12px;
 border: 3px solid var(--brand-dark);
}

/* ========================================
   Menus / navigation
======================================== */

#dynamic-menu,
#dynamic-menu div.topmenu {
 display: inline;
}

#menuLegend td {
 padding: 4px;
 vertical-align: middle;
}

.menuControl {
 width: 32px;
 padding: 0 0 2px;
 position: relative;
 top: 2px;
}

.linkList {
 position: absolute;
 bottom: -3px;
 right: 4px;
}

.linkList a,
.linkList .topmenu > div.menuItem {
 border: 3px solid var(--brand-dark);
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
 display: inline-block;
 background-color: var(--brand-dark);
 color: var(--white);
 font-weight: 400;
 padding: 2px 6px;
 margin: 0 2px;
 text-decoration: none;
}

.linkList a.current,
.linkList div.menuItem.current {
 border-bottom: 3px solid var(--white);
 background-color: var(--white) !important;
 color: var(--brand-dark);
}

.linkList a:hover,
.linkList .menuItem:hover {
 transition: background 0.2s, color 0.2s;
 background-color: var(--gray-150);
 color: var(--brand-dark);
}

.wp-menu-shell,
.wp-menu-shell > * {
 min-width: 0;
 width: 100%;
}

.wp-menu-shell ul,
.wp-user-menu-shell ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

.wp-menu-shell .menu {
 display: flex !important;
 flex-wrap: wrap;
 align-items: center;
 gap: 6px;
 width: 100%;
 overflow: visible !important;
}

.wp-menu-shell .menu > li,
#primary-menu .menu > li {
 position: relative !important;
 margin: 0;
 display: block;
}

.wp-menu-shell .menu > li > a {
 display: inline-flex;
 align-items: center;
 min-height: 42px;
 padding: 10px 14px;
 border-radius: 10px;
 color: var(--app-text);
 text-decoration: none;
 font-size: 0.92rem;
 font-weight: 600;
 transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.wp-menu-shell .menu > li:hover > a,
.wp-menu-shell .menu > li:focus-within > a,
.wp-menu-shell .menu > li.menu-active > a,
.wp-menu-shell .menu > li.current-menu-item > a,
.wp-menu-shell .menu > li.current_page_item > a {
 background: rgba(127, 86, 217, 0.1);
 color: var(--app-primary-strong);
}

.wp-menu-shell .sub-menu,
.wp-user-menu-shell .user-sub-menu,
.wp-user-menu-shell .sub-menu,
#primary-menu .sub-menu {
 display: none !important;
 position: absolute !important;
 top: calc(100% - 1px) !important;
 left: 0 !important;
 min-width: 220px;
 background: var(--white) !important;
 border: 1px solid var(--app-border);
 box-shadow: var(--shadow-panel);
 padding: 6px !important;
 z-index: 120 !important;
 margin: 0 !important;
 border-bottom-left-radius: 12px !important;
 border-bottom-right-radius: 12px !important;
 box-sizing: border-box !important;
}

.wp-menu-shell li:hover > .sub-menu,
.wp-menu-shell li:focus-within > .sub-menu,
.wp-user-menu-shell li:hover > .user-sub-menu,
.wp-user-menu-shell li:focus-within > .user-sub-menu,
.wp-user-menu-shell li:hover > .sub-menu,
.wp-user-menu-shell li:focus-within > .sub-menu,
#primary-menu li:hover > .sub-menu,
#primary-menu li:focus-within > .sub-menu {
 display: block !important;
}

.wp-menu-shell .sub-menu li,
.wp-user-menu-shell .user-sub-menu li,
.wp-user-menu-shell .sub-menu li {
 margin: 0;
 display: block;
}

.wp-menu-shell .sub-menu a,
.wp-user-menu-shell .user-sub-menu a,
.wp-user-menu-shell .sub-menu a,
#primary-menu .sub-menu li > a,
#primary-menu .user-sub-menu li > a {
 display: block !important;
 width: 100%;
 padding: 10px 12px !important;
 border-radius: 8px !important;
 color: var(--app-text) !important;
 text-decoration: none;
 white-space: nowrap;
 background: transparent !important;
}

.wp-menu-shell .sub-menu a:hover,
.wp-user-menu-shell .user-sub-menu a:hover,
.wp-user-menu-shell .sub-menu a:hover,
#primary-menu .sub-menu li:hover > a,
#primary-menu .sub-menu li:focus-within > a,
#primary-menu .user-sub-menu li:hover > a,
#primary-menu .user-sub-menu li:focus-within > a {
 background: var(--app-surface-muted) !important;
 color: var(--app-primary-strong) !important;
}

.wp-user-menu-shell {
 display: flex;
 align-items: center;
 justify-content: flex-end;
}

.wp-user-menu-shell .userMobileMenu {
 display: flex !important;
 align-items: center;
 justify-content: flex-end;
 gap: 8px;
}

.wp-user-menu-shell .userMobileMenu > li {
 position: relative;
 list-style: none;
}

/*
.avatar {
 background: var(--gray-225);
 color: #27272a !important;
 display: inline-flex !important;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 position: relative;
 width: 40px;
 height: 40px;
 max-width: 40px;
 max-height: 40px;
 min-width: 40px;
 min-height: 40px;
 border: none !important;
 box-shadow: var(--shadow-faint-lg);
 text-decoration: none !important;
 margin-left: 10px;
 padding-left: 0 !important;
 padding-right: 0 !important;
}

.avatar:hover,
.avatar:focus {
 background: var(--gray-325) !important;
 text-decoration: none !important;
}

.avatar a:link,
.avatar a:visited,
.avatar a:hover {
 text-decoration: none !important;
}

.wp-user-menu-shell .avatar {
 display: inline-flex !important;
 align-items: center;
 justify-content: center;
 width: 42px;
 height: 42px;
 min-width: 42px;
 min-height: 42px;
 border-radius: 999px;
 background: #eef2f7;
 color: var(--gray-850);
 text-decoration: none;
 border: 1px solid var(--app-border);
 box-shadow: none;
 margin: 0;
 padding: 0;
}

.wp-user-menu-shell .avatar:hover,
.wp-user-menu-shell .avatar:focus {
 background: var(--gray-250);
}

.wp-user-menu-shell .avatar::before {
 content: "☰";
 font-size: 16px;
 line-height: 1;
}
*/
.userAvatar {
 cursor: pointer;
 width: 50px;
 height: auto;
 border-radius: 50%;
}

.selectedUserAvatar {
 border: 2px solid;
 box-shadow: var(--shadow-faint-strong);
}

.localAvatar {
 width: 40px;
 height: 40px;
}

.sub-menu {
 background: transparent !important;
 margin-left: -5px !important;
 box-shadow: none !important;
 padding-top: 5px !important;
}

.user-sub-menu {
 background: transparent !important;
 margin-left: -5px !important;
 box-shadow: none !important;
 margin-top: -5.5px !important;
}

.sub-menu a,
.sub-menu li,
.sub-menu ul li,
.user-sub-menu a,
.user-sub-menu li,
.user-sub-menu ul li {
 border-radius: 0 !important;
}

.userMenu {
}

.main-navigation ul ul,
.wp-user-menu-shell .user-sub-menu,
.wp-user-menu-shell .userMenu {
 right: 0 !important;
 left: auto !important;
 min-width: 220px;
}

.wp-user-menu-shell .user-sub-menu .menu-item,
.wp-user-menu-shell .userMenu .menu-item {
 display: flex !important;
 align-items: center;
 gap: 8px;
}

.wp-user-menu-shell .user-sub-menu .menu-item > i,
.wp-user-menu-shell .userMenu .menu-item > i {
 width: 18px;
 text-align: center;
 color: var(--app-text-soft);
}

.wp-user-menu-shell .user-sub-menu .userListItem > a,
.wp-user-menu-shell .userMenu .userListItem > a {
 font-weight: 700;
 color: var(--app-text);
}

#ddd-menu > a {
 font-weight: 700;
 letter-spacing: 0.04em;
}

#primary-menu {
 min-height: 38px !important;
 overflow: visible !important;
}

#primary-menu .menu-active {
 border-bottom: 5px solid var(--app-primary) !important;
 background: var(--gray-250) !important;
}

#primary-menu ul li.menu-item,
ul.user-sub-menu li.menu-item,
#primary-menu ul li.menu-item:hover,
#primary-menu ul li.menu-active,
#primary-menu ul li.current-menu-item {
 margin: 0 !important;
 border-radius: 0 !important;
 border: 0 !important;
 border-bottom: 0 !important;
 box-shadow: none !important;
 background: transparent !important;
 transition: all 0.3s;
}

#primary-menu ul li.menu-item a,
ul.user-sub-menu li.menu-item a {
 font-size: small !important;
 background: var(--gray-050);
 border-radius: 10px 10px 0 0;
 padding: 10px 10px 5px !important;
 color: var(--black);
 padding-left: 5px;
 padding-right: 5px;
 line-height: normal;
}

#primary-menu > ul > li.menu-item,
#primary-menu > ul > li.menu-item.menu-active {
 background: transparent !important;
 color: var(--white) !important;
 box-shadow: none !important;
 border-bottom: none !important;
}

#primary-menu > ul > li.menu-item > a,
.wp-menu-shell #primary-menu > ul > li.menu-item > a,
#primary-menu > ul > li > a {
 padding-top: 5px !important;
 background: transparent !important;
 color: var(--app-text) !important;
}

#primary-menu > ul > li.menu-item.menu-active,
#primary-menu > ul > li.menu-item:hover {
 text-decoration: underline;
}

.wp-menu-shell #primary-menu > ul > li.menu-item:hover > a,
.wp-menu-shell #primary-menu > ul > li.menu-active > a,
.wp-menu-shell #primary-menu > ul > li.current-menu-item > a,
#primary-menu > ul > li.menu-item:hover > a,
#primary-menu > ul > li.menu-active > a,
#primary-menu > ul > li.current-menu-item > a {
 color: var(--app-primary-strong) !important;
 background: rgba(127, 86, 217, 0.1) !important;
}

#primary-menu > ul.menu > li:last-child:not(.menu-item) {
 margin-left: auto !important;
}

#primary-menu .menu > li.menu-active,
#primary-menu .menu > li.current-menu-item,
#primary-menu .menu > li.current_page_item {
 position: relative !important;
 top: 0 !important;
 bottom: auto !important;
 transform: none !important;
}

#primary-menu .menu > li.menu-active > a,
#primary-menu .menu > li.current-menu-item > a,
#primary-menu .menu > li.current_page_item > a {
 color: var(--app-primary-strong) !important;
 background: rgba(127, 86, 217, 0.1) !important;
 border: 0 !important;
 box-shadow: none !important;
}

#primary-menu ul li.menu-item:not(.menu-item-has-children) a {
 border-radius: 10px;
}

#primary-menu .user-sub-menu.userMenu {
 display: none !important;
 position: absolute !important;
 top: calc(100% - 1px) !important;
 right: 0 !important;
 left: auto !important;
 margin: 0 !important;
 min-width: 220px;
 background: var(--white) !important;
 border: 1px solid var(--app-border);
 border-radius: 12px !important;
 box-shadow: var(--shadow-panel);
 padding: 6px !important;
 z-index: 130 !important;
}

#primary-menu .menu > li:hover > .user-sub-menu.userMenu,
#primary-menu .menu > li:focus-within > .user-sub-menu.userMenu {
 display: block !important;
}

.app-nav,
.app-nav-inner,
.wp-menu-shell {
 overflow: visible !important;
}

.inside-header {
 align-items: flex-end !important;
}

.slideout-menu .menu-active {
 color: var(--base-3);
 background-color: var(--accent-2);
}

/* ========================================
   Week / day selectors
======================================== */

#weekControl {
 text-align: center;
}

#weekChoice .week {
 border: 1px solid var(--gray-350);
 background-color: var(--gray-200);
 padding: 4px;
 margin: 1px;
 cursor: pointer;
 text-align: middle;
}

#weekChoice .week.selected {
 border: 1px solid var(--black);
 background-color: var(--gray-450);
}

#dayChoice {
 width: 354px;
 margin: 2px auto;
}

#dayChoice .day {
 float: left;
 width: 40px;
 height: 20px;
 border: 1px solid var(--gray-350);
 background-color: var(--gray-200);
 padding: 4px;
 cursor: pointer;
 text-align: middle;
}

#dayChoice .day.selected {
 border: 1px solid var(--black);
 background-color: var(--gray-450);
}

#dayChoice .day.other {
 background-color: var(--blue-mid);
}

#dayChoice .day.colhead {
 text-align: center;
 background-color: var(--orange-soft);
 border: 1px solid var(--white);
 border-bottom: 2px solid #222;
}

#dayChoice .day.colhead.wkend {
 background-color: var(--yellow-row);
}

/* ========================================
   Dialogs / overlays / tooltips
======================================== */

.clickShield {
 background-color: rgba(0, 0, 0, 0.6);
 position: fixed;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 z-index: 20;
 pointer-events: all;
}

.clickShield.dragManager {
 background-color: rgba(0, 0, 0, 0) !important;
}

.buggyBrowser .clickShield {
 background-color: rgba(255, 255, 255, 0.25);
}

.dragWrap {
 display: block;
 position: absolute;
 overflow: visible;
 width: 1px;
 height: 1px;
}

.dragWrap * {
 cursor: grab;
}

.dialogContainer {
 position: absolute;
 top: 50%;
 left: 50%;
 overflow: visible;
}

.dialog {
 position: absolute;
 box-shadow: 1px 1px 10px gray;
}

.dialog .content {
 max-height: 80vh !important;
 overflow-y: hidden;
 overflow-x: hidden;
 padding: 20px 15px;
}

.dialog .controls {
 padding: 10px 10px 15px 30px;
}

.dlgContent {
 margin: 2px 16px 8px;
}

.tooltip {
 position: absolute;
 height: auto;
 border: 2px solid var(--brand-dark);
 background-color: var(--blue-tooltip);
 padding: 4px;
 white-space: normal;
 overflow-y: auto;
 max-height: 200px;
 z-index: 40;
}

.tooltip br {
 margin-bottom: 8px;
}

.inlay {
 position: relative;
}

#pop {
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.4s;
}

#pop.popped {
 opacity: 1;
 pointer-events: all;
 z-index: 2;
}

#popback {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(255, 255, 255, 0.3);
}

#popover {
 position: absolute;
 top: 1.5px;
 left: 8px;
 width: calc(100% - 18px);
 border: 1px solid var(--black);
 border-bottom-left-radius: 8px;
 border-bottom-right-radius: 8px;
 box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
 background-color: #efefee;
 z-index: 3;
}

/* ========================================
   Reports / analytics / compare
======================================== */

.reportElement {
 display: inline-block;
 vertical-align: top;
 width: 400px;
 margin: 4px;
 padding: 4px 8px;
 border: 1px solid var(--brand-dark);
 background-color: var(--white);
}

.reportElement h2 {
 text-align: center;
 margin-bottom: 8px;
}

.reportPlot {
 height: 392px;
}

.reportData {
 height: 240px;
 margin-top: 16px;
 overflow-y: auto;
 border: 1px solid var(--gray-150);
}

.reportData .objectListingTable {
 width: 100%;
}

#compareProductsWrapper {
 position: sticky;
 bottom: 0;
 z-index: 60;
 width: 100%;
 background: rgba(255, 255, 255, 0.96);
 border-top: 1px solid var(--app-border);
 box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
 padding: 10px 0;
}

#compareProductsContent {
 width: min(var(--app-container), calc(100% - 24px));
 margin: 0 auto;
 display: flex;
 justify-content: flex-end;
 gap: 16px;
 align-items: center;
}

#compareMiniProducts {
 display: flex;
 gap: 10px;
 align-items: center;
 flex-grow: 1;
 justify-content: flex-end;
}

.scatterBlock > div {
 display: block;
 width: 100%;
 padding: 8px auto;
}

.legend-group {
 width: calc(25% - 9px);
 display: inline-block;
 margin-left: 12px;
 vertical-align: top;
}

.legend-group:first-child {
 margin-left: 0;
}

.legend-group-title {
 padding: 8px 12px;
}

.legend-group-callout {
 width: 28px;
 height: 28px;
 border-radius: 32px;
 box-shadow: var(--shadow-sm);
 margin-right: 12px;
 display: inline-block;
 vertical-align: top;
}

.legend-group-title-text {
 display: inline-block;
 vertical-align: top;
 margin-top: 4px;
 width: calc(100% - 40px);
}

.product-column {
 display: inline-block;
 vertical-align: top;
 width: 25%;
 margin-right: 12px;
}

.product-column .legend-group {
 display: block;
 width: initial;
}

.after-product-column {
 display: inline-block;
 vertical-align: top;
 width: calc(75% - 24px);
}

#scatter,
#history {
 margin: 12px 0 16px;
}

#scatter {
 display: inline-block;
 vertical-align: top;
 width: calc(100% - 260px - 24px);
}

#scatterHoverDetails {
 display: inline-block;
 vertical-align: top;
 width: 260px;
 margin-top: 31px;
 float: right;
}

.scatter-legend {
 margin: 8px 0 32px;
}

.filter {
 margin-top: 16px;
}

.priceRange,
.saleRange {
 display: inline-block;
 cursor: pointer;
 border: solid 1px gray;
 background-color: var(--gray-150);
 color: var(--gray-500);
 padding: 4px 16px;
 box-shadow: var(--shadow-sm);
 margin-right: 12px;
}

.priceRange.selected,
.saleRange.selected {
 background-color: var(--white);
 color: var(--black);
}

#trendStatusSummaryPanel {
 vertical-align: top;
 width: 50%;
 display: inline-block;
}

#populationStatusPanel {
 vertical-align: top;
 width: calc(30% - 8px);
 padding-left: 8px;
 margin: 0 10%;
 display: inline-block;
}

#populationStatusPanel button {
 display: block;
 margin: auto;
 width: 100%;
}

/* ========================================
   Search / products / market analysis
======================================== */

.searchPanel {
 margin: 12px 0 16px 120px;
}

.btn.searchButton,
.analyseButton,
.prepopButton {
 display: inline-block;
 vertical-align: middle;
 width: 140px;
 box-sizing: border-box;
}

.prepopButton {
 font-size: 14px;
 padding: 6px 24px;
}

.searchButton:focus,
.analyseButton:focus,
.prepopButton:focus {
 background-color: var(--black);
 color: var(--white);
}

.searchInput {
 min-width: 250px;
 display: inline-block;
 border: 3px solid var(--black);
 border-radius: 5px;
 box-sizing: border-box;
 line-height: normal;
 color: var(--gray-900);
 width: calc(100% - 240px);
 font-size: 20px !important;
 padding: 8px 6px 8px 12px;
 vertical-align: middle;
}

.searchInput:focus {
 border: 3px solid #5551ff;
}

#content {
 padding: 0;
}

#menu {
 padding: 8px;
 text-align: center;
 border-top: 1px solid #787887;
}

#menu button {
 margin: 0 12px;
}

.productTitle::before {
 content: "Analysing: ";
 font-weight: normal;
}

.productTitle {
 font-size: 1.4em;
 font-weight: bold;
 padding-top: 8px;
}

.searchHeader {
 border-bottom: 1px solid #dededf;
}

.searchHeader .similarHeaderTitle {
 font-size: 1.2em;
 padding-bottom: 4px;
 text-align: center;
}

.searchHeader .wholesaleHeader,
.searchHeader .retailHeader {
 display: inline-block;
 vertical-align: top;
 width: calc(50% - 17px);
 text-align: center;
 font-size: 1.2em;
 font-weight: bold;
}

.searchResults {
 display: flex;
 height: 60vh;
 overflow-y: scroll;
 overflow-x: hidden;
}

.wholesaleResults,
.retailResults {
 display: flex;
 flex-direction: column;
 vertical-align: top;
 width: calc(50% - 17px);
 flex-grow: 1;
}

.productRow {
 border-top: 1px solid #dededf;
 padding: 16px;
}

.productRow * {
 vertical-align: top;
}

.productRow .left {
 display: inline-block;
 vertical-align: top;
 width: 70px;
 height: 64px;
 text-align: center;
}

.productRow .right {
 display: inline-block;
 vertical-align: top;
 width: calc(100% - 70px);
}

.productRow .constrainedImage {
 max-width: 64px;
 max-height: 64px;
}

.MarketAnalysis .productItem img.constrainedImage {
 max-width: 180px;
 max-height: 180px;
 display: block;
 margin: 0 auto;
}

.productRow .name {
 font-size: 1.2em;
 font-weight: bold;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.productRow .rating {
 position: relative;
 font-size: 0.8em;
 padding: 3px;
 height: 1em;
 background-color: var(--gray-275);
 overflow: hidden;
 text-align: center;
 border-radius: 4px;
 display: inline-block;
 border: 1px solid var(--black);
 width: calc(50% - 8px);
}

.productRow .rating .ratingBar {
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 background-color: var(--white);
 mix-blend-mode: difference;
}

.productRow div.viewLink {
 text-align: right;
 display: inline-block;
 font-size: 0.8em;
 margin-top: 2px;
 width: 50%;
 font-style: italic;
}

.productRow div.viewLink a:link {
 color: var(--gray-550);
 text-decoration: none;
}

.productRow div.viewLink a:link:hover {
 text-decoration: underline;
}

.productRow div.price {
 margin-top: 4px;
}

.productRow.toScan {
 background-color: var(--yellow-row);
}

.productRow.scanning {
 background-color: var(--blue-alert);
}

.product-paginator {
 margin-bottom: 12px;
 border-bottom: 1px solid var(--gray-275);
 padding-bottom: 4px;
}

.product-paginator * {
 width: calc(33.3% - 8px);
 display: inline-block;
 margin: 4px;
 text-align: center;
}

.product-paginator button {
 border-radius: 12px;
 border: 1px solid var(--gray-275);
}

.product-paginator .paginator-prev::after {
 content: "<-";
}

.product-paginator .paginator-next::after {
 content: "->";
}

.productItem {
 position: relative;
}

.productItem:hover .product-view-external {
 display: block !important;
}

.product-view-external {
 position: absolute;
 top: 20px;
 left: 26px;
 display: none !important;
}

.stage-site-callout {
 color: var(--white);
 font-weight: bold;
 position: absolute;
 top: 16px;
 right: 12px;
 background-color: var(--red);
 border-radius: 16px;
 padding: 8px 16px;
}

.userMarketplaceSelection {
 display: block;
 margin-top: 0;
 padding: 0.5rem 0.75rem !important;
 border: 1px solid lightgray !important;
 background: var(--white) !important;
 color: var(--gray-800) !important;
 box-shadow: var(--shadow-faint) !important;
 font-size: 0.75rem !important;
 min-height: 34px;
}

.userMarketplaceSelection .userMarketplaceOption {
 display: block;
}

.userMarketplaceSelection .userMarketplaceOption input {
 position: relative;
 top: 1px;
}

.mp-select,
.mp-select.mini {
 display: flex;
 gap: 10px;
}

.mp-select-option {
 border: 1px solid lightgray;
 box-shadow: 0 0 5px 1px #0000001f;
 cursor: pointer;
 transition: all 0.5s ease;
 background-color: oklch(0.984 0.003 247.858) !important;
 gap: 10px;
 display: flex;
 align-items: center;
 padding: 5px 8px;
}

.mp-select-option.selected {
 background-color: var(--white);
 color: var(--black);
}

.mp-select-option:hover {
 background: oklch(0.929 0.013 255.508) !important;
}

.mp-select-option img,
.mp-select.mini img {
 display: inline-block;
 width: 40px;
 vertical-align: middle;
}

.mp-select-option img {
 opacity: 0.4;
}

.mp-select-option.selected img {
 opacity: 1;
}

.mp-select-option div,
.mp-select.mini .mp-select-option {
 font-weight: bold;
 font-size: small;
}

.mp-select.mini .mp-select-option {
 padding: 5px 8px;
}

.mp-select.mini.tiny .mp-select-option > div {
 display: none;
}

#marketplaceSelectorSlot {
 padding: 1rem 0;
 display: flex;
 justify-content: center;
}

.market-analysis-filters #marketplaceSelectorSlot {
 justify-content: flex-start;
}

.marketplaceImage img {
 box-shadow: 0 0 5px 1px #0000001f;
 width: 50px;
 height: auto;
 border: 1px solid gray;
 padding: 1px;
 position: absolute;
 top: 5px;
 right: 0;
}

.searchFlag {
 width: 50px;
 height: auto;
 border: 1px solid gray;
 border-radius: 0 !important;
 padding: 1px !important;
}

/* ========================================
   Buttons
======================================== */

.btn {
 padding: 8px 12px;
 border-radius: 6px;
 border: 1px solid var(--gray-350);
 cursor: pointer;
 background: var(--white);
}

.btn-primary {
 background: var(--blue-ui);
 color: var(--white);
 border-color: var(--blue-ui);
}

.btn-secondary {
 background: #f6f6f6;
}

.btn[disabled] {
 opacity: 0.6;
 cursor: default;
}

/* ========================================
   Messaging / messenger
======================================== */

.messagingEngine {
 position: fixed !important;
 z-index: 1000;
 background-color: var(--gray-150);
 bottom: 0;
 left: 0;
 padding: 7px 8px;
 border-right: 2px solid var(--brand-dark);
 cursor: pointer;
}

.messagingEngine.open {
 background-color: var(--yellow);
}

.messagerDialog {
 position: fixed;
 z-index: 1000;
 bottom: 40px;
 left: 0;
 border: 2px solid var(--brand-dark);
 min-width: 400px;
 padding: 8px 16px 8px 8px;
 background-color: var(--gray-150);
}

.messagerDialog .userList {
 border: 2px solid var(--brand-dark);
 margin: 4px;
 overflow-y: scroll;
 max-height: 30vh;
 background-color: var(--white);
}

.messagerDialog .userList .user {
 padding: 4px;
 cursor: pointer;
}

.messagerDialog .userList .user:hover,
.previousMessages .objectListingTable tr:hover td {
 background-color: var(--blue-user-hover);
}

.messagerDialog .userList .user.selected {
 background-color: var(--brand-dark) !important;
 color: var(--white);
}

.previousMessages {
 height: 25vh;
 width: 98%;
 margin: 2px auto;
 border: 2px solid var(--brand-dark);
 overflow-y: scroll;
}

.previousMessages .objectListingTable {
 width: 100%;
}

.previousMessages .objectListingTable td {
 vertical-align: top;
 padding: 10px 4px 4px;
 width: 13%;
}

.newMessage textarea {
 display: block;
 width: 98%;
 margin: 4px auto;
}

.newMessages {
 position: relative;
 padding-right: 32px;
}

.newMessages::after {
 content: attr(_numMessages);
 border-radius: 18px;
 height: 22px;
 padding: 0 6px;
 background-color: var(--brand-dark);
 color: var(--white);
 font-weight: bold;
 text-align: center;
 line-height: 22px;
 vertical-align: middle;
 position: absolute;
 right: 4px;
 bottom: 13%;
 transition: background-color 400ms linear;
}

.newMessages.flash::after {
 background-color: var(--red-badge);
}

/* ========================================
   Chat window / assistant output
======================================== */

.chatWindow {
 position: fixed;
 bottom: 12px;
 right: 16px;
 width: 46vw;
 min-height: 100px;
 background-color: var(--white);
 border: 1px solid var(--black);
 border-radius: 4px;
 border-top-left-radius: 16px;
 border-bottom-left-radius: 16px;
 overflow: hidden;
 padding: 4px 8px 4px 36px;
 box-sizing: border-box;
 box-shadow: var(--shadow-dark);
 transition: right 0.8s;
 z-index: 10;
 text-align: center;
}

.chatWindow.hidden {
 right: calc(-46vw + 32px);
}

.chatWindow:not(.asAIController) {
 display: none;
}

.chatWindow .dragHandle {
 position: absolute;
 top: 0;
 left: 0;
 background-color: var(--app-primary);
 height: 100%;
 width: 32px;
}

.chatWindow .dragHandle::after {
 content: "AI Config";
 display: block;
 position: absolute;
 font-size: 16px;
 font-weight: bold;
 white-space: nowrap;
 top: 50%;
 left: 50%;
 transform: translateX(-50%) translateY(-50%) rotate(-90deg);
 color: rgba(255, 255, 255, 0.8);
}

.chatWindow .loading {
 vertical-align: top;
 margin-left: 12px;
}

.chatWindow .outputPanel,
.chatWindow .inputPanel,
.chatWindow button.submit {
 display: none;
}

.chatWindow .outputPanel {
 max-height: calc(96vh - 160px);
 min-height: 32px;
 overflow-y: scroll;
 border: 1px solid #ededef;
 padding: 4px 8px;
}

.chatWindow .outputPanel .inputText {
 white-space: pre-line;
 color: #00a;
 margin-bottom: 4px;
 border-bottom: 1px solid #dedede;
 padding-bottom: 4px;
}

.chatWindow .outputPanel .outputText {
 white-space: pre-line;
 margin-bottom: 12px;
 padding-bottom: 4px;
 font-style: italic;
 border-bottom: 1px solid #dedede;
}

.chatWindow .outputPanel .old {
 opacity: 0.7;
}

.chatWindow .inputPanel {
 margin-bottom: 55px;
}

.chatWindow .submit {
 position: absolute;
 bottom: 8px;
 right: 8px;
 border-radius: 8px;
 background-color: var(--red);
 padding: 8px 16px;
 border: 2px solid var(--red-dark);
 cursor: pointer;
 color: var(--white) !important;
 transition: 0.4s;
}

.chatWindow .submit:hover {
 background-color: var(--yellow);
 color: var(--red-dark) !important;
}

.chatWindow .voiceChatBtn,
.chatWindow .aiConfigBtn {
 border-radius: 8px;
 background-color: var(--white);
 padding: 8px 16px;
 border: 2px solid var(--red-dark);
 cursor: pointer;
 color: var(--red-dark);
 transition: 0.4s;
}

.chatWindow .voiceChatBtn {
 position: absolute;
 bottom: 8px;
 left: 40px;
}

.chatWindow .aiConfigSurround {
 position: absolute;
 bottom: 8px;
 left: 200px;
}

.chatWindow .aiConfigBtn {
 display: inline-block;
 margin-right: 16px;
 vertical-align: middle;
}

.chatWindow .voiceChatBtn.connected,
.chatWindow .voiceChatBtn:hover {
 background-color: var(--yellow);
 color: var(--red-dark);
}

.chatWindow .voiceChatBtn,
.chatWindow .aiConfigSurround {
 margin-top: 8px;
 display: inline-block;
 position: initial;
 margin-right: 12px;
}

.chatWindow .outputProducts,
.assistantMessage .outputProducts {
 margin-bottom: 16px;
}

.assistantMessage .outputProducts {
 margin-top: 20px;
}

.chatWindow .outputProducts .productItem,
.assistantMessage .outputProducts .productItem {
 display: inline-block;
 vertical-align: top;
 width: 25%;
}

.chatWindow .productItem img.constrainedImage,
.assistantMessage .productItem img.constrainedImage {
 width: 100%;
}

.assistantMessage.hideDivs > div {
 visibility: hidden;
}

.assistantMessage .outputProducts .productItem {
 background-color: rgba(0, 0, 0, 0);
 box-shadow: none;
}

.chatWindow .outputReports .reportLink,
.assistantMessage .outputReports .reportLink {
 display: inline-block;
 background-color: var(--gray-175);
 border: 1px solid var(--gray-550);
 padding: 4px 16px 4px 12px;
 margin-bottom: 8px;
 font-size: 14px;
 border-radius: 10px;
 box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
 cursor: pointer;
}

.chatWindow .outputReports .reportLink::before,
.assistantMessage .outputReports .reportLink::before {
 content: "📎 ";
}

.frontAndCentreChat .table-wrapper {
 margin: 2px 0;
 visibility: visible !important;
 opacity: 1 !important;
}

.frontAndCentreChat table.chat-table {
 width: 100%;
 border-collapse: separate;
 border-spacing: 0;
 background: var(--white);
 color: #0f172a;
 border: 1px solid var(--gray-250);
 border-radius: 8px;
 overflow: hidden;
 box-shadow: var(--shadow-soft);
 font-size: 14px;
}

.frontAndCentreChat table.chat-table thead th {
 background: #0f172a;
 color: var(--gray-250);
 text-align: left;
 font-weight: 600;
 padding: 10px 12px;
 letter-spacing: 0.02em;
}

.frontAndCentreChat table.chat-table tbody td {
 padding: 10px 12px;
 border-top: 1px solid var(--gray-250);
 vertical-align: top;
}

.frontAndCentreChat table.chat-table tbody tr:nth-child(even) td {
 background: var(--gray-075);
}

.frontAndCentreChat table.chat-table tbody tr:hover td {
 background: #eef2ff;
}

.frontAndCentreChat table.chat-table th,
.frontAndCentreChat table.chat-table td {
 word-break: break-word;
}

/* ========================================
   AI panel / AI helpers
======================================== */

.aiPanel {
 margin-top: 0;
 margin-bottom: 20px;
 padding-bottom: 18px;
 border-bottom: 1px solid var(--app-border);
}

.aiPanel:empty {
  display:none !important;
}

.aiPanel .frontAndCentreChat {
 --boundsColour: var(--gray-600);
 --backColour: #f5f5f8;

 display: inline-block;
 position: relative;
 overflow: hidden;
 vertical-align: top;
 border-top: 3px solid var(--boundsColour);
 border-right: 3px solid var(--boundsColour);
 border-bottom: 3px solid var(--boundsColour);
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
 box-sizing: border-box;
 width: calc(100% - 120px);
 min-height: 120px;
 padding: 12px 12px 12px 50px;
 background: var(--backColour);
 box-shadow: var(--shadow-md);
 transition: 2s background;
}

.aiPanel .frontAndCentreChat::before {
 content: "";
 position: absolute;
 display: block;
 border-left: 3px solid var(--boundsColour);
 left: 0;
 top: 116px;
 height: 100%;
 width: 5px;
}

.aiPanel .frontAndCentreChat::after {
 content: "";
 position: absolute;
 display: block;
 left: -42px;
 top: -16px;
 height: 146px;
 width: 76px;
 border-top: 3px solid var(--boundsColour);
 border-right: 3px solid var(--boundsColour);
 border-bottom: 3px solid var(--boundsColour);
 border-top-right-radius: 100px;
 border-bottom-right-radius: 100px;
 background-color: var(--white);
}

.aiPanel .frontAndCentreChat.ai-mode-active {
 --boundsColour: var(--app-primary);
 background: linear-gradient(245.97deg, #ffb40044 0.11%, #ff762d44 34.04%, #c14bac44 66.96%, #825fff44 99.89%);
}

.aiPanel .commenceAIModePanel {
 margin: 0;
}

.commenceAIModeNotes {
 font-size: 0.9em;
}

.aiPanel .aiModeSwitchButtonContainer {
 text-align: right;
 margin-right: 32px;
}

.aiPanel .aiModeSwitchButtonContainer .btn {
 display: inline-block;
}

.aiPanel .userOptions .option {
 display: inline-block;
 padding: 8px 12px;
 background-color: var(--white);
 border-radius: 10px;
 cursor: pointer;
 border: 2px solid var(--gray-650);
 box-shadow: var(--shadow-md);
}

.aiPanel .userOptions .option:hover {
 background-color: var(--orange-strong);
}

.aiPanel .userOptions .option:not(:first-child) {
 margin-left: 16px;
}

.aiPanel .userOptions textarea {
 background-color: rgba(255, 255, 255, 0.8);
 width: 100%;
 border: none;
 border-radius: 12px;
 font-size: 17px;
 font-weight: 400 !important;
 color: rgb(9, 9, 11);
}

.aiPanel .userOptions textarea:focus {
 outline: none !important;
}

.ai-highlight {
 position: relative;
}

.ai-highlight::before {
 content: "";
 position: absolute;
 top: -5px;
 left: -16px;
 width: calc(100% + 32px);
 height: calc(100% + 10px);
 border: 3px solid;
 border-color: rgb(var(--ai-chosen-colour));
 background-color: rgba(var(--ai-chosen-colour), 0.1);
 box-shadow: var(--shadow-sm);
 border-radius: 8px;
 pointer-events: none;
}

.ai-highlight::after {
 position: absolute;
 max-width: 40%;
 display: block;
 top: calc(100% - 10px);
 right: 8px;
 content: "AI: " var(--ai-annotation);
 color: var(--black);
 border: 3px solid;
 border-color: rgb(var(--ai-chosen-colour));
 padding: 2px 8px;
 background-color: var(--white);
}

.aiActionButtons {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 0.5rem;
 flex-wrap: wrap;
}

.aiHistoryBtn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.45rem;
}

.aiHistoryBtn i.fa {
 font-size: 0.95em;
}

.aiHistoryBtn.loading {
 opacity: 0.75;
 pointer-events: none;
}

.aiSessionHistoryBackdrop {
 position: fixed;
 inset: 0;
 z-index: 9998;
 background: transparent;
}

.aiSessionHistoryMenu {
 position: absolute;
 z-index: 9999;
 background: var(--white);
 border: 1px solid rgba(0, 0, 0, 0.12);
 border-radius: 10px;
 box-shadow: var(--shadow-lg);
 overflow: hidden;
 display: flex;
 flex-direction: column;
}

.aiSessionHistoryHeader {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.85rem 1rem;
 font-weight: 600;
 border-bottom: 1px solid rgba(0, 0, 0, 0.08);
 background: #f7f9fc;
 color: #243447;
}

.aiSessionHistoryBody {
 overflow-y: auto;
 padding: 0.35rem 0;
}

.aiSessionHistoryLoading,
.aiSessionHistoryEmpty {
 padding: 1rem;
 font-size: 0.95rem;
 color: #5b6573;
}

.aiSessionHistoryEmpty.error {
 color: var(--red-session-error);
}

.aiSessionHistoryItem {
 display: block;
 width: 100%;
 text-align: left;
 padding: 0.8rem 1rem;
 background: transparent;
 border: 0;
 border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 cursor: pointer;
 transition: background 0.15s ease;
}

.aiSessionHistoryItem:last-child {
 border-bottom: 0;
}

.aiSessionHistoryItem:hover {
 background: #f4f7fb;
}

.aiSessionHistoryItem.loading,
.aiSessionHistoryItem.renaming {
 opacity: 0.65;
 pointer-events: none;
}

.aiSessionHistoryItem.active {
 background: var(--blue-ui-soft);
 box-shadow: inset 3px 0 0 var(--blue-ui-border);
}

.aiSessionHistoryItem.active:hover {
 background: var(--blue-ui-hover);
}

.aiSessionHistoryItemTopRow {
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

.aiSessionHistoryItemTitleWrap {
 flex: 1 1 auto;
 min-width: 0;
}

.aiSessionHistoryItemTitle,
.aiSessionHistoryItemTitleEdit {
 font-weight: 600;
 color: #1f2937;
 line-height: 1.3;
 margin-bottom: 0.2rem;
 width: 100%;
 box-sizing: border-box;
}

.aiSessionHistoryItemTitle {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.aiSessionHistoryItemTitleEdit {
 display: none;
 padding: 0.28rem 0.45rem;
 border: 1px solid #94a3b8;
 border-radius: 6px;
 background: var(--white);
 font: inherit;
}

.aiSessionHistoryItem.editing .aiSessionHistoryItemTitle {
 display: none;
}

.aiSessionHistoryItem.editing .aiSessionHistoryItemTitleEdit {
 display: block;
}

.aiSessionHistoryItemMeta {
 font-size: 0.85rem;
 color: #6b7280;
 line-height: 1.35;
}

.aiSessionHistoryRenameBtn {
 flex: 0 0 auto;
 border: 0;
 background: transparent;
 color: #6b7280;
 cursor: pointer;
 padding: 0.3rem 0.35rem;
 border-radius: 6px;
 transition: background 0.15s ease, color 0.15s ease;
}

.aiSessionHistoryRenameBtn:hover {
 background: rgba(59, 130, 246, 0.08);
 color: #2563eb;
}

/* ========================================
   Terminal / mic / voice
======================================== */

.terminal {
 color: #42a;
 font-family: Consolas, "Courier New", Courier, monospace;
 font-weight: bold;
 margin-bottom: 12px;
 font-size: 16px;
 white-space: pre-wrap;
}

.terminal .term-cursor {
 display: inline-block;
 animation: term-blink 1s steps(1, end) infinite;
}

.mic-button {
 display: inline-block;
 vertical-align: top;
 position: relative;
 width: 120px;
 height: 120px;
 cursor: pointer;
 background-image: url("/images/mic-off-ai3.svg");
 background-size: contain;
 background-repeat: no-repeat;
}

.mic-button.mic-on {
 background-image: url("/images/mic-on-ai3.svg");
}

.mic-button.mic-connecting::after {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: url("/images/mic-on-ai3.svg");
 animation: flash 1.4s infinite;
 background-size: contain;
 background-repeat: no-repeat;
}

/* ========================================
   Chat wireframe / builder
======================================== */

.chatWireframe .chatNode {
 white-space: nowrap;
 position: relative;
}

.chatWireframe .chatNode > * {
 white-space: normal;
 vertical-align: top;
}

.chatWireframe .view {
 overflow: scroll;
 display: block;
 width: 100%;
 height: calc(60vh - 150px);
 border: 1px solid var(--gray-300);
 padding: 8px 12px;
 box-sizing: border-box;
}

.chatWireframe .chatNodeControls {
 display: inline-block;
 position: relative;
 width: 360px;
 background-color: #f5f5fa;
 border: 1px solid #dedede;
 padding: 4px 8px;
 margin: 8px 12px;
 box-shadow: var(--shadow-sm);
}

.chatWireframe .field .label {
 width: 100px;
}

.chatWireframe .field .value {
 margin-left: 110px;
}

.chatWireframe .chatNodeChildren {
 display: inline-block;
 margin-left: 64px;
}

.chatWireframe .chatNodeControls::after {
 content: "";
 position: absolute;
 top: 32px;
 left: -64px;
 width: 48px;
 border-bottom: 1px solid var(--gray-650);
}

.chatWireframe .chatNode:first-child > .chatNodeControls::after {
 left: -80px;
 width: 64px;
}

.chatWireframe .chatNode:not(:last-child)::after {
 content: "";
 position: absolute;
 top: 40px;
 left: -52px;
 width: 8px;
 height: calc(100% + 2px);
 border-left: 1px solid var(--gray-650);
}

/* ========================================
   PVA
======================================== */

.pva-root {
 display: flex;
 min-height: 560px;
 color: #222;
}

.pva-root textarea {
 min-height: 260px;
}

.pva-sidebar {
 width: 260px;
 border-right: 1px solid #e1e1e1;
 background: #fafafa;
 padding: 12px;
}

.pva-step {
 padding: 10px 12px;
 margin: 6px 0;
 border-radius: 6px;
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: 10px;
}

.pva-step .num {
 background: var(--gray-300);
 width: 20px;
 height: 20px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 font-size: 12px;
}

.pva-step.active {
 background: var(--blue-ui-soft);
}

.pva-step.disabled {
 color: var(--gray-450);
 cursor: default;
}

.pva-main {
 flex: 1;
 padding: 16px;
}

.pva-card {
 background: var(--white);
 border: 1px solid #e1e1e1;
 border-radius: 8px;
 padding: 16px;
}

.pva-card-title {
 font-weight: 600;
 margin-bottom: 12px;
}

.pva-flex {
 display: flex;
 gap: 16px;
}

.pva-left {
 width: 280px;
}

.pva-right {
 flex: 1;
}

.pva-prod-img {
 width: 100%;
 border-radius: 6px;
 border: 1px solid #eee;
}

.pva-img-ph {
 background: #f3f3f3;
 color: var(--gray-650);
 border: 1px dashed var(--gray-350);
 height: 220px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 6px;
}

.pva-img-ph.small {
 height: 72px;
}

.pva-actions {
 margin-top: 12px;
 display: flex;
 gap: 8px;
}

.pva-status {
 margin-top: 8px;
 color: var(--gray-750);
}

.pva-status.error,
.pva-concept-status.error {
 color: var(--red-pva-error);
}

.pva-concepts-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 gap: 12px;
}

.pva-concept-card {
 border: 1px solid #e1e1e1;
 border-radius: 8px;
 padding: 10px;
 position: relative;
}

.pva-concept-card.selected {
 outline: 2px solid var(--blue-ui);
}

.pva-concept-title {
 font-weight: 600;
 margin-bottom: 6px;
}

.pva-concept-image img {
 width: 100%;
 border-radius: 6px;
 border: 1px solid #eee;
}

.pva-concept-desc {
 width: 100%;
 margin-top: 8px;
}

.pva-concept-actions {
 display: flex;
 gap: 6px;
 margin-top: 8px;
 flex-wrap: wrap;
}

.pva-concept-status {
 margin-top: 6px;
 font-size: 12px;
 color: var(--gray-700);
}

.pva-prod-top {
 display: grid;
 grid-template-columns: 2fr 1fr;
 gap: 12px;
}

.pva-video-stage {
 position: relative;
 background: var(--black);
 min-height: 360px;
 border-radius: 6px;
 overflow: hidden;
}

.pva-video-stack {
 position: absolute;
 inset: 0;
}

.pva-video-stack video {
 width: 100%;
 height: 100%;
 object-fit: contain;
 background: var(--black);
}

.pva-video-placeholder {
 position: absolute;
 inset: 0;
 color: var(--white);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0.7;
}

.pva-video-placeholder.waiting {
 color: transparent;
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(0, 0, 0, 0.35);
}

.pva-video-placeholder.waiting::after {
 content: "";
 position: absolute;
 left: 50%;
 top: 50%;
 width: 44px;
 height: 44px;
 border-radius: 50%;
 border: 4px solid rgba(255, 255, 255, 0.35);
 border-top-color: var(--white);
 transform: translate(-50%, -50%) rotate(0deg);
 animation: pvaSpin 0.9s linear infinite;
}

.pva-video-placeholder.waiting::before {
 content: attr(data-waiting);
 position: absolute;
 left: 50%;
 top: calc(50% + 42px);
 transform: translateX(-50%);
 color: var(--white);
 font-weight: 600;
 text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.pva-prod-controls .pva-row {
 margin-bottom: 8px;
}

.pva-scrubber {
 margin-top: 12px;
 padding: 8px;
 border-top: 1px solid #eee;
}

.pva-scrubber-inner {
 display: flex;
 gap: 8px;
 overflow-x: auto;
}

.pva-scrubber-inner.disabled {
 pointer-events: none;
 opacity: 0.6;
}

.pva-thumb {
 width: 120px;
 cursor: pointer;
 margin: 4px;
 padding: 2px;
 border-radius: 4x;
}

.pva-thumb img {
 width: 100%;
 border-radius: 4px;
 border: 1px solid var(--gray-300);
}

.pva-thumb .idx {
 text-align: center;
 font-size: 12px;
 color: var(--gray-650);
 margin-top: 4px;
}

.pva-thumb.active {
 box-shadow: 0 0 0 3px var(--blue-ui);
 border-radius: 4px;
 background: var(--white);
}

.pva-thumb.active .idx {
 color: var(--blue-ui);
 font-weight: 600;
}

.pva-card.thinking,
.pva-concept-card.thinking {
 position: relative;
}

.pva-card.thinking::after,
.pva-concept-card.thinking::after {
 content: " ";
 position: absolute;
 inset: 0;
 background: rgba(255, 255, 255, 0.6);
}

.pva-card.thinking::before,
.pva-concept-card.thinking::before {
 content: attr(data-thinking) " ";
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 padding: 8px 10px;
 border-radius: 6px;
 background: var(--white);
 border: 1px solid var(--gray-300);
 color: #333;
 font-size: 13px;
}

.pva-right input[type="text"],
.pva-right textarea,
.pva-concept-desc {
 width: 100%;
 box-sizing: border-box;
 border: 1px solid var(--gray-350);
 border-radius: 6px;
 padding: 8px;
}

.pva-right label {
 display: block;
 margin-top: 8px;
 margin-bottom: 4px;
}

/* ========================================
   Misc
======================================== */

.fa-circle-xmark {
 font-size: medium;
 color: var(--red-error);
}

.fa-circle-check {
 font-size: medium;
 color: var(--blue-valid);
}

h2.gb-headline {
 margin-bottom: 20px;
}

h2.gb-headline-text {
 margin-bottom: 10px;
}

.workExperienceDropdown,
.docsDropdown {
 margin: 4px 16px 12px;
}

.advancedOptions {
 width: 550px;
 padding-top: 4px;
 border-top: 1px solid var(--brand-light);
 border-bottom: 1px solid var(--brand-light);
 padding-bottom: 4px;
 margin: 12px auto 8px;
}

.selector {
 margin-top: 10px;
 margin-left: 20px;
 font-style: italic;
 cursor: pointer;
}

.selectorDesc {
 margin: 6px 0 6px 32px;
 color: #898998;
}

.popper {
 text-align: right;
 cursor: pointer;
}

.popper::before {
 display: inline-block;
 position: relative;
 transform: rotate(0deg);
 transition: 1s transform;
}

.popper.popped::before {
 transform: rotate(90deg);
}

.poppable {
 text-align: left;
 display: none;
}

.poppable.popped {
 display: block;
}

#productPageButtons .flex,
.aiActionButtons,
.objectControls {
 flex-wrap: wrap;
}

div.grid-container {
}

.auditDialog table {
 width: 100%;
}

.auditDialog .changeListing {
 display: inline-block;
 width: calc(50% - 8px);
 padding: 4px 2px 4px 4px;
 border-right: 2px solid var(--gray-500);
 overflow-y: scroll;
 height: 60vh;
}

.auditDialog .fieldChangeListing {
 display: inline-block;
 width: calc(50% - 8px);
 padding: 4px;
 overflow-y: scroll;
 height: 60vh;
}

tr.deletedMessage td,
tr.deletedMessage:hover td {
 background-color: var(--gray-350) !important;
 color: var(--white);
 text-decoration: line-through;
}

.main-content {
 position: relative;
 transition: opacity 180ms ease;
}

.main-content.dynamic-page-leaving,
.main-content.dynamic-page-content-loading {
 opacity: 0.35;
}

.main-content.dynamic-page-entering {
 opacity: 0;
 animation: dynamic-page-fade-in 220ms ease forwards;
}

.main-content.dynamic-page-content-loading::after {
 content: "";
 position: absolute;
 top: 2rem;
 right: 2rem;
 width: 2rem;
 height: 2rem;
 border: 3px solid rgba(0, 0, 0, 0.15);
 border-top-color: rgba(0, 0, 0, 0.65);
 border-radius: 50%;
 animation: dynamic-page-spin 0.8s linear infinite;
 pointer-events: none;
 z-index: 2;
}

body.dynamic-page-loading {
 cursor: progress;
}

/* ========================================
   Keyframes
======================================== */

@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

@keyframes ellipsis {
 0% { content: "."; }
 50% { content: ".."; }
 100% { content: "..."; }
}

@keyframes flash {
 0% { opacity: 1; }
 50% { opacity: 0; }
 100% { opacity: 1; }
}

@keyframes term-blink {
 0%, 49% { opacity: 1; }
 50%, 100% { opacity: 0; }
}

@keyframes pvaSpin {
 from { transform: translate(-50%, -50%) rotate(0deg); }
 to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes dynamic-page-spin {
 to { transform: rotate(360deg); }
}

@keyframes dynamic-page-fade-in {
 from { opacity: 0; }
 to { opacity: 1; }
}

/* ========================================
   Media queries
======================================== */

@media print {
 .topSection,
 .headerContent,
 .footer {
 display: none;
 }

 .region {
 border: 0 hidden;
 border-radius: 0;
 }

 body {
 font-size: 12px;
 margin: 0;
 background-color: var(--white);
 }

 .sensibleTable {
 border: 1px solid var(--gray-550);
 }

 @page {
 size: auto;
 margin: 10mm;
 }
}

@media only screen and (max-width: 1280px) {
 .reportPlot {
 height: 352px;
 }

 .reportElement {
 width: 360px;
 margin: 4px;
 padding: 4px;
 border: 1px solid var(--brand-dark);
 background-color: var(--white);
 }

 .inside {
 width: 100%;
 margin: 0;
 }
}

@media only screen and (max-width: 960px) {
 .bodyContent {
 width: 99%;
 }

 .header {
 min-height: 50px;
 }

 .userNote {
 margin: 8px 40px 0 0;
 }

 .objectPager {
 float: none;
 }

 .headerLogo {
 margin: 0 auto;
 }

 .linkList {
 position: inherit;
 margin-top: 4px;
 margin-right: 4px;
 bottom: inherit;
 top: inherit;
 }

 .linkList a,
 .linkList .topmenu > div.menuItem {
 display: block;
 border: 3px solid var(--brand-dark) !important;
 border-radius: 4px;
 margin: 4px;
 }

 .userNote span {
 display: none;
 }

 .centreTable {
 margin: 0;
 }
}

@media only screen and (max-width: 899px) {
 .inside {
 width: 100%;
 margin: 0;
 }

 .para {
 padding: 6px 0;
 }

 .headerLogo {
 padding-top: 6px;
 }
}

@media (max-width: 900px) {
 .site-logo {
 display: none;
 }

 .user-sub-menu li a,
 .user-sub-menu li,
 .userListItem {
 background: var(--white) !important;
 }

 .menu-toggle {
 justify-content: flex-start !important;
 display: flex !important;
 align-items: center !important;
 background: transparent !important;
 }

 .gb-container-eae04a8a {
 padding: 40px 10px !important;
 }

 .app-main {
 padding-top: 16px;
 }

.app-page-content {
 padding: 20px 18px 24px;
}

 .app-title-row {
 flex-direction: column;
 align-items: stretch;
 }

 #primary-menu > ul {
 gap: 4px;
 }

 #primary-menu > ul > li > a {
 padding: 9px 12px;
 min-height: 38px;
 font-size: 0.88rem;
 }

 #compareProductsContent {
 width: calc(100% - 16px);
 gap: 12px;
 }
}

@media (max-width: 700px) {
 .wp-menu-shell .menu,
 #primary-menu > ul {
 flex-direction: column;
 align-items: stretch;
 }

 .wp-menu-shell .menu > li > a,
 #primary-menu > ul > li > a {
 width: 100%;
 }

 .wp-menu-shell .sub-menu,
 .wp-user-menu-shell .user-sub-menu,
 .wp-user-menu-shell .sub-menu,
 #primary-menu ul ul,
 .user-sub-menu,
 .sub-menu {
 position: static !important;
 top: auto;
 left: auto;
 right: auto;
 min-width: 0;
 margin-top: 6px;
 box-shadow: none;
 border: 1px solid var(--app-border);
 }

 .app-header-inner,
 .app-nav-inner,
 .app-container,
 .app-footer-inner {
 width: calc(100% - 20px);
 }

 .app-header-inner {
 min-height: auto;
 padding: 12px 0;
 flex-wrap: wrap;
 gap: 12px;
 }

 .app-header-right {
 width: 100%;
 justify-content: flex-end;
 }

 .app-nav-inner {
 padding: 8px 0 12px;
 }

 #compareProductsContent {
 flex-wrap: wrap;
 justify-content: flex-start;
 }

 #compareMiniProducts {
 width: 100%;
 justify-content: flex-start;
 flex-wrap: wrap;
 }

 .stage-site-callout {
 right: 10px;
 bottom: 10px;
 }
}



body:not(.lovable-page) .app-page-content {
  color: var(--app-text);
  font-size: 15px;
  line-height: 1.6;
}

body:not(.lovable-page) .app-title-row {
  align-items: flex-end;
  padding: 8px 0 0;
}

body:not(.lovable-page) .app-page-title {
  margin: 0;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #24164a;
}

body:not(.lovable-page) .main-content {
  width: 100%;
  max-width: none;
}

body:not(.lovable-page) .main-content > [ai-describable],
body:not(.lovable-page) .main-content > .contentSection,
body:not(.lovable-page) .main-content > .sectionBlock {
  display: block;
  margin-top: 32px;
}

body:not(.lovable-page) .main-content > [ai-describable]:first-child,
body:not(.lovable-page) .main-content > .contentSection:first-child,
body:not(.lovable-page) .main-content > .sectionBlock:first-child {
  margin-top: 0;
}

body:not(.lovable-page) .sectionTitle {
  margin: 0 0 14px;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #24164a;
}

body:not(.lovable-page) .sectionContent {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(124, 92, 255, 0.10);
  border-radius: 22px;
  box-shadow: 0 12px 34px rgba(84, 43, 160, 0.06);
  padding: 22px 22px 18px;
}

body:not(.lovable-page) .para {
  padding: 0;
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(36, 22, 74, 0.74);
}

body:not(.lovable-page) .para:last-child {
  margin-bottom: 0;
}

body:not(.lovable-page) .para + .para {
  margin-top: 0;
}

body:not(.lovable-page) .sectionContent > .para:first-child {
  margin-top: 0;
}

body:not(.lovable-page) .sectionContent > .para:last-child {
  margin-bottom: 0;
}

body:not(.lovable-page) .sectionContent a,
body:not(.lovable-page) .para a {
  color: var(--app-primary);
  font-weight: 600;
  text-decoration: none;
}

body:not(.lovable-page) .sectionContent a:hover,
body:not(.lovable-page) .para a:hover {
  color: var(--app-primary-strong);
  text-decoration: underline;
}

/* AI panel should feel integrated, but not oversized */
body:not(.lovable-page) .aiPanel {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(124, 92, 255, 0.10);
}

/* Listing areas: add spacing and soften outer container only */
body:not(.lovable-page) .objectListingContainer {
  margin-top: 12px;
  box-shadow: none;
  background: #fff;
  overflow: auto;
}

/* Keep existing table mechanics intact */
body:not(.lovable-page) .objectListingTable.head,
body:not(.lovable-page) .objectListingTable.data {
  border-radius: 0;
  box-shadow: none;
}

body:not(.lovable-page) .objectListingTable table thead {
  background: #f7f4ff;
  color: #24164a;
}

body:not(.lovable-page) .objectListingTable th {
  font-size: 11px;
  color: #4b3b77;
  letter-spacing: 0.02em;
}

body:not(.lovable-page) .objectListingTable td {
  font-size: 12px;
  color: #152334;
}

/* Filter controls inside listings */
body:not(.lovable-page) .objectListingTable .filterText,
body:not(.lovable-page) .objectListingTable .filterSelect {
  border: 1px solid rgba(124, 92, 255, 0.14);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  padding: 5px 8px;
}

/* Bottom controls under listings */
body:not(.lovable-page) .objectControls {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

body:not(.lovable-page) .objectControls .btn {
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 600;
  box-shadow: none;
}

/* Generic cards/regions if used by legacy pages */
body:not(.lovable-page) .region,
body:not(.lovable-page) .reportElement,
body:not(.lovable-page) .pva-card {
  border-radius: 18px;
  border-color: rgba(124, 92, 255, 0.10);
  box-shadow: 0 12px 32px rgba(84, 43, 160, 0.05);
}

/* Minor spacing rhythm for stacked major blocks */
body:not(.lovable-page) .main-content > * + * {
  margin-top: 0;
}

body:not(.lovable-page) .main-content > [ai-describable] + [ai-describable] {
  margin-top: 36px;
}

/* Mobile */
@media (max-width: 900px) {
  body:not(.lovable-page) .sectionTitle {
    font-size: 21px;
  }

  body:not(.lovable-page) .sectionContent {
    padding: 18px 16px 16px;
    border-radius: 18px;
  }

  body:not(.lovable-page) .app-page-title {
    font-size: 30px;
  }

  body:not(.lovable-page) .objectControls {
    justify-content: stretch;
  }

  body:not(.lovable-page) .objectControls .btn {
    flex: 1 1 auto;
  }
}

body:not(.lovable-page) .objectListingTable table {
  border-collapse: separate;
  border-spacing: 0;
}

body:not(.lovable-page) .objectListingTable table thead tr.hd th:first-child {
  border-top-left-radius: 16px;
}

body:not(.lovable-page) .objectListingTable table thead tr.hd th:last-child {
  border-top-right-radius: 16px;
}

body:not(.lovable-page) .objectListingTable table thead tr.hd th:first-child > div {
  border-top-left-radius: 16px;
}

body:not(.lovable-page) .objectListingTable table thead tr.hd th:last-child > div {
  border-top-right-radius: 16px;
}


/* Coalesced title regions */
.app-v2-header {
  margin-bottom:16px;
}

.app-v2-breadcrumbs {
  margin-bottom:4px;
  opacity:0.7;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.app-v2-breadcrumbs > * {
  display:inline-block;
  vertical-align:top;
}
.app-v2-breadcrumbs > *:NOT(:first-child)::before {
  content:">";
  pointer-events:none;
  color:#000;
  margin-left:8px;
  margin-right:8px;
  font-weight:bold;
  cursor:normal;
}

.app-v2-title {
  font-size:24px;
  font-weight:600;
  line-height:1.2;
  margin-bottom:6px;
  color:#241b4b;
}

.app-v2-byline {
  font-size:14px;
  opacity:0.8;
  color:#7d74a8;
}

.sectionContent > .para > div {
  margin-bottom:8px;
}