/*
 * Funky Town Mail — brand layer over Roundcube Elastic.
 * Ink #0a0a0a, gradient #ff1a4a -> #ff6eb4 -> #00e5ff, Space Grotesk display,
 * Manrope body. Fonts are bundled (SIL OFL 1.1); nothing loads from a CDN.
 * Flat surfaces only: no grid, no texture, no glow.
 */

@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url("fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url("fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("fonts/manrope-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("fonts/manrope-latin-600-normal.woff2") format("woff2"); }

:root {
  --ftm-ink: #0a0a0a;
  --ftm-ink-2: #151515;
  --ftm-red: #ff1a4a;
  --ftm-pink: #ff6eb4;
  --ftm-cyan: #00e5ff;
  --ftm-gradient: linear-gradient(90deg, #ff1a4a 0%, #ff6eb4 50%, #00e5ff 100%);
  --ftm-paper: #fafafa;
  --ftm-text: #0a0a0a;
  --ftm-muted: #5c5c5c;
}

/* Type */
body, input, select, textarea, button, .form-control {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}
h1, h2, h3, .header-title, .boxtitle, #layout-sidebar .header, #layout-list .header .header-title {
  font-family: "Space Grotesk", "Manrope", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Left rail: ink, with the gradient as a single hairline on its edge */
#layout-menu {
  background: var(--ftm-ink);
  border-right: 0;
  box-shadow: inset -2px 0 0 0 transparent;
  position: relative;
}
#layout-menu::after {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, #ff1a4a, #ff6eb4 50%, #00e5ff);
}
#layout-menu .menu a,
#layout-menu .special-buttons a { color: #d8d8d8; }
#layout-menu .menu a:hover,
#layout-menu .special-buttons a:hover { color: #fff; background: var(--ftm-ink-2); }
#layout-menu .menu a.selected { color: #fff; background: var(--ftm-ink-2); }
#layout-menu .menu a.selected::before { color: var(--ftm-pink); }
#layout-menu #logo { max-height: 44px; }

/* Primary action: solid ink, gradient underline on hover. Text stays legible. */
.btn-primary, .button.mainaction, button.mainaction, input.mainaction {
  background-color: var(--ftm-ink) !important;
  border-color: var(--ftm-ink) !important;
  color: #fff !important;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 500;
}
.btn-primary:hover, .button.mainaction:hover, button.mainaction:hover {
  background-color: #1d1d1d !important;
  box-shadow: inset 0 -3px 0 0 var(--ftm-pink);
}
.btn-primary:focus-visible, .button.mainaction:focus-visible {
  outline: 2px solid var(--ftm-cyan);
  outline-offset: 2px;
}

/* Links and selection */
a, .link, a.link { color: #c4103a; }
a:hover { color: var(--ftm-red); }
.listing li.selected, .listing li.selected > a,
table.records-table tr.selected td,
table.records-table tr.focused td {
  background-color: #fff0f5 !important;
  color: var(--ftm-text) !important;
}
table.records-table tr.unread td.subject span.subject a { font-weight: 600; }
.listing li.selected { box-shadow: inset 3px 0 0 0 var(--ftm-pink); }

/* Login: ink page, white card, gradient bar on top of the card */
body.task-login { background: var(--ftm-ink); }
body.task-login #layout-content { background: transparent; }
body.task-login #login-form {
  background: #fff;
  border-radius: 14px;
  padding: 2rem 1.75rem 1.5rem;
  position: relative;
  overflow: hidden;
}
body.task-login #login-form::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--ftm-gradient);
}
body.task-login #logo { max-width: 72px; margin-bottom: 0.75rem; }
body.task-login #login-footer, body.task-login #login-footer a { color: #9a9a9a; }

/* Dark mode follows the same tokens */
html.dark-mode body { background-color: var(--ftm-ink); }
html.dark-mode a { color: var(--ftm-pink); }
html.dark-mode .listing li.selected,
html.dark-mode table.records-table tr.selected td { background-color: #23161b !important; color: #fff !important; }
html.dark-mode .btn-primary, html.dark-mode .button.mainaction {
  background-color: #fff !important; border-color: #fff !important; color: var(--ftm-ink) !important;
}