:root {
  --bg-dark: #181a1b;
  --bg-light: #222;
  --text-main: #e0e0e0;
  --accent: #ff9800;
  --danger: #e53935;
  --success: #4caf50;
  --border: #333;
  --panel: #2b2b2b;
  --input-bg: #1f1f1f;
  --input-border: #444;
}

body {
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-main);
  margin: 0;
}

.muted { color: #9aa0a6; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-light); padding: 8px 16px; border-bottom: 1px solid var(--border);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 10px; }
.icon-btn { font-size: 22px; min-width: 42px; min-height: 40px; padding: 6px 10px; border-radius: 10px; }

.btn { background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer; }
.btn-danger { background: var(--danger); color: #fff; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer; }

.infobar { background: var(--panel); padding: 8px; height: 25vh; overflow-y: auto; border-bottom: 1px solid var(--border); }
.table-container { height: calc(75vh - 60px); overflow-y: auto; padding: 0 8px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead { background: var(--bg-light); position: sticky; top: 0; }
th, td { padding: 8px; border-bottom: 1px solid var(--border); text-align: left; }
td.num { text-align: right; }
td.negative { color: var(--danger); }
td.positive { color: var(--success); }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin: 12px; }
label { display: block; margin: 8px 0; }
input, select { width: 100%; padding: 8px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 4px; color: var(--text-main); }
input[type="checkbox"] { width: auto; display: inline-block; margin-left: 4px; }

.grid-kv{display:grid;grid-template-columns:220px 1fr;gap:8px;align-items:center}

/* Benutzerlisten-Selektion */
#tbl-users tr.selected { outline: 3px solid var(--accent); outline-offset: -2px; background: #2a210f; }
#tbl-users tr.selected td { border-bottom-color: var(--accent); }

/* Topbar-Icons: Home größer */
#nav-home { font-size: 1.35em; line-height: 1; }

/* Favoriten-Button (falls verwendet) */
button.fav-btn { background: transparent; border: none; font-size: 1.4rem; cursor: pointer; }
button.fav-btn.is-selected, button.fav-btn.active, button.fav-btn.on { color: var(--accent); }

/* SMTP-Feldbreiten strikt auf ~40 Zeichen */
#smtp-host, #smtp-login, #smtp-password, #smtp-from { width: 40ch !important; }
#smtp-port { width: 12ch !important; }
#smtp-mode { width: 28ch !important; }

/* Bestätigungsdialog */
#confirm-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 1000; }
#confirm-modal.show { display: flex; }
#confirm-modal .backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
#confirm-modal .panel { position: relative; background: #1f1f1f; color: #eee; border: 1px solid #333; border-radius: 10px; min-width: 320px; max-width: 520px; padding: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
#confirm-modal .panel h3 { margin: 0 0 8px; font-size: 1.05rem; }
#confirm-modal .panel p { margin: 0 0 16px; }
#confirm-modal .actions { display: flex; gap: 10px; justify-content: flex-end; }
#confirm-modal .btn { padding: 8px 14px; border-radius: 8px; border: 1px solid #444; background: #2a2a2a; color: #eee; }
#confirm-modal .btn.primary { background: #0a5; border-color: #0a5; color: #021; }
#confirm-modal .btn.cancel { background: #444; }

/* Einklappbare Bereiche */
section.card.collapsible > header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
section.card.collapsible > header .toggle { border: none; background: transparent; font-size: 1.1rem; color: #ccc; }
section.card.collapsible .content { display: none; margin-top: 8px; }
section.card.collapsible.open .content { display: block; }
section.card.collapsible > header .toggle::after { content: "˅"; }
section.card.collapsible.open > header .toggle::after { content: "˄"; }