/* Dowebo child skin for Roundcube Elastic. Elastic remains the functional base. */
:root {
  --dowebo-blue: #145cff;
  --dowebo-blue-dark: #0f3da8;
  --dowebo-blue-soft: #eef4ff;
  --dowebo-cyan: #69c7ed;
  --dowebo-ink: #14243b;
  --dowebo-navy: #132238;
  --dowebo-navy-raised: #203650;
  --dowebo-muted: #667085;
  --dowebo-line: #dfe6f0;
  --dowebo-canvas: #f5f7fb;
  --dowebo-surface: #ffffff;
}

body { color: var(--dowebo-ink); }
a, .listing a, .popover a { color: var(--dowebo-blue); }

.task-login #layout,
.task-login #layout-content.dowebo-login-page { min-height: 100%; }

.task-login #layout-content.dowebo-login-page {
  align-items: center;
  background:
    radial-gradient(circle at 8% 4%, rgba(105, 199, 237, .24), transparent 30%),
    radial-gradient(circle at 94% 92%, rgba(20, 92, 255, .15), transparent 32%),
    linear-gradient(135deg, #f7fbff 0%, #eef4ff 100%);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  overflow: auto;
  padding: 42px 24px;
}

.dowebo-webmail-shell {
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(205, 218, 237, .95);
  border-radius: 28px;
  box-shadow: 0 30px 90px rgba(20, 36, 59, .15);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  max-width: 980px;
  min-height: 600px;
  overflow: hidden;
  width: 100%;
}

.dowebo-webmail-intro {
  background:
    radial-gradient(circle at 85% 12%, rgba(105, 199, 237, .2), transparent 30%),
    linear-gradient(145deg, #f8fbff 0%, #edf4ff 100%);
  border-right: 1px solid var(--dowebo-line);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 58px 54px;
}

.task-login .dowebo-webmail-intro #logo {
  display: block;
  filter: drop-shadow(0 8px 18px rgba(20, 36, 59, .08));
  height: auto;
  left: auto;
  margin: 0 0 30px;
  max-height: 58px;
  max-width: 210px;
  position: static;
  top: auto;
  transform: none;
  width: auto;
}

.dowebo-service-label {
  align-self: flex-start;
  background: #e4eeff;
  border: 1px solid #cbdcff;
  border-radius: 999px;
  color: var(--dowebo-blue-dark);
  font-size: .77rem;
  font-weight: 800;
  letter-spacing: .03em;
  padding: 8px 12px;
}

.dowebo-service-label small { color: #51627b; font-size: .72rem; font-weight: 700; }
.dowebo-webmail-intro h2 { color: var(--dowebo-ink); font-size: clamp(2rem, 3.2vw, 2.8rem); letter-spacing: -.045em; line-height: 1.04; margin: 20px 0 14px; max-width: 470px; }
.dowebo-intro-copy { color: #53627a; font-size: .98rem; line-height: 1.65; margin: 0; max-width: 470px; }
.dowebo-benefits { display: grid; gap: 13px; margin-top: 32px; }
.dowebo-benefits article { align-items: center; display: flex; gap: 13px; }
.dowebo-benefits article > span { align-items: center; background: #fff; border: 1px solid #d8e4f6; border-radius: 10px; color: var(--dowebo-blue); display: inline-flex; flex: 0 0 38px; font-size: 1rem; font-weight: 900; height: 38px; justify-content: center; }
.dowebo-benefits strong, .dowebo-benefits small { display: block; }
.dowebo-benefits strong { color: #1c2d46; font-size: .86rem; margin-bottom: 2px; }
.dowebo-benefits small { color: #68778d; font-size: .75rem; line-height: 1.45; }
.dowebo-newscloud-note { color: #728097; font-size: .72rem; margin: auto 0 0; padding-top: 34px; }
.dowebo-newscloud-note strong { color: var(--dowebo-ink); }

.dowebo-login-card { align-self: center; box-sizing: border-box; padding: 52px 46px; }
.dowebo-login-card header { margin-bottom: 26px; }
.dowebo-card-kicker { color: var(--dowebo-blue); font-size: .7rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.dowebo-login-card h2 { color: var(--dowebo-ink); font-size: 1.55rem; letter-spacing: -.025em; margin: 8px 0 7px; }
.dowebo-login-card header p { color: var(--dowebo-muted); font-size: .8rem; line-height: 1.5; margin: 0; }

.task-login .dowebo-login-card #login-form {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  left: auto;
  margin: 0;
  max-width: none;
  padding: 0;
  position: static;
  top: auto;
  transform: none;
  width: 100%;
}

.task-login #login-form .input-group { margin-bottom: 13px; }
.task-login #login-form .input-group-text,
.task-login #login-form input { background: #f8faff; border-color: #cfd9e7; color: var(--dowebo-ink); min-height: 48px; }
.task-login #login-form .input-group-text { border-radius: 10px 0 0 10px; color: #63728a; }
.task-login #login-form input { border-radius: 0 10px 10px 0; }
.task-login #login-form input:focus { background: #fff; border-color: var(--dowebo-blue); box-shadow: 0 0 0 3px rgba(20, 92, 255, .12); }

.task-login #rcmloginsubmit,
.btn-primary,
button.mainaction,
input.mainaction {
  background: linear-gradient(135deg, var(--dowebo-blue-dark), var(--dowebo-blue));
  border-color: var(--dowebo-blue);
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(20, 92, 255, .2);
  color: #fff;
  font-weight: 750;
  min-height: 46px;
}

.task-login #rcmloginsubmit:hover,
.btn-primary:hover,
button.mainaction:hover,
input.mainaction:hover { background: var(--dowebo-blue-dark); border-color: var(--dowebo-blue-dark); }

.dowebo-login-help { border-top: 1px solid #e8edf4; display: grid; gap: 9px; margin-top: 25px; padding-top: 21px; }
.dowebo-help-link { align-items: center; border: 1px solid #d9e2ef; border-radius: 10px; color: #34445d; display: flex; font-size: .76rem; font-weight: 750; justify-content: flex-start; min-height: 42px; padding: 0 12px; text-decoration: none; white-space: nowrap; }
.dowebo-help-link > span { align-items: center; background: #edf3ff; border-radius: 7px; color: var(--dowebo-blue); display: inline-flex; flex: 0 0 26px; font-size: .8rem; height: 26px; justify-content: center; margin-right: 9px; }
.dowebo-help-link:hover { background: #f7faff; border-color: #b9cff5; color: var(--dowebo-blue-dark); text-decoration: none; }
.task-login #login-footer { bottom: auto; color: #7c899b; font-size: .68rem; left: auto; margin-top: 21px; position: static; text-align: center; width: auto; }
.task-login #login-footer > div { background: transparent; }

/* Application shell: a neutral workspace with Dowebo blue reserved for actions. */
#layout { background: var(--dowebo-canvas); }
#layout-menu,
#layout-menu .popover-header {
  background: var(--dowebo-navy) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

#layout-menu {
  border-right: 1px solid #263a53;
  box-shadow: 8px 0 28px rgba(20, 36, 59, .08);
}

#layout-menu .popover-header {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  justify-content: center;
  min-height: 64px;
}

#layout-menu .popover-header #logo {
  filter: drop-shadow(0 6px 13px rgba(0, 0, 0, .2));
  height: 35px;
  margin: 0;
  max-height: 35px;
  max-width: 35px;
  object-fit: contain;
  width: 35px;
}

#taskmenu a {
  border-left: 3px solid transparent;
  color: #dbe5f2 !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

#taskmenu a:before { color: #aabbd0 !important; }
#taskmenu a .inner { color: inherit !important; font-weight: 650; }

#taskmenu a:hover {
  background: rgba(255, 255, 255, .07) !important;
  border-left-color: rgba(105, 199, 237, .55);
  color: #fff !important;
}

#taskmenu a.selected,
#taskmenu a.selected:hover {
  background: var(--dowebo-navy-raised) !important;
  border-left-color: var(--dowebo-cyan);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .12);
  color: #fff !important;
}

#taskmenu a.selected:before,
#taskmenu a:hover:before { color: var(--dowebo-cyan) !important; }
#taskmenu a.compose:before { color: var(--dowebo-cyan) !important; }
#taskmenu a.logout { color: #ff9a9a !important; }
#taskmenu a.about { display: none !important; }

@media screen and (min-width: 1200px) {
  #layout-menu {
    flex: 0 0 112px;
    width: 112px;
    min-width: 112px;
    max-width: 112px;
  }

  #taskmenu {
    width: 100%;
  }

  #taskmenu a {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    max-width: none;
    padding-left: 6px;
    padding-right: 6px;
    text-align: center;
    width: 100%;
  }

  #taskmenu a:before {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  #taskmenu a .inner {
    box-sizing: border-box;
    display: block;
    max-width: none;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
    width: 100%;
  }
}

#layout > div > .header {
  background: #f8fafc;
  border-color: var(--dowebo-line);
  color: var(--dowebo-ink);
}

#layout > div > .header a,
#layout > div > .header .button { color: #4b5d75; }
#layout > div > .header a:hover,
#layout > div > .header .button:hover { color: var(--dowebo-blue-dark) !important; }

#layout-sidebar,
#layout-list,
#layout-content,
#layout > div > .footer {
  background-color: var(--dowebo-surface);
  border-color: var(--dowebo-line);
}

#layout-sidebar > .header,
#layout-list > .header { background: #fbfcfe; }

.listing li,
.listing tr td { border-color: #edf1f6; color: #263750; }
.listing li.selected,
.listing tr.selected td,
.listing li.selected > a {
  background-color: #edf3ff !important;
  color: #153b87 !important;
}
.listing li.selected { box-shadow: inset 3px 0 0 var(--dowebo-blue); }
.listing li:hover,
.listing tr:hover td { background-color: #f7f9fc; }

.toolbar a.button,
.menu a,
.popupmenu a { color: #45566d; }
.toolbar a.button:hover,
.menu a:hover,
.popupmenu a:hover { color: var(--dowebo-blue-dark) !important; }

.btn-primary,
button.mainaction,
input.mainaction {
  background: var(--dowebo-blue);
  border-color: var(--dowebo-blue);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--dowebo-blue) !important;
  box-shadow: 0 0 0 3px rgba(20, 92, 255, .11) !important;
}

.ui-dialog,
.popover,
.popupmenu {
  border-color: var(--dowebo-line);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(20, 36, 59, .16);
}

.popover-header,
.ui-dialog-titlebar { background: #f8fafc; color: var(--dowebo-ink); }
.messagelist tr.unread td.subject span.subject { color: var(--dowebo-ink); font-weight: 750; }
.quota-widget .bar { background-color: #dce5f1; }
.quota-widget .value { background-color: var(--dowebo-cyan); }

@media (max-width: 768px) {
  #layout-menu .popover-header #logo { height: 31px; max-height: 31px; max-width: 31px; width: 31px; }
}

@media (max-width: 820px) {
  .task-login #layout-content.dowebo-login-page { align-items: flex-start; padding: 24px 16px; }
  .dowebo-webmail-shell { grid-template-columns: 1fr; max-width: 560px; }
  .dowebo-webmail-intro { border-bottom: 1px solid var(--dowebo-line); border-right: 0; padding: 38px 34px; }
  .task-login .dowebo-webmail-intro #logo { margin-bottom: 22px; max-height: 48px; }
  .dowebo-benefits { grid-template-columns: repeat(3, 1fr); }
  .dowebo-benefits article { align-items: flex-start; }
  .dowebo-benefits small { display: none; }
  .dowebo-newscloud-note { padding-top: 25px; }
  .dowebo-login-card { padding: 38px 34px; }
}

@media (max-width: 480px) {
  .task-login #layout-content.dowebo-login-page { padding: 12px; }
  .dowebo-webmail-shell { border-radius: 20px; }
  .dowebo-webmail-intro, .dowebo-login-card { padding: 28px 22px; }
  .dowebo-webmail-intro h2 { font-size: 1.75rem; }
  .dowebo-intro-copy { font-size: .86rem; }
  .dowebo-benefits { grid-template-columns: 1fr; margin-top: 24px; }
  .dowebo-benefits small { display: block; }
  .dowebo-newscloud-note { display: none; }
  .dowebo-help-link { font-size: clamp(.66rem, 3.25vw, .76rem); padding: 0 9px; }
  .dowebo-help-link > span { margin-right: 7px; }
}