/* Blue Bridge 2050 — holographic spacecraft HUD theme for Roundcube Elastic.
   Loaded after Elastic's own bundled stylesheet, so these rules win on the
   cascade without editing Elastic itself. Same visual language as the BBOS
   Command Center HUD: dark void, cyan glow, scanning grid, glass panels.

   2026-08-24: the app shell below is now scoped to html.dark-mode (Elastic's
   own light/dark class, toggled by the sidebar button — dark_mode_support is
   on). It used to apply unconditionally regardless of that toggle, which
   silently broke it: the message-reading pane is a same-origin iframe that
   Elastic re-styles correctly on toggle, but this stylesheet only reaches
   the outer page, not the iframe — so light mode looked like a white reading
   pane next to a sidebar and message list still forced dark. Scoping this
   under .dark-mode makes both modes consistent: dark HUD in dark mode,
   Elastic's own clean light theme (already correct, already reaches the
   iframe) in light mode. The login screen (further down) is unaffected —
   it stays unconditionally dark/branded regardless of this toggle, which
   only exists post-login anyway. */

:root {
  --bb-bg: #05080f;
  --bb-surface: #0a0f1c;
  --bb-surface-2: #0e1626;
  --bb-border: #1c3a4a;
  --bb-text: #e5f6fb;
  --bb-text-muted: #7fa3b3;
  --bb-accent: #22d3ee;
  --bb-accent-strong: #67e8f9;
  --bb-accent-glow: rgba(34, 211, 238, .55);
  --bb-magenta: #c084fc;
}

@keyframes bb-scan {
  0%   { transform: translateY(-120%); }
  100% { transform: translateY(420%); }
}
@keyframes bb-pulse {
  0%, 100% { opacity: .45; box-shadow: 0 0 4px var(--bb-accent-glow); }
  50%      { opacity: 1;   box-shadow: 0 0 16px var(--bb-accent-glow); }
}
@keyframes bb-flicker {
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: .82; }
  98% { opacity: 1; }
}
@keyframes bb-ring-spin    { to { transform: rotate(360deg); } }
@keyframes bb-ring-spin-rev { to { transform: rotate(-360deg); } }

/* Canvas particle field sits behind everything; app content must paint
   above it since #bb-starfield is position:fixed at z-index:0. Only shown
   in dark mode (and never on the login screen — see body.task-login rule
   further down, which still applies since it's more specific either way). */
#bb-starfield { z-index: 0 !important; }
html:not(.dark-mode) #bb-starfield { display: none !important; }
#layout, .app-login, #login-form, body.iframe .content {
  position: relative;
  z-index: 1;
}

/* Holographic rings around the login logo */
.bb-ring-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.bb-rings {
  position: absolute;
  width: 180px;
  height: 180px;
  overflow: visible;
  pointer-events: none;
}
.bb-ring {
  fill: none;
  stroke: var(--bb-accent);
  stroke-width: 1;
  transform-origin: 100px 100px;
}
.bb-ring-0 { stroke-dasharray: 8 14; opacity: .55; animation: bb-ring-spin 18s linear infinite; }
.bb-ring-1 { stroke-dasharray: 2 6; opacity: .4; animation: bb-ring-spin-rev 26s linear infinite; }
.bb-ring-2 { stroke-dasharray: 1 3; opacity: .3; animation: bb-ring-spin 40s linear infinite; }

html.dark-mode body, html.dark-mode {
  background-color: var(--bb-bg) !important;
  color: var(--bb-text) !important;
  font-family: "Segoe UI", Roboto, -apple-system, sans-serif !important;
}

/* Grid-of-stars backdrop — dark mode (and never on login) only */
html.dark-mode body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(34,211,238,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.07) 1px, transparent 1px);
  background-size: 34px 34px;
  animation: bb-flicker 6s infinite;
}
body.task-login::before { display: none !important; }

/* ---------- Login screen (2026-08-24: simplified for clarity) ----------
   Was the same holographic-HUD treatment as the rest of the app — scanning
   animation, glowing corner brackets, uppercase mono labels. That's fine
   once you're inside the app, but on the one screen where getting a
   password right actually matters, it worked against legibility. Plain,
   high-contrast, normal type; a light accent border and button are the
   only branding kept. Starfield/grid backdrop and holographic logo rings
   are turned off for this screen only (see #bb-starfield rule + bb_theme.js).
   Unconditional (not scoped to .dark-mode) — the light/dark toggle only
   exists post-login, this screen keeps one consistent branded look. */
body.iframe, .app-login, #login-form {
  background: var(--bb-bg) !important;
}
/* #bb-starfield is inserted as body's first child (bb_theme.js), not
   nested inside .app-login/#login-form — a descendant selector on those
   would never match it. body.task-login is the real, confirmed marker. */
body.task-login #bb-starfield { display: none !important; }
body.task-login .bb-ring-wrap svg.bb-rings { display: none !important; }
.app-login .box, #login-form, body.iframe .content {
  position: relative;
  background-color: var(--bb-surface) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}
.app-login .logo, #logo, .logo {
  filter: brightness(0) invert(1) !important;
}
.app-login input, #login-form input,
body.iframe input[type="text"], body.iframe input[type="password"] {
  background-color: var(--bb-surface-2) !important;
  color: var(--bb-text) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: 6px !important;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 15px;
}
.app-login input:focus, #login-form input:focus {
  border-color: var(--bb-accent) !important;
  box-shadow: 0 0 0 2px rgba(34,211,238,.25) !important;
  outline: none !important;
}
.app-login .title, .app-login label, #login-form .title, #login-form label,
.app-login h1, #login-form h1, #login-footer, .app-login #login-footer {
  color: #ffffff !important;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
.app-login button, #login-form button, .app-login .button.mainaction {
  background: var(--bb-accent) !important;
  color: #04121a !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  transition: background .15s ease;
}
.app-login button:hover, #login-form button:hover {
  background: var(--bb-accent-strong) !important;
}

/* ---------- Main app shell (dark mode only — see header comment) ---------- */
html.dark-mode #layout, html.dark-mode #layout-content, html.dark-mode .content-frame,
html.dark-mode #taskmenu, html.dark-mode #topline, html.dark-mode .header {
  background-color: var(--bb-surface) !important;
  color: var(--bb-text) !important;
}
html.dark-mode #topline, html.dark-mode .header, html.dark-mode .toolbar {
  border-bottom: 1px solid var(--bb-border) !important;
  box-shadow: 0 1px 0 0 rgba(34,211,238,.15) !important;
}
html.dark-mode #taskmenu, html.dark-mode .task-menu {
  background-color: var(--bb-bg) !important;
  border-right: 1px solid var(--bb-border) !important;
}
html.dark-mode #taskmenu a, html.dark-mode .task-menu a, html.dark-mode #taskmenu li a {
  color: var(--bb-text-muted) !important;
  font-family: "SF Mono", "Cascadia Code", Consolas, monospace !important;
  letter-spacing: .04em;
}
html.dark-mode #taskmenu a.selected, html.dark-mode #taskmenu a:hover,
html.dark-mode .task-menu a.selected, html.dark-mode .task-menu a:hover {
  color: var(--bb-accent-strong) !important;
  background-color: rgba(34, 211, 238, .1) !important;
  box-shadow: inset 3px 0 0 0 var(--bb-accent) !important;
}

/* Panels/frames get a faint holographic edge */
html.dark-mode .content-frame, html.dark-mode #messagelist-container,
html.dark-mode .uibox, html.dark-mode .searchbar {
  border-color: var(--bb-border) !important;
  box-shadow: 0 0 0 1px rgba(34,211,238,.06) !important;
}

/* ---------- Folder / message lists ---------- */
html.dark-mode #folderlist, html.dark-mode .listing,
html.dark-mode .messagelist, html.dark-mode #messagelist {
  background-color: var(--bb-surface) !important;
  color: var(--bb-text) !important;
}
html.dark-mode .listing tr:hover, html.dark-mode .messagelist tr:hover {
  background-color: rgba(34, 211, 238, .08) !important;
}
html.dark-mode .listing tr.selected, html.dark-mode .messagelist tr.selected {
  background-color: rgba(34, 211, 238, .16) !important;
  box-shadow: inset 3px 0 0 0 var(--bb-accent) !important;
}
html.dark-mode .listing .unread, html.dark-mode .messagelist .unread, html.dark-mode tr.unread td {
  color: #ffffff !important;
}
html.dark-mode .listing .unread .subject::before, html.dark-mode .messagelist .unread .subject::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bb-accent);
  margin-right: 6px;
  animation: bb-pulse 1.8s ease-in-out infinite;
  vertical-align: middle;
}

/* Unread / folder count badges glow like HUD indicators */
html.dark-mode .listing .count, html.dark-mode .messagelist .count,
html.dark-mode .badge, html.dark-mode #taskmenu .badge {
  background: var(--bb-magenta) !important;
  color: #0a0518 !important;
  box-shadow: 0 0 10px rgba(192,132,252,.7) !important;
  border-radius: 3px !important;
}

/* ---------- Links and primary actions ---------- */
html.dark-mode a { color: var(--bb-accent); }
html.dark-mode a:hover { color: var(--bb-accent-strong); }
html.dark-mode .btn-primary, html.dark-mode .button.mainaction,
html.dark-mode .formbuttons .button.mainaction {
  background: linear-gradient(135deg, var(--bb-accent), var(--bb-magenta)) !important;
  border-color: var(--bb-accent) !important;
  color: #04121a !important;
  box-shadow: 0 0 14px -3px var(--bb-accent-glow) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}
html.dark-mode .btn-primary:hover, html.dark-mode .button.mainaction:hover {
  box-shadow: 0 0 22px -2px var(--bb-accent-glow) !important;
}
html.dark-mode .toolbar a.button, html.dark-mode .toolbar-menu a.button {
  filter: drop-shadow(0 0 0 transparent);
  transition: filter .15s ease;
}
html.dark-mode .toolbar a.button:hover, html.dark-mode .toolbar-menu a.button:hover {
  filter: drop-shadow(0 0 6px var(--bb-accent-glow));
}

/* ---------- Scrollbars, holographic ---------- */
html.dark-mode ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark-mode ::-webkit-scrollbar-track { background: var(--bb-bg); }
html.dark-mode ::-webkit-scrollbar-thumb { background: var(--bb-border); border-radius: 6px; }
html.dark-mode ::-webkit-scrollbar-thumb:hover { background: var(--bb-accent); box-shadow: 0 0 8px var(--bb-accent-glow); }