.invoice-page { min-height: 100vh; background: #f3f5f7; color: #152131; }
.invoice-main { width: min(1500px,100%); margin: 0 auto; padding: clamp(18px,3vw,38px); }
.invoice-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:22px; margin-bottom:22px; }
.invoice-heading h1 { margin:0 0 7px; font-size:clamp(28px,3vw,38px); letter-spacing:-.045em; }
.invoice-heading p:not(.eyebrow) { max-width:760px; margin:0; color:#536171; line-height:1.55; }
.invoice-heading .eyebrow { margin:0 0 7px; color:#667382; font-size:11px; font-weight:750; letter-spacing:.09em; }
.invoice-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.invoice-metrics article { min-width:0; display:grid; gap:8px; padding:18px 20px; border:1px solid #dce2e8; border-radius:8px; background:#fff; }
.invoice-metrics span { color:#52606e; font-size:13px; font-weight:650; }
.invoice-metrics strong { font-size:clamp(22px,2.5vw,30px); letter-spacing:-.04em; overflow-wrap:anywhere; }
.invoice-metrics small { color:#697583; font-size:12px; }
.invoice-analytics,.invoice-ledger { margin-bottom:16px; overflow:hidden; }
.invoice-analytics .section-header { align-items:center; }
.invoice-analytics .section-header p,.ledger-header p { margin:4px 0 0; color:#637080; font-size:12px; }
.period-select { display:flex; align-items:center; gap:9px; color:#536171; font-size:12px; font-weight:650; }
.period-select select,.invoice-filters input { min-height:40px; padding:8px 10px; border:1px solid #cbd4de; border-radius:5px; background:#fff; color:#152131; font:inherit; }
.analytics-legend { display:flex; flex-wrap:wrap; gap:15px; padding:14px 18px 0; color:#536171; font-size:12px; }
.analytics-legend span { display:flex; align-items:center; gap:7px; }
.analytics-legend i { width:10px; height:10px; border-radius:2px; }
.legend-original { background:#142b48; }.legend-prepared { background:#e8a21a; }.legend-invoiced { background:#16845e; }
.invoice-chart { display:grid; gap:15px; padding:16px 18px 20px; }
.chart-currency + .chart-currency { padding-top:14px; border-top:1px solid #e5e9ed; }
.chart-currency h3 { margin:0 0 12px; font-size:13px; }
.chart-grid { display:grid; grid-template-columns:repeat(6,minmax(52px,1fr)); align-items:end; gap:9px; min-height:132px; }
.chart-period { min-width:0; display:grid; align-content:end; gap:6px; text-align:center; }
.chart-bars { height:102px; display:flex; align-items:end; justify-content:center; gap:3px; border-bottom:1px solid #dfe4e9; }
.chart-bars i { width:min(14px,24%); min-height:2px; border-radius:3px 3px 0 0; }
.chart-bars .original { background:#142b48; }.chart-bars .prepared { background:#e8a21a; }.chart-bars .invoiced { background:#16845e; }
.chart-period small { color:#586574; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.invoice-filters { display:grid; grid-template-columns:minmax(220px,1fr) 160px 160px auto; align-items:end; gap:10px; padding:14px 16px; border-bottom:1px solid #e5e9ed; background:#fafbfc; }
.invoice-filters label { display:grid; gap:5px; color:#536171; font-size:11px; font-weight:700; }
.invoice-filters .button { min-height:40px; }
.ledger-scroll { overflow:auto; }
.ledger-scroll table { width:100%; border-collapse:collapse; min-width:1080px; }
.ledger-scroll th { padding:11px 12px; background:#f7f8fa; color:#596675; text-align:left; font-size:11px; font-weight:750; white-space:nowrap; }
.ledger-scroll td { padding:11px 12px; border-top:1px solid #e9edf0; color:#273343; font-size:12px; vertical-align:top; }
.ledger-scroll tbody tr:hover { background:#f8fafb; }
.invoice-order-link { padding:0; border:0; background:none; color:#154e9f; font:inherit; font-weight:750; text-align:left; cursor:pointer; }
.invoice-order-link:hover { text-decoration:underline; }.ledger-customer { display:grid; gap:3px; }.ledger-customer small { color:#697583; }
.customer-code-empty { color:#7b6570; font-style:italic; }.amount-pending { color:#717c88; }
.ledger-footnote { margin:0; padding:12px 16px; color:#667382; font-size:11px; line-height:1.45; }
.ledger-pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid #e9edf0; color:#5e6a78; font-size:12px; }
.ledger-pagination > div { display:flex; gap:7px; }.ledger-pagination .button { min-height:36px; }
.invoice-status { min-height:20px; color:#586574; font-size:12px; }
.invoice-dialog { width:min(640px,calc(100vw - 24px)); max-height:min(84vh,780px); overflow:auto; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.detail-grid > div { padding:12px; border:1px solid #e0e5ea; border-radius:6px; }.detail-grid span { display:block; margin-bottom:5px; color:#637080; font-size:11px; }.detail-grid strong { font-size:13px; overflow-wrap:anywhere; }
.detail-document-list { margin-top:15px; }.detail-document-list h3 { font-size:14px; }.detail-document-list li { margin:7px 0; color:#4f5c6a; font-size:12px; }
.detail-customer-orders { margin-top:18px; padding-top:14px; border-top:1px solid #e5e9ed; }.detail-customer-orders h3 { margin:0; font-size:14px; }.detail-customer-orders .section-header { padding:0 0 9px; }.detail-customer-orders .section-header p { margin:4px 0 0; color:#6b7684; font-size:11px; }
.customer-order-list { display:grid; gap:5px; }.customer-order-row { display:flex; width:100%; justify-content:space-between; align-items:center; gap:12px; padding:9px 10px; border:1px solid #e4e8ec; border-radius:5px; background:#fff; text-align:left; cursor:pointer; }.customer-order-row:hover { background:#f7f9fb; border-color:#c7d1dc; }.customer-order-row > span { display:grid; gap:3px; }.customer-order-row strong { font-size:12px; }.customer-order-row small { color:#667382; font-size:10px; }.detail-customer-orders > .button { margin-top:9px; min-height:36px; }
.invoice-documents-list { display:grid; gap:10px; }
.invoice-document-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:13px; border:1px solid #dfe5eb; border-radius:7px; background:#fff; }
.invoice-document-card > div:first-child { min-width:0; display:grid; gap:5px; }
.invoice-document-card strong { font-size:13px; }
.invoice-document-card small { color:#5e6a78; overflow-wrap:anywhere; }
.invoice-document-status { width:max-content; max-width:100%; padding:3px 7px; border-radius:99px; font-size:10px; font-weight:750; }
.invoice-document-status.is-pending { background:#fff3d6; color:#75520a; }
.invoice-document-status.is-confirmed { background:#e7f4ed; color:#14633f; }
.invoice-empty-documents { color:#667382; font-size:12px; }
.finance-edit-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end; gap:11px; margin:12px 0; padding:14px; border:1px solid #dfe5eb; border-radius:7px; background:#fff; }
.finance-edit-form > div { grid-column:1/-1; padding-bottom:9px; border-bottom:1px solid #e8ecf0; }
.finance-edit-form h3 { margin:0 0 4px; font-size:14px; }
.finance-edit-form p { margin:0; color:#637080; font-size:11px; line-height:1.45; }
.finance-edit-form label { min-width:0; display:grid; gap:5px; color:#354456; font-size:11px; font-weight:700; }
.finance-edit-form input,.finance-edit-form select { width:100%; min-width:0; min-height:39px; padding:8px 9px; border:1px solid #cbd4de; border-radius:5px; background:#fff; color:#152131; font:inherit; font-weight:450; }
.finance-edit-form > button { justify-self:end; min-height:39px; }
.finance-group-form { border-color:#eadbb7; background:#fffcf5; }
.finance-group-form > div { border-color:#efe5cf; }
.finance-group-form select { cursor:pointer; }
.finance-history { margin:14px 0; padding:14px; border:1px solid #dfe5eb; border-radius:7px; background:#f8fafb; }
.finance-history h3 { margin:0 0 9px; font-size:14px; }
.finance-history ol { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.finance-history li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding-top:8px; border-top:1px solid #e1e7ed; }
.finance-history li > div { min-width:0; display:grid; gap:3px; }
.finance-history li strong { font-size:11px; }.finance-history li span,.finance-history li small,.finance-history li p { color:#5e6a78; font-size:10px; overflow-wrap:anywhere; }
.finance-history li p { margin:0; text-align:right; }
.invoice-upload-form { display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; gap:12px; margin-top:8px; padding:16px; border:1px solid #dce3e9; border-radius:7px; background:#f8fafb; }
.invoice-upload-copy { padding-bottom:11px; border-bottom:1px solid #e1e7ed; }
.invoice-upload-form h3,.invoice-review-form h4 { margin:0 0 5px; font-size:14px; }
.invoice-upload-form p,.invoice-review-form p { margin:0; color:#637080; font-size:11px; line-height:1.45; }
.invoice-file-field,.invoice-review-grid label { min-width:0; display:grid; gap:6px; color:#354456; font-size:12px; font-weight:700; }
.invoice-file-field input { width:100%; min-width:0; min-height:42px; padding:5px 7px; border:1px solid #cbd4de; border-radius:5px; background:#fff; color:#354456; font:inherit; font-weight:450; }
.invoice-file-field input::file-selector-button { min-height:29px; margin-right:10px; padding:5px 10px; border:1px solid #cbd4de; border-radius:4px; background:#f3f5f7; color:#152131; font:inherit; font-weight:650; cursor:pointer; }
.invoice-file-field small { color:#788491; font-weight:450; }
.invoice-upload-actions { display:flex; justify-content:flex-start; }
.invoice-upload-actions .button { min-height:42px; min-width:180px; white-space:nowrap; }
.invoice-review-form { grid-column:1/-1; display:grid; gap:12px; margin-top:5px; padding-top:13px; border-top:1px solid #e4e9ee; }
.invoice-review-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.invoice-review-grid input,.invoice-review-grid select { width:100%; min-width:0; min-height:39px; padding:8px 9px; border:1px solid #cbd4de; border-radius:5px; background:#fff; color:#152131; font:inherit; }
.invoice-review-form > button { justify-self:start; }
.invoice-page button:focus-visible,.invoice-page a:focus-visible,.invoice-page input:focus-visible,.invoice-page select:focus-visible { outline:3px solid #175ed6; outline-offset:2px; }
@media(max-width:760px) { .invoice-upload-form { grid-template-columns:minmax(0,1fr); gap:11px; padding:13px; }.invoice-upload-copy { grid-column:auto; }.invoice-upload-actions .button { width:100%; }.invoice-review-grid { grid-template-columns:1fr 1fr; }.invoice-review-form > button { width:100%; }.invoice-document-card { grid-template-columns:1fr; }.invoice-document-card > .button { width:100%; }.finance-edit-form { grid-template-columns:minmax(0,1fr); padding:12px; }.finance-edit-form > div { grid-column:auto; }.finance-edit-form > button { width:100%; }.finance-history li { grid-template-columns:1fr; }.finance-history li p { text-align:left; } }
@media(max-width:390px) { .invoice-review-grid { grid-template-columns:1fr; } }
@media(max-width:760px) { .invoice-main { padding:18px 12px 28px; }.invoice-heading { align-items:flex-start; flex-direction:column; }.invoice-metrics { grid-template-columns:1fr; gap:8px; }.invoice-metrics article { grid-template-columns:1fr auto; align-items:center; padding:13px 15px; }.invoice-metrics small { grid-column:1/-1; }.invoice-metrics strong { grid-column:2; grid-row:1/3; font-size:22px; text-align:right; }.invoice-filters { grid-template-columns:1fr 1fr; }.invoice-filters label:first-child { grid-column:1/-1; }.invoice-filters .button { grid-column:1/-1; }.chart-grid { grid-template-columns:repeat(4,minmax(48px,1fr)); }.chart-period:nth-child(n+5) { display:none; }.ledger-pagination { align-items:flex-start; flex-direction:column; }.ledger-pagination > div { width:100%; }.ledger-pagination .button { flex:1; } }
@media(max-width:390px) { .invoice-filters { grid-template-columns:1fr; }.invoice-filters label:first-child,.invoice-filters .button { grid-column:auto; }.section-header { align-items:flex-start; flex-direction:column; }.period-select { align-self:flex-end; } }
