/* Outbound Admin - Klar-Look (Dark/Light), keine Emojis */
:root {
  --bg:#f3f4f6; --surface:#ffffff; --surface-2:#f7f8fa;
  --border:#dadde2; --border-strong:#c4c8d0;
  --text:#1e2430; --text-2:#475160; --muted:#717a88;
  --accent:#2456cc; --accent-hover:#1d49ad; --accent-weak:#eaf0fc;
  --green:#15924f; --green-weak:#e7f4ec;
  --red:#d23b34; --red-weak:#fcecea;
  --amber:#9a6b12; --amber-weak:#f8efd9;
  --shadow:0 1px 2px rgba(16,24,40,.05);
  --radius:9px;
}
[data-theme="dark"] {
  --bg:#0f1116; --surface:#171a21; --surface-2:#1c2029;
  --border:#2a2f3a; --border-strong:#3a414f;
  --text:#e7eaf0; --text-2:#b6bdca; --muted:#868d9b;
  --accent:#5e88f2; --accent-hover:#7499f5; --accent-weak:#182338;
  --green:#34c47b; --green-weak:#11271d;
  --red:#ef625c; --red-weak:#30191a;
  --amber:#d7a04a; --amber-weak:#2b2412;
  --shadow:0 1px 2px rgba(0,0,0,.4);
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); background:var(--bg); font-size:15px; line-height:1.5;
}
body.centered { display:grid; place-items:center; }
.hidden { display:none !important; }
code, .mono { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; }

.wrap { max-width:1180px; margin:0 auto; padding:18px 20px 40px; }

/* Header */
.header { display:flex; align-items:center; gap:14px; padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--border); }
.header h1 { font-size:18px; font-weight:650; margin:0; letter-spacing:-.01em; }
.spacer { flex:1; }
.user { font-size:13px; color:var(--text-2); }
.role { display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:600;
  background:var(--accent-weak); color:var(--accent); margin-left:8px; }

.icon-btn { width:38px; height:38px; border-radius:var(--radius); cursor:pointer; display:grid; place-items:center;
  color:var(--text-2); background:var(--surface); border:1px solid var(--border); }
.icon-btn:hover { color:var(--text); border-color:var(--border-strong); }
.icon-btn svg { width:18px; height:18px; }
[data-theme="light"] .theme-btn .sun { display:none; }
[data-theme="dark"]  .theme-btn .moon { display:none; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; font-size:14px;
  font-weight:600; font-family:inherit; border:1px solid var(--border-strong); border-radius:var(--radius);
  cursor:pointer; background:var(--surface); color:var(--text); }
.btn:hover { background:var(--surface-2); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:var(--accent); color:#fff; border-color:transparent; }
.btn-primary:hover { background:var(--accent-hover); }
.btn-mini { padding:6px 11px; font-size:13px; }
.btn-danger { color:var(--red); border-color:color-mix(in srgb,var(--red) 40%, transparent); background:var(--surface); }
.btn-danger:hover { background:var(--red-weak); }

/* Notice */
.notice { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; margin-bottom:18px; border-radius:var(--radius);
  font-size:13.5px; color:var(--amber); background:var(--amber-weak); border:1px solid color-mix(in srgb,var(--amber) 28%, transparent); }
.notice svg { width:18px; height:18px; flex:none; margin-top:1px; }

/* Toolbar */
.toolbar { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.search { flex:1; max-width:360px; }
input, select, textarea {
  width:100%; padding:11px 13px; font-size:14.5px; color:var(--text); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius); font-family:inherit;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%, transparent); background:var(--surface); }
textarea { resize:vertical; min-height:64px; }
label { display:block; font-size:13px; font-weight:600; color:var(--text-2); margin:14px 0 6px; }
label:first-child { margin-top:0; }
.help { font-size:12px; color:var(--muted); margin-top:5px; }

/* Card / Table */
.card { background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--border); font-size:14px; vertical-align:top; }
th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:650; background:var(--surface-2); }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover { background:var(--surface-2); }
.cell-queue { font-weight:600; }
.cell-actions { text-align:right; white-space:nowrap; }
.empty { text-align:center; color:var(--muted); padding:26px 10px; }
.urlcell a { color:var(--accent); text-decoration:none; }
.urlcell a:hover { text-decoration:underline; }
.dash { color:var(--muted); }

.badge { display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:600; }
.badge-status { color:var(--accent); background:var(--accent-weak); }
.badge-none { color:var(--muted); background:var(--surface-2); }

/* Tabs */
.tabs { display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--border); }
.tab { appearance:none; background:none; border:none; border-bottom:2px solid transparent; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--text-2); padding:10px 14px; margin-bottom:-1px; }
.tab:hover { color:var(--text); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* Audit-Diff */
.nowrap { white-space:nowrap; }
.chg { font-size:13px; margin:1px 0; }
.chg-field { font-weight:600; color:var(--text-2); }
.chg-old { color:var(--red); text-decoration:line-through; }
.chg-new { color:var(--green); }

/* Modal */
.overlay { position:fixed; inset:0; background:rgba(15,17,22,.55); display:grid; place-items:center; padding:20px; z-index:100; }
.modal { width:100%; max-width:540px; background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.3); max-height:90vh; overflow:auto; }
.modal-head { padding:16px 18px; border-bottom:1px solid var(--border); font-size:15px; font-weight:650; }
.modal-body { padding:18px; }
.modal-foot { padding:14px 18px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }

/* Login / Denied */
.login-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
  padding:34px 38px; max-width:420px; text-align:center; }
.login-card h1 { font-size:20px; margin:0 0 8px; }
.login-card p { color:var(--text-2); margin:0 0 22px; }

/* Status line + toast */
.status-line { font-size:13px; color:var(--text-2); margin-top:14px; min-height:18px; }
.status-line.error { color:var(--red); }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(10px); opacity:0;
  padding:12px 18px; border-radius:var(--radius); font-size:14px; font-weight:600; color:#fff; background:var(--green);
  box-shadow:0 8px 24px rgba(0,0,0,.2); transition:opacity .2s, transform .2s; z-index:200; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast-error { background:var(--red); }

/* Skeleton */
.sk { display:inline-block; height:12px; border-radius:6px; background:linear-gradient(90deg,var(--surface-2),var(--border),var(--surface-2));
  background-size:200% 100%; animation:sk 1.2s infinite; }
@keyframes sk { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }