/* One visual vocabulary for the shell, reports, forms and operational pages. */
:root {
  --font-main: 'Mulish', system-ui, -apple-system, sans-serif;
  --bg-page: #f1f6fd;
  --bg-card: #fff;
  --bg-muted: #f5f9ff;
  --bg-blue-soft: #eaf3ff;
  --border: #e3ecf8;
  --line: rgb(37 99 235 / 8%);
  --field-line: #dbe6f5;
  --field-bg: #f8fbff;
  --text-primary: #14284b;
  --text-secondary: #4f6587;
  --text-muted: #6a7f9e;
  --ink: #14284b;
  --blue-400: #38bdf8;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --indigo-500: #3b82f6;
  --indigo-600: #2563eb;
  --indigo-700: #1d4ed8;
  --indigo-800: #1e40af;
  --indigo-soft: rgb(37 99 235 / 10%);
  --indigo-softer: rgb(37 99 235 / 6%);
  --radius-card: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgb(30 64 175 / 4%), 0 6px 20px -10px rgb(30 64 175 / 14%);
  --shadow-card-hover: 0 2px 4px rgb(30 64 175 / 6%), 0 12px 28px -12px rgb(30 64 175 / 22%);
  --accent-grad: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
  --grad-header: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
  --page-glow: #f1f6fd;
  --accent-glow: none;
  --focus-ring: 0 0 0 3px rgb(14 165 233 / 22%);
  --page-pad-y: 1.5rem;
  --page-pad-x: 1.5rem;
}
html { color-scheme: light; }
body.analytics-app {
  font-family: var(--font-main);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}
.analytics-app *, .analytics-app *::before, .analytics-app *::after { box-sizing: border-box; }
.analytics-app :is(button, input, select, textarea) { font-family: inherit; }
.analytics-app :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}
.analytics-app :is(button, input, select, textarea):disabled { cursor: not-allowed; }
.analytics-app :is(h1, h2, h3) { letter-spacing: -.02em; }
.analytics-app table { font-size: .8125rem; border-collapse: separate; border-spacing: 0; }
.analytics-app th { font-weight: 700; line-height: 1.4; }
.analytics-app td { font-variant-numeric: tabular-nums; line-height: 1.5; }
.analytics-app :is(.u-table, .data-table, .tbl-table) th {
  background: #f8fafc;
  color: #52647e;
  border-bottom: 1px solid var(--border);
}
.analytics-app :is(.u-card, .u-panel, .u-mgmt-kpi, .u-mgmt-chart-card, .tbl-card, .tbl-kpi, .glass-card, .stat-card, .metric-card) {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.analytics-app > .header { text-align: left; margin-bottom: 1.25rem; }
.analytics-app > .header h1 { justify-content: flex-start; font-size: 1.5rem; text-shadow: none; }
.analytics-app > .header p { font-size: .875rem; color: var(--text-secondary); }
.analytics-app :is(.analytics-table, .data-table) thead th { background: #f8fafc; color: #52647e; }
.analytics-app :is(.u-page-header, .u-mgmt-head) {
  background: transparent;
  text-align: left;
  padding: 1.25rem 1.5rem;
  border-bottom: 0;
}
.analytics-app .u-page-header h1 { justify-content: flex-start; font-size: 1.5rem; }
.analytics-app .u-mgmt-head { padding: .25rem 0 1rem; }
.analytics-app .u-mgmt-head h2 { font-size: 1.5rem; }
.analytics-app :is(.u-page-header p, .u-mgmt-head p) { color: var(--text-secondary); font-size: .875rem; }
.analytics-app :is(.u-container, .u-container-wide) { padding: 1.25rem 1.5rem 3rem; }
.analytics-app :is(.u-mgmt-toolbar, .filter-bar, .filters-bar) {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.analytics-app .u-mgmt-kpi-label { color: var(--text-secondary); }
.analytics-app .u-mgmt-kpi-value { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.analytics-app .u-mgmt-seg { box-shadow: none; }
.analytics-app .u-mgmt-seg button.is-active { color: #fff; background: #2563eb; box-shadow: none; }
.analytics-app .u-mgmt-btn { background: #2563eb; box-shadow: none; }
.analytics-app .u-shell-header {
  background: #fff;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.analytics-app.u-shell { --sidebar-width: 256px; }
.analytics-app .u-shell-header-content { max-width: none; padding-inline: 1.25rem; }
.analytics-app .u-shell-header h1 { color: var(--text-primary); font-size: 1.125rem; }
.analytics-app .u-shell-header h1 > .material-icons-outlined { color: #2563eb; }
.analytics-app :is(.u-currency-selector, .u-lang-selector, .u-shell-logout) {
  background: #f8fafc;
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 8px;
  box-shadow: none;
}
.analytics-app :is(.u-currency-selector, .u-lang-selector):hover,
.analytics-app .u-shell-logout:hover { background: #edf2f9; color: var(--text-primary); }
.analytics-app :is(.u-currency-selector, .u-lang-selector) select,
.analytics-app :is(.u-currency-selector, .u-lang-selector) select option { background: transparent; color: var(--text-primary); }
.analytics-app .u-burger { color: var(--text-primary); border-color: var(--border); }
.analytics-app .u-sidebar { background: #fff; box-shadow: none; }
.analytics-app .u-sidebar:not(.is-collapsed) { width: 256px; flex-basis: 256px; }
.analytics-app .u-sidebar-head { padding: 1rem; }
.analytics-app .u-sidebar-head h2 { font-size: .8125rem; color: var(--text-secondary); }
.analytics-app .u-menu-section { margin-bottom: .75rem; }
.analytics-app .u-menu-section h3 { color: var(--text-muted); font-size: .65rem; letter-spacing: .075em; }
.analytics-app .u-menu-item { border-radius: 8px; font-size: .8125rem; }
.analytics-app .u-menu-item.is-active { background: #eaf1ff; color: #1d4ed8; box-shadow: none; }
.analytics-app .u-menu-item.is-active .material-icons-outlined { color: #1d4ed8; }
.analytics-app .u-menu-badge { box-shadow: none; }
.analytics-app .u-shell-iframe { background: var(--bg-page); }
@media (max-width: 768px) {
  .analytics-app .u-shell-header-content { padding-inline: .75rem; gap: .5rem; }
  .analytics-app .u-shell-header-right { gap: .375rem; }
  .analytics-app .u-shell-header h1 { font-size: .9375rem; }
  .analytics-app :is(.u-container, .u-container-wide, .u-page-header) { padding-inline: .75rem; }
  .analytics-app .u-mgmt-page { padding-inline: .75rem; }
  .analytics-app .u-mgmt-grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-app .u-mgmt-kpi { padding: .875rem; min-width: 0; }
  .analytics-app .u-mgmt-kpi-value { font-size: 1.125rem; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .analytics-app *, .analytics-app *::before, .analytics-app *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Menu search must override the existing flex menu-item display. */
.analytics-app .u-sidebar [hidden] { display: none !important; }
.a-menu-search { padding: .75rem 1rem 1rem; }
.a-menu-search input { width: 100%; min-height: 38px; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; padding: .5rem .65rem; color: var(--text-primary); }
.a-menu-search input:focus { outline: none; border-color: #2563eb; background: #fff; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.a-menu-search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.a-menu-empty { padding: 0 1rem; color: var(--text-secondary); font-size: .85rem; }
.u-sidebar.is-collapsed .a-menu-search, .u-sidebar.is-collapsed .a-menu-empty { display: none; }
.analytics-app .ecom-col-error { max-width: 280px; white-space: normal; overflow-wrap: anywhere; }

/* Shared sizing and surfaces for reports. Semantic colours remain page-owned. */
.analytics-app.u-page { background: var(--bg-page); }
.analytics-app.u-page h1 { font-size: 1.5rem; line-height: 1.3; font-weight: 800; }
.analytics-app.u-page h2 { line-height: 1.4; }
.analytics-app :is(.oe-title-icon, .cp-title-icon, .mo-title-icon, .so-title-icon, .se-title-icon, .pm-title-icon, .u-icon-tile) {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px;
  background: #eaf1ff; color: #2563eb; box-shadow: none;
}
.analytics-app :is(.oe-card, .mo-card, .pm-card, .cst-card, .so-filter-card, .so-kpi, .se-card, .se-kpi, .ecom-kpi) {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.analytics-app :is(.u-input, .oe-input, .pm-input, .mo-input, .cst-input, .filter-input, .form-control) {
  min-height: 40px; border-radius: var(--radius-sm); border-color: var(--border); font-size: .875rem;
}
.analytics-app :is(.u-btn, .oe-btn, .pm-btn, .mo-btn, .se-btn, .cst-btn) {
  min-height: 40px; border-radius: var(--radius-sm); box-shadow: none; font-weight: 700;
}
.analytics-app :is(.u-btn, .oe-btn, .pm-btn, .mo-btn, .se-btn, .cst-btn):hover { transform: none; }
.analytics-app :is(.oe-subtitle, .cp-subtitle, .mo-subtitle, .so-page-subtitle, .pm-subtitle, .se-subtitle) {
  color: var(--text-secondary); font-size: .875rem; line-height: 1.5;
}
.analytics-app .u-menu-section > summary { display: flex; align-items: center; gap: .25rem; cursor: pointer; list-style: none; padding: .5rem .75rem; border-radius: 8px; }
.analytics-app .u-menu-section > summary::-webkit-details-marker { display: none; }
.analytics-app .u-menu-section > summary:hover { background: var(--bg-muted); }
.analytics-app .u-menu-section > summary:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.analytics-app .u-menu-section > summary h3 { flex: 1; margin: 0; padding: 0; display: flex; align-items: center; gap: .5rem; }
.a-menu-chevron { font-size: 18px; color: var(--text-muted); transform: rotate(-90deg); }
.u-menu-section[open] > summary .a-menu-chevron { transform: none; }
.analytics-app .u-sidebar.is-collapsed .u-menu-section > summary { display: none; }

/* Components used by compact operational pages. */
.a-page { max-width: 1520px; margin: 0 auto; padding: 1.25rem 1.5rem 3rem; }
.a-page-header { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1.25rem; }
.a-page-header h1 { margin: 0; }
.a-page-header p { margin: .35rem 0 0; color: var(--text-secondary); font-size: .875rem; line-height: 1.5; }
.a-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; padding: 1rem; margin-bottom: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); }
.a-field { display: flex; flex-direction: column; gap: .375rem; color: var(--text-secondary); font-size: .8125rem; font-weight: 700; }
.a-field input { min-height: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-muted); padding: .5rem .75rem; color: var(--text-primary); font-size: .875rem; }
.a-button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 40px; padding: .5rem 1rem; border: 1px solid #2563eb; border-radius: var(--radius-sm); background: #2563eb; color: white; font-size: .875rem; font-weight: 700; cursor: pointer; }
.a-button:hover:not(:disabled) { background: #1d4ed8; }
.a-button:disabled { opacity: .65; }
.a-button .material-icons-outlined { font-size: 18px; }
.a-status { color: var(--text-secondary); font-size: .8125rem; align-self: center; }
.a-status.is-error { color: #b91c1c; }
.a-state { padding: 2rem 1rem; color: var(--text-secondary); text-align: center; line-height: 1.5; }
.a-state.is-error { color: #b91c1c; }
.a-table-wrap { overflow: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); }
.a-table { width: 100%; }
.a-table th, .a-table td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
.a-table th { background: var(--bg-muted); color: var(--text-secondary); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.a-table tr:last-child td { border-bottom: 0; }
.a-table tbody tr:hover { background: var(--bg-muted); }
.a-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.a-kpi { padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); }
.a-kpi span { display: block; color: var(--text-secondary); font-size: .75rem; }
.a-kpi b { display: block; margin-top: .5rem; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.a-live-card { display: flex; align-items: center; gap: .75rem; padding: 1rem; margin-bottom: .5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); }
.a-live-card .a-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; flex: 0 0 9px; }
.a-live-card.active .a-live-dot { background: #059669; }
.a-live-card.idle .a-live-dot { background: #d97706; }
.a-live-name { font-weight: 700; }
.a-live-meta { color: var(--text-secondary); font-size: .8125rem; margin-top: .3rem; overflow-wrap: anywhere; }
.analytics-app .a-table a, .analytics-app .a-live-name a { color: #1d4ed8; }
@media (max-width: 768px) { .a-page { padding: 1rem .75rem 2rem; } .a-toolbar { padding: .75rem; } .a-toolbar .a-field { flex: 1; min-width: 140px; } }

/* Brand logo, blue palette, one page padding and one surface style for every page. */
.a-brand-logo { display: block; width: auto; height: 24px; flex: 0 0 auto; }
.u-auth-title .a-brand-logo { height: 34px; }
.analytics-app .u-shell-header { border-bottom-color: var(--border); box-shadow: 0 1px 0 rgb(37 99 235 / 4%); }
.analytics-app :is(.u-currency-selector, .u-lang-selector, .u-shell-logout, .u-burger) {
  background: var(--bg-blue-soft); border-color: transparent; color: #1e40af;
}
.analytics-app :is(.u-currency-selector, .u-lang-selector, .u-shell-logout, .u-burger):hover { background: #dbeafe; color: #1e40af; }
.analytics-app :is(.u-currency-selector, .u-lang-selector) select { color: #1e40af; }
.analytics-app .u-sidebar { border-right: 1px solid var(--border); }
.analytics-app .u-menu-item:hover { background: var(--bg-muted); color: #1d4ed8; }
.analytics-app .u-menu-item.is-active { background: linear-gradient(90deg, #e3eeff 0%, #e0f2fe 100%); color: #1d4ed8; }
.a-menu-search input { border-color: transparent; background: var(--bg-muted); }

body.analytics-app > :is(.u-container, .u-container-wide, .ecom-wrap, .oe-shell, .nox-shell, .cp-shell, .pe-shell, .pm, .lgm-shell, .cpq-shell, .tg-shell, .mo-shell, .sm-shell, .pb-shell, .rc-shell, .ttx-shell, .mtx-shell, .mp-shell, .rf-shell, .rp-shell, .ar-shell, .ap-shell, .page, .dbs, .tws-wrap, .ta, .mb-shell, .bl-shell, .cl-shell, .al-shell, .cb-shell, .a-page, .se, .sr, .so, .sla, .rs, .rfql-shell) {
  padding: var(--page-pad-y) var(--page-pad-x) 3rem;
}
html body.analytics-app:not(.u-shell, .u-auth-page) h1 { font-size: 1.5rem; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; }
.analytics-app .ap-title-block { text-align: left; }
.analytics-app .ap-page-head > div[style*="width:90px"] { display: none; }

.analytics-app :is([class$="-card"], [class*="-card "], [class$="-kpi"], [class*="-kpi "], [class$="-table-wrap"], [class*="-table-wrap "], [class$="-toolbar"], [class*="-toolbar "], .u-card, .u-panel, .glass-card, .panel, .se-filter, .ar-list, .ar-detail, .cp-kpi-strip, .tgn-filters-panel):not([class*="--"]) {
  border-color: var(--border);
  border-radius: var(--radius-card);
}
.analytics-app :is([class$="-card"], [class*="-card "], [class$="-kpi"], [class*="-kpi "], [class$="-table-wrap"], [class*="-table-wrap "], .u-card, .u-panel, .glass-card, .panel, .se-filter, .ar-list, .ar-detail, .cp-kpi-strip, .tgn-filters-panel, .a-toolbar):not([class*="--"]):not(:is([class$="-card"], [class*="-card "], .u-card, .u-panel, .panel) *) {
  box-shadow: var(--shadow-card);
}
.analytics-app thead th:not(:is(.ecom-table, .cst-table, .trader-gpt-table-card) th) {
  background-color: var(--bg-muted);
  border-bottom-color: var(--border);
}
.analytics-app tbody td { border-bottom-color: #edf2fa; }
.analytics-app :is(.u-input, .oe-input, .pm-input, .mo-input, .cst-input, .filter-input, .form-control, .a-field input, .ts-control) {
  border-color: var(--field-line);
  border-radius: var(--radius-sm);
}
.analytics-app :is(.a-button, .u-mgmt-btn, .tg-btn--accent) { background: var(--accent-grad); border-color: transparent; color: #fff; }
.analytics-app :is(.a-button, .u-mgmt-btn, .tg-btn--accent):hover:not(:disabled) { background: var(--accent-grad); filter: brightness(1.06); }
@media (max-width: 768px) {
  .analytics-app { --page-pad-y: 1rem; --page-pad-x: .75rem; }
}