/* Listen-spezifische Stile — 1:1 aus Klaudias bookings-list.html */
.toolbar { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--gray-100); flex-wrap:wrap; }
.pager { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-top:1px solid var(--gray-100); font-size:var(--text-sm); color:var(--gray-500); }
.pager .btns { margin-left:auto; display:flex; gap:var(--space-1); }
.pager .pg { width:30px; height:30px; display:grid; place-items:center; border-radius:var(--radius-sm); border:1px solid var(--gray-200); background:var(--gray-0); color:var(--gray-600); cursor:pointer; font-size:var(--text-sm); }
.pager .pg.on { background:var(--brand-700); color:#fff; border-color:var(--brand-700); }
.pager .pg:hover:not(.on) { border-color:var(--gray-300); }
.src { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-sm); color:var(--gray-600); }
.src .d { width:7px; height:7px; border-radius:50%; }
.src.direkt .d { background:var(--gray-400); }
.src.affiliate .d { background:var(--tenant-tauernstays); }
.demo-flag { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-xs); font-weight:var(--fw-semibold); color:var(--warning-ink); background:var(--warning-50); border:1px solid color-mix(in srgb, var(--warning-500) 30%, transparent); padding:4px 10px; border-radius:var(--radius-pill); }

/* === Dashboard (Variante A) — 1:1 aus Klaudias dashboard-a.html === */
.kpi-strip { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:var(--space-4); margin-bottom:var(--space-6); }
.kpi-tile { background:var(--gray-0); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-xs); display:flex; flex-direction:column; gap:var(--space-3); }
a.kpi-tile--link { text-decoration:none; color:inherit; cursor:pointer; transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
a.kpi-tile--link:hover { border-color:var(--brand-400); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
a.kpi-tile--link:focus-visible { outline:2px solid var(--brand-500); outline-offset:2px; }
a.kpi-tile--link .top .ic { color:var(--brand-500); background:var(--brand-50); }
.kpi-tile .top { display:flex; align-items:center; justify-content:space-between; }
.kpi-tile .ic { width:34px; height:34px; border-radius:var(--radius-sm); background:var(--gray-50); display:grid; place-items:center; color:var(--gray-500); }
.brand-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(248px,1fr)); gap:var(--space-4); margin-bottom:var(--space-6); }
.brand-card { background:var(--gray-0); border:1px solid var(--gray-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); overflow:hidden; }
.brand-card__top { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--gray-100); }
.brand-card__accent { width:4px; align-self:stretch; border-radius:3px; }
.brand-card__name { font-size:var(--text-lg); font-weight:var(--fw-bold); color:var(--gray-900); }
.brand-card__host { font-size:var(--text-xs); color:var(--gray-400); font-family:var(--font-mono); }
.brand-card__body { padding:var(--space-5); }
.mini-kpis { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4) var(--space-5); }
.mini-kpi .v { font-size:var(--text-2xl); font-weight:var(--fw-bold); color:var(--gray-900); font-family:var(--font-mono); letter-spacing:-0.02em; line-height:1; }
.mini-kpi .l { font-size:var(--text-sm); color:var(--gray-500); margin-top:5px; }
.bar { height:6px; border-radius:3px; background:var(--gray-100); overflow:hidden; margin-top:var(--space-4); }
.bar > i { display:block; height:100%; border-radius:3px; }
.brand-card__foot { display:flex; align-items:center; padding:var(--space-3) var(--space-5); border-top:1px solid var(--gray-100); background:var(--gray-25); }
.brand-card__foot a { margin-left:auto; font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--gray-700); display:inline-flex; align-items:center; gap:5px; }
.brand-card__foot a:hover { color:var(--accent-600); }
.split { display:grid; grid-template-columns:1.6fr 1fr; gap:var(--space-4); align-items:start; }
.quick { display:flex; flex-direction:column; gap:var(--space-1); }
.quick a { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); border-radius:var(--radius-sm); color:var(--gray-700); font-weight:var(--fw-medium); }
.quick a:hover { background:var(--gray-25); }
.quick a .ic { width:32px; height:32px; border-radius:var(--radius-sm); background:var(--gray-50); display:grid; place-items:center; color:var(--gray-500); }
.quick a .ct { margin-left:auto; font-family:var(--font-mono); font-size:var(--text-sm); color:var(--gray-400); }

/* === Accounts-Liste — 1:1 aus Klaudias accounts-list.html === */
.org-cell { display:flex; align-items:center; gap:var(--space-3); }
.org-ic { width:32px; height:32px; border-radius:var(--radius-sm); display:grid; place-items:center; font-size:var(--text-xs); font-weight:var(--fw-bold); color:#fff; flex:0 0 auto; }
.roles-cell { display:flex; gap:5px; flex-wrap:wrap; }
/* zusätzliche Rolle reiseveranstalter (nicht in Klaudias Set) — Brand-Tönung, konsistent */
.badge--role-reiseveranstalter { background:var(--brand-50); color:var(--brand-700); border-color:color-mix(in srgb, var(--brand-500) 32%, transparent); }

/* ============================================================
   Detail-Seiten (Person-360 + Account-Detail)
   1:1 aus Klaudias person-360.html + account-detail.html (Inline-<style>)
   ============================================================ */
.detail-head { display:flex; gap:var(--space-5); align-items:flex-start; background:var(--gray-0); border:1px solid var(--gray-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); padding:var(--space-6); margin-bottom:var(--space-5); }
.detail-head__main { flex:1; min-width:0; }
.detail-head__name { font-size:var(--text-2xl); font-weight:var(--fw-bold); color:var(--gray-900); letter-spacing:var(--tracking-tight); }
.detail-head__meta { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3); }
.detail-head__sub { color:var(--gray-500); font-size:var(--text-sm); margin-top:var(--space-2); display:flex; gap:var(--space-4); flex-wrap:wrap; }
.detail-head__sub span { display:inline-flex; align-items:center; gap:6px; }
.detail-head__actions { display:flex; gap:var(--space-2); }
.body-grid { display:grid; grid-template-columns:1fr 332px; gap:var(--space-5); align-items:start; }
.stack { display:flex; flex-direction:column; gap:var(--space-5); }

/* Person-360 */
.person-ava { width:64px; height:64px; border-radius:50%; background:#7a8a55; color:#fff; display:grid; place-items:center; font-size:var(--text-2xl); font-weight:var(--fw-bold); flex:0 0 auto; }
.world-label { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3); }
.world-label .tag { font-size:var(--text-xs); font-weight:var(--fw-bold); letter-spacing:var(--tracking-label); text-transform:uppercase; padding:3px 10px; border-radius:var(--radius-pill); }
.world-label .tag.b2b { background:var(--info-50); color:var(--info-ink); }
.world-label .tag.b2c { background:#efeaf6; color:#4a3a6b; }
.world-label .ln { flex:1; height:1px; background:var(--gray-200); }
.rel-row { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) 0; border-bottom:1px solid var(--gray-100); }
.rel-row:last-child { border-bottom:0; }
.rel-row .org-ic { width:38px; height:38px; border-radius:var(--radius-sm); background:var(--brand-700); color:#fff; display:grid; place-items:center; font-size:var(--text-sm); font-weight:var(--fw-bold); flex:0 0 auto; }
.rel-row .meta { min-width:0; }
.rel-row .nm { font-weight:var(--fw-semibold); color:var(--gray-900); }
.rel-row .fn { font-size:var(--text-sm); color:var(--gray-500); }
.rel-row .roles { margin-left:auto; display:flex; gap:6px; align-items:center; }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--gray-100); border-radius:var(--radius-md); overflow:hidden; }
.stat-grid .cell { background:var(--gray-0); padding:var(--space-4); }
.stat-grid .cell .v { font-size:var(--text-2xl); font-weight:var(--fw-bold); font-family:var(--font-mono); color:var(--gray-900); letter-spacing:-0.02em; line-height:1; }
.stat-grid .cell .l { font-size:var(--text-sm); color:var(--gray-500); margin-top:5px; }

/* Account-Detail */
.org-logo { width:64px; height:64px; border-radius:var(--radius-md); background:var(--brand-700); color:#fff; display:grid; place-items:center; font-size:var(--text-2xl); font-weight:var(--fw-bold); flex:0 0 auto; letter-spacing:-0.02em; }
.person-row { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) 0; border-bottom:1px solid var(--gray-100); }
.person-row:last-child { border-bottom:0; }
.person-row .meta { min-width:0; }
.person-row .nm { font-weight:var(--fw-semibold); color:var(--gray-900); font-size:var(--text-base); }
.person-row .fn { font-size:var(--text-sm); color:var(--gray-500); }
.person-row .contact { margin-left:auto; text-align:right; font-size:var(--text-sm); color:var(--gray-500); display:flex; flex-direction:column; gap:2px; }
.person-row .contact a { color:var(--gray-600); }
.role-block { display:flex; flex-direction:column; gap:var(--space-3); }
.role-line { display:flex; align-items:flex-start; gap:var(--space-3); }
.role-line .badge { margin-top:1px; }
.role-line .desc { font-size:var(--text-sm); color:var(--gray-500); }

/* ============================================================
   Tenant-Einzelsicht — Wegweiser (neutrale Hülle bleibt)
   1:1 Logik aus Klaudias tauernbreeze-admin.html + STYLEGUIDE §6
   ============================================================ */
.header--tenant { border-top-width:3px; border-top-style:solid; }   /* Farbe via inline var(--tenant-X) */
.scope-locked { border-left-width:3px; border-left-style:solid; }    /* Farbe via inline var(--tenant-X) */
.lock-badge { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--gray-600); background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius-sm); padding:6px var(--space-3); }

/* Tenant-Switcher (Dropdown im Header, JS-frei via <details>) */
.tenant-menu { position:relative; }
.tenant-menu > summary { list-style:none; cursor:pointer; }
.tenant-menu > summary::-webkit-details-marker { display:none; }
.tenant-menu[open] > summary { background:var(--gray-50); }
.tenant-menu__panel { position:absolute; top:calc(100% + 6px); right:0; z-index:40; min-width:220px; background:var(--gray-0); border:1px solid var(--gray-200); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:var(--space-2); display:flex; flex-direction:column; gap:2px; }
.tenant-menu__panel a { display:flex; align-items:center; gap:var(--space-3); padding:8px var(--space-3); border-radius:var(--radius-sm); font-size:var(--text-sm); color:var(--gray-700); text-decoration:none; }
.tenant-menu__panel a:hover { background:var(--gray-50); }
.tenant-menu__panel a.is-active { background:var(--gray-50); font-weight:var(--fw-semibold); color:var(--gray-900); }
.tenant-menu__panel .sw-dot { width:10px; height:10px; border-radius:3px; flex:0 0 auto; }

/* Sicht-Umschalter in der Sidebar (JS-frei via <details>) — gleiche Logik wie Header */
.sidebar__scope-menu { position:relative; }
.sidebar__scope-menu > summary { list-style:none; cursor:pointer; }
.sidebar__scope-menu > summary::-webkit-details-marker { display:none; }
.sidebar__scope-menu > summary:hover { background:rgba(255,255,255,.07); }
.sidebar__scope-menu[open] .chev { transform:rotate(180deg); }
.sidebar__scope-menu .chev { transition:transform .15s ease; }
.sidebar__scope-panel { position:absolute; left:var(--space-4); right:var(--space-4); top:calc(100% + 2px); z-index:50; background:var(--gray-0); border:1px solid var(--gray-200); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:var(--space-2); display:flex; flex-direction:column; gap:2px; }
.sidebar__scope-panel a { display:flex; align-items:center; gap:var(--space-3); padding:8px var(--space-3); border-radius:var(--radius-sm); font-size:var(--text-sm); color:var(--gray-700); text-decoration:none; }
.sidebar__scope-panel a:hover { background:var(--gray-50); }
.sidebar__scope-panel a.is-active { background:var(--gray-50); font-weight:var(--fw-semibold); color:var(--gray-900); }
.sidebar__scope-panel .sw-dot { width:10px; height:10px; border-radius:3px; flex:0 0 auto; }

/* Zeilen-Aktionsmenü (... -> Bearbeiten/Löschen), JS-frei via <details> */
.row-menu { position:relative; display:inline-block; }
.row-menu > summary { list-style:none; cursor:pointer; }
.row-menu > summary::-webkit-details-marker { display:none; }
.row-menu__panel { position:absolute; top:calc(100% + 4px); right:0; z-index:40; min-width:150px; background:var(--gray-0); border:1px solid var(--gray-200); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:var(--space-2); display:flex; flex-direction:column; gap:2px; text-align:left; }
.row-menu__panel a, .row-menu__panel button { display:flex; align-items:center; gap:var(--space-2); width:100%; padding:8px var(--space-3); border:none; background:none; border-radius:var(--radius-sm); font-size:var(--text-sm); color:var(--gray-700); text-decoration:none; cursor:pointer; font:inherit; }
.row-menu__panel a:hover, .row-menu__panel button:hover { background:var(--gray-50); }
.row-menu__danger { color:var(--danger-600) !important; }
.row-menu__danger:hover { background:var(--danger-50) !important; }

/* Inline-Add (Person verknüpfen / Rolle hinzufügen) — <details> klappt Formular auf */
.inline-add > summary { list-style:none; cursor:pointer; }
.inline-add > summary::-webkit-details-marker { display:none; }
.inline-add__panel { margin-top:var(--space-3); padding:var(--space-3); background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius-md); }

/* Filter-Dropdown (Branche/Typ/Quelle-Chips) — JS-frei via <details> */
.filter-menu { position:relative; display:inline-block; }
.filter-menu > summary { list-style:none; cursor:pointer; }
.filter-menu > summary::-webkit-details-marker { display:none; }
.filter-menu__panel { position:absolute; top:calc(100% + 4px); left:0; z-index:40; min-width:180px; max-height:300px; overflow:auto; background:var(--gray-0); border:1px solid var(--gray-200); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:var(--space-2); display:flex; flex-direction:column; gap:2px; }
.filter-menu__panel a { display:block; padding:7px var(--space-3); border-radius:var(--radius-sm); font-size:var(--text-sm); color:var(--gray-700); text-decoration:none; white-space:nowrap; }
.filter-menu__panel a:hover { background:var(--gray-50); }
.filter-menu__panel a.is-active { background:var(--gray-50); font-weight:var(--fw-semibold); color:var(--gray-900); }

/* Detail-Definitionslisten: lange Werte (E-Mail) umbrechen statt überlaufen */
.dl dd { min-width:0; overflow-wrap:anywhere; }

/* Marken-Ident im Header (Einzelsicht) — 1:1 aus Klaudias tauernbreeze-admin.html */
.tenant-ident { display:flex; align-items:center; gap:var(--space-3); }
.tenant-ident .tdot { width:11px; height:11px; border-radius:3px; flex:0 0 auto; }
.tenant-ident .tname { font-size:var(--text-md); font-weight:var(--fw-bold); color:var(--gray-900); }
.tenant-ident .thost { font-size:var(--text-xs); color:var(--gray-400); font-family:var(--font-mono); }

/* Flash-Messages + Workflow-Formular (Phase 2a) */
.flash { padding:10px 14px; border-radius:var(--radius-md); margin-bottom:var(--space-4); font-size:var(--text-sm); border:1px solid; }
.flash--ok { background:var(--success-50); border-color:color-mix(in srgb, var(--success-500) 35%, transparent); color:var(--gray-900); }
.flash--error { background:var(--warning-50); border-color:color-mix(in srgb, var(--warning-500) 40%, transparent); color:var(--gray-900); }
.wf-textarea { width:100%; font:inherit; font-size:var(--text-sm); padding:8px 10px; border:1px solid var(--gray-200); border-radius:var(--radius-sm); resize:vertical; box-sizing:border-box; color:var(--gray-900); background:var(--gray-0); }
.wf-textarea:focus { outline:none; border-color:var(--brand-500); }

/* ================================================================
   HOTEL-SONNE-DEMO-VERTIKALE (fiktiver B2B-Showcase)
   ================================================================ */
:root { --tenant-hotel_sonne: #d98c1f; }   /* Sonnen-Amber (Demo-Marke) */
.t-hotel_sonne .t-dot { background: var(--tenant-hotel_sonne); }

/* Demo-Daten-Badge auf KPI-Kacheln */
.demo-badge {
  display:inline-flex; align-items:center; gap:5px; font-size:var(--text-2xs);
  font-weight:var(--fw-semibold); letter-spacing:.04em; text-transform:uppercase;
  padding:2px 7px; border-radius:var(--radius-pill);
  background:var(--accent-50); color:var(--accent-700);
  border:1px solid color-mix(in srgb, var(--accent-500) 30%, transparent);
}

/* Wissen-Inventar: Herkunft-Spalte dezent */
.wissen-herkunft { color:var(--gray-500); font-size:var(--text-sm); }

/* Operator-Copilot — Chat-Panel */
.copilot { display:flex; flex-direction:column; height:calc(100vh - 200px); min-height:420px;
  background:var(--gray-0); border:1px solid var(--gray-200); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs); overflow:hidden; }
.copilot__log { flex:1; overflow-y:auto; padding:var(--space-5); display:flex;
  flex-direction:column; gap:var(--space-4); }
.copilot__msg { max-width:78%; padding:10px 14px; border-radius:var(--radius-md);
  font-size:var(--text-base); line-height:1.5; white-space:pre-wrap; }
.copilot__msg--user { align-self:flex-end; background:var(--brand-500); color:#fff;
  border-bottom-right-radius:4px; }
.copilot__msg--bot { align-self:flex-start; background:var(--gray-50);
  border:1px solid var(--gray-200); color:var(--gray-900); border-bottom-left-radius:4px; }
.copilot__msg--err { align-self:flex-start; background:var(--warning-50);
  border:1px solid color-mix(in srgb, var(--warning-500) 40%, transparent); color:var(--gray-900); }
.copilot__form { display:flex; gap:var(--space-3); padding:var(--space-4);
  border-top:1px solid var(--gray-200); background:var(--gray-50); }
.copilot__form input { flex:1; font:inherit; font-size:var(--text-base); padding:10px 14px;
  border:1px solid var(--gray-200); border-radius:var(--radius-md);
  background:var(--gray-0); color:var(--gray-900); }
.copilot__form input:focus { outline:none; border-color:var(--accent-400);
  box-shadow:var(--ring-accent); }