/* Bilanzera workspace. Same tokens, type and components as the homepage mock-ups
   (window, rows, status chips, booking progress, entry card), tested for WCAG 2.1 AA
   in light and dark (tests/test_app_contrast.py). No external resources. */
@font-face{font-family:"Geist";src:url("/static/app-font.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --bg:#f6f6f2;--bg-2:#eef0ea;--surface:#fdfdfb;--ink:#1b2025;--muted:#59636b;--faint:#677078;
  --line:#e2e5df;--line-strong:#cfd5cd;--control-line:#7a838a;
  --accent:#3d625f;--accent-strong:#2b4a47;--accent-soft:#e3ece8;--accent-ink:#f4f8f6;
  --ok:#2e7656;--ok-soft:#e1efe7;--wait:#8a6418;--wait-soft:#f5ecd8;--danger:#b42318;--danger-soft:#fbeae7;
  --shadow:0 1px 2px rgb(27 32 37 / .05),0 12px 32px -12px rgb(27 32 37 / .14);
  --shadow-sm:0 1px 2px rgb(27 32 37 / .06);
  --ease:cubic-bezier(.23,1,.32,1);--dur-fast:.15s;--dur:.25s;--dur-slow:.6s;
  --font:"Geist",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --side:248px;
  color-scheme:light
}
/* Dark: follows the system unless chosen with the switch (data-theme, shared with the homepage). */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e1113;--bg-2:#13171a;--surface:#161a1e;--ink:#e8ebe8;--muted:#a2abb1;--faint:#8b959c;
  --line:#242a2f;--line-strong:#323a40;--control-line:#6b757c;
  --accent:#86b9ae;--accent-strong:#a6cec5;--accent-soft:#1a2927;--accent-ink:#0e1113;
  --ok:#7cc4a0;--ok-soft:#16261f;--wait:#dcb15e;--wait-soft:#2a2215;--danger:#ff9b8f;--danger-soft:#2c1714;
  --shadow:0 1px 2px rgb(0 0 0 / .4),0 12px 32px -12px rgb(0 0 0 / .6);
  --shadow-sm:0 1px 2px rgb(0 0 0 / .4);
  color-scheme:dark
}}
:root[data-theme="dark"]{
  --bg:#0e1113;--bg-2:#13171a;--surface:#161a1e;--ink:#e8ebe8;--muted:#a2abb1;--faint:#8b959c;
  --line:#242a2f;--line-strong:#323a40;--control-line:#6b757c;
  --accent:#86b9ae;--accent-strong:#a6cec5;--accent-soft:#1a2927;--accent-ink:#0e1113;
  --ok:#7cc4a0;--ok-soft:#16261f;--wait:#dcb15e;--wait-soft:#2a2215;--danger:#ff9b8f;--danger-soft:#2c1714;
  --shadow:0 1px 2px rgb(0 0 0 / .4),0 12px 32px -12px rgb(0 0 0 / .6);
  --shadow-sm:0 1px 2px rgb(0 0 0 / .4);
  color-scheme:dark
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--font);letter-spacing:-.006em;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--accent-strong)}
h1{font-size:32px;line-height:1.15;font-weight:600;letter-spacing:-.035em;margin:6px 0 10px}
h2{font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.02em;margin:0 0 14px}
h3{font-size:15px;line-height:1.35;font-weight:600;margin:22px 0 8px}
h4{font-size:13px;font-weight:600;margin:0 0 8px;color:var(--muted)}
p{margin:0 0 12px}
ul,ol{padding-left:20px;margin:0 0 12px}
li{margin:6px 0}
small{display:block;color:var(--muted);font-size:12.5px;font-weight:400;margin-top:5px}
small:empty{display:none}
form+p{margin-top:16px}
code{font:13px var(--mono);background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;word-break:break-all}
hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted);font-size:13px}
.lead{font-size:16px;color:var(--muted);max-width:720px;margin:0 0 24px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.skip{position:fixed;left:12px;top:12px;z-index:100;background:var(--surface);color:var(--ink);padding:10px 14px;border-radius:10px;box-shadow:var(--shadow);transform:translateY(-200%)}
.skip:focus{transform:none}

/* Buttons: pill shape and press feedback as on the homepage */
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border:0;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:600;font-size:14.5px;line-height:1.2;text-decoration:none;cursor:pointer;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .14),var(--shadow-sm);transition:background-color var(--dur-fast),transform var(--dur-fast) var(--ease)}
button:hover,.button:hover{background:var(--accent-strong);color:var(--accent-ink)}
button:active,.button:active{transform:scale(.97)}
button:disabled{opacity:.55;cursor:not-allowed;transform:none}
.secondary,.button.secondary{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--control-line)}
.secondary:hover,.button.secondary:hover{background:var(--bg-2);color:var(--ink)}
.button-small{min-height:34px;padding:0 13px;font-size:13.5px;gap:6px}
.button-small .icon{width:16px;height:16px}
.button-book{min-height:46px;padding:0 24px;font-size:15px}
.danger-button{background:var(--danger);color:var(--surface)}
.danger-button:hover{background:var(--danger);color:var(--surface);filter:brightness(.92)}
.danger-ghost{background:transparent;color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}
.danger-ghost:hover{background:var(--danger-soft);color:var(--danger)}
/* Loading state while a form is sent (app.js): spinner, label from data-busy. */
.is-loading{cursor:progress}
.is-loading::before,.spinner{content:"";width:16px;height:16px;flex:none;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
button.is-loading:disabled{opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}

/* Forms */
label{display:block;font-size:13.5px;font-weight:600;margin:0 0 18px}
input,select,textarea{display:block;width:100%;min-height:42px;margin-top:6px;padding:9px 12px;font:inherit;font-size:15px;font-weight:400;color:var(--ink);
  background:var(--surface);border:1px solid var(--control-line);border-radius:10px;transition:border-color var(--dur-fast)}
textarea{resize:vertical;min-height:112px}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
input[type="radio"]{width:18px;min-height:0;height:18px;margin:2px 0 0;padding:0;accent-color:var(--accent);flex:none}
input[type="checkbox"]{appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;flex:none;width:18px;height:18px;min-height:0;margin:2px 0 0;padding:0;
  border:1.5px solid var(--control-line);border-radius:5px;background:var(--surface);cursor:pointer;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
input[type="checkbox"]::after{content:"";width:5px;height:9px;margin-top:-2px;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg) scale(.4);opacity:0;transition:opacity var(--dur-fast),transform var(--dur-fast) var(--ease)}
input[type="checkbox"]:checked,input[type="checkbox"]:indeterminate{background:var(--accent);border-color:var(--accent)}
input[type="checkbox"]:checked::after{opacity:1;transform:rotate(45deg) scale(1)}
input[type="checkbox"]:indeterminate::after{opacity:1;width:9px;height:0;margin:0;border-width:0 0 2px;transform:none}
input[type="checkbox"]:disabled{opacity:.5;cursor:not-allowed}
input[type="checkbox"]:focus{outline:0}
input[type="checkbox"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.check{display:flex;align-items:flex-start;gap:10px;font-weight:400;font-size:14px;cursor:pointer}
.choice-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.choice-chips button{min-height:34px;padding:0 13px;font-size:13px;font-weight:500}
.more-chips{margin:0 0 6px}
.more-chips>summary{font-size:13px}
.person-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:end;border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0;background:var(--bg)}
.person-row label{margin:0;font-size:12px}
.person-row button{min-height:42px}
.provider-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.provider-option{display:flex;align-items:flex-start;gap:12px;margin:0;padding:14px 16px;border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);cursor:pointer;font-weight:400;transition:border-color var(--dur-fast),background-color var(--dur-fast)}
.provider-option:hover{border-color:var(--control-line)}
.provider-option:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.provider-option b{display:block;font-weight:600}
.lookup{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:22px}
.lookup h2{font-size:16px}
.lookup-result{width:100%;justify-content:flex-start;text-align:left;margin:8px 0;border-radius:12px;white-space:normal;padding:10px 14px;height:auto}
.booking-correction{border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:4px 0 20px;background:var(--bg)}
.booking-correction summary{font-weight:600;color:var(--accent)}
.booking-correction[open] summary{margin-bottom:10px}
.account-search{position:relative}
.account-menu{position:absolute;z-index:30;left:0;right:0;top:100%;margin:4px 0 0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow);max-height:280px;overflow:auto}
.account-menu li{margin:0;padding:8px 10px;border-radius:8px;cursor:pointer;font-weight:400;font-size:14px}
.account-menu li[aria-selected="true"],.account-menu li[role="option"]:hover{background:var(--accent-soft);color:var(--ink)}
.account-menu .account-empty{cursor:default;color:var(--muted)}
.account-chosen{display:block;font-size:12.5px;font-weight:600;color:var(--ok);margin-top:6px;min-height:1em}
.setup-progress{display:block;width:100%;height:6px;margin:0 0 26px;border:0;border-radius:6px;background:var(--line);accent-color:var(--accent);appearance:none;-webkit-appearance:none;overflow:hidden}
.setup-progress::-webkit-progress-bar{background:var(--line);border-radius:6px}
.setup-progress::-webkit-progress-value{background:var(--accent);border-radius:6px}
.setup-progress::-moz-progress-bar{background:var(--accent);border-radius:6px}

/* Surfaces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;margin:0 0 18px;box-shadow:var(--shadow-sm)}
.card>h2:first-child{margin-top:0}
.card details,.window details{margin-top:14px}
summary{cursor:pointer;color:var(--muted);font-size:14px;width:max-content;max-width:100%}
summary:hover{color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:8px}
.narrow{max-width:560px}
.setup-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:24px;align-items:start}
.guide{background:var(--accent-soft);border-radius:18px;padding:24px}
.guide h2,.guide h3{margin-top:0}
.eyebrow{display:block;font-size:12.5px;font-weight:600;color:var(--muted)}
.notice{margin:0 0 18px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);font-size:14px}
.notice p{margin:4px 0 0}
.form-error,.inline-error{background:var(--danger-soft);border-color:var(--danger)}
.form-error b,.inline-error{color:var(--ink)}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}
.section-head h2{margin:0}
.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
table{width:100%;border-collapse:collapse;margin-top:16px;font-size:13.5px}
th{text-align:left;font-size:12.5px;font-weight:600;color:var(--muted)}
td,th{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.badge{display:inline-block;border-radius:999px;padding:3px 10px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:600;white-space:nowrap}

/* Status chips (homepage .row-state colours) */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap}
.chip-accent{background:var(--accent-soft);color:var(--accent)}
.chip-ok{background:var(--ok-soft);color:var(--ok)}
.chip-wait{background:var(--wait-soft);color:var(--wait)}
.chip-danger{background:var(--danger-soft);color:var(--danger)}
.chip-neutral{background:var(--bg-2);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.receipt-review[data-status="posting"] .chip-wait::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:breathe 1.2s ease-in-out infinite}
@keyframes breathe{50%{opacity:.35}}
.file{display:grid;place-items:center;flex:none;width:30px;height:36px;border-radius:7px;background:var(--surface);border:1px solid var(--line-strong);font:600 10px var(--mono);color:var(--muted);letter-spacing:0}

/* Shell: sidebar with workspace switch, breadcrumbs, content */
.sidebar{position:fixed;inset:0 auto 0 0;z-index:30;width:var(--side);display:flex;flex-direction:column;padding:22px 14px 18px;background:var(--bg);border-right:1px solid var(--line)}
.aside-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 8px}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:22px;font-weight:650;letter-spacing:-.04em;text-decoration:none}
.brand:hover{color:var(--ink)}
.brand img{display:block;width:32px;height:32px;flex:none}
.brand:focus-visible{outline-offset:4px;border-radius:6px}
.menu-toggle{display:none}
.aside-tools{display:flex;align-items:center;gap:8px}
/* Light/dark switch as on the homepage: sun left, moon right; the knob marks the choice. */
.theme-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;width:60px;min-height:0;height:32px;padding:0 3px;
  border:1px solid var(--control-line);border-radius:999px;background:var(--surface);color:var(--muted);box-shadow:none;visibility:hidden}
.theme-ready .theme-switch{visibility:visible}
.theme-switch:hover{background:var(--bg-2);color:var(--ink)}
.theme-switch:active{transform:none}
.theme-icon{position:relative;z-index:1;display:grid;place-items:center;height:100%;transition:color var(--dur) var(--ease)}
.theme-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-knob{position:absolute;top:2px;left:3px;width:26px;height:26px;border-radius:999px;background:var(--accent);transition:transform var(--dur) var(--ease)}
.theme-switch[aria-checked="true"] .theme-knob{transform:translateX(26px)}
.theme-switch[aria-checked="false"] .theme-sun,.theme-switch[aria-checked="true"] .theme-moon{color:var(--accent-ink)}
.aside-menu{display:flex;flex-direction:column;flex:1;min-height:0}
.sidebar nav{margin-top:24px;overflow-y:auto}
.workspace{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-sm);transition:border-color var(--dur-fast)}
.workspace:hover{border-color:var(--control-line);color:var(--ink)}
.workspace span{min-width:0}
.workspace b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.workspace small{margin:0;font-size:12px}
.workspace .icon{color:var(--muted);width:16px;height:16px}
.sidebar nav a,.nav-group>summary{display:flex;align-items:center;gap:10px;width:auto;margin:2px 0;padding:8px 12px;border-radius:10px;color:var(--muted);font-size:14.5px;text-decoration:none;transition:background-color var(--dur-fast),color var(--dur-fast)}
.sidebar nav a:hover,.nav-group>summary:hover{background:var(--bg-2);color:var(--ink)}
.sidebar nav a.selected,.sidebar nav a[aria-current="page"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-sm)}
.sidebar nav a.workspace{padding:10px 12px;margin:0 0 14px;color:var(--ink);font-size:inherit}
.sidebar nav a.workspace:hover{background:var(--surface)}
.nav-group{margin:2px 0 0}
.nav-group>summary{list-style:none;cursor:pointer}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary::after{content:"";width:7px;height:7px;margin-left:auto;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform var(--dur) var(--ease)}
.nav-group[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.sidebar .nav-group a{padding-left:40px;font-size:14px}
.sidebar footer{margin-top:auto;padding:14px 8px 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.user-name{display:block;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-link{display:block;margin:0 -8px 8px;padding:6px 8px;border-radius:10px;text-decoration:none;color:var(--muted)}
.account-link:hover{background:var(--bg-2);color:var(--ink)}
.account-link small{margin:0;font-size:12px}
.danger-zone{border-color:var(--danger)}
.google-button{width:100%}
/* Sign-in cards: one column, full-width action, secondary links with room around them. */
.auth form button{width:100%}
.form-aside{margin:-8px 0 20px;text-align:right;font-size:13.5px}
.auth-foot{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:14px}
.or{display:flex;align-items:center;gap:12px;margin:4px 0 16px;color:var(--muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.setup-steps{display:grid;gap:10px;margin:0 0 18px;padding-left:22px}
.setup-steps li{margin:0}
.setup-steps b{display:block}
.setup-steps span{color:var(--muted);font-size:14px}
/* QR code stays black on white in both themes so every scanner reads it. */
.qr-box{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:0 0 18px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.qr{display:block;width:180px;height:180px;flex:none;border-radius:8px}
.qr-box p{margin:0 0 6px}
.secret{display:inline-block;font-size:14px;letter-spacing:.04em;word-break:normal;white-space:normal}
.recovery-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 18px;padding-left:24px}
.recovery-codes li{margin:0}
.danger-zone h2{color:var(--danger)}
.logout-button{width:100%;min-height:38px;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--control-line);font-size:14px}
.logout-button:hover{background:var(--bg-2);color:var(--ink)}
main{margin-left:var(--side);max-width:calc(1320px + var(--side));padding:26px 44px 80px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 4px;font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
body.signed-out .sidebar{position:static;width:auto;flex-direction:row;align-items:center;justify-content:space-between;padding:16px 24px;border-right:0;border-bottom:1px solid var(--line)}
body.signed-out .aside-menu{flex:0 1 auto}
body.signed-out .sidebar footer{margin:0;padding:0;border:0}
body.signed-out main{margin:0 auto;max-width:600px;padding:48px 20px 80px}

/* Company overview */
.company-card{padding:0;transition:border-color var(--dur-fast),transform var(--dur) var(--ease)}
.company-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.company{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"mark name" "mark state" "go go";gap:4px 14px;padding:22px;color:var(--ink);text-decoration:none}
.company:hover{color:var(--ink)}
.company-mark{grid-area:mark;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);font-weight:650;font-size:18px}
.company h2{grid-area:name;margin:0;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.company .chip{grid-area:state;justify-self:start}
.company-go{grid-area:go;display:flex;align-items:center;gap:6px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);color:var(--accent);font-size:14px;font-weight:600}
.company-go .icon{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.company:hover .company-go .icon{transform:translateX(3px)}
.company-card>p{margin:0;padding:0 22px 16px}
.delete-link{font-size:13px;color:var(--danger)}
.delete-row{margin:4px 0 0;text-align:right}
.delete-dialog{border:1px solid var(--line);border-radius:20px;padding:28px;width:min(560px,calc(100vw - 32px));max-height:85vh;overflow:auto;background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.delete-dialog::backdrop{background:rgb(14 17 19 / .45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.delete-actions{display:flex;justify-content:flex-end;align-items:center;gap:20px;margin-top:22px}

/* Receipt list: one window like the homepage "Ihre Belege" demo */
.window{background:var(--surface);border:1px solid var(--line-strong);border-radius:20px;box-shadow:var(--shadow);margin-bottom:18px}
.inbox{padding:22px 22px 16px}
.inbox-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.inbox-title h2{margin:0;font-size:20px}
.inbox-title small{margin-top:2px;font-size:13px}
.search{position:relative;flex:0 1 300px;margin:0;font-weight:400}
.search .icon{position:absolute;left:14px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search input{margin:0;min-height:40px;padding-left:38px;border-radius:999px;font-size:14px}
.filter-tabs{display:flex;flex-wrap:wrap;gap:4px;width:max-content;max-width:100%;margin:18px 0 14px;padding:4px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line)}
.filter-tabs a{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;border-radius:999px;color:var(--muted);font-size:14px;font-weight:500;text-decoration:none;transition:background-color var(--dur-fast),color var(--dur-fast)}
.filter-tabs a:hover{color:var(--ink)}
.filter-tabs a[aria-current="page"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line)}
.filter-tabs .count{min-width:22px;padding:0 7px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:12px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px var(--line)}
.filter-tabs a[aria-current="page"] .count{background:var(--accent);color:var(--accent-ink);box-shadow:none}

/* Booking progress: track while Bexio receives the receipts, summary when done */
.run{display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:14px 16px;border-radius:16px;background:var(--bg-2);border:1px solid var(--line)}
.run-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.run-icon.spinner{width:22px;height:22px;margin:5px;background:none;border-color:var(--accent);border-right-color:transparent}
.run-body{flex:1;min-width:0}
.run-title{margin:0;font-size:14.5px}
.run-title b{font-weight:600}
.run-title span{color:var(--muted);font-variant-numeric:tabular-nums}
.run small{margin-top:6px}
.run-track{display:block;width:100%;height:6px;margin-top:8px;border:0;border-radius:999px;background:var(--line);appearance:none;-webkit-appearance:none;overflow:hidden}
.run-track::-webkit-progress-bar{background:var(--line);border-radius:999px}
.run-track::-webkit-progress-value{border-radius:999px;background:linear-gradient(90deg,var(--accent) 0 40%,var(--accent-strong) 50%,var(--accent) 60% 100%);background-size:250% 100%;animation:sheen 1.6s linear infinite;transition:width var(--dur-slow) var(--ease)}
.run-track::-moz-progress-bar{border-radius:999px;background:var(--accent)}
@keyframes sheen{from{background-position:100% 0}to{background-position:-150% 0}}
.run-done{background:var(--ok-soft);border-color:transparent}
.run-done .run-icon{background:var(--surface);color:var(--ok)}
.run-done .run-title b{color:var(--ok)}
.run-attention{background:var(--wait-soft)}
.run-attention .run-icon{color:var(--wait)}
.run-attention .run-title b{color:var(--ink)}
.run-link{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:14px;font-weight:600;color:var(--ink)}
.run-link .icon{width:16px;height:16px}

/* Selection bar: sticky while scrolling, turns into the booking action */
.bulk-bar{position:sticky;top:10px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin:0 0 10px;padding:12px 16px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:border-color var(--dur),background-color var(--dur)}
.bulk-bar.active{border-color:var(--accent);background:var(--accent-soft)}
.bulk-bar>label,.bulk-bar>p{margin:0}
.bulk-count{font-size:14px;color:var(--muted)}
.bulk-bar.active .bulk-count{color:var(--ink);font-weight:600}
.bulk-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;flex-basis:100%;padding-top:10px;border-top:1px solid var(--line)}
.bulk-confirm .check{flex:1 1 320px;margin:0}
.bulk-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-left:auto}
.bulk-confirm small{flex-basis:100%;margin:0}

/* Receipt rows (homepage .row) */
.receipt-list{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.receipt-head,.receipt-row{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1.6fr) 96px 118px 168px 88px;gap:14px;align-items:center}
.receipt-head{padding:2px 56px 4px 16px;color:var(--muted);font-size:12.5px;font-weight:600}
.receipt-head span:nth-child(4){text-align:right}
.receipt-review{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--bg);transition:border-color var(--dur-fast),background-color var(--dur-fast)}
.receipt-review:hover{border-color:var(--line-strong)}
.receipt-review:has([data-bulk]:checked){border-color:var(--accent);background:var(--accent-soft)}
.receipt-row{min-height:60px;padding:10px 56px 10px 16px}
.row-who{display:flex;align-items:center;gap:12px;min-width:0}
.pick-none{width:18px;flex:none}
.row-text{min-width:0}
.row-title{margin:0;font-size:14.5px;font-weight:600;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-title label{display:inline;margin:0;font:inherit;cursor:pointer}
.row-text small{margin:1px 0 0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-account{font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-notes{font-size:13px}
.row-amount{font-weight:600;text-align:right;white-space:nowrap;font-size:14.5px}
.row-status{display:flex}
.row-open{display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;font-size:14px;font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap}
.row-open .icon{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.row-open:hover .icon{transform:translateX(3px)}
.window .row-details{margin:0}
.row-details>summary{position:absolute;top:13px;right:12px;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;list-style:none;color:var(--muted)}
.row-details>summary::-webkit-details-marker{display:none}
.row-details>summary:hover{background:var(--bg-2);color:var(--ink)}
.row-details>summary .icon{transition:transform var(--dur) var(--ease)}
.row-details[open]>summary .icon{transform:rotate(180deg)}
.row-panel{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;margin:0 16px 14px;padding:16px 0 0;border-top:1px solid var(--line)}
.row-panel>.receipt-links,.row-panel>details{grid-column:1/-1;margin:0}
.receipt-links{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:13.5px}

/* Detail page: original stays in view, decisions on the right */
.doc-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 22px}
.doc-head .lead{margin:0}
.doc-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,1fr);gap:20px;align-items:start}
.doc-original{position:sticky;top:16px;padding:14px;margin:0}
.doc-bar{display:flex;align-items:center;gap:12px;padding:0 2px 12px}
.doc-bar h2{flex:1;min-width:0;margin:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdf-preview{display:block;width:100%;height:min(78vh,900px);border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.doc-original .preview+p{margin:10px 2px 0}
/* Receipt preview: compact notice while it is checked and prepared, full size once loaded. */
.preview{position:relative}
.preview-wait{display:none}
.pdf-preview[data-src]:not([src]){display:none}
.preview.is-loading .preview-wait{display:flex;align-items:center;gap:10px;margin:0;padding:16px;border:1px dashed var(--line-strong);border-radius:12px;background:var(--bg-2);color:var(--muted);font-size:14px}
.preview.is-loading .preview-wait .spinner{color:var(--accent)}
.preview.is-loading .pdf-preview{position:absolute;top:0;left:0;width:1px;height:1px;border:0;opacity:0;clip-path:inset(50%);pointer-events:none}
.preview .pdf-preview{animation:preview-in var(--dur-slow) var(--ease)}
@keyframes preview-in{from{opacity:0;transform:translateY(6px)}}
/* Info field: a small "i" opening a short explanation (hover, focus, tap; Esc closes). */
.tabs-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 14px}
.tabs-row .filter-tabs{margin:0}
.info{position:relative;display:inline-flex}
.info-button{display:grid;place-items:center;width:24px;height:24px;min-height:0;padding:0;border-radius:50%;background:var(--surface);color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--control-line);font:600 13px/1 var(--font);font-style:italic}
.info-button:hover{background:var(--bg-2);color:var(--ink)}
.info-button:active{transform:none}
.info-text{position:absolute;z-index:40;top:calc(100% + 8px);left:50%;width:max-content;max-width:min(340px,80vw);transform:translateX(-50%);
  padding:12px 14px;border-radius:12px;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);box-shadow:var(--shadow);
  font-size:13.5px;font-weight:400;line-height:1.5;text-align:left;opacity:0;visibility:hidden;transition:opacity var(--dur-fast),visibility var(--dur-fast)}
.info-text::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:10px}
.info:hover .info-text,.info:focus-within .info-text,.info.is-open .info-text{opacity:1;visibility:visible}
.info.is-closed .info-text{opacity:0;visibility:hidden}
/* Anchored to the whole row so the text never leaves the screen on phones. */
.tabs-row,.doc-head{position:relative}
.tabs-row .info,.doc-head .info{position:static}
.tabs-row .filter-tabs{min-width:0}
.tabs-row .info-text{top:100%;left:auto;right:0;transform:none;max-width:min(440px,100%)}
.doc-head .info-text{top:100%;left:0;transform:none;max-width:min(440px,100%)}
.glossary{display:grid;gap:8px;margin:0}
.glossary dt{font-weight:600}
.glossary dd{margin:0;color:var(--muted)}
.doc-side>.card:last-child{margin-bottom:0}
.jump{margin:0 0 12px;font-size:14px}
.jump a{font-weight:600}
.read-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:0}
.read-fields div{min-width:0}
.read-fields dt{font-size:12.5px;color:var(--muted)}
.read-fields dd{margin:2px 0 0;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.read-fields .missing{color:var(--muted);font-weight:400}
.read-suggest{grid-column:1/-1;padding:12px 14px;border-radius:12px;background:var(--accent-soft)}
.read-suggest dt{color:var(--accent);font-weight:600}
.checklist{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.checklist li{position:relative;margin:0;padding:10px 14px 10px 38px;border-radius:12px;font-size:14px;font-weight:550}
.checklist li::before{content:"";position:absolute;left:15px;top:14px;width:5px;height:9px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.checklist .check-ok{background:var(--ok-soft);color:var(--ok)}
.checklist .check-open{background:var(--wait-soft);color:var(--ink)}
.checklist .check-open::before{left:15px;top:17px;width:8px;height:8px;border:0;border-radius:50%;transform:none;background:var(--wait)}
.more>summary{font-size:13.5px}
.more p,.more ul{font-size:13.5px;color:var(--muted);margin-top:8px}
.entry{margin:0 0 14px;border:1px solid var(--line-strong);border-radius:14px;background:var(--bg);overflow:hidden}
.entry-row{display:flex;justify-content:space-between;gap:16px;padding:11px 16px;font-size:14.5px}
.entry-row+.entry-row{border-top:1px solid var(--line)}
.entry-row dt{color:var(--muted);flex:none}
.entry-row dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.entry-text dd{font-weight:400;color:var(--muted)}
.approve-card form{margin:0}
.approve-card .check{margin:4px 0 14px}
.approve-card .button-book{width:100%}
.result-card .chip{font-size:13px}
.result-danger{border-color:var(--danger)}

/* Medium widths: the account moves under the supplier so the name keeps its room. */
@media (max-width:1439px){
  .receipt-head,.receipt-row{grid-template-columns:minmax(0,1fr) auto 112px 160px 76px}
  .receipt-head span:nth-child(2){display:none}
  .receipt-row{grid-template-areas:"who notes amount status open" "account account account account account";row-gap:0}
  .row-who{grid-area:who}.row-notes{grid-area:notes}.row-amount{grid-area:amount}.row-status{grid-area:status}.row-open{grid-area:open}
  .row-account{grid-area:account;padding-left:72px;font-size:13px}
}
@media (max-width:1280px){
  :root{--side:224px}
  .doc-layout{grid-template-columns:minmax(0,1fr) minmax(340px,1fr)}
}
/* Narrow sidebar: brand and theme switch must fit next to each other. */
@media (min-width:701px) and (max-width:1280px){
  .sidebar{padding-inline:12px}
  .aside-top{gap:8px;padding:0 4px}
  .brand{font-size:20px}
}
@media (max-width:1100px){
  .receipt-head{display:none}
  .receipt-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who amount" "account status" "notes open";row-gap:4px}
  .row-who{grid-area:who}.row-amount{grid-area:amount}.row-account{grid-area:account}.row-status{grid-area:status;justify-content:flex-end}
  .row-notes{grid-area:notes}.row-open{grid-area:open}
  .row-account,.row-notes{padding-left:72px}
  .doc-layout{grid-template-columns:minmax(0,1fr)}
  .doc-original{position:static}
  .pdf-preview{height:62vh}
  .setup-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  :root{--side:220px}
  main{padding:22px 24px 64px}
}
@media (max-width:700px){
  .sidebar{position:sticky;top:0;width:100%;padding:10px 16px;background:color-mix(in srgb,var(--bg) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-right:0;border-bottom:1px solid var(--line)}
  .brand{font-size:20px}
  .brand img{width:30px;height:30px}
  .js .menu-toggle{display:inline-flex;min-height:38px;padding:0 16px;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--control-line);font-size:14px}
  .sidebar nav{margin-top:12px;overflow:visible}
  .js .aside-menu:not(.open){display:none}
  .aside-menu.open{max-height:calc(100vh - 64px);overflow-y:auto;padding-bottom:10px}
  main{margin:0;padding:14px 16px 60px}
  h1{font-size:27px}
  .lead{font-size:15px}
  .card{padding:18px;border-radius:16px}
  .inbox{padding:16px 12px 12px}
  .search{flex-basis:100%}
  .filter-tabs{flex-wrap:nowrap;overflow-x:auto;width:auto;scrollbar-width:none}
  .filter-tabs a{flex:none}
  .receipt-row{padding:10px 48px 10px 12px}
  .row-details>summary{top:10px;right:8px}
  .row-who .file{display:none}
  .receipt-row{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"who who amount" "account account account" "status notes open";column-gap:10px}
  .row-account,.row-status{padding-left:30px}
  .row-status{justify-content:flex-start}
  .row-notes{padding-left:0}
  .row-notes .muted{display:none}
  .row-panel{grid-template-columns:1fr;margin:0 12px 12px}
  .bulk-bar{top:64px;padding:12px}
  .bulk-buttons{width:100%;margin:0}
  .bulk-buttons button{flex:1 1 auto}
  .run{flex-wrap:wrap}
  .provider-grid,.person-row{grid-template-columns:1fr}
  .section-head{display:block}
  table{display:block;overflow-x:auto}
  .doc-original{padding:10px}
  .pdf-preview{height:min(70vh,560px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .run-track::-webkit-progress-value{animation:none}
}
@media (forced-colors:active){
  .theme-switch{border-color:ButtonText}
  .theme-knob{background:Highlight;forced-color-adjust:none}
  .theme-switch[aria-checked] .theme-icon{color:ButtonText}
}
@media print{
  .sidebar,.bulk-bar,.row-details>summary,.skip{display:none!important}
  main{margin:0;padding:0}
  .card,.window{box-shadow:none}
}