/* ClaimReady — The Purchase Journal. The task stays plain; the material carries the brand. */
:root {
  --bg: #f2efe6;
  --paper: #fffdf7;
  --ink: #203b31;
  --muted: #626e61;
  --line: #d7d9ca;
  --green: #245c46;
  --green-dark: #183e31;
  --tint: #e6ecdf;
  --amber: #865d2e;
  --amber-tint: #f5ead7;
  --radius: 7px;
  --clay: #bc744a;
}
body { background: var(--bg); }
::selection { background: #d9dfbb; color: #243d2f; }
.topbar { min-height: 108px; padding: 20px 44px; gap: 28px; background: #f9f6ed; }
.brand { gap: 13px; letter-spacing: 0; }
.brand-mark { width: 58px; height: 58px; background: transparent; border-radius: 0; transform: rotate(-4deg); transition: transform 180ms ease-out; }
.brand-mark img { display: block; width: 100%; height: 100%; }
.brand:hover .brand-mark { transform: rotate(0); }
.brand-wordmark { font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif; font-size: 31px; font-weight: 700; letter-spacing: -1.2px; line-height: 1.08; }
.brand-caption { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif; font-size: 10px; line-height: 1.5; font-weight: 500; margin-top: 6px; letter-spacing: 1px; }
.app-navigation { margin-left: 12px; gap: 22px; }
.app-navigation button { padding: 12px 0 10px; border-radius: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 13px; }
.app-navigation button:hover { background: transparent; color: var(--green); }
.app-navigation button[aria-pressed=true] { border-bottom-color: var(--green); background: transparent; }
.header-actions { gap: 18px; }
.demo-badge { font-size: 11px; }
.demo-badge>span { background: #af7f50; }
.language-button { min-height: 44px; border-radius: 5px; background: #fffcf4; border-color: #bfc8b7; }
.text-button { font-size: 12px; }
.shell { padding: 32px 44px 0; }
.workspace-label { font-size: 11px; margin-bottom: 13px; }
.page-heading h1, .admin-page-heading h1 { font-family: Georgia, 'Iowan Old Style', 'Songti SC', 'STSong', serif; font-size: 37px; font-weight: 600; letter-spacing: -1px; line-height: 1.3; }
.page-heading { display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: 18px 38px; align-items: center; margin-bottom: 28px; }
.page-heading>div { grid-column: 1; grid-row: 1; }
.page-heading .primary { grid-column: 1; grid-row: 2; justify-self: start; align-self: start; width: fit-content; margin-top: 0; }
.page-heading p { font-size: 13px; color: #596854; margin-top: 12px; }
.desk-scene { position: relative; margin: 0; padding: 8px 8px 0; background: #fffaf0; box-shadow: 0 9px 23px #48382419; transform: rotate(1.2deg); border-radius: 2px; }
.desk-scene::before { content: ''; position: absolute; z-index: 1; top: -6px; left: 24px; width: 58px; height: 16px; background: #e1d3b6b8; transform: rotate(-6deg); }
.desk-scene img { display: block; width: 100%; height: 167px; object-fit: cover; object-position: 53% 48%; }
.desk-scene figcaption { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 34px; padding: 5px 4px; color: #4a5946; }
.desk-scene figcaption>span { font-family: Georgia, 'Songti SC', serif; font-style: italic; font-size: 15px; }
.desk-scene figcaption small { font-size: 8px; font-weight: 500; letter-spacing: .8px; }
.workspace-desk-scene { grid-column: 2; grid-row: 1 / 3; }
.admin-page-heading { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 40px; min-height: 210px; align-items: center; margin-bottom: 27px; }
.admin-page-heading>div>p { margin-top: 10px; font-size: 12px; line-height: 1.8; }
.admin-page-heading .human-note { font-family: Georgia, 'Songti SC', serif; font-size: 22px; font-style: italic; line-height: 1.5; color: #4f634b; margin-top: 9px; }
.admin-heading-copy .local-admin-badge { margin-top: 20px; max-width: none; gap: 8px; }
.local-admin-badge>div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.local-admin-badge strong { font-size: 11px; font-weight: 550; }
.local-admin-badge span:not(.batch-dot) { margin: 0; font-size: 10px; }
.local-admin-badge .batch-dot { width: 5px; height: 5px; }
.admin-notice { border: 0; border-radius: 4px; background: #e7ebdd; color: #51604a; padding: 11px 15px; min-height: 47px; font-size: 12px; margin-bottom: 17px; }
.admin-notice.error { background: #f3e4d9; color: #8c452d; }
.admin-tabs { display: flex; gap: 28px; border-bottom: 1px solid #c5cdbb; margin-bottom: 25px; padding: 0; }
.admin-tabs button { border-radius: 0; padding: 12px 0 14px; border-bottom: 3px solid transparent; background: transparent; font-size: 13px; }
.admin-tabs button:hover { background: transparent; color: var(--green); }
.admin-tabs button[aria-pressed=true] { border-bottom-color: var(--green); background: transparent; color: var(--green-dark); }
.admin-tabs button span { background: #e5e8da; border-radius: 3px; font-size: 10px; }
.primary { background: #245b45; border-radius: 5px; min-height: 52px; box-shadow: 0 4px 11px #1c3d2720; transition: background 180ms ease-out, transform 180ms ease-out, box-shadow 180ms ease-out; }
.primary:hover { background: #193f31; transform: translateY(-1px); box-shadow: 0 7px 17px #1c3d2725; }
.primary:active { transform: translateY(1px); box-shadow: 0 2px 5px #1c3d2720; }
.outline, .save-button { border-radius: 5px; }
.outline { background: #fffdf7; border-color: #cbd1bf; }
.outline:hover { background: #edf0e3; }
.save-button { background: var(--green); }
.panel { background: #fffdf8; border-color: #d2d7c6; border-radius: 7px; }
.panel-header h2, .admin-panel h2 { font-size: 17px; font-weight: 550; }
.panel-header p { font-size: 12px; line-height: 1.7; }
.admin-panel .panel-header { padding: 25px 27px 21px; }
.panel-header h2 span { background: #e8eadd; color: #53614e; }
.admin-record-tools .search-box, .search-box { background: #f9faf1; border-color: #d6dccb; border-radius: 5px; }
.search-box input { font-size: 12px; }
.admin-record-tools select, .form-grid input, .form-grid select, .form-grid textarea, .type-fields input, .settings-fields input:not([type=checkbox]), .settings-fields select { border-radius: 5px; border-color: #bdc9b4; background: #fffef9; }
.filters { gap: 7px; }
.filters button { border-radius: 4px; min-height: 42px; font-size: 12px; }
.filters button[aria-pressed=true] { background: #e3ead8; }
.invoice-table th, .admin-record-table th { background: #f0f2e7; border-color: #d8decb; font-size: 11px; }
.invoice-table td, .admin-record-table td { border-bottom-color: #e7ebde; }
.invoice-table tbody tr:hover, .admin-record-table tbody tr:hover { background: #f5f7ed; }
.merchant-link { font-size: 13px; min-height: 33px; font-weight: 550; }
.invoice-number, .admin-record-id { font-size: 11px; color: #64705e; }
.date-cell, .admin-date { font-size: 12px; }
.amount-cell { font-size: 14px; }
.receipt-icon { border-radius: 2px; border-color: #ddd9c6; background: #f4f0df; color: #7b8469; }
.status { border-radius: 3px; font-size: 11px; padding: 4px 7px; }
.status.ready { background: #e3ecd8; color: #2e5b3b; }
.status.review { background: #f3e6cd; color: #805526; }
.status.duplicate { background: #e9ebe1; color: #626d5d; }
.list-footer { font-size: 11px; background: #fcfdf7; }
.admin-merchant { font-size: 14px; font-weight: 550; }
.admin-record-type { font-size: 12px; }
.admin-row-actions button { font-size: 12px; }
.admin-record-table .status { font-size: 11px; }
.claim { border-radius: 4px; }
.claim-heading { background: #e9eddf; border-bottom: 1px dashed #b9c7aa; padding-block: 21px; }
.claim-heading>span { background: #fafbef; border-radius: 2px; color: #617151; }
.claim-total { background: #f0f3e6; }
.claim-total strong { font-family: Georgia, 'Iowan Old Style', serif; font-size: 49px; font-weight: 500; letter-spacing: -1.7px; }
.claim-total strong.long-total { font-size: 29px; }
.claim-total .currency { font-size: 16px; }
.claim-total>span, .claim-total p { color: #49613c; }
.claim-placeholder { padding-top: 33px; }
.claim-placeholder .paper-icon { display: none; }
.claim-placeholder h3 { font-family: Georgia, 'Songti SC', serif; font-size: 21px; font-weight: 500; line-height: 1.5; }
.claim-placeholder p { font-size: 13px; }
.claim-placeholder ol { margin-top: 20px; }
.claim-placeholder li { font-size: 12px; }
.claim-placeholder li span { background: #ecefdf; }
.placeholder-note, .claim-footnote { font-size: 11px; }
.category-row { font-size: 13px; }
.category-row strong { font-size: 13px; }
.category-row small { font-size: 11px; }
.exception-button { font-size: 13px; }
.exception-button small { font-size: 11px; }
.claim-actions .download { min-height: 46px; }
.dashboard-section-heading h2 { font-family: Georgia, 'Songti SC', serif; font-size: 25px; font-weight: 550; }
.dashboard-metrics { border-color: #c9d2bc; padding-block: 22px; }
.dashboard-metric+.dashboard-metric { border-left-color: #d1d9c3; }
.dashboard-metric>strong { font-family: Georgia, 'Iowan Old Style', serif; font-size: 37px; font-weight: 500; letter-spacing: -1px; }
.dashboard-metric>span:first-child { font-size: 12px; }
.dashboard-metric:hover { background: #e8eddb; }
.dashboard-metric .metric-hint { font-size: 11px; }
.dashboard-charts .panel-header, .dashboard-attention .panel-header { background: #fafbf2; }
.dashboard-charts h2, .dashboard-attention h2 { font-size: 16px; }
.dashboard-bar-heading { font-size: 13px; }
.dashboard-bar-track { background: #e8eddd; height: 8px; border-radius: 2px; }
.dashboard-bar-fill { background: #416e49; border-radius: 2px; transform-origin: left center; }
.dashboard-bar-detail { font-size: 11px; }
.dashboard-segment.ready, .dashboard-legend-dot.ready { background: #356449; }
.dashboard-segment.review, .dashboard-legend-dot.review { background: #bc8952; }
.dashboard-segment.duplicate, .dashboard-legend-dot.duplicate { background: #a4b49b; }
.dashboard-review-item:hover { background: #f4f7eb; }
.dashboard-review-copy>strong { font-size: 13px; }
.dashboard-review-copy>span, .dashboard-chart-footnote { font-size: 11px; }
.type-default { border-radius: 3px; background: #e3ecd7; }
.type-name-line strong { font-size: 15px; }
.type-state.active { color: #37623e; }
.type-form, .settings-footer { background: #f7f8ed; }
.settings-fields>label { font-size: 13px; }
.settings-fields>label>span:not(.sr-only), .setting-auto small { font-size: 12px; }
.admin-panel-note { font-size: 12px; }
.form-error { background: #f7e6d9; }
dialog { background: #fffdf5; border-radius: 8px; box-shadow: 0 24px 75px #24351f36; }
.dialog-header { border-bottom-style: dashed; border-bottom-color: #c3ceb5; }
.dialog-header h2 { font-family: Georgia, 'Songti SC', serif; font-size: 24px; font-weight: 500; }
.dialog-header p { font-size: 12px; }
.record-context { border-radius: 4px; background: #edf0e2; font-size: 12px; }
.dialog-footer { background: #f4f6e9; }
.form-grid label { font-size: 13px; }
.field-hint { font-size: 11px; }
.page-footer { color: #65715b; font-size: 11px; padding-bottom: 28px; }
.page-footer p { font-family: Georgia, 'Songti SC', serif; font-style: italic; font-size: 13px; }
.page-footer span { font-size: 10px; }
@media (max-width: 1150px) {
  .topbar { padding-inline: 30px; gap: 21px; }
  .brand-wordmark { font-size: 29px; }
  .brand-mark { width: 54px; height: 54px; }
  .app-navigation { margin-left: 2px; gap: 17px; }
  .app-navigation button { font-size: 12px; }
  .header-actions { gap: 12px; }
  .shell { padding-inline: 30px; }
  .admin-page-heading { grid-template-columns: minmax(0, 1fr) 310px; gap: 30px; }
  .page-heading { grid-template-columns: minmax(0, 1fr) 270px; gap: 16px 30px; }
}
@media (max-width: 920px) {
  .topbar { gap: 15px; }
  .brand-wordmark { font-size: 26px; }
  .brand-mark { width: 50px; height: 50px; }
  .app-navigation { gap: 12px; }
  .header-actions { gap: 8px; }
  .admin-page-heading { grid-template-columns: minmax(0, 1fr) 280px; }
  .admin-page-heading h1, .page-heading h1 { font-size: 33px; }
  .claim-placeholder { display: block; text-align: left; padding: 24px; }
  .claim-placeholder h3 { font-size: 20px; }
  .claim-placeholder ol { display: none; }
  .placeholder-note { text-align: left; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 17px; }
  .claim-total strong { font-size: 43px; }
}
@media (max-width: 780px) {
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 15px; padding-block: 15px; }
  .app-navigation { margin: 7px 0 0; padding-top: 9px; gap: 20px; border-top: 1px solid var(--line); }
  .app-navigation button { padding-block: 10px 8px; }
  .admin-page-heading { grid-template-columns: minmax(0, 1fr) 230px; gap: 24px; }
  .desk-scene img { height: 153px; }
  .desk-scene figcaption>span { font-size: 13px; }
  .desk-scene figcaption small { display: none; }
  .admin-page-heading .human-note { font-size: 20px; }
  .page-heading { grid-template-columns: minmax(0, 1fr) 220px; }
  .admin-tabs { gap: 22px; }
}
@media (max-width: 600px) {
  .topbar { min-height: 0; padding: 13px 18px 10px; gap: 7px 10px; }
  .brand { gap: 9px; min-width: 0; }
  .brand-wordmark { font-size: 25px; letter-spacing: -1px; }
  .brand-mark { width: 48px; height: 48px; flex-shrink: 0; }
  .brand-caption { font-size: 9px; letter-spacing: .3px; margin-top: 5px; }
  .header-actions { gap: 1px 8px; }
  .header-actions .language-button { min-height: 35px; font-size: 11px; padding: 7px 9px; }
  .header-actions .demo-badge, .header-actions #reset { font-size: 9px; }
  .app-navigation { margin-top: 6px; padding-top: 8px; gap: 20px; }
  .app-navigation button { min-height: 43px; font-size: 12px; }
  .shell { padding: 25px 18px 0; }
  .workspace-label { font-size: 10px; margin-bottom: 10px; }
  .admin-page-heading { grid-template-columns: minmax(0, 1fr) 112px; gap: 17px; min-height: 0; margin-bottom: 23px; align-items: center; }
  .admin-heading-copy .workspace-label { display: none; }
  .admin-page-heading h1 { font-size: 29px; letter-spacing: -.7px; }
  .admin-page-heading .human-note { font-size: 17px; line-height: 1.6; margin-top: 8px; }
  .admin-page-heading>div>p { font-size: 11px; line-height: 1.8; margin-top: 8px; }
  .admin-heading-copy .local-admin-badge { margin-top: 14px; align-items: flex-start; gap: 6px; }
  .local-admin-badge>div { display: block; }
  .local-admin-badge strong { font-size: 10px; }
  .local-admin-badge span:not(.batch-dot) { font-size: 9px; margin-top: 3px; }
  .local-admin-badge .batch-dot { margin-top: 6px; }
  .desk-scene { padding: 5px 5px 0; transform: rotate(2deg); }
  .desk-scene::before { left: 13px; width: 39px; height: 13px; top: -5px; }
  .desk-scene img { height: 135px; object-position: 61% 50%; }
  .desk-scene figcaption { min-height: 35px; padding: 5px 3px; }
  .desk-scene figcaption>span { font-size: 11px; line-height: 1.25; }
  .admin-notice { font-size: 11px; padding: 11px 12px; line-height: 1.8; }
  .admin-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin-bottom: 23px; }
  .admin-tabs button { padding: 13px 0 12px; font-size: 12px; }
  .page-heading { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 15px 17px; margin-bottom: 25px; align-items: center; }
  .page-heading>div { grid-column: 1; grid-row: 1; }
  .page-heading .workspace-label { display: none; }
  .page-heading h1 { font-size: 28px; letter-spacing: -.7px; line-height: 1.4; }
  .page-heading p { font-size: 11px; line-height: 1.8; margin-top: 8px; }
  .workspace-desk-scene { grid-column: 2; grid-row: 1; }
  .page-heading .primary { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-self: stretch; margin-top: 0; }
  .batch-bar .text-button { font-size: 10px; }
  .announcement { font-size: 11px; }
  .panel-header h2, .admin-panel h2 { font-size: 16px; }
  .panel-header p { font-size: 11px; line-height: 1.8; }
  .admin-panel .panel-header { padding: 20px 17px; }
  .filters button { min-height: 44px; font-size: 11px; padding-inline: 6px; }
  .filters button span { font-size: 10px; }
  .invoice-table tbody tr { padding-block: 15px; }
  .merchant-link { font-size: 13px; min-height: 35px; }
  .invoice-number, .invoice-table .date-cell { font-size: 11px; }
  .invoice-table .amount-cell { font-size: 14px; }
  .status, .admin-record-table .status { font-size: 11px; padding: 3px 6px; }
  .list-footer { font-size: 10px; }
  .list-footer>span:last-child { font-size: 9px; }
  .claim-heading { padding: 18px; }
  .claim-placeholder { padding: 23px 18px 21px; }
  .claim-placeholder h3 { font-size: 21px; }
  .claim-placeholder p { font-size: 12px; }
  .claim-total strong { font-size: 44px; }
  .category-row, .category-row strong { font-size: 13px; }
  .exception-button { font-size: 12px; }
  .exception-button small { font-size: 11px; }
  .claim-footnote { font-size: 10px; }
  .dashboard-section-heading h2 { font-size: 23px; }
  .dashboard-metric>strong { font-size: 34px; }
  .dashboard-metric>span:first-child { font-size: 12px; }
  .dashboard-metric .metric-hint { font-size: 11px; }
  .dashboard-charts h2, .dashboard-attention h2 { font-size: 16px; }
  .dashboard-bar-heading { font-size: 13px; }
  .dashboard-review-copy>strong { font-size: 14px; }
  .dashboard-review-copy>span { font-size: 12px; }
  .admin-record-id, .admin-date, .admin-record-type { font-size: 12px; }
  .admin-row-actions button { font-size: 12px; }
  .dialog-header h2 { font-size: 23px; }
  .dialog-header p { font-size: 11px; }
  .form-grid input, .form-grid select, .form-grid textarea, .type-fields input, .settings-fields input:not([type=checkbox]), .settings-fields select { font-size: 16px; }
  .form-grid label { font-size: 13px; }
  .field-hint { font-size: 11px; }
  .page-footer { text-align: left; }
  .page-footer p { font-size: 13px; }
  .page-footer span { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark, .primary { transition: none; transform: none !important; }
}
@media print {
  :root, body { background: white; color: #111; }
  .desk-scene { display: none !important; }
  .print-report { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
}
@media (max-width: 600px) {
  html[lang="en-MY"] .brand-mark { width: 48px; height: 48px; }
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }