/* RedPokeCenter application layer for Roundcube Elastic 1.6.x */
:root {
  --rpc-ink: #17191d;
  --rpc-rail: #121418;
  --rpc-panel: #1d2025;
  --rpc-panel-raised: #24282e;
  --rpc-panel-inset: #15171b;
  --rpc-paper: #f7f7f5;
  --rpc-paper-muted: #e6e7e9;
  --rpc-steel: #a8adb5;
  --rpc-steel-dim: #747a84;
  --rpc-red: #d12b35;
  --rpc-red-deep: #a91922;
  --rpc-success: #67b77a;
  --rpc-line: rgba(255, 255, 255, .10);
  --rpc-line-soft: rgba(255, 255, 255, .065);
  --rpc-focus: rgba(209, 43, 53, .28);
  --rpc-radius-sm: 6px;
  --rpc-radius-md: 10px;
}

body:not(.task-login) {
  background: var(--rpc-ink);
  color: var(--rpc-paper-muted);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body:not(.task-login) #layout { background: var(--rpc-ink); }

/* Command rail */
body:not(.task-login) #layout-menu {
  background: var(--rpc-rail) !important;
  border-right: 1px solid var(--rpc-line-soft);
}

body:not(.task-login) #layout-menu .popover-header {
  background: var(--rpc-rail) !important;
  border-bottom: 1px solid var(--rpc-line-soft);
}

body:not(.task-login) #layout-menu #logo {
  width: 42px;
  height: 42px;
  padding: 6px;
  object-fit: contain;
}

body:not(.task-login) #taskmenu a {
  color: var(--rpc-steel) !important;
  border-left: 3px solid transparent;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

body:not(.task-login) #taskmenu a:hover {
  color: var(--rpc-paper) !important;
  background: rgba(255, 255, 255, .045) !important;
}

body:not(.task-login) #taskmenu a.selected {
  color: var(--rpc-paper) !important;
  background: rgba(209, 43, 53, .10) !important;
  border-left-color: var(--rpc-red);
}

body:not(.task-login) #taskmenu .action-buttons a.compose {
  margin: 8px 10px 14px;
  width: calc(100% - 20px);
  min-height: 48px;
  border: 0;
  border-radius: var(--rpc-radius-sm);
  background: var(--rpc-red-deep) !important;
  color: #fff !important;
}

body:not(.task-login) #taskmenu .action-buttons a.compose:hover { background: var(--rpc-red) !important; }

/* Shared panels and headers */
body:not(.task-login) #layout-sidebar,
body:not(.task-login) #layout-list {
  background: var(--rpc-panel) !important;
  border-color: var(--rpc-line-soft) !important;
}

body:not(.task-login) #layout-sidebar { min-width: 236px; max-width: 25%; }
body:not(.task-login) #layout-list { min-width: 350px; max-width: 34%; }

body:not(.task-login) #layout-content {
  background: var(--rpc-paper) !important;
  color: var(--rpc-ink);
}

body:not(.task-login) #layout > div > .header,
body:not(.task-login) #layout > div > .footer {
  background: var(--rpc-panel) !important;
  color: var(--rpc-paper-muted) !important;
  border-color: var(--rpc-line-soft) !important;
}

body:not(.task-login) #layout > #layout-content > .header {
  background: var(--rpc-panel) !important;
  color: var(--rpc-paper-muted) !important;
  border-color: var(--rpc-line-soft) !important;
}

body:not(.task-login) #layout > #layout-content > .header a.button { color: var(--rpc-steel) !important; }
body:not(.task-login) #layout > #layout-content > .header a.button:hover { color: var(--rpc-paper) !important; }
body:not(.task-login) #layout > #layout-content > .header a.button.disabled { color: #555b64 !important; opacity: .72 !important; }
body:not(.task-login) #layout .header-title { font-weight: 700; letter-spacing: -.01em; }

/* Search */
body:not(.task-login) .searchbar {
  margin: 10px 12px !important;
  border: 1px solid var(--rpc-line) !important;
  border-radius: var(--rpc-radius-sm) !important;
  background: var(--rpc-panel-inset) !important;
  box-shadow: none !important;
}

body:not(.task-login) .searchbar input {
  color: var(--rpc-paper) !important;
  background: transparent !important;
}

body:not(.task-login) .searchbar input::placeholder { color: var(--rpc-steel-dim); }
body:not(.task-login) .searchbar:focus-within { border-color: var(--rpc-red) !important; box-shadow: 0 0 0 3px var(--rpc-focus) !important; }

/* Folder navigation */
body:not(.task-login) #mailboxlist li a {
  margin: 2px 8px;
  min-height: 38px;
  border-radius: var(--rpc-radius-sm);
  color: var(--rpc-steel) !important;
}

body:not(.task-login) #mailboxlist li a:hover { background: rgba(255, 255, 255, .045) !important; color: var(--rpc-paper) !important; }
body:not(.task-login) #mailboxlist li.selected > a {
  background: rgba(209, 43, 53, .12) !important;
  color: var(--rpc-paper) !important;
  box-shadow: inset 3px 0 0 var(--rpc-red);
}

body:not(.task-login) #mailboxlist .unreadcount {
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--rpc-red-deep) !important;
  color: #fff !important;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

body:not(.task-login) .quota-widget { color: var(--rpc-steel-dim); }

/* Message list */
body:not(.task-login) #messagelist-content { padding: 0 8px 8px; }
body:not(.task-login) .messagelist { border-collapse: separate !important; border-spacing: 0 4px !important; }
body:not(.task-login) .messagelist tr { background: transparent !important; }

body:not(.task-login) .messagelist tr > td {
  background: var(--rpc-panel-raised) !important;
  color: var(--rpc-steel) !important;
  border-top: 1px solid var(--rpc-line-soft) !important;
  border-bottom: 1px solid var(--rpc-line-soft) !important;
  transition: background-color .14s ease, border-color .14s ease;
}

body:not(.task-login) .messagelist tr > td:first-child {
  border-left: 1px solid var(--rpc-line-soft) !important;
  border-radius: var(--rpc-radius-sm) 0 0 var(--rpc-radius-sm);
}

body:not(.task-login) .messagelist tr > td:last-child {
  border-right: 1px solid var(--rpc-line-soft) !important;
  border-radius: 0 var(--rpc-radius-sm) var(--rpc-radius-sm) 0;
}

body:not(.task-login) .messagelist tr:hover > td {
  background: #292d34 !important;
  border-color: rgba(255, 255, 255, .13) !important;
}

body:not(.task-login) .messagelist tr.selected > td {
  background: rgba(209, 43, 53, .14) !important;
  border-color: rgba(209, 43, 53, .36) !important;
}

body:not(.task-login) .messagelist td.subject span.subject a { color: #d8dade !important; }
body:not(.task-login) .messagelist td.subject span.fromto,
body:not(.task-login) .messagelist td.subject span.date,
body:not(.task-login) .messagelist td.subject span.size { color: var(--rpc-steel-dim) !important; }

body:not(.task-login) .messagelist tr.unread > td { background: #282c32 !important; }
body:not(.task-login) .messagelist tr.unread td.subject span.subject a,
body:not(.task-login) .messagelist tr.unread td.subject span.fromto { color: var(--rpc-paper) !important; font-weight: 750; }
body:not(.task-login) .messagelist td.subject span.msgicon.status.unread::before { color: var(--rpc-red) !important; }
body:not(.task-login) .messagelist tr.flagged td,
body:not(.task-login) .messagelist tr.flagged td.subject span a { color: #ef9298 !important; }

/* Reading canvas and message chrome */
body:not(.task-login) .iframe-wrapper { background: var(--rpc-paper); }
body.task-mail.action-show,
body.task-mail.action-preview { background: var(--rpc-paper) !important; color: var(--rpc-ink) !important; }

body.task-mail.action-show #layout-content,
body.task-mail.action-preview #layout-content { background: var(--rpc-paper) !important; }

body:not(.task-login) .message-partheaders,
body:not(.task-login) .message-header {
  background: #f1f1ef !important;
  border-color: rgba(23, 25, 29, .10) !important;
  color: var(--rpc-ink) !important;
}

body:not(.task-login) .message-subject { color: var(--rpc-ink) !important; font-weight: 750; letter-spacing: -.02em; }

/* Forms, compose, contacts, settings */
body:not(.task-login) #layout-content .formcontent,
body:not(.task-login) #layout-content > .content,
body:not(.task-login) #layout-content > .scroller { background: var(--rpc-paper); }

body:not(.task-login) #layout-content input:not([type="checkbox"]):not([type="radio"]),
body:not(.task-login) #layout-content textarea,
body:not(.task-login) #layout-content select,
body:not(.task-login) .popupmenu input:not([type="checkbox"]):not([type="radio"]),
body:not(.task-login) .popupmenu textarea,
body:not(.task-login) .popupmenu select {
  border-color: rgba(23, 25, 29, .18) !important;
  border-radius: var(--rpc-radius-sm) !important;
  background: #fff !important;
  color: var(--rpc-ink) !important;
  box-shadow: none !important;
}

body:not(.task-login) input:focus,
body:not(.task-login) textarea:focus,
body:not(.task-login) select:focus {
  border-color: var(--rpc-red) !important;
  box-shadow: 0 0 0 3px var(--rpc-focus) !important;
}

body:not(.task-login) .btn-primary,
body:not(.task-login) button.mainaction,
body:not(.task-login) .button.mainaction {
  border-color: var(--rpc-red-deep) !important;
  background: var(--rpc-red-deep) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body:not(.task-login) .btn-primary:hover,
body:not(.task-login) button.mainaction:hover,
body:not(.task-login) .button.mainaction:hover { background: var(--rpc-red) !important; }

body:not(.task-login) .listing li.selected,
body:not(.task-login) .listing tr.selected > td { border-color: rgba(209, 43, 53, .30) !important; }

body:not(.task-login) .popupmenu,
body:not(.task-login) .popover,
body:not(.task-login) .ui-dialog {
  border: 1px solid var(--rpc-line) !important;
  border-radius: var(--rpc-radius-md) !important;
  background: var(--rpc-panel-raised) !important;
  color: var(--rpc-paper-muted) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .32) !important;
}

body:not(.task-login) .popupmenu a,
body:not(.task-login) .popover a { color: var(--rpc-paper-muted) !important; }
body:not(.task-login) .popupmenu a:hover,
body:not(.task-login) .popover a:hover { background: rgba(255, 255, 255, .06) !important; }

body:not(.task-login) #messagestack { pointer-events: none; }
body:not(.task-login) #messagestack .alert { pointer-events: auto; border-radius: var(--rpc-radius-sm); }

/* Dark-mode remains intentionally consistent with the dark application shell. */
html.dark-mode body:not(.task-login) #layout-content,
html.dark-mode body:not(.task-login) #layout-content .formcontent,
html.dark-mode body:not(.task-login) #layout-content > .content,
html.dark-mode body:not(.task-login) #layout-content > .scroller,
html.dark-mode body:not(.task-login) .iframe-wrapper { background: var(--rpc-paper) !important; color: var(--rpc-ink) !important; }

/* Tablet and phone: preserve Elastic's pane navigation. */
@media (max-width: 1200px) {
  body:not(.task-login) #layout-sidebar,
  body:not(.task-login) #layout-list { max-width: none; }
}

@media (max-width: 768px) {
  body:not(.task-login) #layout-menu #logo { width: 38px; height: 38px; }
  body:not(.task-login) #layout-list { min-width: 300px; }
  body:not(.task-login) #messagelist-content { padding: 0 5px 5px; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.task-login) *,
  body:not(.task-login) *::before,
  body:not(.task-login) *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}