/* ===========================================================================
   InstantNode — webmail theme for Roundcube Elastic (dark only)
   ---------------------------------------------------------------------------
   Customers reach this straight from the dashboard, so it has to read as the
   same product: the panel's "instrumentation" direction — a quiet chassis with
   bright data on it.

   THIRD PASS — full coverage. Elastic ships 26 templates; the earlier passes
   only really dressed four of them (login, mail list, message, dialogs), so
   compose, contacts, settings, folders, identities and the editor still looked
   like stock Roundcube. This file now walks every screen.

   THE RULES IT FOLLOWS

   1. Borders only around cards, never around rows. A list of twenty messages
      should not be twenty-one lines. Structure comes from space and from the
      few dividers that mark real boundaries.
   2. The accent marks exactly ONE thing: the current selection. Hover is
      neutral — "you are pointing here" is a different statement from "this is
      selected". Unread is brightness, not another colour.
   3. Monospace is for data you scan down (dates, sizes, quotas), not for prose.
   4. Elevation only where something genuinely floats above the page.

   WHAT IT DELIBERATELY DOES NOT TOUCH

   No `display`, `position`, `float`, or width/height on structural elements.
   Roundcube's layout is wired to its JavaScript — it measures and moves these
   panes at runtime. This file only paints and spaces, which is why a redesign
   this broad is still safe to ship.

   WHY IT IS AN OVERRIDE AND NOT A THEME

   Elastic has no theme variables: six custom properties, all for button/icon
   internals, and every dark colour LESS-compiled into ~322 `html.dark-mode`
   rules. There is nothing to remap, so this restates real selectors and loads
   LAST (see layout.html). One exception it cannot win by order: jQuery UI's
   stylesheet is injected AFTER this one, so `.ui-*` rules here carry
   `!important` on purpose.

   Values mirror Hosting-Panel-v2b/web/app/assets/css/tokens.css
   =========================================================================== */

:root {
  /* Brand tokens — the same set the site and the panel use. */
  --void:      #060606;
  --panel:     #0b0b0c;
  --panel-2:   #0e0e10;
  --line:      rgb(255 255 255 / 0.08);
  --line-soft: rgb(255 255 255 / 0.05);
  --ink:       #f2f1ee;
  --mute:      #8f8e89;
  --dim:       #5c5b57;
  --ember:     #3b82f6;
  --cyan:      #22d3ee;
  --violet:    #8b5cf6;
  --rose:      #ff2f7b;
  --grad: linear-gradient(90deg, var(--cyan), var(--ember) 52%, var(--violet));

  /* Everything below is the brand set wearing Roundcube-shaped names, so the
     rules further down never have to know a literal colour. */
  --inn-bg:             var(--void);
  --inn-surface:        var(--panel);
  --inn-card:           var(--panel-2);
  --inn-input:          var(--panel);
  --inn-border:         var(--line);
  --inn-border-bright:  rgb(255 255 255 / 0.14);

  --inn-accent:         var(--ember);
  --inn-accent-hover:   #2563eb;

  --inn-text:           var(--ink);
  --inn-text-secondary: var(--mute);
  --inn-text-muted:     var(--dim);

  --inn-success:        #22c55e;
  --inn-danger:         var(--rose);
  --inn-warning:        #fbbf24;

  --inn-radius-sm: 6px;
  --inn-radius-md: 8px;
  --inn-radius-lg: 10px;

  --inn-focus: 0 0 0 2px rgb(59 130 246 / 0.25);
  --inn-transition: 160ms cubic-bezier(0.2, 0, 0, 1);

  --inn-sans: 'Satoshi', 'Proxima Vara', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --inn-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── type ────────────────────────────────────────────────────────────────── */
html.dark-mode,
html.dark-mode body,
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode button {
  font-family: var(--inn-sans);
  -webkit-font-smoothing: antialiased;
}

/* Reserved for the columns you scan down. */
html.dark-mode .messagelist td.date,
html.dark-mode .messagelist td.size,
html.dark-mode .messagelist span.date,
html.dark-mode #messagelist td.date,
html.dark-mode .quota-info,
html.dark-mode .attachment-size,
html.dark-mode .pagenav .countdisplay {
  font-family: var(--inn-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  letter-spacing: -0.01em;
}

html.dark-mode .messagelist td.subject { font-size: 13.5px; }
html.dark-mode .messagelist td.fromto,
html.dark-mode .messagelist span.fromto { font-size: 12.5px; }

/* ── chassis ─────────────────────────────────────────────────────────────── */
html.dark-mode,
html.dark-mode body,
html.dark-mode #layout,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #layout-menu,
html.dark-mode #layout-frames {
  background-color: var(--inn-bg) !important;
  color: var(--inn-text);
}

html.dark-mode #layout-sidebar,
html.dark-mode #layout-list {
  border-right: 1px solid var(--inn-border) !important;
  border-left: 0 !important;
}

/* Headers and footers read as headers through space and weight, the way the
   panel's card headers do — not through a filled band. */
html.dark-mode .header,
html.dark-mode .footer,
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer,
html.dark-mode .boxtitle {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--inn-text);
}

html.dark-mode .header { padding-left: 14px !important; padding-right: 10px !important; }

html.dark-mode .header .header-title,
html.dark-mode .header > .username,
html.dark-mode .boxtitle {
  color: var(--inn-text);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.01em;
}

/* ── task rail ───────────────────────────────────────────────────────────── */
html.dark-mode #taskmenu {
  background-color: var(--inn-bg) !important;
  border-right: 1px solid var(--inn-border) !important;
}

html.dark-mode #taskmenu a {
  color: var(--inn-text-secondary) !important;
  border: 0 !important;
  background-color: transparent !important;
  transition: color var(--inn-transition);
}

html.dark-mode #taskmenu a:hover { color: var(--inn-text) !important; background-color: transparent !important; }

html.dark-mode #taskmenu a.selected {
  color: var(--inn-accent) !important;
  background-color: transparent !important;
  box-shadow: inset 2px 0 0 0 var(--inn-accent);
}

html.dark-mode #taskmenu a.logout { color: var(--inn-text-secondary) !important; }
html.dark-mode #taskmenu a.logout:hover { color: var(--inn-danger) !important; }

/* Dark is forced in layout.html; a toggle that cannot do what it says is worse
   than no toggle. */
html.dark-mode #taskmenu a.theme { display: none !important; }

/* ── lists: folders, messages, contacts, settings ────────────────────────── */
html.dark-mode .listing li,
html.dark-mode .listing li > a,
html.dark-mode .listing tr,
html.dark-mode .listing td,
html.dark-mode table.listing td,
html.dark-mode .messagelist tr,
html.dark-mode .messagelist td,
html.dark-mode #messagelist tr,
html.dark-mode #messagelist td,
html.dark-mode .contactlist li,
html.dark-mode .contactlist td,
html.dark-mode .table-widget tr,
html.dark-mode .table-widget td {
  background-color: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-color: transparent !important;
}

html.dark-mode .listing li a,
html.dark-mode .listing tr td a,
html.dark-mode .messagelist td,
html.dark-mode .contactlist li a {
  color: var(--inn-text-secondary) !important;
}

/* Without rules doing the separating, the spacing has to. */
html.dark-mode .listing li > a,
html.dark-mode .folderlist li > a,
html.dark-mode .contactlist li > a {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
  line-height: 1.45 !important;
}

html.dark-mode .messagelist td,
html.dark-mode #messagelist td {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  line-height: 1.5 !important;
}

html.dark-mode .listing li:hover,
html.dark-mode .listing li > a:hover,
html.dark-mode .listing tr:hover,
html.dark-mode .messagelist tr:hover,
html.dark-mode .messagelist tr:hover td,
html.dark-mode .contactlist li:hover,
html.dark-mode .table-widget tr:hover {
  background-color: var(--inn-surface) !important;
}

html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing tr.selected,
html.dark-mode .listing tr.selected td,
html.dark-mode .messagelist tr.selected,
html.dark-mode .messagelist tr.selected td,
html.dark-mode .messagelist tr.focused td,
html.dark-mode .contactlist li.selected,
html.dark-mode .table-widget tr.selected {
  background-color: var(--inn-surface) !important;
  color: var(--inn-text) !important;
}

/* One bar per row: on the link, which is the element that carries the row
   padding. Putting it on the li as well drew a second, taller bar over the
   first - two edges a pixel apart, which is worse than none. */
html.dark-mode .listing li.selected > a,
html.dark-mode .contactlist li.selected > a,
html.dark-mode .listing tr.selected td:first-child,
html.dark-mode .messagelist tr.selected td:first-child,
html.dark-mode .messagelist tr.focused td:first-child,
html.dark-mode .table-widget tr.selected td:first-child {
  box-shadow: inset 2px 0 0 0 var(--inn-accent);
}

html.dark-mode .listing li.selected,
html.dark-mode .contactlist li.selected,
html.dark-mode .folderlist li.selected { box-shadow: none !important; }

html.dark-mode .listing li.selected > a,
html.dark-mode .listing tr.selected td a,
html.dark-mode .messagelist tr.selected td a,
html.dark-mode .contactlist li.selected > a { color: var(--inn-text) !important; }

html.dark-mode .messagelist tr.unread td,
html.dark-mode .messagelist tr.unread td a,
html.dark-mode .listing li.unread > a { color: var(--inn-text) !important; font-weight: 500; }

html.dark-mode .messagelist tr.unread td.subject { font-weight: 600; }

/* A counter is a number, not a status. */
html.dark-mode .folderlist .unreadcount,
html.dark-mode .listing .unreadcount {
  background-color: var(--inn-surface) !important;
  color: var(--inn-text-secondary) !important;
  border-radius: 999px;
  font-family: var(--inn-mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

html.dark-mode .messagelist tr.flagged td.subject,
html.dark-mode .messagelist td.flag span.flagged { color: var(--inn-danger) !important; }

/* Section captions inside lists (Settings, folder groups). */
html.dark-mode .listing-info,
html.dark-mode .listing li.separator,
html.dark-mode .header-title.no-selection {
  background-color: transparent !important;
  color: var(--inn-text-muted) !important;
  font-family: var(--inn-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-color: transparent !important;
}

/* ── controls ────────────────────────────────────────────────────────────── */
html.dark-mode .btn-primary,
html.dark-mode button.primary,
html.dark-mode a.button.primary,
html.dark-mode .formbuttons .btn-primary,
html.dark-mode #login-form .btn-primary,
html.dark-mode input.button.mainaction,
html.dark-mode button.mainaction,
html.dark-mode .tox-button:not(.tox-button--secondary):not(.tox-button--naked) {
  background: var(--inn-accent) !important;
  border-color: var(--inn-accent) !important;
  color: #fff !important;
  border-radius: var(--inn-radius-sm) !important;
  font-weight: 600;
  transition: background var(--inn-transition);
}

html.dark-mode .btn-primary:hover,
html.dark-mode button.primary:hover,
html.dark-mode input.button.mainaction:hover,
html.dark-mode button.mainaction:hover,
html.dark-mode .tox-button:not(.tox-button--secondary):not(.tox-button--naked):hover {
  background: var(--inn-accent-hover) !important;
  border-color: var(--inn-accent-hover) !important;
}

html.dark-mode .btn-secondary,
html.dark-mode button.secondary,
html.dark-mode .formbuttons a.button:not(.primary),
html.dark-mode .tox-button--secondary {
  background: transparent !important;
  border: 1px solid var(--inn-border) !important;
  color: var(--inn-text-secondary) !important;
  border-radius: var(--inn-radius-sm) !important;
}

html.dark-mode .btn-secondary:hover,
html.dark-mode button.secondary:hover,
html.dark-mode .formbuttons a.button:not(.primary):hover,
html.dark-mode .tox-button--secondary:hover {
  border-color: var(--inn-border-bright) !important;
  background: var(--inn-surface) !important;
  color: var(--inn-text) !important;
}

html.dark-mode .btn-danger,
html.dark-mode button.delete,
html.dark-mode a.button.delete { color: var(--inn-danger) !important; }

html.dark-mode .toolbar,
html.dark-mode #messagetoolbar,
html.dark-mode .editor-toolbar {
  border-color: transparent !important;
  background-color: transparent !important;
}

html.dark-mode .toolbar a.button,
html.dark-mode .toolbar button {
  color: var(--inn-text-secondary) !important;
  border-radius: var(--inn-radius-sm);
  transition: color var(--inn-transition), background var(--inn-transition);
}

html.dark-mode .toolbar a.button:hover,
html.dark-mode .toolbar button:hover {
  color: var(--inn-text) !important;
  background-color: var(--inn-surface) !important;
}

/* One object, one look: every toolbar and menu item gets the same ink, the same
   icon size and the same box — disabled ones included. Elastic ships three
   different treatments here (plain, .disabled, .active) and they read as three
   different kinds of control. */
html.dark-mode .toolbar > a.button,
html.dark-mode .toolbar > a,
html.dark-mode .toolbar li > a,
html.dark-mode .menu.toolbar li > a,
html.dark-mode .popover .toolbar li > a,
html.dark-mode #messagetoolbar > a.button,
html.dark-mode #messagetoolbar li > a,
html.dark-mode .toolbar a.button.disabled,
html.dark-mode .toolbar a.button.active,
html.dark-mode .toolbar li > a.disabled,
html.dark-mode .toolbar li > a.active,
html.dark-mode .menu.toolbar li > a.disabled,
html.dark-mode .menu.toolbar li > a.active,
html.dark-mode .toolbar a.button[aria-disabled='true'],
html.dark-mode #messagetoolbar a.button.disabled,
html.dark-mode .toolbar a,
html.dark-mode #messagetoolbar a {
  color: var(--inn-text) !important;
  opacity: 1 !important;
  padding: 8px 10px !important;
  line-height: 1.25 !important;
  min-height: 0 !important;
  vertical-align: top !important;
}

html.dark-mode .toolbar a:before,
html.dark-mode .toolbar li > a:before,
html.dark-mode .menu.toolbar li > a:before,
html.dark-mode #messagetoolbar a:before {
  color: inherit !important;
  opacity: 1 !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  margin: 0 auto 2px !important;
}

html.dark-mode .toolbar a .inner,
html.dark-mode .toolbar li > a .inner,
html.dark-mode .menu.toolbar li > a .inner,
html.dark-mode #messagetoolbar a .inner {
  color: inherit !important;
  opacity: 1 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .form-control,
html.dark-mode #messagesearch,
html.dark-mode .searchbar input,
html.dark-mode .tox-textfield,
html.dark-mode .tox-listbox {
  background-color: var(--inn-input) !important;
  border: 1px solid var(--inn-border) !important;
  border-radius: var(--inn-radius-sm) !important;
  color: var(--inn-text) !important;
}

/* Secondary, not muted: Roundcube's search placeholder IS its label, and muted
   only reaches 2.4:1 on these surfaces. */
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder { color: var(--inn-text-secondary) !important; }

html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus,
html.dark-mode .form-control:focus,
html.dark-mode .searchbar input:focus,
html.dark-mode .tox-textfield:focus {
  border-color: var(--inn-accent) !important;
  box-shadow: var(--inn-focus) !important;
  outline: none !important;
}

html.dark-mode .form-control-plaintext { color: var(--inn-text) !important; background: transparent !important; }

/* Elastic prefixes login and search fields with an icon tile. Left alone it is
   the last grey-teal thing on the page, so it gets the same skin as the field
   it is glued to — one control, not two. */
html.dark-mode .input-group-text,
html.dark-mode .input-group-prepend .input-group-text,
html.dark-mode .input-group-append .input-group-text {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--inn-text-muted) !important;
}

html.dark-mode .input-group-text a,
html.dark-mode .input-group-text span { color: inherit !important; }

/* Toolbars, popup menus and the search bar: no outlines. Hover already says
   "you are pointing here", and a row of outlined tiles reads as a grid of
   cards that are not cards. */
html.dark-mode .toolbar,
html.dark-mode ul.toolbar,
html.dark-mode .footer.toolbar,
html.dark-mode #messagetoolbar,
html.dark-mode .toolbar li,
html.dark-mode .toolbar li > a,
html.dark-mode .menu.toolbar li > a,
html.dark-mode .popover .toolbar li > a,
html.dark-mode .popover .menu li > a,
html.dark-mode #messagetoolbar li,
html.dark-mode #messagetoolbar li > a,
html.dark-mode .toolbar a.button,
html.dark-mode .toolbar button,
html.dark-mode .popover a.button,
html.dark-mode .popover button,
html.dark-mode .menu a.button,
html.dark-mode .searchbar a.button,
html.dark-mode .searchbar button,
html.dark-mode .header a.button,
html.dark-mode .footer a.button,
html.dark-mode .pagenav a.button,
html.dark-mode a.button.icon {
  border: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

html.dark-mode .toolbar li > a:hover,
html.dark-mode .menu.toolbar li > a:hover,
html.dark-mode #messagetoolbar li > a:hover,
html.dark-mode .toolbar a.button:hover,
html.dark-mode .toolbar button:hover,
html.dark-mode .popover a.button:hover,
html.dark-mode .menu a.button:hover,
html.dark-mode .searchbar a.button:hover,
html.dark-mode .header a.button:hover,
html.dark-mode .footer a.button:hover,
html.dark-mode .pagenav a.button:hover,
html.dark-mode #messagetoolbar a.button:hover {
  background-color: var(--inn-surface) !important;
  color: var(--inn-text) !important;
}

html.dark-mode .searchbar,
html.dark-mode #layout-list .header .searchbar {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Checkboxes and the on/off switches used through Settings. */
html.dark-mode input[type='checkbox'],
html.dark-mode input[type='radio'] { accent-color: var(--inn-accent); }

html.dark-mode .custom-switch .custom-control-label::before,
html.dark-mode .form-check-input {
  background-color: var(--inn-input) !important;
  border-color: var(--inn-border-bright) !important;
}

html.dark-mode .custom-control-input:checked ~ .custom-control-label::before,
html.dark-mode .form-check-input:checked {
  background-color: var(--inn-accent) !important;
  border-color: var(--inn-accent) !important;
}

/* ── links ───────────────────────────────────────────────────────────────── */
html.dark-mode a,
html.dark-mode a:visited { color: var(--inn-accent); }
html.dark-mode a:hover { color: var(--inn-accent-hover); }

/* ── forms: settings, identities, folders, contact editing ───────────────── */
html.dark-mode .propform,
html.dark-mode .formcontent,
html.dark-mode .form-group,
html.dark-mode fieldset,
html.dark-mode .tab-pane {
  background-color: transparent !important;
  border-color: var(--inn-border) !important;
  color: var(--inn-text);
}

html.dark-mode fieldset {
  border: 1px solid var(--inn-border) !important;
  border-radius: var(--inn-radius-lg) !important;
  padding: 16px 18px !important;
  margin-bottom: 16px !important;
}

html.dark-mode legend {
  color: var(--inn-text-muted) !important;
  font-family: var(--inn-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 6px;
}

/* Field labels: the quiet half of a form row. */
html.dark-mode .propform td.title,
html.dark-mode .propform th,
html.dark-mode .form-group label,
html.dark-mode label {
  color: var(--inn-text-secondary) !important;
  font-weight: 500;
}

html.dark-mode .propform td,
html.dark-mode .propform tr {
  border-color: transparent !important;
  background-color: transparent !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

html.dark-mode .formcontent { padding: 16px 18px !important; }

/* ── tables: identities, subscriptions, responses ────────────────────────── */
html.dark-mode table.table,
html.dark-mode #identities-table,
html.dark-mode #subscription-table,
html.dark-mode .table-widget {
  background-color: transparent !important;
  border-color: var(--inn-border) !important;
  color: var(--inn-text-secondary);
}

html.dark-mode table thead th,
html.dark-mode .table thead th,
html.dark-mode #subscription-table thead th {
  background-color: transparent !important;
  border-color: var(--inn-border) !important;
  color: var(--inn-text-muted) !important;
  font-family: var(--inn-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html.dark-mode table tbody td,
html.dark-mode .table tbody td {
  border-color: transparent !important;
  color: var(--inn-text-secondary) !important;
}

/* ── tabs ────────────────────────────────────────────────────────────────── */
html.dark-mode .tabsbar,
html.dark-mode .nav-tabs {
  background-color: transparent !important;
  border-bottom: 1px solid var(--inn-border) !important;
}

html.dark-mode .tabsbar a,
html.dark-mode .nav-tabs .nav-link {
  background-color: transparent !important;
  border: 0 !important;
  color: var(--inn-text-secondary) !important;
  font-weight: 500;
  transition: color var(--inn-transition);
}

html.dark-mode .tabsbar a:hover,
html.dark-mode .nav-tabs .nav-link:hover { color: var(--inn-text) !important; }

/* The selected tab: accent and a bar, the same language as a selected row. */
html.dark-mode .tabsbar a.tablink.selected,
html.dark-mode .tabsbar a.selected,
html.dark-mode .nav-tabs .nav-link.active {
  background-color: transparent !important;
  color: var(--inn-accent) !important;
  box-shadow: inset 0 -2px 0 0 var(--inn-accent);
}

/* ── message view ────────────────────────────────────────────────────────────
   The header block is the one thing on this page that genuinely IS a card, so
   it is the one thing that keeps a fill, a border and a radius. */
/* Elastic's id is #message-header, WITH a hyphen. The rules here used to spell
   it #messageheader, so not one of them ever matched - which is why this screen
   stayed stock Roundcube while everything around it had been restyled.

   Reading order: subject, then who sent it, then the text. The sender block is
   the one card, so the avatar, the from line and the utilities read as a single
   object instead of three loose rows. */
html.dark-mode #message-header {
  background: transparent !important;
  border: 0 !important;
  padding: 16px 18px 0 !important;
}

html.dark-mode #message-header > .header {
  background-color: var(--inn-card) !important;
  border: 1px solid var(--inn-border) !important;
  border-radius: var(--inn-radius-lg) !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
  gap: 12px;
}

html.dark-mode .message-partheaders,
html.dark-mode #messagepartcontainer {
  background-color: transparent !important;
  border-color: var(--inn-border) !important;
}

html.dark-mode #message-header > h2.subject {
  color: var(--inn-text) !important;
  font-size: 19px !important;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

html.dark-mode #message-header > h2.subject a.extwin,
html.dark-mode #message-header > h2.subject a.extwin:before { color: var(--inn-text-muted) !important; }
html.dark-mode #message-header > h2.subject a.extwin:hover,
html.dark-mode #message-header > h2.subject a.extwin:hover:before { color: var(--inn-accent) !important; }

/* The avatar is context, not content: small, quiet, same corner as its card. */
html.dark-mode #message-header .contactphoto {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: var(--inn-radius-md) !important;
  border: 1px solid var(--inn-border) !important;
  background-color: var(--inn-surface) !important;
  opacity: 0.7;
}

html.dark-mode #message-header .header-summary,
html.dark-mode #message-header .header-headers,
html.dark-mode #message-header .header-headers td {
  background: transparent !important;
  border: 0 !important;
  color: var(--inn-text-secondary) !important;
  font-size: 12.5px;
  line-height: 1.5;
}

/* The sender's name is the one thing in that line worth reading first. */
html.dark-mode #message-header .header-summary a,
html.dark-mode #message-header .header-headers a,
html.dark-mode #message-header .header-headers .adr {
  color: var(--inn-text) !important;
  font-weight: 500;
}

html.dark-mode #message-header .header-summary .date,
html.dark-mode #message-header .header-headers .date {
  font-family: var(--inn-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--inn-text-secondary) !important;
  font-weight: 400 !important;
}

/* Details and Headers are utilities. They were the brightest thing on screen. */
html.dark-mode #message-header .header-links { margin-top: 6px !important; }
html.dark-mode #message-header .header-links a,
html.dark-mode #message-header .header-links a:before {
  color: var(--inn-text-muted) !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
}
html.dark-mode #message-header .header-links a:hover,
html.dark-mode #message-header .header-links a:hover:before { color: var(--inn-text) !important; }

/* One hairline between the header and the text, plus room to breathe. */
html.dark-mode #message-content {
  background: transparent !important;
  border-top: 1px solid var(--inn-border) !important;
  margin: 16px 18px 0 !important;
  padding-top: 10px !important;
}

html.dark-mode .message-part,
html.dark-mode #messagebody,
html.dark-mode .messagecontent {
  color: var(--inn-text);
  padding: 4px 18px 18px !important;
  line-height: 1.6;
}

html.dark-mode .message-part blockquote {
  border-left: 2px solid var(--inn-border-bright) !important;
  color: var(--inn-text-secondary) !important;
}

/* Sender avatar / contact photo: a bordered tile, not a floating circle. */
html.dark-mode #contactpic,
html.dark-mode .contact-photo,
html.dark-mode .contactphoto {
  background-color: var(--inn-surface) !important;
  border: 1px solid var(--inn-border) !important;
  border-radius: var(--inn-radius-md) !important;
}

/* ── attachments ─────────────────────────────────────────────────────────── */
html.dark-mode .attachmentslist li,
html.dark-mode .attachmentslist li a,
html.dark-mode .attachment,
html.dark-mode #compose-attachments li {
  background-color: transparent !important;
  border: 1px solid var(--inn-border) !important;
  color: var(--inn-text-secondary) !important;
  border-radius: var(--inn-radius-sm) !important;
}

html.dark-mode .attachmentslist li:hover,
html.dark-mode #compose-attachments li:hover { border-color: var(--inn-border-bright) !important; }

html.dark-mode .attachment-name { color: var(--inn-text) !important; }
html.dark-mode .attachment-size { color: var(--inn-text-secondary) !important; }

/* ── compose ─────────────────────────────────────────────────────────────── */
html.dark-mode #compose-content,
html.dark-mode .compose,
html.dark-mode #composebody,
html.dark-mode #composestatusbar {
  background-color: var(--inn-bg) !important;
  color: var(--inn-text) !important;
  border-color: var(--inn-border) !important;
}

html.dark-mode #composeheaders,
html.dark-mode #compose-headers {
  background-color: transparent !important;
  border-color: var(--inn-border) !important;
}

/* Recipient chips */
html.dark-mode .recipient-input .recipient,
html.dark-mode .ac-item,
html.dark-mode .recipient {
  background-color: var(--inn-surface) !important;
  border: 1px solid var(--inn-border) !important;
  border-radius: var(--inn-radius-sm) !important;
  color: var(--inn-text) !important;
}

/* ── the editor (TinyMCE) ────────────────────────────────────────────────────
   Its own stylesheet is injected at runtime, so these need !important. */
html.dark-mode .tox .tox-editor-header,
html.dark-mode .tox .tox-toolbar,
html.dark-mode .tox .tox-toolbar__primary,
html.dark-mode .tox .tox-toolbar-overlord,
html.dark-mode .tox .tox-menubar {
  background-color: var(--inn-surface) !important;
  border-color: var(--inn-border) !important;
}

html.dark-mode .tox .tox-edit-area,
html.dark-mode .tox .tox-edit-area__iframe {
  background-color: var(--inn-bg) !important;
  border-color: var(--inn-border) !important;
}

html.dark-mode .tox .tox-tbtn { color: var(--inn-text-secondary) !important; border-radius: var(--inn-radius-sm) !important; }
html.dark-mode .tox .tox-tbtn:hover { background-color: var(--inn-card) !important; color: var(--inn-text) !important; }
html.dark-mode .tox .tox-tbtn--enabled { background-color: var(--inn-card) !important; color: var(--inn-accent) !important; }
html.dark-mode .tox .tox-tbtn svg { fill: currentColor !important; }

html.dark-mode .tox .tox-dialog,
html.dark-mode .tox .tox-collection,
html.dark-mode .tox .tox-menu {
  background-color: var(--inn-surface) !important;
  border: 1px solid var(--inn-border-bright) !important;
  border-radius: var(--inn-radius-lg) !important;
  color: var(--inn-text) !important;
}

html.dark-mode .tox .tox-collection__item { color: var(--inn-text-secondary) !important; }
html.dark-mode .tox .tox-collection__item--active { background-color: var(--inn-card) !important; color: var(--inn-text) !important; }
html.dark-mode .tox .tox-label,
html.dark-mode .tox .tox-toolbar-label { color: var(--inn-text-secondary) !important; }
html.dark-mode .tox .tox-dialog__header,
html.dark-mode .tox .tox-dialog__footer {
  background-color: transparent !important;
  border-color: var(--inn-border) !important;
  color: var(--inn-text) !important;
}

/* ── contacts ────────────────────────────────────────────────────────────── */
html.dark-mode #contacthead,
html.dark-mode .contact-head,
html.dark-mode .contact-header {
  background-color: var(--inn-card) !important;
  border: 1px solid var(--inn-border) !important;
  border-radius: var(--inn-radius-lg) !important;
  padding: 16px 18px !important;
  margin: 12px !important;
  color: var(--inn-text) !important;
}

html.dark-mode .contactfieldgroup,
html.dark-mode .contactfieldgroup legend { border-color: var(--inn-border) !important; }

html.dark-mode .contactgroup,
html.dark-mode .contacts,
html.dark-mode .contactsearch { color: var(--inn-text-secondary) !important; }

/* ── floating surfaces ───────────────────────────────────────────────────────
   The only place elevation is used. jQuery UI's sheet loads after ours, hence
   the !important on .ui-*. */
html.dark-mode .popover,
html.dark-mode .popupmenu,
html.dark-mode .ui-dialog,
html.dark-mode .ui-widget-content,
html.dark-mode .modal-content,
html.dark-mode .popover .menu,
html.dark-mode .popupmenu .menu,
html.dark-mode #dialog-message,
html.dark-mode .ui-autocomplete {
  background-color: var(--inn-surface) !important;
  border: 1px solid var(--inn-border-bright) !important;
  border-radius: var(--inn-radius-lg) !important;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.6) !important;
  color: var(--inn-text) !important;
}

html.dark-mode .ui-dialog .ui-dialog-titlebar,
html.dark-mode .modal-header,
html.dark-mode .popover .popover-header {
  background-color: transparent !important;
  border-color: var(--inn-border) !important;
  color: var(--inn-text) !important;
  font-weight: 600;
}

html.dark-mode .ui-dialog .ui-dialog-buttonpane,
html.dark-mode .modal-footer {
  background-color: transparent !important;
  border-color: var(--inn-border) !important;
}

html.dark-mode .popover .listing li a,
html.dark-mode .menu li a,
html.dark-mode .ui-menu-item { color: var(--inn-text-secondary) !important; }

html.dark-mode .popover .listing li a:hover,
html.dark-mode .menu li a:hover,
html.dark-mode .ui-menu-item:hover,
html.dark-mode .ui-state-active {
  background-color: var(--inn-card) !important;
  color: var(--inn-text) !important;
  border-color: transparent !important;
}

html.dark-mode .popover-overlay,
html.dark-mode .ui-widget-overlay { background-color: rgb(0 0 0 / 0.72) !important; }

/* The rail is part of the chassis, not something floating on top of it. Stated
   after the block above so nothing can hand it a card again. */
html.dark-mode #layout-menu,
html.dark-mode #taskmenu,
html.dark-mode #layout-menu .menu,
html.dark-mode #layout-menu .popover-header {
  background-color: var(--inn-bg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html.dark-mode #taskmenu { border-right: 1px solid var(--inn-border) !important; }
html.dark-mode #taskmenu a.selected { box-shadow: inset 2px 0 0 0 var(--inn-accent) !important; }

/* ── status messages ─────────────────────────────────────────────────────── */
html.dark-mode .ui.alert.error,
html.dark-mode #messagestack div.error { background-color: var(--inn-danger) !important; color: #fff !important; }
html.dark-mode .ui.alert.warning,
html.dark-mode #messagestack div.warning { background-color: var(--inn-warning) !important; color: var(--void) !important; }
html.dark-mode .ui.alert.confirmation,
html.dark-mode #messagestack div.confirmation { background-color: var(--inn-success) !important; color: var(--void) !important; }
html.dark-mode .ui.alert.loading,
html.dark-mode #messagestack div.loading { background-color: var(--inn-surface) !important; color: var(--inn-text) !important; }

html.dark-mode .ui.alert,
html.dark-mode #messagestack div { border-radius: var(--inn-radius-md) !important; border: 0 !important; }

/* ── empty states ────────────────────────────────────────────────────────────
   An empty pane is an invitation, so it stays quiet rather than shouting. */
html.dark-mode .watermark,
html.dark-mode #mailview-right .watermark,
html.dark-mode .no-status {
  background-color: transparent !important;
  color: var(--inn-text-muted) !important;
}

/* ── pagination, footer, quota ───────────────────────────────────────────── */
html.dark-mode .pagenav,
html.dark-mode .pagenav a,
html.dark-mode .footer a { color: var(--inn-text-secondary) !important; }
html.dark-mode .pagenav a:hover { color: var(--inn-text) !important; }

html.dark-mode .progress,
html.dark-mode #quotadisplay .bar,
html.dark-mode .quota-widget {
  background-color: var(--inn-border) !important;
  border-radius: 999px;
}

html.dark-mode .progress-bar,
html.dark-mode #quotadisplay .bar > span,
html.dark-mode .quota-widget .bar { background-color: var(--inn-text-muted) !important; background-image: none !important; }

/* ── login ───────────────────────────────────────────────────────────────── */
html.dark-mode .task-login,
html.dark-mode .task-login body,
html.dark-mode .task-login #layout,
html.dark-mode .task-login #layout-content { background-color: var(--inn-bg) !important; }

html.dark-mode #login-form {
  background-color: var(--inn-card) !important;
  border: 1px solid var(--inn-border) !important;
  border-radius: var(--inn-radius-lg) !important;
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.5);
  padding: 28px !important;
}

html.dark-mode #login-form .boxtitle,
html.dark-mode #login-form h1 { color: var(--inn-text) !important; }

/* Real prose, so it has to clear AA. */
html.dark-mode #login-footer,
html.dark-mode .task-login #login-footer { color: var(--inn-text-secondary) !important; }

#logo { max-width: 210px; height: auto; margin: 4px auto 20px; display: block; }

/* #logo is shared: the login screen wants the wide wordmark, the task rail wants
   the square mark, and the rail is only ~72px across. Size it there. */
html.dark-mode #layout-menu #logo,
html.dark-mode #taskmenu #logo {
  max-width: 34px !important;
  width: 34px !important;
  height: auto !important;
  margin: 10px auto !important;
  display: block !important;
}

/* ── error and about screens ─────────────────────────────────────────────── */
html.dark-mode #errorpage,
html.dark-mode .task-error #layout-content,
html.dark-mode .task-about #layout-content {
  background-color: var(--inn-bg) !important;
  color: var(--inn-text) !important;
}

html.dark-mode #errorpage .errortitle { color: var(--inn-danger) !important; font-weight: 600; }

/* ── accessibility ───────────────────────────────────────────────────────── */
html.dark-mode :where(a, button, [role='button'], input, select, textarea):focus-visible {
  outline: 2px solid var(--inn-accent) !important;
  outline-offset: 2px;
  border-radius: var(--inn-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  html.dark-mode *,
  html.dark-mode *::before,
  html.dark-mode *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ── one ink for every bar control ───────────────────────────────────────────
   Three chases went into this, so it is written from the markup rather than
   from guesses (skins/elastic/templates/includes/mail-menu.html + mail.html):

     Refresh          a.button sitting DIRECTLY in .header - not in .toolbar at
                      all, which is why every .toolbar rule kept missing it
     Reply all,       wrapped in <span class="dropbutton"> together with their
     Forward          caret, so the ink has to reach the span's children
     Select/Threads/  <li><a> inside ul#toolbar-list-menu.menu.toolbar
     Options

   Elastic gives these three shapes three different treatments plus a .disabled
   state. The owner wants one look, so this states it once, for all of them, and
   neutralises opacity and filter as well - colour alone does not win against a
   dimmed parent. */
html.dark-mode #mailtoolbar a,
html.dark-mode #mailtoolbar a:before,
html.dark-mode #mailtoolbar a .inner,
html.dark-mode #messagetoolbar a,
html.dark-mode #messagetoolbar a:before,
html.dark-mode #messagetoolbar a .inner,
html.dark-mode #toolbar-list-menu a,
html.dark-mode #toolbar-list-menu a:before,
html.dark-mode #toolbar-list-menu a .inner,
html.dark-mode .toolbar a,
html.dark-mode .toolbar a:before,
html.dark-mode .toolbar a .inner,
html.dark-mode .toolbar .dropbutton > a,
html.dark-mode .toolbar .dropbutton > a:before,
html.dark-mode .header > a.button,
html.dark-mode .header > a.button:before,
html.dark-mode .header > a.button .inner {
  color: var(--inn-text) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* ── the search bar is one control, not a field with loose icons ─────────────
   The border used to sit on the <input>, which left the magnifier outside on
   the left and the two buttons outside on the right - three things floating
   next to a box. The wrapper carries the frame now and everything lives inside
   it, including the focus ring. */
html.dark-mode .searchbar {
  background-color: var(--inn-input) !important;
  border: 1px solid var(--inn-border) !important;
  border-radius: var(--inn-radius-sm) !important;
  box-shadow: none !important;
}

html.dark-mode .searchbar form,
html.dark-mode .searchbar input,
html.dark-mode .searchbar input:focus {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

html.dark-mode .searchbar:focus-within {
  border-color: var(--inn-accent) !important;
  box-shadow: var(--inn-focus) !important;
}

/* The magnifier and the two buttons are affordances, not decoration: quiet
   until pointed at. The dropdown caret was the only blue thing in the header. */
html.dark-mode .searchbar a,
html.dark-mode .searchbar a:before,
html.dark-mode .searchbar form:before { color: var(--inn-text-muted) !important; }
html.dark-mode .searchbar a:hover,
html.dark-mode .searchbar a:hover:before { color: var(--inn-text) !important; }