/* Inbox: taken, deadlines en facturen uit de mailboxen */
.ib-status { color: var(--muted); font-size: 13px; margin: -8px 0 14px; }
.ib-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.ib-tile { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; border-top: 3px solid var(--line); }
.ib-tile:hover { background: var(--hover); }
.ib-tile strong { font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ib-tile .ib-tl { font-size: 13px; color: var(--muted); }
.ib-tile.warn { border-top-color: #e3a008; }
.ib-tile.bad { border-top-color: var(--bad); }
.ib-sec { margin-bottom: 24px; scroll-margin-top: 16px; }
.ib-sec-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ib-sec-head h2 { font-size: 17px; }
.ib-count { background: var(--soft); color: var(--text); border-radius: 999px; padding: 0 8px; font-size: 12.5px; font-weight: 700; }
.ib-none { color: var(--muted); font-size: 13.5px; }
.ib-list { display: flex; flex-direction: column; gap: 6px; }
.ib-row { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.ib-row.p1 { border-left-color: var(--bad); }
.ib-row.p2 { border-left-color: var(--blue-d); }
.ib-row.done { opacity: .75; border-left-color: var(--ok); }
.ib-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ib-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ib-title strong { overflow-wrap: anywhere; }
.ib-sub { font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.ib-meta { overflow-wrap: anywhere; }
.ib-amt { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: auto; }
.ib-due { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--soft); }
.ib-due.soon { background: #fff1d6; color: #8a5a00; }
.ib-due.late { background: var(--bad); color: #fff; }
.ib-tag { font-size: 12px; color: var(--muted); }
.ib-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; flex: none; max-width: 52%; }
.ib-kind { border: 1px solid var(--field-line); border-radius: 8px; padding: 4px 6px; background: var(--field); font-size: 12.5px; max-width: 150px; }
.ib-done summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.ib-set { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px 14px; display: grid; grid-template-columns: 1fr 2fr; gap: 10px 14px; }
.ib-set legend { font-weight: 700; padding: 0 4px; }
.ib-set .pp-check { grid-column: 1 / -1; }
html[data-theme=dark] .ib-due.soon { background: #4a3a10; color: #ffd98a; }
@media (max-width: 900px) { .ib-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .ib-row { flex-direction: column; align-items: stretch; }
  .ib-acts { max-width: none; justify-content: flex-start; }
  .ib-set { grid-template-columns: 1fr; }
  .ib-tile strong { font-size: 24px; }
}