@import url("../../elastic/styles/styles.min.css");
/* Colex-Design fuer Roundcube Webmail: hell, passend zur Colex-App (Design 3) */
:root { --c-bg:#f4f6fc; --c-surface:#ffffff; --c-surface2:#f4f6fc; --c-surface3:#e9eefa; --c-line:#e6ebf5; --c-ink:#0e1a3d; --c-ink2:#42506f; --c-mute:#66748f; --c-brand:#2f6fdb; --c-brand-h:#2559b8; --c-link:#2159c7; --c-sky:#dae6fb; --c-sky-ink:#221272; --c-navy:#0b1533; --c-shadow:0 1px 2px rgba(14,26,61,.03),0 14px 30px -20px rgba(14,26,61,.22); --c-glow:0 12px 22px -12px rgba(47,111,219,.9); }
html, body { background-color: var(--c-bg); color: var(--c-ink); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a, .text-primary { color: var(--c-link); }
a:hover { color: var(--c-brand-h); }
/* Seitenmenue links wie die App-Seitenleiste */
#layout-menu { background-color: var(--c-navy); }
#layout-menu .popover-header, #layout-menu a, #layout-menu .button { color: #c3cce2; font-weight: 600; }
#layout-menu a:hover { background-color: rgba(255,255,255,.08); color: #fff; }
#layout-menu a.selected, #layout-menu .selected { background-color: var(--c-brand) !important; color: #fff !important; border-radius: 16px; box-shadow: var(--c-glow); }
/* Flaechen hell */
#layout-sidebar, #layout-list, #layout-content, .ui-dialog, .popover, .popover-body { background-color: var(--c-surface); color: var(--c-ink); }
#layout > .content, #layout-content .header, #layout-list .header, #layout-sidebar .header { background-color: var(--c-surface); border-color: var(--c-line); }
#layout-list .header a.selected, #layout-content .header a.selected { color: #0e1a3d; }
.listing li, .listing tbody tr { border-color: var(--c-line); }
.listing li.selected > a, .listing tbody tr.selected td, .messagelist tr.selected td { background-color: var(--c-sky) !important; color: var(--c-sky-ink) !important; }
.listing li:hover > a, .messagelist tr:hover td { background-color: var(--c-surface3); }
.badge-primary, .listing .unread .msgcount, .badge.badge-notice { background-color: var(--c-brand); color: #fff; }
.btn-primary, .btn-primary:focus { background-color: var(--c-brand); border-color: var(--c-brand); color: #fff; border-radius: 16px; font-weight: 700; box-shadow: var(--c-glow); }
.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active { background-color: var(--c-brand-h); border-color: var(--c-brand-h); }
.btn, .btn-secondary { border-radius: 16px; font-weight: 700; }
.form-control, .custom-select, input.form-control, select.form-control, textarea.form-control { background-color: var(--c-surface2); border: 1px solid transparent; border-radius: 16px; color: var(--c-ink); font-weight: 600; }
.form-control:focus, .custom-select:focus { background-color: #fff; border-color: var(--c-brand); box-shadow: 0 0 0 5px rgba(47,111,219,.16); }
.custom-control-input:checked ~ .custom-control-label::before, .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--c-brand); border-color: #0e1a3d; }
/* Anmeldeseite hell */
.task-login #layout-content, .task-login #layout, html.task-login, .task-login body { background-color: var(--c-bg) !important; }
.task-login .logo, .task-login #logo { max-height: 56px; }
.task-login #login-form { background-color: #fff; border-radius: 24px; padding: 2rem; box-shadow: var(--c-shadow); }
.task-login #login-form .input-group-text { background-color: var(--c-surface2); border-color: transparent; color: var(--c-mute); }
.task-login #login-form .formbuttons .btn { width: 100%; min-height: 46px; }
.task-login .formcontent, .task-login #login-footer, .task-login #login-footer a { color: var(--c-mute); }
/* "WEBMAIL" direkt unter dem Logo (schwarz), Roundcube-Zeile unten entfernt */
.task-login #logo { margin-bottom: 52px; }
.task-login #login-form { position: relative; }
.task-login #login-form::before { content: "WEBMAIL"; position: absolute; top: -50px; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .42em; text-indent: .42em; color: #0e1a3d; }
.task-login #login-footer { display: none; }

/* ===== Postfach-Ansicht im Stil der Colex-App (Design 3), nur ab Tablet-Breite ===== */
@media (min-width: 1000px) {
  html:not(.task-login), body:not(.task-login) { background-color: var(--c-bg); }
  body:not(.task-login) #layout { box-sizing: border-box; padding: 14px; gap: 14px; background-color: var(--c-bg); }
  /* schwebende Karten */
  body:not(.task-login) #layout > #layout-sidebar,
  body:not(.task-login) #layout > #layout-list,
  body:not(.task-login) #layout > #layout-content { border: 0 !important; border-radius: 24px; background-color: var(--c-surface); box-shadow: var(--c-shadow); overflow: hidden; }
  body:not(.task-login) #layout > div > .header,
  body:not(.task-login) #layout > div > .footer { background-color: var(--c-surface); border-color: var(--c-line); }
  body:not(.task-login) #layout > div > .header { border-bottom: 1px solid var(--c-line); }
  body:not(.task-login) #layout > div > .footer { border-top: 1px solid var(--c-line); }
  body:not(.task-login) #layout > div > .header .header-title { font-weight: 800; letter-spacing: -.01em; color: var(--c-ink); }
  /* Seitenleiste links wie die App-Navigation */
  body:not(.task-login) #layout > #layout-menu { border-radius: 30px; background-color: var(--c-navy); box-shadow: 0 30px 60px -30px #0b1533a6, inset 0 0 0 1px #ffffff0d; overflow: hidden; }
  body:not(.task-login) #layout-menu a.selected, body:not(.task-login) #layout-menu .selected { border-radius: 16px; margin: 2px 6px; }
  body:not(.task-login) #layout-menu a { border-radius: 16px; }
  /* Ordnerliste */
  .folderlist li > a, .treelist li > a { border-radius: 14px; margin: 1px 8px; }
  .folderlist li.selected > a, .treelist li.selected > a { background-color: var(--c-sky) !important; color: var(--c-sky-ink) !important; font-weight: 700; }
  .folderlist li.selected > a .icon, .folderlist li.selected > a:before { color: var(--c-brand); }
  .folderlist li:not(.selected) > a:hover { background-color: var(--c-surface2); }
  /* Werkzeugleiste */
  .toolbar a.button, .toolbar .button { border-radius: 14px; color: var(--c-ink2); font-weight: 600; }
  .toolbar a.button:not(.disabled):hover, .toolbar .button:not(.disabled):hover { background-color: var(--c-sky); color: var(--c-sky-ink); }
  .toolbar a.button.disabled { opacity: .45; }
  /* Suchleiste */
  .searchbar { background: transparent; border-color: var(--c-line); }
  .searchbar input, #quicksearchbar input { background-color: var(--c-surface2) !important; border-radius: 14px !important; border: 0 !important; font-weight: 600; }
  /* Nachrichtenliste */
  .messagelist tr td { border-color: var(--c-line); }
  .messagelist tr.unread td, .messagelist tr.unread td a { color: var(--c-ink); font-weight: 700; }
  .messagelist tr:not(.unread) td { color: var(--c-ink2); }
  .messagelist tr.focused td { box-shadow: none; }
  /* Leerer Zustand */
  .listing-info, .pane-empty { color: var(--c-mute); font-weight: 700; }
  #layout-content iframe, #layout-content .iframe-wrapper { background-color: var(--c-surface); }
  /* Fortschritt/Kontingent */
  .quota-widget .bar, .quota-widget .value { border-radius: 99px; }
  .quota-widget .bar { background-color: var(--c-surface3); }
  .quota-widget .value { background-color: var(--c-brand); }
}
/* Dialoge und Menues */
.popover, .popupmenu .popover-body, .ui-dialog, .modal-content, .ui-dialog .ui-dialog-titlebar { border-radius: 22px; }
.popover { box-shadow: 0 24px 44px -22px rgba(14,26,61,.32); border: 0; }
.popover .listing li a { border-radius: 12px; margin: 1px 6px; }
.popover .listing li a:hover { background-color: var(--c-sky); color: var(--c-sky-ink); }
.ui-dialog { box-shadow: 0 40px 90px -34px rgba(11,21,51,.65); border: 0; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { background-color: var(--c-surface); border-bottom: 1px solid var(--c-line); font-weight: 800; color: var(--c-ink); }
.ui-dialog .ui-dialog-buttonpane { border-top: 1px solid var(--c-line); }

/* ===== Feinschliff ===== */
@media (min-width: 1000px) {
  body:not(.task-login) #layout > #layout-menu { position: relative; width: 116px; min-width: 116px; flex: 0 0 116px; }
  #layout-menu .special-buttons { left: 0; right: 0; background: transparent !important; }
  #layout-menu .special-buttons a { background: transparent !important; color: #c3cce2; border-radius: 16px; margin: 2px 6px; }
  #layout-menu .special-buttons a:hover { background-color: rgba(255,255,255,.08) !important; color: #fff; }
  #layout-menu a.logout { color: #ff8b97 !important; }
  #layout-sidebar .listing li, #layout-sidebar .folderlist li, #layout-sidebar .treelist li { border: 0 !important; }
}
#messagestack > div, #messagestack .alert, #messagestack .toast { border-radius: 16px; box-shadow: 0 24px 44px -22px rgba(14,26,61,.45); border: 0; font-weight: 600; }
/* Dunkler Modus mit den dunklen Farben der App */
html.dark-mode { --c-bg:#0a1020; --c-surface:#111a31; --c-surface2:#182440; --c-surface3:#202f52; --c-line:#263653; --c-ink:#e9eefb; --c-ink2:#b8c3dc; --c-mute:#97a4c0; --c-link:#7fb1ff; --c-sky:#1a2b55; --c-sky-ink:#cfdcff; --c-navy:#060b1a; }

/* "WEBMAIL" unter dem Logo in der Seitenleiste */
@media (min-width: 1000px) {
  body:not(.task-login) #layout-menu .popover-header { height: auto !important; line-height: 1 !important; padding: 18px 0 14px !important; display: block; }
  body:not(.task-login) #layout-menu .popover-header img { display: block; margin: 0 auto; padding: 0; max-width: 84px; }
  body:not(.task-login) #layout-menu .popover-header::after { content: "WEBMAIL"; display: block; margin-top: 8px; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .34em; text-indent: .34em; color: #c3cce2; }
}

/* Feinschliff 2: Menuepunkte mittig in der breiteren Leiste, Ordner-Pillen mit Rand rechts */
@media (min-width: 1000px) {
  body:not(.task-login) #layout-menu .menu a, body:not(.task-login) #layout-menu .special-buttons a { width: calc(100% - 16px) !important; margin: 2px 8px !important; box-sizing: border-box; }
  body:not(.task-login) #layout-menu .popover-body, body:not(.task-login) #layout-menu .special-buttons { width: 100%; }
  #layout-sidebar .folderlist li > a, #layout-sidebar .treelist li > a { box-sizing: border-box; max-width: calc(100% - 16px); margin: 1px 8px; }
}

/* Feinschliff 3: Standard-Tuerkis durch App-Blau ersetzen, Schreiben-Ansicht */
a.button.text-primary, .formcontent a, #layout-content a:not(.button):not(.btn), .popover a.text-primary, .form-check-label a, .recipient-input a { color: var(--c-link); }
.form-control:focus, .custom-select:focus, .input-group.focus, .recipient-input.focus, .recipient-input:focus-within, .input-group .form-control:focus, #layout input:focus, #layout select:focus, #layout textarea:focus { border-color: var(--c-brand) !important; box-shadow: 0 0 0 4px rgba(47,111,219,.16) !important; outline: 0; }
.recipient-input, .input-group.recipient-input, .input-group { border-radius: 16px; }
.recipient-input { background-color: var(--c-surface2); border-color: transparent; }
.recipient-input ul.recipient-input, .recipient-input input { background: transparent !important; }
.input-group-append .btn, .input-group-prepend .btn, .input-group .btn { border-radius: 14px; }
.btn-secondary, .btn.btn-secondary { background-color: var(--c-sky); color: var(--c-sky-ink); border: 0; box-shadow: none; }
.btn-secondary:hover, .btn.btn-secondary:hover { background-color: #c9d9f7; color: var(--c-sky-ink); }
#composebodycontainer, #composebody, .mce-container, .tox-tinymce { border-radius: 16px; }
#composebody, .editor-toolbar { background-color: var(--c-surface2); border: 0; }
.attachmentslist, .upload-dropzone, #compose-attachments .attachmentslist, .dropzone { border-color: #bcd0f3; border-radius: 18px; }
.custom-switch .custom-control-label::before { background-color: var(--c-surface3); border-color: transparent; }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 4px rgba(47,111,219,.16); }
.pagenav .pagenav-pageno, .pagenav a.page, .pagenav .current { border-radius: 99px; }
.message-headers a, .header-links a, a.rcmContactAddress { color: var(--c-link); }
/* Symbole der Werkzeugleisten einheitlich */
#layout .toolbar a.button:not(.disabled):not(.create):not(.send):before, #layout .toolbar a.button:not(.disabled):not(.create):not(.send) .inner:before { color: var(--c-ink2); }
#layout .toolbar a.button.create:not(.disabled):before { color: var(--c-brand); }

/* Nachrichtenliste: luftiger, klare Hierarchie */
.messagelist td.subject { padding-top: 10px; padding-bottom: 10px; }
.messagelist td.subject span.fromto, .messagelist td.subject span.fromto a { color: var(--c-ink); font-weight: 700; font-size: 13.5px; }
.messagelist td.subject span.subject, .messagelist td.subject span.subject a { color: var(--c-ink2); }
.messagelist tr.unread td.subject span.subject, .messagelist tr.unread td.subject span.subject a { color: var(--c-ink); font-weight: 700; }
.messagelist td.subject span.date, .messagelist span.date { color: var(--c-mute); font-size: 12px; font-weight: 600; }
.messagelist tr.unread .msgicon.status:before, .messagelist .msgicon.status.unread:before { color: var(--c-brand); }
.messagelist tr.selected td.subject span, .messagelist tr.selected td.subject span a { color: var(--c-sky-ink) !important; }
.messagelist .flag span.flagged:before, .messagelist span.flag.flagged:before { color: #ff5a6a; }

/* Leseansicht und eingebettete Formulare (der Rahmen laedt diese Datei) */
.message-part div.pre, div.pre, .message-htmlpart, .message-part { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.6; color: var(--c-ink); }
.contactphoto img, .contactphoto { border-radius: 50%; }
.message-headers a, .header-title, h2.subject, .subject { color: var(--c-ink); }
.message-headers .header a, .header-links a, .headers-table td.header a { color: var(--c-link); }
.attachmentslist li { border-radius: 14px; background-color: var(--c-surface2); border: 0; }
fieldset legend, .propform legend { color: var(--c-ink); font-weight: 800; }
.propform .row label, .formcontent label { color: var(--c-ink2); font-weight: 600; }
.formbuttons .btn { min-height: 42px; }
.notice, .alert, .boxwarning { border-radius: 16px; }

/* Seitenleiste: einheitliche Farbe, Abstand unten */
@media (min-width: 1000px) {
  body:not(.task-login) #layout-menu .popover-header { background-color: transparent !important; border: 0; }
  body:not(.task-login) #layout-menu .popover-body, body:not(.task-login) #layout-menu .menu { background: transparent !important; }
  body:not(.task-login) #layout-menu .special-buttons { bottom: 10px; }
}

/* Menuepunkte fuellen die Leistenbreite */
@media (min-width: 1000px) {
  body:not(.task-login) #layout-menu .menu a, body:not(.task-login) #layout-menu .special-buttons a { width: auto !important; max-width: none !important; min-width: 0 !important; margin: 2px 10px !important; display: block; }
  body:not(.task-login) #layout-menu .menu, body:not(.task-login) #layout-menu .special-buttons { padding: 0; box-sizing: border-box; }
  body:not(.task-login) #layout-menu .special-buttons { display: block; }
}