/* ============================================================
   LYNMERC ENTERPRISE — Roundcube Dark Theme Override
   Matches PostfixAdmin dark dashboard aesthetic
   Applied AFTER elastic skin styles.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ───────── Force dark mode always ───────── */
html { color-scheme: dark !important; }

/* ───────── Tokens ───────── */
:root {
  --brand: #7c5cfc;
  --brand-hover: #6a4ce6;
  --brand-glow: rgba(124, 92, 252, 0.18);
  --accent: #22d3ee;
  --bg: #0e1117;
  --surface: #161b22;
  --surface-raised: #1c2333;
  --surface-hover: #21293a;
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  --text: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #555d6b;
  --green: #3fb950;
  --red: #f85149;
  --yellow: #e3b341;
  --blue: #58a6ff;
}


/* ═══════════════════════════════════════════
   GLOBAL / BODY
   ═══════════════════════════════════════════ */

html, html.dark-mode {
  background: var(--bg) !important;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 15px !important;
  color: var(--text) !important;
  background: var(--bg) !important;
  -webkit-font-smoothing: antialiased;
}


/* ═══════════════════════════════════════════
   TASK MENU (left sidebar icons)
   ═══════════════════════════════════════════ */

#layout > .menu,
.menu.toolbar.listing,
#taskmenu {
  background: #0a0d14 !important;
  border-color: var(--border) !important;
}

#taskmenu a,
#layout > .menu a {
  color: var(--text-secondary) !important;
}

#taskmenu a:hover,
#layout > .menu a:hover,
#taskmenu a.selected,
#layout > .menu a.selected {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

#taskmenu a.selected {
  background: var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(124, 92, 252, 0.3);
}

#taskmenu a.logout,
.menu a.logout {
  color: var(--red) !important;
}

#taskmenu .special-buttons a::before,
#taskmenu a::before {
  color: inherit !important;
}


/* ═══════════════════════════════════════════
   HEADERS / TOOLBARS
   ═══════════════════════════════════════════ */

#layout > div > .header,
#layout > div > .footer,
.header,
#layout-content .header {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.header a,
.header .button,
.toolbar a,
.toolbar .button {
  color: var(--text-secondary) !important;
}

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

.toolbar a.selected,
.toolbar .button.selected {
  color: var(--brand) !important;
}

/* Search bar */
.searchbar,
#searchbar,
.searchbar input,
.header .searchbar {
  background: var(--surface-raised) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.searchbar input::placeholder { color: var(--text-muted) !important; }

.searchbar input:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-glow) !important;
}


/* ═══════════════════════════════════════════
   PANELS / CONTENT AREAS
   ═══════════════════════════════════════════ */

#layout-sidebar,
#layout-list,
#layout-content {
  background: var(--bg) !important;
  border-color: var(--border) !important;
}

.scroller,
.content {
  background: transparent !important;
}

.formcontent,
.formcontainer,
.propform {
  background: var(--surface) !important;
}


/* ═══════════════════════════════════════════
   MAIL LIST
   ═══════════════════════════════════════════ */

.listing tbody td,
.listing li,
.messagelist tr td,
table.messagelist td {
  color: var(--text) !important;
  border-color: var(--border) !important;
  font-size: 14px !important;
}

.listing tbody tr:hover td,
.listing li:hover,
.messagelist tr:hover td {
  background: var(--surface-hover) !important;
}

.listing tbody tr.selected td,
.listing li.selected,
.messagelist tr.selected td {
  background: var(--brand-glow) !important;
  color: var(--text) !important;
}

.listing tbody tr.focused td,
.listing li.focused,
.messagelist tr.focused td {
  box-shadow: inset 3px 0 0 var(--brand) !important;
}

/* Unread */
.messagelist tr.unread td {
  font-weight: 700 !important;
  color: #fff !important;
}

/* Flagged */
.messagelist tr.flagged td .flag {
  color: var(--yellow) !important;
}

/* Message subject */
.messagelist td.subject span {
  font-size: 14px !important;
}

/* Threads */
.messagelist .threads .branch {
  border-color: var(--border-hover) !important;
}

/* Folder list */
.folderlist li,
.treelist li {
  color: var(--text) !important;
}

.folderlist li a,
.treelist li a {
  color: var(--text) !important;
  font-size: 14px !important;
}

.folderlist li.selected > a,
.treelist li.selected > a {
  background: var(--brand-glow) !important;
  color: var(--brand) !important;
  font-weight: 600 !important;
}

.folderlist li a:hover,
.treelist li a:hover {
  background: var(--surface-hover) !important;
}

/* Unread count badges */
.folderlist .unreadcount,
.treelist .unreadcount {
  background: var(--brand) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  border-radius: 9999px !important;
  min-width: 20px;
  padding: 1px 6px !important;
}


/* ═══════════════════════════════════════════
   MESSAGE VIEW
   ═══════════════════════════════════════════ */

.message-header,
.message-headers,
#message-header {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

.message-header td,
.message-headers td {
  color: var(--text) !important;
  font-size: 14px !important;
}

.message-header td.header-title,
.message-headers td.header-title {
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}

#message-objects,
.message-part,
.message-htmlpart {
  background: var(--surface) !important;
}


/* ═══════════════════════════════════════════
   FORMS / INPUTS
   ═══════════════════════════════════════════ */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
textarea,
select {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1.5px solid var(--border-hover) !important;
  border-radius: 10px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  padding: 0.6rem 0.9rem !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-glow) !important;
  outline: none !important;
}

label {
  color: var(--text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}


/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */

.btn-primary,
.btn.submit,
.formbuttons .btn.submit,
.button.mainaction,
input.button.mainaction {
  background: var(--brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 0.6rem 1.5rem !important;
  box-shadow: 0 4px 16px rgba(124, 92, 252, 0.3) !important;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.btn-primary:hover,
.btn.submit:hover,
.button.mainaction:hover {
  background: var(--brand-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(124, 92, 252, 0.4) !important;
}

.btn-secondary,
.btn.cancel,
.button:not(.mainaction) {
  background: var(--surface-raised) !important;
  color: var(--text) !important;
  border: 1.5px solid var(--border-hover) !important;
  border-radius: 10px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
}

.btn-secondary:hover,
.btn.cancel:hover {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  background: var(--brand-glow) !important;
}

.btn-danger {
  background: var(--red) !important;
  color: #fff !important;
  border: none !important;
}


/* ═══════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════ */

.task-login {
  background: var(--bg) !important;
  position: relative;
}

.task-login #layout-content {
  background: transparent !important;
}

.task-login #logo {
  filter: brightness(0.9) !important;
  opacity: 1 !important;
  margin-bottom: 1rem;
}

.task-login #login-form {
  background: var(--surface) !important;
  border: 1px solid var(--border-hover) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
  padding: 2rem !important;
  max-width: 420px;
}

.task-login .propform td {
  padding: 0.5rem 0 !important;
}

.task-login .propform label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
}

.task-login .propform input {
  font-size: 16px !important;
  padding: 0.7rem 1rem !important;
}

.task-login #rcmloginsubmit,
.task-login .btn-primary,
.task-login .button.mainaction {
  width: 100% !important;
  padding: 0.8rem !important;
  font-size: 16px !important;
  border-radius: 12px !important;
  margin-top: 0.5rem;
}

.task-login #login-footer {
  color: var(--text-muted) !important;
  font-size: 13px !important;
}

.task-login #login-footer a {
  color: var(--text-muted) !important;
}


/* ═══════════════════════════════════════════
   DIALOG / POPUP
   ═══════════════════════════════════════════ */

.popupmenu,
.popup,
.ui-dialog,
.modal-content,
.dropdown-menu {
  background: var(--surface) !important;
  border: 1px solid var(--border-hover) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
  color: var(--text) !important;
}

.popupmenu li a,
.dropdown-menu a {
  color: var(--text) !important;
  font-size: 14px !important;
}

.popupmenu li a:hover,
.dropdown-menu a:hover {
  background: var(--surface-hover) !important;
  color: var(--brand) !important;
}

.ui-dialog .ui-dialog-titlebar {
  background: var(--surface-raised) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}


/* ═══════════════════════════════════════════
   COMPOSE
   ═══════════════════════════════════════════ */

.compose-headers td,
#composebody,
#compose-body {
  color: var(--text) !important;
}

#composebody,
.mce-content-body {
  background: var(--surface) !important;
  color: var(--text) !important;
}


/* ═══════════════════════════════════════════
   SETTINGS / PREFERENCES
   ═══════════════════════════════════════════ */

.preferences-header,
.formcontent fieldset {
  border-color: var(--border) !important;
}

fieldset legend {
  color: var(--text) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

.listing thead td,
.listing thead th {
  background: var(--surface-raised) !important;
  color: var(--text-secondary) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ═══════════════════════════════════════════
   CONTACT / ADDRESSBOOK
   ═══════════════════════════════════════════ */

.contacthead,
.contactphoto {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}


/* ═══════════════════════════════════════════
   SCROLLBARS
   ═══════════════════════════════════════════ */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }


/* ═══════════════════════════════════════════
   MISC OVERRIDES
   ═══════════════════════════════════════════ */

/* Page navigation */
.pagenav span,
.pagenav a {
  color: var(--text-secondary) !important;
}

.pagenav a:hover { color: var(--text) !important; }

/* Quota */
.quota .bar {
  background: var(--surface-raised) !important;
  border-radius: 9999px !important;
  overflow: hidden;
}

/* Links */
a { color: var(--brand) !important; }
a:hover { color: var(--accent) !important; }

/* Footer */
#layout > div > .footer {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

/* Watermark */
.watermark { opacity: 0.03 !important; }

/* Selection */
::selection {
  background: rgba(124, 92, 252, 0.3);
  color: #fff;
}

/* Splitter */
.splitter {
  background: var(--border) !important;
}

/* Navigation lists */
.navlist a {
  color: var(--text) !important;
  font-size: 14px !important;
}

.navlist a:hover {
  background: var(--surface-hover) !important;
}

.navlist a.selected {
  background: var(--brand-glow) !important;
  color: var(--brand) !important;
}

/* Section headers in settings */
.boxtitle,
.tabsbar a {
  color: var(--text) !important;
  font-weight: 600 !important;
}

.tabsbar a.selected {
  border-bottom-color: var(--brand) !important;
  color: var(--brand) !important;
}

.tabsbar {
  border-color: var(--border) !important;
}