:root {
  --wood: #8a5a32;
  --wood-dark: #5b3a20;
  --wood-light: #b9824f;
  /* warmere Brauntöne passend zum Briefpapier (Fußleiste/Logo) */
  --charcoal: #4a3324;
  --charcoal-2: #2f1f14;
  --cream: #faf6f0;
  --sand: #efe5d6;
  --line: #e3d4bd;

  /* Okabe-Ito Palette – wissenschaftlich validiert für Rot-Grün-Schwäche.
     Unterscheidung erfolgt über Helligkeitskontrast, nicht nur Farbton. */
  --ok-orange:  #E69F00;
  --ok-skyblue: #56B4E9;
  --ok-green:   #009E73;  /* Bluish Green – auch für Deuteranopen erkennbar */
  --ok-yellow:  #F0E442;
  --ok-blue:    #0072B2;
  --ok-vermill: #D55E00;  /* Vermillion – rotorange, KEIN reines Rot */
  --ok-purple:  #CC79A7;

  /* Bootstrap-Status-Farben umgebogen */
  --bs-primary: var(--wood);
  --bs-primary-rgb: 138, 90, 50;
  --bs-success: var(--ok-green);
  --bs-success-rgb: 0, 158, 115;
  --bs-warning: var(--ok-orange);
  --bs-warning-rgb: 230, 159, 0;
  --bs-danger: var(--ok-vermill);
  --bs-danger-rgb: 213, 94, 0;
  --bs-info: var(--ok-skyblue);
  --bs-info-rgb: 86, 180, 233;

  --bs-link-color: var(--wood-dark);
  --bs-link-hover-color: var(--wood);
}

/* Bootstrap-Utility-Klassen überschreiben (text-bg-*, btn-*, alert-*) */
.text-bg-success, .badge.text-bg-success, .bg-success { background-color: var(--ok-green) !important; color: #fff !important; }
.text-bg-danger,  .badge.text-bg-danger,  .bg-danger  { background-color: var(--ok-vermill) !important; color: #fff !important; }
.text-bg-warning, .badge.text-bg-warning, .bg-warning { background-color: var(--ok-orange) !important; color: #2f1f14 !important; }
.text-bg-info,    .badge.text-bg-info,    .bg-info    { background-color: var(--ok-skyblue) !important; color: #1a1a1a !important; }
.text-success { color: var(--ok-green) !important; }
.text-danger { color: var(--ok-vermill) !important; }
.text-warning { color: var(--ok-orange) !important; }
.text-info    { color: var(--ok-skyblue) !important; }

.btn-success { background-color: var(--ok-green); border-color: var(--ok-green); }
.btn-success:hover { background-color: #007a59; border-color: #007a59; }
.btn-danger  { background-color: var(--ok-vermill); border-color: var(--ok-vermill); }
.btn-danger:hover  { background-color: #b04d00; border-color: #b04d00; }
.btn-warning { background-color: var(--ok-orange); border-color: var(--ok-orange); color: #2f1f14; }
.btn-warning:hover { background-color: #c78800; border-color: #c78800; color: #fff; }
.btn-outline-success { color: var(--ok-green); border-color: var(--ok-green); }
.btn-outline-success:hover { background-color: var(--ok-green); border-color: var(--ok-green); }
.btn-outline-danger { color: var(--ok-vermill); border-color: var(--ok-vermill); }
.btn-outline-danger:hover { background-color: var(--ok-vermill); border-color: var(--ok-vermill); color: #fff; }
.btn-outline-warning { color: var(--ok-orange); border-color: var(--ok-orange); }

.alert-success { background-color: #d3f1e6; border-color: #a5e2cc; color: #024d39; }
.alert-danger  { background-color: #fbe3cf; border-color: #f4b78e; color: #7a3700; }
.alert-warning { background-color: #fbeec5; border-color: #f3d680; color: #6b4500; }
.alert-info    { background-color: #d6ecf9; border-color: #a8d4ee; color: #084563; }

/* Statusabhängige Punkte – mit zusätzlichem Form-Indikator gegen Color-Only-Information */
.status-dot.s-ok      { background: var(--ok-green); }
.status-dot.s-warn    { background: var(--ok-orange); }
.status-dot.s-danger  { background: var(--ok-vermill); }
.status-dot.s-info    { background: var(--ok-skyblue); }

body {
  background: var(--cream);
  color: #29221c;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Buttons / Akzente an Holzfarben anpassen ---------- */
.btn-primary {
  --bs-btn-bg: var(--wood);
  --bs-btn-border-color: var(--wood);
  --bs-btn-hover-bg: var(--wood-dark);
  --bs-btn-hover-border-color: var(--wood-dark);
  --bs-btn-active-bg: var(--wood-dark);
  --bs-btn-active-border-color: var(--wood-dark);
  --bs-btn-disabled-bg: var(--wood);
  --bs-btn-disabled-border-color: var(--wood);
}
.btn-outline-primary {
  --bs-btn-color: var(--wood-dark);
  --bs-btn-border-color: var(--wood);
  --bs-btn-hover-bg: var(--wood);
  --bs-btn-hover-border-color: var(--wood);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--wood-dark);
  --bs-btn-active-border-color: var(--wood-dark);
  --bs-btn-active-color: #fff;
}
/* Auswahl-Kacheln (z.B. Kundentyp, Rechnungsart) in allen Zuständen klar lesbar */
.btn-check:checked + .btn-outline-primary {
  background-color: var(--wood-dark);
  border-color: var(--wood-dark);
  color: #fff;
}
.btn-check:checked + .btn-outline-primary .text-muted,
.btn-check:checked + .btn-outline-primary small,
.btn-outline-primary:hover .text-muted,
.btn-outline-primary:hover small {
  color: rgba(255, 255, 255, .88) !important;
}
.bg-primary { background-color: var(--wood) !important; }
.text-primary { color: var(--wood-dark) !important; }
a { color: var(--wood-dark); }
.form-check-input:checked { background-color: var(--wood); border-color: var(--wood); }
.form-control:focus, .form-select:focus {
  border-color: var(--wood-light);
  box-shadow: 0 0 0 .2rem rgba(138, 90, 50, .15);
}
.page-link { color: var(--wood-dark); }
.page-item.active .page-link { background-color: var(--wood); border-color: var(--wood); }

/* ---------- App-Layout ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  /* Dunkle Optik – wird sowohl im Desktop-Layout als auch im Offcanvas verwendet */
  background: linear-gradient(180deg, var(--charcoal) 0%, var(--charcoal-2) 100%);
  color: #ece3d6;
  display: flex;
  flex-direction: column;
  --bs-offcanvas-bg: transparent;   /* eigene Hintergrundfarbe wird übernommen */
  --bs-offcanvas-color: #ece3d6;
  --bs-offcanvas-width: 280px;
}
/* Nur ab "lg" als feste Spalte im Flex-Layout */
@media (min-width: 992px) {
  .sidebar { width: 260px; flex: 0 0 260px; }
}
.sidebar-brand {
  display: flex; align-items: center; gap: .65rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand img { width: 44px; height: 44px; object-fit: contain;
                     filter: brightness(0) invert(1); }
.sidebar-brand .brand-link { display: flex; align-items: center; gap: .65rem; flex: 1 1 auto; color: inherit; text-decoration: none; }
.sidebar-brand .brand-link:hover { color: inherit; opacity: .9; }
.sidebar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.sidebar-brand strong { font-size: 1rem; }
.sidebar-brand small { color: #b7a690; font-size: .72rem; }

.sidebar-nav { padding: .6rem .5rem; flex: 1 1 auto; overflow-y: auto; }
.sidebar-nav .nav-link {
  color: #d7ccbb; border-radius: 8px; padding: .58rem .8rem; margin-bottom: 2px;
  display: flex; align-items: center; gap: .7rem; font-weight: 500;
}
.sidebar-nav .nav-link i { font-size: 1.1rem; width: 1.3rem; text-align: center; }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-nav .nav-link.active { background: var(--wood); color: #fff; }
.nav-divider { height: 1px; background: rgba(255,255,255,.1); margin: .5rem .6rem; }

.sidebar-footer { padding: .8rem; border-top: 1px solid rgba(255,255,255,.08); }
.user-chip { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; color: #cdbfad; font-size: .9rem; }
.user-chip i { font-size: 1.3rem; }

.main-area {
  /* min-height 100vh, damit der Footer auch bei wenig Inhalt unten klebt
     statt frei im Layout zu schweben (siehe .app-footer mt-auto). */
  flex: 1 1 auto; min-width: 0; min-height: 100vh;
  display: flex; flex-direction: column;
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 75% 30%, rgba(185, 130, 79, .18), transparent 70%),
    linear-gradient(135deg, var(--cream) 0%, #ecdfc8 100%);
}
.main-area::before {
  content: ""; position: fixed; pointer-events: none; z-index: 0;
  top: 50%; right: 4vw; transform: translateY(-50%);
  width: min(560px, 46vw); aspect-ratio: 1;
  background: url("/static/img/logo.png") no-repeat center / contain;
  opacity: 0.10;
}
.content { position: relative; z-index: 1; }
.topbar {
  display: flex; align-items: center; gap: .25rem;
  background: rgba(255, 252, 246, .72);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid rgba(184, 158, 124, .25);
  padding: .55rem .9rem; position: sticky; top: 0; z-index: 20;
}
.topbar-brand { font-weight: 700; color: var(--charcoal); }
/* flex:1 0 auto sorgt zusammen mit .main-area min-height:100vh dafür,
   dass .content den verfügbaren Platz füllt und der Footer (mt-auto) wirklich unten klebt. */
.content { padding: 1.4rem; max-width: 1300px; width: 100%; flex: 1 0 auto; }

@media (max-width: 991.98px) {
  .content { padding: 1rem; }
}

/* ---------- Seitentitel ---------- */
.page-head {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  justify-content: space-between; margin-bottom: 1.2rem;
}
.page-head h1 { font-size: 1.55rem; font-weight: 700; margin: 0; color: var(--charcoal); }
.page-head .subtitle { color: #8a7c6c; font-size: .9rem; }

/* ---------- Karten / Tabellen ---------- */
.card {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 14px;
  background: rgba(255, 251, 244, .20);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 6px 22px rgba(60, 40, 20, .08);
}
.card-header {
  background: rgba(255, 251, 244, .10);
  border-bottom: 1px solid rgba(184, 158, 124, .20);
  font-weight: 600; border-radius: 14px 14px 0 0;
}
.stat-card { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; }
.stat-card .icon {
  width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
  background: var(--sand); color: var(--wood-dark); font-size: 1.5rem; flex: 0 0 auto;
}
.stat-card .value { font-size: 1.55rem; font-weight: 700; line-height: 1; color: var(--charcoal); }
.stat-card .label { color: #8a7c6c; font-size: .85rem; }

.table { --bs-table-bg: transparent; --bs-table-accent-bg: transparent;
         --bs-table-striped-bg: rgba(184, 158, 124, .07);
         --bs-table-hover-bg: rgba(184, 158, 124, .14); }
.table thead th { background: rgba(239, 229, 214, .22); color: var(--charcoal); border-bottom: none; white-space: nowrap; }
.table > :not(caption) > * > * { padding: .65rem .75rem; background-color: transparent; }

/* Listengruppen (Dashboard etc.) ebenfalls durchscheinend — Bootstrap setzt default #fff */
.list-group { --bs-list-group-bg: transparent; }
.list-group-item { background-color: transparent !important; border-color: rgba(184, 158, 124, .22); }
.list-group-item-action:hover, .list-group-item-action:focus {
  background-color: rgba(184, 158, 124, .12) !important;
}
.badge-soft { background: var(--sand); color: var(--wood-dark); font-weight: 600; }

.status-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; }

/* Positionseditor: Eventual-/Alternativ-Zeilen optisch hervorheben */
.line-row.row-optional { background: rgba(255, 213, 128, .08); }
.line-row.row-optional td { font-style: italic; }
.line-row.row-alternative { background: rgba(120, 180, 220, .08); }
.line-row.row-alternative td { font-style: italic; }
.line-row.row-hidden { opacity: .55; }
.line-row.row-hidden td { text-decoration: line-through; }

/* Bootstrap-Modals: über allen Glas-Effekt-Karten (backdrop-filter) liegen */
.modal-backdrop { z-index: 1055; }
.modal { z-index: 1060; }

/* Einheiten-Dropdown im Positions-Editor: breiter, damit "Stck" oder "lfdm" lesbar */
.line-table .li-unit { min-width: 80px; }
.line-table th, .line-table td { padding: .45rem .4rem; }

/* ---------------------- Mobile-Optimierung ---------------------- */
@media (max-width: 767.98px) {
  .page-head { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .page-head h1 { font-size: 1.25rem; }
  .page-head .btn { font-size: .85rem; padding: .35rem .7rem; }
  .card-body { padding: .85rem; }
  /* Mehrere Buttons in einer Zeile -> umbrechen statt halb anschneiden */
  .d-flex.flex-wrap > .btn { white-space: nowrap; }
  /* Stat-Cards kompakter */
  .stat-card { padding: .8rem; gap: .6rem; }
  .stat-card .icon { width: 42px; height: 42px; font-size: 1.2rem; }
  .stat-card .value { font-size: 1.2rem; }
  /* Tabellen waagerecht scrollen können */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  /* Formular-Spalten unter md immer voll breit */
  .row.g-3 > [class*="col-md-"] { margin-bottom: .25rem; }
  /* Sidebar-Footer kompakt */
  .sidebar-footer { padding: .5rem; }
  /* Topbar-Toggle größer für Daumen */
  .topbar .btn { padding: .4rem .65rem; }
  /* Positions-Editor: Spalten nicht erzwingen */
  .line-table { font-size: .85rem; }
}

@media (max-width: 575.98px) {
  .content { padding: .75rem; }
  .stat-card .value { font-size: 1.05rem; }
  /* Tabellen-Header verstecken, Zeilen werden zu „Karten" */
  .table-stack thead { display: none; }
  .table-stack tbody tr { display: block; padding: .5rem; border-bottom: 1px solid rgba(184,158,124,.2); }
  .table-stack tbody td { display: block; padding: .25rem 0; }
}

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background: linear-gradient(135deg, var(--charcoal-2) 0%, var(--wood-dark) 100%);
  position: relative; overflow: hidden;
}
.login-emblem {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 95vw); height: auto;
  max-height: 95vh; object-fit: contain;
  opacity: .18; pointer-events: none; z-index: 0;
  filter: brightness(0) invert(1);
}
.login-card {
  width: 100%; max-width: 420px;
  background: rgba(255, 255, 255, .32);
  -webkit-backdrop-filter: blur(7px) saturate(140%);
  backdrop-filter: blur(7px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 20px;
  padding: 2.2rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, .5);
  position: relative; z-index: 1;
}
/* Mobil optimiert */
@media (max-width: 575.98px) {
  .login-wrap { padding: 1rem; }
  .login-card { padding: 1.6rem 1.4rem; max-width: 100%; border-radius: 16px;
                background: rgba(255, 255, 255, .35); }
  .login-card .logo { max-width: 110px; }
  .login-card h1 { font-size: 1.1rem; }
  .login-emblem { width: min(900px, 95vw); max-height: 70vh; opacity: .32; }
}
.login-card .logo { display: block; max-width: 150px; margin: 0 auto 1rem; }
.login-card h1 { text-align: center; font-size: 1.3rem; color: var(--charcoal); }
.login-card .muted { text-align: center; color: #8a7c6c; margin-bottom: 1.5rem; font-size: .9rem; }

/* ---------- Positionseditor ---------- */
.line-table input, .line-table select { min-width: 0; }
.line-table .col-pos { width: 38px; text-align: center; color: #9b8c7a; }
.signature-pad { border: 2px dashed var(--line); border-radius: 12px; background: #fff; touch-action: none; width: 100%; height: 180px; }
.photo-thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }

/* Tippfreundliche Tabellen auf dem Handy */
@media (max-width: 575.98px) {
  .table-responsive-sm-cards .table, .table-responsive-sm-cards thead,
  .table-responsive-sm-cards tbody, .table-responsive-sm-cards th,
  .table-responsive-sm-cards td, .table-responsive-sm-cards tr { display: block; }
}

/* ============================================================
   DARK MODE (data-bs-theme="dark")
   Greift, wenn Einstellung "Dunkel" gewählt oder "Auto" + System dunkel.
   ============================================================ */
[data-bs-theme="dark"] {
  --cream: #1d1812;
  --sand:  #25201a;
  --line:  #3a302a;
  --charcoal: #ede4d3;
  --charcoal-2: #d9cdb8;
  --bs-body-bg: #1d1812;
  --bs-body-color: #ede4d3;
  --bs-link-color: #d6a677;
  --bs-link-hover-color: #f1c9a1;
}
[data-bs-theme="dark"] body {
  background: #1d1812;
  color: #ede4d3;
}
[data-bs-theme="dark"] .main-area {
  background:
    radial-gradient(ellipse 70% 60% at 75% 30%, rgba(185, 130, 79, .10), transparent 70%),
    linear-gradient(135deg, #1d1812 0%, #2a2018 100%);
}
[data-bs-theme="dark"] .main-area::before { opacity: 0.06; filter: invert(1); }
[data-bs-theme="dark"] .topbar {
  background: rgba(36, 28, 20, .78);
  border-bottom-color: rgba(184, 158, 124, .28);
  color: #ede4d3;
}
[data-bs-theme="dark"] .topbar-brand,
[data-bs-theme="dark"] .page-head h1 { color: #f3e9d6; }
[data-bs-theme="dark"] .page-head .subtitle { color: #b6a78f; }
[data-bs-theme="dark"] .card {
  background-color: rgba(40, 32, 24, .55);
  border-color: rgba(184, 158, 124, .25);
  color: #ede4d3;
}
[data-bs-theme="dark"] .card-header {
  background-color: rgba(60, 48, 36, .50);
  border-bottom-color: rgba(184, 158, 124, .22);
  color: #f3e9d6;
}
[data-bs-theme="dark"] .badge-soft {
  background: rgba(214, 166, 119, .18);
  color: #f3d8b5;
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
  background-color: #2a2118;
  border-color: #4a3a2c;
  color: #ede4d3;
}
[data-bs-theme="dark"] .form-control::placeholder { color: #9e8b73; }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: #2a2118;
  color: #fff;
  border-color: var(--wood-light);
  box-shadow: 0 0 0 .2rem rgba(185, 130, 79, .25);
}
[data-bs-theme="dark"] .form-check-input { background-color: #2a2118; border-color: #6b5947; }
[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: #ede4d3;
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-hover-bg: rgba(214, 166, 119, .08);
  --bs-table-border-color: rgba(184, 158, 124, .18);
  color: #ede4d3;
}
[data-bs-theme="dark"] .table thead { color: #f3e9d6; }
[data-bs-theme="dark"] .text-muted { color: #b6a78f !important; }
[data-bs-theme="dark"] .alert-success { background-color: #14392e; border-color: #1d5440; color: #c9f0db; }
[data-bs-theme="dark"] .alert-danger  { background-color: #4a2412; border-color: #7a3a18; color: #f7d4be; }
[data-bs-theme="dark"] .alert-warning { background-color: #4a3a10; border-color: #7a5a12; color: #f6e3a1; }
[data-bs-theme="dark"] .alert-info    { background-color: #163a52; border-color: #1c5176; color: #c5e2f5; }
[data-bs-theme="dark"] .login-wrap { background: #1d1812; }
[data-bs-theme="dark"] .login-card {
  background: rgba(40, 32, 24, .85);
  color: #ede4d3;
  border-color: rgba(184, 158, 124, .25);
}
[data-bs-theme="dark"] .login-card h1 { color: #f3e9d6; }
[data-bs-theme="dark"] .login-card .muted { color: #b6a78f; }
[data-bs-theme="dark"] .signature-pad { background: #2a2118; border-color: #4a3a2c; }
[data-bs-theme="dark"] .modal-content {
  background-color: #25201a; color: #ede4d3;
  border-color: rgba(184, 158, 124, .25);
}
[data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer {
  border-color: rgba(184, 158, 124, .18);
}
[data-bs-theme="dark"] .list-group-item {
  background: rgba(40, 32, 24, .65);
  color: #ede4d3;
  border-color: rgba(184, 158, 124, .18);
}
[data-bs-theme="dark"] .list-group-item:hover { background: rgba(214, 166, 119, .10); }
[data-bs-theme="dark"] .dropdown-menu {
  background-color: #25201a; border-color: rgba(184, 158, 124, .22);
}
[data-bs-theme="dark"] .dropdown-item { color: #ede4d3; }
[data-bs-theme="dark"] .dropdown-item:hover { background: rgba(214, 166, 119, .12); color: #fff; }

/* ---------------------- Dark-Mode-Korrekturen ---------------------- */
/* Outline-Buttons in Dark Mode: heller Holzton statt dunkelbraun */
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #d6a677;
  --bs-btn-border-color: #d6a677;
  --bs-btn-hover-bg: #d6a677;
  --bs-btn-hover-border-color: #d6a677;
  --bs-btn-hover-color: #1d1812;
  --bs-btn-active-bg: #b9824f;
  --bs-btn-active-border-color: #b9824f;
  --bs-btn-active-color: #1d1812;
}
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: #b9824f;
  --bs-btn-border-color: #b9824f;
  --bs-btn-color: #1d1812;
  --bs-btn-hover-bg: #d6a677;
  --bs-btn-hover-border-color: #d6a677;
  --bs-btn-hover-color: #1d1812;
  --bs-btn-active-bg: #d6a677;
  --bs-btn-active-border-color: #d6a677;
  --bs-btn-active-color: #1d1812;
}
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #c7b89c;
  --bs-btn-border-color: #6b5947;
  --bs-btn-hover-bg: #3a302a;
  --bs-btn-hover-border-color: #c7b89c;
  --bs-btn-hover-color: #f3e9d6;
}
[data-bs-theme="dark"] .btn-outline-warning {
  --bs-btn-color: var(--ok-orange);
  --bs-btn-border-color: var(--ok-orange);
}
[data-bs-theme="dark"] .btn-link { color: #d6a677; }
[data-bs-theme="dark"] a { color: #d6a677; }
[data-bs-theme="dark"] a:hover { color: #f1c9a1; }
[data-bs-theme="dark"] .page-link { color: #d6a677; background-color: #2a2118; border-color: #4a3a2c; }
[data-bs-theme="dark"] .page-item.active .page-link { background-color: #b9824f; border-color: #b9824f; color: #1d1812; }
[data-bs-theme="dark"] .badge-soft { background: rgba(214, 166, 119, .18); color: #f3d8b5; border: 1px solid rgba(214, 166, 119, .25); }

/* Top-Bar im Dark Mode: das Burger-Icon sichtbar machen */
[data-bs-theme="dark"] .topbar .btn-link.text-dark { color: #f3e9d6 !important; }

/* ---------------------- Mobile: kein horizontaler Overflow ---------------------- */
html, body { overflow-x: hidden; }
.app-shell { width: 100%; max-width: 100vw; }
.main-area { min-width: 0; }  /* erlaubt flex-Container schrumpft mit Inhalt */
.content { max-width: 100%; box-sizing: border-box; }

/* Tabellen-Container schrumpfen sich selbst (statt nach links zu wachsen) */
.card .table-responsive { max-width: 100%; }
.line-table { table-layout: auto; }

/* Mobile: Tabellen sind kompakter und scrollen sauber */
@media (max-width: 575.98px) {
  .card { border-radius: 14px; }
  .card-body { padding: .75rem; }
  .table { font-size: .85rem; }
  .table > :not(caption) > * > * { padding: .45rem .5rem; }
  /* In Listen-Tabellen kann der Klickpfeil weg, spart Platz */
  .table .text-end .bi-chevron-right { display: none; }
}

/* Offcanvas-Sidebar bekommt eigene Klick-Optik im Dark Mode */
[data-bs-theme="dark"] .sidebar { /* bereits dunkel – aber Backdrop weicher */ }
[data-bs-theme="dark"] .offcanvas-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: .7; }

/* Sidebar-Footer-Spruch nicht aus dem Layout rutschen lassen */
.sidebar-footer { word-break: break-word; }

/* ---------------------- Offcanvas-Sidebar (mobile): robust ---------------------- */
/* Bootstrap setzt --bs-offcanvas-bg ggf. erst spät – höhere Spezifität benutzen. */
nav.sidebar.offcanvas,
.offcanvas-lg.sidebar {
  background: linear-gradient(180deg, var(--charcoal) 0%, var(--charcoal-2) 100%) !important;
  color: #ece3d6 !important;
}
nav.sidebar .sidebar-nav .nav-link {
  color: #ece3d6 !important;
}
nav.sidebar .sidebar-nav .nav-link i { color: #ece3d6 !important; }
nav.sidebar .sidebar-nav .nav-link.active,
nav.sidebar .sidebar-nav .nav-link.active i { color: #fff !important; }
nav.sidebar .sidebar-brand small { color: #b7a690 !important; }
nav.sidebar .user-chip { color: #cdbfad !important; }

/* ---------------------- Dark-Mode-Feinschliff ---------------------- */
/* Sidebar in Dark Mode: deutlich heller, klarer Kontrast */
[data-bs-theme="dark"] nav.sidebar,
[data-bs-theme="dark"] nav.sidebar.offcanvas {
  background: linear-gradient(180deg, #2a2118 0%, #1a1410 100%) !important;
}
[data-bs-theme="dark"] nav.sidebar .sidebar-nav .nav-link,
[data-bs-theme="dark"] nav.sidebar .sidebar-nav .nav-link i {
  color: #f3e9d6 !important;
  opacity: 1 !important;
}
[data-bs-theme="dark"] nav.sidebar .sidebar-nav .nav-link:hover {
  background: rgba(214, 166, 119, .15) !important;
  color: #ffffff !important;
}
[data-bs-theme="dark"] nav.sidebar .sidebar-nav .nav-link.active,
[data-bs-theme="dark"] nav.sidebar .sidebar-nav .nav-link.active i {
  background: #b9824f !important;
  color: #1d1812 !important;
  font-weight: 600;
}
[data-bs-theme="dark"] nav.sidebar .sidebar-brand strong { color: #f3e9d6; }
[data-bs-theme="dark"] nav.sidebar .sidebar-brand small { color: #c7b89c; }
[data-bs-theme="dark"] nav.sidebar .user-chip { color: #d9cdb8 !important; }
[data-bs-theme="dark"] nav.sidebar .nav-divider { background: rgba(255,255,255,.15); }

/* Logo auf der Login-Karte im Dark Mode invertieren (weiß zeichnen),
   damit das schwarze/braune Original auf dunklem Karten-Grund sichtbar ist. */
[data-bs-theme="dark"] .login-card .logo {
  filter: brightness(0) invert(1);
  opacity: .92;
}
/* Login-Karte im Dark Mode etwas deutlicher abheben */
[data-bs-theme="dark"] .login-card {
  background: rgba(45, 35, 25, .92);
  border-color: rgba(214, 166, 119, .35);
  box-shadow: 0 25px 60px rgba(0, 0, 0, .65);
}
/* Login-Hintergrund: Großes Emblem im Hintergrund leicht entsättigen */
[data-bs-theme="dark"] .login-wrap {
  background: linear-gradient(135deg, #15110d 0%, #2a1d10 100%);
}
[data-bs-theme="dark"] .login-emblem { opacity: .14; }

/* ---------------------- Sidebar mobile: keine Spaltenumbrüche ---------------------- */
/* Bootstraps .nav nutzt flex-wrap:wrap. Bei vielen Menü-Einträgen kommen
   sie als zweite Spalte (siehe iPhone-Screenshot). nowrap zwingt vertikale
   Liste, Scrollen statt Umbruch. */
nav.sidebar .sidebar-nav,
nav.sidebar .nav.flex-column {
  flex-wrap: nowrap !important;
}
/* Offcanvas etwas breiter, damit lange Labels (Einstellungen, Textbausteine,
   Regieberichte, Bautagebuch) ohne Abkürzung lesbar sind. */
nav.sidebar { --bs-offcanvas-width: 320px; }
@media (max-width: 400px) {
  nav.sidebar { --bs-offcanvas-width: 92vw; }
}
nav.sidebar .nav-link span { white-space: nowrap; }

/* ---------------------- Sidebar Mobile FINAL: harte Block-Liste ----------------------
   Wir lassen kein Flex/Grid mehr im ul zu, sondern erzwingen eine klassische
   block-Liste. Damit ist es technisch unmöglich, dass die Punkte als zweite
   Spalte umbrechen – egal was Bootstrap später setzt. */
@media (max-width: 991.98px) {
  nav.sidebar.offcanvas,
  nav.sidebar.offcanvas-lg {
    width: 320px !important;
    max-width: 92vw !important;
  }
  nav.sidebar ul.sidebar-nav,
  nav.sidebar .sidebar-nav.nav {
    display: block !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-y: auto !important;
  }
  nav.sidebar .sidebar-nav .nav-item {
    display: block !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  nav.sidebar .sidebar-nav .nav-link {
    display: flex !important;
    width: 100% !important;
  }
}

/* ---------------------- Geburtstags-Banner ---------------------- */
.birthday-banner {
  background: rgba(230, 159, 0, .14);
  border: 1px solid rgba(230, 159, 0, .35);
  border-radius: 10px;
  padding: .65rem 1rem;
  font-size: .92rem;
  color: #2f1f14;
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem;
}
.birthday-banner .bi-cake2-fill { color: #e69f00; font-size: 1.15rem; margin-right: .3rem; }
.birthday-banner .bd-name { font-weight: 600; }
.birthday-banner .bd-today {
  background: #e69f00; color: #1d1812;
  padding: 0 .4rem; border-radius: 4px; font-weight: 700;
}
.birthday-banner .bd-soon { color: #7a5a12; font-weight: 500; }
.birthday-banner .bd-age { color: #6b6157; font-weight: 500; }
.birthday-banner .bd-sep { color: #b07b00; margin: 0 .2rem; }

[data-bs-theme="dark"] .birthday-banner {
  background: rgba(230, 159, 0, .12);
  border-color: rgba(230, 159, 0, .45);
  color: #ffe8b8;
}
[data-bs-theme="dark"] .birthday-banner .bd-name  { color: #fff3d1; }
[data-bs-theme="dark"] .birthday-banner .bd-soon  { color: #f3d68a; }
[data-bs-theme="dark"] .birthday-banner .bd-age   { color: #e8d8b3; font-weight: 600; }
[data-bs-theme="dark"] .birthday-banner .bd-today { background: #e69f00; color: #1d1812; }
[data-bs-theme="dark"] .birthday-banner .bd-sep   { color: #d6a677; }

/* text-primary im Dark Mode generell heller (Holz-hell statt -dunkel) */
[data-bs-theme="dark"] .text-primary { color: #d6a677 !important; }

/* ---------------------- Mehr Briefpapier-Durchsicht (alle Modi) ---------------------- */
[data-bs-theme="dark"] .main-area::before { opacity: 0.16 !important; filter: invert(1); }
[data-bs-theme="dark"] .card {
  background-color: rgba(40, 32, 24, .38) !important;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
[data-bs-theme="dark"] .card-header { background-color: rgba(60, 48, 36, .35) !important; }
.card {
  backdrop-filter: blur(7px) saturate(130%);
  -webkit-backdrop-filter: blur(7px) saturate(130%);
}

/* ---------------------- Variablen-Pills (Textbaustein-Editor) ---------------------- */
.var-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .4rem;
  margin-top: .5rem;
}
.var-pill {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .7rem;
  border-radius: 10px;
  background: rgba(214, 166, 119, .12);
  border: 1px solid rgba(214, 166, 119, .35);
  color: inherit;
  font-size: .85rem;
  cursor: pointer;
  text-align: left;
  transition: all .12s;
}
.var-pill:hover { background: rgba(214, 166, 119, .25); transform: translateY(-1px); }
.var-pill .var-ico {
  width: 28px; height: 28px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(184, 130, 79, .35);
  color: #5b3a20;
  flex-shrink: 0;
}
.var-pill .var-code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .78rem;
  font-weight: 600;
  color: #5b3a20;
}
.var-pill .var-desc {
  font-size: .72rem;
  color: #6b6157;
  line-height: 1.2;
  margin-top: 1px;
}
[data-bs-theme="dark"] .var-pill {
  background: rgba(214, 166, 119, .14);
  border-color: rgba(214, 166, 119, .35);
}
[data-bs-theme="dark"] .var-pill .var-ico { background: rgba(214, 166, 119, .25); color: #f3d8b5; }
[data-bs-theme="dark"] .var-pill .var-code { color: #f3d8b5; }
[data-bs-theme="dark"] .var-pill .var-desc { color: #cdbfad; }

.var-section-title {
  grid-column: 1 / -1;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: #8a7c6c; margin: .6rem 0 0;
  border-top: 1px solid rgba(184, 158, 124, .25);
  padding-top: .35rem;
}

/* ---------------------- Format-Toolbar über Textarea ---------------------- */
.fmt-toolbar {
  display: flex; gap: .25rem; padding: .25rem;
  border: 1px solid rgba(184,158,124,.35);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: rgba(255,251,244,.55);
}
[data-bs-theme="dark"] .fmt-toolbar {
  background: rgba(40,32,24,.55);
  border-color: rgba(214,166,119,.35);
}
.fmt-toolbar .fmt-btn {
  border: 0; background: transparent;
  padding: .3rem .55rem; border-radius: 6px;
  cursor: pointer; color: inherit;
  font-weight: 600;
}
.fmt-toolbar .fmt-btn:hover { background: rgba(214,166,119,.22); }
.fmt-toolbar .fmt-btn.italic { font-style: italic; font-weight: 400; }
.fmt-toolbar .fmt-btn.under { text-decoration: underline; font-weight: 400; }

.fmt-area {
  border-radius: 0 0 8px 8px !important;
}

/* ---------------------- Sticky Sidebar (Desktop) ---------------------- */
/* `position: fixed` ist zuverlässiger als sticky, weil overflow-x: hidden
   auf body sonst den Scrolling-Context kaputtmacht. Main-Area bekommt das
   gleiche Padding-Left, damit der Inhalt nicht verdeckt wird. */
@media (min-width: 992px) {
  nav.sidebar {
    position: fixed !important;
    top: 0; left: 0;
    width: 260px;
    height: 100vh;
    overflow-y: auto;
    z-index: 50;
  }
  .main-area {
    margin-left: 260px;
    width: calc(100% - 260px);
    max-width: calc(100% - 260px);
  }
  /* Wir brauchen den Flex-Layout-Anteil der Sidebar nicht mehr,
     da sie fixed positioniert ist. */
  .app-shell { display: block; min-height: 100vh; }
  .sidebar-nav { overflow-y: visible; }
}

/* ---------------------- Sanfter Parallax-Effekt ---------------------- */
/* Der Hauptinhalt scrollt minimal verzögert mit – sehr dezent, sonst nervt's. */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  .content {
    will-change: transform;
    transition: transform .08s linear;
  }
}

/* Feiertag im Kalender */
.cal-holiday { background: rgba(213, 94, 0, .08) !important; }
.cal-holiday .cal-day-num { color: #D55E00; }
[data-bs-theme="dark"] .cal-holiday { background: rgba(213, 94, 0, .14) !important; }

/* ===========================================================================
   Testumgebung-Kennzeichnung
   Wird in app/__init__.py über das Flag TEST_ENVIRONMENT=1 aktiviert.
   Body bekommt dann die Klasse .is-test-env, plus zwei Overlays:
     .test-env-watermark  → schräges "Testumgebung"-SVG, ganzflächig, tiled
     .test-env-banner     → festes Banner oben mittig
   Beide pointer-events: none → Klicks gehen durch.
   =========================================================================== */
.is-test-env .test-env-watermark {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Über normalem Seiteninhalt, aber HINTER Bootstrap-Modalen
     (Modal: 1055, Backdrop: 1050) – sonst überdeckt das schräge TESTUMGEBUNG
     den Modal-Inhalt und es sieht aus wie eingefroren. */
  z-index: 10;
  opacity: 0.10;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='300'><g transform='rotate(-22 300 150)'><text x='50%25' y='50%25' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='62' font-weight='800' fill='%23d55e00' letter-spacing='6'>TESTUMGEBUNG</text></g></svg>");
  background-repeat: repeat;
  background-position: center center;
}
.is-test-env .test-env-banner {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  /* Banner soll wirklich IMMER sichtbar sein – also über Modal (1055) UND
     dessen Backdrop (1050). 1080 reicht und kollidiert nicht mit Tooltips. */
  z-index: 1080;
  pointer-events: none;
  background: linear-gradient(90deg, #d55e00 0%, #e69f00 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  padding: .15rem 1.5rem;
  border-bottom-left-radius: .6rem;
  border-bottom-right-radius: .6rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* Sidebar (links fix bei >=992 px) bekommt zusätzlich einen orangenen
   Akzent-Balken am rechten Rand, damit auch schmale Browserfenster eindeutig
   als Testumgebung erkennbar sind. */
@media (min-width: 992px) {
  .is-test-env nav.sidebar { box-shadow: inset -3px 0 0 #d55e00; }
}
/* Topbar (mobile/tablet) bekommt eine orange Unterkante */
.is-test-env .topbar { border-bottom: 3px solid #d55e00 !important; }

/* Rename-Modal und Upload-Modal über das Test-Env-Banner heben
   (Banner ist bei z-index 1080; ohne diesen Boost würde die Banner-Schrift
    oben rechts ins Modal-Header rangucken und potentiell Klicks blockieren). */
#renameDocModal, #uploadProgressModal { z-index: 1090 !important; }
#renameDocModal ~ .modal-backdrop,
#uploadProgressModal ~ .modal-backdrop { z-index: 1085 !important; }

/* ============================================================
   Upload-Hobel-Animation (Photoreal-Stufe)
   ============================================================ */
.upload-workshop {
  position: relative;
  height: 130px;
  margin: 1.2rem 0 0.4rem;
  /* WICHTIG: Hobel darf nach oben aus dem Bild raus (Rücklauf hebt ihn an) */
  overflow: visible;
  perspective: 600px;
}
/* Werkbank-Holzplatte */
.upload-bench {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow:
    0 4px 8px rgba(0,0,0,.18),
    inset 0 2px 0 rgba(255,220,180,.25),
    inset 0 -3px 0 rgba(0,0,0,.30);
}
.upload-bench svg { display: block; width: 100%; height: 100%; }
/* Container für die Späne */
.upload-shavings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
/* Hobel selbst
   --pct (0..100) → horizontale Position
   --lift (px, meist 0 oder negativ) → vertikaler Lift für Rücklauf */
.upload-plane {
  --pct: 0;
  --lift: 0px;
  position: absolute;
  bottom: 24px;
  left: calc((100% - 130px) * var(--pct) / 100);
  width: 130px;
  z-index: 2;
  /* Werkstrich-Sitz + Lift, leicht gekippt für Lebendigkeit */
  transform: translateY(var(--lift)) rotate(-.4deg);
  will-change: transform, left;
}
/* Prozent-Label */
.upload-percent {
  position: absolute;
  left: 50%; bottom: 36px;
  transform: translateX(-50%);
  font-family: "Liberation Serif", "DejaVu Serif", Georgia, serif;
  font-weight: 800; font-size: 1.1rem;
  color: #5a3210;
  background: linear-gradient(180deg, rgba(255,251,244,.95), rgba(245,232,210,.95));
  padding: 1px 11px;
  border-radius: 999px;
  border: 1px solid rgba(122, 74, 31, .35);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  z-index: 3;
  pointer-events: none;
}
[data-bs-theme="dark"] .upload-percent {
  color: #f5e3c8;
  background: linear-gradient(180deg, rgba(40,32,24,.90), rgba(60,46,30,.90));
  border-color: rgba(214, 166, 119, .45);
}
/* Einzelner Hobelspan-Wrapper – enthält das SVG */
.upload-shaving {
  position: absolute;
  width: 26px; height: 20px;
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: shaving-fly var(--dur, 1.3s) ease-out forwards;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
.upload-shaving svg { width: 100%; height: 100%; display: block; }
@keyframes shaving-fly {
  0%   {
    transform: translate(0, 0) rotate(0deg) scale(var(--scale, 1));
    opacity: 0;
  }
  10%  { opacity: 1; }
  70%  { opacity: 1; }
  100% {
    transform: translate(var(--dx, 0), -100px)
               rotate(var(--rot, 540deg))
               scale(calc(var(--scale, 1) * .5));
    opacity: 0;
  }
}