/* CCC-PICKAPP-001 – PickApp-side og forside-widget. Bygger på tokens i app.css. */
.pa-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pa-pill{font:600 .72rem var(--f-body);letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.pa-ok{background:var(--ok-soft);color:var(--ok)} .pa-warn{background:var(--warn-soft);color:var(--warn)}
.pa-bad{background:var(--bad-soft);color:var(--bad)} .pa-idle{background:var(--idle-soft);color:var(--idle)}
.pa-acc{background:var(--accent-soft);color:var(--accent)}
.pa-paused{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;background:var(--bad-soft);color:var(--bad);border:2px solid var(--bad);border-radius:6px;padding:12px 16px}
.pa-paused b{font:700 1.6rem/1 var(--f-display);letter-spacing:.08em}
.pa-paused span{color:var(--ink)}
.pa-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
@media (max-width:980px){.pa-grid{grid-template-columns:minmax(0,1fr)}}
.pa-ctl{display:grid;gap:10px}
.pa-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
button.pa-stop{color:#fff;background:var(--bad);border-color:var(--bad);font-size:1rem;padding:10px 16px}
button.pa-stop:hover:not(:disabled){background:var(--bad);filter:brightness(1.1)}
button.pa-go{color:#fff;background:var(--ok);border-color:var(--ok)}
button.pa-go:hover:not(:disabled){background:var(--ok);filter:brightness(1.1)}
button.pa-sel{background:var(--accent);color:#fff}
.pa-seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.pa-seg button{border:0;border-radius:0;border-right:1px solid var(--line)}
.pa-seg button:last-child{border-right:0}
.pa-confirm{border:1px solid var(--accent);border-radius:6px;padding:10px 12px;display:grid;gap:8px;font-size:.88rem;background:var(--panel)}
.pa-confirm ul{margin:0;padding-left:18px;font:500 .8rem var(--f-mono)}
.pa-msg{font-size:.85rem;font-weight:600} .pa-msg.ok{color:var(--ok)} .pa-msg.bad{color:var(--bad)}
.pa-rule{border:1px solid var(--line);border-radius:6px;padding:8px 10px;display:grid;gap:6px}
.pa-rule-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pa-rule-h strong{font:600 .95rem var(--f-display);letter-spacing:.04em;text-transform:uppercase}
.pa-postal{font:500 .72rem/1.6 var(--f-mono);color:var(--muted)}
.pa-f{display:grid;gap:2px;font-size:.75rem;color:var(--muted)}
.pa-ctl input[type=number],.pa-ctl input[type=time],.pa-ctl input[type=date],.pa-ctl input[type=text],.pa-ctl select{font:500 .85rem var(--f-mono);padding:4px 6px;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--ink)}
.pa-ctl input[type=number]{width:76px}
.pa-ctl input[type=text]{width:130px}
.pa-sw{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;cursor:pointer}
.pa-sw input{width:17px;height:17px;accent-color:var(--accent)}
.pa-days{display:flex;flex-wrap:wrap;gap:2px}
.pa-days label{font:600 .72rem var(--f-body);border:1px solid var(--line);border-radius:4px;padding:2px 5px;cursor:pointer;display:inline-flex;gap:3px;align-items:center}
.pa-days input{margin:0}
tr.pa-diff td{background:var(--warn-soft)}
tr.pa-took td{background:var(--ok-soft)}
.pa-why{color:var(--muted);font-size:.78rem}
.pa-num{font-family:var(--f-mono);white-space:nowrap}
/* widget */
.pa-w{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px;display:grid;gap:10px}
.pa-w.paused{border:2px solid var(--bad)}
.pa-w-h{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.pa-w-n{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.pa-w-n div{background:var(--panel);padding:6px 8px}
.pa-w-n b{display:block;font:700 1.4rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.pa-w-n span{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
@media (max-width:520px){.pa-w-n{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pa-link{font-weight:600;color:var(--accent)}
[hidden]{display:none!important}

/* Adaptive panels: content grows naturally until the viewport limit. */
.pa-grid > *, .pa-grid section, .pa-grid aside, .pa-grid .stack{min-width:0}
.pa-scroll{max-height:clamp(240px,55vh,560px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.pa-scroll thead th{position:sticky;top:0;z-index:1;background:var(--panel)}
.pa-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pa-grid aside > section{max-height:clamp(320px,78vh,900px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.pa-monitor{padding:14px;display:grid;gap:12px;overflow-wrap:anywhere}
.pa-monitor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pa-monitor-grid dt{font-size:.75rem;color:var(--muted)}
.pa-monitor-grid dd{margin:3px 0 0;font:500 .88rem var(--f-mono)}
.pa-monitor summary{cursor:pointer;font-weight:600;padding:8px 0}
.pa-monitor .pa-scroll{max-height:clamp(180px,35vh,360px)}
.pa-grid .sec-head{flex-wrap:wrap;gap:8px}
.pa-grid .sec-head .meta{overflow-wrap:anywhere}
@media(max-width:520px){.pa-monitor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pa-grid{gap:14px}.pa-grid aside > section{max-height:70vh}.pa-scroll{max-height:55vh}}

.pa-grid .pa-scroll table{min-width:1050px}
.pa-grid .pa-scroll td:last-child{min-width:230px;max-width:300px;overflow-wrap:anywhere}
.pa-monitor .pa-scroll table{min-width:620px}
.pa-monitor .pa-scroll td:last-child{min-width:90px}
.pa-why details summary{cursor:pointer;color:var(--accent)}

/* Samme kompakte mønster som fakturawidgeten: oversikt først, detaljer ved behov. */
.pa-widget{min-width:0;border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:12px 14px}
.pa-widget>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:600 1.15rem var(--f-display)}
.pa-widget>summary::-webkit-details-marker{display:none}
.pa-widget>summary::before{content:'▸';color:var(--accent)}
.pa-widget[open]>summary::before{content:'▾'}
.pa-widget>summary small{font:400 .75rem var(--f-body);color:var(--muted)}
.pa-widget[open]>summary{margin-bottom:12px}
.pa-widget>summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.pa-widget-body{max-height:clamp(260px,65vh,720px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:4px}