/**
 * MOK left nav — isolated from Elastic.
 * Elastic still styles mail/contacts/settings content.
 * This file owns #layout-menu.mok-sidebar only.
 * Roundcube IDs (#taskmenu, #mailboxlist) stay for JS; visual classes are mok-*.
 */

/* Neutralize Elastic list/toolbar chrome on wrappers — never target `a` here */
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav li:not(.mok-acct-item),
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav ul:not(.mok-acct-menu) {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
}

html.mok-skin #layout-menu.mok-sidebar {
  display: flex !important;
  flex-direction: column !important;
  width: var(--nav-width) !important;
  min-width: var(--nav-width) !important;
  max-width: var(--nav-width) !important;
  height: 100% !important;
  background: var(--surface) !important;
  z-index: 4;
}

html.mok-skin.layout-phone #layout-menu.mok-sidebar,
html.mok-skin.layout-small #layout-menu.mok-sidebar {
  width: min(320px, 88vw) !important;
  max-width: 88vw !important;
}

html.mok-skin:not(.layout-phone) #layout-menu.mok-sidebar .popover-header {
  display: none !important;
}

html.mok-skin.layout-phone #layout-menu.mok-sidebar .popover-header,
html.mok-skin.layout-small #layout-menu.mok-sidebar .popover-header {
  display: flex !important;
  background: var(--surface) !important;
}

html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
}

html.mok-skin #layout-menu.mok-sidebar .mok-nav-head {
  flex: 0 0 auto !important;
  padding: 16px 12px 10px !important;
}

html.mok-skin #layout-menu.mok-sidebar .mok-nav-scroll {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 2px 8px 8px !important;
}

html.mok-skin #layout-menu.mok-sidebar .mok-nav-foot {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  gap: 2px !important;
  padding: 8px 8px 10px !important;
  border-top: 1px solid var(--line) !important;
  background: var(--surface) !important;
}

html.mok-skin #layout-menu.mok-sidebar .mok-brand {
  text-align: center !important;
  margin: 0 0 10px !important;
}

html.mok-skin #layout-menu.mok-sidebar .mok-logo {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: var(--accent) !important;
  display: grid !important;
  place-items: center !important;
  margin: 4px auto 10px !important;
}

html.mok-skin #layout-menu.mok-sidebar .mok-logo svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  stroke: #fff !important;
  fill: none !important;
}

html.mok-skin #layout-menu.mok-sidebar .mok-brand #logo,
html.mok-skin #layout-menu.mok-sidebar .mok-brand img {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

html.mok-skin #layout-menu.mok-sidebar .mok-compose-wrap {
  display: block !important;
  width: 100% !important;
}

html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-compose-btn,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-compose-btn:hover,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-compose-btn:focus,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-compose-btn.selected {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 42px !important;
  padding: 0 14px !important;
  margin: 0 0 4px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
  line-height: 42px !important;
}

html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-compose-btn:hover,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-compose-btn:focus {
  background: var(--accent-hover) !important;
}

html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-compose-btn:before {
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-compose-btn span.inner {
  display: inline !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav > .mok-nav-scroll > a:not(.mok-compose-btn),
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 40px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  color: var(--text-2) !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 40px !important;
  text-decoration: none !important;
}

html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-nav-item:before {
  float: none !important;
  width: 18px !important;
  height: auto !important;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: inherit !important;
}

html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-nav-item span.inner {
  display: inline !important;
  font-size: 14px !important;
  font-weight: inherit !important;
  line-height: 1 !important;
}

html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-nav-item:hover,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-nav-item:focus {
  background: var(--hover) !important;
  color: var(--text) !important;
}

html.mok-skin.task-mail #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-nav-item.mail.selected {
  background: transparent !important;
  color: var(--text) !important;
  font-weight: 650 !important;
}

html.mok-skin.task-addressbook #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-nav-item.contacts.selected,
html.mok-skin.task-settings #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-nav-item.settings.selected {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-nav-item.logout,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-nav-item.logout:hover {
  color: var(--danger) !important;
  background: transparent !important;
}

html.mok-skin #layout-menu.mok-sidebar .mok-nav-group > .mok-nav-branch {
  display: none;
  padding: 2px 0 4px 8px !important;
}

html.mok-skin #layout-menu.mok-sidebar .mok-nav-group.open > .mok-nav-branch,
html.mok-skin.task-mail #layout-menu.mok-sidebar #mok-mail-group > .mok-nav-branch,
html.mok-skin.task-addressbook #layout-menu.mok-sidebar #mok-contacts-group > .mok-nav-branch,
html.mok-skin.task-settings #layout-menu.mok-sidebar #mok-settings-group > .mok-nav-branch {
  display: block;
}

html.mok-skin #layout-menu.mok-sidebar .mok-tree,
html.mok-skin #layout-menu.mok-sidebar #mailboxlist,
html.mok-skin #layout-menu.mok-sidebar #directorylist,
html.mok-skin #layout-menu.mok-sidebar #savedsearchlist,
html.mok-skin #layout-menu.mok-sidebar #settings-menu {
  display: block !important;
  list-style: none !important;
  background: transparent !important;
}

html.mok-skin #layout-menu.mok-sidebar .mok-tree li,
html.mok-skin #layout-menu.mok-sidebar #mailboxlist li,
html.mok-skin #layout-menu.mok-sidebar #directorylist li,
html.mok-skin #layout-menu.mok-sidebar #savedsearchlist li,
html.mok-skin #layout-menu.mok-sidebar #settings-menu li {
  display: block !important;
  line-height: 0 !important;
}

html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav .mok-tree a,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #mailboxlist a,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #directorylist a,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #savedsearchlist a,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #settings-menu a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 38px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  color: var(--text-2) !important;
  background: transparent !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 38px !important;
  overflow: hidden !important;
}

html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav .mok-tree a:before,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #mailboxlist a:before,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #directorylist a:before,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #savedsearchlist a:before,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #settings-menu a:before {
  float: none !important;
  width: 16px !important;
  height: auto !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: inherit !important;
}

html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav .mok-tree a span.inner,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #mailboxlist a span.inner,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #directorylist a span.inner,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #settings-menu a span.inner {
  display: inline !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav .mok-tree a:hover,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #mailboxlist a:hover,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #directorylist a:hover,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #settings-menu a:hover {
  background: var(--hover) !important;
}

html.mok-skin #layout-menu.mok-sidebar #mailboxlist li.selected > a,
html.mok-skin #layout-menu.mok-sidebar #directorylist li.selected > a,
html.mok-skin #layout-menu.mok-sidebar #settings-menu li.selected > a,
html.mok-skin #layout-menu.mok-sidebar #settings-menu a.selected {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-weight: 650 !important;
}

html.mok-skin #layout-menu.mok-sidebar #mailboxlist li.unread > a {
  font-weight: 700 !important;
}

html.mok-skin #layout-menu.mok-sidebar #mailboxlist .unreadcount {
  margin-left: auto !important;
  min-width: 22px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: inline-grid !important;
  place-items: center !important;
  line-height: 20px !important;
}

html.mok-skin #layout-menu.mok-sidebar .treetoggle {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 20px !important;
  height: 38px !important;
}

/* Icons without Elastic `.menu` / `.folderlist` classes */
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-nav-item:before,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.mok-compose-btn:before,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #mailboxlist a:before,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #directorylist a:before,
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #settings-menu a:before {
  font-family: Icons !important;
  font-weight: 900 !important;
  font-style: normal !important;
  display: block !important;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.mail:before { content: "\f0e0" !important; }
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.contacts:before { content: "\f0c0" !important; }
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.settings:before { content: "\f013" !important; }
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.theme.dark:before { content: "\f186" !important; }
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.theme.light:before { content: "\f185" !important; }
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.about:before { content: "\f128" !important; }
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.logout:before { content: "\f011" !important; }
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav a.compose:before { content: "\f044" !important; }
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #mailboxlist a:before { content: "\f07b" !important; }
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #mailboxlist li.inbox > a:before { content: "\f01c" !important; }
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #mailboxlist li.sent > a:before { content: "\f1d8" !important; }
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #mailboxlist li.drafts > a:before { content: "\f044" !important; }
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #mailboxlist li.trash > a:before { content: "\f2ed" !important; }
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #mailboxlist li.junk > a:before { content: "\f06d" !important; }
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #directorylist a:before { content: "\f2b9" !important; }
html.mok-skin #layout-menu.mok-sidebar #taskmenu.mok-nav #settings-menu a:before { content: "\f013" !important; }