/* webmail-go — единственная таблица стилей приложения.
   Без внешних шрифтов/иконок: эмодзи и текст. */

:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --border: #d9dce1;
  --text: #1e2430;
  --muted: #6b7280;
  --accent: #1a5fb4;
  --accent-soft: #e8f0fb;
  --danger: #c01c28;
  --unread: #0d3465;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "PT Sans", sans-serif;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--accent); }

/* ---------- Логин ---------- */

.login-wrap {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 32px;
  width: 360px;
  box-shadow: 0 8px 24px rgba(30, 36, 48, .08);
}

.login-box h1 { font-size: 20px; margin: 0 0 18px; }

label { display: block; font-weight: 600; margin: 12px 0 4px; }

input[type=text], input[type=password], input[type=search], input[type=email], textarea, select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  background: #fff;
  color: var(--text);
}

textarea { resize: vertical; }

button, .btn {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

button.secondary, .btn.secondary {
  background: #fff;
  color: var(--accent);
}

button.danger, .btn.danger {
  background: var(--danger);
  border-color: var(--danger);
}

.error-box {
  background: #fdecea;
  border: 1px solid #f5c6c2;
  color: var(--danger);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 10px 0;
}

.ok-box {
  background: #e8f6ee;
  border: 1px solid #b7e1c8;
  color: #1b6e3d;
  border-radius: 6px;
  padding: 8px 12px;
  margin: 10px 0;
}

/* ---------- Каркас приложения ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 8px 16px;
}

.topbar .title { font-weight: 700; font-size: 15px; }
.topbar .spacer { flex: 1; }
.topbar form { margin: 0; }
.topbar button { margin-top: 0; padding: 5px 12px; }

.layout {
  display: grid;
  grid-template-columns: 220px 340px 1fr;
  height: calc(100vh - 49px);
}

.pane { overflow-y: auto; background: var(--panel); }
.pane + .pane { border-left: 1px solid var(--border); }

/* ---------- Папки ---------- */

.folders { list-style: none; margin: 0; padding: 6px 0; }
.folders li {
  display: flex;
  gap: 8px;
  padding: 7px 14px;
  cursor: pointer;
  align-items: center;
}
.folders li:hover { background: var(--accent-soft); }
.folders li.active { background: var(--accent-soft); font-weight: 700; }
.folders .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folders .count {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
}

/* ---------- Список сообщений ---------- */

.listtools {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: #fafbfc;
  flex-wrap: wrap;
}
.listtools input[type=search] { width: 160px; padding: 4px 8px; }
.listtools .pages { margin-left: auto; font-size: 12px; color: var(--muted); }

.msglist { list-style: none; margin: 0; padding: 0; }
.msglist li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 4px 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.msglist li:hover { background: var(--accent-soft); }
.msglist li.active { background: var(--accent-soft); }
.msglist li.unread .subj { font-weight: 700; color: var(--unread); }
.msglist .who { grid-column: 2; color: var(--muted); font-size: 12px; }
.msglist .subj { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msglist .meta { grid-column: 3; grid-row: 1 / span 2; text-align: right; color: var(--muted); font-size: 11px; white-space: nowrap; }
.msglist .flag { color: #e5a50a; }
.msglist .att { font-size: 12px; }

.empty { padding: 30px; color: var(--muted); text-align: center; }

/* ---------- Просмотр ---------- */

.viewhead { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.viewhead h2 { margin: 0 0 6px; font-size: 16px; overflow-wrap: anywhere; }
.viewhead .row { color: var(--muted); font-size: 12px; margin: 2px 0; overflow-wrap: anywhere; }
.viewhead .row b { color: var(--text); }

.viewtools {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: #fafbfc;
  flex-wrap: wrap;
}
.viewtools form { margin: 0; display: inline; }
.viewtools button, .viewtools .btn { margin-top: 0; padding: 4px 10px; font-size: 12px; }

.attachments { padding: 8px 16px; border-bottom: 1px solid var(--border); }
.attachments a {
  display: inline-block;
  margin: 2px 10px 2px 0;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  font-size: 12px;
  background: #fafbfc;
}

.msgbody { padding: 14px 16px; overflow-wrap: anywhere; }
.msgbody iframe { width: 100%; min-height: 480px; border: 0; display: block; }
.msgbody pre.bodytext {
  white-space: pre-wrap;
  font: 13px/1.5 ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  margin: 0;
}

.showimgs { font-size: 12px; padding: 6px 16px; background: #fff8e6; border-bottom: 1px solid var(--border); }

/* ---------- Композер ---------- */

.compose { max-width: 780px; margin: 0 auto; padding: 16px; }
.compose input, .compose textarea { margin-bottom: 4px; }
.compose textarea { min-height: 260px; }
.compose .att-list { font-size: 12px; color: var(--muted); margin-top: 4px; }

.settings { max-width: 480px; margin: 0 auto; padding: 16px; }

.small { font-size: 12px; color: var(--muted); }