/* ============================================================
   XwhyZ unified SOGo theme — v2
   Selectors based on actual rendered DOM (SOGo 5.12.7)
   Mono dark · geometric · generous tracking
   ============================================================ */

:root {
  --xwz-bg:        #080808;
  --xwz-surface:   #111111;
  --xwz-card:      #1A1A1A;
  --xwz-border:    #2A2A2A;
  --xwz-text:      #FFFFFF;
  --xwz-muted:     #888880;
  --xwz-subtle:    #C8C8C8;
  --xwz-ok:        #4ade80;
  --xwz-alert:     #ff3c3c;

  --xwz-font-display: 'Orbitron', system-ui, sans-serif;
  --xwz-font-body:    'Exo 2', system-ui, sans-serif;
  --xwz-font-ui:      'Rajdhani', system-ui, sans-serif;
}

/* ============================================================
   GLOBAL
   ============================================================ */

html, body, ._md, md-content, md-content._md {
  background-color: var(--xwz-bg) !important;
  color: var(--xwz-text) !important;
  font-family: var(--xwz-font-body) !important;
}

/* ============================================================
   LOGIN PAGE — using actual classes from rendered DOM:
   #loginContent, .sg-logo, .sg-login, .sg-login-content
   ============================================================ */

#loginContent {
  background-color: var(--xwz-bg) !important;
  box-shadow: none !important;
}

/* Left brand panel — the white-square offender */
.sg-logo {
  background-color: var(--xwz-bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 200px !important;
  padding: 2rem !important;
}

/* Replace the SOGo logo image. The element is:
   <img src="/SOGo.woa/WebServerResources/img/sogo-full.svg" class="md-margin">
   We swap the src using the `content:` property — supported on <img> in
   modern browsers and cleaner than the visibility:hidden trick. */
.sg-logo img,
img[src*="sogo-full.svg"],
img[src*="sogo-logo"],
img[src*="sogo-compact"] {
  content: url('/SOGo.woa/WebServerResources/custom/logo.png') !important;
  max-width: 320px !important;
  max-height: 140px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  filter: brightness(1.1) !important; /* helps wordmark pop on pure black */
}

/* Right login panel — kill md-bg/md-accent paint */
.sg-login,
.sg-login.md-default-theme,
.sg-login.md-default-theme.md-bg,
.sg-login.md-default-theme.md-accent {
  background-color: var(--xwz-bg) !important;
  color: var(--xwz-text) !important;
}

.sg-login-content {
  background-color: var(--xwz-bg) !important;
  padding: 2rem !important;
}

/* ============================================================
   FORM INPUTS — kill the blue/red Material chrome
   ============================================================ */

/* Input container — the md-accent class paints the underline blue.
   Override the border-bottom and label colours. */
md-input-container,
md-input-container.md-default-theme {
  background-color: transparent !important;
}

md-input-container .md-input,
md-input-container input.md-input,
md-input-container.md-default-theme .md-input {
  background-color: transparent !important;
  color: var(--xwz-text) !important;
  border-color: var(--xwz-border) !important;
  font-family: var(--xwz-font-body) !important;
}

md-input-container.md-input-focused .md-input,
md-input-container.md-input-focused input.md-input {
  border-color: var(--xwz-text) !important;
}

/* Labels — the blue "USERNAME" / "PASSWORD" / "CHOOSE..." text */
md-input-container label,
md-input-container .md-placeholder,
md-input-container.md-default-theme label,
md-input-container.md-input-focused label,
md-input-container.md-input-has-value label {
  color: var(--xwz-muted) !important;
  font-family: var(--xwz-font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  background-color: transparent !important;
}

/* Required-asterisk red dot — keep red but tone it down */
md-input-container label.md-required:after {
  color: var(--xwz-muted) !important;
}

/* Error state */
md-input-container.md-input-invalid label,
md-input-container.md-input-invalid .md-input-message-animation {
  color: var(--xwz-alert) !important;
}

/* Icons IN FRONT of inputs (person, vpn_key, language, visibility) —
   Material paints these in the accent colour (blue). */
md-input-container md-icon,
md-input-container .material-icons,
md-icon.md-default-theme,
md-icon[role="img"] {
  color: var(--xwz-muted) !important;
  fill: var(--xwz-muted) !important;
}

/* Visibility eye icon (right side of password field) — slightly brighter
   to indicate it's clickable */
md-icon#password-visibility-icon,
md-icon[aria-label="visibility"] {
  color: var(--xwz-text) !important;
  fill: var(--xwz-text) !important;
  cursor: pointer !important;
}

/* Language select dropdown */
md-select,
md-select.md-default-theme,
md-select-value {
  color: var(--xwz-text) !important;
  border-bottom-color: var(--xwz-border) !important;
}

md-select-value > span {
  color: var(--xwz-text) !important;
  font-family: var(--xwz-font-body) !important;
}

md-select-menu, md-select-menu md-content {
  background-color: var(--xwz-surface) !important;
  border: 1px solid var(--xwz-border) !important;
}

md-option {
  color: var(--xwz-text) !important;
}

md-option:hover, md-option.md-focused {
  background-color: var(--xwz-card) !important;
}

/* ============================================================
   SWITCH (Remember username toggle)
   ============================================================ */

md-switch .md-bar {
  background-color: var(--xwz-border) !important;
}
md-switch .md-thumb {
  background-color: var(--xwz-muted) !important;
}
md-switch.md-checked .md-bar {
  background-color: var(--xwz-subtle) !important;
}
md-switch.md-checked .md-thumb {
  background-color: var(--xwz-text) !important;
}
md-switch .md-label {
  color: var(--xwz-text) !important;
  font-family: var(--xwz-font-body) !important;
}

/* ============================================================
   BUTTONS — login page uses md-fab and md-icon-button, not md-raised
   ============================================================ */

/* Primary submit FAB ("Connect" with arrow_forward icon) */
button.md-fab,
button.md-fab.md-accent,
button.md-fab.md-accent.md-hue-2,
.md-button.md-fab {
  background-color: var(--xwz-text) !important;
  color: var(--xwz-bg) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 2px solid var(--xwz-text) !important;
  transition: all 0.2s ease !important;
}

button.md-fab:not([disabled]):hover,
.md-button.md-fab:not([disabled]):hover {
  background-color: var(--xwz-subtle) !important;
  border-color: var(--xwz-subtle) !important;
}

button.md-fab[disabled],
.md-button.md-fab[disabled] {
  background-color: var(--xwz-border) !important;
  border-color: var(--xwz-border) !important;
  color: var(--xwz-muted) !important;
}

/* The icon INSIDE the FAB (arrow_forward) */
button.md-fab md-icon,
button.md-fab .material-icons,
.md-button.md-fab md-icon {
  color: var(--xwz-bg) !important;
  fill: var(--xwz-bg) !important;
}

button.md-fab[disabled] md-icon,
.md-button.md-fab[disabled] md-icon {
  color: var(--xwz-muted) !important;
  fill: var(--xwz-muted) !important;
}

/* Icon-only buttons (info / About button on the left of the action row) */
button.md-icon-button,
.md-button.md-icon-button {
  background-color: transparent !important;
  border: 1px solid var(--xwz-border) !important;
  border-radius: 0 !important;
  color: var(--xwz-text) !important;
}

button.md-icon-button:hover,
.md-button.md-icon-button:hover {
  background-color: var(--xwz-card) !important;
  border-color: var(--xwz-text) !important;
}

button.md-icon-button md-icon,
button.md-icon-button .material-icons {
  color: var(--xwz-text) !important;
  fill: var(--xwz-text) !important;
}

/* Generic Material buttons (post-auth) */
.md-button.md-raised.md-primary,
.md-button.md-primary.md-raised {
  background-color: var(--xwz-text) !important;
  color: var(--xwz-bg) !important;
  border-radius: 0 !important;
  font-family: var(--xwz-font-ui) !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

.md-button.md-raised.md-primary:hover {
  background-color: var(--xwz-subtle) !important;
}

/* ============================================================
   COMPOSE FAB (the green pencil in the post-auth Mail UI)
   Same green it currently shows is md-accent + something — override
   ============================================================ */

md-fab-trigger button.md-fab,
md-fab-trigger .md-button.md-fab,
.sg-fab-compose,
button.md-fab[aria-label*="ompose"],
button.md-fab[aria-label*="ew "] {
  background-color: var(--xwz-text) !important;
  color: var(--xwz-bg) !important;
}

md-fab-trigger button.md-fab md-icon,
.sg-fab-compose md-icon {
  color: var(--xwz-bg) !important;
  fill: var(--xwz-bg) !important;
}

/* ============================================================
   POST-AUTH UI (inbox, sidebar, toolbars)
   These already work mostly — light touch only
   ============================================================ */

/* Toolbars */
md-toolbar,
md-toolbar.md-default-theme,
md-toolbar.md-default-theme:not(.md-menu-toolbar) {
  background-color: var(--xwz-surface) !important;
  border-bottom: 1px solid var(--xwz-border) !important;
  color: var(--xwz-text) !important;
}

/* Sidenav */
md-sidenav,
md-sidenav.md-default-theme,
.md-default-theme .md-sidenav-left {
  background-color: var(--xwz-surface) !important;
  border-right: 1px solid var(--xwz-border) !important;
}

/* List items */
md-list-item, md-list-item .md-list-item-text,
md-list-item._md, .md-default-theme md-list-item .md-no-style {
  color: var(--xwz-text) !important;
  background-color: transparent !important;
}

md-list-item:hover {
  background-color: var(--xwz-card) !important;
}

/* Cards */
md-card, md-card.md-default-theme {
  background-color: var(--xwz-surface) !important;
  border: 1px solid var(--xwz-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Dialogs */
md-dialog, md-dialog.md-default-theme {
  background-color: var(--xwz-surface) !important;
  color: var(--xwz-text) !important;
  border: 1px solid var(--xwz-border) !important;
}

md-backdrop {
  background-color: rgba(8, 8, 8, 0.85) !important;
}

/* ============================================================
   TYPOGRAPHY — headings in Orbitron, UI in Rajdhani
   ============================================================ */

h1, h2, h3, h4,
.md-title, .md-headline, .md-display-1, .md-display-2 {
  font-family: var(--xwz-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: var(--xwz-text) !important;
}

.md-toolbar-tools, .md-tab,
button:not(.md-fab):not(.md-icon-button) {
  font-family: var(--xwz-font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

/* ============================================================
   LINKS
   ============================================================ */

a, a:visited {
  color: var(--xwz-text) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  transition: border-color 0.2s;
}

a:hover {
  border-bottom-color: var(--xwz-text);
}

/* ============================================================
   SCROLLBARS
   ============================================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--xwz-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--xwz-border);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--xwz-muted);
}

/* ============================================================
   FIX-UP PASS 2 — based on actual rendered post-auth UI
   ============================================================ */

/* --- Login transition ripple (the green sweep) --- */
sg-ripple,
sg-ripple.md-default-theme,
sg-ripple.md-default-theme.md-accent,
sg-ripple.md-default-theme.md-bg,
sg-ripple.md-accent.md-bg {
  background-color: var(--xwz-muted) !important;
  color: var(--xwz-text) !important;
}

/* Warn state (login failed) — keep red but use our alert tone */
sg-ripple.md-warn,
sg-ripple.md-default-theme.md-warn {
  background-color: var(--xwz-alert) !important;
}

/* The check / cross icon shown mid-ripple */
sg-ripple-content md-icon,
sg-ripple md-icon {
  color: var(--xwz-text) !important;
  fill: var(--xwz-text) !important;
}

/* --- Sidebar: selected folder visibility --- */
/* The inbox folder when active needs a clear visual indicator.
   SOGo applies aria-selected, .md-focused, or .selected on list items
   depending on context — target all of them, plus add a left-edge bar. */

md-list-item.selected,
md-list-item[aria-selected="true"],
md-list-item.md-focused,
md-list-item._md.selected,
.md-default-theme md-list-item.selected,
.md-default-theme md-list-item[aria-selected="true"],
md-list-item.sg-active,
li.selected,
.sg-folder.selected,
.sg-folder[aria-selected="true"] {
  background-color: var(--xwz-card) !important;
  border-left: 3px solid var(--xwz-text) !important;
  padding-left: calc(1rem - 3px) !important; /* compensate for border to avoid jump */
}

md-list-item.selected .md-list-item-text,
md-list-item[aria-selected="true"] .md-list-item-text,
md-list-item.selected md-icon,
md-list-item[aria-selected="true"] md-icon {
  color: var(--xwz-text) !important;
  fill: var(--xwz-text) !important;
  font-weight: 600 !important;
}

/* Hover state for non-selected items — subtle */
md-list-item:not(.selected):not([aria-selected="true"]):hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

/* --- Message view header: "To" label and recipient pill --- */

/* The recipient/sender labels (To, From, Cc, Bcc) — currently nearly invisible */
.sg-md-recipient-label,
.sg-recipient-label,
[class*="recipient"] label,
.md-chip-content + label,
.sg-mail-header label,
.sg-mail-part .label {
  color: var(--xwz-muted) !important;
  font-family: var(--xwz-font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}

/* Recipient pill / chip — make it readable on dark */
md-chips md-chip,
md-chip,
.md-chips md-chip,
.md-chip,
.sg-md-chip {
  background-color: var(--xwz-card) !important;
  color: var(--xwz-text) !important;
  border: 1px solid var(--xwz-border) !important;
  border-radius: 0 !important;
  font-family: var(--xwz-font-body) !important;
}

md-chip md-chip-template, md-chip .md-chip-content {
  color: var(--xwz-text) !important;
}

/* --- Message content panel chrome (NOT the email body iframe) --- */
/* The container that wraps the iframe — paint it black so the panel
   doesn't show white margins. We can't reach inside the iframe. */

.sg-mail-part,
.sg-mail-content,
.sg-message-content,
sg-mail-viewer,
md-content.sg-mail-content,
.md-virtual-repeat-container,
#messageContent,
.sg-message-view {
  background-color: var(--xwz-bg) !important;
  color: var(--xwz-text) !important;
}

/* Iframe element itself — frame it but don't try to touch contents */
iframe.sg-iframe,
iframe[name*="message"],
.sg-mail-content iframe {
  background-color: var(--xwz-text) !important;  /* white BG so emails look right */
  border: none !important;
}

/* Note: The email body INSIDE the iframe will render with its own styling
   (sender's HTML email). That's correct — we don't restyle other people's
   emails. White background inside the frame is the safest neutral. */

/* --- Message subject/header area (the "Incoming email" title block) --- */

.sg-mail-subject, .sg-mail-header,
.sg-message-header, sg-mail-viewer header,
md-toolbar.sg-mail-header {
  background-color: var(--xwz-surface) !important;
  border-bottom: 1px solid var(--xwz-border) !important;
  padding: 1rem 1.5rem !important;
}

.sg-mail-subject h1, .sg-mail-subject h2,
.sg-message-header h1, .sg-message-header h2,
.md-toolbar-tools h1, .md-toolbar-tools h2,
md-toolbar h1, md-toolbar h2 {
  color: var(--xwz-text) !important;
  background-color: transparent !important;
  font-family: var(--xwz-font-display) !important;
  font-weight: 700 !important;
}

/* Date/timestamp under subject */
.sg-mail-date, .sg-message-date,
.sg-mail-header time, .sg-message-header time {
  color: var(--xwz-muted) !important;
  font-family: var(--xwz-font-ui) !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
}

/* --- Message list item highlight (the row with toby@tobybrown.info) --- */
/* Selected message in the inbox list */
.sg-message-list md-list-item.selected,
.sg-message-list md-list-item[aria-selected="true"],
md-list-item.sg-message-item.selected,
md-list-item.sg-message-item[aria-selected="true"] {
  background-color: var(--xwz-card) !important;
  border-left: 3px solid var(--xwz-text) !important;
}

/* --- Action buttons in message toolbar (reply/forward/delete/etc) --- */
.sg-toolbar-button md-icon,
md-toolbar md-icon,
md-toolbar button md-icon {
  color: var(--xwz-text) !important;
  fill: var(--xwz-text) !important;
}

md-toolbar button:hover {
  background-color: var(--xwz-card) !important;
}

/* --- Search bar in the inbox --- */
.sg-search-bar input,
md-content input[type="search"],
input[type="search"] {
  background-color: transparent !important;
  color: var(--xwz-text) !important;
  border-bottom: 1px solid var(--xwz-border) !important;
}

/* --- Settings cog button (top of sidebar) --- */
button.md-fab.sg-fab-settings,
.sg-sidenav button md-icon[aria-label*="setting"] {
  color: var(--xwz-text) !important;
  fill: var(--xwz-text) !important;
}

/* --- Catch-all for any remaining md-accent green/blue paint --- */
.md-accent.md-bg,
.md-default-theme.md-accent.md-bg {
  background-color: var(--xwz-bg) !important;
  color: var(--xwz-text) !important;
}

/* ============================================================
   FIX-UP PASS 3 — compose window, popups, and dialog views
   ============================================================ */

/* The compose popup view (UIxMailPopupView) — entire body */
body, html {
  background-color: var(--xwz-bg) !important;
}

/* Generic md-content fallback — every Material content area */
md-content,
md-content._md,
md-content.md-default-theme,
md-content[layout],
md-content[flex] {
  background-color: var(--xwz-bg) !important;
  color: var(--xwz-text) !important;
}

/* The compose dialog/popup containers — multiple possible class names */
md-dialog, md-dialog._md,
md-dialog.md-default-theme,
.md-dialog-container,
.sg-mail-editor,
.sg-md-mail-editor,
sg-mail-editor,
.md-virtual-repeat-container,
[ng-controller*="ail"] md-content,
[ng-controller*="Compose"] md-content,
[ng-controller*="Editor"] md-content {
  background-color: var(--xwz-bg) !important;
  color: var(--xwz-text) !important;
  box-shadow: none !important;
}

/* Compose form recipient row labels (To, CC, BCC, Subject) — these
   are likely <label> or <span> elements. Hit ALL labels and spans
   inside the editor area. */

.sg-mail-editor label,
.sg-md-mail-editor label,
sg-mail-editor label,
md-dialog label,
.md-dialog-container label,
form[name*="ompose"] label,
form[name*="ditor"] label,
form[name*="ail"] label {
  color: var(--xwz-muted) !important;
  font-family: var(--xwz-font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  background-color: transparent !important;
}

/* Recipient chips inside compose */
.sg-mail-editor md-chip,
.sg-md-mail-editor md-chip,
sg-mail-editor md-chip,
md-dialog md-chip,
md-chips md-chip,
.md-chips md-chip {
  background-color: var(--xwz-card) !important;
  color: var(--xwz-text) !important;
  border: 1px solid var(--xwz-border) !important;
  border-radius: 0 !important;
}

md-chip md-chip-template {
  color: var(--xwz-text) !important;
}

/* Recipient input field within md-chips */
md-chips .md-chip-input-container input,
.md-chips input,
md-chips input,
input.md-input {
  background-color: transparent !important;
  color: var(--xwz-text) !important;
  border: none !important;
}

/* Subject input field */
input[ng-model*="ubject"],
input[ng-model*="subject"],
input[name*="ubject"],
input[name*="subject"],
input[placeholder*="ubject"] {
  background-color: transparent !important;
  color: var(--xwz-text) !important;
  border-bottom: 1px solid var(--xwz-border) !important;
  font-family: var(--xwz-font-body) !important;
}

/* Compose body editor area (CKEditor / contenteditable) */
.sg-mail-editor [contenteditable],
sg-mail-editor [contenteditable],
.cke_wysiwyg_div, .cke_editable,
iframe.cke_wysiwyg_frame,
.ck-editor__editable,
.ck-content {
  background-color: var(--xwz-text) !important;
  color: var(--xwz-bg) !important;
  /* email body should look like a "page" — white background.
     The user is composing what will go to other people. */
}

/* Editor toolbar (B, I, U, formatting buttons) */
.cke_top, .cke_toolbar, .cke_toolbox,
.ck-toolbar, .ck.ck-toolbar,
.sg-mail-editor md-toolbar,
sg-mail-editor md-toolbar {
  background-color: var(--xwz-surface) !important;
  border-bottom: 1px solid var(--xwz-border) !important;
}

.cke_button, .cke_button_label,
.ck-button, .ck.ck-button,
.cke_toolbar md-icon,
.ck-toolbar md-icon {
  color: var(--xwz-text) !important;
  fill: var(--xwz-text) !important;
}

.cke_button:hover, .ck-button:hover {
  background-color: var(--xwz-card) !important;
}

/* Send / Save / Cancel buttons in compose toolbar (top right corner) */
md-toolbar.sg-mail-editor-toolbar button,
sg-mail-editor md-toolbar button,
.sg-mail-editor md-toolbar button {
  color: var(--xwz-text) !important;
}

md-toolbar.sg-mail-editor-toolbar button md-icon,
sg-mail-editor md-toolbar button md-icon {
  color: var(--xwz-text) !important;
  fill: var(--xwz-text) !important;
}

/* CC / BCC buttons (the cc / bcc text on the right of the To row) */
.sg-mail-editor a, .sg-mail-editor button[ng-click*="cc"],
sg-mail-editor a, sg-mail-editor button[ng-click*="cc"] {
  color: var(--xwz-muted) !important;
  font-family: var(--xwz-font-ui) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.sg-mail-editor a:hover, sg-mail-editor a:hover {
  color: var(--xwz-text) !important;
}

/* Catch-all: any element with inline white background sneaking through */
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: rgb(255, 255, 255)"],
[style*="background: white"],
[style*="background: #fff"] {
  background-color: var(--xwz-bg) !important;
}

/* Exception: keep the editable email body white (it's the email being written) */
[contenteditable][style*="background"],
.cke_editable[style*="background"],
.ck-content[style*="background"] {
  background-color: var(--xwz-text) !important;
}

/* ============================================================
   FIX-UP PASS 4 — exact selectors from rendered DOM
   ============================================================ */

/* --- Sidebar mailbox list — actual classes from inspect --- */
/* Container: <md-list-item class="sg-mailbox-list-item ... md-bg sg-selected">
   Text: <p class="sg-item-name"><span>Inbox</span></p> */

md-list-item.sg-mailbox-list-item {
  background-color: transparent !important;
  color: var(--xwz-text) !important;
}

md-list-item.sg-mailbox-list-item .sg-item-name,
md-list-item.sg-mailbox-list-item .sg-item-name span,
md-list-item.sg-mailbox-list-item p.sg-item-name {
  color: var(--xwz-text) !important;
  background-color: transparent !important;
}

md-list-item.sg-mailbox-list-item md-icon {
  color: var(--xwz-muted) !important;
  fill: var(--xwz-muted) !important;
}

/* Hover (non-selected) */
md-list-item.sg-mailbox-list-item:hover {
  background-color: rgba(255,255,255,0.04) !important;
}

/* SELECTED folder — class is .sg-selected (NOT .selected, NOT aria-selected) */
md-list-item.sg-mailbox-list-item.sg-selected,
md-list-item.sg-mailbox-list-item.md-bg.sg-selected,
md-list-item.sg-selected {
  background-color: var(--xwz-card) !important;
  border-left: 3px solid var(--xwz-text) !important;
  padding-left: calc(16px - 3px) !important;
}

md-list-item.sg-mailbox-list-item.sg-selected .sg-item-name,
md-list-item.sg-mailbox-list-item.sg-selected .sg-item-name span,
md-list-item.sg-mailbox-list-item.sg-selected p.sg-item-name,
md-list-item.sg-selected .sg-item-name,
md-list-item.sg-selected .sg-item-name span {
  color: var(--xwz-text) !important;
  font-weight: 600 !important;
  background-color: transparent !important;
}

md-list-item.sg-mailbox-list-item.sg-selected md-icon,
md-list-item.sg-selected md-icon {
  color: var(--xwz-text) !important;
  fill: var(--xwz-text) !important;
}

/* Counter badge (unread count, currently 0/hidden but for when it appears) */
.sg-counter-badge {
  background-color: var(--xwz-text) !important;
  color: var(--xwz-bg) !important;
  font-family: var(--xwz-font-ui) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  border-radius: 0 !important;
}

/* The "Options" three-dot menu icon on the right of each folder */
md-list-item.sg-mailbox-list-item md-icon.md-menu,
md-list-item .md-secondary-container md-icon {
  color: var(--xwz-muted) !important;
  fill: var(--xwz-muted) !important;
}

md-list-item.sg-mailbox-list-item:hover md-icon.md-menu {
  color: var(--xwz-text) !important;
  fill: var(--xwz-text) !important;
}

/* Override Material's md-bg / md-hue-1 paint that's dimming the row */
.md-default-theme.md-background,
.md-default-theme.md-bg,
md-list-item.md-bg,
md-list-item.md-default-theme.md-bg.md-hue-1 {
  background-color: transparent !important;
}

/* But re-paint when sg-selected wins */
md-list-item.md-default-theme.md-bg.sg-selected,
md-list-item.md-bg.sg-selected {
  background-color: var(--xwz-card) !important;
}

/* --- Mailbox checkbox (the icon container with .inbox / .drafts etc) --- */
md-checkbox.sg-folder,
md-checkbox.sg-folder.md-checked,
md-checkbox.sg-folder .md-icon {
  background-color: transparent !important;
  border-color: transparent !important;
}

md-checkbox.sg-folder .md-icon::after {
  border-color: var(--xwz-text) !important;
}

/* --- Account header (info@bamboozledbars.uk above mailbox list) --- */
.sg-mailbox-list-item:first-child,
md-list-item.sg-account {
  background-color: transparent !important;
  color: var(--xwz-text) !important;
  border-bottom: 1px solid var(--xwz-border) !important;
}

/* "0% used on 2048 MB" quota text — currently appearing as red underline */
.sg-quota,
.sg-quota-bar,
sg-quota,
[class*="quota"] {
  color: var(--xwz-muted) !important;
  background-color: transparent !important;
  border: none !important;
  font-family: var(--xwz-font-ui) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

/* Quota progress bar — kill any red/coloured fill */
.sg-quota md-progress-linear,
.sg-quota .md-container,
md-progress-linear .md-container,
md-progress-linear .md-bar,
md-progress-linear[md-mode] .md-bar1,
md-progress-linear[md-mode] .md-bar2 {
  background-color: var(--xwz-border) !important;
}

md-progress-linear .md-bar.md-bar2,
md-progress-linear[md-mode] .md-bar2 {
  background-color: var(--xwz-text) !important;
}

/* --- Compose: sender pill at top (info@bamboozledbars.uk <...>) --- */
/* This is the From/sender selector chip — currently has a green tint */

.sg-mail-editor md-input-container.md-input-has-value:first-of-type,
sg-mail-editor md-input-container:first-of-type,
md-content[ng-controller*="ompose"] md-input-container:first-of-type input {
  background-color: transparent !important;
  color: var(--xwz-text) !important;
}

/* Generic: ANY input with a coloured background in the compose dialog */
.sg-mail-editor input,
sg-mail-editor input,
md-dialog input,
form[name*="ompose"] input,
form[name*="ditor"] input {
  background-color: transparent !important;
  color: var(--xwz-text) !important;
}

/* The sender chip itself — looks like md-autocomplete or similar */
md-autocomplete,
md-autocomplete-wrap,
.md-autocomplete-suggestions-container {
  background-color: transparent !important;
  color: var(--xwz-text) !important;
}

md-autocomplete input {
  background-color: transparent !important;
  color: var(--xwz-text) !important;
}

/* Autocomplete dropdown when typing recipients */
.md-autocomplete-suggestions-container,
.md-autocomplete-suggestions {
  background-color: var(--xwz-surface) !important;
  border: 1px solid var(--xwz-border) !important;
}

.md-autocomplete-suggestions li {
  color: var(--xwz-text) !important;
}

.md-autocomplete-suggestions li:hover,
.md-autocomplete-suggestions li.selected {
  background-color: var(--xwz-card) !important;
}

/* --- The "More" three-dot (vertical) on compose toolbar --- */
.sg-mail-editor md-icon[aria-label*="ore"],
sg-mail-editor md-icon[aria-label*="ore"] {
  color: var(--xwz-text) !important;
  fill: var(--xwz-text) !important;
}

/* ============================================================
   FIX-UP PASS 5 — Settings / Preferences view
   The selected state here uses ui-sref-active applying
   md-bg.md-hue-1 — different mechanism from the inbox sidebar
   ============================================================ */

/* Selected preferences list item — Material applies md-bg.md-hue-1
   when the route matches. Override BOTH background AND text colour. */

md-list-item.md-default-theme.md-background.md-bg.md-hue-1,
md-list-item._md-button-wrap.md-default-theme.md-background.md-bg.md-hue-1,
md-list-item.md-clickable.md-default-theme.md-background.md-bg.md-hue-1 {
  background-color: var(--xwz-card) !important;
  border-left: 3px solid var(--xwz-text) !important;
  padding-left: calc(16px - 3px) !important;
}

/* Force text and icons inside the selected item to be visible.
   Material's md-hue-1 paints the text in a "contrast" colour that's
   too dim against our dark theme. */

md-list-item.md-bg.md-hue-1 .sg-item-name,
md-list-item.md-bg.md-hue-1 p.sg-item-name,
md-list-item.md-bg.md-hue-1 .md-list-item-inner,
md-list-item.md-bg.md-hue-1 .md-list-item-inner p,
md-list-item.md-bg.md-hue-1 a,
md-list-item.md-default-theme.md-bg.md-hue-1 .sg-item-name,
md-list-item.md-default-theme.md-bg.md-hue-1 p {
  color: var(--xwz-text) !important;
  font-weight: 600 !important;
}

md-list-item.md-bg.md-hue-1 md-icon,
md-list-item.md-bg.md-hue-1 .material-icons,
md-list-item.md-default-theme.md-bg.md-hue-1 md-icon {
  color: var(--xwz-text) !important;
  fill: var(--xwz-text) !important;
}

/* Non-selected preferences list items — neutral text */
md-list-item._md-button-wrap .sg-item-name,
md-list-item._md-button-wrap p.sg-item-name,
md-list-item._md-button-wrap .md-list-item-inner p {
  color: var(--xwz-text) !important;
}

md-list-item._md-button-wrap md-icon {
  color: var(--xwz-muted) !important;
  fill: var(--xwz-muted) !important;
}

md-list-item._md-button-wrap:hover {
  background-color: rgba(255,255,255,0.04) !important;
}

md-list-item._md-button-wrap:hover md-icon {
  color: var(--xwz-text) !important;
  fill: var(--xwz-text) !important;
}

/* --- "Preferences" header above the settings nav --- */
md-content h1, md-content h2, md-content h3,
.sg-preferences-list-header,
md-list-item[role="listitem"]:first-of-type h3 {
  color: var(--xwz-text) !important;
  font-family: var(--xwz-font-display) !important;
}

/* --- Tab headers in preferences (CATEGORIES, MAIL, etc.) --- */
/* These are md-tabs with md-accent paint — currently green. */

md-tabs, md-tabs.md-default-theme,
md-tabs-canvas, md-pagination-wrapper {
  background-color: transparent !important;
}

md-tab-item, md-tab-item.md-default-theme,
.md-tab, .md-tab._md, md-tab-content {
  color: var(--xwz-muted) !important;
  font-family: var(--xwz-font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

md-tab-item.md-active,
.md-tab.md-active,
md-tabs.md-default-theme md-tab-item.md-active,
md-tabs[md-align-tabs] md-tab-item.md-active {
  color: var(--xwz-text) !important;
}

/* Active tab underline — currently green md-accent, make it white */
md-ink-bar,
md-tabs md-ink-bar,
md-tabs.md-default-theme md-ink-bar,
md-ink-bar.md-accent {
  background-color: var(--xwz-text) !important;
  color: var(--xwz-text) !important;
}

/* --- Category items in the right panel (VIP, Family, Customer, etc.) --- */
/* These are list items in the categories editor — text is currently
   rendering OK but ensuring they stay clean if Material adds chrome. */

md-list .md-list-item-text h3,
md-list .md-list-item-text p,
.sg-category-item, .sg-category-name {
  color: var(--xwz-text) !important;
  font-family: var(--xwz-font-body) !important;
}

/* --- Underlines / focus indicators that bleed through as red --- */
/* The red underline beneath "Address Book" in the screenshot —
   that's md-warn or focus colour. Neutralise. */

md-list-item:focus,
md-list-item._md-button-wrap:focus,
md-list-item a:focus {
  outline: none !important;
  border-bottom: none !important;
}

md-list-item:focus-visible,
md-list-item a:focus-visible {
  outline: 1px solid var(--xwz-text) !important;
  outline-offset: -1px !important;
}

/* Catch-all: any md-warn paint creeping into list items */
md-list-item.md-warn,
md-list-item .md-warn {
  background-color: transparent !important;
  color: var(--xwz-text) !important;
  border-color: var(--xwz-border) !important;
}

/* --- Settings form labels and section headings --- */
.md-default-theme md-input-container > label,
md-content[ng-controller*="references"] label,
md-content[ng-controller*="eneral"] label,
sg-preferences label {
  color: var(--xwz-muted) !important;
}

/* Section dividers in preferences */
md-divider,
md-divider.md-default-theme {
  border-top-color: var(--xwz-border) !important;
}