/* Perfect Solve for Roundcube Elastic.
 * Target: Roundcube 1.7.2 / Elastic. Source-reviewed, not live-tested.
 * Load after Elastic. Native html.dark-mode controls the palette.
 * UI colors only: no blanket restyling of email HTML or print views.
 */
html:root {
  --ps-brand: #68376B;
  --ps-base: #F7F5F8;
  --ps-panel: #FFFFFF;
  --ps-text: #29232D;
  --ps-muted: #716776;
  --ps-border: #E3DCE6;
  --ps-accent: #68376B;
  --ps-hover: #512954;
  --ps-on-accent: #FFFFFF;
  --ps-selected: #EFE7F0;
}
html.dark-mode {
  --ps-base: #17131B;
  --ps-panel: #211B26;
  --ps-text: #F4EFF5;
  --ps-muted: #B9ADBE;
  --ps-border: #403547;
  --ps-accent: #D6ACDA;
  --ps-hover: #E5C4E8;
  --ps-on-accent: #241729;
  --ps-selected: #38283E;
}
@media screen {
  html:root body, html:root #layout {
    background-color: var(--ps-base);
    color: var(--ps-text);
  }
  html:root #layout-sidebar {
    background-color: var(--ps-base) !important;
    color: var(--ps-text);
    border-color: var(--ps-border);
  }
  html:root #layout-list, html:root #layout-content {
    background-color: var(--ps-panel) !important;
    color: var(--ps-text);
    border-color: var(--ps-border);
  }
  html:root #layout > div > .header,
  html:root #layout > div > .footer,
  html:root #layout .searchbar,
  html:root #layout .toolbar {
    background-color: var(--ps-base) !important;
    color: var(--ps-text);
    border-color: var(--ps-border);
  }
  html:root #layout-menu,
  html:root #layout-menu .popover-header,
  html:root #taskmenu {
    background-color: var(--ps-brand) !important;
    color: #FFFFFF !important;
  }
  html:root #taskmenu a {
    color: #FFFFFF !important;
    background-color: transparent;
  }
  html:root #taskmenu a:hover,
  html:root #taskmenu a.selected {
    color: #FFFFFF !important;
    background-color: #512954 !important;
  }
  html:root #mailboxlist li > a,
  html:root #directorylist li > a,
  html:root #layout .toolbar a {
    color: var(--ps-text);
  }
  html:root #mailboxlist li.selected > a,
  html:root #directorylist li.selected > a {
    background-color: var(--ps-selected) !important;
    color: var(--ps-accent) !important;
  }
  html:root #messagelist tr,
  html:root #messagelist td {
    background-color: var(--ps-panel);
    color: var(--ps-text);
    border-color: var(--ps-border);
  }
  html:root #messagelist tr:hover > td {
    background-color: var(--ps-base);
  }
  html:root #messagelist tr.selected > td,
  html:root #messagelist tr.focused > td {
    background-color: var(--ps-selected) !important;
    color: var(--ps-text) !important;
  }
  html:root #messagelist .date,
  html:root #messagelist .size {
    color: var(--ps-muted);
  }
  html:root #layout .btn-primary,
  html:root #login-form .btn-primary {
    background-color: var(--ps-accent) !important;
    border-color: var(--ps-accent) !important;
    color: var(--ps-on-accent) !important;
  }
  html:root #layout .btn-primary:hover,
  html:root #login-form .btn-primary:hover {
    background-color: var(--ps-hover) !important;
    border-color: var(--ps-hover) !important;
  }
  html:root #layout .form-control,
  html:root #layout .custom-select,
  html:root #login-form .form-control {
    background-color: var(--ps-panel);
    color: var(--ps-text);
    border-color: var(--ps-border);
  }
  html:root #layout .form-control:focus,
  html:root #login-form .form-control:focus {
    border-color: var(--ps-accent);
    box-shadow: 0 0 0 2px var(--ps-selected);
  }
  html:root #layout a:focus-visible,
  html:root #layout button:focus-visible {
    outline: 2px solid var(--ps-accent);
    outline-offset: 2px;
  }
  html:root #taskmenu a:focus-visible {
    outline-color: #FFFFFF;
    outline-offset: -3px;
  }
  html:root .popover, html:root .popover-body,
  html:root .ui-dialog, html:root .ui-dialog-content {
    background-color: var(--ps-panel);
    color: var(--ps-text);
    border-color: var(--ps-border);
  }
  html:root .task-login #layout-content {
    background-color: var(--ps-base) !important;
  }
}