/* =========================================================================
   VR AGRAR – Beta-Design (neues CSS)
   =========================================================================
   Fundament für den kompletten Umbau. Alle Regeln sind unter `body.beta`
   gescoped, greifen also NUR im Beta-Modus (Schalter in der Navbar) und
   lassen das bestehende Design unberührt.

   Farbtokens kommen aus vragrar-brand.css (--vr-olivgruen, --vr-anthrazit, …).
   Diese Datei wächst iterativ mit dem Umbau.
   ------------------------------------------------------------------------- */

body.beta {
    /* Beta-spezifische, semantische Tokens (aus der Markenpalette abgeleitet) */
    --bx-bg:        #f5f5f3;                /* heller, neutraler Seitenhintergrund */
    --bx-surface:   var(--vr-weiss);        /* Karten/Flächen */
    --bx-ink:       var(--vr-anthrazit);    /* Haupttextfarbe */
    --bx-muted:     #6b6c67;                /* gedämpfter Text */
    --bx-accent:    var(--vr-olivgruen);    /* Auszeichnungsfarbe */
    --bx-accent-ink:var(--vr-weiss);        /* Text auf Akzent */
    --bx-border:    var(--vr-hellgrau);     /* Rahmen/Trenner */
    --bx-radius:    10px;

    background: var(--bx-bg);
    color: var(--bx-ink);
}

/* --- Typografie -------------------------------------------------------- */
body.beta h1, body.beta h2, body.beta h3,
body.beta h4, body.beta h5, body.beta h6 {
    color: var(--bx-ink);
    letter-spacing: .2px;
}

body.beta a {
    color: var(--bx-accent);
}
body.beta a:hover {
    color: var(--vr-anthrazit);
}

/* --- Navbar: Anthrazit mit Olivgrün-Akzent ---------------------------- */
body.beta .navbar-custom {
    background: var(--vr-anthrazit) !important;
    border-bottom: 3px solid var(--bx-accent);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
body.beta .navbar-custom .nav-link {
    color: #d9dad5 !important;
    border-radius: 6px;
    transition: background .15s ease, color .15s ease;
}
body.beta .navbar-custom .nav-link:hover {
    color: var(--vr-weiss) !important;
    background: rgba(113,115,87,.30);   /* Olivgrün, transparent */
}
body.beta .navbar-custom .nav-link.nav-beta-active {
    color: var(--bx-accent-ink) !important;
    background: var(--bx-accent);
}

/* --- Karten/Flächen --------------------------------------------------- */
body.beta .card,
body.beta .standardcard,
body.beta .hfm-summary {
    background: var(--bx-surface);
    border: 1px solid var(--bx-border);
    border-radius: var(--bx-radius);
}

/* --- Buttons: Olivgrün als Primäraktion ------------------------------- */
body.beta .btn-accent,
body.beta .hfm-btn-primary,
body.beta .btn-hfm.btn-accent {
    background: var(--bx-accent);
    border-color: var(--bx-accent);
    color: var(--bx-accent-ink);
}
body.beta .btn-accent:hover,
body.beta .hfm-btn-primary:hover,
body.beta .btn-hfm.btn-accent:hover {
    background: var(--vr-anthrazit);
    border-color: var(--vr-anthrazit);
    color: var(--vr-weiss);
}

/* =========================================================================
   Layout: Sidebar (links) + zentrale Topbar (oben) + Content
   ========================================================================= */
/* Sidebar breit genug für das längste Label („Beleihungswertermittlung") + Schloss */
:root { --bx-sidebar-w: 288px; --bx-topbar-h: 64px; }

/* Altes Navbar-Chrome im Beta-Modus ausblenden */
body.beta .navbar-custom { display: none !important; }

/* Sidebar ---------------------------------------------------------------- */
body.beta .bx-sidebar{
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--bx-sidebar-w);
    background: var(--vr-anthrazit);
    color: #d9dad5;
    display: flex; flex-direction: column;
    padding: 18px 14px;
    z-index: 1050;
    box-shadow: 2px 0 10px rgba(0,0,0,.15);
    overflow-y: auto;
}
body.beta .bx-brand{
    display: block; padding: 4px 8px 18px; text-decoration: none;
}
body.beta .bx-brand img{ height: 30px; width: auto; display: block; }

body.beta .bx-nav{ display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
body.beta .bx-sidebar__foot{ margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; gap:4px; }

body.beta .bx-nav__item{
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; border-radius: 10px;
    color: #cfd0cb; text-decoration: none; font-weight: 500; font-size: .95rem;
    transition: background .15s ease, color .15s ease;
}
body.beta .bx-nav__item i{ width: 20px; flex: none; text-align: center; font-size: 1.05rem; opacity: .9; }
body.beta .bx-nav__item:hover{ background: rgba(113,115,87,.28); color: var(--vr-weiss); }
body.beta .bx-nav__item.is-active{ background: var(--vr-olivgruen); color: var(--vr-weiss); }
body.beta .bx-nav__label{ display:flex; flex-direction:column; line-height:1.15; min-width: 0; }
body.beta .bx-nav__label small{ font-size: .72rem; font-weight: 400; opacity: .75; }
/* Ohne Lizenz: ausgegraut, nicht klickbar */
body.beta .bx-nav__item--locked{ opacity: .4; cursor: default; }
body.beta .bx-nav__item--locked:hover{ background: transparent; color: #cfd0cb; }
/* Schloss/Sanduhr nie abschneiden: fester Platz rechts, Label darf schrumpfen */
body.beta .bx-nav__lock{ margin-left: auto; flex: none; font-size: .8rem; opacity: .9; }

/* Ohne Lizenz, aber anfragbar (Mitarbeiter): <button> im Nav-Look, Klick öffnet
   das Lizenz-Anfrage-Modal (base.html). Browser-Button-Optik komplett neutralisieren
   (appearance/background/border), sonst graue System-Pillen auf dunkler Sidebar. */
body.beta button.bx-nav__item--anfrage{
    appearance: none; -webkit-appearance: none;
    background: transparent; width: 100%; font: inherit;
    text-align: left; cursor: pointer;
    border: 1px dashed rgba(255,255,255,.22);
    color: #cfd0cb; opacity: .75;
}
body.beta button.bx-nav__item--anfrage:hover{
    background: rgba(113,115,87,.35); border-color: transparent;
    color: var(--vr-weiss); opacity: 1;
}

/* Topbar ----------------------------------------------------------------- */
body.beta .bx-topbar{
    position: fixed; top: 0; left: var(--bx-sidebar-w); right: 0;
    height: var(--bx-topbar-h);
    background: var(--vr-weiss);
    border-bottom: 1px solid var(--bx-border);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: 0 20px; z-index: 1040;
}
body.beta .bx-topbar__left{ justify-self: start; display: flex; align-items: center; gap: 14px; min-width: 0; }
body.beta .bx-topbar__center{ justify-self: center; }
body.beta .bx-topbar__right{ justify-self: end; display: flex; gap: 6px; }

body.beta .bx-chip{
    display:inline-flex; align-items:center; gap:6px;
    background: var(--vr-olivgruen); color: var(--vr-weiss);
    padding: 5px 12px; border-radius: 999px; font-size:.8rem; font-weight:600; text-decoration:none;
}
body.beta .bx-chip:hover{ background: var(--vr-anthrazit); }

body.beta .bx-user{ display: flex; align-items: center; gap: 12px; }
body.beta .bx-user__avatar{
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; overflow: hidden;
    background: var(--vr-olivgruen); color: var(--vr-weiss);
    display: grid; place-items: center; font-weight: 700; font-size: .9rem; text-transform: uppercase;
}
body.beta .bx-user__meta{ display: flex; flex-direction: column; line-height: 1.2; }
body.beta .bx-user__name{ font-weight: 700; color: var(--vr-anthrazit); }
body.beta .bx-user__org{ font-size: .8rem; color: var(--bx-muted); }

body.beta .bx-iconbtn{
    width: 36px; height: 36px; border-radius: 9px;
    display: grid; place-items: center; color: var(--bx-muted); text-decoration: none;
    border: 1px solid transparent; background: transparent; cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body.beta .bx-iconbtn:hover{ background: #ececea; color: var(--vr-anthrazit); }

/* Content gegen Sidebar/Topbar versetzen --------------------------------- */
body.beta #page_content{
    margin-left: var(--bx-sidebar-w);
    padding: calc(var(--bx-topbar-h) + 22px) 26px 40px;
    min-height: 100vh;
}

/* Startseite: wachsendes Feld (Hero) ------------------------------------- */
body.beta .bx-hero{
    position: relative; overflow: hidden;
    min-height: calc(100vh - var(--bx-topbar-h) - 70px);
}
body.beta .bx-hero__canvas{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }
body.beta .bx-hero__welcome{ position: relative; z-index: 1; }
body.beta .bx-hero__welcome h1{ margin: 0 0 6px; font-size: 1.9rem; color: var(--vr-anthrazit); }
body.beta .bx-hero__welcome p{ margin: 0; color: var(--bx-muted); }
body.beta .bx-weather{
    display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
    padding: 6px 13px; border-radius: 999px;
    background: var(--vr-weiss); border: 1px solid var(--bx-border);
    font-size: .86rem; font-weight: 600; color: var(--vr-anthrazit);
    box-shadow: 0 2px 8px rgba(47,48,48,.06);
}
body.beta .bx-weather i{ color: var(--vr-olivgruen); }
body.beta .bx-hero__hint{ margin-top: 14px !important; font-size: .85rem; transition: opacity .6s ease; }

/* Breadcrumb (Pfad oben im Content) – Chevron-Stepper -------------------- */
body.beta .bx-breadcrumb{
    display: flex; align-items: stretch; flex-wrap: nowrap;
    margin: 0; font-size: .82rem; line-height: 1; min-width: 0;
}
/* Eine Pfeil-Stufe ------------------------------------------------------- */
body.beta .bx-breadcrumb > a,
body.beta .bx-breadcrumb > span{
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px 8px 22px;
    margin-left: -9px;                 /* überlappt die Pfeilspitze davor */
    background: #e8e8e4; color: var(--bx-muted);
    text-decoration: none; font-weight: 500; white-space: nowrap;
    /* links Kerbe, rechts Spitze */
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%);
    transition: background .15s ease, color .15s ease;
}
body.beta .bx-breadcrumb > a i{ font-size: .9em; opacity: .75; }

/* erste Stufe: gerade linke Kante (keine Kerbe) */
body.beta .bx-breadcrumb > :first-child{
    margin-left: 0; padding-left: 14px; border-radius: 6px 0 0 6px;
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);
}
/* letzte Stufe: gerade rechte Kante (keine Spitze) = aktuelle Seite */
body.beta .bx-breadcrumb > :last-child{
    padding-right: 18px; border-radius: 0 6px 6px 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 11px 50%);
}
/* falls nur eine Stufe da ist (gerade beide Kanten) */
body.beta .bx-breadcrumb > :first-child:last-child{
    border-radius: 6px;
    clip-path: none;
}

/* Hover auf verlinkte Stufen */
body.beta .bx-breadcrumb > a:hover{ background: #dddcd6; color: var(--vr-anthrazit); }

/* aktuelle Seite: oliv gefüllt */
body.beta .bx-breadcrumb [aria-current="page"]{
    background: var(--vr-olivgruen); color: var(--vr-weiss); font-weight: 600;
}

/* =========================================================================
   Beta-Seiteninhalte (Platzhalter VR Agrar Markt / Beleihung LW)
   ========================================================================= */
body.beta .bx-page{ max-width: 1100px; margin-inline: auto; }
body.beta .bx-page__head{ margin-bottom: 26px; }
body.beta .bx-page__head h1{ margin: 0 0 5px; font-size: 1.55rem; color: var(--vr-anthrazit); }
body.beta .bx-page__head p{ margin: 0; color: var(--bx-muted); }

body.beta .bx-cards{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px;
}
body.beta .bx-card{
    background: var(--bx-surface); border: 1px solid var(--bx-border); border-radius: var(--bx-radius);
    padding: 22px; transition: box-shadow .15s ease, transform .15s ease;
}
body.beta .bx-card:hover{ box-shadow: 0 6px 18px rgba(47,48,48,.10); transform: translateY(-2px); }
body.beta .bx-card i{ font-size: 1.6rem; color: var(--vr-olivgruen); }
body.beta .bx-card h3{ margin: 12px 0 6px; font-size: 1.05rem; color: var(--vr-anthrazit); }
body.beta .bx-card p{ margin: 0; color: var(--bx-muted); font-size: .92rem; }

body.beta .bx-soon{ margin-top: 24px; color: var(--bx-muted); font-style: italic; }

body.beta .bx-empty{
    margin-top: 30px; padding: 60px 20px; text-align: center;
    border: 2px dashed var(--bx-border); border-radius: 14px; color: var(--bx-muted);
}
body.beta .bx-empty i{ font-size: 2.4rem; color: var(--vr-olivgruen); display: block; margin-bottom: 12px; }

/* =========================================================================
   Verwaltungs-Dashboard (Beta)
   ========================================================================= */
body.beta .bx-admin{ max-width: 1180px; }

/* Info-Box (components/bx_info.html) – reine Anzeige, Einträge nebeneinander */
body.beta .bx-info{
    background: var(--bx-surface); border: 1px solid var(--bx-border);
    border-radius: var(--bx-radius); margin-bottom: 30px;
    display: block; width: 100%;
}
body.beta .bx-info__head{
    display: flex; align-items: center; gap: 8px;
    padding: 12px 18px 11px; border-bottom: 1px solid var(--bx-border);
    font-size: .78rem; text-transform: uppercase; letter-spacing: 1px;
    color: var(--bx-muted); font-weight: 700;
}
body.beta .bx-info__head i{ color: var(--vr-olivgruen); }
body.beta .bx-info__list{ display: flex; flex-wrap: wrap; margin: 0; }
body.beta .bx-info__row{
    flex: 1 1 0; min-width: 150px;
    display: flex; flex-direction: column; gap: 9px;
    padding: 14px 20px; border-right: 1px solid #f0f0ee;
}
body.beta .bx-info__row:last-child{ border-right: none; }
body.beta .bx-info__label{
    display: flex; align-items: center; gap: 9px; margin: 0;
    color: var(--bx-muted); font-size: .82rem; white-space: nowrap;
}
body.beta .bx-info__ico{
    width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
    display: grid; place-items: center; font-size: .8rem;
    background: rgba(113,115,87,.12); color: var(--vr-olivgruen);
}
body.beta .bx-info__value{
    margin: 0; font-weight: 800; color: var(--vr-anthrazit); font-size: 1.35rem;
    line-height: 1.1; font-variant-numeric: tabular-nums;
}
body.beta .bx-info__hint{ font-weight: 400; font-size: .75rem; color: var(--bx-muted); }

/* Kennzahlen */
body.beta .bx-stats{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;
    margin-bottom: 30px;
}
/* Stat-Karten: reine Anzeige – bewusst flach/getönt, NICHT wie eine klickbare Kachel */
body.beta .bx-stat{
    display: flex; align-items: center; gap: 13px;
    background: #ececea; border: 1px solid transparent;
    border-radius: var(--bx-radius); padding: 13px 16px;
    cursor: default;
}
body.beta .bx-stat__icon{
    width: 42px; height: 42px; border-radius: 11px; flex: 0 0 auto;
    display: grid; place-items: center; font-size: 1.1rem;
    background: var(--vr-weiss); color: var(--vr-olivgruen);
}
body.beta .bx-stat__txt{ display: flex; flex-direction: column; line-height: 1.15; }
body.beta .bx-stat__num{ font-size: 1.4rem; font-weight: 800; color: var(--vr-anthrazit); }
body.beta .bx-stat__lbl{ font-size: .8rem; color: var(--bx-muted); }
body.beta .bx-stat__sub{ font-size: .72rem; color: var(--bx-muted); opacity: .85; margin-top: 2px; }

/* Optionale klickbare Variante (wenn ein Eintrag ein href bekommt) */
body.beta a.bx-stat--link{
    text-decoration: none; cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.beta a.bx-stat--link:hover{
    background: var(--vr-weiss); box-shadow: 0 6px 16px rgba(47,48,48,.10); transform: translateY(-2px);
}
body.beta .bx-stat__go{ margin-left: auto; color: var(--bx-border); transition: color .15s ease, transform .15s ease; }
body.beta a.bx-stat--link:hover .bx-stat__go{ color: var(--vr-olivgruen); transform: translateX(3px); }

/* Abschnitts-Titel */
body.beta .bx-section-title{
    font-size: .8rem; text-transform: uppercase; letter-spacing: 1.4px;
    color: var(--bx-muted); font-weight: 700;
    margin: 26px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--bx-border);
}

/* Kachel-Grid */
body.beta .bx-tiles{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px;
}
body.beta .bx-tile{
    display: flex; align-items: center; gap: 16px;
    background: var(--bx-surface); border: 1px solid var(--bx-border);
    border-radius: var(--bx-radius); padding: 18px 20px;
    text-decoration: none; color: inherit;
    border-left: 4px solid var(--vr-olivgruen);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
body.beta .bx-tile:hover{
    box-shadow: 0 8px 20px rgba(47,48,48,.12); transform: translateY(-2px);
    border-left-color: var(--vr-anthrazit);
}
body.beta .bx-tile__icon{
    width: 48px; height: 48px; border-radius: 12px; flex: 0 0 auto;
    display: grid; place-items: center; font-size: 1.25rem;
    background: var(--vr-anthrazit); color: var(--vr-weiss);
}
body.beta .bx-tile:hover .bx-tile__icon{ background: var(--vr-olivgruen); }
body.beta .bx-tile__body{ display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }
body.beta .bx-tile__title{ font-weight: 700; color: var(--vr-anthrazit); font-size: 1.02rem; }
body.beta .bx-tile__desc{ color: var(--bx-muted); font-size: .9rem; line-height: 1.35; }
body.beta .bx-tile__go{ color: var(--bx-border); transition: color .15s ease, transform .15s ease; }
body.beta .bx-tile:hover .bx-tile__go{ color: var(--vr-olivgruen); transform: translateX(3px); }

/* =========================================================================
   Listen-Seiten (Beta): Kopfzeile mit Aktionen, Suche, Tabelle
   ========================================================================= */
body.beta .bx-page__head--row{
    display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
body.beta .bx-actions{ display: flex; gap: 10px; flex-wrap: wrap; }

/* Buttons */
body.beta .bx-btn{
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 8px; font-weight: 600; font-size: .84rem;
    text-decoration: none; border: 1px solid transparent; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
body.beta .bx-btn i{ font-size: .9em; }
body.beta .bx-btn--primary{ background: var(--vr-olivgruen); color: var(--vr-weiss); }
body.beta .bx-btn--primary:hover{ background: #60624a; box-shadow: 0 3px 10px rgba(113,115,87,.35); }
body.beta .bx-btn--ghost{ background: var(--vr-weiss); color: var(--vr-anthrazit); border-color: var(--bx-border); }
body.beta .bx-btn--ghost:hover{ border-color: var(--vr-olivgruen); color: var(--vr-olivgruen); }

/* Toolbar-Zeile: Suche + Aktion nebeneinander */
body.beta .bx-toolbar{
    display: flex; align-items: center; gap: 12px;
    justify-content: space-between; flex-wrap: wrap;
    margin: 18px 0 16px;
}
body.beta .bx-toolbar .bx-search{ margin: 0; flex: 1 1 280px; }

/* Suche */
body.beta .bx-search{
    position: relative; margin: 18px 0 16px; max-width: 420px;
}
body.beta .bx-search i{
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: .85rem; color: var(--bx-muted);
}
body.beta .bx-search input{
    width: 100%; padding: 8px 12px 8px 34px;
    border: 1px solid var(--bx-border); border-radius: 8px; background: var(--vr-weiss);
    font-size: .85rem; color: var(--bx-ink);
}
body.beta .bx-search input:focus{ outline: none; border-color: var(--vr-olivgruen); box-shadow: 0 0 0 3px rgba(113,115,87,.15); }

/* Tabelle */
body.beta .bx-tablewrap{
    background: var(--bx-surface); border: 1px solid var(--bx-border);
    border-radius: var(--bx-radius); overflow: hidden;
}
body.beta .bx-table{ width: 100%; border-collapse: collapse; font-size: .86rem; }
body.beta .bx-table thead th{
    text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .6px;
    color: var(--bx-muted); font-weight: 700;
    padding: 9px 14px; background: #fafafa; border-bottom: 1px solid var(--bx-border);
}
body.beta .bx-table tbody td{ padding: 9px 14px; border-bottom: 1px solid #f0f0ee; vertical-align: middle; }
body.beta .bx-table tbody tr:last-child td{ border-bottom: none; }
body.beta .bx-table tbody tr:hover{ background: #faf9f6; }
body.beta .bx-cell-id{ color: var(--bx-muted); font-variant-numeric: tabular-nums; width: 64px; }
body.beta .bx-cell-strong{ display: block; font-weight: 600; color: var(--vr-anthrazit); }
body.beta .bx-cell-sub{ display: block; font-size: .82rem; color: var(--bx-muted); }
body.beta .bx-th-num{ text-align: right; }
body.beta .bx-td-num{ text-align: right; font-variant-numeric: tabular-nums; }
body.beta .bx-row-actions{ text-align: right; white-space: nowrap; }
body.beta .bx-row-actions .bx-iconbtn{ display: inline-grid; }
body.beta .bx-iconbtn--danger:hover{ background: #fde8e8; color: #c0392b; }
body.beta .bx-table-empty{ text-align: center; color: var(--bx-muted); padding: 40px 16px; }

/* Status-Badge */
body.beta .bx-badge{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap;
}
body.beta .bx-badge::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
body.beta .bx-badge--ok{ background: rgba(113,115,87,.16); color: #5b5d44; }
body.beta .bx-badge--off{ background: #ededeb; color: #97968f; }

/* Feature-Chips (ohne Status-Punkt) */
body.beta .bx-tag{
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: .72rem; font-weight: 600; margin: 1px 2px 1px 0;
    background: rgba(113,115,87,.14); color: #5b5d44; white-space: nowrap;
}

/* Aktionen-Dropdown (Kebab-Menü) */
body.beta .bx-menu{ position: relative; display: inline-block; }
body.beta .bx-menu__list{
    position: fixed; z-index: 1200; display: none; min-width: 212px;
    background: var(--vr-weiss); border: 1px solid var(--bx-border); border-radius: 10px;
    box-shadow: 0 12px 30px rgba(47,48,48,.18); padding: 6px;
}
body.beta .bx-menu.is-open .bx-menu__list{ display: block; }
body.beta .bx-menu.is-open .bx-iconbtn{ background: #ececea; color: var(--vr-anthrazit); }
body.beta .bx-menu__list a,
body.beta .bx-menu__list button{
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 9px 12px; border-radius: 8px; text-decoration: none;
    color: var(--vr-anthrazit); font-size: .86rem; font-weight: 500; white-space: nowrap;
    background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
}
body.beta .bx-menu__list a i,
body.beta .bx-menu__list button i{ width: 16px; text-align: center; color: var(--bx-muted); font-size: .9em; }
body.beta .bx-menu__list a:hover,
body.beta .bx-menu__list button:hover{ background: #f1f1ee; }
body.beta .bx-menu__sep{ height: 1px; background: var(--bx-border); margin: 5px 4px; }
body.beta .bx-menu__list .bx-menu__danger,
body.beta .bx-menu__list .bx-menu__danger i{ color: #c0392b; }
body.beta .bx-menu__list .bx-menu__danger:hover{ background: #fde8e8; }

/* Checkbox-Gruppe in Formularen */
body.beta .bx-checks{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 2px; }
body.beta .bx-check{ display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--vr-anthrazit); cursor: pointer; }
body.beta .bx-check input{ width: 16px; height: 16px; accent-color: var(--vr-olivgruen); }

/* Tabelle responsiv: Karten-Ansicht auf schmalen Screens */
@media (max-width: 720px){
    body.beta .bx-table thead{ display: none; }
    body.beta .bx-table, body.beta .bx-table tbody, body.beta .bx-table tr, body.beta .bx-table td{ display: block; width: 100%; }
    body.beta .bx-table tr{ border-bottom: 8px solid #f0f0ee; padding: 6px 0; }
    body.beta .bx-table td{ border: none; padding: 6px 16px; }
    body.beta .bx-table td[data-label]::before{ content: attr(data-label) ": "; font-weight: 700; color: var(--bx-muted); }
    body.beta .bx-row-actions{ text-align: left; }
}

/* =========================================================================
   Modale + Formulare (Beta)
   ========================================================================= */
body.beta .bx-btn--danger{ background: #c0392b; color: #fff; }
body.beta .bx-btn--danger:hover{ background: #a93226; box-shadow: 0 3px 10px rgba(192,57,43,.3); }

body.beta .bx-modal{
    position: fixed; inset: 0; display: none;
    align-items: flex-start; justify-content: center;
    z-index: 1100; padding: 6vh 16px;
}
body.beta .bx-modal.is-open{ display: flex; }
body.beta .bx-modal__overlay{ position: absolute; inset: 0; background: rgba(20,20,18,.55); }
body.beta .bx-modal__dialog{
    position: relative; width: 100%; max-width: 640px;
    background: var(--bx-surface); border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,.30); overflow: hidden;
    animation: bx-pop .15s ease;
}
body.beta .bx-modal__dialog--sm{ max-width: 460px; }
@keyframes bx-pop{ from{ transform: translateY(-8px); opacity: 0; } to{ transform: none; opacity: 1; } }

body.beta .bx-modal__head{
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid var(--bx-border);
}
body.beta .bx-modal__head h3{ margin: 0; font-size: 1.2rem; color: var(--vr-anthrazit); }
body.beta .bx-modal__x{
    border: none; background: none; cursor: pointer; font-size: 1.1rem; color: var(--bx-muted);
    width: 34px; height: 34px; border-radius: 8px;
}
body.beta .bx-modal__x:hover{ background: #ececea; color: var(--vr-anthrazit); }
body.beta .bx-modal__body{ padding: 22px; max-height: 70vh; overflow-y: auto; }
body.beta .bx-lock{
    background: #fdf3e7; border: 1px solid #f0d9b5; color: #8a5a00;
    padding: 9px 12px; border-radius: 9px; font-size: .84rem; margin: 0 0 14px;
}
body.beta .bx-ajax-state{ padding: 32px 22px; text-align: center; color: var(--bx-muted); font-size: .9rem; }
body.beta .bx-ajax-state--err{ color: #c0392b; }

/* Lizenz-Matrix */
body.beta .bx-matrix thead th{ text-transform: none; letter-spacing: normal; }
body.beta .bx-matrix__proc{ text-align: center; vertical-align: bottom; min-width: 116px; }
body.beta .bx-matrix__proc > i{ display: block; font-size: 1.05rem; color: var(--vr-olivgruen); margin-bottom: 5px; }
body.beta .bx-matrix__proc-name{ display: block; font-size: .8rem; font-weight: 700; color: var(--vr-anthrazit); line-height: 1.2; }
body.beta .bx-matrix__count{ display: block; margin-top: 5px; font-size: .72rem; font-weight: 600; color: var(--bx-muted); white-space: nowrap; }
body.beta .bx-matrix__cell{ text-align: center; }
body.beta .bx-matrix__cell input{ width: 18px; height: 18px; accent-color: var(--vr-olivgruen); cursor: pointer; }
body.beta .bx-matrix__cell input:disabled{ cursor: not-allowed; opacity: .35; }

/* Zelle mit offener Lizenz-Anfrage (Häkchen setzen = genehmigen) */
body.beta .bx-matrix__cell--anfrage{ background: #fdf3e7; box-shadow: inset 0 0 0 1px #f0d9b5; }

/* Offene Lizenz-Anfragen (Liste unter der Matrix) */
body.beta .bx-anfragen h4{ margin: 0 0 10px; font-size: .95rem; color: var(--vr-anthrazit); display:flex; align-items:center; gap:8px; }
body.beta .bx-anfragen__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
body.beta .bx-anfragen__list li{
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border: 1px solid #f0d9b5; background: #fdf3e7; border-radius: 10px;
}
body.beta .bx-anfragen__text{ display: flex; flex-direction: column; min-width: 0; }
body.beta .bx-anfragen__list form{ margin: 0; flex: none; }

/* Zähler-Badge an einer Kachel (z. B. offene Lizenz-Anfragen) */
body.beta .bx-tile__badge{
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
    border-radius: 999px; background: #c47b1e; color: #fff;
    font-size: .72rem; font-weight: 700; vertical-align: middle;
}

/* Zähler-Badge am Sidebar-Eintrag (Verwaltung: offene Lizenz-Anfragen) */
body.beta .bx-nav__badge{
    margin-left: auto; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 19px; height: 19px; padding: 0 6px;
    border-radius: 999px; background: #c47b1e; color: #fff;
    font-size: .7rem; font-weight: 700;
}

/* Hinweis-Karte (z. B. Startseite: offene Lizenz-Anfragen), klickbar */
body.beta .bx-notice{
    display: flex; align-items: center; gap: 14px;
    max-width: 560px; margin: 4px 0 14px; padding: 14px 16px;
    background: #fdf3e7; border: 1px solid #f0d9b5; border-radius: 12px;
    color: #8a5a00; text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}
body.beta .bx-notice:hover{ box-shadow: 0 6px 18px rgba(196,123,30,.18); transform: translateY(-1px); }
body.beta .bx-notice > i{ font-size: 1.3rem; flex: none; }
body.beta .bx-notice__text{ display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
body.beta .bx-notice__text small{ color: #a5793a; }
body.beta .bx-notice__go{ margin-left: auto; flex: none; opacity: .7; }
body.beta .bx-matrix__row--locked{ background: #faf9f6; }
body.beta .bx-matrix__lock{ color: var(--bx-muted); opacity: .55; font-size: .85rem; }
body.beta .bx-lz{ font-variant-numeric: tabular-nums; font-weight: 600; color: var(--vr-anthrazit); }
body.beta .bx-lz--voll{ color: #c0392b; }
body.beta .bx-matrix__actions{ display: flex; justify-content: flex-end; margin-top: 16px; }
/* Im Modal mehr Breite für die Matrix */
body.beta .bx-modal__dialog:has(.bx-matrix){ max-width: 860px; }
/* Sticky-Tabellenkopf im „Lizenzen verteilen"-Modal: Scroll wandert vom
   Modal-Body in den Tabellen-Wrap, damit der Spaltenkopf beim Runterscrollen
   (viele Mitarbeiter) sichtbar bleibt. */
body.beta .bx-modal__body:has(.bx-matrix){ max-height: none; overflow: visible; }
body.beta .bx-tablewrap:has(.bx-matrix){ overflow: auto; max-height: 56vh; }
body.beta .bx-matrix thead th{
    position: sticky; top: 0; z-index: 3;
    background: #fafafa;                          /* opak, damit Zeilen durchscrollen */
    box-shadow: inset 0 -1px 0 var(--bx-border);  /* Trennlinie bleibt (border-collapse-Fix) */
}

/* Avatare (Mitarbeiter-Profilbilder) */
body.beta .bx-person{ display: flex; align-items: center; gap: 10px; }
body.beta .bx-avatar{
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
    background: var(--vr-olivgruen); color: var(--vr-weiss);
    display: inline-grid; place-items: center;
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
}
body.beta .bx-avatar--lg{ width: 46px; height: 46px; font-size: 1.15rem; }
body.beta .bx-avatar--none{ background: #c9c9c4; }
body.beta .bx-avatar--img{ background: none; overflow: hidden; }
body.beta .bx-avatar--img img{ width: 100%; height: 100%; object-fit: cover; }
body.beta .bx-user__avatar img{ width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Avatar-Upload + Editor (Vorschau + Positionierung) */
body.beta .bx-avatar-upload{ margin-top: 14px; }
body.beta .bx-avatar-editor{ display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
body.beta .bx-avatar-editor__side{ flex: 1 1 auto; }
body.beta .bx-avatar-frame{
    width: 120px; height: 120px; border-radius: 50%; flex: 0 0 auto;
    overflow: hidden; border: 1px solid var(--bx-border); background: #f0f0ee;
    cursor: grab; touch-action: none;
}
body.beta .bx-avatar-frame:active{ cursor: grabbing; }
body.beta .bx-avatar-frame img{ width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }

/* Avatar-Auswahl im Formular */
body.beta .bx-avatar-pick{ display: flex; flex-wrap: wrap; gap: 10px; }
body.beta .bx-avatar-opt{ cursor: pointer; line-height: 0; }
body.beta .bx-avatar-opt input{ position: absolute; opacity: 0; width: 0; height: 0; }
body.beta .bx-avatar-opt .bx-avatar{ transition: outline-color .12s ease; outline: 3px solid transparent; outline-offset: 2px; }
body.beta .bx-avatar-opt input:checked + .bx-avatar{ outline-color: var(--vr-olivgruen); }
body.beta .bx-avatar-opt input:focus-visible + .bx-avatar{ outline-color: var(--vr-anthrazit); }

/* Hinweis-Notizen (Messages) */
body.beta .bx-note{ padding: 10px 14px; border-radius: 9px; font-size: .86rem; margin: 0 0 14px; }
body.beta .bx-note--success{ background: rgba(113,115,87,.14); color: #4f513c; }
body.beta .bx-note--warning{ background: #fdf3e7; color: #8a5a00; border: 1px solid #f0d9b5; }
body.beta .bx-note--error{ background: #fde8e8; color: #c0392b; }
body.beta .bx-perm-list{ margin: 6px 0 0; padding-left: 18px; }
body.beta .bx-perm-list li{ margin: 2px 0; }
body.beta .bx-modal__foot{
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 22px; border-top: 1px solid var(--bx-border); background: #fafafa;
}

/* Formular-Grid */
body.beta .bx-form{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
body.beta .bx-field{ display: flex; flex-direction: column; gap: 5px; }
body.beta .bx-field--wide{ grid-column: 1 / -1; }
body.beta .bx-field span{ font-size: .82rem; color: var(--bx-muted); font-weight: 600; }
body.beta .bx-field input{
    padding: 9px 11px; border: 1px solid var(--bx-border); border-radius: 9px;
    font-size: .95rem; color: var(--bx-ink); background: var(--vr-weiss);
}
body.beta .bx-field input:focus{ outline: none; border-color: var(--vr-olivgruen); box-shadow: 0 0 0 3px rgba(113,115,87,.15); }
@media (max-width: 560px){ body.beta .bx-form{ grid-template-columns: 1fr; } }
body.beta .bx-field .bx-field__help{ font-weight: 400; font-size: .76rem; color: var(--bx-muted); margin-top: 2px; }
body.beta .bx-field input[readonly]{ background: #f0f0ee; color: var(--bx-muted); cursor: default; }
body.beta .bx-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; color: var(--bx-muted); }

/* Formular-Abschnitte (Stammdaten / Verantwortlichkeiten …) */
body.beta .bx-formsection{ padding-top: 18px; margin-top: 18px; border-top: 1px dashed var(--bx-border); }
body.beta .bx-formsection:first-child{ padding-top: 0; margin-top: 0; border-top: 0; }
body.beta .bx-formsection > h4{
    margin: 0 0 12px; font-size: .78rem; text-transform: uppercase; letter-spacing: 1px;
    color: var(--bx-muted); font-weight: 700;
}

/* Checkbox als Karte + Karten-Grid */
body.beta .bx-cardgrid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
body.beta .bx-checkcard{
    display: flex; align-items: center; gap: 10px;
    padding: 11px 13px; border-radius: 11px; cursor: pointer;
    border: 1px solid var(--bx-border); background: #fafafa;
    font-size: .88rem; font-weight: 600; color: var(--vr-anthrazit);
    transition: border-color .15s ease, background .15s ease;
}
body.beta .bx-checkcard:hover{ border-color: var(--vr-olivgruen); }
body.beta .bx-checkcard input{ width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--vr-olivgruen); cursor: pointer; }
body.beta .bx-checkcard:has(input:checked){ border-color: var(--vr-olivgruen); background: rgba(113,115,87,.10); }

body.beta .bx-steps{ margin: 0 0 16px; padding-left: 20px; color: var(--bx-ink); font-size: .92rem; line-height: 1.6; }
body.beta .bx-steps a{ color: var(--vr-olivgruen); font-weight: 600; }
body.beta .bx-hint{ margin: 12px 0 0; font-size: .82rem; color: var(--bx-muted); }

/* Beta-Eckband entfernt: Beta ist das Standard-Design für alle. */

/* ===== Lizenz-Übersicht: Tarife-Block + Paket-Zuweisung ===== */
body.beta .bx-tarife{ margin-bottom: 28px; }
body.beta .bx-betriebe{ margin-top: 8px; }
body.beta .bx-subhead{
    display: flex; align-items: center; gap: 8px;
    font-size: 1.05rem; font-weight: 700; color: var(--bx-ink); margin: 0;
}
body.beta .bx-subhead i{ color: var(--bx-accent); font-size: .95em; }
body.beta .bx-paket-select{
    padding: 7px 10px; border: 1px solid var(--bx-border); border-radius: 9px;
    background: var(--vr-weiss); color: var(--bx-ink); font-size: .9rem;
    max-width: 180px; cursor: pointer;
}
body.beta .bx-paket-select:focus{
    outline: none; border-color: var(--vr-olivgruen);
    box-shadow: 0 0 0 3px rgba(113,115,87,.15);
}
body.beta .bx-paket-select:disabled{ opacity: .6; cursor: default; }

/* ===== Rollen & Rechte: Permission-Matrix (Beta) ===== */
body.beta .bx-page--wide{ max-width: min(1680px, 96vw); }

/* Flash-/Statusmeldungen */
body.beta .bx-flash{ display: grid; gap: 8px; margin: 0 0 16px; }
body.beta .bx-flash__item{
    padding: 10px 14px; border-radius: 9px; font-size: .9rem;
    border: 1px solid var(--bx-border); background: var(--vr-weiss);
}
body.beta .bx-flash__item--ok{ border-color: rgba(113,115,87,.45); background: rgba(113,115,87,.10); color: var(--vr-anthrazit); }
body.beta .bx-flash__item--err{ border-color: #d9b3b3; background: #fbeeee; color: #8a2a2a; }

/* Scroll-Container der Matrix */
body.beta .bx-permwrap{
    border: 1px solid var(--bx-border); border-radius: var(--bx-radius);
    background: var(--vr-weiss); overflow: auto; max-height: 68vh;
}
body.beta .bx-permmatrix{
    border-collapse: separate; border-spacing: 0;
    width: max-content; min-width: 100%; font-size: .82rem;
}
body.beta .bx-permmatrix th,
body.beta .bx-permmatrix td{
    padding: 8px 12px; border-bottom: 1px solid var(--bx-border); white-space: nowrap;
}

/* Sticky-Kopfzeile */
body.beta .bx-permmatrix thead th{
    position: sticky; top: 0; z-index: 3;
    background: #f1f1ee; color: var(--vr-anthrazit); font-weight: 700;
    text-align: center; border-bottom: 2px solid var(--bx-border);
}
/* Sticky erste Spalte (Berechtigungsname) */
body.beta .bx-permmatrix .bx-pm__rowhead{
    position: sticky; left: 0; z-index: 2; background: var(--vr-weiss);
    text-align: left; min-width: 250px; max-width: 340px; white-space: normal;
    font-weight: 600; color: var(--vr-anthrazit);
}
body.beta .bx-permmatrix thead .bx-pm__rowhead{ z-index: 5; background: #f1f1ee; }

/* Zebra + Hover */
body.beta .bx-permmatrix tbody tr:nth-child(even) td{ background: #faf9f7; }
body.beta .bx-permmatrix tbody tr:nth-child(even) .bx-pm__rowhead{ background: #f3f2ef; }
body.beta .bx-permmatrix tbody tr:hover td{ background: rgba(113,115,87,.07); }
body.beta .bx-permmatrix tbody tr:hover .bx-pm__rowhead{ background: rgba(113,115,87,.12); }

body.beta .bx-pm__code{ display: block; font: 600 .7rem ui-monospace, Menlo, Consolas, monospace; color: var(--bx-muted); margin-top: 1px; }
body.beta .bx-pm__col{ text-align: center; vertical-align: top; }
body.beta .bx-pm__colname{ display: block; text-align: center; }
body.beta .bx-pm__colactions{ display: flex; gap: 12px; justify-content: center; margin-top: 4px; }
body.beta .bx-pm__act{ color: var(--bx-muted); font-size: .8rem; }
body.beta .bx-pm__act:hover{ color: var(--vr-olivgruen); }
body.beta .bx-pm__del{ color: var(--bx-muted); font-size: .8rem; }
body.beta .bx-pm__del:hover{ color: #b23a3a; }
body.beta .bx-pm__cell{ text-align: center; vertical-align: middle; }
body.beta .bx-pm__cell input[type="checkbox"]{ display: block; margin: 0 auto; width: 17px; height: 17px; accent-color: var(--vr-olivgruen); cursor: pointer; }

/* Speichern-Button in der Toolbar (oben, rechts neben „Neue Rolle") */
body.beta .bx-toolbar__actions{ display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
body.beta .bx-toolbar__actions .bx-btn[disabled]{ opacity: .5; cursor: not-allowed; }

/* Status-Leiste in der Überblick-Box (Rollen & Rechte) */
body.beta .bx-rollen-overview__status{
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    padding: 11px 18px; border-top: 1px solid var(--bx-border);
    transition: background .15s ease;
}
body.beta .bx-rollen-overview__status[data-state="dirty"]{ background: #fbf6e9; }
body.beta .bx-status{ display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; }
body.beta .bx-status i{ font-size: .95em; }
body.beta .bx-status--ok{ color: var(--vr-olivgruen); }
body.beta .bx-status--warn{ color: #8a6d2a; }
body.beta .bx-status--err{ color: #8a2a2a; }

/* VR Agrar Markt – eingebettete Vorlagen + Konsumenten-Vorschau */
body.beta .bx-vorlage{ border: 1px solid var(--bx-border); border-radius: var(--bx-radius); overflow: hidden; background: var(--vr-weiss); margin-bottom: 20px; }
body.beta .bx-vorlage__head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--bx-border); background: #fafafa; }
body.beta .bx-vorlage__title{ font-weight: 700; color: var(--vr-anthrazit); }
body.beta .bx-vorlage__meta{ display: block; font-size: .78rem; color: var(--bx-muted); font-weight: 400; margin-top: 1px; }
body.beta .bx-vorlage__actions{ display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
body.beta .bx-embed{ width: 100%; height: 72vh; border: 0; display: block; background: #fff; }
body.beta .bx-embed--img{ object-fit: contain; }
body.beta .bx-vorlage__fallback{ padding: 26px 18px; text-align: center; color: var(--bx-muted); }
/* Konsumenten-Vorschau aktiv: Servierer-Steuerung ausblenden */
body.beta .bx-konsument-bar{ display: none; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 16px;
    background: #fbf6e9; border: 1px solid #f0d9b5; border-radius: 9px; color: #8a5a00; font-size: .85rem; }
body.beta .bx-markt.is-konsument-vorschau .bx-konsument-bar{ display: flex; }
body.beta .bx-markt.is-konsument-vorschau .bx-servierer-only{ display: none !important; }

/* Standard-Betriebskosten-Editor (globale Einstellungen) */
.bk-editor{ display:flex; flex-direction:column; gap:14px; margin:10px 0 12px; }
.bk-kat{ border:1px solid #d8d8cf; border-radius:12px; background:#fff; overflow:hidden; }
.bk-kat-head{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
              padding:10px 12px; background:#f4f6ef; border-bottom:1px solid #e7e9df; }
.bk-tag{ flex:none; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
         color:#5a5d3f; background:#e3e8d7; padding:3px 8px; border-radius:8px; }
.bk-kat-name{ flex:1 1 auto; min-width:0; width:auto; padding:8px 10px; border:1px solid #d8d8cf;
              border-radius:8px; font:inherit; font-weight:600; background:#fff; }
.bk-kat-name--locked{ background:#f1f1ee; color:#777; cursor:not-allowed; }
.bk-tools{ display:flex; gap:4px; flex:none; margin-left:auto; }
.bk-kat .bx-iconbtn{ flex:none; width:auto; }
.bk-badge{ flex:none; display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:10px;
           background:#eef0e7; color:#5a5d3f; font-size:.7rem; font-weight:600; white-space:nowrap; }
.bk-pos-wrap{ padding:10px 12px 12px; }
.bk-pos-head{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
              color:#9a9a8a; margin-bottom:8px; }
.bk-pos-list{ display:flex; flex-direction:column; gap:6px; }
.bk-pos{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.bk-pos::before{ content:""; flex:none; width:6px; height:6px; border-radius:50%; background:#c7cdb6; }
.bk-pos-name{ flex:1 1 auto; min-width:0; width:auto; padding:6px 9px; border:1px solid #e0e0d8;
              border-radius:7px; font:inherit; background:#fff; }
.bk-add-pos{ margin-top:10px; }