/**
 * Baier Elektrotechnik – Roundcube-Skin (Child von Elastic)
 * Designsystem der Website: Navy #1e3a8a / #0c1e3e, Markenrot #d8201a,
 * Archivo (Display), IBM Plex Sans (Body), Leiterbahn-Signatur.
 */
@import url("../../elastic/styles/styles.min.css");

/* ---------- Fonts (lokal, keine externen Requests) ---------- */
@font-face {
  font-family: "Archivo";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/archivo-600.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/archivo-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
}

:root {
  --baier-navy: #1e3a8a;
  --baier-navy-deep: #0c1e3e;
  --baier-navy-hover: #16295e;
  --baier-action: #2b52c4;      /* freundlicheres Interaktions-Blau */
  --baier-action-hover: #1e3a8a;
  --baier-action-tint: rgba(43, 82, 196, 0.08);
  --baier-red: #d8201a;
  --baier-red-dark: #b3160f;
  --baier-text: #1c2430;
  --baier-muted: #5b6675;
  --baier-border: #e3e7ee;
  --baier-font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --baier-font-body: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
}

body {
  font-family: var(--baier-font-body);
}

/* =====================================================================
   LOGIN-SEITE
   ===================================================================== */

body.task-login {
  background-color: var(--baier-navy-deep);
  /* Leiterbahn-Muster: feine Traces + Lötpunkte, ein roter Akzent-Node */
  background-image:
    radial-gradient(ellipse 90% 60% at 15% 0%, rgba(30, 58, 138, 0.55), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.055' stroke-width='2'%3E%3Cpath d='M0 60 H150 V180 H290'/%3E%3Cpath d='M420 340 H310 V240 H180 V330'/%3E%3Cpath d='M60 420 V300 H130'/%3E%3Cpath d='M360 0 V90 H420'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.09'%3E%3Ccircle cx='150' cy='60' r='5'/%3E%3Ccircle cx='290' cy='180' r='5'/%3E%3Ccircle cx='180' cy='330' r='5'/%3E%3Ccircle cx='130' cy='300' r='5'/%3E%3Ccircle cx='360' cy='90' r='5'/%3E%3C/g%3E%3Ccircle cx='310' cy='240' r='5' fill='%23d8201a' fill-opacity='0.55'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

/* Elastic legt #layout(-content) mit Weiß über den Body-Hintergrund */
.task-login #layout,
.task-login #layout > div,
.task-login #layout-content {
  background: transparent !important;
}

.task-login #layout-content {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
  text-align: center;
}

.baier-login-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 44px 40px 32px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(4, 12, 28, 0.55);
  overflow: hidden;
}

/* Leiterbahn-Signatur: rote Trace mit Lötpunkt (wie Footer-Divider der Website) */
.baier-leiterbahn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  border-top: 3px solid var(--baier-red);
}
.baier-leiterbahn::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 68%;
  width: 18%;
  height: 13px;
  border-left: 3px solid var(--baier-red);
  border-bottom: 3px solid var(--baier-red);
}
.baier-leiterbahn::before {
  content: "";
  position: absolute;
  top: 6px;
  left: calc(68% - 4px);
  z-index: 1;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--baier-red);
}

/* Elastic-Positionierung (top:16vh/20vh) neutralisieren */
.task-login #logo,
#logo {
  position: static;
  top: auto;
  display: block;
  margin: 0 auto 4px;
  max-height: 72px;
  width: auto;
  opacity: 1;
}

.baier-login-head h2 {
  margin: 14px 0 6px;
  font-family: var(--baier-font-display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: 0.01em;
  color: var(--baier-navy-deep);
}
.baier-login-head p {
  margin: 0 0 22px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--baier-muted);
}

.task-login #login-form {
  position: static;
  top: auto;
  margin: 0;
  width: 100%;
  max-width: none;
  text-align: left;
}

.task-login #login-form .form-control,
.task-login #login-form input[type="text"],
.task-login #login-form input[type="password"] {
  height: 46px;
  padding: 10px 14px;
  font-family: var(--baier-font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--baier-navy-deep) !important;
  -webkit-text-fill-color: var(--baier-navy-deep);
  border: 1px solid var(--baier-border);
  border-radius: 8px;
  background: #fbfcfe;
}
.task-login #login-form .form-control::placeholder {
  color: #8a94a6;
  font-weight: 400;
}
.task-login #login-form .form-control:focus {
  border-color: var(--baier-navy);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.18);
  background: #fff;
}
.task-login #login-form label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--baier-text);
}

/* Icon-Boxen vor den Feldern im Branding */
.task-login #login-form .input-group-text,
.task-login #login-form .input-group-prepend .input-group-text {
  background: var(--baier-navy-deep);
  border: 1px solid var(--baier-navy-deep);
  border-radius: 8px 0 0 8px;
  color: #fff;
  width: 46px;
  justify-content: center;
}
.task-login #login-form .input-group-text * {
  color: #fff;
}
.task-login #login-form .input-group .form-control {
  border-radius: 0 8px 8px 0;
}

.task-login button.mainaction,
.task-login #rcmloginsubmit {
  width: 100%;
  height: 48px;
  margin-top: 6px;
  font-family: var(--baier-font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(180deg, var(--baier-action) 0%, var(--baier-navy) 100%);
  border: 0;
  border-radius: 10px;
  transition: filter 0.15s ease;
}
.task-login button.mainaction:hover,
.task-login button.mainaction:focus,
.task-login #rcmloginsubmit:hover,
.task-login #rcmloginsubmit:focus {
  filter: brightness(1.12);
  box-shadow: 0 0 0 3px rgba(43, 82, 196, 0.28);
}

.task-login #login-footer {
  position: static;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--baier-border);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--baier-muted);
}
.task-login #login-footer a {
  color: var(--baier-navy);
  text-decoration: none;
}
.task-login #login-footer a:hover {
  text-decoration: underline;
}

/* OAuth/„Andere Optionen“-Reste von Elastic zentrieren sich sonst seltsam */
.task-login #layout-content > :not(.baier-login-card) {
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 480px) {
  .baier-login-card {
    padding: 36px 22px 26px;
  }
}
/* =====================================================================
   APP-CHROME – Theme-Tokens (hell + dunkel), Card-Layout, Pills
   ===================================================================== */

:root {
  --app-bg: linear-gradient(180deg, #e9eef7 0%, #eef2f8 100%);
  --card-bg: #ffffff;
  --card-bg-2: #fbfcfe;
  --card-shadow: 0 8px 28px rgba(12, 30, 62, 0.08);
  --hover-bg: rgba(12, 30, 62, 0.06);
  --row-border: #edf0f5;
  --text-strong: #0c1e3e;
  --icon-muted: #3d4a63;
  --search-bg: #ffffff;
  --search-border: #e2e7f0;
  --select-tint: rgba(43, 82, 196, 0.10);
  --header-border: #e8ebf1;
}
html.dark-mode {
  --app-bg: linear-gradient(180deg, #080d19 0%, #0d1426 100%);
  --card-bg: #1a2338;
  --card-bg-2: #161e31;
  --card-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
  --hover-bg: rgba(255, 255, 255, 0.08);
  --row-border: #27304b;
  --text-strong: #eef2fa;
  --icon-muted: #a7b3cc;
  --search-bg: #212b44;
  --search-border: #323e5e;
  --select-tint: rgba(96, 136, 255, 0.20);
  --header-border: #27304b;
  --card-border: rgba(255, 255, 255, 0.07);
}
:root {
  --card-border: transparent;
}

/* ---------- Navy-Seitenleiste (beide Themes) ---------- */
#layout-menu {
  background: linear-gradient(180deg, #0c1e3e 0%, #14294f 100%) !important;
}
#layout-menu > div,
#layout-menu .header,
#layout-menu .popover-header,
#layout-menu #logo,
#taskmenu,
#taskmenu .special-buttons {
  background: transparent !important;
}
#taskmenu a,
#taskmenu a:before {
  color: #aeb9d2;
}
/* Pills mit klarem Innenabstand – nichts ragt mehr an die Kante */
#taskmenu a {
  border-radius: 10px;
  margin: 4px 10px;
  transition: background 0.12s ease, color 0.12s ease;
}
#taskmenu a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}
#taskmenu a.selected,
#taskmenu a.selected:hover {
  color: #fff;
  background: var(--baier-action) !important;
  box-shadow: none;
}
#taskmenu a.logout,
#taskmenu a.logout:before {
  color: #e8a5a2;
}
#taskmenu a.logout:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- Card-Layout (Desktop, beide Themes) ---------- */
@media (min-width: 1024px) {
  body:not(.task-login) {
    background: var(--app-bg) !important;
  }
  body:not(.task-login) #layout {
    padding: 14px 14px 14px 6px;
    background: transparent !important;
  }
  body:not(.task-login) #layout-sidebar,
  body:not(.task-login) #layout-list,
  body:not(.task-login) #layout-content {
    border: 1px solid var(--card-border) !important;
    border-radius: 14px;
    margin: 0 0 0 10px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    background: var(--card-bg) !important;
  }
  body:not(.task-login) #layout-list,
  body:not(.task-login) #layout-sidebar {
    background: var(--card-bg-2) !important;
  }
  body:not(.task-login) #layout-menu {
    border-radius: 14px;
    margin: 0;
    box-shadow: var(--card-shadow);
  }
}

/* ---------- Buttons & Links ---------- */
.btn {
  border-radius: 8px;
}
.btn-primary,
button.mainaction {
  background-color: var(--baier-action);
  border-color: var(--baier-action);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):active,
button.mainaction:hover,
button.mainaction:focus {
  background-color: var(--baier-action-hover);
  border-color: var(--baier-action-hover);
}
.btn-primary:focus,
.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(43, 82, 196, 0.22);
}
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  border-color: var(--baier-action);
}
html:not(.dark-mode) .btn-secondary {
  background-color: #eef1f7;
  border-color: #dfe4ee;
  color: var(--baier-navy-deep);
}
#layout-content a:not(.btn),
.popupmenu a:not(.btn) {
  color: var(--baier-action);
}
html.dark-mode #layout-content a:not(.btn),
html.dark-mode .popupmenu a:not(.btn) {
  color: #7d9dff;
}

/* ---------- Ordnerliste ---------- */
.folderlist li a {
  margin: 2px 8px;
  border-radius: 10px;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.folderlist li a:hover {
  background: var(--hover-bg);
}
.folderlist li.selected > a,
.listing li.selected > a {
  background: var(--select-tint) !important;
  border-left: 3px solid var(--baier-action);
  border-radius: 4px 10px 10px 4px;
  color: var(--text-strong) !important;
  font-weight: 600;
}
.folderlist li a span.unreadcount,
span.badge.bg-primary,
.badge-primary {
  background: var(--baier-action) !important;
  color: #fff !important;
  border-radius: 999px;
  font-weight: 600;
}

/* ---------- Nachrichtenliste ---------- */
.messagelist tr.message {
  border-bottom: 1px solid var(--row-border);
}
.messagelist tr.message td {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.messagelist tr.unread .subject,
.messagelist tr.unread td.subject a,
.messagelist tr.unread span.subject {
  font-weight: 600;
  color: var(--text-strong) !important;
}
.messagelist span.msgicon.status {
  color: var(--baier-action);
}
.messagelist tr.selected td {
  background: var(--select-tint) !important;
}
.messagelist tr:hover td {
  background-color: var(--hover-bg);
}
.listing li.selected,
.listing tr.selected td {
  background-color: var(--select-tint);
}

/* ---------- Kopfleisten & Toolbars: icon-only, ruhig ---------- */
#layout > div > .header {
  background: transparent !important;
  border-bottom: 1px solid var(--header-border) !important;
}
.toolbar {
  background: transparent !important;
  border-bottom: 0;
}
@media (min-width: 1024px) {
  /* Labels nur in der breiten Mail-/Inhaltsspalte */
  #layout-content .header .menu a .inner,
  #layout-content .header a.toolbar-button .inner,
  #layout-content .toolbar a.button .inner,
  #layout-content .toolbar a.button span.inner {
    display: inline !important;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip;
  }
  /* Schmale Listen-/Sidebar-Köpfe: nur Icons (Platz!) */
  #layout-list .header .menu a .inner,
  #layout-list .header a .inner,
  #layout-list .header a.toolbar-button .inner,
  #layout-sidebar .header .menu a .inner,
  #layout-sidebar .header a .inner {
    display: none !important;
  }
  #layout > div > .header .menu a,
  #layout > div > .header a.toolbar-button,
  .toolbar a.button,
  .toolbar a.toolbar-button {
    width: auto;
    min-width: 0;
    height: 38px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--icon-muted);
    margin: 6px 2px;
  }
  #layout > div > .header .menu a:before,
  #layout > div > .header a.toolbar-button:before,
  .toolbar a.button:before,
  .toolbar a.toolbar-button:before {
    margin: 0;
    font-size: 1.05rem;
    width: auto;
    height: auto;
    line-height: 1;
  }
  #layout > div > .header .menu a:hover,
  #layout > div > .header a.toolbar-button:hover,
  .toolbar a.button:hover {
    background: var(--hover-bg);
    color: var(--text-strong);
  }
  /* Dropdown-Pfeile klein halten */
  .toolbar a.button.dropdown,
  .toolbar .dropbutton a.dropdown {
    padding: 0 6px;
    min-width: 0;
  }
}

/* ---------- Suche ---------- */
.searchbar {
  border: 1px solid var(--search-border) !important;
  background: var(--search-bg) !important;
  border-radius: 999px !important;
  margin: 6px 8px;
}

/* ---------- Titel & Nachrichtenkopf ---------- */
#layout-content .header span.header-title,
#layout-list .header span.header-title,
#layout-sidebar .header span.header-title,
.formcontent legend {
  font-family: var(--baier-font-display);
  font-weight: 600;
  color: var(--text-strong);
}
#message-header .subject,
h2.subject {
  font-family: var(--baier-font-display);
  font-weight: 600;
  color: var(--text-strong) !important;
}
#message-header {
  background: var(--card-bg-2) !important;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 10px;
  border-left: 3px solid var(--baier-action);
}

/* ---------- Einstellungs-/Kontaktlisten ---------- */
#layout-content .listing li a {
  border-radius: 8px;
  margin: 1px 6px;
}

/* ---------- Popups, Dialoge, Scrollbars ---------- */
.popover,
.popupmenu,
.dropdown-menu {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
}
.ui-dialog {
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgba(120, 135, 165, 0.45);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* Dark-Mode-Feinschliff: Fußbuttons ohne Kachel-Boxen, keine Haarlinien */
html.dark-mode #layout-menu .special-buttons a:not(:focus),
html.dark-mode #layout-menu .special-buttons a {
  background: transparent !important;
  border: 0 !important;
}
#layout-menu,
#layout-sidebar,
#layout-list {
  border-right: 0 !important;
  border-left: 0 !important;
}

/* Dropdown-Pfeile: nur Pfeil, kein Label (sonst Überlappung) */
.toolbar a.dropdown .inner,
.toolbar a.button.dropdown .inner,
#layout > div > .header .menu a.dropdown .inner {
  display: none !important;
}

/* Mail-Lesebereich an die Dunkel-Palette angleichen (statt Elastic-Graugrün) */
html.dark-mode #layout-content,
html.dark-mode #message-content,
html.dark-mode #messagebody,
html.dark-mode .message-part,
html.dark-mode #message-parts {
  background-color: var(--card-bg) !important;
}

/* Elastic begrenzt Toolbar-Buttons auf 6rem – in der breiten Spalte aufheben */
@media (min-width: 1024px) {
  #layout-content .header .menu a,
  #layout-content .toolbar a.button,
  #layout-content .toolbar a.toolbar-button {
    max-width: none !important;
    float: none;
    overflow: visible;
  }
}

/* ---------- Positions-Fixes: kompakte Toolbar, Sidebar-Feinschliff ---------- */
@media (min-width: 1024px) {
  /* Buttons kompakt, damit die komplette Leiste in die Spalte passt */
  #layout-content .header .menu a,
  #layout-content .header a.toolbar-button,
  #layout-content .toolbar a.button,
  #layout-content .toolbar a.toolbar-button {
    height: 36px;
    padding: 0 9px;
    gap: 5px;
    margin: 11px 1px;
  }
  #layout-content .header .menu a .inner,
  #layout-content .header a.toolbar-button .inner,
  #layout-content .toolbar a.button .inner,
  #layout-content .toolbar a.button span.inner {
    font-size: 0.78rem;
  }
  #layout-content .header .menu a:before,
  #layout-content .header a.toolbar-button:before,
  #layout-content .toolbar a.button:before,
  #layout-content .toolbar a.toolbar-button:before {
    font-size: 1rem;
  }
  #layout-content .toolbar a.button.dropdown {
    padding: 0 5px;
  }
}

/* Sidebar: Labels passend (kein "Einstellung..."), Fuß mit Abstand */
#taskmenu a {
  font-size: 0.72rem;
  letter-spacing: 0;
}
#taskmenu .special-buttons {
  padding-bottom: 10px;
}

/* Sidebar-Buttons exakt IN der Spalte: Breite an Innenraum koppeln
   (Elastic erzwingt width:78px = volle Spaltenbreite, plus Margin = Überstand) */
#layout-menu {
  width: 92px !important;
}
#taskmenu a {
  width: calc(100% - 16px) !important;
  margin: 4px 8px;
  box-sizing: border-box;
}
#taskmenu .special-buttons {
  /* NICHT width:100%: der Container ist absolut positioniert und würde
     sonst unsichtbar die ganze Fensterbreite überlagern (Klick-Blocker!) */
  width: 92px;
}

/* "Schreiben" wie alle anderen Menüpunkte färben (Elastic-Sonderfarbe aufheben) */
#taskmenu a.compose,
#taskmenu a.compose:before {
  color: #aeb9d2;
}
#taskmenu a.compose:hover,
#taskmenu a.compose:hover:before {
  color: #fff;
}
#taskmenu a.compose.selected,
#taskmenu a.compose.selected:before {
  color: #fff;
}