/* App-Design (Standard)
   Weiße Navigationsleiste mit App-Menü, Kontrollleiste mit „Neu“ + Suche, weiße Formular-Sheets,
   kompakte Listen, Primärfarbe = Markenfarbe des Mandanten (Standard Pistenblau #1550B8), Akzent Petrol #017E84,
   Status als Pfeil-Leiste. Aktiv mit <html class="theme-pro">. Ohne diese Klasse greift das Grunddesign aus app.css. */

:root.theme-pro:not(.x), :root.theme-pro:not(.x)[data-theme] {
  --bg: #F9FAFB;
  --surface: #FFFFFF;
  --surface-2: #F3F4F6;
  --ink: #111827;
  --muted: #6B7280;
  --line: #D8DADD;
  --brand-ink: #FFFFFF;
  --accent2: #017E84;
  --accent2-soft: #E6F2F3;
  --side: #FFFFFF;
  --side-ink: #374151;
  --side-muted: #6B7280;
  --good: #198754; --good-soft: #D1E7DD;
  --warn: #B45309; --warn-soft: #FFF3CD;
  --bad: #D44C59; --bad-soft: #F8D7DA;
  --scan: #017E84;
  --shadow: none;
  --r: 4px;
  --f-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Noto Sans", Arial, "Helvetica Neue", sans-serif;
  color-scheme: light;
}
.theme-pro body { font-size: 14px; color: #374151; }
.theme-pro h1, .theme-pro h2, .theme-pro h3 { font-stretch: 100%; color: #111827; }
.theme-pro h1 { font-weight: 500; }
.theme-pro h2 { font-size: 1rem; font-weight: 600; }
.theme-pro .mono.big { font-family: var(--f-ui); font-size: 1.6rem; font-weight: 500; }

/* ------------------------------ Buttons --------------------------------- */
.theme-pro .btn { border-radius: 4px; min-height: 31px; padding: .3rem .75rem; font-weight: 500; font-size: .875rem; border: 1px solid transparent; background: #E7E9ED; color: #374151; }
.theme-pro .btn:hover { background: #D8DADD; border-color: transparent; }
.theme-pro .btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.theme-pro .btn.primary:hover { background: color-mix(in srgb, var(--brand) 85%, #000); border-color: color-mix(in srgb, var(--brand) 85%, #000); }
.theme-pro .btn.ghost { background: transparent; color: var(--accent2); }
.theme-pro .btn.ghost:hover { background: #F3F4F6; }
.theme-pro .btn.danger { background: #D44C59; border-color: #D44C59; color: #fff; }
.theme-pro .btn.danger.ghost { background: transparent; color: #D44C59; }
.theme-pro .btn.small { min-height: 27px; padding: .15rem .55rem; font-size: .8rem; }
.theme-pro .btn .ic { width: 15px; height: 15px; }
.theme-pro .icon-btn { border-radius: 4px; }

/* ------------------------------ Eingaben -------------------------------- */
.theme-pro input, .theme-pro select, .theme-pro textarea { border-radius: 4px; border-color: #D8DADD; min-height: 34px; }
.theme-pro input:focus, .theme-pro select:focus, .theme-pro textarea:focus { border-color: var(--accent2); box-shadow: 0 0 0 .2rem rgba(1, 126, 132, .18); }
/* Formularfelder: nur Unterstrich */
.theme-pro .grid-form input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
.theme-pro .grid-form select, .theme-pro .modal-body form > .field input, .theme-pro .modal-body form > .field select {
  border: 0; border-bottom: 1px solid #D8DADD; border-radius: 0; background: transparent; padding-left: 0; padding-right: 0;
}
.theme-pro .grid-form input:focus, .theme-pro .grid-form select:focus, .theme-pro .modal-body form > .field input:focus { box-shadow: none; border-bottom: 2px solid var(--accent2); }
.theme-pro .field > span { font-weight: 600; color: #374151; font-size: .82rem; letter-spacing: 0; }
.theme-pro :focus-visible { outline-color: rgba(1, 126, 132, .5); }

/* ------------------------------ Chips → Badges --------------------------- */
.theme-pro .chip { border-radius: 999px; font-weight: 500; font-size: .75rem; padding: .12rem .55rem; }
.theme-pro .chip.blue { background: #E6F2F3; color: #01585C; }
.theme-pro .chip.green { background: #D1E7DD; color: #0A3622; }
.theme-pro .chip.green.solid { background: #198754; color: #fff; }
.theme-pro .chip.amber { background: #FFF3CD; color: #664D03; }
.theme-pro .chip.red { background: #D44C59; color: #fff; }
.theme-pro .chip.grey { background: #E7E9ED; color: #374151; }
.theme-pro .chip.outline { border-color: #D8DADD; color: #374151; }
.theme-pro .serial { border-radius: 4px; border-style: solid; background: #F3F4F6; }
.theme-pro .inv-pill { border-radius: 999px; font-weight: 500; }
.theme-pro .inv-pill.rented { background: #E6F2F3; color: #01585C; }

/* ------------------------------- Login ----------------------------------- */
.theme-pro body.is-login { background: #F9FAFB; color: #374151; }
.theme-pro .login-brand h1 { color: #111827; font-stretch: 100%; font-weight: 600; letter-spacing: 0; }
.theme-pro .login-brand p, .theme-pro .login-demo .muted { color: #6B7280; }
.theme-pro .login-brand .ic.big { color: var(--brand); }
.theme-pro .login-demo h2 { color: #111827; }
.theme-pro .role-tile { background: #fff; border: 1px solid #D8DADD; color: #374151; border-radius: 4px; }
.theme-pro .role-tile:hover { border-color: var(--brand); transform: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.theme-pro .role-tile .ic { color: var(--brand); }
.theme-pro .role-tile b { color: #111827; font-stretch: 100%; }
.theme-pro .role-tile small { color: #6B7280; }
.theme-pro .role-tile em { color: var(--accent2); }
.theme-pro .login-form { border-radius: 4px; box-shadow: 0 2px 12px rgba(0, 0, 0, .06); }
.theme-pro .login-switches .lang-switch, .theme-pro .login-switches .theme-switch { color: #374151; }

/* ------------------- Navigationsleiste (statt Seitenleiste) --------------- */
@media (min-width: 861px) {
  .theme-pro .shell { display: flex; flex-direction: column; min-height: 100vh; }
  .theme-pro .side {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; height: 46px; width: 100%; overflow: visible;
    flex-direction: row; align-items: center; gap: 0; padding: 0 .75rem; background: #fff; color: #374151;
    border-bottom: 1px solid #D8DADD;
  }
  .theme-pro .app-grid { display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; padding: 8px; margin-right: .4rem; border-radius: 4px; cursor: default; }
  .theme-pro .app-grid i { width: 4px; height: 4px; background: #374151; border-radius: 1px; }
  .theme-pro .brand { min-height: 0; padding: 0; margin-right: .3rem; }
  .theme-pro .brand img { max-height: 26px; background: none; padding: 0; border-radius: 0; }
  .theme-pro .brand b { font-size: 1.05rem; }
  .theme-pro .brand .ic.big { width: 22px; height: 22px; color: var(--brand); }
  .theme-pro .tenant-name { display: block; text-transform: none; letter-spacing: 0; font-size: 1.05rem; font-weight: 600; color: #111827; padding: 0 1rem 0 .2rem; white-space: nowrap; }
  .theme-pro .quick { display: none; }
  .theme-pro .side nav { flex-direction: row; flex: 1; gap: 0; overflow-x: auto; scrollbar-width: none; height: 100%; align-items: stretch; }
  .theme-pro .side nav::-webkit-scrollbar { display: none; }
  .theme-pro .nav-item { border-radius: 0; padding: 0 .7rem; color: #374151; font-weight: 400; font-size: .875rem; white-space: nowrap; height: 100%; display: flex; align-items: center; border-bottom: 2px solid transparent; }
  .theme-pro .nav-item .ic { display: none; }
  .theme-pro .nav-item:hover { background: #F3F4F6; }
  .theme-pro .nav-item.active { background: #F3F4F6; color: #111827; font-weight: 500; border-bottom-color: var(--brand); }
  .theme-pro .me { border-top: 0; padding: 0 0 0 .6rem; gap: .45rem; }
  .theme-pro .me > .ic { display: none; }
  .theme-pro .me div { display: none; }
  .theme-pro .avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 4px; background: color-mix(in srgb, var(--brand) 70%, #fff); color: #fff; font-weight: 600; font-size: .85rem; }
  .theme-pro .side-switches { margin: 0 0 0 .4rem; flex-wrap: nowrap; }
  .theme-pro .side-switches .lang-switch, .theme-pro .side-switches .theme-switch { background: #F3F4F6; }
  .theme-pro .main { flex: 1; }
}

/* ----------------------- Kontrollleiste (Control Panel) ------------------- */
.theme-pro .top { background: #fff; backdrop-filter: none; border-bottom: 1px solid #D8DADD; padding: .55rem 1rem; gap: .75rem; top: 46px; }
.theme-pro .cp-new { display: inline-flex; gap: .3rem; }
.theme-pro .top h1 { font-size: 1.15rem; font-weight: 500; color: #111827; }
.theme-pro .top h1 .mono { font-family: var(--f-ui); }
.theme-pro .top-scan { border-radius: 4px; border-color: #D8DADD; max-width: 460px; padding-left: .6rem; }
.theme-pro .top-scan:focus-within { border-color: var(--accent2); box-shadow: 0 0 0 .2rem rgba(1, 126, 132, .15); }
.theme-pro .loc-select select { border-radius: 4px; }
@media (max-width: 860px) {
  .theme-pro .side { background: #fff; color: #374151; border-right: 1px solid #D8DADD; }
  .theme-pro .nav-item { color: #374151; }
  .theme-pro .nav-item:hover { background: #F3F4F6; color: #111827; }
  .theme-pro .nav-item.active, .theme-pro .nav-item.active:hover { background: var(--brand-soft); color: var(--brand); }
  .theme-pro .nav-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
  .theme-pro .side.open { box-shadow: 12px 0 40px rgba(17, 24, 39, .18); }
  .theme-pro .top { top: 0; }
  .theme-pro .quick .btn:not(.primary) { background: #E7E9ED; color: #374151; border-color: transparent; }
  .theme-pro .me { border-top-color: #D8DADD; }
}

/* ------------------------------ Seite / Karten --------------------------- */
.theme-pro .page { padding: 1rem 1.25rem 3rem; gap: .9rem; }
.theme-pro .card { border-radius: 4px; box-shadow: none; border-color: #D8DADD; }
.theme-pro .kpi { border-radius: 4px; box-shadow: none; border-color: #D8DADD; }
.theme-pro .kpi b { font-stretch: 100%; font-weight: 600; font-size: 1.5rem; }
.theme-pro .kpi:hover:not(.static) { border-color: var(--brand); }
.theme-pro .kpi.blue b { color: var(--accent2); }
.theme-pro .toolbar .search { border-radius: 4px; }
.theme-pro .room-card, .theme-pro .tenant-card { border-radius: 4px; box-shadow: none; }
.theme-pro .rc-room { color: var(--brand); }

/* ------------------------------- Listen ---------------------------------- */
.theme-pro .tbl { font-size: .875rem; }
.theme-pro .tbl th { text-transform: none; letter-spacing: 0; font-size: .875rem; font-weight: 600; color: #111827; background: #fff; border-bottom: 1px solid #D8DADD; padding: .5rem .6rem; }
.theme-pro .tbl td { padding: .4rem .6rem; border-bottom: 1px solid #E7E9ED; }
.theme-pro .tbl.click tbody tr:hover { background: #F3F4F6; }
.theme-pro .row-late td { background: #FCEDEE; color: #9B2C35; }
.theme-pro .table-wrap { border-radius: 0; }

/* --------------------------- Formular-Sheet (Auftrag) --------------------- */
.theme-pro .statusbar { display: flex; align-self: flex-end; margin-bottom: -.4rem; }
.theme-pro .statusbar span {
  position: relative; padding: .38rem .9rem .38rem 1.35rem; background: #fff; color: #6B7280; font-size: .82rem; font-weight: 500;
  border: 1px solid #D8DADD; border-left: 0; margin-left: -1px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
}
.theme-pro .statusbar span:first-child { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); border-left: 1px solid #D8DADD; border-radius: 4px 0 0 4px; padding-left: .9rem; }
.theme-pro .statusbar span.current { background: #E6F2F3; color: #01585C; font-weight: 600; }
.theme-pro .order-top { position: relative; overflow: hidden; padding: 1.25rem 1.5rem; }
.theme-pro .ribbon { display: block; position: absolute; top: 0; right: 0; width: 120px; height: 120px; overflow: hidden; pointer-events: none; }
.theme-pro .ribbon span { position: absolute; top: 24px; right: -34px; width: 160px; transform: rotate(45deg); text-align: center; background: #198754; color: #fff; font-weight: 600; font-size: .78rem; padding: .25rem 0; text-transform: uppercase; letter-spacing: .04em; }
.theme-pro .ribbon.grey span { background: #6B7280; }
.theme-pro .order-top .ot-qr { margin-right: 46px; }
.theme-pro .ot-facts small { text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 600; color: #374151; }
.theme-pro .ot-facts b { font-weight: 400; color: #111827; }
.theme-pro .room-fact b { font-family: var(--f-ui); font-weight: 600 !important; color: var(--brand); }
.theme-pro .doc-bar { gap: .35rem; }
.theme-pro .pnum { border-radius: 4px; background: var(--brand-soft); color: var(--brand); }
.theme-pro .it-ic { border-radius: 4px; }
.theme-pro .totals .total { color: #111827; }
.theme-pro .history li { border-left-color: #E7E9ED; }
.theme-pro .label-banner { border-radius: 4px; background: #FFF3CD; border-color: #FFE69C; }
.theme-pro .chg { border-left-color: var(--brand); background: var(--brand-soft); }

/* ------------------------------- Modale ---------------------------------- */
.theme-pro .modal { border-radius: 4px; }
.theme-pro .modal header { padding: .75rem 1rem; }
.theme-pro .modal header h2 { font-size: 1.1rem; font-weight: 500; }
.theme-pro .modal footer { justify-content: flex-end; flex-direction: row-reverse; padding: .75rem 1rem; }
.theme-pro .modal footer .btn.primary { order: 0; }
.theme-pro .modal footer .danger.ghost { margin-right: 0; margin-left: auto; }
.theme-pro .toast { border-radius: 4px; }

/* ------------------------------- Handheld -------------------------------- */
.theme-pro .hh-top { background: var(--brand); color: #fff; }
.theme-pro .hh-top small { color: rgba(255, 255, 255, .75); }
.theme-pro .hh-top .lang-switch { color: #fff; }
.theme-pro .hh-mode { border-radius: 4px; }
.theme-pro .hh-mode.active { background: var(--brand); border-color: var(--brand); }
.theme-pro .hh-scan input { border-radius: 4px; }
.theme-pro .hh-order { background: var(--brand-soft); color: #374151; border-radius: 4px; }
.theme-pro .hh-order small { color: #6B7280; }
.theme-pro .hh-order .mono { color: var(--brand); }
.theme-pro .hh-card, .theme-pro .hh-line, .theme-pro .hh-wait-row, .theme-pro .hh-ret, .theme-pro .hh-hint, .theme-pro .hh-pick { border-radius: 4px; }
.theme-pro .hh-line.next { border-color: var(--accent2); background: #E6F2F3; }
.theme-pro .hh-msg { border-radius: 4px; }
.theme-pro .hh-person { border-radius: 4px; }
.theme-pro .hh-person.active { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.theme-pro .zp-result { border-radius: 4px; border-color: var(--accent2); background: #E6F2F3; }
.theme-pro .zp-result small { color: #01585C; }

/* ------------------------------- Check-In -------------------------------- */
.theme-pro .k-top { border-bottom-color: #D8DADD; }
.theme-pro .k-sec h1, .theme-pro .k-welcome h1 { font-stretch: 100%; font-weight: 600; }
.theme-pro .k-day, .theme-pro .k-tile, .theme-pro .k-lang, .theme-pro .k-person, .theme-pro .k-ptab, .theme-pro .k-sum-p, .theme-pro .k-sum-head div, .theme-pro .k-accept, .theme-pro .k-billing, .theme-pro .k-done-qr { border-radius: 8px; }
.theme-pro .k-day b { font-stretch: 100%; font-weight: 600; }
.theme-pro .k-tile-ic { color: var(--brand); border-radius: 8px; }
.theme-pro .k-tile.sel { background: var(--brand-soft); }
.theme-pro .k-nav .btn { border-radius: 8px; }
.theme-pro .k-steps li.done span { background: var(--accent2); }

/* ------------------------- Auswertungen / Sonstiges ----------------------- */
.theme-pro .chart .bar-r { fill: var(--brand); }
.theme-pro .chart .bar-s { fill: #017E84; }
.theme-pro .sw.r { background: var(--brand); }
.theme-pro .sw.s { background: #017E84; }
.theme-pro .hbar i { background: linear-gradient(90deg, var(--brand) var(--w), #F3F4F6 var(--w)); }
.theme-pro .hbar.util i { background: linear-gradient(90deg, #017E84 var(--w), #F3F4F6 var(--w)); }
.theme-pro .progress i { background: #017E84; }
.theme-pro #pv-switch { background: var(--brand); color: #fff; }

/* Navigationsleiste kompakter, damit alle Menüs Platz haben */
@media (min-width: 861px) {
  .theme-pro .brand { display: none; }
  .theme-pro .nav-item { padding: 0 .55rem; }
  .theme-pro .side-switches .lang-switch button { font-size: 0; gap: 0; padding: .25rem .4rem; }
  .theme-pro .side-switches .lang-switch svg { width: 18px; height: 12px; }
  .theme-pro .side-switches .theme-switch button { padding: .2rem .45rem; font-size: .7rem; }
}
.theme-pro #pv-switch { top: auto; bottom: 0; border-radius: 6px 6px 0 0 !important; }