/* HGLR Mail skin; extends Roundcube Elastic. Keep Elastic's functional markup. */
:root {
  --hglr-bg:#f2f6fc; --hglr-panel:#fff; --hglr-soft:#f5f8fc;
  --hglr-menu:#102138; --hglr-menu-text:#c4d4e9;
  --hglr-text:#142740; --hglr-muted:#536982; --hglr-line:#dce5f0;
  --hglr-accent:#2569bd; --hglr-accent-text:#184e8d;
  --hglr-hover:#e7f1fd; --hglr-selected:#dcecff; --hglr-input:#fff;
}
html.dark-mode {
  --hglr-bg:#0a1624; --hglr-panel:#101e2f; --hglr-soft:#15263a;
  --hglr-menu:#0b1727; --hglr-menu-text:#b7cae0;
  --hglr-text:#f3f7fe; --hglr-muted:#aabed5; --hglr-line:#2b4058;
  --hglr-accent:#9bc7ff; --hglr-accent-text:#afd3ff;
  --hglr-hover:#1c344e; --hglr-selected:#244564; --hglr-input:#17293d;
}
body { color:var(--hglr-text) !important; font-family:Inter,"Segoe UI",ui-sans-serif,system-ui,sans-serif !important; background:var(--hglr-bg) !important; }
#layout-menu, #taskmenu { background:var(--hglr-panel) !important; border-color:var(--hglr-line) !important; }
#layout-sidebar,#layout-list,#layout-content,.header,.toolbar,.listing,.scroller { background-color:var(--hglr-panel) !important; border-color:var(--hglr-line) !important; }
#layout-sidebar { background:var(--hglr-soft) !important; }
#layout-list { background:var(--hglr-bg) !important; }
#taskmenu a,#taskmenu .button,#layout-menu a { color:var(--hglr-muted) !important; }
#taskmenu .selected a,#taskmenu a.selected,#taskmenu a:hover { color:var(--hglr-accent) !important; background:var(--hglr-hover) !important; }
.listing li.selected,.listing tr.selected,.listing .selected { background-color:var(--hglr-hover) !important; }
.listing li:hover,.listing tr:hover { background-color:var(--hglr-soft) !important; }
.header,.toolbar { box-shadow:none !important; }
.header-title, .boxtitle, .listing,.listing a,.toolbar a,.formcontent label { color:var(--hglr-text) !important; }
.form-control,textarea,input[type=text],input[type=password],select { border:1px solid var(--hglr-line) !important; border-radius:9px !important; background:var(--hglr-panel) !important; color:var(--hglr-text) !important; }
.form-control:focus,textarea:focus,input:focus,select:focus { border-color:var(--hglr-accent) !important; box-shadow:0 0 0 3px color-mix(in srgb,var(--hglr-accent) 15%,transparent) !important; }
button.btn-primary,.btn-primary,#rcmloginsubmit { border:0 !important; border-radius:9px !important; background:#83bbff !important; color:#081321 !important; box-shadow:none !important; font-weight:750 !important; }
html:not(.dark-mode) button.btn-primary,html:not(.dark-mode) .btn-primary,html:not(.dark-mode) #rcmloginsubmit { background:#155bb1 !important; color:#fff !important; }
.popupmenu,.dropdown-menu,.ui-dialog { background:var(--hglr-panel) !important; border-color:var(--hglr-line) !important; color:var(--hglr-text) !important; box-shadow:0 20px 50px rgba(3,13,31,.18) !important; }

body.task-login #layout-content { display:grid !important; place-items:center; width:100%; min-height:100dvh; padding:clamp(20px,4vw,65px); background:radial-gradient(circle at 73% 38%,color-mix(in srgb,var(--hglr-accent) 14%,transparent),transparent 40%),var(--hglr-bg) !important; }
.hglr-login-shell { display:grid; grid-template-columns:1fr minmax(345px,440px); align-items:center; gap:clamp(35px,7vw,130px); width:min(1060px,100%); margin:auto; text-align:left; }
.hglr-overline,.hglr-panel-label { color:var(--hglr-accent); font-size:11px; font-weight:800; letter-spacing:.18em; }
.hglr-login-intro h2 { margin:22px 0; color:var(--hglr-text); font-size:clamp(45px,5vw,72px); line-height:1.08; font-weight:760; letter-spacing:-.06em; }
.hglr-login-intro h2 em { color:var(--hglr-accent); font-family:Georgia,serif; font-weight:400; }
.hglr-login-intro p { max-width:380px; color:var(--hglr-muted); font-size:15px; line-height:1.7; }
.hglr-login-intro a { display:inline-flex; margin-top:23px; color:var(--hglr-accent); font-weight:700; text-decoration:none; }
.hglr-login-panel { padding:clamp(26px,3.5vw,42px); background:var(--hglr-panel); border:1px solid var(--hglr-line); border-radius:18px; box-shadow:0 24px 64px rgba(2,17,42,.12); }
.hglr-login-panel #logo { display:block; position:static; width:58px; height:58px; max-height:none; margin:0 0 24px; object-fit:contain; }
.hglr-login-panel h2 { margin:12px 0 7px; color:var(--hglr-text); font-size:28px; letter-spacing:-.04em; }
.hglr-login-panel > p { margin:0 0 21px; color:var(--hglr-muted); font-size:13px; }
.hglr-login-panel #login-form { position:static !important; width:100% !important; max-width:none !important; margin:0 !important; text-align:left; }
.hglr-login-panel #login-form label { color:var(--hglr-muted); font-size:12px; font-weight:700; }
.hglr-login-panel #login-form .form-control { min-height:45px; }
.hglr-login-panel #rcmloginsubmit { width:100%; min-height:46px; }
.hglr-login-panel #login-footer { color:var(--hglr-muted); font-size:11px; }
@media(max-width:760px) {
  .hglr-login-shell { grid-template-columns:1fr; gap:19px; max-width:460px; }
  .hglr-login-intro h2 { margin:10px 0; font-size:39px; }
  .hglr-login-intro p { font-size:13px; margin-bottom:0; }
  .hglr-login-intro a { margin-top:8px; }
  .hglr-login-panel { padding:24px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms !important; } }

/* Roundcube loads Elastic after a child skin's CSS. Explicit specificity keeps
   the shared markup responsive while applying the HGLR visual system. */
body #layout-menu, body #taskmenu { background:var(--hglr-menu) !important; border-color:var(--hglr-line) !important; }
body #layout > div > .header, body #layout > div > .footer {
  background:var(--hglr-panel) !important; border-color:var(--hglr-line) !important;
  color:var(--hglr-text) !important; box-shadow:none !important;
}
body #layout-list, body #layout-list .scroller { background:var(--hglr-soft) !important; }
body #layout-sidebar, body #layout-sidebar .scroller, body #layout-content { background:var(--hglr-panel) !important; }
body #layout > div > .header .header-title { color:var(--hglr-text) !important; }
body .toolbar a, body .toolbar .button, body #layout > div > .header a.button, body .footer a { color:var(--hglr-muted) !important; }
body .toolbar a:not(.disabled):hover, body .toolbar .button:not(.disabled):hover,
body #layout > div > .header a.button:not(.disabled):hover {
  background:var(--hglr-hover) !important; color:var(--hglr-accent) !important;
}
body .form-control::placeholder, body input::placeholder { color:var(--hglr-muted) !important; opacity:1; }
body .popupmenu a, body .dropdown-menu a { color:var(--hglr-text) !important; }
body .popupmenu a:hover, body .dropdown-menu a:hover { background:var(--hglr-hover) !important; }

/* The original login logo has top:16vh in Elastic and overlapped the fields. */
.hglr-login-brand { display:flex; align-items:center; gap:13px; margin-bottom:35px; }
body.task-login .hglr-login-brand #logo {
  display:block !important; position:static !important; top:auto !important;
  width:46px !important; height:46px !important; max-height:none !important;
  margin:0 !important; padding:0 !important; object-fit:contain;
}
.hglr-login-brand strong { display:block; color:var(--hglr-text); font-size:18px; line-height:1; letter-spacing:.09em; }
.hglr-login-brand span { display:block; margin-top:5px; color:var(--hglr-accent); font-size:10px; font-weight:800; letter-spacing:.22em; }
.hglr-login-panel h2 { margin:0 0 7px; }
.hglr-login-panel > p { margin-bottom:26px; }
body.task-login .hglr-login-panel #login-form { top:auto !important; }
.hglr-login-panel #login-form table, .hglr-login-panel #login-form tbody { display:block; width:100%; }
.hglr-login-panel #login-form .form-group.row { display:block; width:100%; margin:0 0 13px !important; }
/* Roundcube renders the icon and input in the same td.input-group. Prevent
   Bootstrap's wrapping input group from placing the icon on its own row. */
.hglr-login-panel #login-form .input.input-group {
  display:grid !important; grid-template-columns:49px minmax(0,1fr);
  align-items:stretch; width:100% !important; padding:0 !important;
  box-sizing:border-box; flex-wrap:nowrap !important;
}
.hglr-login-panel #login-form .input-group-prepend {
  display:flex !important; grid-column:1; grid-row:1; width:49px;
  min-width:0; margin:0 !important;
}
.hglr-login-panel #login-form .input-group-text {
  display:grid !important; place-items:center; width:49px; height:52px; padding:0;
  border:1px solid var(--hglr-line) !important; border-right:0 !important;
  border-radius:10px 0 0 10px !important;
  background:var(--hglr-input) !important; color:var(--hglr-accent) !important;
}
.hglr-login-panel #login-form .input.input-group > .form-control:not([type="hidden"]) {
  grid-column:2; grid-row:1; width:100% !important; min-width:0; height:52px;
  margin:0 !important; border-left:0 !important; box-sizing:border-box;
  border-radius:0 10px 10px 0 !important; background:var(--hglr-input) !important; font-size:14px;
}
.hglr-login-panel #login-form .formbuttons { margin:16px 0 0; }
.hglr-login-panel #rcmloginsubmit { min-height:52px; }

/* Navigation on large screens uses text labels and a clear compose action. */
@media(min-width:1200px) {
  html.layout-large body #layout-menu {
    flex:0 0 208px !important; width:208px !important; min-width:208px !important;
  }
  html.layout-large body #layout-menu .popover-header {
    display:flex !important; align-items:center; justify-content:flex-start; gap:9px;
    height:68px !important; padding:0 15px !important;
    background:var(--hglr-menu) !important; border-bottom:1px solid rgba(180,204,236,.12) !important;
  }
  html.layout-large body #layout-menu .popover-header #logo {
    width:34px !important; height:42px !important; max-height:42px !important;
    object-fit:contain; padding:0 !important; flex:none;
  }
  html.layout-large body #layout-menu .popover-header::after {
    content:"HGLR\A MAIL"; white-space:pre; line-height:1.2; color:#f4f8ff;
    font-size:14px; font-weight:800; letter-spacing:.09em; text-align:left;
  }
  html.layout-large body #taskmenu {
    width:100% !important; min-width:0 !important; box-sizing:border-box;
    padding:14px 12px !important; position:relative !important;
    display:flex !important; flex-direction:column !important; min-height:calc(100% - 68px);
  }
  html.layout-large body #taskmenu .action-buttons {
    display:block !important; width:100% !important; box-sizing:border-box;
  }
  html.layout-large body #taskmenu > a,
  html.layout-large body #taskmenu .action-buttons > a,
  html.layout-large body #taskmenu .special-buttons > a {
    display:flex !important; align-items:center; justify-content:flex-start;
    box-sizing:border-box; width:100% !important; min-width:0 !important; max-width:none !important;
    min-height:46px; margin:2px 0 !important;
    padding:0 14px !important; border-radius:10px !important;
    text-align:left !important; font-size:13px !important; line-height:1.25 !important;
  }
  html.layout-large body #taskmenu a::before {
    flex:none; float:none !important; width:23px !important;
    margin:0 11px 0 0 !important;
  }
  html.layout-large body #taskmenu a .inner {
    display:block !important; flex:1 1 auto; min-width:0;
    overflow:visible !important; text-overflow:clip !important; white-space:normal !important;
  }
  html.layout-large body #taskmenu .action-buttons {
    padding-bottom:12px; margin-bottom:10px; border-bottom:1px solid rgba(180,204,236,.12);
  }
  html.layout-large body #taskmenu .action-buttons > a {
    background:#8ec0ff !important; color:#081a2e !important; font-weight:750;
  }
  html.layout-large body #taskmenu .special-buttons {
    position:static !important; left:auto !important; right:auto !important; width:100% !important;
    padding-top:12px; margin-top:auto !important; border-top:1px solid rgba(180,204,236,.12);
  }
}
/* Keep Elastic's splitter on top of the colored panes; its own JS stores widths. */
html.layout-large body.task-mail #layout .column-resizer {
  display:block !important; z-index:20 !important; width:10px !important;
  right:-5px !important; cursor:col-resize !important; touch-action:none;
}
html.layout-large body.task-mail #layout .column-resizer.inverted { right:auto !important; left:-5px !important; }
body #taskmenu a, body #layout-menu a { color:var(--hglr-menu-text) !important; }
body #taskmenu a.selected, body #taskmenu .selected a, body #taskmenu a:hover {
  color:#f6faff !important; background:rgba(131,187,255,.18) !important;
}
body #taskmenu a.logout { color:#e4aeb7 !important; }

/* Mail workspace: folder cues, actionable toolbars and readable messages. */
body.task-mail #layout-sidebar > .header,
body.task-mail #layout-list > .header,
body.task-mail #layout-content > .header { min-height:62px !important; height:62px !important; }
body.task-mail #layout-sidebar > .header { justify-content:space-between !important; padding:0 18px !important; }
body.task-mail #layout-sidebar > .header .username {
  margin:0 !important; padding:0 !important; text-align:left !important;
  font-size:13px !important; font-weight:750 !important;
}
body.task-mail #folderlist-content { padding:17px 10px 20px !important; }
body.task-mail #folderlist-content::before {
  content:"ORDNER"; display:block; margin:0 12px 12px; color:var(--hglr-muted);
  font-size:10px; font-weight:800; letter-spacing:.18em;
}
body.task-mail #mailboxlist { background:transparent !important; }
body.task-mail #mailboxlist li { border:0 !important; margin:2px 0; border-radius:10px; }
body.task-mail #mailboxlist li > a { color:var(--hglr-muted) !important; border-radius:10px !important; }
body.task-mail #mailboxlist li:hover, body.task-mail #mailboxlist li > a:hover { background:var(--hglr-hover) !important; }
body.task-mail #mailboxlist li.selected, body.task-mail #mailboxlist li.selected > a {
  background:var(--hglr-selected) !important; color:var(--hglr-accent-text) !important; font-weight:750 !important;
}
body.task-mail #mailboxlist .unreadcount { color:var(--hglr-accent-text) !important; }
body.task-mail #mailsearchform { background:var(--hglr-soft) !important; border-bottom:1px solid var(--hglr-line) !important; }
body.task-mail #mailsearchform input { background:var(--hglr-input) !important; color:var(--hglr-text) !important; }
body.task-mail #layout-list > .header .toolbar, body.task-mail #layout-content > .header .toolbar {
  background:transparent !important; border:0 !important;
}
body.task-mail #messagelist { background:var(--hglr-soft) !important; }
body.task-mail #messagelist tr, body.task-mail #messagelist li { border-color:var(--hglr-line) !important; }
body.task-mail #messagelist tr:hover, body.task-mail #messagelist li:hover { background:var(--hglr-hover) !important; }
body.task-mail #messagelist tr.selected, body.task-mail #messagelist li.selected { background:var(--hglr-selected) !important; }
body.task-mail #messagelist .subject, body.task-mail #messagelist .from { color:var(--hglr-text) !important; }
body.task-mail #messagelist .date, body.task-mail #messagelist .message,
body.task-mail .listing-info { color:var(--hglr-muted) !important; }
body.task-mail #layout-list > .footer { background:var(--hglr-panel) !important; }
body.task-mail #layout-content .iframe-wrapper { background:var(--hglr-bg) !important; }

@media(max-width:1199px) {
  body #layout-menu .popover-header { background:var(--hglr-menu) !important; }
  body #layout-menu .popover-header #logo { max-height:50px !important; object-fit:contain; }
}
@media(max-width:760px) {
  body.task-mail #folderlist-content { padding-top:12px !important; }
}

/* Studio refresh: balanced reading space, readable navigation, clear surfaces. */
:root {
  --hglr-bg:#f0f5fa; --hglr-panel:#fff; --hglr-soft:#e8f1fa;
  --hglr-menu:#112237; --hglr-menu-text:#c4d7eb;
  --hglr-text:#152b45; --hglr-muted:#4d6278; --hglr-line:#d3e0ed;
  --hglr-accent:#125cae; --hglr-accent-text:#125cae;
  --hglr-hover:#e4f0fc; --hglr-selected:#d4e7fa; --hglr-input:#fff;
}
html.dark-mode {
  --hglr-bg:#091522; --hglr-panel:#112237; --hglr-soft:#192d44;
  --hglr-menu:#0c1929; --hglr-menu-text:#c4d7eb;
  --hglr-text:#f4f8ff; --hglr-muted:#b7c8db; --hglr-line:#31495f;
  --hglr-accent:#8cc1ff; --hglr-accent-text:#aed3ff;
  --hglr-hover:#243e58; --hglr-selected:#2a4e70; --hglr-input:#152a41;
}
body.task-login #layout-content { background:var(--hglr-bg) !important; }
.hglr-login-shell { gap:clamp(30px,5vw,84px); }
.hglr-login-intro h2 { letter-spacing:-.065em; }
.hglr-login-panel { border-radius:18px; box-shadow:0 22px 60px rgba(1,9,25,.16); }
.hglr-login-panel .hglr-login-brand { padding-bottom:21px; margin-bottom:24px; border-bottom:1px solid var(--hglr-line); }
.hglr-login-panel #rcmloginsubmit { background:#8cc1ff !important; border-radius:10px !important; }
html:not(.dark-mode) .hglr-login-panel #rcmloginsubmit { background:#125cae !important; color:#fff !important; }
body.task-mail #layout-sidebar,body.task-mail #layout-list,body.task-mail #layout-content {
  border-color:var(--hglr-line) !important; }
body.task-mail #layout-sidebar > .header,body.task-mail #layout-list > .header,
body.task-mail #layout-content > .header { min-height:68px !important; height:68px !important; }
body.task-mail #layout-sidebar > .header { background:var(--hglr-panel) !important; }
body.task-mail #layout-list .header-title,body.task-mail #layout-sidebar .header-title,
body.task-mail #layout-content .header-title { font-weight:730 !important; color:var(--hglr-text) !important; }
body.task-mail #mailboxlist li { margin:3px 8px !important; }
body.task-mail #mailboxlist li > a { padding:11px 12px !important; }
body.task-mail #layout-list,body.task-mail #layout-list .scroller { background:var(--hglr-soft) !important; }
body.task-mail #layout-content,body.task-mail #layout-content .iframe-wrapper { background:var(--hglr-bg) !important; }
body.task-mail #mailsearchform { background:var(--hglr-panel) !important; }
body.task-mail #mailsearchform input { border-radius:10px !important; }
body.task-mail #layout-list > .footer { border-top:1px solid var(--hglr-line) !important; }
body.task-mail #messagelist li,body.task-mail #messagelist tr { min-height:54px; }
/* Elastic owns the three pane widths and its column-resizer changes them.
   Keep backgrounds continuous behind the embedded empty preview in both modes. */
body.task-mail #layout { background:var(--hglr-bg) !important; }
body.task-mail #layout-content .iframe-wrapper { min-height:0; }
body.task-mail #layout-content #messagecontframe {
  display:block; background:var(--hglr-bg) !important; color-scheme:light;
}
html.dark-mode body.task-mail #layout-content #messagecontframe { color-scheme:dark; }
/* The wide three-column view has room for full toolbar labels. Elastic's
   fixed button widths otherwise truncate actions even on a 2K display. */
@media(min-width:1600px) {
  html.layout-large body.task-mail #layout-list > .header .toolbar a,
  html.layout-large body.task-mail #layout-content > .header #mailtoolbar > a:not(.hidden),
  html.layout-large body.task-mail #layout-content > .header #mailtoolbar .dropbutton > a:not(.dropdown) {
    width:auto !important; max-width:none !important; padding-inline:8px !important;
  }
  html.layout-large body.task-mail #layout-list > .header .toolbar a .inner,
  html.layout-large body.task-mail #layout-content > .header #mailtoolbar a .inner {
    max-width:none !important; overflow:visible !important;
    text-overflow:clip !important; white-space:nowrap !important;
  }
}
@media(max-width:760px) {
  .hglr-login-shell { gap:20px; }
  body.task-mail #mailboxlist li { margin:2px 4px !important; }
}