/* openbi.studio Web-Studio - stage 2 additions (F-0006, 17.10.2026). Loads AFTER
   obs-app.css from the hull. Topologie write paths (dialog, drop targets, rules form,
   delete), Features (neu), Benachrichtigungen, Einstellungen, bell link. Tokens come from
   obs-tokens.css; nothing here redefines them. No at-rules other than media queries. */

/* ---------- 1. shared form bits ---------- */
.obsa-input { height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--obs-border-strong); background: var(--obs-surface); color: var(--obs-text); font: 500 13px/1 var(--obs-font-sans); width: 100%; min-width: 0; }
.obsa-input:focus, .obsa-select:focus { outline: 2px solid var(--obs-primary); outline-offset: 1px; }
.obsa-input--kurz { width: 110px; }
.obsa-input[hidden], .obsa-select[hidden] { display: none; }
.obsa-feld { display: flex; flex-direction: column; gap: 5px; }
.obsa-feld > label:first-child { font: 700 12px/16px var(--obs-font-sans); color: var(--obs-text-muted); }
.obsa-feld--reihe { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
.obsa-check { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/18px var(--obs-font-sans); color: var(--obs-text); cursor: pointer; }
.obsa-check input { width: 16px; height: 16px; accent-color: var(--obs-primary); margin: 0; flex: none; }
.obsa-check > span { display: flex; flex-direction: column; }
.obsa-btn--rot { color: var(--obs-error); border-color: color-mix(in srgb, var(--obs-error) 40%, transparent); }
.obsa-btn--rot:hover { background: var(--obs-error-soft); }
.obsa-pill--mini { height: 18px; font-size: 11px; padding: 0 7px; }
.obsa-wachsen { flex: 1; min-width: 0; }
.obsa-zeile-mitte { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.obsa-topo-titel { font-size: 15px; font-weight: 800; }

/* ---------- 2. dialog ---------- */
.obsa-dialog { border: 0; border-radius: 20px; padding: 0; width: min(480px, calc(100vw - 32px)); background: var(--obs-surface); color: var(--obs-text); box-shadow: 0 24px 64px rgba(15,16,36,.35); }
.obsa-dialog::backdrop { background: rgba(15,16,36,.45); backdrop-filter: blur(2px); }
.obsa-dialog-form { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 20px; }
.obsa-dialog-titel { font: 800 20px/26px var(--obs-font-sans); letter-spacing: -.02em; margin: 0; }
.obsa-dialog-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.obsa-farben { display: flex; gap: 8px; flex-wrap: wrap; }
.obsa-farbe { width: 30px; height: 30px; border-radius: 10px; border: 2px solid transparent; background: var(--c, var(--obs-surface-2)); cursor: pointer; padding: 0; font: 800 12px/1 var(--obs-font-sans); color: var(--obs-text-muted); }
.obsa-farbe--auto { background: var(--obs-surface-2); border-color: var(--obs-border-strong); }
.obsa-farbe.obsa-on { border-color: var(--obs-text); box-shadow: 0 0 0 2px var(--obs-surface) inset; }

/* ---------- 3. topologie: drag and drop, status, aside blocks ---------- */
.obsa-sg[role="button"]:focus-visible { outline: 2px solid var(--obs-primary); outline-offset: 2px; }
.obsa-lsk[draggable="true"] { cursor: grab; }
.obsa-lsk--zieht { opacity: .45; }
.obsa-sg--ziel { border-style: solid; background: color-mix(in srgb, var(--c, #5048E5) 18%, var(--obs-surface)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, #5048E5) 30%, transparent); }
.obsa-sg--ziel .obsa-sg-leer { border-color: var(--c, #5048E5); color: var(--c, #5048E5); }
html.obsa-zieht .obsa-sg:not(.obsa-sg--ziel) .obsa-sg-leer { border-color: color-mix(in srgb, var(--c, #5048E5) 70%, transparent); }
.obsa-sgh .obsa-st { font-size: 11px; }
.obsa-regel--unten { margin-top: auto; }
.obsa-regel-zeichen { font-weight: 800; }
.obsa-regel--ok .obsa-regel-zeichen { color: var(--obs-ok); } .obsa-regel--zu .obsa-regel-zeichen { color: var(--obs-error); }
.obsa-regel-text { flex: 1; min-width: 0; }
.obsa-regel-weg { width: 22px; height: 22px; border-radius: 7px; border: 0; background: transparent; color: var(--obs-text-muted); font: 700 16px/1 var(--obs-font-sans); cursor: pointer; flex: none; }
.obsa-regel-weg:hover { background: var(--obs-surface); color: var(--obs-error); }
.obsa-regeln { display: flex; flex-direction: column; gap: 6px; }
.obsa-regel-form { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--obs-surface-2); }
.obsa-regel-form[hidden] { display: none; }
.obsa-aside-inhalt { display: flex; flex-direction: column; gap: 12px; }
.obsa-aside-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.obsa-aside-kopf .obsa-st { margin-left: auto; }
.obsa-aside-titel { font-size: 17px; font-weight: 800; }
.obsa-sgi--gross { width: 34px; height: 34px; border-radius: 11px; }
.obsa-sgi--gross .obsa-ic { width: 18px; height: 18px; }
.obsa-aside-block { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--obs-border); }
.obsa-aside-block > .obsa-btn { align-self: flex-start; }
.obsa-aside-block--fuss { margin-top: auto; }
.obsa-topo-meldung { background: var(--obs-ok-soft); }
.obsa-topo-meldung.obsa-hinweis--warnung { background: var(--obs-error-soft); }
.obsa-topo-meldung[hidden] { display: none; }
.obsa-ohne-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 4px; }
.obsa-ohne .obsa-lsk { cursor: pointer; }

/* ---------- 4. features (neu) ---------- */
.obsa-fc .obsa-lc-zeile { align-items: baseline; }
.obsa-fc-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obsa-fc .obsa-lc-zeile .obsa-pill { margin-left: auto; }
.obsa-sgl--offen { --c: #6B7280; } .obsa-sgl--inarbeit { --c: #5048E5; } .obsa-sgl--bereit { --c: #F59E0B; } .obsa-sgl--unterwegs { --c: #0E9F9A; } .obsa-sgl--abgeschlossen { --c: #10B981; } .obsa-sgl--sonstige { --c: #9CA3AF; }
.obsa-ls-detail-kopf--features { background: radial-gradient(60% 140% at 100% 0%, rgba(124,58,237,.18), transparent 60%), radial-gradient(40% 120% at 0% 0%, rgba(139,134,255,.14), transparent 60%), var(--obs-surface); }
.obsa-ls-detail-kopf--features .obsa-tile { box-shadow: 0 8px 20px rgba(124,58,237,.3); }
.obsa-ey a { color: inherit; text-decoration: none; }
.obsa-fc-nummer { font-size: 14px; }
.obsa-kp-wert { font: 700 15px/20px var(--obs-font-sans); overflow: hidden; text-overflow: ellipsis; }
.obsa-card--uebersicht { overflow: hidden; }

/* ---------- 5. benachrichtigungen ---------- */
.obsa-bn-tag { padding: 14px 16px 6px; font: 800 12px/16px var(--obs-font-sans); color: var(--obs-text-muted); text-transform: uppercase; letter-spacing: .06em; border-top: 1px solid var(--obs-border); }
.obsa-bn-tag:first-child { border-top: 0; }
.obsa-bnz { display: flex; align-items: flex-start; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--obs-border); color: var(--obs-text); text-decoration: none; font-size: 14px; line-height: 20px; }
.obsa-bnz:hover { background: color-mix(in srgb, var(--obs-surface-2) 60%, transparent); }
.obsa-bnz .obsa-dot { margin-top: 6px; background: var(--obs-dot-ok); }
.obsa-bnz.obsa-schwere-warnung .obsa-dot { background: var(--obs-dot-warn); }
.obsa-bnz.obsa-schwere-fehler .obsa-dot { background: var(--obs-dot-error); }
.obsa-bnz--erledigt { opacity: .7; }
.obsa-bnz-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.obsa-bnz-meta { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.obsa-bnz-meta time { font-size: 12px; color: var(--obs-text-faint); white-space: nowrap; }
.obsa-chips-rechts { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.obsa-pop-alle { display: block; padding: 8px 10px; border-radius: 8px; font: 700 12px/16px var(--obs-font-sans); color: var(--obs-primary); text-decoration: none; }
.obsa-pop-alle:hover { background: var(--obs-surface-2); }

/* ---------- 6. einstellungen ---------- */
.obsa-einst { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.obsa-einst-nav { position: sticky; top: calc(var(--obsa-top-h, 48px) + 12px); display: flex; flex-direction: column; gap: 2px; }
.obsa-einst-nav a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--obs-text-muted); font: 700 13px/18px var(--obs-font-sans); text-decoration: none; }
.obsa-einst-nav a:hover { background: var(--obs-surface-2); color: var(--obs-text); }
.obsa-einst-liste { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.obsa-einst-karte { scroll-margin-top: calc(var(--obsa-top-h, 48px) + 12px); }
.obsa-einst-karte .obsa-ch p { font-size: 12px; line-height: 16px; color: var(--obs-text-muted); }
.obsa-einst-karte .obsa-ch > div { display: flex; flex-direction: column; }
.obsa-einst-inhalt { padding: 14px 16px; }
.obsa-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.obsa-radio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--obs-border); border-radius: 12px; cursor: pointer; }
.obsa-radio:has(input:checked) { border-color: var(--obs-primary); background: var(--obs-primary-soft); }
.obsa-radio input { margin: 3px 0 0; accent-color: var(--obs-primary); }
.obsa-radio > span { display: flex; flex-direction: column; }
.obsa-konto-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.obsa-avatar--gross { width: 42px; height: 42px; border-radius: 14px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; background: var(--obs-primary-gradient); color: #fff; font-weight: 800; list-style: none; }
.obsa-orga-zeile .obsa-btn { margin-left: auto; }
.obsa-orga-zeile.obsa-on { background: color-mix(in srgb, var(--obs-ok-soft) 60%, transparent); }
.obsa-einst-inhalt .obsa-kvz:first-child { border-top: 0; }

@media (max-width: 1023px) {
  .obsa-einst { grid-template-columns: 1fr; }
  .obsa-einst-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .obsa-ohne-liste { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .obsa-bnz { flex-wrap: wrap; }
  .obsa-bnz-meta { width: 100%; justify-content: flex-start; padding-left: 20px; }
  .obsa-chips-rechts { margin-left: 0; width: 100%; }
  .obsa-dialog-form { padding: 18px 16px 16px; }
  .obsa-konto-zeile .obsa-btn { flex: 1; }
}
/* ---------- 7. measured on kaistat-pc3 17.10.2026 (1440 / 390 px) ---------- */
.obsa-konto-zeile .obsa-wachsen, .obsa-orga-zeile .obsa-wachsen { display: flex; flex-direction: column; }
.obsa-bnz { min-width: 0; }
.obsa-bnz-text b, .obsa-bnz-text span { overflow-wrap: anywhere; }
.obsa-seite > .obsa-card { overflow: hidden; }
/* second "Features" entry in the rail */
.obsa-ni--unter .obsa-nl { font-size: 12.5px; opacity: .92; }
/* ---------- 8. "ohne Segment" as drop target (17.10.2026, POST /netz/landschaften/{id}/segment) ---------- */
.obsa-ohne--leer { border: 1px dashed var(--obs-border-strong); background: transparent; color: var(--obs-text-muted); }
.obsa-ohne--leer > b { color: var(--obs-text-muted); }
.obsa-ohne--leer .obsa-ohne-liste { display: none; }
html.obsa-zieht .obsa-ohne:not(.obsa-sg--ziel) { border-style: dashed; border-color: color-mix(in srgb, var(--obs-primary) 70%, transparent); }
.obsa-ohne.obsa-sg--ziel { border: 1px solid var(--obs-primary); background: color-mix(in srgb, var(--obs-primary) 18%, var(--obs-surface)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--obs-primary) 30%, transparent); color: var(--obs-text); }
.obsa-ohne.obsa-sg--ziel > b, .obsa-ohne.obsa-sg--ziel > span { color: var(--obs-text); }