*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #f3f4f6;
  --surface:  #ffffff;
  --border:   #e5e7eb;
  --text:     #111827;
  --muted:    #6b7280;
  --primary:  #2563eb;
  --primary-h:#1d4ed8;
  --danger:   #dc2626;
  --sidebar-w: 230px;
  --radius:   8px;
  --s-anfrage-bg:     #dbeafe; --s-anfrage-t:     #1e40af;
  --s-angebot-bg:     #ede9fe; --s-angebot-t:     #5b21b6;
  --s-beauftragt-bg:  #fef9c3; --s-beauftragt-t:  #854d0e;
  --s-rechnung-bg:    #ffedd5; --s-rechnung-t:    #c2410c;
  --s-abgerechnet-bg: #dcfce7; --s-abgerechnet-t: #166534;
}

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; background: var(--bg); color: var(--text); display: flex; min-height: 100vh; }

/* LOGIN */
.login-wrap { display:flex; align-items:center; justify-content:center; min-height:100vh; width:100%; background:var(--bg); }
.login-box { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:2.5rem 2rem; width:360px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.login-logo { display:flex; align-items:center; gap:.75rem; font-size:1.1rem; font-weight:700; margin-bottom:1.75rem; }
.btn-full { width:100%; }

/* LAYOUT */
.sidebar { width:var(--sidebar-w); background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:10; }
.sidebar-logo { display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:1rem; padding:1.25rem 1rem; border-bottom:1px solid var(--border); }
.nav-links { list-style:none; padding:.75rem 0; flex:1; }
.nav-links li { display:flex; align-items:center; gap:.6rem; padding:.6rem 1rem; cursor:pointer; border-radius:var(--radius); margin:2px .5rem; color:var(--muted); transition:background .15s,color .15s; font-size:.875rem; }
.nav-links li:hover { background:#f3f4f6; color:var(--text); }
.nav-links li.active { background:#eff6ff; color:var(--primary); font-weight:600; }
.sidebar-footer { padding:1rem; border-top:1px solid var(--border); }
.btn-logout { width:100%; padding:.5rem; border:1px solid var(--border); border-radius:var(--radius); background:none; cursor:pointer; color:var(--muted); font-size:.82rem; }
.btn-logout:hover { background:#fee2e2; color:var(--danger); border-color:#fecaca; }
.main { margin-left:var(--sidebar-w); flex:1; padding:1.75rem 2rem; }

/* TOAST */
.toast { position:fixed; top:1.25rem; right:1.5rem; background:#1f2937; color:#fff; padding:.75rem 1.25rem; border-radius:var(--radius); font-size:.875rem; z-index:100; opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .2s,transform .2s; }
.toast.show { opacity:1; pointer-events:auto; transform:none; }
.toast.error { background:var(--danger); }

/* PAGE HEADER */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:.75rem; }
.page-header h1 { font-size:1.3rem; font-weight:700; }
.header-actions { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; margin-top:1.75rem; }
.section-header h2 { font-size:.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }

/* SEARCH BAR */
.search-bar { display:flex; gap:.75rem; margin-bottom:1rem; align-items:center; }
.search-input { flex:1; max-width:380px; padding:.5rem .85rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem; outline:none; background:var(--surface); }
.search-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px #dbeafe; }

/* STATS */
.stats-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:.75rem; margin-bottom:1.75rem; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.85rem 1rem; border-left:4px solid transparent; cursor:pointer; transition:box-shadow .15s; }
.stat-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.08); }
.stat-card.s-anfrage     { border-left-color:var(--s-anfrage-t); }
.stat-card.s-angebot     { border-left-color:var(--s-angebot-t); }
.stat-card.s-beauftragt  { border-left-color:var(--s-beauftragt-t); }
.stat-card.s-rechnung    { border-left-color:var(--s-rechnung-t); }
.stat-card.s-abgerechnet { border-left-color:var(--s-abgerechnet-t); }
.stat-label { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.stat-value { font-size:1.6rem; font-weight:700; margin-top:.15rem; }

/* FILTER */
.filter-bar { display:flex; gap:.4rem; margin-bottom:1rem; flex-wrap:wrap; }
.filter-btn { padding:.3rem .8rem; border:1px solid var(--border); border-radius:20px; background:none; cursor:pointer; font-size:.8rem; color:var(--muted); transition:all .15s; }
.filter-btn:hover { border-color:var(--primary); color:var(--primary); }
.filter-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }

/* PROJECT TABLE */
.project-table-wrap { overflow-x:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.project-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.project-table th { text-align:left; padding:.65rem 1rem; border-bottom:2px solid var(--border); color:var(--muted); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; background:#f9fafb; }
.project-table td { padding:.7rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.project-table tr:last-child td { border-bottom:none; }
.project-table tr { cursor:pointer; }
.project-table tr:hover td { background:#f9fafb; }
.project-table tr.row-angebot td     { background:#faf8ff; }
.project-table tr.row-angebot:hover td { background:#f3effe; }
.project-table tr.row-beauftragt td  { background:#fefce8; }
.project-table tr.row-beauftragt:hover td { background:#fef9c3; }
.project-table tr.row-rechnung td    { background:#fffbf5; }
.project-table tr.row-rechnung:hover td { background:#fff3e6; }
.project-table tr.row-abgerechnet td { background:#f6fef8; }
.project-table tr.row-abgerechnet:hover td { background:#edfbf1; }
.col-nr { width:110px; }
.col-date { width:88px; }
.col-customer { width:200px; }
.col-status { width:120px; }
.col-total { width:110px; text-align:right; }
.col-margin { width:90px; text-align:right; }

/* BADGES */
.badge { font-size:.72rem; padding:.22rem .6rem; border-radius:20px; font-weight:700; white-space:nowrap; display:inline-block; }
.badge-anfrage     { background:var(--s-anfrage-bg);     color:var(--s-anfrage-t); }
.badge-angebot     { background:var(--s-angebot-bg);     color:var(--s-angebot-t); }
.badge-beauftragt  { background:var(--s-beauftragt-bg);  color:var(--s-beauftragt-t); }
.badge-rechnung    { background:var(--s-rechnung-bg);    color:var(--s-rechnung-t); }
.badge-abgerechnet { background:var(--s-abgerechnet-bg); color:var(--s-abgerechnet-t); }

/* PROJ NR */
.proj-nr { font-size:.8rem; font-weight:700; color:var(--primary); letter-spacing:.02em; }
.project-number-large { font-size:.9rem; font-weight:700; color:var(--primary); background:#eff6ff; padding:.25rem .75rem; border-radius:6px; }

/* MARGIN PILL */
.margin-pill { font-size:.75rem; font-weight:700; padding:.18rem .55rem; border-radius:20px; }
.margin-good { background:#dcfce7; color:#166534; }
.margin-ok   { background:#fef9c3; color:#854d0e; }
.margin-low  { background:#fee2e2; color:#991b1b; }

/* MARGIN BOX */
.margin-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.25rem; margin-top:1.25rem; }
.margin-box-title { font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.75rem; }
.margin-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; }
.margin-item { text-align:center; }
.margin-item-label { font-size:.72rem; color:var(--muted); margin-bottom:.2rem; }
.margin-item-value { font-size:1.1rem; font-weight:700; }

/* DETAIL */
.btn-back { background:none; border:1px solid var(--border); border-radius:var(--radius); padding:.4rem .9rem; cursor:pointer; font-size:.85rem; color:var(--muted); }
.btn-back:hover { background:var(--bg); }
.detail-header { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem 1.5rem; margin-bottom:1.5rem; }
.detail-title-row { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:.5rem; }
.detail-title-row h1 { font-size:1.3rem; font-weight:700; }
.detail-meta { display:flex; gap:1.25rem; color:var(--muted); font-size:.85rem; flex-wrap:wrap; margin-top:.4rem; }
.detail-desc { margin-top:.5rem; color:var(--muted); font-size:.875rem; line-height:1.5; }
.notes-box { margin-top:.75rem; padding:.75rem; background:#fffbeb; border:1px solid #fde68a; border-radius:var(--radius); font-size:.875rem; line-height:1.5; color:#78350f; white-space:pre-wrap; }

.status-select { padding:.35rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.85rem; cursor:pointer; background:var(--surface); }

/* POSITIONS TABLE */
.positions-table-wrap { overflow-x:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.positions-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.positions-table th { text-align:left; padding:.6rem .75rem; border-bottom:2px solid var(--border); color:var(--muted); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; background:#f9fafb; }
.positions-table td { padding:.65rem .75rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.positions-table tr:last-child td { border-bottom:none; }
.positions-table .num { text-align:right; }
.positions-table tfoot td { font-weight:700; border-top:2px solid var(--border); border-bottom:none; background:#f9fafb; }
.total-label { text-align:right; color:var(--muted); }
.total-value { font-size:1rem; color:var(--primary); }
.desc-cell { color:var(--muted); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.type-badge { font-size:.72rem; padding:.2rem .55rem; border-radius:4px; font-weight:700; }
.type-time    { background:#eff6ff; color:#1d4ed8; }
.type-article { background:#f0fdf4; color:#166534; }
.row-actions { display:flex; gap:.25rem; justify-content:flex-end; }
.btn-icon { background:none; border:1px solid var(--border); border-radius:4px; padding:.2rem .45rem; cursor:pointer; font-size:.85rem; color:var(--muted); line-height:1; }
.btn-icon:hover { background:#f3f4f6; }
.btn-icon.danger:hover { background:#fee2e2; color:var(--danger); border-color:#fecaca; }

/* EXPORT */
.export-bar { display:flex; gap:.75rem; flex-wrap:wrap; }
.btn-export { display:flex; align-items:center; gap:.5rem; padding:.65rem 1.25rem; border-radius:var(--radius); border:1px solid var(--primary); color:var(--primary); background:#eff6ff; cursor:pointer; font-weight:600; font-size:.875rem; transition:all .15s; }
.btn-export:hover { background:var(--primary); color:#fff; }
.btn-export.invoice { border-color:#ea580c; color:#ea580c; background:#fff7ed; }
.btn-export.invoice:hover { background:#ea580c; color:#fff; }
.btn-export:disabled { opacity:.5; cursor:not-allowed; }
.exports-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.exports-table th, .exports-table td { padding:.45rem .75rem; border-bottom:1px solid var(--border); }
.exports-table th { color:var(--muted); font-weight:700; background:#f9fafb; }

/* MODAL */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal { background:var(--surface); border-radius:12px; width:580px; max-width:95vw; max-height:92vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; border-bottom:1px solid var(--border); }
.modal-header h2 { font-size:1rem; font-weight:700; }
.modal-close { background:none; border:none; font-size:1.1rem; cursor:pointer; color:var(--muted); }
.modal-body { padding:1.5rem; overflow-y:auto; flex:1; }
.modal-footer { display:flex; justify-content:flex-end; gap:.75rem; padding:1rem 1.5rem; border-top:1px solid var(--border); }

/* FORMS */
.form-group { margin-bottom:1rem; }
.form-group label { display:block; font-size:.78rem; font-weight:700; margin-bottom:.35rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-section { margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--border); }
.form-section-title { font-size:.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.75rem; }

input[type=text], input[type=number], input[type=password], input[type=date], select, textarea {
  width:100%; padding:.55rem .75rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem; background:var(--surface); color:var(--text); outline:none; transition:border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px #dbeafe; }
textarea { resize:vertical; font-family:inherit; }

.customer-search, .article-search { position:relative; }
.customer-dropdown, .article-dropdown { position:absolute; top:100%; left:0; right:0; z-index:20; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 4px 16px rgba(0,0,0,.12); max-height:220px; overflow-y:auto; }
.customer-option, .article-option { display:flex; align-items:center; justify-content:space-between; padding:.55rem .75rem; cursor:pointer; font-size:.875rem; }
.customer-option:hover, .article-option:hover { background:#f3f4f6; }
.selected-customer, .selected-article { display:flex; align-items:center; justify-content:space-between; margin-top:.4rem; padding:.45rem .75rem; border-radius:var(--radius); font-size:.85rem; font-weight:600; }
.selected-customer { background:#eff6ff; color:var(--primary); }
.selected-article  { background:#f0fdf4; color:#166534; }
.btn-clear { background:none; border:none; cursor:pointer; color:var(--muted); font-size:.85rem; }

.type-toggle { display:flex; gap:.5rem; }
.type-toggle button { flex:1; padding:.5rem; border:1px solid var(--border); border-radius:var(--radius); background:none; cursor:pointer; font-size:.85rem; color:var(--muted); transition:all .15s; }
.type-toggle button.active { background:#eff6ff; color:var(--primary); border-color:var(--primary); font-weight:700; }

.position-preview { margin-top:.5rem; padding:.65rem .75rem; background:#f9fafb; border-radius:var(--radius); font-size:.875rem; color:var(--muted); }

/* BUTTONS */
.btn { padding:.5rem 1rem; border-radius:var(--radius); font-size:.875rem; cursor:pointer; font-weight:600; border:1px solid transparent; transition:all .15s; display:inline-flex; align-items:center; gap:.4rem; }
.btn-primary   { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-h); }
.btn-secondary { background:none; border-color:var(--border); color:var(--text); }
.btn-secondary:hover { background:var(--bg); }
.btn-danger    { background:none; border-color:#fecaca; color:var(--danger); }
.btn-danger:hover { background:#fee2e2; }
.btn-duplicate { background:none; border-color:#d8b4fe; color:#7c3aed; }
.btn-duplicate:hover { background:#f3e8ff; }

/* MISC */
.alert { padding:.75rem; border-radius:var(--radius); margin-bottom:1rem; font-size:.875rem; }
.alert-error { background:#fee2e2; color:var(--danger); border:1px solid #fecaca; }
.empty-state { padding:2.5rem; text-align:center; color:var(--muted); font-size:.9rem; }
[x-cloak] { display:none !important; }