/* OPD app kiegészítések — az alap (style.css, theme.js, ui.js) a diszpécser/futár appal közös: tools/sync_opd.py másolja. */
#opd { max-width: 480px; margin: 0 auto; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
#opd > .tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-width: 480px; margin: 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--card); border-top: 1px solid var(--line); padding: 0 8px env(safe-area-inset-bottom); box-shadow: 0 -4px 20px rgba(0,0,0,.06);
}
.sec-h { font-family: var(--f-cond); font-weight: 800; font-size: 15px; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-3); padding: 10px 18px 0; }
.opd-list { padding-top: 8px; padding-bottom: 6px; }
.empty small { color: var(--ink-3); }

/* kártya: fejléc + cím + egyeztetés */
.opd-card { gap: 10px; }
.opd-card .addr { font-size: 1.2rem; }
.opd-card .who, .opd-card .pay-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.opd-card .pay-row .time { margin-left: auto; }
.opd-card.is-kell { box-shadow: var(--shadow), inset 4px 0 0 var(--red); }
.opd-card.is-var { box-shadow: var(--shadow), inset 4px 0 0 var(--blue); }
.opd-card.is-ok { border-color: var(--green); box-shadow: var(--shadow), inset 4px 0 0 var(--green); }
.opd-card.is-done { opacity: .72; }
.badge.p-kell { background: var(--red); color: var(--on-red); }
.badge.p-var { background: var(--blue-dim); color: var(--blue); }
.badge.p-ok { background: var(--green-dim); color: var(--green-text); }

.neg { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 8px; }
.neg .q { margin: 0; font-family: var(--f-cond); font-weight: 800; font-size: 19px; letter-spacing: .3px; }
.neg .info { margin: 0; font-weight: 700; }
.neg .info.ok { color: var(--green-text); font-size: 1.1rem; }
.neg .info.late { color: var(--red-text); }
.neg .wz { padding: 10px 12px; border-radius: var(--r-sm); background: var(--violet-dim); color: var(--violet); font-weight: 700; }
.neg .sub { margin: 0; color: var(--ink-3); font-size: .85rem; }
.neg .chips button { min-width: 48px; }
.neg .actions { margin: 0; }
.custom-perc { display: flex; gap: 8px; align-items: center; }
.custom-perc input { max-width: 120px; padding: 10px 12px; }

.f-row .st { color: var(--ink-3); font-size: .85rem; white-space: nowrap; }
.f-row.is-cancel .st { text-decoration: none; }