/* Screen rules for WB-9: appointments, appointment, invoices, notifications.
   Extra states beyond the four in style.css; same rule: data-s lists the states an element shows in. */
body[data-state="noupcoming"] [data-s]:not([data-s~="noupcoming"]),
body[data-state="allread"] [data-s]:not([data-s~="allread"]),
body[data-state="remindersoff"] [data-s]:not([data-s~="remindersoff"]),
body[data-state="togglefail"] [data-s]:not([data-s~="togglefail"]),
body[data-state="fileerror"] [data-s]:not([data-s~="fileerror"]),
body[data-state="progress"] [data-s]:not([data-s~="progress"]),
body[data-state="completed"] [data-s]:not([data-s~="completed"]),
body[data-state="noinvoice"] [data-s]:not([data-s~="noinvoice"]),
body[data-state="cancelled"] [data-s]:not([data-s~="cancelled"]),
body[data-state="noshow"] [data-s]:not([data-s~="noshow"]),
body[data-state="cutoff"] [data-s]:not([data-s~="cutoff"]),
body[data-state="notfound"] [data-s]:not([data-s~="notfound"]) { display: none; }

.badge { display: inline-block; padding: 2px 10px; border: 1px solid var(--gold); border-radius: 999px; font-size: var(--fs-small); font-weight: 600; white-space: nowrap; color: var(--gold-strong); }
.badge.progress { background: var(--gold); border-color: var(--gold); color: #1a1405; }
.badge.completed { color: var(--text); border-color: var(--muted); }
.badge.cancelled { color: var(--muted); border-color: var(--line); }
.badge.noshow { color: #ff9a9d; border-color: var(--alert); }

.sect { margin: 20px 0 4px; }
.card { display: block; margin: 8px 0; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none; }
a.card { min-height: 56px; }
.card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; color: inherit; text-decoration: none; }
.card a.top { min-height: 44px; align-items: center; }
.states { scrollbar-width: none; }
.states a { flex: none; white-space: nowrap; }
.card .top b { font-size: var(--fs-body); font-weight: 600; }
.card .meta { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--muted); }
.card .msg { display: block; margin-top: 6px; color: var(--text); }
.card .act { display: block; margin-top: 6px; color: var(--gold-strong); font-weight: 600; }
.card.unread { border-color: var(--gold); }
body[data-state="allread"] .card.unread { border-color: var(--line); }
.new { color: var(--gold-strong); font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
.new::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--gold-strong); }
.hint { color: var(--muted); font-size: var(--fs-small); }
.empty { margin: 24px 0; text-align: center; color: var(--muted); }
.empty b { display: block; margin-bottom: 4px; color: var(--text); font-size: var(--fs-lead); font-weight: 600; }
.empty .cta { margin-top: 16px; }

.skelrow { height: 76px; margin: 8px 0; border-radius: 12px; background: linear-gradient(90deg, #17171b, #26262b, #17171b); background-size: 200% 100%; animation: sh 1.4s infinite linear; }
@media (prefers-reduced-motion: reduce) { .skelrow { animation: none; } }

.btn { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border: 1px solid var(--gold); border-radius: 12px; color: var(--gold-strong); font-size: var(--fs-body); font-weight: 600; text-decoration: none; background: transparent; }
.btn.fill { background: linear-gradient(#f0c35f, #c8962f); border-color: #c8962f; color: #1a1405; }
.btn.danger { border-color: var(--alert); color: #ff9a9d; }
.btnrow { display: flex; gap: 8px; margin: 10px 0 0; }
.btnrow .btn { flex: 1; }
.stack .btn { margin: 8px 0; }

dl.facts { margin: 12px 0; padding: 4px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
dl.facts div { padding: 8px 0; border-bottom: 1px solid var(--line); }
dl.facts div:last-child { border-bottom: 0; }
dl.facts dt { font-size: var(--fs-small); color: var(--muted); }
dl.facts dd { margin: 0; color: var(--text); }
dl.facts dd.none { color: var(--muted); }
.status { margin: 4px 0 0; }

.remind { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.remind .txt { flex: 1; }
.remind .txt b { display: block; font-weight: 600; }
.remind .txt small { display: block; color: var(--muted); }
.switch { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: var(--text); text-decoration: none; font-weight: 600; }
.switch i { position: relative; width: 52px; height: 32px; border-radius: 16px; border: 1px solid var(--gold); background: var(--gold); }
.switch i::after { content: ""; position: absolute; top: 3px; left: 23px; width: 24px; height: 24px; border-radius: 50%; background: #1a1405; }
.switch.off i { background: transparent; border-color: var(--muted); }
.switch.off i::after { left: 3px; background: var(--muted); }
.err { display: block; margin-top: 4px; color: #ff9a9d; font-size: var(--fs-small); }