/* Spital Limmattal patient portal - invoice module (embeddable via iframe).
   Colours taken from spital-limmattal.ch / limmiportal: blue #0090d2, yellow #ffed00, greys. */
:root{--blue:#0090d2;--blue-dark:#0073a8;--blue-tint:#e5f4fa;--yellow:#ffed00;--navy:#436786;--bg:#f3f6f7;--panel:#fff;--line:#d2d2d2;--line-soft:#e4ebed;--text:#262626;--muted:#6f6f6f;--green:#2e8b57;--red:#bf2a2a;--amber:#b25e00}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;font-size:14px;color:var(--text);background:var(--bg)}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
/* module header (no portal chrome: the surrounding patient portal provides it) */
.crumbs{font-size:13px;color:var(--muted);padding:14px 20px 0}
.crumbs a{color:var(--blue)}
.page{padding:8px 20px 28px;max-width:1400px;margin:0 auto}
.page-title{font-size:24px;font-weight:600;margin:0 0 2px;color:var(--text)}
.page-title::after{content:"";display:block;width:56px;height:4px;background:var(--blue);border-radius:2px;margin-top:8px}
.page-sub{color:var(--muted);margin:10px 0 16px}
.actionbar{display:flex;gap:4px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:4px;padding:6px 8px;margin-bottom:16px;align-items:center}
.actionbar .grp{display:flex;gap:2px;padding-right:10px;margin-right:6px;border-right:1px solid var(--line-soft)}
.actionbar .grp:last-child{border:0}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;background:transparent;color:var(--text);padding:6px 10px;border-radius:3px;font:inherit;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--blue-tint);border-color:var(--line-soft);text-decoration:none}
.btn.primary{background:var(--blue);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--blue-dark);border-color:transparent}
.btn.primary:disabled{opacity:.7;cursor:default}
.btn.outline{border-color:var(--line);background:#fff}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn.small{padding:3px 8px;font-size:13px}
.layout{display:grid;grid-template-columns:1fr 300px;gap:16px}
@media(max-width:900px){.layout{grid-template-columns:1fr}}
/* cues */
.cues{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.cue{background:#fff;border:1px solid var(--line);border-radius:4px;padding:14px 16px;border-left:4px solid var(--blue)}
.cue.warn{border-left-color:var(--yellow)}
.cue.ok{border-left-color:var(--green)}
.cue .v{font-size:26px;font-weight:600;margin:4px 0 2px;color:var(--text)}
.cue .l{color:var(--muted);font-size:13px}
/* panels / fasttabs */
.panel{background:#fff;border:1px solid var(--line);border-radius:4px;margin-bottom:14px}
.panel h3{margin:0;padding:10px 14px;font-size:14px;font-weight:600;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:8px;background:var(--bg)}
.panel h3 .chev{color:var(--muted);font-size:11px}
.panel .body{padding:12px 14px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:6px 40px}
@media(max-width:700px){.fields{grid-template-columns:1fr}}
.field{display:grid;grid-template-columns:170px 1fr;align-items:center;min-height:30px;border-bottom:1px solid var(--line-soft)}
.field label{color:var(--muted);font-size:13px}
.field .val{padding:4px 6px;border-radius:2px}
/* tables */
table.list{width:100%;border-collapse:collapse;font-size:13.5px}
table.list th{text-align:left;font-weight:600;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);background:var(--bg);white-space:nowrap}
table.list td{padding:8px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.list tr:hover td{background:var(--blue-tint)}
table.list td.num,table.list th.num{text-align:right;font-variant-numeric:tabular-nums}
table.list tr.total td{font-weight:600;border-top:2px solid var(--line);background:var(--bg)}
table.list td:first-child,table.list td:nth-child(2),table.list td.num{white-space:nowrap}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;font-weight:600}
.badge.open{background:#fff9c2;color:#7a6a00}
.badge.paid{background:#e3f3e8;color:var(--green)}
.rowactions{display:flex;gap:4px;justify-content:flex-end}
/* factbox */
.factbox .panel h3{background:#fff}
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:13px;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;text-align:right;font-weight:500}
.kv dd.big{font-size:20px;font-weight:600;color:var(--blue)}
.muted{color:var(--muted)}
.notice{background:var(--blue-tint);border:1px solid #bfe1f2;border-radius:4px;padding:10px 12px;font-size:13px;margin-bottom:14px}
/* QR code */
.qrwrap{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.qrwrap .swissqr{width:150px;height:150px;flex:none;background:#fff;padding:6px;border:1px solid var(--line-soft);border-radius:4px}
.qrwrap.large .swissqr{width:200px;height:200px}
.qrmeta{font-size:12.5px;line-height:1.5;min-width:180px;flex:1}
.qrmeta b{display:block;color:var(--text)}
.qrmeta .mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
/* payment */
.paybox{max-width:760px}
.methods{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 14px}
@media(max-width:700px){.methods{grid-template-columns:1fr}}
.method{border:1px solid var(--line);border-radius:4px;padding:12px;cursor:pointer;display:flex;gap:10px;align-items:center;background:#fff}
.method input{margin:0;accent-color:var(--blue)}
.method.sel{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);background:var(--blue-tint)}
.method .t{font-weight:600}
.method .s{font-size:12px;color:var(--muted)}
.input{width:100%;border:1px solid var(--line);border-radius:3px;padding:7px 9px;font:inherit;background:#fff}
.form{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.form .full{grid-column:1/-1}
.form label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
.success{text-align:center;padding:30px 20px}
.success .check{width:64px;height:64px;border-radius:50%;background:#e3f3e8;color:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:34px}
.success h2{margin:0 0 6px;font-weight:600}
.footer{color:var(--muted);font-size:12px;margin-top:24px;text-align:center}