/* Theme colors apply to the list, details, settings, and sign-in. */
:root{color-scheme:dark;font:16px/1.5 "Inter",system-ui,sans-serif;
  --bg:#14223b;--paper:#1c304e;--stripe:#223957;--ink:#f1f6ff;--muted:#bdcde4;--line:#425979;
  --accent:#abcaff;--invoice-tint:#abcaff;--button:#315caa;--soft:#263f68;--focus:#8fbaff;--orbit-accent:#ffd76a;--orbit-filter:none}
:root[data-theme="graphite"]{--bg:#232934;--paper:#303a48;--stripe:#354151;--ink:#f3f6fc;--muted:#c1cbd9;--line:#525e6e;--accent:#c5daff;--invoice-tint:#c5daff;--button:#425b82;--soft:#3b4b61;--focus:#abc9ff;--orbit-filter:grayscale(1) brightness(1.16);--orbit-accent:#d8e3f3}
:root[data-theme="teal"]{--bg:#102f34;--paper:#1b3e45;--stripe:#204850;--ink:#ebfbfc;--muted:#b8d9de;--line:#456870;--accent:#a6edee;--invoice-tint:#a6edee;--button:#23636e;--soft:#23505a;--focus:#8be5e5;--orbit-filter:hue-rotate(115deg) saturate(.65);--orbit-accent:#9edbda}
:root[data-theme="green"]{--bg:#172e28;--paper:#214036;--stripe:#26483d;--ink:#effbf3;--muted:#bedbca;--line:#48695b;--accent:#aeeac8;--invoice-tint:#aeeac8;--button:#2c634c;--soft:#2b5143;--focus:#8ce7b7;--orbit-filter:hue-rotate(76deg) saturate(.62);--orbit-accent:#a5d9ba}
:root[data-theme="purple"]{--bg:#2a223d;--paper:#3a2f51;--stripe:#433658;--ink:#f9f4ff;--muted:#d6c7e8;--line:#625477;--accent:#dec6ff;--invoice-tint:#dec6ff;--button:#63468a;--soft:#4d3b65;--focus:#d0b3ff;--orbit-filter:hue-rotate(221deg) saturate(.65);--orbit-accent:#d8b7ff}
:root[data-theme="plum"]{--bg:#352337;--paper:#482e48;--stripe:#523452;--ink:#fff3fd;--muted:#e1c7df;--line:#725570;--accent:#f7c2ed;--invoice-tint:#f7c2ed;--button:#784476;--soft:#5b3a59;--focus:#f0aee2;--orbit-filter:hue-rotate(263deg) saturate(.60);--orbit-accent:#eac0e3}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink)}
a{color:var(--accent);text-underline-offset:.16em}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
h1,h2,p{margin-top:0}
h1{font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.16;letter-spacing:-.05em;margin-bottom:.45rem;overflow-wrap:anywhere}
h2{font-size:1.1rem;letter-spacing:-.025em;margin-bottom:.7rem}
p{margin-bottom:1rem}
.shell{max-width:1260px;margin:auto;padding:0 30px}
main.shell{padding-top:36px;padding-bottom:48px}
.top{background:var(--paper);border-bottom:1px solid var(--line)}
.bar,.page-head,.actions,.pair,nav,.brand{display:flex;align-items:center;gap:14px}
.bar,.page-head{justify-content:space-between}
.bar{min-height:70px}
.brand{gap:10px;font-weight:750;color:var(--ink);text-decoration:none;white-space:nowrap}
.mark{display:block;flex:none;width:34px;height:34px;border-radius:20%;filter:var(--orbit-filter)}
nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:7px}
nav a[aria-current]{color:var(--ink);background:var(--soft);font-weight:700;box-shadow:inset 0 -2px color-mix(in srgb,var(--orbit-accent) 65%,transparent)}
.muted{color:var(--muted)}
.page-head{margin-bottom:24px}
.page-head p{margin:0}
.panel,.table-wrap{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:22px}
.notice{border:1px solid var(--line);background:var(--soft);border-radius:9px;padding:12px 14px}
.settings-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;align-items:start;margin-top:20px}
.stack{display:grid;gap:20px}
form{margin:0}
label{display:grid;gap:5px;font-size:.84rem;font-weight:650;margin:0 0 13px}
input,textarea,select{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:var(--paper);color:var(--ink);font:inherit;font-size:1rem;min-height:42px}
textarea{resize:vertical}
button,.button{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:8px;min-height:42px;padding:8px 14px;background:var(--button);color:white;font:inherit;font-size:.88rem;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer}
button:hover,.button:hover{filter:brightness(.94)}
button:disabled{opacity:.5;cursor:default}
.secondary{background:var(--paper);color:var(--accent);border-color:var(--line)}
.quiet{background:transparent;color:var(--muted);padding-inline:5px}
.small{min-height:34px;padding:5px 11px}
.actions{flex-wrap:wrap;gap:9px}
.pair{align-items:start}
.pair label{flex:1;min-width:0}
.search{display:flex;align-items:end;gap:12px;margin-bottom:19px}
.search label{margin:0}
.search label:first-child{flex:1}
.table-wrap{overflow-x:auto;padding:0}
table{border-collapse:collapse;width:100%;font-size:.88rem;white-space:nowrap}
th,td{text-align:left;padding:12px 14px}
th{background:var(--soft);font-size:.78rem;color:var(--muted)}
td{border-top:1px solid var(--line)}
tbody tr:nth-child(even){background:var(--stripe)}
td a{font-weight:700}
td.company a,td.number a{display:block;max-width:250px;overflow:hidden;text-overflow:ellipsis}
td.number a{max-width:180px}
.money,.total{font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
.total{font-size:1.35rem}
.badge{display:inline-block;padding:3px 8px;border-radius:6px;background:var(--soft);color:var(--ink);font-size:.76rem;font-weight:650}
.badge.paid,.badge.accepted{background:#203e36;color:#b9f0d1}
.badge.unpaid,.badge.rejected{background:#542f45;color:#ffd0dc}
.badge.unknown,.badge.pending{background:#4c4232;color:#ffe1aa}
.empty{padding:38px 24px}
.empty p{margin:0}
.pager,.back{margin-top:16px}
.back{display:inline-block;margin:0 0 17px}
dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.9rem}
dt{color:var(--muted)}
dd{margin:0;overflow-wrap:anywhere}
.items{list-style:none;padding:0;margin:0}
.items li{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:10px 0}
.account{font-variant-numeric:tabular-nums;overflow-wrap:anywhere;margin:10px 0 6px}
#qr-result{margin-top:15px}
#qr-image{display:block;border:1px solid var(--line);margin-bottom:10px}
.login{min-height:100dvh;display:grid;place-items:center;padding:24px}
.login-panel{width:min(100%,400px);padding:30px}
.login .brand{margin-bottom:26px}
.login h1{font-size:1.8rem;margin-bottom:20px}
.login button{width:100%}
@media(max-width:900px){.shell{padding-inline:16px}.settings-grid{grid-template-columns:1fr}.bar{min-height:61px;gap:6px}nav{gap:3px}nav a{padding-inline:5px}.brand{gap:5px}.brand .mark{width:28px;height:28px}.table-wrap{border:0;border-radius:0;background:none;overflow:visible}table,tbody{display:block;white-space:normal}thead{display:none}tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;background:var(--paper);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:12px}td{display:block;padding:0;border:0;min-width:0}td::before{content:attr(data-label);display:block;font-size:.72rem;color:var(--muted)}td.company a,td.number a{max-width:none;overflow-wrap:anywhere}td.row-action{grid-column:1/-1}.search{display:grid;grid-template-columns:1fr auto}.search label:first-child{grid-column:1/-1}.panel{padding:17px}}
@media(max-width:370px){.bar nav{font-size:.87rem}}

.journal{margin-top:20px}
.journal time{color:var(--muted);font-size:.85rem;text-align:right}

.review-actions{display:flex;align-items:center;gap:6px}
.review-actions span{font-size:.76rem}
@media(max-width:900px){
  td.row-review{grid-column:1/-1}
  .review-actions button{min-height:44px;min-width:44px}
}

@media(max-width:900px){.payment-actions .small{min-height:44px}}

.invoice-complete td{padding-block:5px}
.pull-refresh{position:fixed;z-index:2;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);box-shadow:0 3px 12px #172b2318;font-size:.88rem;text-align:center;pointer-events:none}
@media(pointer:coarse){html:has(.pull-refresh){overscroll-behavior-y:contain}}
@media(max-width:900px){
  tr.invoice-complete{grid-template-columns:1fr;padding:3px 12px;margin-bottom:5px}
  .invoice-complete td::before{display:none}
  .invoice-complete a{display:block;overflow-wrap:anywhere}
}

.search-submit span{position:relative;width:13px;height:13px;border:2px solid currentColor;border-radius:50%;margin:0 3px 3px 0}
.search-submit span::after{content:"";position:absolute;top:8px;left:8px;width:6px;height:2px;border-radius:2px;background:currentColor;transform:rotate(45deg);transform-origin:left center}

.app-onboarding{margin-bottom:18px}
.app-onboarding p{margin-bottom:12px}
.app-onboarding [hidden]{display:none}

.qr-save{margin-top:14px}

[data-invoice-table],.invoice-light{
  color-scheme:light;
  --paper:color-mix(in srgb,#fff 94%,var(--invoice-tint));
  --stripe:color-mix(in srgb,#fff 74%,var(--invoice-tint));
  --soft:color-mix(in srgb,#fff 56%,var(--invoice-tint));
  --line:color-mix(in srgb,#fff 68%,var(--button));
  --ink:#18263b;
  --muted:#3b5069;
  --accent:var(--button);
  --focus:var(--button);
  color:var(--ink);
}

#list-qr{width:min(420px,calc(100% - 32px));max-height:calc(100% - 32px);padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--paper);color:var(--ink)}
#list-qr::backdrop{background:#0009}
#list-qr img{display:block;max-width:100%;height:auto;margin:0 auto 12px}

@media(max-width:540px){
  .bar{flex-wrap:wrap;gap:4px;padding-block:8px}
  .bar nav{gap:5px;flex-wrap:wrap}
}

.ksef-settings>summary{cursor:pointer}
.ksef-settings>summary strong{font-size:1.1rem}
.ksef-settings>summary .badge{margin-inline-start:8px}
.ksef-settings[open]>summary,.ksef-settings>details{margin-bottom:14px}

.login-panel{border-block-start-color:color-mix(in srgb,var(--line) 70%,var(--orbit-accent))}

:root[data-theme="blue"] :is(.top,.login-panel){isolation:isolate}
:root[data-theme="blue"] .mark{mix-blend-mode:lighten}

.amount-cell{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
#invoice-reason{width:min(520px,calc(100% - 32px));max-height:calc(100% - 32px);padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--paper)}
#invoice-reason::backdrop{background:#0009}
.reason-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.reason-head h2{margin:0}
.invoice-light .items strong{min-width:0;overflow-wrap:anywhere}

.support .support-checkbox{display:flex;align-items:flex-start;gap:8px}
.support .support-checkbox input{width:18px;height:18px;min-height:0;flex:none;margin:0;accent-color:var(--focus)}

/* Keep status and action columns stable; invoice number and company share the remaining width. */
@media(min-width:901px){
  .table-wrap table{table-layout:fixed;white-space:nowrap}
  .table-wrap th,.table-wrap td{padding:10px clamp(7px,0.85vw,12px)}
  .table-wrap th:nth-child(3){width:96px}
  .table-wrap th:nth-child(4){width:clamp(100px,10vw,132px)}
  .table-wrap th:nth-child(5){width:130px}
  .table-wrap th:nth-child(6){width:224px}
  .table-wrap th:nth-child(7){width:146px}
  td.company a,td.number a{max-width:100%}
  .review-actions{gap:5px;flex-wrap:nowrap}
  .review-actions .small{flex:none;padding-inline:8px}
  .payment-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
  .payment-actions .button,.payment-actions button{width:100%;padding-inline:5px;text-align:center;font-size:.8rem}
  .payment-actions .button{white-space:normal}
}
.table-wrap td .badge{white-space:nowrap}
.payment-qr-image{max-width:100%;height:auto;background:#fff;border-radius:8px}
#qr-image{display:block;margin-top:12px}
#qr-image[hidden],#list-qr [hidden]{display:none}
#list-qr{width:min(460px,calc(100% - 32px))}
#list-qr [data-qr-save]{margin-bottom:10px}

.install-actions{margin-bottom:12px}
.install-help{width:min(520px,calc(100% - 32px));max-height:calc(100% - 32px);padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--paper);color:var(--ink)}
.install-help::backdrop{background:#0009}
.install-help ol{padding-inline-start:1.4rem}
.install-help li+li{margin-top:8px}
.install-example{margin:18px 0;padding:12px;border-radius:10px;background:var(--soft)}
.install-example figcaption{margin-bottom:8px;font-size:.8rem;color:var(--muted)}
.install-address{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--paper);border-radius:7px;padding:7px 10px}
.install-highlight{margin-top:6px;padding:7px 10px;border:1px solid var(--accent);border-radius:7px}
.transfer-fields{display:block;margin:0 0 12px}
.transfer-field{padding:8px 0;border-bottom:1px solid var(--line)}
.transfer-field dd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;font-weight:650;overflow-wrap:anywhere}
.copy-field{flex:none;min-width:44px;min-height:44px;padding:6px}

.missing-account{display:inline-block;padding:3px 8px;border-radius:6px;background:#ffe4e6;color:#981b32}

.correction-badge{background:#ffedba;color:#6c4200;margin-block:3px}
.invoice-complete .correction-badge{margin-inline-start:8px}

.menu-toggle{display:none}
@media(max-width:760px){
  .menu-ready .bar{flex-wrap:wrap}
  .menu-ready .menu-toggle{display:inline-flex;min-width:44px;min-height:44px;color:var(--ink)}
  .menu-ready .menu-toggle[aria-expanded="false"] + nav{display:none}
  .menu-ready nav{flex-basis:100%;flex-direction:column;align-items:stretch;gap:3px;padding:0 0 8px}
  .menu-ready nav a,.menu-ready nav button{min-height:44px;padding:10px;justify-content:flex-start}
  .menu-ready nav button{width:100%}
}
