/* Ansichten (Modi): body[data-mode] = liste | fokus | brett | personen | tag | konsole */

.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.modes button {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; background: var(--bg-side);
  color: var(--muted); font-size: 10.5px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em;
}
.modes button .ic { width: 17px; height: 17px; }
.modes button:hover { color: var(--text); background: var(--bg-hover); }
.modes button.active { color: var(--accent-text); background: var(--accent); }

.mode-pane, .cmdline, .konsole-head, .people-chips, .fokus-bar, .statusbar { display: none; }

/* ---------- Brett und Tag: volle Breite, eine Mail öffnet sich als Schublade rechts ---------- */
body[data-mode=brett] .app, body[data-mode=tag] .app { grid-template-columns: 220px minmax(0, 1fr); }
body[data-mode=brett] .list-pane, body[data-mode=tag] .list-pane { display: none; }
body[data-mode=brett] .mode-pane, body[data-mode=tag] .mode-pane { display: flex; min-width: 0; min-height: 0; flex-direction: column; }
body[data-mode=brett] .read-pane, body[data-mode=tag] .read-pane {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 58vw); z-index: 25; display: none;
  border-left: 1px solid var(--line-strong); box-shadow: var(--shadow);
}
body[data-mode=brett] .app[data-view=read] .read-pane, body[data-mode=tag] .app[data-view=read] .read-pane { display: flex; }
body[data-mode=brett] .toolbar [data-act=back], body[data-mode=tag] .toolbar [data-act=back] { display: inline-grid !important; }

.mode-head { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: calc(10px + env(safe-area-inset-top)) 16px 6px 20px; border-bottom: 1px solid var(--line); }
.mode-head h2 { margin: 0; font-size: 17px; }
.mode-head .spacer { flex: 1; }

.board { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); overflow-x: auto; }
.board-col { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.board-col:last-child { border-right: 0; }
.board-col.drop { background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--accent); }
.board-col-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px;
  font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: var(--track); color: var(--text-2);
}
.board-col-head .sq { width: 8px; height: 8px; flex: none; }
.board-col-head .n { margin-left: auto; color: var(--muted); }
.board-cards { flex: 1; overflow-y: auto; padding: 0 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.board-card { border: 1px solid var(--line-strong); background: var(--bg); cursor: pointer; }
.board-card:hover { border-color: var(--muted); }
.board-card.unread { box-shadow: inset 3px 0 0 var(--accent); }
.board-card.active { border-color: var(--accent); }
.board-card .bc-main { padding: 9px 11px 8px; }
.bc-top { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.bc-top .age { margin-left: auto; }
.bc-subject { margin-top: 5px; font-weight: 500; font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; }
.board-card.unread .bc-subject { font-weight: 600; }
.bc-from { margin-top: 2px; font-size: 12.5px; color: var(--text-2); }
.bc-snippet { margin-top: 3px; font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bc-foot { display: flex; border-top: 1px solid var(--line); }
.bc-foot button { flex: 1; padding: 5px 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: left; }
.bc-foot button:hover { color: var(--text); background: var(--bg-hover); }
.board-card.done { cursor: default; opacity: .65; }
.board-empty { padding: 10px 4px; color: var(--muted); font-size: 12.5px; }

/* ---------- Tag ---------- */
.day { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(380px, 1.1fr) minmax(320px, 1fr); }
.day-time { min-height: 0; overflow-y: auto; border-right: 1px solid var(--line); }
.day-allday { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 8px 64px; border-bottom: 1px solid var(--line); }
.day-allday:empty { display: none; }
.day-allday .day-chip { padding: 3px 8px; background: var(--bg-subtle); border: 1px solid var(--line-strong); font-size: 12.5px; cursor: pointer; }
.day-grid { position: relative; }
.day-hour { height: 64px; border-bottom: 1px solid var(--line); display: flex; }
.day-hour span { width: 56px; flex: none; padding: 4px 10px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.day-item { position: absolute; left: 64px; right: 12px; overflow: hidden; padding: 4px 9px; font-size: 12.5px; line-height: 1.3; }
.day-item .t { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.day-item .h { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-event { background: var(--bg-subtle); border: 1px solid var(--line-strong); z-index: 2; cursor: pointer; right: 50%; }
.day-event.declined .h { text-decoration: line-through; color: var(--muted); }
.day-event .t { color: var(--accent); }
.day-block { left: calc(50% + 4px); border: 1px dashed var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); z-index: 1; }
.day-block.drop { background: color-mix(in srgb, var(--accent) 22%, transparent); border-style: solid; }
.day-block .h { font-weight: 500; color: var(--accent); }
.day-block ul { list-style: none; margin: 2px 0 0; padding: 0; }
.day-block li { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-block li:hover { text-decoration: underline; }
.day-snooze { left: 50%; background: var(--bg); border: 1px solid var(--line-strong); cursor: pointer; z-index: 3; }
.day-now { position: absolute; left: 56px; right: 0; height: 0; border-top: 2px solid var(--accent); z-index: 4; pointer-events: none; }
.day-now::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; background: var(--accent); }
.day-side { display: flex; flex-direction: column; min-height: 0; }
.day-side h3 { margin: 0; padding: 14px 16px 2px; font-size: 14px; }
.day-side .hint { padding: 0 16px 10px; font-size: 12.5px; color: var(--muted); }
.day-inbox { flex: 1; overflow-y: auto; border-top: 1px solid var(--line); list-style: none; margin: 0; padding: 0; }
.day-mail { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.day-mail:hover { background: var(--bg-subtle); }
.day-mail.unread { box-shadow: inset 3px 0 0 var(--accent); }
.day-mail .dm-main { flex: 1; min-width: 0; }
.day-mail .dm-top { display: flex; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.day-mail .dm-top .d { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.day-mail .dm-subj { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-mail.unread .dm-subj { font-weight: 600; }
.day-mail .btn { height: 28px; padding: 0 10px; font-size: 11.5px; }
.day-foot { padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.day-empty { padding: 30px 16px; color: var(--muted); }

/* ---------- Personen ---------- */
body[data-mode=personen] .people-chips { display: flex; margin: -4px 12px 10px; }
body[data-mode=personen] #chips { display: none; }
.item.person { gap: 12px; padding: 10px 14px 10px 12px; }
.item.person .avatar { width: 36px; height: 36px; }
.item.person .p-main { flex: 1; min-width: 0; }
.item.person .p-top { display: flex; align-items: baseline; gap: 8px; }
.item.person .p-name { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item.person .p-date { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.item.person .p-last { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item.person .p-last b { color: var(--text-2); font-weight: 500; }
.item.person .p-meta { display: flex; gap: 8px; margin-top: 3px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.item.person.unread { box-shadow: inset 3px 0 0 var(--accent); }
.item.person.unread .p-name { font-weight: 600; }
.item.person::before { display: none; }
.p-badge { min-width: 18px; padding: 0 5px; background: var(--accent); color: var(--accent-text); font-family: var(--mono); font-size: 11px; font-weight: 600; text-align: center; }
body[data-mode=personen] .toolbar [data-act=archive], body[data-mode=personen] .toolbar [data-act=snooze],
body[data-mode=personen] .toolbar [data-act=move], body[data-mode=personen] .toolbar [data-act=delete],
body[data-mode=personen] .toolbar [data-act=unread], body[data-mode=personen] .toolbar [data-act=flag],
body[data-mode=personen] .toolbar [data-act=unsnooze], body[data-mode=personen] .toolbar [data-act=notspam],
body[data-mode=personen] .toolbar .sep { display: none; }
.card-subj { margin-top: 2px; font-size: 12.5px; color: var(--text-2); }
.card-subj .acc-tag-short { margin-right: 6px; }

/* ---------- Fokus: eine Mail nach der anderen ---------- */
body[data-mode=fokus] .app { grid-template-columns: minmax(0, 1fr); }
body[data-mode=fokus] .sidebar, body[data-mode=fokus] .list-pane { display: none; }
body[data-mode=fokus] .read-pane { display: flex; justify-content: center; }
body[data-mode=fokus] .reader { max-width: 900px; padding-bottom: 150px; }
body[data-mode=fokus] .toolbar { display: none; }
body[data-mode=fokus] .thread-head { padding: 48px 32px 16px; }
body[data-mode=fokus] .thread-head h1 { font-size: 32px; line-height: 1.15; letter-spacing: -.015em; }
body[data-mode=fokus] .cards { padding: 0 32px 40px; }
body[data-mode=fokus] .card-body .plain { font-size: 16px; line-height: 1.7; }
body[data-mode=fokus] .fokus-bar { display: block; }
.fokus-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--bg); border-top: 1px solid var(--line-strong); padding-bottom: env(safe-area-inset-bottom); }
.fokus-progress { display: flex; align-items: center; gap: 14px; padding: 8px 20px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.fokus-track { flex: 1; height: 3px; background: var(--line); }
.fokus-fill { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.fokus-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.fokus-btn { display: flex; align-items: center; justify-content: center; gap: 12px; height: 68px; font-size: 16px; font-weight: 600; border-right: 1px solid var(--line); }
.fokus-btn:last-child { border-right: 0; }
.fokus-btn:hover { background: var(--bg-hover); }
.fokus-btn.primary { background: var(--accent); color: var(--accent-text); }
.fokus-btn.primary:hover { background: var(--accent-hover); }
.fokus-btn kbd { font-family: var(--mono); font-size: 11.5px; font-weight: 500; padding: 1px 6px; border: 1px solid currentColor; opacity: .7; }
.fokus-done { margin: auto; text-align: center; padding: 40px 20px; }
.fokus-done h1 { font-size: 40px; margin: 0; }
.fokus-done p { color: var(--muted); font-size: 16px; }

/* ---------- Konsole: alles über die Tastatur ---------- */
body[data-mode=konsole] .app {
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 46%) minmax(0, 1fr); height: calc(100dvh - 26px); font-family: var(--mono);
}
body[data-mode=konsole] .sidebar, body[data-mode=konsole] #list-head, body[data-mode=konsole] .search,
body[data-mode=konsole] #chips, body[data-mode=konsole] .selection-bar { display: none !important; }
body[data-mode=konsole] .list-pane { border-right: 0; border-bottom: 1px solid var(--line-strong); }
body[data-mode=konsole] .cmdline { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.cmd-prompt { color: var(--accent); font-weight: 600; font-family: var(--mono); }
.cmdline input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--text); font-family: var(--mono); font-size: 13.5px; }
body[data-mode=konsole] .konsole-head {
  display: grid; grid-template-columns: 44px minmax(0, 200px) minmax(0, 1fr) auto 90px; gap: 14px; padding: 6px 16px;
  font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: var(--track);
}
body[data-mode=konsole] .list { border-top: 1px solid var(--line); }
body[data-mode=konsole] .item.row {
  grid-template-columns: 44px minmax(0, 200px) minmax(0, 1fr) auto 90px; gap: 14px; height: 26px; padding: 0 16px;
  border-bottom: 0; font-family: var(--mono); font-size: 12.5px;
}
body[data-mode=konsole] .item.row .item-check { display: none; }
body[data-mode=konsole] .item.row .item-no { display: block; color: var(--muted); }
body[data-mode=konsole] .item.row.unread { box-shadow: none; }
body[data-mode=konsole] .item.row.unread .item-no::after { content: " *"; color: var(--accent); }
body[data-mode=konsole] .item.row.active { background: var(--accent); }
body[data-mode=konsole] .item.row.active, body[data-mode=konsole] .item.row.active * { color: var(--accent-text) !important; }
body[data-mode=konsole] .item.row .item-date { text-align: right; }
body[data-mode=konsole] .reader, body[data-mode=konsole] .card-who, body[data-mode=konsole] .thread-head h1 { font-family: var(--mono); }
body[data-mode=konsole] .thread-head h1 { font-size: 16px; }
body[data-mode=konsole] .toolbar { min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
body[data-mode=konsole] .statusbar {
  display: flex; gap: 20px; height: 26px; align-items: center; padding: 0 16px; background: var(--accent); color: var(--accent-text);
  font-family: var(--mono); font-size: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
}
.statusbar .status-keys { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-no { display: none; font-family: var(--mono); }
.konsole-help { padding: 20px 24px; font-family: var(--mono); font-size: 13px; line-height: 1.7; }
.konsole-help h2 { font-size: 14px; margin: 0 0 10px; }
.konsole-help dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 24px; margin: 0 0 16px; }
.konsole-help dt { color: var(--accent); }
.konsole-help dd { margin: 0; color: var(--text-2); }

/* ---------- Handy ---------- */
@media (max-width: 820px) {
  body[data-mode=brett] .app, body[data-mode=tag] .app { grid-template-columns: 1fr; }
  body[data-mode=brett] .read-pane, body[data-mode=tag] .read-pane { width: 100vw; border-left: 0; }
  .board { grid-template-columns: repeat(5, 82vw); }
  .day { grid-template-columns: 1fr; overflow-y: auto; }
  .day-time { overflow: visible; border-right: 0; }
  body[data-mode=fokus] .thread-head { padding: 24px 16px 10px; }
  body[data-mode=fokus] .thread-head h1 { font-size: 24px; }
  body[data-mode=fokus] .cards { padding: 0 8px 40px; }
  .fokus-btn { height: 56px; font-size: 13px; flex-direction: column; gap: 2px; }
  .fokus-btn kbd { display: none; }
}