@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300..900&family=Roboto+Mono:wght@400;500&display=swap');

/* ==========================================================================
   gulag_theme - fromgulagtoglory.men palette for Roundcube elastic
   paper #fff3e0 | ink #1a0b0b | accent #e03131 | gold #ffd43b
   ========================================================================== */

:root {
  --gt-red: #c92a2a;
  --gt-red-bright: #e03131;
  --gt-red-deep: #a61e1e;
  --gt-gold: #ffd43b;
  --gt-gold-deep: #f0b400;
  --gt-paper: #fff3e0;
  --gt-paper-alt: #ffe8cc;
  --gt-pink: #ffe3e3;
  --gt-ink: #1a0b0b;
  --gt-muted: #6b4c4c;
  --gt-dim: #865a5a;
  --gt-radius: 2px;
  --gt-shadow: 4px 4px 0 var(--gt-ink);
  --gt-font: Rubik, "Rubik Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gt-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gt-rainbow: linear-gradient(90deg, #e40303 0 16.666%, #ff8c00 0 33.333%, #ffed00 0 50%, #008026 0 66.666%, #004dff 0 83.333%, #750787 0 100%);
}

/* ---------------- base ---------------- */
html, body {
  background: var(--gt-paper) !important;
  color: var(--gt-ink) !important;
  font-family: var(--gt-font) !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 5px !important;
  background: var(--gt-rainbow) !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}

a { color: var(--gt-red-bright) !important; }
a:hover { color: var(--gt-red-deep) !important; }

h1, h2, h3, h4, .header-title {
  font-family: var(--gt-font) !important;
  font-weight: 700 !important;
  color: var(--gt-ink) !important;
}

/* ---------------- app shell ---------------- */
#layout, #layout-content, #layout-list {
  background: var(--gt-paper) !important;
  color: var(--gt-ink) !important;
}

/* left icon rail (Compose / Mail / Contacts / Settings) */
#layout-menu,
#layout-menu .popover-header {
  background: var(--gt-paper-alt) !important;
  border-right: 2px solid var(--gt-ink) !important;
  box-shadow: none !important;
}
#layout-menu a,
#layout-menu .button,
#layout-menu .icon {
  background: transparent !important;
  color: var(--gt-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
}
#layout-menu a:hover { background: var(--gt-pink) !important; }
#layout-menu .special-buttons,
#layout-menu .popover-footer {
  background: var(--gt-paper-alt) !important;
  border: 0 !important;
  box-shadow: none !important;
}
#layout-menu .special-buttons a { color: var(--gt-ink) !important; }
#layout-menu a.active,
#layout-menu .active > a {
  background: var(--gt-red-bright) !important;
  color: var(--gt-paper) !important;
  border-radius: var(--gt-radius) !important;
}

/* folder sidebar */
#layout-sidebar, .sidebar {
  background: var(--gt-paper) !important;
  border-right: 1px solid var(--gt-paper-alt) !important;
}

#layout-sidebar .footer,
#layout-list .footer,
.footer.small { background: var(--gt-paper) !important; color: var(--gt-ink) !important; border-top: 1px solid var(--gt-paper-alt) !important; }

/* headers / taskbars */
#layout > .header, .header {
  background: var(--gt-paper) !important;
  color: var(--gt-ink) !important;
  border-bottom: 1px solid var(--gt-paper-alt) !important;
  box-shadow: none !important;
}

/* message pane wrapper + iframe canvas */
#layout-content, .iframe-wrapper, #messagecontframe {
  background: var(--gt-paper) !important;
}

/* toolbar + task menu entries stay flat (no button chrome) */
#taskmenu a,
.toolbar a,
.header a,
.toolbar .button,
.taskmenu a {
  background: transparent !important;
  color: var(--gt-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--gt-font) !important;
  font-weight: 600 !important;
  border-radius: var(--gt-radius) !important;
}
#taskmenu a:hover,
.toolbar a:hover,
.toolbar .button:hover,
.taskmenu a:hover { background: var(--gt-pink) !important; color: var(--gt-ink) !important; }
#taskmenu a.active,
.taskmenu a.active { background: var(--gt-red-bright) !important; color: var(--gt-paper) !important; }

/* ---------------- real buttons only ---------------- */
.formbuttons button,
.formbuttons .btn,
#login-form button,
button.btn-primary,
.btn-primary,
input[type="submit"],
.propform .btn {
  font-family: var(--gt-font) !important;
  font-weight: 600 !important;
  background: var(--gt-red-bright) !important;
  color: var(--gt-paper) !important;
  border: 2px solid var(--gt-ink) !important;
  border-radius: var(--gt-radius) !important;
  box-shadow: var(--gt-shadow) !important;
}
.formbuttons button:hover,
#login-form button:hover,
.btn-primary:hover,
input[type="submit"]:hover {
  background: var(--gt-red-deep) !important;
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--gt-ink) !important;
}

/* icon-only buttons: no chrome at all */
.button.icon, a.button.icon, .naked, .btn.naked, button.naked {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--gt-ink) !important;
}
.button.icon:hover, a.button.icon:hover { background: var(--gt-pink) !important; }

/* ---------------- inputs ---------------- */
input[type="text"], input[type="password"], input[type="email"],
input[type="search"], textarea, select, .form-control {
  font-family: var(--gt-font) !important;
  background: #fffdf7 !important;
  color: var(--gt-ink) !important;
  border: 2px solid var(--gt-ink) !important;
  border-radius: var(--gt-radius) !important;
  box-shadow: none !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--gt-red-bright) !important;
  box-shadow: 0 0 0 3px rgba(224,49,49,.18) !important;
}
::placeholder { color: var(--gt-dim) !important; }

.input-group-addon, .input-group-text, .input-group-prepend .input-group-text {
  background: var(--gt-paper-alt) !important;
  color: var(--gt-ink) !important;
  border: 2px solid var(--gt-ink) !important;
  border-right: 0 !important;
}

/* ---------------- mail list ---------------- */
.listing, .listing tbody, .listing tr, .listing td {
  background: transparent !important;
  color: var(--gt-ink) !important;
  font-family: var(--gt-font) !important;
}
.listing thead th, .listing .header th {
  background: var(--gt-paper-alt) !important;
  color: var(--gt-muted) !important;
  border-bottom: 2px solid var(--gt-ink) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
.listing tbody tr { border-bottom: 1px solid var(--gt-paper-alt) !important; }
.listing tbody tr:hover { background: var(--gt-pink) !important; }
.listing tbody tr.selected, .listing tbody tr.selected td {
  background: var(--gt-red-bright) !important;
  color: var(--gt-paper) !important;
}
.listing tbody tr.unread td { font-weight: 700 !important; }

/* subjects are content, not links */
.listing td.subject a,
.listing td.subject,
.listing td.from a,
.listing td.date,
.listing a { color: var(--gt-ink) !important; text-decoration: none !important; }
.listing td.from, .listing td.date { color: var(--gt-muted) !important; }
.listing tbody tr.unread td.subject a,
.listing tbody tr.unread td.subject { font-weight: 700 !important; color: var(--gt-ink) !important; }
.listing tbody tr.selected td a,
.listing tbody tr.selected td.subject,
.listing tbody tr.selected td.subject a,
.listing tbody tr.selected td.from { color: var(--gt-paper) !important; }

/* message header links */
.message-headers a, .headers-table a, .message-header-links a,
a.button.details, a.button.headers {
  color: var(--gt-red-bright) !important;
  text-decoration: none !important;
}
.iframe-wrapper { background: var(--gt-paper) !important; }

/* ---------------- message pane ---------------- */
#mailview-right, .messageview, .messagePart, .message-html, .message-part, .message-content, .message-body {
  background: #fffdf7 !important;
  color: var(--gt-ink) !important;
  font-family: var(--gt-font) !important;
}
.message-headers, .headers-table td {
  font-family: var(--gt-font) !important;
  color: var(--gt-muted) !important;
}
blockquote { border-left: 3px solid var(--gt-gold-deep) !important; color: var(--gt-muted) !important; }

/* ---------------- popovers / menus ---------------- */
.popover, .menu, .dropmenu, .ui-menu, .uibox {
  background: var(--gt-paper) !important;
  color: var(--gt-ink) !important;
  border: 2px solid var(--gt-ink) !important;
  border-radius: var(--gt-radius) !important;
  box-shadow: var(--gt-shadow) !important;
  font-family: var(--gt-font) !important;
}
.menu a:hover, .popover li a:hover, .ui-menu li:hover { background: var(--gt-pink) !important; }

/* toolbars are not popovers: strip the chrome back off */
#taskmenu.menu.toolbar, .menu.toolbar {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--gt-ink) !important;
  box-shadow: none !important;
}
#taskmenu a, .toolbar a, .taskmenu a { text-decoration: none !important; }

/* ---------------- folder list ---------------- */
.folderlist li a {
  font-family: var(--gt-font) !important;
  color: var(--gt-ink) !important;
  border-radius: var(--gt-radius) !important;
}
.folderlist li a:hover { background: var(--gt-pink) !important; }
.folderlist li.selected a, .folderlist li.active a {
  background: var(--gt-red-bright) !important;
  color: var(--gt-paper) !important;
  font-weight: 700 !important;
}
.unread-count, .badge {
  background: var(--gt-gold) !important;
  color: var(--gt-ink) !important;
  border: 1px solid var(--gt-ink) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* ---------------- scrollbars ---------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gt-paper-alt); }
::-webkit-scrollbar-thumb { background: var(--gt-dim); }
::-webkit-scrollbar-thumb:hover { background: var(--gt-red-bright); }

/* ---------------- login ---------------- */
body.task-login { background: var(--gt-red) !important; }
body.task-login #layout,
body.task-login #layout-content,
body.task-login #layout-content.selected {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.task-login img#logo {
  filter: grayscale(1) brightness(.4) sepia(1) saturate(7) hue-rotate(312deg) !important;
}
body.task-login #login-form {
  background: var(--gt-paper) !important;
  border: 2px solid var(--gt-ink) !important;
  border-radius: var(--gt-radius) !important;
  box-shadow: 8px 8px 0 var(--gt-ink) !important;
  padding: 2rem !important;
  position: relative !important;
  overflow: hidden !important;
}
body.task-login #login-form::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 8px !important;
  background: var(--gt-rainbow) !important;
}
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"] {
  padding: 10px 12px !important;
  font-size: 15px !important;
}
body.task-login #login-form button {
  width: 100% !important;
  padding: 11px !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

/* keyboard-only focus rings (programmatic focus must not draw a red box) */
a:focus, button:focus, .button:focus, [tabindex]:focus, .ui-dialog button:focus {
  outline: none !important;
  box-shadow: none !important;
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gt-red-bright) !important;
  outline-offset: 2px !important;
}

/* ---------------- misc ---------------- */
.meta, .secondary-text, small, .pagenav a { color: var(--gt-muted) !important; }
code, kbd, pre, .monospace { font-family: var(--gt-mono) !important; }


/* ============ fixes: pagenav footer, badges, icon tinting, contrast ============ */

/* the list-navigation footer carries class "menu" - it is NOT a popover */
.pagenav, .pagenav.menu, .pagenav.footer, .menu.footer {
  background: var(--gt-paper) !important;
  border: 0 !important;
  border-top: 1px solid var(--gt-paper-alt) !important;
  box-shadow: none !important;
  color: var(--gt-ink) !important;
  padding: 6px 8px !important;
}
.pagenav a, .pagenav .button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--gt-ink) !important;
}
.pagenav a:hover { background: var(--gt-pink) !important; }
.pagenav a.disabled, .pagenav a[aria-disabled="true"] {
  opacity: .45 !important;
  color: var(--gt-muted) !important;
}
.pagenav-text { color: var(--gt-muted) !important; font-weight: 500 !important; }
.pagenav .rcpagejumper, .pagenav input {
  background: #fffdf7 !important;
  color: var(--gt-ink) !important;
  border: 1px solid var(--gt-ink) !important;
  border-radius: var(--gt-radius) !important;
  width: 44px !important;
  text-align: center !important;
}

/* unread counters (elastic uses .unreadcount, not .unread-count) */
.unreadcount, .unread-count, .badge {
  background: var(--gt-gold) !important;
  color: var(--gt-ink) !important;
  border: 1px solid var(--gt-ink) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  text-align: center !important;
}


/* readable secondary text on cream (elastic's greys are too light) */
.listing td.date, .listing td.from, .listing td.size,
.message-headers, .headers-table td, .meta, .pagenav-text,
.footer, .footer.small, .secondary-text, small {
  color: var(--gt-dim) !important;
}


/* message view header: kill the remaining blue links/icons */
#layout-content a, #layout-content .button,
#message-header a, #message-header .button,
.message-header-links a, .message-headers a, .headers-table a {
  color: var(--gt-red-bright) !important;
  text-decoration: none !important;
}


/* ============ palette normalisation (audited across all screens) ============ */

/* elastic's greys: addresses, dates, sizes, hints */
.rcmContactAddress, span.date, span.size, td.date, td.size,
.hint, .form-hint, .message-part-hint, .listing .date,
.listing .size, .listing .rcmContactAddress {
  color: var(--gt-dim) !important;
}

/* secondary buttons in the editor (were slate blue with white text) */
.btn-secondary, button.btn-secondary, .button.secondary {
  background: var(--gt-gold) !important;
  color: var(--gt-ink) !important;
  border: 2px solid var(--gt-ink) !important;
  border-radius: var(--gt-radius) !important;
  box-shadow: var(--gt-shadow) !important;
}
.btn-secondary:hover, button.btn-secondary:hover {
  background: var(--gt-gold-deep) !important;
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--gt-ink) !important;
}

/* compose editor chrome */
.editor-toolbar, .mce-toolbar-grp, .editor-toolbar *,
.mce-panel, .mce-toolbar .mce-btn, .mce-menu {
  background: var(--gt-paper-alt) !important;
  background-image: none !important;
  color: var(--gt-ink) !important;
  border-color: var(--gt-paper-alt) !important;
}
.editor-toolbar .button, .mce-btn { border: 0 !important; box-shadow: none !important; }
.editor-toolbar .button:hover, .mce-btn:hover { background: var(--gt-pink) !important; }

/* settings navigation items (were pale blue) */
li.listitem, .listitem.preferences, #settings-navigation li {
  background: transparent !important;
  color: var(--gt-ink) !important;
}
#settings-navigation li a { color: var(--gt-ink) !important; border-radius: var(--gt-radius) !important; }
#settings-navigation li a:hover { background: var(--gt-pink) !important; }
#settings-navigation li.active a,
#settings-navigation li.selected a,
.listitem.selected, .listitem.preferences:hover {
  background: var(--gt-red-bright) !important;
  color: var(--gt-paper) !important;
  font-weight: 700 !important;
}

/* no blanket border recolouring on focus (it drew boxes on contenteditable fields) */


/* border colours: elastic's pale blue separators -> warm paper tones */
#settings-navigation li, #settings-navigation li a,
.listitem, .listitem *,
.navlist li, .navlist td,
.listing td, .listing th,
.propform fieldset, .formcontent fieldset,
.ui-widget-content { border-color: var(--gt-paper-alt) !important; }
#settings-navigation li.active,
#settings-navigation li.active a,
.listitem.selected { border-color: var(--gt-red-deep) !important; }


/* message toolbar lives inside #layout-content - keep it ink, not link-red */
#layout-content .header a,
#layout-content .header .button,
#layout-content .toolbar a,
#layout-content .toolbar .button { color: var(--gt-ink) !important; }
#layout-content .header a:hover,
#layout-content .toolbar a:hover { background: var(--gt-pink) !important; }


/* last stubborn case: toolbar labels inside #layout-content */
#layout-content .header a,



/* ============ mail page: reported issues ============ */

/* 1. logo block had its own border, doubling the rail edge */
#layout-menu .popover-header {
  border-right: 0 !important;
  border-bottom: 1px solid var(--gt-paper) !important;
  box-shadow: none !important;
}
#layout-menu { border-right: 2px solid var(--gt-ink) !important; }

/* 2. one continuous divider across the whole top bar (incl. Refresh) */
#toolbar-menu, ul.menu.toolbar, .menu.toolbar {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
#toolbar-menu li, ul.menu.toolbar li {
  border-bottom: 0 !important;
}
.header, #messagelist-header, #layout-list > .header, #layout-sidebar > .header {
  border-bottom: 2px solid var(--gt-ink) !important;
}

/* 5. keep the header above the list so hover never covers the divider */
#messagelist-header, #layout-list > .header, #layout-sidebar > .header {
  position: relative !important;
  z-index: 5 !important;
  background: var(--gt-paper) !important;
}

/* 3. status/attachment icons in the list are still elastic grey */
.msgicon, .listing .msgicon, .listing .icon,
.listing span.status, .listing span.attachment,
.listing .threads .icon, .listing .flags .icon {
  filter: grayscale(1) brightness(.25) !important;
  opacity: .85 !important;
}
.listing tr.selected .msgicon,
.listing tr.selected .icon { filter: brightness(0) invert(1) !important; opacity: .95 !important; }

/* 4. sender + date: darker, readable on cream */
.listing td .rcmContactAddress,
.listing td .date,
.listing td .size,
.listing td.from,
.listing td.date,
.listing td.size,
.fromto, .fromto .rcmContactAddress {
  color: var(--gt-muted) !important;
}


/* 6. scrollbars: kill elastic's blue, use warm palette */
* {
  scrollbar-color: var(--gt-dim) var(--gt-paper-alt) !important;
  scrollbar-width: thin !important;
}
::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
::-webkit-scrollbar-track { background: var(--gt-paper-alt) !important; }
::-webkit-scrollbar-thumb {
  background: var(--gt-dim) !important;
  border: 0 !important;
  border-radius: 0 !important;
}
::-webkit-scrollbar-thumb:hover { background: var(--gt-red-bright) !important; }
::-webkit-scrollbar-corner { background: var(--gt-paper-alt) !important; }


/* the app rail still shows the stock blue Roundcube mark */
#layout-menu img#logo,
#logo { filter: grayscale(1) brightness(.4) sepia(1) saturate(7) hue-rotate(312deg) !important; }


/* ---- corrections from visual review ---- */

/* 2. short secondary bar: only under the toolbar buttons, extended to Refresh */
#messagelist-header, #layout-list > .header {
  border-bottom: 0 !important;
}
#toolbar-list-menu, ul#toolbar-list-menu,
#toolbar-menu, ul#toolbar-menu,
#rcmbtn108, a.refresh {
  border-bottom: 2px solid var(--gt-ink) !important;
}

/* 4. sender + date: black, like the rest of the text */
.listing td .rcmContactAddress,
.listing td .date, .listing td .size,
.listing td.from, .listing td.date, .listing td.size,
.fromto, .fromto .rcmContactAddress,
.listing td.subject, .listing td.subject a {
  color: var(--gt-ink) !important;
}

/* 3. message-list status icons: force ink, no grey */
.msgicon, .msgicon:before, .msgicon:after,
.listing .msgicon, .listing .flags .icon,
.listing .attachment, .listing .status {
  color: var(--gt-ink) !important;
  filter: grayscale(1) brightness(0) !important;
  opacity: 1 !important;
}
.listing tr.selected .msgicon,
.listing tr.selected .attachment {
  filter: brightness(0) invert(1) !important;
}

/* 5. search bar stays above the list; hover can never paint over it */
#mailsearchform, #searchfilter, .searchbar {
  position: relative !important;
  z-index: 20 !important;
}
#layout-list .scroller { padding-top: 2px !important; }


/* ---- precise fixes from markup ---- */

/* no gap between the toolbar bar and the Refresh bar */
#toolbar-list-menu, ul#toolbar-list-menu { margin-right: -1px !important; }
#rcmbtn108, a.refresh { margin-left: -1px !important; }

/* header titles (Reply-To, From, To ...) -> ink */
td.header-title, th.header-title, .header-title td,
.headers-table .header-title, .headers-table td.header-title {
  color: var(--gt-ink) !important;
  font-weight: 600 !important;
}


/* flag glyph is a font icon on ::before -> colour it, never filter it
   (filter broke the click target; color does not affect hit-testing) */
.listing td.flags .flag span::before,
.listing td.flags .flag::before {
  color: var(--gt-red-bright) !important;
}
.listing tr.selected td.flags .flag span::before,
.listing tr.selected td.flags .flag::before {
  color: var(--gt-paper) !important;
}


/* 1px blue-grey divider at the list edge (elastic default border colour) */
#layout-list, #layout-list .scroller, #messagelist, .listing,
.column-resizer, #layout-list .listbox {
  border-color: var(--gt-paper-alt) !important;
}
.column-resizer:hover { background: var(--gt-red-bright) !important; }


/* selected row: every text element goes cream (subject/date/size/sender) */
.listing tbody tr.selected td,
.listing tbody tr.selected td *,
.listing tbody tr.selected .rcmContactAddress,
.listing tbody tr.selected .date,
.listing tbody tr.selected .size,
.listing tbody tr.selected .fromto,
.listing tbody tr.selected td.subject,
.listing tbody tr.selected td.subject a {
  color: var(--gt-paper) !important;
}


/* unread dot + paperclip: use color, not filter, so it can be cream on red */
.listing .msgicon, .listing .attachment,
.listing .msgicon * , .listing .attachment * {
  filter: none !important;
}
.listing .msgicon::before, .listing .attachment::before,
.listing .msgicon, .listing .attachment {
  color: var(--gt-ink) !important;
}
.listing tr.selected .msgicon::before,
.listing tr.selected .attachment::before,
.listing tr.selected .msgicon,
.listing tr.selected .attachment {
  color: var(--gt-paper) !important;
}


/* beat the earlier invert filter with matching specificity */
.listing tr.selected .msgicon,
.listing tr.selected .attachment,
.listing tr.selected .msgicon::before,
.listing tr.selected .attachment::before {
  filter: none !important;
  color: var(--gt-paper) !important;
}


/* ============ interactions + quote rendering ============ */

/* toolbar bar as an overlay so hover backgrounds can't paint over it */
#toolbar-list-menu, ul#toolbar-list-menu,
#toolbar-menu, ul#toolbar-menu,
#rcmbtn108, a.refresh {
  position: relative !important;
  border-bottom: 0 !important;
}
#toolbar-list-menu::after, ul#toolbar-list-menu::after,
#rcmbtn108::after, a.refresh::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 2px !important;
  background: var(--gt-ink) !important;
  z-index: 6 !important;
  pointer-events: none !important;
}

/* the right-hand toolbar (Reply/Forward/Delete/Mark/More) used elastic's dark hover */
#toolbar-menu a, ul#toolbar-menu a, .toolbar-button,
#layout-content .header a, #layout-content .header .button {
  background: transparent !important;
  color: var(--gt-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
}
#toolbar-menu a:hover, ul#toolbar-menu a:hover,
#toolbar-menu li:hover > a, ul#toolbar-menu li:hover > a,
.toolbar-button:hover, .toolbar-button:focus,
#layout-content .header a:hover, #layout-content .header .button:hover {
  background: var(--gt-pink) !important;
  color: var(--gt-ink) !important;
}

/* clicking Refresh drew a red focus ring on both sides */
#toolbar-menu a:focus, ul#toolbar-menu a:focus,
#toolbar-list-menu a:focus, ul#toolbar-list-menu a:focus,
.toolbar-button:focus, .button.icon:focus,
#layout-content .header a:focus, #layout-content .header .button:focus {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}


/* disabled toolbar buttons: subtle, not a dark grey block */
#toolbar-menu a[aria-disabled="true"], ul#toolbar-menu a[aria-disabled="true"],
#toolbar-list-menu a[aria-disabled="true"], ul#toolbar-list-menu a[aria-disabled="true"],
#layout-content .header a[aria-disabled="true"],
#layout-content .header .button[aria-disabled="true"],
.toolbar-button[aria-disabled="true"],
.button[aria-disabled="true"],
a.disabled {
  background: transparent !important;
  color: var(--gt-dim) !important;
  opacity: .55 !important;
  border: 0 !important;
  box-shadow: none !important;
}
#toolbar-menu a[aria-disabled="true"]:hover,
#layout-content .header a[aria-disabled="true"]:hover,
a.disabled:hover {
  background: transparent !important;
  cursor: default !important;
}


/* icon tinting must not use filter on .inner/.icon: the filter paints a grey slab
   over hover backgrounds. Icons are font glyphs, so colour them instead. */
#layout .button.icon .inner,
#layout .toolbar-button .inner,
#layout .menu .inner,
#taskmenu a .inner,
#layout-content .icon,
#layout-content .inner,
.folderlist .icon,
.toolbar .icon,
.listing .icon,
.button .inner {
  filter: none !important;
  opacity: 1 !important;
}
#layout .button.icon,
#layout .toolbar-button,
#layout .menu a,
#taskmenu a,
.folderlist a,
.toolbar a {
  color: var(--gt-ink) !important;
}
#layout-menu a, #layout-menu .button, #layout-menu .icon { color: var(--gt-ink) !important; }


/* icons are font glyphs: colour them, never filter them (filter painted a slab
   over hover backgrounds and broke the flag click) */
#layout .button.icon, #layout .button.icon .inner,
#layout .toolbar-button, #layout .toolbar-button .inner,
#layout .menu a, #layout .menu a .inner,
#taskmenu a, #taskmenu a .inner,
#toolbar-menu a, #toolbar-list-menu a,
.toolbar a, .toolbar .button,
#layout-content .header a, #layout-content .header a *,
.folderlist a, .listing .icon {
  color: var(--gt-ink) !important;
  filter: none !important;
}


/* disabled toolbar buttons: neutral grey icon, no pink wash */
#toolbar-menu a[aria-disabled="true"], ul#toolbar-menu a[aria-disabled="true"],
#toolbar-list-menu a[aria-disabled="true"], ul#toolbar-list-menu a[aria-disabled="true"],
#layout-content .header a[aria-disabled="true"],
#layout-content .header .button[aria-disabled="true"],
.toolbar-button[aria-disabled="true"],
a.disabled, a.disabled .inner {
  background: transparent !important;
  color: #9a9a9a !important;
  opacity: 1 !important;
  border: 0 !important;
  box-shadow: none !important;
}
#toolbar-menu a[aria-disabled="true"]:hover,
#toolbar-list-menu a[aria-disabled="true"]:hover,
#layout-content .header a[aria-disabled="true"]:hover,
a.disabled:hover {
  background: transparent !important;
  color: #9a9a9a !important;
  cursor: default !important;
}

/* split buttons (Reply all / Forward): hovering either half pinks both halves */
#toolbar-menu li > span.dropbutton:hover > a,
#toolbar-menu li > span.dropbutton > a:hover,
#toolbar-list-menu li > span.dropbutton:hover > a,
#toolbar-list-menu li > span.dropbutton > a:hover,
li > span.dropbutton:hover > a.dropbutton,
li > span.dropbutton > a.dropbutton:hover {
  background: var(--gt-pink) !important;
  color: var(--gt-ink) !important;
}


/* when the split button is disabled, grey its dropdown arrow too */
#toolbar-menu li > span.dropbutton:has(> a[aria-disabled="true"]) > a.dropdown,
#toolbar-list-menu li > span.dropbutton:has(> a[aria-disabled="true"]) > a.dropdown,
#toolbar-menu li > span.dropbutton:has(> a.disabled) > a.dropdown {
  color: #9a9a9a !important;
  background: transparent !important;
}
#toolbar-menu li > span.dropbutton:has(> a[aria-disabled="true"]):hover > a,
#toolbar-menu li > span.dropbutton:has(> a.disabled):hover > a {
  background: transparent !important;
}


/* only :hover paints pink - focus, .active and open menus stay clean */
#toolbar-menu a:focus, #toolbar-menu a.active, #toolbar-menu a.dropdown.active,
#toolbar-menu span.dropbutton.active > a,
#toolbar-menu span.dropbutton > a:focus,
#toolbar-list-menu a:focus, #toolbar-list-menu a.active,
#toolbar-list-menu span.dropbutton.active > a {
  background: transparent !important;
  color: var(--gt-ink) !important;
}
#toolbar-menu a:focus:hover, #toolbar-menu a.dropdown.active:hover,
#toolbar-menu span.dropbutton.active:hover > a,
#toolbar-list-menu a:focus:hover, #toolbar-list-menu span.dropbutton.active:hover > a {
  background: var(--gt-pink) !important;
}


/* the column resizer becomes full-screen while dragging: never paint it */
.column-resizer, .column-resizer:hover, .column-resizer.active,
.column-resizer.ui-draggable-dragging {
  background: transparent !important;
  background-color: transparent !important;
}
.column-resizer:hover { box-shadow: inset 2px 0 0 var(--gt-red-bright) !important; }

/* popup menus + jQuery-UI dialogs (Options / About) were still stock white */
.popupmenu, .popupmenu .menu, .popupmenu ul, .popupmenu ol,
.ui-dialog, .ui-dialog .ui-dialog-content, .ui-dialog .ui-widget-content,
.ui-widget, .ui-widget-content, .ui-menu, .ui-menu .ui-menu-item,
.dropmenu, .popover {
  background: var(--gt-paper) !important;
  background-image: none !important;
  color: var(--gt-ink) !important;
  border-color: var(--gt-ink) !important;
}
.popupmenu, .ui-dialog {
  border: 2px solid var(--gt-ink) !important;
  border-radius: var(--gt-radius) !important;
  box-shadow: var(--gt-shadow) !important;
}
.ui-dialog .ui-dialog-titlebar {
  background: var(--gt-paper-alt) !important;
  color: var(--gt-ink) !important;
  border-bottom: 2px solid var(--gt-ink) !important;
}
.ui-dialog .ui-dialog-buttonpane {
  background: var(--gt-paper) !important;
  border-top: 1px solid var(--gt-paper-alt) !important;
}
.popupmenu a, .ui-menu li a, .ui-dialog a, .popupmenu h3,
.ui-dialog .ui-dialog-title, .popupmenu .header-title {
  color: var(--gt-ink) !important;
  background: transparent !important;
}
.popupmenu a:hover, .ui-menu li a:hover, .ui-menu .ui-state-focus,
.ui-menu .ui-state-active, .ui-dialog a:hover {
  background: var(--gt-pink) !important;
  color: var(--gt-ink) !important;
}
.popupmenu .menu .active > a, .ui-menu .ui-state-active { font-weight: 700 !important; }


/* separators inside popups/dialogs were still elastic's pale blue */
.popupmenu li, .popupmenu .menu li, .popupmenu table td, .popupmenu table th,
.popupmenu .listing td, .ui-menu .ui-menu-item, .ui-menu li,
.ui-dialog table td, .ui-dialog table th, .ui-dialog tr,
.ui-dialog .propform li, .ui-dialog .formcontent li {
  border-color: var(--gt-paper-alt) !important;
}
.ui-dialog table, .ui-dialog table td, .ui-dialog table th { background: transparent !important; }


/* modal backdrop: warm instead of slate grey */
.ui-widget-overlay, .ui-front.ui-widget-overlay {
  background: rgba(26, 11, 11, .35) !important;
  opacity: 1 !important;
}

/* dialog text: ink, with muted only for secondary meta */
.ui-dialog, .ui-dialog p, .ui-dialog li, .ui-dialog td, .ui-dialog th,
.ui-dialog .ui-dialog-content, .ui-dialog strong, .ui-dialog h3 {
  color: var(--gt-ink) !important;
}
.ui-dialog .meta, .ui-dialog small, .ui-dialog .secondary-text {
  color: var(--gt-dim) !important;
}

/* inputs/dialogs: focus highlight only for keyboard users */
input:focus:not(:focus-visible), textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible), [contenteditable]:focus:not(:focus-visible) {
  outline: none !important;
}


/* text fields: no hard focus ring (it showed on the compose recipient field) */
input:focus, textarea:focus, select:focus,
[contenteditable]:focus, .recipient-input:focus, #_to:focus,
.form-control:focus, .custom-control-input:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(224, 49, 49, .15) !important;
  border-color: var(--gt-red-bright) !important;
}


/* no focus rings anywhere - mouse-only user */
*:focus, *:focus-visible, *:focus-within,
a:focus, a:focus-visible, button:focus, button:focus-visible,
input:focus, input:focus-visible, textarea:focus, textarea:focus-visible,
select:focus, select:focus-visible, [tabindex]:focus, [tabindex]:focus-visible,
[contenteditable]:focus, [contenteditable]:focus-visible,
.taskmenu a:focus, #layout-menu a:focus, .button:focus, .button:focus-visible {
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none !important;
}

/* text fields: neutral border on focus, no red */
input:focus, textarea:focus, select:focus, .form-control:focus,
[contenteditable]:focus, #_to:focus, .recipient-input:focus {
  border-color: var(--gt-ink) !important;
  box-shadow: none !important;
  outline: none !important;
}


/* About > plugin table: cells were inheriting elastic's grey */
#pluginlist, #pluginlist *,
#pluginlist th, #pluginlist td, #pluginlist thead th, #pluginlist tbody td,
#pluginlist a, #pluginlist code,
.records-table, .records-table th, .records-table td, .records-table thead th {
  color: var(--gt-ink) !important;
  background: transparent !important;
}
#pluginlist th, #pluginlist thead th { font-weight: 700 !important; }
#pluginlist a { color: var(--gt-red-bright) !important; }


/* dropdowns: light card + soft shadow, not a heavy black frame */
.popupmenu, .popupmenu .menu, .popupmenu ul, .popupmenu ol,
.ui-menu, .ui-menu .ui-menu-item, .dropmenu, .popover,
.menu.dropdown, .dropdown-menu {
  border: 1px solid rgba(26, 11, 11, .12) !important;
  border-radius: var(--gt-radius) !important;
  box-shadow: 0 6px 18px rgba(26, 11, 11, .18) !important;
}
.popupmenu li, .ui-menu li, .ui-menu .ui-menu-item {
  border: 0 !important;
  border-bottom: 1px solid var(--gt-paper-alt) !important;
}
.popupmenu li:last-child, .ui-menu li:last-child { border-bottom: 0 !important; }


/* dropdowns: hard offset shadow on two sides (site style), no full border */
.popupmenu, .popupmenu .menu, .popupmenu ul, .popupmenu ol,
.ui-menu, .dropmenu, .popover, .menu.dropdown, .dropdown-menu {
  border: 0 !important;
  border-radius: var(--gt-radius) !important;
  box-shadow: 5px 5px 0 var(--gt-ink) !important;
  background: var(--gt-paper) !important;
  overflow: visible !important;
}


/* dropdowns: 2px ink outline + hard offset shadow (same as the search field) */
.popupmenu, .popupmenu .menu, .popupmenu ul, .popupmenu ol,
.ui-menu, .dropmenu, .popover, .menu.dropdown, .dropdown-menu {
  border: 2px solid var(--gt-ink) !important;
  border-radius: var(--gt-radius) !important;
  box-shadow: 4px 4px 0 var(--gt-ink) !important;
}


/* only the outermost popup draws the frame */
.popupmenu .menu, .popupmenu ul, .popupmenu ol, .popupmenu li,
.popupmenu table, .popupmenu .listing, .popupmenu .header,
.ui-menu .ui-menu, .ui-menu ul, .dropmenu ul, .popover .menu,
.dropdown-menu .menu {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.popupmenu, .ui-menu, .dropmenu, .popover, .menu.dropdown, .dropdown-menu {
  border: 2px solid var(--gt-ink) !important;
  box-shadow: 4px 4px 0 var(--gt-ink) !important;
  background: var(--gt-paper) !important;
}


/* bootstrap .popover wraps .popupmenu - the wrapper must not draw a second frame */
.popover:has(.popupmenu), .popover:has(.popupmenu) .popover-inner,
.popover:has(.popupmenu) .popover-body, .popover:has(.popupmenu) .arrow {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.popover:has(.popupmenu) .arrow::before,
.popover:has(.popupmenu) .arrow::after { display: none !important; }


/* the visible frame belongs to the outer bootstrap popover wrapper */
.popover:has(.popupmenu) {
  border: 2px solid var(--gt-ink) !important;
  border-radius: var(--gt-radius) !important;
  box-shadow: 4px 4px 0 var(--gt-ink) !important;
  background: var(--gt-paper) !important;
  padding: 0 !important;
}
.popover:has(.popupmenu) .popover-inner,
.popover:has(.popupmenu) .popover-body,
.popover:has(.popupmenu) .popupmenu,
.popover:has(.popupmenu) .popupmenu .menu,
.popover:has(.popupmenu) .popupmenu ul {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.popover:has(.popupmenu) .arrow::before,
.popover:has(.popupmenu) .arrow::after { display: none !important; }


/* dialog buttons need the same hard shadow (jQuery UI theme flattens them) */
.ui-dialog button, .ui-dialog .btn, .ui-dialog .btn-primary,
.ui-dialog .btn-secondary, .ui-dialog .cancel, .ui-dialog .mainaction,
.ui-dialog .ui-dialog-buttonpane button {
  border: 2px solid var(--gt-ink) !important;
  border-radius: var(--gt-radius) !important;
  box-shadow: 4px 4px 0 var(--gt-ink) !important;
  background-image: none !important;
}
.ui-dialog .btn-primary, .ui-dialog .mainaction {
  background-color: var(--gt-red-bright) !important;
  color: var(--gt-paper) !important;
}
.ui-dialog .btn-secondary {
  background-color: var(--gt-gold) !important;
  color: var(--gt-ink) !important;
}
.ui-dialog button:hover { box-shadow: 2px 2px 0 var(--gt-ink) !important; transform: translate(2px,2px); }


/* the flagged icon in the subject row used the muted brown; match the flags column */
.listing span.flagged, .listing span.flagged::before,
.listing td.subject .flagged, .listing td.subject .flagged::before,
.listing .msgicon.flagged, .listing .msgicon.flagged::before {
  color: var(--gt-red-bright) !important;
}
.listing tr.selected span.flagged,
.listing tr.selected span.flagged::before,
.listing tr.selected .msgicon.flagged::before {
  color: var(--gt-paper) !important;
}


/* red buttons must keep cream label (the message-view link rule was leaking) */
button.btn-primary, .btn-primary, .mainaction,
#layout-content button.btn-primary, #layout-content .mainaction,
#login-form button, #rcmloginsubmit, .formbuttons button.btn-primary,
body.task-login .submit {
  color: var(--gt-paper) !important;
}
button.btn-secondary, .btn-secondary,
#layout-content button.btn-secondary {
  color: var(--gt-ink) !important;
}


/* folder list left indicator was elastic's light blue */
#mailboxlist li a, .folderlist li a, #mailboxlist li > a {
  border-left-color: transparent !important;
}
#mailboxlist li a:hover, .folderlist li a:hover {
  border-left-color: var(--gt-red-bright) !important;
}
#mailboxlist li.selected a, .folderlist li.selected a,
#mailboxlist li.active a, .folderlist li.active a {
  border-left-color: var(--gt-paper) !important;
}
/* same indicator exists in settings nav */
#settings-navigation li a, .navlist li a { border-left-color: transparent !important; }
#settings-navigation li.active a { border-left-color: var(--gt-paper) !important; }


/* same left-indicator treatment for the app rail (Compose/Mail/Contacts/Settings)
   using an inset shadow so nothing shifts by 2px */
#layout-menu a, #layout-menu .button,
#taskmenu a, #taskmenu .button {
  box-shadow: inset 2px 0 0 transparent !important;
}
#layout-menu a:hover, #taskmenu a:hover {
  box-shadow: inset 2px 0 0 var(--gt-red-bright) !important;
}
#layout-menu a.selected, #layout-menu a.active,
#taskmenu a.selected, #taskmenu a.active {
  box-shadow: inset 2px 0 0 var(--gt-ink) !important;
}
#layout-menu a::before, #taskmenu a::before,
#layout-menu a::after, #taskmenu a::after {
  background-color: transparent !important;
  border-color: transparent !important;
}


/* resizer indicator on the far edge so the adjacent scrollbar can't merge with it */
.column-resizer:hover { box-shadow: inset -2px 0 0 var(--gt-red-bright) !important; }
.column-resizer.active { box-shadow: inset -2px 0 0 var(--gt-red-bright) !important; }

/* slimmer, lighter scrollbar so it reads as chrome, not a divider */
::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
* { scrollbar-width: thin !important; }


/* elastic draws 2px vertical borders on table cells; two adjacent cells = doubled line */
.listing td, .listing th,
.listing td.selection, .listing td.subject, .listing td.flags,
.listing td.from, .listing td.date, .listing td.size,
.listing thead th, .listing tbody td {
  border-left-width: 0 !important;
  border-right-width: 0 !important;
  border-left-style: none !important;
  border-right-style: none !important;
}
/* keep only the horizontal row separators */
.listing tbody tr, .listing tbody td {
  border-bottom: 1px solid var(--gt-paper-alt) !important;
}
.listing tbody tr:last-child td { border-bottom: 0 !important; }


/* sweep fixes: settings checkboxes, list-info text, addressbook link bg */
input[type="checkbox"], input[type="radio"],
.form-check-input, .custom-control-input {
  accent-color: var(--gt-red-bright) !important;
  border-color: var(--gt-ink) !important;
  background-color: #fffdf7 !important;
}

div.listing-info, .listing-info, .list-info,
.settings-listing-info, .contacts-listing-info {
  color: var(--gt-muted) !important;
}

#directorylist a, .directorylist a, .contactlist a, .contacts a,
#addressbook a, .addressbook a, .contactlist li a {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--gt-ink) !important;
  border-color: var(--gt-paper-alt) !important;
}
#directorylist a:hover, .contactlist a:hover, #addressbook a:hover {
  background: var(--gt-pink) !important;
}


/* ---- address book / contacts task ---- */
#layout-sidebar li.addressbook,
#layout-sidebar li.group,
#layout-sidebar li.contactgroup {
  border-bottom: 1px solid var(--gt-paper-alt) !important;
  background: transparent !important;
  color: var(--gt-ink) !important;
}
#layout-sidebar li.addressbook a,
#layout-sidebar li.group a,
#layout-sidebar li.contactgroup a {
  color: var(--gt-ink) !important;
  background: transparent !important;
  border: 0 !important;
}
#layout-sidebar li.addressbook a:hover,
#layout-sidebar li.group a:hover,
#layout-sidebar li.contactgroup a:hover {
  background: var(--gt-pink) !important;
}
#layout-sidebar li.addressbook.selected,
#layout-sidebar li.addressbook.active,
#layout-sidebar li.addressbook.selected a,
#layout-sidebar li.addressbook.active a,
#layout-sidebar li.group.selected a,
#layout-sidebar li.contactgroup.selected a {
  background: var(--gt-red-bright) !important;
  color: var(--gt-paper) !important;
  font-weight: 700 !important;
  border-color: var(--gt-red-deep) !important;
}

/* contacts table rows */
.contactlist td, .contacts-table td, .contactlist th, .contacts-table th,
#contacts-table td, #contacts-table th {
  border-color: var(--gt-paper-alt) !important;
  color: var(--gt-ink) !important;
}
.contactlist tbody tr:hover, #contacts-table tbody tr:hover { background: var(--gt-pink) !important; }
.contactlist tbody tr.selected td, #contacts-table tbody tr.selected td {
  background: var(--gt-red-bright) !important;
  color: var(--gt-paper) !important;
}