/* MLD Direkt-Mail Admin - dm.css
   Signatur: Marken-Tricolor oben + Monospace fuer Daten (Fallakten-Optik). */

:root{
  --ink:#14181c; --paper:#eef1f4; --card:#ffffff; --line:#dde3e9;
  --muted:#5f6b79; --soft:#8a96a4;
  --blau:#0066a6; --gruen:#5e9c1f; --rot:#c8102e; --gelb:#d99400;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ font:15px/1.5 var(--sans); color:var(--ink); background:var(--paper); }
a{ color:var(--blau); text-decoration:none; }
a:hover{ text-decoration:underline; }

.tri{ height:4px; background:linear-gradient(90deg,
      var(--blau) 0 33.33%, var(--gruen) 33.33% 66.66%, var(--rot) 66.66% 100%); }

.shell{ display:flex; min-height:calc(100vh - 4px); }

/* Sidebar */
.side{ width:208px; flex:0 0 208px; background:var(--card);
       border-right:1px solid var(--line); padding:22px 0; display:flex; flex-direction:column; }
.brand{ font-size:30px; font-weight:800; letter-spacing:1px; padding:0 22px; line-height:1; }
.brand span{ color:var(--blau); }
.tag{ font-style:italic; color:var(--soft); font-size:12px; padding:4px 22px 20px; border-bottom:1px solid var(--line); }
.side nav{ display:flex; flex-direction:column; padding:14px 0; }
.side nav a{ color:var(--ink); padding:11px 22px; font-weight:500; border-left:3px solid transparent; }
.side nav a:hover{ background:#f4f7fa; text-decoration:none; }
.side nav a.on{ border-left-color:var(--blau); color:var(--blau); background:#eef5fb; font-weight:600; }
.side-foot{ margin-top:auto; padding:14px 22px; color:var(--soft); font-size:11px;
            font-family:var(--mono); letter-spacing:.5px; }

/* Main */
.main{ flex:1; padding:26px 32px 60px; max-width:1080px; }
.topline{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
h1{ font-size:22px; font-weight:700; letter-spacing:-.2px; margin:0; }
h2{ font-size:16px; font-weight:700; margin:0 0 12px; }

/* Cards / grid */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:24px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.stat .n{ font:700 28px/1 var(--mono); letter-spacing:-1px; }
.stat .l{ color:var(--muted); font-size:12px; margin-top:6px; text-transform:uppercase; letter-spacing:.6px; }
.stat.acc-b .n{ color:var(--blau); } .stat.acc-g .n{ color:var(--gruen); }
.stat.acc-r .n{ color:var(--rot); }  .stat.acc-y .n{ color:var(--gelb); }

.panel{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin-bottom:22px; }

/* Tables */
table{ width:100%; border-collapse:collapse; background:var(--card);
       border:1px solid var(--line); border-radius:12px; overflow:hidden; }
th,td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; }
th{ background:#f6f8fa; font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); }
tr:last-child td{ border-bottom:none; }
td.mono, .mono{ font-family:var(--mono); font-size:13px; }
.id{ color:var(--soft); font-family:var(--mono); font-size:12px; }

/* Pills */
.pill{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600;
       letter-spacing:.3px; }
.pill.ok{ background:#e9f5e1; color:#3f7016; }
.pill.info{ background:#e6f1f9; color:var(--blau); }
.pill.warn{ background:#fbf0d8; color:#946400; }
.pill.bad{ background:#fbe4e7; color:var(--rot); }
.pill.mut{ background:#eceff2; color:var(--muted); }

/* Forms */
label{ display:block; font-size:12px; font-weight:600; color:var(--muted); margin:14px 0 5px;
       text-transform:uppercase; letter-spacing:.4px; }
input[type=text],input[type=email],input[type=number],select,textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
  font:14px var(--sans); background:#fff; color:var(--ink); }
textarea{ font-family:var(--mono); font-size:13px; line-height:1.5; resize:vertical; }
input:focus,select:focus,textarea:focus{ outline:2px solid #bcd9ee; border-color:var(--blau); }
.row{ display:flex; gap:16px; flex-wrap:wrap; }
.row > div{ flex:1; min-width:180px; }
.help{ color:var(--soft); font-size:12px; margin-top:5px; }

/* Buttons */
.btn{ display:inline-block; border:1px solid var(--blau); background:var(--blau); color:#fff;
      padding:9px 16px; border-radius:8px; font:600 14px var(--sans); cursor:pointer; }
.btn:hover{ filter:brightness(.94); text-decoration:none; }
.btn.ghost{ background:#fff; color:var(--blau); }
.btn.danger{ background:var(--rot); border-color:var(--rot); }
.btn.sm{ padding:5px 11px; font-size:13px; }
.actions{ display:flex; gap:8px; align-items:center; }
.toolbar{ display:flex; gap:10px; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; }

/* Flash */
.flash{ padding:11px 15px; border-radius:9px; margin-bottom:16px; font-size:14px; border:1px solid; }
.flash.ok{ background:#e9f5e1; border-color:#bfe0a3; color:#3f7016; }
.flash.err{ background:#fbe4e7; border-color:#f1c0c8; color:var(--rot); }
.flash.info{ background:#e6f1f9; border-color:#bcd9ee; color:var(--blau); }

/* Progress */
.bar{ height:9px; background:#eceff2; border-radius:999px; overflow:hidden; }
.bar > span{ display:block; height:100%; background:var(--gruen); }

/* Preview */
.preview{ border:1px solid var(--line); border-radius:10px; padding:16px; background:#fafbfc; }
.preview .sub{ font-weight:700; margin-bottom:10px; }
.preview pre{ font-family:var(--mono); font-size:13px; white-space:pre-wrap; margin:0; }

.cmd{ font-family:var(--mono); font-size:13px; background:#0f1419; color:#d7e0e8;
      padding:12px 14px; border-radius:9px; overflow-x:auto; }
.muted{ color:var(--muted); } .small{ font-size:13px; }
.empty{ text-align:center; color:var(--muted); padding:36px 12px; }
.pager{ display:flex; gap:8px; margin-top:16px; align-items:center; }

@media(max-width:720px){
  .shell{ flex-direction:column; } .side{ width:auto; flex:auto; }
  .side nav{ flex-direction:row; flex-wrap:wrap; padding:8px 12px; }
  .side nav a{ border-left:none; border-bottom:3px solid transparent; padding:8px 12px; }
  .side nav a.on{ border-left:none; border-bottom-color:var(--blau); }
  .main{ padding:18px; }
}

/* Auth (Login / Setup) */
.auth-wrap{ min-height:calc(100vh - 4px); display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card{ background:var(--card); max-width:380px; width:100%; border:1px solid var(--line);
            border-radius:14px; box-shadow:0 8px 30px rgba(20,24,28,.06); overflow:hidden; }
.auth-card .pad{ padding:28px 30px 32px; }
.auth-card h2{ margin-bottom:6px; }
.userbox{ font-size:13px; color:var(--muted); }
.userbox a{ color:var(--blau); }

/* Logo (Banner aus dem Original-Banner) */
.side .logo-link{ display:block; padding:0 16px 16px; margin-bottom:6px;
                  border-bottom:1px solid var(--line); }
.side .logo{ width:100%; height:auto; display:block; }
.logo-banner{ width:100%; height:auto; display:block; }

/* Variablen-Leiste (Vorlagen) */
.varbar{ margin-top:12px; padding:12px 14px; background:#f6f8fa; border:1px solid var(--line); border-radius:10px; }
.varbtn{ font-family:var(--mono); font-size:12px; background:#fff; border:1px solid var(--line);
         color:var(--blau); border-radius:6px; padding:4px 8px; margin:0 6px 6px 0; cursor:pointer; }
.varbtn:hover{ background:#eef5fb; }