/* Nextmail shell — a cohesive Nextcloud-inspired UI for Roundcube Elastic. */
:root {
  --nc-primary: #0082c9;
  --nc-primary-hover: #006aa3;
  --nc-primary-soft: #e5f2f8;
  --nc-bg: #f4f4f4;
  --nc-surface: #fff;
  --nc-surface-2: #f7f7f7;
  --nc-text: #222;
  --nc-muted: #767676;
  --nc-border: #e5e5e5;
  --nc-hover: #f1f1f1;
  --nc-danger: #e9322d;
  --nc-header: 64px;
  --nc-radius: 10px;
  --nc-shadow: 0 8px 28px rgba(0,0,0,.10);
}

html.dark-mode {
  --nc-primary: #c6c8cc;
  --nc-primary-hover: #ffffff;
  --nc-primary-soft: #343434;
  --nc-bg: #141516;
  --nc-surface: #202224;
  --nc-surface-2: #292c2f;
  --nc-text: #d8d8d8;
  --nc-muted: #a0a4a8;
  --nc-border: #45494d;
  --nc-hover: #32363a;
  --nc-danger: #ff7b77;
  --nc-shadow: 0 8px 30px rgba(0,0,0,.40);
}

/* Dark surfaces need tonal separation as well as borders. */
html.dark-mode #layout-sidebar {
  background: #1c1e20;
}

html.dark-mode #layout-list {
  background: #222426;
}

html.dark-mode #layout-content {
  background: #191b1d;
}

html.dark-mode #layout > div > .header {
  background: #282b2e;
  border-color: #4b5055;
  box-shadow: 0 1px 0 rgba(255,255,255,.035), 0 3px 12px rgba(0,0,0,.16);
}

html.dark-mode #layout > div > .footer {
  background: #24272a;
  border-color: #4b5055;
  box-shadow: 0 -1px 0 rgba(255,255,255,.025);
}

html.dark-mode .listing li,
html.dark-mode .listing tr td,
html.dark-mode .messagelist tr td {
  border-color: #3c4044;
}

html.dark-mode .popover,
html.dark-mode .popupmenu,
html.dark-mode .ui-dialog,
html.dark-mode .account-switcher-menu {
  border-color: #555b60 !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.025) !important;
}

html.dark-mode #layout-menu {
  background: #242424 !important;
  box-shadow: 0 -1px 0 #3a3a3a, 0 -5px 20px rgba(0,0,0,.24);
}

html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu a.selected {
  color: #fff !important;
  background: #3a3a3a !important;
}

html.dark-mode #taskmenu .account-switcher {
  border-color: #555 !important;
  background: #333 !important;
}

html.dark-mode .modern-compose-panel a.compose {
  color: #f2f2f2 !important;
  background: #3b3b3b !important;
  box-shadow: none;
}

html.dark-mode .modern-compose-panel a.compose:hover {
  background: #4a4a4a !important;
}

html.dark-mode .searchbar form:focus-within,
html.dark-mode .form-control:focus,
html.dark-mode .custom-select:focus,
html.dark-mode textarea:focus,
html.dark-mode input:focus,
html.dark-mode select:focus {
  border-color: #707070;
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}

html, body {
  color: var(--nc-text);
  background: var(--nc-bg);
}

body, button, input, optgroup, select, textarea, .popover {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Desktop application shell ---------- */
@media screen and (min-width: 769px) {
  #layout {
    box-sizing: border-box;
    height: 100%;
    padding-bottom: var(--nc-header);
    gap: 1px;
    background: var(--nc-border);
  }

  #layout-menu {
    position: fixed !important;
    z-index: 1000;
    inset: auto 0 0 0 !important;
    display: flex;
    width: 100% !important;
    height: var(--nc-header);
    color: #fff;
    background: #0082c9 !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,.18);
    overflow: visible;
  }

  #layout-menu .popover-header {
    display: none !important;
  }

  #layout-menu .popover-header img {
    max-width: 64px;
    max-height: 46px;
    padding: 0;
  }

  #layout-menu .popover-header a.cancel {
    display: none !important;
  }

  #taskmenu {
    position: static;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    height: var(--nc-header);
    padding-left: 10px;
    overflow: visible;
  }

  #taskmenu > a,
  #taskmenu > span > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: auto !important;
    min-width: 44px;
    max-width: none !important;
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 44px !important;
    margin: 10px 2px;
    padding: 0 13px !important;
    color: rgba(255,255,255,.94) !important;
    border: 0 !important;
    border-radius: 12px;
    line-height: normal !important;
    white-space: nowrap;
    overflow: visible;
    transition: background-color .15s ease, transform .15s ease;
  }

  #taskmenu > a:before,
  #taskmenu > span > a:before {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 7px 0 0 !important;
    line-height: 1 !important;
  }

  #taskmenu span.inner {
    display: inline-block !important;
    width: auto;
    min-width: 0 !important;
    height: auto;
    color: inherit;
    font-size: .92rem;
    line-height: 1.4 !important;
    white-space: nowrap;
    overflow: visible;
    max-width: none !important;
    text-overflow: clip;
  }

  #taskmenu a:hover,
  #taskmenu a.selected {
    color: #fff !important;
    background: rgba(0,0,0,.18) !important;
    box-shadow: none;
  }

  #taskmenu a:active {
    transform: scale(.96);
  }

  #taskmenu .action-buttons {
    display: none;
  }

  #taskmenu .special-buttons {
    position: static !important;
    display: flex;
    align-items: center;
    align-self: stretch;
    width: auto;
    margin-left: auto;
    padding-right: 8px;
    background: transparent !important;
  }

  #taskmenu .special-buttons > a:not(.account-switcher) span.inner {
    display: none !important;
  }

  #taskmenu a.button-help,
  #taskmenu a.about {
    display: none !important;
  }

  #taskmenu .special-buttons > a:not(.account-switcher):before {
    margin: 0 !important;
  }

  #taskmenu .account-switcher {
    display: inline-flex !important;
    width: 58px !important;
    min-width: 58px;
    max-width: 58px !important;
    height: 44px !important;
    margin: 10px 4px !important;
    padding: 0 7px !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.14) !important;
    box-shadow: none !important;
  }

  #taskmenu .account-switcher-avatar {
    width: 30px !important;
    height: 30px !important;
    margin-right: 2px !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,.35);
  }

  #taskmenu .account-switcher-label {
    display: none !important;
  }

  #taskmenu .account-switcher-arrow {
    display: inline !important;
    flex: 0 0 auto;
    margin-left: 2px !important;
    color: #fff;
    font-size: 11px;
  }

  #layout-sidebar,
  #layout-list,
  #layout-content {
    min-width: 0;
    border: 0;
    color: var(--nc-text);
    background: var(--nc-surface);
  }

  html.dark-mode #layout-sidebar,
  html.dark-mode #layout-list {
    border-right: 1px solid #4b5055;
  }

  html.dark-mode #layout-content {
    box-shadow: inset 1px 0 0 rgba(255,255,255,.025);
  }

  #layout-sidebar {
    flex: 0 1 280px;
    width: 280px;
    max-width: 320px;
  }

  #layout-list {
    flex: 0 1 390px;
    width: 390px;
    max-width: 440px;
  }

  #layout-sidebar .header-title.account-title-switcher {
    display: flex;
    align-items: center;
    align-self: stretch;
    flex: 1 1 auto;
    min-width: 0;
    height: 60px;
    margin: 0 !important;
    padding: 0 4px;
    line-height: normal !important;
    overflow: visible;
  }

  #layout-sidebar .account-title-switcher .account-switcher {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    align-self: center;
    min-width: 0;
    height: 44px !important;
    padding: 4px 8px !important;
    line-height: normal !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #layout-sidebar .account-title-switcher .account-switcher:hover {
    background: var(--nc-hover) !important;
  }

  #layout-sidebar .account-title-switcher .account-switcher-avatar {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    margin-right: 9px !important;
    color: #fff;
  }

  #layout-sidebar .account-title-switcher .account-switcher-label {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--nc-text);
    font-size: .92rem;
    font-weight: 650;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #layout-sidebar .account-title-switcher .account-switcher-arrow {
    display: inline !important;
    flex: 0 0 auto;
    margin-left: 6px !important;
    color: var(--nc-muted);
  }

  #layout-content {
    flex: 1 1 auto;
  }

  .modern-compose-panel {
    flex: 0 0 auto;
    padding: 14px 14px 8px;
    background: var(--nc-surface);
  }

  .modern-compose-panel a.compose {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    color: #fff !important;
    border-radius: 12px;
    background: #0082c9 !important;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 5px 14px rgba(0,130,201,.24);
  }

  .modern-compose-panel a.compose:before {
    margin-right: 8px;
  }

  .modern-compose-panel a.compose:hover {
    background: #006aa3 !important;
  }
}

/* ---------- Shared workspace components ---------- */
#layout > div > .header {
  height: 60px;
  min-height: 60px;
  color: var(--nc-text);
  border-color: var(--nc-border);
  background: var(--nc-surface);
}

#layout > div > .footer {
  color: var(--nc-muted);
  border-color: var(--nc-border);
  background: var(--nc-surface);
}

.searchbar form {
  border: 1px solid var(--nc-border);
  border-radius: 999px;
  background: var(--nc-surface-2);
  box-shadow: none;
}

.searchbar form:focus-within {
  border-color: var(--nc-primary);
  background: var(--nc-surface);
  box-shadow: 0 0 0 3px rgba(0,130,201,.15);
}

.listing li,
.listing tr td,
.messagelist tr td {
  color: var(--nc-text);
  border-color: var(--nc-border);
  transition: background-color .12s ease;
}

.listing li > a,
.folderlist li > a {
  margin: 2px 8px;
  border-radius: 8px;
}

.listing li:hover,
.listing tr:hover td,
.messagelist tr:hover td {
  background: var(--nc-hover);
}

.listing li.selected,
.listing li.selected > a,
.listing tr.selected td,
.messagelist tr.selected td {
  color: var(--nc-text);
  background: var(--nc-primary-soft) !important;
}

.folderlist li.selected > a {
  color: var(--nc-primary);
  font-weight: 700;
}

.messagelist tr.unread td {
  background: color-mix(in srgb, var(--nc-primary-soft) 45%, var(--nc-surface));
}

.messagelist td.subject span.subject {
  font-weight: 400;
}

.messagelist tr.unread td.subject span.subject {
  font-weight: 700;
}

.messagelist span.date,
.messagelist span.size,
.messagelist span.fromto,
.listing span.secondary {
  color: var(--nc-muted);
}

.infinite-mail-status {
  display: flex;
  position: sticky;
  bottom: 8px;
  z-index: 4;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: calc(100% - 32px);
  min-height: 36px;
  margin: 10px auto;
  padding: 7px 13px;
  color: var(--nc-muted);
  border: 1px solid var(--nc-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nc-surface) 94%, transparent);
  box-shadow: var(--nc-shadow);
  font-size: .86rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .15s ease, transform .15s ease;
}

.infinite-mail-status.visible {
  opacity: 1;
  transform: translateY(0);
}

.infinite-mail-status .spinner-border {
  width: 1rem;
  height: 1rem;
  margin-right: 7px;
  border-width: 2px;
}

.header a.button,
.footer a.button,
.menu.toolbar a {
  border-radius: var(--nc-radius);
}

.header a.button:not(.disabled):hover,
.footer a.button:not(.disabled):hover,
.menu.toolbar a:not(.disabled):hover {
  color: var(--nc-primary);
  background: var(--nc-hover);
}

#message-header {
  padding: 16px 20px;
  color: var(--nc-text);
  border-color: var(--nc-border);
  background: var(--nc-surface);
}

#message-header .subject {
  color: var(--nc-text);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

#message-content,
.message-part,
.message-htmlpart,
.compose-headers,
.formcontent {
  color: var(--nc-text);
  background: var(--nc-surface);
}

.form-control,
.custom-select,
.multi-input,
.input-group-text,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"] {
  color: var(--nc-text);
  border-color: var(--nc-border);
  border-radius: var(--nc-radius);
  background-color: var(--nc-surface-2);
}

.form-control:focus,
.custom-select:focus,
textarea:focus,
input:focus,
select:focus {
  color: var(--nc-text);
  border-color: var(--nc-primary);
  background-color: var(--nc-surface);
  box-shadow: 0 0 0 3px rgba(0,130,201,.15);
}

.btn {
  min-height: 40px;
  border-radius: var(--nc-radius);
  font-weight: 650;
  box-shadow: none;
}

.btn-primary {
  border-color: var(--nc-primary);
  background: var(--nc-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: var(--nc-primary-hover);
  background: var(--nc-primary-hover);
}

.popover,
.popupmenu,
.ui-dialog,
.account-switcher-menu {
  color: var(--nc-text) !important;
  border: 1px solid var(--nc-border) !important;
  border-radius: 14px !important;
  background: var(--nc-surface) !important;
  box-shadow: var(--nc-shadow) !important;
}

.account-switcher-menu,
.account-switcher-menu > div,
.account-switcher-menu a,
.account-switcher-menu span {
  color: var(--nc-text) !important;
}

.account-switcher-menu > div div {
  color: inherit !important;
}

.account-switcher-menu a:hover {
  color: var(--nc-text) !important;
  background: var(--nc-hover) !important;
}

.account-switcher-menu a.active,
.account-switcher-menu .account-row.active {
  color: var(--nc-text) !important;
  background: var(--nc-primary-soft) !important;
}

.account-switcher-menu a.sign-out {
  color: var(--nc-danger) !important;
}

.popover-header,
.ui-dialog .ui-dialog-titlebar,
.ui-dialog .ui-dialog-buttonpane {
  color: var(--nc-text);
  border-color: var(--nc-border);
  background: var(--nc-surface);
}

/* ---------- Login ---------- */
.task-login #layout-content {
  background:
    radial-gradient(circle at 18% 20%, rgba(0,130,201,.20), transparent 34%),
    radial-gradient(circle at 85% 80%, rgba(70,186,97,.10), transparent 30%),
    var(--nc-bg);
}

#login-form {
  max-width: 380px;
  padding: 28px;
  border: 1px solid var(--nc-border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--nc-surface) 94%, transparent);
  box-shadow: var(--nc-shadow);
  backdrop-filter: blur(16px);
}

#login-form .form-control,
#login-form .custom-select,
#rcmloginsubmit {
  min-height: 46px;
}

#login-footer {
  color: var(--nc-muted);
}

/* ---------- Mobile: independent drawer, no desktop positioning ---------- */
@media screen and (max-width: 768px) {
  #layout {
    gap: 0;
    background: var(--nc-surface);
  }

  #layout-sidebar,
  #layout-list,
  #layout-content {
    color: var(--nc-text);
    border: 0;
    background: var(--nc-surface);
  }

  #layout > div > .header {
    height: 58px;
    min-height: 58px;
    background: var(--nc-surface);
  }

  .task-login #logo {
    top: 8vh;
    max-height: 76px;
  }

  #login-form {
    top: 11vh;
    width: calc(100% - 28px);
    padding: 22px 18px;
  }
}

@media screen and (max-width: 480px) {
  #layout-menu.popover {
    color: var(--nc-text);
    background: var(--nc-surface) !important;
  }

  #taskmenu a {
    min-height: 48px;
    margin: 0;
    border-radius: 0;
    border-color: var(--nc-border) !important;
  }

  #taskmenu a:hover,
  #taskmenu a.selected {
    color: var(--nc-primary) !important;
    background: var(--nc-hover) !important;
  }

  #taskmenu .account-switcher-menu {
    margin: 0;
    border-width: 0 0 1px !important;
    border-radius: 0 !important;
    background: var(--nc-surface-2) !important;
    box-shadow: none !important;
  }

  #taskmenu .account-switcher-menu a {
    padding-left: 1.25rem !important;
    font-size: 1rem;
  }
}