/* Dunkles, ruhiges Dashboard-Design — tablet-tauglich (große Touch-Ziele) */
:root {
  --sidebar-w: 250px;
  --bg: #14171c;
  --bg-panel: #1c2027;
  --bg-panel-2: #232830;
  --border: #2c323c;
  --accent: #e8a33d;      /* warmes Brötchen-Gold */
  --accent-2: #d97d2a;
  --text: #e6e8eb;
  --muted: #8b93a1;
}
html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font-size: 1rem; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
a:hover { color: #f2b75a; }

.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--bg-panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.25rem; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); }
.brand-icon { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; font-size: 1.35rem; color: #1a1a1a; }
.brand-text { line-height: 1.1; font-size: .95rem; }
.sidebar .nav { padding: .75rem .75rem; flex: 1; }
.sidebar .nav-heading { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 1rem .75rem .35rem; }
.sidebar .nav-link { color: var(--text); border-radius: 10px; padding: .7rem .85rem; display: flex; align-items: center; gap: .7rem; font-size: 1rem; }
.sidebar .nav-link i { width: 1.25rem; text-align: center; color: var(--muted); }
.sidebar .nav-link:hover { background: var(--bg-panel-2); }
.sidebar .nav-link.active { background: rgba(232,163,61,.14); color: var(--accent); }
.sidebar .nav-link.active i { color: var(--accent); }
.sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { padding: .9rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--bg-panel); position: sticky; top: 0; z-index: 10; }
.content { padding: 1.5rem; }

@media (max-width: 991.98px) {
  .sidebar { position: fixed; left: calc(-1 * var(--sidebar-w)); z-index: 100; transition: left .2s; }
  .sidebar.open { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.6); }
  .content { padding: 1rem; }
}

/* Panels / Karten */
.card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 14px; }
.card-header { background: transparent; border-bottom: 1px solid var(--border); font-weight: 600; }
.kpi { padding: 1.1rem 1.25rem; }
.kpi .label { color: var(--muted); font-size: .85rem; }
.kpi .value { font-size: 1.9rem; font-weight: 700; line-height: 1.2; }
.kpi .value.warn { color: #f0b14a; }
.kpi .value.danger { color: #ef6b6b; }
.kpi .value.ok { color: #58c98f; }

.table { --bs-table-bg: transparent; --bs-table-border-color: var(--border); }
.table th { color: var(--muted); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.table td, .table th { vertical-align: middle; }
.table-hover tbody tr:hover { --bs-table-hover-bg: var(--bg-panel-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.btn { border-radius: 10px; }
.btn-lg { padding: .8rem 1.4rem; font-size: 1.15rem; }
.btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: #1a1a1a; --bs-btn-hover-bg: #f2b75a; --bs-btn-hover-border-color: #f2b75a; --bs-btn-hover-color: #1a1a1a; --bs-btn-active-bg: var(--accent-2); --bs-btn-active-border-color: var(--accent-2); font-weight: 600; }
.form-control, .form-select { background: #12151a; border-color: var(--border); color: var(--text); }
.form-control:focus, .form-select:focus { background: #12151a; color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(232,163,61,.2); }
.badge { font-weight: 600; }

/* Status-Badges */
.status-entwurf { background: #4b5563; }
.status-offen, .status-abgeschickt { background: #2f6fed; }
.status-teilbezahlt { background: #b8860b; }
.status-bezahlt, .status-erledigt, .status-abgerechnet { background: #1f9d61; }
.status-storniert { background: #7f1d1d; }
.status-in_produktion { background: #d97d2a; }

/* Bestellmaske (Tablet) */
.bestell-zeile { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border); }
.bestell-zeile:last-child { border-bottom: 0; }
.bestell-name { font-size: 1.35rem; font-weight: 600; }
.bestell-name small { display: block; color: var(--muted); font-size: .85rem; font-weight: 400; }
.stepper { display: flex; align-items: center; gap: .5rem; }
.stepper button { width: 64px; height: 64px; font-size: 1.9rem; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-panel-2); color: var(--text); touch-action: manipulation; }
.stepper button:active { background: var(--accent); color: #1a1a1a; }
.stepper input { width: 96px; height: 64px; font-size: 1.8rem; text-align: center; font-weight: 700; border-radius: 14px; }
@media (max-width: 575.98px) { .stepper button { width: 54px; height: 54px; } .stepper input { width: 80px; height: 54px; font-size: 1.5rem; } .bestell-name { font-size: 1.15rem; } }

/* Produktionstafel — aus einigen Metern lesbar */
.produktion-tafel .zeile { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: .55rem 1.25rem; border-bottom: 1px solid var(--border); }
.produktion-tafel .zeile:last-child { border-bottom: 0; }
.produktion-tafel .name { font-size: 2.1rem; font-weight: 600; }
.produktion-tafel .name small { font-size: 1rem; color: var(--muted); margin-left: .75rem; }
.produktion-tafel .menge { font-size: 3.2rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); min-width: 3ch; text-align: right; }
.produktion-tafel .menge.null { color: var(--muted); opacity: .5; }
.produktion-tafel .gesamt { font-size: 1.5rem; }
.produktion-tafel .gesamt .menge { font-size: 2.6rem; }
.neu-badge { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.zeile.geaendert { background: rgba(232,163,61,.12); }

/* Login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-card { width: 100%; max-width: 420px; }
.login-card .form-control { height: 56px; font-size: 1.15rem; }

/* Positions-Formset */
.positionen th, .positionen td { padding: .3rem .35rem; }
.positionen .zeilensumme { font-variant-numeric: tabular-nums; white-space: nowrap; }
.positionen tr.geloescht { opacity: .35; text-decoration: line-through; }

/* Sonstiges */
.text-muted, .text-secondary { color: var(--muted) !important; }
pre.text-wrap { white-space: pre-wrap; font-family: inherit; }
.alters-tile { border-radius: 12px; padding: .8rem 1rem; background: var(--bg-panel-2); }
.hinweis-platzhalter { border-left: 4px solid var(--accent); }
.list-group-item { background: transparent; border-color: var(--border); color: var(--text); }
.pagination .page-link { background: var(--bg-panel); border-color: var(--border); color: var(--text); }
.dl-kompakt dt { color: var(--muted); font-weight: 500; }