/* M8 Newsletter Builder – Backend UI tweaks */

body[class*="do_m8nl_"] .tl_content_container{
  padding: 15px !important;
}

/* Empfänger-Liste: Badges */
body[class*="do_m8nl_"] .m8nl-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

body[class*="do_m8nl_"] .m8nl-badge{
  display: inline-block;
  font-size: 10px;
  line-height: 1.2;
  padding: 3px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

body[class*="do_m8nl_"] .m8nl-badge--ok{
  background: #1f7a3a;
  color: #fff;
}

body[class*="do_m8nl_"] .m8nl-badge--bad{
  background: #b3261e;
  color: #fff;
}

body[class*="do_m8nl_"] .m8nl-badge--muted{
  background: rgba(255,255,255,0.08);
  color: #fff;
  opacity: 0.95;
}

/* Fallback: Manche Ansichten rendern den Hauptbereich in anderen Contao-Containern */
body[class*="do_m8nl_"] .tl_listing_container{
  padding: 15px !important;
}

body[class*="do_m8nl_"] .tl_formbody_edit{
  padding: 15px !important;
}

/* Progressbar-Optik (kleine Qualitätssicherung) */
body[class*="do_m8nl_"] #m8nl_bar{
  transition: width 0.2s ease;
}


/* Queue/Tracking: dezente KPI-Pills */
body[class*="do_m8nl_"] .m8nl-kpi-block{
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  background: rgba(0,0,0,0.02);
}

body[class*="do_m8nl_"] .m8nl-kpi-title{
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  opacity: 0.9;
}

body[class*="do_m8nl_"] .m8nl-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[class*="do_m8nl_"] .m8nl-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.2;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
  white-space: nowrap;
}

body[class*="do_m8nl_"] .m8nl-pill strong{
  font-weight: 600;
}

body[class*="do_m8nl_"] .m8nl-pill--small{
  font-size: 11px;
  padding: 4px 9px;
}

body[class*="do_m8nl_"] .m8nl-pill--info{
  border-color: rgba(0,0,0,0.14);
  background: rgba(0,0,0,0.03);
}

body[class*="do_m8nl_"] .m8nl-pill--ok{
  color: #1f7a3a;
  border-color: rgba(31,122,58,0.28);
  background: rgba(31,122,58,0.08);
}

body[class*="do_m8nl_"] .m8nl-pill--warn{
  color: #8a5a00;
  border-color: rgba(138,90,0,0.28);
  background: rgba(138,90,0,0.08);
}

body[class*="do_m8nl_"] .m8nl-pill--bad{
  color: #b3261e;
  border-color: rgba(179,38,30,0.28);
  background: rgba(179,38,30,0.08);
}

body[class*="do_m8nl_"] .m8nl-pill--muted{
  opacity: 0.85;
}
/* ===========================
   Backend Navigation Icon (Contao-Style)
   - weiß (dark menu)
   - 13x13px
   - robust: Contao erzeugt je nach Version unterschiedliche DOM-Strukturen
   =========================== */
#tl_navigation a.group-m8_newsletter,
#tl_navigation a.group-m8-newsletter,
#tl_navigation li.group-m8_newsletter > a,
#tl_navigation li.group-m8-newsletter > a,
#tl_navigation li.group-m8_newsletter > strong,
#tl_navigation li.group-m8_newsletter > span,
#tl_navigation li.group-m8-newsletter > strong,
#tl_navigation li.group-m8-newsletter > span{
  background: url("icons/nl.svg") 3px 2px no-repeat !important;
  background-size: 13px 13px !important;
}

/* falls Contao hier kein Padding setzt (selten), erzwingen wir Platz fürs Icon */
#tl_navigation a.group-m8_newsletter,
#tl_navigation a.group-m8-newsletter,
#tl_navigation li.group-m8_newsletter > a,
#tl_navigation li.group-m8-newsletter > a{
  padding-left: 24px !important;
}

/* =========================================================
   Versand planen: datetime-local & geplante Info-Box im Darkmode dunkel
   (Browser rendert datetime-local oft mit weißem UA-Background – daher explizit)
   ========================================================= */
body.theme-dark[class*="do_m8nl_"] #m8nl_schedule_at,
body[data-theme="dark"][class*="do_m8nl_"] #m8nl_schedule_at,
body[data-color-scheme="dark"][class*="do_m8nl_"] #m8nl_schedule_at,
html[data-theme="dark"] body[class*="do_m8nl_"] #m8nl_schedule_at{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: #fff !important;
  color-scheme: dark;
}

/* "Geplant: dd.mm.yyyy hh:mm" Box (kommt aus Inline-Style) */
body.theme-dark[class*="do_m8nl_"] div[style*="background:#f9fafb"],
body[data-theme="dark"][class*="do_m8nl_"] div[style*="background:#f9fafb"],
body[data-color-scheme="dark"][class*="do_m8nl_"] div[style*="background:#f9fafb"],
html[data-theme="dark"] body[class*="do_m8nl_"] div[style*="background:#f9fafb"]{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
}

@media (prefers-color-scheme: dark){
  body[class*="do_m8nl_"] #m8nl_schedule_at{
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: #fff !important;
    color-scheme: dark;
  }
  body[class*="do_m8nl_"] div[style*="background:#f9fafb"]{
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.14) !important;
  }
}


/* =========================================================
   Versand planen: geplante Info-Box (grün)
   ========================================================= */
#m8nl-live-form + .m8nl-schedule-box{
  padding: 15px;
  width: auto;
  display: inline-block;
  background: rgba(88, 155, 14, .15);
  margin-top: 15px;
  color:#589b0e;
}

#m8nl-live-form + .m8nl-schedule-box button.tl_submit{
  color: #fff !important;
}

/* Fieldsets: Legend Abstand (Versand-Seite) */
body[class*="do_m8nl_send"] fieldset > legend{
  margin-bottom: 10px !important;
  display: block;
}