@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --primary:       #eb811c;
  --primary-hover: #d67318;
  --primary-light: rgba(235,129,28,.1);
  --text:          #1d1d1f;
  --text-muted:    #6e6e73;
  --bg:            #f5f5f7;
  --card-bg:       #ffffff;
  --border:        #d2d2d7;
  --shadow:        0 2px 16px rgba(0,0,0,.08);
  --shadow-lg:     0 8px 30px rgba(0,0,0,.12);
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --transition: all .2s ease;
  --sidebar-bg: #1d1d1f; --sidebar-text: #e5e5ea; --sidebar-muted: #8e8e93;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:-apple-system,BlinkMacSystemFont,'Inter','Helvetica Neue',Arial,sans-serif; background:var(--bg); color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased; }

/* ── Login ──────────────────────────────────────────── */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#e67e22 0%,#d35400 100%); padding:20px; }
.login-container { width:100%; max-width:400px; background:var(--card-bg); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:48px 40px; }
.login-header { text-align:center; margin-bottom:40px; }
.login-header h1 { font-size:42px; font-weight:700; color:var(--primary); letter-spacing:-1px; }
.login-header .login-desc { color:var(--text-muted); font-size:15px; margin-top:8px; }
.login-form { display:flex; flex-direction:column; gap:20px; }
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-group label { font-size:13px; font-weight:500; color:var(--text-muted); }
.form-group input[type=text],.form-group input[type=password] { padding:14px 16px; border:1px solid var(--border); border-radius:var(--r-sm); font-size:16px; transition:var(--transition); outline:none; font-family:inherit; background:var(--card-bg); }
.form-group input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }
.login-btn { margin-top:12px; padding:16px; background:var(--primary); color:#fff; border:none; border-radius:var(--r-sm); font-size:16px; font-weight:600; cursor:pointer; transition:var(--transition); display:flex; align-items:center; justify-content:center; gap:8px; }
.login-btn:hover:not(:disabled) { background:var(--primary-hover); }
.login-btn:disabled { opacity:.6; cursor:not-allowed; }
.error-message { display:flex; align-items:flex-start; gap:8px; padding:12px 16px; background:#fef2f2; color:#dc2626; border-radius:var(--r-sm); font-size:14px; }
.error-message svg { flex-shrink:0; margin-top:1px; }
.spinner { width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Dashboard layout ───────────────────────────────── */
#dashboard-page { display:flex; height:100vh; overflow:hidden; }
.sidebar { width:230px; background:var(--sidebar-bg); color:var(--sidebar-text); display:flex; flex-direction:column; flex-shrink:0; padding:20px 0; }
.sidebar-logo { display:flex; align-items:center; gap:10px; padding:0 18px 24px; font-size:15px; font-weight:600; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:12px; }
.logo-mark { width:34px; height:34px; border-radius:9px; background:var(--primary); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sidebar-nav { flex:1; padding:0 10px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:var(--sidebar-muted); text-decoration:none; font-size:14px; font-weight:500; transition:background .15s,color .15s; cursor:pointer; margin-bottom:2px; }
.nav-item:hover { background:rgba(255,255,255,.06); color:var(--sidebar-text); }
.nav-item.active { background:rgba(235,129,28,.12); color:var(--primary); }
.nav-item svg { flex-shrink:0; }
.sidebar-footer { padding:14px 14px 0; border-top:1px solid rgba(255,255,255,.08); margin-top:12px; display:flex; align-items:center; gap:8px; }
.user-info { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.user-avatar { width:30px; height:30px; border-radius:50%; background:var(--primary); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.user-name { font-size:13px; font-weight:500; color:var(--sidebar-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.logout-btn { background:none; border:none; color:var(--sidebar-muted); cursor:pointer; padding:6px; border-radius:6px; transition:color .15s,background .15s; flex-shrink:0; }
.logout-btn:hover { color:var(--sidebar-text); background:rgba(255,255,255,.08); }
.main-content { flex:1; overflow-y:auto; padding:40px; background:var(--bg); }
.content-section { display:none; }
.content-section.active { display:block; }
.section-header { margin-bottom:28px; }
.section-header h1 { font-size:28px; font-weight:700; letter-spacing:-.5px; }
.section-desc { font-size:14px; color:var(--text-muted); margin-top:4px; }
.placeholder-card { background:var(--card-bg); border-radius:var(--r-lg); padding:60px 40px; box-shadow:var(--shadow); text-align:center; max-width:480px; }
.placeholder-icon { color:var(--primary); margin-bottom:16px; }
.placeholder-card h2 { font-size:18px; font-weight:600; margin-bottom:8px; }
.placeholder-card p { color:var(--text-muted); font-size:14px; }

/* ── Sub-tabs ────────────────────────────────────────── */
.sub-tabs { display:flex; gap:4px; margin-bottom:24px; border-bottom:1px solid var(--border); padding-bottom:0; }
.sub-tab { display:flex; align-items:center; gap:6px; padding:9px 16px; background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; font-size:14px; font-weight:500; color:var(--text-muted); cursor:pointer; transition:color .15s,border-color .15s; border-radius:var(--r-sm) var(--r-sm) 0 0; }
.sub-tab:hover { color:var(--text); background:var(--bg); }
.sub-tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.subtab-content { display:none; }
.subtab-content.active { display:block; }

/* ── Upload zone ─────────────────────────────────────── */
.upload-zone { border:2px dashed var(--border); border-radius:var(--r-lg); padding:48px 32px; text-align:center; cursor:pointer; transition:border-color .2s,background .2s; }
.upload-zone:hover,.upload-zone.drag-over { border-color:var(--primary); background:var(--primary-light); }
.upload-zone-icon { color:var(--primary); margin-bottom:12px; }
.upload-zone-label { font-size:15px; color:var(--text); margin-bottom:12px; }
.upload-zone-hint { font-size:13px; color:var(--text-muted); margin-top:10px; }
.btn-outline-sm { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:none; border:1.5px solid var(--border); border-radius:var(--r-sm); font-size:13px; font-weight:500; color:var(--text); cursor:pointer; transition:var(--transition); }
.btn-outline-sm:hover { border-color:var(--primary); color:var(--primary); }
.btn-primary-sm { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; background:var(--primary); border:none; border-radius:var(--r-sm); font-size:14px; font-weight:600; color:#fff; cursor:pointer; transition:var(--transition); }
.btn-primary-sm:hover:not(:disabled) { background:var(--primary-hover); }
.btn-primary-sm:disabled { opacity:.6; cursor:not-allowed; }
.upload-file-list { margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.upload-file-item { display:flex; align-items:center; gap:10px; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--r-sm); padding:10px 14px; font-size:13px; }
.upload-file-item .file-name { flex:1; font-weight:500; }
.upload-file-item .file-year { color:var(--text-muted); }
.upload-meta { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--r-md); padding:20px; margin-top:16px; }
.upload-meta-row { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; }
.form-group-inline { display:flex; flex-direction:column; gap:6px; }
.form-group-inline label { font-size:12px; font-weight:500; color:var(--text-muted); }
.select-sm { padding:8px 12px; border:1px solid var(--border); border-radius:var(--r-sm); font-size:14px; background:var(--bg); color:var(--text); outline:none; cursor:pointer; transition:var(--transition); min-width:180px; }
.select-sm:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }

/* ── Progress ────────────────────────────────────────── */
.progress-item { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--r-sm); margin-bottom:8px; font-size:13px; }
.progress-item .pi-name { flex:1; font-weight:500; }
.status-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.status-processing { background:#fff8e6; color:#d97706; }
.status-done       { background:#ecfdf5; color:#059669; }
.status-error      { background:#fef2f2; color:#dc2626; }
.status-warning    { background:#fffbeb; color:#b45309; }
.progress-spinner  { width:14px; height:14px; border:2px solid #fde68a; border-top-color:#d97706; border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0; }

/* ── Filter row ──────────────────────────────────────── */
.filter-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:20px; }

/* ── File cards ──────────────────────────────────────── */
.file-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-bottom:24px; }
.file-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--r-md); padding:16px; cursor:pointer; transition:box-shadow .15s,border-color .15s; }
.file-card:hover { border-color:var(--primary); box-shadow:var(--shadow); }
.file-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.file-card-name { font-size:14px; font-weight:600; }
.file-card-meta { font-size:12px; color:var(--text-muted); display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.file-card-actions { display:flex; gap:6px; flex-shrink:0; }
.icon-btn { background:none; border:none; padding:4px; border-radius:6px; cursor:pointer; color:var(--text-muted); transition:color .15s,background .15s; }
.icon-btn:hover { color:var(--primary); background:var(--primary-light); }
.icon-btn.delete:hover { color:#dc2626; background:#fef2f2; }

/* ── BS view ─────────────────────────────────────────── */
.bs-view-header { display:flex; align-items:center; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.btn-back { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; background:none; border:1.5px solid var(--border); border-radius:var(--r-sm); font-size:13px; font-weight:500; color:var(--text); cursor:pointer; transition:var(--transition); flex-shrink:0; }
.btn-back:hover { border-color:var(--primary); color:var(--primary); }
.bs-grid { display:flex; flex-direction:column; gap:12px; }

/* ── BS card ─────────────────────────────────────────── */
.bs-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; transition:box-shadow .15s; }
.bs-card:hover { box-shadow:var(--shadow); }
.bs-card-header { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:var(--bg); border-bottom:1px solid var(--border); gap:12px; flex-wrap:wrap; }
.bs-card-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bs-card-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.bs-card-body { padding:16px; }
.bs-text { font-size:14px; line-height:1.7; color:var(--text); white-space:pre-wrap; word-break:break-word; }
.bs-points { display:flex; align-items:center; gap:6px; font-size:12px; }
.points-chip { background:var(--primary); color:#fff; font-weight:700; font-size:11px; padding:2px 9px; border-radius:20px; }
.points-range { color:var(--text-muted); font-size:11px; }
.bs-context { font-size:12px; color:var(--text-muted); }

/* ── Teil badges ─────────────────────────────────────── */
.teil-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700; }
.teil-AO    { background:#eff6ff; color:#2563eb; }
.teil-USt   { background:#f0fdf4; color:#16a34a; }
.teil-ErbSt { background:#faf5ff; color:#7c3aed; }
.teil-ESt   { background:#fff7ed; color:#ea580c; }
.teil-KSt   { background:#f0fdfa; color:#0d9488; }
.teil-GewSt { background:#fef2f2; color:#dc2626; }
.teil-IntStR{ background:#eef2ff; color:#4338ca; }
.teil-EU    { background:#fffbeb; color:#d97706; }
.teil-PG    { background:#ecfeff; color:#0891b2; }
.teil-KG    { background:#fdf2f8; color:#c026d3; }

/* ── Search ──────────────────────────────────────────── */
.search-box { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--r-md); padding:20px; margin-bottom:20px; }
.search-input-wrap { position:relative; margin-bottom:12px; }
.search-input-wrap input { width:100%; padding:12px 16px 12px 42px; border:1px solid var(--border); border-radius:var(--r-sm); font-size:15px; outline:none; transition:var(--transition); }
.search-input-wrap input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }
.search-filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ── Empty state ─────────────────────────────────────── */
.empty-state { text-align:center; padding:60px 20px; color:var(--text-muted); }
.empty-state svg { margin-bottom:12px; opacity:.4; }
.empty-state p { font-size:14px; }

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width:680px) {
  .sidebar { width:64px; }
  .sidebar-logo span,.nav-item span,.user-name { display:none; }
  .sidebar-logo { justify-content:center; padding:0 0 20px; }
  .nav-item { justify-content:center; padding:10px; }
  .user-info { justify-content:center; }
  .main-content { padding:20px 14px; }
  .upload-meta-row { flex-direction:column; }
}