/**
 * Webmail styling.
 *
 * The panel's design language, carried here by value: every colour, radius
 * and shadow below is copied from the control plane's tokens.css (the Stack
 * palette), because webmail is self-contained on the managed box and cannot
 * import an asset from the panel's origin. If tokens.css changes, the token
 * blocks below are the ones to re-copy.
 *
 * --accent is written into the page by the shell from the branding the panel
 * pushed to this box — per-domain when the domain has its own, the agency's
 * otherwise — so a brand colour reaches every customer's mailbox without
 * this file being per-agency. The default is the panel's own primary. Every
 * accent tint is a color-mix() of that variable, never a baked-in rgba:
 * the accent is a runtime value this file cannot know.
 *
 * THEMES. Light is the base, mirroring the panel. Dark is the same set of
 * token names with night values, applied two ways that must stay in step:
 * `:root[data-theme="dark"]` (an explicit choice, stamped server-side from
 * the snazzywm_theme cookie) and the prefers-color-scheme block (no choice
 * stored, follow the device). The one deliberate exception either way is
 * .wm-frame: mail is written against a light background, and inverting it
 * turns a signature image into a dark smear.
 *
 * System fonts and the vendored icon font only, no third-party anything: a
 * control panel must not report to anyone, and a MAIL client least of all —
 * a font request from a webmail page tells a CDN when each customer reads
 * their email.
 */

:root {
  color-scheme: light;
  --accent: #de1b76;
  --bg: #f7f8f9;
  --surface: #ffffff;
  --line: #efefef;
  --line-strong: #dbdfe4;
  --text: #112b4a;
  --heading: rgba(17, 43, 74, .84);
  --muted: #66768a;
  --muted-soft: #939fad;
  --danger: #dc3545;
  --radius: .25rem;
  --radius-lg: .3rem;
  --topbar: #364c66;
  --card-edge: transparent;
  --sh-card: 0 10px 25px 0 rgba(50,50,93,.07), 0 5px 15px 0 rgba(0,0,0,.07);
  --sh-pop: 0 8px 24px rgba(29,36,48,.12);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* The night values. Blue-slate, derived from the brand's --dark #364c66 so
   the dark app still reads as the same product; the topbar goes DARKER than
   its daytime self so it keeps reading as the roof over the surfaces. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121821;
  --surface: #1a2230;
  --line: #232e3e;
  --line-strong: #33415a;
  --text: #dbe4ee;
  --heading: rgba(219, 228, 238, .92);
  --muted: #8fa0b4;
  --muted-soft: #64758a;
  --topbar: #243447;
  --card-edge: #232e3e;
  --sh-card: 0 10px 25px 0 rgba(0,0,0,.35), 0 5px 15px 0 rgba(0,0,0,.25);
  --sh-pop: 0 8px 24px rgba(0,0,0,.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121821;
    --surface: #1a2230;
    --line: #232e3e;
    --line-strong: #33415a;
    --text: #dbe4ee;
    --heading: rgba(219, 228, 238, .92);
    --muted: #8fa0b4;
    --muted-soft: #64758a;
    --topbar: #243447;
    --card-edge: #232e3e;
    --sh-card: 0 10px 25px 0 rgba(0,0,0,.35), 0 5px 15px 0 rgba(0,0,0,.25);
    --sh-pop: 0 8px 24px rgba(0,0,0,.45);
  }
}

/* The vendored ligature icon font — the same file the panel serves. Block,
   not swap: the fallback would render the ligature text ("inbox") as
   letters, which is worse than a moment of nothing. */
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/material-icons.woff2") format("woff2");
  font-display: block;
}
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* The theme toggle's two glyphs: the same selectors as the token blocks
   decide which shows, so the icon is right even before any choice exists.
   AFTER .material-icons and scoped to the button, both deliberately: the
   first cut put these above it at equal specificity, .material-icons'
   `display: inline-block` won the cascade, and BOTH glyphs rendered. */
.wm-theme-toggle .wm-theme-light { display: none; }
:root[data-theme="dark"] .wm-theme-toggle .wm-theme-dark { display: none; }
:root[data-theme="dark"] .wm-theme-toggle .wm-theme-light { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wm-theme-toggle .wm-theme-dark { display: none; }
  :root:not([data-theme="light"]) .wm-theme-toggle .wm-theme-light { display: inline-block; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.5 var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wm-muted { color: var(--muted); }
.wm-small { font-size: 12px; }
.wm-spacer { flex: 1; }
.wm-error { color: var(--danger); padding: 10px 12px; }
.wm-loading, .wm-empty { padding: 24px 16px; color: var(--muted-soft); }

/* The reader with nothing open: a quiet centred composition, not a bare
   sentence in a corner. */
.wm-empty-reader {
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: var(--muted-soft);
}
.wm-empty-reader .material-icons { font-size: 48px; }
.wm-empty-reader p { margin: 0; }

/* ------------------------------------------------------------- sign in */

.wm-login-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: var(--bg);
}

/* Shadow, no border — the Stack card. The edge token is transparent by day
   and a hairline by night, when a shadow alone cannot separate surfaces. */
.wm-login {
  width: min(380px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-card);
  padding: 28px;
}

.wm-brand { text-align: center; margin-bottom: 20px; }
.wm-brand h1 { font-size: 20px; margin: 0; color: var(--heading); }

.wm-login label { display: block; margin: 14px 0 4px; font-weight: 600; }
.wm-login input {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font: inherit;
}
.wm-login input:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 25%, transparent);
}
.wm-login button {
  width: 100%; margin-top: 18px; padding: 10px 16px;
  background: var(--accent); color: #fff; border: 1px solid transparent;
  border-radius: var(--radius); font: inherit; font-weight: 600; cursor: pointer;
}
.wm-login button:hover { filter: brightness(1.07); }
.wm-login button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 25%, transparent);
}
.wm-login .wm-muted { margin-top: 18px; }

/* --------------------------------------------------------------- shell */

.wm-app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* The panel's topbar, by value: --dark #364c66, 56px, white text. */
.wm-top {
  display: flex; align-items: center; gap: 16px;
  height: 56px; padding: 0 20px;
  background: var(--topbar);
  color: #fff;
  flex: 0 0 auto;
}

/* The administrator banner. Deliberately NOT in the agency's accent colour —
   it must not look like part of the brand, because its whole job is to say
   "this is not the customer's own session". */
.wm-admin-banner {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px;
  background: #92400e; color: #fff;
  font-size: .9rem;
}
.wm-admin-banner strong { font-weight: 700; }
.wm-admin-banner a { color: #fff; text-decoration: underline; margin-left: auto; }

/* The panel's brand row, by value: mark, hairline divider, wordmark. */
.wm-brand-small { display: flex; align-items: center; gap: 11px; }
.wm-brand-small strong { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
/* An uploaded logo has no inverted variant the way the panel's own does, so
   it sits on a small white chip and stays legible whatever its colours. */
.wm-brand-chip {
  display: inline-flex; align-items: center;
  background: #fff; border-radius: var(--radius);
  padding: 5px 12px;
}
.wm-brand-chip img { display: block; }
.wm-brand-divider { width: 1px; height: 22px; background: rgba(255,255,255,.25); }
.wm-brand-name { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .02em; }

.wm-search input {
  width: min(360px, 40vw); padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  background: rgba(255,255,255,.1); color: #fff; font: inherit;
}
.wm-search input::placeholder { color: rgba(255,255,255,.55); }
.wm-search input:focus {
  outline: 0; border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.16);
}

.wm-btn, .wm-btn-plain, .wm-btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius);
  font: inherit; line-height: 1.4; cursor: pointer; border: 1px solid transparent;
}
.wm-btn { background: var(--accent); color: #fff; font-weight: 600; }
.wm-btn:hover { filter: brightness(1.07); }
.wm-btn .material-icons,
.wm-btn-plain .material-icons,
.wm-btn-danger .material-icons { font-size: 18px; }
.wm-btn-plain { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.wm-btn-plain:hover { background: var(--bg); }
.wm-btn-danger { background: var(--surface); color: var(--danger); border-color: var(--line-strong); }
.wm-btn-danger:hover { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.wm-btn:focus-visible, .wm-btn-plain:focus-visible, .wm-btn-danger:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 25%, transparent);
}
.wm-btn:disabled, .wm-btn-plain:disabled { opacity: .55; cursor: default; }

.wm-icon {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radius);
  color: var(--muted); cursor: pointer; padding: 4px 6px;
}
.wm-icon:hover { color: var(--text); background: var(--bg); }
.wm-icon .material-icons { font-size: 20px; }
/* On the dark bar the icon buttons are white, panel .nav-toggle style. */
.wm-top .wm-icon { color: rgba(255,255,255,.85); }
.wm-top .wm-icon:hover { color: #fff; background: rgba(255,255,255,.12); }

.wm-account { position: relative; }
.wm-account summary {
  cursor: pointer; list-style: none;
  padding: 6px 8px; font-size: 13px;
  color: rgba(255,255,255,.66);
}
.wm-account summary:hover { color: #fff; }
.wm-account summary::-webkit-details-marker { display: none; }
.wm-menu {
  position: absolute; right: 0; top: 100%; z-index: 20;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius); min-width: 160px; padding: 4px;
  box-shadow: var(--sh-pop);
}
.wm-menu button, .wm-menu a {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; background: none; border: 0;
  color: var(--text); text-decoration: none; font: inherit; cursor: pointer;
  border-radius: var(--radius);
}
.wm-menu button:hover, .wm-menu a:hover { background: var(--bg); }

/* --------------------------------------------------------------- panes */

.wm-body { flex: 1; display: flex; min-height: 0; background: var(--surface); }

/* The panel's sidebar, by value: 220px of surface behind a 1px line. The
   Write button and heading live here, OUTSIDE [data-folders], which
   loadFolders() clears wholesale. */
.wm-side {
  flex: 0 0 220px; display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 16px 0;
  overflow-y: auto;
}
.wm-write { margin: 0 18px 6px; }
.wm-nav-heading {
  padding: 14px 18px 6px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted-soft);
}

.wm-folder {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 18px;
  background: none; border: 0;
  font: inherit; font-size: 14px; color: var(--text);
  cursor: pointer; text-align: left;
}
.wm-folder .material-icons { font-size: 20px; color: var(--muted-soft); flex: none; }
.wm-folder:hover { background: var(--bg); }
.wm-folder:hover .material-icons { color: var(--muted); }
/* The panel's active nav item: an accent tint, accent text, and the 3px
   inset bar on the left edge. */
.wm-folder.wm-on {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}
.wm-folder.wm-on .material-icons { color: var(--accent); }
@supports not (background: color-mix(in srgb, red 10%, #fff)) {
  .wm-folder.wm-on { background: var(--accent); color: #fff; }
  .wm-folder.wm-on .material-icons { color: #fff; }
}
.wm-folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-badge {
  background: var(--accent); color: #fff;
  border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700;
}

.wm-list {
  flex: 0 0 340px; border-right: 1px solid var(--line);
  overflow-y: auto;
  background: var(--surface);
}

/* The list pane's own head: which folder this is, and a way to ask again. */
.wm-list-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--line);
}
.wm-list-title { font-size: 13px; font-weight: 600; color: var(--heading); }
.wm-list-count { font-size: 12px; color: var(--muted-soft); }

.wm-msg {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  width: 100%; padding: 10px 14px;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font: inherit; color: var(--text); cursor: pointer; text-align: left;
}
.wm-msg:hover { background: var(--bg); }
.wm-msg.wm-on { background: var(--bg); box-shadow: inset 3px 0 0 var(--accent); }
.wm-msg-from { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-msg-date { color: var(--muted-soft); font-size: 12px; white-space: nowrap; }
.wm-msg-subject {
  grid-column: 1 / -1; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wm-msg.wm-unread .wm-msg-from,
.wm-msg.wm-unread .wm-msg-subject { font-weight: 700; color: var(--text); }

.wm-pager { display: flex; align-items: center; gap: 10px; padding: 12px; }

.wm-reader { flex: 1; overflow-y: auto; min-width: 0; background: var(--surface); }
.wm-msg-head { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.wm-subject { margin: 0 0 6px; font-size: 18px; color: var(--heading); }
.wm-from { font-weight: 600; }
.wm-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.wm-notice {
  margin: 12px 20px; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); font-size: 13px;
}

.wm-attachments { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; }
.wm-attachment {
  padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--text); text-decoration: none; font-size: 13px; background: var(--bg);
}
.wm-attachment:hover { border-color: var(--accent); color: var(--accent); }

/* The message body. White in BOTH themes: mail is written against a light
   background, and inverting it turns a signature image into a dark smear. */
.wm-frame {
  width: 100%; border: 0; min-height: 200px;
  background: #fff; display: block;
}

/* ------------------------------------------------------------- dialogs */

.wm-dialog {
  width: min(680px, calc(100vw - 24px));
  border: 1px solid var(--card-edge); border-radius: var(--radius-lg);
  padding: 0; background: var(--surface); color: var(--text);
  box-shadow: var(--sh-card);
}
.wm-dialog::backdrop { background: rgba(10, 18, 28, .5); }
.wm-dialog header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.wm-dialog header strong { flex: 1; color: var(--heading); }
.wm-dialog form { display: block; }
.wm-dialog label { display: block; padding: 8px 16px 0; font-size: 13px; color: var(--muted); }
.wm-dialog input[type=text], .wm-dialog input[type=password], .wm-dialog textarea {
  width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font: inherit;
}
.wm-dialog input[type=text]:focus, .wm-dialog input[type=password]:focus,
.wm-dialog textarea:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 25%, transparent);
}
.wm-dialog textarea { margin: 12px 16px 0; width: calc(100% - 32px); resize: vertical; }
.wm-files { padding: 12px 16px; }
.wm-dialog footer {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--line); margin-top: 12px;
}

.wm-settings { padding: 4px 0 16px; }
.wm-setting { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.wm-setting:last-child { border-bottom: 0; }
.wm-setting h3 { margin: 0 0 8px; font-size: 15px; color: var(--heading); }
.wm-setting label { padding: 8px 0 0; }
.wm-setting button { margin-top: 12px; }
.wm-check { display: flex; align-items: center; gap: 8px; color: var(--text); }
.wm-check input { width: auto; margin: 0; }

/* --------------------------------------------------------------- toast */

.wm-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  background: var(--text); color: var(--surface);
  padding: 10px 18px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  z-index: 100; max-width: min(560px, calc(100vw - 32px)); text-align: center;
}
.wm-toast-on { opacity: 1; transform: translate(-50%, 0); }
.wm-toast-error { background: var(--danger); color: #fff; }

/* -------------------------------------------------------------- narrow
 *
 * One pane at a time below 900px. The sidebar slides over rather than
 * pushing, so the message list keeps its scroll position when it closes.
 */

.wm-menu-toggle { display: none; }

@media (max-width: 900px) {
  .wm-top { gap: 10px; padding: 0 14px; }
  .wm-menu-toggle { display: inline-flex; }
  .wm-side {
    position: absolute; top: 56px; bottom: 0; left: 0; z-index: 30;
    background: var(--surface); transform: translateX(-100%);
    transition: transform .18s; box-shadow: var(--sh-pop);
  }
  .wm-side.wm-open { transform: none; }
  .wm-list { flex: 0 0 42%; }
  .wm-search input { width: 34vw; }
}

@media (max-width: 620px) {
  .wm-list { flex: 1; }
  .wm-reader { display: none; }
  .wm-search { display: none; }
}