:root {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #22322b;
    background: #f3f6f4;
    font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { min-width: 320px; background: #f3f6f4; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1:focus { outline: none; }

.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.page-heading h1 { margin: 3px 0 6px; color: #17261f; font-size: clamp(1.55rem,2vw,2rem); line-height: 1.15; letter-spacing: -.035em; }
.page-heading > div > p:last-child { margin: 0; color: #7c8882; font-size: .84rem; }
.page-eyebrow { margin: 0; color: #258050; font-size: .67rem; font-weight: 850; letter-spacing: .12em; }
.surface-card { background: #fff; border: 1px solid #dde6df; border-radius: 15px; box-shadow: 0 8px 30px rgba(20,61,45,.055); }
.button-primary, .button-secondary { min-height: 41px; padding: 0 16px; border-radius: 10px; font-weight: 750; font-size: .78rem; cursor: pointer; transition: .15s ease; }
.button-primary { color: #fff; background: linear-gradient(135deg,#238653,#147044); border: 1px solid #18764a; box-shadow: 0 8px 18px rgba(24,118,74,.17); }
.button-primary:hover { background: #12643e; }
.button-primary:disabled { opacity: .6; cursor: wait; }
.button-secondary { color: #42544b; background: #fff; border: 1px solid #d9e2dc; }
.button-secondary:hover { background: #f5f8f6; border-color: #c8d8ce; }
.card-toolbar { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 18px; border-bottom: 1px solid #e8ede9; }
.search-box { min-width: 310px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; color: #77847e; background: #f8faf8; border: 1px solid #e1e7e3; border-radius: 8px; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: #314139; font-size: .78rem; }
.record-count { color: #7f8a85; font-size: .72rem; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 12px 16px; color: #77837d; background: #f6f9f7; border-bottom: 1px solid #e3eae5; text-align: left; text-transform: uppercase; font-size: .62rem; font-weight: 800; letter-spacing: .07em; }
.data-table td { padding: 14px 16px; color: #31433a; border-bottom: 1px solid #edf1ee; font-size: .79rem; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover { background: #f8fbf9; }
.muted-cell { color: #7b8781 !important; }
.row-action { width: 70px; text-align: right; }
.row-action button { padding: 6px 10px; color: #1b754a; background: #eef7f1; border: 1px solid #d8eadd; border-radius: 7px; font-size: .72rem; font-weight: 700; cursor: pointer; }
.empty-state { min-height: 220px; display: grid; place-content: center; justify-items: center; color: #8b9691; }
.empty-state strong { color: #526058; }.empty-state span { margin-top: 6px; font-size: .78rem; }
.alert { margin-bottom: 14px; padding: 11px 14px; border-radius: 8px; font-size: .78rem; }
.alert-error { color: #9a2b2b; background: #fff1f1; border: 1px solid #f3cccc; }
.alert-success { color: #176d42; background: #edf8f1; border: 1px solid #cae7d4; }
.modal-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(4,28,20,.56); backdrop-filter: blur(5px); z-index: 100; }
.form-field { display: grid; gap: 7px; }
.form-field label { color: #405149; font-size: .75rem; font-weight: 750; }
.form-field input, .form-field select { width: 100%; height: 42px; padding: 0 11px; color: #293a32; background: #fbfcfb; border: 1px solid #dce4de; border-radius: 8px; outline: none; }
.form-field input:focus, .form-field select:focus { border-color: #3a9b63; box-shadow: 0 0 0 3px rgba(58,155,99,.1); background: #fff; }
.validation-message { color: #c23c3c; font-size: .7rem; }
.valid.modified:not([type=checkbox]) { border-color: #40a069; }
.invalid { border-color: #d65353 !important; }

#blazor-error-ui { display: none; position: fixed; inset: auto 18px 18px 18px; z-index: 1000; padding: 13px 42px 13px 16px; color: #fff; background: #962f2f; border-radius: 9px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
#blazor-error-ui .reload { margin-left: 10px; color: #fff; font-weight: 700; }
#blazor-error-ui .dismiss { position: absolute; right: 14px; top: 10px; cursor: pointer; font-size: 1.2rem; }
.blazor-error-boundary { padding: 1rem; color: #fff; background: #a33434; border-radius: 8px; }
.blazor-error-boundary::after { content: "An error has occurred."; }

.payment-status { min-height: 42px; display: flex; align-items: center; padding: 0 11px; color: #1c7048; background: #eef8f1; border: 1px solid #d5e9db; border-radius: 8px; font-size: .75rem; font-weight: 800; }
.receipt-backdrop { align-items: flex-start; overflow-y: auto; padding: 20px; }
.receipt-shell { width: min(900px,100%); margin: auto; }
.receipt-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
.purchase-receipt { padding: 34px; color: #263a30; background: #fff; border-radius: 12px; }
.purchase-receipt header { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 2px solid #1e714b; }
.receipt-brand { display: flex; align-items: center; gap: 13px; }
.receipt-brand img { width: 58px; height: 58px; object-fit: contain; border-radius: 9px; }
.receipt-brand h1 { margin: 0; font-size: 1.35rem; }
.receipt-brand p { margin: 5px 0 0; color: #75847c; }
.receipt-number { text-align: right; }
.receipt-number span, .receipt-party span { display: block; color: #849188; font-size: .62rem; font-weight: 800; letter-spacing: .08em; }
.receipt-number strong { display: block; margin: 5px 0; font-size: 1.15rem; }
.receipt-number small { color: #687970; }
.receipt-party { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 20px 0; padding: 15px; background: #f5f8f6; border-radius: 9px; }
.receipt-party strong { display: block; margin-top: 5px; font-size: .76rem; }
.receipt-party small { display: block; margin-top: 3px; color: #7f8b84; font-size: .62rem; }
.purchase-receipt table { width: 100%; border-collapse: collapse; }
.purchase-receipt th, .purchase-receipt td { padding: 10px 8px; border-bottom: 1px solid #e4eae6; text-align: left; font-size: .7rem; }
.purchase-receipt th { color: #78867e; font-size: .6rem; text-transform: uppercase; }
.purchase-receipt th:nth-last-child(-n+3), .purchase-receipt td:nth-last-child(-n+3) { text-align: right; }
.purchase-receipt td small { display: block; margin-top: 3px; color: #89958e; font-size: .58rem; }
.receipt-summary { width: min(330px,100%); margin: 20px 0 0 auto; }
.receipt-summary > div { display: flex; justify-content: space-between; padding: 8px 0; font-size: .73rem; }
.receipt-summary .balance { padding-top: 12px; color: #185f40; border-top: 2px solid #dce8e0; font-size: .86rem; }
.receipt-summary p { color: #77857d; font-size: .62rem; text-align: right; }
.purchase-receipt footer { display: flex; justify-content: space-between; margin-top: 28px; padding-top: 15px; color: #849088; border-top: 1px solid #dfe6e1; font-size: .58rem; }

@media (max-width: 640px) {
    .page-heading { align-items: flex-start; flex-direction: column; }
    .search-box { min-width: 0; flex: 1; }
    .record-count { display: none; }
    .receipt-backdrop { align-items: flex-end; padding: 0; }
    .receipt-shell { max-height: 96vh; overflow-y: auto; background: #fff; }
    .receipt-actions { position: sticky; top: 0; z-index: 2; margin: 0; padding: 12px; background: #fff; border-bottom: 1px solid #e1e8e3; }
    .purchase-receipt { min-width: 620px; padding: 24px 18px; border-radius: 0; }
}

@media print {
    body { background: #fff !important; }
    .sidebar, .topbar, .report-no-print, #blazor-error-ui { display: none !important; }
    .app-shell, .workspace, .page-content { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: #fff !important; }
    .report-print-area { display: block !important; }
    body.element-printing * { visibility: hidden !important; }
    body.element-printing .print-target, body.element-printing .print-target * { visibility: visible !important; }
    body.element-printing .print-target { position: absolute !important; inset: 0 auto auto 0 !important; width: 100% !important; margin: 0 !important; padding: 18px !important; color: #000 !important; background: #fff !important; border-radius: 0 !important; box-shadow: none !important; }
}