/* benzumpe_design – Gestaltung über dem umgefärbten Elastic-Skin */

/* ===== Allgemein ===================================================== */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.btn, .button.btn, .popupmenu .btn { border-radius: .5rem; }
.form-control, .custom-select { border-radius: .5rem; }
.btn-primary, .btn.mainaction { background-color: #4f46e5; border-color: #4f46e5; }
.btn-primary:hover, .btn.mainaction:hover { background-color: #4338ca; border-color: #4338ca; }

/* Links im Dunkelmodus hell genug (:where = gleiche Spezifität wie Elastics „a“,
   gezielt gefärbte Elemente wie Ordnernamen bleiben unberührt) */
:where(html.dark-mode) a { color: #a5b4fc; }
:where(html.dark-mode) a:hover { color: #c7d2fe; }

/* Kopf- und Fußleisten ruhig und hell */
html:not(.dark-mode) #layout > div > .header,
html:not(.dark-mode) #layout > div > .footer { background-color: #f8fafc; }
html:not(.dark-mode) #layout > div > .header { border-bottom-color: #e2e8f0; }

/* Dunkelmodus: Spalten in Ebenen statt einheitlichem Grau */
html.dark-mode #layout-sidebar { background-color: #111113; }
html.dark-mode #layout-list { background-color: #151518; }
html.dark-mode #layout-content,
html.dark-mode body.action-preview,
html.dark-mode body.action-show { background-color: #1a1a1d; }
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer { background-color: transparent; border-color: #27272a; }
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list { border-right-color: #27272a; }

/* ===== Navigation links (Taskmenü) =================================== */
#layout-menu,
#layout-menu .popover-header,
#taskmenu .special-buttons { background-color: #0f172a !important; }
html.dark-mode #layout-menu,
html.dark-mode #layout-menu .popover-header,
html.dark-mode #taskmenu .special-buttons { background-color: #09090b !important; }
html.dark-mode #layout-menu { border-right: 1px solid #27272a; }
html.dark-mode #layout-menu .popover-header { border-bottom-color: #27272a; }
#layout-menu .popover-header img { padding: .6rem; }

#taskmenu a,
html.dark-mode #taskmenu a {
  color: #94a3b8;
  border-color: transparent !important;
  transition: background-color .15s ease, color .15s ease;
}
#taskmenu a:hover,
#taskmenu a:focus,
html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu a:focus { color: #fff; background-color: rgba(255, 255, 255, .06); }
#taskmenu a.selected,
#taskmenu a.selected:hover,
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a.selected:hover {
  color: #fff;
  background-color: rgba(99, 102, 241, .22);
  box-shadow: inset 3px 0 0 #818cf8;
}
#taskmenu a.logout,
#taskmenu a.logout:hover { color: #f87171 !important; }

/* „Schreiben“ als klarer Hauptbutton */
#taskmenu .action-buttons a.compose,
html.dark-mode #taskmenu .action-buttons a.compose {
  width: auto;
  margin: .6rem .4rem .4rem;
  border-radius: 12px;
  color: #fff;
  background-color: #4f46e5;
  box-shadow: 0 8px 18px -8px rgba(79, 70, 229, .8);
}
#taskmenu .action-buttons a.compose:hover,
#taskmenu .action-buttons a.compose:focus,
html.dark-mode #taskmenu .action-buttons a.compose:hover,
html.dark-mode #taskmenu .action-buttons a.compose:focus { color: #fff; background-color: #6366f1; }
#taskmenu .action-buttons a.compose.selected { box-shadow: 0 0 0 2px #a5b4fc; }

/* ===== Ordnerliste =================================================== */
ul.treelist li > a,
ul.treelist li > div > a { border-radius: 8px; margin: 1px 6px; }
ul.treelist li.selected > a,
ul.treelist li.selected > div > a {
  color: #3730a3;
  background-color: #eef2ff;
  box-shadow: inset 3px 0 0 #6366f1;
}
html.dark-mode ul.treelist li.selected > a,
html.dark-mode ul.treelist li.selected > div > a,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a {
  color: #e0e7ff;
  background-color: rgba(129, 140, 248, .16);
  box-shadow: inset 3px 0 0 #818cf8;
}

/* Ungelesen-Zähler als Akzent-Pille */
#mailboxlist li .unreadcount {
  min-width: 1.6em;
  padding: 0 .45em;
  border-radius: 999px;
  color: #fff;
  background-color: #4f46e5;
  text-align: center;
}
html.dark-mode #mailboxlist li .unreadcount { background-color: #6366f1; }

/* ===== Nachrichtenliste ============================================== */
#messagelist td.subject span.subject a { color: inherit; }
.listing tr.selected td,
.listing li.selected { color: inherit; background-color: #eef2ff; }
html.dark-mode .listing tr.selected td,
html.dark-mode .listing li.selected { color: #f4f4f5; background-color: rgba(129, 140, 248, .16); }
html.dark-mode .listing li.selected ul,
html.dark-mode ul.treelist li.selected { background-color: transparent; }

/* ===== Lesebereich =================================================== */
/* HTML-Mails behalten im Dunkelmodus ihren hellen Grund – als saubere Karte */
html.dark-mode .message-htmlpart {
  margin-top: .75rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  box-shadow: 0 0 0 1px #3f3f46;
}
.message-partheaders { border-radius: 10px; }

/* Suchfeld */
.searchbar,
.searchbar input { border-radius: 10px; }

/* ===== Login-Seite =================================================== */
body.task-login,
body.task-login #layout {
  background-color: #0b1020;
  background-image:
    radial-gradient(60rem 40rem at 15% -10%, rgba(99, 102, 241, .35), transparent 60%),
    radial-gradient(50rem 35rem at 110% 110%, rgba(67, 56, 202, .30), transparent 60%);
  background-attachment: fixed;
}
body.task-login #layout-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 2.5rem 1rem;
  background: transparent;
  overflow-y: auto;
}
body.task-login #logo {
  position: static;
  top: auto;
  max-height: 44px;
  margin: 0 0 2rem;
  opacity: 1;
}
body.task-login #login-form {
  top: auto;
  width: 100%;
  max-width: 410px;
  padding: 2.25rem 2rem 1.25rem;
  background: #fff;
  border-radius: 20px;
  text-align: left;
  box-shadow: 0 40px 80px -30px rgba(2, 6, 23, .75), 0 0 0 1px rgba(255, 255, 255, .06);
}
body.task-login #login-form::before {
  content: "Willkommen zurück";
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #0f172a;
}
body.task-login #login-form table::before {
  content: "Melde dich mit deiner @benzumpe.de-Adresse an.";
  display: block;
  margin: .35rem 0 1.5rem;
  color: #64748b;
  font-size: .95rem;
}
body.task-login #login-form .form-group { margin-bottom: .9rem; }
body.task-login #login-form .input-group-lg > .form-control,
body.task-login #login-form .input-group-lg .input-group-text {
  height: 50px;
  font-size: 1rem;
}
body.task-login #login-form .input-group-text {
  min-width: 48px;
  justify-content: center;
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
  border-radius: 12px 0 0 12px;
}
body.task-login #login-form .form-control {
  border-color: #e2e8f0;
  border-radius: 0 12px 12px 0;
  background: #fff;
  color: #0f172a;
}
body.task-login #login-form .form-control::placeholder { color: #94a3b8; }
body.task-login #login-form .input-group:focus-within .input-group-text { border-color: #6366f1; color: #4f46e5; }
body.task-login #login-form .form-control:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .15);
}
body.task-login #rcmloginsubmit {
  height: 50px;
  margin-top: .4rem;
  border: 0;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none !important;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #4338ca);
  box-shadow: 0 12px 24px -10px rgba(79, 70, 229, .7);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
body.task-login #rcmloginsubmit:hover { filter: brightness(1.08); transform: translateY(-1px); }
body.task-login #rcmloginsubmit:active { transform: none; }
body.task-login #rcmloginsubmit:focus { box-shadow: 0 0 0 4px rgba(99, 102, 241, .3); }
body.task-login #login-footer {
  margin-top: .75rem;
  color: #94a3b8;
  font-size: .8rem;
  text-align: center;
}
body.task-login #login-footer > div { background: #f1f5f9; border-radius: 10px; }
body.task-login .noscriptwarning,
body.task-login #messagestack { color: #e2e8f0; }

/* Login im Dunkelmodus */
html.dark-mode body.task-login #login-form {
  background: #0f172a;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(148, 163, 184, .15);
}
html.dark-mode body.task-login #login-form::before { color: #f1f5f9; }
html.dark-mode body.task-login #login-form table::before { color: #94a3b8; }
html.dark-mode body.task-login #login-form .input-group-text { background: #1e293b; border-color: #334155; color: #94a3b8; }
html.dark-mode body.task-login #login-form .form-control { background: #0b1220; border-color: #334155; color: #f1f5f9; }

/* Kleine Bildschirme */
@media (max-width: 480px) {
  body.task-login #layout-content { justify-content: flex-start; padding-top: 2rem; }
  body.task-login #login-form { padding: 1.75rem 1.25rem 1rem; border-radius: 16px; }
  body.task-login #login-form::before { font-size: 1.35rem; }
}