:root {
  --ink: #18222d;
  --muted: #64717d;
  --line: #d9e0e5;
  --panel: #ffffff;
  --canvas: #f5f7f8;
  --navy: #173b5c;
  --blue: #1f6f9f;
  --blue-soft: #eaf3f8;
  --gold-soft: #fff5d9;
  --green: #1c7c5a;
  --red: #a64848;
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-size: 14px; }
body > .auth-view { min-height: 100vh; display: grid; place-items: center; background: var(--canvas); }
.auth-panel { width: min(420px, calc(100vw - 36px)); display: grid; gap: 14px; padding: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(23, 59, 92, .12); }
.auth-panel h1 { margin: 0; color: var(--navy); }
.auth-panel .button { margin-top: 4px; }
.admin-only[hidden], .procurement-only[hidden], .admin-only-option[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.topbar { min-height: 78px; background: var(--navy); color: #fff; padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; }
.topbar h1 { margin: 2px 0 0; font-size: 23px; letter-spacing: 0; }
.eyebrow { margin: 0; color: #7ea0b8; font-size: 10px; letter-spacing: 1.3px; font-weight: 700; }
.topbar .eyebrow { color: #a9c4d5; }
.top-actions, .heading-actions, .form-actions { display: flex; align-items: center; gap: 10px; }
.top-actions { flex-wrap: wrap; justify-content: flex-end; }
.connection { color: #d2e6dc; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #77d1a8; }
.layout { min-height: calc(100vh - 78px); display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { background: #fff; border-right: 1px solid var(--line); padding: 18px 14px; }
.nav-tabs { display: grid; gap: 4px; margin-bottom: 26px; }
.nav-tab { border: 0; text-align: left; background: transparent; color: var(--muted); padding: 11px 13px; border-left: 3px solid transparent; font-weight: 700; }
.nav-tab:hover { background: #f2f6f8; color: var(--navy); }
.nav-tab.active { background: var(--blue-soft); color: var(--navy); border-left-color: var(--blue); }
.sidebar-section { border-top: 1px solid var(--line); padding-top: 15px; }
.section-heading, .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.section-heading { color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.icon-button { width: 28px; height: 28px; border: 1px solid var(--line); background: #fff; color: var(--blue); }
.customer-list { display: grid; gap: 5px; }
.customer-item { width: 100%; border: 1px solid transparent; background: #fff; padding: 10px; text-align: left; }
.customer-item:hover, .customer-item.active { border-color: #a8c8db; background: var(--blue-soft); }
.customer-item strong { display: block; font-size: 13px; margin-bottom: 3px; }
.customer-item small { color: var(--muted); }
.content { min-width: 0; padding: 30px clamp(18px, 4vw, 52px) 60px; }
.view { display: none; max-width: 1600px; margin: 0 auto; }
.view.active { display: block; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 22px; }
h2 { font-size: 27px; margin: 5px 0 0; letter-spacing: 0; }
h3 { margin: 0; font-size: 15px; }
.page-note, .muted { color: var(--muted); }
.page-note { margin: 6px 0 0; }
.split-grid { display: grid; grid-template-columns: minmax(320px, 0.8fr) minmax(420px, 1.2fr); gap: 18px; }
.panel { background: var(--panel); border: 1px solid var(--line); padding: 20px; margin-bottom: 18px; }
.form-panel, .detail-panel { min-width: 0; }
.panel-heading { padding-bottom: 15px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.history-heading { margin-top: 25px; }
label { display: grid; gap: 6px; color: var(--muted); font-weight: 700; font-size: 12px; margin-bottom: 13px; }
.field-label { color: var(--muted); font-weight: 700; font-size: 12px; }
input, select, textarea { width: 100%; border: 1px solid #c8d2d9; background: #fff; color: var(--ink); padding: 9px 10px; border-radius: 2px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(31,111,159,.12); }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.folder-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.folder-row .button { margin-bottom: 13px; }
.button { border: 1px solid transparent; padding: 9px 14px; border-radius: 2px; font-weight: 700; white-space: nowrap; }
.button.primary { color: #fff; background: var(--blue); border-color: var(--blue); }
.button.primary:hover { background: #195c84; }
.button.secondary { background: #fff; color: var(--navy); border-color: #b7c5cd; }
.button.secondary:hover { border-color: var(--blue); color: var(--blue); }
.button:disabled { cursor: not-allowed; opacity: .45; }
.button:disabled:hover { border-color: #b7c5cd; color: var(--navy); }
.text-button { border: 0; background: transparent; color: var(--blue); padding: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { padding: 13px; background: #f5f8fa; border-left: 3px solid var(--blue); }
.stat strong { display: block; font-size: 20px; margin-bottom: 4px; }
.stat span { color: var(--muted); font-size: 12px; }
.empty-state { color: var(--muted); padding: 16px 0; }
.log-list { display: grid; gap: 7px; }
.log-entry { border-bottom: 1px solid var(--line); padding: 8px 0; display: grid; grid-template-columns: 116px 90px minmax(0, 1fr); gap: 10px; align-items: start; }
.log-entry small { color: var(--muted); overflow-wrap: anywhere; }
.log-success { color: var(--green); font-weight: 700; }
.log-partial { color: #8a5d00; font-weight: 700; }
.log-fail { color: var(--red); font-weight: 700; }
.import-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.import-toolbar label { margin: 0; min-width: min(220px, 100%); max-width: 100%; }
.import-toolbar select { min-width: 0; }
.import-toolbar .grow { flex: 1; }
.preview-panel { min-height: 160px; }
.import-preview { overflow-x: auto; }
.preview-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; }
.preview-table { width: 100%; border-collapse: collapse; }
.preview-table th, .preview-table td { border-bottom: 1px solid var(--line); padding: 8px; text-align: left; }
.quote-meta { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr 2fr; gap: 12px; align-items: end; }
.quote-meta label { margin: 0; }
.file-choice { min-width: 0; display: grid; gap: 6px; }
.file-value { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #c8d2d9; padding: 9px 10px; background: #f8fafb; }
.file-choice .button { margin-top: 2px; }
.existing-document-panel { padding: 0; }
.existing-document-panel > .panel-heading { padding: 14px 18px 11px; margin: 0; }
.existing-document-scroll { max-height: 220px; overflow: auto; }
.document-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 12px; }
.document-table th { padding: 8px 12px; background: #edf2f5; color: var(--muted); text-align: left; position: sticky; top: 0; z-index: 1; }
.document-table td { padding: 8px 12px; border-top: 1px solid var(--line); white-space: nowrap; }
.document-table tbody tr:hover { background: #f6fafc; }
.document-table .empty-state { text-align: center; }
.document-source { color: var(--muted); font-weight: 700; }
.document-source.draft { color: var(--blue); }
.table-panel { padding: 0; overflow: hidden; }
.table-panel > .panel-heading { padding: 16px 18px 13px; margin: 0; }
.table-scroll { overflow: auto; }
.data-table { width: 100%; min-width: 1320px; border-collapse: collapse; font-size: 12px; }
.data-table th { background: var(--navy); color: #fff; padding: 9px 7px; text-align: left; position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.data-table td { border-bottom: 1px solid var(--line); padding: 5px 6px; vertical-align: middle; white-space: nowrap; }
.data-table tbody tr:hover { background: #f6fafc; }
.data-table tbody tr.selected-row,
.data-table tbody tr.selected-row:hover { background: #e7f2f8; box-shadow: inset 3px 0 0 var(--blue); }
.data-table .spec-col { min-width: 240px; }
.data-table input { padding: 7px 6px; min-width: 70px; }
.data-table .spec-input { min-width: 235px; font-weight: 700; text-transform: uppercase; }
.data-table .price-input { min-width: 82px; color: var(--blue); font-weight: 700; }
.source-pi { color: var(--green); font-weight: 700; }
.source-quotation { color: #9b6813; font-weight: 700; }
.source-inquiry, .missing { color: var(--red); font-weight: 700; }
.summary-strip { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; padding: 15px 18px; background: var(--gold-soft); border-top: 1px solid #efd993; }
.summary-strip span { color: #72570b; font-size: 12px; }
.summary-strip strong { color: #352804; font-size: 15px; margin-left: 4px; }
.pi-total { display: flex; justify-content: flex-end; gap: 12px; padding: 15px 18px; font-weight: 700; }
.pi-total strong { font-size: 18px; color: var(--blue); }
.toast { position: fixed; top: 92px; right: 28px; z-index: 5; max-width: 420px; padding: 12px 16px; background: var(--navy); color: #fff; border-left: 4px solid #77d1a8; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: .18s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-left-color: #ec8c8c; }
@media (max-width: 1100px) {
  .layout { grid-template-columns: 200px minmax(0, 1fr); }
  .split-grid { grid-template-columns: 1fr; }
  .quote-meta { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .topbar { padding: 14px 16px; align-items: flex-start; }
  .topbar h1 { font-size: 18px; }
  .top-actions .secondary { display: none; }
  .layout { display: block; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; }
  .nav-tabs { display: flex; overflow-x: auto; margin: 0; }
  .nav-tab { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; }
  .nav-tab.active { border-bottom-color: var(--blue); border-left-color: transparent; }
  .sidebar-section { display: none; }
  .content { padding: 22px 12px 40px; }
  .page-heading { display: block; }
  .heading-actions { margin-top: 14px; flex-wrap: wrap; }
  .two-columns, .quote-meta { grid-template-columns: 1fr; }
  .import-toolbar { display: grid; align-items: stretch; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}