/* Poczta Idzik — Roundcube Elastic brand theme */
:root {
  --idz-navy: #1f3554;
  --idz-navy-2: #2a4668;
  --idz-menu: #1f3554;
  --idz-menu-2: #243e5f;
  --idz-menu-hover: #2a4668;
  --idz-menu-active: #31567e;
  --idz-accent: #1f3554;
  --idz-accent-2: #2f547a;
  --idz-silver: #7a8796;
  --idz-line: #d7dee6;
  --idz-bg: #ffffff;
  --idz-bg-soft: #f5f7fa;
}

html:not(.dark-mode) body {
  background: var(--idz-bg-soft) !important;
}

body.task-login,
body.task-login #layout {
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(31, 53, 84, 0.08), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f3f6f9 100%) !important;
}

/*
 * Elastic defaults break the login composition:
 *   .task-login #logo { top: 16vh }
 *   #login-form { top: 20vh; position: relative }
 * Kill those offsets and center logo+form as one block.
 */
body.task-login #layout,
body.task-login #layout-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  height: 100% !important;
}

body.task-login #layout-content {
  flex-direction: column !important;
  background: transparent !important;
  text-align: center !important;
  width: 100% !important;
}

body.task-login .idz-login-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  max-width: 420px;
  width: min(420px, 94vw);
  margin: 0 auto !important;
  padding: 0.5rem 1rem 1.5rem;
}

body.task-login #logo,
.task-login #logo,
body.task-login .idz-login-logo {
  display: block !important;
  position: static !important;
  top: 0 !important;
  left: auto !important;
  width: auto !important;
  max-width: min(380px, 88vw) !important;
  height: auto !important;
  max-height: 200px !important;
  margin: 0 auto 0.75rem !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 14px rgba(31, 53, 84, 0.1));
}

/* CRITICAL: Elastic pushes the form with top:20vh */
body.task-login #login-form,
.task-login #login-form,
#login-form {
  position: static !important;
  top: 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 420px !important;
}

body.task-login #login-form {
  background: #fff !important;
  border: 1px solid var(--idz-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 40px rgba(31, 53, 84, 0.08) !important;
  padding: 1.4rem 1.5rem 1.2rem !important;
  text-align: left !important;
}

body.task-login .idz-login-tagline {
  display: block;
  margin-top: 0.35rem;
  color: var(--idz-silver);
  font-size: 0.86rem;
  text-align: center;
}

/* Separate icon addon from username/password fields */
body.task-login #login-form .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0.55rem !important;
}

body.task-login #login-form .input-group > .input-group-prepend,
body.task-login #login-form .input-group > .input-group-append {
  margin: 0 !important;
}

body.task-login #login-form .input-group .input-group-text,
body.task-login #login-form .input-group .icon {
  border-radius: 10px !important;
  border: 1px solid var(--idz-line) !important;
  margin: 0 !important;
}

body.task-login #login-form .input-group > input,
body.task-login #login-form .input-group > .form-control {
  border-radius: 10px !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
}

body.task-login #login-form .form-control,
body.task-login #login-form input {
  border-radius: 10px !important;
  border-color: var(--idz-line) !important;
}

body.task-login #login-form .form-control:focus,
body.task-login #login-form input:focus {
  border-color: var(--idz-navy) !important;
  box-shadow: 0 0 0 3px rgba(31, 53, 84, 0.14) !important;
}

body.task-login #login-form .button,
body.task-login #login-form button,
body.task-login .button.mainaction,
body.task-login input.button {
  background: #1f3554 !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 11px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px rgba(31, 53, 84, 0.25) !important;
}

body.task-login #login-footer {
  color: var(--idz-silver) !important;
  font-size: 0.85rem !important;
}

#messagestack .error,
body.task-login #messagestack > div.error,
.listingmessage.error {
  background: #fff7f7 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 24px rgba(153, 27, 27, 0.06) !important;
}

#messagestack .confirmation,
#messagestack .notice {
  border-radius: 12px !important;
}

/* ===== Left menu: flat dark gray (no mottled navy patches) ===== */
#layout-menu,
#layout-menu.popover,
html.layout-phone #layout-menu,
html.layout-small #layout-menu {
  background: var(--idz-menu) !important;
  background-image: none !important;
  border-right: 1px solid #16263d !important;
}

#layout-menu .popover-header,
#layout-menu .special-buttons,
#layout-menu .menu,
#layout-menu .bottom-toolbar,
#layout-menu .footer {
  background: var(--idz-menu) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

#layout-menu .popover-header {
  border-bottom: 1px solid #16263d !important;
}

#layout-menu .popover-header img,
#layout-menu #logo {
  max-height: 36px !important;
  max-width: 110px !important;
  width: auto !important;
  height: auto !important;
  opacity: 0.98;
  padding: 0.35rem 0 !important;
  filter: none !important;
}

#layout-menu a,
#layout-menu .special-buttons a,
#layout-menu .menu a {
  background: transparent !important;
  background-image: none !important;
  color: #e8eaed !important;
  box-shadow: none !important;
  border: 0 !important;
}

#layout-menu a:hover,
#layout-menu .special-buttons a:hover,
#layout-menu .menu a:hover {
  background: var(--idz-menu-hover) !important;
  color: #fff !important;
}

#layout-menu a.selected,
#layout-menu .selected > a,
#layout-menu .special-buttons a.selected {
  background: var(--idz-menu-active) !important;
  color: #fff !important;
  box-shadow: none !important;
}

#layout-menu a:before,
#layout-menu .special-buttons a:before {
  color: inherit !important;
}

.header,
#layout-content > .header {
  border-bottom-color: var(--idz-line) !important;
}

.button.mainaction,
a.button.mainaction,
button.mainaction,
.formbuttons .button.mainaction {
  background: #1f3554 !important;
  border: 0 !important;
  color: #fff !important;
}

a:not(.button):not(.menuitem) {
  color: var(--idz-accent-2);
}

#mailboxlist li.selected > a,
#directorylist li.selected > a {
  background: rgba(44, 48, 53, 0.08) !important;
}

/* Error page */
.idz-error-page {
  background: transparent !important;
}

.idz-error-wrap {
  max-width: 520px;
  margin: 6vh auto;
  padding: 1rem 1.25rem 2rem;
  text-align: center;
}

.idz-error-wrap img#logo,
.idz-error-wrap img.logo,
.idz-error-wrap .idz-login-logo {
  max-width: min(360px, 88vw) !important;
  height: auto !important;
  margin: 0 auto 1.1rem !important;
  display: block !important;
}

.idz-error-card {
  background: #fff;
  border: 1px solid var(--idz-line);
  border-radius: 18px;
  padding: 1.35rem 1.25rem 1.2rem;
  box-shadow: 0 18px 40px rgba(31, 53, 84, 0.08);
  text-align: left;
}

.idz-error-card .boxerror .icon {
  display: none !important;
}

.idz-error-card .boxerror {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.idz-error-card .error-title {
  margin: 0 0 0.45rem !important;
  font-size: 1.15rem !important;
  text-transform: none !important;
  letter-spacing: -0.01em;
  color: #1f3554 !important;
  text-align: center;
}

.idz-error-card .error-text:empty,
.idz-error-card p:empty {
  display: none !important;
}

.idz-error-card .error-text {
  color: #5b6b7c !important;
  line-height: 1.45;
  font-size: 0.95rem;
  text-align: center;
}

.idz-error-card a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff !important;
  background: #1f3554;
  border-radius: 11px;
  padding: 0.7rem 1.2rem;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(44, 48, 53, 0.22);
}

.idz-error-card > p {
  text-align: center;
}

body.task-error,
body.idz-error {
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(44, 48, 53, 0.06), transparent 55%),
    #fff !important;
}

/* ===== Dark mode: do not force light chrome ===== */
html.dark-mode body {
  background-color: #21292c !important;
  color: #c5d1d3 !important;
}

html.dark-mode #layout-content,
html.dark-mode #layout-list,
html.dark-mode #layout-sidebar,
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer {
  background-color: transparent !important;
  border-color: #4d6066 !important;
  color: #c5d1d3 !important;
}

html.dark-mode .header,
html.dark-mode #layout-content > .header {
  background-color: transparent !important;
  border-bottom-color: #4d6066 !important;
  color: #c5d1d3 !important;
}

html.dark-mode a:not(.button):not(.menuitem) {
  color: #8ec5ff;
}

html.dark-mode .listing li a,
html.dark-mode .folderlist li a {
  color: #c5d1d3 !important;
}

html.dark-mode #mailboxlist li.selected > a,
html.dark-mode #directorylist li.selected > a,
html.dark-mode .listing li.selected > a {
  background: rgba(49, 86, 126, 0.55) !important;
  color: #fff !important;
}

html.dark-mode .listing tbody tr.selected td {
  background: rgba(49, 86, 126, 0.35) !important;
}

html.dark-mode .listing tbody tr:hover td,
html.dark-mode .folderlist li a:hover {
  background: rgba(49, 86, 126, 0.18) !important;
}

/* Message reading pane: dark chrome, HTML mail as a paper card */
html.dark-mode #message-header,
html.dark-mode #messagecontent,
html.dark-mode #messagebody,
html.dark-mode .content.frame-content,
html.dark-mode .iframe-wrapper {
  background-color: #21292c !important;
  color: #c5d1d3 !important;
}

html.dark-mode .message-partheaders {
  background-color: #2c373a !important;
  border-color: #4d6066 !important;
}

html.dark-mode .message-part {
  background: transparent !important;
  color: #c5d1d3 !important;
  border-color: #4d6066 !important;
}

html.dark-mode .message-htmlpart {
  background: #f4f6f8 !important;
  color: #2c363a !important;
  margin: 0.75rem 1rem 1.25rem !important;
  padding: 0 !important;
  border-radius: 10px !important;
  overflow: auto !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

html.dark-mode .attachmentslist,
html.dark-mode p.image-attachment {
  background-color: #2c373a !important;
  border-color: #4d6066 !important;
  color: #c5d1d3 !important;
}

html.dark-mode .searchbar,
html.dark-mode .searchbar input {
  background-color: #2c373a !important;
  border-color: #4d6066 !important;
  color: #c5d1d3 !important;
}

html.dark-mode .toolbar a,
html.dark-mode .header a.button {
  color: #c5d1d3 !important;
}

html.dark-mode .watermark {
  opacity: 0.12;
}

/* Settings / vacation plugin in dark mode */
html.dark-mode .exv-wrap {
  --exv-ink: #c5d1d3;
  --exv-muted: #8ba3a7;
  --exv-line: #4d6066;
  --exv-bg: #2c373a;
  --exv-card: #2c373a;
  --exv-accent: #7eb6ff;
  color: #c5d1d3;
}

html.dark-mode .exv-card,
html.dark-mode .exv-hero,
html.dark-mode .exv-status {
  background: #2c373a !important;
  border-color: #4d6066 !important;
}

html.dark-mode .exv-field input,
html.dark-mode .exv-field textarea {
  background: #21292c !important;
  border-color: #4d6066 !important;
  color: #c5d1d3 !important;
}

html.dark-mode body.task-login,
html.dark-mode body.task-login #layout {
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(49, 86, 126, 0.25), transparent 55%),
    linear-gradient(180deg, #1b2428 0%, #21292c 100%) !important;
}

html.dark-mode body.task-login #login-form {
  background: #2a3438 !important;
  border-color: #4d6066 !important;
  color: #c5d1d3 !important;
}

html.dark-mode body.task-login #login-form input,
html.dark-mode body.task-login #login-form .form-control,
html.dark-mode body.task-login #login-form .input-group-text {
  background: #21292c !important;
  border-color: #4d6066 !important;
  color: #c5d1d3 !important;
}

html:not(.dark-mode) .idz-login-logo-dark {
  display: none !important;
}
html.dark-mode .idz-login-logo-light {
  display: none !important;
}
html.dark-mode body.task-login .idz-login-logo {
  filter: none !important;
}