/* Hayler light workspace: layout adapted from the approved Sites prototype.
   Branding stays orange. Financial and integration states retain their meaning. */
:root {
  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-canvas: #f3f4f2; --ui-sidebar: #e9ece8; --ui-line: #dfe4df;
  --ui-ink: #202822; --ui-muted: #66736b; --ui-subtle: #748078;
  --ui-shadow: 0 1px 2px #14231b05, 0 8px 24px #14231b05;
  --ui-radius: 16px;
}
.app-body { background: var(--ui-canvas); font-family: var(--ui-font); font-size: 14px; }
.app-body .app-shell { grid-template-columns: 232px minmax(0, 1fr); }
.app-body .app-sidebar {
  height: 100vh; height: 100dvh; padding: 24px 12px 16px; overflow: hidden;
  background: var(--ui-sidebar); color: var(--ui-ink); border-right: 1px solid #d8ded8;
}
.app-sidebar .app-brand { padding: 0 10px 22px; border-bottom: 1px solid #d5dcd6; color: var(--ui-ink); }
.app-sidebar .app-brand-mark { width: 38px; height: 38px; }
.app-sidebar .app-brand strong { font-size: 24px; font-weight: 750; letter-spacing: -.045em; }
.app-sidebar .app-nav { padding: 12px 0; overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.app-sidebar .app-nav p { margin: 16px 12px 8px; color: #68766d; font-size: 11px; letter-spacing: .1em; }
.app-sidebar .app-nav a { min-height: 44px; padding: 10px 12px; gap: 11px; grid-template-columns: 20px minmax(0, 1fr) auto; color: #59675e; font-size: 14px; border-radius: 10px; }
.app-sidebar .app-nav a > b { font-weight: 600; }
.app-sidebar .app-nav a:hover { background: #ffffff90; color: var(--ui-ink); }
.app-sidebar .app-nav a.active { background: #fff; color: var(--brand-orange-ink); box-shadow: 0 2px 10px #192b2010, inset 3px 0 var(--brand-orange); }
.app-sidebar .app-nav em { min-width: 22px; height: 22px; background: #f6e6db; color: #93420c; font-size: 11px; }
.ui-icon { display: inline-block; width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.app-sidebar .sidebar-status { flex: none; margin-top: auto; background: #f8faf7; border-color: #d7e0d8; padding: 12px; }
.app-sidebar .sidebar-status strong { color: #415b4c; font-size: 12px; line-height: 1.4; }
.app-sidebar .sidebar-status small { margin-left: 0; color: var(--ui-muted); font-size: 11px; line-height: 1.5; }
.sidebar-status.is-pending i, .sidebar-status.is-offline i { background: #929e96; box-shadow: none; }
.sidebar-status.is-error i { background: #bd5145; box-shadow: none; }
.app-sidebar .sidebar-account { flex: none; margin-top: 14px; padding: 14px 8px 0; border-top: 1px solid #d5dcd6; grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 10px; }
.app-sidebar .sidebar-account > span { width: 34px; height: 34px; background: #f7dcc8; color: #8c430f; border-radius: 10px; font-size: 12px; }
.app-sidebar .sidebar-account strong { color: var(--ui-ink); font-size: 13px; overflow-wrap: anywhere; }
.app-sidebar .sidebar-account small { color: var(--ui-muted); font-size: 11px; }
.app-sidebar .sidebar-account button[type=submit] { min-height: 34px; width: 30px; color: #586a5e; font-size: 18px; }
.app-body .app-stage { min-width: 0; background: var(--ui-canvas); }
.app-body .app-topbar { min-height: 76px; height: auto; padding: 16px 28px; border-color: var(--ui-line); background: #fafbf8eb; gap: 16px; }
.app-topbar > div { min-width: 0; }
.app-topbar > div > strong { font-size: 19px; font-weight: 700; letter-spacing: -.025em; }
.app-topbar .today-label { font-size: 13px; color: var(--ui-muted); }
.app-topbar .topbar-actions { gap: 12px !important; }
.app-topbar .portal-search { height: 42px; width: min(330px, 28vw); background: #fff; border-radius: 10px; }
.app-topbar .portal-search input { font-size: 14px; }
.app-body :is(.dashboard-page, .hayler-page, .procurement-page, .products-page, .tm-page, .settings-page, .finance-main, .people-page) { width: 100%; max-width: 1500px; padding: 28px 28px 56px; margin: 0 auto; }
.app-body .sales-app-page { width: 100%; max-width: 1500px; padding: 0 28px 56px; margin: 0 auto; }
.app-stage main h1, .app-stage .sales-app-heading h1, .app-stage .head-copy h1 { font-family: var(--ui-font); font-size: clamp(28px, 2.7vw, 36px); font-weight: 720; letter-spacing: -.035em; line-height: 1.15; }
.app-stage :is(.dashboard-heading, .page-heading, .procurement-title, .sales-app-heading, .products-heading, .tm-heading) { gap: 20px; margin-bottom: 24px; }
.app-stage :is(.dashboard-heading, .page-heading, .procurement-title, .sales-app-heading) > div > p:last-child { font-size: 14px; line-height: 1.6; color: var(--ui-muted); }
.app-stage :is(.section-kicker, .surface-label, .products-kicker, .tm-eyebrow) { font-size: 11px; font-weight: 750; letter-spacing: .08em; color: #66776b; }
.app-stage :is(.surface, .sales-app-surface, .tm-panel, .finance-section, .settings-card, .products-toolbar, .rates-panel) { border-color: var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); background: #fff; }
.app-stage :is(.surface, .sales-app-surface, .tm-panel, .finance-section, .settings-card) h2 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.app-stage :is(.surface, .sales-app-surface, .tm-panel, .finance-section, .settings-card) header p { font-size: 13px; line-height: 1.5; }
.app-stage :is(.primary-action, .primary-button, .secondary-action) { min-height: 42px; height: auto; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.25; gap: 8px; }
.app-stage :is(.primary-action, .secondary-action) { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.app-stage .primary-action b { font-size: inherit; }
.app-stage .secondary-action { background: #fff; color: #485a4e; border-color: var(--ui-line); }
.app-stage .secondary-action:hover { background: #f8faf6; }
.app-stage button:disabled { cursor: not-allowed; opacity: .6; }
.app-stage :is(.procurement-tabs, .tm-tabs, .products-view-switch) { border-color: #dce2dc; background: #e9ece8; border-radius: 12px; padding: 4px; }
.app-stage :is(.procurement-tabs, .tm-tabs) button { min-height: 40px; height: auto; padding: 10px 16px; font-size: 14px; border-radius: 9px; }
.app-stage :is(.procurement-tabs, .tm-tabs) button.active { background: #fff; color: var(--brand-orange-ink); box-shadow: 0 2px 8px #172c2010; }
.app-stage :is(.sales-app-kpis, .tm-metrics, .products-metrics, .kpi-grid, .hayler-metrics, .demand-metrics) article { min-width: 0; padding: 20px; border-radius: 14px; border-color: var(--ui-line); }
.app-stage :is(.sales-app-kpis, .tm-metrics, .products-metrics, .kpi-grid, .hayler-metrics, .demand-metrics) article > span { font-size: 13px; line-height: 1.4; color: var(--ui-muted); }
.app-stage :is(.sales-app-kpis, .tm-metrics, .products-metrics, .kpi-grid, .hayler-metrics, .demand-metrics) strong { font-family: var(--ui-font); font-size: clamp(22px, 2.1vw, 28px); font-weight: 720; letter-spacing: -.04em; overflow-wrap: anywhere; }
.app-stage :is(.sales-app-kpis, .tm-metrics, .products-metrics, .kpi-grid, .hayler-metrics, .demand-metrics) small { font-size: 12px; color: var(--ui-muted); line-height: 1.5; }
.app-stage :is(.sync-state, .connection-state, .data-mode) { border-radius: 12px; padding: 12px 14px; }
.app-stage :is(.sync-state, .connection-state, .data-mode) strong { font-size: 13px; }
.app-stage :is(.sync-state, .connection-state, .data-mode) small { font-size: 12px; }
.app-stage .designed-empty { min-height: 220px; padding: 26px; }
.app-stage .designed-empty strong { font-size: 14px; line-height: 1.5; }
.app-stage .designed-empty p { font-size: 13px; line-height: 1.6; color: var(--ui-muted); }
.app-stage .compact-empty { font-size: 13px; color: var(--ui-muted); padding: 24px; }
.app-stage .chat-meta strong, .app-stage .task-row strong, .app-stage .signal-row strong { font-size: 14px; }
.app-stage .chat-meta small, .app-stage .task-row p, .app-stage .signal-row p { font-size: 12px; line-height: 1.5; }
.app-stage .chat-card { min-height: 88px; }
.app-stage .task-row { min-height: 78px; grid-template-columns: 20px minmax(0, 1fr) auto; }
.app-stage .signal-row { padding: 18px 22px; }
.app-stage .tag { font-size: 11px; }
.app-stage .ceo-request-card { padding: 22px; border-radius: 16px; }
.app-stage .ceo-request-card h3 { font-size: 17px; line-height: 1.4; }
.app-stage .ceo-request-card > p { font-size: 14px; line-height: 1.6; }
.app-stage .ceo-reply-form textarea { font-size: 14px; min-height: 96px; }
.app-stage .ceo-reply-form button[type=submit] { min-height: 42px; font-size: 13px; }
.app-stage .catalog-card { box-shadow: none; }
.app-stage .catalog-copy > strong { font-size: 15px; }
.app-stage :is(.catalog-values i, .catalog-copy > small, .catalog-copy > em, .catalog-footer > em) { font-size: 12px; }
.app-stage .catalog-values b { font-size: 14px; }
.app-stage :is(.procurement-table, .app-data-table) th { font-size: 12px; padding-block: 13px; }
.app-stage :is(.procurement-table, .app-data-table) td { font-size: 14px; min-height: 68px; }
.app-stage :is(.procurement-table, .app-data-table) td small { font-size: 12px; }
.app-stage .sales-subnav { height: auto; min-height: 56px; margin: 0 -28px 24px; padding-inline: 28px; }
.app-stage .sales-subnav a { font-size: 14px; padding-block: 20px; }
.app-stage .sales-global-filters { padding: 18px; border-radius: 14px; }
.app-stage :is(.sales-global-filters, .procurement-filters) label { font-size: 12px; }
.app-stage :is(.sales-global-filters, .procurement-filters) select, .app-stage :is(.sales-global-filters, .procurement-filters) input { font-size: 14px; height: 42px; border-radius: 9px; }
.app-stage .finance-head { gap: 28px; }
.app-stage .finance-section { overflow: hidden; margin-top: 20px; }
.app-stage .finance-section > header { padding: 22px 24px; }
.app-stage .finance-section > header h2 { font-size: 20px; }
.app-stage :is(.rates-panel, .chart-panel) { border-radius: 14px; }
.app-stage .settings-nav button { min-height: 62px; border-radius: 12px; padding: 12px; }
.app-stage .settings-nav button b { font-size: 14px; }
.app-stage .settings-nav button small { font-size: 12px; line-height: 1.4; }
.app-stage .settings-form label, .app-stage .module-settings-form label { font-size: 13px; }
.app-stage .settings-form input, .app-stage .module-settings-form input { min-height: 42px; font-size: 14px; }
.app-stage :is(.tm-person b, .tm-role b, .tm-salary, .tm-dept-card b) { font-size: 14px; }
.app-stage :is(.tm-person small, .tm-role small, .tm-dept-card small) { font-size: 12px; }
.app-stage .tm-person-row { min-height: 78px; }
.app-body :is(.product-drawer, .sales-drawer, .tm-drawer) h2 { font-family: var(--ui-font); font-size: 26px; font-weight: 700; line-height: 1.25; }
.app-body :is(.product-drawer, .sales-drawer) h3 { font-size: 16px; }
.app-body :is(.product-drawer, .sales-drawer) :is(.drawer-sub, .drawer-meta, .drawer-photo) { font-size: 13px; }

/* Overview: four operating KPIs, signals, tasks and a compact right rail. */
.overview-v3 .overview-welcome { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 22px; }
.overview-v3 .overview-welcome h1 { margin: 8px 0; }
.overview-v3 .overview-welcome p:last-child { margin: 0; color: var(--ui-muted); font-size: 15px; line-height: 1.5; }
.overview-v3 .overview-pulse { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 24px; border-radius: 18px; background: linear-gradient(115deg, #272e28, #39483b); color: #fff; box-shadow: 0 12px 28px #1b2e2012; }
.overview-pulse-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #ff6b0026; color: #ffb57f; }
.overview-pulse-icon .ui-icon { width: 24px; height: 24px; }
.overview-pulse .overview-eyebrow { color: #ffca9f; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.overview-v3 .overview-pulse h2 { margin: 6px 0; font-size: 22px; letter-spacing: -.025em; line-height: 1.3; }
.overview-pulse p { margin: 0; color: #d1dbd2; font-size: 13px; line-height: 1.6; }
.overview-pulse > a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 14px; border-radius: 10px; background: #fff; color: #3e483d; text-decoration: none; font-size: 13px; font-weight: 650; white-space: nowrap; }
.overview-v3 .overview-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.overview-v3 .overview-metrics article { min-width: 0; padding: 20px; min-height: 136px; border-radius: 14px; background: #fff; border: 1px solid var(--ui-line); }
.overview-v3 .overview-metrics article.is-warning { border-color: #ecd1ad; background: #fffdf8; }
.overview-v3 .overview-metrics article > span { display: flex; align-items: center; gap: 8px; color: var(--ui-muted); font-size: 13px; }
.overview-v3 .overview-metrics article > span .ui-icon { color: #8b6c53; width: 17px; height: 17px; }
.overview-v3 .overview-metrics strong { display: block; margin: 14px 0 8px; font-size: clamp(24px, 2.1vw, 30px); font-weight: 720; letter-spacing: -.045em; overflow-wrap: anywhere; line-height: 1.1; }
.overview-v3 .overview-metrics small { display: block; margin: 0; color: var(--ui-muted); font-size: 12px; line-height: 1.5; }
.overview-v3 .overview-layout { display: grid; grid-template-columns: minmax(0, 1fr) 276px; gap: 16px; align-items: start; }
.overview-v3 .overview-main { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.overview-v3 .overview-side { display: grid; grid-template-columns: 1fr; gap: 16px; min-width: 0; }
.overview-v3 .overview-card { overflow: hidden; min-width: 0; border-radius: 16px; }
.overview-v3 .overview-decisions-card { margin-bottom: 16px; }
.overview-v3 .overview-decisions-card .designed-empty { min-height: 130px; }
.overview-v3 .overview-decisions-card .overview-task-row { grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; }
.overview-v3 .overview-decisions-card .overview-task-row > time { color: var(--ui-muted); font-size: 11px; white-space: nowrap; }
.overview-v3 .overview-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; border-bottom: 1px solid #e8ece8; }
.overview-v3 .overview-card header h2 { margin: 5px 0 0; font-size: 17px; }
.overview-v3 .overview-card header a { display: inline-flex; align-items: center; font-size: 12px; color: var(--ui-muted); white-space: nowrap; text-decoration: none; }
.overview-v3 .overview-card header a .ui-icon { width: 14px; height: 14px; }
.overview-v3 .overview-feed { padding: 0 20px; }
.overview-v3 .overview-feed article { display: block; padding: 20px 0; border-bottom: 1px solid #e8ece8; }
.overview-v3 .overview-feed article:last-child { border-bottom: 0; }
.overview-v3 .overview-feed article header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.overview-v3 .feed-type { display: inline-block; width: auto; height: auto; min-height: 0; padding: 5px 8px; border-radius: 7px; background: #edf3ee; color: #496b54; font-size: 11px; }
.overview-v3 .feed-type.critical { background: #fff0ed; color: #a7483c; }
.overview-v3 .feed-type.warning { background: #fff3e2; color: #976022; }
.overview-v3 .overview-feed strong { display: block; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.overview-v3 .overview-feed p { margin: 7px 0 0; color: var(--ui-muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.overview-v3 .overview-feed time { color: var(--ui-muted); font-size: 11px; }
.overview-v3 .overview-task-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 20px; border-bottom: 1px solid #e8ece8; text-decoration: none; color: var(--ui-ink); }
.overview-v3 .overview-task-row:last-child { border-bottom: 0; }
.overview-v3 .overview-task-row:hover { background: #fafbf8; }
.overview-task-row > .ui-icon { margin-top: 2px; color: #a27855; }
.overview-task-row strong { display: block; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.overview-task-row p { color: var(--ui-muted); font-size: 12px; line-height: 1.6; margin: 6px 0; }
.overview-task-status { display: inline-block; padding: 4px 8px; border-radius: 7px; background: #edf4ee; color: #3e714e; font-size: 11px; font-weight: 650; }
.overview-task-status.blocked { background: #fff0ed; color: #a7483c; }
.overview-task-status.needs_details { background: #fff3e2; color: #976022; }
.overview-v3 .designed-empty { min-height: 280px; display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 12px; padding: 26px 20px; }
.overview-v3 .designed-empty > .ui-icon { width: 34px; height: 34px; color: #95a397; }
.overview-v3 .overview-channel-metrics { margin: 0; padding: 8px 20px; }
.overview-channel-metrics > div { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; gap: 16px; }
.overview-channel-metrics dt { color: var(--ui-muted); font-size: 13px; }
.overview-channel-metrics dd { margin: 0; color: var(--ui-ink); font-size: 16px; font-weight: 700; }
.overview-channel-status { padding: 14px 20px; border-top: 1px solid #e8ece8; background: #fafbf8; }
.overview-channel-status strong, .overview-channel-status small { display: block; }
.overview-channel-status strong { font-size: 12px; color: #4d6654; }
.overview-channel-status small { margin-top: 5px; font-size: 11px; line-height: 1.5; color: var(--ui-muted); }
.overview-text-link { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; font-size: 13px; font-weight: 650; color: var(--brand-orange-ink); text-decoration: none; border-top: 1px solid #e8ece8; }
.overview-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #e8ece8; }
.overview-quick-actions > a { min-width: 0; display: flex; flex-direction: column; padding: 18px 16px; background: #fff; color: var(--ui-ink); text-decoration: none; }
.overview-quick-actions > a:hover { background: #fff8f1; }
.overview-quick-actions .ui-icon { width: 30px; height: 30px; padding: 6px; border-radius: 8px; color: var(--brand-orange-ink); background: var(--brand-orange-soft); margin-bottom: 14px; }
.overview-quick-actions strong { font-size: 13px; font-weight: 650; }
.overview-quick-actions small { margin-top: 5px; font-size: 11px; color: var(--ui-muted); line-height: 1.4; }
.overview-data-note { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 18px; font-size: 12px; color: var(--ui-muted); line-height: 1.5; }
.overview-data-note .ui-icon { width: 14px; height: 14px; }
/* Keep the welcome screen in the same visual language. */
.login-card h2, .brand-copy h1 { font-family: var(--ui-font); font-weight: 700; letter-spacing: -.04em; }
.brand-copy h1 { font-size: clamp(36px, 4vw, 58px); line-height: 1.1; }
.login-card h2 { font-size: 36px; }
@media (max-width: 1280px) {
  .overview-v3 .overview-layout { grid-template-columns: 1fr; }
  .overview-v3 .overview-side { grid-template-columns: 1fr 1fr; }
  .app-stage .finance-head { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) {
  .overview-v3 .overview-metrics { grid-template-columns: 1fr 1fr; }
  .app-stage .sales-app-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-stage .procurement-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-stage .procurement-filters .wide-filter { grid-column: 1/-1; }
}
@media (max-width: 900px) {
  .overview-v3 .overview-main { grid-template-columns: 1fr; }
  .overview-v3 .overview-pulse { grid-template-columns: 40px minmax(0, 1fr); }
  .overview-v3 .overview-pulse > a { grid-column: 1/-1; }
  .app-topbar .today-label { display: none; }
}
@media (max-width: 760px) {
  .app-body .app-shell { display: block; }
  .app-body .app-sidebar { position: fixed; width: 272px; left: -290px; top: 0; z-index: 20; box-shadow: 12px 0 35px #10231a22; }
  .app-body.menu-open .app-sidebar { left: 0; }
  .app-body .app-topbar { min-height: 66px; padding: 12px 16px; gap: 10px; }
  .app-topbar > div > strong { font-size: 16px; }
  .app-body :is(.dashboard-page, .hayler-page, .procurement-page, .products-page, .tm-page, .settings-page, .finance-main, .people-page) { padding: 24px 16px 44px; }
  .app-body .sales-app-page { padding: 0 16px 44px; }
  .app-topbar .portal-search { width: min(170px, 36vw); }
  .app-stage .primary-action { display: inline-flex; }
  .app-stage .overview-welcome { align-items: start; flex-direction: column; gap: 16px; }
  .overview-v3 .overview-welcome > a { width: 100%; }
  .overview-v3 .overview-pulse { padding: 20px; gap: 14px; }
  .overview-v3 .overview-pulse h2 { font-size: 20px; }
  .overview-v3 .overview-side { grid-template-columns: 1fr; }
  .overview-v3 .overview-metrics article { padding: 16px; }
  .app-stage .procurement-tabs { max-width: 100%; overflow: auto; }
  .app-stage .procurement-tabs button { flex: 0 0 auto; white-space: nowrap; padding-inline: 14px; }
  .app-stage .finance-section > header { padding: 18px; gap: 14px; flex-wrap: wrap; }
  .app-stage .sales-subnav { margin-inline: -16px; padding-inline: 16px; overflow-x: auto; flex-wrap: nowrap; gap: 20px; }
  .app-stage .sales-subnav a { white-space: nowrap; }
  .app-stage .task-row { grid-template-columns: 20px minmax(0, 1fr); }
  .app-stage .task-row .tag { grid-column: 2; justify-self: start; }
}
@media (max-width: 460px) {
  .overview-v3 .overview-metrics { grid-template-columns: 1fr; }
  .overview-v3 .overview-card > header { flex-wrap: wrap; }
  .overview-data-note { justify-content: flex-start; }
}