/* ================================================================
   Opera Webmail — Theme v7
   Brand  : Egyptian Opera  |  Powered by Secure Smart Systems
   Primary: #D4AF37 (Gold)  |  Dark Base: #1A1208
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ---------------------------------------------------------------- VARIABLES */
:root {
  --brand:       #D4AF37;
  --brand-dark:  #8B6914;
  --brand-hover: #B8960C;

  --bg-page:     #F5F2EA;
  --bg-sidebar:  #FFFFFF;
  --bg-list:     #FDFAF4;
  --bg-content:  #FFFFFF;
  --bg-header:   #1A1208;
  --bg-taskmenu: #110E05;
  --bg-toolbar:  #1A1208;
  --bg-hover:    #F5EDD3;
  --bg-selected: #F0E3B0;
  --bg-input:    #FFFFFF;
  --bg-search:   #FAF7EE;

  --text:        #1A1208;
  --text-sub:    #6B5D3F;
  --text-wh:     #FFFFFF;
  --text-unread: #1A1208;
  --text-link:   #9A7B1A;
  --text-sel:    #6B4C00;

  --border:      #E8DFC4;
  --border-in:   #C8B88A;

  --btn-bg:      #D4AF37;
  --btn-hv:      #B8960C;

  --sc-bg:       #F0EAD6;
  --sc-th:       #C8B88A;
}

html.dark-mode {
  --brand:       #D4AF37;
  --brand-dark:  #E8C84A;
  --brand-hover: #C9A020;

  --bg-page:     #0F0D06;
  --bg-sidebar:  #1A1810;
  --bg-list:     #161409;
  --bg-content:  #0F0D06;
  --bg-header:   #0A0803;
  --bg-taskmenu: #070500;
  --bg-toolbar:  #0A0803;
  --bg-hover:    #2A2410;
  --bg-selected: #3A2E08;
  --bg-input:    #201C0E;
  --bg-search:   #1A1810;

  --text:        #E8DFC4;
  --text-sub:    #9A8C6A;
  --text-wh:     #FFFFFF;
  --text-unread: #F5EDD3;
  --text-link:   #D4AF37;
  --text-sel:    #E8C84A;

  --border:      #2E2810;
  --border-in:   #4A3E1C;

  --btn-bg:      #D4AF37;
  --btn-hv:      #C9A020;

  --sc-bg:       #1A1810;
  --sc-th:       #4A3E1C;
}

/* ---------------------------------------------------------------- BASE */
*, body, button, input, select, textarea, .popover {
  font-family: 'Inter','Segoe UI',-apple-system,sans-serif !important;
}
body   { background: var(--bg-page) !important; color: var(--text) !important; }
#layout { background: var(--bg-page) !important; }
a      { color: var(--text-link) !important; }
a:hover { color: var(--brand-dark) !important; }

/* ---------------------------------------------------------------- SCROLLBARS */
html:not(.touch) ::-webkit-scrollbar { width:5px; height:5px; }
html:not(.touch) ::-webkit-scrollbar-track { background: var(--sc-bg); }
html:not(.touch) ::-webkit-scrollbar-thumb { background: var(--sc-th); border-radius:3px; }
html { scrollbar-color: var(--sc-th) var(--sc-bg); }

/* ================================================================
   TASK MENU — slimmer (52px desktop, 38px tablet)
   ================================================================ */
#layout-menu, #taskmenu {
  background: var(--bg-taskmenu) !important;
  border-right: 1px solid rgba(212,175,55,0.10) !important;
}
/* Override base skin widths */
@media screen and (min-width: 481px) {
  #layout-menu { width: 52px !important; }
}
@media screen and (min-width: 1025px) {
  #layout-menu { width: 62px !important; }
}
@media screen and (min-width: 481px) and (max-width: 1024px) {
  #taskmenu a { width: 52px !important; height: 38px !important; font-size: 1.1rem !important; padding: 0 !important; }
  #taskmenu a::before { line-height: 38px !important; }
}
@media screen and (min-width: 1025px) {
  #taskmenu a { width: 62px !important; font-size: 0.85rem !important; }
  #taskmenu a span.inner { font-size: 0.72rem !important; padding: 0 2px !important; }
}

#layout-menu .popover-header {
  background: var(--bg-taskmenu) !important;
  border-bottom: 1px solid rgba(212,175,55,0.12) !important;
}
#layout-menu .popover-header img {
  max-height: 28px !important; max-width: 50px !important;
  padding: 3px !important; filter: brightness(0) invert(1) !important;
}
#taskmenu a, #taskmenu a span, #taskmenu a::before { color: rgba(255,255,255,0.65) !important; }
#taskmenu a:hover  { background: rgba(212,175,55,0.12) !important; }
#taskmenu a:hover, #taskmenu a:hover::before,
#taskmenu a.selected, #taskmenu a.selected::before { color: #D4AF37 !important; }
#taskmenu a.selected { background: rgba(212,175,55,0.14) !important; border-left: 2px solid #D4AF37 !important; }
#taskmenu .action-buttons a,
#taskmenu .action-buttons a::before { color: #D4AF37 !important; }
#taskmenu a.logout, #taskmenu a.logout::before { color: #ff9090 !important; }
#taskmenu a.logout:hover, #taskmenu a.logout:hover::before { color: #ff5552 !important; }
#taskmenu .special-buttons { background: rgba(0,0,0,0.30) !important; }

/* ================================================================
   HEADER BARS — slimmer (34px), gold trim at bottom
   ================================================================ */
#layout > div > .header,
#layout-sidebar > .header,
#layout-list > .header,
#layout-content > .header {
  background: var(--bg-header) !important;
  border-bottom: 1px solid rgba(212,175,55,0.25) !important;
  color: var(--text-wh) !important;
  height: 34px !important;
  min-height: 34px !important;
  line-height: 34px !important;
}
/* White everything in header */
#layout > div > .header a.button,   #layout > div > .header a.button::before,
#layout > div > .header a.button span, #layout > div > .header .header-title,
#layout-sidebar > .header a.button, #layout-sidebar > .header a.button::before,
#layout-sidebar > .header .header-title,
#layout-list > .header a.button,    #layout-list > .header a.button::before,
#layout-list > .header .header-title,
#layout-content > .header a.button, #layout-content > .header a.button::before,
#layout-content > .header .header-title { color: var(--text-wh) !important; }

/* ================================================================
   TOOLBAR — slimmer (34px), dark with gold active
   ================================================================ */
.menu.toolbar {
  background: var(--bg-toolbar) !important;
  border-bottom: 1px solid rgba(212,175,55,0.20) !important;
}
/* Reduce toolbar height */
#layout-content .menu.toolbar a,
#layout-list .menu.toolbar a {
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 4px !important;
  min-width: 24px !important;
  max-width: 24px !important;
}

#layout-content .menu.toolbar a::before,
#layout-list .menu.toolbar a::before {
  height: 34px !important;
  font-size: 13px !important;
  line-height: 34px !important;
}

/* ALL toolbar icons/labels */
.menu.toolbar a,
.menu.toolbar a span,
.menu.toolbar a span.inner,
.menu.toolbar li a,
.menu.toolbar a::before,
.menu.toolbar li a::before { color: rgba(255,255,255,0.80) !important; }
.menu.toolbar a span.inner { font-size: 0.78rem !important; }
.menu.toolbar a:hover, .menu.toolbar a:focus { background: rgba(212,175,55,0.15) !important; }
.menu.toolbar a:hover::before, .menu.toolbar a:focus::before { color: #D4AF37 !important; }
.menu.toolbar a.disabled, .menu.toolbar a.disabled::before { color: rgba(255,255,255,0.28) !important; }
.menu.toolbar a.selected, .menu.toolbar a.selected::before { color: #E8C84A !important; }

/* ================================================================
   LOGIN PAGE  —  Two-Column Premium Design
   Background: /skins/3s_mail/images/login_bg.jpg (replace anytime)
   Left: Opera branding panel  |  Right: Dark login card
   ================================================================ */

/* ─── CRITICAL: transparent + full height so flex centering works ─── */
body.task-login #layout,
html.dark-mode body.task-login #layout {
  background: transparent !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

body.task-login,
html.dark-mode body.task-login {
  background-color: #0D0A04 !important;
  background-image: url('/skins/3s_mail/images/login_bg.jpg') !important;
  background-size: auto 100% !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  min-height: 100vh !important;
  height: 100vh !important;
}

/* Hide nav panels on login page */
body.task-login #layout-menu,
body.task-login #layout-sidebar,
body.task-login #layout-list { display: none !important; }

/* Full-viewport layout */
body.task-login #layout-content,
html.dark-mode body.task-login #layout-content {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Vignette — lighter on left (artwork shows), darker on right (card reads cleanly) */
body.task-login #layout-content::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.50) 55%, rgba(0,0,0,0.78) 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
body.task-login #layout-content > * { position: relative !important; z-index: 1 !important; }

/* Wrapper is a transparent pass-through — layout handled by #layout-content */
.login-wrapper { display: contents !important; }

/* Hide left branding panel — background already has the Opera artwork */
.login-left-panel { display: none !important; }

/* ═══════════════════════════════════════════════════
   RIGHT LOGIN CARD
   ═══════════════════════════════════════════════════ */
body.task-login #login-form {
  width: 560px !important;
  min-width: 520px !important;
  max-width: 560px !important;  /* override elastic skin's 320px cap */
  flex-shrink: 0 !important;
  margin-left: auto !important;
  margin-right: 12% !important;
  margin-bottom: 4% !important;
  background: rgba(13,11,8,0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(212,175,55,0.22) !important;
  border-radius: 24px !important;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.80),
    0 0 0 1px rgba(212,175,55,0.06),
    inset 0 1px 0 rgba(212,175,55,0.10) !important;
  padding: 48px 46px 42px 46px !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  max-height: calc(100vh - 80px) !important;
  overflow-y: auto !important;
}

/* Subtle top glow behind the logo */
body.task-login #login-form::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 260px !important;
  height: 160px !important;
  background: radial-gradient(ellipse, rgba(212,175,55,0.14) 0%, rgba(212,175,55,0.03) 55%, transparent 75%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
body.task-login #login-form > * { position: relative !important; z-index: 1 !important; }

/* ── CARD HEADER ── */
.login-card-header {
  text-align: center !important;
  margin-bottom: 30px !important;
}

/* ── DECORATIVE CORNER ORNAMENTS ── */
.lc-corner {
  position: absolute !important;
  width: 54px !important;
  height: 54px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.lc-tl { top: 12px !important; left: 12px !important; }
.lc-tr { top: 12px !important; right: 12px !important; transform: scaleX(-1) !important; }
.lc-bl { bottom: 12px !important; left: 12px !important; transform: scaleY(-1) !important; }
.lc-br { bottom: 12px !important; right: 12px !important; transform: scale(-1) !important; }
.lc-corner::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54' fill='none'%3E%3Cpath d='M6,48 L6,6 L48,6' stroke='%23D4AF37' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='6' cy='6' r='3.5' fill='%23D4AF37'/%3E%3Ccircle cx='48' cy='6' r='2' fill='%23D4AF37' opacity='0.7'/%3E%3Ccircle cx='6' cy='48' r='2' fill='%23D4AF37' opacity='0.7'/%3E%3Cpath d='M6,22 Q22,22 22,6' stroke='%23D4AF37' stroke-width='0.9' opacity='0.45' stroke-linecap='round'/%3E%3Ccircle cx='14' cy='6' r='1.2' fill='%23D4AF37' opacity='0.55'/%3E%3Ccircle cx='6' cy='14' r='1.2' fill='%23D4AF37' opacity='0.55'/%3E%3Ccircle cx='30' cy='6' r='1.2' fill='%23D4AF37' opacity='0.45'/%3E%3Ccircle cx='6' cy='30' r='1.2' fill='%23D4AF37' opacity='0.45'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

/* Login card logo — CSS background so path resolves from the CSS file, not from template engine */
.login-card-logo {
  display: block !important;
  width: 180px !important;
  height: 110px !important;
  background-image: url('/skins/3s_mail/images/login_logo.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin: 0 auto 18px auto !important;
  filter: drop-shadow(0 0 14px rgba(212,175,55,0.45)) !important;
}

/* Title */
.login-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: 0.2px !important;
  font-family: 'Inter','Segoe UI',sans-serif !important;
}

/* Subtitle — clean gold, no decorators */
.login-subtitle {
  font-size: 13px !important;
  color: #C9A020 !important;
  margin: 0 0 16px 0 !important;
  font-weight: 400 !important;
  letter-spacing: 0.3px !important;
  font-family: 'Inter','Segoe UI',sans-serif !important;
}
.login-subtitle::before { content: none !important; }
.login-subtitle::after  { content: none !important; }

/* Gold divider line */
.login-divider-line {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.50), transparent) !important;
  width: 90% !important;
  margin: 0 auto !important;
}

/* ── TABLE STRUCTURE ── */
body.task-login #login-form table,
body.task-login #login-form tbody { display: block !important; width: 100% !important; }
body.task-login #login-form tr {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 18px !important;
}
body.task-login #login-form td {
  display: block !important;
  padding: 0 !important;
  border: none !important;
  width: 100% !important;
}

/* ── FIELD LABELS ── */
body.task-login td.title,
body.task-login #login-form label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.60) !important;
  margin-bottom: 7px !important;
  display: block !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

/* ── DARK INPUTS WITH ICON ── */
body.task-login .form-control,
body.task-login input[type="text"],
body.task-login input[type="password"],
body.task-login input[type="email"] {
  display: block !important;
  width: 100% !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(212,175,55,0.28) !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  caret-color: #D4AF37 !important;
  box-shadow: none !important;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important;
  box-sizing: border-box !important;
}
/* Person icon for text/email inputs */
body.task-login input[type="text"],
body.task-login input[type="email"] {
  padding: 13px 16px 13px 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D4AF37'%3E%3Cpath d='M12 12c2.66 0 8 1.34 8 4v2H4v-2c0-2.66 5.34-4 8-4zm0-2a4 4 0 100-8 4 4 0 000 8z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  background-size: 18px 18px !important;
}
/* Lock icon for password input */
body.task-login input[type="password"] {
  padding: 13px 16px 13px 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D4AF37'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM15 8H9V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  background-size: 18px 18px !important;
}
body.task-login input[type="text"]:focus,
body.task-login input[type="password"]:focus,
body.task-login input[type="email"]:focus {
  background-color: rgba(255,255,255,0.09) !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.14), 0 0 12px rgba(212,175,55,0.07) !important;
  outline: none !important;
}
body.task-login input::placeholder,
body.task-login .form-control::placeholder { color: rgba(255,255,255,0.28) !important; }
body.task-login .input-group-text { display: none !important; }

/* Autofill override */
body.task-login input:-webkit-autofill,
body.task-login input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1A180E inset !important;
  -webkit-text-fill-color: #FFFFFF !important;
  caret-color: #D4AF37 !important;
  border-color: rgba(212,175,55,0.48) !important;
}

/* ── GOLD SUBMIT BUTTON WITH ARROW ── */
body.task-login .formbuttons { width: 100% !important; margin-top: 6px !important; }
body.task-login #rcmloginsubmit,
body.task-login input[type="submit"],
body.task-login button[type="submit"] {
  display: block !important;
  width: 100% !important;
  background: linear-gradient(135deg, #B8960C 0%, #D4AF37 42%, #E8C84A 68%, #C9A020 100%) !important;
  border: none !important;
  color: #0A0800 !important;
  border-radius: 10px !important;
  padding: 15px 20px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: box-shadow 0.25s ease, transform 0.15s ease !important;
  box-shadow: 0 6px 28px rgba(212,175,55,0.42), 0 2px 8px rgba(0,0,0,0.30) !important;
  margin-top: 4px !important;
  position: relative !important;
}
body.task-login #rcmloginsubmit::before { display: none !important; }
body.task-login #rcmloginsubmit::after {
  content: '→' !important;
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  font-family: 'Inter',sans-serif !important;
}
body.task-login #rcmloginsubmit:hover,
body.task-login input[type="submit"]:hover,
body.task-login button[type="submit"]:hover {
  box-shadow: 0 10px 40px rgba(212,175,55,0.60), 0 4px 14px rgba(0,0,0,0.35) !important;
  transform: translateY(-1px) !important;
}
body.task-login #rcmloginsubmit:active { transform: translateY(0) !important; }

/* ── OR DIVIDER ── */
.login-or-divider {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 20px 0 14px 0 !important;
}
.login-or-divider::before,
.login-or-divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: rgba(212,175,55,0.22) !important;
}
.login-or-divider span {
  color: rgba(255,255,255,0.35) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
}

/* ── LOGIN FOOTER ── */
#login-footer { color: #9A8C6A !important; font-size: 12px; margin-top: 20px; text-align: center; }
#login-footer a { color: var(--brand) !important; }
#login-footer > div { display: none !important; }
.productname, .version { display: none !important; }

body.task-login #login-footer {
  margin-top: 4px !important;
  text-align: center !important;
}
.login-powered {
  font-size: 11px !important;
  color: rgba(255,255,255,0.28) !important;
  margin: 0 !important;
  letter-spacing: 0.3px !important;
}
.login-powered strong {
  color: rgba(212,175,55,0.55) !important;
  font-weight: 600 !important;
}

/* ── MOBILE: center card, stack background ── */
@media screen and (max-width: 700px) {
  body.task-login,
  html.dark-mode body.task-login {
    background-size: cover !important;
    background-position: center top !important;
    height: auto !important;
  }
  body.task-login #layout-content {
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
    min-height: 100vh !important;
    padding: 20px !important;
  }
  body.task-login #login-form {
    width: 100% !important;
    max-width: 400px !important;
    min-width: unset !important;
    border-radius: 16px !important;
    max-height: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ================================================================
   SIDEBAR
   ================================================================ */
#layout-sidebar {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border) !important;
}
#layout-sidebar > .footer { background: var(--bg-sidebar) !important; border-top: 1px solid var(--border) !important; }

.folderlist li, .listing li, .listing tbody td { border-color: var(--border) !important; }
.folderlist li a, #layout-sidebar .listing li a { color: var(--text) !important; }
.folderlist li a::before { color: var(--text-sub) !important; }
.folderlist li > a:hover { background: var(--bg-hover) !important; }
.folderlist li.selected > a,
.folderlist li.mailbox.selected > a {
  background: var(--bg-selected) !important;
  color: var(--text-sel) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--brand) !important;
}
.folderlist li.mailbox .unreadcount {
  background: var(--brand) !important;
  color: #1A1208 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}
.folderlist li.mailbox.recent > a { color: var(--brand-dark) !important; font-weight: 700 !important; }

/* ================================================================
   MESSAGE LIST
   ================================================================ */
#layout-list { background: var(--bg-list) !important; border-right: 1px solid var(--border) !important; }
#layout-list > .footer { background: var(--bg-list) !important; border-top: 1px solid var(--border) !important; color: var(--text-sub) !important; }

.searchbar { background: var(--bg-search) !important; border-bottom: 1px solid var(--border) !important; }
.searchbar input { color: var(--text) !important; background: transparent !important; }
.searchbar form::before, .searchbar a, .searchbar a::before { color: var(--text-sub) !important; }

.messagelist td { color: var(--text) !important; border-color: var(--border) !important; }
.messagelist td.subject span.subject { color: var(--text) !important; }
.messagelist td.subject span.date,
.messagelist td.subject span.fromto,
.messagelist td.subject span.size { color: var(--text-sub) !important; }
.messagelist tr.unread td.subject span.subject { color: var(--text-unread) !important; font-weight: 700 !important; }
.messagelist tr:hover td { background: var(--bg-hover) !important; }
.messagelist tr.selected td { background: var(--bg-selected) !important; color: var(--text-sel) !important; }
.listing li.selected, .listing tr.selected td { background: var(--bg-selected) !important; color: var(--text-sel) !important; }
.listing li.selected > a { color: var(--text-sel) !important; }
.listing li > a:hover, .listing tr:hover td { background: var(--bg-hover) !important; }
.menu.pagenav a, .menu.pagenav a::before { color: var(--text-sub) !important; }

/* ================================================================
   READING PANE — NO background color on message body
   ================================================================ */
#layout-content { background: var(--bg-content) !important; }
#layout-content > .footer { background: var(--bg-content) !important; border-top: 1px solid var(--border) !important; }

/* Message body — white background ensures HTML email text is always readable */
#messagebody,
#message-content,
.message-part,
.message-htmlpart,
.message-part div,
.frame-content,
#layout-content .content { background: #FFFFFF !important; }

/* Message header */
#message-header {
  background: var(--bg-content) !important;
  padding: 16px !important;
  border-bottom: 1px solid var(--border) !important;
}
#message-header > .subject { color: var(--text) !important; font-size: 1.3rem !important; font-weight: 700 !important; }
#message-header span, #message-header td { color: var(--text) !important; }
#message-header .header-title { color: var(--text-sub) !important; font-weight: 600 !important; }
#message-header a { color: var(--text-link) !important; }
#message-header .header-links a { color: var(--text-link) !important; }

/* Remove sender avatar */
img.contactphoto,
#message-header img.contactphoto { display: none !important; }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn-primary { background: var(--btn-bg) !important; border-color: var(--btn-bg) !important; color: #1A1208 !important; border-radius: 4px !important; }
.btn-primary:hover, .btn-primary:focus { background: var(--btn-hv) !important; border-color: var(--btn-hv) !important; box-shadow: 0 0 0 3px rgba(212,175,55,0.28) !important; }
.btn-secondary { background: var(--bg-hover) !important; border-color: var(--border-in) !important; color: var(--text) !important; border-radius: 4px !important; }
.btn:focus { box-shadow: 0 0 0 3px rgba(212,175,55,0.28) !important; }
.floating-action-buttons a.button { background: var(--brand) !important; border-radius: 4px !important; }
.floating-action-buttons a.button::before { color: #1A1208 !important; }

/* ================================================================
   FORM CONTROLS
   ================================================================ */
.form-control { background: var(--bg-input) !important; color: var(--text) !important; border-color: var(--border-in) !important; border-radius: 4px !important; }
.form-control:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(212,175,55,0.20) !important; }
.form-control::placeholder { color: var(--text-sub) !important; }
.input-group-text { background: var(--bg-input) !important; border-color: var(--border-in) !important; color: var(--text-sub) !important; }

/* ================================================================
   POPOVERS / MENUS
   ================================================================ */
.popover { background: var(--bg-sidebar) !important; border-color: var(--border) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important; }
.popover-body { color: var(--text) !important; }
.popover .menu li a, .popover .menu li a::before { color: var(--text) !important; }
.popover .menu li a:not(.disabled):hover { background: var(--brand) !important; color: #1A1208 !important; }
.popover .menu li a:not(.disabled):hover::before { color: #1A1208 !important; }
.popupmenu .listing li > a:not(.disabled):hover { background: var(--brand) !important; color: #1A1208 !important; }
.popover .menu li.separator { background: var(--bg-hover) !important; color: var(--text-sub) !important; }
.ui-menu { background: var(--bg-sidebar) !important; border-color: var(--border) !important; }
.ui-menu .ui-state-active { background: var(--brand) !important; }

/* ================================================================
   DIALOGS
   ================================================================ */
.ui-dialog { border-color: var(--border) !important; }
.ui-dialog .ui-dialog-titlebar { background: var(--bg-header) !important; border-color: rgba(212,175,55,0.20) !important; }
.ui-dialog .ui-dialog-title { color: var(--text-wh) !important; }
.ui-dialog .ui-dialog-titlebar-close,
.ui-dialog .ui-dialog-titlebar-close::before { color: rgba(255,255,255,0.85) !important; }
.ui-dialog .ui-dialog-content { background: var(--bg-content) !important; color: var(--text) !important; }
.ui-dialog .ui-dialog-buttonpane { background: var(--bg-content) !important; border-color: var(--border) !important; }

/* ================================================================
   DARK MODE
   ================================================================ */
html.dark-mode body { background: var(--bg-page) !important; color: var(--text) !important; }
html.dark-mode #layout { background: var(--bg-page) !important; }
html.dark-mode #layout > div > .footer { background: var(--bg-page) !important; border-color: var(--border) !important; }
html.dark-mode #layout-sidebar { background: var(--bg-sidebar) !important; }
html.dark-mode #layout-list    { background: var(--bg-list)    !important; }
html.dark-mode #layout-content { background: var(--bg-content) !important; }

html.dark-mode #layout > div > .header,
html.dark-mode #layout-sidebar > .header,
html.dark-mode #layout-list > .header,
html.dark-mode #layout-content > .header { background: var(--bg-header) !important; }

html.dark-mode .menu.toolbar { background: var(--bg-toolbar) !important; }
html.dark-mode .menu.toolbar a,
html.dark-mode .menu.toolbar a::before { color: rgba(255,255,255,0.80) !important; }
html.dark-mode .menu.toolbar a:hover,
html.dark-mode .menu.toolbar a:hover::before { background: rgba(212,175,55,0.15) !important; color: #D4AF37 !important; }
html.dark-mode .menu.toolbar a.disabled,
html.dark-mode .menu.toolbar a.disabled::before { color: rgba(255,255,255,0.28) !important; }

/* Dark mode — keep email body WHITE so HTML email text stays readable */
html.dark-mode #messagebody,
html.dark-mode #message-content,
html.dark-mode .message-part,
html.dark-mode .message-htmlpart,
html.dark-mode .frame-content,
html.dark-mode #layout-content .content {
  background: #FFFFFF !important;
  color: #1A1208 !important;
  border-radius: 4px !important;
}

html.dark-mode #message-header { background: var(--bg-content) !important; border-color: var(--border) !important; }
html.dark-mode #message-header > .subject { color: var(--text) !important; }
html.dark-mode #message-header span,
html.dark-mode #message-header td { color: var(--text) !important; }
html.dark-mode #message-header .header-title { color: var(--text-sub) !important; }
html.dark-mode #message-header a { color: var(--text-link) !important; }

html.dark-mode .searchbar { background: var(--bg-search) !important; border-color: var(--border) !important; }
html.dark-mode .searchbar input,
html.dark-mode .searchbar form::before,
html.dark-mode .searchbar a { color: var(--text-sub) !important; }

html.dark-mode .folderlist li a,
html.dark-mode .listing li a,
html.dark-mode .listing tbody td,
html.dark-mode .listing tbody td a { color: var(--text) !important; }
html.dark-mode .listing li,
html.dark-mode .listing tbody td { border-color: var(--border) !important; }

html.dark-mode .messagelist td { color: var(--text) !important; border-color: var(--border) !important; }
html.dark-mode .messagelist td.subject span.date,
html.dark-mode .messagelist td.subject span.fromto { color: var(--text-sub) !important; }
html.dark-mode .messagelist tr.unread td.subject span.subject { color: var(--text-unread) !important; }
html.dark-mode .messagelist tr:hover td { background: var(--bg-hover) !important; }

html.dark-mode .form-control, html.dark-mode input,
html.dark-mode select, html.dark-mode textarea {
  background: var(--bg-input) !important; color: var(--text) !important; border-color: var(--border-in) !important;
}
html.dark-mode .input-group-text { background: var(--bg-input) !important; border-color: var(--border-in) !important; color: var(--text-sub) !important; }

html.dark-mode .popover { background: var(--bg-sidebar) !important; border-color: var(--border) !important; }
html.dark-mode .popover-body { color: var(--text) !important; }
html.dark-mode .popover .menu li a,
html.dark-mode .popover .menu li a::before { color: var(--text) !important; }
html.dark-mode .popover .menu li.separator { background: transparent !important; color: var(--text-sub) !important; }
html.dark-mode .ui-menu { background: var(--bg-sidebar) !important; border-color: var(--border) !important; }
html.dark-mode .ui-widget-content,
html.dark-mode .ui-widget-header { background: var(--bg-sidebar) !important; }

html.dark-mode .ui-dialog .ui-dialog-content { background: var(--bg-content) !important; color: var(--text) !important; }
html.dark-mode .ui-dialog .ui-dialog-buttonpane { background: var(--bg-content) !important; border-color: var(--border) !important; }
html.dark-mode .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link { color: var(--text) !important; }

html.dark-mode .attachmentslist { background: var(--bg-hover) !important; border-color: var(--border) !important; }
html.dark-mode .attachmentslist li .attachment-name,
html.dark-mode .attachmentslist a { color: var(--text) !important; }

html.dark-mode .table { color: var(--text) !important; }
html.dark-mode .table td, html.dark-mode .table th,
html.dark-mode .table thead th { border-color: var(--border) !important; }
html.dark-mode .nav-tabs { border-color: var(--border) !important; }
html.dark-mode .nav-tabs .nav-link { color: var(--text) !important; border-color: transparent !important; }
html.dark-mode .nav-tabs .nav-link.active { background: var(--bg-content) !important; border-color: var(--border) !important; color: var(--brand) !important; }

html.dark-mode #messagestack div { background: #2A2410; color: #E8DFC4; }
html.dark-mode #messagestack .alert-success { background: #276e2c !important; }
html.dark-mode #messagestack .alert-danger  { background: #993331 !important; }
html.dark-mode #messagestack .alert-warning { background: #6B4C00 !important; }
html.dark-mode #messagestack .alert-info    { background: #3A2E08 !important; }

html.dark-mode .menu.pagenav a,
html.dark-mode .menu.pagenav a::before,
html.dark-mode .menu.pagenav .pagenav-text { color: var(--text-sub) !important; }

html.dark-mode #layout-sidebar > .footer,
html.dark-mode #layout-list > .footer,
html.dark-mode #layout-content > .footer { background: var(--bg-content) !important; border-color: var(--border) !important; }

/* ================================================================
   MOBILE
   ================================================================ */
@media screen and (max-width: 768px) {
  #layout > div > .header { background: var(--bg-header) !important; }
  #layout > div > .header a.button,
  #layout > div > .header a.button::before { color: #ffffff !important; }
  html.layout-phone .popover-header,
  html.layout-small .popover-header { background: var(--bg-header) !important; color: #fff !important; }
}

/* ================================================================
   MISC
   ================================================================ */
#rcmloginlogo, a[href*="roundcube.net"], .rcmloginlogo { display: none !important; }
.quota-widget .value { background: var(--brand) !important; }
.quota-widget .bar { border-color: var(--border) !important; }
html.dark-mode .quota-widget .bar { background: var(--border) !important; }
#rcmdraglayer { background: var(--bg-taskmenu) !important; color: #D4AF37 !important; }