/* DESIGN SETTINGS: brand primary is supplied by Config.primary in js/config.js.
   Change other palette, typography, radii and spacing values only in this block. */
:root {
  --primary: #831100;
  --accent: #65738a;
  --bg: #f7f6f4;
  --paper: #ffffff;
  --text: #25272c;
  --muted: #62666f;
  --line: #e1dfdb;
  --soft: #f1f0ed;
  --nav-bg: #25272c;
  --on-primary: #ffffff;
  --nav-text: #f8f7f5;
  --normal: #187348;
  --normal-bg: #eaf5ef;
  --warning: #994900;
  --warning-bg: #fff2e3;
  --danger: #b42318;
  --danger-bg: #fff0ed;
  --demo: #59616d;
  --demo-bg: #eceef1;
  --shadow: 0 4px 18px #25272c08;
  --dialog-shadow: 0 20px 80px #25272c26;
  --backdrop: #25272c80;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: 15px;
  --font-small: 12px;
  --font-label: 13px;
  --font-table: 14px;
  --font-heading: clamp(26px, 2.4vw, 32px);
  --font-section: 19px;
  --font-card-title: 14px;
  --font-brand: 23px;
  --font-summary: 18px;
  --font-kpi: clamp(24px, 2.1vw, 32px);
  --font-chart: 12px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --line-height: 1.65;
  --heading-line-height: 1.3;
  --number-line-height: 1.2;
  --brand-letter-spacing: -0.6px;
  --radius: 14px;
  --radius-none: 0;
  --radius-control: 9px;
  --radius-small: 6px;
  --radius-pill: 999px;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space: 20px;
  --space-lg: 28px;
  --space-xl: 36px;
  --space-2xl: 48px;
  --space-3xl: 80px;
  --space-nav-top: 96px;
  --page-padding: 32px;
  --sidebar-width: 240px;
  --content-width: 1760px;
  --board-width: 250px;
  --input-height: 44px;
  --icon-size: 44px;
  --overlay-level: 200;
  --badge-level: 100;
  --focus-ring: 3px;
  --focus-offset: 3px;
  --border-width: 1px;
  --emphasis-border: 2px;
  --form-gap: 18px;
  --chart-min-width: 480px;
  --table-min-width: 640px;
  --cell-max-width: 280px;
  --progress-width: 200px;
  --progress-height: 9px;
  --dialog-width: 900px;
  --dialog-top: 68px;
  --dialog-bottom: 24px;
  --recovery-width: 660px;
  --font-mobile-input: 16px;
  --font-mobile-kpi: 22px;
  --mobile-cell-label: 36%;
  --chart-track-height: 8px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-family); font-size: var(--font-body); line-height: var(--line-height); }
button, select, input, textarea { font: inherit; color: var(--text); background: var(--paper); border: var(--border-width) solid var(--line); border-radius: var(--radius-control); padding: var(--space-xs) var(--space-sm); min-height: var(--input-height); max-width: 100%; }
button { cursor: pointer; font-weight: var(--weight-medium); white-space: normal; overflow-wrap: anywhere; line-height: var(--heading-line-height); }
button:hover { border-color: var(--primary); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, svg [role="button"]:focus-visible { outline: var(--focus-ring) solid var(--primary); outline-offset: var(--focus-offset); }
button:disabled, input:disabled, select:disabled { color: var(--muted); background: var(--soft); }
.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: var(--weight-semibold); }
.primary:hover { box-shadow: inset 0 0 0 var(--border-width) var(--on-primary); }
aside { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); padding: var(--space-nav-top) var(--space) var(--space-lg); background: var(--nav-bg); color: var(--nav-text); overflow-y: auto; }
.workshop { position: fixed; z-index: var(--badge-level); top: var(--space-sm); left: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-small); color: var(--on-primary); background: var(--demo); font-size: var(--font-small); font-weight: var(--weight-semibold); letter-spacing: normal; }
.brand { font-size: var(--font-brand); font-weight: var(--weight-semibold); letter-spacing: var(--brand-letter-spacing); line-height: var(--heading-line-height); margin-bottom: var(--space-xl); overflow-wrap: anywhere; }
nav a { display: block; text-decoration: none; color: var(--nav-text); margin: var(--space-xs) 0; padding: var(--space-sm); border-radius: var(--radius-control); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
nav a.active { color: var(--on-primary); background: var(--primary); }
main { margin-left: var(--sidebar-width); padding: var(--page-padding); max-width: var(--content-width); min-width: 0; }
header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space); margin-bottom: var(--space-lg); }
header > div { min-width: 0; }
.eyebrow, small, .muted { color: var(--muted); }
small { font-size: var(--font-small); overflow-wrap: anywhere; }
h1 { font-size: var(--font-heading); line-height: var(--heading-line-height); margin: var(--space-xs) 0; font-weight: var(--weight-bold); }
h2 { font-size: var(--font-section); line-height: var(--heading-line-height); margin: 0 0 var(--space-sm); font-weight: var(--weight-semibold); }
h3 { font-size: var(--font-card-title); line-height: var(--heading-line-height); margin: 0; font-weight: var(--weight-semibold); }
h1, h2, h3 { overflow-wrap: anywhere; }
p { margin: var(--space-xs) 0; }
.notice { padding: var(--space-sm) var(--space); border: var(--border-width) solid var(--line); background: var(--soft); border-radius: var(--radius-control); overflow-wrap: anywhere; }
.summary { font-size: var(--font-summary); margin: var(--space) 0; line-height: var(--line-height); }
.grid { display: grid; gap: var(--space); }
.kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.regions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { min-width: 0; padding: var(--space); border: var(--border-width) solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.card > .row { align-items: flex-start; }
.card > .row > h3 { flex: 1; min-width: 0; }
.card > .row > button { flex: 0 0 var(--icon-size); }
.value, .sales-summary .value { display: block; max-width: 100%; min-width: 0; font-size: var(--font-kpi); line-height: var(--number-line-height); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; margin: var(--space-sm) 0; padding: 0; color: var(--text); background: transparent; border: 0; text-align: left; overflow-wrap: anywhere; }
.source { display: block; margin-top: var(--space-sm); font-size: var(--font-small); color: var(--demo); }
.section { margin-top: var(--space-lg); }
.attention { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); width: 100%; max-width: 100%; padding: var(--space-sm) 0; border: 0; border-bottom: var(--border-width) solid var(--line); border-radius: var(--radius-none); background: transparent; text-align: left; }
.attention > span { min-width: 0; overflow-wrap: anywhere; }
.attention strong { font-variant-numeric: tabular-nums; }
.badge { display: inline-block; padding: var(--space-xxs) var(--space-xs); background: var(--demo-bg); color: var(--demo); border-radius: var(--radius-small); font-size: var(--font-small); font-weight: var(--weight-medium); line-height: var(--heading-line-height); white-space: normal; overflow-wrap: anywhere; }
.warning, .status-s_new, .status-s_contacted, .status-s_quoted, .status-s_viewing, .status-s_considering, .status-s_estimated, .status-s_toConfirm, .status-pending, .status-in_progress, .status-submitted { color: var(--warning); }
.badge.warning, .badge.status-s_new, .badge.status-s_contacted, .badge.status-s_quoted, .badge.status-s_viewing, .badge.status-s_considering, .badge.status-s_estimated, .badge.status-s_toConfirm, .badge.status-pending, .badge.status-in_progress, .badge.status-submitted { background: var(--warning-bg); }
.status-s_won, .status-s_confirmed, .status-s_paid, .status-s_employed, .status-confirmed, .status-completed, .status-published { color: var(--normal); background: var(--normal-bg); }
.danger, .status-s_lost, .status-s_left, .status-void { color: var(--danger); }
.badge.danger, .badge.status-s_lost, .badge.status-s_left, .badge.status-void { background: var(--danger-bg); }
.attention-c5_salesLate, .attention-c5_salesOverdue, .attention-overdue, .attention-overdueTasks, .attention-lateContent { border-left: var(--emphasis-border) solid var(--danger); padding-left: var(--space-sm); }
.attention-c5_salesCommissions, .attention-approvals, .attention-overBudget { border-left: var(--emphasis-border) solid var(--warning); padding-left: var(--space-sm); }
.row { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) 0; }
svg { width: 100%; height: auto; overflow: visible; }
svg text { fill: var(--muted); font-family: var(--font-family); font-size: var(--font-chart); }
svg [role="button"] { cursor: pointer; }
footer { margin-top: var(--space-xl); font-size: var(--font-small); color: var(--muted); }
dialog { width: min(var(--dialog-width), 95vw); max-height: calc(100dvh - var(--dialog-top) - var(--dialog-bottom)); margin-top: var(--dialog-top); padding: var(--space-lg); border: var(--border-width) solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--text); box-shadow: var(--dialog-shadow); z-index: var(--overlay-level); overflow: auto; }
dialog::backdrop { background: var(--backdrop); }
table { width: 100%; border-collapse: collapse; font-size: var(--font-table); }
td, th { padding: var(--space-sm); border-bottom: var(--border-width) solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
th { font-weight: var(--weight-semibold); background: var(--soft); line-height: var(--heading-line-height); }
tbody tr:hover { background: var(--bg); }
.scroll { overflow: auto; max-width: 100%; }
.tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-sm) 0; }
.tools button, .inline-tools button { flex-shrink: 1; }
header .tools button[aria-pressed="true"] { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
.empty { padding: var(--space-xl); text-align: center; color: var(--muted); }
#toast { display: none; position: fixed; bottom: var(--space); right: var(--space); max-width: calc(100vw - var(--space) - var(--space)); padding: var(--space-sm) var(--space); border-radius: var(--radius-control); color: var(--on-primary); background: var(--nav-bg); font-size: var(--font-body); z-index: var(--overlay-level); overflow-wrap: anywhere; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space); flex-wrap: wrap; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > div { min-width: 0; }
.sales-tabs { display: flex; gap: var(--space-xs); overflow-x: auto; border-bottom: var(--border-width) solid var(--line); margin: var(--space) 0; padding-bottom: var(--space-sm); }
.sales-tabs a { flex-shrink: 0; color: var(--muted); white-space: nowrap; margin: 0; padding: var(--space-sm); text-decoration: none; border-radius: var(--radius-control); }
.sales-tabs a[aria-current] { color: var(--on-primary); background: var(--primary); }
.sales-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.list-tools { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin: var(--space) 0; }
.list-tools label { font-size: var(--font-label); color: var(--muted); min-width: 0; }
.list-tools input, .list-tools select { display: block; width: 100%; margin-top: var(--space-xxs); }
.text-button { min-height: 0; border: 0; background: transparent; padding: 0; color: var(--text); font-weight: var(--weight-semibold); text-align: left; }
.text-button:hover { color: var(--primary); text-decoration: underline; }
.inline-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); }
.data-section td { max-width: var(--cell-max-width); }
.data-section th { white-space: normal; }
.data-section table { min-width: var(--table-min-width); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--form-gap); margin-top: var(--space); }
.form-grid label { display: flex; flex-direction: column; font-size: var(--font-label); gap: var(--space-xs); min-width: 0; overflow-wrap: anywhere; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid textarea { resize: vertical; line-height: var(--line-height); }
.board-scroll { overflow-x: auto; padding-bottom: var(--space); }
.sales-board { display: grid; grid-auto-flow: column; grid-auto-columns: var(--board-width); gap: var(--space-sm); align-items: start; }
.board-column { padding: var(--space-sm); border: var(--border-width) solid var(--line); border-radius: var(--radius); background: var(--soft); }
.board-column h2 { font-size: var(--font-card-title); margin: 0; }
.board-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); width: 100%; padding: var(--space-sm); margin-top: var(--space-sm); border: var(--border-width) solid var(--line); border-radius: var(--radius-control); background: var(--paper); text-align: left; }
.board-item strong { color: var(--text); }
#formError { min-height: var(--space-lg); }
.receipt-progress { display: block; width: 100%; min-width: var(--progress-width); padding: var(--space-xxs) 0; border: 0; background: transparent; text-align: left; }
.receipt-progress .row { padding: 0; font-size: var(--font-small); align-items: center; }
.receipt-progress strong { color: var(--text); }
.receipt-progress progress { display: block; width: 100%; height: var(--progress-height); margin: var(--space-xs) 0; accent-color: var(--normal); border: 0; border-radius: var(--radius-pill); overflow: hidden; background: var(--line); }
.receipt-progress progress::-webkit-progress-bar { background: var(--line); border-radius: var(--radius-pill); }
.receipt-progress progress::-webkit-progress-value { background: var(--normal); border-radius: var(--radius-pill); }
.receipt-progress progress::-moz-progress-bar { background: var(--normal); border-radius: var(--radius-pill); }
.receipt-progress small { font-size: var(--font-small); line-height: var(--line-height); }
.demo-session { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space); margin-bottom: var(--space); padding: var(--space); border: var(--border-width) solid var(--line); border-radius: var(--radius); background: var(--paper); }
.demo-session label { display: flex; flex-direction: column; gap: var(--space-xxs); font-size: var(--font-label); min-width: 0; }
.demo-session small { flex: 1; min-width: min(100%, var(--progress-width)); }
.history-item { padding: var(--space-sm) 0; border-bottom: var(--border-width) solid var(--line); }
.history-item p { margin: 0; }
.commission-formula { padding: var(--space); background: var(--soft); border-radius: var(--radius-control); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.chart-scroll { overflow-x: auto; max-width: 100%; }
.chart-scroll svg { display: block; min-width: var(--chart-min-width); }
.reminder-group { padding: var(--space) 0; border-top: var(--border-width) solid var(--line); }
.reminder-group h3 { margin-bottom: var(--space-xxs); }
.achievement-list { margin: var(--space-sm) 0; font-size: var(--font-small); border-top: var(--border-width) solid var(--line); }
.sales-connected { border: var(--emphasis-border) solid var(--primary); background: var(--paper); }
.sales-source { color: var(--primary); font-weight: var(--weight-semibold); padding: var(--space-xs) 0; }
.recovery { max-width: var(--recovery-width); margin: var(--space-nav-top) var(--space) var(--space); overflow-wrap: anywhere; }
@media (max-width: 1150px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .regions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .list-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  aside { position: static; width: auto; padding: var(--space-3xl) var(--space) var(--space-xs); }
  .brand { margin: 0 0 var(--space-sm); }
  aside nav { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
  aside nav a { margin: 0; padding: var(--space-xs) var(--space-sm); }
  main { margin: 0; padding: var(--space); }
  header { align-items: flex-start; }
  .kpis, .regions, .charts, .sales-summary, .form-grid, .list-tools { grid-template-columns: minmax(0, 1fr); }
  .form-grid .wide { grid-column: auto; }
  .section-heading { align-items: flex-start; }
  .attention { flex-wrap: wrap; }
  dialog { padding: var(--space); }
  .demo-session label { width: 100%; }
  .analytics-controls { width: 100%; }
}

aside a:focus-visible { outline-color: var(--nav-text); }
.record-status { font-weight: var(--weight-semibold); }
.status-s_notReceived, .status-s_partReceived { color: var(--warning); }
.status-s_fullyReceived, .status-s_noFeeDue { color: var(--normal); }
.status-s_cancelledProgress { color: var(--danger); background: var(--danger-bg); }
.attention-c5_salesLate:hover, .attention-c5_salesOverdue:hover, .attention-overdue:hover, .attention-overdueTasks:hover, .attention-lateContent:hover { border-left-color: var(--danger); }
.attention-c5_salesCommissions:hover, .attention-approvals:hover, .attention-overBudget:hover { border-left-color: var(--warning); }

.status-active, .status-scheduled { color: var(--warning); background: var(--warning-bg); }

/* Shared responsive presentation; data and workflow actions remain shared. */
.mobile-menu, .mobile-chart { display: none; }
.cell-content { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 1000px) {
  aside { position: static; width: auto; padding: var(--space-3xl) var(--space) var(--space-sm); }
  .brand { margin-bottom: var(--space-sm); }
  main { margin-left: 0; }
  .desktop-navigation { display: none; }
  .mobile-menu { display: block; }
  .mobile-menu summary { cursor: pointer; min-height: var(--input-height); padding: var(--space-xs) var(--space-sm); border: var(--border-width) solid var(--nav-text); border-radius: var(--radius-control); }
  .mobile-menu nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobile-menu nav a { min-width: 0; white-space: normal; }
  .sales-tabs { flex-wrap: wrap; overflow: visible; }
  .sales-tabs a { flex-shrink: 1; white-space: normal; min-height: var(--input-height); }
  .charts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  main { padding: var(--space-sm); }
  .kpis, .sales-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
  .kpis > .card, .sales-summary > .card { padding: var(--space-sm); }
  .kpis .value, .sales-summary .value { font-size: var(--font-mobile-kpi); }
  .card > .row { flex-wrap: wrap; }
  .card > .row > h3 { flex-basis: 100%; }
  .sales-tabs { display: none; }
  .form-grid, .list-tools, .regions { grid-template-columns: minmax(0, 1fr); }
  input, select, textarea { font-size: var(--font-mobile-input); min-width: 0; }
  button, .text-button, summary, nav a { min-height: var(--input-height); }
  .tools, .tools > *, .demo-session, .demo-session > *, .row > * { min-width: 0; max-width: 100%; }
  .tools > input, .tools > select { width: 100%; }
  .sales-board { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); }
  .board-scroll { overflow: visible; }
  .responsive-table, .data-section table { min-width: 0; width: 100%; }
  .responsive-table, .responsive-table tbody { display: block; }
  .responsive-table thead { position: absolute; width: var(--border-width); height: var(--border-width); overflow: hidden; clip-path: inset(50%); }
  .responsive-table tbody tr { display: block; padding: var(--space-sm); margin: var(--space-sm) 0; border: var(--border-width) solid var(--line); border-radius: var(--radius-control); }
  .responsive-table td { display: grid; grid-template-columns: minmax(0, var(--mobile-cell-label)) minmax(0, 1fr); gap: var(--space-xs); max-width: none; width: 100%; padding: var(--space-xs) 0; }
  .responsive-table td::before { content: attr(data-label); font-weight: var(--weight-semibold); color: var(--muted); overflow-wrap: anywhere; }
  .responsive-table td > * { min-width: 0; max-width: 100%; }
  .record-table, .record-table tbody, .record-table tr, .record-table th, .record-table td { display: block; width: 100%; min-width: 0; max-width: none; }
  .record-table td { overflow-wrap: anywhere; }
  .receipt-progress { min-width: 0; }
  .receipt-progress .row, .achievement-list .row { flex-wrap: wrap; }
  dialog { width: calc(100% - var(--space-sm) - var(--space-sm)); max-width: none; padding: var(--space-sm); }
  .chart-scroll { display: none; }
  .mobile-chart { display: block; }
  .mobile-chart section { margin: var(--space-sm) 0; }
  .mobile-chart-point { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; text-align: left; gap: var(--space-xs); margin: var(--space-xs) 0; padding: var(--space-sm); border: var(--border-width) solid var(--line); border-radius: var(--radius-control); background: var(--paper); }
  .mobile-chart-label, .mobile-chart-point strong { overflow-wrap: anywhere; min-width: 0; }
  .mobile-chart-point strong { max-width: 100%; }
  .mobile-chart-track { display: block; grid-column: 1 / -1; width: 100%; height: var(--chart-track-height); background: var(--soft); border-radius: var(--radius-pill); overflow: hidden; }
  .mobile-chart-track > span { display: block; height: 100%; }
}

.work-progress { width: 100%; height: var(--space-sm); accent-color: var(--primary); }
.status-p9_done { color: var(--normal); background: var(--normal-bg); }
.status-p9_doing, .status-p9_waiting { color: var(--warning); background: var(--warning-bg); }
.status-p9_notStarted, .status-p9_na { color: var(--demo); background: var(--demo-bg); }