/* ModernX skin override: modern, clean, stable */
:root {
  --mx-bg: #f4f6fb;
  --mx-panel: #ffffff;
  --mx-panel-soft: #f7f9fd;
  --mx-border: #e3e8f2;
  --mx-text: #1f2937;
  --mx-muted: #6b7280;
  --mx-accent: #6d4dff;
  --mx-accent-soft: rgba(109, 77, 255, 0.12);
  --mx-hover: rgba(31, 41, 55, 0.04);
  --mx-radius: 12px;
}
html.dark-mode {
  --mx-bg: #161922;
  --mx-panel: #1d2230;
  --mx-panel-soft: #222839;
  --mx-border: #30384b;
  --mx-text: #e8ecf5;
  --mx-muted: #9aa4b7;
  --mx-accent: #8d73ff;
  --mx-accent-soft: rgba(141, 115, 255, 0.2);
  --mx-hover: rgba(255, 255, 255, 0.06);
}
html, body { background: var(--mx-bg) !important; color: var(--mx-text) !important; }
#layout, #layout-sidebar, #layout-list, #layout-content, #mailview-left, #mailview-right, #messagelistcontainer, .box, .popup-box, .dialog { background: var(--mx-panel) !important; border-color: var(--mx-border) !important; }
#layout-sidebar, #layout-list, #layout-content, #mailview-left, #mailview-right { border-radius: var(--mx-radius) !important; overflow: hidden; }
#layout { gap: 8px; padding: 8px; box-sizing: border-box; }
.header, .footer, .toolbar, #topnav, #taskmenu, .searchbar, .records-table thead td { background: var(--mx-panel-soft) !important; border-color: var(--mx-border) !important; }
#taskmenu a, #topnav a, .toolbar a, a.button, .btn, .iconbutton, #mailboxlist li a, .listing li a { color: var(--mx-text) !important; border-radius: 10px !important; }
#taskmenu a:hover, #topnav a:hover, .toolbar a:hover, a.button:hover, .btn:hover, .iconbutton:hover, #mailboxlist li a:hover, .listing li a:hover, .listing tbody tr:hover td { background: var(--mx-hover) !important; }
#taskmenu a.selected, #topnav a.button-selected, .toolbar a.selected, .menu a.active, #mailboxlist li.selected > a, .listing li.selected, .listing tbody tr.selected td, .listing li.checked, .listing tbody tr.checked td { background: var(--mx-accent-soft) !important; color: var(--mx-accent) !important; }
.searchbar { border-bottom: 1px solid var(--mx-border) !important; }
input, textarea, select, .form-control, .searchbar input { background: color-mix(in srgb, var(--mx-panel) 90%, var(--mx-bg) 10%) !important; border-color: var(--mx-border) !important; color: var(--mx-text) !important; border-radius: 10px !important; }
input:focus, textarea:focus, select:focus, .form-control:focus, .searchbar input:focus { border-color: var(--mx-accent) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--mx-accent) 30%, transparent) !important; }
.btn-primary, .button.mainaction, .mainaction { background: var(--mx-accent) !important; border-color: var(--mx-accent) !important; color: #fff !important; border-radius: 10px !important; }
.secondary-text, .hint, .quota, #quotadisplay, .records-table .date, .records-table .size { color: var(--mx-muted) !important; }


/* Light Theme Polish */
html:not(.dark-mode) body {
  background: linear-gradient(180deg, #f6f8fd 0%, #eef3fb 100%) !important;
}

html:not(.dark-mode) #layout {
  gap: 10px;
  padding: 10px;
}

html:not(.dark-mode) #layout-sidebar,
html:not(.dark-mode) #layout-list,
html:not(.dark-mode) #layout-content,
html:not(.dark-mode) #mailview-left,
html:not(.dark-mode) #mailview-right,
html:not(.dark-mode) #messagelistcontainer,
html:not(.dark-mode) .box,
html:not(.dark-mode) .popup-box,
html:not(.dark-mode) .dialog {
  box-shadow: 0 8px 24px rgba(53, 76, 122, 0.07) !important;
  border-color: #dfe6f4 !important;
}

html:not(.dark-mode) .header,
html:not(.dark-mode) .footer,
html:not(.dark-mode) .toolbar,
html:not(.dark-mode) #topnav,
html:not(.dark-mode) #taskmenu,
html:not(.dark-mode) .searchbar,
html:not(.dark-mode) .records-table thead td {
  background: #f8faff !important;
}

html:not(.dark-mode) #taskmenu a,
html:not(.dark-mode) #topnav a,
html:not(.dark-mode) .toolbar a,
html:not(.dark-mode) a.button,
html:not(.dark-mode) .btn,
html:not(.dark-mode) .iconbutton {
  transition: background-color .15s ease, color .15s ease;
}

html:not(.dark-mode) #taskmenu a.selected,
html:not(.dark-mode) #topnav a.button-selected,
html:not(.dark-mode) .toolbar a.selected,
html:not(.dark-mode) .menu a.active {
  background: rgba(109, 77, 255, 0.14) !important;
  color: #5336d9 !important;
}

html:not(.dark-mode) #mailboxlist li a,
html:not(.dark-mode) .listing li a,
html:not(.dark-mode) .listing tbody tr td {
  border-radius: 10px !important;
}

html:not(.dark-mode) .listing tbody tr td {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

html:not(.dark-mode) .listing tbody tr:hover td,
html:not(.dark-mode) .listing li:hover {
  background: rgba(84, 106, 147, 0.06) !important;
}

html:not(.dark-mode) .listing tbody tr.selected td,
html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .listing li.checked {
  background: rgba(109, 77, 255, 0.12) !important;
  color: #3f2db9 !important;
}

html:not(.dark-mode) .searchbar input,
html:not(.dark-mode) input,
html:not(.dark-mode) textarea,
html:not(.dark-mode) select,
html:not(.dark-mode) .form-control {
  background: #ffffff !important;
}

html:not(.dark-mode) .btn-primary,
html:not(.dark-mode) .button.mainaction,
html:not(.dark-mode) .mainaction {
  background: linear-gradient(135deg, #7b5cff, #6244f6) !important;
  border-color: #6244f6 !important;
  box-shadow: 0 6px 16px rgba(98, 68, 246, 0.25) !important;
}


/* Left menu visual fix */
#layout-menu {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
}

#layout-menu #taskmenu {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 8px !important;
}

#layout-menu #taskmenu .special-buttons,
#layout-menu #taskmenu .action-buttons {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  background: transparent !important;
}

#layout-menu #taskmenu a {
  min-height: 36px !important;
  height: auto !important;
  padding: 6px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 3px !important;
}

#layout-menu #taskmenu a .inner {
  display: block !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

#layout-menu .scroller,
#layout-menu .listing {
  background: transparent !important;
}

html:not(.dark-mode) #layout-menu,
html:not(.dark-mode) #layout-menu #taskmenu,
html:not(.dark-mode) #layout-menu #taskmenu .special-buttons,
html:not(.dark-mode) #layout-menu #taskmenu .action-buttons {
  background: #f7f9fe !important;
}

html:not(.dark-mode) #layout-menu {
  border-right: 1px solid #dfe6f4 !important;
}

html.dark-mode #layout-menu,
html.dark-mode #layout-menu #taskmenu,
html.dark-mode #layout-menu #taskmenu .special-buttons,
html.dark-mode #layout-menu #taskmenu .action-buttons {
  background: #1b2130 !important;
}


/* Left menu bottom buttons + logo polish */
#layout-menu {
  display: flex !important;
  flex-direction: column !important;
}

#layout-menu .header,
#layout-menu .popover-header {
  padding: 10px 8px !important;
  background: transparent !important;
  border: 0 !important;
  height: auto !important;
  min-height: auto !important;
}

#layout-menu .header img,
#layout-menu .popover-header img {
  display: block;
  width: calc(100% - 8px);
  max-width: 88px;
  margin: 0 auto;
  padding: 6px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--mx-panel) 86%, var(--mx-bg) 14%);
  border: 1px solid var(--mx-border);
}

#layout-menu #taskmenu {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding-bottom: 8px !important;
}

#layout-menu #taskmenu > a,
#layout-menu #taskmenu > .main-buttons > a {
  flex: 0 0 auto !important;
}

#layout-menu #taskmenu .main-buttons {
  flex: 0 0 auto !important;
}

#layout-menu #taskmenu .special-buttons,
#layout-menu #taskmenu .action-buttons {
  position: static !important;
  margin-top: auto !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  border-top: 1px solid var(--mx-border) !important;
  padding-top: 8px !important;
}

#layout-menu #taskmenu a {
  min-height: 38px !important;
  padding: 7px 6px !important;
}

#layout-menu #taskmenu a .inner {
  max-width: 92% !important;
}


/* merged mailbox + app navigation list */
#mailboxlist li.mx-nav-divider {
  height: 0;
  margin: 8px 8px 6px;
  border-top: 1px solid var(--mx-border);
  list-style: none;
}

#mailboxlist li.mx-merged-item {
  list-style: none;
}

#mailboxlist li.mx-merged-item > a {
  display: flex;
  align-items: center;
  min-height: 38px;
  border-radius: 10px;
}

#mailboxlist li.mx-merged-item > a:before {
  margin-right: .55rem !important;
}

#taskmenu.mx-compacted > a,
#taskmenu.mx-compacted > .main-buttons > a,
#taskmenu.mx-compacted > .main-buttons li {
  display: none !important;
}


/* Mobile menu behavior fix: no permanent side strip */
html.layout-phone #layout-menu {
  display: none !important;
}

html.layout-phone #layout-menu.popover {
  display: block !important;
}

html.layout-phone #layout-menu.hidden {
  display: none !important;
}

/* Revert desktop-only flex menu rules on phone */
html.layout-phone #layout-menu,
html.layout-phone #layout-menu #taskmenu,
html.layout-phone #layout-menu #taskmenu a {
  display: initial !important;
}

html.layout-phone #layout-menu.popover #taskmenu,
html.layout-phone #layout-menu.popover #taskmenu a {
  display: block !important;
}


/* Mobile overlay menu spacing polish */
html.layout-phone #layout-menu.popover {
  padding: 8px 6px 10px !important;
  box-sizing: border-box !important;
}

html.layout-phone #layout-menu.popover #taskmenu {
  padding: 4px 0 8px !important;
}

html.layout-phone #layout-menu.popover #taskmenu a {
  min-height: 46px !important;
  padding: 10px 14px 10px 52px !important;
  line-height: 1.2 !important;
  position: relative !important;
}

html.layout-phone #layout-menu.popover #taskmenu a:before {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  text-align: center !important;
  margin: 0 !important;
}

html.layout-phone #layout-menu.popover #taskmenu a .inner {
  display: block !important;
  padding-right: 6px !important;
}


/* Mobile overlay unified button color */
html.layout-phone #layout-menu.popover #taskmenu a,
html.layout-phone #layout-menu.popover #taskmenu .special-buttons a,
html.layout-phone #layout-menu.popover #taskmenu .action-buttons a {
  background: #1d273a !important;
  border: 1px solid #2b3a55 !important;
}

html.layout-phone #layout-menu.popover #taskmenu a:hover,
html.layout-phone #layout-menu.popover #taskmenu .special-buttons a:hover,
html.layout-phone #layout-menu.popover #taskmenu .action-buttons a:hover {
  background: #22314a !important;
}

html.layout-phone #layout-menu.popover #taskmenu a.selected,
html.layout-phone #layout-menu.popover #taskmenu a.active {
  background: #3f3b74 !important;
  border-color: #5a63c4 !important;
}


/* Mobile overlay menu gaps between buttons */
html.layout-phone #layout-menu.popover #taskmenu > a,
html.layout-phone #layout-menu.popover #taskmenu .main-buttons > a,
html.layout-phone #layout-menu.popover #taskmenu .main-buttons li,
html.layout-phone #layout-menu.popover #taskmenu .special-buttons > a,
html.layout-phone #layout-menu.popover #taskmenu .action-buttons > a {
  margin-bottom: 8px !important;
}

html.layout-phone #layout-menu.popover #taskmenu .special-buttons,
html.layout-phone #layout-menu.popover #taskmenu .action-buttons {
  padding-top: 6px !important;
}

html.layout-phone #layout-menu.popover #taskmenu a {
  border-radius: 12px !important;
}


/* Mobile overlay color fix per theme */
html:not(.dark-mode).layout-phone #layout-menu.popover #taskmenu a,
html:not(.dark-mode).layout-phone #layout-menu.popover #taskmenu .special-buttons a,
html:not(.dark-mode).layout-phone #layout-menu.popover #taskmenu .action-buttons a {
  background: #ffffff !important;
  border: 1px solid #d9e2f1 !important;
  color: #1f2a3d !important;
}

html:not(.dark-mode).layout-phone #layout-menu.popover #taskmenu a:before,
html:not(.dark-mode).layout-phone #layout-menu.popover #taskmenu .special-buttons a:before,
html:not(.dark-mode).layout-phone #layout-menu.popover #taskmenu .action-buttons a:before,
html:not(.dark-mode).layout-phone #layout-menu.popover #taskmenu a .inner {
  color: #1f2a3d !important;
  opacity: 1 !important;
}

html:not(.dark-mode).layout-phone #layout-menu.popover #taskmenu a.selected,
html:not(.dark-mode).layout-phone #layout-menu.popover #taskmenu a.active {
  background: rgba(109, 77, 255, 0.14) !important;
  border-color: #a69af7 !important;
  color: #4f3ad4 !important;
}

html:not(.dark-mode).layout-phone #layout-menu.popover #taskmenu a.selected:before,
html:not(.dark-mode).layout-phone #layout-menu.popover #taskmenu a.active:before,
html:not(.dark-mode).layout-phone #layout-menu.popover #taskmenu a.selected .inner,
html:not(.dark-mode).layout-phone #layout-menu.popover #taskmenu a.active .inner {
  color: #4f3ad4 !important;
}

html.dark-mode.layout-phone #layout-menu.popover #taskmenu a,
html.dark-mode.layout-phone #layout-menu.popover #taskmenu .special-buttons a,
html.dark-mode.layout-phone #layout-menu.popover #taskmenu .action-buttons a {
  background: #1d273a !important;
  border: 1px solid #2b3a55 !important;
  color: #e6ecf8 !important;
}

html.dark-mode.layout-phone #layout-menu.popover #taskmenu a:before,
html.dark-mode.layout-phone #layout-menu.popover #taskmenu .special-buttons a:before,
html.dark-mode.layout-phone #layout-menu.popover #taskmenu .action-buttons a:before,
html.dark-mode.layout-phone #layout-menu.popover #taskmenu a .inner {
  color: #e6ecf8 !important;
}