/*
 * SIEL Roundcube skin overlay — Larry layout + black/lime brand.
 * Loaded after Larry styles (incl. styles.min.css / mail.min.css).
 */

:root {
  --siel-black: #0b0f14;
  --siel-black-deep: #070a0e;
  --siel-panel: #151b23;
  --siel-chrome: #121820;
  --siel-lime: #99ff00;
  --siel-lime-dim: #7acc00;
  --siel-lime-soft: rgba(153, 255, 0, 0.22);
  --siel-muted: #8b9aa5;
  --siel-ink: #0b0f14;
  --siel-sidebar: #f0f2f4;
  --siel-sidebar-border: #d5d8e0;
}

html, body, input, select, textarea, button {
  font-family: "Nunito Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/*
 * Chrome geometry (Larry): #header wraps #topline + #topnav.
 * overflow-x:hidden on #header makes topnav margin-bottom expand the header box
 * and cover #messagetoolbar — keep margin 0 and clear mainscreen explicitly.
 */
#header {
  background: transparent !important;
  border: none !important;
  /* Larry ui.js may set an explicit height that includes the clear <br> — let content define it */
  height: auto !important;
  overflow-x: hidden;
  overflow-y: visible !important;
}

/* Float-clear <br> after #topnav adds ~15px and covers #messagetoolbar */
#header > br {
  display: none !important;
  height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#topline {
  background: var(--siel-black-deep) !important;
  border-bottom: 1px solid rgba(153, 255, 0, 0.16) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  height: 18px !important;
  padding: 2px 10px 2px 12px !important;
  line-height: 18px !important;
  box-sizing: content-box !important;
}

#topline a,
#topline .username,
#topline .about-link,
#topline .support-link,
#topline .button-logout {
  color: rgba(255, 255, 255, 0.82) !important;
}
#topline a:hover {
  color: var(--siel-lime) !important;
}

#topnav {
  background: var(--siel-chrome) !important;
  border-bottom: 1px solid rgba(153, 255, 0, 0.20) !important;
  height: 40px !important;
  /* Critical: non-zero margin here is trapped by #header overflow and overlaps toolbar */
  margin-bottom: 0 !important;
  padding: 0 0 0 12px !important;
  box-sizing: content-box !important;
}

#taskbar {
  background: transparent !important;
  border: none !important;
}

#taskbar a {
  height: 28px !important;
  padding: 10px 10px 0 6px !important;
  box-sizing: content-box !important;
}

#taskbar a,
#taskbar a .button-inner {
  color: rgba(255, 255, 255, 0.88) !important;
}

#taskbar a.button-selected,
#taskbar a:hover,
#taskbar a:focus {
  color: var(--siel-lime) !important;
  background-color: rgba(153, 255, 0, 0.10) !important;
  background-image: none !important;
  box-shadow: inset 0 -2px 0 var(--siel-lime) !important;
}

#taskbar a.button-selected .button-inner,
#taskbar a:hover .button-inner,
#taskbar a:focus .button-inner {
  color: var(--siel-lime) !important;
}

/* Compact SIEL wordmark — leave vertical room for taskbar icons */
#toplogo,
#toplogo img,
#header .logo {
  max-height: 24px !important;
  max-width: 110px !important;
  width: auto !important;
  height: auto !important;
  padding-top: 7px !important;
  vertical-align: middle !important;
}

/*
 * Clear chrome: header ≈ 64px. Larry ui.js sets #messagetoolbar { top: -6px },
 * so mainscreen must start ≥ 70px or the toolbar slides under the taskbar.
 */
#mainscreen {
  top: 72px !important;
}

/* ----- Left folder pane: kill Larry cyan (#d9ecf4) — match SIEL neutrals ----- */
.listbox,
#mailboxcontainer,
#directorylist,
#mailview-left .listbox,
#addressview-left .listbox,
#settings-sections,
.folderlist {
  background: var(--siel-sidebar) !important;
}

#mailboxlist,
.folderlist {
  background: transparent !important;
}

.listbox .boxtitle,
.uibox .boxtitle {
  background: #e4e8ec !important;
  border-bottom-color: #c9d0d6 !important;
  color: var(--siel-ink) !important;
}

/* Selection — brand lime, readable ink text */
#mailboxlist li.selected,
#mailboxlist li.selected > a,
.folderlist li.selected,
.folderlist li.selected > a,
#mailboxlist li.mailbox.selected > a,
.folderlist li.mailbox.selected > a,
#contacts-table tr.selected,
#messagelist tr.selected td,
.records-table tr.selected td,
.listing li.selected,
.listing tr.selected td {
  background-color: var(--siel-lime-soft) !important;
  color: var(--siel-ink) !important;
  border-color: var(--siel-lime-dim) !important;
}

#mailboxlist li.selected > a,
.folderlist li.selected > a,
#mailboxlist li.mailbox.selected > a,
.folderlist li.mailbox.selected > a {
  color: var(--siel-ink) !important;
  font-weight: 600;
}

#mailboxlist li.mailbox > a:focus,
.folderlist li.mailbox > a:focus,
.messagelist tr th.threads .listmenu:focus {
  background-color: rgba(153, 255, 0, 0.18) !important;
  outline: none !important;
}

/* Unread badges: charcoal/lime instead of Larry teal */
.folderlist li.mailbox .unreadcount,
#mailboxlist li.mailbox .unreadcount {
  background: var(--siel-panel) !important;
  color: var(--siel-lime) !important;
}

.folderlist li.mailbox.selected > a .unreadcount,
#mailboxlist li.mailbox.selected > a .unreadcount {
  background: var(--siel-black) !important;
  color: var(--siel-lime) !important;
}

.folderlist li.mailbox.recent > a .unreadcount,
#mailboxlist li.mailbox.recent > a .unreadcount,
.folderlist li.recent > a,
#mailboxlist li.recent > a {
  color: var(--siel-ink);
}

.folderlist li.mailbox.recent > a .unreadcount,
#mailboxlist li.mailbox.recent > a .unreadcount {
  background: var(--siel-lime-dim) !important;
  color: var(--siel-black) !important;
}

.folderlist li.mailbox.unread > a,
#mailboxlist li.mailbox.unread > a {
  color: var(--siel-ink) !important;
}

/* ----- Buttons ----- */
.button.mainaction,
input.button.mainaction,
input.mainaction,
button.mainaction,
#login-form .button,
.formbuttons input.button.mainaction {
  background: var(--siel-black) !important;
  border: 1px solid rgba(153, 255, 0, 0.40) !important;
  color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.button.mainaction:hover,
input.button.mainaction:hover,
#login-form .button:hover {
  background: var(--siel-black-deep) !important;
  border-color: var(--siel-lime) !important;
  color: var(--siel-lime) !important;
}

a.button,
.button {
  border-radius: 3px;
}

#messagetoolbar a.button.selected,
#messagetoolbar a.buttonPressed,
.toolbar a.button-selected {
  background-color: rgba(153, 255, 0, 0.16) !important;
  border-color: var(--siel-lime-dim) !important;
}

/* ----- Links on light content ----- */
#mainscreen a,
#pluginbody a,
.content a,
.uibox a {
  color: var(--siel-ink);
}
#mainscreen a:hover,
.content a:hover {
  color: var(--siel-black-deep);
}

/* ----- Focus / form accents ----- */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  border-color: var(--siel-lime-dim) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(153, 255, 0, 0.28) !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: var(--siel-lime);
}

.quotabar,
.quota .bar,
#quota .bar,
.quota-widget .bar {
  background-color: var(--siel-lime-dim) !important;
  border-color: var(--siel-lime-dim) !important;
}

#settings-sections li.selected,
#settings-sections li.selected a,
.tabsbar .tablink.selected,
.tabsbar .tablink.selected a {
  background-color: var(--siel-black) !important;
  color: var(--siel-lime) !important;
  border-color: var(--siel-lime-dim) !important;
}

/* ----- Login ----- */
body.task-login,
body.task-login #login-form,
body.task-login #login-content,
#login-form {
  background:
    radial-gradient(800px 480px at 90% 10%, rgba(153, 255, 0, 0.14), transparent 55%),
    radial-gradient(600px 400px at 10% 90%, rgba(0, 0, 0, 0.55), transparent 50%),
    linear-gradient(165deg, #070a0e 0%, #0b0f14 50%, #121820 100%) !important;
}
#login-form {
  border: 1px solid rgba(153, 255, 0, 0.22) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}
#login-form table td.title,
#login-form label,
#login-form .form-group label {
  color: rgba(255, 255, 255, 0.85) !important;
}
#login-footer,
#bottomline {
  background: rgba(7, 10, 14, 0.9) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border-top: 1px solid rgba(153, 255, 0, 0.22) !important;
}

#messagelist tr.unread td {
  font-weight: 600;
}
#messagelist tr.unread td.subject a {
  color: var(--siel-ink) !important;
}

.fc-event,
.event {
  background-color: var(--siel-panel) !important;
  border-color: var(--siel-lime-dim) !important;
  color: #fff !important;
}