@font-face {
  font-family: "Sarabun Embedded";
  src: url("assets/fonts/Sarabun-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Sarabun Embedded";
  src: url("assets/fonts/Sarabun-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: block;
}
@font-face {
  font-family: "Sarabun Embedded";
  src: url("assets/fonts/Sarabun-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: block;
}
@font-face {
  font-family: "Sarabun Embedded";
  src: url("assets/fonts/Sarabun-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: block;
}
@font-face {
  font-family: "Sarabun Embedded";
  src: url("assets/fonts/Sarabun-ExtraBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: block;
}

:root {
  color-scheme: light;
  --navy: #011f31;
  --blue: #033352;
  --blue-bright: #086184;
  --blue-light: #e6f0f4;
  --ink: #071420;
  --muted: #1e303a;
  --line: #c7d5dc;
  --paper: #ffffff;
  --surface: #edf3f5;
  --success: #176b58;
  --danger: #b91c1c;
  --gold: #b79561;
  --gold-light: #e0cfb1;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(3, 51, 82, .08), transparent 28%),
    linear-gradient(180deg, #f7fafb 0, var(--surface) 440px);
  font-family: "Leelawadee UI", Tahoma, sans-serif;
  font-weight: 500;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.hidden { display: none !important; }

.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 17px 28px;
  color: #fff;
  background: linear-gradient(128deg, #011f31 0%, #033352 52%, #075b78 100%);
  box-shadow: 0 10px 28px rgba(1, 31, 49, .24);
}
.eyebrow { margin: 0 0 3px; color: var(--gold-light); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.app-header h1 { margin: 0; font-size: 25px; }
.header-subtitle { margin: 3px 0 0; color: #d8e7ed; font-size: 13px; }
.header-actions, .settings-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.header-menu-toggle { display: none; }

.button { border: 1px solid transparent; border-radius: 10px; padding: 10px 15px; font-weight: 800; transition: .15s ease; }
.button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, .13); }
.button.primary { background: linear-gradient(135deg, #075978, #08769b); color: #fff; box-shadow: 0 5px 14px rgba(3, 51, 82, .18); }
.button.secondary { background: rgba(255, 255, 255, .96); color: var(--blue); border-color: #c6d8df; }
.button.dark { background: #011f31; color: #fff; }
.button.danger { background: #fff1f2; color: var(--danger); border-color: #fecdd3; }
.button.small { padding: 7px 11px; font-size: 13px; }

.app-shell { display: grid; grid-template-columns: minmax(410px, 580px) minmax(740px, 1fr); gap: 24px; max-width: 1760px; margin: 0 auto; padding: 22px; align-items: start; transition: grid-template-columns .26s ease, gap .26s ease; }
.editor-panel { position: sticky; top: 103px; max-height: calc(100vh - 125px); overflow: auto; background: rgba(255, 255, 255, .97); border: 1px solid #d9e4e8; border-radius: 19px; box-shadow: 0 18px 46px rgba(3, 51, 82, .10); transition: opacity .2s ease, transform .26s ease, visibility .26s ease; }
.tabs { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid #e2e8f0; }
.tab { padding: 13px 3px; border: 0; background: #f6f9fa; color: var(--muted); font-size: 13px; font-weight: 800; }
.tab.active { background: #fff; color: var(--blue); box-shadow: inset 0 -3px 0 var(--gold); }
.tab-panel { display: none; padding: 20px; }
.tab-panel.active { display: block; }

.document-workflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.document-type { position: relative; min-width: 0; border: 1px solid #d3e0e5; border-radius: 12px; padding: 11px 5px 8px; background: #f8fafb; color: #2c4452; text-align: center; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.document-type:hover { transform: translateY(-1px); border-color: #9fb9c4; }
.document-type span { position: absolute; top: 5px; left: 6px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #3a4f5a; background: #e5edef; font-size: 10px; font-weight: 900; }
.document-type strong, .document-type small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-type strong { font-size: 13px; }
.document-type small { margin-top: 3px; font-size: 11px; font-weight: 700; }
.document-type.active { color: #fff; border-color: #064665; background: linear-gradient(145deg, #022a43, #064f6c); box-shadow: 0 8px 18px rgba(3, 51, 82, .24), inset 0 1px rgba(255,255,255,.12); }
.document-type.active span { color: var(--blue); background: #fff; }
.company-switcher { display: grid; grid-template-columns: max-content 1fr 1fr; gap: 7px; align-items: center; margin-top: 12px; padding: 8px; border: 1px solid #d3e0e5; border-radius: 12px; background: #f8fafb; }
.company-switcher span { color: var(--muted); font-size: 12px; font-weight: 900; }
.company-option { min-width: 0; border: 1px solid #d3e0e5; border-radius: 9px; padding: 8px 9px; background: #fff; color: var(--blue); font-size: 12px; font-weight: 900; cursor: pointer; }
.company-option.active { border-color: var(--blue); background: var(--blue); color: #fff; }
.ps-computer-profile-panel { margin-top: 10px; padding: 14px; border: 1px solid #b9ceda; border-radius: 14px; background: linear-gradient(145deg, #f4f8fb, #e8f1f6); box-shadow: inset 0 1px #fff; }
.ps-computer-profile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.ps-computer-profile-head h3 { margin: 1px 0 0; color: #123c5b; font-size: 17px; }
.pc-profile-kicker { color: #3d6f8e; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.pc-vat-badge { flex: 0 0 auto; border-radius: 999px; padding: 6px 10px; color: #fff; background: #123c5b; font-size: 11px; font-weight: 900; }
.ps-computer-profile-panel > p { margin: 0 0 11px; color: #365464; font-size: 12px; line-height: 1.45; }
.ps-computer-profile-panel input[readonly] { color: #123c5b; border-color: #9fb8c7; background: #edf4f7; font-weight: 900; letter-spacing: .04em; }
.ps-computer-profile-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; }
.ps-computer-profile-actions small { color: #365464; font-size: 11px; font-weight: 800; }
.ps-computer-vat-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 11px 12px; border: 1px solid #b7ccd8; border-left: 5px solid #123c5b; border-radius: 11px; background: #f4f8fa; }
.ps-computer-vat-options > div { min-width: 0; }
.ps-computer-vat-options strong, .ps-computer-vat-options span { display: block; }
.ps-computer-vat-options strong { color: #123c5b; font-size: 13px; }
.ps-computer-vat-options > div span { margin-top: 2px; color: #426171; font-size: 11.5px; line-height: 1.35; }
.ps-computer-vat-options .check-card { flex: 0 0 min(255px, 44%); }
.linked-hint { margin: 8px 0 18px; padding: 8px 10px; border: 1px solid #d6e4e9; border-radius: 9px; color: var(--blue); background: #edf5f7; font-size: 13px; font-weight: 700; text-align: center; }

.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 15px; }
.section-heading > div { display: flex; align-items: center; gap: 9px; }
.section-heading h2 { margin: 0; font-size: 19px; font-weight: 800; }
.heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.compact-heading { margin-top: 0; }
.customer-heading { margin-top: 18px; }
.document-settings-heading, .items-heading { margin-top: 25px; }
.step { display: grid; flex: 0 0 30px; place-items: center; width: 30px; min-width: 30px; height: 30px; min-height: 30px; aspect-ratio: 1; border-radius: 50%; padding: 0; color: #fff; background: linear-gradient(145deg, #033352, #086184); font-size: 13px; font-weight: 900; line-height: 1; box-shadow: 0 4px 10px rgba(3, 51, 82, .17); }
.badge { border-radius: 999px; padding: 5px 9px; background: var(--blue-light); color: var(--blue); border: 1px solid #d3e1e6; font-size: 12px; font-weight: 800; }

.document-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; border: 1px solid #c7dce4; border-radius: 14px; background: linear-gradient(145deg, #f1f7f8, #e8f2f5); box-shadow: inset 0 1px #fff; }
.document-task-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; padding: 10px; border: 1px solid #d8e7ed; border-radius: 12px; background: #f8fbfc; }
.document-task-actions .button[hidden] { display: none; }
.import-card { margin: 12px 0 2px; padding: 12px; border: 1px solid #d4e2e7; border-radius: 12px; background: #fbfcfd; }
.import-visibility { margin-top: 18px; }
.import-visibility .import-card { width: 100%; margin: 0; }
.import-collapse-grid { grid-template-columns: 1fr; }
.import-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.import-card-head strong, .import-card-head span { display: block; }
.import-card-head strong { color: var(--blue); font-size: 14px; }
.import-card-head span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.import-card textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; resize: vertical; font-family: inherit; line-height: 1.4; }
.import-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 8px; }
.import-actions small { color: var(--muted); font-size: 12px; font-weight: 800; }
.import-actions small[data-state="success"] { color: var(--success); }
.import-actions small[data-state="error"] { color: var(--danger); }
.number-generator { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.number-button { color: #fff; border-color: #0a6383; background: linear-gradient(135deg, #034363, #087092); white-space: nowrap; }
.field-hint { color: #1e303a; font-size: 13px; font-weight: 600; }
.visibility-options { display: flex; flex-direction: column; justify-content: end; gap: 7px; }
.check-card { display: flex; align-items: center; gap: 8px; min-height: 35px; padding: 7px 9px; border: 1px solid #d5e1e5; border-radius: 9px; background: rgba(255,255,255,.94); color: var(--blue); font-size: 13px; font-weight: 800; }
.check-card input { width: 17px; height: 17px; accent-color: var(--blue-bright); }
.specific-settings { margin-top: 10px; padding: 12px; border: 1px solid #dce5e8; border-radius: 12px; background: #f8fafb; }
.signature-visibility { margin-top: 10px; padding-top: 8px; border-top: 1px solid #dde7ea; }
.sig-vis-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: 0; border-radius: 9px; padding: 7px 9px; background: #f1f6f8; color: var(--blue); text-align: left; transition: background .15s ease; }
.sig-vis-toggle:hover { background: #e6eef2; }
.sig-vis-label { color: var(--blue); font-size: 12px; font-weight: 800; }
.sig-vis-arrow { font-size: 12px; color: var(--blue-bright); transition: transform .25s ease; }
.signature-visibility.collapsed .sig-vis-arrow { transform: rotate(-90deg); }
.sig-vis-collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .28s ease; }
.signature-visibility.collapsed .sig-vis-collapse { grid-template-rows: 0fr; }
.sig-vis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; overflow: hidden; min-height: 0; padding-top: 8px; }
.signature-visibility.collapsed .sig-vis-grid { padding-top: 0; }
.sig-offset-row { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.sig-offset-row .offset-btn { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #cfdbe0; border-radius: 6px; background: #f1f5f7; color: var(--blue); font-size: 13px; font-weight: 800; cursor: pointer; line-height: 1; }
.sig-offset-row .offset-btn:hover { background: #e1eaef; border-color: #9fb9c4; }
.sig-offset-row .offset-btn.rotate-btn { font-size: 15px; }
.sig-offset-row .offset-reset { margin-left: auto; border: 0; border-radius: 5px; padding: 2px 6px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.sig-offset-row .offset-reset:hover { color: var(--danger); }
.info-card { color: #1a2e3a; font-size: 13px; font-weight: 600; line-height: 1.55; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid.thirds { grid-template-columns: 1fr 1fr 1.5fr; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { color: #061622; font-size: 14px; font-weight: 800; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; color: var(--ink); background: #fff; outline: none; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #087093; box-shadow: 0 0 0 3px rgba(8, 112, 147, .13); }
.field textarea { resize: vertical; }
.document-note-card { margin-top: 11px; padding: 12px; border: 1px solid #d8e4e8; border-radius: 12px; background: #fbfcfc; }
.document-note-card textarea { line-height: 1.45; }
.thai-date-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; color: var(--blue); background: #fff; text-align: left; }
.thai-date-trigger:hover { border-color: #769fad; background: #f9fcfd; }
.thai-date-trigger span { font-weight: 800; }
.thai-date-trigger small { color: #405461; font-size: 11px; }
.thai-date-trigger.compact { min-height: 40px; }

.customer-search-wrap { position: relative; margin-bottom: 14px; }
.customer-results { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 20; max-height: 310px; overflow: auto; padding: 6px; background: #fff; border: 1px solid #b8ced7; border-radius: 12px; box-shadow: 0 18px 38px rgba(3, 51, 82, .17); }
.customer-result { width: 100%; border: 0; border-radius: 8px; padding: 9px; text-align: left; background: #fff; }
.customer-result:hover { background: #eff6ff; }
.customer-result strong { display: block; color: var(--blue); }
.customer-result span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.tax-lookup-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.tax-lookup-results { grid-column: 1 / -1; margin-top: 7px; border: 1px solid #d7e3e8; border-radius: 10px; overflow: hidden; background: #fff; }
.tax-lookup-results button, .tax-empty { display: block; width: 100%; border: 0; border-bottom: 1px solid #edf2f4; padding: 8px 10px; background: #fff; color: var(--ink); text-align: left; font-family: inherit; }
.tax-lookup-results button:hover { background: #eef6ff; }
.tax-lookup-results strong { display: block; color: var(--blue); font-size: 13px; }
.tax-lookup-results span, .tax-empty { color: var(--muted); font-size: 12px; }
.tax-lookup-results .tax-new-branch { color: var(--success); font-weight: 900; }
.tax-online-head { padding: 8px 10px; background: linear-gradient(135deg, #033352, #087092); color: #fff; font-size: 12px; font-weight: 900; }
.tax-web-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 9px 10px; border-bottom: 1px solid #edf2f4; }
.tax-web-link { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #c6d8df; border-radius: 8px; padding: 6px 9px; background: #fff; color: var(--blue); font-size: 12px; font-weight: 900; text-decoration: none; cursor: pointer; }
.tax-web-link.primary { border-color: transparent; background: linear-gradient(135deg, #075978, #08769b); color: #fff; }
.tax-paste-wrap { display: grid; gap: 7px; padding: 10px; background: #f7fbfc; }
.tax-paste-wrap label { color: var(--ink); font-size: 12px; font-weight: 900; }
.tax-paste-wrap textarea { width: 100%; resize: vertical; min-height: 86px; border: 1px solid #cbdbe1; border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: 12.5px; line-height: 1.45; background: #fff; }

.items-editor-wrap { overflow: auto; border: 1px solid #e2e8f0; border-radius: 12px; }
.items-editor { width: 100%; border-collapse: collapse; min-width: 560px; }
.items-editor th { padding: 9px 6px; background: #edf4f6; color: var(--blue); font-size: 14px; font-weight: 800; text-align: left; }
.items-editor td { padding: 5px; border-top: 1px solid #e2e8f0; }
.items-editor input, .items-editor textarea { width: 100%; border: 1px solid transparent; border-radius: 7px; padding: 8px; background: #f8fafc; }
.items-editor td:first-child { vertical-align: top; }
.items-editor textarea { min-height: 38px; resize: vertical; line-height: 1.35; overflow: hidden; font-family: inherit; }
.items-editor input:focus, .items-editor textarea:focus { outline: none; border-color: #3b8aa5; background: #fff; }
.unit-editor-col { width: 62px; }
.number-col { width: 70px; }
.money-col { width: 105px; }
.action-col { width: 34px; }
.items-editor .discount-editor-col,
.items-editor .col-discount { display: none; }
.items-editor.discount-enabled .discount-editor-col { display: table-cell; }
.items-editor.discount-enabled .col-discount { display: table-cell; }
.item-line-total { display: block; min-height: 34px; border: 1px solid #c3dce5; border-radius: 7px; padding: 8px; color: #075978; background: #edf7fa; font-weight: 900; text-align: right; white-space: nowrap; }
.item-discount-toggle { min-height: 32px; padding: 5px 8px; font-size: 12px; }
.item-discount-toggle input { width: 16px; height: 16px; accent-color: var(--blue-bright); }
.item-discount-hint { margin: 8px 2px 0; border-left: 4px solid #d69a20; padding: 7px 9px; color: #5b461c; background: #fff8e8; }
.remove-item { border: 0; border-radius: 7px; padding: 7px 9px; background: #fff1f2; color: var(--danger); font-weight: 900; }
.editor-summary { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding: 12px 14px; border: 1px solid #d3e2e7; border-radius: 12px; background: linear-gradient(135deg, #edf5f7, #e3eff3); color: var(--blue); }
.editor-summary strong { font-size: 20px; }
.bill-editor-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bill-editor-summary > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bill-editor-summary > div:not(:first-child) { border-left: 1px solid #bfd1d8; padding-left: 12px; }
.bill-editor-summary span { color: #526b77; font-size: 12px; font-weight: 800; }
.bill-editor-summary strong { font-size: 17px; white-space: nowrap; }
.bill-editor-summary .net strong { color: #075978; font-size: 21px; }
.ps-computer-editor-vat-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 8px; overflow: hidden; border: 1px solid #b8ced9; border-radius: 11px; background: #b8ced9; }
.ps-computer-editor-vat-summary > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; color: #173b52; background: #f3f8fa; }
.ps-computer-editor-vat-summary span { font-size: 11px; font-weight: 800; }
.ps-computer-editor-vat-summary strong { font-size: 16px; }
.ps-computer-editor-vat-summary .net { color: #fff; background: #123c5b; }
.ps-computer-editor-vat-summary .net strong { font-size: 19px; }

.items-spec-hint { margin: 8px 2px 4px; }
.image-editor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 9px; margin-top: 4px; }
.image-add-actions { display: flex; gap: 6px; }
.image-url-bar { display: flex; gap: 7px; margin-bottom: 10px; }
.image-url-bar input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; color: var(--ink); background: #fff; font-size: 12px; }
.image-url-bar input:focus { outline: none; border-color: #087093; box-shadow: 0 0 0 3px rgba(8, 112, 147, .13); }
.image-url-bar .button { white-space: nowrap; flex-shrink: 0; }
.image-thumb-wrap { display: flex; flex-direction: column; gap: 5px; }
.image-empty { grid-column: 1 / -1; padding: 16px 12px; border: 1px dashed #c7d5dc; border-radius: 11px; text-align: center; color: var(--muted); font-size: 13px; }
.image-thumb { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid #d5e1e5; border-radius: 11px; background: #f5f8fa; }
.image-thumb img { width: 100%; height: 100%; object-fit: cover; }
.image-remove { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; color: #fff; background: rgba(15, 23, 42, .68); font-size: 15px; font-weight: 900; line-height: 1; }
.image-remove:hover { background: var(--danger); }
.image-scale-controls { display: flex; align-items: center; justify-content: center; gap: 5px; }
.scale-btn { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #cfdbe0; border-radius: 5px; background: #f1f5f7; color: var(--blue); font-size: 14px; font-weight: 800; cursor: pointer; line-height: 1; }
.scale-btn:hover { background: #e1eaef; border-color: #9fb9c4; }
.scale-label { color: var(--muted); font-size: 11px; font-weight: 800; min-width: 36px; text-align: center; }

.history-filter-panel { margin-top: 12px; padding: 13px; border: 1px solid #d7e4e8; border-radius: 13px; background: #f7fafb; }
.filter-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; color: var(--blue); font-size: 14px; font-weight: 800; }
.filter-title button { border: 0; color: #7a3d22; background: transparent; font-size: 12px; font-weight: 800; }
.history-insight { margin-top: 12px; padding: 14px; border: 1px solid #c5dce4; border-radius: 13px; background: linear-gradient(145deg, #eaf4f6, #f7fbfc); box-shadow: 0 8px 20px rgba(3, 51, 82, .07); }
.history-insight .insight-kicker { color: var(--gold); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.history-insight h3 { margin: 3px 0 7px; color: var(--blue); font-size: 16px; }
.history-insight p { margin: 3px 0; color: #1e3543; font-size: 13px; }
.history-insight strong { color: var(--navy); }
.history-match { margin-top: 8px; padding: 7px 9px; border-radius: 8px; color: #1a3342; background: #f1f6f8; font-size: 12px; }

.customer-manager-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 9px; color: var(--blue); font-weight: 800; }
.customer-manager-summary small { color: var(--ink); font-weight: 400; text-align: right; font-size: 12px; }
.customer-manager-list { display: flex; flex-direction: column; gap: 8px; }
.customer-manager-card { padding: 11px; border: 1px solid #dce6e9; border-radius: 12px; background: #fff; box-shadow: 0 5px 14px rgba(3, 51, 82, .04); border-bottom: 2px solid #e2eaf0; }
.customer-manager-card:last-child { border-bottom-color: #dce6e9; border-bottom-width: 1px; }
.customer-manager-card h3 { margin: 0; color: var(--blue); font-size: 15px; font-weight: 800; }
.customer-manager-card p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.customer-manager-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.customer-manager-meta span { background: #f1f5f7; border-radius: 5px; padding: 2px 6px; }
.customer-manager-main { flex: 1; min-width: 0; }
.customer-manager-actions { display: flex; gap: 5px; flex-shrink: 0; align-self: flex-start; }
.customer-manager-actions button { border: 1px solid #cfe0e6; border-radius: 7px; padding: 5px 8px; color: var(--blue); background: #edf5f7; font-size: 12px; font-weight: 800; }
.customer-manager-actions .danger { color: var(--danger); border-color: #fecdd3; background: #fff1f2; }

.preview-panel { min-width: 0; overflow: auto; }
.preview-toolbar { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--muted); font-size: 14px; font-weight: 600; }
.preview-document-context { display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; min-width:0; }
.preview-context-kicker { color:#5d7480; font-size:11px; font-weight:850; letter-spacing:.02em; }
.active-document-context { display:inline-flex; align-items:center; min-height:30px; border:1px solid #08769b; border-radius:999px; padding:5px 11px; color:#fff; background:#075978; box-shadow:0 3px 9px rgba(7,89,120,.16); font-size:13px; font-weight:950; line-height:1.15; }
.active-document-context::before { content:"●"; margin-right:6px; color:#73e0c0; font-size:9px; }
.preview-edit-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; }
.preview-view-controls { display:inline-flex; align-items:center; gap:4px; padding-left:7px; border-left:1px solid #d5e3e8; }
.preview-view-btn { display:grid; width:30px; min-width:30px; height:30px; place-items:center; padding:0; font-size:19px; line-height:1; }
.preview-zoom-readout { min-width:62px; }
.preview-editor-toggle { min-width:108px; }
.app-shell.editor-collapsed { grid-template-columns:0 minmax(0,1fr); gap:0; max-width:none; }
.app-shell.editor-collapsed .editor-panel { visibility:hidden; opacity:0; transform:translateX(-30px); pointer-events:none; }
.app-shell.editor-collapsed .preview-panel { display:grid; grid-column:2; justify-items:center; width:100%; }
.app-shell.editor-collapsed .preview-toolbar { width:min(100%, 1480px); }
.preview-edit-hint { color: #0b6685; font-size: 12px; font-weight: 700; white-space: nowrap; }
.preview-history-btn { min-height: 30px; padding: 4px 10px; border: 1px solid #b9d3de; border-radius: 8px; background: #fff; color: #075878; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.preview-history-btn:hover:not(:disabled) { border-color: #087ea4; background: #eef9fc; }
.preview-history-btn:disabled { opacity: .42; cursor: not-allowed; }
.preview-paper-label { white-space: nowrap; }

.preview-editable { display: block; min-width: 1.1em; min-height: 1.15em; padding: 1px 3px; border-radius: 3px; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; outline: 1px dashed transparent; outline-offset: -1px; transition: background-color .12s ease, outline-color .12s ease; }
.preview-editable-inline { display: inline-block; min-width: 8em; }
.preview-editable-number { text-align: right; white-space: nowrap; }
.document-page:not(.is-printing) .preview-editable:hover { background: rgba(10, 132, 171, .07); outline-color: rgba(10, 118, 154, .35); }
.document-page:not(.is-printing) .preview-editable:focus { background: #fff8cc; outline: 2px solid #0c83aa; box-shadow: 0 0 0 2px rgba(12, 131, 170, .12); }
.preview-editable:empty::before { content: ""; }
.document-items td:has(> .preview-editable) { padding: 1px 2px; }
.document-items td:has(> .preview-editable-number) { vertical-align: middle; }
.cost-print-table td small .preview-editable { font-size: inherit; }
.preview-label { margin-right: 10px; color: var(--navy); font-weight: 900; }
.save-status { color: #b45309; }
.save-status.saved { color: var(--success); }

.document-page-stage {
  position: relative;
  width: 210mm;
  height: 297mm;
  margin: 0 auto;
  overflow: visible;
}
.document-page {
  --document-body-font-size: 16px;
  --document-preview-scale: 1;
  width: 210mm;
  min-width: 210mm;
  max-width: 210mm;
  height: 297mm;
  min-height: 297mm;
  max-height: 297mm;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 8mm 5mm 4mm;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  color: #000;
  font-family: "Angsana New", "TH Sarabun New", serif;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .16);
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  transform: scale(var(--document-preview-scale));
  transform-origin: top left;
  zoom: 1;
}
.document-page * { -webkit-text-size-adjust: none; text-size-adjust: none; }
.ops-document-page.ops-offsite-document { padding: 0; font-family: Tahoma, "Noto Sans Thai", sans-serif; }
.ops-offsite-preview { display: block; width: 100%; height: 100%; max-width: 210mm; max-height: 297mm; margin: 0; border: 0; overflow: hidden; background: #fff; }

.mobile-document-actions { display: none; }
.store-header { height: 24mm; overflow: hidden; border-bottom: 1px solid #000; padding-bottom: 1.5mm; }
.store-header h2 { margin: 0; font-size: 25pt; line-height: 1; font-weight: 700; }
.store-header p { margin: 0; font-size: 17pt; line-height: 1.05; font-weight: 700; white-space: nowrap; }
.document-title { height: 11mm; display: flex; align-items: center; justify-content: center; margin-top: 2mm; background: #c0c0c0; border-bottom: 1px solid #000; font-size: 27pt; line-height: 1; font-weight: 700; }
.document-page.company-ps-computer { --pc-ink: #16384f; --pc-tint: #edf3f6; padding: 6mm 8mm 4mm; font-family: "TH Sarabun New", "Sarabun", "Leelawadee UI", sans-serif; font-size: 13pt; font-weight: 400; }
.company-ps-computer .store-header { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 31mm; overflow: hidden; border-bottom: 1.5px solid var(--pc-ink); padding: 1mm 3mm 1.5mm; text-align: center; }
.company-ps-computer .store-header h2 { margin: 0 0 .5mm; color: var(--pc-ink); font-family: "TH Sarabun New", "Sarabun", "Leelawadee UI", sans-serif; font-size: 20pt; line-height: 1; font-weight: 700; letter-spacing: 0; }
.company-ps-computer .store-header .company-name-en { display: none; }
.company-ps-computer .store-header p { max-width: 100%; margin: .2mm 0; overflow: hidden; font-size: 13.5pt; font-weight: 400; line-height: 1.08; white-space: normal; }
.company-ps-computer .store-header .company-tax-line { color: var(--pc-ink); font-size: 13.5pt; font-weight: 600; }
.company-ps-computer .document-title { height: 13mm; margin-top: 1.5mm; white-space: pre-line; flex-direction: column; gap: .2mm; color: #fff; background: var(--pc-ink); border: 1px solid var(--pc-ink); font-family: "TH Sarabun New", "Sarabun", "Leelawadee UI", sans-serif; font-size: 16pt; line-height: 1; font-weight: 700; letter-spacing: 0; }
.company-ps-computer.tax-invoice .document-title { background: #0d4f6d; }
.company-ps-computer .customer-print-block { grid-template-columns: minmax(0, 1fr) 62mm; min-height: 30mm; border: 1px solid var(--pc-ink); border-top: 0; }
.company-ps-computer .customer-print-fields { padding: 1.4mm 2mm; }
.company-ps-computer .customer-print-fields > div:not(.linked-print-info) { min-height: 6mm; font-size: 11.5pt; line-height: 1.12; }
.company-ps-computer .customer-print-fields strong { color: var(--pc-ink); }
.company-ps-computer .document-meta-box { border-left: 1px solid var(--pc-ink); padding: 2mm 2.2mm; font-size: 11.5pt; gap: 3mm 1.5mm; line-height: 1.1; }
.company-ps-computer .document-meta-box span {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
  text-overflow: clip;
  font-variant-numeric: tabular-nums;
}
.company-ps-computer #printDocumentNumber { font-size: inherit; letter-spacing: -.05mm; }
.company-ps-computer .quotation-intro, .company-ps-computer #standardDocumentTable { display: none; }
.seniorsoft-items { display: none; }
.company-ps-computer .seniorsoft-items { display: table; border: 1px solid var(--pc-ink); border-top: 0; }
.seniorsoft-items th, .seniorsoft-items td { border-left: 1px solid #496275; border-right: 1px solid #496275; }
.seniorsoft-items .english-head th { height: 5mm; color: #365468; background: #f5f8fa; border-top: 0; border-bottom: 0; font-family: Arial, sans-serif; font-size: 9.5pt; font-weight: 600; }
.seniorsoft-items .thai-head th { height: 6mm; color: #fff; background: var(--pc-ink); border-top: 0; border-bottom: 1px solid var(--pc-ink); font-size: 12.5pt; font-weight: 600; }
.seniorsoft-items .item-number { width: 10mm; }
.seniorsoft-items .qty { width: 15mm; }
.seniorsoft-items .unit { width: 14mm; }
.seniorsoft-items .price { width: 24mm; }
.seniorsoft-items .discount { width: 20mm; }
.seniorsoft-items .amount { width: 27mm; }
.company-ps-computer .seniorsoft-items tbody td { height: var(--pc-rendered-row-h, 5.4mm) !important; max-height: var(--pc-rendered-row-h, 5.4mm) !important; overflow: hidden; padding: 0 1mm; font-size: 13pt; font-weight: 400; line-height: 1.08; white-space: nowrap; }
.seniorsoft-items tbody td:first-child, .seniorsoft-items tbody td:nth-child(3), .seniorsoft-items tbody td:nth-child(4) { text-align: center; }
.seniorsoft-items tbody td:nth-child(n+5) { text-align: right; }
.company-ps-computer .seniorsoft-items tbody tr.has-spec td { height: auto !important; max-height: none !important; padding-top: .6mm; padding-bottom: .6mm; vertical-align: top; white-space: normal; }
.seniorsoft-items tbody .item-spec { padding-left: 2mm; color: #344f61; font-size: 11.5pt; line-height: 1.08; }
.seniorsoft-items tfoot td, .seniorsoft-items tfoot th { height: 8.5mm; padding: .5mm 1.2mm; border: 1px solid #496275; font-size: 11.5pt; font-weight: 600; line-height: 1.05; }
.seniorsoft-items tfoot th { color: var(--pc-ink); background: #f0f5f8; text-align: right; vertical-align: middle; }
.seniorsoft-items tfoot th .pc-total-thai, .seniorsoft-items tfoot th .pc-total-en { display: block; float: none; max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.seniorsoft-items tfoot th .pc-total-thai { color: var(--pc-ink); font-family: "TH Sarabun New", "Sarabun", "Leelawadee UI", sans-serif; font-size: 11.5pt; font-weight: 600; }
.seniorsoft-items tfoot th .pc-total-en { margin-top: .2mm; color: #496275; font-family: Arial, sans-serif; font-size: 8.5pt; font-weight: 500; }
.seniorsoft-items tfoot td:last-child { text-align: right; white-space: nowrap; font-size: 11.5pt; font-variant-numeric: tabular-nums; }
#psComputerNoteCell { overflow: hidden; padding: 1mm 1.3mm; vertical-align: top; text-align: left; }
#psComputerNoteCell strong { display: block; margin: 0 0 .25mm; color: var(--pc-ink); font-size: 10pt; line-height: 1.05; }
#psComputerNoteCell span { display: block; max-height: 24mm; overflow: hidden; font-size: 9pt; line-height: 1.12; white-space: pre-line; }
#psComputerBahtText { color: var(--pc-ink); background: #e8f0f5; text-align: center; font-size: 11.5pt; font-weight: 600; }
.seniorsoft-items .pc-grand-total-row th, .seniorsoft-items .pc-grand-total-row td { color: #fff; background: var(--pc-ink); font-size: 11.5pt; }
.seniorsoft-items .pc-grand-total-row th .pc-total-en { color: #dbe8ef; }
.ps-computer-footer { display: grid; grid-template-columns: minmax(0, 1fr) 116mm; min-height: 34mm; border: 1px solid var(--pc-ink); border-top: 0; font-size: 9pt; line-height: 1.12; }
.ps-computer-footer[hidden] { display: none; }
.ps-computer-footer-note { min-width: 0; overflow: hidden; padding: 1mm 1.5mm; border-right: 1px solid #496275; }
.ps-computer-footer-note strong { display: block; color: var(--pc-ink); font-size: 10pt; line-height: 1.05; }
.ps-computer-footer-note span { display: block; max-height: 20mm; margin-top: .5mm; overflow: hidden; font-size: 9pt; line-height: 1.15; white-space: pre-line; }
.ps-computer-signatures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 26mm; }
.ps-computer-signatures > div { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: flex-end; padding: 1mm .8mm; text-align: center; }
.ps-computer-signatures > div + div { border-left: 1px solid #496275; }
.ps-computer-signatures > div > span { width: 100%; min-height: 8mm; margin-bottom: auto; color: var(--pc-ink); font-size: 9.5pt; font-weight: 600; line-height: 1.12; white-space: normal; word-break: normal; overflow-wrap: normal; }
.ps-computer-signatures .print-issuer-sign-img { bottom: 7mm; }
.pc-sign-line { width: 88%; overflow: hidden; font-size: 8pt; line-height: 1; white-space: nowrap; }
.ps-computer-signatures small { font-size: 8.5pt; line-height: 1.1; }
.pc-stamp-cell { overflow: hidden; }
.pc-stamp-placeholder { position: absolute; top: 50%; left: 50%; display: grid; width: 27mm; height: 13mm; place-items: center; transform: translate(-50%, -50%); border: .25mm dashed #8fa4b1; border-radius: 50%; color: #738b99; font-size: 7.5pt; font-weight: 500; line-height: 1; }
.pc-stamp-cell .print-stamp-img { z-index: 1; top: 52%; max-width: 31mm; max-height: 18mm; }
.pc-stamp-cell:has(.print-stamp-img:not([hidden])) .pc-stamp-placeholder { opacity: .15; }
.ps-computer-footer-meta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 3mm; min-height: 8mm; padding: .8mm 2mm; color: #fff; background: var(--pc-ink); font-family: "TH Sarabun New", "Sarabun", "Leelawadee UI", sans-serif; }
.ps-computer-footer-meta strong { font-size: 12.5pt; letter-spacing: 0; }
.ps-computer-footer-meta span { font-size: 12pt; font-weight: 500; }

.customer-print-block { display: grid; grid-template-columns: minmax(0, 1fr) var(--document-meta-column-width, 48mm); min-height: 33mm; border-left: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; }
.type-receipt .customer-print-block { grid-template-columns: minmax(0, 1fr) var(--document-meta-column-width, 48mm); }
.customer-print-fields { position: relative; overflow: hidden; padding: 1.5mm; }
.customer-print-fields > div:not(.linked-print-info) { display: grid; grid-template-columns: max-content 1fr; gap: 2.5mm; min-height: 7.2mm; font-size: 17.5pt; line-height: 1.05; align-items: start; }
.customer-print-fields span { min-width: 0; overflow: hidden; }
.customer-print-fields > div:not(.cust-wrap) span { white-space: nowrap; text-overflow: ellipsis; }
.customer-print-fields > div.cust-wrap span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.linked-print-info { position: absolute; right: 1.5mm; bottom: 1.3mm; left: 66mm; display: flex; flex-direction: column; gap: 1.2mm; font-size: 12.5pt; line-height: 1; white-space: nowrap; }
.linked-print-info span { display: block; }
.document-meta-box { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-content: center; gap: 4mm 3mm; padding: 3mm 3mm 3mm 4mm; border-left: 1px solid #000; font-size: 17pt; }
.document-meta-box > div { display: contents; }
.document-meta-box span { min-width: 0; text-align: right; overflow-wrap: anywhere; word-break: break-word; white-space: normal; line-height: 1.05; }
#printDocumentNumber { font-size: 15pt; }
.customer-print-block.no-meta { grid-template-columns: 1fr; }

.quotation-intro { height: 12mm; padding: 1mm 1.5mm; border-left: 1px solid #000; border-right: 1px solid #000; font-size: 15.5pt; line-height: 1.05; }
.document-items { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14.5pt; }
.document-items th, .document-items td { border-left: 1px solid #000; border-right: 1px solid #000; }
.document-items thead th { text-align: center; font-weight: 700; }
.document-items .thai-head th { height: 6.5mm; padding-top: .7mm; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.document-items .english-head th { height: 5.5mm; border-bottom: 1px solid #000; }
.document-items .item-number { width: 14mm; }
.document-items .qty { width: 18mm; }
.document-items .price { width: 20mm; }
.document-items .discount { width: 21mm; }
.document-items .amount { width: 28mm; }
.document-items .print-discount-col { display: none; }
.document-items.discount-enabled .print-discount-col { display: table-cell; }
#psComputerTable:not(.discount-enabled) .discount { display: none; }
.discount-summary-row th,
.discount-summary-row td:last-child { color: #a21b19; font-weight: 700; }
.document-items tbody td { height: 5.5mm; max-height: 5.5mm; overflow: hidden; padding: 0 1mm; vertical-align: middle; font-weight: 700; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.document-items tbody td:first-child, .document-items tbody td:nth-child(n+3) { text-align: center; }
.document-items tbody td:nth-last-child(-n+2) { text-align: right; padding-right: 1.5mm; }
.document-items tfoot td, .document-items tfoot th { height: 6.5mm; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 0 1.5mm; font-size: 16pt; line-height: 1; white-space: nowrap; }
.document-items tfoot th { text-align: center; font-weight: 400; }
.document-items tfoot td:last-child { text-align: right; }
#bahtTextCell { text-align: center; font-weight: 700; background: #e7e7e7; }
.document-items tbody td .item-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-items tbody tr.has-spec td { height: auto; max-height: none; vertical-align: top; padding-top: .6mm; padding-bottom: .8mm; }
.document-items tbody tr.has-spec td:nth-child(2) { white-space: normal; line-height: 1.1; }
.document-items tbody tr.has-spec td .item-main { overflow: visible; text-overflow: clip; white-space: normal; }
.document-items tbody tr.has-spec .item-spec { font-size: 12pt; font-weight: 600; padding-left: 3mm; }

.document-images { border-left: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; padding: 1.5mm; }
.document-images-grid { display: flex; flex-wrap: wrap; gap: 2mm; align-items: flex-start; justify-content: center; }
.document-images figure { margin: 0; flex: 0 0 auto; }
.document-images img { max-height: 30mm; max-width: 46mm; object-fit: contain; border: 1px solid #999; }

.document-footer { border-left: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; font-size: 13.5pt; }
.conditions-grid, .delivery-conditions { display: grid; grid-template-columns: 1fr 1.2fr; min-height: 31mm; }
.conditions-grid > div, .delivery-conditions > div { padding: 1.5mm; }
.conditions-grid > div + div, .delivery-conditions > div + div { border-left: 1px solid #000; }
.conditions-grid p, .delivery-conditions p { margin: .7mm 0; line-height: 1; }
.quotation-signatures, .delivery-signatures { display: grid; grid-template-columns: repeat(4, 1fr); height: 25mm; border-top: 1px solid #000; }
.quotation-signatures > div, .delivery-signatures > div { display: flex; box-sizing: border-box; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 1mm 2.2mm; text-align: center; }
.quotation-signatures span, .delivery-signatures span { margin-bottom: auto; padding-top: 1mm; }
.quotation-signatures strong, .delivery-signatures strong { display: block; flex: 0 0 auto; min-height: 4.2mm; line-height: 1.15; }
.ps-signature-line { display: block; flex: 0 0 auto; width: 72%; height: 0; margin: 0 0 1.8mm; border-top: 1px solid #000; font-size: 0; line-height: 0; }
.delivery-warning, .bank-line, .delivery-acceptance { margin: 0; border-top: 1px solid #000; padding: .7mm 1.5mm; line-height: 1; text-align: center; }
.delivery-warning { font-weight: 700; }
.bank-line { font-size: 11.5pt; }
.delivery-signatures { height: 23mm; }
.delivery-acceptance { font-size: 11.5pt; }
.billing-footer { min-height: 43mm; padding: 2mm; font-size: 15pt; }
.billing-footer p { margin: 2mm 0; line-height: 1.1; }
.print-note-text { white-space: pre-line; }
.receipt-footer { border: 0; }
.receipt-signatures { display: grid; grid-template-columns: 1fr 1fr; height: 27mm; border-left: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; font-size: 13.5pt; }
.receipt-signatures > div { display: flex; box-sizing: border-box; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 1mm 2.2mm; text-align: center; }
.receipt-signatures > div + div { border-left: 1px solid #000; }
.receipt-signatures strong { display: block; flex: 0 0 auto; min-height: 4.2mm; line-height: 1.15; }
.receipt-footer > p { margin: 0; padding: 1mm 0; font-size: 13.5pt; line-height: 1; text-align: center; }
.sig-authorized, .sig-stamp { position: relative; }
.print-sign-img, .print-issuer-sign-img, .print-shipper-sign-img { position: absolute; left: 50%; transform: translateX(-50%); bottom: 6mm; max-height: 14mm; max-width: 90%; object-fit: contain; pointer-events: none; }
.print-stamp-img { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); max-height: 21mm; max-width: 92%; object-fit: contain; pointer-events: none; }
.receipt-signatures .print-sign-img, .receipt-signatures .print-issuer-sign-img, .receipt-signatures .print-shipper-sign-img { bottom: 6mm; max-height: 14mm; }
.receipt-signatures .print-stamp-img { max-height: 21mm; max-width: 42mm; }

.type-delivery .quotation-intro, .type-billing .quotation-intro, .type-receipt .quotation-intro { display: none; }
.type-billing .document-items tbody td { height: 4.75mm; max-height: 4.75mm; }
.type-delivery .document-items tbody td { height: 5.75mm; max-height: 5.75mm; }
.type-receipt .document-items tbody td { height: 5.5mm; max-height: 5.5mm; }

/* ===== PS Supplies approved Excel print form ===== */
.document-page:not(.company-ps-computer) {
  --item-row-h: 7.2mm;
  --total-row-h: 7.6mm;
  --image-zone-h: 50.4mm;
  font-family: "Sarabun Embedded", "Sarabun", "Leelawadee UI", Tahoma, sans-serif;
  padding: 13mm 5.3mm 4mm;
}
.document-page.type-delivery:not(.company-ps-computer) {
  --item-row-h: 7.2mm;
  --total-row-h: 7.6mm;
  --image-zone-h: 50.4mm;
  padding-top: 13mm;
  padding-right: 5.3mm;
  padding-left: 5.3mm;
}
.document-page.type-receipt:not(.company-ps-computer) {
  --item-row-h: 7.2mm;
  --total-row-h: 7.6mm;
  --image-zone-h: 50.4mm;
  padding-top: 13mm;
  padding-right: 5.3mm;
  padding-left: 5.3mm;
}
.document-page.type-billing:not(.company-ps-computer) {
  --item-row-h: 7.2mm;
  --total-row-h: 7.6mm;
  --image-zone-h: 50.4mm;
  padding-top: 13mm;
  padding-right: 5.3mm;
  padding-left: 5.3mm;
}

.document-page:not(.company-ps-computer) .store-header {
  height: 21.4mm;
  overflow: visible;
  border-bottom: 0;
  padding: 0;
}
.document-page.type-delivery:not(.company-ps-computer) .store-header { height: 21.4mm; }
.document-page.type-receipt:not(.company-ps-computer) .store-header { height: 21.4mm; }
.document-page.type-billing:not(.company-ps-computer) .store-header { height: 21.4mm; }
.document-page:not(.company-ps-computer) .store-header h2 {
  height: 7.4mm;
  margin: 0;
  border-bottom: 1px solid #000;
  font-size: 19.6pt;
  line-height: 1;
}
.document-page.type-delivery:not(.company-ps-computer) .store-header h2 { font-size: 19.6pt; }
.document-page.type-receipt:not(.company-ps-computer) .store-header h2 { font-size: 19.6pt; }
.document-page.type-billing:not(.company-ps-computer) .store-header h2 { font-size: 19.6pt; }
.document-page:not(.company-ps-computer) .store-header p {
  height: 5.65mm;
  margin: 0;
  font-size: 15.4pt;
  line-height: 1;
}
.document-page.type-delivery:not(.company-ps-computer) .store-header p { font-size: 15.4pt; }
.document-page.type-receipt:not(.company-ps-computer) .store-header p { font-size: 15.4pt; }
.document-page.type-billing:not(.company-ps-computer) .store-header p { height: 5.65mm; font-size: 15.4pt; }

.document-page:not(.company-ps-computer) .document-title {
  height: 8.9mm;
  margin-top: 2mm;
  border-top: 0;
  border-bottom: 1px solid #000;
  font-size: 25.2pt;
  line-height: 1;
}
.document-page.type-delivery:not(.company-ps-computer) .document-title { font-size: 25.2pt; }
.document-page.type-receipt:not(.company-ps-computer) .document-title { height: 8.9mm; font-size: 25.2pt; }
.document-page.type-billing:not(.company-ps-computer) .document-title { height: 8.9mm; margin-top: 2mm; font-size: 25.2pt; }

.document-page:not(.company-ps-computer) .customer-print-block { min-height: 28.8mm; grid-template-columns: minmax(0, 1fr) var(--document-meta-column-width, 30mm); }
.document-page.type-delivery:not(.company-ps-computer) .customer-print-block { min-height: 28.8mm; grid-template-columns: minmax(0, 1fr) var(--document-meta-column-width, 30mm); }
.document-page.type-receipt:not(.company-ps-computer) .customer-print-block { min-height: 28.8mm; grid-template-columns: minmax(0, 1fr) var(--document-meta-column-width, 30mm); }
.document-page.type-billing:not(.company-ps-computer) .customer-print-block { min-height: 28.8mm; grid-template-columns: minmax(0, 1fr) var(--document-meta-column-width, 30mm); }
.document-page.discount-enabled:not(.company-ps-computer) .customer-print-block { grid-template-columns: minmax(0, 1fr) var(--document-meta-column-width, 48mm); }
.document-page.type-delivery.discount-enabled:not(.company-ps-computer) .customer-print-block { grid-template-columns: minmax(0, 1fr) var(--document-meta-column-width, 48mm); }
.document-page.type-receipt.discount-enabled:not(.company-ps-computer) .customer-print-block { grid-template-columns: minmax(0, 1fr) var(--document-meta-column-width, 48mm); }
.document-page.type-billing.discount-enabled:not(.company-ps-computer) .customer-print-block { grid-template-columns: minmax(0, 1fr) var(--document-meta-column-width, 48mm); }
.document-page:not(.company-ps-computer):not(.discount-enabled) .document-meta-box {
  grid-template-columns: minmax(0, 1fr);
  gap: 1mm;
  padding-right: .7mm;
  padding-left: .7mm;
}
.document-page:not(.company-ps-computer):not(.discount-enabled) .document-meta-box > div:not([hidden]) {
  display: flex;
  grid-column: 1 / -1;
  align-items: baseline;
  justify-content: space-between;
  gap: .5mm;
  min-width: 0;
  width: 100%;
  white-space: nowrap;
}
.document-page:not(.company-ps-computer):not(.discount-enabled) .document-meta-box > div[hidden] { display: none; }
.document-page:not(.company-ps-computer):not(.discount-enabled) .document-meta-box strong,
.document-page:not(.company-ps-computer):not(.discount-enabled) .document-meta-box span {
  flex: 0 0 auto;
  overflow: visible;
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}
.document-page:not(.company-ps-computer) .customer-print-fields { padding: .7mm .5mm; }
.document-page:not(.company-ps-computer) .customer-print-fields > div:not(.linked-print-info) {
  min-height: 6.85mm;
  gap: 2mm;
  font-size: 15.4pt;
  line-height: 1;
}
.document-page.type-delivery:not(.company-ps-computer) .customer-print-fields > div:not(.linked-print-info) { min-height: 6.85mm; font-size: 15.4pt; }
.document-page.type-receipt:not(.company-ps-computer) .customer-print-fields > div:not(.linked-print-info) { min-height: 6.85mm; font-size: 15.4pt; }
.document-page.type-billing:not(.company-ps-computer) .customer-print-fields > div:not(.linked-print-info) { min-height: 6.85mm; font-size: 15.4pt; }
.document-page:not(.company-ps-computer) .document-meta-box {
  padding: 2mm 2mm 2mm 3mm;
  gap: 2mm;
  font-size: 15.4pt;
}
.document-page.type-delivery:not(.company-ps-computer) .document-meta-box { font-size: 15.4pt; }
.document-page.type-receipt:not(.company-ps-computer) .document-meta-box { font-size: 15.4pt; }
.document-page.type-billing:not(.company-ps-computer) .document-meta-box { font-size: 15.4pt; }
.document-page:not(.company-ps-computer) #printDocumentNumber { font-size: inherit; }
.document-page:not(.company-ps-computer) .linked-print-info {
  left: 68mm;
  right: 1mm;
  bottom: .8mm;
  gap: .6mm;
  font-size: 12.6pt;
}

.document-page:not(.company-ps-computer) .quotation-intro {
  height: 11.9mm;
  padding: .7mm .5mm;
  font-size: 12.6pt;
  line-height: 1;
}
.document-page:not(.company-ps-computer) .document-items { font-size: 12.6pt; }
.document-page.type-delivery:not(.company-ps-computer) .document-items { font-size: 12.6pt; }
.document-page.type-receipt:not(.company-ps-computer) .document-items { font-size: 12.6pt; }
.document-page.type-billing:not(.company-ps-computer) .document-items { font-size: 12.6pt; }
.document-page:not(.company-ps-computer) .document-items .thai-head th,
.document-page:not(.company-ps-computer) .document-items .english-head th {
  height: 7.3mm;
  padding: 0 .5mm;
  font-size: 14pt;
  line-height: 1;
}
.document-page.type-delivery:not(.company-ps-computer) .document-items .thai-head th,
.document-page.type-delivery:not(.company-ps-computer) .document-items .english-head th { height: 7.3mm; font-size: 14pt; }
.document-page.type-receipt:not(.company-ps-computer) .document-items .thai-head th,
.document-page.type-receipt:not(.company-ps-computer) .document-items .english-head th { height: 7.3mm; font-size: 14pt; }
.document-page.type-billing:not(.company-ps-computer) .document-items .thai-head th,
.document-page.type-billing:not(.company-ps-computer) .document-items .english-head th { height: 7.3mm; font-size: 14pt; }
.document-page:not(.company-ps-computer) .document-items .item-number { width: 14mm; }
.document-page:not(.company-ps-computer) .document-items .qty { width: 18mm; }
.document-page:not(.company-ps-computer) .document-items .price { width: 18mm; }
.document-page:not(.company-ps-computer) .document-items .amount { width: 30mm; }
.document-page.type-delivery:not(.company-ps-computer) .document-items .item-number { width: 14mm; }
.document-page.type-delivery:not(.company-ps-computer) .document-items .qty { width: 18mm; }
.document-page.type-delivery:not(.company-ps-computer) .document-items .amount { width: 30mm; }
.document-page.type-receipt:not(.company-ps-computer) .document-items .item-number { width: 14mm; }
.document-page.type-receipt:not(.company-ps-computer) .document-items .qty { width: 18mm; }
.document-page.type-receipt:not(.company-ps-computer) .document-items .price { width: 18mm; }
.document-page.type-receipt:not(.company-ps-computer) .document-items .amount { width: 30mm; }
.document-page.type-billing:not(.company-ps-computer) .document-items .item-number { width: 14mm; }
.document-page.type-billing:not(.company-ps-computer) .document-items .qty { width: 18mm; }
.document-page.type-billing:not(.company-ps-computer) .document-items .price { width: 18mm; }
.document-page.type-billing:not(.company-ps-computer) .document-items .amount { width: 30mm; }

.document-page:not(.company-ps-computer) .document-items:not(.seniorsoft-items) { --active-row-h: var(--rendered-row-h, var(--item-row-h)); }
.document-page:not(.company-ps-computer) .document-items:not(.seniorsoft-items).discount-enabled { --active-row-h: calc(var(--rendered-row-h, var(--item-row-h)) - var(--discount-row-shrink, .25mm)); }
.document-page:not(.company-ps-computer) .document-items tbody td {
  height: var(--active-row-h) !important;
  max-height: var(--active-row-h) !important;
  padding: 0 .7mm;
  font-size: inherit;
  line-height: 1;
}
.document-page:not(.company-ps-computer) .document-items tbody tr.has-spec td {
  height: auto !important;
  max-height: none !important;
  padding-top: 0;
  padding-bottom: 0;
}
.document-page:not(.company-ps-computer) .document-items tbody tr.has-spec .item-main,
.document-page:not(.company-ps-computer) .document-items tbody tr.has-spec .item-spec {
  display: flex;
  min-height: var(--active-row-h);
  align-items: center;
  padding: 0;
  font-size: inherit;
  line-height: 1;
}
.document-page:not(.company-ps-computer) .document-items tbody tr.has-spec .item-spec { padding-left: 3mm; font-weight: 600; }
.document-page:not(.company-ps-computer) .document-items tfoot td,
.document-page:not(.company-ps-computer) .document-items tfoot th {
  height: var(--total-row-h);
  padding: 0 1mm;
  font-size: 14pt;
  line-height: 1;
}
.document-page.type-delivery:not(.company-ps-computer) .document-items tfoot td,
.document-page.type-delivery:not(.company-ps-computer) .document-items tfoot th { font-size: 14pt; }
.document-page.type-receipt:not(.company-ps-computer) .document-items tfoot td,
.document-page.type-receipt:not(.company-ps-computer) .document-items tfoot th { font-size: 14pt; }
.document-page.type-billing:not(.company-ps-computer) .document-items tfoot td,
.document-page.type-billing:not(.company-ps-computer) .document-items tfoot th { font-size: 14pt; }
.document-page:not(.company-ps-computer) .document-items .discount { width: 18mm; }

.document-page:not(.company-ps-computer) .document-images:not([hidden]) {
  display: grid;
  height: var(--image-zone-h);
  overflow: hidden;
  padding: 1.5mm;
}
.document-page:not(.company-ps-computer) .document-images-grid {
  display: grid;
  grid-template-columns: repeat(var(--image-cols, 1), minmax(0, 1fr));
  gap: 2mm;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-items: center;
}
.document-page:not(.company-ps-computer) .document-images figure {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
}
.document-page:not(.company-ps-computer) .document-images img { width: auto; height: auto; }

.document-page:not(.company-ps-computer) .document-footer { font-size: 12.6pt; }
.document-page:not(.company-ps-computer) .conditions-grid { min-height: 27mm; }
.document-page:not(.company-ps-computer) .conditions-grid > div { padding: 1mm .5mm; }
.document-page:not(.company-ps-computer) .conditions-grid p { margin: .45mm 0; line-height: 1; }
.document-page:not(.company-ps-computer) .quotation-signatures { height: 33.4mm; }
.document-page.type-delivery:not(.company-ps-computer) .document-footer { font-size: 12.6pt; }
.document-page.type-delivery:not(.company-ps-computer) .delivery-conditions { min-height: 18mm; }
.document-page.type-delivery:not(.company-ps-computer) .delivery-conditions > div { padding: .8mm .5mm; }

/* Stable cross-device typography: Android and Windows render the same A4 metrics. */
.document-page:not(.company-ps-computer) .store-header {
  height: 18mm;
  overflow: hidden;
}
.document-page:not(.company-ps-computer) .store-header h2 {
  display: flex;
  height: 6mm;
  align-items: center;
  overflow: hidden;
  font-size: 14pt;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.document-page:not(.company-ps-computer) .store-header p {
  display: flex;
  height: 5mm;
  align-items: center;
  overflow: hidden;
  font-size: 10.5pt;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}
.document-page:not(.company-ps-computer) .document-title {
  height: 9mm;
  padding: .35mm 1mm 0;
  overflow: hidden;
  font-size: 17.5pt;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.document-page:not(.company-ps-computer) .customer-print-fields > div:not(.linked-print-info) {
  font-size: 11pt;
  line-height: 1.15;
}
.document-page:not(.company-ps-computer) .document-meta-box {
  font-size: 10.5pt;
  line-height: 1.15;
}
.document-page:not(.company-ps-computer) .quotation-intro {
  height: 10.5mm;
  font-size: 9.5pt;
  line-height: 1.15;
}
.document-page:not(.company-ps-computer) .document-items,
.document-page.type-delivery:not(.company-ps-computer) .document-items,
.document-page.type-receipt:not(.company-ps-computer) .document-items,
.document-page.type-billing:not(.company-ps-computer) .document-items { font-size: 9.5pt; }
.document-page:not(.company-ps-computer) .document-items .thai-head th,
.document-page.type-delivery:not(.company-ps-computer) .document-items .thai-head th,
.document-page.type-receipt:not(.company-ps-computer) .document-items .thai-head th,
.document-page.type-billing:not(.company-ps-computer) .document-items .thai-head th {
  height: 6.2mm;
  padding: .2mm .45mm 0;
  overflow: hidden;
  font-size: 10.5pt;
  line-height: 1.05;
  vertical-align: middle;
  white-space: normal;
}
.document-page:not(.company-ps-computer) .document-items .english-head th,
.document-page.type-delivery:not(.company-ps-computer) .document-items .english-head th,
.document-page.type-receipt:not(.company-ps-computer) .document-items .english-head th,
.document-page.type-billing:not(.company-ps-computer) .document-items .english-head th {
  height: 5.2mm;
  padding: 0 .35mm;
  overflow: hidden;
  font-family: Arial, sans-serif;
  font-size: 7.5pt;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}
.document-page:not(.company-ps-computer) .document-items tfoot td,
.document-page:not(.company-ps-computer) .document-items tfoot th,
.document-page.type-delivery:not(.company-ps-computer) .document-items tfoot td,
.document-page.type-delivery:not(.company-ps-computer) .document-items tfoot th,
.document-page.type-receipt:not(.company-ps-computer) .document-items tfoot td,
.document-page.type-receipt:not(.company-ps-computer) .document-items tfoot th,
.document-page.type-billing:not(.company-ps-computer) .document-items tfoot td,
.document-page.type-billing:not(.company-ps-computer) .document-items tfoot th {
  height: 6.5mm;
  overflow: hidden;
  font-size: 10pt;
  line-height: 1.1;
  vertical-align: middle;
  white-space: nowrap;
}
.document-page:not(.company-ps-computer) .document-footer,
.document-page.type-delivery:not(.company-ps-computer) .document-footer,
.document-page.type-receipt:not(.company-ps-computer) .document-footer,
.document-page.type-billing:not(.company-ps-computer) .document-footer {
  font-size: 9.5pt;
  line-height: 1.15;
}
.document-page.company-ps-computer { font-family: "Sarabun Embedded", "Sarabun", "Leelawadee UI", Tahoma, sans-serif; }
.company-ps-computer .store-header { height: 28mm; }
.company-ps-computer .store-header h2 { font-family: "Sarabun Embedded", "Sarabun", "Leelawadee UI", Tahoma, sans-serif; font-size: 18pt; }
.company-ps-computer .store-header p { font-family: "Sarabun Embedded", "Sarabun", "Leelawadee UI", Tahoma, sans-serif; }
.company-ps-computer .store-header p:first-of-type { font-size: 11pt; line-height: 1.05; white-space: nowrap; }
.company-ps-computer .store-header p:nth-of-type(2) { font-size: 11.5pt; line-height: 1.05; white-space: nowrap; }
.company-ps-computer .store-header .company-tax-line { font-size: 11.5pt; line-height: 1.05; white-space: nowrap; }
.document-page.type-delivery:not(.company-ps-computer) .delivery-warning { min-height: 5.3mm; padding: .7mm .5mm; }
.document-page.type-delivery:not(.company-ps-computer) .bank-line { min-height: 4.7mm; padding: .35mm .5mm; font-size: 12.6pt; }
.document-page.type-delivery:not(.company-ps-computer) .delivery-signatures { height: 33.4mm; }
.document-page.type-delivery:not(.company-ps-computer) .delivery-acceptance { min-height: 5mm; padding: .35mm .5mm; font-size: 12.6pt; }
.document-page.type-receipt:not(.company-ps-computer) .receipt-signatures { height: 33.4mm; font-size: 12.6pt; }
.document-page.type-receipt:not(.company-ps-computer) .receipt-footer > p { padding: 1mm 0 0; font-size: 12.6pt; }
.document-page.type-billing:not(.company-ps-computer) .billing-footer {
  min-height: 0;
  border: 0;
  padding: 4mm .5mm 0;
  font-size: 12.6pt;
}
.document-page.type-billing:not(.company-ps-computer) .billing-footer p { margin: 1mm 0 0; line-height: 1.15; }

/* Keep the alternate document footers inside the same print-safe type scale. */
.document-page.type-delivery:not(.company-ps-computer) .bank-line,
.document-page.type-delivery:not(.company-ps-computer) .delivery-acceptance,
.document-page.type-receipt:not(.company-ps-computer) .receipt-signatures,
.document-page.type-receipt:not(.company-ps-computer) .receipt-footer > p,
.document-page.type-billing:not(.company-ps-computer) .billing-footer {
  font-size: 9.5pt;
  line-height: 1.15;
}

/* One print typography system for every PS Supplies document type. */
.document-page.type-delivery:not(.company-ps-computer) .store-header,
.document-page.type-billing:not(.company-ps-computer) .store-header,
.document-page.type-receipt:not(.company-ps-computer) .store-header { height: 18mm; overflow: hidden; }
.document-page.type-delivery:not(.company-ps-computer) .store-header h2,
.document-page.type-billing:not(.company-ps-computer) .store-header h2,
.document-page.type-receipt:not(.company-ps-computer) .store-header h2 {
  height: 6mm;
  font-size: 14pt;
  font-weight: 700;
  line-height: 1.1;
}
.document-page.type-delivery:not(.company-ps-computer) .store-header p,
.document-page.type-billing:not(.company-ps-computer) .store-header p,
.document-page.type-receipt:not(.company-ps-computer) .store-header p {
  height: 5mm;
  font-size: 10.5pt;
  font-weight: 500;
  line-height: 1.1;
}
.document-page.type-delivery:not(.company-ps-computer) .document-title,
.document-page.type-billing:not(.company-ps-computer) .document-title,
.document-page.type-receipt:not(.company-ps-computer) .document-title {
  height: 9mm;
  margin-top: 2mm;
  padding: .35mm 1mm 0;
  overflow: hidden;
  font-size: 17.5pt;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.document-page.type-delivery:not(.company-ps-computer) .customer-print-fields > div:not(.linked-print-info),
.document-page.type-billing:not(.company-ps-computer) .customer-print-fields > div:not(.linked-print-info),
.document-page.type-receipt:not(.company-ps-computer) .customer-print-fields > div:not(.linked-print-info) {
  font-size: 11pt;
  line-height: 1.15;
}
.document-page.type-delivery:not(.company-ps-computer) .document-meta-box,
.document-page.type-billing:not(.company-ps-computer) .document-meta-box,
.document-page.type-receipt:not(.company-ps-computer) .document-meta-box {
  font-size: 10.5pt;
  line-height: 1.15;
}

/* PS Computer uses the same embedded Thai font in all document variants. */
.document-page.company-ps-computer,
.document-page.company-ps-computer .store-header h2,
.document-page.company-ps-computer .store-header p,
.document-page.company-ps-computer .company-tax-line,
.document-page.company-ps-computer .document-title,
.document-page.company-ps-computer .customer-print-block,
.document-page.company-ps-computer .seniorsoft-items,
.document-page.company-ps-computer .ps-computer-footer {
  font-family: "Sarabun Embedded", "Sarabun", "Leelawadee UI", Tahoma, sans-serif;
}
.document-page.company-ps-computer .seniorsoft-items .english-head th,
.document-page.company-ps-computer .pc-total-en { font-family: Arial, sans-serif; }

/* Render the natural A4 box when exporting a shareable image. */
.document-share-export .document-page {
  transform: none !important;
  box-shadow: none !important;
}

.history-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.history-card { border: 1px solid #dce6e9; border-radius: 13px; padding: 13px; background: #fff; box-shadow: 0 7px 18px rgba(3, 51, 82, .05); }
.history-card-top { display: flex; justify-content: space-between; gap: 10px; }
.history-card h3 { margin: 0; color: var(--blue); font-size: 16px; font-weight: 800; }
.history-card p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.history-docs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.history-docs span { padding: 4px 7px; border-radius: 7px; background: #edf5f7; color: var(--blue); font-size: 12px; font-weight: 800; }
.history-card-actions { display: flex; gap: 6px; margin-top: 10px; }
.history-card-actions button { border: 1px solid #cfe0e6; border-radius: 8px; padding: 6px 9px; background: #edf5f7; color: var(--blue); font-weight: 800; font-size: 12px; }
.history-card-actions .delete-history { border-color: #fecdd3; background: #fff1f2; color: var(--danger); }
.empty-state { padding: 28px 12px; text-align: center; color: var(--muted); font-size: 14px; font-weight: 600; }
.settings-card { padding: 16px; border: 1px solid #cbdfe6; border-radius: 14px; background: linear-gradient(145deg, #f1f7f8, #e8f2f5); }
.settings-card h3 { margin: 0 0 7px; color: var(--blue); font-size: 18px; font-weight: 800; }
.settings-card p { color: #101e28; line-height: 1.55; font-size: 13px; font-weight: 600; }
.admin-settings h4 { margin: 12px 0 8px; color: var(--ink); font-size: 14px; }
.admin-user-form { display: grid; gap: 10px; }
.admin-status { min-height: 18px; margin: 0; color: var(--blue); font-weight: 800; }
.admin-oauth-note { margin: 8px 0 10px; padding: 9px 10px; border: 1px solid #cbdfe6; border-radius: 9px; color: #214a5b; background: #f7fbfd; font-size: 12px; font-weight: 800; }
.admin-oauth-tools { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.admin-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.admin-list { display: grid; gap: 7px; max-height: 260px; overflow: auto; }
.admin-item { display: grid; gap: 5px; padding: 9px; border: 1px solid #cbdfe6; border-radius: 9px; background: #fff; }
.admin-item strong { color: var(--ink); font-size: 13px; word-break: break-word; }
.admin-item small { color: var(--muted); font-weight: 700; }
.admin-item-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-empty { padding: 12px; border: 1px dashed #bdd0d8; border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.7); font-size: 12px; font-weight: 800; text-align: center; }
.file-button { display: inline-flex; align-items: center; }
.file-button input { display: none; }
.asset-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 11px; }
.asset-slot { display: flex; flex-direction: column; gap: 7px; padding: 10px; border: 1px solid #d5e1e5; border-radius: 12px; background: #fff; }
.asset-label { color: #071420; font-size: 14px; font-weight: 800; }
.asset-preview { display: grid; place-items: center; min-height: 80px; border: 1px dashed #c2d2da; border-radius: 10px; background: repeating-conic-gradient(#eef3f4 0% 25%, #fff 0% 50%) 50% / 16px 16px; }
.asset-preview img { max-height: 76px; max-width: 100%; object-fit: contain; }
.asset-empty { color: var(--muted); font-size: 13px; font-weight: 600; }
.asset-actions { display: flex; gap: 6px; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 50; max-width: 360px; padding: 12px 16px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--navy), var(--blue)); box-shadow: 0 14px 35px rgba(1, 31, 49, .3); opacity: 0; transform: translateY(15px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }

/* ===== PSUI — แจ้งเตือน/ยืนยันมาตรฐาน ===== */
.psui-toasts { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 7000; display: flex; flex-direction: column; align-items: center; gap: 9px; pointer-events: none; width: max-content; max-width: 92vw; }
.psui-toast { display: flex; align-items: center; gap: 10px; min-width: 200px; max-width: 92vw; padding: 11px 16px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--navy), var(--blue)); box-shadow: 0 16px 38px rgba(1, 31, 49, .32); font-size: 13.5px; font-weight: 700; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .22s ease, transform .22s ease; pointer-events: auto; cursor: default; }
.psui-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.psui-toast-ic { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.18); font-size: 13px; font-weight: 900; }
.psui-toast.psui-success { background: linear-gradient(135deg, #0f6b54, #1f8c6c); }
.psui-toast.psui-error { background: linear-gradient(135deg, #8f1d1d, #b91c1c); }
.psui-toast.psui-warning { background: linear-gradient(135deg, #8a5a12, #b07d1f); }
.psui-backdrop { position: fixed; inset: 0; z-index: 6000; display: grid; place-items: center; padding: 20px; background: rgba(1, 31, 49, .55); backdrop-filter: blur(4px); opacity: 0; transition: opacity .18s ease; }
.psui-backdrop.show { opacity: 1; }
.psui-dialog { width: min(400px, 100%); overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 30px 72px rgba(1, 31, 49, .4); transform: translateY(10px) scale(.97); transition: transform .2s ease; }
.psui-backdrop.show .psui-dialog { transform: translateY(0) scale(1); }
.psui-dialog-head { padding: 16px 20px 14px; color: #fff; background: linear-gradient(128deg, #011f31, #033352 65%, #075b78); }
.psui-dialog.danger .psui-dialog-head { background: linear-gradient(128deg, #5e1414, #8f1d1d 70%, #b53030); }
.psui-dialog-head small { display: block; color: var(--gold-light); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.psui-dialog.danger .psui-dialog-head small { color: #ffd9d3; }
.psui-dialog-head h3 { margin: 3px 0 0; font-size: 18px; }
.psui-dialog-body { display: flex; gap: 13px; align-items: flex-start; padding: 18px 20px 8px; }
.psui-dialog-ic { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; font-size: 19px; font-weight: 900; color: #fff; background: var(--blue-bright); }
.psui-dialog-ic.psui-warning, .psui-dialog-ic.psui-error { background: var(--danger); }
.psui-dialog-ic.psui-success { background: var(--success); }
.psui-dialog-msg { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.55; padding-top: 5px; }
.psui-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 12px 20px 18px; }
.psui-btn { border: 1px solid transparent; border-radius: 10px; padding: 10px 18px; font-weight: 800; font-size: 14px; transition: .15s ease; }
.psui-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, .14); }
.psui-btn:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.psui-cancel { background: #eef3f5; color: var(--blue); border-color: #cddbe1; }
.psui-ok { background: linear-gradient(135deg, #075978, #08769b); color: #fff; }
.psui-danger { background: linear-gradient(135deg, #b91c1c, #d63333); color: #fff; }
.psui-input { display: block; width: 100%; margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; font-size: 16px; font-weight: 700; color: var(--ink); }
.psui-input:focus { outline: 2px solid var(--blue-bright); border-color: var(--blue-bright); }
body.psui-modal-open { overflow: hidden; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(1, 31, 49, .58); backdrop-filter: blur(5px); }
.thai-calendar, .customer-modal { width: min(440px, 100%); overflow: hidden; border: 1px solid rgba(255,255,255,.45); border-radius: 20px; background: #fff; box-shadow: 0 28px 70px rgba(1, 31, 49, .32); }
.customer-modal { width: min(620px, 100%); padding-bottom: 18px; }
.calendar-topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; color: #fff; background: linear-gradient(128deg, #011f31, #033352 65%, #075b78); }
.calendar-topbar small { color: var(--gold-light); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.calendar-topbar h3 { margin: 2px 0 0; font-size: 20px; }
.modal-close { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; color: #fff; background: rgba(255,255,255,.10); font-size: 24px; }
.calendar-nav { display: grid; grid-template-columns: 38px 1fr 1fr 38px; gap: 7px; padding: 15px 16px 10px; }
.calendar-nav button, .calendar-nav select { min-width: 0; border: 1px solid #cbdbe1; border-radius: 9px; padding: 8px; color: var(--blue); background: #f8fbfc; font-weight: 800; }
.calendar-nav button { font-size: 22px; line-height: 1; }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 0 16px; }
.calendar-weekdays { margin: 5px 0; color: #3d535e; font-size: 12px; font-weight: 900; text-align: center; }
.calendar-days { min-height: 250px; align-content: start; }
.calendar-day { display: grid; place-items: center; aspect-ratio: 1; border: 0; border-radius: 10px; color: #254758; background: transparent; font-weight: 700; }
.calendar-day:hover { color: var(--blue); background: #e8f2f5; }
.calendar-day.other-month { color: #7a8a90; }
.calendar-day.today { box-shadow: inset 0 0 0 1px var(--gold); }
.calendar-day.selected { color: #fff; background: linear-gradient(145deg, #033352, #087092); box-shadow: 0 5px 12px rgba(3, 51, 82, .22); }
.calendar-actions { display: flex; justify-content: flex-end; gap: 7px; padding: 14px 16px 17px; border-top: 1px solid #e3eaed; }
.customer-modal form { padding: 17px 20px 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

@media (max-width: 1280px) {
  .app-shell { grid-template-columns: 1fr; }
  .editor-panel { position: static; max-height: none; }
  .preview-panel { overflow: auto; }
  .app-shell.editor-collapsed { grid-template-columns:0 minmax(0,1fr); gap:0; }
}

.sub-h2 { font-size: 18px; font-weight: 800; margin: 0; }
.summary-link-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(190px,.42fr); align-items: end; gap: 12px; margin: 12px 0 14px; border: 1px solid #9fcbd9; border-left: 5px solid #087b9d; border-radius: 13px; padding: 12px 13px; background: linear-gradient(135deg,#effafe,#fffaf0); }
.summary-link-status { display: flex; align-items: center; gap: 10px; min-width: 0; }.summary-link-icon { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: #087b9d; font-size: 19px; font-weight: 900; }.summary-link-status div { min-width: 0; }.summary-link-status strong { display: block; color: #073d58; font-size: 14px; }.summary-link-status small { display: block; margin-top: 2px; color: #526f7c; font-size: 11.5px; line-height: 1.35; overflow-wrap: anywhere; }
.summary-link-card .field { margin: 0; }.summary-link-card select { min-height: 42px; }
.summary-price-row { grid-template-columns: minmax(170px,1fr) minmax(220px,1.15fr) minmax(150px,.7fr); align-items: end; }
.summary-usetotal { align-self: end; }
.summary-cost-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.summary-cost-table { min-width: 960px; }
.summary-cost-table .source-col { width: 124px; }
.summary-cost-table .number-col { width: 74px; }.summary-cost-table .money-col { width: 94px; }
.summary-cost-table .include-col { width: 62px; }
.summary-cost-table input[readonly] { color: #355363; background: #eef5f7; cursor: default; }
.cost-description-wrap { display: grid; gap: 3px; }.cost-description-wrap small { color: #08708e; font-size: 9.5px; font-weight: 800; }.is-missing-link .cost-description-wrap small { color: #a65017; }
.summary-cost-table .cost-amount,.summary-cost-table .cost-sale-amount,.summary-cost-table .cost-gross-profit { text-align: right; font-weight: 850; color: var(--blue); padding-right: 8px; white-space: nowrap; }
.summary-cost-table .cost-sale-amount { color: #126447; }.summary-cost-table .cost-gross-profit { color: #0b7651; }.summary-cost-table .cost-gross-profit.negative { color: #b4232c; }
.cost-link-lock { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; color: #08708e; background: #e5f4f8; font-size: 15px; font-weight: 900; }
.cost-include { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 32px; color: #075978; font-size: 11px; font-weight: 850; white-space: nowrap; }.cost-include input { width: 17px; height: 17px; margin: 0; accent-color: #087b9d; }.summary-cost-table tr.is-excluded { opacity: .52; background: #f3f5f6; }.summary-cost-table tr.is-excluded .cost-include { opacity: 1; color: #8b3a27; }
.remove-cost { border: 0; border-radius: 7px; padding: 7px 9px; background: #fff1f2; color: var(--danger); font-weight: 900; }
.summary-deductions { margin-top: 14px; padding: 13px; border: 1px solid #d7e4e8; border-radius: 13px; background: #f7fafb; display: flex; flex-direction: column; gap: 8px; }
.deduction-card b { margin-left: auto; color: var(--blue); }
.summary-deductions .check-card { font-size: 13px; font-weight: 800; }
.summary-extra-list { display: flex; flex-direction: column; gap: 7px; }
.summary-extra-row { display: grid; grid-template-columns: 1fr 120px auto; gap: 7px; }
.summary-extra-row input { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: #fff; }
.remove-extra { border: 0; border-radius: 7px; padding: 0 11px; background: #fff1f2; color: var(--danger); font-weight: 900; }
.summary-result { margin-top: 14px; padding: 15px; border: 1px solid #cbdfe6; border-radius: 14px; background: linear-gradient(145deg, #f1f7f8, #e8f2f5); }
.summary-print-action { margin-top: 14px; display: flex; justify-content: flex-end; }
.summary-line { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; color: #0d1b26; font-size: 14px; font-weight: 600; }
.summary-line strong { font-size: 16px; }
.summary-target-status { margin-top: 9px; border-radius: 9px; padding: 8px 10px; font-size: 12px; font-weight: 850; text-align: center; }.summary-target-status.pass { color: #176447; background: #dff5e9; }.summary-target-status.warn { color: #8d4e00; background: #fff1d7; }

#costSummaryPage .customer-print-block { grid-template-columns: minmax(0,1fr) 54mm; min-height: 31mm; }
#costSummaryPage .customer-print-fields > div { min-height: 6.5mm; font-size: 13pt; }
.cost-print-reference { display: grid; align-content: center; gap: 4mm; border-left: 1px solid #000; padding: 2.5mm 3mm; font-size: 12pt; }.cost-print-reference div { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 2mm; }.cost-print-reference span { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.cost-print-table { font-size: 10.5pt; }.cost-print-table .item-number { width: 10mm; }.cost-print-table .qty { width: 14mm; }.cost-print-table .price { width: 19mm; }.cost-print-table .amount { width: 24mm; }.cost-print-table .thai-head th { height: 6.2mm; padding: .4mm; font-size: 10pt; line-height: 1; }.cost-print-table .english-head th { height: 4.8mm; padding: 0 .3mm; font-size: 7pt; }.cost-print-table tbody td { height: 9mm; max-height: 9mm; padding: .7mm 1mm; font-size: 9.5pt; white-space: normal; vertical-align: top; }.cost-print-table tbody td small { display: block; margin-top: .5mm; color: #4e6671; font-size: 7pt; }.cost-print-table tfoot td,.cost-print-table tfoot th { height: 6mm; font-size: 10pt; }
.cost-print-table .cost-print-blank td { height: 8mm; padding: 0; }

/* ===== สถานะการซิงค์ออนไลน์ + เข้าสู่ระบบ ===== */
.cloud-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.cloud-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cloud-status[data-state="synced"] { background: #e7f6ef; color: #176b58; }
.cloud-status[data-state="syncing"] { background: #fff6e3; color: #9a6b00; }
.cloud-status[data-state="error"] { background: #fdeaea; color: #b91c1c; }
.cloud-status[data-state="offline"] { background: #eef2f4; color: #5a6b75; }
.cloud-user { font-size: 12px; font-weight: 700; color: #d8e6ec; align-self: center; }

.login-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(150deg, #011f31, #033352); }
.login-card { width: 100%; max-width: 380px; background: #fff; border-radius: 18px; padding: 30px 28px; box-shadow: 0 24px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 8px; }
.login-eyebrow { margin: 0; letter-spacing: 3px; font-size: 12px; font-weight: 900; color: var(--blue-bright); }
.login-card h2 { margin: 2px 0 0; font-size: 24px; color: var(--ink); }
.login-sub { margin: 0 0 12px; font-size: 13px; color: #5a6b75; line-height: 1.5; }
.login-help { margin: 6px 0 0; padding: 9px 10px; border: 1px solid #d6e4ea; border-radius: 10px; color: #355867; background: #f7fbfd; font-size: 12px; line-height: 1.45; font-weight: 800; }
.login-card label { font-size: 13px; font-weight: 800; color: var(--muted); margin-top: 6px; }
.login-card input { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; font-size: 15px; }
.login-card input:focus { outline: 2px solid var(--blue-bright); border-color: var(--blue-bright); }
.login-card .button { margin-top: 16px; justify-content: center; padding: 12px; font-size: 15px; }
.google-login { display: flex; align-items: center; justify-content: center; gap: 9px; background: #fff; color: #17212b; border-color: #cfd9df; box-shadow: 0 6px 16px rgba(15,23,42,.08); }
.google-login::before { content: "G"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #4285f4, #34a853 48%, #fbbc05 49%, #ea4335); font-weight: 900; }
.google-identity-button { width:100%; min-height:44px; margin-top:16px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.google-identity-button:empty { display:none; }
.google-identity-button iframe { max-width:100% !important; }
.google-login[hidden] { display:none !important; }
.login-divider { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; color: #78909c; font-size: 11px; font-weight: 800; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: #e0e8ec; }
.login-msg { margin: 8px 0 0; min-height: 18px; font-size: 13px; font-weight: 700; color: var(--danger); text-align: center; }

/* ===== แถบงานด้านขวา (Task Rail) ===== */
.button.gold { background: linear-gradient(135deg, var(--gold), #9c7d49); color: #fff; border: 0; }
.rail-backdrop { position: fixed; inset: 0; background: rgba(1,31,49,.4); z-index: 1200; display: none; }
body.rail-open .rail-backdrop { display: block; }
.task-rail { position: fixed; top: 0; right: 0; height: 100vh; width: 430px; max-width: 96vw; background: #f4f8f9; border-left: 1px solid var(--line); box-shadow: -14px 0 40px rgba(1,31,49,.18); z-index: 1300; transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; }
body.rail-open .task-rail { transform: translateX(0); }
body.repair-board-open.rail-open .rail-backdrop { z-index: 1800; }
body.repair-board-open.rail-open .task-rail { z-index: 1810; }
.rail-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; color: #fff; background: linear-gradient(135deg, var(--navy), var(--blue-bright)); }
.rail-head h2 { margin: 2px 0 0; font-size: 18px; }
.rail-eyebrow { margin: 0; letter-spacing: 3px; font-size: 10px; font-weight: 900; color: var(--gold-light); }
.rail-close { background: rgba(255,255,255,.18); border: 0; color: #fff; width: 32px; height: 32px; border-radius: 9px; font-size: 20px; cursor: pointer; }
.rail-gate { padding: 24px 18px; text-align: center; }
.rail-gate p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
.rail-gate .button { width: 100%; justify-content: center; margin-top: 8px; }
.rail-hint { display: block; margin-top: 10px; color: var(--danger); }
.rail-main { flex: 1; overflow: auto; padding: 12px 14px 24px; }
.rail-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.rail-actions { display: flex; align-items: center; gap: 7px; }
.personal-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; background: #fff; color: var(--muted); font-size: 11px; font-weight: 900; white-space: nowrap; }
.personal-toggle input { width: 14px; height: 14px; accent-color: var(--blue-bright); }
.rail-live { font-size: 11.5px; font-weight: 800; color: var(--success); }
.rail-search { margin: 0 0 10px; }
.rail-search input { width: 100%; border: 1px solid #bfd3db; border-radius: 999px; padding: 8px 12px 8px 32px; color: var(--ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%23087092' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center; font-family: inherit; font-size: 12.5px; font-weight: 800; box-shadow: inset 0 1px #fff, 0 3px 10px rgba(3,51,82,.05); }
.rail-search input:focus { outline: 2px solid rgba(8,112,146,.2); border-color: var(--blue-bright); }
.rail-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 10px; }
.rail-stat { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 9px; text-align: center; border-top: 4px solid var(--line); cursor: pointer; transition: transform .1s, box-shadow .1s; }
.rail-stat:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(1,31,49,.12); }
.rail-stat.active { outline: 2px solid var(--blue-bright); outline-offset: 1px; }
.rail-stat b { display: block; font-size: 20px; font-weight: 900; line-height: 1; }
.rail-stat span { font-size: 10.5px; color: var(--muted); font-weight: 700; }
.rail-stat.over { border-top-color: var(--danger); } .rail-stat.over b { color: var(--danger); }
.rail-stat.today { border-top-color: var(--gold); } .rail-stat.today b { color: #9a6b00; }
.rail-stat.up { border-top-color: var(--blue-bright); } .rail-stat.up b { color: var(--blue-bright); }
.rail-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 6px; }
.tr-chip { white-space: nowrap; border: 1px solid var(--line); background: #fff; color: var(--muted); font-weight: 800; border-radius: 999px; padding: 6px 11px; font-size: 11.5px; cursor: pointer; }
.tr-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.tr-task { position: relative; overflow: hidden; display: flex; gap: 9px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 11px; padding: 9px 10px; margin-bottom: 8px; align-items: flex-start; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, opacity .16s ease; }
.tr-task.c-over { border-left-color: var(--danger); } .tr-task.c-today { border-left-color: var(--gold); } .tr-task.c-up { border-left-color: var(--blue-bright); }
.tr-task.personal { background: linear-gradient(90deg, #f4fbff, #fff); border-left-color: #4f9fc4; }
.tr-task.receivable { background: linear-gradient(90deg, #fffdf5, #fff); }
.tr-task.payable { background: linear-gradient(90deg, #f5fbff, #fff); }
.tr-task.claim { background: linear-gradient(90deg, #f3fff8, #fff); border-left-color: #0f8a6c; }
.tr-task.ongoing { background: linear-gradient(90deg, #fff8ec, #fff); }
.tr-task.done { opacity: .55; } .tr-task.done .tr-t { text-decoration: line-through; }
.tr-task.busy { border-color: #9fcbd8; box-shadow: 0 10px 24px rgba(8,112,146,.16); transform: translateY(-1px); }
.tr-task.busy::before { content: ""; position: absolute; left: -45%; top: 0; width: 45%; height: 3px; background: linear-gradient(90deg, transparent, var(--blue-bright), var(--gold), transparent); animation: trBusySweep 1.15s ease-in-out infinite; }
.tr-task.busy::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 8%, rgba(8,112,146,.08) 42%, rgba(197,164,103,.10) 52%, transparent 72%); animation: trBusySheen 1.8s ease-in-out infinite; }
.tr-task.busy .tr-main, .tr-task.busy .tr-check { position: relative; z-index: 1; }
.tr-task.busy .tr-mini, .tr-task.busy .tr-check { pointer-events: none; opacity: .58; cursor: wait; }
.tr-check { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; border: 2px solid #c2d2d9; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }
.tr-check.on { background: var(--success); border-color: var(--success); }
.tr-check.passive { cursor: default; border-color: #d8c68f; background: #fff8da; }
.tr-check.loading { color: transparent; border-color: #9fcbd8; }
.tr-check.loading::before { content: ""; width: 12px; height: 12px; border: 2px solid #cfe8f0; border-top-color: var(--blue-bright); border-radius: 50%; animation: trSpin .72s linear infinite; }
.tr-main { flex: 1; min-width: 0; }
.tr-t { font-weight: 800; color: var(--ink); line-height: 1.3; font-size: 13.5px; word-break: break-word; }
.tr-when { font-size: 11.5px; font-weight: 800; margin-top: 2px; }
.tr-when.over { color: var(--danger); } .tr-when.today { color: #9a6b00; } .tr-when.up { color: var(--blue-bright); }
.tr-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.tr-b { font-size: 10px; font-weight: 900; padding: 1px 7px; border-radius: 999px; background: #eef3f5; color: var(--muted); }
.tr-b.order { background: #fdeee4; color: #a85a1a; } .tr-b.num { background: var(--navy); color: #fff; } .tr-b.personal { background: #e5f5fb; color: #12617f; }
.tr-b.receivable { background: #fff2c2; color: #815600; }
.tr-b.payable { background: #e5f3ff; color: #075985; }
.tr-b.claim { background: #dff8ec; color: #0f6b54; }
.tr-b.claim-status { background: #e9f5f8; color: #075978; }
.tr-b.doclink { background: #e8eefb; color: #28466d; }
.tr-b.source { border: 1px solid currentColor; font-weight: 950; }
.tr-b.source-firestore { color: #075978; background: #e7f6fa; }
.tr-b.source-calendar { color: #8a5b00; background: #fff5d5; }
.tr-b.source-pos { color: #5f3485; background: #f2e8fb; }
.tr-b.source-google-tasks { color: #31558b; background: #eaf0fb; }
.tr-busy-line { display: inline-flex; align-items: center; gap: 7px; margin-top: 7px; padding: 4px 9px; border: 1px solid #c7e3ec; border-radius: 999px; background: #f2fbfe; color: #075978; font-size: 11px; font-weight: 900; }
.tr-spinner { width: 12px; height: 12px; border: 2px solid #cfe8f0; border-top-color: var(--gold); border-radius: 50%; animation: trSpin .72s linear infinite; }
.tr-acts { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.tr-mini { font-size: 11px; font-weight: 800; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; cursor: pointer; color: var(--blue); background: #fff; text-decoration: none; transition: opacity .14s ease, transform .14s ease, border-color .14s ease; }
.tr-mini.call { background: var(--success); color: #fff; border: 0; } .tr-mini.del { color: var(--danger); border-color: #f0c7c2; }
.tr-mini.muted { cursor: default; color: #815600; border-color: #ead28a; background: #fff9df; }
.tr-mini.payable-info { cursor: default; color: #075985; border-color: #b7d9ee; background: #eef8ff; }
.tr-mini.payable-info.runner { color: #5b2878; border-color: #d9c5e5; background: #f8f0fb; font-weight: 900; }
.tr-mini.receivable-info { cursor: default; color: #815600; border-color: #ead28a; background: #fff9df; }
.tr-mini.tocal { background: #eef6fb; color: #12617f; border-color: #bcdcec; }
.tr-mini.pay { background: #e3f5ea; color: #0f6b54; border-color: #bfe3cd; font-weight: 900; }
.tr-mini.claim-info { cursor: default; color: #0f6b54; border-color: #bfe3cd; background: #f1fff7; }
.tr-mini.claim-next { color: #075978; border-color: #bcdcec; background: #eef8fb; }
.tr-mini.doc-open { color: #28466d; border-color: #c7d4ee; background: #f1f5ff; }
.tr-mini.doc-info { cursor: default; color: #28466d; border-color: #d5def2; background: #f8fbff; }
.tr-mini.order-ref, .tr-mini.order-info { cursor: default; color: #075978; border-color: #bfdbe6; background: #f0f9fc; }
.tr-mini.order-total { cursor: default; color: #123c5b; border-color: #bfd2de; background: #edf4f7; }
.tr-mini.order-paid { cursor: default; color: #146128; border-color: #bfe3cd; background: #edf9f1; }
.tr-mini.order-balance { cursor: default; color: #a31616; border-color: #f0c7c2; background: #fff2f2; }
.tr-mini.order-doc { color: #fff; border-color: #153e57; background: #153e57; }
.tr-mini.order-share { color: #fff; border-color: #087092; background: #087092; }
.tr-b.payment-paid { color: #146128; background: #edf9f1; border-color: #bfe3cd; }
.tr-b.payment-deposit { color: #815600; background: #fff9df; border-color: #ead28a; }
.tr-b.payment-unpaid { color: #a31616; background: #fff2f2; border-color: #f0c7c2; }
.tr-group { margin-bottom: 12px; }
.tr-gh { display: flex; justify-content: space-between; font-size: 12px; font-weight: 900; color: var(--ink); margin: 4px 2px 7px; }
.tr-gh span { color: var(--muted); }
.tr-empty { text-align: center; color: var(--muted); font-size: 12.5px; padding: 20px 8px; }
.tr-modal { position: absolute; inset: 0; background: rgba(1,31,49,.45); display: none; align-items: center; justify-content: center; padding: 14px; z-index: 5; }
.tr-modal.show { display: flex; }
.tr-mcard { position: relative; width: 100%; background: #fff; border-radius: 15px; padding: 16px; max-height: 90%; overflow: auto; }
.tr-modal.saving .tr-mcard { box-shadow: 0 18px 42px rgba(1,31,49,.28); }
.tr-modal.saving .tr-mcard::before { content: attr(data-busy-label); position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; margin: -4px 0 10px auto; padding: 5px 10px; border-radius: 999px; background: #f2fbfe; border: 1px solid #c7e3ec; color: #075978; font-size: 11px; font-weight: 900; box-shadow: 0 5px 14px rgba(8,112,146,.12); }
.tr-modal.saving .tr-mcard::after { content: ""; position: absolute; left: -40%; right: auto; top: 0; width: 40%; height: 3px; background: linear-gradient(90deg, transparent, var(--blue-bright), var(--gold), transparent); animation: trBusySweep 1.1s ease-in-out infinite; }
.tr-modal.saving .button:disabled { cursor: wait; opacity: .68; transform: none; box-shadow: none; }
.tr-mcard h3 { margin: 0 0 12px; color: var(--navy); font-size: 16px; }
.trf { margin-bottom: 10px; } .trf label { display: block; font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 4px; }
.trf input, .trf select, .trf textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; }
.trf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.trf-check { display: flex; align-items: center; gap: 7px; } .trf-check input { width: auto; } .trf-check label { margin: 0; }
.tr-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tr-type-check { display: flex !important; align-items: center; gap: 7px; min-height: 38px; margin: 0 !important; padding: 8px 9px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink) !important; cursor: pointer; }
.tr-type-check input { width: 15px; height: 15px; flex: 0 0 auto; accent-color: var(--blue-bright); }
.tr-type-check span { min-width: 0; font-size: 11.5px; font-weight: 900; line-height: 1.25; }
.tr-type-check:has(input:checked) { border-color: var(--blue-bright); background: #eef8fb; box-shadow: inset 0 0 0 1px rgba(8,112,146,.18); }
.tr-destination { margin: 2px 0 12px; padding: 10px; border: 1px solid #c9dfe8; border-radius: 12px; background: #f7fbfd; }
.tr-destination-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.tr-destination-choice { display: flex !important; align-items: center; gap: 8px; min-width: 0; min-height: 48px; margin: 0 !important; padding: 8px 9px; border: 1px solid #cadde5; border-radius: 10px; background: #fff; cursor: pointer; }
.tr-destination-choice input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: #087092; }
.tr-destination-choice span { display: grid; min-width: 0; line-height: 1.2; }
.tr-destination-choice b { color: #063b58; font-size: 12px; }
.tr-destination-choice small { color: #607985; font-size: 10px; font-weight: 700; }
.tr-destination-choice:has(input:checked) { border-color: #087092; background: #eaf7fb; box-shadow: inset 0 0 0 1px rgba(8,112,146,.2); }
.tr-destination-choice.source-pos:has(input:checked) { border-color: #7b57a4; background: #f5effb; }
.tr-destination-choice.is-disabled { opacity: .5; cursor: not-allowed; }
.tr-destination-hint { margin: 7px 1px 0; color: #58717d; font-size: 10.5px; font-weight: 700; line-height: 1.35; }
.tr-claim-fields, .tr-finance-fields { margin: -2px 0 10px; padding: 10px; border: 1px solid #cfe5dc; border-radius: 12px; background: linear-gradient(145deg, #f2fff8, #f8fcfd); }
.tr-finance-fields { border-color: #c9deea; background: linear-gradient(145deg, #f3fbff, #fffaf0); }
.tr-order-fields { margin: -2px 0 10px; padding: 11px; border: 1px solid #bfd9e6; border-left: 4px solid #087092; border-radius: 12px; background: linear-gradient(145deg, #f1f9fc, #fff); }
.tr-order-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: var(--navy); }
.tr-order-section-head b, .tr-order-section-head small { display: block; }
.tr-order-section-head b { font-size: 14px; }
.tr-order-section-head small { margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.3; }
.tr-order-section-head > span { flex: 0 0 auto; max-width: 48%; border: 1px solid #c7dce5; border-radius: 999px; padding: 5px 8px; color: #075978; background: #fff; font-size: 10px; font-weight: 900; overflow-wrap: anywhere; }
.tr-order-money-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tr-order-fields input[readonly] { color: #075978; border-color: #b9d7e2; background: #edf7fa; font-weight: 900; text-align: right; }
.tr-order-profit { display: flex; min-height: 62px; flex-direction: column; justify-content: center; border: 1px solid #bcd8e4; border-radius: 10px; padding: 8px 10px; color: #075978; background: #edf7fa; }
.tr-order-profit span, .tr-order-profit small { font-size: 10px; font-weight: 800; }
.tr-order-profit b { margin: 2px 0; font-size: 17px; }
.tr-order-profit b.negative { color: var(--danger); }
.tr-order-help { margin: 4px 0 0; border-left: 3px solid var(--gold); padding: 6px 8px; color: #5b461c; background: #fff9e8; font-size: 10.5px; font-weight: 800; line-height: 1.35; }
.tr-claim-fields .trf:last-child, .tr-finance-fields .trf:last-child { margin-bottom: 0; }
.tr-finance-items-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 8px; color: var(--muted); font-size: 12px; font-weight: 900; }
.tr-finance-add { flex: 0 0 auto; border: 1px solid #bcdcec; border-radius: 999px; padding: 5px 9px; background: #fff; color: var(--blue); font-size: 12px; font-weight: 900; cursor: pointer; }
.tr-finance-items { display: grid; gap: 8px; margin-bottom: 10px; }
.tr-finance-item { display: grid; grid-template-columns: 86px minmax(0, 1fr) minmax(0, 1fr) 36px; gap: 7px; align-items: end; padding: 8px; border: 1px solid #d8e9f1; border-radius: 10px; background: rgba(255,255,255,.78); }
.tr-finance-item .trf:first-child { grid-column: 1 / -1; }
.tr-finance-item .trf:nth-child(2) { grid-column: 1; }
.tr-finance-item .trf:nth-child(3) { grid-column: 2; }
.tr-finance-item .trf:nth-child(4) { grid-column: 3; }
.tr-finance-item-remove { grid-column: 4; }
.tr-finance-item .trf { margin-bottom: 0; }
.tr-finance-total[readonly] { color: #075978; border-color: #b9d7e2; background: #edf7fa; font-weight: 900; cursor: default; }
.tr-finance-item-remove { width: 36px; height: 34px; border: 1px solid #f0c7c2; border-radius: 9px; background: #fff7f7; color: var(--danger); font-size: 12px; font-weight: 900; cursor: pointer; }
.tr-finance-item-remove.hidden { visibility: hidden; pointer-events: none; }
.tr-macts { display: flex; gap: 7px; align-items: center; margin-top: 4px; }
.tr-toast { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 8px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700; opacity: 0; transition: .2s; pointer-events: none; }
.tr-toast.show { opacity: 1; }
.tr-b.orderwait { background: #e3f5ea; color: #0f6b54; }

@keyframes trSpin { to { transform: rotate(360deg); } }
@keyframes trBusySweep { 0% { left: -45%; opacity: .45; } 45% { opacity: 1; } 100% { left: 100%; opacity: .45; } }
@keyframes trBusySheen { 0%, 100% { opacity: .25; transform: translateX(-20%); } 50% { opacity: .7; transform: translateX(18%); } }
@media (prefers-reduced-motion: reduce) {
  .tr-task, .tr-mini { transition: none; }
  .tr-task.busy::before, .tr-task.busy::after, .tr-check.loading::before, .tr-spinner, .tr-modal.saving .tr-mcard::after { animation: none; }
}

/* ปุ่มเลือกวันและเวลา / จนถึงวันที่ ในโมดัลกระดานงาน */
.tr-when-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; background: #fff; color: var(--blue); font-weight: 800; font-size: 13.5px; text-align: left; }
.tr-when-btn:hover { border-color: #769fad; background: #f9fcfd; }
.tr-when-btn .tr-when-ic { font-size: 15px; }

/* การทำซ้ำแบบยืดหยุ่น */
.tr-rec-adv { margin-top: 9px; padding: 10px; border: 1px solid #dbe6ea; border-radius: 10px; background: #f7fafb; display: flex; flex-direction: column; gap: 9px; }
.tr-rec-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.tr-rec-row input[type="number"] { width: 64px; flex: 0 0 auto; }
.tr-rec-row select { flex: 1; }
.tr-rec-days { display: flex; gap: 5px; flex-wrap: wrap; }
.tr-dow { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--muted); font-size: 12px; font-weight: 800; cursor: pointer; transition: .12s ease; }
.tr-dow:hover { border-color: var(--blue-bright); }
.tr-dow.on { background: linear-gradient(145deg, #033352, #087092); color: #fff; border-color: transparent; }
.tr-rec-note { margin: 8px 0 2px; font-size: 11.5px; font-weight: 700; color: #9a6b00; background: #fff7e8; border-radius: 8px; padding: 7px 9px; }

/* ตัวเลือกปฏิทินไทย + เวลา (overlay ในกระดานงาน) */
.tr-picker { position: absolute; inset: 0; z-index: 7; display: none; align-items: center; justify-content: center; padding: 12px; background: rgba(1,31,49,.5); }
.tr-picker.show { display: flex; }
.trpk-card { width: 100%; max-height: 96%; overflow: auto; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(1,31,49,.35); }
.trpk-head { padding: 14px 16px; color: #fff; background: linear-gradient(128deg, #011f31, #033352 65%, #075b78); }
.trpk-head small { display: block; color: var(--gold-light); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.trpk-head h3 { margin: 2px 0 0; font-size: 16px; }
.trpk-nav { display: grid; grid-template-columns: 36px 1fr 1fr 36px; gap: 6px; padding: 12px 12px 8px; }
.trpk-nav button, .trpk-nav select { min-width: 0; border: 1px solid #cbdbe1; border-radius: 9px; padding: 7px; color: var(--blue); background: #f8fbfc; font-weight: 800; }
.trpk-nav button { font-size: 19px; line-height: 1; }
.trpk-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 0 12px; color: var(--muted); font-size: 11px; font-weight: 800; text-align: center; }
.trpk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 4px 12px 8px; }
.trpk-day { display: grid; place-items: center; aspect-ratio: 1; border: 0; border-radius: 9px; background: transparent; color: #254758; font-weight: 700; font-size: 13px; cursor: pointer; }
.trpk-day:hover { background: #e8f2f5; }
.trpk-day.other { color: #9aabb2; }
.trpk-day.today { box-shadow: inset 0 0 0 1px var(--gold); }
.trpk-day.sel { color: #fff; background: linear-gradient(145deg, #033352, #087092); box-shadow: 0 4px 11px rgba(3,51,82,.25); }
.trpk-allday { display: flex; align-items: center; gap: 8px; padding: 4px 14px 2px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.trpk-allday input { width: 16px; height: 16px; accent-color: var(--blue-bright); }
.trpk-time { display: flex; align-items: center; gap: 7px; padding: 8px 14px 4px; font-size: 13px; font-weight: 800; color: var(--blue); }
.trpk-time select { border: 1px solid #cbdbe1; border-radius: 9px; padding: 7px 9px; font-size: 15px; font-weight: 800; color: var(--blue); background: #f8fbfc; }
.trpk-time em { color: var(--muted); font-style: normal; font-size: 11px; font-weight: 700; }
.trpk-acts { display: flex; align-items: center; gap: 7px; padding: 10px 14px 14px; }
@media (max-width: 720px){ .admin-lists { grid-template-columns: 1fr; } }
@media (max-width: 520px){
  .task-rail { width: 100%; }
  .tr-order-fields { padding: 10px 9px; }
  .tr-order-section-head { flex-direction: column; }
  .tr-order-section-head > span { max-width: 100%; }
  .tr-order-money-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tr-order-money-row .trf label { min-height: 30px; line-height: 1.25; }
  .tr-order-profit { min-height: 58px; }
  .tr-mini.order-doc, .tr-mini.order-share { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; }
  .tr-destination-grid { grid-template-columns: 1fr; }
  .tr-finance-item { grid-template-columns: 1fr 1fr 34px; }
  .tr-finance-item .trf:first-child { grid-column: 1 / -1; }
  .tr-finance-item .trf:nth-child(2) { grid-column: 1; grid-row: 2; }
  .tr-finance-item .trf:nth-child(3) { grid-column: 2; grid-row: 2; }
  .tr-finance-item .trf:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
  .tr-finance-item-remove { grid-column: 3; grid-row: 2; }
  .tr-finance-item-remove { width: 34px; }
}
.summary-line-total { border-top: 1px dashed #b6cdd6; margin-top: 4px; padding-top: 9px; }
.summary-line-total strong { color: var(--blue); }
.summary-line-profit { border-top: 2px solid #b6cdd6; margin-top: 6px; padding-top: 10px; }
.summary-line-profit strong { font-size: 24px; color: var(--success); }
.summary-line-profit.negative strong { color: var(--danger); }
.summary-margin span, .summary-margin strong { color: var(--muted); font-size: 13px; }
.summary-deduction-line { display: flex; justify-content: space-between; padding: 4px 0; color: #1e303a; font-size: 13px; font-weight: 600; }

@page { size: 210mm 297mm; margin: 0; }
/* ================= Repair Status Board ================= */
body.repair-board-open { overflow: hidden; }
.repair-board-overlay {
  position: fixed;
  inset: 0;
  z-index: 1600;
  padding: 10px;
  color: #091522;
  background: #111;
  font-family: inherit;
}
.rb-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-width: min(100%, 1300px);
  overflow: auto;
  padding: 16px;
  border: 7px solid #060606;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 14%, transparent 86%, rgba(255,255,255,.07)),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 32%),
    #1b1914;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 0 42px rgba(0,0,0,.75);
}
.rb-top {
  display: grid;
  grid-template-columns: minmax(210px, 270px) minmax(380px, 1fr) minmax(250px, 320px);
  align-items: stretch;
  gap: 26px;
  min-width: 1480px;
}
.rb-date-card,
.rb-stat-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 86px;
  border: 1px solid #d5d7df;
  border-radius: 5px;
  color: #152555;
  background: linear-gradient(180deg, #f8f4f4, #ebe8e8);
  box-shadow: inset 0 1px #fff, 0 2px 4px rgba(0,0,0,.28);
}
.rb-date-card { gap: 12px; font-size: 28px; font-weight: 700; }
.rb-date-card span { font-size: 25px; font-weight: 800; }
.rb-date-card b { font-weight: 700; letter-spacing: 0; }
.rb-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 86px;
  margin: 0;
  border-radius: 5px;
  color: #f7f5f2;
  background: linear-gradient(180deg, #063b7b, #04295a);
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 2px 8px rgba(0,0,0,.35);
  font-size: clamp(44px, 4.7vw, 68px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 3px 0 rgba(0,0,0,.35);
  letter-spacing: 0;
  white-space: nowrap;
}
.rb-stat-card {
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  padding: 14px 24px;
  font-size: 24px;
  font-weight: 800;
}
.rb-stat-card div {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: baseline;
}
.rb-stat-card b {
  color: #bd1918;
  font-size: 29px;
  font-weight: 500;
}
.rb-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: -14px;
}
.rb-actions > .rb-search { flex: 1 1 260px; min-width: 180px; }
.rb-onsite-division-tabs {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  gap: 3px;
  padding: 3px;
  border: 1px solid #b8cad3;
  border-radius: 8px;
  background: #e9f0f3;
}
.rb-onsite-division-tabs[hidden] { display: none; }
.rb-onsite-division-tabs button {
  min-height: 30px;
  border: 0;
  border-radius: 5px;
  padding: 5px 9px;
  color: #244658;
  background: transparent;
  font-weight: 900;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.rb-onsite-division-tabs button:hover { background: #fff; transform: translateY(-1px); }
.rb-onsite-division-tabs button.active {
  color: #fff;
  background: #075978;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.24), 0 1px 2px rgba(0,0,0,.12);
  transform: translateY(1px);
}
.rb-board-nav {
  display: flex;
  gap: 5px;
  min-width: 0;
}
.rb-board-nav .rb-action { flex: 1 1 auto; }
.rb-board-nav[hidden] { display: none; }
#rbDocumentsBtn { border-color: #c8ab72; color: #5d4315; background: #fff8e8; }
#rbDocumentsBtn:hover { border-color: #9f7c39; background: #fff; }
.rb-tabs {
  display: flex;
  gap: 5px;
  min-width: 210px;
}
.rb-tabs button {
  border: 1px solid #c7d5dc;
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--blue);
  background: #fff;
  font-weight: 900;
  white-space: nowrap;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.rb-tabs button:hover { transform: translateY(-2px); border-color: #08769b; box-shadow: 0 5px 12px rgba(1,49,76,.18); }
.rb-tabs button.active {
  color: #fff;
  border-color: #075978;
  background: linear-gradient(135deg, #075978, #08769b);
}
.rb-more-menu {
  position: relative;
  flex: 0 0 auto;
  z-index: 35;
}
.rb-more-menu[hidden] { display: none; }
.rb-more-menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  cursor: pointer;
}
.rb-more-menu > summary::-webkit-details-marker { display: none; }
.rb-more-menu > summary::after { content: "▾"; margin-left: 7px; font-size: 11px; }
.rb-more-menu[open] > summary { border-color: #075978; color: #fff; background: #075978; box-shadow: inset 0 2px 4px rgba(0,0,0,.25); }
.rb-more-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 6px;
  width: max-content;
  min-width: 180px;
  max-width: min(280px, calc(100vw - 24px));
  border: 1px solid #b7cbd4;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(1,31,49,.3);
}
.rb-more-menu-panel .rb-action { width: 100%; text-align: left; white-space: normal; }
.rb-search,
.rb-field input,
.rb-field textarea,
.rb-field select,
.rb-thai-trigger {
  width: 100%;
  border: 1px solid #bdd1dc;
  border-radius: 9px;
  padding: 9px 11px;
  color: var(--ink);
  background: #fff;
  outline: none;
}
.rb-search:focus,
.rb-field input:focus,
.rb-field textarea:focus,
.rb-field select:focus,
.rb-thai-trigger:focus {
  border-color: #087093;
  box-shadow: 0 0 0 3px rgba(8,112,147,.14);
}
.rb-thai-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  text-align: left;
}
.rb-thai-trigger span { color: var(--blue); font-weight: 900; }
.rb-thai-trigger small { color: #405461; font-size: 11px; font-weight: 800; }
.rb-repair-date-trigger { justify-content: center; gap: 0; text-align: center; }
.rb-repair-date-trigger span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-action,
.rb-mini-btn,
.rb-card-tools button,
.rb-parts-list button,
.rb-icon-btn {
  border: 1px solid #c7d5dc;
  border-radius: 8px;
  color: var(--blue);
  background: #f7fbfc;
  font-weight: 900;
}
.rb-action {
  min-height: 40px;
  padding: 8px 10px;
  white-space: nowrap;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.rb-action:hover {
  transform: translateY(-2px);
  border-color: #6f9cad;
  background: #fff;
  box-shadow: 0 6px 14px rgba(1,49,76,.18);
}
.rb-action:active { transform: translateY(0) scale(.97); box-shadow: 0 2px 6px rgba(1,49,76,.15); }
.rb-action.primary { border-color: #08769b; color: #fff; background: linear-gradient(135deg, #075978, #08769b); }
.rb-action.primary:hover { color: #fff; background: linear-gradient(135deg, #064a65, #0a89b2); }
.rb-action.danger { border-color: #fecdd3; color: #b91c1c; background: #fff1f2; }
.rb-action.danger:hover { border-color: #e9a3aa; color: #991b1b; background: #fff; }
.rb-gate {
  min-width: 1480px;
  padding: 11px 14px;
  border: 1px solid #f2d98f;
  border-radius: 8px;
  color: #533b04;
  background: #fff7d6;
  font-weight: 900;
}
.rb-columns {
  display: grid;
  grid-template-columns: repeat(7, minmax(190px, 1fr));
  gap: 8px;
  min-width: 1480px;
  min-height: 0;
  overflow: hidden;
}
.rb-column {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-left: 2px solid rgba(202,171,126,.62);
  border-right: 2px solid rgba(202,171,126,.36);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.08));
}
.rb-column-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 70px;
  margin: 0;
  padding: 9px 7px;
  border: 1px solid rgba(0,0,0,.45);
  color: var(--rb-status-text, #fff);
  background: var(--rb-status);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 2px 3px rgba(0,0,0,.28);
  font-size: clamp(19px, 1.45vw, 26px);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0,0,0,.42);
  letter-spacing: 0;
  white-space: nowrap;
}
.rb-column[data-status="5"] .rb-column-title { font-size: clamp(16px, 1.08vw, 21px); }
.repair-board-overlay.onsite-mode .rb-column-title {
  padding-left: 5px;
  padding-right: 5px;
  font-size: clamp(15px, 1.04vw, 20px);
  white-space: normal;
}
.repair-board-overlay.workflow-mode .rb-column-title {
  padding-left: 5px;
  padding-right: 5px;
  font-size: clamp(14px, 1vw, 19px);
  white-space: normal;
}
.rb-column-title em {
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  border-radius: 999px;
  padding: 0 7px;
  color: #102130;
  background: rgba(255,255,255,.9);
  font-size: 13px;
  font-style: normal;
  text-shadow: none;
}
.rb-column-title span { flex: 0 0 auto; }
.rb-column-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  max-height: none;
  padding: 12px 8px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  transition: background .15s ease, outline-color .15s ease;
}
.rb-column-body::-webkit-scrollbar { width: 0; height: 0; }
.rb-float-scroll {
  position: absolute;
  top: 82px;
  right: 2px;
  bottom: 12px;
  z-index: 8;
  width: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.2);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 2px 7px rgba(0,0,0,.28);
  opacity: 0;
  pointer-events: none;
  transform: translateX(5px) scaleX(.72);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
  touch-action: none;
}
.rb-float-scroll span {
  display: block;
  width: 100%;
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: inherit;
  background: rgba(255,255,255,.78);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: background .15s ease, box-shadow .15s ease;
}
.rb-column.has-scroll:hover .rb-float-scroll,
.rb-column.has-scroll:focus-within .rb-float-scroll,
.rb-column.has-scroll.is-scrolling .rb-float-scroll {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scaleX(1);
}
.rb-float-scroll:hover { background: rgba(0,0,0,.34); }
.rb-float-scroll:hover span { background: #fff; box-shadow: 0 3px 9px rgba(0,0,0,.42); }
.rb-column-body.drag-over {
  outline: 3px dashed #fff;
  outline-offset: -6px;
  background: rgba(255,255,255,.11);
}
.rb-empty {
  display: grid;
  place-items: center;
  min-height: 88px;
  border: 1px dashed rgba(255,255,255,.22);
  border-radius: 7px;
  color: rgba(255,255,255,.62);
  font-size: 13px;
  font-weight: 800;
}
.rb-card {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  min-height: 178px;
  overflow: hidden;
  padding: 14px 35px 12px 15px;
  border: 2px solid #4c4a48;
  border-radius: 3px;
  color: #132253;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.7)),
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(25,38,75,.09) 24px 25px),
    #f3efef;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 3px 4px rgba(0,0,0,.55);
  cursor: grab;
  transform-origin: center;
  will-change: transform;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .22s ease, opacity .15s ease, filter .2s ease;
}
.rb-card:hover {
  z-index: 3;
  transform: translateY(-4px) scale(1.012);
  filter: brightness(1.025);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.72), 0 11px 22px rgba(0,0,0,.58);
}
.rb-card.dragging { opacity: .55; transform: rotate(1deg) scale(.98); }
.rb-card.is-overdue { border-color: #b31516; }
.rb-card.rb-due-alerting {
  border-width: 2px;
  border-color: var(--rb-due-color);
  animation: rbDueBorderPulse 1.15s ease-in-out infinite;
}
.rb-card.rb-due-red { --rb-due-color: #d41612; --rb-due-glow: rgba(212,22,18,.48); }
.rb-card.rb-due-orange { --rb-due-color: #f07b00; --rb-due-glow: rgba(240,123,0,.46); }
.rb-card.rb-due-yellow { --rb-due-color: #e7b900; --rb-due-glow: rgba(231,185,0,.44); }
@keyframes rbDueBorderPulse {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 3px 5px rgba(0,0,0,.55), 0 0 0 1px var(--rb-due-color); }
  50% { box-shadow: inset 0 0 0 2px rgba(255,255,255,.72), 0 8px 18px rgba(0,0,0,.58), 0 0 0 7px var(--rb-due-glow); }
}
.rb-due-alert-label {
  display: grid;
  gap: 2px;
  margin: 5px 0 7px;
  border: 1px solid var(--rb-due-color, #d41612);
  border-left: 5px solid var(--rb-due-color, #d41612);
  border-radius: 8px;
  padding: 7px 8px;
  color: #2b1800;
  background: color-mix(in srgb, var(--rb-due-color, #d41612) 14%, white);
}
.rb-due-alert-label b { color: var(--rb-due-color, #b31516); font-size: 12px; font-weight: 950; }
.rb-due-alert-label span { color: #253746; font-size: 11px; font-weight: 850; line-height: 1.25; }
.rb-card.is-cancelled-after {
  border-color: #b31516;
  box-shadow: inset 4px 0 #cf1717, inset 0 0 0 2px rgba(255,255,255,.55), 0 3px 4px rgba(0,0,0,.55);
}
.rb-card.search-focus {
  z-index: 5;
  border-color: #00a7d6;
  box-shadow: 0 0 0 5px rgba(0,167,214,.38), 0 12px 26px rgba(0,0,0,.62);
  animation: rbSearchFocus 1s ease-in-out 2;
}
@keyframes rbSearchFocus {
  50% { box-shadow: 0 0 0 9px rgba(0,167,214,.16), 0 12px 26px rgba(0,0,0,.62); }
}
.rb-job-no {
  display: block;
  margin: 0 0 7px;
  color: #a21b19;
  font-size: 17px;
  font-weight: 800;
}
.rb-card p {
  margin: 2px 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.32;
}
.rb-card p span { color: #132253; font-weight: 900; }
.rb-workflow-card {
  min-height: 0;
  padding: 11px;
  cursor: default;
}
.rb-workflow-card[draggable="true"] { cursor: grab; }
.rb-workflow-card.is-busy { opacity: .72; pointer-events: none; }
.rb-workflow-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 7px;
}
.rb-workflow-card-head .rb-job-no {
  width: 100%;
  min-width: 0;
  margin-bottom: 5px;
  word-break: normal;
  overflow-wrap: break-word;
}
.rb-workflow-source {
  flex: 0 0 auto;
  border: 1px solid #a8c5d0;
  border-radius: 4px;
  padding: 2px 5px;
  color: #075978;
  background: #e9f6fa;
  font-size: 9.5px;
  font-weight: 900;
}
.rb-workflow-source.source-firestore { border-color: #8fbfce; color: #075978; background: #e7f6fa; }
.rb-workflow-source.source-calendar { border-color: #d9b95d; color: #815600; background: #fff5d5; }
.rb-workflow-source.source-pos { border-color: #b79bce; color: #5f3485; background: #f2e8fb; }
.rb-workflow-source.source-google-tasks { border-color: #9eb4d5; color: #31558b; background: #eaf0fb; }
.rb-workflow-title { color: #132253; font-weight: 900 !important; }
.rb-workflow-card p,
.rb-workflow-dates b { overflow-wrap: anywhere; }
.repair-board-overlay.workflow-mode .rb-columns { grid-template-columns: repeat(7,minmax(245px,1fr)); min-width: 1780px; }
.repair-board-overlay.workflow-mode .rb-workflow-card-head .rb-job-no,
.repair-board-overlay.workflow-mode .rb-workflow-card p,
.repair-board-overlay.workflow-mode .rb-workflow-dates b { word-break: normal; overflow-wrap: break-word; }
#rbColumns .rb-card,
#rbColumns .rb-card * {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}
#rbColumns .rb-card p,
#rbColumns .rb-card .rb-job-no,
#rbColumns .rb-card .rb-workflow-dates b,
#rbColumns .rb-card .rb-due-alert-label > * {
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
}
.rb-workflow-stage {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 6px;
  color: #314c5b;
  font-size: 11px;
  font-weight: 900;
}
.rb-workflow-stage span { width: 10px; height: 10px; border-radius: 50%; background: var(--stage); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.rb-workflow-money {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 4px;
  margin: 8px 0;
  border-top: 1px solid #c6d5dc;
  border-bottom: 1px solid #c6d5dc;
  padding: 6px 0;
  color: #075978;
}
.rb-workflow-money span { font-size: 11px; font-weight: 900; }
.rb-workflow-money b { color: #a21b19; font-size: 18px; font-weight: 900; }
.rb-workflow-money em { font-size: 10px; font-style: normal; font-weight: 900; }
.rb-workflow-dates { display: grid; gap: 3px; color: #405765; font-size: 10.5px; font-weight: 800; }
.rb-workflow-dates span { display: flex; justify-content: space-between; gap: 5px; }
.rb-workflow-dates b { color: #132253; text-align: right; }
.rb-workflow-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.rb-workflow-actions button,
.rb-workflow-status select {
  min-height: 30px;
  border: 1px solid #aac2cc;
  border-radius: 5px;
  padding: 4px 7px;
  color: #075978;
  background: #f7fbfc;
  font-size: 10px;
  font-weight: 900;
}
.rb-workflow-actions button:hover { border-color: #08769b; background: #fff; }
.rb-workflow-actions button.danger { color: #b31516; border-color: #e9b3b3; background: #fff5f5; }
.rb-workflow-actions .rb-supplier-paid { flex: 1 1 100%; min-height: 34px; }
.rb-workflow-actions .rb-supplier-paid.is-paid { border-color: #5fa577; color: #0f6b31; background: #edf8f0; }
.rb-workflow-actions .rb-supplier-paid.is-unpaid { border-color: #e3ad68; color: #995005; background: #fff7e8; }
.rb-workflow-status { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 5px; width: 100%; }
.rb-workflow-status span { color: #405765; font-size: 10px; font-weight: 900; }
.rb-workflow-status select { width: 100%; min-width: 0; }
.rb-workflow-busy { margin-top: 6px; color: #075978; font-size: 10px; font-weight: 900; }
.rb-sn-badge {
  display: inline-block;
  max-width: 100%;
  margin: 0 5px 1px 2px;
  padding: 1px 5px;
  border: 1px solid #9fc8d6;
  border-radius: 4px;
  color: #064f6c;
  background: #e8f5f8;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
  vertical-align: 1px;
}
.rb-card-devices {
  display: grid;
  gap: 1px;
  margin: 3px 0;
}
.rb-card-devices p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.rb-card-more {
  color: #075b78;
  font-weight: 900 !important;
}
.rb-job-flow-badges { display: grid; gap: 4px; margin: 4px 0 7px; }
.rb-job-flow-badge { display: grid; gap: 1px; border: 1px solid #c0d2da; border-left: 4px solid var(--rb-flow,#087093); border-radius: 5px; padding: 5px 7px; background: rgba(255,255,255,.82); }
.rb-job-flow-badge b { color: #17384a; font-size: 11.5px; font-weight: 900; }
.rb-job-flow-badge small { color: #52666f; font-size: 9.5px; font-weight: 800; line-height: 1.25; }
.rb-job-flow-badge.rework { --rb-flow:#d97800; background:#fff8e8; }
.rb-cancelled-tag,
.rb-onsite-division-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin: 2px 0 3px;
  border-radius: 4px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.rb-cancelled-tag { color: #fff; background: #b31516; }
.rb-onsite-division-badge { color: #064f6c; border: 1px solid #8fc2d2; background: #e5f5f9; }
.rb-card-people {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  margin: 5px 0 1px;
}
.rb-card-people.single { grid-template-columns: 1fr; }
.rb-card-person {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 29px;
  font-size: 11.7px;
  font-weight: 800;
  line-height: 1.12;
}
.rb-card-person span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-card-person b { color: #132253; font-weight: 900; }
.rb-card-person .rb-avatar {
  width: 28px;
  height: 28px;
  border-width: 2px;
  border-color: rgba(7,89,120,.38);
  background: #f1f9fb;
  font-size: 11px;
  box-shadow: 0 2px 5px rgba(1,31,49,.22), inset 0 0 0 1px rgba(255,255,255,.75);
}
.rb-card-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  margin: 8px 24px 0 0;
  border-top: 1px solid #b9cbd3;
  padding-top: 7px;
}
.rb-card-order > span { display: grid; min-width: 0; }
.rb-card-order b { color: #075978; font-size: 11px; font-weight: 900; }
.rb-card-order small { min-width: 0; overflow: hidden; color: #50636d; font-size: 9.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.rb-card-order button {
  min-height: 29px;
  border: 1px solid #9bbbc8;
  border-radius: 6px;
  padding: 4px 7px;
  color: #075978;
  background: #f2f9fb;
  font-size: 9.5px;
  font-weight: 900;
}
.rb-card-order-open { display: grid; min-width: 0; text-align: left; }
.rb-card-order-open b,.rb-card-order-open small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-card-paid.is-paid { border-color: #5fa577; color: #0f6b31; background: #e9f7ed; }
.rb-card-paid.is-unpaid { border-color: #e0a45b; color: #9b5205; background: #fff4de; }
.rb-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(7,89,120,.28);
  border-radius: 50%;
  color: #075978;
  background: #e9f5f8;
  font-size: 10px;
  font-weight: 900;
  object-fit: cover;
}
.rb-avatar.big {
  width: 70px;
  height: 70px;
  font-size: 22px;
}
.rb-card-mark {
  position: absolute;
  right: 11px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  color: #fff;
  font-style: normal;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 1px rgba(255,255,255,.3), 0 1px 3px rgba(0,0,0,.38);
}
.rb-card-mark.urgent { background: #f07b00; }
.rb-card-mark.today,
.rb-card-mark.part { background: #e7b900; }
.rb-card-mark.normal,
.rb-card-mark.done { background: #18833c; }
.rb-card-mark.waiting { background: #755095; }
.rb-card-mark.cancel,
.rb-card-mark.overdue { background: #cf1717; }
.rb-card-tools {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: translateY(-4px) scale(.9);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}
.rb-card:hover .rb-card-tools,
.rb-card:focus-within .rb-card-tools { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.rb-card-tools button {
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 11px;
  box-shadow: 0 3px 8px rgba(1,49,76,.2);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.rb-card-tools button:hover { transform: translateY(-1px); background: #fff; box-shadow: 0 5px 11px rgba(1,49,76,.28); }
.rb-card-tools button.danger { color: #b4232b; border-color: #f0b9bd; background: #fff5f5; }
.rb-card-tools button.print { color: #075978; border-color: #9dc7d7; background: #edf8fb; }

@media (prefers-reduced-motion: reduce) {
  .rb-action,
  .rb-tabs button,
  .rb-card,
  .rb-card-tools,
  .rb-card-tools button,
  .rb-float-scroll { transition: none !important; }
}
.rb-bottom {
  display: grid;
  grid-template-columns: 1.08fr 1.34fr 1.08fr;
  min-width: 1480px;
  border: 1px solid #8b8274;
  color: #1b2542;
  background: linear-gradient(180deg, #f7f3f1, #e8e4e2);
  box-shadow: 0 -1px 3px rgba(0,0,0,.35);
}
.rb-bottom-box {
  min-height: 96px;
  padding: 6px 16px;
  border-right: 1px solid #9a9287;
}
.rb-bottom-box:last-child { border-right: 0; }
.rb-bottom-box h3 {
  display: inline-flex;
  margin: 0 0 4px;
  padding: 2px 9px;
  color: #f7f5f2;
  background: #16305f;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0;
}
.rb-bottom-box ul { margin: 0; padding-left: 24px; }
.rb-bottom-box li {
  margin: 1px 0;
  font-size: 15px;
  line-height: 1.28;
}
.rb-bottom-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.rb-mini-btn { padding: 5px 9px; font-size: 12px; }
.rb-parts-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  max-height: 66px;
  margin: 0;
  padding: 1px 5px 1px 0;
  color: #b32424;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #77909a transparent;
}
.rb-parts-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  margin: 0;
  list-style: none;
  font-size: 14.5px;
}
.rb-parts-list li.done span { color: #176b58; text-decoration: line-through; }
.rb-parts-list .rb-parts-empty {
  grid-column: 1 / -1;
  color: #6b7280;
  text-decoration: none;
}
.rb-workflow-link-state { display: flex; align-items: baseline; gap: 8px; }
.rb-workflow-link-state b { flex: 0 0 auto; color: #075978; }
.rb-workflow-link-state span { color: #405765; font-weight: 800; }
.rb-parts-list button {
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 11px;
}
.rb-parts-list button.danger { color: #b91c1c; border-color: #fecdd3; background: #fff1f2; }
.rb-parts-list .rb-linked-order-row {
  display: block;
  margin: 0;
}
.rb-linked-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 28px;
  padding: 4px 6px !important;
  border: 1px solid #c8d8de !important;
  border-radius: 6px !important;
  color: #173150;
  background: rgba(255,255,255,.82);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.rb-linked-order:hover {
  border-color: #5d8da0 !important;
  background: #fff;
  box-shadow: 0 3px 9px rgba(3,51,82,.13);
  transform: translateY(-1px);
}
.rb-linked-order-main { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rb-linked-order-main b { flex: 0 0 auto; color: #a21b19; font-size: 13.5px; }
.rb-linked-order-main span { min-width: 0; overflow: hidden; color: #233b5d; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.rb-order-state {
  padding: 3px 6px;
  border-radius: 999px;
  color: #7a4b00;
  background: #fff0c7;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}
.rb-order-state.waiting { color: #075978; background: #dff3fb; }
.rb-order-state.ready { color: #176b58; background: #dcf6e9; }
.rb-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: stretch;
}
.rb-legend h3 { align-self: flex-start; margin-bottom: 0; }
.rb-legend-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  max-height: 72px;
  padding: 1px 4px 2px 1px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #77909a transparent;
}
.rb-status-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 31px;
  padding: 3px 6px;
  border: 1px solid #c3c7c9;
  border-radius: 6px;
  color: #263750;
  background: rgba(255,255,255,.82);
  text-align: left;
  cursor: pointer;
  transition: transform .13s ease, border-color .13s ease, background .13s ease, box-shadow .13s ease;
}
.rb-status-filter:hover { border-color: #708c97; background: #fff; }
.rb-status-filter.active,
.rb-status-filter[aria-pressed="true"] {
  border-color: #244b5c;
  background: #dce7eb;
  box-shadow: inset 0 3px 7px rgba(1,31,49,.24), inset 0 0 0 1px rgba(255,255,255,.6);
  transform: translateY(1px);
}
.rb-status-filter b { min-width: 0; font-size: 13.5px; line-height: 1.1; letter-spacing: 0; }
.rb-legend.is-status-legend {
  padding: 6px 12px;
}
.rb-legend.is-status-legend .rb-legend-buttons { grid-template-columns: 1fr 1fr; }
.rb-legend.is-status-legend .rb-status-filter b { font-size: 12.5px; }
.rb-dot {
  display: inline-grid;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  box-shadow: inset 0 1px rgba(255,255,255,.3), 0 1px 3px rgba(0,0,0,.35);
}
.rb-dot.urgent { background: #f07b00; }
.rb-dot.yellow { background: #e7b900; }
.rb-dot.overdue { background: #cf1717; }
.rb-dot.normal { background: #18833c; }
.rb-dot.waiting { background: #755095; }
.rb-dot.all { background: conic-gradient(#f07b00 0 20%, #e7b900 20% 40%, #18833c 40% 60%, #755095 60% 80%, #cf1717 80%); }
.rb-status-dot {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(0,0,0,.42);
  border-radius: 50%;
  background: var(--rb-dot);
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 1px 2px rgba(0,0,0,.2);
  flex: 0 0 auto;
}
.rb-modal {
  position: fixed;
  inset: 0;
  z-index: 1700;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(1,31,49,.54);
  backdrop-filter: blur(5px);
}
.rb-modal-card {
  width: min(720px, 100%);
  max-height: min(92vh, 860px);
  overflow: auto;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(1,31,49,.36);
}
.rb-modal-card.compact { width: min(460px, 100%); }
.rb-report-card { width: min(560px, 100%) !important; }
.rb-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 20px;
  color: #fff;
  background: linear-gradient(128deg, #011f31, #033352 65%, #075b78);
}
.rb-modal-head p {
  margin: 0 0 2px;
  color: var(--gold-light);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}
.rb-modal-head h3 { margin: 0; font-size: 19px; }
.rb-icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-color: rgba(255,255,255,.35);
  border-radius: 10px;
  color: #fff;
  background: rgba(255,255,255,.11);
  font-size: 24px;
  line-height: 1;
}
.rb-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px 20px 4px;
}
.rb-job-type-toggle {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.rb-job-type-toggle label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #c7dbe3;
  border-radius: 10px;
  color: var(--blue);
  background: #f8fbfc;
  font-weight: 900;
}
.rb-job-type-toggle input { width: 17px; height: 17px; accent-color: var(--blue-bright); }
.rb-modal-card.compact .rb-field { margin: 18px 20px 10px; }
.rb-delivery-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 20px 0;
  padding: 12px 14px;
  border: 1px solid #cbdde4;
  border-left: 5px solid #1f7a37;
  border-radius: 9px;
  color: #183653;
  background: #f3faf6;
}
.rb-delivery-summary strong { flex: 0 0 auto; color: #a21b19; font-size: 16px; }
.rb-delivery-summary span { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.rb-delivery-fields { grid-template-columns: 1fr; padding-top: 12px; }
.rb-modal-card.compact .rb-delivery-fields .rb-field { margin: 0; }
.rb-report-body {
  display: grid;
  gap: 14px;
  padding: 20px;
}
.rb-report-hint {
  margin: 0;
  color: #405461;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}
.rb-report-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px;
  border: 1px solid #c7dbe3;
  border-radius: 10px;
  background: #edf5f7;
}
.rb-report-mode button {
  min-height: 40px;
  border: 0;
  border-radius: 7px;
  color: #34505f;
  background: transparent;
  font-weight: 900;
}
.rb-report-mode button.active {
  color: #fff;
  background: #075978;
  box-shadow: 0 2px 5px rgba(1,49,76,.24);
}
.rb-report-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rb-report-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rb-report-scope .rb-field[hidden] { display: none; }
.rb-report-dates .full { grid-column: 1 / -1; }
.rb-report-dates .rb-field[hidden] { display: none; }
.rb-report-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.rb-report-section-grid label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  border: 1px solid #c7dbe3;
  border-radius: 8px;
  padding: 9px 11px;
  color: #17384a;
  background: #f7fafb;
  font-weight: 900;
  cursor: pointer;
}
.rb-report-section-grid label:has(input:checked) { border-color: #087093; background: #e7f5f9; box-shadow: inset 0 0 0 1px #087093; }
.rb-report-section-grid input { width: 18px; height: 18px; accent-color: #087093; }
.rb-report-section-grid b { min-width: 25px; border-radius: 12px; padding: 2px 7px; color: #fff; background: #075978; text-align: center; }
.rb-technician-report-card { width: min(620px, 100%) !important; }
.rb-workflow-report-card { width: min(680px, 100%) !important; }
.rb-workflow-report-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rb-workflow-report-options label { background: #fffaf0; }
.rb-calendar-job-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #b9d1da;
  border-left: 5px solid #e76508;
  border-radius: 8px;
  padding: 11px 13px;
  color: #132253;
  background: #f7fbfc;
}
.rb-calendar-job-summary strong { color: #a21b19; font-size: 17px; }
.rb-calendar-job-summary span { overflow: hidden; font-size: 14px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.rb-calendar-paid { margin: 0; border: 1px solid #c7dbe3; border-radius: 8px; padding: 10px 12px; background: #f7fafb; }
.rb-calendar-paid > span { display: grid; gap: 2px; }
.rb-calendar-paid small { color: #536670; font-size: 11px; font-weight: 700; }
.rb-field { display: flex; flex-direction: column; gap: 6px; }
.rb-field.full { grid-column: 1 / -1; }
.rb-onsite-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px solid #c7dbe3;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfcfd, #edf5f7);
}
.rb-onsite-fields .rb-section-head,
.rb-onsite-fields .full { grid-column: 1 / -1; }
.rb-repair-workflow-fields {
  grid-column: 1 / -1;
  display: block;
  padding: 12px;
  border: 1px solid #bdd4dd;
  border-left: 5px solid #087093;
  border-radius: 12px;
  background: linear-gradient(180deg, #f9fcfd, #edf6f8);
}
.rb-collapse-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
  list-style: none;
}
.rb-collapse-summary::-webkit-details-marker { display: none; }
.rb-collapse-summary::after { content: "+ เปิด"; flex: 0 0 auto; border-radius: 999px; padding: 4px 9px; color: #fff; background: #087093; font-size: 11px; }
.rb-repair-workflow-fields[open] .rb-collapse-summary::after { content: "− ซ่อน"; }
.rb-collapse-summary small { color: #59707b; font-size: 11px; font-weight: 800; }
.rb-collapse-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; border-top: 1px solid #cfdee4; padding-top: 12px; }
.rb-collapse-body .full { grid-column: 1 / -1; }
.rb-workflow-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #c8dce3;
  border-radius: 7px;
  padding: 8px 10px;
  color: #183d50;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}
.rb-workflow-hint > span { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; background: var(--rb-workflow-color); }
.rb-rework-toggle { margin: 2px 0 0; border: 1px solid #d9b97e; border-radius: 8px; padding: 10px 12px; background: #fff9eb; cursor: pointer; }
.rb-rework-toggle > span { display: grid; gap: 2px; }
.rb-rework-toggle small { color: #6c5a36; font-size: 11px; font-weight: 800; }
.rb-rework-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid #cfdee4; padding-top: 10px; }
.rb-rework-history-note { margin: 0; color: #3f5965; font-size: 11px; font-weight: 800; }
.rb-device-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #c7dbe3;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fcfd, #eef7fa);
}
.rb-accessory-section,
.rb-followup-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px solid #c8dce3;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdfe, #edf7fa);
}
.rb-accessory-section .rb-section-head,
.rb-accessory-section > .rb-field,
.rb-followup-fields .full { grid-column: 1 / -1; }
.rb-accessory-count { flex: 0 0 auto; border-radius: 999px; padding: 5px 10px; color: #075978; background: #dff3fb; font-size: 12px; font-weight: 950; }
.rb-accessory-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
.rb-accessory-grid label { display: flex; align-items: center; gap: 7px; min-width: 0; border: 1px solid #cbdde4; border-radius: 9px; padding: 8px; color: #173b50; background: #fff; font-size: 12px; font-weight: 850; cursor: pointer; }
.rb-accessory-grid label:has(input:checked) { border-color: #087093; color: #064f6c; background: #e1f5fa; box-shadow: inset 0 0 0 1px #087093; }
.rb-accessory-grid input { flex: 0 0 auto; width: 17px; height: 17px; accent-color: #087093; }
.rb-card-accessories { display: grid; gap: 4px; margin: 6px 0; border-left: 4px solid #087093; padding: 6px 7px; background: rgba(225,245,250,.72); }
.rb-card-accessories > b { color: #064f6c; font-size: 11px; font-weight: 950; }
.rb-card-accessories > div { display: flex; flex-wrap: wrap; gap: 4px; }
.rb-card-accessories span { border: 1px solid #a9cfdd; border-radius: 999px; padding: 2px 6px; color: #173b50; background: #fff; font-size: 10px; font-weight: 850; }
.rb-followup-fields { border-left: 5px solid #e7b900; background: linear-gradient(180deg, #fffef7, #fff8d9); }
.rb-delivery-person-panel { display: grid; gap: 10px; border: 2px solid #1f7a37; border-radius: 14px; padding: 12px; background: linear-gradient(180deg, #f5fff8, #e4f7ea); box-shadow: 0 0 0 4px rgba(31,122,55,.12); animation: rbDeliveryPanelPulse 1.5s ease-in-out infinite; }
.rb-delivery-person-title { display: grid; gap: 2px; }
.rb-delivery-person-title b { color: #14652d; font-size: 15px; font-weight: 950; }
.rb-delivery-person-title small { color: #365f43; font-size: 11px; font-weight: 800; }
.rb-delivery-person-choices { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.rb-delivery-person-choices > button { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 7px; min-width: 0; min-height: 48px; border: 1px solid #99c7a8; border-radius: 11px; padding: 7px 8px; color: #183d26; background: #fff; text-align: left; font-weight: 900; }
.rb-delivery-person-choices > button .rb-avatar { width: 30px; height: 30px; }
.rb-delivery-person-choices > button span { min-width: 0; overflow-wrap: anywhere; }
.rb-delivery-person-choices > button b { grid-column: 1 / -1; color: #fff; border-radius: 6px; padding: 3px 6px; background: #18833c; text-align: center; font-size: 10px; }
.rb-delivery-person-choices > button.active { border: 2px solid #18833c; color: #0b5f27; background: #dff5e6; box-shadow: 0 0 0 4px rgba(24,131,60,.16); }
.rb-delivery-person-choices > p { grid-column: 1 / -1; margin: 0; color: #526a5a; font-size: 12px; font-weight: 800; }
@keyframes rbDeliveryPanelPulse { 50% { box-shadow: 0 0 0 7px rgba(31,122,55,.06); } }
@media (prefers-reduced-motion: reduce) {
  .rb-card.rb-due-alerting,
  .rb-delivery-person-panel { animation: none; }
}
.rb-repair-items-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #c7dbe3;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf8, #f3f8fa);
}
.rb-section-head,
.rb-device-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rb-section-head span,
.rb-device-row-head strong {
  color: var(--blue);
  font-size: 14px;
  font-weight: 900;
}
.rb-section-head small {
  display: block;
  margin-top: 2px;
  color: #59707b;
  font-size: 12px;
  font-weight: 800;
}
.rb-devices-list {
  display: grid;
  gap: 10px;
}
.rb-device-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d5e5eb;
  border-radius: 12px;
  background: #fff;
}
.rb-repair-item-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d9e7ec;
  border-left: 4px solid var(--blue-bright);
  border-radius: 12px;
  background: #fff;
}
.rb-repair-items-list,
.rb-repair-items-group { display: grid; gap: 10px; min-width: 0; }
.rb-repair-list-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}
.rb-repair-list-label span { color: #607782; font-size: 11px; }
.rb-pos-items-details {
  overflow: hidden;
  border: 1px solid #c8dce5;
  border-radius: 10px;
  background: #f5fafc;
}
.rb-pos-items-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--blue);
  background: #e9f4f8;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}
.rb-pos-items-details summary::-webkit-details-marker { display: none; }
.rb-pos-items-details summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: #087092; }
.rb-pos-items-details[open] summary::before { content: "−"; }
.rb-pos-items-details summary span { flex: 1; }
.rb-pos-items-details summary b { color: #526c78; font-size: 11px; }
.rb-pos-items-details .rb-pos-issue-panel,
.rb-pos-items-details .rb-pos-results,
.rb-pos-items-details .rb-repair-items-group { margin: 10px; }
.rb-repair-item-row[data-source="pos"] { border-left-color: #176b58; background: #f9fffb; }
.rb-device-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.rb-device-grid .full { grid-column: 1 / -1; }
.rb-repair-item-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr .8fr;
  gap: 10px;
}
.rb-repair-item-grid .full { grid-column: 1 / -1; }
.rb-line-total-field input[readonly] { color: #075978; border-color: #a9cfdd; background: #edf8fb; font-weight: 900; cursor: default; }
.rb-repair-item-meta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 7px; color: #5a717c; font-size: 11px; font-weight: 900; }
.rb-repair-item-head,
.rb-repair-item-head div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rb-repair-item-head strong { color: var(--blue); font-size: 14px; font-weight: 900; }
.rb-issued-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  color: #176b58;
  background: #ecfdf5;
  font-size: 11px;
  font-weight: 900;
}
.rb-device-remove {
  min-height: 30px;
  border: 1px solid #fecdd3;
  border-radius: 9px;
  padding: 5px 10px;
  color: #b91c1c;
  background: #fff1f2;
  font-size: 12px;
  font-weight: 900;
}
.rb-mini-btn.danger {
  border-color: #fecdd3;
  color: #b91c1c;
  background: #fff1f2;
}
.rb-pos-issue-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px auto;
  gap: 8px;
}
.rb-pos-issue-panel input,
.rb-pos-issue-panel button { min-height: 38px; }
.rb-pos-results {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  border: 1px solid #d4e5eb;
  border-radius: 12px;
  background: #f8fbfc;
}
.rb-pos-results button {
  display: block;
  width: 100%;
  border: 1px solid #d9e7ec;
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
  text-align: left;
}
.rb-pos-results button:hover { border-color: var(--blue-bright); background: #edf7fb; }
.rb-pos-results strong { display: block; color: var(--blue); font-size: 13px; }
.rb-pos-results span,
.rb-pos-empty { color: var(--muted); font-size: 12px; font-weight: 800; }
.rb-people-form {
  display: grid;
  gap: 12px;
  padding: 18px 20px 0;
}
.rb-person-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #d4e5eb;
  border-radius: 12px;
  background: #f8fbfc;
}
.rb-person-preview small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.rb-people-list {
  display: grid;
  gap: 6px;
  max-height: 230px;
  overflow: auto;
  padding: 6px;
  border: 1px solid #d4e5eb;
  border-radius: 12px;
  background: #f8fbfc;
}
.rb-people-list button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  border: 1px solid #d9e7ec;
  border-radius: 10px;
  padding: 6px 9px;
  color: var(--blue);
  background: #fff;
  text-align: left;
  font-weight: 900;
}
.rb-people-list small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.rb-repair-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
}
.rb-repair-totals span {
  padding: 6px 10px;
  border: 1px solid #d4e5eb;
  border-radius: 999px;
  background: #fff;
}
.rb-repair-print-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.rb-bottom,
.rb-bottom button,
.rb-modal button {
  position: relative;
  pointer-events: auto;
}
.rb-field span,
.rb-check span {
  color: #061622;
  font-size: 13px;
  font-weight: 900;
}
.rb-field textarea { resize: vertical; line-height: 1.42; }
.rb-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 20px 8px;
}
.rb-check input { width: 18px; height: 18px; accent-color: var(--blue-bright); }
.rb-modal-actions {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 15px 20px 20px;
}
.rb-suggest-box {
  position: fixed;
  z-index: 1810;
  max-width: calc(100vw - 16px);
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  border: 1px solid #b8ced7;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(3, 51, 82, .22);
}
.rb-suggest-box button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--ink);
  background: #fff;
  text-align: left;
}
.rb-suggest-box button:hover,
.rb-suggest-box button:focus { background: #edf7fb; outline: none; }
.rb-suggest-box strong { display: block; color: var(--blue); font-size: 13px; }
.rb-suggest-box span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }

/* Full-screen repair editor ------------------------------------------------ */
@media (min-width: 700px) {
  .rb-modal:has(#rbJobForm:not([hidden])) { padding: 0; background: rgba(1,31,49,.7); }
  .rb-modal-card.rb-job-editor {
    width: min(1240px, calc(100vw - 64px)); height: min(1040px, calc(100vh - 28px)); max-height: calc(100vh - 28px);
    display: flex; flex-direction: column; overflow: hidden; border: 0; border-radius: 10px;
    background: #f8fbfd; box-shadow: 0 30px 88px rgba(0,0,0,.46);
  }
  .rb-job-editor .rb-modal-head {
    min-height: 94px; flex: 0 0 auto; padding: 16px 30px;
    background: linear-gradient(110deg,#002f62 0%,#00417d 55%,#002f62 100%);
  }
  .rb-job-editor .rb-modal-head > div { display: grid; grid-template-columns: 64px auto; grid-template-rows: auto auto; align-items: center; column-gap: 13px; }
  .rb-job-editor .rb-modal-head > div::before { content: ""; grid-row: 1 / 3; display: block; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg,#1ac2ff,#0878c8); }
  .rb-job-editor .rb-modal-head > div::after { content: ""; grid-column: 1; grid-row: 1 / 3; width: 60px; height: 60px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.1 4.3a6.2 6.2 0 0 1-7.7 7.7L6 19.4a2 2 0 0 1-2.8-2.8l7.4-7.4a6.2 6.2 0 0 1 7.7-7.7l-3.5 3.5 1 2.5 2.5 1z'/%3E%3C/svg%3E") center / 32px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.1 4.3a6.2 6.2 0 0 1-7.7 7.7L6 19.4a2 2 0 0 1-2.8-2.8l7.4-7.4a6.2 6.2 0 0 1 7.7-7.7l-3.5 3.5 1 2.5 2.5 1z'/%3E%3C/svg%3E") center / 32px no-repeat; }
  .rb-job-editor .rb-modal-head p { grid-column: 2; grid-row: 2; margin: 0; color: #dbeeff; font-size: 13px; letter-spacing: 0; }
  .rb-job-editor .rb-modal-head h3 { grid-column: 2; grid-row: 1; color: #fff; font-size: 27px; font-weight: 950; }
  .rb-job-editor .rb-icon-btn { width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; font-size: 34px; }
  .rb-repair-workspace { flex: 1; overflow: auto; padding: 20px 28px 16px; }
  .rb-repair-overview { display: grid; grid-template-columns: 1fr 1fr 1.04fr; gap: 14px; margin-bottom: 14px; }
  .rb-editor-card { min-width: 0; border: 1px solid #dbe4eb; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(8,40,65,.035); }
  .rb-editor-card > h4 { display: flex; align-items: center; min-height: 49px; margin: 0; border-bottom: 1px solid #dde7ee; padding: 0 17px; color: #004783; font-size: 17px; font-weight: 950; }
  .rb-editor-card > h4::after { content: none; }
  .rb-editor-heading-icon { flex: 0 0 auto; width: 21px; height: 21px; margin-right: 11px; color: #00518f; stroke-width: 2.5; }
  .rb-editor-card > .rb-field, .rb-editor-card > .rb-job-type-toggle { margin: 11px 15px; }
  .rb-editor-card .rb-field { gap: 5px; }
  .rb-editor-card .rb-field span { font-size: 13px; }
  .rb-editor-card .rb-field input, .rb-editor-card .rb-field select, .rb-editor-card .rb-field textarea, .rb-editor-card .rb-thai-trigger { min-height: 36px; border-color: #d3dfe7; border-radius: 7px; padding: 7px 10px; font-size: 14px; }
  .rb-editor-card .rb-thai-trigger small { display: none; }
  .rb-editor-card .rb-thai-trigger span { color: #172432; font-size: 14px; }
  .rb-customer-card, .rb-machine-card, .rb-job-card { display: grid; align-content: start; }
  .rb-job-card { grid-template-columns: 1fr 1fr; }
  .rb-job-card > h4, .rb-job-card > .rb-job-type-toggle { grid-column: 1 / -1; }
  .rb-job-card .rb-job-type-toggle { display: none; }
  .rb-job-card > .rb-field { margin: 8px 14px; }
  /* The job section follows the source form vertically.  Only received
     date/time are a pair; all other fields occupy their own row. */
  .rb-job-card > .rb-field:has(#rbJobNo),
  .rb-job-card > .rb-field:has(#rbDueDate),
  .rb-job-card > .rb-field:has(#rbReceivedChannel),
  .rb-job-card > .rb-field:has(#rbTechnician),
  .rb-job-card > .rb-field:has(#rbJobStatus) { grid-column: 1 / -1; }
  .rb-customer-card .rb-address-field textarea { min-height: 72px; resize: vertical; }
  .rb-machine-card #rbDevicesSection { margin: 0; border: 0; border-radius: 0; padding: 0 14px 10px; background: transparent; }
  .rb-machine-card .rb-section-head { display: flex; align-items: center; margin: 8px 0; }
  .rb-machine-card .rb-section-head span { color: #315166; font-size: 12px; }
  .rb-machine-card .rb-section-head small { display: none; }
  .rb-machine-card .rb-section-head .rb-mini-btn { margin-left: auto; border-color: #9bc5e5; color: #005aab; background: #f4f9ff; }
  .rb-machine-card #rbDevicesList { max-height: 348px; overflow-y: auto; overscroll-behavior: contain; padding: 0 4px 4px 0; scrollbar-gutter: stable; }
  .rb-machine-card .rb-device-row { padding: 9px 0 12px; border: 0; border-top: 1px solid #e2eaf0; border-radius: 0; background: transparent; }
  .rb-machine-card .rb-device-row:first-child { border-top: 0; padding-top: 0; }
  .rb-machine-card .rb-device-row-head { display: flex; margin-bottom: 6px; }
  .rb-machine-card .rb-device-row-head strong { color: #075a9e; font-size: 12px; }
  .rb-machine-card .rb-device-row-head .rb-device-remove { min-height: 25px; padding: 2px 7px; font-size: 11px; }
  .rb-machine-card .rb-device-grid { gap: 8px; }
  .rb-machine-card .rb-devices-list { gap: 8px; }
  .rb-machine-card .rb-device-grid .rb-field.full { grid-column: auto; }
  .rb-machine-card .rb-device-grid .rb-field:nth-child(n+5) { display: none; }
  .rb-repair-editor-main { display: grid; grid-template-columns: minmax(0,1fr) 382px; gap: 14px; align-items: start; }
  .rb-repair-editor-left { display: grid; gap: 14px; min-width: 0; }
  .rb-items-card { padding-bottom: 12px; }
  .rb-items-card #rbRepairItemsSection { margin: 0; border: 0; border-radius: 0; padding: 0; background: transparent; }
  .rb-items-card #rbRepairItemsSection > .rb-section-head { min-height: 44px; padding: 9px 15px; border-bottom: 1px solid #dde7ee; }
  .rb-items-card #rbRepairItemsSection > .rb-section-head > div { display: none; }
  .rb-items-card #rbRepairItemsSection > .rb-section-head::before { content: "รายการงานซ่อมและอะไหล่"; color: #17384a; font-size: 13px; font-weight: 900; }
  .rb-items-card #rbAddRepairItemBtn { border-color: #9bc5e5; color: #005aab; background: #f4f9ff; }
  .rb-repair-table-head { display: grid; grid-template-columns: 52px 128px minmax(150px,1fr) 68px 108px 112px 62px; gap: 8px; align-items: center; border-bottom: 1px solid #dce6ed; padding: 8px 14px; color: #30414d; background: #f7fafc; font-size: 11px; font-weight: 900; text-align: center; }
  .rb-repair-table-head span:nth-child(3) { text-align: left; }
  .rb-repair-items-list, .rb-repair-items-group { gap: 0; }
  .rb-repair-list-label, .rb-pos-items-details, .rb-repair-print-actions { display: none; }
  .rb-repair-item-row { display: grid; grid-template-columns: 52px 128px minmax(150px,1fr) 68px 108px 112px 62px; gap: 8px; align-items: center; border: 0; border-bottom: 1px solid #e2e9ee; border-radius: 0; padding: 8px 14px; background: #fff; }
  .rb-repair-item-head { display: contents; }
  .rb-repair-item-head strong { display: block; grid-column: 1; color: #1d2a34; font-size: 13px; text-align: center; }
  .rb-repair-item-head > div { grid-column: 7; grid-row: 1; display: flex; justify-content: center; }
  .rb-repair-item-head .rb-device-remove { min-height: 27px; padding: 3px 8px; }
  .rb-repair-item-grid { display: contents; }
  .rb-repair-item-grid .rb-field { margin: 0; }
  .rb-repair-item-grid .rb-repair-device-links { grid-column: 2; grid-row: 1; min-width: 0; }
  .rb-repair-item-grid .rb-field.full { grid-column: 3; }
  .rb-repair-item-grid .rb-field:nth-child(3) { grid-column: 4; }
  .rb-repair-item-grid .rb-field:nth-child(4) { grid-column: 5; }
  .rb-repair-item-grid .rb-field:nth-child(5) { grid-column: 6; }
  .rb-repair-item-grid .rb-field:nth-child(n+6), .rb-repair-item-meta { display: none; }
  .rb-repair-item-grid .rb-field span { display: none; }
  .rb-repair-item-grid .rb-field input { min-height: 36px; text-align: center; }
  .rb-repair-item-grid .rb-field.full input { text-align: left; }
  .rb-repair-device-links { position: relative; min-width: 0; }
  .rb-repair-device-links summary { display: flex; align-items: center; min-height: 36px; overflow: hidden; border: 1px solid #cbdde8; border-radius: 7px; padding: 7px 23px 7px 9px; color: #075a9e; background: #f7fbff; font-size: 11px; font-weight: 900; cursor: pointer; list-style: none; white-space: nowrap; text-overflow: ellipsis; }
  .rb-repair-device-links summary::-webkit-details-marker { display: none; }
  .rb-repair-device-links summary::after { content: "⌄"; position: absolute; right: 8px; color: #28668d; font-size: 15px; }
  .rb-repair-device-links[open] > div { position: absolute; z-index: 15; top: calc(100% + 4px); left: 0; min-width: 230px; max-width: 330px; max-height: 190px; overflow: auto; border: 1px solid #b9d2e2; border-radius: 8px; padding: 6px; background: #fff; box-shadow: 0 10px 24px rgba(17,49,72,.18); }
  .rb-repair-device-links label { display: flex; align-items: flex-start; gap: 7px; padding: 7px; color: #263d4e; font-size: 12px; font-weight: 750; cursor: pointer; }
  .rb-repair-device-links label:hover { background: #eff8fd; }
  .rb-repair-device-links input { flex: 0 0 auto; margin: 2px 0 0; accent-color: #0878c8; }
  .rb-repair-device-empty { margin: 0; padding: 7px; color: #7b8992; font-size: 11px; line-height: 1.45; }
  .rb-repair-totals { justify-content: flex-end; padding: 10px 15px 0; }
  .rb-editor-notes { display: grid; grid-template-columns: minmax(0,1.28fr) minmax(260px,.72fr); align-items: start; padding-bottom: 14px; }
  .rb-editor-notes > h4 { grid-column: 1 / -1; }
  .rb-editor-notes > .rb-field { margin: 12px 15px 0; }
  .rb-editor-notes textarea { min-height: 93px; }
  .rb-editor-notes #rbAccessoriesSection { grid-column: 1 / -1; margin: 14px 15px 0; border: 0; border-top: 1px solid #e2e9ee; border-radius: 0; padding: 12px 0 0; background: transparent; }
  .rb-editor-notes #rbAccessoriesSection .rb-section-head { margin-bottom: 8px; }
  .rb-editor-notes #rbAccessoriesSection small { display: none; }
  .rb-editor-notes .rb-accessory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rb-editor-notes #rbAccessoryOther { display: none; }
  .rb-editor-photos { display: grid; grid-template-columns: repeat(3, 74px) 82px; gap: 8px; align-items: end; margin: 12px 15px 0 0; }
  .rb-editor-photos h5 { grid-column: 1 / -1; margin: 0; color: #00518f; font-size: 13px; font-weight: 900; }
  .rb-attachment-preview { display: contents; }
  .rb-attachment-preview figure { position: relative; width: 74px; height: 74px; margin: 0; overflow: hidden; border: 1px solid #d2dde5; border-radius: 7px; background: #f4f7f9; }
  .rb-attachment-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .rb-attachment-preview button { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 19px; height: 19px; border: 0; border-radius: 50%; color: #fff; background: rgba(10,25,38,.76); font-size: 15px; line-height: 1; }
  .rb-attachment-add { display: grid; place-items: center; width: 82px; height: 74px; border: 1px dashed #9bb9d7; border-radius: 7px; color: #075aa3; background: #f8fbff; cursor: pointer; }
  .rb-attachment-add input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
  .rb-attachment-add span { display: grid; justify-items: center; font-size: 25px; line-height: .9; }
  .rb-attachment-add small { margin-top: 7px; font-size: 11px; font-weight: 900; }
  .rb-editor-more { border: 1px solid #dbe4eb; border-radius: 8px; background: #fff; }
  .rb-editor-more > summary { padding: 12px 15px; color: #00518f; font-size: 13px; font-weight: 900; cursor: pointer; }
  .rb-editor-more-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 15px 15px; }
  .rb-editor-more-body > .rb-field, .rb-editor-more-body > section, .rb-editor-more-body > details { min-width: 0; }
  .rb-editor-more-body .rb-onsite-fields, .rb-editor-more-body .rb-followup-fields { grid-column: 1 / -1; }
  .rb-repair-editor-side { display: grid; gap: 8px; }
  .rb-repair-editor-side .rb-editor-card > h4 { min-height: 49px; }
  .rb-cost-card, .rb-payment-card { padding-bottom: 8px; }
  .rb-cost-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px 0; color: #273440; font-size: 14px; font-weight: 800; }
  .rb-cost-line b { color: #14202b; font-size: 15px; }
  .rb-editor-discount { display: grid; grid-template-columns: 1fr 160px 26px; align-items: center; gap: 8px; margin: 12px 16px 0; color: #293842; font-size: 14px; font-weight: 800; }
  .rb-editor-discount input { width: 100%; min-height: 34px; border: 1px solid #d4dfe6; border-radius: 6px; padding: 6px 10px; text-align: right; font: inherit; }
  .rb-cost-total { display: grid; grid-template-columns: 1fr auto; align-items: center; margin-top: 13px; padding: 11px 16px; color: #fff; background: linear-gradient(100deg,#075083,#003d78); font-size: 17px; font-weight: 950; }
  .rb-cost-total b { font-size: 28px; }
  .rb-cost-total small { font-size: 14px; }
  .rb-payment-card > .rb-field { margin: 12px 16px; }
  .rb-payment-card .rb-payment-method { margin-top: 14px; }
  .rb-job-editor .rb-modal-actions { flex: 0 0 auto; grid-template-columns: 144px 144px minmax(0,1fr) 210px 230px; gap: 18px; border-top: 1px solid #d9e4ea; padding: 14px 42px; background: #fff; }
  .rb-job-editor .rb-modal-actions .button { min-height: 46px; border-radius: 8px; font-size: 15px; font-weight: 900; }
  .rb-job-editor #rbCancelJobBtn { grid-column: 1; border-color: #cbd7e0; color: #1f2d39; background: #fff; }
  .rb-job-editor #rbDeleteJobBtn { position: static; grid-column: 2; }
  .rb-job-editor #rbSaveDraftJobBtn { grid-column: 3; border-color: #b7cbe0; color: #07539a; background: #fff; }
  .rb-job-editor #rbSavePrintJobBtn { grid-column: 4; border-color: #9dbde0; color: #07539a; background: #fff; }
  .rb-job-editor #rbSaveJobBtn { grid-column: 5; color: #fff; background: linear-gradient(105deg,#07529a,#003f7d); }
}
.rb-import-card { width: min(1080px, 100%); }
.rb-import-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding: 14px 18px 8px;
}
.rb-import-stat {
  min-height: 88px;
  padding: 12px;
  border: 1px solid #d4e2e7;
  border-left: 4px solid #8aa3ad;
  border-radius: 12px;
  background: #f8fbfc;
  text-align: center;
}
.rb-import-stat.success { border-left-color: #176b58; }
.rb-import-stat.warning { border-left-color: #c98500; }
.rb-import-stat.danger { border-left-color: #bf2f2f; }
.rb-import-stat strong {
  display: block;
  color: var(--blue);
  font-size: 28px;
  line-height: 1;
}
.rb-import-stat span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.rb-import-stat small {
  display: block;
  margin-top: 5px;
  color: #5f7280;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 800;
}
.rb-import-summary-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #cfe0e8;
  border-radius: 11px;
  color: #0d3c58;
  background: #eef7fb;
  font-size: 12.5px;
  font-weight: 900;
}
.rb-import-summary-note.result {
  border-color: #cee5d7;
  color: #10553d;
  background: #effaf2;
}
.rb-import-details {
  max-height: min(56vh, 520px);
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 8px 18px 10px;
}
.rb-import-section {
  display: grid;
  gap: 8px;
}
.rb-import-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rb-import-section-head h4 {
  margin: 0;
  color: var(--blue);
  font-size: 15px;
}
.rb-import-section-head span {
  color: #5f7280;
  font-size: 12px;
  font-weight: 900;
}
.rb-import-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #d6e4e9;
  border-left: 5px solid #08769b;
  border-radius: 11px;
  background: #fff;
}
.rb-import-item.create { border-left-color: #176b58; }
.rb-import-item.deliveredMismatch { border-left-color: #e76508; }
.rb-import-item input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue-bright); }
.rb-import-item strong,
.rb-import-item em,
.rb-import-item small { display: block; }
.rb-import-item strong { color: var(--blue); font-size: 14px; }
.rb-import-item em { margin-top: 2px; color: #176b58; font-size: 12px; font-style: normal; font-weight: 900; }
.rb-import-item small { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.rb-import-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 7px;
}
.rb-import-meta span {
  color: #335364;
  font-size: 11.5px;
  font-weight: 800;
}
.rb-import-change-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: #20333f;
  font-size: 12px;
}
.rb-import-change-list li { margin: 3px 0; }
.rb-import-system-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rb-import-system-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid #dce6eb;
  border-radius: 10px;
  background: #fff;
}
.rb-import-system-list li b {
  color: var(--blue);
  font-size: 12px;
}
.rb-import-system-list li span {
  color: #526672;
  font-size: 12px;
  font-weight: 800;
}
.rb-import-action-buttons {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.rb-import-warn,
.rb-import-empty {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #ead8aa;
  border-radius: 9px;
  color: #533b04;
  background: #fff8df;
  font-size: 12px;
  font-weight: 800;
}
.rb-picker {
  position: fixed;
  inset: 0;
  z-index: 1805;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(1,31,49,.54);
  backdrop-filter: blur(5px);
}
.rb-picker-card {
  width: min(430px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(1,31,49,.36);
}
.rb-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  color: #fff;
  background: linear-gradient(128deg, #011f31, #033352 65%, #075b78);
}
.rb-picker-head p { margin: 0 0 2px; color: var(--gold-light); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.rb-picker-head h3 { margin: 0; font-size: 18px; }
.rb-picker-nav {
  display: grid;
  grid-template-columns: 38px 1fr 1fr 38px;
  gap: 7px;
  padding: 14px 14px 9px;
}
.rb-picker-nav button,
.rb-picker-nav select,
.rb-time-grid select {
  min-width: 0;
  border: 1px solid #cbdbe1;
  border-radius: 9px;
  padding: 8px;
  color: var(--blue);
  background: #f8fbfc;
  font-weight: 900;
}
.rb-picker-weekdays,
.rb-picker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 0 14px;
}
.rb-picker-weekdays span {
  color: #59707b;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
.rb-picker-days { padding-top: 8px; }
.rb-picker-days button {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--ink);
  background: #f4f8fa;
  font-weight: 900;
}
.rb-picker-days button:hover { border-color: #88b5c5; background: #e9f4f7; }
.rb-picker-days button.today { border-color: var(--gold); color: var(--blue); }
.rb-picker-days button.selected { color: #fff; border-color: var(--blue); background: linear-gradient(135deg, #075978, #08769b); }
.rb-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px;
}
.rb-time-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px 18px 4px;
}
.rb-time-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 900; }
.rb-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1800;
  max-width: min(380px, calc(100vw - 44px));
  padding: 12px 16px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  box-shadow: 0 14px 35px rgba(1, 31, 49, .32);
  opacity: 0;
  transform: translateY(15px);
  pointer-events: none;
  transition: .2s ease;
  font-weight: 800;
}
.rb-toast.show { opacity: 1; transform: translateY(0); }
.rb-toast[data-type="success"] { background: linear-gradient(135deg, #176b58, #20916f); }
.rb-toast[data-type="error"] { background: linear-gradient(135deg, #8f1d1d, #b91c1c); }
@media (max-width: 1360px) {
  .rb-shell { overflow: auto; }
  .rb-top, .rb-columns, .rb-bottom, .rb-gate { min-width: 1480px; }
  .rb-title { font-size: 50px; }
}
@media (max-width: 760px) {
  .preview-toolbar { align-items: flex-start; flex-direction: column; }
  .preview-edit-toolbar { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .preview-edit-hint { white-space: normal; flex: 1 1 180px; }
  .preview-view-controls { width:100%; padding-top:6px; padding-left:0; border-top:1px solid #d5e3e8; border-left:0; }
  .preview-editor-toggle { margin-left:auto; }
  body.repair-board-open { overscroll-behavior: none; }
  .repair-board-overlay {
    padding: 0;
    overflow: hidden;
  }
  .rb-shell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    height: 100dvh;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px;
    border-width: 4px;
    overscroll-behavior-y: contain;
  }
  .rb-top {
    grid-template-columns: minmax(0, 1fr) minmax(112px, .62fr);
    grid-template-areas:
      "title title"
      "date stats"
      "actions actions";
    gap: 8px;
    min-width: 0;
  }
  .rb-title {
    grid-area: title;
    min-height: 56px;
    padding: 8px 12px;
    font-size: 25px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .rb-date-card {
    grid-area: date;
    min-width: 0;
    min-height: 70px;
    gap: 6px;
    padding: 10px 8px;
    font-size: 20px;
    white-space: nowrap;
  }
  .rb-date-card span { font-size: 15px; }
  .rb-date-card b { min-width: 0; font-size: 20px; }
  .rb-stat-card {
    grid-area: stats;
    min-width: 0;
    min-height: 70px;
    gap: 4px;
    padding: 8px;
    font-size: 12px;
  }
  .rb-stat-card div {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
  }
  .rb-stat-card div > span:last-child { display: none; }
  .rb-stat-card b { font-size: 18px; }
  .rb-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
    margin-top: 0;
  }
  .rb-tabs,
  .rb-onsite-division-tabs,
  .rb-board-nav,
  .rb-search,
  .rb-more-menu { grid-column: 1 / -1; }
  .rb-actions > .rb-search { min-width: 0; }
  .rb-more-menu { width: 100%; }
  .rb-more-menu > summary { width: 100%; }
  .rb-more-menu-panel { position: static; width: 100%; max-width: none; margin-top: 6px; box-shadow: 0 5px 14px rgba(1,31,49,.2); }
  .rb-board-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .rb-board-nav .rb-action { min-height: 42px; }
  .rb-tabs { min-width: 0; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .rb-tabs::-webkit-scrollbar { display: none; }
  .rb-onsite-division-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .rb-onsite-division-tabs button { min-width: 0; min-height: 40px; padding: 6px 4px; }
  .rb-tabs button {
    flex: 0 0 112px;
    min-width: 112px;
    min-height: 42px;
    padding: 8px 5px;
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
  }
  .rb-search {
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px;
  }
  .rb-action {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 7px 5px;
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .rb-gate {
    min-width: 0;
    padding: 9px 10px;
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .rb-columns {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 8px;
    scroll-padding-inline: 0;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .rb-columns::-webkit-scrollbar { height: 6px; }
  .rb-columns::-webkit-scrollbar-track { border-radius: 999px; background: rgba(255,255,255,.1); }
  .rb-columns::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255,255,255,.55); }
  .rb-column {
    flex: 0 0 calc(100vw - 24px);
    width: calc(100vw - 24px);
    min-width: 0;
    max-width: calc(100vw - 24px);
    min-height: 390px;
    max-height: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .rb-column-title,
  .rb-column[data-status="5"] .rb-column-title,
  .repair-board-overlay.onsite-mode .rb-column-title,
  .repair-board-overlay.workflow-mode .rb-column-title {
    min-height: 56px;
    padding: 9px 8px;
    font-size: 20px;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .rb-column-body {
    height: min(58dvh, 600px);
    min-height: 330px;
    max-height: none;
    padding: 10px 9px 14px;
    touch-action: auto;
  }
  .rb-float-scroll { display: none; }
  .rb-card {
    width: 100%;
    min-width: 0;
    min-height: 164px;
    padding: 13px 34px 12px 13px;
  }
  .rb-workflow-card { min-height: 0; padding: 13px; }
  .rb-workflow-actions button,
  .rb-workflow-status select { min-height: 38px; font-size: 12px; }
  .rb-workflow-source { font-size: 11px; }
  .rb-workflow-money b { font-size: 21px; }
  .rb-card:hover { transform: none; filter: none; }
  .rb-job-no { font-size: 16px; overflow-wrap: anywhere; }
  .rb-card p { font-size: 13px; line-height: 1.32; overflow-wrap: anywhere; }
  .rb-card-people { grid-template-columns: 1fr; }
  .rb-card-order { margin-right: 23px; }
  .rb-card-order button { min-height: 34px; font-size: 11px; }
  .rb-card-order small { font-size: 10.5px; }
  .rb-card-tools { opacity: 1; transform: none; pointer-events: auto; }
  .rb-bottom {
    grid-template-columns: 1fr;
    min-width: 0;
    width: 100%;
  }
  .rb-bottom-box {
    min-width: 0;
    min-height: 0;
    padding: 12px 14px;
    border-right: 0;
    border-bottom: 1px solid #9a9287;
  }
  .rb-bottom-box:last-child { border-bottom: 0; }
  .rb-bottom-box h3 { margin-bottom: 8px; font-size: 18px; }
  .rb-bottom-box ul { padding-left: 20px; }
  .rb-bottom-box li {
    margin: 5px 0;
    font-size: 15px;
    line-height: 1.42;
    overflow-wrap: anywhere;
  }
  .rb-bottom-head { align-items: center; flex-wrap: wrap; }
  .rb-bottom-head h3 { min-width: 0; white-space: normal; }
  .rb-parts-list { grid-template-columns: 1fr; gap: 6px; max-height: 190px; }
  .rb-parts-list li { min-width: 0; font-size: 14px; }
  .rb-legend,
  .rb-legend.is-status-legend {
    gap: 8px 10px;
    padding: 12px 14px;
  }
  .rb-legend-buttons,
  .rb-legend.is-status-legend .rb-legend-buttons { grid-template-columns: 1fr 1fr; max-height: 190px; gap: 7px; }
  .rb-status-filter { min-height: 38px; padding: 6px 8px; }
  .rb-status-filter b,
  .rb-legend.is-status-legend .rb-status-filter b { font-size: 14px; line-height: 1.18; }
  .rb-linked-order-main span { font-size: 14px; }
  .rb-order-state { font-size: 12.5px; }
  .rb-dot { width: 16px; height: 16px; flex: 0 0 auto; }
  .rb-status-dot { width: 13px; height: 13px; }
  .rb-modal {
    place-items: stretch;
    padding: 0;
    background: rgba(1,31,49,.72);
  }
  .rb-modal-card,
  .rb-modal-card.compact,
  .rb-report-card,
  .rb-import-card {
    width: 100% !important;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .rb-modal-head {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 13px 14px;
  }
  .rb-modal-head h3 { font-size: 18px; }
  .rb-form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 12px 6px;
  }
  .rb-job-type-toggle,
  .rb-onsite-fields,
  .rb-collapse-body,
  .rb-rework-fields,
  .rb-accessory-section,
  .rb-followup-fields,
  .rb-device-grid,
  .rb-repair-item-grid,
  .rb-pos-issue-panel { grid-template-columns: 1fr; }
  .rb-job-type-toggle { grid-template-columns: 1fr 1fr; }
  .rb-job-type-toggle label { min-width: 0; padding: 8px 7px; font-size: 12px; }
  .rb-onsite-fields,
  .rb-repair-workflow-fields,
  .rb-device-section,
  .rb-accessory-section,
  .rb-followup-fields,
  .rb-repair-items-section { min-width: 0; padding: 10px; }
  .rb-accessory-grid,
  .rb-delivery-person-choices { grid-template-columns: 1fr 1fr; }
  .rb-collapse-summary { align-items: flex-start; }
  .rb-field input,
  .rb-field textarea,
  .rb-field select,
  .rb-thai-trigger { min-width: 0; font-size: 16px; }
  .rb-device-row,
  .rb-repair-item-row { min-width: 0; padding: 10px; }
  .rb-section-head { flex-wrap: wrap; }
  .rb-section-head > div { min-width: 0; }
  .rb-section-head span,
  .rb-device-row-head strong { overflow-wrap: anywhere; }
  .rb-report-dates,
  .rb-report-scope,
  .rb-report-mode { grid-template-columns: 1fr; }
  .rb-report-section-grid { grid-template-columns: 1fr; }
  .rb-import-summary { grid-template-columns: 1fr 1fr; }
  .rb-section-head,
  .rb-device-row-head,
  .rb-repair-item-head { align-items: flex-start; }
  .rb-modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    grid-template-columns: 1fr 1fr;
    padding: 10px 12px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 -4px 14px rgba(1,31,49,.12);
  }
  .rb-modal-actions span { display: none; }
  #rbJobForm .rb-modal-actions #rbSaveJobBtn { grid-column: 2; }
  .rb-technician-report-card #rbTechnicianReportCancel { grid-column: 1 / -1; }
  .rb-picker { padding: 8px; }
  .rb-picker-card { width: 100%; max-height: calc(100dvh - 16px); overflow-y: auto; }
  .rb-picker-actions { grid-template-columns: 1fr 1fr; }
  .rb-toast { right: 10px; bottom: 10px; max-width: calc(100vw - 20px); }
}

@media (max-width: 420px) {
  .rb-shell { padding: 6px; border-width: 3px; }
  .rb-top { grid-template-columns: minmax(0, 1fr) 108px; gap: 6px; }
  .rb-title { min-height: 52px; padding: 7px 9px; font-size: 22px; }
  .rb-date-card { min-height: 64px; padding: 8px 6px; font-size: 18px; }
  .rb-date-card span { font-size: 13px; }
  .rb-date-card b { font-size: 18px; }
  .rb-stat-card { min-height: 64px; padding: 6px; font-size: 11px; }
  .rb-stat-card b { font-size: 16px; }
  .rb-actions { gap: 5px; }
  .rb-action { min-height: 42px; font-size: 11.5px; }
  .rb-column {
    flex-basis: calc(100vw - 18px);
    width: calc(100vw - 18px);
    max-width: calc(100vw - 18px);
  }
  .rb-column-title,
  .rb-column[data-status="5"] .rb-column-title,
  .repair-board-overlay.onsite-mode .rb-column-title,
  .repair-board-overlay.workflow-mode .rb-column-title { font-size: 18px; }
  .rb-tabs button { flex-basis: 104px; min-width: 104px; }
  .rb-column-body { min-height: 310px; }
  .rb-legend-buttons,
  .rb-legend.is-status-legend .rb-legend-buttons { grid-template-columns: 1fr; }
  .rb-modal-head { padding: 11px 12px; }
  .rb-form-grid { padding-left: 10px; padding-right: 10px; }
}

@media print {
  html, body { width: 210mm !important; height: 297mm !important; margin: 0 !important; padding: 0 !important; background: #fff !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .no-print { display: none !important; }
  .app-shell { display: block !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .preview-panel { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important; }
  .document-page-stage { width: 210mm !important; height: 297mm !important; margin: 0 !important; overflow: visible !important; }
  .document-page { --document-preview-scale: 1 !important; position: relative !important; inset: auto !important; width: 210mm !important; min-width: 210mm !important; max-width: 210mm !important; height: 297mm !important; min-height: 297mm !important; max-height: 297mm !important; margin: 0 !important; box-shadow: none !important; overflow: hidden !important; transform: none !important; zoom: 1 !important; }
  .preview-editable { padding: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; cursor: default !important; }
  .preview-editable:empty::before { content: "" !important; }
}

/* One explicit print target prevents stale previews from joining the same print job. */
@media print {
  #documentPage,
  #costSummaryPage,
  #requisitionPage,
  #requisitionReportPage,
  #opsDocumentPage,
  #opsReportPage,
  #opsHandwriteSheet { display: none !important; }
  body[data-print-target="documentPage"] #documentPage,
  body[data-print-target="costSummaryPage"] #costSummaryPage,
  body[data-print-target="requisitionPage"] #requisitionPage,
  body[data-print-target="requisitionReportPage"] #requisitionReportPage,
  body[data-print-target="opsDocumentPage"] #opsDocumentPage,
  body[data-print-target="opsReportPage"] #opsReportPage,
  body[data-print-target="opsHandwriteSheet"] #opsHandwriteSheet { display: block !important; }
}

/* ================= ปุ่มอัปเดตแอป (Refresh) ================= */
.app-refresh { display: none; position: fixed; top: 7px; left: 7px; z-index: 5000; width: 28px; height: 28px; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--blue); font-size: 14px; font-weight: 900; line-height: 1; box-shadow: 0 2px 8px rgba(1,31,49,.25); opacity: .82; -webkit-tap-highlight-color: transparent; }
.app-refresh:hover { background: #fff; }

/* Repair editor v2: per-device workflow, readable costs and narrow screens */
.rb-legacy-fields[hidden],
.rb-onsite-editor-card[hidden],
.rb-device-rework-reason[hidden] { display: none !important; }
.rb-device-row-head strong { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 5px 9px; }
.rb-device-row-head strong span { color: #536c7c; font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }
.rb-device-type-custom { margin-top: 6px; }
.rb-device-status-field select,
.rb-status-field select { border-width: 2px !important; border-color: #287bac !important; color: #063f66; background: #f1f9ff; font-weight: 950; }
.rb-device-accessories { grid-column: 1 / -1; min-width: 0; border: 1px solid #cfe0ea; border-radius: 9px; background: #f8fbfd; }
.rb-device-accessories > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 8px 10px; color: #075978; font-size: 12px; font-weight: 900; cursor: pointer; list-style: none; }
.rb-device-accessories > summary::-webkit-details-marker { display: none; }
.rb-device-accessories > summary::after { content: "⌄"; order: 3; font-size: 16px; }
.rb-device-accessories[open] > summary::after { transform: rotate(180deg); }
.rb-device-accessories > summary span { margin-left: auto; border-radius: 999px; padding: 3px 8px; color: #315669; background: #e5f0f5; font-size: 10px; }
.rb-device-subhead { border-top: 1px solid #dbe8ee; padding: 8px 10px 0; color: #59717f; }
.rb-device-accessory-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding: 8px 10px; }
.rb-device-accessory-grid label { display: flex; align-items: center; gap: 6px; min-width: 0; border: 1px solid #d1dfe7; border-radius: 7px; padding: 6px 7px; color: #254354; background: #fff; font-size: 11px; font-weight: 800; cursor: pointer; }
.rb-device-accessory-grid label:has(input:checked) { border-color: #087093; color: #064f6c; background: #e4f6fa; box-shadow: inset 0 0 0 1px #087093; }
.rb-device-accessory-grid input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: #087093; }
.rb-device-accessories > .rb-field { margin: 0 10px 10px !important; }
.rb-device-rework { display: flex; grid-column: 1 / -1; align-items: flex-start; gap: 9px; border: 1px solid #cfb7e8; border-radius: 9px; padding: 9px 10px; color: #4f2873; background: #f8f2ff; cursor: pointer; }
.rb-device-rework input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: #7240a2; }
.rb-device-rework span, .rb-device-rework small { display: block; }
.rb-device-rework small { margin-top: 2px; color: #705d80; font-size: 10px; line-height: 1.35; }
.rb-repair-item-row.is-free-service { box-shadow: inset 4px 0 #7b3fb4; background: #fbf8ff; }
.rb-repair-item-row.is-free-service .rb-line-total-field input { color: #64318f; background: #f2e8fb; font-weight: 950; }
.rb-free-service-note { margin: 10px 16px 4px; color: #67417f; font-size: 11px; font-weight: 750; line-height: 1.45; }
.rb-job-person-panel { grid-column: 1 / -1; min-width: 0; margin: 6px 14px; border-top: 1px solid #e1e9ee; padding-top: 8px; }
.rb-job-person-panel > div:first-child { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: #173d54; font-size: 12px; }
.rb-job-person-panel small { color: #71828c; font-size: 10px; }
.rb-job-person-choices { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
.rb-job-person-choices button { display: grid; justify-items: center; min-width: 0; border: 1px solid #cddde6; border-radius: 8px; padding: 6px 3px; color: #2b4757; background: #fff; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
.rb-job-person-choices button.active { border-color: #087093; color: #075978; background: #e3f5fa; box-shadow: inset 0 0 0 1px #087093; }
.rb-job-person-choices .rb-avatar { width: 28px; height: 28px; margin-bottom: 4px; }
.rb-job-person-choices > p { grid-column: 1 / -1; margin: 2px 0; color: #536c7c; font-size: 13px; font-weight: 750; line-height: 1.45; }
.rb-device-card-status, .rb-device-card-accessories, .rb-device-card-note, .rb-device-card-rework { display: block; margin: 4px 0 0 18px; border-left: 3px solid #9bb4c1; padding-left: 6px; color: #526975; font-size: 10px; line-height: 1.35; }
.rb-device-card-status { border-left-color: #7b3fb4; color: #583078; font-weight: 900; }
.rb-device-card-rework { border-left-color: #7b3fb4; color: #64318f; font-weight: 900; }
.rb-job-flow-badge.mixed-status { --rb-flow:#7b3fb4; background:#f7f0ff; }
.rb-job-flow-badge.payment { --rb-flow:#0b77ad; background:#eef8fd; }
.rb-job-flow-badge.payment.overdue { --rb-flow:#cf1717; color:#8b1515; background:#fff0f0; }

@media (min-width: 700px) {
  .rb-repair-overview { grid-template-columns: minmax(230px,.78fr) minmax(360px,1.35fr) minmax(330px,1.12fr); align-items: start; }
  .rb-machine-card #rbDevicesList { max-height: 560px; }
  .rb-machine-card .rb-device-grid .rb-field:nth-child(n+5) { display: grid; }
  .rb-machine-card .rb-device-grid > .full { grid-column: 1 / -1; }
  .rb-job-card > .rb-field:has(#rbJobNo),
  .rb-job-card > .rb-field:has(#rbReceivedChannel),
  .rb-job-card > .rb-field:has(#rbJobStatus),
  .rb-job-card > #rbDeliveredByField { grid-column: 1 / -1; }
  .rb-job-card > .rb-field:has(#rbReceivedBy),
  .rb-job-card > .rb-field:has(#rbTechnician) { margin-top: 0; }
  .rb-repair-item-row { grid-template-rows: auto auto; padding-top: 10px; padding-bottom: 10px; }
  .rb-repair-item-grid .rb-field:nth-child(6),
  .rb-repair-item-grid .rb-field:nth-child(7),
  .rb-repair-item-grid .rb-field:nth-child(8),
  .rb-repair-item-grid .rb-field:nth-child(9) { display: grid; margin-top: 5px; }
  .rb-repair-item-grid .rb-field:nth-child(6) { grid-column: 3; grid-row: 2; }
  .rb-repair-item-grid .rb-field:nth-child(7) { grid-column: 4 / 6; grid-row: 2; }
  .rb-repair-item-grid .rb-field:nth-child(8) { grid-column: 6; grid-row: 2; }
  .rb-repair-item-grid .rb-field:nth-child(9) { grid-column: 2; grid-row: 2; }
  .rb-repair-item-grid .rb-field:nth-child(n+6) span { display: block; color: #647581; font-size: 9px; }
  .rb-repair-item-grid .rb-field:nth-child(n+6) input,
  .rb-repair-item-grid .rb-field:nth-child(n+6) button { min-height: 32px; font-size: 11px; }
}

@media (max-width: 699px) {
  body:has(#rbJobModal:not([hidden])) .app-refresh { display: none !important; }
  .rb-modal-card.rb-job-editor { width: 100%; height: 100dvh; max-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; border: 0; border-radius: 0; background: #f4f8fa; }
  .rb-job-editor .rb-modal-head { flex: 0 0 auto; min-height: 82px; align-items: flex-start; padding: 14px 52px 12px 18px; }
  .rb-job-editor .rb-modal-head > div { display: flex; min-width: 0; flex-direction: column; }
  .rb-job-editor .rb-modal-head > div::before,
  .rb-job-editor .rb-modal-head > div::after { display: none; }
  .rb-job-editor .rb-modal-head h3 { order: 1; margin: 0; font-size: 20px; line-height: 1.3; }
  .rb-job-editor .rb-modal-head p { order: 2; margin: 4px 0 0; font-size: 11px; line-height: 1.35; }
  .rb-repair-workspace { flex: 1; min-width: 0; overflow: auto; padding: 10px; }
  .rb-repair-overview, .rb-repair-editor-main, .rb-repair-editor-left, .rb-repair-editor-side { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; min-width: 0; }
  .rb-editor-card { min-width: 0; overflow: hidden; border: 1px solid #d8e3e9; border-radius: 10px; background: #fff; }
  .rb-editor-card > h4 { display: flex; align-items: center; min-height: 45px; margin: 0; border-bottom: 1px solid #dde7ee; padding: 10px 13px; color: #07518b; font-size: 16px; }
  .rb-editor-heading-icon { width: 20px; height: 20px; margin-right: 8px; }
  .rb-editor-card > .rb-field, .rb-editor-card > .rb-job-type-toggle { margin: 10px 12px; }
  .rb-job-card { display: grid; grid-template-columns: minmax(0,1fr); }
  .rb-job-card > * { grid-column: 1 !important; }
  .rb-job-card .rb-job-type-toggle { display: none; }
  .rb-machine-card #rbDevicesSection, .rb-items-card #rbRepairItemsSection { margin: 0; border: 0; padding: 10px; background: transparent; }
  .rb-device-grid { display: grid; grid-template-columns: minmax(0,1fr) !important; gap: 8px; }
  .rb-device-grid > * { grid-column: 1 !important; min-width: 0; }
  .rb-device-row { border: 1px solid #d6e3ea; border-radius: 10px; padding: 10px; background: #fbfdfe; }
  .rb-repair-item-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 8px; }
  .rb-repair-item-grid > * { grid-column: 1 / -1 !important; min-width: 0; }
  .rb-repair-item-grid > .rb-field:nth-child(3),
  .rb-repair-item-grid > .rb-field:nth-child(4),
  .rb-repair-item-grid > .rb-field:nth-child(5),
  .rb-repair-item-grid > .rb-field:nth-child(6) { grid-column: auto !important; }
  .rb-repair-item-grid .rb-field span { display: block; }
  .rb-repair-item-row { border: 1px solid #d6e3ea; border-radius: 10px; padding: 10px; background: #fff; }
  .rb-repair-item-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .rb-repair-table-head { display: none; }
  .rb-cost-total b { font-size: clamp(22px,8vw,28px); overflow-wrap: anywhere; }
  .rb-job-editor .rb-modal-actions { grid-template-columns: 1fr 1fr; gap: 8px; padding: 9px 10px; }
  .rb-job-editor .rb-modal-actions .button { min-width: 0; white-space: normal; }
  .rb-job-editor #rbDeleteJobBtn { position: static; }
}

@media (max-width: 520px) {
  .rb-device-accessory-grid, .rb-job-person-choices { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rb-repair-item-grid { grid-template-columns: minmax(0,1fr) !important; }
  .rb-repair-item-grid > .rb-field { grid-column: 1 !important; }
  .rb-job-editor .rb-modal-actions { grid-template-columns: 1fr 1fr; }
  .rb-job-editor #rbSavePrintJobBtn { grid-column: 1; }
  .rb-job-editor #rbSaveJobBtn { grid-column: 2; }
  .rb-import-summary { grid-template-columns: 1fr; }
}
.app-refresh.spin { animation: appRefreshSpin .8s linear infinite; }
@keyframes appRefreshSpin { to { transform: rotate(360deg); } }
@media (display-mode: standalone) { .app-refresh { display: flex; } body.rail-open .app-refresh { display: none; } }

/* ================= มือถือ: ทำงานได้ทั้งเอกสาร + กระดานงาน ================= */
@media (max-width: 768px) {
  .app-refresh { display: flex; }
  body.rail-open .app-refresh { display: none; }

  .app-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 12px 10px 54px;
  }
  .app-header > div:first-child { min-width: 0; }
  .app-header h1 { font-size: 17px; line-height: 1.2; }
  .eyebrow { font-size: 9px; letter-spacing: .12em; }
  .header-subtitle { display: none; }
  .header-menu-toggle {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 8px;
    color: #fff;
    background: rgba(255,255,255,.11);
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(1,31,49,.2);
  }
  .header-actions {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 10px;
    background: rgba(1,31,49,.26);
  }
  .header-actions.is-open { display: grid; }
  .header-actions .button {
    width: 100%;
    min-width: 0;
    padding: 9px 7px;
    font-size: 12px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .header-actions #repairBoardToggle { grid-column: 1 / -1; }
  .cloud-status, .cloud-user { grid-column: 1 / -1; min-width: 0; font-size: 11px; align-self: center; overflow-wrap: anywhere; }

  body { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
  .app-shell { padding: 10px; gap: 14px; }
  .editor-panel { border-radius: 14px; }
  .tab-panel { padding: 13px; }

  .task-rail { width: 100%; max-width: 100vw; }

  .tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: hidden; }
  .tab:nth-child(-n+3) { grid-column: span 2; }
  .tab:nth-child(n+4) { grid-column: span 3; }
  .tab { min-width: 0; min-height: 43px; padding: 9px 5px; overflow: hidden; font-size: 12px; line-height: 1.15; text-overflow: clip; white-space: nowrap; }

  .document-workflow { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .document-type { padding: 13px 6px 10px; }

  .form-grid.thirds { grid-template-columns: 1fr 1fr; }

  .section-heading > div { min-width: 0; align-items: flex-start; }
  .section-heading h2 { min-width: 0; line-height: 1.25; }
  .document-options { grid-template-columns: minmax(0,1fr); gap: 9px; padding: 10px; }
  .document-options .visibility-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .thai-date-trigger { min-height: 44px; }
  .thai-date-trigger span { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
  .thai-date-trigger small { display: none; }
  .specific-settings { padding: 10px; }
  .specific-settings .form-grid.thirds { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .specific-settings .form-grid.thirds > .field:nth-child(3) { grid-column: 1 / -1; }
  .document-note-card { padding: 10px; }
  .document-note-card #documentDisplayNote { min-height: 92px; padding: 10px; font-size: 15px; line-height: 1.4; }
  .document-note-card .field-hint, .items-spec-hint { font-size: 12px; line-height: 1.4; }

  .preview-panel { border: 1px solid #dbe6ea; border-radius: 14px; padding: 11px; background: rgba(255,255,255,.55); overflow: hidden; }
  .preview-toolbar { font-size: 12.5px; margin-bottom: 8px; }
  .document-page { box-shadow: 0 8px 22px rgba(15,23,42,.18); }

  .mobile-document-actions {
    position: fixed;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(10px, env(safe-area-inset-left));
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 7px;
    border: 1px solid rgba(164,190,202,.86);
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 30px rgba(1,31,49,.25);
    backdrop-filter: blur(12px);
  }
  .mobile-document-action {
    display: flex;
    min-width: 0;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid #cbdce3;
    border-radius: 11px;
    padding: 7px 6px;
    color: #073a58;
    background: #f6fafb;
    font-size: 13px;
    line-height: 1.1;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overflow: hidden;
  }
  .mobile-document-action span { flex: 0 0 auto; font-size: 18px; font-weight: 900; }
  .mobile-document-action strong { min-width: 0; max-width: 100%; white-space: nowrap; }
  #mobileAddItemBtn { gap: 3px; padding-right: 4px; padding-left: 4px; font-size: 12.5px; }
  #mobileAddItemBtn span { font-size: 16px; }
  .mobile-document-action.print { color: #fff; border-color: #173c54; background: #173c54; }
  .mobile-document-action.primary { color: #fff; border-color: #05648b; background: linear-gradient(135deg,#075978,#08769b); box-shadow: 0 4px 11px rgba(3,51,82,.24); }

  .signature-visibility .sig-vis-grid { grid-template-columns: 1fr; }

  /* อ่านง่ายบนมือถือ: ฟอนต์ไม่เล็กเกินไป + กันซูมตอนโฟกัส (iOS ต้อง >=16px) */
  .field input, .field textarea, .field select,
  .items-editor input, .items-editor textarea,
  #documentImportText, .tax-lookup-row input, #customerSearch { font-size: 16px; }
  .field label { font-size: 13.5px; }
  .import-card textarea { font-size: 15px; }
  .company-switcher { flex-wrap: wrap; row-gap: 6px; }
  .section-heading h2 { font-size: 17px; }
  .editor-summary { font-size: 14px; }

  /* ตารางรายการสินค้า → การ์ดแนวตั้ง (บาลานซ์ อ่านง่าย ไม่ต้องเลื่อนแนวนอน) */
  .items-editor-wrap { overflow: visible; border: 0; border-radius: 0; }
  .items-editor:not(.summary-cost-table) { min-width: 0; display: block; }
  .items-editor:not(.summary-cost-table) thead { display: none; }
  .items-editor:not(.summary-cost-table) tbody { display: block; }
  .items-editor:not(.summary-cost-table) tr { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 10px; position: relative; border: 1px solid #dce5e8; border-radius: 12px; padding: 12px; margin-bottom: 10px; background: #fff; box-shadow: 0 2px 8px rgba(3,51,82,.05); }
  .items-editor:not(.summary-cost-table) td { display: block; padding: 0; border: 0; }
  .items-editor:not(.summary-cost-table) td.col-discount { display: none; }
  .items-editor.discount-enabled:not(.summary-cost-table) td.col-discount { display: block; }
  .items-editor:not(.summary-cost-table) td.col-desc { grid-column: 1 / -1; padding-right: 32px; }
  .items-editor:not(.summary-cost-table) td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 800; color: var(--muted); margin-bottom: 4px; }
  .items-editor:not(.summary-cost-table) input,
  .items-editor:not(.summary-cost-table) textarea { width: 100%; background: #f6f9fb; border: 1px solid #e2e8f0; border-radius: 9px; padding: 10px 11px; }
  .items-editor:not(.summary-cost-table) td.col-action { position: absolute; top: 9px; right: 9px; }
  .items-editor:not(.summary-cost-table) .remove-item { width: 30px; height: 30px; padding: 0; border-radius: 8px; font-size: 18px; line-height: 1; }
  .bill-editor-summary { grid-template-columns: 1fr; }
  .bill-editor-summary > div:not(:first-child) { border-left: 0; border-top: 1px solid #bfd1d8; padding: 8px 0 0; }
  .ps-computer-profile-actions, .ps-computer-vat-options { align-items: stretch; flex-direction: column; }
  .ps-computer-vat-options .check-card { flex-basis: auto; }
  .ps-computer-editor-vat-summary { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .form-grid, .form-grid.thirds { grid-template-columns: 1fr; }
  .app-header h1 { font-size: 16px; }
}

/* Import Preview Enhancements */
.rb-import-changes {
  margin-top: 8px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 8px 12px;
}
.rb-change-row {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  padding: 4px 0;
}
.rb-change-row:first-child { margin-top: 0; }
.rb-change-label {
  color: var(--muted);
  font-weight: 600;
  margin-right: 6px;
  display: inline-block;
  min-width: 90px;
}
.rb-change-old {
  color: #d93025;
  text-decoration: line-through;
  background: #fce8e6;
  padding: 2px 6px;
  border-radius: 4px;
}
.rb-change-arrow {
  color: var(--muted);
  margin: 0 6px;
  font-size: 12px;
}
.rb-change-new {
  color: #1e8e3e;
  font-weight: bold;
  background: #e6f4ea;
  padding: 2px 6px;
  border-radius: 4px;
}
.rb-import-item strong { color: var(--blue); font-size: 16px; font-weight: 900; }
.rb-import-item em { font-size: 13px; margin-top: 4px; }
.rb-import-item { padding: 14px; gap: 14px; align-items: flex-start; }
.rb-import-item input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--blue-bright); cursor: pointer; }


/* Import Overlay Loading UI */

/* Repair intake flow v3: balanced cards, readable repair rows and clear work order */
.rb-repair-workflow-area { margin-top: 14px; }
.rb-workflow-card { min-width: 0; }
.rb-mobile-flow-nav { display: none; }
[data-rb-date-target] small { display: none !important; }
[data-rb-date-target] {
  justify-content: center;
  text-align: center;
}
[data-rb-date-target] span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-editor-card > h4::after {
  flex: 0 0 auto;
  margin-left: auto;
  border: 1px solid #c7dbea;
  border-radius: 999px;
  padding: 3px 9px;
  color: #31627f;
  background: #eef6fb;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.25;
}
.rb-job-card > h4::after { content: "ขั้นตอน 1"; }
.rb-customer-card > h4::after { content: "ขั้นตอน 2"; }
.rb-machine-card > h4::after { content: "ขั้นตอน 3"; }
.rb-items-card > h4::after { content: "ขั้นตอน 4"; }
.rb-cost-card > h4::after { content: "ขั้นตอน 5"; }
.rb-payment-card > h4::after { content: "ขั้นตอน 6"; }
.rb-job-editor .rb-workflow-card > h4::after { content: "ขั้นตอน 7"; }

@media (min-width: 700px) {
  .rb-job-editor .rb-modal-head { min-height: 82px; padding-top: 12px; padding-bottom: 12px; }
  .rb-job-editor .rb-modal-head > div { grid-template-columns: 52px auto; column-gap: 12px; }
  .rb-job-editor .rb-modal-head > div::before { width: 48px; height: 48px; }
  .rb-job-editor .rb-modal-head > div::after { width: 48px; height: 48px; -webkit-mask-size: 27px; mask-size: 27px; }
  .rb-repair-workspace { padding: 16px 22px 18px; background: #f4f8fb; }
  .rb-repair-overview { grid-template-columns: repeat(12,minmax(0,1fr)); gap: 12px; align-items: start; margin-bottom: 12px; }
  .rb-job-card { grid-column: 1 / span 7; grid-row: 1; grid-template-columns: minmax(0,1.35fr) minmax(150px,.75fr) minmax(170px,.9fr); }
  .rb-customer-card { grid-column: 8 / -1; grid-row: 1; grid-template-columns: minmax(0,1.35fr) minmax(145px,.75fr); }
  .rb-machine-card { grid-column: 1 / -1; grid-row: 2; }
  .rb-job-card > h4, .rb-customer-card > h4, .rb-machine-card > h4 { grid-column: 1 / -1; }
  .rb-job-card > .rb-field,
  .rb-customer-card > .rb-field { margin: 10px 14px 13px; }
  .rb-job-card > .rb-field:has(#rbJobNo),
  .rb-job-card > .rb-field:has(#rbReceivedChannel) { grid-column: auto; }
  .rb-job-card #rbJobNo { font-size: 16px; font-weight: 950; font-variant-numeric: tabular-nums; letter-spacing: .035em; }
  .rb-customer-card .rb-field input { font-size: 15px; }
  .rb-machine-card #rbDevicesSection { padding: 0 14px 13px; }
  .rb-machine-card #rbDevicesList { max-height: none; overflow: visible; padding-right: 0; }
  .rb-machine-card .rb-device-row { margin-top: 6px; border: 1px solid #dbe6ed; border-left: 4px solid #1383b3; border-radius: 9px; padding: 11px 12px 12px; background: #fbfdff; }
  .rb-machine-card .rb-device-row:first-child { padding-top: 11px; }
  .rb-machine-card .rb-device-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px 10px; }
  .rb-machine-card .rb-device-grid .rb-field.full { grid-column: auto; }
  .rb-machine-card .rb-device-grid > .rb-field:nth-child(6) { grid-column: span 3; }
  .rb-machine-card .rb-device-grid > .rb-device-accessories,
  .rb-machine-card .rb-device-grid > .rb-device-rework,
  .rb-machine-card .rb-device-grid > .rb-device-rework-reason { grid-column: 1 / -1; }
  .rb-repair-editor-main { grid-template-columns: minmax(0,1fr) 352px; gap: 12px; }
  .rb-repair-editor-left, .rb-repair-editor-side { gap: 12px; }
  .rb-items-card { padding-bottom: 11px; }
  .rb-items-card #rbRepairItemsSection > .rb-section-head { min-height: 48px; }
  .rb-items-card #rbRepairItemsSection > .rb-section-head::before { font-size: 14px; }
  .rb-repair-table-head {
    grid-template-columns: 48px 142px minmax(170px,1fr) 72px 108px 112px 58px;
    gap: 8px;
    min-height: 45px;
    padding: 8px 12px;
    font-size: 12.5px;
    line-height: 1.25;
  }
  .rb-repair-item-row {
    grid-template-columns: 48px 142px minmax(170px,1fr) 72px 108px 112px 58px;
    gap: 8px;
    padding: 10px 12px 11px;
  }
  .rb-repair-item-head strong { font-size: 14px; }
  .rb-repair-device-links summary { min-height: 39px; font-size: 13px; }
  .rb-repair-item-grid .rb-field input,
  .rb-repair-item-grid .rb-field button { min-height: 39px; font-size: 14px; }
  .rb-repair-item-grid .rb-field:nth-child(n+6) { margin-top: 8px; }
  .rb-repair-item-grid .rb-field:nth-child(n+6) span { display: block; margin-bottom: 4px; color: #445e6e; font-size: 12px; line-height: 1.25; }
  .rb-repair-item-grid .rb-field:nth-child(n+6) input,
  .rb-repair-item-grid .rb-field:nth-child(n+6) button { min-height: 37px; font-size: 13px; }
  .rb-repair-totals { padding: 12px 15px 1px; font-size: 13px; }
  .rb-repair-totals span { padding: 7px 11px; }
  .rb-cost-card, .rb-payment-card { padding-bottom: 12px; }
  .rb-repair-workflow-area { margin-top: 12px; }
  .rb-job-editor .rb-workflow-card { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 12px; padding-bottom: 14px; }
  .rb-job-editor .rb-workflow-card > h4,
  .rb-job-editor .rb-workflow-card > .rb-status-field,
  .rb-job-editor .rb-workflow-card > .rb-delivery-person-panel { grid-column: 1 / -1; }
  .rb-job-editor .rb-workflow-card > .rb-field { margin: 11px 16px 0; }
  .rb-job-editor .rb-workflow-card > .rb-status-field { margin-bottom: 2px; }
  .rb-job-editor .rb-workflow-card .rb-assignee-block { min-width: 0; margin: 10px 16px 3px; border: 1px solid #dbe6ed; border-radius: 9px; padding: 11px; background: #f8fbfd; }
  .rb-job-editor .rb-workflow-card .rb-assignee-block > .rb-field { margin: 0; }
  .rb-job-editor .rb-workflow-card .rb-assignee-block .rb-job-person-panel { grid-column: auto; margin: 10px 0 0; padding-top: 9px; }
  .rb-job-editor .rb-workflow-card .rb-job-person-choices { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .rb-job-editor .rb-workflow-card > .rb-delivery-person-panel { margin: 12px 16px 0; }
}

@media (max-width: 699px) {
  .rb-job-editor .rb-modal-head {
    min-height: 76px;
    padding: 12px 58px 10px 16px;
  }
  .rb-job-editor .rb-modal-head h3 { font-size: 21px; line-height: 1.2; }
  .rb-job-editor .rb-modal-head p { margin-top: 3px; font-size: 11px; }
  .rb-job-editor .rb-icon-btn { top: 12px; right: 12px; width: 44px; height: 44px; }
  .rb-repair-workspace { padding: 0 10px 12px; scroll-behavior: smooth; }
  .rb-mobile-flow-nav {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    gap: 7px;
    margin: 0 -10px 10px;
    border-bottom: 1px solid #cbdce6;
    padding: 8px 10px;
    background: rgba(244,248,250,.97);
    box-shadow: 0 5px 14px rgba(3,51,82,.08);
    backdrop-filter: blur(8px);
  }
  .rb-mobile-flow-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
  .rb-mobile-flow-summary span { overflow: hidden; color: #073b68; font-size: 13px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
  .rb-mobile-flow-summary b { flex: 0 0 auto; border-left: 4px solid var(--rb-flow-status,#087093); border-radius: 6px; padding: 3px 7px; color: #17384a; background: #fff; font-size: 11px; }
  .rb-mobile-flow-steps { display: grid; grid-template-columns: repeat(7,minmax(68px,1fr)); gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .rb-mobile-flow-steps::-webkit-scrollbar { display: none; }
  .rb-mobile-flow-steps button { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; border: 1px solid #c5d8e4; border-radius: 8px; padding: 5px 7px; color: #17445f; background: #fff; font-family: inherit; font-size: 11px; font-weight: 900; line-height: 1.1; white-space: nowrap; }
  .rb-mobile-flow-steps button:active { border-color: #087093; background: #e8f7fb; }
  .rb-mobile-flow-steps button span {
    display: grid;
    flex: 0 0 20px;
    place-items: center;
    width: 20px;
    min-width: 20px;
    height: 20px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    padding: 0;
    color: #fff;
    background: #087093;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  #rbRepairJobStep,
  #rbRepairCustomerStep,
  #rbRepairMachineStep,
  #rbRepairItemsStep,
  #rbRepairCostStep,
  #rbRepairPaymentStep,
  #rbRepairWorkflowStep { scroll-margin-top: 94px; }
  .rb-repair-workflow-area { margin-top: 10px; }
  .rb-job-editor .rb-workflow-card { display: grid; grid-template-columns: minmax(0,1fr); padding-bottom: 10px; }
  .rb-job-editor .rb-workflow-card > * { grid-column: 1 !important; min-width: 0; }
  .rb-job-editor .rb-workflow-card > .rb-field,
  .rb-job-editor .rb-workflow-card > .rb-assignee-block,
  .rb-job-editor .rb-workflow-card > .rb-delivery-person-panel { margin: 10px 12px 0; }
  .rb-job-editor .rb-workflow-card .rb-assignee-block { border: 1px solid #dbe6ed; border-radius: 9px; padding: 10px; background: #f8fbfd; }
  .rb-job-editor .rb-workflow-card .rb-assignee-block > .rb-field { margin: 0; }
  .rb-job-editor .rb-workflow-card .rb-assignee-block .rb-job-person-panel { margin: 10px 0 0; }
  .rb-repair-table-head { font-size: 13px; }
  .rb-repair-item-grid .rb-field span { margin-bottom: 4px; font-size: 13px; }
  .rb-repair-item-grid .rb-field input,
  .rb-repair-item-grid .rb-field button,
  .rb-repair-device-links summary { min-height: 42px; font-size: 14px; }
  .rb-repair-item-head strong { font-size: 15px; }
  .rb-editor-card > h4 { min-height: 48px; padding: 10px 12px; font-size: 16px; line-height: 1.25; }
  .rb-editor-card > h4::after { padding: 3px 7px; font-size: 9.5px; }
  .rb-editor-card .rb-field { gap: 5px; }
  .rb-editor-card .rb-field > span { font-size: 13px; line-height: 1.3; }
  .rb-editor-card .rb-field input,
  .rb-editor-card .rb-field select,
  .rb-editor-card .rb-field textarea,
  .rb-editor-card .rb-thai-trigger { min-height: 44px; font-size: 16px; line-height: 1.3; }
  .rb-job-card [data-rb-date-target] { justify-content: flex-start; padding-right: 11px; text-align: left; }
  .rb-job-card [data-rb-date-target] span { width: 100%; font-weight: 900; }
}

/* Keep the desktop editor on a compact 1100 x 868 reading canvas. */
@media (min-width: 700px) {
  .rb-modal:has(#rbJobForm:not([hidden])) { overflow: hidden; padding: 12px; }
  .rb-modal-card.rb-job-editor {
    width: var(--rb-editor-width, 1100px);
    min-width: var(--rb-editor-width, 1100px);
    max-width: var(--rb-editor-width, 1100px);
    height: var(--rb-editor-height, 868px);
    min-height: var(--rb-editor-height, 868px);
    max-height: var(--rb-editor-height, 868px);
    aspect-ratio: 1100 / 868;
    zoom: 1;
  }
  .rb-job-editor.rb-compact-canvas .rb-repair-overview { grid-template-columns: minmax(0,1fr); }
  .rb-job-editor.rb-compact-canvas .rb-job-card,
  .rb-job-editor.rb-compact-canvas .rb-customer-card,
  .rb-job-editor.rb-compact-canvas .rb-machine-card { grid-column: 1 !important; grid-row: auto; }
  .rb-job-editor.rb-compact-canvas .rb-machine-card .rb-device-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rb-job-editor.rb-compact-canvas .rb-machine-card .rb-device-grid > .rb-field:nth-child(6) { grid-column: span 1; }
  .rb-job-editor.rb-compact-canvas .rb-repair-editor-main { grid-template-columns: minmax(0,1fr); }
  .rb-job-editor.rb-compact-canvas .rb-repair-editor-side { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Compact mobile flow: two columns for short fields, full width for text. */
@media (max-width: 699px) {
  .rb-modal-card.rb-job-editor { zoom: 1; }
  .rb-job-card,
  .rb-customer-card { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rb-job-card > h4,
  .rb-customer-card > h4 { grid-column: 1 / -1 !important; }
  .rb-job-card > .rb-field,
  .rb-customer-card > .rb-field { grid-column: auto !important; }
  .rb-job-card > .rb-field:has(#rbJobNo) { grid-column: 1 / -1 !important; }
  .rb-device-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .rb-device-grid > * { grid-column: auto !important; }
  .rb-device-grid > .rb-device-accessories,
  .rb-device-grid > .rb-device-rework,
  .rb-device-grid > .rb-device-rework-reason { grid-column: 1 / -1 !important; }
  .rb-repair-item-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .rb-repair-item-grid > *,
  .rb-repair-item-grid > .rb-field { grid-column: auto !important; }
  .rb-repair-item-grid > .rb-repair-device-links,
  .rb-repair-item-grid > .rb-field.full,
  .rb-repair-item-grid > .rb-field:nth-child(5),
  .rb-repair-item-grid > .rb-repair-item-meta { grid-column: 1 / -1 !important; }
  .rb-job-editor .rb-workflow-card { grid-template-columns: minmax(0,1fr); }
  .rb-job-editor .rb-workflow-card > * { grid-column: 1 !important; }
  .rb-job-editor .rb-workflow-card > h4,
  .rb-job-editor .rb-workflow-card > .rb-status-field,
  .rb-job-editor .rb-workflow-card > .rb-delivery-person-panel { grid-column: 1 / -1 !important; }
  .rb-cost-card,
  .rb-payment-card { padding-bottom: 11px; }
  .rb-cost-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px 0; color: #273440; font-size: 13px; font-weight: 800; }
  .rb-cost-line b { flex: 0 0 auto; color: #14202b; font-size: 14px; }
  .rb-editor-discount { display: grid; grid-template-columns: minmax(0,1fr) 112px 24px; align-items: center; gap: 7px; margin: 11px 13px 0; color: #293842; font-size: 13px; font-weight: 800; }
  .rb-editor-discount input { width: 100%; min-width: 0; min-height: 38px; border: 1px solid #d4dfe6; border-radius: 7px; padding: 6px 9px; text-align: right; font: inherit; }
  .rb-cost-total { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; margin-top: 12px; padding: 11px 13px; color: #fff; background: linear-gradient(100deg,#075083,#003d78); font-size: 15px; font-weight: 950; }
  .rb-cost-total b { min-width: 0; font-size: 24px; white-space: nowrap; }
  .rb-cost-total small { font-size: 12px; }
}

@media (max-width: 359px) {
  .rb-job-card,
  .rb-customer-card,
  .rb-device-grid,
  .rb-repair-item-grid,
  .rb-job-editor .rb-workflow-card { grid-template-columns: minmax(0,1fr) !important; }
  .rb-job-card > *,
  .rb-customer-card > *,
  .rb-device-grid > *,
  .rb-repair-item-grid > *,
  .rb-job-editor .rb-workflow-card > * { grid-column: 1 !important; }
}

/* Keep the repair list inside its own column on the compact desktop canvas. */
.rb-repair-editor-main,
.rb-repair-editor-left,
.rb-repair-editor-side,
.rb-items-card,
.rb-items-card #rbRepairItemsSection,
.rb-items-card .rb-repair-items-list,
.rb-items-card .rb-repair-item-row { min-width: 0; max-width: 100%; }
.rb-items-card { overflow: hidden; }
.rb-items-card #rbRepairItemsSection { overflow: hidden; }
.rb-items-card #rbRepairItemsSection > .rb-section-head {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.rb-items-card #rbAddRepairItemBtn { flex: 0 0 auto; position: static; }
.rb-repair-editor-side { position: relative; z-index: 1; }

@media (min-width: 700px) {
  .rb-job-editor .rb-repair-editor-main { grid-template-columns: minmax(0,1fr) 320px; }
  .rb-job-editor .rb-repair-table-head,
  .rb-job-editor .rb-repair-item-row {
    grid-template-columns: 36px 104px minmax(142px,1fr) 52px 82px 82px 44px;
    gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .rb-job-editor .rb-repair-table-head { font-size: 11.5px; }
  .rb-job-editor .rb-repair-item-row input,
  .rb-job-editor .rb-repair-item-row button { min-width: 0; }
  .rb-job-editor .rb-repair-item-grid .rb-field:nth-child(n+6) span { font-size: 11px; }
}

/* Team management: edit, transfer all references, then safely remove duplicates. */
.rb-modal-card.rb-people-card { width: min(720px, calc(100vw - 28px)); max-height: min(820px, calc(100dvh - 28px)); overflow: auto; }
.rb-people-help { margin: 0; border-left: 4px solid #0b78ac; border-radius: 8px; padding: 9px 11px; color: #35576a; background: #eef8fc; font-size: 12px; font-weight: 800; line-height: 1.45; }
.rb-people-list button.active { border-color: #087093; color: #075978; background: #e3f5fa; box-shadow: inset 0 0 0 1px #087093; }
.rb-person-transfer { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 10px; border: 1px solid #e5c56f; border-radius: 12px; padding: 12px; background: #fffaf0; }
.rb-person-transfer[hidden] { display: none !important; }
.rb-person-transfer > div,
.rb-person-transfer > p { grid-column: 1 / -1; }
.rb-person-transfer > div { display: flex; justify-content: space-between; gap: 10px; color: #754b00; }
.rb-person-transfer > div b { font-size: 14px; }
.rb-person-transfer > div small { font-size: 11px; font-weight: 850; text-align: right; }
.rb-person-transfer .rb-field { margin: 0 !important; }
.rb-person-transfer > button { min-height: 38px; white-space: nowrap; }
.rb-person-transfer > p { margin: 0; color: #745d31; font-size: 11px; font-weight: 800; line-height: 1.45; }
.rb-people-card.saving::after { content: "กำลังโอนและปรับปรุงประวัติ..."; position: sticky; bottom: 72px; display: block; margin: 10px 20px; border-radius: 9px; padding: 10px; color: #fff; background: #075978; text-align: center; font-weight: 900; }

@media (max-width: 699px) {
  .rb-person-transfer { grid-template-columns: minmax(0,1fr); }
  .rb-person-transfer > * { grid-column: 1 !important; }
  .rb-person-transfer > div { display: grid; }
  .rb-person-transfer > div small { text-align: left; }
  .rb-modal-card.rb-people-card { width: 100%; max-height: 100dvh; }
}

/* ================= เอกสารภายใน: ใบเบิกสินค้าใช้ในร้าน ================= */
body:has(#requisitionTab.active) .app-shell { grid-template-columns: minmax(690px,860px) minmax(680px,1fr); }
body:has(#requisitionTab.active) .app-shell.editor-collapsed { grid-template-columns:0 minmax(0,1fr); gap:0; max-width:none; }
.requisition-workspace { color: #173a50; }
.requisition-title-row { margin-bottom: 5px; }
.requisition-lead { margin: 0 0 13px; color: #587180; font-size: 13px; line-height: 1.5; }
.requisition-card { margin-bottom: 12px; border: 1px solid #cfdee6; border-radius: 13px; padding: 13px; background: #fff; box-shadow: 0 3px 10px rgba(3,51,82,.05); }
.requisition-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -13px -13px 12px; border-bottom: 1px solid #dbe6eb; padding: 10px 13px; background: #f5f9fb; border-radius: 13px 13px 0 0; }
.requisition-card-head strong { color: #075978; font-size: 15px; }.requisition-card-head > span { color: #69808c; font-size: 11px; }
.requisition-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.requisition-grid .full { grid-column: 1/-1; }
.requisition-meta-grid { grid-template-columns: minmax(270px,1.3fr) minmax(160px,.8fr) minmax(135px,.65fr) minmax(170px,.8fr); }
.requisition-card .field label,.requisition-filter-grid .field label { font-size: 12.5px; }
.requisition-card input,.requisition-card select,.requisition-filter-grid input,.requisition-filter-grid select { min-height: 42px; font-size: 14px; }
.requisition-card .number-generator { grid-template-columns: minmax(135px,1fr) auto; }.requisition-card .number-button { white-space: nowrap; }
.requisition-items-head { display: grid; grid-template-columns: 92px minmax(200px,1fr) 72px 76px 106px 90px 32px; gap: 7px; border-bottom: 1px solid #dfe8ed; padding: 0 7px 7px 35px; color: #546d7a; font-size: 11px; font-weight: 900; text-align: center; }
.requisition-item { position: relative; display: grid; grid-template-columns: 92px minmax(200px,1fr) 72px 76px 106px 90px 32px; gap: 7px; align-items: end; border-bottom: 1px solid #e1e9ed; padding: 9px 7px 9px 35px; }
.requisition-item:last-child { border-bottom: 0; }.req-item-index { position: absolute; left: 4px; top: 31px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: #075978; font-size: 11px; font-weight: 900; }
.requisition-item label { min-width: 0; }.requisition-item label > span { display: none; margin-bottom: 4px; color: #4f6875; font-size: 11px; font-weight: 850; }
.requisition-item input { width: 100%; min-width: 0; min-height: 39px; border: 1px solid #cbdce5; border-radius: 8px; padding: 7px 8px; font-size: 13px; }
.requisition-item output { display: grid; place-items: center end; min-height: 39px; border-radius: 8px; padding: 7px; color: #075978; background: #edf7fa; font-size: 13px; font-weight: 900; }
.req-remove-item { align-self: center; width: 30px; height: 30px; border: 0; border-radius: 8px; color: #b91c1c; background: #fff0f1; font-size: 18px; font-weight: 900; }.req-item-note { grid-column: 2/7; }.req-item-note span { display: block !important; }
.requisition-totals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; border-top: 1px solid #dbe6eb; padding-top: 10px; }.requisition-totals span { border: 1px solid #d2e1e8; border-radius: 999px; padding: 6px 11px; color: #476373; background: #f7fafb; font-size: 12px; }.requisition-totals b { color: #075978; }
.requisition-actions { display: grid; grid-template-columns: .75fr 1fr 1.25fr 1.1fr; gap: 8px; margin: 14px 0 22px; }.requisition-archive { border-top: 4px solid #075978; padding-top: 15px; }
.requisition-range-chips { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 10px; }.requisition-range-chips button { min-height: 38px; border: 1px solid #c9dce5; border-radius: 9px; color: #315568; background: #fff; font-weight: 850; }.requisition-range-chips button.active { border-color: #075978; color: #fff; background: #075978; }
.requisition-filter-grid { display: grid; grid-template-columns: 1fr 150px 165px 165px; gap: 9px; align-items: end; }.requisition-filter-grid .full { min-width: 230px; }
.requisition-report-actions { display: flex; justify-content: flex-end; gap: 7px; margin: 10px 0; }.requisition-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.requisition-kpis > div { border: 1px solid #cfe0e7; border-radius: 11px; padding: 10px; background: linear-gradient(145deg,#f8fbfc,#eaf4f7); }.requisition-kpis span,.requisition-kpis b { display: block; }.requisition-kpis span { color: #647b87; font-size: 11px; }.requisition-kpis b { margin-top: 2px; color: #075978; font-size: 20px; }
.requisition-aggregate { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin: 9px 0; }.requisition-aggregate > div { border: 1px solid #d8e4e9; border-radius: 10px; padding: 9px; background: #fff; }.requisition-aggregate b,.requisition-aggregate span { display: block; }.requisition-aggregate > div > b { margin-bottom: 5px; color: #173f56; font-size: 12px; }.requisition-aggregate span { display: flex; justify-content: space-between; gap: 8px; border-top: 1px dashed #dce5e9; padding: 4px 0; color: #5b707b; font-size: 11px; }
.requisition-history-list { display: grid; gap: 8px; }.req-history-card { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; border: 1px solid #d6e2e7; border-left: 4px solid #08769b; border-radius: 11px; padding: 11px; background: #fff; }.req-history-card h3,.req-history-card p { margin: 0; }.req-history-card h3 { color: #123e57; font-size: 15px; }.req-history-card > div:first-child p { color: #647b86; font-size: 11px; }.req-history-purpose,.req-history-card > p { grid-column: 1/-1; color: #405e6e; font-size: 12px; line-height: 1.45; }.req-history-purpose { font-weight: 850; }
.req-status { align-self: start; border-radius: 999px; padding: 4px 9px; font-size: 10px; font-weight: 900; }.req-status-draft { color: #8a5b00; background: #fff3cd; }.req-status-issued { color: #116333; background: #dcf7e7; }.req-status-cancelled { color: #9b1c1c; background: #ffe5e5; }
.req-history-summary { display: flex; grid-column: 1/-1; flex-wrap: wrap; gap: 6px; }.req-history-summary b { border-radius: 999px; padding: 4px 8px; color: #31596d; background: #edf5f8; font-size: 10px; }.req-history-actions { display: flex; grid-column: 1/-1; flex-wrap: wrap; gap: 6px; }.req-history-actions button { border: 1px solid #bfd4df; border-radius: 7px; padding: 5px 9px; color: #075978; background: #fff; font-size: 11px; font-weight: 850; }.req-history-actions button.danger { color: #b4232b; border-color: #f2bfc3; }.req-empty { border: 1px dashed #bdd2dc; border-radius: 10px; padding: 24px; color: #67808c; text-align: center; }.requisition-mobile-actions[hidden] { display: none !important; }

/* A4 ใบเบิก: ขนาดคงที่และใช้ฟอนต์ฝังในแอป */
.requisition-document { position: relative; box-sizing: border-box; width: 210mm; height: 297mm; min-width: 210mm; min-height: 297mm; padding: 13mm 13mm 10mm; color: #142d3b; background: #fff; font-family: "Sarabun Embedded","Sarabun",Tahoma,sans-serif; font-size: 10pt; line-height: 1.28; }
.req-print-header { border-bottom: .45mm solid #173f56; padding-bottom: 2.4mm; text-align: center; }.req-print-header h2 { margin: 0; color: #103f59; font-size: 18pt; line-height: 1.1; }.req-print-header p { margin: .6mm 0 0; font-size: 9.5pt; line-height: 1.3; }.req-print-header .req-print-tax { color: #173f56; font-weight: 750; }
.req-print-title { display: grid; place-items: center; margin-top: 2.8mm; padding: 2.4mm; color: #fff; background: #173f56; }.req-print-title strong { font-size: 17pt; line-height: 1; }.req-print-title span { margin-top: 1mm; font-size: 9pt; font-weight: 700; letter-spacing: .4px; }
.req-print-meta { display: grid; grid-template-columns: 1.55fr 1fr; border: .3mm solid #173f56; border-top: 0; min-height: 32mm; }.req-print-meta > div { padding: 2.2mm 3mm; }.req-print-meta > div + div { border-left: .3mm solid #173f56; }.req-print-meta p { display: grid; grid-template-columns: max-content 1fr; gap: 2mm; margin: 0 0 1.4mm; min-width: 0; font-size: 10pt; }.req-print-meta span { min-width: 0; overflow-wrap: anywhere; }
.req-print-items { width: 100%; height: 157mm; border-collapse: collapse; table-layout: fixed; }.req-print-items th,.req-print-items td { border: .26mm solid #173f56; padding: 1.3mm 1.5mm; vertical-align: top; }.req-print-items th { height: 13mm; color: #fff; background: #173f56; font-size: 9.5pt; line-height: 1.12; text-align: center; vertical-align: middle; }.req-print-items th small { font-size: 7pt; font-weight: 600; }
.req-print-items th:nth-child(1){width:12mm}.req-print-items th:nth-child(2){width:25mm}.req-print-items th:nth-child(3){width:70mm}.req-print-items th:nth-child(4){width:18mm}.req-print-items th:nth-child(5){width:18mm}.req-print-items th:nth-child(6){width:35mm}
.req-print-items tbody td { height: 9.8mm; font-size: 9.5pt; overflow-wrap: anywhere; }.req-print-items tbody td:nth-child(1),.req-print-items tbody td:nth-child(4),.req-print-items tbody td:nth-child(5){text-align:center}.req-print-items .req-blank-row td{height:9.8mm}.req-print-items tfoot td { height: 8mm; color: #123f58; background: #edf4f7; font-size: 10pt; font-weight: 850; text-align: center; vertical-align: middle; }
.req-print-note { display: grid; grid-template-columns: max-content 1fr; gap: 2mm; min-height: 13mm; border: .26mm solid #173f56; border-top: 0; padding: 2mm 2.5mm; font-size: 9.5pt; }.req-print-signatures { display: grid; grid-template-columns: repeat(3,1fr); min-height: 31mm; border: .26mm solid #173f56; border-top: 0; }.req-print-signatures > div { display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; gap: 1.6mm; padding: 2mm; font-size: 9pt; }.req-print-signatures > div + div { border-left: .26mm solid #173f56; }.req-print-signatures i { display: inline-block; min-width: 25mm; font-style: normal; text-align: center; }.req-print-signatures small { font-size: 7.5pt; }
.req-print-footer { position: absolute; right: 13mm; bottom: 7mm; left: 13mm; display: flex; justify-content: space-between; border-top: .35mm solid #173f56; padding-top: 1.5mm; color: #173f56; font-size: 8pt; font-weight: 800; }
.req-report-period { display: grid; grid-template-columns: max-content 1fr auto; gap: 2mm; border: .3mm solid #173f56; border-top: 0; padding: 2.5mm; }.req-report-period small { color: #61747e; }.req-report-kpis { display: grid; grid-template-columns: repeat(3,1fr); margin: 3mm 0; border: .3mm solid #173f56; }.req-report-kpis div { display: grid; justify-items: center; padding: 3mm; }.req-report-kpis div + div { border-left: .3mm solid #173f56; }.req-report-kpis span { font-size: 9pt; }.req-report-kpis b { color: #075978; font-size: 16pt; }
.req-report-table { width: 100%; border-collapse: collapse; table-layout: fixed; }.req-report-table th,.req-report-table td { border: .25mm solid #173f56; padding: 1.4mm; font-size: 8.5pt; overflow-wrap: anywhere; }.req-report-table th { color: #fff; background: #173f56; font-size: 9pt; }.req-report-table th:nth-child(1){width:9mm}.req-report-table th:nth-child(2){width:31mm}.req-report-table th:nth-child(3){width:28mm}.req-report-table th:nth-child(4){width:43mm}.req-report-table th:nth-child(6){width:17mm}.req-report-table td small { display: block; color: #637783; font-size: 7.5pt; }.req-report-table .is-cancelled { color: #8d5555; text-decoration: line-through; background: #fff1f1; }
.req-report-ranking { display: grid; grid-template-columns: repeat(2,1fr); gap: 4mm; margin-top: 4mm; }.req-report-ranking > div { border: .25mm solid #173f56; padding: 2.5mm; }.req-report-ranking h3 { margin: 0 0 1mm; font-size: 10pt; }.req-report-ranking p { display: flex; justify-content: space-between; gap: 2mm; margin: 0; border-top: .15mm solid #d5e0e5; padding: 1mm 0; font-size: 8.5pt; }

@media (max-width:1450px) {
  body:has(#requisitionTab.active) .app-shell { grid-template-columns:minmax(600px,720px) minmax(610px,1fr); }
  body:has(#requisitionTab.active) .app-shell.editor-collapsed { grid-template-columns:0 minmax(0,1fr); gap:0; }
  .requisition-meta-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.requisition-items-head { display:none; }
  .requisition-item { grid-template-columns:1fr 1.7fr 78px 78px 110px 85px 32px; padding-top:12px; }.requisition-item label > span { display:block; }
}
@media (max-width:900px) {
  body:has(#requisitionTab.active) .app-shell { grid-template-columns:1fr; }
  body:has(#requisitionTab.active) .app-shell.editor-collapsed { grid-template-columns:0 minmax(0,1fr); gap:0; }
  .requisition-grid,.requisition-meta-grid { grid-template-columns:1fr 1fr; }
  .requisition-item { grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px 8px 12px 42px; }.requisition-item .req-description,.req-item-note { grid-column:1/-1; }.requisition-item output { align-self:end; }.req-remove-item { position:absolute; top:9px; right:7px; }.req-item-index { left:7px; top:13px; }
  .requisition-filter-grid { grid-template-columns:1fr 1fr; }.requisition-filter-grid .full { grid-column:1/-1; }
}
@media (max-width:680px) {
  .tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }.tabs .tab,.tab:nth-child(-n+3),.tab:nth-child(n+4) { grid-column:auto; min-height:46px; white-space:normal; }
  .requisition-workspace { padding:12px!important; }.requisition-title-row h2 { font-size:18px; }.requisition-lead { font-size:12px; }.requisition-card { padding:11px; }.requisition-card-head { align-items:flex-start; margin:-11px -11px 11px; padding:10px 11px; }.requisition-card-head > span { text-align:right; }
  .requisition-grid,.requisition-meta-grid { grid-template-columns:1fr; }.requisition-card .number-generator { grid-template-columns:minmax(0,1fr); }.requisition-card .number-button { width:100%; }
  .requisition-item { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.requisition-item input { min-height:44px; font-size:16px; }
  .requisition-actions,.requisition-range-chips { grid-template-columns:1fr 1fr; }.requisition-filter-grid { grid-template-columns:1fr; }.requisition-filter-grid .full { grid-column:auto; }
  .requisition-kpis { grid-template-columns:1fr; }.requisition-kpis > div { display:flex; align-items:center; justify-content:space-between; }.requisition-kpis b { font-size:18px; }.requisition-aggregate { grid-template-columns:1fr; }.requisition-mobile-actions { display:grid; }
}

/* Repair job recycle bin */
.rb-trash-card { width:min(720px,calc(100vw - 32px)); }
.rb-trash-intro { margin:16px 18px 8px; padding:12px 14px; border:1px solid #cfe0e7; border-radius:12px; color:#27475a; background:#f3f8fa; font-weight:700; }
.rb-trash-list { display:grid; gap:10px; max-height:min(54vh,520px); padding:10px 18px 18px; overflow:auto; }
.rb-trash-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; padding:13px 14px; border:1px solid #d7e3e8; border-radius:12px; background:#fff; }
.rb-trash-item > div { display:grid; gap:3px; min-width:0; }
.rb-trash-item strong { color:#073b58; font-size:1rem; }
.rb-trash-item span { font-weight:800; overflow-wrap:anywhere; }
.rb-trash-item small { color:#637b88; }
.rb-empty-state { display:grid; gap:5px; place-items:center; min-height:150px; padding:24px; border:1px dashed #bdcfd7; border-radius:12px; color:#506c7b; text-align:center; }
@media (max-width:640px) {
  .rb-trash-card { width:calc(100vw - 18px); }
  .rb-trash-intro { margin:12px 12px 6px; font-size:.9rem; }
  .rb-trash-list { padding:8px 12px 14px; }
  .rb-trash-item { grid-template-columns:1fr; }
  .rb-trash-item button { width:100%; min-height:44px; }
}
@media print { .requisition-document[hidden] { display:none!important; }.requisition-document:not([hidden]) { display:block!important; } }

/* ================= ศูนย์เอกสารงานร้าน PS Computer ================= */
.internal-document-hub { position: sticky; z-index: 8; top: 0; display: grid; grid-template-columns: repeat(5,minmax(128px,1fr)); gap: 7px; margin: -20px -20px 16px; border-bottom: 1px solid #c9dce5; padding: 12px 14px; background: rgba(246,250,252,.97); backdrop-filter: blur(10px); }
.internal-document-hub button { display: grid; grid-template-columns: 26px 1fr; align-items: center; min-width: 0; min-height: 50px; border: 1px solid #c8dbe4; border-radius: 10px; padding: 7px 9px; color: #2d5366; background: #fff; font-size: 11px; font-weight: 850; text-align: left; }
.internal-document-hub button > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; color: #075978; background: #e7f4f8; font-size: 14px; }
.internal-document-hub button b { min-width: 0; line-height: 1.25; }
.internal-document-hub button.active { border-color: #075978; color: #fff; background: #075978; box-shadow: 0 6px 14px rgba(7,89,120,.18); }
.internal-document-hub button.active > span { color: #075978; background: #fff; }
.operations-title-row { margin-top: 4px; }.operations-title-row h2 { font-size: 20px; }
.operations-title-tools { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.operations-title-tools .ops-blank-template-button { min-width:210px; min-height:40px; border-color:#075978; color:#fff; background:#075978; box-shadow:0 5px 12px rgba(7,89,120,.16); font-weight:850; }
.operations-title-tools .ops-half-print-button { min-width:145px; min-height:40px; border-color:#08769b; color:#075978; background:#eef9fc; font-weight:900; }
.operations-items-editor { display: grid; gap: 9px; }
.operations-item { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; border: 1px solid #d6e3e9; border-left: 4px solid #08769b; border-radius: 11px; padding: 12px 42px 12px 44px; background: #fbfdfe; }
.operations-item label { min-width: 0; }.operations-item label.wide { grid-column: span 2; }.operations-item label > span { display: block; min-height: 17px; margin-bottom: 4px; color: #4b6674; font-size: 11px; font-weight: 850; }
.operations-item input { width: 100%; min-width: 0; min-height: 40px; border: 1px solid #cbdce5; border-radius: 8px; padding: 7px 8px; color: #15384c; background: #fff; font-size: 13px; }
.operations-item output { display: grid; align-self: end; min-height: 40px; place-items: center end; border-radius: 8px; padding: 7px 10px; color: #075978; background: #eaf5f8; font-size: 14px; font-weight: 900; }
.ops-item-index { position: absolute; top: 16px; left: 9px; display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #fff; background: #075978; font-size: 11px; font-weight: 900; }
.ops-remove-item { position: absolute; top: 12px; right: 9px; display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 8px; color: #b4232b; background: #fff0f1; font-size: 20px; line-height: 1; }
.ops-checkbox { display: flex!important; align-items: center; gap: 10px; min-height: 48px; border: 1px solid #c7dbe5; border-left: 4px solid #08769b; border-radius: 10px; padding: 10px 12px; color: #194a65; background: #f2f9fb; font-weight: 850; }
.ops-checkbox input { flex: 0 0 22px; width: 22px!important; height: 22px; min-height: 22px!important; accent-color: #08769b; }
.ops-detail-subheading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; border-left: 4px solid #08769b; border-radius: 8px; padding: 9px 11px; color: #17465f; background: #edf7fa; }
.ops-detail-subheading b { font-size: 14px; }.ops-detail-subheading span { color: #55717e; font-size: 11px; text-align: right; }
.ops-deposit-field { border-radius: 9px; padding: 8px; background: #f7fbfc; }
.ops-spec-deposit-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 2px; }
.ops-spec-deposit-summary > div { display: grid; gap: 3px; border: 1px solid #c8dce5; border-radius: 10px; padding: 10px 12px; color: #31576a; background: #f6fafb; }
.ops-spec-deposit-summary span { font-size: 11px; font-weight: 800; }.ops-spec-deposit-summary b { color: #075978; font-size: 18px; line-height: 1.1; text-align: right; }
.ops-spec-deposit-summary .balance { border-color: #08769b; color: #fff; background: #08769b; }.ops-spec-deposit-summary .balance b { color: #fff; }
.operations-filter-grid { display: grid; grid-template-columns: minmax(260px,1.5fr) minmax(155px,.75fr) minmax(145px,.7fr) 155px 155px; gap: 9px; align-items: end; }
.operations-filter-grid .field { min-width: 0; }.operations-filter-grid input,.operations-filter-grid select { width: 100%; min-height: 42px; font-size: 13px; }
.operations-type-summary { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.operations-type-summary > span { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 150px; border: 1px solid #d2e1e8; border-radius: 9px; padding: 8px 10px; color: #36586a; background: #f7fafb; font-size: 11px; }
.operations-type-summary strong { color: #075978; font-size: 14px; }.ops-type-badge { display: inline-block; margin-bottom: 3px; border-radius: 999px; padding: 3px 7px; color: #075978!important; background: #e6f4f8; font-size: 9px!important; font-weight: 900; }
.ops-history-card { border-left-color: #17465f; }
.ops-history-updated { display:block; margin-top:3px; color:#6a7f89; font-size:10px; font-weight:700; }
.ops-draft-shelf { margin:14px 0 18px; border:1px solid #dfbc73; border-left:5px solid #d19016; border-radius:14px; padding:13px; background:linear-gradient(145deg,#fffdf6,#fff7df); box-shadow:0 8px 20px rgba(87,58,0,.08); }
.ops-draft-shelf[hidden] { display:none!important; }
.ops-draft-shelf-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }
.ops-draft-shelf-head > div { display:grid; gap:2px; }.ops-draft-shelf-head strong { color:#553707; font-size:16px; }.ops-draft-shelf-head span { color:#765d31; font-size:11px; font-weight:750; }
.ops-draft-shelf-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:8px; }
.ops-draft-card { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; min-width:0; border:1px solid #ead39f; border-radius:10px; padding:10px 11px; color:#173f56; background:#fff; text-align:left; cursor:pointer; }
.ops-draft-card:hover { border-color:#c9870d; box-shadow:0 5px 12px rgba(126,80,0,.1); }.ops-draft-card > span { display:grid; min-width:0; gap:2px; }.ops-draft-card b { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.ops-draft-card strong { color:#915d00; font-size:11px; text-align:right; }.ops-draft-card small { overflow:hidden; color:#657984; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.ops-draft-card i { color:#9a6500; font-size:11px; font-style:normal; font-weight:850; white-space:nowrap; }
.req-history-summary.spec-payment { flex-wrap: wrap; gap: 5px; }
.req-history-summary.spec-payment > span { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #c9dde5; border-radius: 999px; padding: 4px 7px; color: #476574; background: #f6fafb; font-size: 10px; }
.req-history-summary.spec-payment > span b { color: #075978; }.req-history-summary.spec-payment > span.balance { border-color: #e6b671; color: #784800; background: #fff7e5; }.req-history-summary.spec-payment > span.balance b { color: #a34b00; }

/* Fixed A4 form shared by all operational documents. */
.ops-document-page { box-sizing: border-box; width: 210mm; min-width: 210mm; max-width: 210mm; height: 297mm; min-height: 297mm; max-height: 297mm; padding: 9mm 11mm 7mm; color: #142f3f; background: #fff; font-family: "Sarabun Embedded","Sarabun",Tahoma,sans-serif; font-size: 9.5pt; line-height: 1.22; }
.ops-print-header { display: flex; height: 28mm; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border-bottom: .45mm solid #173f56; padding: 1mm 2mm 1.5mm; text-align: center; }
.ops-print-header h2 { margin: 0 0 .5mm; color: #103f59; font-size: 18pt; line-height: 1; }.ops-print-header p { max-width: 100%; margin: .25mm 0; font-size: 9.2pt; line-height: 1.15; }.ops-print-header .ops-print-tax { color: #173f56; font-weight: 750; }
.ops-print-title { display: grid; height: 13mm; place-items: center; align-content: center; color: #fff; background: #173f56; }.ops-print-title strong { font-size: 16pt; line-height: 1; }.ops-print-title span { margin-top: .8mm; font: 700 7.5pt/1 Arial,sans-serif; letter-spacing: .3px; }
.ops-print-meta { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(58mm,1fr); height: 38mm; border: .28mm solid #173f56; border-top: 0; overflow: hidden; }
.ops-print-meta > div { min-width: 0; padding: 2mm 2.4mm; overflow: hidden; }.ops-print-meta > div + div { border-left: .28mm solid #173f56; }
.ops-print-meta p { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 1.5mm; margin: 0 0 .8mm; min-width: 0; font-size: 8.5pt; line-height: 1.15; }.ops-print-meta p.address { align-items: start; }.ops-print-meta p span { min-width: 0; overflow: hidden; overflow-wrap: anywhere; }.ops-print-meta b { color: #173f56; }
.ops-shipping-address { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(54mm,1fr); height: 60mm; border: .28mm solid #173f56; border-top: 0; overflow: hidden; }
.ops-shipping-address > div { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 5mm; }.ops-shipping-address aside { min-width: 0; border-left: .28mm solid #173f56; padding: 4mm; background: #f3f7f9; }
.ops-shipping-address small { color: #527181; font: 700 9pt/1 Arial,sans-serif; }.ops-shipping-address strong { margin: 2mm 0; color: #103f59; font-size: 21pt; line-height: 1.08; overflow-wrap: anywhere; }.ops-shipping-address > div p { margin: 0 0 2mm; font-size: 15pt; font-weight: 600; line-height: 1.2; white-space: pre-line; overflow-wrap: anywhere; }.ops-shipping-address > div b { font-size: 14pt; }.ops-shipping-address aside p { margin: 0 0 2mm; font-size: 9pt; line-height: 1.25; overflow-wrap: anywhere; }
.ops-print-table { width: 100%; height: 128mm; border-collapse: collapse; table-layout: fixed; }
.ops-document-page.shipping .ops-print-table { height: 68mm; }
.ops-print-table th,.ops-print-table td { border: .26mm solid #173f56; padding: 1mm; overflow: hidden; overflow-wrap: anywhere; vertical-align: top; }
.ops-print-table thead th { height: 12mm; color: #fff; background: #173f56; font-size: 8.4pt; line-height: 1.08; text-align: center; vertical-align: middle; }.ops-print-table thead small { display: block; margin-top: .5mm; color: #d9e7ed; font: 600 6pt/1 Arial,sans-serif; }
.ops-print-table tbody td { height: 10.5mm; font-size: 8.3pt; line-height: 1.18; }.ops-print-table tbody td:first-child { text-align: center; }.ops-print-table tbody td small { display: block; margin-top: .5mm; color: #536d7b; font-size: 7pt; }
.ops-print-table tfoot th,.ops-print-table tfoot td { height: 7mm; color: #173f56; background: #edf4f7; font-size: 9pt; font-weight: 800; text-align: right; vertical-align: middle; }.ops-print-table tfoot tr.grand th,.ops-print-table tfoot tr.grand td { color: #fff; background: #173f56; }.ops-print-table tfoot td { text-align: right; white-space: nowrap; }
.ops-print-table tfoot th small { font-size: 6.5pt; font-weight: 600; }
.ops-print-software { display: grid; box-sizing: border-box; min-height: 15mm; grid-template-columns: 57mm minmax(0,1fr); align-items: stretch; overflow: hidden; border: .26mm solid #173f56; border-top: 0; }
.ops-print-software b { display: grid; place-items: center start; padding: 1.5mm 2.5mm; color: #fff; background: #08769b; font-size: 8.5pt; line-height: 1.2; }
.ops-print-software span { min-width: 0; padding: 1.7mm 2.5mm; font-size: 8.5pt; font-weight: 750; line-height: 1.25; white-space: pre-line; overflow-wrap: anywhere; }
.ops-print-note { display: block; height: 18mm; overflow: hidden; border: .26mm solid #173f56; border-top: 0; padding: 1.8mm 2.5mm; font-size: 7.8pt; line-height: 1.25; }.ops-print-note span { display: block; margin-top: .6mm; overflow: hidden; overflow-wrap: normal; word-break: normal; white-space: pre-line; }.ops-print-note b { display: block; color: #173f56; font-size: 8.2pt; line-height: 1; white-space: nowrap; }
.ops-print-signatures { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); height: 32mm; border: .26mm solid #173f56; border-top: 0; overflow: hidden; }
.ops-print-signatures > div { position: relative; display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; gap: 1mm; min-width: 0; padding: 2mm 1.5mm; font-size: 8.5pt; text-align: center; }.ops-print-signatures > div + div { border-left: .26mm solid #173f56; }.ops-print-signatures b { color: #173f56; font-size: 9pt; }.ops-print-signatures span { align-self: end; white-space: nowrap; }.ops-print-signatures em { width: 100%; min-height: 4mm; overflow: hidden; font-style: normal; white-space: nowrap; }.ops-print-signatures small { font-size: 7pt; }.ops-print-signatures img { position: absolute; top: 48%; left: 50%; max-width: 38mm; max-height: 18mm; transform: translate(-50%,-50%); object-fit: contain; }
.ops-report-page { padding: 12mm; }.ops-report-period { display: flex; align-items: center; justify-content: space-between; gap: 4mm; border: .28mm solid #173f56; border-top: 0; padding: 2.5mm; font-size: 9pt; }.ops-report-period span { color: #607681; font-size: 7.5pt; }

/* Computer specification: compact fixed rows and a prominent software section. */
.ops-document-page.computer-spec .ops-print-header { height: 24mm; }
.ops-document-page.computer-spec .ops-print-meta { height: 31mm; }
.ops-document-page.computer-spec .ops-print-meta p { margin-bottom: .45mm; font-size: 7.8pt; }
.ops-document-page.computer-spec .ops-print-table { height: 126mm; }
.ops-document-page.computer-spec .ops-print-table thead th { height: 9mm; font-size: 8pt; }
.ops-document-page.computer-spec .ops-print-table thead small { font-size: 5.4pt; }
.ops-document-page.computer-spec .ops-print-table tbody td { height: 5.3mm; padding: .45mm .8mm; font-size: 7.5pt; line-height: 1.05; vertical-align: middle; }
.ops-document-page.computer-spec .ops-print-table tbody td:nth-child(2) { color: #103f59; font-size: 7.2pt; font-weight: 850; }
.ops-document-page.computer-spec .ops-print-table tbody td small { display: inline; margin: 0; font-size: 6.2pt; }
.ops-document-page.computer-spec .ops-print-table tfoot th,.ops-document-page.computer-spec .ops-print-table tfoot td { height: 6mm; font-size: 8.2pt; }
.ops-document-page.computer-spec .ops-print-note { height: 14mm; padding-top: 1.3mm; font-size: 7pt; }
.ops-document-page.computer-spec .ops-print-signatures { height: 26mm; }
.ops-report-kpis { display: grid; grid-template-columns: repeat(3,1fr); margin: 3mm 0; border: .28mm solid #173f56; }.ops-report-kpis > div { display: grid; justify-items: center; padding: 3mm; }.ops-report-kpis > div + div { border-left: .28mm solid #173f56; }.ops-report-kpis span { font-size: 8pt; }.ops-report-kpis b { color: #075978; font-size: 15pt; }
.ops-report-table { width: 100%; border-collapse: collapse; table-layout: fixed; }.ops-report-table th,.ops-report-table td { border: .24mm solid #173f56; padding: 1.2mm; overflow: hidden; font-size: 7.5pt; line-height: 1.15; overflow-wrap: anywhere; }.ops-report-table th { height: 10mm; color: #fff; background: #173f56; font-size: 8pt; }.ops-report-table th:nth-child(1){width:8mm}.ops-report-table th:nth-child(2){width:39mm}.ops-report-table th:nth-child(3){width:20mm}.ops-report-table th:nth-child(4){width:30mm}.ops-report-table th:nth-child(6){width:24mm}.ops-report-table th:nth-child(7){width:22mm}.ops-report-table td small { display:block; color:#617682; font-size:6.5pt; }.ops-report-table tr.cancelled { color:#934242; text-decoration:line-through; background:#fff2f2; }.ops-report-page .operations-type-summary { margin-top:4mm; }.ops-report-page .operations-type-summary > span { min-width:42mm; padding:2mm; font-size:7.5pt; }

.ops-blank-template-button { min-width: 0; line-height: 1.25; white-space: normal; }

/* Blank second-hand purchase receipt: two current-style handwritten copies on one portrait A4 sheet. */
.document-page.ops-handwrite-sheet { padding: 0; }
.ops-handwrite-sheet { position: relative; box-sizing: border-box; width: 210mm; min-width: 210mm; max-width: 210mm; height: 297mm; min-height: 297mm; max-height: 297mm; overflow: hidden; color: #000; background: #fff; font-family: Tahoma,"Noto Sans Thai","Sarabun Embedded","Sarabun",sans-serif; font-size: 8.4pt; font-weight: 700; line-height: 1.08; }
.ops-handwrite-half { box-sizing: border-box; height: 148.5mm; padding: 5mm 8.5mm; overflow: hidden; }
.ops-handwrite-half + .ops-handwrite-half { padding-top: 5.5mm; }
.ops-handwrite-header { display: grid; box-sizing: border-box; height: 14mm; grid-template-columns: 24mm minmax(0,1fr) 24mm; align-items: center; gap: 2mm; overflow: hidden; border-bottom: .35mm solid #000; text-align: center; }
.ops-handwrite-brand { display: grid; justify-items: center; align-content: center; color: #000; line-height: 1; }.ops-handwrite-brand b { font: 950 22pt/.72 Arial,sans-serif; letter-spacing: -2.6px; }.ops-handwrite-brand span { margin-top: .8mm; color: #000; font: 900 6.1pt/1 Arial,sans-serif; letter-spacing: 1.85px; }
.ops-handwrite-company { display: grid; justify-items: center; align-content: center; min-width: 0; overflow: hidden; }.ops-handwrite-company strong { color: #000; font-size: 12.5pt; font-weight: 900; line-height: 1; }.ops-handwrite-company span { max-width: 100%; margin-top: .4mm; overflow: hidden; color: #000; font-size: 6.45pt; font-weight: 800; line-height: 1.04; white-space: nowrap; text-overflow: ellipsis; }
.ops-handwrite-title { display: grid; box-sizing: border-box; height: 9.5mm; place-items: center; align-content: center; color: #000; background: #fff; border-bottom: .35mm solid #000; text-align: center; }
.ops-handwrite-title strong { color: #000; font-size: 12.8pt; font-weight: 950; line-height: 1; }.ops-handwrite-title small { margin-top: .45mm; color: #000; font: 850 6.2pt/1 Arial,sans-serif; letter-spacing: .18px; }
.ops-handwrite-meta { position: relative; display: grid; box-sizing: border-box; height: 22.5mm; grid-template-rows: repeat(3,minmax(0,1fr)); margin-top: 1.1mm; overflow: hidden; border: .3mm solid #000; border-radius: 1.6mm; padding: 5.6mm 2mm 1.2mm; }
.ops-handwrite-meta::before { position: absolute; top: -.3mm; left: -.3mm; display: grid; min-height: 4.8mm; align-items: center; padding: 0 2.3mm; border-radius: 1.35mm 1.35mm 0 0; color: #fff; background: #000; content: "1. ข้อมูลผู้ขายและการรับซื้อ"; font-size: 8.1pt; font-weight: 900; line-height: 1; }
.ops-handwrite-meta p { display: grid; grid-template-columns: max-content minmax(24mm,.7fr) max-content minmax(0,1.3fr); align-items: end; gap: 1.5mm; min-width: 0; margin: 0; }
.ops-handwrite-meta p.wide:last-child { grid-template-columns: max-content minmax(0,1fr); }.ops-handwrite-meta b { color: #000; font-size: 8pt; font-weight: 900; white-space: nowrap; }.ops-handwrite-meta i { min-width: 0; height: 3.55mm; border-bottom: .3mm dotted #000; }
.ops-handwrite-table { box-sizing: border-box; width: 100%; height: 47mm; margin-top: 1.1mm; border-collapse: collapse; table-layout: fixed; }
.ops-handwrite-table th,.ops-handwrite-table td { border: .3mm solid #000; padding: .65mm; overflow: hidden; }
.ops-handwrite-table thead th { height: 7.2mm; color: #fff; background: #000; font-size: 7.5pt; font-weight: 900; line-height: 1.05; text-align: center; vertical-align: middle; }
.ops-handwrite-table tbody td { height: 8mm; vertical-align: middle; }.ops-handwrite-table tbody td:first-child { text-align: center; font-weight: 850; }
.ops-handwrite-table .ops-handwrite-col-index { width: 10mm; }.ops-handwrite-table .ops-handwrite-col-description { width: 66mm; }.ops-handwrite-table .ops-handwrite-col-condition { width: 24mm; }.ops-handwrite-table .ops-handwrite-col-quantity { width: 16mm; }.ops-handwrite-table .ops-handwrite-col-price { width: 28mm; }.ops-handwrite-table .ops-handwrite-col-note { width: 49mm; }
.ops-handwrite-table tfoot th,.ops-handwrite-table tfoot td { height: 7.3mm; color: #000; background: #f0f0f0; font-size: 8pt; font-weight: 900; text-align: right; vertical-align: middle; }.ops-handwrite-table tfoot td { color:#000; background:#fff; white-space: nowrap; }
.ops-handwrite-note { display: grid; box-sizing: border-box; height: 14.5mm; grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); gap: .7mm; margin-top: 1.1mm; overflow: hidden; border: .3mm solid #000; border-radius: 1.6mm; padding: 1.15mm 2mm; color:#000; font-size: 7.05pt; font-weight: 700; line-height: 1.18; }
.ops-handwrite-note-head { display: flex; align-items: baseline; gap: 2mm; min-width: 0; }.ops-handwrite-note b { color: #000; font-size:7.65pt; font-weight:900; white-space: nowrap; }.ops-handwrite-note-head span { min-width: 0; overflow-wrap: anywhere; word-break: normal; }.ops-handwrite-note > i { display: block; min-width: 0; align-self: end; border-bottom: .3mm dotted #000; }
.ops-handwrite-signatures { display: grid; box-sizing: border-box; height: 24mm; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 1.1mm; overflow: hidden; border: .3mm solid #000; border-radius: 1.6mm; }
.ops-handwrite-signatures > div { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 1.1mm; min-width: 0; padding: 1.6mm 1mm; text-align: center; }.ops-handwrite-signatures > div + div { border-left: .3mm solid #000; }.ops-handwrite-signatures b { color: #000; font-size: 8.1pt; font-weight: 900; }.ops-handwrite-signatures span { align-self: end; color:#000; font-size: 7.2pt; font-weight:800; white-space: nowrap; }.ops-handwrite-signatures small { align-self: end; color:#000; font-size:6.6pt; font-weight:800; white-space:nowrap; }
.ops-handwrite-cut { position: absolute; z-index: 2; top: 148.5mm; right: 2mm; left: 2mm; border-top: .35mm dashed #606060; color: #505050; text-align: center; }
.ops-handwrite-cut span { position: relative; top: -2.5mm; display: inline-block; padding: 0 2mm; background: #fff; font-size: 6.4pt; font-weight: 850; }

/* Blank computer specification worksheet: same formal shell as the live
   computer-spec document, with blank write-in guides and no document number. */
.document-page.ops-spec-blank-sheet { box-sizing:border-box; padding:3.5mm; color:#000; background:#fff; font-family:Tahoma,"Noto Sans Thai","Sarabun Embedded","Sarabun",sans-serif; font-size:8pt; font-weight:650; line-height:1.04; }
.ops-spec-blank-shell { box-sizing:border-box; width:203mm; max-width:100%; height:290mm; margin:0 auto; overflow:hidden; }
.ops-spec-blank-header { display:grid; box-sizing:border-box; height:21.5mm; grid-template-columns:29mm minmax(0,1fr) 29mm; align-items:center; gap:2.4mm; padding:1.1mm 0 1.35mm; text-align:center; }
.ops-spec-blank-brand { display:grid; justify-items:center; align-content:center; color:#000; line-height:1; }.ops-spec-blank-brand b { font:950 29pt/.72 Arial,sans-serif; letter-spacing:-3.5px; }.ops-spec-blank-brand span { margin-top:1.2mm; font:900 7.7pt/1 Arial,sans-serif; letter-spacing:2.5px; }
.ops-spec-blank-company { min-width:0; align-self:center; }.ops-spec-blank-company h2 { margin:0 0 .7mm; color:#000; font-size:16.5pt; font-weight:900; line-height:1; }.ops-spec-blank-company p { overflow:hidden; margin:.28mm 0; color:#000; font-size:7.35pt; font-weight:700; line-height:1.08; white-space:nowrap; text-overflow:ellipsis; }
.ops-spec-blank-title { display:grid; box-sizing:border-box; height:10mm; place-items:center; align-content:center; border:0; border-bottom:.42mm solid #000; color:#000; background:#fff; text-align:center; }.ops-spec-blank-title strong { color:#000; font-size:17pt; font-weight:950; line-height:1; }.ops-spec-blank-title span { margin-top:.8mm; color:#000; font:900 9pt/1 Arial,sans-serif; letter-spacing:.25px; }
.ops-spec-blank-formbar { display:grid; box-sizing:border-box; height:8.8mm; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:1.2mm; border:.32mm solid #000; border-radius:1.7mm; overflow:hidden; }.ops-spec-blank-formbar > div { display:grid; min-width:0; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:2.2mm; padding:1.15mm 2.3mm; }.ops-spec-blank-formbar > div + div { border-left:.32mm solid #000; }.ops-spec-blank-formbar p { display:grid; min-width:0; grid-template-columns:max-content minmax(0,1fr); align-items:center; gap:1.3mm; margin:0; }.ops-spec-blank-formbar b { color:#000; font-size:7.5pt; font-weight:900; white-space:nowrap; }.ops-spec-blank-formbar i { min-width:0; height:3.5mm; border-bottom:.32mm solid #000; }
.ops-spec-blank-section { position:relative; box-sizing:border-box; margin-top:1.2mm; border:.32mm solid #000; border-radius:1.7mm; overflow:hidden; }.ops-spec-blank-section > h3 { display:inline-block; min-height:5mm; margin:-.32mm 0 0; padding:1.05mm 2.55mm .95mm; border-radius:1.45mm 1.45mm 0 0; color:#fff; background:#000; font-size:8.9pt; font-weight:900; line-height:1.05; }
.ops-spec-blank-meta { display:block; box-sizing:border-box; height:17mm; border:0; }.ops-spec-customer-row { display:grid; box-sizing:border-box; height:100%; min-width:0; grid-template-columns:45% 30% 25%; grid-template-rows:repeat(2,minmax(0,1fr)); }.ops-spec-customer-row > div { display:grid; min-width:0; grid-template-columns:max-content minmax(0,1fr); align-items:center; gap:1.5mm; padding:1.05mm 2.2mm; }.ops-spec-customer-row > div:not(:nth-child(3n + 1)) { border-left:.32mm solid #000; }.ops-spec-customer-row > div:nth-child(n + 4) { border-top:.32mm solid #000; }.ops-spec-blank-meta b { color:#000; font-size:7.8pt; font-weight:900; white-space:nowrap; }.ops-spec-blank-meta i { min-width:0; height:3.8mm; border-bottom:.32mm dotted #000; }
.ops-spec-items-section .ops-spec-blank-table { width:calc(100% - 2mm); height:135mm; margin:0 1mm 1mm; border-collapse:collapse; table-layout:fixed; }.ops-spec-blank-table th,.ops-spec-blank-table td { border:.32mm solid #000; overflow:hidden; }.ops-spec-blank-table thead th { height:7.5mm; padding:.7mm; color:#000; background:#fff; font-size:7.6pt; font-weight:900; line-height:1.02; text-align:center; vertical-align:middle; }.ops-spec-blank-table thead small { color:#000; font:800 5.55pt/1 Arial,sans-serif; }.ops-spec-blank-table thead th:nth-child(1) { width:10mm; }.ops-spec-blank-table thead th:nth-child(2) { width:31mm; }.ops-spec-blank-table thead th:nth-child(4) { width:14mm; }.ops-spec-blank-table thead th:nth-child(5) { width:25mm; }.ops-spec-blank-table thead th:nth-child(6) { width:27mm; }.ops-spec-blank-table thead th:nth-child(7) { width:25mm; }.ops-spec-blank-table tbody tr:not(.ops-spec-section) { height:6.5mm; }.ops-spec-blank-table tbody th { padding:.35mm .9mm; color:#000; background:#fff; text-align:left; vertical-align:middle; }.ops-spec-blank-table tbody th b { display:block; color:#000; font:900 6.8pt/1 Arial,sans-serif; }.ops-spec-blank-table tbody th small { display:block; margin-top:.2mm; color:#000; font-size:5.5pt; font-weight:750; line-height:1; }.ops-spec-blank-table tbody td { padding:.5mm .8mm; vertical-align:middle; }.ops-spec-blank-table .ops-spec-blank-index { color:#000; text-align:center; font-size:7pt; font-weight:850; }.ops-spec-blank-table .ops-spec-section { height:5.4mm; }.ops-spec-blank-table .ops-spec-section th { padding:.65mm 1.4mm; color:#000; background:#f0f0f0; font-size:7.9pt; font-weight:900; letter-spacing:.08px; text-align:left; }
.ops-spec-blank-software { display:grid; box-sizing:border-box; height:13mm; grid-template-rows:repeat(2,minmax(0,1fr)); padding:0 2.2mm 1mm; }.ops-spec-blank-software span { display:block; min-width:0; border-bottom:.32mm dotted #000; }
.ops-spec-blank-summary { display:grid; box-sizing:border-box; height:26mm; grid-template-columns:minmax(0,1fr) 52mm; border:0; }.ops-spec-blank-summary > .ops-spec-blank-deposit { display:grid; box-sizing:border-box; grid-template-rows:4.7mm 6.2mm 6.2mm 1fr; min-width:0; padding:1.05mm 2.2mm; }.ops-spec-blank-summary > div b { color:#000; font-size:8.1pt; font-weight:900; }.ops-spec-blank-deposit p { display:grid; grid-template-columns:max-content minmax(16mm,.75fr) max-content minmax(16mm,1fr); align-items:end; gap:1.4mm; min-width:0; margin:0; }.ops-spec-blank-deposit p:nth-of-type(2) { grid-template-columns:max-content minmax(0,1fr); }.ops-spec-blank-deposit strong { color:#000; font-size:7.35pt; font-weight:900; white-space:nowrap; }.ops-spec-blank-deposit i { min-width:0; height:4.2mm; border-bottom:.32mm dotted #000; }.ops-spec-blank-summary dl { display:grid; box-sizing:border-box; height:100%; grid-template-rows:repeat(3,minmax(0,1fr)); margin:0; border-left:.32mm solid #000; }.ops-spec-blank-summary dl > div { display:grid; min-height:0; grid-template-columns:minmax(0,1fr) 22mm; align-items:stretch; border-bottom:.32mm solid #000; }.ops-spec-blank-summary dl > div:last-child { border-bottom:0; }.ops-spec-blank-summary dt { display:grid; place-items:center; min-width:0; padding:0 .6mm; color:#000; background:#f2f2f2; font-size:7.15pt; font-weight:900; line-height:1.02; text-align:center; }.ops-spec-blank-summary dd { min-width:0; margin:0; border-left:.32mm solid #000; background:#fff; }.ops-spec-blank-summary .grand dt { background:#e2e2e2; font-size:7.45pt; }.ops-spec-blank-summary .grand dd { background:#fff; }
.ops-spec-blank-signatures { display:grid; box-sizing:border-box; height:20mm; grid-template-columns:repeat(2,minmax(0,1fr)) 52mm; border:0; }.ops-spec-blank-signatures > div { display:grid; grid-template-rows:auto 1fr auto; justify-items:center; gap:.8mm; min-width:0; padding:1.65mm 1.5mm; text-align:center; }.ops-spec-blank-signatures > div + div { border-left:.32mm solid #000; }.ops-spec-blank-signatures b { color:#000; font-size:8.1pt; font-weight:900; }.ops-spec-blank-signatures span { align-self:end; color:#000; font-size:7.45pt; font-weight:800; white-space:nowrap; }.ops-spec-blank-signatures small { color:#000; font-size:6.8pt; font-weight:750; }

@media (max-width:1450px) {
  .internal-document-hub { grid-template-columns: repeat(3,minmax(130px,1fr)); }
  .operations-item { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .operations-filter-grid { grid-template-columns: minmax(250px,1.3fr) repeat(2,minmax(140px,.7fr)); }.operations-filter-grid .ops-custom-date { grid-column: span 1; }
}
@media (max-width:900px) {
  .operations-item { grid-template-columns: repeat(2,minmax(0,1fr)); }.operations-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.operations-filter-grid .wide { grid-column:1/-1; }
}
@media (max-width:680px) {
  .internal-document-hub { position:relative; grid-template-columns:repeat(5,minmax(142px,1fr)); margin:-12px -12px 14px; overflow-x:auto; overscroll-behavior-inline:contain; padding:10px 12px; scroll-snap-type:x proximity; }
  .internal-document-hub button { scroll-snap-align:start; }.operations-title-row { align-items:stretch; flex-direction:column; }.operations-title-row h2 { font-size:18px; }.operations-title-tools { display:grid; width:100%; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }.operations-title-tools .ops-blank-template-button,.operations-title-tools .ops-half-print-button { width:100%; min-width:0; min-height:46px; }.operations-title-tools .badge { grid-column:1/-1; justify-self:end; }.operations-item { grid-template-columns:repeat(2,minmax(0,1fr)); padding:44px 10px 12px; }.operations-item label.wide { grid-column:1/-1; }.operations-item input { min-height:44px; font-size:16px; }.ops-item-index { top:10px; }.ops-remove-item { top:8px; }.operations-item output { grid-column:1/-1; }
  .operations-filter-grid { grid-template-columns:1fr; }.operations-filter-grid .wide,.operations-filter-grid .ops-custom-date { grid-column:auto; }
  #opsMobileActions { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #opsMobileActions #opsMobileSave { grid-column:span 2; }
  #opsMobileActions .mobile-document-action { padding-right:4px; padding-left:4px; font-size:12px; }
  #opsMobileActions .mobile-document-action.draft { color:#704600; border-color:#e3bd6b; background:#fff5d9; }
  .ops-draft-shelf { padding:11px; }.ops-draft-shelf-head { align-items:stretch; flex-direction:column; }.ops-draft-shelf-head button { width:100%; min-height:42px; }.ops-draft-shelf-list { grid-template-columns:1fr; }.ops-draft-card { grid-template-columns:minmax(0,1fr) auto; min-height:62px; }.ops-draft-card > span:nth-child(2) { display:none; }.ops-draft-card b { font-size:14px; }.ops-draft-card small { font-size:11px; }
  .ops-detail-subheading { align-items:flex-start; flex-direction:column; }.ops-detail-subheading span { text-align:left; }
  .ops-spec-deposit-summary { grid-template-columns:1fr; }
  .ops-spec-deposit-summary > div { grid-template-columns:1fr auto; align-items:center; }
}
@media print {
  .ops-document-page[hidden] { display:none!important; }.ops-document-page:not([hidden]) { display:block!important; }
  .ops-handwrite-sheet[hidden] { display:none!important; }.ops-handwrite-sheet:not([hidden]) { display:block!important; }
}

/* Customer Document Profile */
.customer-profile-card { margin: 12px 0; border: 1px solid #9fc9d8; border-left: 5px solid #087ca5; border-radius: 14px; padding: 14px; background: linear-gradient(145deg,#f7fcfe,#eaf5f8); box-shadow: 0 9px 22px rgba(3,51,82,.09); }
.customer-profile-card-head,.customer-profile-card-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.customer-profile-card-head small { color:#52707f; font-size:11px; font-weight:800; }
.customer-profile-card-head h3 { margin:2px 0 0; color:#032f4b; font-size:18px; line-height:1.25; }
.customer-profile-badges { display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.customer-profile-badge { display:inline-flex; align-items:center; min-height:27px; border:1px solid #b9d2dc; border-radius:999px; padding:4px 9px; color:#173d52; background:#fff; font-size:12px; font-weight:900; line-height:1.1; }
.customer-profile-badge.entity { color:#fff; border-color:#073f61; background:#073f61; }
.customer-profile-badge.vat { color:#fff; border-color:#087ca5; background:#087ca5; }
.customer-profile-badge.non-vat { color:#405762; background:#edf3f5; }
.customer-profile-badge.requirement { color:#7b4700; border-color:#e8bf72; background:#fff5d9; }
.customer-profile-badge.pay-later { color:#7a2e00; border-color:#f0a35b; background:#fff0df; }
.customer-profile-badge.documents { color:#174a38; border-color:#aad7c5; background:#effaf5; }
.customer-profile-summary { display:grid; grid-template-columns:minmax(150px,.7fr) minmax(0,1.3fr); gap:10px; margin-top:11px; }
.customer-profile-summary > div { border:1px solid #d1e3e9; border-radius:10px; padding:9px 11px; background:rgba(255,255,255,.78); }
.customer-profile-summary span { display:block; color:#58717d; font-size:11px; font-weight:700; }
.customer-profile-summary strong { display:block; margin-top:2px; color:#0a3a55; font-size:13px; line-height:1.4; }
.customer-profile-note { margin-top:10px; border-left:4px solid #d89b2b; border-radius:8px; padding:9px 11px; color:#4c350c; background:#fff9e9; }
.customer-profile-note strong { font-size:12px; }.customer-profile-note p { margin:2px 0 0; font-size:13px; line-height:1.45; white-space:pre-line; }
.customer-profile-requirements { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:8px; }
.customer-profile-requirements p { min-width:0; margin:0!important; border:1px solid #d5e6ec; border-radius:9px; padding:7px 9px; background:#fff; color:#244a5d!important; }
.customer-profile-requirements strong,.customer-profile-requirements span { display:block; overflow-wrap:anywhere; }
.customer-profile-requirements strong { margin-bottom:2px; color:#075978; font-size:11px; }.customer-profile-requirements span { font-size:12px; line-height:1.4; }
.customer-profile-options { border:1px solid #d9e7ec; border-radius:11px; padding:10px; background:#f8fbfc; }
.customer-option-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:7px; margin-top:6px; }
.customer-option-grid label { display:flex; align-items:center; gap:7px; min-width:0; min-height:40px; border:1px solid #cfe0e6; border-radius:9px; padding:7px 9px; background:#fff; cursor:pointer; }
.customer-option-grid input { flex:0 0 auto; width:18px; height:18px; accent-color:#087ca5; }.customer-option-grid span { min-width:0; color:#173f56; font-size:12px; font-weight:800; line-height:1.25; overflow-wrap:anywhere; }

/* Supplier / creditor profiles */
.tr-finance-profile-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end; }
.tr-finance-profile-head .trf { margin:0; min-width:0; }.tr-finance-profile-manage { min-height:38px; border:1px solid #79b4ca; border-radius:9px; padding:7px 10px; color:#075978; background:#fff; font-size:12px; font-weight:900; cursor:pointer; }
.tr-supplier-profile-quick { display:block; width:100%; min-height:40px; margin:0 0 10px; border:1px solid #9bc6d5; border-radius:10px; padding:8px 10px; color:#075978; background:linear-gradient(145deg,#f3fbfe,#fff); font-size:12px; font-weight:900; text-align:center; cursor:pointer; overflow-wrap:anywhere; }
.tr-migration-panel { margin:8px 0 10px; border:1px solid #a9d5df; border-radius:12px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:linear-gradient(135deg,#eefafd,#f7fbfc); color:#073f58; }
.tr-migration-panel>div { display:grid; gap:2px; min-width:0; }.tr-migration-panel b { font-size:13px; }.tr-migration-panel small { color:#496874; font-size:11px; font-weight:700; line-height:1.35; }
.tr-migration-panel.running { border-color:#d7a62e; background:#fff9e8; }.tr-migration-panel.complete { border-color:#6db796; background:#edf9f3; }.tr-migration-panel.error { border-color:#d98d8d; background:#fff2f2; }
.tr-migration-modal { z-index:10050; }
.tr-migration-modal .tr-mcard { width:min(760px,calc(100vw - 24px)); max-height:min(86dvh,820px); padding:0; overflow:hidden; display:flex; flex-direction:column; }
.tr-migration-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 20px 14px; color:#fff; background:linear-gradient(135deg,#033b59,#087b9a); }
.tr-migration-modal-head small { color:#bcecf4; font-size:10px; font-weight:900; letter-spacing:1.2px; }.tr-migration-modal-head h3 { margin:2px 0 3px; font-size:21px; }.tr-migration-modal-head p { margin:0; color:#e8f8fb; font-size:12px; line-height:1.4; }
.tr-migration-modal-head button { flex:0 0 38px; width:38px; height:38px; border:1px solid rgba(255,255,255,.3); border-radius:11px; color:#fff; background:rgba(255,255,255,.08); font-size:25px; font-weight:900; }
.tr-migration-toolbar { display:grid; grid-template-columns:160px 1fr auto; gap:8px; padding:14px 16px 10px; background:#f6fafc; }
.tr-migration-toolbar select,.tr-migration-toolbar input { min-width:0; height:42px; border:1px solid #c8dce5; border-radius:10px; padding:0 11px; color:#12394b; background:#fff; font:700 13px/1.2 inherit; }
.tr-migration-select-all { display:flex; align-items:center; gap:9px; margin:0 16px 9px; border:1px solid #c9dde6; border-radius:10px; padding:9px 11px; color:#16485c; background:#edf7fa; font-size:13px; font-weight:850; }.tr-migration-select-all input { width:18px; height:18px; accent-color:#087c9c; }.tr-migration-select-all b { margin-left:auto; color:#08728e; }
.tr-migration-list { min-height:210px; overflow:auto; padding:0 16px 12px; display:grid; align-content:start; gap:8px; }
.tr-migration-row { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:flex-start; border:1px solid #d5e4ea; border-radius:12px; padding:11px; background:#fff; box-shadow:0 3px 10px rgba(3,58,83,.05); }.tr-migration-row.copied { border-color:#75b99b; background:#f0fbf6; }.tr-migration-row input { width:19px; height:19px; margin-top:2px; accent-color:#087c9c; }
.tr-migration-row-main { min-width:0; }.tr-migration-row-main b { display:block; overflow-wrap:anywhere; color:#102f3d; font-size:13px; line-height:1.35; }.tr-migration-row-main small { display:block; margin-top:4px; color:#5c7480; font-size:11px; line-height:1.35; }.tr-migration-row-meta { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }.tr-migration-row-meta span { border-radius:999px; padding:3px 7px; color:#165064; background:#e8f4f7; font-size:10px; font-weight:850; }.tr-migration-row-meta .copied { color:#176445; background:#d8f3e6; }
.tr-migration-row-date { white-space:nowrap; color:#375d6d; font-size:11px; font-weight:800; }
.tr-migration-summary { margin:0 16px 10px; border-radius:9px; padding:9px 11px; color:#385c6b; background:#f1f6f8; font-size:12px; font-weight:750; }
.tr-migration-actions { display:grid; grid-template-columns:auto 1fr 1.15fr; gap:9px; border-top:1px solid #d5e3e9; padding:12px 16px max(12px,env(safe-area-inset-bottom)); background:#fff; }.tr-migration-actions .button { min-height:43px; justify-content:center; }.tr-migration-actions .danger { color:#fff; border-color:#b62f36; background:#b62f36; }.tr-migration-actions .danger:disabled { color:#8d9ba1; border-color:#dbe3e6; background:#eef2f3; }
.tr-supplier-profile-quick:hover { border-color:#087ca5; background:#eaf7fb; }
.tr-supplier-profile-summary { margin:8px 0 10px; border:1px solid #93c6d8; border-left:4px solid #087ca5; border-radius:11px; padding:9px 10px; background:linear-gradient(145deg,#f4fbfe,#fff9ec); }
.tr-supplier-profile-title { display:flex; align-items:center; justify-content:space-between; gap:8px; }.tr-supplier-profile-title b { min-width:0; color:#073f61; overflow-wrap:anywhere; }.tr-supplier-profile-title span { flex:0 0 auto; border-radius:999px; padding:3px 7px; color:#075978; background:#dff2f8; font-size:10px; font-weight:900; }
.tr-supplier-profile-badges { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }.tr-supplier-profile-badges span { border:1px solid #c7dde6; border-radius:999px; padding:3px 7px; color:#294f61; background:#fff; font-size:11px; font-weight:800; overflow-wrap:anywhere; }
.tr-supplier-profile-summary p { margin:6px 0 0; color:#3d5967; font-size:11px; line-height:1.4; overflow-wrap:anywhere; }.tr-supplier-profile-summary p.important { border-top:1px dashed #d6b276; padding-top:6px; color:#724504; }
.tr-supplier-profile-modal { z-index:10010; }.tr-supplier-profile-modal .tr-mcard { width:min(720px,calc(100vw - 24px)); max-height:min(860px,calc(100dvh - 24px)); overflow:auto; }
.tr-supplier-modal-head,.tr-supplier-search-row,.tr-supplier-profile-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; }.tr-supplier-modal-head small { color:#6a8390; font-weight:800; }.tr-supplier-modal-head h3 { margin:2px 0 0; color:#073f61; }.tr-supplier-modal-head button { width:38px; height:38px; border:1px solid #c9dce4; border-radius:10px; color:#073f61; background:#fff; font-size:22px; font-weight:900; cursor:pointer; }
.tr-supplier-search-row { margin:12px 0; }.tr-supplier-search-row input { min-width:0; flex:1; min-height:40px; border:1px solid #bfd3dc; border-radius:9px; padding:8px 10px; font:inherit; }
.tr-supplier-profile-list { display:grid; gap:8px; }.tr-supplier-profile-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; border:1px solid #d5e4ea; border-radius:12px; padding:10px; background:#fff; }.tr-supplier-profile-card>div:first-child { min-width:0; }.tr-supplier-profile-actions { align-self:start; flex-wrap:wrap; justify-content:flex-end; }.tr-supplier-profile-actions button { border:1px solid #b8d4df; border-radius:8px; padding:6px 8px; color:#075978; background:#f4fafc; font-size:11px; font-weight:900; cursor:pointer; }.tr-supplier-profile-actions .danger { color:#a51d24; border-color:#efc4c6; background:#fff5f5; }
.tr-supplier-profile-form { border:1px solid #cadfe8; border-radius:12px; padding:12px; background:#f8fbfc; }.tr-supplier-profile-form .customer-option-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.tr-supplier-profile-form .tr-modal-actions { position:sticky; bottom:-12px; margin:12px -12px -12px; padding:10px 12px; background:rgba(255,255,255,.96); border-top:1px solid #d9e6eb; }
.tr-mini.payable-info.terms { color:#174f3e; border-color:#a9d4c4; background:#eff9f5; }
.rb-supplier-terms { display:grid; gap:4px; margin:7px 0; border:1px solid #abd5c5; border-radius:8px; padding:7px; background:#f1faf6; }.rb-supplier-terms span { display:flex; justify-content:space-between; gap:7px; color:#3d5d51; font-size:11px; }.rb-supplier-terms b { color:#174f3e; text-align:right; overflow-wrap:anywhere; }.rb-supplier-note { border-left:3px solid #d89b2b; padding-left:7px; color:#70460b!important; background:#fff9e9; }

@media (max-width: 640px) {
  .customer-profile-requirements { grid-template-columns:1fr; }
  .customer-option-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tr-finance-profile-head { grid-template-columns:1fr; }.tr-finance-profile-manage { width:100%; }
  .tr-supplier-profile-card { grid-template-columns:1fr; }.tr-supplier-profile-actions { justify-content:stretch; }.tr-supplier-profile-actions button { flex:1; min-height:38px; }
  .tr-supplier-search-row { align-items:stretch; flex-direction:column; }.tr-supplier-search-row button { width:100%; }
  .tr-supplier-profile-form .trf-row { grid-template-columns:1fr; }
}
.customer-profile-card-foot { margin-top:11px; }.customer-profile-card-foot small { color:#5b727d; font-size:11px; }
.customer-profile-warning { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0; border:1px solid #efb04a; border-radius:12px; padding:11px 12px; color:#5a3900; background:#fff6dc; }
.customer-profile-warning strong { font-size:13px; }.customer-profile-warning p { margin:3px 0 0; font-size:12px; line-height:1.35; }
.customer-profile-warning-actions { display:flex; flex-wrap:wrap; gap:6px; flex-shrink:0; }
.customer-result { border-bottom:1px solid #e6eef1; }
.customer-result-company { color:#173f56!important; font-weight:800; }
.customer-result-profile { display:flex!important; flex-wrap:wrap; gap:4px; margin-top:6px!important; }
.customer-result-profile .customer-profile-badge { min-height:21px; padding:2px 6px; font-size:10px; }
.customer-result-add { width:100%; border:1px dashed #69a8bf; border-radius:8px; padding:10px; color:#075978; background:#f2fbfe; font:800 13px inherit; text-align:center; }
.customer-manager-card { display:flex; gap:12px; }
.customer-company-name { color:#173f56!important; font-weight:800; }
.customer-profile-badges.compact { margin-top:8px; gap:5px; }
.customer-profile-badges.compact .customer-profile-badge { min-height:23px; padding:3px 7px; font-size:10px; }
.customer-manager-flow { color:#294b5c!important; }.customer-manager-profile-note { border-left:3px solid #dfaa44; padding-left:7px; color:#694718!important; }
.customer-profile-editor { margin:16px 0 0; border:1px solid #b7d5df; border-radius:13px; padding:12px; background:#f3fafc; }
.customer-profile-editor legend { padding:0 7px; color:#064b6a; font-size:15px; font-weight:900; }
.customer-profile-editor-help { margin:0 0 11px; color:#516d7a; font-size:12px; line-height:1.4; }
.customer-profile-check { align-self:end; min-height:61px; }
.customer-profile-check span { display:grid; gap:2px; }.customer-profile-check small { color:#607984; font-size:10px; font-weight:600; }
.customer-profile-audit { margin-top:8px; color:#59727d; font-size:11px; text-align:right; }
.customer-modal { width:min(760px,100%); max-height:calc(100dvh - 32px); overflow:auto; }
.history-heading-actions { display:flex; align-items:center; gap:8px; }
.document-search-fab { display:none; }
.save-decision-backdrop,.document-search-backdrop { z-index:10120; }
.save-decision-modal,.document-search-modal { width:min(720px,100%); max-height:calc(100dvh - 32px); overflow:hidden; border:1px solid rgba(255,255,255,.6); border-radius:20px; background:#fff; box-shadow:0 30px 80px rgba(1,31,49,.35); }
.save-decision-modal { width:min(640px,100%); }
.save-decision-head,.document-search-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:19px 21px 16px; color:#fff; background:linear-gradient(135deg,#033651,#087894); }
.save-decision-head small,.document-search-head small { display:block; margin-bottom:2px; color:#b9e8f1; font-size:10px; font-weight:900; letter-spacing:1.3px; }
.save-decision-head h3,.document-search-head h3 { margin:0; font-size:22px; line-height:1.2; }
.document-search-head p { margin:5px 0 0; color:#e4f7fa; font-size:12px; line-height:1.4; }
.save-decision-head .modal-close,.document-search-head .modal-close { flex:0 0 40px; width:40px; height:40px; border:1px solid rgba(255,255,255,.32); border-radius:11px; color:#fff; background:rgba(255,255,255,.08); font-size:25px; }
.save-decision-body { display:grid; gap:12px; padding:18px 21px; color:#153b4c; }
.save-decision-body>p { margin:0; color:#496a78; font-size:13px; line-height:1.5; }
.save-current-document { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:4px 11px; border:1px solid #bcd7e1; border-radius:13px; padding:12px 14px; background:#f1f8fa; }
.save-current-document span { color:#466c7c; font-size:12px; font-weight:850; }.save-current-document strong { color:#073c57; font-size:19px; overflow-wrap:anywhere; }.save-current-document small { grid-column:1/-1; color:#6a818b; font-size:11px; }
.save-decision-body>label { font-size:13px; font-weight:850; }.save-decision-body>input { width:100%; min-height:45px; border:1.5px solid #9fc5d3; border-radius:10px; padding:9px 12px; color:#073c57; background:#fff; font:800 16px/1.2 inherit; }
.save-decision-hint { color:#607c87; font-size:11px; }
.save-backup-note { display:grid; gap:2px; border-left:4px solid #26936d; border-radius:9px; padding:10px 12px; color:#245f4d; background:#eefaf5; }.save-backup-note b { font-size:12px; }.save-backup-note span { font-size:11px; line-height:1.45; }
.save-decision-actions { display:grid; grid-template-columns:auto 1fr 1fr; gap:9px; border-top:1px solid #d9e5ea; padding:13px 21px 17px; }.save-decision-actions .button { min-height:44px; justify-content:center; }.save-decision-actions .danger { color:#a31821; border-color:#efb5ba; background:#fff2f3; }
.document-search-modal { display:flex; flex-direction:column; width:min(880px,100%); }
.document-search-tools { display:grid; grid-template-columns:1fr 180px; gap:9px; padding:15px 18px 10px; background:#f5fafc; }
.document-search-box { display:flex; align-items:center; gap:8px; min-width:0; height:45px; border:1.5px solid #9fc8d7; border-radius:11px; padding:0 12px; background:#fff; }.document-search-box span { color:#087696; font-size:24px; font-weight:900; }.document-search-box input { min-width:0; width:100%; border:0; outline:0; color:#0e3a4d; background:transparent; font:750 14px/1.2 inherit; }
.document-search-tools select { min-width:0; height:45px; border:1px solid #bdd4de; border-radius:11px; padding:0 10px; color:#173f50; background:#fff; font:750 13px/1.2 inherit; }
.document-search-summary { padding:0 18px 10px; color:#5d7884; background:#f5fafc; font-size:12px; font-weight:750; }
.document-search-results { min-height:240px; overflow:auto; padding:5px 18px 15px; display:grid; align-content:start; gap:9px; }
.global-document-card { display:grid; gap:8px; border:1px solid #d2e2e8; border-radius:13px; padding:12px; background:#fff; box-shadow:0 4px 14px rgba(2,48,69,.06); }.global-document-card:hover { border-color:#9bc6d5; }
.global-document-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.global-document-card-head h4 { margin:0 0 3px; color:#0b3b52; font-size:15px; line-height:1.3; }.global-document-card-head p { margin:0; color:#607985; font-size:11.5px; line-height:1.35; }.global-document-card-head>span { flex:0 0 auto; border-radius:999px; padding:4px 8px; color:#075f7c; background:#e6f4f8; font-size:10px; font-weight:850; }
.global-document-numbers { display:flex; flex-wrap:wrap; gap:5px; }.global-document-numbers span { border:1px solid #c7dce5; border-radius:999px; padding:4px 8px; color:#244e60; background:#f5f9fa; font-size:10.5px; font-weight:800; }
.global-document-items { margin:0; color:#395f6e; font-size:11.5px; line-height:1.45; overflow-wrap:anywhere; }
.global-document-actions { display:flex; flex-wrap:wrap; gap:7px; }.global-document-actions button { min-height:34px; border:1px solid #b9d3de; border-radius:8px; padding:6px 10px; color:#075d7b; background:#fff; font-size:11px; font-weight:850; }.global-document-actions button.primary { color:#fff; border-color:#087696; background:#087696; }.global-document-actions button.backup { color:#216448; border-color:#a9d5c1; background:#effaf5; }
.global-backup-list { display:grid; gap:6px; border-top:1px dashed #c3d6de; padding-top:8px; }.global-backup-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:9px; border-radius:8px; padding:7px 9px; background:#f5f9fa; }.global-backup-row span { color:#345a6a; font-size:11px; line-height:1.35; }.global-backup-row button { min-height:30px; border:1px solid #9ec8b5; border-radius:7px; padding:5px 9px; color:#176044; background:#fff; font-size:10.5px; font-weight:850; }
.document-search-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid #d8e5ea; padding:12px 18px max(12px,env(safe-area-inset-bottom)); color:#70858d; background:#fff; font-size:11px; }
.receipt-pay-later-info { display:flex; align-items:center; justify-content:space-between; gap:10px; border-color:#efb36b; color:#6c3500; background:#fff5e7; }
.receipt-pay-later-info strong { font-size:13px; }.receipt-pay-later-info span { font-size:12px; line-height:1.4; text-align:right; }

/* Unified formal A4 template for every operational document.
   Billing documents keep their own PS Supply / PS Computer templates. */
.ops-document-page.ops-unified-template {
  color:#000;
  background:#fff;
  font-family:Tahoma,"Noto Sans Thai","Sarabun Embedded","Sarabun",sans-serif;
  font-size:9pt;
  line-height:1.18;
}
.ops-document-page.ops-unified-template .ops-print-header {
  display:grid;
  grid-template-columns:28mm minmax(0,1fr) 37mm;
  align-items:center;
  height:29mm;
  border:0;
  border-bottom:.42mm solid #000;
  padding:1mm 0 1.5mm;
  text-align:center;
}
.ops-unified-template .ops-print-brand { display:grid; place-items:center; align-content:center; color:#000; font-family:Arial,sans-serif; }
.ops-unified-template .ops-print-brand b { font-size:27pt; font-style:italic; font-weight:950; letter-spacing:-3.6px; line-height:.78; }
.ops-unified-template .ops-print-brand span { margin-top:1mm; font-size:6.8pt; font-weight:900; letter-spacing:2.2px; line-height:1; }
.ops-unified-template .ops-print-company { display:grid; min-width:0; place-items:center; align-content:center; }
.ops-unified-template .ops-print-company h2 { margin:0 0 .6mm; color:#000; font-size:17pt; font-weight:900; line-height:1; }
.ops-unified-template .ops-print-company p { max-width:100%; margin:.25mm 0; color:#000; font-size:7.5pt; font-weight:700; line-height:1.08; overflow-wrap:anywhere; }
.ops-unified-template .ops-print-company .ops-print-tax { color:#000; font-weight:850; }
.ops-unified-template .ops-print-number { min-width:0; border:.35mm solid #000; border-radius:1.5mm; overflow:hidden; text-align:left; }
.ops-unified-template .ops-print-number > b { display:block; padding:.9mm 1.4mm; color:#fff; background:#000; font-size:7pt; line-height:1; }
.ops-unified-template .ops-print-number p { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:1.2mm; margin:0; border-top:.24mm solid #000; padding:.7mm 1.2mm; font-size:7pt; font-weight:800; line-height:1; }
.ops-unified-template .ops-print-number p:first-of-type { border-top:0; }
.ops-unified-template .ops-print-number span { min-width:0; min-height:3mm; overflow:hidden; border-bottom:.22mm solid #000; font-weight:900; white-space:nowrap; text-overflow:ellipsis; }
.ops-unified-template .ops-print-title { height:12mm; color:#fff; background:#000; }
.ops-unified-template .ops-print-title strong { font-size:14.5pt; font-weight:900; }
.ops-unified-template .ops-print-title span { margin-top:.6mm; color:#fff; font:800 6.5pt/1 Arial,sans-serif; letter-spacing:.25px; }
.ops-unified-template .ops-print-meta { height:37mm; border-color:#000; }
.ops-unified-template .ops-print-meta > div + div { border-left-color:#000; }
.ops-unified-template .ops-print-meta p { margin-bottom:.7mm; color:#000; font-size:8pt; line-height:1.15; }
.ops-unified-template .ops-print-meta b { color:#000; font-weight:900; }
.ops-unified-template .ops-shipping-address { border-color:#000; }
.ops-unified-template .ops-shipping-address aside { border-left-color:#000; background:#f4f4f4; }
.ops-unified-template .ops-shipping-address small,.ops-unified-template .ops-shipping-address strong,.ops-unified-template .ops-shipping-address > div p,.ops-unified-template .ops-shipping-address > div b { color:#000; }
.ops-unified-template .ops-print-table th,.ops-unified-template .ops-print-table td { border-color:#000; }
.ops-unified-template .ops-print-table thead th { color:#fff; background:#000; font-size:8pt; font-weight:900; }
.ops-unified-template .ops-print-table thead small { color:#fff; font-weight:700; }
.ops-unified-template .ops-print-table tbody td { color:#000; font-size:8pt; }
.ops-unified-template .ops-print-table tbody td small { color:#202020; }
.ops-unified-template .ops-print-table tfoot th,.ops-unified-template .ops-print-table tfoot td { color:#000; background:#f0f0f0; }
.ops-unified-template .ops-print-table tfoot tr.grand th,.ops-unified-template .ops-print-table tfoot tr.grand td { color:#fff; background:#000; }
.ops-unified-template .ops-print-software { border-color:#000; }
.ops-unified-template .ops-print-software b { color:#fff; background:#000; }
.ops-unified-template .ops-print-software span { color:#000; }
.ops-unified-template .ops-print-note { border-color:#000; color:#000; }
.ops-unified-template .ops-print-note b { color:#000; }
.ops-unified-template .ops-print-signatures { border-color:#000; }
.ops-unified-template .ops-print-signatures > div + div { border-left-color:#000; }
.ops-unified-template .ops-print-signatures b { color:#000; font-size:8.8pt; }
.ops-unified-template .ops-print-signatures span,.ops-unified-template .ops-print-signatures em,.ops-unified-template .ops-print-signatures small { color:#000; }
.ops-document-page.ops-unified-template.computer-spec .ops-print-header { height:28mm; }
.ops-document-page.ops-unified-template.computer-spec .ops-print-meta { height:31mm; }
.ops-document-page.ops-unified-template.computer-spec .ops-print-meta p { font-size:7.55pt; }
.ops-document-page.ops-unified-template.computer-spec .ops-print-table tbody td:nth-child(2) { color:#000; }
.ops-document-page.ops-unified-template[data-ops-type="shipping_label"] .ops-print-meta { height:31mm; }

/* Structural shell shared with the approved off-site work order.  The data in
   each operational form remains type-specific; only the paper language is
   shared: compact header, rounded framed sections, and black tab headings. */
.ops-document-page.ops-unified-template {
  padding:3.5mm;
  color:#000;
  font-size:8pt;
  font-weight:650;
  line-height:1.04;
}
.ops-unified-template .ops-standard-sheet { width:203mm; max-width:100%; height:290mm; margin:0 auto; overflow:hidden; }
.ops-unified-template .ops-print-header {
  grid-template-columns:29mm minmax(0,1fr) 34mm;
  gap:2.4mm;
  height:24.5mm;
  padding:1.1mm 0 1.35mm;
  border:0;
}
.ops-unified-template .ops-print-brand b { font-size:29pt; letter-spacing:-3.5px; }
.ops-unified-template .ops-print-brand span { font-size:7.7pt; letter-spacing:2.5px; }
.ops-unified-template .ops-print-company h2 { font-size:16.5pt; }
.ops-unified-template .ops-print-company p { font-size:7.4pt; line-height:1.08; }
.ops-unified-template .ops-print-number { border:.35mm solid #000; border-radius:2.4mm; }
.ops-unified-template .ops-print-number > b { padding:1.05mm 1.7mm; font-size:7.65pt; }
.ops-unified-template .ops-print-number p { gap:1.7mm; padding:1.05mm 1.7mm; font-size:7.65pt; }
.ops-unified-template .ops-print-number span { min-height:3.6mm; }

/* The source form has a centred paper title and underline, not a full-width
   colour banner. */
.ops-unified-template .ops-print-title {
  height:10mm;
  color:#000;
  background:#fff;
  border-bottom:.42mm solid #000;
}
.ops-unified-template .ops-print-title strong { color:#000; font-size:17pt; font-weight:950; line-height:1; }
.ops-unified-template .ops-print-title span { margin-top:.8mm; color:#000; font:900 9pt/1 Arial,sans-serif; letter-spacing:.25px; }

.ops-unified-template .ops-form-bar {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:1.25mm 0 0;
  border:.32mm solid #000;
  border-radius:1.7mm;
  overflow:hidden;
}
.ops-unified-template .ops-form-bar > div { display:flex; align-items:center; gap:4.2mm; min-width:0; min-height:9.35mm; padding:1.7mm 2.55mm; }
.ops-unified-template .ops-form-bar > div + div { border-left:.32mm solid #000; }
.ops-unified-template .ops-form-bar b { flex:0 0 auto; color:#000; font-size:8.9pt; font-weight:900; white-space:nowrap; }
.ops-unified-template .ops-form-bar > div:first-child span { min-width:0; color:#000; font-size:8.7pt; font-weight:850; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ops-unified-template .ops-write-line { flex:1; min-width:30mm; min-height:4.4mm; border-bottom:.32mm solid #000; color:#000; font-size:8.7pt; font-weight:850; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ops-unified-template .ops-form-section { position:relative; margin:1.4mm 0 0; border:.32mm solid #000; border-radius:1.7mm; overflow:hidden; }
.ops-unified-template .ops-form-section > h3 { display:inline-block; min-height:5mm; margin:-.32mm 0 0; padding:1.05mm 2.55mm .95mm; color:#fff; background:#000; border-radius:1.45mm 1.45mm 0 0; font-size:8.9pt; font-weight:900; line-height:1.05; }
.ops-unified-template .ops-form-section .ops-print-meta { height:32mm; border:0; }
.ops-unified-template .ops-form-section .ops-print-meta > div { padding:1.7mm 2.55mm; }
.ops-unified-template .ops-form-section .ops-print-meta > div + div { border-left:.32mm solid #000; }
.ops-unified-template .ops-form-section .ops-print-meta p { margin:0 0 .75mm; color:#000; font-size:8pt; line-height:1.12; }
.ops-unified-template .ops-form-section .ops-print-meta b { color:#000; font-weight:900; }

.ops-unified-template .ops-shipping-section .ops-shipping-address { height:52mm; border:0; }
.ops-unified-template .ops-shipping-section .ops-shipping-address aside { border-left:.32mm solid #000; background:#fff; }
.ops-unified-template .ops-shipping-section .ops-shipping-address > div { padding:3.5mm; }
.ops-unified-template .ops-shipping-section .ops-shipping-address aside { padding:3mm; }
.ops-unified-template .ops-shipping-section .ops-shipping-address strong { font-size:16pt; }
.ops-unified-template .ops-shipping-section .ops-shipping-address > div p { margin-bottom:1.25mm; font-size:10.5pt; }
.ops-unified-template .ops-shipping-section .ops-shipping-address > div b { font-size:10.5pt; }
.ops-unified-template .ops-shipping-section .ops-shipping-address aside p { margin-bottom:1.3mm; font-size:7.7pt; }

.ops-unified-template .ops-items-section .ops-print-table { width:calc(100% - 2mm); height:135mm; margin:0 1mm 1mm; }
.ops-unified-template .ops-print-table th,.ops-unified-template .ops-print-table td { border:.32mm solid #000; padding:.9mm 1.2mm; }
.ops-unified-template .ops-print-table thead th { height:7.8mm; color:#000; background:#fff; font-size:7.9pt; font-weight:900; }
.ops-unified-template .ops-print-table thead small { margin-top:.25mm; color:#000; font-size:5.7pt; font-weight:800; }
.ops-unified-template .ops-print-table tbody td { height:6.3mm; color:#000; font-size:8pt; line-height:1.08; }
.ops-unified-template .ops-print-table tbody td small { color:#000; font-size:6.3pt; }
.ops-unified-template .ops-print-table tfoot th,.ops-unified-template .ops-print-table tfoot td { height:6mm; color:#000; background:#f2f2f2; font-size:7.7pt; }
.ops-unified-template .ops-print-table tfoot tr.grand th,.ops-unified-template .ops-print-table tfoot tr.grand td { color:#fff; background:#000; }

.ops-unified-template .ops-software-section .ops-print-software { display:block; min-height:12mm; height:12mm; border:0; padding:1.55mm 2.55mm; }
.ops-unified-template .ops-software-section .ops-print-software b { display:none; }
.ops-unified-template .ops-software-section .ops-print-software span { display:block; padding:0; color:#000; font-size:7.9pt; font-weight:750; line-height:1.2; }
.ops-unified-template .ops-note-section .ops-print-note { height:14mm; border:0; padding:1.65mm 2.55mm; color:#000; font-size:7.7pt; line-height:1.15; }
.ops-unified-template .ops-note-section .ops-print-note b { display:none; }
.ops-unified-template .ops-note-section .ops-print-note span { margin:0; color:#000; }
.ops-unified-template .ops-sign-section .ops-print-signatures { height:22mm; border:0; }
.ops-unified-template .ops-print-signatures > div { padding:2.1mm 2.55mm; }
.ops-unified-template .ops-print-signatures > div + div { border-left:.32mm solid #000; }
.ops-unified-template .ops-print-signatures b { color:#000; font-size:8.9pt; }
.ops-unified-template .ops-print-signatures span,.ops-unified-template .ops-print-signatures em,.ops-unified-template .ops-print-signatures small { color:#000; }

.ops-document-page.ops-unified-template.computer-spec .ops-form-section .ops-print-meta { height:30mm; }
.ops-document-page.ops-unified-template.computer-spec .ops-items-section .ops-print-table { height:130mm; }
.ops-document-page.ops-unified-template.computer-spec .ops-software-section .ops-print-software { height:12mm; }
.ops-document-page.ops-unified-template.computer-spec .ops-note-section .ops-print-note { height:12mm; }
.ops-document-page.ops-unified-template.computer-spec .ops-sign-section .ops-print-signatures { height:21mm; }
.ops-document-page.ops-unified-template[data-ops-type="purchase_order"] .ops-items-section .ops-print-table { height:128mm; }
.ops-document-page.ops-unified-template[data-ops-type="purchase_order"] .ops-sign-section .ops-print-signatures { height:31mm; }
.ops-document-page.ops-unified-template[data-ops-type="purchase_order"] .ops-print-signatures > div { gap:2.4mm; padding-top:2.5mm; padding-bottom:2.5mm; }
.ops-document-page.ops-unified-template[data-ops-type="purchase_order"] .ops-print-signatures span { margin-bottom:1.7mm; }
.ops-document-page.ops-unified-template[data-ops-type="purchase_order"] .ops-print-signatures em { min-height:4.8mm; letter-spacing:.28mm; }
.ops-document-page.ops-unified-template.shipping .ops-form-section .ops-print-meta { height:30mm; }
.ops-document-page.ops-unified-template.shipping .ops-items-section .ops-print-table { height:59mm; }

/* Handwritten operational forms keep their specialised fields, but follow the same black-and-white formal template. */
.ops-handwrite-sheet,.ops-spec-blank-sheet { color:#000; }
.ops-handwrite-header,.ops-handwrite-meta,.ops-handwrite-table th,.ops-handwrite-table td,.ops-handwrite-note,.ops-handwrite-signatures { border-color:#000; }
.ops-handwrite-header strong,.ops-handwrite-meta b,.ops-handwrite-note b,.ops-handwrite-signatures b { color:#000; }
.ops-handwrite-table thead th { color:#fff; background:#000; }
.ops-handwrite-meta i { border-bottom-color:#000; }
.ops-handwrite-table tfoot th { color:#000; background:#f0f0f0; }.ops-handwrite-table tfoot td { color:#000; background:#fff; }
.ops-spec-blank-sheet { color:#000; }

/* Non-billing sheets must keep their own A4 margins; the PS Supplies rule above
   only applies to billing pages.  This also keeps the embedded off-site form
   flush to its A4 canvas before the shared preview scaler is applied. */
.document-page.ops-offsite-document { padding:0; }
.document-page.ops-report-page { padding:12mm; }
.document-page.requisition-document { padding:13mm 13mm 10mm; }

/* The internal requisition uses the same formal print language without touching its data or mobile sharing flow. */
.requisition-document { color:#000; font-family:Tahoma,"Noto Sans Thai","Sarabun Embedded","Sarabun",sans-serif; }
.requisition-document .req-print-header { position:relative; display:flex; height:24mm; min-height:24mm; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; border-bottom:.42mm solid #000; padding:.7mm 5mm; }
.requisition-document .req-print-header::before { content:"PS\A COMPUTER"; position:absolute; left:4mm; top:50%; display:grid; place-items:center; color:#000; font:900 7pt/1 Arial,sans-serif; letter-spacing:1.8px; text-align:center; white-space:pre; transform:translateY(-50%); }
.requisition-document .req-print-header h2,.requisition-document .req-print-header p,.requisition-document .req-print-header .req-print-tax { color:#000; }
.requisition-document .req-print-header h2 { margin:0 0 .35mm; font-size:13.5pt; line-height:1; }
.requisition-document .req-print-header p { margin:.15mm 0; font-size:6.7pt; line-height:1.04; }
.requisition-document .req-print-title { min-height:10mm; margin-top:1.2mm; padding:1.3mm; }
.requisition-document .req-print-title { color:#fff; background:#000; }
.requisition-document .req-print-meta,.requisition-document .req-print-items th,.requisition-document .req-print-items td,.requisition-document .req-print-note,.requisition-document .req-print-signatures { border-color:#000; }
.requisition-document .req-print-meta > div + div,.requisition-document .req-print-signatures > div + div { border-left-color:#000; }
.requisition-document .req-print-items th { color:#fff; background:#000; }
.requisition-document .req-print-items tfoot td { color:#000; background:#f0f0f0; }
.requisition-document .req-print-footer { border-top-color:#000; color:#000; }

@media (max-width:680px) {
  .customer-profile-card { margin:10px 0; padding:12px; }
  .customer-profile-card-head,.customer-profile-card-foot,.customer-profile-warning { align-items:stretch; flex-direction:column; }
  .customer-profile-card-head .button,.customer-profile-card-foot .button { width:100%; }
  .customer-profile-summary { grid-template-columns:1fr; }
  .customer-profile-warning-actions { display:grid; grid-template-columns:1fr 1fr; }
  .customer-manager-card { flex-direction:column; }.customer-manager-actions { width:100%; }.customer-manager-actions button:first-child { flex:1; }
  .customer-modal { width:calc(100% - 12px); max-height:calc(100dvh - 12px); border-radius:15px; }
  .customer-modal form { padding:14px 12px 0; }
  .customer-profile-editor { padding:10px; }
  .customer-profile-editor .form-grid { grid-template-columns:1fr; }
  .customer-profile-editor .field.full { grid-column:auto; }
  .customer-profile-check { min-height:54px; }
  .receipt-pay-later-info { align-items:flex-start; flex-direction:column; }.receipt-pay-later-info span { text-align:left; }
  .modal-actions { position:sticky; bottom:-1px; z-index:3; margin:14px -12px -1px; border-top:1px solid #d7e5ea; padding:10px 12px; background:rgba(255,255,255,.96); }
}
@media (max-width:560px) { .tr-migration-panel { align-items:stretch; flex-direction:column; }.tr-migration-panel .button { width:100%; min-height:42px; }.tr-migration-modal .tr-mcard { width:calc(100vw - 10px); max-height:calc(100dvh - 10px); border-radius:15px; }.tr-migration-toolbar { grid-template-columns:1fr 1fr; padding:10px; }.tr-migration-toolbar input { grid-column:1/-1; grid-row:1; }.tr-migration-toolbar select,.tr-migration-toolbar button { width:100%; }.tr-migration-select-all,.tr-migration-summary { margin-left:10px; margin-right:10px; }.tr-migration-list { padding-left:10px; padding-right:10px; }.tr-migration-row { grid-template-columns:auto 1fr; }.tr-migration-row-date { grid-column:2; }.tr-migration-actions { grid-template-columns:1fr 1fr; padding-left:10px; padding-right:10px; }.tr-migration-actions #trMigrationCancel { display:none; }.tr-migration-actions #trMigrationDelete { grid-column:1/-1; } }

@media (max-width:760px) {
  .document-search-trigger { display:none; }
  .history-heading-actions { align-items:flex-end; flex-direction:column-reverse; gap:5px; }
  .document-search-fab { position:fixed; right:max(13px,env(safe-area-inset-right)); bottom:calc(max(10px,env(safe-area-inset-bottom)) + 121px); z-index:46; display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(255,255,255,.65); border-radius:50%; color:#fff; background:linear-gradient(135deg,#075978,#0792ae); box-shadow:0 8px 22px rgba(2,43,62,.32); font-size:27px; font-weight:900; }
  .save-decision-backdrop,.document-search-backdrop { padding:6px; }
  .save-decision-modal,.document-search-modal { width:100%; max-height:calc(100dvh - 12px); border-radius:16px; }
  .save-decision-head,.document-search-head { padding:16px 14px 13px; }.save-decision-head h3,.document-search-head h3 { font-size:19px; }.document-search-head p { font-size:11px; }
  .save-decision-body { gap:10px; padding:14px; }.save-current-document { padding:10px 11px; }.save-current-document strong { font-size:17px; }
  .save-decision-actions { grid-template-columns:1fr 1fr; padding:11px 12px max(12px,env(safe-area-inset-bottom)); }.save-decision-actions #saveDecisionCancel { grid-column:1/-1; grid-row:2; min-height:38px; }
  .document-search-tools { grid-template-columns:1fr; padding:11px 10px 8px; }.document-search-summary { padding:0 10px 8px; }.document-search-results { padding:4px 10px 10px; }.global-document-card { padding:10px; }.global-document-card-head { display:grid; grid-template-columns:1fr auto; }.document-search-footer { padding-right:10px; padding-left:10px; }.document-search-footer span { display:none; }
}

@media (max-width: 760px) {
  .summary-link-card { grid-template-columns: 1fr; align-items: stretch; padding: 11px; }
  .summary-price-row { grid-template-columns: 1fr; }
  .summary-cost-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .summary-cost-actions .button { width: 100%; justify-content: center; }
  .summary-cost-table { display: block; min-width: 0; }
  .summary-cost-table thead { display: none; }
  .summary-cost-table tbody { display: grid; gap: 10px; }
  .summary-cost-table tr { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; border: 1px solid #cfe0e6; border-left: 4px solid #087b9d; border-radius: 12px; padding: 11px; background: #fff; box-shadow: 0 3px 10px rgba(3,51,82,.06); }
  .summary-cost-table td { display: block; min-width: 0; border: 0; padding: 0; }
  .summary-cost-table td:first-child,.summary-cost-table td:nth-child(2),.summary-cost-table td:last-child { grid-column: 1/-1; }
  .summary-cost-table td:last-child { position: absolute; top: 9px; right: 9px; width: auto; }
  .summary-cost-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; color: #526f7c; font-size: 11px; font-weight: 850; }
  .summary-cost-table td:first-child { padding-right: 37px; }
  .summary-cost-table input { box-sizing: border-box; width: 100%; min-height: 42px; border: 1px solid #d6e4e9; border-radius: 9px; padding: 8px 9px; font-size: 14px; }
  .summary-cost-table .cost-amount,.summary-cost-table .cost-sale-amount,.summary-cost-table .cost-gross-profit { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 42px; border: 1px solid #d6e4e9; border-radius: 9px; padding: 8px 9px; background: #f5fafb; font-size: 14px; }
  .summary-cost-table .cost-amount::before,.summary-cost-table .cost-sale-amount::before,.summary-cost-table .cost-gross-profit::before { margin-bottom: 0 !important; }
  .summary-extra-row { grid-template-columns: 1fr 105px auto; }
  .summary-print-action .button { width: 100%; justify-content: center; min-height: 46px; }
}

/* Sales forms: balanced metadata and matching signature areas (2026-09-06). */
#documentPage #documentMetaBox {
  display: flex; flex-direction: column; justify-content: center;
  gap: 2.5mm; padding: 3mm; line-height: 1.5;
}
#documentPage #documentMetaBox > div:not([hidden]) {
  display: flex; width: 100%; min-width: 0; align-items: baseline;
  justify-content: center; gap: 2.5mm; white-space: normal;
}
#documentPage #documentMetaBox > div[hidden] { display: none; }
#documentPage #documentMetaBox strong { flex: 0 0 auto; line-height: 1.5; }
#documentPage #documentMetaBox span {
  flex: 0 1 auto; min-width: 0; text-align: left; line-height: 1.5;
  white-space: normal; overflow-wrap: anywhere; word-break: normal;
}
#documentPage .quotation-signatures,
#documentPage .delivery-signatures,
#documentPage .billing-signatures {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 33.4mm; border-top: 1px solid #000;
}
#documentPage .billing-signatures > div {
  position: relative; display: flex; box-sizing: border-box; flex-direction: column;
  align-items: center; justify-content: flex-end; padding: 0 1mm 2.2mm; text-align: center;
}
#documentPage .quotation-signatures strong,
#documentPage .delivery-signatures strong,
#documentPage .billing-signatures strong {
  display: block; flex: 0 0 auto; min-height: 4.2mm; line-height: 1.5; font-weight: 600;
}
#documentPage .signature-shop-name {
  margin-bottom: auto; padding-top: 2.5mm; line-height: 1.5;
}
#documentPage .quotation-signatures .print-issuer-sign-img,
#documentPage .delivery-signatures .print-shipper-sign-img,
#documentPage .billing-signatures .print-issuer-sign-img { bottom: 8.5mm; }
#documentPage .quotation-signatures .print-stamp-img,
#documentPage .delivery-signatures .print-stamp-img,
#documentPage .billing-signatures .print-stamp-img {
  top: 53%; max-height: 18mm; max-width: 42mm;
}
#documentPage.type-billing:not(.company-ps-computer) .billing-footer {
  padding: 0; border: 1px solid #000; border-top: 0;
}
#documentPage .billing-note { padding: 2mm; line-height: 1.5; }
#documentPage .billing-note p { margin: 1mm 0 0; line-height: 1.5; }
#documentPage.type-receipt:not(.company-ps-computer) .receipt-footer > p {
  box-sizing: border-box; margin: 0; padding: 2mm 1.5mm 1mm;
  font-size: 9.5pt; line-height: 1.55; text-align: center; overflow-wrap: anywhere;
}
#documentPage #printReceiptNote.single-line { white-space: nowrap; overflow-wrap: normal; }

/* Finance workspace: clear debtor / creditor hierarchy without changing data flows. */
.repair-board-overlay.finance-mode .rb-shell {
  background: linear-gradient(180deg, #f4f8fc 0, #edf4f8 100%);
  font-family: "Sarabun Embedded", "Leelawadee UI", Tahoma, sans-serif;
}
.repair-board-overlay.finance-mode .rb-top,
.repair-board-overlay.finance-mode .rb-columns,
.repair-board-overlay.finance-mode .rb-bottom,
.repair-board-overlay.finance-mode .rb-gate { min-width: 0; }
.repair-board-overlay.finance-mode .rb-columns {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  padding: 16px;
  border: 1px solid #d7e3eb;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 30px rgba(20,55,78,.08);
}
.repair-board-overlay.finance-mode .rb-top { grid-template-columns:minmax(190px,230px) minmax(320px,1fr) minmax(220px,270px); gap:14px; }
.repair-board-overlay.finance-mode .rb-title { font-size:clamp(34px,3.5vw,48px); }
.repair-board-overlay.finance-mode .rb-date-card { font-size:23px; }
.repair-board-overlay.finance-mode .rb-date-card span { font-size:20px; }
.repair-board-overlay.finance-mode .rb-stat-card { gap:7px; padding:12px 17px; font-size:18px; }
.repair-board-overlay.finance-mode .rb-stat-card b { font-size:23px; }
.repair-board-overlay.finance-mode .rb-bottom { display: none; }
.rb-finance-workspace { display: grid; gap: 14px; min-width: 0; color: #17283a; }
.rb-finance-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.rb-finance-kpi {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 116px;
  align-content: center;
  gap: 5px;
  overflow: hidden;
  border: 1px solid #d5e4eb;
  border-radius: 14px;
  padding: 16px 18px 15px 72px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(31,65,86,.07);
}
.rb-finance-kpi::before {
  content: "฿";
  position: absolute;
  top: 20px;
  left: 18px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  color: var(--kpi-color,#087093);
  background: var(--kpi-soft,#e5f5fa);
  font-size: 23px;
  font-weight: 900;
}
.rb-finance-kpi.today { --kpi-color:#1269c5; --kpi-soft:#e8f2ff; }
.rb-finance-kpi.today::before { content:"วันนี้"; font-size:10px; }
.rb-finance-kpi.overdue { --kpi-color:#cf2626; --kpi-soft:#ffeded; border-color:#f2c8c8; }
.rb-finance-kpi.overdue::before { content:"!"; }
.rb-finance-kpi.closed { --kpi-color:#14845d; --kpi-soft:#e4f8ef; }
.rb-finance-kpi.closed::before { content:"✓"; }
.rb-finance-kpi > span { color:#557080; font-size:13px; font-weight:800; line-height:1.3; }
.rb-finance-kpi > b { min-width:0; color:#102f4a; font-size:clamp(22px,2vw,31px); font-weight:900; line-height:1.1; overflow-wrap:anywhere; }
.rb-finance-kpi.overdue > b { color:#c52026; }
.rb-finance-kpi > small { color:#627988; font-size:11px; font-weight:700; line-height:1.35; }
.rb-finance-filters {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  padding: 3px 1px 5px;
  scrollbar-width: thin;
}
.rb-finance-filters button {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  border: 1px solid #c8d9e3;
  border-radius: 999px;
  padding: 7px 11px;
  color:#3a5364;
  background:#fff;
  font-family:inherit;
  font-size:12px;
  font-weight:800;
}
.rb-finance-filters button > span { width:9px; height:9px; border-radius:50%; background:var(--filter-color,#087093); }
.rb-finance-filters button em { min-width:23px; border-radius:999px; padding:2px 6px; color:#496170; background:#edf3f6; font-size:10px; font-style:normal; text-align:center; }
.rb-finance-filters button.active { border-color:#087093; color:#fff; background:#075978; box-shadow:0 4px 11px rgba(7,89,120,.2); }
.rb-finance-filters button.active em { color:#075978; background:#fff; }
.rb-finance-content { display:grid; grid-template-columns:minmax(0,1.58fr) minmax(340px,.72fr); gap:14px; min-width:0; align-items:start; }
.rb-finance-list,
.rb-finance-detail { min-width:0; border:1px solid #d5e2e9; border-radius:14px; background:#fff; box-shadow:0 8px 22px rgba(22,57,79,.07); }
.rb-finance-list { overflow:hidden; }
.rb-finance-list > header { display:flex; min-height:66px; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #dce7ed; padding:12px 16px; }
.rb-finance-list > header small { display:block; color:#64808f; font-size:10px; font-weight:800; letter-spacing:.04em; }
.rb-finance-list > header h3 { margin:2px 0 0; color:#123a58; font-size:19px; line-height:1.2; }
.rb-finance-list > header > b { flex:0 0 auto; border-radius:999px; padding:6px 10px; color:#075978; background:#e7f5f9; font-size:12px; }
.rb-finance-list-head,
.rb-finance-list-row { display:grid; grid-template-columns:minmax(210px,1.4fr) minmax(132px,.75fr) minmax(125px,.62fr) minmax(128px,.62fr); gap:10px; align-items:center; }
.rb-finance-list-head { min-height:38px; padding:7px 15px; color:#607886; background:#f2f6f8; font-size:11px; font-weight:850; }
.rb-finance-list-head span:nth-child(3) { text-align:right; }
.rb-finance-list-body { max-height:calc(100dvh - 430px); min-height:300px; overflow-y:auto; }
.rb-finance-list-row {
  width:100%;
  min-height:70px;
  border:0;
  border-bottom:1px solid #e4ecef;
  padding:11px 15px;
  color:#263d4c;
  background:#fff;
  font-family:inherit;
  text-align:left;
  transition:background .16s ease, box-shadow .16s ease;
}
.rb-finance-list-row:hover { background:#f4fafc; }
.rb-finance-list-row.active { position:relative; z-index:1; background:#eaf6fa; box-shadow:inset 4px 0 #087093; }
.rb-finance-list-row.urgent { background:#fff9f9; }
.rb-finance-list-row.urgent.active { background:#fff0f0; box-shadow:inset 4px 0 #cf2626; }
.rb-finance-list-row.search-focus { outline:4px solid rgba(0,167,214,.26); outline-offset:-4px; }
.rb-finance-list-main { min-width:0; }
.rb-finance-list-main strong,
.rb-finance-list-main small,
.rb-finance-list-due small,
.rb-finance-list-due b,
.rb-finance-list-amount b,
.rb-finance-list-amount small { display:block; min-width:0; }
.rb-finance-list-main strong { overflow:hidden; color:#172f42; font-size:14px; font-weight:900; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.rb-finance-list-main small { margin-top:4px; overflow:hidden; color:#6b808c; font-size:10.5px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.rb-finance-list-due small { color:#718692; font-size:10px; font-weight:750; }
.rb-finance-list-due b { margin-top:3px; color:#314c5c; font-size:12px; font-weight:850; }
.rb-finance-list-row.urgent .rb-finance-list-due b { color:#c52026; }
.rb-finance-list-amount { text-align:right; }
.rb-finance-list-amount b { color:#123a58; font-size:15px; font-weight:900; font-variant-numeric:tabular-nums; }
.rb-finance-list-amount small { color:#6d818d; font-size:9px; font-weight:700; }
.rb-finance-status { display:inline-flex; width:max-content; max-width:100%; align-items:center; gap:6px; border:1px solid color-mix(in srgb,var(--status-color,#087093) 35%,white); border-radius:999px; padding:5px 8px; color:#294456; background:color-mix(in srgb,var(--status-color,#087093) 9%,white); font-size:10px; font-weight:850; line-height:1.15; }
.rb-finance-status i { flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:var(--status-color,#087093); }
.rb-finance-status.large { align-self:flex-start; font-size:11px; }
.rb-finance-list-empty { display:grid; min-height:280px; place-content:center; gap:5px; color:#657c89; text-align:center; }
.rb-finance-list-empty b { color:#29495d; font-size:17px; }
.rb-finance-detail { position:sticky; top:0; overflow:hidden; }
.rb-finance-detail.empty { display:grid; min-height:340px; place-content:center; gap:6px; padding:25px; color:#6a808c; text-align:center; }
.rb-finance-detail.empty strong { color:#23455a; font-size:18px; }
.rb-finance-detail-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:start; border-bottom:1px solid #dce7ed; padding:16px 16px 13px; }
.rb-finance-detail-head small { display:block; color:#5d7989; font-size:10px; font-weight:850; letter-spacing:.05em; }
.rb-finance-detail-head h3 { margin:3px 0 0; color:#102f4a; font-size:20px; line-height:1.25; overflow-wrap:anywhere; }
.rb-finance-detail-head p { margin:4px 0 0; color:#667e8c; font-size:11px; font-weight:750; }
.rb-finance-alert { display:grid; gap:2px; margin:12px 14px 0; border:1px solid #f1bcbc; border-left:5px solid #cf2626; border-radius:9px; padding:9px 10px; color:#8c1c20; background:#fff3f3; }
.rb-finance-alert b { font-size:12px; font-weight:900; }
.rb-finance-alert span { color:#6d3b3d; font-size:10.5px; font-weight:700; }
.rb-finance-amount { display:grid; grid-template-columns:1fr auto auto; gap:5px; align-items:baseline; margin:14px; border-radius:12px; padding:12px 13px; color:#075978; background:linear-gradient(135deg,#e9f7f9,#f3f9fc); }
.rb-finance-amount span { font-size:11px; font-weight:850; }
.rb-finance-amount b { color:#b51f25; font-size:26px; font-weight:900; font-variant-numeric:tabular-nums; }
.rb-finance-amount em { font-size:11px; font-style:normal; font-weight:850; }
.rb-finance-info { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; margin:0; padding:0 15px; }
.rb-finance-info > div { min-width:0; border-bottom:1px solid #e7edef; padding:9px 1px; }
.rb-finance-info > div.full { grid-column:1 / -1; }
.rb-finance-info dt { margin:0 0 3px; color:#708592; font-size:10px; font-weight:800; }
.rb-finance-info dd { margin:0; color:#243e4f; font-size:12.5px; font-weight:800; line-height:1.4; overflow-wrap:anywhere; }
.rb-finance-info dd.danger { color:#c52026; }
.rb-finance-info a { color:#087093; font-weight:900; text-decoration:none; }
.rb-finance-detail-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:14px 15px 16px; }
.rb-finance-detail-actions button,
.rb-finance-status-control select { min-width:0; min-height:40px; border:1px solid #b8cfd9; border-radius:9px; padding:8px 9px; color:#075978; background:#f7fbfc; font-family:inherit; font-size:11.5px; font-weight:850; line-height:1.2; }
.rb-finance-detail-actions button.primary { border-color:#087093; color:#fff; background:#087093; }
.rb-finance-detail-actions button.danger { border-color:#efc0c2; color:#b51f25; background:#fff3f3; }
.rb-finance-detail-actions .rb-supplier-paid { grid-column:1 / -1; }
.rb-finance-detail-actions .rb-supplier-paid.is-paid { border-color:#77b89a; color:#0d704b; background:#eaf8f1; }
.rb-finance-detail-actions .rb-supplier-paid.is-unpaid { border-color:#dfad6e; color:#95520b; background:#fff7e9; }
.rb-finance-status-control { display:grid; grid-column:1 / -1; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; color:#516b79; font-size:11px; font-weight:850; }
.rb-finance-status-control select { width:100%; }

@media (max-width: 1180px) {
  .rb-finance-summary { grid-template-columns:1fr 1fr; }
  .rb-finance-content { grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr); }
  .rb-finance-list-head,
  .rb-finance-list-row { grid-template-columns:minmax(190px,1.25fr) minmax(118px,.7fr) minmax(112px,.6fr); }
  .rb-finance-list-head span:last-child,
  .rb-finance-list-row > .rb-finance-status { display:none; }
}

@media (max-width: 760px) {
  .repair-board-overlay.finance-mode .rb-shell { gap:7px; }
  .repair-board-overlay.finance-mode .rb-top {
    grid-template-columns:minmax(0,1fr) minmax(112px,.62fr);
    grid-template-areas:"title title" "date stats" "actions actions";
    gap:8px;
    min-width:0;
  }
  .repair-board-overlay.finance-mode .rb-title { grid-area:title; }
  .repair-board-overlay.finance-mode .rb-date-card { grid-area:date; }
  .repair-board-overlay.finance-mode .rb-stat-card { grid-area:stats; }
  .repair-board-overlay.finance-mode .rb-actions { grid-area:actions; width:100%; }
  .repair-board-overlay.finance-mode .rb-columns { flex:0 0 auto; width:100%; overflow:visible; padding:9px; border-radius:12px; }
  .repair-board-overlay.finance-mode .rb-title { min-height:50px; font-size:23px; }
  .repair-board-overlay.finance-mode .rb-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); width:100%; overflow:visible; }
  .repair-board-overlay.finance-mode .rb-tabs button { flex:auto; min-width:0; padding:6px 3px; font-size:10.5px; }
  .rb-finance-workspace { gap:10px; }
  .rb-finance-summary { grid-template-columns:1fr 1fr; gap:8px; }
  .rb-finance-kpi { min-height:102px; padding:12px 10px 11px 54px; border-radius:11px; }
  .rb-finance-kpi::before { top:15px; left:10px; width:34px; height:34px; border-radius:10px; font-size:19px; }
  .rb-finance-kpi > span { font-size:11.5px; }
  .rb-finance-kpi > b { font-size:20px; }
  .rb-finance-kpi > small { font-size:9.5px; }
  .rb-finance-filters { margin-right:-9px; margin-left:-9px; padding-right:9px; padding-left:9px; }
  .rb-finance-filters button { min-height:40px; font-size:12px; }
  .rb-finance-content { grid-template-columns:1fr; gap:10px; }
  .rb-finance-list > header { min-height:61px; padding:11px 12px; }
  .rb-finance-list > header h3 { font-size:18px; }
  .rb-finance-list-head { display:none; }
  .rb-finance-list-body { max-height:none; min-height:0; overflow:visible; }
  .rb-finance-list-row { grid-template-columns:minmax(0,1fr) auto; gap:8px 10px; min-height:94px; padding:12px; }
  .rb-finance-list-main strong { font-size:15px; white-space:normal; }
  .rb-finance-list-main small { font-size:11px; white-space:normal; }
  .rb-finance-list-due { grid-column:1; grid-row:2; }
  .rb-finance-list-due b { font-size:13px; }
  .rb-finance-list-amount { grid-column:2; grid-row:1; align-self:start; }
  .rb-finance-list-amount b { font-size:16px; }
  .rb-finance-list-row > .rb-finance-status { display:inline-flex; grid-column:2; grid-row:2; justify-self:end; }
  .rb-finance-detail { position:static; scroll-margin-top:8px; }
  .rb-finance-detail-head { padding:14px 13px 12px; }
  .rb-finance-detail-head h3 { font-size:19px; }
  .rb-finance-amount { margin:12px; }
  .rb-finance-amount b { font-size:24px; }
  .rb-finance-info { grid-template-columns:1fr; padding:0 13px; }
  .rb-finance-info > div.full { grid-column:1; }
  .rb-finance-info dt { font-size:11px; }
  .rb-finance-info dd { font-size:14px; }
  .rb-finance-detail-actions { grid-template-columns:1fr; padding:13px; }
  .rb-finance-detail-actions > *,
  .rb-finance-status-control { grid-column:1 / -1; }
  .rb-finance-detail-actions button,
  .rb-finance-status-control select { min-height:46px; font-size:14px; }
}

@media (max-width: 390px) {
  .rb-finance-summary { grid-template-columns:1fr 1fr; }
  .rb-finance-kpi { min-height:92px; padding-left:49px; }
  .rb-finance-kpi::before { left:8px; width:32px; height:32px; }
  .rb-finance-kpi > b { font-size:18px; }
  .rb-finance-list-row { grid-template-columns:minmax(0,1fr) auto; }
  .rb-finance-status { font-size:9.5px; }
}