/* Sphenica theme for Roundcube Elastic — tokens from sphenica.dev globals.css */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  color-scheme: dark;
  --sp-bg: #061019; --sp-bg2: #09131d; --sp-panel: #0c121b;
  --sp-glass: rgba(255,255,255,.045); --sp-border: rgba(255,255,255,.08);
  --sp-text: #f4f8ff; --sp-muted: #9db0c6; --sp-muted2: #c8d5e3;
  --sp-primary: #a855f7; --sp-soft: rgba(168,85,247,.14); --sp-pborder: rgba(168,85,247,.26);
}
html, body {
  font-family: "Inter", system-ui, sans-serif !important;
  background:
    radial-gradient(ellipse 100% 55% at 50% 0%, rgba(168,85,247,.13), transparent 55%),
    linear-gradient(180deg, #061019, #040a11) fixed !important;
  color: var(--sp-text) !important;
}
h1,h2,h3,h4,.header .header-title,.formtitle,.pagetitle { font-family: "Space Grotesk", sans-serif !important; letter-spacing: -.02em; }

/* Layout surfaces */
#layout, #layout > div, #layout-sidebar, #layout-list, #layout-content, #layout-menu,
.header, .footer, .toolbar, .searchbar, .pagenav, .iframe-wrapper, .popover-content,
.modal-content, .ui-dialog, .ui-dialog-content, .propform, .boxcontent, #messagecontframe, .tab-content {
  background: var(--sp-bg2) !important; color: var(--sp-text) !important; border-color: var(--sp-border) !important;
}
#layout-sidebar, #layout-menu { background: rgba(6,16,25,.9) !important; }
.header, .footer { background: var(--sp-panel) !important; }
a, .menu a, .toolbar a { color: var(--sp-muted2); }
a:hover { color: #d8b4fe; }
.muted, .help-block, .form-text, span.date, .msgicon { color: var(--sp-muted) !important; }

/* Lists */
table.messagelist td, .listing li, .listing li a, table.listing td { color: var(--sp-text) !important; border-color: var(--sp-border) !important; background: transparent !important; }
table.messagelist tr:hover td, .listing li:hover { background: rgba(168,85,247,.06) !important; }
table.messagelist tr.selected td, table.messagelist tr.focused td, .listing li.selected, .listing li.selected > a, .listing li.focused {
  background: var(--sp-soft) !important; color: #fff !important;
}
table.messagelist tr.unread td, table.messagelist tr.unread td a { font-weight: 700; }

/* Menus / toolbars */
.toolbar a.button, .menu a, .listing li a { border-radius: 10px; }
.toolbar a.button:hover, .menu a:hover { background: rgba(255,255,255,.07) !important; }
.toolbar a.button.disabled, .menu a.disabled { opacity: .4; }
.popover, .popupmenu .menu, .ui-menu, .dropdown-menu {
  background: var(--sp-panel) !important; border: 1px solid var(--sp-border) !important; border-radius: 14px !important;
  box-shadow: 0 20px 44px rgba(0,0,0,.4) !important;
}

/* Inputs */
input[type=text], input[type=password], input[type=email], input[type=search], textarea, select, .form-control, .custom-select {
  background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.09) !important;
  color: var(--sp-text) !important; border-radius: 12px !important;
}
input:focus, textarea:focus, select:focus, .form-control:focus {
  background: rgba(168,85,247,.05) !important; border-color: var(--sp-pborder) !important;
  box-shadow: 0 0 0 3px var(--sp-soft) !important; outline: 0;
}
select option { background: #0c121b; color: #e7edf3; }
::placeholder { color: #7e95ad !important; }

/* Buttons */
.btn, button, input[type=submit], input[type=button] { border-radius: 14px !important; font-weight: 700; }
.btn-primary, button.btn-primary, input[type=submit].btn-primary, a.button.btn-primary, .toolbar a.button.compose {
  background: linear-gradient(180deg, rgba(168,85,247,.95), #a855f7) !important;
  border: 1px solid rgba(168,85,247,.55) !important; color: #fff !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14), 0 10px 26px rgba(168,85,247,.28) !important;
}
.btn-primary:hover { background: linear-gradient(180deg, #d8b4fe, #a855f7) !important; }
.btn-secondary, .btn-default, .btn-light { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.1) !important; color: var(--sp-text) !important; }
.btn-danger { background: #ef4444 !important; border-color: rgba(239,68,68,.6) !important; color: #fff !important; }

/* Switches / checkboxes */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before { background: var(--sp-primary) !important; border-color: var(--sp-primary) !important; }

/* Tabs */
.nav-tabs .nav-link.active, ul.tabs li.selected a { background: var(--sp-soft) !important; border-color: var(--sp-pborder) !important; color: var(--sp-text) !important; }

/* Alerts / notices */
.alert-success, .boxconfirmation { background: rgba(34,197,94,.12) !important; border-color: rgba(34,197,94,.3) !important; color: #9be8b8 !important; }
.alert-danger, .boxerror { background: rgba(239,68,68,.12) !important; border-color: rgba(239,68,68,.3) !important; color: #fca5a5 !important; }
.alert-warning, .boxwarning { background: rgba(255,154,60,.12) !important; border-color: rgba(255,154,60,.3) !important; color: #ffc38f !important; }
.alert-info, .boxinformation, .alert-primary { background: var(--sp-soft) !important; border-color: var(--sp-pborder) !important; color: #e9d5ff !important; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--sp-pborder) transparent; }
::selection { background: var(--sp-soft); color: #fff; }

/* Login page: centred glass card */
body.task-login #layout { background: transparent !important; }
body.task-login #layout-content { background: transparent !important; }
#login-form {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border: 1px solid var(--sp-border) !important; border-radius: 24px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.45) !important; backdrop-filter: blur(12px);
  padding: 2rem !important;
}
#login-form .formcontent, #login-form .form-group, #login-form .input-group-prepend .input-group-text { background: transparent !important; }
#login-form .input-group-text { border-color: rgba(255,255,255,.09) !important; color: var(--sp-muted) !important; }
#login-form img#logo { max-height: 70px; margin-bottom: 1rem; }

/* Message body / compose editor stay readable */
.message-part, .message-htmlpart, #messagebody, .mce-content-body { color: var(--sp-text); }

/* ---- Round 2 fixes ---- */
/* Preview pane / framed pages (the grey area) */
html.iframe, body.iframe, body.iframe #layout, body.iframe #layout-content, body.iframe .watermark,
body.task-mail.action-show, body.task-mail.action-preview, #messagecontframe, .iframe-wrapper iframe {
  background: var(--sp-bg2) !important; color: var(--sp-text) !important;
}
body.iframe { background-image: radial-gradient(ellipse 100% 55% at 50% 0%, rgba(168,85,247,.10), transparent 60%) !important; }
.watermark img, .watermark svg, #layout-content .watermark { opacity: .35; filter: hue-rotate(40deg) saturate(.8); }
.message-headers, .header-headers, #message-header, .headers-table td, .header-title { background: transparent !important; color: var(--sp-text) !important; border-color: var(--sp-border) !important; }

/* Login: join icon box to input, round only the outer corners */
#login-form .input-group { flex-wrap: nowrap; align-items: stretch; }
#login-form .input-group > .input-group-prepend .input-group-text,
#login-form .input-group > .input-group-text { border-radius: 12px 0 0 12px !important; height: 100%; margin: 0 !important; }
#login-form .input-group > input, #login-form .input-group > .form-control {
  border-radius: 0 12px 12px 0 !important; margin-left: -1px !important; flex: 1 1 auto;
}
#login-form .input-group + .input-group, #login-form .form-group + .form-group { margin-top: .75rem; }
#login-form .formbuttons { margin-top: 1rem; }
#login-form button.btn-primary, #login-form .btn-primary { width: 100%; }

/* Sidebar polish */
#layout-menu a.selected, #layout-menu a:hover { background: var(--sp-soft) !important; color: #fff !important; }
#layout-sidebar .header, #layout-list .header, #layout-content > .header { border-bottom: 1px solid var(--sp-border) !important; }
.listing li.mailbox.selected > a, .listing li.selected > a { box-shadow: inset 3px 0 0 var(--sp-primary); }
.badge.badge-pill, .unreadcount { background: var(--sp-primary) !important; color: #fff !important; }

/* Plain-text message body was a white bar */
.message-part, .message-part div.pre, .message-htmlpart, #messagebody, div.rcmBody, body.iframe .rcmBody, .message-part .pre {
  background: transparent !important; color: var(--sp-text) !important;
}

/* ---- Round 3: admin-dashboard look (floating rounded panels) ---- */
:root { --sp-card: #0b141e; --sp-page: #060d15; --sp-r: 20px; }
html, body { background: var(--sp-page) !important; }
body:not(.iframe):not(.task-login) #layout { padding: 12px; gap: 12px; box-sizing: border-box; background: var(--sp-page) !important; }

/* Each pane becomes a floating card */
body:not(.iframe) #layout-menu, body:not(.iframe) #layout-sidebar,
body:not(.iframe) #layout-list, body:not(.iframe) #layout-content {
  background: var(--sp-card) !important; border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: var(--sp-r) !important; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
body:not(.iframe) #layout > div:not(:last-child) { margin-right: 0; }
.header, .footer, .toolbar, .searchbar { background: transparent !important; border-color: rgba(255,255,255,.06) !important; }
.header { min-height: 3.6rem; }
.header .header-title, .formtitle { font-weight: 700; }

/* Sidebar nav: purple pill for selected, like the dashboard */
#layout-menu a, #layout-sidebar .listing li > a { border-radius: 12px !important; margin: 2px 8px; }
#layout-menu a.selected, #layout-sidebar .listing li.selected > a, #layout-sidebar .listing li.mailbox.selected > a {
  background: rgba(168,85,247,.16) !important; border: 1px solid rgba(168,85,247,.35) !important;
  color: #fff !important; box-shadow: none !important;
}
#layout-sidebar .listing li > a { border: 1px solid transparent; padding: .55rem .75rem; font-weight: 600; }
#layout-sidebar .listing li > a:hover { background: rgba(255,255,255,.05) !important; }
#layout-sidebar .listing li { border: 0 !important; }
#layout-menu a span.inner { font-weight: 600; font-size: .75rem; }
#layout-menu a.compose, #layout-menu a.compose.selected { color: var(--sp-primary) !important; }

/* Small uppercase section labels */
.listing .folder-title, .listing li.account > a, .subheader, .boxtitle, .propform legend, fieldset legend,
.settings-section h2, .header-title.small, .listing li.header, .ui-dialog-title.small {
  text-transform: uppercase; letter-spacing: .1em; font-size: .7rem !important; font-weight: 700; color: var(--sp-primary) !important;
}

/* Message list: rounded rows with spacing */
table.messagelist { border-collapse: separate !important; border-spacing: 0 4px; padding: 0 8px; }
table.messagelist td { border: 0 !important; padding-top: .55rem !important; padding-bottom: .55rem !important; }
table.messagelist tr td:first-child { border-radius: 12px 0 0 12px; }
table.messagelist tr td:last-child { border-radius: 0 12px 12px 0; }
table.messagelist tr.selected td, table.messagelist tr.focused td { background: rgba(168,85,247,.16) !important; }
table.messagelist tr:hover td { background: rgba(255,255,255,.04) !important; }
table.messagelist tr.unread td.subject span.subject, table.messagelist tr.unread td.subject a { color: #fff !important; }

/* Search box pill */
.searchbar input[type=text], .searchbar input[type=search] { border-radius: 999px !important; padding-left: 2.4rem !important; }
.searchbar { margin: .5rem .75rem; border-radius: 999px; }

/* Toolbar buttons as soft chips */
.toolbar a.button { border-radius: 12px !important; margin: 2px; }
.toolbar a.button:hover { background: rgba(168,85,247,.12) !important; color: #fff !important; }

/* Message view header as a card */
.message-headers, #message-header, .header-headers { border-radius: 16px; }
.message-part { padding: 1rem; }

/* Pager / footer */
.pagenav, #layout-list .footer { border-top: 1px solid rgba(255,255,255,.06) !important; }
.pagenav input { border-radius: 999px !important; }

/* Settings / forms inside panels */
.propform fieldset, fieldset.propform, .boxcontent { border: 1px solid rgba(255,255,255,.07) !important; border-radius: 16px !important; background: rgba(255,255,255,.02) !important; }
.ui-dialog, .modal-content { border-radius: var(--sp-r) !important; border: 1px solid rgba(255,255,255,.08) !important; background: #0c121b !important; }
.badge.badge-pill, .unreadcount { border-radius: 999px !important; font-size: .7rem; }

/* ---- Round 4: fix cut-off rows, grey preview, icon-only logo ---- */
/* Rows must fit inside their card */
#layout-sidebar .listing, #layout-sidebar .scroller, #layout-menu .scroller { box-sizing: border-box; overflow-x: hidden !important; }
#layout-sidebar .listing li { padding: 0 8px !important; box-sizing: border-box; }
#layout-sidebar .listing li > a { margin: 2px 0 !important; width: auto !important; box-sizing: border-box; display: block; }
#layout-menu a { margin: 2px 6px !important; box-sizing: border-box; }
#layout-menu .scroller, #layout-menu { overflow-x: hidden !important; }

/* Grey empty preview pane */
#layout-content, #layout-content .iframe-wrapper, #layout-content iframe, #layout-content .watermark,
.watermark, body.watermark, html.watermark, body.iframe.watermark, body.iframe.welcome, body.welcome {
  background: var(--sp-card) !important; background-image: none !important;
}
.watermark img, .watermark svg, body.watermark img, #layout-content .watermark * { display: none !important; }
.watermark::after, body.watermark::after {
  content: "Select a message to read it"; display: block; text-align: center; margin-top: 30vh;
  color: var(--sp-muted); font-family: "Space Grotesk", sans-serif; font-size: 1.1rem; background: transparent;
}

/* Icon-only logo (small) */
#layout-menu img, #layout-menu .logo, #layout-menu a.logo, #layout-menu .logo img {
  height: 36px !important; width: auto !important; max-width: 48px; object-fit: contain; margin: .5rem auto; display: block;
}
body.task-login #logo { max-height: 90px; width: auto; }

/* ---- Round 5: smaller buttons / rows ---- */
/* Folder rows: compact, no resting border */
#layout-sidebar .listing li { height: auto !important; min-height: 0 !important; padding: 0 8px !important; }
#layout-sidebar .listing li > a {
  padding: .3rem .65rem !important; min-height: 0 !important; height: auto !important;
  line-height: 1.5 !important; font-size: .88rem !important; font-weight: 500 !important;
  border: 1px solid transparent !important; margin: 1px 0 !important; background: transparent !important;
}
#layout-sidebar .listing li > a > span, #layout-sidebar .listing li > a .inner { padding: 0 !important; line-height: 1.5 !important; }
#layout-sidebar .listing li > a:hover { background: rgba(255,255,255,.05) !important; }
#layout-sidebar .listing li.selected > a, #layout-sidebar .listing li.mailbox.selected > a {
  background: rgba(168,85,247,.16) !important; border-color: rgba(168,85,247,.35) !important;
}
#layout-sidebar .listing li > a::before, #layout-sidebar .listing li > a .icon { font-size: .9rem; }

/* Left icon nav: compact */
#layout-menu a { padding: .35rem .2rem !important; min-height: 0 !important; height: auto !important; margin: 1px 5px !important; border-radius: 10px !important; }
#layout-menu a::before, #layout-menu a .icon { font-size: 1rem !important; }
#layout-menu a span.inner { font-size: .66rem !important; }

/* Toolbar buttons: smaller */
.toolbar a.button { padding: .25rem .5rem !important; min-width: 0 !important; height: auto !important; margin: 0 1px !important; }
.toolbar a.button span.inner { font-size: .72rem !important; }
.toolbar a.button::before { font-size: .95rem !important; }
.header, #layout-sidebar .header, #layout-list .header { min-height: 3rem !important; }

/* Message list rows tighter, general buttons slimmer */
table.messagelist td { padding-top: .35rem !important; padding-bottom: .35rem !important; }
.btn, button, input[type=submit], input[type=button] { padding: .4rem .9rem !important; font-size: .85rem !important; border-radius: 10px !important; }
.btn-lg { padding: .55rem 1.1rem !important; }

/* ---- Round 6c: left icon bar, written against Elastic 1.6 structure ----
   #layout-menu > .popover-header (logo), #taskmenu (buttons), #taskmenu .special-buttons (position:absolute bottom) */
body:not(.iframe) #layout-menu { position: relative !important; }
#taskmenu { padding: 0 6px; box-sizing: border-box; }
#taskmenu a { width: auto !important; max-width: none !important; margin: 2px 0 !important; padding: .35rem 0 !important; box-sizing: border-box; }
#taskmenu .special-buttons { left: 6px !important; right: 6px !important; bottom: 8px !important; width: auto !important; background: transparent !important; }
#taskmenu .special-buttons a { width: 100% !important; }
#taskmenu a span.inner { font-size: .64rem !important; }

/* ---- Round 7: bottom-left buttons in light purple ---- */
#taskmenu .special-buttons a,
#taskmenu .special-buttons a span.inner,
#taskmenu .special-buttons a.logout,
#taskmenu .special-buttons a.theme,
#taskmenu .special-buttons a.about { color: #d8b4fe !important; }
#taskmenu .special-buttons a:hover, #taskmenu .special-buttons a:hover span.inner { color: #f3e8ff !important; background: rgba(168,85,247,.16) !important; }

/* ---- Round 8: search bar = ONE pill (.searchbar), input flat inside ---- */
.searchbar {
  margin: .6rem .75rem !important; height: 2.5rem !important; min-height: 2.5rem !important;
  border: 1px solid rgba(255,255,255,.09) !important; border-radius: 999px !important;
  background: rgba(255,255,255,.04) !important; overflow: hidden;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.searchbar:focus-within { border-color: rgba(168,85,247,.45) !important; background: rgba(168,85,247,.05) !important; box-shadow: 0 0 0 3px rgba(168,85,247,.14); }
.searchbar form { align-items: center; }
.searchbar form:before { margin: 0 0 0 1rem !important; height: auto !important; color: #d8b4fe !important; font-size: .95rem; }
.searchbar input[type=text], .searchbar input[type=search], .searchbar input {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: .5rem .6rem !important;
}
.searchbar a { color: #d8b4fe !important; }
.searchbar a:hover { background: rgba(168,85,247,.16) !important; border-radius: 999px; }
.searchbar a::before { width: 1.8rem !important; height: 2.5rem !important; }

/* ---- Round 9: modals / dialogs ---- */
.ui-widget-overlay, .modal-backdrop { background: rgba(2,6,12,.65) !important; opacity: 1 !important; backdrop-filter: blur(4px); }
.ui-dialog, .modal-content, .ui-dialog.popup {
  background: #0b141e !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 20px !important;
  overflow: hidden !important; box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(168,85,247,.08) !important; color: var(--sp-text);
}
/* header + footer bars match the body, separated by hairlines */
.ui-dialog .ui-dialog-titlebar, .modal-header {
  background: rgba(255,255,255,.025) !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 0 !important; padding: .9rem 1.1rem !important;
}
.ui-dialog .ui-dialog-title, .modal-title {
  font-family: "Space Grotesk", sans-serif !important; font-size: 1.05rem !important; font-weight: 700 !important; color: var(--sp-text) !important;
}
.ui-dialog .ui-dialog-content, .modal-body, .ui-dialog .ui-dialog-content .propform {
  background: transparent !important; color: var(--sp-text) !important; padding: 1rem 1.2rem !important;
}
.ui-dialog .ui-dialog-buttonpane, .modal-footer {
  background: rgba(255,255,255,.025) !important; border: 0 !important; border-top: 1px solid rgba(255,255,255,.07) !important;
  padding: .75rem 1.1rem !important; border-radius: 0 !important;
}
/* close button: small round icon */
.ui-dialog .ui-dialog-titlebar-close, .ui-dialog .ui-dialog-titlebar a.button, .modal-header .close, .modal-header .btn-close {
  background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 10px !important;
  color: var(--sp-muted2) !important; width: 2rem !important; height: 2rem !important; min-width: 0 !important; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: none !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar a.button:hover { background: rgba(168,85,247,.16) !important; color: #fff !important; }
.ui-dialog .ui-dialog-titlebar-close span.inner, .ui-dialog .ui-dialog-titlebar a.button span.inner { display: none !important; }
/* dialog action buttons */
.ui-dialog-buttonpane button, .ui-dialog-buttonpane .btn, .modal-footer .btn {
  padding: .4rem 1rem !important; font-size: .85rem !important; border-radius: 10px !important; margin-left: .4rem !important;
  background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.1) !important; color: var(--sp-text) !important;
}
.ui-dialog-buttonpane button.mainaction, .ui-dialog-buttonpane button.btn-primary, .ui-dialog-buttonpane button.save, .ui-dialog-buttonpane button.submit, .modal-footer .btn-primary {
  background: linear-gradient(180deg, rgba(168,85,247,.95), #a855f7) !important; border-color: rgba(168,85,247,.55) !important; color: #fff !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14), 0 8px 20px rgba(168,85,247,.25) !important;
}
.ui-dialog-buttonpane button:hover { background: rgba(255,255,255,.1) !important; }
.ui-dialog-buttonpane button.mainaction:hover, .ui-dialog-buttonpane button.btn-primary:hover { background: linear-gradient(180deg, #d8b4fe, #a855f7) !important; }
/* form rows inside dialogs */
.ui-dialog label, .ui-dialog .form-group label, .ui-dialog td.title { color: var(--sp-muted2) !important; font-weight: 500; }
.ui-dialog select, .ui-dialog input[type=text], .ui-dialog input[type=password], .ui-dialog textarea {
  background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 12px !important; color: var(--sp-text) !important;
}
.ui-dialog select:focus, .ui-dialog input:focus, .ui-dialog textarea:focus { border-color: rgba(168,85,247,.45) !important; box-shadow: 0 0 0 3px rgba(168,85,247,.14) !important; }
.ui-dialog .ui-resizable-handle { opacity: .3; }

/* Login shows the full Sphenica.Dev wordmark */
body.task-login img#logo { max-height: 80px !important; max-width: min(420px, 90vw) !important; width: auto !important; height: auto !important; }

/* Sidebar logo: small icon only (beats any generic #logo rules) */
#layout-menu .popover-header img#logo, #layout-menu img#logo {
  height: 32px !important; width: auto !important; max-width: 44px !important; max-height: 32px !important; padding: 0 !important; margin: .6rem auto !important; display: block; object-fit: contain;
}
#layout-menu .popover-header { overflow: hidden; height: auto !important; line-height: 1 !important; }

/* Logo header takes the same background as the rest of the menu bar */
body #layout-menu .popover-header, body #layout-menu > .popover-header {
  background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important;
}