/* ==========================================================================
   Stránka: Pošta  (#/posta)
   složky | seznam | čtecí panel — na 2560 px využije celou šířku
   ========================================================================== */

/* ---------- Hledání v hlavičce ---------- */
.mail-search { position: relative; display: block; width: clamp(220px, 24vw, 420px); }
.mail-search .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.mail-search .field { padding-left: 38px; }

/* ---------- Rozložení ---------- */
.mailbox {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(340px, clamp(380px, 26vw, 640px)) minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}

/* ---------- Složky ---------- */
.mailfolders { padding: var(--space-3); position: sticky; top: 92px; }
.mailfolders__list { display: flex; flex-direction: column; gap: 2px; }
.mailfolders__group { padding: var(--space-4) var(--space-3) var(--space-2); }
.mailfolders__sep { display: block; height: 1px; margin: var(--space-3) var(--space-2); background: var(--border); }
.mailfolder {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 40px;
  padding: 0 var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--text-muted); text-align: left;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.mailfolder:hover { background: var(--surface-hover); color: var(--text); }
.mailfolder[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.mailfolder__label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mailfolder__count { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mailfolder__count.is-warn { color: var(--warn); font-weight: 600; }
.mailfolder[aria-pressed="true"] .mailfolder__count:not(.is-warn) { color: var(--accent-text); }

/* ---------- Seznam ---------- */
.maillist__rows .mail { padding-left: var(--space-4); }
.maillist__rows .mail__unread { left: 4px; }
.mail__tags { flex-wrap: wrap; }
.mail.is-selected { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.mail.is-selected:hover { background: var(--accent-soft); }
.maillist .empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-muted); }

/* ---------- Čtecí panel ---------- */
.mailpane { position: sticky; top: 92px; max-height: calc(100vh - 108px); padding: 0; overflow: hidden; }
.mailpane__head { padding: var(--space-5) var(--space-6) var(--space-4); border-bottom: 1px solid var(--border); }
.mailpane__back { display: none; margin: 0 0 var(--space-3) calc(var(--space-3) * -1); }
.mailpane__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xs); }
.mailpane__title {
  margin-top: var(--space-3);
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600;
  letter-spacing: var(--tracking-tight); line-height: var(--leading-snug);
}
.mailpane__title:focus { outline: none; }
.mailpane__body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-6); }
.mailpane__body .mail-detail__text { max-width: 72ch; }
.mailpane__body .reply, .mailpane__body .reply-sent { max-width: 90ch; }
.mailpane__body > .mailpane__hint:first-child { margin: 0 0 var(--space-5); }
.mailpane__hint {
  display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-4);
  font-size: var(--text-sm); color: var(--text-muted);
}
.mailpane__hint .i { margin-top: 3px; color: var(--info); }
.mailpane__hint a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.mailpane__actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border);
}
.mailpane--empty { min-height: 420px; justify-content: center; }
.mailpane--empty .empty { padding: var(--space-10) var(--space-6); text-align: center; }
.mailpane__hello { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }

/* ---------- Do 1500 px: složky vlevo, seznam NEBO detail (detail nahradí seznam, šipka zpět) ---------- */
@media (max-width: 1500px) {
  .mailbox { grid-template-columns: minmax(200px, 230px) minmax(0, 1fr); }
  .mailbox:not(.is-reading) .mailpane { display: none; }
  .mailbox.is-reading .maillist { display: none; }
  .mailpane { position: static; max-height: none; }
  .mailpane__back { display: inline-flex; }
}

/* ---------- Telefon: složky jako vodorovná lišta nad seznamem, v detailu skryté ---------- */
@media (max-width: 860px) {
  .mailbox { grid-template-columns: minmax(0, 1fr); }
  .mailbox.is-reading .mailfolders { display: none; }
  .mailfolders { position: static; flex-direction: row; align-items: center; gap: var(--space-1); padding: var(--space-2); overflow-x: auto; scrollbar-width: none; }
  .mailfolders::-webkit-scrollbar { display: none; }
  .mailfolders__list { flex: none; flex-direction: row; gap: 2px; }
  .mailfolders .mailbox-btn .mailfolder__label small { display: none; }
  .mailfolders__group { display: none; }
  .mailfolders__sep { width: 1px; height: 24px; margin: 0 var(--space-1); flex: none; }
  .mailfolder { width: auto; white-space: nowrap; }
  .mailfolder__label { overflow: visible; }
}

@media (max-width: 860px) {
  .page-head__actions:has(.mail-search) { width: 100%; flex-wrap: wrap; }
  .mail-search { flex: 1 1 100%; width: auto; min-width: 0; }
  .page-head__actions:has(.mail-search) .btn { flex: 1 1 auto; }
  .reply__tools { width: 100%; }
  .reply__tools .gsel { flex: 1 1 200px; }
  .mailpane__head { padding: var(--space-4); }
  .mailpane__body { padding: var(--space-4); }
  .mailpane__actions { padding: var(--space-3) var(--space-4); justify-content: stretch; }
  .mailpane__actions .btn { flex: 1 1 auto; }
  .mailpane__title { font-size: var(--text-lg); }
}

/* schránky */
.mailbox-btn .mailfolder__label small { display: block; font-size: 12px; color: var(--text-muted); font-weight: 400; }
.mailpane__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }
.mailpane__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.mailpane__meta b { color: var(--text); font-weight: 600; }