#invoice-sheet { --sheet-scale:.7; position:fixed; inset:0; width:100%; max-width:none; height:var(--sheet-height,100dvh); max-height:none; margin:0; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); border:0; border-radius:0; box-sizing:border-box; background:#fff; color:#273451; font-family:Montserrat,system-ui,sans-serif; }
#invoice-sheet[open] { display:flex; flex-direction:column; }
#invoice-sheet { overflow:hidden; }
#invoice-sheet [data-search] { min-height:0; }
#invoice-sheet [hidden] { display:none!important; }
#invoice-sheet * { box-sizing:border-box; }
#invoice-sheet button { cursor:pointer; color:inherit; font-family:inherit; }
#invoice-sheet button:disabled { opacity:.5; cursor:wait; }
#invoice-sheet button:focus-visible,#invoice-sheet input:focus-visible { outline:2px solid #ef3f78; outline-offset:-2px; }
#invoice-sheet .sheet-toolbar { display:flex; align-items:center; gap:9px; padding:9px 12px; background:linear-gradient(120deg,#fff8fa,#fffdfa); flex:none; }
#invoice-sheet .sheet-brand { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:linear-gradient(120deg,#ef3f78,#ffaa80); color:white; font:24px system-ui; }
#invoice-sheet .sheet-title { flex:1; display:grid; gap:2px; }
#invoice-sheet .sheet-title strong { font-size:16px; font-weight:600; }
#invoice-sheet .sheet-title small { font-size:10px; color:#7d879a; }
#invoice-sheet [data-close] { width:34px; height:34px; border:1px solid #e6e7ed; border-radius:50%; background:#fff; font:24px system-ui; }
#invoice-sheet .sheet-controls { display:flex; align-items:center; gap:5px; padding:5px 8px 8px; border-bottom:2px solid #ef7b91; flex:none; }
#invoice-sheet [data-search] { flex:1; width:60px; min-width:0; height:34px; border:1px solid #e3e6ec; border-radius:8px; padding:5px 7px; font:16px system-ui; }
#invoice-sheet .sheet-filters,#invoice-sheet .sheet-zoom { display:flex; align-items:center; border:1px solid #e3e6ec; border-radius:8px; overflow:hidden; flex:none; }
#invoice-sheet .sheet-controls button { border:0; background:white; padding:0 7px; height:32px; font-size:11px; font-weight:500; white-space:nowrap; }
#invoice-sheet [aria-pressed=true] { background:#fce4ee!important; color:#af2258; }
#invoice-sheet [data-flag-count] { font-size:10px; margin-left:2px; }
#invoice-sheet .sheet-zoom button { padding:0 6px; font-size:18px; }
#invoice-sheet output { font-size:10px; padding:0 3px; }
#invoice-sheet .sheet-summary { display:flex; align-items:center; gap:8px; min-height:31px; padding:3px 9px; background:#f9fafc; font-size:10px; flex:none; }
#invoice-sheet [data-summary] { flex:1; }
#invoice-sheet .sheet-summary button { background:transparent; border:0; padding:5px; font-size:11px; }
#invoice-sheet .sheet-summary { flex-wrap:wrap; }
#invoice-sheet [data-missing] { border:1px solid #f0cad8; border-radius:6px; white-space:nowrap; }
#invoice-sheet .sheet-missing { flex:1; min-height:0; overflow:auto; padding:10px 12px; background:#fffafb; font-size:12px; }
#invoice-sheet .sheet-missing p { margin:0 0 10px; line-height:1.5; }
#invoice-sheet [data-missing-list] { display:grid; gap:8px; }
#invoice-sheet .sheet-gap { display:grid; gap:5px; width:100%; min-width:0; padding:12px; border:1px solid #eedce3; border-left:3px solid #ef3f78; border-radius:8px; background:white; text-align:left; overflow-wrap:anywhere; }
#invoice-sheet .sheet-gap strong { font-size:14px; font-weight:600; }
#invoice-sheet .sheet-gap span { font-size:12px; }
#invoice-sheet .sheet-gap small { font-size:11px; color:#7d6470; }
#invoice-sheet .sheet-editor label { flex-wrap:wrap; }
#invoice-sheet [data-delete-selected] { color:#b5224e; }
#invoice-sheet .sheet-columns { flex:none; padding:10px 12px; border-bottom:1px solid #e4e7ed; font-size:12px; max-height:40%; overflow:auto; }
#invoice-sheet [data-column-list] { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:10px 0; }
#invoice-sheet .sheet-columns label { display:flex; align-items:center; gap:5px; }
#invoice-sheet .sheet-columns button { background:#fff7fa; border:1px solid #eadde3; padding:7px 9px; border-radius:6px; margin-right:5px; font-size:11px; }
#invoice-sheet .sheet-grid { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
#invoice-sheet .sheet-table { display:table; table-layout:fixed; border-collapse:collapse; margin:0; min-width:100%; font-size:calc(14px * var(--sheet-scale)); font-weight:400; line-height:1.2; }
#invoice-sheet .sheet-table thead { display:table-header-group; }
#invoice-sheet .sheet-table tbody { display:table-row-group; }
#invoice-sheet .sheet-table tr { display:table-row; box-shadow:none; border-radius:0; }
#invoice-sheet .sheet-table th,#invoice-sheet .sheet-table td { display:table-cell; padding:0 3px; border:1px solid #edf0f4; height:calc(28px * var(--sheet-scale)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:inherit; color:inherit; vertical-align:middle; }
#invoice-sheet .sheet-table thead th { position:sticky; top:0; z-index:2; background:#f4f5f8; font-weight:500; height:calc(30px * var(--sheet-scale)); text-align:left; }
#invoice-sheet .sheet-table .sheet-numeric { text-align:right; }
#invoice-sheet .sheet-table .sheet-line:nth-child(even) { background:#fafbfd; }
#invoice-sheet .sheet-table .sheet-line.sheet-flagged { background:#fff6e7; }
#invoice-sheet .sheet-table .sheet-total-cell { background:#fdf2f6; font-weight:500; }
#invoice-sheet .sheet-table .sheet-flagged .sheet-total-cell { background:#fff0d9; }
#invoice-sheet .sheet-table td button { display:block; width:100%; min-width:0; min-height:0; height:calc(27px * var(--sheet-scale)); margin:0; padding:0; border:0; border-radius:0; background:transparent; font:inherit; text-align:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#invoice-sheet .sheet-table input[type=checkbox] { appearance:auto; width:12px; height:12px; min-height:0; padding:0; margin:0; accent-color:#ef3f78; vertical-align:middle; }
#invoice-sheet .sheet-table .sheet-group th { padding:0; height:calc(34px * var(--sheet-scale)); background:linear-gradient(100deg,#fce5ef,#fff3ea); border-top:1px solid #ef3f78; font-weight:500; }
#invoice-sheet .sheet-group button { display:flex; align-items:center; gap:6px; width:100%; height:100%; min-height:calc(34px * var(--sheet-scale)); padding:2px 6px; margin:0; border:0; border-radius:0; background:transparent; text-align:left; font:inherit; }
#invoice-sheet .sheet-invoice-badge { flex:none; padding:1px 4px; color:#b5235a; border:1px solid #ef88aa; border-radius:4px; font-weight:600; }
#invoice-sheet .sheet-group-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
#invoice-sheet .sheet-group-amount { flex:none; font-variant-numeric:tabular-nums; font-weight:600; }
#invoice-sheet .sheet-table .sheet-active-cell { box-shadow:inset 0 0 0 1.5px #ef3f78; background:#fff1f6; }
#invoice-sheet .sheet-flag-dot { color:#df900d; }
#invoice-sheet .sheet-empty { padding:24px!important; white-space:normal!important; text-align:center; }
#invoice-sheet .sheet-editor { flex:none; padding:8px 10px; border-top:1px solid #eddae2; background:#fffafb; }
#invoice-sheet .sheet-editor label { display:flex; align-items:center; gap:10px; font-size:11px; }
#invoice-sheet .sheet-editor label span { min-width:100px; }
#invoice-sheet .sheet-editor input { flex:1; width:100px; min-height:38px; padding:7px; border:1px solid #e2d7de; border-radius:7px; background:white; color:#273451; font:16px Montserrat,system-ui,sans-serif; }
#invoice-sheet .sheet-edit-actions { display:flex; justify-content:flex-end; gap:5px; margin-top:6px; }
#invoice-sheet .sheet-edit-actions button { min-height:34px; padding:6px 9px; border:1px solid #e5dce2; border-radius:7px; background:#fff; font-size:11px; }
#invoice-sheet .sheet-edit-actions [data-delete] { color:#b4234f; margin-right:auto; }
#invoice-sheet .sheet-edit-actions .sheet-primary { color:white; border:0; background:linear-gradient(100deg,#ef3f78,#ff967b); min-width:60px; }
#invoice-sheet [data-error] { margin:5px 0 0; color:#9f6a1a; font-size:11px; }
#invoice-sheet [data-error]:empty { display:none; }
#invoice-sheet .sheet-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; flex:none; border-top:1px solid #e9eaf0; background:#fff; }
#invoice-sheet .sheet-footer div { display:grid; gap:2px; }
#invoice-sheet .sheet-footer small { font-size:9px; color:#7e879a; }
#invoice-sheet .sheet-footer strong { font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; }
#invoice-sheet [data-save-status] { max-width:48%; font-size:10px; color:#517364; text-align:right; }
#invoice-sheet .sheet-sr-only { position:fixed; top:0; left:0; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.sheet-delete-confirm { width:min(400px,90vw); border:1px solid #f0d7e1; border-radius:16px; padding:22px; background:#fffafb; color:#273451; font:14px Montserrat,system-ui,sans-serif; }
.sheet-delete-confirm::backdrop { background:#1f294066; }
.sheet-delete-confirm h2 { font-size:18px; }
.sheet-delete-confirm div { display:flex; justify-content:flex-end; gap:10px; }
.sheet-delete-confirm button { padding:10px 16px; border:1px solid #e1d8de; border-radius:8px; background:white; color:#273451; }
.sheet-delete-confirm [data-yes] { background:#b5224e; color:white; border:0; }

/* Keep native iPhone column checkboxes independent of full-width form inputs. */
#invoice-sheet [data-column-list] { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 8px; }
#invoice-sheet .sheet-columns label { min-width:0; min-height:36px; margin:0; padding:4px 0; gap:7px; font-size:12px; line-height:1.3; overflow-wrap:anywhere; }
#invoice-sheet .sheet-columns input[type="checkbox"] { appearance:auto!important; -webkit-appearance:checkbox!important; display:inline-block!important; flex:0 0 18px!important; width:18px!important; height:18px!important; min-width:18px!important; max-width:18px!important; min-height:18px!important; max-height:18px!important; margin:0!important; padding:0!important; border-radius:3px; transform:none!important; accent-color:#ef3f78; }
@media(max-width:350px) { #invoice-sheet [data-column-list] { grid-template-columns:repeat(2,minmax(0,1fr)); } }
