:root {
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-soft: #eff6ff;
    --color-accent: #0ea5e9;
    --color-ink: #0f172a;
    --color-muted: #64748b;
    --color-border: #dce6f2;
    --color-surface: #ffffff;
    --color-bg: #f4f7fb;
    --shadow-sm: 0 1px 2px rgba(30, 64, 175, .05);
    --shadow-md: 0 8px 24px rgba(30, 64, 175, .08);
    --radius: 14px;
    --font-sans: "Google Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 19px;
}
button, input, textarea, select { font-family: inherit; }
button, a { cursor: pointer; }
.app-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }
.app-sidebar { background: #fff; border-right: 1px solid var(--color-border); height: 100vh; position: sticky; top: 0; z-index: 20; }
.sidebar-inner { display: flex; flex-direction: column; height: 100%; padding: 20px 14px 16px; }
.app-content { min-width: 0; }
.brand-lockup { align-items: center; border-bottom: 1px solid #e8eef7; color: var(--color-ink); display: inline-flex; gap: 10px; padding: 2px 8px 20px; text-decoration: none; }
.brand-lockup:hover { color: var(--color-primary-dark); }
.brand-mark { align-items: center; background: var(--color-primary); border-radius: 11px; color: #fff; display: inline-flex; font-size: 20px; height: 40px; justify-content: center; width: 40px; }
.brand-lockup strong { display: block; font-size: 13px; letter-spacing: .07em; line-height: 1.15; }
.brand-lockup small { color: var(--color-muted); display: block; font-size: 11px; margin-top: 2px; }
.today-label { color: var(--color-muted); font-size: 12px; }
.btn-new-voucher { margin-top: 18px; width: 100%; }
.sidebar-footer { margin-top: auto; padding: 0 0 2px; }
.sidebar-account-card { background: #f8fbff; border: 1px solid #dbe6f5; border-radius: 14px; box-shadow: 0 5px 14px rgba(30, 64, 175, .05); padding: 12px; }
.sidebar-account-head { align-items: center; display: flex; gap: 10px; min-width: 0; }
.sidebar-avatar { align-items: center; background: #e4efff; border: 1px solid #ccddfa; border-radius: 11px; color: var(--color-primary); display: flex; flex: 0 0 34px; font-size: 16px; height: 34px; justify-content: center; width: 34px; }
.sidebar-user { color: var(--color-ink); display: block; min-width: 0; }
.sidebar-user strong { display: block; font-size: 12px; font-weight: 700; line-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account-meta { border-top: 1px solid #e5edf8; display: grid; gap: 8px; margin-top: 11px; padding-top: 10px; }
.sidebar-footer .sidebar-status,
.sidebar-footer .today-label { align-items: center; display: flex; font-size: 11px; gap: 8px; line-height: 16px; }
.sidebar-footer .sidebar-status { color: #475569; }
.sidebar-footer .today-label { color: var(--color-muted); }
.sidebar-footer .today-label .me-1 { margin-right: 0 !important; }
.sidebar-footer .sidebar-status .status-dot { flex: 0 0 7px; }
.sidebar-footer .today-label i,
.sidebar-footer .sidebar-logout i { flex: 0 0 14px; text-align: center; }
.sidebar-logout { align-items: center; border-top: 1px solid #e5edf8; color: var(--color-primary-dark); display: flex; font-size: 11px; gap: 8px; margin-top: 11px; padding-top: 10px; text-decoration: none; transition: color .2s ease; }
.sidebar-logout:hover { color: #1e40af; }
.sidebar-logout:focus-visible { border-radius: 6px; outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn-primary { --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary-dark); --bs-btn-hover-border-color: var(--color-primary-dark); --bs-btn-active-bg: var(--color-primary-dark); --bs-btn-active-border-color: var(--color-primary-dark); }
.btn { border-radius: 9px; font-weight: 600; min-height: 38px; transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible, .nav-link:focus-visible { box-shadow: 0 0 0 3px rgba(37, 99, 235, .22); outline: 2px solid var(--color-primary); outline-offset: 1px; }
.app-nav { display: flex; flex-direction: column; gap: 5px; margin-top: 20px; }
.app-nav .nav-link { align-items: center; background: transparent; border: 0; border-left: 3px solid transparent; border-radius: 8px; color: var(--color-muted); display: flex; font-size: 13px; min-height: 44px; padding: 10px 12px; text-align: left; width: 100%; }
.app-nav .nav-link i { margin-right: 7px; }
.app-nav .nav-link:hover { background: #f3f7ff; color: var(--color-primary-dark); }
.app-nav .nav-link.active { background: #eaf2ff; border-left-color: var(--color-primary); color: var(--color-primary-dark); font-weight: 700; }
.page-intro { align-items: center; display: flex; justify-content: space-between; gap: 18px; }
.eyebrow, .section-kicker { color: var(--color-primary); font-size: 10px; font-weight: 700; letter-spacing: .13em; line-height: 1.2; }
.page-title { font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: -.02em; }
.page-subtitle { color: var(--color-muted); font-size: 13px; }
.intro-status { align-items: center; background: #fff; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-muted); display: flex; font-size: 12px; gap: 8px; padding: 8px 12px; white-space: nowrap; }
.status-dot { background: #16a34a; border-radius: 50%; box-shadow: 0 0 0 4px #dcfce7; height: 7px; width: 7px; }
.stat-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-card { align-items: center; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); display: flex; gap: 12px; min-height: 93px; padding: 16px 18px; }
.stat-icon { align-items: center; border-radius: 12px; display: flex; flex: 0 0 42px; font-size: 20px; height: 42px; justify-content: center; }
.stat-icon.teal { background: #e0f2fe; color: #0369a1; }
.stat-icon.amber { background: #dbeafe; color: #1d4ed8; }
.stat-icon.blue { background: #e0e7ff; color: #4338ca; }
.stat-icon.violet { background: #eff6ff; color: #2563eb; }
.stat-label, .stat-card small { color: var(--color-muted); display: block; font-size: 11px; }
.stat-card strong { display: inline-block; font-size: 13px; line-height: 19px; margin-right: 5px; }
.stat-card small { display: inline-block; }
.stepper { align-items: center; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); display: flex; gap: 12px; padding: 14px 18px; }
.step { align-items: center; display: flex; flex: 1; gap: 9px; min-width: 0; }
.step > span { align-items: center; background: #edf3f4; border-radius: 50%; color: var(--color-muted); display: flex; flex: 0 0 30px; font-size: 12px; font-weight: 700; height: 30px; justify-content: center; }
.step.active > span { background: var(--color-primary); color: #fff; }
.step strong, .step small { display: block; }
.step strong { font-size: 12px; }
.step small { color: var(--color-muted); font-size: 10px; margin-top: 1px; }
.step-line { background: var(--color-border); flex: 0 0 34px; height: 1px; }
.form-card, .preview-sidebar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.form-card { padding: 22px; }
.form-card-heading, .preview-toolbar { align-items: flex-start; display: flex; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.form-card-heading h2, .preview-toolbar h2 { font-size: 14px; font-weight: 700; line-height: 19px; margin: 4px 0 0; }
.form-label { color: #334155; font-size: 11px; font-weight: 600; line-height: 19px; margin-bottom: 6px; }
.form-label.required::after { color: #dc2626; content: " *"; }
.form-control, .form-select, .input-group-text { border-color: #d7e1ef; min-height: 40px; }
.form-control, .form-select { color: var(--color-ink); font-size: 13px; line-height: 19px; }
.form-control::placeholder { color: #a3b2b9; }
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.form-control:focus, .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .13); }
.input-group-text { background: #f8fafc; color: var(--color-muted); }
.form-text, .section-help { color: var(--color-muted); font-size: 10px; line-height: 19px; }
.section-help { margin: -8px 0 14px; }
.validation-popup-list { margin: 0; padding-left: 1.25rem; text-align: left; }
.validation-popup-list li + li { margin-top: 8px; }
.validation-popup-list a { color: var(--color-primary-dark); }
.badge-muted { background: #eef2f7; color: #526174; font-weight: 500; }
.expense-table-wrap { border: 1px solid var(--color-border); border-radius: 10px; }
.expense-table { margin-bottom: 0; min-width: 1040px; }
.expense-table th { background: #f4f7fb; border-bottom-color: var(--color-border); color: #526174; font-size: 10px; font-weight: 700; letter-spacing: .03em; line-height: 19px; padding: 10px 8px; text-transform: uppercase; }
.expense-table td { border-bottom-color: #e8eef7; padding: 8px; }
.expense-table tbody tr:last-child td { border-bottom: 0; }
.expense-table .form-control { min-height: 36px; padding: 6px 8px; }
.btn-icon { align-items: center; background: #fff; border: 1px solid #f2c7c7; color: #c24141; display: inline-flex; height: 34px; justify-content: center; min-height: 34px; padding: 0; width: 34px; }
.btn-icon:hover { background: #fff2f2; border-color: #e28a8a; color: #a52222; }
.purpose-block { border-top: 1px solid #e8eef7; padding-top: 16px; }
.amount-summary { background: #f8fafc; border: 1px solid var(--color-border); border-radius: 11px; display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }
.amount-summary > div { border-right: 1px solid var(--color-border); padding: 12px 14px; }
.amount-summary > div:last-child { border-right: 0; }
.amount-summary span, .amount-summary strong { display: block; }
.amount-summary span { color: var(--color-muted); font-size: 11px; }
.amount-summary strong { font-size: 16px; margin-top: 3px; }
.amount-summary .net { background: #e8f1ff; grid-column: 1 / -1; border-right: 0; display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; }
.amount-summary .net span { color: #1e40af; font-weight: 700; }
.amount-summary .net strong { color: #1d4ed8; font-size: 20px; margin-top: 0; }
.form-actions { border-top: 1px solid var(--color-border); padding-top: 18px; }
.form-column { font-size: 14px; line-height: 19px; }
.form-column .section-kicker { font-size: 10px; line-height: 19px; }
.form-column .form-card-heading h2 { font-size: 14px; line-height: 19px; }
.form-column .form-label { display: block; font-size: 11px; line-height: 19px; overflow-wrap: anywhere; white-space: normal; }
.form-column .form-control, .form-column .form-select { font-size: 13px; line-height: 19px; }
.form-column .form-text, .form-column .section-help { font-size: 10px; line-height: 19px; }
.form-column .form-check-label { font-size: 13px; line-height: 19px; }
.form-column .expense-table th { font-size: 10px; line-height: 19px; }
.form-column .expense-table .form-control { font-size: 13px; line-height: 19px; }
.form-column .amount-summary span { font-size: 10px; line-height: 19px; }
.form-column .amount-summary strong { font-size: 13px; line-height: 19px; }
.form-column .btn, .form-column .badge { font-size: 13px; line-height: 19px; }
.document-control-fields { row-gap: 16px; }
.document-control-fields > [class*="col-"] { min-width: 0; }
.payment-options { align-items: center; display: flex; gap: 1.5rem; min-height: 40px; padding: 0 4px; }
.payment-options .form-check { align-items: center; display: flex; gap: 8px; margin: 0; padding-left: 0; }
.payment-options .form-check-input { flex: 0 0 auto; margin: 0; }
.preview-sidebar { padding: 16px; position: sticky; top: 16px; }
.preview-toolbar { margin-bottom: 14px; }
.voucher-preview {
    --pv-line: #465156;
    /* Document grid. Accounting columns are grouped into equal code and amount widths. */
    --pv-top-columns: 32.5% 52% 15.5%;
    --pv-control-columns: 22% 17% 25.4230769% 35.5769231%;
    --pv-particular-columns: 58% 12% 14.5% 15.5%;
    --pv-accounting-columns: 13.5% 16.5% 13.5% 16.5% 13.5% 10% 16.5%;
    aspect-ratio: 210 / 297;
    background: #fff;
    box-shadow: 0 7px 24px rgba(21, 54, 63, .12);
    color: #323a3c;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.15;
    overflow: hidden;
    padding: 3.8%;
}
.pv-paper-header { align-items: flex-start; display: grid; grid-template-columns: 1fr 31%; height: 8.2%; padding: .8% 0 1.5% 3.5%; }
.pv-company { text-align: center; }
.pv-company strong { display: block; font-size: 16px; letter-spacing: .015em; line-height: 1.25; white-space: nowrap; }
.pv-company span { display: block; font-size: 16px; font-weight: 700; letter-spacing: .11em; margin-top: .8%; white-space: nowrap; }
.pv-document-meta { border: 1px solid var(--pv-line); font-size: 16px; }
.pv-document-meta > div { display: grid; grid-template-columns: 40% 60%; min-height: 2.15em; }
.pv-document-meta > div + div { border-top: 1px solid var(--pv-line); }
.pv-document-meta small, .pv-document-meta strong { align-items: center; display: flex; line-height: 1; min-width: 0; padding: 1px 3px; }
.pv-document-meta small { font-size: 16px; justify-content: center; }
.pv-document-meta strong { border-left: 1px solid var(--pv-line); font-size: 16px; font-weight: 400; justify-content: flex-end; overflow: hidden; white-space: nowrap; }
.pv-document-frame { border: 1px solid var(--pv-line); height: 91.8%; overflow: hidden; }
.pv-document-frame * { min-width: 0; }
.pv-top-control { display: grid; grid-template-columns: var(--pv-top-columns); height: 8.5%; }
.pv-signatures { display: grid; grid-template-columns: repeat(3, 1fr); }
.pv-signatures span { align-items: flex-end; border-right: 1px solid var(--pv-line); display: flex; font-size: 9px; justify-content: center; line-height: 12px; padding: 2px; white-space: nowrap; }
.pv-signatures span::before { border-top: 1px solid var(--pv-line); bottom: 19px; content: ""; left: 0; position: absolute; right: 0; }
.pv-signatures span { position: relative; }
.pv-control-matrix { display: grid; grid-template-columns: var(--pv-control-columns); grid-template-rows: 42% 58%; min-width: 0; }
.pv-control-head { border-bottom: 1px solid var(--pv-line); display: grid; grid-column: 1 / 4; grid-template-columns: 34.15% 25.85% repeat(4, 10%); }
.pv-control-head span { align-items: center; border-right: 1px solid var(--pv-line); display: flex; font-size: 16px; justify-content: center; letter-spacing: -.16em; line-height: 1; min-width: 0; overflow: hidden; padding: 0 2px; text-align: center; white-space: nowrap; }
.pv-issued { align-items: stretch; border-right: 1px solid var(--pv-line); display: grid; grid-column: 1; grid-row: 2; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; overflow: hidden; padding: 2px; text-align: center; }
.pv-issued > * { max-width: 100%; }
.pv-issued strong { align-self: center; justify-self: center; }
.pv-issued small { align-self: end; justify-self: center; }
.pv-issued strong, .pv-issued small { font-size: 16px; font-weight: 400; letter-spacing: -.14em; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-date-code { border-right: 1px solid var(--pv-line); display: grid; grid-column: 2 / 4; grid-row: 2; grid-template-columns: 38% 62%; grid-template-rows: 1fr 1fr; }
.pv-date-code > * { align-items: center; display: flex; font-size: 16px; justify-content: center; line-height: 1; min-width: 0; overflow: hidden; padding: 1px; text-align: center; }
.pv-date-code > :nth-child(1), .pv-date-code > :nth-child(2) { border-bottom: 1px solid var(--pv-line); }
.pv-date-code strong, .pv-date-code em { font-style: normal; font-weight: 400; white-space: nowrap; }
.pv-condition { border-right: 1px solid var(--pv-line); display: grid; grid-column: 4; grid-row: 1 / 3; grid-template-rows: 27% 36.5% 36.5%; min-width: 0; padding: 0; }
.pv-condition > small { align-items: center; border-bottom: 1px solid var(--pv-line); display: flex; font-size: 16px; line-height: 1; min-width: 0; overflow: hidden; padding: 1px 4px; white-space: normal; }
.pv-condition > span { align-items: center; display: flex; font-size: 16px; line-height: 1; min-width: 0; overflow: hidden; padding: 1px 4px; white-space: normal; }
.pv-condition > span + span { border-top: 1px solid var(--pv-line); }
.pv-condition .condition-mark { align-items: center; border: 1px solid currentColor; display: inline-flex; flex: 0 0 12px; height: 12px; justify-content: center; margin-right: 3px; text-align: center; width: 12px; }
.pv-condition .condition-mark.is-checked::after { content: "✓"; font-size: 11px; font-weight: 700; line-height: 1; }
.pv-receiver { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-receiver > div { display: flex; flex-direction: column; min-width: 0; }
.pv-receiver > div + div { border-left: 1px solid var(--pv-line); }
.pv-receiver span { align-items: center; border-top: 1px solid var(--pv-line); display: flex; flex-direction: column; justify-content: center; margin-top: auto; min-height: 36%; min-width: 0; padding: 2px; text-align: center; }
.pv-receiver small, .pv-receiver strong { font-size: 16px; font-weight: 400; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-receiver small { letter-spacing: -.1em; text-align: center; white-space: nowrap; }
.pv-particulars-head, .pv-particulars-body { border-top: 1px solid var(--pv-line); display: grid; grid-template-columns: var(--pv-particular-columns); }
.pv-particulars-head { font-size: 16px; height: 2.2%; text-align: center; }
.pv-particulars-head > * { align-items: center; display: flex; justify-content: center; line-height: 1; min-width: 0; overflow: hidden; padding: 0 2px; text-align: center; text-overflow: clip; white-space: nowrap; }
.pv-particulars-head > *:not(:last-child) { border-right: 1px solid var(--pv-line); }
.pv-particulars-body { height: 40%; }
.pv-narrative { border-right: 1px solid var(--pv-line); font-size: 16px; overflow: hidden; padding: 10px 5px; position: relative; }
.pv-narrative small { font-size: 16px; }
.pv-lines { margin-top: 4%; }
.pv-lines .account-line { font-weight: 700; }
.pv-lines > div { font-size: 16px; line-height: 1.25; margin-bottom: 4px; overflow: hidden; }
.pv-lines > div > span:first-child { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-project { display: block; font-size: 13px; line-height: 19px; margin-left: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-narrative p { font-size: 16px; line-height: 1.35; margin: 4% 8% 0 18%; max-height: 28%; overflow: hidden; white-space: pre-line; }
.pv-references { font-size: 16px; line-height: 1.25; margin: 3% 8% 0 18%; max-height: 12%; overflow: hidden; }
.pv-references > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-wht-detail { display: grid; font-size: 16px; gap: 7px 8px; grid-template-columns: 1fr auto; margin: 5% 8% 0 22%; }
.pv-wht-detail > div { column-gap: 8px; display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; }
.pv-wht-detail span, .pv-wht-detail strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-wht-detail strong { font-weight: 400; text-align: right; }
.pv-wht-detail .net { border-bottom: 3px double var(--pv-line); border-top: 1px solid var(--pv-line); padding-bottom: 3px; padding-top: 5px; }
.pv-to { bottom: 10px; display: flex; font-size: 16px; gap: 8%; left: 5px; position: absolute; right: 5px; }
.pv-to strong { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-side-column { border-right: 1px solid var(--pv-line); font-size: 16px; line-height: 1.4; overflow: hidden; padding: 2.75em 2% 0; text-align: center; }
.pv-side-column:last-child { border-right: 0; }
.pv-side-amount { padding-top: calc(2.75em + 10.25mm); text-align: right; }
.pv-baht-total { align-items: center; border-top: 1px solid var(--pv-line); display: flex; font-size: 16px; height: 3.3%; justify-content: space-between; padding: 0 1.6%; }
.pv-accounting-head, .pv-accounting-body > div, .pv-accounting-total { border-top: 1px solid var(--pv-line); display: grid; grid-template-columns: var(--pv-accounting-columns); text-align: center; }
.pv-accounting-head { font-size: 16px; height: 5.7%; }
.pv-accounting-head span, .pv-accounting-body > div > *, .pv-accounting-total > * { align-items: center; border-right: 1px solid var(--pv-line); display: flex; font-size: 16px; justify-content: center; line-height: 1.1; min-width: 0; overflow: hidden; padding: 1px; }
.pv-accounting-head span:last-child, .pv-accounting-body > div > *:last-child, .pv-accounting-total > *:last-child { border-right: 0; }
.pv-accounting-body { font-size: 16px; height: 19.8%; }
.pv-accounting-body > div { height: 12.5%; }
.pv-accounting-body > div + div { border-top: 1px solid var(--pv-line); }
.pv-accounting-body strong { font-weight: 400; justify-content: flex-end; }
.pv-accounting-total { font-size: 16px; height: 3.3%; }
.pv-accounting-total > :nth-child(1) { justify-content: flex-start; padding-left: 7%; }
.pv-accounting-total > :nth-child(2), .pv-accounting-total > :nth-child(4), .pv-accounting-total > :nth-child(7) { justify-content: flex-end; }
.pv-footer { border-top: 1px solid var(--pv-line); display: grid; grid-template-columns: 64% 36%; height: 17.2%; }
.pv-departments { border-right: 1px solid var(--pv-line); display: grid; grid-template-rows: 11% 28% 11% 11% 28% 11%; }
.pv-dept-title { align-items: center; border-bottom: 1px solid var(--pv-line); display: flex; font-size: 16px; line-height: 1; padding: 0 2px; white-space: nowrap; }
.pv-sign-area, .pv-sign-labels { display: grid; grid-template-columns: repeat(3, 1fr); }
.pv-sign-area { border-bottom: 1px solid var(--pv-line); }
.pv-sign-area span, .pv-sign-labels span { border-right: 1px solid var(--pv-line); }
.pv-sign-area span:last-child, .pv-sign-labels span:last-child { border-right: 0; }
.pv-sign-labels { border-bottom: 1px solid var(--pv-line); text-align: center; }
.pv-sign-labels:last-child { border-bottom: 0; }
.pv-sign-labels span { align-items: center; display: flex; font-size: 16px; justify-content: center; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.pv-remarks { overflow: hidden; padding: 2px; position: relative; }
.pv-remarks > strong { display: block; font-size: 16px; line-height: 1; white-space: nowrap; }
.pv-remarks p { font-size: 16px; margin: 3px 2px; max-height: 28%; overflow: hidden; white-space: pre-line; }
.pv-bank { display: flex; font-size: 16px; justify-content: space-between; margin: 14% 6% 0; }
.pv-bank em { font-style: normal; white-space: nowrap; }
.preview-note { align-items: flex-start; color: var(--color-muted); display: flex; font-size: 16px; gap: 7px; }
.preview-note i { color: var(--color-primary); margin-top: 2px; }

/* UI typography scale: labels stay compact, while entered and calculated values stay readable. */
body { font-size: 14px; line-height: 19px; }
.stat-card strong, .amount-summary strong { font-size: 13px; line-height: 19px; }
.amount-summary .net strong { font-size: 13px; line-height: 19px; }
.voucher-preview { font-size: 14px; line-height: 19px; }
.voucher-preview * { letter-spacing: normal; }
.pv-company strong, .pv-company span, .pv-control-head span, .pv-issued strong, .pv-issued small, .pv-receiver small, .pv-sign-labels span { letter-spacing: normal; }
.pv-company strong { font-size: 18px; line-height: 22px; }
.pv-company span { font-size: 17px; line-height: 21px; }
.pv-document-meta { font-size: 10px; line-height: 19px; }
.pv-document-meta small { font-size: 10px; line-height: 19px; }
.pv-document-meta strong { font-size: 13px; line-height: 19px; }
.pv-control-head span, .pv-particulars-head, .pv-accounting-head, .pv-dept-title, .pv-sign-labels span, .pv-remarks > strong { font-size: 10px; line-height: 19px; }
.pv-issued strong, .pv-date-code strong, .pv-date-code em, .pv-condition > span, .pv-receiver strong { font-size: 13px; line-height: 19px; }
.pv-issued small, .pv-date-code > small, .pv-condition > small, .pv-receiver small { font-size: 10px; line-height: 19px; }
.pv-issued strong { font-size: 11px; line-height: 14px; }
.pv-condition > span { font-size: 10px; line-height: 14px; }
.pv-date-code > * { line-height: 19px; }
.pv-narrative { font-size: 13px; line-height: 19px; }
.pv-narrative small { font-size: 10px; line-height: 19px; }
.pv-lines > div, .pv-narrative p, .pv-references, .pv-wht-detail, .pv-to, .pv-side-column, .pv-baht-total, .pv-accounting-body, .pv-accounting-total, .pv-remarks p, .pv-bank { font-size: 13px; line-height: 19px; }
.pv-project { font-size: 13px; line-height: 19px; }
.pv-accounting-head span { font-size: 10px; line-height: 19px; }
.pv-accounting-body > div > *, .pv-accounting-total > * { font-size: 13px; line-height: 19px; }
.preview-note { font-size: 10px; line-height: 19px; }
.history-toolbar-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.history-table { margin-bottom: 0; }
.history-table th { background: #f4f7fb; color: #526174; font-size: 10px; font-weight: 700; line-height: 19px; white-space: nowrap; }
.history-table td { font-size: 13px; line-height: 19px; vertical-align: middle; }
.history-table .history-func-cell { max-width: 150px; white-space: normal; overflow-wrap: anywhere; }
.history-table .history-date-cell, .history-table .history-total-cell { white-space: nowrap; }
.history-table .history-code-cell, .history-table .history-project-cell { max-width: 260px; white-space: normal; overflow-wrap: anywhere; }
.history-table .history-code-cell { font-variant-numeric: tabular-nums; }
.history-table .empty-state { color: var(--color-muted); padding: 40px 10px; text-align: center; }
.export-dialog { color: var(--color-ink); font-size: 13px; }
.export-dialog .export-filter-label { color: #334155; display: block; font-size: 12px; font-weight: 700; margin-bottom: 7px; }
.export-dialog .export-filter-help { color: var(--color-muted); display: block; font-size: 11px; line-height: 16px; margin-top: 5px; }
.export-dialog .form-control:disabled { background: #f8fafc; cursor: not-allowed; }
.payee-editor-card { position: sticky; top: 16px; }
.payee-table { margin-bottom: 0; }
.payee-table th { background: #f4f7fb; color: #526174; font-size: 10px; font-weight: 700; line-height: 19px; white-space: nowrap; }
.payee-table td { font-size: 13px; line-height: 19px; vertical-align: middle; }
.payee-table .empty-state { color: var(--color-muted); padding: 48px 10px; text-align: center; }
.account-number { color: #334155; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.history-actions { display: inline-flex; gap: 5px; }
.history-actions .btn { font-size: 11px; min-height: 31px; padding: 4px 8px; }
.swal2-popup { font-family: var(--font-sans) !important; }
.swal2-confirm { background: var(--color-primary) !important; }

@media (max-width: 1199.98px) {
    .preview-sidebar { position: static; }
    .payee-editor-card { position: static; }
}

@media (min-width: 1200px) and (max-width: 1499.98px) {
    #form-view > .row > .form-column,
    #form-view > .row > .preview-column { flex: 0 0 100%; max-width: 100%; }
}

@media (max-width: 991.98px) {
    .app-shell { display: block; }
    .app-sidebar { border-bottom: 1px solid var(--color-border); border-right: 0; height: auto; position: sticky; }
    .sidebar-inner { align-items: center; display: grid; gap: 8px 12px; grid-template-columns: auto 1fr auto; height: auto; padding: 8px 12px 0; }
    .brand-lockup { border-bottom: 0; padding: 0; }
    .btn-new-voucher { grid-column: 3; margin-top: 0; width: auto; }
    .app-nav { flex-direction: row; grid-column: 1 / -1; margin-top: 0; }
    .app-nav .nav-link { border-bottom: 3px solid transparent; border-left: 0; border-radius: 0; min-height: 38px; padding: 7px 12px 8px; width: auto; }
    .app-nav .nav-link.active { border-bottom-color: var(--color-primary); border-left-color: transparent; }
    .sidebar-footer { display: none; }
    .preview-sidebar { overflow-x: auto; }
    .voucher-preview { min-width: 720px; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .step small { display: none; }
    .stepper { gap: 8px; }
    .step-line { flex-basis: 18px; }
}
@media (max-width: 575.98px) {
    body { font-size: 14px; line-height: 19px; }
    .sidebar-inner { padding-left: 12px; padding-right: 12px; }
    .brand-mark { height: 34px; width: 34px; }
    .brand-lockup { gap: 8px; }
    .brand-lockup strong { font-size: 11px; }
    .brand-lockup small { font-size: 9px; }
    .btn-new-voucher { font-size: 11px; padding-left: 9px; padding-right: 9px; }
    .app-nav .nav-link { font-size: 12px; padding-left: 9px; padding-right: 9px; }
    .page-intro { align-items: flex-start; flex-direction: column; }
    .intro-status { align-self: flex-start; }
    .stat-grid { gap: 9px; }
    .stat-card { min-height: 82px; padding: 11px; }
    .stat-icon { flex-basis: 34px; height: 34px; font-size: 16px; }
    .stat-card strong { font-size: 17px; }
    .stepper { padding: 10px; }
    .step { gap: 5px; }
    .step > span { flex-basis: 25px; height: 25px; }
    .step strong { font-size: 10px; }
    .step-line { flex-basis: 10px; }
    .form-card { padding: 16px 13px; }
    .form-card-heading h2, .preview-toolbar h2 { font-size: 14px; line-height: 19px; }
    .amount-summary { grid-template-columns: repeat(2, 1fr); }
    .amount-summary > div { border-bottom: 1px solid var(--color-border); }
    .amount-summary > div:nth-child(2) { border-right: 0; }
    .amount-summary .net { grid-column: 1 / -1; border-bottom: 0; }
    .form-actions { align-items: stretch; flex-direction: column; }
    .form-actions > div { display: flex; }
    .form-actions .btn { flex: 1; font-size: 11px; }
    .history-filters .btn { min-width: 40px; }
}

@media (min-width: 1200px) {
    .form-column .form-card { padding: 18px; }
    .form-column .row { --bs-gutter-x: .8rem; }
    .preview-column .preview-sidebar { max-width: 980px; }
    .form-column .expense-table-wrap { overflow: visible; }
    .form-column .expense-table { display: block; min-width: 0; width: 100%; }
    .form-column .expense-table thead { display: none; }
    .form-column .expense-table tbody { display: block; }
    .form-column .expense-table .line-row { column-gap: 10px; display: grid; row-gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; padding: 12px; }
    .form-column .expense-table .line-row + .line-row { border-top: 1px solid var(--color-border); }
    .form-column .expense-table td { border: 0; display: block; min-width: 0; padding: 0; }
    .form-column .expense-table td::before { color: #526174; display: block; font-size: 11px; font-weight: 700; letter-spacing: .03em; margin-bottom: 4px; }
    .form-column .expense-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
    .form-column .expense-table td:nth-child(1)::before { content: "ACCOUNT CODE"; }
    .form-column .expense-table td:nth-child(2) { grid-column: 1 / 3; grid-row: 2; }
    .form-column .expense-table td:nth-child(2)::before { content: "ชื่อโครงการ"; }
    .form-column .expense-table td:nth-child(3) { grid-column: 1 / 3; grid-row: 3; }
    .form-column .expense-table td:nth-child(3)::before { content: "รายละเอียด"; }
    .form-column .expense-table td:nth-child(4) { grid-column: 1; grid-row: 4; }
    .form-column .expense-table td:nth-child(4)::before { content: "INV #"; }
    .form-column .expense-table td:nth-child(5) { grid-column: 2; grid-row: 4; }
    .form-column .expense-table td:nth-child(5)::before { content: "PO #"; }
    .form-column .expense-table td:nth-child(6) { grid-column: 2; grid-row: 1; }
    .form-column .expense-table td:nth-child(6)::before { content: "ยอดรายการ"; }
    .form-column .expense-table td:nth-child(7) { align-self: end; grid-column: 3; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}