/* ------------------------------------------------------------------
   Brand palette (derived from #ffc6d3, hue 346°). Contrast-checked:
   brand-600 on white 6.5:1, brand-300 on dark body 7.8:1.
   ------------------------------------------------------------------ */
:root {
  --brand-50: #fff0f3;  --brand-100: #ffe0e8; --brand-200: #ffc6d3; --brand-300: #fa9eb4;
  --brand-400: #e96382; --brand-500: #cf3055; --brand-600: #b22445; --brand-700: #921c37;
  --brand-800: #71142a; --brand-900: #4e0e1d;
}
:root, [data-bs-theme=light] {
  --brand: var(--brand-600); --brand-hover: var(--brand-700); --brand-strong: var(--brand-800);
  --brand-accent: var(--brand-200); --brand-soft: var(--brand-50); --brand-on: #fff;
  --bs-primary: var(--brand-600); --bs-primary-rgb: 178, 36, 69;
  --bs-link-color: var(--brand-600); --bs-link-color-rgb: 178, 36, 69;
  --bs-link-hover-color: var(--brand-800); --bs-link-hover-color-rgb: 113, 20, 42;
  --bs-primary-bg-subtle: var(--brand-50); --bs-primary-border-subtle: var(--brand-200);
  --bs-primary-text-emphasis: var(--brand-800);
  --bs-focus-ring-color: rgba(178, 36, 69, .25);
}
[data-bs-theme=dark] {
  --brand: var(--brand-500); --brand-hover: var(--brand-400); --brand-strong: var(--brand-300);
  --brand-accent: rgba(250, 158, 180, .25); --brand-soft: rgba(250, 158, 180, .08); --brand-on: #fff;
  --bs-primary: var(--brand-400); --bs-primary-rgb: 233, 99, 130;
  --bs-link-color: var(--brand-300); --bs-link-color-rgb: 250, 158, 180;
  --bs-link-hover-color: var(--brand-200); --bs-link-hover-color-rgb: 255, 198, 211;
  --bs-primary-bg-subtle: rgba(250, 158, 180, .12); --bs-primary-border-subtle: var(--brand-700);
  --bs-primary-text-emphasis: var(--brand-300);
  --bs-focus-ring-color: rgba(233, 99, 130, .3);
}
.btn-primary {
  --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-color: var(--brand-on);
  --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover); --bs-btn-hover-color: var(--brand-on);
  --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover); --bs-btn-active-color: var(--brand-on);
  --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-link-color); --bs-btn-border-color: var(--brand-300);
  --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-hover-color: var(--brand-on);
  --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover); --bs-btn-active-color: var(--brand-on);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand); --bs-nav-link-color: var(--bs-link-color); --bs-nav-link-hover-color: var(--bs-link-hover-color); }
.nav-tabs { --bs-nav-link-color: var(--bs-link-color); --bs-nav-link-hover-color: var(--bs-link-hover-color); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--brand-300); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.page-link { --bs-pagination-color: var(--bs-link-color); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); }
.bg-brand { background: var(--brand) !important; color: var(--brand-on) !important; }
.bg-brand-subtle { background: var(--brand-accent) !important; color: var(--bs-primary-text-emphasis) !important; }
.text-brand { color: var(--brand-strong) !important; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, .brand-heading { color: var(--brand-strong); }
.login-bg { background: linear-gradient(160deg, var(--brand-soft), var(--bs-tertiary-bg) 60%); }

body { background: var(--bs-tertiary-bg); }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.list-group-item .badge, .d-flex > .badge { align-self: center; }

/* Header: brand bar + horizontal tabs */
.app-header { background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); }
.app-bar { display: flex; align-items: center; gap: 1rem; min-height: 56px; }
.app-brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: 1.05rem; color: var(--brand-strong); text-decoration: none; white-space: nowrap; }
.app-brand:hover { color: var(--brand-strong); }
.app-search { position: relative; align-items: center; flex: 0 1 380px; margin-left: 1rem; }
.app-search i { position: absolute; left: .65rem; color: var(--bs-secondary-color); font-size: .85rem; }
.app-search input { padding-left: 2rem; border-radius: 2rem; background: var(--bs-tertiary-bg); }
.btn-icon { border: 0; font-size: 1.25rem; color: var(--bs-secondary-color); padding: .25rem .5rem; }
.btn-icon:hover, .btn-icon:focus-visible { color: var(--brand); background: var(--brand-soft); }
.badge-corner { position: absolute; top: 0; right: 0; font-size: .62rem; transform: translate(10%, -10%); }
.app-tabs { border-top: 1px solid var(--bs-border-color-translucent); }
.app-tabs .container-fluid { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.app-tabs .container-fluid::-webkit-scrollbar { display: none; }
.app-tab { flex: 0 0 auto; padding: .6rem .85rem .5rem; color: var(--bs-body-color); text-decoration: none; font-size: .92rem; border-bottom: 3px solid transparent; white-space: nowrap; }
.app-tab:hover { color: var(--brand); background: var(--brand-soft); }
.app-tab.active { color: var(--brand-strong); font-weight: 600; border-bottom-color: var(--brand); background: var(--brand-soft); }
.app-main { min-width: 0; }
.card { border-color: var(--bs-border-color-translucent); }
.row-link { cursor: pointer; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .15rem .75rem; max-height: 220px; overflow-y: auto; }
.sticky-actions { position: sticky; bottom: 0; background: var(--bs-body-bg); padding: .75rem 0 .25rem; }
.stat { font-size: 1.35rem; font-weight: 600; }
.stat-label { font-size: .78rem; color: var(--bs-secondary-color); }

/* Stacked tables on small screens */
@media (max-width: 767.98px) {
  .responsive-table thead { display: none; }
  .responsive-table tr { display: block; border-bottom: 1px solid var(--bs-border-color); padding: .5rem .25rem; }
  .responsive-table td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .2rem .5rem; text-align: right; }
  .responsive-table td::before { content: attr(data-label); color: var(--bs-secondary-color); text-align: left; font-size: .85rem; }
  .responsive-table td:first-child { font-size: 1.05rem; text-align: left; }
  .responsive-table td:first-child::before { content: none; }
}

/* Kanban */
.kanban { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .75rem; scroll-snap-type: x proximity; }
.kanban-col { flex: 0 0 280px; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: .5rem; display: flex; flex-direction: column; max-height: calc(100vh - 230px); scroll-snap-align: start; }
@media (max-width: 575.98px) { .kanban-col { flex-basis: 85vw; } }
.kanban-col header { position: relative; padding: .6rem .75rem; border-bottom: 3px solid var(--col-color, #999); }
/* the coloured line under each phase flows like the journey connections */
.kanban-col header::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-3px + .7px); height: 1.6px; pointer-events: none; opacity: .85;
  background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 16px); background-size: 16px 100%; animation: kanban-flow 1.6s linear infinite; }
@keyframes kanban-flow { to { background-position: 32px 0; } }
@media (prefers-reduced-motion: reduce) { .kanban-col header::after { animation: none; } }
.kanban-items { padding: .5rem; overflow-y: auto; flex: 1; min-height: 80px; }
.kanban-items.drag-over { background: var(--bs-primary-bg-subtle); }
.kanban-card { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: .4rem; padding: .55rem .65rem; margin-bottom: .5rem; cursor: grab; }
.kanban-card:active { cursor: grabbing; }
.kanban-card a { color: inherit; text-decoration: none; }

/* Budget bar */
.budget-bar { height: 14px; border-radius: 7px; background: var(--bs-secondary-bg); overflow: hidden; display: flex; }
.budget-bar .committed { background: var(--bs-success); }
.budget-bar .forecast { background: repeating-linear-gradient(45deg, var(--bs-warning), var(--bs-warning) 6px, rgba(255,193,7,.6) 6px, rgba(255,193,7,.6) 12px); }

/* Timetable */
.timetable-wrap { overflow-x: auto; }
.timetable { display: grid; grid-template-columns: 56px repeat(var(--stages), minmax(170px, 1fr)); min-width: calc(56px + var(--stages) * 170px); }
.tt-head { position: sticky; top: 0; z-index: 3; background: var(--bs-body-bg); padding: .5rem; font-weight: 600; border-bottom: 1px solid var(--bs-border-color); text-align: center; }
.tt-col, .tt-hours { position: relative; border-left: 1px solid var(--bs-border-color-translucent); margin: .75rem 0; }
.tt-hours .tt-hour { position: absolute; right: 6px; font-size: .72rem; color: var(--bs-secondary-color); transform: translateY(-50%); }
.tt-gridline { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--bs-border-color-translucent); }
.tt-block { position: absolute; left: 4px; right: 4px; border-radius: .35rem; padding: 2px 6px; font-size: .78rem; overflow: hidden; line-height: 1.2; }
.tt-slot { color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); z-index: 2; }
.tt-slot a { color: #fff; text-decoration: none; }
.tt-slot.conflict { outline: 2px solid var(--bs-warning); }
/* overlapping slots of a stage side by side (lanes) */
.tt-slot, .tt-changeover { left: calc(var(--lane, 0) * 100% / var(--lanes, 1) + 4px); right: auto; width: calc(100% / var(--lanes, 1) - 8px); }
.tt-remove { position: absolute; top: 2px; right: 24px; border: 0; background: rgba(0,0,0,.25); color: #fff; border-radius: 50%;
  width: 1.15rem; height: 1.15rem; padding: 0; font-size: .6rem; line-height: 1; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.tt-movable:hover .tt-remove, .tt-remove:focus-visible { opacity: 1; }
@media (hover: none) { .tt-remove { opacity: .9; } }
.tt-slot.draft { opacity: .65; border: 2px dashed #fff; }
.tt-changeover { background: repeating-linear-gradient(135deg, var(--bs-secondary-bg), var(--bs-secondary-bg) 5px, var(--bs-tertiary-bg) 5px, var(--bs-tertiary-bg) 10px); color: var(--bs-secondary-color); font-size: .68rem; z-index: 1; }
.tt-break { background: var(--bs-warning-bg-subtle); border: 1px solid var(--bs-warning-border-subtle); color: var(--bs-warning-text-emphasis); z-index: 1; }
.mail-body { white-space: pre-wrap; word-break: break-word; }
.mail-html { overflow-x: auto; }
@media print {
  .app-header, .btn, form, .nav-pills, .alert { display: none !important; }
  .tab-pane { display: block !important; opacity: 1 !important; }
  body { background: #fff; }
}

/* Activities */
.activity-item { display: flex; gap: .75rem; padding: .65rem .9rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.activity-item:last-child { border-bottom: 0; }
.activity-icon { flex: 0 0 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.activity-icon.meeting { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.activity-icon.task { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.activity-item.done .activity-title { text-decoration: line-through; color: var(--bs-secondary-color); }
.activity-body { white-space: pre-wrap; word-break: break-word; font-size: .9rem; }
.activity-meta { font-size: .8rem; color: var(--bs-secondary-color); }
.task-check { border: 0; background: none; padding: 0; font-size: 1.25rem; line-height: 1; color: var(--bs-secondary-color); }
.task-check:hover { color: var(--bs-success); }
.composer .nav-link { padding: .35rem .75rem; font-size: .9rem; }

/* KI-Assistent */
body:has(.fab-bar) .app-main { padding-bottom: 5rem !important; }
.fab-bar { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030; display: flex; gap: .5rem; align-items: center; }
.ai-fab, .collab-fab { border-radius: 2rem; padding: .55rem 1rem; position: relative; }
.collab-fab { background: var(--bs-body-bg); }
.collab-fab:hover { background: var(--brand-soft); color: var(--brand); }
.collab-badge { position: absolute; top: -.4rem; right: -.4rem; font-size: .7rem; }
.ai-panel { --bs-offcanvas-width: 440px; }
.ai-log { overflow-y: auto; background: var(--bs-tertiary-bg); }
.ai-msg { margin-bottom: .75rem; display: flex; flex-direction: column; }
.ai-user { align-items: flex-end; }
.ai-bubble { max-width: 92%; padding: .5rem .75rem; border-radius: .75rem; font-size: .9rem; word-break: break-word; }
.ai-user .ai-bubble { background: var(--brand); color: var(--brand-on); border-bottom-right-radius: .2rem; }
.ai-assistant .ai-bubble { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-bottom-left-radius: .2rem; }
.ai-proposal { max-width: 92%; margin-top: .4rem; padding: .5rem .75rem; border-radius: .5rem; background: var(--brand-soft); border: 1px dashed var(--brand-300); }
@media print { .fab-bar { display: none !important; } }

/* Timetable drag & drop */
.tt-slot.editable { cursor: grab; user-select: none; -webkit-user-select: none; }
.tt-slot a { -webkit-user-drag: none; }
.tt-slot.dragging { opacity: .85; z-index: 5; box-shadow: 0 6px 18px rgba(0,0,0,.35); cursor: grabbing; transition: none; }
.tt-grip { position: absolute; top: 2px; right: 4px; font-size: .8rem; opacity: .8; cursor: grab; touch-action: none; padding: 2px 4px; }
.tt-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; touch-action: none; }
.tt-resize::after { content: ""; position: absolute; left: 40%; right: 40%; bottom: 2px; border-bottom: 2px solid rgba(255,255,255,.7); border-radius: 2px; }
.tt-time-hint { position: absolute; left: 4px; top: -1.4rem; background: var(--bs-dark); color: #fff; font-size: .7rem; padding: 1px 6px; border-radius: .25rem; white-space: nowrap; z-index: 6; }
.tt-col.drop-target { background: var(--brand-soft); }
.tt-chip[draggable=true] { cursor: grab; }

/* Dashboard KPIs */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.kpi { color: var(--bs-body-color); transition: border-color .15s, box-shadow .15s; padding: .85rem 1rem; }
.kpi:hover { border-color: var(--brand-300); box-shadow: 0 2px 8px rgba(178, 36, 69, .12); }
.kpi-icon { color: var(--brand); }

/* Docked assistant (desktop) */
@media (min-width: 1200px) {
  body.dock-any .app-main { margin-right: 440px; max-width: calc(100% - 440px); }
  body.ai-docked .ai-panel, body.collab-docked .collab-panel { top: var(--app-header-h, 0); box-shadow: none; border-left: 1px solid var(--bs-border-color); z-index: 1010; }
  body.ai-docked .ai-fab, body.collab-docked .collab-fab { display: none; }
  body.dock-any .fab-bar { right: calc(440px + 1.25rem); }
  /* both docked: one block, switched with tabs */
  body.dock-both[data-dock-tab=ai] .collab-panel, body.dock-both[data-dock-tab=collab] .ai-panel { visibility: hidden !important; pointer-events: none; }
  body.dock-both .dock-tabs { display: flex; }
  body.dock-both .dock-title { display: none; }
}

/* Mail workspace */
.mail-ws { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
@media (min-width: 992px) {
  .mail-ws { grid-template-columns: var(--mail-c1, 220px) 10px var(--mail-c2, 380px) 10px minmax(320px, 1fr); gap: 0; height: calc(100vh - var(--app-header-h, 110px) - 2rem); }
  .mail-col { min-height: 0; overflow-y: auto; }
}
.mail-col { background: var(--bs-body-bg); border: 0; border-radius: 1rem; box-shadow: 0 1px 3px color-mix(in srgb, var(--bs-body-color) 7%, transparent), 0 6px 18px -10px color-mix(in srgb, var(--bs-body-color) 18%, transparent); }
.mail-folders { padding: .6rem; }
.mail-folder { display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem; border-radius: .35rem; color: var(--bs-body-color); font-size: .9rem; }
.mail-folder:hover { background: var(--brand-soft); text-decoration: none; }
.mail-folder.active { background: var(--brand-accent); color: var(--bs-primary-text-emphasis); font-weight: 600; }
.mail-folder.inactive { color: var(--bs-secondary-color); }
.mail-folder.drop-target { outline: 2px dashed var(--brand); background: var(--brand-soft); }
.mail-list-head { padding: .6rem .6rem .25rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.mail-bulk { background: var(--brand-soft); border-radius: .4rem; padding: .35rem .5rem; margin: .25rem 0; }
.mail-item { display: flex; gap: .5rem; align-items: flex-start; padding: .55rem .6rem; cursor: pointer; }
.mail-item .mail-check { margin-top: .25rem; flex: 0 0 auto; }
.mail-item .mail-link { flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; }
.mail-item.unread .mail-from, .mail-item.unread .mail-subject { font-weight: 600; }
.mail-item.unread { border-left: 3px solid var(--brand); }
.mail-item.active { background: var(--brand-accent); color: var(--bs-body-color); border-color: var(--bs-border-color-translucent); }
.mail-item.selected { background: var(--brand-soft); }
.mail-item.dragging { opacity: .5; }
.mail-subject { font-size: .88rem; }
.mail-pane { padding: 1rem; }
.mail-toolbar { position: sticky; top: -1rem; background: var(--bs-body-bg); padding: .25rem 0 .5rem; z-index: 2; border-bottom: 1px solid var(--bs-border-color-translucent); }
.mail-drag-ghost { position: absolute; top: -1000px; padding: .25rem .6rem; background: var(--brand); color: #fff; border-radius: .4rem; font-size: .85rem; }

/* Configurable lists */
.lv-group td { background: var(--brand-soft); font-weight: 600; color: var(--brand-strong); }
.lv-editable { cursor: text; }
.lv-editable:hover { background: var(--brand-soft); box-shadow: inset 0 -2px 0 var(--brand-300); }
.lv-editable .lv-pen { font-size: .7rem; opacity: 0; }
.lv-editable:hover .lv-pen { opacity: .6; }
.lv-editing { padding: .25rem !important; }
.lv-saved { animation: lvflash 1s; }
@keyframes lvflash { from { background: var(--bs-success-bg-subtle); } to { background: transparent; } }
@media (max-width: 767.98px) { .responsive-table tr.lv-group td { display: block; text-align: left; } .responsive-table td.lv-desktop, .responsive-table th.lv-desktop { display: none !important; } }

/* Detail layouts */
.lo-grid { display: flex; flex-direction: column; gap: 0 1rem; }
.lo-col { display: contents; }
.lo-block { order: var(--mo, 0); min-width: 0; }
.lo-hidden-mobile { display: none; }
@media (min-width: 992px) {
  .lo-grid { flex-direction: row; align-items: flex-start; }
  .lo-col { display: block; flex: var(--w) 1 0; min-width: 0; }
  .lo-block { order: 0; }
  .lo-hidden-mobile { display: block; }
}
.lo-fields th { width: 38%; padding-left: 0; }
@media (min-width: 768px) { .lo-fields-2 tbody { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } .lo-fields-2 tr { display: table; width: 100%; } }
.lo-kanban .kanban-col { flex-basis: 220px; max-height: none; }

/* Charts - categorical palette (validated, light/dark stepped separately), fixed slot order */
:root, [data-bs-theme=light] { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300; --series-7: #6250d6; --series-8: #e34948; --viz-track: #ecebe8; }
[data-bs-theme=dark] { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767; --viz-track: #2c2c2a; }
.viz-s1 { stroke: var(--series-1); } .viz-s2 { stroke: var(--series-2); } .viz-s3 { stroke: var(--series-3); } .viz-s4 { stroke: var(--series-4); }
.viz-s5 { stroke: var(--series-5); } .viz-s6 { stroke: var(--series-6); } .viz-s7 { stroke: var(--series-7); } .viz-s8 { stroke: var(--series-8); }
.viz-bg1 { background: var(--series-1); } .viz-bg2 { background: var(--series-2); } .viz-bg3 { background: var(--series-3); } .viz-bg4 { background: var(--series-4); }
.viz-bg5 { background: var(--series-5); } .viz-bg6 { background: var(--series-6); } .viz-bg7 { background: var(--series-7); } .viz-bg8 { background: var(--series-8); }
.viz-bars { display: grid; gap: .45rem; }
.viz-bar-row { display: grid; grid-template-columns: minmax(80px, 30%) 1fr auto; align-items: center; gap: .6rem; font-size: .85rem; }
.viz-bar-row:hover .viz-bar { filter: brightness(1.1); }
.viz-track { height: 14px; }
.viz-bar { display: block; height: 14px; min-width: 2px; background: var(--series-1); border-radius: 0 4px 4px 0; }
.viz-value { font-variant-numeric: tabular-nums; color: var(--bs-body-color); white-space: nowrap; }
.viz-label { color: var(--bs-secondary-color); }
.viz-stack { display: flex; gap: 2px; height: 24px; }
.viz-seg { display: block; min-width: 2px; }
.viz-seg:first-child { border-radius: 4px 0 0 4px; } .viz-seg:last-child { border-radius: 0 4px 4px 0; } .viz-seg:only-child { border-radius: 4px; }
.viz-ring-track { stroke: var(--viz-track); }
.viz-ring-total { font-size: 5px; font-weight: 600; fill: var(--bs-body-color); }
.viz-ring-sub { font-size: 3px; fill: var(--bs-secondary-color); }
.viz-legend { display: grid; gap: .25rem; font-size: .85rem; min-width: 200px; flex: 1; }
.viz-legend li { display: flex; align-items: center; gap: .5rem; }
.viz-key { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 10px; }
.lo-editor-grid { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.lo-ed-col { min-width: 240px; }
.lo-ed-blocks { min-height: 60px; display: grid; gap: .5rem; margin-bottom: .5rem; }
.lo-ed-block { cursor: grab; }
.lo-ed-fieldlist { max-height: 45vh; overflow-y: auto; }

/* Object type icons */
.obj-icon { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 1.25rem; border: 1px solid var(--brand-accent); }
.obj-icon-sm { width: 2rem; height: 2rem; font-size: 1rem; }
.lv-open-col { width: 2.5rem; text-align: center; }
.lv-open { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; color: var(--brand); background: var(--brand-soft); }
.lv-open.has-photo { overflow: hidden; background: var(--bs-secondary-bg); }
.lv-open img { width: 100%; height: 100%; object-fit: cover; }
.kanban-photo { width: 1.3rem; height: 1.3rem; border-radius: 50%; object-fit: cover; vertical-align: -.3em; }
.lv-open:hover { background: var(--brand); color: var(--brand-on); text-decoration: none; }
@media (max-width: 767.98px) { .responsive-table td.lv-open-col { display: block; text-align: left; width: auto; } }

/* Buttons: fully rounded; secondary buttons use the brand colour as outline/text instead of grey */
.btn, .btn-sm, .btn-lg { --bs-btn-border-radius: 50rem; }
.btn-outline-secondary {
  --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-hover-color: var(--brand-on);
  --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover); --bs-btn-active-color: var(--brand-on);
  --bs-btn-disabled-color: var(--brand); --bs-btn-disabled-border-color: var(--brand-300);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-primary { --bs-btn-border-color: var(--brand); }
.btn-secondary {
  --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-color: var(--brand-on);
  --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover); --bs-btn-hover-color: var(--brand-on);
  --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover);
}
/* Button groups: the outer ends round like single buttons (also in -sm/-lg groups); joins are square.
   "First/last" means the first/last button – hidden inputs (btn-check radios), forms or menus around them do not count. */
.btn-group { border-radius: 50rem; }
.btn-group > .btn, .btn-group-sm > .btn, .btn-group-lg > .btn { --bs-btn-border-radius: 50rem; border-radius: 50rem !important; }
.btn-group > .btn:has(~ .btn, ~ .btn-group) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.btn-group > .btn ~ .btn, .btn-group > .btn-group ~ .btn { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

.mail-resizer { cursor: col-resize; position: relative; }
.mail-resizer::after { content: ""; position: absolute; top: 20%; bottom: 20%; left: 4px; width: 2px; border-radius: 2px; background: transparent; transition: background .15s; }
.mail-resizer:hover::after, .mail-resizer.active::after { background: var(--brand-300); }
body.mail-resizing { cursor: col-resize; user-select: none; }
.mail-snippet { font-size: .8rem; color: var(--bs-secondary-color); }
@media (max-width: 991.98px) {
  .mail-ws .mail-col { border-radius: 1rem; }
  .mail-list-head { position: sticky; top: var(--app-header-h, 100px); z-index: 3; background: var(--bs-body-bg); border-radius: 1rem 1rem 0 0; }
  .mail-item { padding: .75rem .75rem; gap: .65rem; }
  .mail-item .mail-check { width: 1.25rem; height: 1.25rem; }
  .mail-from { font-size: 1rem; }
  .mail-bulk .btn { padding: .35rem .7rem; }
}
.mail-ws > * { min-width: 0; } .mail-item .mail-link { min-width: 0; flex: 1 1 auto; }
.lv-check-col { width: 2.25rem; text-align: center; }
.lv-bulk { position: sticky; top: calc(var(--app-header-h, 100px) + var(--detail-head-h, 0px) + .5rem); z-index: 5; border-color: var(--brand-300); background: var(--brand-soft); }
.lv-bulk-value .form-control, .lv-bulk-value .form-select { min-width: 12rem; }
tr.lv-selected > td { background: var(--brand-soft); }
.lv-dashboard .viz-root { height: 100%; margin-bottom: 0 !important; }
@media (max-width: 767.98px) {
  .responsive-table td.lv-check-col { display: block; float: right; width: auto; padding-top: .5rem; }
  .lv-bulk-value .form-control, .lv-bulk-value .form-select { min-width: 0; width: 100%; }
  .lv-bulk-value { flex: 1 1 100%; }
}
@media (max-width: 767.98px) {
  .lv-dashboard { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .25rem; }
  .lv-dashboard > [class*="col-"] { flex: 0 0 86%; max-width: 86%; scroll-snap-align: start; }
  .lv-dashboard > [class*="col-"]:only-child { flex-basis: 100%; max-width: 100%; }
}

/* ---------- colour accents for layout columns and blocks (background + line derived from one colour) */
.lo-tinted .card, .lo-tinted .viz-root { background: color-mix(in srgb, var(--lo-accent) 7%, var(--bs-body-bg)); border-color: color-mix(in srgb, var(--lo-accent) 45%, transparent); }
.lo-tinted .card-header { background: color-mix(in srgb, var(--lo-accent) 15%, var(--bs-body-bg)); border-color: color-mix(in srgb, var(--lo-accent) 35%, transparent); }
.lo-tinted .card-header .fw-semibold, .lo-tinted figcaption { color: color-mix(in srgb, var(--lo-accent) 70%, var(--bs-body-color)); }
@media (min-width: 992px) {
  .lo-col-tinted { background: color-mix(in srgb, var(--lo-accent) 6%, transparent); border: 1px solid color-mix(in srgb, var(--lo-accent) 35%, transparent); border-radius: 1rem; padding: .75rem .75rem 0; }
}

/* ---------- layout editor (WYSIWYG canvas + side panel) */
.lo-ed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 992px) {
  .lo-ed { grid-template-columns: minmax(0, 1fr) 300px; }
  .lo-ed-side { position: sticky; top: calc(var(--app-header-h, 100px) + 1rem); max-height: calc(100vh - var(--app-header-h, 100px) - 2rem); overflow-y: auto; padding-right: 2px; }
}
.lo-ed-actions { display: flex; gap: .5rem; }
.lo-cv-head { margin-bottom: 1rem; }
.lo-cv-headbar { border-style: dashed; }
.lo-head-chip { position: relative; padding: .3rem 1.4rem .3rem .6rem; border: 1px dashed transparent; border-radius: .5rem; cursor: grab; }
.lo-head-chip:hover { border-color: var(--brand-300); }
.lo-chip-x { position: absolute; top: 0; right: 0; border: 0; background: none; color: var(--bs-secondary-color); opacity: 0; padding: 0 .2rem; }
.lo-head-chip:hover .lo-chip-x, .lo-chip-x:focus { opacity: 1; }
.lo-head-menu { width: 280px; }
.lo-head-list { max-height: 300px; overflow-y: auto; }
.lo-cv { display: flex; gap: 1rem; align-items: flex-start; }
.lo-cv-col { min-width: 0; border: 1px dashed var(--bs-border-color); border-radius: 1rem; padding: .5rem; }
.lo-cv-col.lo-col-tinted { padding: .5rem; }
.lo-cv-colhead { display: flex; align-items: center; gap: .25rem; margin-bottom: .5rem; }
.lo-cv-blocks { min-height: 80px; display: flex; flex-direction: column; gap: .75rem; border-radius: .6rem; }
.lo-cv-block { position: relative; border-radius: .75rem; outline: 2px solid transparent; outline-offset: 2px; }
.lo-cv-block:hover { outline-color: var(--brand-200); }
.lo-cv-tools { display: flex; align-items: center; gap: .35rem; padding: .1rem .4rem; font-size: .8rem; color: var(--bs-secondary-color); cursor: grab; }
.lo-cv-preview { pointer-events: none; }
.lo-cv-preview > .card, .lo-cv-preview > figure, .lo-cv-preview .mb-3:last-child { margin-bottom: 0 !important; }
.lo-cv-fieldlist { min-height: 2.25rem; border-radius: .5rem; }
.lo-cv-fields-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
.lo-cv-fields-2 > .lo-drop-ind, .lo-cv-fields-2 > .lo-cv-empty { grid-column: 1 / -1; }
.lo-cv-field { display: grid; grid-template-columns: auto minmax(0, 38%) minmax(0, 1fr) auto auto; align-items: center; gap: .35rem; padding: .2rem .15rem; border-radius: .4rem; cursor: grab; font-size: .9rem; }
.lo-cv-field:hover { background: var(--brand-soft); }
.lo-cv-fvalue { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-grip { color: var(--bs-tertiary-color); }
.lo-tool { padding: 0 .25rem; color: var(--bs-secondary-color); line-height: 1.2; }
.lo-tool.active { color: var(--brand); }
.lo-cv-field .lo-tool { opacity: 0; }
.lo-cv-field:hover .lo-tool, .lo-cv-field .lo-tool.active, .lo-cv-field .lo-tool:focus { opacity: 1; }
.lo-cv-empty { border: 2px dashed var(--bs-border-color); border-radius: .6rem; padding: 1rem; text-align: center; color: var(--bs-secondary-color); font-size: .85rem; }
.lo-drop-ind { height: 4px; border-radius: 4px; background: var(--brand); margin: .1rem 0; }
.lo-drop-target { box-shadow: 0 0 0 2px var(--brand-300); }
body.lo-dragging .lo-cv-blocks, body.lo-dragging .lo-cv-fieldlist { background: color-mix(in srgb, var(--brand-50) 60%, transparent); }
.lo-pal-group { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); margin: .35rem 0 .35rem; }
.lo-pal-item { display: flex; align-items: center; gap: .5rem; padding: .35rem .55rem; border: 1px solid var(--bs-border-color); border-radius: .6rem; margin-bottom: .35rem; cursor: grab; background: var(--bs-body-bg); font-size: .85rem; min-width: 0; }
.lo-pal-item:hover, .lo-pal-item:focus { border-color: var(--brand-300); background: var(--brand-soft); outline: 0; }
.lo-pal-item > .bi:first-child { color: var(--brand); }
.lo-pal-item.is-used { opacity: .65; }
.lo-palette-fields { max-height: 42vh; overflow-y: auto; }
.lo-new { animation: lvflash 1.5s 2; border-color: var(--brand); }
.lo-swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-left: .15rem; vertical-align: middle; background: var(--lo-accent, transparent); border: 1px solid var(--bs-border-color); }
.lo-color-menu { width: 230px; }
.lo-swatch-btn { width: 1.75rem; height: 1.75rem; border-radius: 50%; position: relative; padding: 0; border: 2px solid color-mix(in srgb, var(--lo-accent) 45%, transparent); background: color-mix(in srgb, var(--lo-accent) 12%, var(--bs-body-bg)); }
.lo-swatch-btn::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--lo-accent); }
.lo-swatch-btn.active { outline: 2px solid var(--bs-body-color); outline-offset: 1px; }
.lo-cv-fvalue, .lo-head-chip .fw-semibold { pointer-events: none; }

/* ---------- toasts (messages) */
.app-toasts { position: fixed; top: calc(var(--app-header-h, 100px) + .75rem); right: 1rem; z-index: 1090; max-width: min(420px, calc(100vw - 2rem)); }
.app-toast { --bs-toast-max-width: 100%; position: relative; overflow: hidden; border: 0; border-left: 4px solid var(--tc); background: var(--bs-body-bg); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.app-toast-success { --tc: var(--bs-success); } .app-toast-info { --tc: var(--brand); } .app-toast-warning { --tc: var(--bs-warning); } .app-toast-danger { --tc: var(--bs-danger); }
.app-toast-icon { color: var(--tc); font-size: 1.1rem; line-height: 1.3; }
.app-toast-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--tc); opacity: .5; transform-origin: left; animation: toastTimer 10s linear forwards; }
.app-toast:hover .app-toast-timer { animation-play-state: paused; }
@keyframes toastTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 575.98px) { .app-toasts { left: 1rem; right: 1rem; } }

/* ---------- sticky record header; the layout's header fields belong to it but scroll away */
.detail-head { position: sticky; top: var(--app-header-h, 0); z-index: 990; background: var(--bs-body-bg); margin: -1rem -1rem 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
.detail-crumbs { margin-bottom: .15rem; }
.detail-head:has(+ .lo-header) { border-bottom-color: transparent; margin-bottom: 0; }
.lo-header { background: var(--bs-body-bg); margin: 0 -1rem 1rem; padding: .1rem 1rem .85rem 4.6rem; border-bottom: 1px solid var(--bs-border-color); }
.lo-header > div { gap: .5rem 2rem !important; }
@media (min-width: 992px) {
  .detail-head { margin: -1rem -1.5rem 1rem; padding: .75rem 1.5rem; }
  .lo-header { margin: 0 -1.5rem 1rem; padding-left: 5.1rem; padding-right: 1.5rem; }
}
@media (max-width: 575.98px) { .lo-header { padding-left: 1rem; } }

/* ---------- element titles (with their frame) stay visible while scrolling through long elements */
body.has-detail-head .app-main .card > .card-header:not(.modal .card-header) {
  position: sticky; top: calc(var(--app-header-h, 0px) + var(--detail-head-h, 0px)); z-index: 3;
  background: color-mix(in srgb, var(--bs-body-color) 3%, var(--bs-body-bg));
  box-shadow: 0 -1px 0 var(--bs-card-border-color), 1px 0 0 var(--bs-card-border-color), -1px 0 0 var(--bs-card-border-color);
}
body.has-detail-head .app-main .lo-tinted .card > .card-header:not(.modal .card-header) { background: color-mix(in srgb, var(--lo-accent) 15%, var(--bs-body-bg)); }

/* ---------- field groups: transparent rows so a chosen colour shows through */
.lo-fields, .lo-block .table { --bs-table-bg: transparent; }

/* ---------- a chosen colour also styles the content: text accents, links, hover, lines, badges, buttons */
.lo-tinted {
  --lo-ink: color-mix(in srgb, var(--lo-accent) 72%, var(--bs-body-color));
  --bs-table-bg: transparent; --bs-table-hover-bg: color-mix(in srgb, var(--lo-accent) 12%, transparent);
  --bs-table-striped-bg: color-mix(in srgb, var(--lo-accent) 6%, transparent);
  --bs-border-color: color-mix(in srgb, var(--lo-accent) 28%, transparent);
  --bs-border-color-translucent: color-mix(in srgb, var(--lo-accent) 22%, transparent);
  --bs-card-border-color: color-mix(in srgb, var(--lo-accent) 45%, transparent);
  --bs-list-group-bg: transparent; --bs-list-group-border-color: color-mix(in srgb, var(--lo-accent) 22%, transparent);
  --bs-list-group-action-hover-bg: color-mix(in srgb, var(--lo-accent) 12%, transparent);
  --viz-track: color-mix(in srgb, var(--lo-accent) 14%, var(--bs-body-bg));
}
.lo-tinted a:not(.btn):not(.badge) { color: var(--lo-ink); text-decoration-color: color-mix(in srgb, var(--lo-accent) 40%, transparent); }
.lo-tinted a:not(.btn):not(.badge):hover { color: color-mix(in srgb, var(--lo-accent) 90%, var(--bs-body-color)); }
.lo-tinted .text-body-secondary, .lo-tinted .stat-label, .lo-tinted th.text-body-secondary { color: color-mix(in srgb, var(--lo-accent) 45%, var(--bs-secondary-color)) !important; }
.lo-tinted .table > :not(caption) > * > * { border-color: var(--bs-border-color); }
.lo-tinted .table-hover > tbody > tr:hover > *, .lo-tinted .row-link:hover > * { --bs-table-bg-state: var(--bs-table-hover-bg); }
.lo-tinted .lv-editable:hover { background: color-mix(in srgb, var(--lo-accent) 12%, transparent); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--lo-accent) 55%, transparent); }
.lo-tinted .badge.text-bg-secondary, .lo-tinted .badge.text-bg-light { background: color-mix(in srgb, var(--lo-accent) 18%, var(--bs-body-bg)) !important; color: var(--lo-ink) !important; border: 1px solid color-mix(in srgb, var(--lo-accent) 35%, transparent); }
.lo-tinted .btn-outline-primary, .lo-tinted .btn-outline-secondary { --bs-btn-color: var(--lo-ink); --bs-btn-border-color: color-mix(in srgb, var(--lo-accent) 60%, transparent); --bs-btn-hover-bg: var(--lo-accent); --bs-btn-hover-border-color: var(--lo-accent); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--lo-accent); }
.lo-tinted .btn-primary { --bs-btn-bg: var(--lo-accent); --bs-btn-border-color: var(--lo-accent); --bs-btn-hover-bg: color-mix(in srgb, var(--lo-accent) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--lo-accent) 85%, #000); }
.lo-tinted .form-control, .lo-tinted .form-select { border-color: color-mix(in srgb, var(--lo-accent) 35%, var(--bs-border-color)); }
.lo-tinted .form-control:focus, .lo-tinted .form-select:focus { border-color: var(--lo-accent); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--lo-accent) 25%, transparent); }
.lo-tinted .kanban-card { border-color: color-mix(in srgb, var(--lo-accent) 30%, transparent); }
.lo-tinted .kanban-card:hover { border-color: var(--lo-accent); }
.lo-tinted .kanban-col { background: color-mix(in srgb, var(--lo-accent) 6%, transparent); }
.lo-tinted .card-header .bi, .lo-tinted .lo-block-icon { color: var(--lo-accent); }

/* ---------- block icons */
.lo-block-icon { color: var(--brand); margin-right: .35rem; }

/* ---------- mail workspace: compose button and list head stay, only the lists scroll */
@media (min-width: 992px) {
  .mail-folders > .btn:first-child { position: sticky; top: -.6rem; z-index: 3; box-shadow: 0 -.6rem 0 .1rem var(--bs-body-bg), 0 .5rem .5rem -.25rem var(--bs-body-bg); }
  .mail-list .mail-list-head { position: sticky; top: 0; z-index: 3; background: var(--bs-body-bg); border-radius: .5rem .5rem 0 0; }
}

/* ---------- assistant uses the highlight colour of the active tab */
.ai-panel { --bs-offcanvas-bg: var(--brand-soft); }
.ai-panel .offcanvas-header, .ai-panel form#aiForm { background: color-mix(in srgb, var(--brand-soft) 60%, var(--bs-body-bg)); }
[data-bs-theme=dark] .ai-panel { --bs-offcanvas-bg: color-mix(in srgb, var(--brand-500) 10%, var(--bs-body-bg)); }

/* ---------- layout editor: side panel inverted to stand out as a tool; actions pinned on top */
.lo-ed-side { background: var(--bs-body-bg); color: var(--bs-body-color); border-radius: 1rem; padding: 0 .75rem .75rem; }
.lo-ed-side .card { --bs-card-bg: color-mix(in srgb, var(--bs-body-color) 5%, var(--bs-body-bg)); --bs-card-border-color: color-mix(in srgb, var(--bs-body-color) 12%, transparent); }
.lo-ed-side .lo-pal-item { background: color-mix(in srgb, var(--bs-body-color) 4%, var(--bs-body-bg)); }
.lo-ed-actions { position: sticky; top: 0; z-index: 5; background: var(--bs-body-bg); padding: .75rem 0; margin: 0 0 .25rem !important; }
@media (max-width: 991.98px) { .lo-ed-actions { position: static; } }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr)); gap: .25rem; max-height: 240px; overflow-y: auto; }
.icon-grid button { border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); border-radius: .5rem; height: 2.6rem; font-size: 1.15rem; color: var(--bs-body-color); }
.icon-grid button:hover, .icon-grid button.active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
@media (max-width: 575.98px) {
  .detail-head { padding-top: .5rem; padding-bottom: .5rem; }
  .detail-head .detail-crumbs { display: none; }
  .detail-head > .d-flex { flex-wrap: nowrap !important; }
  .detail-head .obj-icon { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
  .detail-head h1 { font-size: 1.05rem; }
  .detail-head .btn { font-size: 0; padding: .4rem .55rem; flex: 0 0 auto; }
  .detail-head .btn .bi { font-size: 1rem; }
  .detail-head .dropdown-menu { font-size: 1rem; }
}

/* ---------- searchable selects (relations) and tag pickers (genres) */
.combo { position: relative; }
.combo-icon { position: absolute; left: .75rem; top: .55rem; color: var(--bs-secondary-color); pointer-events: none; font-size: .9rem; z-index: 1; }
.combo-input { padding-left: 2.1rem; }
.combo.has-value .combo-input { background: var(--brand-soft); border-color: var(--brand-300); }
.combo-list { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 1060; max-height: 300px; overflow-y: auto; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .75rem; box-shadow: 0 10px 28px rgba(0, 0, 0, .14); padding: .25rem; }
.combo-tags .combo-list { top: 2.6rem; }
.combo-list.show { display: block; }
.combo-item { padding: .4rem .65rem; border-radius: .5rem; cursor: pointer; }
.combo-item:hover, .combo-item.active { background: var(--brand-soft); color: var(--brand-strong); }
.combo-sub { font-size: .8rem; color: var(--bs-secondary-color); }
.combo-clear { color: var(--bs-secondary-color); font-style: italic; border-bottom: 1px solid var(--bs-border-color-translucent); border-radius: .5rem .5rem 0 0; }
.combo-none { padding: .4rem .65rem; color: var(--bs-secondary-color); font-size: .85rem; }
.combo-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; min-height: 1.6rem; align-items: center; }
.combo-chip { display: inline-flex; align-items: center; gap: .15rem; background: var(--brand-soft); color: var(--brand-strong); border: 1px solid var(--brand-accent); font-weight: 500; font-size: .85rem; padding: .3rem .25rem .3rem .65rem; }
.combo-chip-x { border: 0; background: none; color: inherit; padding: 0 .15rem; line-height: 1; border-radius: 50%; }
.combo-chip-x:hover { background: var(--brand-accent); }

/* ---------- settings: vertical menu, optional second column (object manager), main area */
.setup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.setup-nav, .setup-sub { display: flex; gap: .25rem; overflow-x: auto; padding-bottom: .25rem; }
.setup-nav-title { display: none; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); margin: .25rem .6rem .4rem; }
.setup-link { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; border-radius: .6rem; color: var(--bs-body-color); text-decoration: none; white-space: nowrap; font-size: .92rem; min-width: 0; }
.setup-link:hover { background: var(--brand-soft); color: var(--brand); }
.setup-link.active { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); }
.setup-link .bi { color: var(--brand); flex: 0 0 auto; }
.setup-sub #omList { display: flex; gap: .25rem; }
.setup-sub input { min-width: 12rem; }
.om-tabs { display: flex; flex-wrap: wrap; gap: .25rem; position: sticky; top: var(--app-header-h, 0); z-index: 4; background: var(--bs-tertiary-bg); padding: .35rem 0; }
.om-tabs a { padding: .3rem .75rem; border-radius: 50rem; text-decoration: none; color: var(--bs-body-color); border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); font-size: .875rem; }
.om-tabs a:hover { border-color: var(--brand-300); color: var(--brand); }
.om-section { scroll-margin-top: calc(var(--app-header-h, 0px) + 3.5rem); }
.om-assign { border: 1px solid var(--bs-border-color); border-radius: 50rem; padding: .2rem .7rem; font-size: .85rem; background: var(--bs-body-bg); }
@media (min-width: 992px) {
  .setup { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
  .setup.setup-with-sub { grid-template-columns: 220px 230px minmax(0, 1fr); }
  .setup-nav, .setup-sub { flex-direction: column; overflow: visible; position: sticky; top: calc(var(--app-header-h, 0px) + 1rem); background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem; padding: .6rem; max-height: calc(100vh - var(--app-header-h, 0px) - 2rem); overflow-y: auto; }
  .setup-sub #omList { flex-direction: column; }
  .setup-nav-title { display: block; }
  .setup-sub input { min-width: 0; }
}
@media (max-width: 991.98px) {
  .setup-sub { flex-wrap: wrap; }
  .setup-sub input { flex: 1 1 100%; }
  .setup-sub #omList { overflow-x: auto; width: 100%; }
  .setup-link.active { box-shadow: inset 0 -3px 0 var(--brand); }
}
@media (max-width: 991.98px) {
  .setup-nav .setup-link, .setup-sub .setup-link { flex: 0 0 auto; }
  .setup-sub .setup-link .text-truncate { overflow: visible; }
  .setup-nav, .setup-sub #omList { scrollbar-width: none; }
}

/* ---------- media */
.media-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.media-link { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid var(--bs-border-color); border-radius: 50rem; padding: .25rem .4rem .25rem .7rem; background: var(--bs-body-bg); font-size: .875rem; }
.media-link > a:first-child { text-decoration: none; color: var(--bs-body-color); }
.media-link > a:first-child:hover { color: var(--brand); }
.media-link .bi { color: var(--brand); }
.media-instagram .bi { color: #d6249f; } .media-youtube .bi { color: #e62117; } .media-spotify .bi { color: #1db954; }
.media-soundcloud .bi { color: #ff5500; } .media-facebook .bi { color: #1877f2; } .media-tiktok .bi { color: var(--bs-body-color); }
.media-edit { color: var(--bs-secondary-color); font-size: .8rem; padding: 0 .2rem; opacity: .6; }
.media-edit:hover { opacity: 1; color: var(--brand); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
.media-thumb { margin: 0; min-width: 0; }
.media-open { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid var(--bs-border-color); border-radius: .6rem; overflow: hidden; background: var(--bs-tertiary-bg); }
.media-open img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.media-open:hover img {  }
.media-thumb figcaption { font-size: .78rem; color: var(--bs-secondary-color); margin-top: .2rem; }
.media-open { position: relative; }
.media-open video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.media-tile-icon { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 2rem; color: var(--brand); }
.media-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.3rem; pointer-events: none; }
.media-open.is-audio .media-play { background: color-mix(in srgb, var(--brand) 85%, transparent); font-size: 1rem; }
.media-tile-icon ~ .media-play { top: auto; bottom: .4rem; left: auto; right: .4rem; transform: none; width: 1.8rem; height: 1.8rem; font-size: 1rem; }
/* media viewer modal */
.media-viewer .modal-content { border: 0; border-radius: 1rem; overflow: hidden; }
.media-viewer-body { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40vh; background: #0d0d0f; }
.media-viewer-stage { display: flex; align-items: center; justify-content: center; width: 100%; }
.media-viewer-stage img, .media-viewer-stage video { max-width: 100%; max-height: 78vh; border-radius: .5rem; }
.media-viewer-stage iframe { width: 100%; aspect-ratio: 16 / 9; max-height: 78vh; border: 0; border-radius: .5rem; background: #000; }
.media-viewer-stage.is-audio iframe { aspect-ratio: auto; height: 352px; max-width: 640px; }
.media-viewer-audio { display: flex; flex-direction: column; align-items: center; gap: 1rem; color: #fff; padding: 2rem 1rem; width: min(100%, 520px); }
.media-viewer-audio i { font-size: 4rem; color: var(--brand-300, #f08aa0); }
.media-viewer-audio audio { width: 100%; }
.media-viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .85); color: #111; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.media-viewer-nav:hover { background: #fff; }
.media-viewer-nav.prev { left: .6rem; } .media-viewer-nav.next { right: .6rem; }
.media-viewer-nav[hidden] { display: none; }
@media (max-width: 575.98px) { .media-viewer-nav { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; } }
.media-item { padding: .6rem 0; border-top: 1px solid var(--bs-border-color-translucent); }
.media-item:first-child { border-top: 0; }
.media-video { width: 100%; max-height: 360px; border-radius: .6rem; background: #000; }
.media-embed { position: relative; aspect-ratio: 16 / 9; border-radius: .6rem; overflow: hidden; background: var(--bs-tertiary-bg); }
.media-embed-audio { aspect-ratio: auto; height: 152px; }
.media-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-lightbox-img { max-height: 80vh; border-radius: .5rem; }

/* ---------- voting */
.stars { color: #f5a623; letter-spacing: .05em; white-space: nowrap; }
.stars .stars-off, .stars-off { color: var(--bs-border-color); }
.stars-lg { font-size: 1.3rem; }
.voting-avg { font-size: 2.2rem; font-weight: 700; line-height: 1; }
.voting-dist .viz-track { height: 8px; }
.voting-dist .viz-bar { height: 8px; background: #f5a623; }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: .1rem; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { font-size: 1.9rem; line-height: 1; color: var(--bs-border-color); cursor: pointer; transition: color .1s, transform .1s; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: #f5a623; }
.star-input label:hover { transform: scale(1.12); }
.star-input input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: .25rem; }
.voting-list li { padding: .35rem 0; border-bottom: 1px solid var(--bs-border-color-translucent); }
.vote-now { white-space: nowrap; }
.voting-dist .viz-bar { min-width: 0; }
button.app-tab { border: 0; border-bottom: 3px solid transparent; background: none; font-family: inherit; }
button.app-tab.active { border-bottom-color: var(--brand); }
.mail-item.open:not(.unread) .mail-from::after { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--brand-300); margin-left: .4rem; vertical-align: middle; }

/* ---------- assistant: one surface (header, log, input), brand line on the left, soft shadow onto the page */
.ai-panel { --ai-bg: var(--brand-soft); --bs-offcanvas-bg: var(--ai-bg); border-left: 1px solid var(--brand) !important;
  box-shadow: -18px 0 42px -6px color-mix(in srgb, color-mix(in srgb, var(--brand-900) 40%, #000) 55%, transparent) !important; }
.ai-panel .offcanvas-header, .ai-panel form#aiForm, .ai-panel .ai-log { background: var(--ai-bg); border: 0; }
[data-bs-theme=dark] .ai-panel { --ai-bg: color-mix(in srgb, var(--brand-500) 10%, var(--bs-body-bg)); }
@media (min-width: 1200px) { body.ai-docked .ai-panel { border-left: 1px solid var(--brand) !important; box-shadow: -18px 0 42px -6px color-mix(in srgb, color-mix(in srgb, var(--brand-900) 40%, #000) 55%, transparent) !important; } }

/* ---------- record header: soft shadow underneath */
.detail-head { transition: box-shadow .2s; }
.detail-head.is-stuck, .detail-head:not(:has(+ .lo-header)) { box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--bs-body-color) 35%, transparent); }
.lo-header { box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--bs-body-color) 35%, transparent); }

/* ---------- pinned layout columns: docked to the window edge, own scroll area, optionally collapsible (desktop) */
.lo-col-body { display: contents; }
.lo-col-bar { display: none; }
@media (min-width: 992px) {
  .lo-col-body { display: block; }
  .lo-col.lo-pinned {
    --pin-top: calc(var(--app-header-h, 0px) + var(--detail-head-h, 0px));
    position: sticky; top: var(--pin-top); height: calc(100vh - var(--pin-top)); max-height: calc(100vh - var(--pin-top));
    margin-top: -1rem; border-top: 0 !important; border-bottom: 0 !important; border-radius: 0 !important;
    display: flex; flex-direction: column; align-self: flex-start;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent);
    box-shadow: 0 6px 24px -14px color-mix(in srgb, var(--bs-body-color) 40%, transparent); transition: flex-basis .2s, max-width .2s;
  }
  .lo-pinned-left { margin-left: -1.5rem; border-left: 0; padding: 1rem .75rem 0 1.5rem; }
  .lo-pinned-right { margin-right: -1.5rem; border-right: 0; padding: 1rem 1.5rem 0 .75rem; }
  .lo-pinned.lo-col-tinted { background: color-mix(in srgb, var(--lo-accent) 6%, var(--bs-body-bg)); }
  .lo-pinned > .lo-col-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: .25rem; }
  .lo-pinned .card > .card-header { top: 0 !important; }
  .lo-col-bar { display: flex; margin: -.35rem 0 .5rem; }
  .lo-pinned-right .lo-col-bar { justify-content: flex-start; }
  .lo-pinned-left .lo-col-bar { justify-content: flex-end; }
  .lo-col-toggle { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-secondary-color); border-radius: 50rem; padding: .15rem .6rem; font-size: .8rem; }
  .lo-col-toggle:hover { color: var(--brand); border-color: var(--brand-300); }
  .lo-pinned-left .lo-col-toggle { flex-direction: row-reverse; }
  .lo-pinned.is-collapsed { flex: 0 0 2.75rem !important; max-width: 2.75rem; padding-left: .35rem; padding-right: .35rem; overflow: hidden; }
  .lo-pinned.is-collapsed > .lo-col-body { display: none; }
  .lo-pinned.is-collapsed .lo-col-bar { margin: 0; justify-content: center; }
  .lo-pinned.is-collapsed .lo-col-toggle { flex-direction: column; border: 0; background: none; padding: .25rem 0; gap: .6rem; }
  .lo-pinned.is-collapsed .lo-col-label { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
  .lo-pinned.is-collapsed .lo-col-toggle .bi { transform: rotate(180deg); }
  .lo-pinned-right.is-collapsed .lo-col-label { transform: none; }
}
.lo-pin-menu { width: 270px; }
.lo-cv-pinned { border-style: solid; border-color: var(--brand-300); background: color-mix(in srgb, var(--brand-50) 50%, transparent); }
.lo-cv-pinned-left { border-left-width: 4px; }
.lo-cv-pinned-right { border-right-width: 4px; }
.lo-tinted .nav-pills { --bs-nav-pills-link-active-bg: var(--lo-accent); --bs-nav-link-color: var(--lo-ink); --bs-nav-link-hover-color: var(--lo-accent); }

/* ---------- campaigns: gantt, members, timeline */
.gantt { overflow: hidden; }
.gantt-scroll { overflow-x: auto; max-height: calc(100vh - var(--app-header-h, 0px) - var(--detail-head-h, 0px) - 7.5rem); overflow-y: auto; }
.g-row { display: flex; width: calc(260px + var(--track)); border-bottom: 1px solid var(--bs-border-color-translucent); min-height: 2.4rem; }
.g-name { position: sticky; left: 0; z-index: 2; flex: 0 0 260px; width: 260px; display: flex; align-items: center; gap: .4rem; padding: .35rem .75rem;
  background: var(--bs-body-bg); border-right: 1px solid var(--bs-border-color); font-size: .9rem; min-width: 0; }
.g-name a { color: var(--bs-body-color); min-width: 0; }
.g-name a:hover { color: var(--brand); }
.g-track { position: relative; flex: 0 0 var(--track); width: var(--track);
  background-image: linear-gradient(to right, var(--bs-border-color-translucent) 1px, transparent 1px); background-size: calc(var(--px, 1) * 1px) 100%; }
.g-head { position: sticky; top: 0; z-index: 4; background: var(--bs-body-bg); min-height: 0; }
.g-head .g-name { z-index: 5; font-weight: 600; font-size: .8rem; color: var(--bs-secondary-color); }
.g-head .g-track { background: var(--bs-body-bg); }
.g-months, .g-ticks { display: flex; }
.g-months span, .g-ticks span { flex: 0 0 auto; overflow: hidden; white-space: nowrap; border-left: 1px solid var(--bs-border-color); padding: .2rem .35rem; font-size: .75rem; }
.g-months span { font-weight: 600; }
.g-ticks span { color: var(--bs-secondary-color); border-top: 1px solid var(--bs-border-color-translucent); }
.g-ticks-day span { text-align: center; padding: .2rem 0; }
.g-ticks span.we { background: var(--bs-tertiary-bg); }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--brand); z-index: 1; opacity: .7; }
.g-bar { position: absolute; top: .35rem; bottom: .35rem; z-index: 1; display: flex; align-items: center; gap: .4rem; padding: 0 .5rem; min-width: 4px;
  border-radius: .45rem; background: color-mix(in srgb, var(--bc) 22%, var(--bs-body-bg)); border: 1px solid var(--bc);
  border-left-width: 4px; color: var(--bs-body-color); text-decoration: none; overflow: hidden; white-space: nowrap; font-size: .8rem; }
.g-bar:hover { background: color-mix(in srgb, var(--bc) 35%, var(--bs-body-bg)); color: var(--bs-body-color); }
.g-bar span { overflow: hidden; text-overflow: ellipsis; }
.g-bar small { opacity: .7; }
.g-bar.cut-l { border-left-style: dashed; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.g-bar.cut-r { border-right-style: dashed; border-top-right-radius: 0; border-bottom-right-radius: 0; }
@media (max-width: 767.98px) { .g-row { width: calc(150px + var(--track)); } .g-name { flex-basis: 150px; width: 150px; } }
.member-dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; background: var(--sc, var(--brand)); flex: 0 0 auto; vertical-align: middle; }
.member-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 50rem; border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color); text-decoration: none; font-size: .8rem; background: var(--bs-body-bg); }
.member-chip span { color: var(--bs-secondary-color); }
.member-chip.active { border-color: var(--sc, var(--brand)); background: color-mix(in srgb, var(--sc, var(--brand)) 14%, var(--bs-body-bg)); font-weight: 600; }
.member-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; }
.ct-track { height: 10px; border-radius: 10px; background: color-mix(in srgb, var(--ct) 16%, var(--bs-body-bg)); overflow: hidden; }
.ct-bar { display: block; height: 100%; background: var(--ct); border-radius: 10px; }
.g-lbl { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: inherit; will-change: transform; }

/* ---------- campaign list e-mails */
.campaign-mailings .cm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .75rem; align-items: center; padding: .3rem 0; border-top: 1px solid var(--bs-border-color-translucent); color: var(--bs-body-color); text-decoration: none; font-size: .875rem; }
.campaign-mailings .cm-row:first-of-type { border-top: 0; }
.campaign-mailings .cm-row:hover .cm-subject { color: var(--brand); }
.campaign-mailings .cm-meta { color: var(--bs-secondary-color); font-size: .8rem; }
.cm-stats { display: inline-flex; gap: .6rem; font-size: .8rem; color: var(--bs-secondary-color); }
.cm-list { max-height: 60vh; overflow: auto; }
.cm-list label { cursor: pointer; }
button.member-chip { background: var(--bs-body-bg); }
button.member-chip:disabled { opacity: .45; }
.cm-body { white-space: normal; max-height: 50vh; overflow: auto; }
@media (max-width: 575.98px) { .campaign-mailings .cm-row { grid-template-columns: minmax(0, 1fr) auto; } .campaign-mailings .cm-meta { display: none; } }

/* ---------- start page */
.kpi-grid-col { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.lo-text .card-body > p:last-child { margin-bottom: 0; }

/* ---------- page background (settings → Darstellung): global or per area */
body.has-app-bg { background: var(--app-bg); background-attachment: fixed; }
[data-bs-theme=dark] body.has-app-bg { background: var(--app-bg-dark, var(--app-bg)); background-attachment: fixed; }
.bg-preview { height: 9rem; border-radius: .75rem; border: 1px solid var(--bs-border-color); position: relative; overflow: hidden; background-attachment: scroll !important; }
.bg-preview .bg-preview-card { position: absolute; left: 1rem; right: 35%; top: 1.25rem; bottom: 1.25rem; border-radius: .5rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); padding: .6rem .8rem; }
.bg-preview .bg-preview-card i { display: block; height: .45rem; border-radius: 1rem; background: var(--bs-secondary-bg); margin-bottom: .45rem; }
.bg-preview .bg-preview-title { position: absolute; right: 1rem; top: 1rem; font-weight: 600; color: var(--brand-700, var(--bs-body-color)); }
.bg-swatch { display: inline-block; width: 3.25rem; height: 2rem; border-radius: .4rem; border: 1px solid var(--bs-border-color); vertical-align: middle; background-attachment: scroll !important; }


/* ---------- sticky page header (lists, pipeline, timeline, start page) – same look as the record header */
.page-head { position: sticky; top: var(--app-header-h, 0); z-index: 990; background: var(--bs-body-bg); margin: -1rem -1rem 1rem; padding: .75rem 1rem;
  border-bottom: 1px solid var(--bs-border-color); box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--bs-body-color) 35%, transparent); }
.page-head h1 { line-height: 1.2; }
.page-head .page-sub { font-size: .8rem; color: var(--bs-secondary-color); }
@media (min-width: 992px) { .page-head { margin: -1rem -1.5rem 1rem; padding: .75rem 1.5rem; } }
@media (max-width: 575.98px) {
  .page-head { padding-top: .5rem; padding-bottom: .5rem; }
  .page-head .obj-icon { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
  .page-head h1 { font-size: 1.05rem; }
}

/* start page: greeting and key figures in the sticky header, each figure a rounded tile in its own colour (--kc) */
@property --kx { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --ky { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
.home-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
.kpi-strip { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-end; gap: .5rem; margin-left: auto; }
.kpi-item { --kc: var(--brand); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-width: 7.5rem; padding: .45rem 1rem .5rem; border-radius: 1rem; text-decoration: none;
  color: color-mix(in srgb, var(--kc) 82%, var(--bs-body-color)); background: color-mix(in srgb, var(--kc) 9%, var(--bs-body-bg));
  border: 1px solid color-mix(in srgb, var(--kc) 20%, transparent);
  transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease, transform .45s ease; }
.kpi-item::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
  background: radial-gradient(140% 120% at var(--kx) var(--ky), color-mix(in srgb, var(--kc) 30%, transparent), transparent 65%);
  transition: opacity .5s ease, --kx .35s ease-out, --ky .35s ease-out; }
.kpi-item:hover, .kpi-item:focus-visible { text-decoration: none; background-color: color-mix(in srgb, var(--kc) 14%, var(--bs-body-bg)); border-color: color-mix(in srgb, var(--kc) 38%, transparent);
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--kc) 75%, transparent); transform: translateY(-1px); }
.kpi-item:hover::before, .kpi-item:focus-visible::before { opacity: 1; }
.kpi-item .kpi-label { font-size: .74rem; font-weight: 500; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: .3rem;
  color: color-mix(in srgb, var(--kc) 62%, var(--bs-secondary-color)); }
.kpi-item .kpi-value { font-size: 1.35rem; font-weight: 700; line-height: 1.15; display: flex; align-items: baseline; justify-content: center; gap: .4rem; }
.kpi-item .kpi-note { font-size: .7rem; font-weight: 400; color: color-mix(in srgb, var(--kc) 50%, var(--bs-secondary-color)); white-space: nowrap; }
.kpi-item.is-danger .kpi-value, .kpi-item.is-danger .kpi-note { color: var(--bs-danger); }
@media (prefers-reduced-motion: reduce) { .kpi-item, .kpi-item::before { transition: none; } .kpi-item:hover { transform: none; } }
@media (max-width: 767.98px) {
  .kpi-strip { flex-wrap: nowrap; overflow-x: auto; margin-left: 0; width: 100%; justify-content: flex-start; scrollbar-width: none; padding-bottom: 2px; }
  .kpi-item { min-width: auto; flex: none; }
}
/* layout editor: key figure chips preview their colour */
.lo-head-chip.is-kpi { text-align: center; border-radius: 1rem; background: color-mix(in srgb, var(--kc, var(--brand)) 9%, var(--bs-body-bg));
  border: 1px solid color-mix(in srgb, var(--kc, var(--brand)) 20%, transparent); color: color-mix(in srgb, var(--kc, var(--brand)) 82%, var(--bs-body-color)); }
.lo-head-chip.is-kpi .dropdown { position: absolute; left: .1rem; top: .05rem; }
.lo-head-chip.is-kpi .lo-tool { opacity: 0; padding: 0 .2rem; transition: opacity .15s; }
.lo-head-chip.is-kpi:hover .lo-tool, .lo-head-chip.is-kpi .lo-tool:focus, .lo-head-chip.is-kpi .lo-tool.show { opacity: 1; }
.lo-head-chip.is-kpi { padding-left: 1.6rem; }

/* ---------- list tables: sticky column header and first column(s) inside their own scroll area (desktop) */
@media (min-width: 768px) {
  .lv-scroll { max-height: calc(100vh - var(--app-header-h, 0px) - var(--detail-head-h, 0px) - 2rem); overflow: auto; overscroll-behavior: contain; }
  .lv-scroll > table { border-collapse: separate; border-spacing: 0; }
  .lv-scroll th, .lv-scroll td { white-space: nowrap; }
  .lv-scroll td.lv-editing { overflow: visible; min-width: 12rem; }
  .lv-scroll td { max-width: 26rem; overflow: hidden; text-overflow: ellipsis; }
  .lv-scroll tr.lv-group > td { max-width: none; }
  .lv-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--bs-body-bg); box-shadow: inset 0 -1px 0 var(--bs-border-color); border-bottom: 0; }
  .lv-scroll .lv-sticky-col { position: sticky; z-index: 1; background-color: var(--bs-body-bg); }
  .lv-scroll thead th.lv-sticky-col { z-index: 3; }
  .lv-scroll tr.lv-selected > td.lv-sticky-col { background-color: color-mix(in srgb, var(--brand) 9%, var(--bs-body-bg)); }
  .lv-scroll.is-scrolled-x td.lv-sticky-last {
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))), 8px 0 8px -6px color-mix(in srgb, var(--bs-body-color) 22%, transparent); }
  .lv-scroll.is-scrolled-x th.lv-sticky-last { box-shadow: inset 0 -1px 0 var(--bs-border-color), 8px 0 8px -6px color-mix(in srgb, var(--bs-body-color) 22%, transparent); }
}

/* ---------- pinned columns: nothing below the layout grid, so a pinned column ends exactly at the window bottom */
@media (min-width: 992px) {
  body:has(.lo-pinned) .app-main { padding-bottom: 0 !important; }
  .lo-grid:has(.lo-pinned) > .lo-col:not(.lo-pinned) { padding-bottom: 1rem; }
  body:has(.fab-bar) .lo-grid:has(.lo-pinned) > .lo-col:not(.lo-pinned) { padding-bottom: 5rem; }
  body:has(.fab-bar) .lo-pinned-right > .lo-col-body { padding-bottom: 4.5rem; }
}


/* ---------- dock tabs (assistant + collaboration docked together) */
.dock-tabs { display: none; gap: .25rem; }
.dock-tab { border: 0; background: none; padding: .35rem .7rem; border-radius: 2rem; font-size: .875rem; font-weight: 600; color: var(--bs-secondary-color); }
.dock-tab.active { background: var(--brand); color: var(--brand-on, #fff); }
.dock-tab:not(.active):hover { color: var(--brand); background: var(--brand-soft); }

/* ---------- collaboration panel */
.collab-panel { --bs-offcanvas-width: 440px; }
.collab-panel .offcanvas-header { gap: .5rem; padding-bottom: .5rem; }
.cm-stage { overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.cm-stage > * { min-height: 0; }
.cm-home { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.cm-tabs { flex: 0 0 auto; border-bottom: 1px solid var(--bs-border-color); }
.cm-tabs .nav-link { font-size: .875rem; padding: .45rem .1rem; }
.cm-home-body { overflow-y: auto; flex: 1 1 auto; }
.cm-search-results, .cm-form { overflow-y: auto; }
.cm-section-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); margin-bottom: .25rem; }
.cm-empty { color: var(--bs-secondary-color); font-size: .875rem; }
.cm-notif.is-unread { background: color-mix(in srgb, var(--brand) 6%, var(--bs-body-bg)); box-shadow: inset 3px 0 0 var(--brand); }
.cm-snippet { color: var(--bs-body-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-reason { font-weight: 500; font-size: .68rem; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.cm-reason-mention { background: var(--brand-soft); color: var(--brand); }
.cm-reason-direct { background: color-mix(in srgb, var(--series-2, #2a78d6) 15%, var(--bs-body-bg)); color: var(--series-2, #2a78d6); }
.cm-pick { max-height: 11rem; overflow-y: auto; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .35rem .6rem; }
.cm-view { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.cm-view-head { display: flex; align-items: center; gap: .35rem; padding: .25rem .75rem .5rem .5rem; border-bottom: 1px solid var(--bs-border-color); }
.cm-log { overflow-y: auto; flex: 1 1 auto; padding: .75rem; min-height: 6rem; }
.cm-view-record .cm-log { max-height: 26rem; }
.cm-msg { display: flex; gap: .6rem; padding: .35rem 0; }
.cm-avatar { flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: .72rem; font-weight: 700; }
.cm-from-agent .cm-avatar { background: var(--brand); color: var(--brand-on, #fff); font-size: .9rem; }
.cm-own .cm-avatar { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
.cm-main { min-width: 0; flex: 1 1 auto; }
.cm-meta { font-size: .8rem; display: flex; flex-wrap: wrap; gap: .1rem .4rem; align-items: baseline; }
.cm-meta time { font-size: .72rem; }
.cm-body { font-size: .9rem; word-break: break-word; }
.cm-from-agent .cm-body { background: color-mix(in srgb, var(--brand) 5%, var(--bs-body-bg)); border: 1px solid var(--brand-soft); border-radius: .2rem .75rem .75rem .75rem; padding: .4rem .65rem; }
.cm-body ul, .cm-body ol { margin: .2rem 0; padding-left: 1.2rem; }
.cm-body blockquote { margin: .2rem 0; padding: .1rem .6rem; border-left: 3px solid var(--bs-border-color); color: var(--bs-secondary-color); }
.cm-body code { background: var(--bs-secondary-bg); padding: .05rem .3rem; border-radius: .25rem; }
.cm-mention { color: var(--brand); font-weight: 600; background: var(--brand-soft); border-radius: .3rem; padding: 0 .2rem; }
.cm-mention.cm-me { background: var(--brand); color: var(--brand-on, #fff); }
.cm-agent i { margin-right: .15rem; }
.cm-chan { font-weight: 600; text-decoration: none; }
.cm-rec { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid var(--bs-border-color); border-radius: 2rem; padding: 0 .5rem; font-size: .85em; text-decoration: none; background: var(--bs-body-bg); }
.cm-rec .bi { color: var(--brand); }
.cm-locked { color: var(--bs-secondary-color); font-weight: 400; }
.cm-files { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.cm-img img { max-width: 220px; max-height: 160px; border-radius: .5rem; border: 1px solid var(--bs-border-color); object-fit: cover; }
.cm-file { display: inline-flex; gap: .3rem; align-items: center; font-size: .8rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .2rem .5rem; text-decoration: none; }
.cm-thinking .cm-body { color: var(--bs-secondary-color); }
.cm-composer { position: relative; border-top: 1px solid var(--bs-border-color); padding: .4rem .6rem .6rem; background: var(--bs-body-bg); flex: 0 0 auto; }
.cm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; margin-bottom: .3rem; }
.cm-tool { border: 0; background: none; color: var(--bs-secondary-color); border-radius: .35rem; padding: .15rem .4rem; cursor: pointer; line-height: 1.2; }
.cm-tool:hover { background: var(--bs-secondary-bg); color: var(--brand); }
.cm-sep { width: 1px; height: 1.1rem; background: var(--bs-border-color); margin: 0 .25rem; }
.cm-input-row { display: flex; gap: .4rem; align-items: flex-end; }
.cm-input-row textarea { resize: none; font-size: .9rem; max-height: 12rem; }
.cm-files-pending { display: flex; flex-wrap: wrap; gap: .3rem; }
.cm-files-pending:not(:empty) { margin-bottom: .35rem; }
.cm-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; background: var(--bs-secondary-bg); border-radius: 2rem; padding: .1rem .2rem .1rem .55rem; }
.cm-chip button { border: 0; background: none; color: var(--bs-secondary-color); padding: 0 .2rem; }
.cm-suggest { position: absolute; left: .6rem; right: .6rem; bottom: 100%; max-height: 16rem; overflow-y: auto; margin-bottom: .2rem; }
.cm-suggest.show { display: block; }
.cm-suggest .dropdown-item { display: flex; gap: .5rem; align-items: center; font-size: .875rem; }
.cm-suggest .dropdown-item small { color: var(--bs-secondary-color); margin-left: auto; }
.cm-suggest .dropdown-item.active small { color: inherit; }
.cm-record .cm-composer { border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius); }

/* ---------- collaboration panel: same surface as the assistant, icon rail on the left */
.collab-panel { --cm-bg: var(--brand-soft); --bs-offcanvas-bg: var(--cm-bg); border-left: 1px solid var(--brand) !important;
  box-shadow: -18px 0 42px -6px color-mix(in srgb, color-mix(in srgb, var(--brand-900) 40%, #000) 55%, transparent) !important; }
[data-bs-theme=dark] .collab-panel { --cm-bg: color-mix(in srgb, var(--brand-500) 10%, var(--bs-body-bg)); }
.collab-panel .offcanvas-header, .collab-panel .cm-composer, .collab-panel .cm-view-head, .collab-panel .cm-list-head,
.collab-panel .cm-searchbar, .collab-panel .cm-group-head { background: var(--cm-bg); }
.collab-panel .list-group { --bs-list-group-bg: transparent; }
.collab-panel .cm-view-head, .collab-panel .cm-composer { border-color: color-mix(in srgb, var(--brand) 18%, transparent); }
@media (min-width: 1200px) { body.collab-docked .collab-panel { border-left: 1px solid var(--brand) !important;
  box-shadow: -18px 0 42px -6px color-mix(in srgb, color-mix(in srgb, var(--brand-900) 40%, #000) 55%, transparent) !important; } }
.cm-rail { flex: 0 0 4.1rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .25rem 0 .75rem;
  border-right: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); }
.cm-rail-btn { position: relative; width: 3.4rem; border: 0; background: none; border-radius: .75rem; padding: .45rem 0 .3rem; color: var(--bs-secondary-color);
  display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.cm-rail-btn .bi { font-size: 1.2rem; line-height: 1; }
.cm-rail-label { font-size: .64rem; font-weight: 600; }
.cm-rail-btn:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.cm-rail-btn.active { color: var(--brand); background: var(--bs-body-bg); box-shadow: 0 1px 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.cm-rail-badge, .cm-count { min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 1rem; background: var(--bs-danger); color: #fff;
  font-size: .66rem; font-weight: 700; line-height: 1.15rem; text-align: center; }
.cm-rail-badge { position: absolute; top: .15rem; right: .35rem; box-shadow: 0 0 0 2px var(--cm-bg); }
.cm-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cm-searchbar { padding: .25rem .75rem .5rem; flex: 0 0 auto; }
.cm-stage { flex: 1 1 auto; }
.cm-list { overflow-y: auto; flex: 1 1 auto; padding-bottom: 1rem; }
.cm-list-head { padding: .5rem .75rem; position: sticky; top: 0; z-index: 2; }
.cm-group + .cm-group { margin-top: .25rem; }
.cm-group-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .35rem; margin: 0; padding: .55rem .75rem .35rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color);
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 12%, transparent); }
.cm-group-more { margin-left: auto; border: 0; background: none; color: var(--brand); font-size: .72rem; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 0; }
.cm-item { padding: .45rem .75rem; border: 0; }
.cm-item:hover { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.cm-avatar-sm { flex: 0 0 1.85rem; width: 1.85rem; height: 1.85rem; font-size: .85rem; }
.cm-avatar-chan { background: var(--bs-body-bg); color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); border-radius: .5rem; }
.cm-avatar-rec { background: var(--bs-body-bg); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); border-radius: .5rem; }
.collab-panel .cm-notif { background: transparent; border-left: 0; border-right: 0; }
.collab-panel .cm-notif.is-unread { background: color-mix(in srgb, var(--bs-body-bg) 70%, transparent); }
.collab-panel .cm-log { background: transparent; }
.collab-panel .cm-from-agent .cm-body { background: var(--bs-body-bg); }
.min-w-0 { min-width: 0 !important; }
.collab-panel .cm-list { max-height: none; }

/* ---------- layout elements: accordion, tabs, carousel, spacer */
.lo-spacer { height: var(--h, 24px); }
@media (max-width: 991.98px) { .lo-spacer { height: calc(var(--h, 24px) / 2); } }
.lo-container-title { font-weight: 600; margin-bottom: .4rem; }
.lo-accordion { --bs-accordion-btn-padding-y: .7rem; --bs-accordion-body-padding-x: .75rem; --bs-accordion-body-padding-y: .75rem;
  --bs-accordion-active-bg: color-mix(in srgb, var(--lo-accent, var(--brand)) 10%, var(--bs-body-bg)); --bs-accordion-active-color: var(--bs-body-color);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--lo-accent, var(--brand)) 25%, transparent); }
.lo-accordion .accordion-button { font-weight: 600; }
.lo-accordion .accordion-body > .lo-inner:last-child > .card, .lo-tabs-body .tab-pane > .lo-inner:last-child > .card,
.lo-carousel .carousel-item > .lo-inner:last-child > .card { margin-bottom: 0 !important; }
.lo-tabs-nav { border-bottom-color: var(--bs-border-color); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.lo-tabs-nav .nav-link { white-space: nowrap; color: var(--bs-secondary-color); font-weight: 600; font-size: .9rem; }
.lo-tabs-nav .nav-link.active { color: var(--lo-accent, var(--brand)); border-top: 2px solid var(--lo-accent, var(--brand)); }
.lo-tabs-body { border: 1px solid var(--bs-border-color); border-top: 0; border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius); padding: .75rem; background: var(--bs-body-bg); }
.lo-carousel .carousel { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--bs-body-bg); padding: .5rem .75rem .75rem; }
.lo-carousel-bar { display: flex; align-items: center; justify-content: center; gap: .25rem; margin-bottom: .35rem; }
.lo-carousel .lo-car-dots { position: static; margin: 0; gap: .35rem; }
.lo-carousel .lo-car-dots [data-bs-target] { width: .55rem; height: .55rem; border-radius: 50%; border: 0; margin: 0; background-color: var(--lo-accent, var(--brand)); opacity: .3; }
.lo-carousel .lo-car-dots .active { opacity: 1; }
.lo-car-btn { color: var(--lo-accent, var(--brand)); padding: .1rem .4rem; }
.lo-slide-title { font-weight: 600; margin-bottom: .5rem; }
.lo-carousel .carousel-item { transition-duration: .4s; }

/* editor */
.lo-cv-container { border: 1px dashed color-mix(in srgb, var(--lo-accent, var(--brand)) 45%, var(--bs-border-color)); border-radius: .75rem; padding: .5rem; background: color-mix(in srgb, var(--bs-body-bg) 70%, transparent); }
.lo-cv-container-title { font-weight: 600; font-size: .9rem; margin: 0 .25rem .4rem; }
.lo-cv-pane + .lo-cv-pane { margin-top: .5rem; }
.lo-cv-pane-head { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; padding: .3rem .5rem; border-radius: .5rem;
  background: color-mix(in srgb, var(--lo-accent, var(--brand)) 10%, var(--bs-body-bg)); color: var(--bs-body-color); }
.lo-cv-tabs .lo-cv-pane-head { border-radius: .5rem .5rem 0 0; }
.lo-cv-pane-blocks { min-height: 3rem; padding: .4rem .1rem .1rem; }
.lo-cv-spacer { display: grid; place-items: center; border: 1px dashed var(--bs-border-color); border-radius: .5rem; font-size: .72rem; color: var(--bs-secondary-color);
  background: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--bs-border-color) 35%, transparent) 6px 7px); min-height: 8px; }
/* inside a carousel (overflow hidden) element titles cannot stick to the page header */
body.has-detail-head .app-main .lo-carousel .card > .card-header { position: static !important; box-shadow: none !important; }

.mail-pane-msg { padding: 1.5rem; }
.lv-bulk-sep { width: 1px; height: 1.4rem; background: var(--brand-300); margin: 0 .25rem; }
.bg-swatch-pair { display: inline-flex; border-radius: .4rem; overflow: hidden; border: 1px solid var(--bs-border-color); }
.bg-swatch-pair .bg-swatch { border: 0; border-radius: 0; width: 2.4rem; }
.bg-dark-box { border-top: 1px solid var(--bs-border-color-translucent); padding-top: .75rem; }

/* ---------- cards: rounder, no frame, no shadow under the title */
.card { --bs-card-border-radius: 1rem; --bs-card-inner-border-radius: 1rem; --bs-card-border-width: 0; }
.card > .card-header { border-bottom: 1px solid var(--bs-border-color-translucent); }
body.has-detail-head .app-main .card > .card-header:not(.modal .card-header) { box-shadow: none; }
.lv > .card, .lv .card:has(> .lv-scroll) { overflow: hidden; }
.lv > .lv-filterbar { overflow: visible; position: relative; z-index: 5; }  /* its dropdowns (genres, tags …) open over the table */
.lo-tinted .card { border: 0; }

/* table column titles: regular weight, a bit smaller */
.table > thead th, .table > thead td { font-weight: 400; font-size: .8rem; }

/* cards inside pinned columns, accordions, tabs and carousels: no surface, the title only gets a line
   in the element's colour (or the container's) */
:is(.lo-pinned, .lo-accordion, .lo-tabs-body, .lo-carousel) .card { --bs-card-bg: transparent; background: transparent !important; box-shadow: none; }
/* their titles stay sticky (inside a pinned column at its top, otherwise under the record header) on the surface behind them */
:is(.lo-pinned, .lo-accordion, .lo-tabs-body, .lo-carousel) .card > .card-header {
  background: var(--lo-sticky-bg, var(--bs-body-bg)) !important; box-shadow: none !important; z-index: 2;
  border-bottom: 1px solid var(--lo-accent, var(--bs-border-color)); padding-left: 0; padding-right: 0; }
:is(.lo-pinned, .lo-accordion, .lo-tabs-body, .lo-carousel) .card > .card-body,
:is(.lo-pinned, .lo-accordion, .lo-tabs-body, .lo-carousel) .card > .card-footer { padding-left: 0; padding-right: 0; background: transparent; }
:is(.lo-pinned, .lo-accordion, .lo-tabs-body, .lo-carousel) .card > .list-group { --bs-list-group-bg: transparent; }
:is(.lo-pinned, .lo-accordion, .lo-tabs-body, .lo-carousel) .card .table { --bs-table-bg: transparent; }

/* inverted elements: dark in the light mode and vice versa (data-bs-theme set by app.js) */
.lo-inverted { background: var(--bs-body-bg); color: var(--bs-body-color); border-radius: 1rem; }
.lo-block.lo-inverted { padding: .75rem .75rem 0; margin-bottom: 1rem; }
.lo-block.lo-inverted > .card:last-child, .lo-block.lo-inverted > .lo-container:last-child { margin-bottom: .75rem !important; }
.lo-col.lo-inverted { padding: .75rem .75rem 0; }
/* phones: columns dissolve (blocks are sorted by their mobile position), so an inverted column's surface
   moves onto each of its elements; the inverted colours come along via data-bs-theme on the column */
@media (max-width: 991.98px) {
  .lo-col.lo-inverted > .lo-col-body > .lo-block:not(.lo-inverted):has(> *) { background: var(--bs-body-bg); color: var(--bs-body-color); border-radius: 1rem; padding: .75rem .75rem 0; margin-bottom: 1rem; }
  .lo-col.lo-inverted > .lo-col-body > .lo-block:not(.lo-inverted) > :is(.card, .lo-container):last-child { margin-bottom: .75rem !important; }
}
.lo-inner.lo-inverted { padding: .5rem; margin-bottom: .75rem; }
.edit-modal .modal-content { border-radius: 1rem; border: 0; }
.edit-modal-form .sticky-actions { position: sticky; bottom: -1rem; background: var(--bs-modal-bg, var(--bs-body-bg)); padding: .75rem 0; margin-bottom: -1rem; }

/* ---------------------------------------------------------------- form layout editor (Objektmanager) */
.fe-grid { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1rem; align-items: start; }
@media (max-width: 991.98px) { .fe-grid { grid-template-columns: 1fr; } }
.fe-pool { position: sticky; top: 1rem; }
.fe-pool-list { max-height: 60vh; overflow-y: auto; }
.fe-section { outline: 2px solid transparent; transition: outline-color .15s; }
.fe-section.fe-active { outline-color: var(--bs-primary-border-subtle); }
.fe-title { flex: 1 1 12rem; font-weight: 600; }
.fe-fields { display: grid; grid-template-columns: 1fr; gap: .4rem; min-height: 2.75rem; border-radius: .75rem; padding: .25rem; }
.fe-fields.fe-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 575.98px) { .fe-fields.fe-cols-2 { grid-template-columns: 1fr; } }
.fe-fields.fe-drop { background: var(--bs-primary-bg-subtle); }
.fe-chip { display: flex; align-items: center; gap: .35rem; padding: .35rem .5rem; border: 1px solid var(--bs-border-color); border-radius: .6rem;
  background: var(--bs-body-bg); cursor: grab; font-size: .875rem; min-width: 0; }
.fe-chip:hover, .fe-chip:focus-visible { border-color: var(--bs-primary); }
.fe-chip.dragging { opacity: .4; }
.fe-chip-custom { border-style: dashed; }
.fe-grip { color: var(--bs-tertiary-color); }
.fe-x { margin-left: auto; padding: 0 .25rem; color: var(--bs-secondary-color); }
.fe-empty { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: .35rem; border: 1px dashed var(--bs-border-color); border-radius: .6rem; padding: .5rem; }
.form-section-title { margin-bottom: .75rem; }

/* ---------------------------------------------------------------- data quality element */
.dq-pct { font-weight: 600; font-variant-numeric: tabular-nums; }
.dq-bar { display: flex; gap: 3px; width: 100%; height: .75rem; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 1rem; }
.dq-bar:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 3px; }
.dq-seg { position: relative; flex: var(--g) 1 0; min-width: .5rem; height: 100%; overflow: hidden; border-radius: 1rem;
  background: var(--bs-secondary-bg); }
.dq-fill { position: absolute; inset: 0 auto 0 0; width: var(--fill); background: var(--lo-accent, var(--bs-warning)); border-radius: inherit; transition: width .4s; }
.dq-full .dq-fill { background: var(--bs-success); }
.dq-bar:hover .dq-seg { filter: brightness(.95); }
.dq-legend { display: flex; gap: 3px; margin-top: .4rem; font-size: .75rem; color: var(--bs-secondary-color); }
.dq-leg { flex: var(--g) 1 0; display: flex; gap: .25rem; min-width: 0; }
.dq-leg.dq-ok .dq-count { color: var(--bs-success); }
.dq-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dq-modal .modal-content { border-radius: 1rem; border: 0; }
.lo-dq-on { background: var(--bs-primary-bg-subtle); }

/* ---------------------------------------------------------------- regular cards: white title bar (a chosen colour still tints it) */
.card { --bs-card-cap-bg: var(--bs-card-bg, var(--bs-body-bg)); }
body.has-detail-head .app-main .card > .card-header:not(.modal .card-header) { background: var(--bs-card-bg, var(--bs-body-bg)); }
body.has-detail-head .app-main .lo-tinted .card > .card-header:not(.modal .card-header) { background: color-mix(in srgb, var(--lo-accent) 15%, var(--bs-body-bg)); }

/* ---------------------------------------------------------------- containers: own surface, radius 1rem, no outer border.
   In pinned columns they sit directly on the column (no surface of their own). */
.lo-pinned { --lo-sticky-bg: var(--bs-body-bg); }
.lo-pinned.lo-col-tinted { --lo-sticky-bg: color-mix(in srgb, var(--lo-accent) 6%, var(--bs-body-bg)); }
.lo-container { --lo-surface: var(--bs-body-bg); --lo-sticky-bg: var(--bs-body-bg); }
.lo-pinned .lo-container { --lo-surface: transparent; --lo-sticky-bg: inherit; }
@media (max-width: 991.98px) { .lo-pinned .lo-container { --lo-surface: var(--bs-body-bg); --lo-sticky-bg: var(--bs-body-bg); } }
.lo-accordion { --bs-accordion-border-width: 0; --bs-accordion-border-radius: 1rem; --bs-accordion-inner-border-radius: 1rem;
  --bs-accordion-bg: var(--lo-surface); --bs-accordion-btn-bg: var(--lo-surface); border-radius: 1rem; }
.lo-accordion .accordion-item + .accordion-item { border-top: 1px solid var(--bs-border-color-translucent); }
.lo-accordion .accordion-button:not(.collapsed) { box-shadow: inset 0 -1px 0 var(--bs-border-color-translucent); }
.lo-carousel .carousel { border: 0; border-radius: 1rem; background: var(--lo-surface); }
/* tabs live in the element's own title bar */
.lo-tabs { background: var(--lo-surface); border-radius: 1rem; }
.lo-tabs-head { display: flex; align-items: flex-end; gap: .25rem 1rem; padding: 0 1rem; border-bottom: 1px solid var(--bs-border-color-translucent); min-width: 0; }
.lo-tabs-head .lo-container-title { margin: 0; padding: .7rem 0; white-space: nowrap; }
.lo-tabs-nav { border: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; gap: .15rem; min-width: 0; }
.lo-tabs-nav .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: .7rem .6rem .6rem; margin-bottom: -1px; background: none; }
.lo-tabs-nav .nav-link:hover { color: var(--lo-accent, var(--brand)); }
.lo-tabs-nav .nav-link.active { border-top: 0; border-bottom-color: var(--lo-accent, var(--brand)); background: none; }
.lo-tabs-body { border: 0; border-radius: 0 0 1rem 1rem; padding: .75rem 1rem; background: transparent; }
.lo-pinned .lo-tabs-head, .lo-pinned .lo-tabs-body { padding-left: 0; padding-right: 0; }
@media (max-width: 991.98px) { .lo-pinned .lo-tabs-head, .lo-pinned .lo-tabs-body { padding-left: 1rem; padding-right: 1rem; } }
.lo-tinted .lo-tabs-head { border-bottom-color: color-mix(in srgb, var(--lo-accent) 35%, transparent); }

/* ---------------------------------------------------------------- kanban (pipeline, lists): columns without frame, white cards */
.kanban-col { border: 0; border-radius: 1rem; background: color-mix(in srgb, var(--bs-body-color) 5%, var(--bs-body-bg)); }
.kanban-col header { border-radius: 1rem 1rem 0 0; }
.kanban-items.drag-over { border-radius: 0 0 1rem 1rem; }
.kanban-card { background: var(--bs-body-bg); border-color: transparent; border-radius: .75rem; box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-body-color) 10%, transparent); }
.kanban-card:hover { border-color: var(--bs-border-color); }

/* ---------------------------------------------------------------- coloured badges (genres, tags) */
.badge.badge-color { background: var(--badge-bg) !important; color: var(--badge-ink) !important; border: 0 !important; }
.badge-link { text-decoration: none; }
.badge-link:hover .badge { filter: brightness(.92); }

/* ---------------------------------------------------------------- pipeline card editor */
.pc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
.pc-side { position: sticky; top: calc(var(--app-header-h, 0px) + 5rem); }
.pc-preview-col { max-height: none; }
@media (max-width: 991.98px) { .pc-grid { grid-template-columns: 1fr; } .pc-side { position: static; order: -1; } }

/* ---------------------------------------------------------------- logo / photo in front of the record title */
.obj-avatar { position: relative; flex: 0 0 auto; width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center; padding: 0;
  background: var(--brand-soft); color: var(--brand); font-size: 1.35rem; border: 1px dashed var(--brand-accent); overflow: visible; }
.obj-avatar.has-photo { border: 1px solid var(--bs-border-color-translucent); background: var(--bs-body-bg); }
.obj-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.obj-avatar-cam { position: absolute; right: -.2rem; bottom: -.2rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--bs-body-bg); color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); font-size: .7rem; opacity: 0; transition: opacity .15s; }
.obj-avatar:hover .obj-avatar-cam, .obj-avatar:focus-visible .obj-avatar-cam, .obj-avatar:not(.has-photo) .obj-avatar-cam { opacity: 1; }
button.obj-avatar[tabindex="-1"] { cursor: default; }
@media (max-width: 575.98px) { .obj-avatar { width: 2.6rem; height: 2.6rem; font-size: 1.05rem; } }

/* ---------------------------------------------------------------- tags */
.tag-chip { display: inline-flex; align-items: center; }
.tag-chip .badge { font-size: .8rem; padding: .35em .6em; }
.tag-x { border: 0; background: none; padding: 0 .15rem; color: var(--bs-secondary-color); line-height: 1; }
.tag-x:hover { color: var(--bs-danger); }
.tag-menu { min-width: 15rem; }
.tag-options { max-height: 16rem; overflow-y: auto; }
.tag-tile { flex: 0 0 auto; display: flex; flex-direction: column; gap: .35rem; min-width: 10rem; }
.tag-tile:hover { box-shadow: 0 0 0 1px var(--brand-300); }

/* ---------------------------------------------------------------- mail folders: menu per folder, unread in bold */
.mail-folder-row { position: relative; display: flex; align-items: center; }
.mail-folder-row > .mail-folder { flex: 1 1 auto; min-width: 0; }
.mail-folder.has-unread > span:not(.badge) { font-weight: 600; }
.mail-folder-menu { position: absolute; right: .15rem; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .15s; }
.mail-folder-menu > .btn { color: var(--bs-secondary-color); background: var(--bs-body-bg); border-radius: 50rem; padding: 0 .3rem !important; }
.mail-folder-row:hover .mail-folder-menu, .mail-folder-menu:focus-within, .mail-folder-menu .show { opacity: 1; }
@media (hover: none) { .mail-folder-menu { opacity: 1; } }
/* the open menu lies above the following folders (each menu button is its own layer because of the transform) */
.mail-folder-menu:has(.dropdown-menu.show) { z-index: 1000; opacity: 1; }

/* ---------------------------------------------------------------- start page: "Mein Überblick" */
.ov-group-title { font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .5rem; }
.ov-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .6rem; }
.ov-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .65rem; align-items: center; text-align: left;
  padding: .7rem .85rem; border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem; background: var(--bs-body-bg); color: var(--bs-body-color);
  transition: border-color .15s, box-shadow .15s, background .15s; }
.ov-tile:hover, .ov-tile:focus-visible { border-color: var(--brand-300); box-shadow: 0 2px 10px -6px color-mix(in srgb, var(--bs-body-color) 40%, transparent); }
.ov-icon { grid-row: 1 / 3; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem;
  background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.ov-num { font-size: 1.5rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); }
.ov-label { font-size: .8rem; color: var(--bs-secondary-color); line-height: 1.2; }
.ov-tile.is-new { border-color: var(--brand-300); background: color-mix(in srgb, var(--brand) 5%, var(--bs-body-bg)); }
.ov-tile.is-new .ov-icon { background: var(--brand); color: #fff; }
.ov-tile.is-new .ov-num { color: var(--brand); }
.lo-tinted .ov-tile.is-new .ov-icon { background: var(--lo-accent); }
.lo-tinted .ov-tile.is-new .ov-num { color: var(--lo-ink, var(--lo-accent)); }
.tag-bulk-row:hover { background: var(--bs-tertiary-bg); }
.lv > .lv-bulk { overflow: visible; }  /* menus (tags) must not be cut off by the list-card rule above */

/* ================================================================ bottom toolbar (Collaboration, KI-Assistent)
   A narrow bar docked to the bottom edge; every view ends above it. */
:root { --toolbar-h: 2.5rem; }
@media print { :root { --toolbar-h: 0px; } }
.fab-bar.app-toolbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--toolbar-h); z-index: 1040;
  display: flex; align-items: center; justify-content: flex-end; gap: .35rem; padding: 0 .75rem;
  background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color-translucent);
  box-shadow: 0 -6px 16px -12px color-mix(in srgb, var(--bs-body-color) 35%, transparent); }
body.dock-any .fab-bar.app-toolbar { right: 0; }
.app-tool { position: relative; display: inline-flex; align-items: center; gap: .35rem; border: 0; border-radius: 50rem;
  padding: .25rem .75rem; font-size: .85rem; font-weight: 500; color: var(--bs-secondary-color); background: transparent; }
.app-tool:hover, .app-tool:focus-visible { color: var(--brand); background: var(--brand-soft); }
.app-tool.is-open { color: var(--brand-on, #fff); background: var(--brand); }
.app-tool.ai-fab .bi-stars { color: var(--brand); }
.app-tool.ai-fab.is-open .bi-stars { color: inherit; }
.app-tool .collab-badge { position: static; font-size: .7rem; margin-left: .15rem; }
body.ai-docked .ai-fab, body.collab-docked .collab-fab { display: inline-flex; }  /* stays as tab switch */
body:has(.fab-bar) .app-main { padding-bottom: calc(var(--toolbar-h) + 1rem) !important; }
/* side panels (also docked) end above the toolbar */
.collab-panel, .ai-panel { bottom: var(--toolbar-h); height: auto; }
@media (min-width: 1200px) { body.ai-docked .ai-panel, body.collab-docked .collab-panel { bottom: var(--toolbar-h); } }

/* pinned layout columns and the mail workspace end at the toolbar */
@media (min-width: 992px) {
  .lo-col.lo-pinned { height: calc(100vh - var(--pin-top) - var(--toolbar-h)); max-height: calc(100vh - var(--pin-top) - var(--toolbar-h)); }
  body:has(.lo-pinned) .app-main { padding-bottom: var(--toolbar-h) !important; }
  body:has(.fab-bar) .lo-grid:has(.lo-pinned) > .lo-col:not(.lo-pinned) { padding-bottom: 1rem; }
  body:has(.fab-bar) .lo-pinned-right > .lo-col-body { padding-bottom: .5rem; }
  .mail-ws { height: calc(100vh - var(--app-header-h, 110px) - var(--toolbar-h) - 2rem); }
}

/* lists: the page fits the window, only the table scrolls (no double scrolling) */
@media (min-width: 768px) {
  body:has(.lv-scroll) .app-main { height: calc(100vh - var(--app-header-h, 0px) - var(--toolbar-h)); display: flex; flex-direction: column;
    padding-bottom: .75rem !important; }
  body:has(.lv-scroll) .app-main > .lv { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .lv > .card:has(> .lv-scroll) { flex: 1 1 auto; min-height: 14rem; display: flex; flex-direction: column; }
  .lv-scroll { max-height: none; flex: 1 1 auto; min-height: 0; }
  .lv > nav, .lv > .pagination, .lv > .lv-pages { flex: 0 0 auto; margin-top: .5rem; margin-bottom: 0; }
}
@media (min-width: 768px) { .lv > nav .pagination { margin-bottom: 0; } }

/* ---------------------------------------------------------------- list view editor: same structure as the page layout editor */
@media (min-width: 992px) {
  .lo-ed.lv-ed { grid-template-columns: minmax(0, 1fr) 340px; }
  .lo-ed-side { max-height: calc(100vh - var(--app-header-h, 100px) - var(--toolbar-h, 0px) - 2rem); }
}
.lv-ed-card > .card-header { position: sticky; top: var(--app-header-h, 0px); z-index: 3; background: var(--bs-card-bg, var(--bs-body-bg));
  border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
.lv-ed-side .form-label { font-size: .875rem; }

/* ---------------------------------------------------------------- field groups: label above the value (smaller), two lines */
.lo-fields tbody { display: block; }
.lo-fields tr { display: block; padding: .3rem 0 .45rem; }
.lo-fields th, .lo-fields td { display: block; width: auto !important; padding: 0 !important; border: 0; }
.lo-fields th { font-size: .78rem; line-height: 1.25; margin-bottom: .1rem; }
.lo-fields td { min-height: 1.5rem; }
.lo-fields td.lv-editable { margin: 0 -.35rem; padding: .05rem .35rem !important; border-radius: .4rem; }
@media (min-width: 768px) {
  .lo-fields-2 tbody { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .lo-fields-2 tr { display: block; width: auto; }
}
/* editor canvas: same arrangement */
.lo-cv-field { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "grip label ro x" "grip value ro x"; row-gap: 0; }
.lo-cv-field > .lo-grip { grid-area: grip; }
.lo-cv-field > .lo-cv-flabel { grid-area: label; font-size: .75rem; }
.lo-cv-field > .lo-cv-fvalue { grid-area: value; }
.lo-cv-field > .lo-tool:not(.text-danger) { grid-area: ro; }
.lo-cv-field > .lo-tool.text-danger { grid-area: x; }
/* save bars at the bottom of forms stay above the bottom toolbar */
body:has(.fab-bar) .app-main .sticky-actions { bottom: var(--toolbar-h); }

/* ---------------------------------------------------------------- user detail: history */
.user-tabs .nav-link { border-radius: 50rem; padding: .3rem .85rem; }
.audit-changes th { width: 30%; padding-left: 0; }
.audit-before { color: var(--bs-secondary-color); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bs-danger) 50%, transparent); }
.audit-after { font-weight: 500; }
.tag-group-head { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); padding: .45rem .5rem .15rem; }
.tag-group-head:first-child { padding-top: .1rem; }
.tag-group-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
/* lists: only the table card grows; toolbar rows (bulk bar is a .card-body, which Bootstrap lets grow) keep their height */
@media (min-width: 768px) { body:has(.lv-scroll) .app-main > .lv > :not(.card:has(> .lv-scroll)) { flex: 0 0 auto; } }

/* list views: record count, active filter chips, multi-select filters, rows per page */
.lv-count { white-space: nowrap; }
.lv-chip { display: inline-flex; align-items: center; gap: .25rem; max-width: 32rem; padding: .1rem .15rem .1rem .5rem; border-radius: 999px;
  background: var(--bs-tertiary-bg); font-size: .78rem; line-height: 1.4; white-space: nowrap; }
.lv-chip .badge { font-size: .72rem; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.lv-chip-label { color: var(--bs-secondary-color); }
.lv-chip-x { display: inline-flex; width: 1.15rem; height: 1.15rem; align-items: center; justify-content: center; border-radius: 50%;
  color: var(--bs-secondary-color); text-decoration: none; }
.lv-chip-x:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
.lv-multi-btn { min-width: 8.5rem; white-space: nowrap; }
.lv-multi-active { border-color: var(--bs-primary); color: var(--bs-primary); font-weight: 600; }
.lv-multi-menu { width: 17rem; }
.lv-multi-options { max-height: 18rem; overflow-y: auto; margin: 0 -.25rem; }
.lv-multi-opt { display: flex; align-items: center; gap: .4rem; margin: 0; padding: .2rem .5rem .2rem 2rem; border-radius: .4rem; cursor: pointer; }
.lv-multi-opt:hover { background: var(--bs-tertiary-bg); }
.lv-multi-opt .form-check-input { margin-top: 0; }
.lv-multi-foot { display: flex; align-items: center; gap: .25rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--bs-border-color); }
.lv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.lv-foot-pages { flex: 1 1 auto; }
.lv-foot-pages nav { margin-top: 0 !important; }
.lv-foot-pages .pagination { margin-bottom: 0; }
.lv-per-page { display: flex; align-items: center; gap: .4rem; margin: 0 0 0 auto; white-space: nowrap; }
.lv-per-page .form-select { width: auto; }
/* tags in table cells: one line, first badges, then dots */
.tag-stack { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; white-space: nowrap; vertical-align: middle; }
.tag-stack .badge-link, .tag-stack > .badge { min-width: 0; flex: 0 1 auto; }
.tag-stack .badge { display: inline-block; max-width: 8.5rem; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.tag-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--dot); flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.tag-more { font-size: .72rem; color: var(--bs-secondary-color); flex: 0 0 auto; }
/* sortable column headers */
.lv-sort { display: inline-flex; align-items: center; gap: .3rem; color: inherit; text-decoration: none; white-space: nowrap; }
.lv-sort i { font-size: .8em; opacity: 0; transition: opacity .15s; }
.lv-sort:hover i, .lv-sort.active i { opacity: 1; }
.lv-sort.active { color: var(--bs-primary); }

/* start page: "Künstler bewerten" stack */
.vote-stack.is-busy { pointer-events: none; }
.vote-stack.is-busy .card-body { opacity: .7; }
.vote-nav { display: flex; align-items: flex-start; gap: .5rem; }
.vote-nav > .vote-arrow { position: sticky; top: calc(var(--app-header-h, 100px) + 4rem); margin-top: 3.4rem; }
.vote-submit { position: sticky; bottom: calc(var(--toolbar-h, 0px) + .5rem); z-index: 3; margin: 1rem -.5rem -.5rem; padding: .5rem;
  background: var(--bs-body-bg); border-radius: .9rem; box-shadow: 0 -8px 16px -12px color-mix(in srgb, var(--bs-body-color) 35%, transparent); }
.vote-nav .vote-pile { flex: 1 1 auto; min-width: 0; }
.vote-arrow { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bs-tertiary-bg); color: var(--bs-body-color); font-size: 1.2rem; border: 0; }
.vote-arrow:hover:not(:disabled) { background: var(--brand-soft, var(--bs-secondary-bg)); color: var(--bs-primary); }
.vote-arrow:disabled { opacity: .35; }
@media (max-width: 575.98px) {
  .vote-nav { gap: .25rem; }
  .vote-arrow { width: 2rem; height: 2rem; font-size: 1rem; }
  .vote-card { padding: 1rem .75rem .75rem; }
}
.vote-pile { position: relative; }
.vote-pile-more { margin-bottom: 1.25rem; }
.vote-pile-more::after, .vote-pile-many::before { content: ""; position: absolute; left: 6%; right: 6%; height: 100%; border-radius: 1rem;
  background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color-translucent); z-index: 0; }
.vote-pile-more::after { bottom: -6px; }
.vote-pile-many::before { left: 11%; right: 11%; bottom: -12px; opacity: .7; }
.vote-card { position: relative; z-index: 1; padding: 1.25rem 1rem 1rem; border-radius: 1rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06); touch-action: pan-y; transition: transform .25s ease, opacity .25s ease; text-align: center; }
.vote-card.dragging { transition: none; }
.vote-card.out-left { transform: translateX(-120%) rotate(-8deg); opacity: 0; }
.vote-card.out-right { transform: translateX(120%) rotate(8deg); opacity: 0; }
.vote-card.out-up { transform: translateY(-30%) scale(.96); opacity: 0; }
.vote-photo-menu { display: inline-block; margin-bottom: .6rem; }
.vote-avatar { position: relative; width: 6rem; height: 6rem; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft, var(--bs-tertiary-bg)); color: var(--bs-primary); font-size: 2.2rem; border: 0; padding: 0; }
.vote-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vote-avatar-edit { position: absolute; inset: auto 0 0 0; height: 1.8rem; display: flex; align-items: center; justify-content: center; font-size: .95rem;
  background: rgba(0, 0, 0, .45); color: #fff; opacity: 0; transition: opacity .15s; }
.vote-avatar.editable:hover .vote-avatar-edit, .vote-avatar.editable:focus-visible .vote-avatar-edit { opacity: 1; }
@media (hover: none) { .vote-avatar.editable .vote-avatar-edit { opacity: .85; } }
.vote-name { color: var(--bs-body-color); text-decoration: none; overflow-wrap: anywhere; }
.vote-name:hover { color: var(--bs-primary); }
.vote-rows { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin-top: .9rem; font-size: .875rem; }
.vote-row { display: flex; flex-direction: column; align-items: center; gap: .15rem; max-width: 100%; }
.vote-row-label { font-size: .72rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .03em; }
.vote-row-value { overflow-wrap: anywhere; }
.vote-row-edit { border: 1px dashed transparent; background: none; border-radius: .5rem; padding: .1rem .4rem; color: inherit; }
.vote-row-edit .bi-pencil { font-size: .75rem; color: var(--bs-secondary-color); opacity: .6; }
.vote-row-edit:hover { border-color: var(--bs-border-color); }
.vote-row-edit:hover .bi-pencil { opacity: 1; color: var(--bs-primary); }
/* edit popups of the rating card: centred overlay over the page, whatever the scroll position or screen size */
.vote-edit-menu { width: 18rem; text-align: left; }
.vote-edit-menu.show { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
  transform: translate(-50%, -50%) !important; margin: 0 !important; z-index: 1085; width: min(24rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1rem !important; border: 0; border-radius: 1rem;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45), 0 18px 48px rgba(0, 0, 0, .3); }
.vote-edit-head { display: flex; align-items: center; gap: .25rem; margin-bottom: .75rem; }
.vote-edit-head .btn-close { margin-left: auto; }
.vote-edit-menu.show .vote-check-list { max-height: calc(100dvh - 12rem); }
.vote-check-list { max-height: 15rem; overflow-y: auto; }
.vote-check-list .form-check { display: flex; align-items: center; gap: .4rem; margin: 0; padding: .15rem .25rem .15rem 1.9rem; }
.star-input-xl { display: flex; justify-content: center; width: 100%; gap: .1rem; }  /* same size as on the artist page */
/* card head: photo + name | genres + tags side by side when the card is wide enough */
.vote-top { container-type: inline-size; }
.vote-top.has-rows { display: flex; flex-wrap: wrap; align-items: center; }
.vote-top.has-rows > .vote-ident, .vote-top.has-rows > .vote-rows { width: 100%; min-width: 0; }
@container (min-width: 400px) {
  .vote-top.has-rows > .vote-ident { width: 50%; padding-right: 1rem; }
  .vote-top.has-rows > .vote-rows { width: 50%; margin-top: 0; padding: .25rem 0 .25rem 1rem; border-left: 1px solid var(--bs-border-color-translucent); }
}
.vote-stack-votes .stars { font-size: .85rem; }
.vote-stack-vote { padding: .1rem 0; }
.vote-media { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .25rem; justify-content: safe center; }
.vote-media-item { flex: 0 0 auto; width: 8.5rem; height: 6rem; border-radius: .6rem; overflow: hidden; scroll-snap-align: start; background: var(--bs-tertiary-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; color: inherit; text-decoration: none; padding: .25rem; border: 0; }
.vote-media-item img, .vote-media-item video { width: 100%; height: 100%; object-fit: cover; border-radius: .4rem; }
.vote-media-item i { font-size: 1.4rem; color: var(--bs-primary); }
.vote-media-item span { max-width: 100%; }
.vote-media-plus { border: 2px dashed var(--bs-border-color); background: transparent; width: 6rem; }
.vote-media-item.media-open { position: relative; cursor: pointer; }
.vote-media-item.media-open:hover { box-shadow: 0 0 0 2px var(--brand-300, var(--bs-primary)); }
.vote-media-plus:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.vote-media-audio { width: 13rem; }
.vote-media-audio audio { width: 100%; height: 2rem; }
.star-input.shake { animation: vote-shake .35s; }
@keyframes vote-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
/* icon picker for icon fields (tags, own objects …) */
.icon-picker { position: relative; }
.icon-picker-preview { min-width: 2.6rem; justify-content: center; font-size: 1.1rem; }
.icon-picker-panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1060; min-width: 18rem; padding: .6rem; background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color); border-radius: .75rem; box-shadow: 0 10px 28px rgba(0, 0, 0, .14); }
.obj-avatar-wrap .dropdown-menu { min-width: 18rem; }
.vote-media-item.media-open > i ~ .media-play { top: auto; left: auto; bottom: .3rem; right: .3rem; transform: none; width: 1.6rem; height: 1.6rem; font-size: .85rem; }
/* rating card: count + tag filter */
.vote-stack-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem .6rem; margin-bottom: .5rem; }
.vote-stack-head .vote-stack-count { margin-bottom: 0 !important; }
.vote-filter-btn { --bs-btn-padding-y: .1rem; --bs-btn-padding-x: .55rem; --bs-btn-font-size: .78rem; border-radius: 50rem; border: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vote-filter-btn:hover { color: var(--bs-primary); border-color: var(--bs-primary); }
.vote-filter-btn.active { color: var(--bs-primary); border-color: var(--bs-primary); background: var(--brand-soft, transparent); font-weight: 600; }
/* follower counts on profile links */
.media-followers { display: inline-block; margin-left: .15rem; padding: 0 .4rem; border-radius: 50rem; background: var(--bs-tertiary-bg);
  color: var(--bs-body-color); font-size: .75rem; font-weight: 600; }
.vote-followers { font-size: .8rem; font-weight: 700; color: var(--bs-body-color); line-height: 1; }

/* list views: search and filter row in a box like the table */
.lv-filterbar { padding: .6rem; }
.lv-filterbar .row { --bs-gutter-y: .5rem; }

/* rating card on phones: preview (count + first card) with "Voting starten", the full card in fullscreen */
.vote-fs-close, .vote-start { display: none; }
@media (max-width: 991.98px) {
  .vote-stack:not(.is-fullscreen) .vote-start { display: block; }
  .vote-stack:not(.is-fullscreen) :is(.vote-arrow, .vote-media, .vote-stack-form, .vote-stack-votes, .vote-submit, .vote-filter, .vote-stack-count .d-lg-none,
    .vote-stack-body-extra, .media-viewer) { display: none !important; }
  .vote-stack:not(.is-fullscreen) .vote-card { touch-action: auto; }
  .vote-stack.is-fullscreen { position: fixed; inset: 0; z-index: 1065; margin: 0 !important; border-radius: 0; overflow-y: auto; overscroll-behavior: contain;
    --bs-card-border-radius: 0; background: var(--bs-body-bg); }
  .vote-stack.is-fullscreen > .card-header { position: sticky !important; top: 0 !important; z-index: 4; background: var(--bs-body-bg) !important; box-shadow: none !important; }
  .vote-stack.is-fullscreen .vote-fs-close { display: block; }
  .vote-stack.is-fullscreen .vote-submit { bottom: .5rem; }
  body.vote-fs { overflow: hidden; }
  body.vote-fs .modal-backdrop { z-index: 1080; }
  body.vote-fs .media-viewer.modal { z-index: 1090; }
}
.lv-tag-pick { padding: .1rem .25rem; border: 2px solid transparent; border-radius: .6rem; opacity: .55; }
.btn-check:checked + .lv-tag-pick { opacity: 1; border-color: var(--bs-primary); }
.lv-tag-rule-list .tag-group-head { padding-left: 0; }
/* detail element "Mögliche Dubletten" and merge page */
.dup-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; padding: .35rem 0; border-top: 1px solid var(--bs-border-color-translucent); }
.dup-row:first-child { border-top: 0; }
.dup-why .badge { font-weight: 500; }
.merge-col { border-radius: 1rem; }
.merge-col.is-keep { box-shadow: 0 0 0 2px var(--bs-success); }
.merge-col.is-dup { opacity: .85; }

/* KI-Vorschläge: "Künstler vertritt sich selbst" braucht keine eigene Firma */
.apply-all:has(#structSelf:checked) .ac-company { display: none; }

/* mail list: state filter stays on one line */
#mailWs .btn-group[role=group] > .btn { white-space: nowrap; padding-inline: .4rem; }

/* compose: signature preview under the message, quoted history folded */
.compose-sig { border-left: 3px solid var(--bs-border-color); padding: .25rem 0 .25rem .75rem; }
.compose-sig img { max-width: 100%; }
.compose-quote blockquote { border-left: 2px solid var(--bs-border-color); padding-left: .75rem; margin-top: .5rem; max-height: 16rem; overflow: auto; }

/* KI: "Neu anlegen" with structure choice, genres and tags as toggle chips */
.ai-structure-item { border-left: 2px solid var(--bs-border-color); padding: .1rem 0 .4rem .6rem; margin-bottom: .5rem; }
.ai-chips { display: flex; flex-wrap: wrap; gap: .2rem; }
.ai-chip { cursor: pointer; opacity: .45; border: 2px solid transparent; border-radius: .6rem; padding: 0 .1rem; }
.btn-check:checked + .ai-chip { opacity: 1; border-color: var(--bs-primary); }
.btn-check:focus-visible + .ai-chip { outline: 2px solid var(--bs-primary); }
.ai-structure:has([name=structure][value=artist_self]:checked) .ais-agency { display: none; }
.ai-structure:has([name=structure][value=agency_only]:checked) .ais-artist { display: none; }

/* event day: lead / follow-up time around the day in the time grid, stage headings in the slot list */
.tt-outside { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, transparent, transparent 6px, color-mix(in srgb, var(--bs-body-color) 6%, transparent) 6px, color-mix(in srgb, var(--bs-body-color) 6%, transparent) 12px); pointer-events: none; }
.day-stage-head { padding: .45rem 1rem; background: var(--bs-tertiary-bg); }
.day-timetable .timetable-wrap { border-top: 1px solid var(--bs-border-color-translucent); }

/* event day: all bookings of the event by pipeline phase, with the day they are on / want */
.day-bk-group + .day-bk-group { margin-top: .85rem; }
.day-bk-head { display: flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; }
.day-bk-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--phase); flex: none; }
.day-bk { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem; padding: .25rem .5rem; border: 1px solid var(--bs-border-color);
  border-left: 4px solid var(--phase); border-radius: .6rem; background: var(--bs-body-bg); font-size: .875rem; }
.day-bk.is-planned { opacity: .75; }
.day-bk.is-here:not(.is-planned) { border-color: var(--brand-300, var(--bs-primary)); border-left-color: var(--phase); box-shadow: 0 0 0 1px var(--brand-300, var(--bs-primary)); }
.day-bk-name { font-weight: 600; color: var(--bs-body-color); cursor: grab; }
a.day-bk-name { cursor: pointer; }
.day-bk-day { font-weight: 500; background: var(--bs-secondary-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color-translucent); }
.day-bk-day.is-here { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-300, var(--bs-primary)); }
.day-bk-day.is-none { color: var(--bs-secondary-color); font-weight: 400; }

/* time grid: title, toolbar and section headers stay visible (one sticky block); the time scale stays on the left */
.day-timetable > .tt-sticky { position: sticky; top: calc(var(--app-header-h, 0px) + var(--detail-head-h, 0px)); z-index: 6;
  background: var(--lo-sticky-bg, var(--bs-card-bg, var(--bs-body-bg))); border-top-left-radius: inherit; border-top-right-radius: inherit; }
.day-timetable > .tt-sticky > .card-header { position: static !important; box-shadow: none !important; }
.tt-headwrap { overflow: hidden; }
.timetable, .tt-headrow { display: grid; grid-template-columns: 56px repeat(var(--stages), minmax(170px, 1fr)); min-width: calc(56px + var(--stages) * 170px); }
.tt-headrow .tt-head { position: relative; top: auto; }
.tt-headrow .tt-corner { position: sticky; left: 0; z-index: 5; background: var(--lo-sticky-bg, var(--bs-card-bg, var(--bs-body-bg))); }
.tt-headrow .tt-head:has(.dropdown-menu.show) { z-index: 8; }
.timetable > .tt-hours { position: sticky; left: 0; z-index: 4; background: var(--lo-sticky-bg, var(--bs-card-bg, var(--bs-body-bg))); box-shadow: 1px 0 0 var(--bs-border-color-translucent); }
/* small info icon in an element's header: the help text only on hover / focus */
.lo-info { color: var(--bs-secondary-color); cursor: help; font-size: .95rem; line-height: 1; }
.lo-info:hover, .lo-info:focus-visible { color: var(--brand); }
.tt-break.editable { cursor: grab; user-select: none; -webkit-user-select: none; }
.tt-break .tt-remove { background: rgba(0,0,0,.18); }
.tt-head .tt-head-menu { position: absolute; top: .3rem; right: .3rem; }
.tt-head .tt-head-menu > .btn { color: var(--bs-secondary-color); }
.tt-col.is-drawing { cursor: ns-resize; }
.tt-select { position: absolute; left: 4px; right: 4px; z-index: 6; border: 2px dashed var(--bs-primary); border-radius: .35rem;
  background: color-mix(in srgb, var(--bs-primary) 15%, transparent); pointer-events: none; font-size: .72rem; padding: 2px 6px; color: var(--bs-primary-text-emphasis); font-weight: 600; }
.tt-pick { position: fixed; z-index: 1080; display: flex; gap: .3rem; padding: .35rem; border-radius: .6rem; background: var(--bs-body-bg);
  box-shadow: 0 6px 20px rgba(0,0,0,.2); border: 1px solid var(--bs-border-color); }
@media (min-width: 992px) and (pointer: fine) { .tt-col { cursor: crosshair; } .tt-col .tt-block { cursor: default; } .tt-col .tt-slot.editable { cursor: grab; } }

/* ---------------------------------------------------------------- Hilfe / Journey: diagram on a grid */
.jf-wrap { overflow-x: auto; padding: .25rem 0 .5rem; }
.jf-scale { position: relative; }
.jf-canvas { position: relative; transform-origin: 0 0; }
.jf-canvas.is-editor { background-image: radial-gradient(circle, color-mix(in srgb, var(--bs-body-color) 18%, transparent) 1.2px, transparent 1.4px);
  background-size: var(--cw) var(--ch); background-position: calc(var(--cw) / 2) calc(var(--ch) / 2); border-radius: 1rem;
  background-color: color-mix(in srgb, var(--bs-body-color) 2%, var(--bs-body-bg)); }
.jf-edges { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.jf-edge-line { fill: none; stroke-width: 3; stroke-linecap: round; }
.jf-edge-flow { fill: none; stroke: #fff; stroke-width: 1.6; stroke-dasharray: 2 14; stroke-linecap: round; opacity: .85; animation: jf-flow 1.6s linear infinite; }
@keyframes jf-flow { to { stroke-dashoffset: -32; } }
@media (prefers-reduced-motion: reduce) { .jf-edge-flow { animation: none; } }
.jf-edge-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.jf-edge:hover .jf-edge-line { stroke-width: 4.5; }
.jf-edge-label { font-size: 12px; font-weight: 600; fill: var(--bs-body-color); paint-order: stroke; stroke: var(--bs-body-bg); stroke-width: 4px; }
.jf-arrow { fill: var(--bs-secondary-color); }
.jf-temp { fill: none; stroke: var(--bs-primary); stroke-width: 2; stroke-dasharray: 6 5; }
.jf-node { position: absolute; display: flex; flex-direction: column; gap: .3rem; padding: .6rem .7rem; border-radius: 1rem; cursor: pointer;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-top: 4px solid var(--c);
  box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--bs-body-color) 55%, transparent); transition: box-shadow .15s, transform .15s; z-index: 2; }
.jf-node:hover, .jf-node:focus-visible { box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--c) 70%, transparent); }
.jf-node.is-selected { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 40%, transparent), 0 10px 26px -12px color-mix(in srgb, var(--c) 70%, transparent); }
.jf-node.is-current { background: color-mix(in srgb, var(--c) 10%, var(--bs-body-bg)); }
.jf-node.is-inactive { opacity: .45; }
.jf-node.is-dragging { z-index: 9; opacity: .9; cursor: grabbing; transition: none; }
.jf-head { display: flex; align-items: center; gap: .45rem; }
.jf-title { font-weight: 600; font-size: .86rem; line-height: 1.15; }
.jf-summary { font-size: .72rem; color: var(--bs-secondary-color); line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.jf-node.is-decision { padding: 0; border: 0; background: none; box-shadow: none; align-items: center; justify-content: center; }
.jf-diamond { position: absolute; inset: 14%; transform: rotate(45deg); border-radius: .7rem; background: color-mix(in srgb, var(--c) 14%, var(--bs-body-bg));
  border: 2px solid var(--c); box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--bs-body-color) 55%, transparent); }
.jf-node.is-decision.is-selected .jf-diamond { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 40%, transparent); }
.jf-dec-title { position: relative; font-size: .76rem; font-weight: 600; text-align: center; max-width: 80%; line-height: 1.15; }
.jr-icon { flex: none; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); }
.jr-phases { display: flex; flex-wrap: wrap; gap: .2rem; }
.jr-phase { display: inline-flex; align-items: center; gap: .25rem; font-size: .66rem; padding: 0 .4rem; border-radius: 50rem; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); }
.jr-phase::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--p); }
.jr-here { position: absolute; top: -.75rem; right: .5rem; font-size: .66rem; font-weight: 600; padding: .05rem .45rem; border-radius: 50rem; background: var(--c); color: #fff; z-index: 3; }
.jr-here-badge { background: var(--c); color: #fff; font-weight: 600; }
/* editor */
.jf-port { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--bs-body-bg); background: var(--c); padding: 0;
  opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity .12s, transform .12s; z-index: 4; cursor: crosshair; }
.jf-port-top { left: 50%; top: 0; } .jf-port-bottom { left: 50%; top: 100%; } .jf-port-left { left: 0; top: 50%; } .jf-port-right { left: 100%; top: 50%; }
.jf-node:hover .jf-port, .jf-host.is-connecting .jf-port, .jf-port:focus-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.jf-port:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 35%, transparent); }
.jf-node.is-source { box-shadow: 0 0 0 3px var(--bs-primary); }
.jf-edit { position: absolute; top: .3rem; right: .3rem; border: 0; background: none; color: var(--bs-secondary-color); padding: .1rem .3rem; border-radius: 50%; z-index: 4; }
.jf-node.is-decision .jf-edit { top: 50%; right: -1.6rem; transform: translateY(-50%); }
.jf-edit:hover { color: var(--brand); background: var(--brand-soft); }
.jf-count { position: absolute; bottom: .35rem; right: .5rem; font-size: .65rem; color: var(--bs-secondary-color); }
.jf-count::before { content: "\F1C5"; font-family: bootstrap-icons; margin-right: .15rem; }
.jf-editor .jf-node { cursor: grab; }
.jf-drop { position: absolute; display: none; width: var(--cw); height: var(--ch); border: 2px dashed var(--bs-primary); border-radius: 1rem; background: color-mix(in srgb, var(--bs-primary) 6%, transparent); z-index: 1; }
.jf-edge-menu { position: absolute; transform: translate(-50%, -125%); z-index: 8; box-shadow: 0 6px 18px rgba(0,0,0,.18); border-radius: 50rem; }
.jf-edge-menu .btn { border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); }
.jf-panel { --bs-offcanvas-width: min(480px, 100vw); }
.journey-link-row { padding: .6rem; border: 1px solid var(--bs-border-color-translucent); border-radius: .8rem; margin-bottom: .5rem; }
.journey-link-row.is-new { border-style: dashed; }
.journey-link-row label.btn input { display: none; }
.journey-link-row label.btn:has(input:checked) { background: var(--bs-danger); color: #fff; }
/* help dialog: diagram at normal size, scrolls sideways; jump-off buttons inside the elements; help text in the footer */
.jf-canvas.is-viewer .jf-node { cursor: default; }
.jf-canvas.is-viewer .jf-summary { -webkit-line-clamp: 3; }
.jf-actions { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; padding-top: .45rem; border-top: 1px dashed var(--bs-border-color); }
.jf-actions .btn { --bs-btn-padding-y: .12rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .72rem; }
.jf-task { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; padding: .12rem .5rem; border-radius: 50rem; border: 1px dashed var(--bs-border-color); color: var(--bs-secondary-color); cursor: help; }
.jf-task i { color: var(--c); }
/* side panel: section headings stay visible while scrolling */
.jf-section { position: sticky; top: calc(-1 * var(--bs-offcanvas-padding-y, 1rem)); z-index: 5; margin: 0 calc(-1 * var(--bs-offcanvas-padding-x, 1rem)) .5rem;
  padding: .55rem var(--bs-offcanvas-padding-x, 1rem); background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color-translucent);
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.jf-section i { color: var(--brand); }

/* ================================================================ Hilfe / Journey: full size in the main area (between menu and toolbar) */
@property --gx { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --gy { syntax: "<length>"; inherits: true; initial-value: 0px; }
.journey-stage { position: fixed; top: var(--app-header-h, 100px); bottom: var(--toolbar-h); left: 0; right: 0; z-index: 1015;
  display: flex; flex-direction: column; background: var(--bs-body-bg); animation: jf-in .18s ease-out; }
.journey-stage[hidden] { display: none; }
@keyframes jf-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .journey-stage { animation: none; } }
@media (min-width: 1200px) { body.dock-any .journey-stage { right: 440px; } }
body.journey-open { overflow: hidden; }
[data-journey].active { color: var(--brand); background: var(--brand-soft); }
.journey-stage-head { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem .65rem 1.5rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.journey-stage-links { display: flex; align-items: center; gap: .75rem; }
.journey-stage-body { position: relative; flex: 1; min-height: 0; }
.jf-viewer { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; }
.jf-viewer .jf-host { padding: 1rem 1.5rem 7rem; width: max-content; min-width: 100%; }
.jf-glow, .jf-spot { position: absolute; inset: -1rem -1.5rem -7rem; pointer-events: none; }
.jf-glow { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent 100%); }
.jf-spot { opacity: 0; transition: opacity .5s ease, --gx .5s ease, --gy .5s ease;
  background: radial-gradient(520px circle at calc(var(--gx) + 1.5rem) calc(var(--gy) + 1rem), color-mix(in srgb, var(--gc, var(--brand)) 30%, transparent), transparent 70%); }
.jf-canvas.is-glowing .jf-spot { opacity: 1; }
.jf-canvas.is-viewer .jf-node { z-index: 1; }
/* help text as a post-it note */
.jf-hint { position: absolute; left: 1.5rem; bottom: 1rem; z-index: 6; display: flex; gap: .55rem; align-items: flex-start;
  max-width: min(460px, calc(100% - 3rem)); min-height: 3.6rem; padding: .7rem .9rem .8rem; font-size: .86rem; line-height: 1.35;
  color: #4a3f10; background: linear-gradient(180deg, #fff59d 0%, #fff176 100%); border-radius: 2px 2px 14px 2px;
  box-shadow: 0 1px 1px rgba(0,0,0,.08), 0 10px 22px -10px rgba(90,70,0,.45); transform: rotate(-.6deg); transition: transform .2s; }
.jf-hint::before { content: ""; position: absolute; top: -8px; left: 50%; width: 64px; height: 16px; transform: translateX(-50%) rotate(2deg);
  background: color-mix(in srgb, #fff 55%, transparent); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.jf-hint i { color: #a07800; font-size: 1rem; }
.jf-hint.is-active { transform: rotate(0deg) translateY(-2px); }
/* minimap */
.jf-minimap { position: absolute; right: 1.25rem; bottom: 1rem; z-index: 6; display: none; overflow: hidden; cursor: pointer; touch-action: none;
  background: color-mix(in srgb, var(--bs-body-bg) 92%, transparent); border: 1px solid var(--bs-border-color); border-radius: .6rem;
  box-shadow: 0 8px 22px -12px rgba(0,0,0,.35); backdrop-filter: blur(4px); }
.jf-minimap.is-visible { display: block; }
.jf-map-glow { position: absolute; inset: 0; opacity: .9; }
.jf-map-node { position: absolute; border-radius: 2px; opacity: .55; }
.jf-map-node.is-decision { transform: rotate(45deg) scale(.7); }
.jf-map-node.is-current { opacity: 1; box-shadow: 0 0 0 1.5px var(--bs-body-bg), 0 0 0 3px var(--brand); }
.jf-map-frame { position: absolute; border: 2px solid var(--brand); border-radius: 3px; background: color-mix(in srgb, var(--brand) 8%, transparent); pointer-events: none; }
@media (max-width: 767.98px) { .journey-stage-head { padding-left: 1rem; } .journey-stage-head h2 { font-size: 1rem; } .journey-stage-links .btn { white-space: nowrap; } .jf-minimap { display: none !important; } .jf-hint { left: .75rem; right: .75rem; max-width: none; } }

/* ================================================================ booking: phase bar – tiles in the phase colour (--kc), connectors like the journey */
.ps-wrap { padding: .1rem 0; }
.ps-bar { display: flex; align-items: center; gap: 0; width: 100%; overflow-x: auto; padding: .45rem .3rem .5rem; scrollbar-width: thin; }
.ps-bar form { display: contents; }
.ps-step { --kc: var(--brand); position: relative; isolation: isolate; overflow: hidden; flex: 1 1 0; min-width: max-content; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .45rem .9rem; border-radius: 1rem; font-size: .84rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease, transform .45s ease, opacity .45s ease, color .45s ease; }
.ps-step::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
  background: radial-gradient(140% 120% at var(--kx) var(--ky), color-mix(in srgb, var(--kc) 32%, transparent), transparent 65%);
  transition: opacity .5s ease, --kx .35s ease-out, --ky .35s ease-out; }
.ps-step:hover:not(:disabled)::before, .ps-step:focus-visible::before { opacity: 1; }
.ps-step:disabled { cursor: default; }
/* done: full colour */
.ps-step.is-done { color: #fff; background: var(--kc); border: 1px solid var(--kc); }
.ps-step.is-done::before { background: radial-gradient(140% 120% at var(--kx) var(--ky), rgba(255,255,255,.35), transparent 65%); }
.ps-step.is-done:hover:not(:disabled) { box-shadow: 0 10px 22px -12px var(--kc); transform: translateY(-1px); }
/* current: highlighted */
.ps-step.is-current { color: color-mix(in srgb, var(--kc) 85%, var(--bs-body-color)); background: color-mix(in srgb, var(--kc) 16%, var(--bs-body-bg));
  border: 2px solid var(--kc); padding: .55rem 1.1rem; font-size: .9rem; 
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kc) 18%, transparent), 0 10px 26px -12px var(--kc); animation: ps-pulse 2.6s ease-in-out infinite; }
.ps-step.is-current::before { opacity: .6; }
@keyframes ps-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--kc) 10%, transparent), 0 10px 26px -12px var(--kc); } }
/* open: only hinted */
.ps-step.is-open { color: color-mix(in srgb, var(--kc) 70%, var(--bs-secondary-color)); background: color-mix(in srgb, var(--kc) 9%, var(--bs-body-bg)); border: 1px solid transparent; font-weight: 500; }
/* open phases: a dashed outline that flows like the connectors */
.ps-ring { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; pointer-events: none; }
.ps-ring rect { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); fill: none; stroke: color-mix(in srgb, var(--kc) 55%, transparent);
  stroke-width: 1.5; stroke-dasharray: 5 6; animation: ps-ring 1.8s linear infinite; }
@keyframes ps-ring { to { stroke-dashoffset: -22; } }
.ps-step.is-open:hover:not(:disabled), .ps-step.is-open:focus-visible { background: color-mix(in srgb, var(--kc) 16%, var(--bs-body-bg)); transform: translateY(-1px); }
.ps-step.is-open:hover .ps-ring rect { stroke: var(--kc); }
/* connectors: gradient from one phase to the next, flowing dashes */
.ps-link { flex: 0 0 11px; width: 11px; height: 10px; margin: 0 .15rem; overflow: visible; }
.ps-link .ps-line { fill: none; stroke-width: 3; stroke-linecap: round; }
.ps-link .ps-flow { fill: none; stroke: #fff; stroke-width: 1.6; stroke-dasharray: 2 10; stroke-linecap: round; opacity: .85; animation: jf-flow 1.6s linear infinite; }
.ps-link.is-open { opacity: .35; }
.ps-link.is-open .ps-flow { animation-duration: 3.2s; }
@media (prefers-reduced-motion: reduce) { .ps-step, .ps-step::before { transition: none; } .ps-step.is-current { animation: none; } .ps-link .ps-flow, .ps-ring rect { animation: none; } }

/* ================================================================ platform admin (tenants) */
.pa-pre { white-space: pre-wrap; word-break: break-word; max-height: 70vh; overflow: auto; font-size: .78rem; margin: 0; }
.pa-card { transition: box-shadow .2s ease, transform .2s ease; }
.pa-card:hover { box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--brand) 60%, transparent); transform: translateY(-1px); }