/**
 * Seseko Deep Steel — additive Elastic overrides, tested against Roundcube 1.7.5.
 * Brand source: packages/design-tokens/tokens.css.
 * Keep upstream layout/breakpoints, icons, semantic status colors and editor/message
 * iframe styles. Never invert message bodies or hide/reorder application controls.
 */
@media screen and (forced-colors: none) {
  html.dark-mode {
    color-scheme: dark;
    --seseko-midnight: #0B1020;
    --seseko-surface: #151F32;
    --seseko-steel: #456B96;
    --seseko-accent: #8CA8CC;
    --seseko-white: #F5F7FC;
    --seseko-muted: #B1BED1;
    --seseko-border: #2B3B55;
    scrollbar-color: var(--seseko-steel) var(--seseko-midnight);
  }

  html.dark-mode body {
    color: var(--seseko-white);
    background-color: var(--seseko-midnight);
  }

  html.dark-mode #layout-menu,
  html.dark-mode #layout-sidebar {
    background-color: var(--seseko-midnight);
    border-color: var(--seseko-border);
  }

  html.dark-mode #layout-list,
  html.dark-mode #layout-content,
  html.dark-mode #layout > div > .header,
  html.dark-mode #layout > div > .footer,
  html.dark-mode .popup .listbox .footer {
    background-color: var(--seseko-surface);
    border-color: var(--seseko-border);
  }

  html.dark-mode #logo {
    opacity: 1;
  }

  html.dark-mode #taskmenu a,
  html.dark-mode .menu.toolbar a,
  html.dark-mode #layout > div > .header a.button,
  html.dark-mode #layout > div > .footer a.button {
    color: var(--seseko-white);
  }

  html.dark-mode #taskmenu .action-buttons a {
    color: var(--seseko-accent);
  }

  html.dark-mode #taskmenu a.selected,
  html.dark-mode #taskmenu a:hover,
  html.dark-mode .menu a:not(.disabled):focus,
  html.dark-mode .menu a:not(.disabled):hover,
  html.dark-mode .header a.button.icon:not(.disabled):hover,
  html.dark-mode .header a.button.icon:not(.disabled):focus {
    color: var(--seseko-white);
    background-color: var(--seseko-steel);
  }

  html.dark-mode .listing tbody td,
  html.dark-mode .listing li {
    border-color: var(--seseko-border);
  }

  html.dark-mode .listing tbody td,
  html.dark-mode .listing tbody td a,
  html.dark-mode .listing li a {
    color: var(--seseko-white);
  }

  html.dark-mode .listing li.selected,
  html.dark-mode .listing li.selected > a,
  html.dark-mode .listing li.selected > div > a,
  html.dark-mode .listing tr.selected td {
    color: var(--seseko-white);
    background-color: var(--seseko-steel);
  }

  html.dark-mode .listing li.selected ul {
    background-color: var(--seseko-midnight);
  }

  html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span:is(.size, .date, .fromto),
  html.dark-mode .messagelist span.attachment span,
  html.dark-mode .attachmentslist li .attachment-size {
    color: var(--seseko-muted);
  }

  html.dark-mode .messagelist tr.selected:not(.flagged):not(.deleted) td.subject span:is(.size, .date, .fromto) {
    color: var(--seseko-white);
  }

  html.dark-mode .folderlist li.mailbox .unreadcount {
    color: var(--seseko-midnight);
    background-color: var(--seseko-accent);
    font-weight: 600;
  }

  html.dark-mode .searchbar,
  html.dark-mode .file-upload {
    border-color: var(--seseko-border);
  }

  html.dark-mode .attachmentslist {
    background-color: var(--seseko-midnight);
  }

  html.dark-mode .attachmentslist a,
  html.dark-mode .attachmentslist li .attachment-name {
    color: var(--seseko-accent);
  }

  html.dark-mode .file-upload.droptarget.hover {
    border-color: var(--seseko-accent);
    background-color: var(--seseko-surface);
  }

  html.dark-mode .form-control:not(.is-invalid),
  html.dark-mode .custom-file-label,
  html.dark-mode .input-group-text,
  html.dark-mode .multi-input:not(.is-invalid) > .content,
  html.dark-mode .recipient-input .recipient {
    color: var(--seseko-white);
    background-color: var(--seseko-midnight);
    border-color: var(--seseko-steel);
  }

  html.dark-mode .form-control::placeholder {
    color: var(--seseko-muted);
    opacity: 1;
  }

  html.dark-mode .form-control:not(.is-invalid):focus,
  html.dark-mode .recipient-input.focus,
  html.dark-mode .multi-input:not(.is-invalid) > .content.focused {
    color: var(--seseko-white);
    background-color: var(--seseko-midnight);
    border-color: var(--seseko-accent);
    outline: 2px solid var(--seseko-accent);
    outline-offset: 2px;
    box-shadow: none;
  }

  html.dark-mode :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--seseko-accent);
    outline-offset: 2px;
  }

  html.dark-mode .btn-primary {
    color: var(--seseko-midnight);
    background-color: var(--seseko-accent);
    border-color: var(--seseko-accent);
    font-weight: 600;
  }

  html.dark-mode .btn-primary:hover:not(:disabled),
  html.dark-mode .btn-primary:focus:not(:disabled),
  html.dark-mode .btn-primary:not(:disabled):not(.disabled):active {
    color: var(--seseko-midnight);
    background-color: var(--seseko-white);
    border-color: var(--seseko-white);
  }

  html.dark-mode .popover,
  html.dark-mode .popover-header,
  html.dark-mode .ui-dialog,
  html.dark-mode .ui-dialog .ui-dialog-titlebar,
  html.dark-mode.layout-phone #layout-menu {
    color: var(--seseko-white);
    background-color: var(--seseko-surface);
    border-color: var(--seseko-border);
  }

  /* Only shell chrome: no typography/filter rules reach HTML mail or TinyMCE. */
  html.dark-mode .task-login #layout-content {
    background-color: var(--seseko-midnight);
  }

  html.dark-mode .task-login #logo {
    width: min(260px, 70vw);
    height: auto;
  }

  html.dark-mode #login-form {
    width: calc(100% - 2rem);
    max-width: 360px;
    padding: 1.5rem;
    background-color: var(--seseko-surface);
    border: 1px solid var(--seseko-border);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgb(0 0 0 / 18%);
  }

  html.dark-mode #login-footer {
    color: var(--seseko-muted);
  }
}