/* ── Roboto Condensed ── */
@font-face { font-family:'Roboto Condensed'; src:url('../fonts/RobotoCondensed-Light.ttf') format('truetype'); font-weight:300; font-style:normal; }
@font-face { font-family:'Roboto Condensed'; src:url('../fonts/RobotoCondensed-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; }
@font-face { font-family:'Roboto Condensed'; src:url('../fonts/RobotoCondensed-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; }

/* ── Tokens ── */
:root {
  --primary:      #004288;
  --primary-dark: #003070;
  --primary-light:#e8f0fb;
  --accent:       #0072c6;
  --danger:       #c0392b;
  --border:       #dde3ec;
  --bg:           #ffffff;
  --bg-secondary: #f4f7fb;
  --bg-hover:     #edf2fa;
  --text:         #1a2233;
  --text-muted:   #6b7a99;
  --radius:       5px;
  --shadow:       0 1px 4px rgba(0,42,136,.10);
}

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

body {
  font-family:'Roboto Condensed', 'Segoe UI', sans-serif;
  font-weight:400;
  font-size:14px;
  color:var(--text);
  background:var(--bg-secondary);
}

a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }

input, select, textarea {
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:6px 10px;
  font-size:13px;
  font-family:inherit;
  width:100%;
  background:var(--bg);
  color:var(--text);
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 2px rgba(0,66,136,.15); }
textarea { resize:vertical; }

/* ── Navbar ── */
.navbar {
  display:flex; align-items:center; gap:0;
  height:54px;
  background:var(--primary);
  color:white;
  position:sticky; top:0; z-index:50;
  box-shadow:0 2px 8px rgba(0,42,136,.25);
}
.nav-logo-wrap {
  display:flex; align-items:center;
  padding:0 16px 0 12px;
  height:100%;
  overflow:hidden;
  background:#fff;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%);
  margin-right:8px;
  flex-shrink:0;
}
.nav-logo-wrap img { height:77px; width:auto; display:block; flex-shrink:0; }
.nav-app-title {
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:18px; font-weight:700; color:#fff;
  letter-spacing:.5px; pointer-events:none; white-space:nowrap;
}
.nav-links { display:flex; gap:2px; flex:1; padding-left:8px; }
.nav-links a {
  color:rgba(255,255,255,.80);
  padding:6px 13px;
  border-radius:var(--radius);
  font-size:13px;
  font-weight:400;
  letter-spacing:.3px;
}
.nav-links a:hover  { background:rgba(255,255,255,.15); color:#fff; text-decoration:none; }
.nav-links a.active { background:rgba(255,255,255,.20); color:#fff; font-weight:700; }
.nav-user { display:flex; align-items:center; gap:12px; font-size:13px; padding-right:16px; }
.nav-user span { color:rgba(255,255,255,.70); }
.nav-user a { color:rgba(255,255,255,.80); }
.nav-user a:hover { color:#fff; text-decoration:none; }

/* ── Main ── */
.main-content { padding:20px; }

/* ── Flash ── */
.flash-messages { margin-bottom:16px; }
.flash { padding:10px 14px; border-radius:var(--radius); margin-bottom:8px; font-size:13px; border-left:4px solid; }
.flash-success { background:#f0faf5; border-color:#27ae60; color:#1a6b3c; }
.flash-error   { background:#fdf3f2; border-color:var(--danger); color:#8b1a14; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:7px 14px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--bg);
  font-size:13px; font-family:inherit; cursor:pointer; color:var(--text);
  text-decoration:none; white-space:nowrap; transition:background .12s;
}
.btn:hover { background:var(--bg-hover); text-decoration:none; }
.btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-dark); color:#fff; }
.btn-danger  { background:var(--danger);  color:#fff; border-color:var(--danger); }
.btn-danger:hover  { background:#a93226; color:#fff; }
.btn-sm   { padding:4px 10px; font-size:12px; }
.btn-full { width:100%; justify-content:center; }

/* ── Cards ── */
.card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }

/* ── Page header ── */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.page-header h1 { font-size:20px; font-weight:700; color:var(--primary); }

/* ── Tables ── */
.data-table { width:100%; border-collapse:collapse; font-size:13px; background:var(--bg); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.data-table th { padding:8px 10px; text-align:left; background:var(--primary); color:#fff; font-weight:700; font-size:12px; letter-spacing:.3px; }
.data-table td { padding:8px 10px; border-bottom:1px solid var(--border); }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--bg-hover); }
.data-table .num { text-align:right; }

/* ── Forms ── */
.form-card { padding:20px; }
.form-row  { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:0; }
.form-group { flex:1; min-width:140px; margin-bottom:12px; }
.form-group-sm { flex:0 0 120px; min-width:100px; }
.form-group label { display:block; font-size:12px; font-weight:700; color:var(--text-muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; }
.form-actions { display:flex; gap:8px; margin-top:8px; }
.filter-bar { display:flex; gap:8px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.filter-bar input, .filter-bar select { width:auto; flex:1; min-width:160px; }

/* ── Badges ── */
.badge { padding:2px 8px; border-radius:12px; font-size:11px; font-weight:700; }
.badge-entwurf      { background:#fef3c7; color:#92400e; }
.badge-versendet    { background:#dbeafe; color:#1e40af; }
.badge-abgeschlossen{ background:#d1fae5; color:#065f46; }

/* ── Empty state ── */
.empty-state { text-align:center; padding:40px 20px; color:var(--text-muted); }
.empty-state p { margin-bottom:12px; }

/* ── Login ── */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--primary); }
.login-box {
  background:var(--bg); border-radius:8px; padding:36px 32px; width:360px;
  box-shadow:0 8px 32px rgba(0,42,136,.30);
}
.login-logo { text-align:center; margin-bottom:20px; }
.login-logo img { height:48px; width:auto; }
.login-box h1 { text-align:center; margin-bottom:4px; font-size:20px; font-weight:700; color:var(--primary); }
.login-sub { text-align:center; color:var(--text-muted); margin-bottom:20px; font-size:13px; }

/* ── Builder ── */
body:has(.builder-layout) .main-content { padding:0; overflow:hidden; }

/* ── Komponentenbaum ── */
.tree-cat { border-bottom:1px solid var(--border); }
.tree-cat > summary.tree-cat-label {
  display:list-item; list-style:none;
  padding:7px 12px; cursor:pointer; user-select:none;
  font-size:12px; font-weight:700; color:var(--primary);
  text-transform:uppercase; letter-spacing:.4px;
  background:var(--bg);
}
.tree-cat > summary.tree-cat-label::before { content:'▶\00a0'; font-size:10px; }
.tree-cat[open] > summary.tree-cat-label::before { content:'▼\00a0'; }
.tree-cat > summary.tree-cat-label:hover { background:var(--bg-hover); }
.tree-subcat { }
.tree-subcat > summary.tree-subcat-label {
  display:list-item; list-style:none;
  padding:4px 12px 4px 20px; cursor:pointer; user-select:none;
  font-size:11px; font-weight:600; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.3px;
  background:var(--bg-secondary);
}
.tree-subcat > summary.tree-subcat-label::before { content:'▶\00a0'; font-size:9px; }
.tree-subcat[open] > summary.tree-subcat-label::before { content:'▼\00a0'; }
.tree-subcat > summary.tree-subcat-label:hover { background:var(--bg-hover); }
.komp-item-sub { padding-left:24px !important; }

/* ── Pos-table drag & drop ── */
.drag-handle {
  width:18px; text-align:center; color:var(--border);
  cursor:grab; font-size:14px; user-select:none;
  padding:5px 2px !important;
}
.drag-handle:hover { color:var(--primary); }
.pos-table tr.row-dragging { opacity:.35; }
.pos-table tr.drop-top td    { box-shadow:inset 0  2px 0 var(--primary); }
.pos-table tr.drop-bottom td { box-shadow:inset 0 -2px 0 var(--primary); }
.pos-table tr.drop-onto td   { background:var(--primary) !important; color:#fff; }