/*
 * HHAV Cloud Email — console styling.
 *
 * Tokens and components lifted from the approved mockups (mockups/mail-webmail-options.html,
 * layout 3 for the Stream and option A for the control plane). Same dark navy, same blue,
 * Space Grotesk and Inter, all from hhav.net — deliberately not the SOLIS look, because
 * this is HHAV's product and SOLIS is one tenant inside it.
 */

:root {
  --bg: hsl(220 15% 4%); --card: hsl(220 15% 7%); --sidebar: hsl(220 15% 6%);
  --border: hsl(220 14% 16%); --muted: hsl(220 14% 12%);
  --fg: hsl(210 20% 95%); --fg2: hsl(210 20% 90%); --mut: hsl(215 15% 55%);
  --pri: hsl(217 91% 60%); --pri-fg: hsl(220 15% 4%);
  --bad: #dc2626; --good: #22c55e; --warn: #f59e0b;
  --r: .75rem;
  --head: 'Space Grotesk', sans-serif; --body: 'Inter', sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body);
  font-weight: 300; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: var(--pri); text-decoration: none; }

/* ── top bar ───────────────────────────────────────────────────────────── */
.top {
  display: flex; align-items: center; gap: 20px; background: var(--sidebar);
  padding: 12px 22px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.brand { font-family: var(--head); font-weight: 600; font-size: 15px; letter-spacing: -.01em; color: var(--fg); }
.brand span { color: var(--pri); }
.tnav { display: flex; gap: 3px; margin-left: auto; flex-wrap: wrap; }
.tnav a { color: var(--mut); font-size: 12px; padding: 6px 12px; border-radius: 6px; }
.tnav a:hover { background: var(--muted); color: var(--fg2); }
.tnav a.on { background: var(--pri); color: var(--pri-fg); font-weight: 500; }
.who { font-size: 12px; color: var(--mut); display: flex; align-items: center; gap: 10px; }
.who form { margin: 0; }
.who button { background: none; border: 0; color: var(--mut); font: inherit; padding: 0; cursor: pointer; text-decoration: underline; }
.who button:hover { color: var(--fg2); }

/* ── page ──────────────────────────────────────────────────────────────── */
.page { max-width: 1280px; margin: 0 auto; padding: 24px; }
.h2 { font-family: var(--head); font-weight: 500; font-size: 23px; margin: 0 0 4px; letter-spacing: -.01em; }
.sub { font-size: 13px; color: var(--mut); margin: 0 0 20px; }
.why { font-size: 13px; color: var(--mut); margin: 0 0 18px; max-width: 86ch; line-height: 1.7; }
.frame { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--card); }
.sec {
  font-family: var(--head); font-weight: 500; font-size: 15px;
  margin: 30px 0 12px; letter-spacing: -.01em;
}

/* ── the rail + list split (mockup layout 3) ───────────────────────────── */
.unified { display: grid; grid-template-columns: 200px 1fr; min-height: 420px; }
.unified > div:first-child { border-right: 1px solid var(--border); padding: 14px; }
.fold {
  font-size: 13px; color: var(--fg2); padding: 8px 11px; border-radius: 8px;
  display: flex; gap: 9px; align-items: center;
}
a.fold:hover { background: var(--muted); }
.fold .n { margin-left: auto; font-size: 11px; color: var(--mut); }
.fold.on { background: var(--pri); color: var(--pri-fg); font-weight: 500; }
.fold.on .n { color: rgba(0,0,0,.55); }
.acct {
  font-size: 11px; color: var(--mut); text-transform: uppercase;
  letter-spacing: .1em; margin: 16px 0 8px;
}

/* ── message rows ──────────────────────────────────────────────────────── */
.msg { padding: 11px 14px; border-bottom: 1px solid var(--border); }
.msg:last-child { border-bottom: 0; }
.msg:hover { background: var(--muted); }
.msg .r1 { display: flex; gap: 8px; align-items: baseline; }
.msg .from { font-size: 13px; color: var(--fg); font-weight: 400; }
.msg .when { margin-left: auto; font-size: 11px; color: var(--mut); white-space: nowrap; }
.msg .subj { font-size: 12.5px; color: var(--fg2); margin-top: 3px; }
.msg .prev {
  font-size: 12px; color: var(--mut); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg.unread .from { font-weight: 600; }
.msg.unread .subj { color: var(--fg); }
.dot { width: 7px; height: 7px; border-radius: 999px; background: var(--pri); flex: 0 0 auto; }
.src {
  font-size: 10px; padding: 1px 7px; border-radius: 999px;
  background: var(--muted); color: var(--mut); margin-left: 6px;
}

/* ── chips ─────────────────────────────────────────────────────────────── */
.chip {
  display: inline-block; font-size: 10.5px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--mut); white-space: nowrap;
}
.chip.ok   { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.chip.no   { color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.chip.wait { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }

/* ── tables (option A) ─────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mut); font-weight: 400; padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--fg2); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--muted); }
.tbl td.r, .tbl th.r { text-align: right; }
.mono { font-family: var(--mono); font-size: 11.5px; }
.mut { color: var(--mut); }
.trunc { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── KPI strip (option C) ──────────────────────────────────────────────── */
.kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; margin: 0 0 22px;
}
.kpi { background: var(--card); padding: 15px 16px; }
.kpi .l { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.kpi .v { font-family: var(--head); font-weight: 500; font-size: 25px; margin: 8px 0 3px; letter-spacing: -.02em; }
.kpi .f { font-size: 11px; color: var(--mut); }
.kpi .f.g { color: var(--good); } .kpi .f.b { color: var(--bad); }

/* ── forms and buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-block; background: var(--pri); color: var(--pri-fg); border: 0; border-radius: 8px;
  padding: 8px 15px; font-family: var(--body); font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.btn:hover { background: hsl(217 91% 66%); }
.btn.g { background: transparent; border: 1px solid var(--border); color: var(--fg2); }
.btn.g:hover { background: var(--muted); }
.btn.no { background: transparent; border: 1px solid var(--border); color: var(--bad); }
.btn.no:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); }

label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin-bottom: 6px; }
input, select {
  width: 100%; padding: 8px 11px; font-family: var(--body); font-size: 13px; font-weight: 300;
  background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 8px;
}
input:focus, select:focus { outline: 1px solid var(--pri); outline-offset: 0; border-color: var(--pri); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > div { flex: 1 1 170px; }
.row > div.narrow { flex: 0 0 120px; }
.row > div.auto { flex: 0 0 auto; }

/* ── flash and one-time reveal ─────────────────────────────────────────── */
.flash {
  font-size: 13px; padding: 12px 16px; border-radius: var(--r); margin: 0 0 20px;
  background: var(--card); border: 1px solid var(--border);
  border-left: 3px solid var(--good); color: var(--fg2);
}
.flash.bad { border-left-color: var(--bad); }

/*
 * Deliberately loud: this is the only moment the key exists in readable form, and a
 * user who scrolls past it has to make a new one.
 */
.reveal {
  background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--pri);
  border-radius: var(--r); padding: 16px 18px; margin: 0 0 22px;
}
.reveal h3 { font-family: var(--head); font-weight: 500; font-size: 15px; margin: 0 0 4px; }
.reveal p { font-size: 12.5px; color: var(--mut); margin: 0 0 12px; }
.reveal-key { display: flex; gap: 8px; }
.reveal-key input { font-family: var(--mono); font-size: 12.5px; }

.empty { padding: 40px 16px; text-align: center; color: var(--mut); font-size: 13px; }

/* ── login ─────────────────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 340px; }
.login-card .brand { display: block; text-align: center; font-size: 19px; margin-bottom: 20px; }
.login-card form { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; }
.login-card .field { margin-bottom: 14px; }
.login-card .btn { width: 100%; margin-top: 6px; }
.login-err { font-size: 12.5px; color: var(--bad); margin-bottom: 14px; }

@media (max-width: 960px) {
  .unified { grid-template-columns: 1fr; }
  .unified > div:first-child { border-right: 0; border-bottom: 1px solid var(--border); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .tnav { margin-left: 0; }
  .page { padding: 16px; }
}

/* ── webmail (mockup layout 2: rail, full-width list, message opens beside) ── */
.mailhead { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.mailhead select { width: auto; }
.msearch { margin-left: auto; }
.msearch input { width: 220px; }

.two { display: grid; grid-template-columns: 210px 1fr; min-height: 520px; }
.rail { border-right: 1px solid var(--border); padding: 14px; }

/*
 * The list keeps its full width until a message is opened, then yields a fixed column
 * to the reading pane. That is the whole point of this layout over three-pane: on a
 * laptop you spend most of your time in the list, so the list gets the room.
 */
.listpane { display: grid; grid-template-columns: 1fr; min-width: 0; }
.listpane.withopen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.listcol { min-width: 0; border-right: 1px solid var(--border); }
.listpane:not(.withopen) .listcol { border-right: 0; }

a.msg { display: block; color: inherit; }
a.msg.sel { background: var(--muted); box-shadow: inset 2px 0 0 var(--pri); }
.msg .subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pager { display: flex; align-items: center; gap: 12px; padding: 14px; font-size: 12px; }

.readpane { display: flex; flex-direction: column; min-width: 0; }
.readhead { padding: 16px; border-bottom: 1px solid var(--border); }
.readhead h3 { font-family: var(--head); font-weight: 500; font-size: 19px; margin: 0 0 8px; letter-spacing: -.01em; }
.readmeta { font-size: 12px; color: var(--mut); line-height: 1.6; margin-bottom: 14px; }
.readacts { display: flex; gap: 7px; flex-wrap: wrap; }
.readacts form { margin: 0; }
.atts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.imgnote {
  margin-top: 12px; font-size: 12px; color: var(--mut);
  background: var(--muted); border-radius: 8px; padding: 8px 11px;
}
.readbody { width: 100%; flex: 1; min-height: 420px; border: 0; background: transparent; }

/* ── compose ───────────────────────────────────────────────────────────── */
.modal {
  display: none; position: fixed; inset: 0; z-index: 20;
  background: rgba(0,0,0,.6); padding: 40px 20px; overflow: auto;
}
.modal.open { display: block; }
.composer {
  max-width: 640px; margin: 0 auto; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--r); padding: 20px;
}
.chead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.chead strong { font-family: var(--head); font-weight: 500; font-size: 16px; }
.composer .field { margin-bottom: 12px; }
textarea {
  width: 100%; padding: 10px 12px; font-family: var(--body); font-size: 13.5px; font-weight: 300;
  line-height: 1.6; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 8px; resize: vertical;
}
textarea:focus { outline: 1px solid var(--pri); border-color: var(--pri); }

/* ── users ─────────────────────────────────────────────────────────────── */
.urow {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 16px; font-size: 13px;
}
.urow + .urow { border-top: 1px solid var(--border); background: var(--muted); }
.urow form.inline { display: flex; align-items: center; gap: 7px; margin: 0; }
.urow select { width: auto; font-size: 12px; padding: 5px 9px; }
.boxes { gap: 18px; }

@media (max-width: 1100px) { .listpane.withopen { grid-template-columns: 1fr; } .listcol { border-right: 0; } }
@media (max-width: 960px) {
  .two { grid-template-columns: 1fr; }
  .rail { border-right: 0; border-bottom: 1px solid var(--border); display: flex; gap: 6px; flex-wrap: wrap; }
  .msearch { margin-left: 0; }
}