/* SPAM Filter GUI v3.0 – main.css */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background:#0f172a; color:#e2e8f0; min-height:100vh; }
#loginPage { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-box { background:#1e293b; border-radius:16px; padding:48px; width:380px; box-shadow:0 25px 50px rgba(0,0,0,0.5); }
.login-box h1 { font-size:24px; font-weight:700; margin-bottom:8px; color:#f1f5f9; }
.login-box p { color:#94a3b8; margin-bottom:32px; font-size:14px; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:13px; font-weight:500; color:#94a3b8; margin-bottom:8px; }
.form-group input { width:100%; padding:12px 16px; background:#0f172a; border:1px solid #334155; border-radius:8px; color:#f1f5f9; font-size:14px; outline:none; transition:border-color 0.2s; }
.form-group input:focus { border-color:#6366f1; }
.btn-primary { width:100%; padding:12px; background:linear-gradient(135deg,#6366f1,#8b5cf6); border:none; border-radius:8px; color:#fff; font-size:15px; font-weight:600; cursor:pointer; transition:opacity 0.2s; }
.btn-primary:hover { opacity:0.9; }
.error-msg { background:#450a0a; border:1px solid #7f1d1d; color:#fca5a5; padding:12px; border-radius:8px; font-size:13px; margin-bottom:16px; display:none; }
#appPage { display:none; }
.sidebar { position:fixed; left:0; top:0; bottom:0; width:240px; background:#1e293b; border-right:1px solid #334155; padding:24px 0; }
.sidebar-logo { padding:0 24px 24px; border-bottom:1px solid #334155; }
.sidebar-logo h2 { font-size:16px; font-weight:700; color:#f1f5f9; }
.sidebar-logo span { font-size:12px; color:#94a3b8; }
.nav-item { display:flex; align-items:center; gap:12px; padding:12px 24px; color:#94a3b8; cursor:pointer; transition:all 0.2s; font-size:14px; border-left:3px solid transparent; }
.nav-item:hover { background:#334155; color:#f1f5f9; }
.nav-item.active { background:#1d2d4a; color:#6366f1; border-left-color:#6366f1; }
.nav-icon { font-size:18px; width:22px; text-align:center; }
.sidebar-user { position:absolute; bottom:0; left:0; right:0; padding:16px 24px; border-top:1px solid #334155; display:flex; align-items:center; gap:12px; }
.user-avatar { width:36px; height:36px; background:linear-gradient(135deg,#6366f1,#8b5cf6); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.user-info { flex:1; }
.user-name { font-size:13px; font-weight:600; color:#f1f5f9; }
.user-role { font-size:11px; color:#94a3b8; }
.logout-btn { background:none; border:none; color:#94a3b8; cursor:pointer; font-size:18px; }
.main { margin-left:240px; padding:32px; min-height:100vh; }
.page { display:none; }
.page.active { display:block; }
.page-header { margin-bottom:28px; }
.page-header h1 { font-size:22px; font-weight:700; color:#f1f5f9; }
.page-header p { color:#94a3b8; font-size:14px; margin-top:4px; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
.stat-card { background:#1e293b; border-radius:12px; padding:20px; border:1px solid #334155; }
.stat-label { font-size:12px; color:#94a3b8; font-weight:500; margin-bottom:8px; }
.stat-value { font-size:28px; font-weight:700; color:#f1f5f9; }
.stat-sub { font-size:12px; color:#64748b; margin-top:4px; }
.card { background:#1e293b; border-radius:12px; border:1px solid #334155; overflow:hidden; margin-bottom:20px; }
.card-header { padding:16px 20px; border-bottom:1px solid #334155; display:flex; align-items:center; justify-content:space-between; }
.card-title { font-size:15px; font-weight:600; color:#f1f5f9; }
.card-body { padding:20px; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; padding:10px 14px; font-size:12px; color:#64748b; font-weight:500; text-transform:uppercase; letter-spacing:0.05em; border-bottom:1px solid #334155; cursor:pointer; user-select:none; white-space:nowrap; }
th:hover { color:#94a3b8; }
th .sort-icon { margin-left:4px; opacity:0.5; }
th.sort-asc .sort-icon::after { content:'↑'; opacity:1; color:#6366f1; }
th.sort-desc .sort-icon::after { content:'↓'; opacity:1; color:#6366f1; }
th:not(.sort-asc):not(.sort-desc) .sort-icon::after { content:'↕'; }
td { padding:12px 14px; font-size:13px; color:#cbd5e1; border-bottom:1px solid #1e293b; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:#243044; }
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.badge-ham { background:#052e16; color:#4ade80; }
.badge-spam { background:#450a0a; color:#f87171; }
.badge-rechnung { background:#1e1b4b; color:#a5b4fc; }
.badge-unsicher { background:#422006; color:#fb923c; }
.badge-active { background:#052e16; color:#4ade80; }
.badge-inactive { background:#1e293b; color:#64748b; border:1px solid #334155; }
.badge-admin { background:#1e1b4b; color:#a5b4fc; }
.badge-user { background:#0c1a2e; color:#7dd3fc; }
.btn { padding:8px 16px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; border:none; transition:all 0.2s; }
.btn-sm { padding:5px 12px; font-size:12px; border-radius:6px; }
.btn-indigo { background:#4f46e5; color:#fff; }
.btn-indigo:hover { background:#4338ca; }
.btn-red { background:#dc2626; color:#fff; }
.btn-red:hover { background:#b91c1c; }
.btn-gray { background:#334155; color:#cbd5e1; }
.btn-gray:hover { background:#475569; }
.btn-green { background:#16a34a; color:#fff; }
.btn-green:hover { background:#15803d; }
.btn-yellow { background:#ca8a04; color:#fff; }
.btn-yellow:hover { background:#a16207; }
.toolbar { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.search-input { flex:1; padding:10px 16px; background:#1e293b; border:1px solid #334155; border-radius:8px; color:#f1f5f9; font-size:13px; outline:none; }
.search-input:focus { border-color:#6366f1; }
.filter-select { padding:10px 14px; background:#1e293b; border:1px solid #334155; border-radius:8px; color:#f1f5f9; font-size:13px; outline:none; }
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:1000; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal { background:#1e293b; border-radius:16px; width:500px; max-width:95vw; border:1px solid #334155; max-height:90vh; overflow-y:auto; padding:0; }
.modal-header { padding:20px 24px; border-bottom:1px solid #334155; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:#1e293b; }
.modal-title { font-size:16px; font-weight:600; color:#f1f5f9; }
.modal-close { background:none; border:none; color:#64748b; font-size:20px; cursor:pointer; }
.modal-body { padding:24px; }
.modal > .form-group { padding:0 24px; }
.modal > .form-group:first-of-type { padding-top:24px; }
.modal > hr { margin:16px 24px; }
.modal > p { padding:0 24px; }
.modal > div[style] { padding:0 24px; }
.modal-content { padding:24px; }
.modal-footer { padding:16px 24px; border-top:1px solid #334155; display:flex; justify-content:flex-end; gap:10px; position:sticky; bottom:0; background:#1e293b; }
.form-row { margin-bottom:16px; }
.form-row label { display:block; font-size:12px; font-weight:500; color:#94a3b8; margin-bottom:6px; }
.form-row input, .form-row select { width:100%; padding:10px 14px; background:#0f172a; border:1px solid #334155; border-radius:8px; color:#f1f5f9; font-size:13px; outline:none; }
.form-row input:focus, .form-row select:focus { border-color:#6366f1; }
.form-row input.input-error { border-color:#dc2626; }
.form-row .field-error { font-size:11px; color:#f87171; margin-top:4px; display:none; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.loading { text-align:center; padding:40px; color:#64748b; }
.spinner { display:inline-block; width:24px; height:24px; border:3px solid #334155; border-top-color:#6366f1; border-radius:50%; animation:spin 0.8s linear infinite; margin-bottom:12px; }
@keyframes spin { to { transform:rotate(360deg); } }
.conf-bar { width:80px; height:6px; background:#334155; border-radius:3px; overflow:hidden; display:inline-block; vertical-align:middle; margin-right:6px; line-height:6px; }
.conf-fill { height:6px; border-radius:3px; transition:width 0.3s; display:inline-block; }
#toast { position:fixed; bottom:24px; right:24px; background:#334155; color:#f1f5f9; padding:12px 20px; border-radius:10px; font-size:13px; transform:translateY(100px); transition:transform 0.3s; z-index:9999; }
#toast.show { transform:translateY(0); }
#toast.success { background:#15803d; }
#toast.error { background:#b91c1c; }
.class-select { padding:4px 8px; background:#0f172a; border:1px solid #334155; border-radius:6px; color:#f1f5f9; font-size:12px; cursor:pointer; }
.class-select:focus { outline:none; border-color:#6366f1; }
.input-disabled { opacity:0.5; cursor:not-allowed; }

/* v3.0.1 – Button Click Fix */
.toolbar { position: relative; z-index: 10; pointer-events: all; }
.toolbar .btn { position: relative; z-index: 10; pointer-events: all; cursor: pointer; }

/* v3.0.1 – Konfidenz Balken Fix */
.conf-bar { display:inline-block; width:80px; height:6px; background:#334155; border-radius:3px; overflow:hidden; vertical-align:middle; margin-right:6px; }
.conf-fill { display:block; height:6px; border-radius:3px; min-height:6px; }
/* v3.1 – field-hint */
.field-hint {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}
/* Modal Form Padding Fix v3.1 */
.modal .form-group { padding-left:24px; padding-right:24px; }
.modal .form-group:first-of-type { padding-top:24px; }
.modal hr { margin:16px 24px; border-color:#334155; }
.modal p { padding-left:24px; padding-right:24px; }
/* Modal Padding Fix v3.1 – 14.03.2026 */
.modal > .form-group,
.modal > hr,
.modal > p,
.modal > div[style*="flex"] {
  margin-left: 24px;
  margin-right: 24px;
}
.modal > .form-group:first-of-type { margin-top: 24px; }
.modal > .form-group label { display:block; margin-bottom:6px; }