/* ========================================================================
   Xmail Webmail — Coinbase-fintech theme (light + dark)
   Inspired by https://mailpot.com/samples/16-coinbase-fintech/
   Overrides SoGo Material Design v0.x via CSS custom properties + targeted rules
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* === Light theme tokens (default) === */
  --xm-blue:        #0052FF;
  --xm-blue-dim:    #0047E1;
  --xm-blue-glow:   rgba(0, 82, 255, 0.10);
  --xm-mint:        #4ADE80;
  --xm-mint-bg:     #E7FBF1;
  --xm-red:         #EF4444;
  --xm-red-bg:      #FEE2E2;
  --xm-amber:       #F59E0B;

  --xm-ink:         #0A0B0D;
  --xm-ink-2:       #5B616E;
  --xm-ink-3:       #8A919E;

  --xm-line:        #EFF1F4;
  --xm-line-2:      #DDE1E7;

  --xm-bg:          #FFFFFF;
  --xm-panel:       #FAFBFC;
  --xm-hover:       #F4F6FA;
  --xm-selected:    #EBF1FF;
  --xm-elev-1:      0 1px 2px rgba(0,0,0,0.05);
  --xm-elev-2:      0 4px 12px rgba(0,0,0,0.08);

  --xm-r-sm: 6px;
  --xm-r-md: 10px;
  --xm-r-lg: 14px;
  --xm-r-pill: 999px;

  --xm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

[data-xmail-theme="dark"] {
  --xm-blue:        #3B82F6;
  --xm-blue-dim:    #2563EB;
  --xm-blue-glow:   rgba(59, 130, 246, 0.18);
  --xm-mint:        #34D399;
  --xm-mint-bg:     rgba(52, 211, 153, 0.12);
  --xm-red:         #F87171;
  --xm-red-bg:      rgba(248, 113, 113, 0.12);

  --xm-ink:         #F4F6FA;
  --xm-ink-2:       #B0B8C5;
  --xm-ink-3:       #6B7280;

  --xm-line:        #1F2630;
  --xm-line-2:      #2A3340;

  --xm-bg:          #0B0F15;
  --xm-panel:       #11161E;
  --xm-hover:       #1A2230;
  --xm-selected:    rgba(59, 130, 246, 0.16);
  --xm-elev-1:      0 1px 2px rgba(0,0,0,0.4);
  --xm-elev-2:      0 4px 12px rgba(0,0,0,0.55);
}

/* ========================================================================
   Global typography + body
   ======================================================================== */
html, body, .md-content, .md-toolbar-tools, .md-button, .md-input,
md-toolbar, md-content, md-sidenav, md-list-item, md-menu-item,
md-dialog, md-tabs, md-tab-content, md-card,
input, textarea, button, .md-list-item-text {
  font-family: var(--xm-font) !important;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body, .md-default-theme, .md-default-theme.md-content {
  background-color: var(--xm-bg) !important;
  color: var(--xm-ink) !important;
}

/* ========================================================================
   App shell: top toolbar + sidenav + main panel
   ======================================================================== */

/* Main toolbar (top) */
md-toolbar.md-default-theme:not(.md-menu-toolbar),
md-toolbar:not(.md-menu-toolbar) {
  background-color: var(--xm-bg) !important;
  color: var(--xm-ink) !important;
  border-bottom: 1px solid var(--xm-line) !important;
  box-shadow: none !important;
  min-height: 56px !important;
}

md-toolbar h1, md-toolbar h2, md-toolbar .md-title,
md-toolbar .md-toolbar-tools > h2 {
  color: var(--xm-ink) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Sidenav */
md-sidenav.md-default-theme, md-sidenav {
  background-color: var(--xm-panel) !important;
  border-right: 1px solid var(--xm-line) !important;
  box-shadow: none !important;
}

/* Main content background */
md-content.md-default-theme, md-content,
.md-virtual-repeat-container .md-virtual-repeat-offsetter,
.sg-views, .view {
  background-color: var(--xm-bg) !important;
  color: var(--xm-ink) !important;
}

/* Tabs */
md-tabs md-tabs-wrapper,
md-tabs.md-default-theme md-tabs-wrapper {
  background: var(--xm-bg) !important;
  border-bottom: 1px solid var(--xm-line) !important;
}
md-tabs .md-tab,
md-tabs.md-default-theme .md-tab {
  color: var(--xm-ink-2) !important;
  font-weight: 500 !important;
}
md-tabs .md-tab.md-active {
  color: var(--xm-blue) !important;
}
md-tabs md-ink-bar {
  background: var(--xm-blue) !important;
}

/* ========================================================================
   List items (mail list, folder list, etc.)
   ======================================================================== */
md-list-item.md-default-theme, md-list-item,
md-list-item.md-default-theme > .md-no-style, md-list-item > .md-no-style,
md-list-item.md-2-line, md-list-item.md-3-line {
  background: var(--xm-bg) !important;
  color: var(--xm-ink) !important;
  border-bottom: 1px solid var(--xm-line) !important;
}
md-list-item:hover,
md-list-item.md-default-theme > .md-no-style:hover,
md-list-item .md-button:hover {
  background: var(--xm-hover) !important;
}
md-list-item._md-button-wrap.md-focused,
md-list-item.md-active, md-list-item.selected,
.md-virtual-repeat-container md-list-item.selected,
.md-list-item-active {
  background: var(--xm-selected) !important;
  border-left: 3px solid var(--xm-blue) !important;
}
md-list-item .md-list-item-text h3,
md-list-item .md-list-item-text h4 {
  color: var(--xm-ink) !important;
  font-weight: 600 !important;
}
md-list-item .md-list-item-text p {
  color: var(--xm-ink-2) !important;
}

/* Unread mail accent */
md-list-item.unread .md-list-item-text h3,
.unread .md-list-item-text h3,
.condensed .unread .subject {
  font-weight: 700 !important;
  color: var(--xm-ink) !important;
}
md-list-item.unread::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--xm-blue);
  border-radius: var(--xm-r-pill);
}

/* ========================================================================
   Buttons — pill style for primary, ghost for secondary
   ======================================================================== */
.md-button.md-primary.md-raised,
.md-button.md-fab.md-default-theme,
.md-button.md-raised.md-default-theme.md-primary {
  background: var(--xm-blue) !important;
  color: #fff !important;
  border-radius: var(--xm-r-pill) !important;
  box-shadow: var(--xm-elev-1) !important;
  text-transform: none !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}
.md-button.md-primary.md-raised:hover,
.md-button.md-raised.md-default-theme.md-primary:hover {
  background: var(--xm-blue-dim) !important;
  box-shadow: var(--xm-elev-2) !important;
}
.md-button.md-default-theme:not(.md-raised):not(.md-fab) {
  color: var(--xm-ink) !important;
  text-transform: none !important;
  font-weight: 500 !important;
}
.md-button.md-default-theme:not(.md-raised):not(.md-fab):hover {
  background: var(--xm-hover) !important;
}
.md-button.md-primary.md-default-theme:not(.md-raised) {
  color: var(--xm-blue) !important;
}

/* FAB (compose) */
.md-fab, button.md-fab {
  background: var(--xm-blue) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px var(--xm-blue-glow), 0 2px 6px rgba(0,0,0,0.12) !important;
}
.md-fab:hover { background: var(--xm-blue-dim) !important; }

/* ========================================================================
   Inputs
   ======================================================================== */
md-input-container.md-default-theme .md-input,
md-input-container .md-input,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], textarea {
  border-color: var(--xm-line-2) !important;
  color: var(--xm-ink) !important;
  background: var(--xm-bg) !important;
}
md-input-container .md-input:focus,
input:focus, textarea:focus {
  border-color: var(--xm-blue) !important;
  box-shadow: 0 0 0 3px var(--xm-blue-glow) !important;
}
md-input-container.md-default-theme label {
  color: var(--xm-ink-3) !important;
}
md-input-container.md-default-theme.md-input-focused label {
  color: var(--xm-blue) !important;
}

/* ========================================================================
   Cards / panels
   ======================================================================== */
md-card, md-card.md-default-theme,
.md-dialog-content, md-dialog.md-default-theme {
  background: var(--xm-bg) !important;
  color: var(--xm-ink) !important;
  border: 1px solid var(--xm-line) !important;
  border-radius: var(--xm-r-md) !important;
  box-shadow: var(--xm-elev-1) !important;
}

/* Toolbars inside cards / dialogs */
md-card md-toolbar, md-dialog md-toolbar {
  border-bottom: 1px solid var(--xm-line) !important;
}

/* ========================================================================
   Login screen
   ======================================================================== */
body.login, body.login-frame, .sg-login,
#root[data-page="login"], #login-page, #LoginPage {
  background: var(--xm-bg) !important;
  color: var(--xm-ink) !important;
}
.sg-login-container, .login-form, #LoginPage form {
  background: var(--xm-bg) !important;
  border: 1px solid var(--xm-line) !important;
  border-radius: var(--xm-r-lg) !important;
  box-shadow: var(--xm-elev-2) !important;
  padding: 32px !important;
  max-width: 400px !important;
}

/* ========================================================================
   Logo replacement — render xmail brand mark + wordmark via CSS
   SoGo logo lives inside .sg-toolbar-logo or md-toolbar img.logo
   ======================================================================== */
.sg-logo, md-toolbar img[src*="sogo"], .md-toolbar-tools img[src*="logo"] {
  display: none !important;
}
md-toolbar.md-toolbar-tools::before,
md-toolbar:first-of-type .md-toolbar-tools::before {
  content: "Xmail";
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--xm-ink);
  margin-right: 16px;
}

/* Brand mark — squircle with X (used in narrow places) */
.xmail-brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--xm-blue);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
  font-family: var(--xm-font);
  margin-right: 10px;
}
.xmail-brand-mark::before { content: "X"; }

/* ========================================================================
   Theme toggle button (☀/🌙)
   ======================================================================== */
.xmail-theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: var(--xm-r-pill);
  background: var(--xm-bg);
  color: var(--xm-ink);
  border: 1px solid var(--xm-line-2);
  box-shadow: var(--xm-elev-2);
  cursor: pointer;
  font-size: 18px;
  display: grid;
  place-items: center;
  transition: transform 0.15s, box-shadow 0.15s;
  font-family: var(--xm-font);
}
.xmail-theme-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.xmail-theme-toggle:active { transform: translateY(0); }

/* ========================================================================
   Scrollbars
   ======================================================================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--xm-line-2);
  border-radius: var(--xm-r-pill);
  border: 2px solid var(--xm-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--xm-ink-3); }

/* ========================================================================
   Misc — hide/replace SoGo branding strings if slipped through Apache
   ======================================================================== */
.sg-footer, .sg-version, .footer-version, .version-info {
  display: none !important;
}

/* Mobile (< 768px) — touch-friendly */
@media (max-width: 767px) {
  md-list-item, md-list-item.md-2-line, md-list-item.md-3-line {
    min-height: 64px !important;
    padding: 12px 16px !important;
  }
  .md-button { min-height: 44px !important; }
  .xmail-theme-toggle {
    bottom: 80px;
    right: 16px;
  }
}

/* ========================================================================
   AGGRESSIVE OVERRIDES for SoGo's md-primary/md-accent green theme
   These rules nuke SoGo's default green and substitute Coinbase blue.
   ======================================================================== */

/* Hide SoGo logo image specifically */
img[src*="sogo"], img[src*="SOGo"],
.sg-logo img,
.sg-logo > .md-flex {
  display: none !important;
}

/* Render Xmail brand mark in place of SoGo logo */
.sg-logo {
  background: var(--xm-bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px 24px !important;
  position: relative !important;
}
.sg-logo::after {
  content: "Xmail";
  font-family: var(--xm-font);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--xm-blue), var(--xm-mint));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Right-side login panel — kill the green */
.sg-login,
.sg-login.md-default-theme,
.sg-login.md-bg,
.sg-login.md-accent,
.sg-login.md-default-theme.md-bg.md-accent,
.sg-login.md-default-theme.md-bg,
md-content.sg-login,
[class*="sg-login"][class*="md-accent"] {
  background: var(--xm-bg) !important;
  background-color: var(--xm-bg) !important;
  color: var(--xm-ink) !important;
}

/* Outer view background */
.view.md-default-theme,
.view.md-default-theme.md-background,
.view.md-default-theme.md-bg,
main.view {
  background: var(--xm-bg) !important;
  background-color: var(--xm-bg) !important;
}

/* md-content shell */
md-content.md-whiteframe-3dp,
md-content.md-default-theme,
md-content[ng-show],
md-content[layout] {
  background: var(--xm-bg) !important;
  box-shadow: none !important;
}

/* All md-bg + md-accent + md-primary anywhere = blue not green */
.md-default-theme.md-bg.md-accent,
.md-bg.md-accent,
.md-accent.md-bg,
[class*="md-accent"][class*="md-bg"] {
  background-color: var(--xm-bg) !important;
}

.md-default-theme.md-primary,
.md-primary[class*="md-default-theme"] {
  background-color: var(--xm-blue) !important;
  color: #fff !important;
}

/* Login page card layout */
.sg-login-content {
  max-width: 360px !important;
  margin: 80px auto !important;
}
.sg-login-content md-input-container {
  margin-bottom: 16px !important;
}

/* Submit button (the round green arrow) → Coinbase blue */
.md-fab.md-default-theme,
button.md-fab,
md-fab,
.sg-login button[type="submit"],
.sg-login .md-button.md-fab {
  background-color: var(--xm-blue) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px var(--xm-blue-glow), 0 2px 6px rgba(0,0,0,0.12) !important;
}

/* Toggle on Remember username */
md-switch.md-default-theme.md-checked .md-thumb,
md-switch.md-checked .md-thumb {
  background-color: var(--xm-blue) !important;
}
md-switch.md-default-theme.md-checked .md-bar,
md-switch.md-checked .md-bar {
  background-color: var(--xm-blue-glow) !important;
}

/* Eye icon (show password) */
md-icon.md-default-theme {
  color: var(--xm-ink-2) !important;
}
md-icon.md-default-theme[md-svg-icon*="visibility"],
md-icon[md-svg-icon*="visibility"] {
  fill: var(--xm-ink-2) !important;
}

/* Required label + input underline */
md-input-container.md-default-theme:not(.md-input-invalid) label.md-required,
md-input-container:not(.md-input-invalid) label.md-required {
  color: var(--xm-ink-3) !important;
}
md-input-container.md-default-theme:not(.md-input-invalid) .md-input,
md-input-container:not(.md-input-invalid) .md-input {
  border-color: var(--xm-line-2) !important;
}
md-input-container.md-default-theme.md-input-focused .md-input,
md-input-container.md-input-focused .md-input {
  border-color: var(--xm-blue) !important;
}

/* Dark theme overrides for login */
[data-xmail-theme="dark"] .sg-logo {
  background: var(--xm-bg) !important;
}
[data-xmail-theme="dark"] .sg-login,
[data-xmail-theme="dark"] md-content,
[data-xmail-theme="dark"] main.view {
  background: var(--xm-bg) !important;
  color: var(--xm-ink) !important;
}
[data-xmail-theme="dark"] md-input-container .md-input,
[data-xmail-theme="dark"] input,
[data-xmail-theme="dark"] textarea {
  background: var(--xm-panel) !important;
  color: var(--xm-ink) !important;
  border-color: var(--xm-line-2) !important;
}
[data-xmail-theme="dark"] md-icon {
  color: var(--xm-ink-2) !important;
}
[data-xmail-theme="dark"] md-input-container label {
  color: var(--xm-ink-3) !important;
}

/* Mobile login layout */
@media (max-width: 767px) {
  .sg-logo {
    padding: 24px 16px !important;
    flex-basis: auto !important;
  }
  .sg-logo::after {
    font-size: 32px !important;
  }
  .sg-login-content {
    margin: 24px auto !important;
    padding: 0 16px !important;
  }
}

/* ========================================================================
   PATCH 2026-05-02: SoGo's md-list-item has an absolutely-positioned button
   layered on top of the row content for click handling. My earlier rule
   set bg=white on .md-no-style wrapper, and the button inherited that,
   covering subject/from/date text. Force the click-overlay back to
   transparent so the text underneath renders.
   ======================================================================== */
md-list-item .md-no-style,
md-list-item > .md-no-style,
md-list-item .md-no-style.md-button,
md-list-item button.md-no-style,
md-list-item ._md-button-wrap > .md-button:first-child,
md-list-item ._md-button-wrap > .md-button:first-child > .md-button:first-child {
  background: transparent !important;
  background-color: transparent !important;
}

/* Keep visible bg only on the LI itself (the row container) */
md-list-item.sg-message-list-item,
md-list-item.sg-mailbox-list-item,
md-list-item.md-2-line,
md-list-item.md-3-line {
  background-color: var(--xm-bg) !important;
}

/* Selected message row — Coinbase blue tint, not green */
md-list-item.sg-message-list-item.md-default-theme.md-bg.md-accent.md-hue-2,
md-list-item.sg-message-list-item.md-bg.md-accent {
  background-color: var(--xm-selected) !important;
  border-left: 3px solid var(--xm-blue) !important;
}

/* Mail tile content — subject, from, snippet */
.sg-tile-content { color: var(--xm-ink) !important; }
.sg-md-subhead   { color: var(--xm-ink) !important; font-weight: 600 !important; }
.sg-md-subhead .from { color: var(--xm-ink-2) !important; font-weight: 500 !important; }
.sg-md-subhead .date { color: var(--xm-ink-3) !important; font-weight: 500 !important; font-variant-numeric: tabular-nums; }
.sg-md-body      { color: var(--xm-ink-2) !important; font-weight: 400 !important; }

/* Unread accent — left bar via border, no ::before overlay */
md-list-item.sg-message-list-item.unread {
  border-left: 3px solid var(--xm-blue) !important;
}
md-list-item.sg-message-list-item.unread .sg-md-subhead {
  font-weight: 700 !important;
  color: var(--xm-ink) !important;
}

/* Disable the earlier ::before bar that was bleeding into folder list */
md-list-item.unread::before { content: none !important; }

/* Toolbar height + date strip — kill the giant "02" date badge */
md-toolbar.toolbar-main { min-height: 56px !important; }
.sg-toolbar-date-day,
.sg-day, .sg-month, .sg-year,
p.sg-md-display-3.sg-date-today,
p[sg-day], p[sg-month], p[sg-year],
p[sg-md-display-3] { display: none !important; }

/* Sidebar quota progress bar — make it thin, not a full-width blue block */
.sg-quota-bar, [ng-style*="width"][class*="md-bg"][class*="md-accent"] {
  height: 4px !important;
  border-radius: var(--xm-r-pill) !important;
  background-color: var(--xm-blue) !important;
}
.sg-md-caption.md-fg.md-default-theme,
[class*="sg-md-caption"][class*="md-fg"] {
  background: transparent !important;
  color: var(--xm-ink-3) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}

/* Right-pane "No message selected" placeholder — make it look intentional */
.sg-no-message-selected,
md-content[layout="column"][layout-align*="center"] > md-icon[md-svg-icon],
.no-message {
  color: var(--xm-ink-3) !important;
}

/* Compose FAB — bottom right with elevation */
.md-fab.md-default-theme,
button.md-fab {
  bottom: 24px !important;
  right: 24px !important;
}

/* Folder list (sidebar) sub-items — reset bg of nested wrappers */
md-sidenav md-list-item .md-button,
md-sidenav md-list-item button {
  background: transparent !important;
}

/* Top user-info card in sidebar — clean up */
md-sidenav .md-toolbar-tools,
md-sidenav md-toolbar {
  background: var(--xm-panel) !important;
  border-bottom: 1px solid var(--xm-line) !important;
}

/* Search input in mail list header */
.sg-search-form input,
input.sg-search,
md-input-container .sg-search {
  background: var(--xm-bg) !important;
  border: 1px solid var(--xm-line-2) !important;
  border-radius: var(--xm-r-md) !important;
  padding: 8px 12px !important;
}

/* Message viewer (right pane) when message selected */
.sg-message-viewer,
md-content[ng-controller*="MessageController"] {
  background: var(--xm-bg) !important;
  color: var(--xm-ink) !important;
}
.sg-message-headers {
  border-bottom: 1px solid var(--xm-line) !important;
  padding: 16px !important;
}

/* Compose dialog */
md-dialog.sg-mail-editor,
md-dialog[aria-label*="ompose"] {
  background: var(--xm-bg) !important;
  border-radius: var(--xm-r-lg) !important;
}

/* Settings panes */
.preferences-content, .sg-preferences,
md-tab-content {
  background: var(--xm-bg) !important;
  color: var(--xm-ink) !important;
}

/* DARK theme overrides for everything we just touched */
[data-xmail-theme="dark"] md-list-item.sg-message-list-item,
[data-xmail-theme="dark"] md-list-item.sg-mailbox-list-item {
  background-color: var(--xm-bg) !important;
}
[data-xmail-theme="dark"] md-list-item.sg-message-list-item.md-bg.md-accent {
  background-color: var(--xm-selected) !important;
}
[data-xmail-theme="dark"] md-sidenav,
[data-xmail-theme="dark"] md-sidenav .md-toolbar-tools,
[data-xmail-theme="dark"] md-sidenav md-toolbar {
  background-color: var(--xm-panel) !important;
}

/* ========================================================================
   PATCH v3 — applied after 3 design advisors (visual / UX / brand)
   Consensus top fixes for Coinbase-fintech brand match + dark default polish.
   2026-05-02
   ======================================================================== */

/* === Tighten dark palette closer to Coinbase deep dark === */
[data-xmail-theme="dark"] {
  --xm-bg:        #0A0B0D;
  --xm-panel:     #13151A;
  --xm-hover:     #1A1D24;
  --xm-selected:  rgba(0, 82, 255, 0.16);
  --xm-line:      #1A1D24;
  --xm-line-2:    #242830;
  --xm-ink:       #F5F7FA;
  --xm-ink-2:     #C7CDD8;
  --xm-ink-3:     #8891A0;
}

/* ─── (1) Hide top-bar brand duplicates and avatar-widget "Xmail" name ─── */
md-toolbar.toolbar-main .md-toolbar-tools::before { content: none !important; }
md-toolbar.toolbar-main::before { content: none !important; }
sg-avatar-image .sg-md-headline,
sg-avatar-image h3,
sg-avatar-image .md-headline,
.sg-toolbar-account-name,
md-toolbar [ng-bind="login"],
md-toolbar [ng-bind*="vit"],
md-toolbar .toolbar-brand:nth-of-type(2),
md-toolbar md-menu-bar + .toolbar-brand,
md-toolbar a.toolbar-brand:nth-child(n+2) { display: none !important; }

/* Single brand mark in top-left only — render via ::before on first toolbar */
md-toolbar.toolbar-main:first-of-type .md-toolbar-tools > a:first-child::before,
md-toolbar.toolbar-main:first-of-type .md-toolbar-tools > h2:first-child::before {
  content: "Xmail";
  font: 700 18px/1 var(--xm-font);
  letter-spacing: -0.025em;
  color: var(--xm-ink);
  margin-right: 14px;
  background: linear-gradient(135deg, var(--xm-blue), var(--xm-mint));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ─── (2) Hide duplicate vit@xmail.com row in sidebar account-tree ─── */
/* removed-account-tree-hide-1 */
/* removed-account-tree-hide-2 */
/* removed-account-tree-hide-3 */ x.disabled {
  display: none !important;
}

/* ─── (3) Selected sidebar item — readable in dark, Coinbase blue tint ─── */
md-sidenav md-list-item.md-active,
md-sidenav md-list-item[class*="md-active"],
md-sidenav md-list-item.selected,
md-sidenav md-list-item[ui-sref-active*="active"],
md-sidenav .sg-folder-list-item.selected,
md-sidenav md-list-item.md-selected {
  background: var(--xm-selected) !important;
  border-left: 3px solid var(--xm-blue) !important;
  color: var(--xm-ink) !important;
}
md-sidenav md-list-item.md-active span,
md-sidenav md-list-item.md-active .md-button,
md-sidenav md-list-item.selected span,
md-sidenav md-list-item.selected .md-button {
  color: var(--xm-ink) !important;
  font-weight: 600 !important;
}

/* ─── (4) Inbox 16 counter as Coinbase blue pill ─── */
md-sidenav .sg-counter-badge,
md-sidenav span.sg-counter-badge,
md-sidenav md-list-item span[ng-bind*="unseen"],
md-sidenav md-list-item span[ng-bind*="count"] {
  background: var(--xm-blue) !important;
  color: #fff !important;
  border-radius: var(--xm-r-pill) !important;
  padding: 2px 8px !important;
  font: 600 11px/1.4 var(--xm-font) !important;
  font-variant-numeric: tabular-nums !important;
  margin-left: auto !important;
  min-width: 22px !important;
  text-align: center !important;
  display: inline-block !important;
}

/* ─── (5) Mail row hierarchy: sender 600 + subject 400 + air ─── */
md-list-item.sg-message-list-item,
md-list-item.sg-message-list-item._md {
  min-height: 72px !important;
  padding: 0 !important;
}
md-list-item.sg-message-list-item .md-list-item-inner.sg-message-list-item-main {
  padding: 14px 20px !important;
}
.sg-md-subhead {
  font: 600 14px/1.3 var(--xm-font) !important;
  color: var(--xm-ink) !important;
  letter-spacing: -0.005em !important;
  margin-bottom: 2px !important;
}
.sg-md-body, .sg-md-body p {
  font: 400 13px/1.4 var(--xm-font) !important;
  color: var(--xm-ink-2) !important;
}

/* tabular-nums everywhere a number lives */
.sg-md-subhead time,
.sg-md-subhead .date,
.sg-tile-content time,
.sg-tile-content .date,
.sg-md-body time,
.sg-md-body .date,
.sg-tile-content .size,
md-list-item .size,
md-list-item time,
.sg-counter-badge {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
  color: var(--xm-ink-3) !important;
  font: 500 12px/1.3 var(--xm-font) !important;
  letter-spacing: 0 !important;
}

/* ─── (6) Inbox header (h2) — clear H1 ─── */
md-toolbar.md-default-theme.toolbar-main h2,
md-toolbar.toolbar-main h2,
md-toolbar h2.md-toolbar-tools,
.sg-toolbar-mailbox-name,
.md-toolbar-tools > h2 {
  font: 700 22px/1.15 var(--xm-font) !important;
  letter-spacing: -0.022em !important;
  color: var(--xm-ink) !important;
}

/* ─── (7) Gradient avatars (blue→mint) with initials, replacing person icons ─── */
md-list-item.sg-message-list-item md-icon[md-svg-icon*="person"],
md-list-item.sg-message-list-item md-icon.material-icons:not(.md-secondary):not([md-menu-origin]),
.sg-tile-content > md-icon:first-child,
sg-avatar-image md-icon[md-svg-icon*="person"],
sg-avatar-image md-icon.material-icons {
  display: none !important;
}
md-list-item.sg-message-list-item .sg-md-avatar,
md-list-item.sg-message-list-item sg-avatar-image,
sg-avatar-image {
  background: linear-gradient(135deg, var(--xm-blue), var(--xm-mint)) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-grid !important;
  place-items: center !important;
  font: 700 13px/1 var(--xm-font) !important;
  letter-spacing: -0.01em !important;
  flex-shrink: 0 !important;
}

/* ─── (8) Uppercase tracking-wide microcaps on section labels ─── */
.sg-md-caption,
.md-subhead,
md-subheader,
md-subheader.md-default-theme,
md-tabs .md-tab > span,
.sg-message-list-header > span,
[class*="sg-md-caption"]:not(.md-fg) {
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font: 600 11px/1.4 var(--xm-font) !important;
  color: var(--xm-ink-3) !important;
}

/* ─── (9) Selected mail row — inset rounded card (Coinbase signature) ─── */
md-list-item.sg-message-list-item.md-default-theme.md-bg.md-accent.md-hue-2,
md-list-item.sg-message-list-item.md-bg.md-accent {
  background: var(--xm-selected) !important;
  border-radius: var(--xm-r-md) !important;
  margin: 2px 8px !important;
  border-left: none !important;
  box-shadow: inset 0 0 0 1px var(--xm-blue-glow) !important;
}
md-list-item.sg-message-list-item.md-bg.md-accent .sg-md-subhead {
  color: var(--xm-ink) !important;
  font-weight: 700 !important;
}

/* ─── (10) Mint accent — date label for "today" + pill labels ─── */
.sg-md-subhead .date.today,
[ng-class*="sg-today"],
.sg-date-today {
  color: var(--xm-mint) !important;
  font-weight: 600 !important;
}
.sg-label-outline {
  background: var(--xm-mint-bg) !important;
  color: var(--xm-mint) !important;
  border: none !important;
  border-radius: var(--xm-r-pill) !important;
  padding: 2px 8px !important;
  font: 600 10px/1.2 var(--xm-font) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* ─── (11) FAB position — clear of last row ─── */
button.md-fab,
.md-fab.md-default-theme,
md-fab-toolbar .md-fab {
  bottom: 88px !important;
  right: 24px !important;
  width: 52px !important;
  height: 52px !important;
}

/* ─── (12) Theme toggle — out of FAB way on mobile ─── */
.xmail-theme-toggle {
  bottom: 24px !important;
  right: 24px !important;
}
@media (max-width: 767px) {
  .xmail-theme-toggle {
    bottom: 24px !important;
    right: 24px !important;
  }
  button.md-fab {
    bottom: 88px !important;
    right: 24px !important;
  }
}

/* ─── (13) Quota widget as fintech metric card ─── */
md-sidenav .sg-quota-bar-container,
md-sidenav [class*="quota"],
md-sidenav md-progress-linear {
  margin: 8px 16px !important;
  height: 4px !important;
  border-radius: var(--xm-r-pill) !important;
  background: var(--xm-line-2) !important;
}
md-sidenav md-progress-linear .md-bar,
md-sidenav md-progress-linear .md-container {
  background: var(--xm-blue) !important;
  border-radius: var(--xm-r-pill) !important;
}
md-sidenav .sg-md-caption.md-fg {
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font: 600 10px/1.2 var(--xm-font) !important;
  color: var(--xm-ink-3) !important;
  background: transparent !important;
  padding: 4px 16px !important;
}

/* ─── (14) Sidebar Vit Vit name vs email hierarchy ─── */
md-sidenav .md-toolbar-tools p,
md-sidenav h3 + p,
md-sidenav .md-caption {
  font: 400 12px/1.3 var(--xm-font) !important;
  color: var(--xm-ink-3) !important;
  margin-top: 2px !important;
}
md-sidenav .md-toolbar-tools h3,
md-sidenav .sg-md-title {
  font: 600 15px/1.2 var(--xm-font) !important;
  color: var(--xm-ink) !important;
  letter-spacing: -0.01em !important;
}

/* ─── (15) Empty state right pane ─── */
.sg-no-message-selected,
md-content[layout-align*="center center"] {
  display: grid !important;
  place-items: center !important;
  gap: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font: 600 11px/1.4 var(--xm-font) !important;
  color: var(--xm-ink-3) !important;
}
.sg-no-message-selected::before,
md-content[layout-align*="center center"]::before {
  content: "";
  width: 56px;
  height: 56px;
  border-radius: var(--xm-r-lg);
  background: linear-gradient(135deg, var(--xm-blue), var(--xm-mint));
  flex-shrink: 0;
}

/* ─── (16) Scrollbar Coinbase-thin ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: transparent;
  transition: background 0.2s;
  border-radius: var(--xm-r-pill);
}
*:hover > ::-webkit-scrollbar-thumb,
:hover::-webkit-scrollbar-thumb {
  background: var(--xm-line-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--xm-ink-3); }

/* ─── (17) Toolbar icons — thin Coinbase line style ─── */
md-toolbar md-icon,
md-toolbar md-icon.material-icons {
  color: var(--xm-ink-2) !important;
  font-weight: 300;
}
md-toolbar .md-button:hover {
  background: var(--xm-hover) !important;
  border-radius: var(--xm-r-md) !important;
}

/* Render initials painted by xmail-theme.js onto rows */
md-list-item.sg-message-list-item[data-xmail-initials]::before {
  content: attr(data-xmail-initials);
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--xm-blue), var(--xm-mint));
  color: #fff;
  font: 700 13px/1 var(--xm-font);
  display: grid;
  place-items: center;
  letter-spacing: -0.01em;
  pointer-events: none;
  z-index: 1;
}
md-list-item.sg-message-list-item[data-xmail-initials] {
  position: relative !important;
}
md-list-item.sg-message-list-item[data-xmail-initials] .md-list-item-inner.sg-message-list-item-main {
  padding-left: 72px !important;
}

/* === HOTFIX v3.3 — switch from ::before pseudo to real DOM avatar (more reliable) === */
md-list-item.sg-message-list-item[data-xmail-initials]::before { content: none !important; }

.xmail-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--xm-blue), var(--xm-mint));
  color: #ffffff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 36px;
  text-align: center;
  letter-spacing: 0.02em;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
md-list-item.sg-message-list-item .md-list-item-inner.sg-message-list-item-main {
  padding-left: 64px !important;
}

/* === HOTFIX v3.4 — restore CSS pseudo avatars with explicit flexbox layout === */
md-list-item.sg-message-list-item[data-xmail-initials]::before {
  content: attr(data-xmail-initials) !important;
  position: absolute !important;
  left: 16px !important;
  top: 18px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #3B82F6, #34D399) !important;
  color: #FFFFFF !important;
  font-family: Inter, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 36px !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
  pointer-events: none !important;
  z-index: 5 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
  transform: none !important;
}
.xmail-avatar { display: none !important; }

/* === HOTFIX v3.5: keep gradient circle, drop text rendering (unreliable inside SoGo md-list) === */
md-list-item.sg-message-list-item::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  top: 18px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #3B82F6, #34D399) !important;
  pointer-events: none !important;
  z-index: 5 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
  transform: none !important;
}
md-list-item.sg-message-list-item {
  position: relative !important;
}
md-list-item.sg-message-list-item .md-list-item-inner.sg-message-list-item-main {
  padding-left: 64px !important;
}