/* HSG Lohnversand — Stylesheet */
:root{
  --bg:#f5f6fa;
  --surface:#ffffff;
  --border:#e2e6ee;
  --text:#1d2433;
  --muted:#6b7280;
  --primary:#1e6feb;
  --primary-dark:#1456c2;
  --ok:#16a34a;
  --warn:#d97706;
  --err:#dc2626;
  --radius:8px;
  --shadow:0 1px 3px rgba(0,0,0,.06);
  --max:1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.5;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:"SFMono-Regular",Consolas,monospace;background:#eef0f5;padding:1px 6px;border-radius:4px;font-size:.92em}

/* Topbar */
.topbar{
  background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 24px;position:sticky;top:0;z-index:10;
}
.topbar .brand a{font-weight:700;color:var(--text);font-size:1.1rem}
.topbar nav{display:flex;align-items:center;gap:18px}
.topbar nav a{color:var(--muted);font-weight:500;padding:6px 8px;border-radius:6px}
.topbar nav a.active{background:#eef4ff;color:var(--primary)}
.logout-form{margin:0}
.link-btn{background:none;border:none;color:var(--muted);cursor:pointer;font:inherit;padding:6px 8px}
.link-btn:hover{color:var(--text)}
.link-btn.danger{color:var(--err)}
.link-btn.danger:hover{color:var(--err);text-decoration:underline}

/* Layout */
.container{max-width:var(--max);margin:24px auto;padding:0 24px}
.footer{text-align:center;color:var(--muted);padding:24px}
.muted{color:var(--muted)}
.small{font-size:.9em}
.ok{color:var(--ok)}
.warn{color:var(--warn)}
.err{color:var(--err)}

/* Cards */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px 24px;margin-bottom:20px;
  box-shadow:var(--shadow);
}
.card h1{margin:0 0 8px}
.card h2{margin:24px 0 12px;font-size:1.1rem}
.card-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.warn-card{border-color:#f3d3a3;background:#fff8ee}
.error-card{border-color:#f3a3a3;background:#fff1f1}

/* Hero */
.hero{padding:8px 0 16px}
.hero h1{margin:0 0 4px;font-size:1.6rem}

/* Buttons */
.btn{
  display:inline-block;padding:9px 16px;border-radius:6px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  font:inherit;cursor:pointer;text-decoration:none;line-height:1.2;
}
.btn:hover{border-color:#c9d0db}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);text-decoration:none}
.btn.ghost{background:transparent}
.btn.danger{color:var(--err);border-color:#f1c4c4}
.btn.danger:hover{background:#fff1f1}
.btn.small{padding:5px 10px;font-size:.9em}
.btn.big{padding:12px 22px;font-size:1.05em}
.btn.disabled,.btn:disabled{opacity:.5;pointer-events:none}

/* Forms */
.stacked{display:flex;flex-direction:column;gap:12px;max-width:360px}
.stacked label{display:flex;flex-direction:column;gap:4px;font-size:.92em;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  font:inherit;padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:#fff;
}
input:focus,select:focus,textarea:focus{outline:2px solid #b9d2ff;border-color:var(--primary)}
.form-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 16px}
.form-row input{flex:1;min-width:140px}
.inline-form{display:inline-flex;gap:6px;align-items:center;margin:0}

/* Login */
.login-card{
  max-width:380px;margin:60px auto;padding:30px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.login-card h1{margin:0 0 4px}
.alert{padding:10px 12px;border-radius:6px;margin:10px 0}
.alert.error{background:#fff1f1;color:var(--err);border:1px solid #f3a3a3}

/* Upload */
.upload-form{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.dropzone{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:120px;border:2px dashed #c9d0db;border-radius:8px;
  background:#fafbfd;color:var(--muted);cursor:pointer;
  transition:background .15s, border-color .15s;
}
.dropzone:hover{background:#f4f7fc;border-color:#a5b4cb}
.dropzone.drag{background:#eef4ff;border-color:var(--primary);color:var(--primary)}
.dropzone.has-file{
  background:#f0f8f3;border-style:solid;border-color:#b6dec3;color:var(--text);
  cursor:default;
}
.dropzone input[type=file]{position:absolute;opacity:0;width:0;height:0}
.dz-placeholder{font-size:.95em}
.dz-file{display:flex;align-items:center;gap:14px;width:100%;padding:14px 18px}
.dz-icon{font-size:1.7rem;line-height:1}
.dz-meta{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.dz-name{word-break:break-all;font-size:1rem}
.dz-size{font-size:.85em}
.dz-clear{
  font-size:1.4rem;line-height:1;padding:4px 10px;color:var(--muted);
  border:1px solid transparent;border-radius:6px;background:transparent;
}
.dz-clear:hover{color:var(--err);border-color:#f1c4c4;background:#fff;cursor:pointer}

/* Progress */
.upload-progress{display:flex;flex-direction:column;gap:6px}
.progress-bar{
  width:100%;height:10px;background:#eef0f5;border-radius:999px;overflow:hidden;
}
.progress-fill{
  width:0%;height:100%;background:var(--primary);
  transition:width .15s ease;
}
.progress-fill.indeterminate{
  width:100% !important;
  background-image:linear-gradient(90deg,var(--primary) 0%,#7eb0f3 50%,var(--primary) 100%);
  background-size:200% 100%;
  animation:progress-indet 1.2s linear infinite;
}
@keyframes progress-indet{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.progress-label{font-size:.88em;color:var(--muted);font-variant-numeric:tabular-nums}

/* Tables */
table.data{width:100%;border-collapse:collapse;font-size:.94em}
table.data th,table.data td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
table.data th{font-weight:600;color:var(--muted);background:#fafbfd}
table.data .num{text-align:right;font-variant-numeric:tabular-nums}
table.data tr:hover td{background:#fafbfd}
table.data tr.inactive{opacity:.55}

/* Badges */
.badge{
  display:inline-block;padding:2px 8px;border-radius:999px;
  background:#eef0f5;color:var(--text);font-size:.82em;font-weight:500;
}
.badge.matched,.badge.sent,.badge.done,.badge.ok{background:#dcfce7;color:#166534}
.badge.unmatched,.badge.warn,.badge.skipped{background:#fef3c7;color:#854d0e}
.badge.failed,.badge.err,.badge.done_with_errors{background:#fee2e2;color:#991b1b}
.badge.sending,.badge.matched,.badge.created,.badge.extracted{background:#dbeafe;color:#1e40af}
.badge.muted{background:#eef0f5;color:var(--muted)}

/* Row coloring */
tr.row-matched td{background:#f5fbf6}
tr.row-unmatched td{background:#fffaeb}
tr.row-failed td{background:#fef2f2}
tr.row-sent td{background:#f5fbf6}
tr.row-skipped td{background:#fafbfd;color:var(--muted)}

/* Wizard progress */
.wizard-progress{margin-bottom:20px}
.wizard-progress ol{
  list-style:none;display:flex;gap:0;margin:0;padding:0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;
}
.wizard-progress li{
  flex:1;padding:12px 18px;font-weight:500;color:var(--muted);
  border-right:1px solid var(--border);position:relative;
}
.wizard-progress li:last-child{border-right:none}
.wizard-progress li.done{color:var(--ok)}
.wizard-progress li.active{background:#eef4ff;color:var(--primary)}
.wizard-progress li::before{
  content:counter(step) ". ";counter-increment:step;
  font-weight:700;
}
.wizard-progress ol{counter-reset:step}

/* Summary cards */
.summary{display:flex;gap:12px;margin:12px 0 18px;flex-wrap:wrap}
.summary > div{
  flex:1;min-width:140px;
  background:#fafbfd;border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;text-align:center;
}
.summary strong{display:block;font-size:1.5rem;line-height:1.2}
.summary span{color:var(--muted);font-size:.85em}
.summary .warn strong{color:var(--warn)}
.summary .err strong{color:var(--err)}
.summary .ok strong{color:var(--ok)}

/* Items table actions */
.actions{white-space:nowrap}
.action-grid{display:flex;flex-direction:column;gap:10px;margin-top:8px;padding:10px;background:#fafbfd;border:1px solid var(--border);border-radius:6px}
.new-employee{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border-top:1px dashed var(--border);padding-top:8px;margin-top:4px}
.new-employee strong{flex-basis:100%}
.new-employee input{flex:1;min-width:120px}
details summary{cursor:pointer;color:var(--primary);font-size:.9em}
details[open] summary{margin-bottom:4px}

/* Confirm + Status */
.confirm-form{display:flex;gap:12px;align-items:center;margin-top:16px;flex-wrap:wrap}
.finish-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}

/* Logs */
.logs{list-style:none;margin:0;padding:0;font-size:.92em;font-family:"SFMono-Regular",Consolas,monospace}
.logs li{display:grid;grid-template-columns:90px 70px 1fr;gap:8px;padding:6px 8px;border-bottom:1px dashed var(--border)}
.logs time{color:var(--muted)}
.logs .lvl{font-weight:600}
.log-info .lvl{color:var(--primary)}
.log-warning .lvl{color:var(--warn)}
.log-error .lvl{color:var(--err)}
.logs .ctx{grid-column:1/-1;color:var(--muted);padding-left:160px}

/* Detail meta */
dl.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 24px;margin:14px 0}
dl.meta dt{color:var(--muted);font-size:.85em}
dl.meta dd{margin:0;font-weight:500}