/* _content/bettERFramework.Sales.UI/Components/Features/SalesPartnerTab.razor.rz.scp.css */
/* Sales-Reiter der Firmen-Maske — nur Layout, Kacheln und Tabelle kommen aus bp-components.css. */

.spt[b-40x6t2bfsb] {
    display: flex;
    flex-direction: column;
    gap: var(--bp-space-3);
}

.spt__tiles[b-40x6t2bfsb] { --bp-stat-cols: 3; }
/* _content/bettERFramework.Sales.UI/Components/Pages/SalesHome.razor.rz.scp.css */
/* Belegliste: KPI-Kacheln = bp-stat-tile (bp-components.css), hier nur Spaltenzahl und
   Abstand zur Tabelle. Ab 1500px greift die Umbruchregel aus bp-stat-tiles (3 Spalten). */

.sales-kpi-grid[b-kdf1btpve2] {
    --bp-stat-cols: 4;
    margin-bottom: var(--bp-space-4);
}

@media (max-width: 900px) {
    .sales-kpi-grid[b-kdf1btpve2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* _content/bettERFramework.Sales.UI/Components/Pages/SalesTemplateDesigner.razor.rz.scp.css */
/* Belegdesigner: Bänder-Navigation, Vorschau-Zeichenfläche, Galerie und Listen-Zeilen.
   Nur Layout und Zustände — Farben kommen aus den Tokens. */

/* Full-Bleed (bp-page--fullbleed hebt das Polster des Scrollbereichs auf): die Seite trägt
   ihre Innenabstände selbst; die Werkzeugleiste klebt dadurch BÜNDIG unter der App-Topbar. */
.designer-page[b-eoxs7ihbjy] {
    min-height: 100%;
    padding-bottom: 1.25rem;

    /* Innenabstand des Ladeskeletts: Topbar-Abstand (0.75rem) + Spalten-Innenabstand oben (1.25rem);
       seitlich 0, weil die drei Spalten (Bänder | Vorschau | Eigenschaften) ihren Rand selbst tragen. */
    --bp-page-inset: 2rem 0 1.25rem;
}

/* Werkzeugleiste der Seite: klebt beim Scrollen oben, deckt voll ab und hält Abstand zum Inhalt. */
.designer-topbar[b-eoxs7ihbjy] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bp-surface);
    border-bottom: 1px solid var(--bp-panel-border);
    padding: 1rem 2rem;
    margin-bottom: 0.75rem;
}

/* Bänder links: die Struktur des Belegs von oben nach unten. Aktives Band trägt die
   CI-gelbe Kante — dieselbe Sprache wie die Modul-Navigation. */
.designer-band[b-eoxs7ihbjy] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    background: transparent;
    color: var(--bp-text-muted);
    border: none;
    border-left: 2px solid transparent;
    cursor: pointer;
    font-weight: 400;
    transition: color 120ms ease-out, background 120ms ease-out;
}

.designer-band:hover[b-eoxs7ihbjy] {
    color: var(--bp-text);
    background: var(--bp-panel-hover);
}

.designer-band:focus-visible[b-eoxs7ihbjy] {
    outline: 1px solid var(--bp-yellow);
    outline-offset: -1px;
}

.designer-band--active[b-eoxs7ihbjy],
.designer-band--active:hover[b-eoxs7ihbjy] {
    background: var(--bp-panel);
    color: var(--bp-text);
    border-left-color: var(--bp-yellow);
    font-weight: 600;
}

/* Zeichenfläche: das Blatt liegt hell auf der Navy-Fläche; die Marken darüber.
   Bewusst scharfe Kanten — ein A4-Blatt hat keine Rundungen. Die Breite (Zoom-Stufen)
   kommt inline aus der Seite. */
.designer-canvas[b-eoxs7ihbjy] {
    position: relative;
    width: 100%;
    aspect-ratio: 210 / 297;
    background: #ffffff;
    border: 1px solid var(--bp-panel-border);
    overflow: hidden;
}

/* Galerie-Voreinstellung: ruhige Zeile mit Farbprobe, Hover wie die Werkzeug-Buttons. */
.designer-preset[b-eoxs7ihbjy] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    background: none;
    border: 1px solid var(--bp-panel-border);
    border-radius: var(--bp-radius-ctl, 8px);
    color: var(--bp-text);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease-out, border-color 120ms ease-out;
}

.designer-preset:hover[b-eoxs7ihbjy] {
    background: var(--bp-panel-hover);
    border-color: rgba(255, 255, 255, 0.16);
}

.designer-preset:focus-visible[b-eoxs7ihbjy] {
    outline: 1px solid var(--bp-yellow);
    outline-offset: 1px;
}

/* Basislayout statt Farbfeld: das Symbol steht für die Anordnung, nicht für eine Farbe. */
.designer-preset__icon[b-eoxs7ihbjy] {
    font-size: 14px;
    color: var(--bp-text-faint);
    flex: none;
}

.designer-preset__swatch[b-eoxs7ihbjy] {
    width: 14px;
    height: 14px;
    border: 1px solid var(--bp-panel-border);
    flex: none;
}

/* Listen-Zeile im Eigenschaften-Panel (Spalten/Kopfdaten): Checkbox + Label + Pfeile.
   Das Textfeld nimmt den Rest, die Pfeile bleiben immer sichtbar. */
.designer-row[b-eoxs7ihbjy] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.designer-row[b-eoxs7ihbjy]  .e-input-group { flex: 1 1 auto; min-width: 0; }

.designer-row__arrows[b-eoxs7ihbjy] {
    display: flex;
    align-items: center;
    flex: none;
}

/* Schmales Breiten-Feld in der Spaltenzeile (leer = automatisch). */
.designer-row__width[b-eoxs7ihbjy] {
    flex: none;
    width: 74px;
}

.designer-row__width[b-eoxs7ihbjy]  .e-input-group { width: 74px; min-width: 0; }

/* Szenario-Leiste über der Vorschau: benannte Gruppen statt loser Knopfreihe. */
.designer-scenarios[b-eoxs7ihbjy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    row-gap: 0.5rem;
}

.designer-scenarios__group[b-eoxs7ihbjy] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Eine Szenario-Achse: Beschriftung über der Auswahl, damit der eingestellte Fall lesbar bleibt. */
.designer-scenarios__field[b-eoxs7ihbjy] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.designer-scenarios__select[b-eoxs7ihbjy] {
    min-width: 11rem;
}

/* Härtefall ist ein Zusatz zu jedem Fall, kein eigener Fall — deshalb Schalter statt Auswahl. */
.designer-scenarios__switch[b-eoxs7ihbjy] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    align-self: end;
    padding-bottom: 0.3rem;
    margin-left: 0.35rem;
    color: var(--bp-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
}

/* Gruppen-Beschriftung der Szenario-Leiste: leise Kapitälchen, benennt die Achse. */
.designer-scenarios__caption[b-eoxs7ihbjy] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bp-text-faint);
    margin-right: 0.2rem;
}

.designer-scenarios__divider[b-eoxs7ihbjy] {
    width: 1px;
    height: 1.4rem;
    background: var(--bp-panel-border);
    margin: 0 0.35rem;
}

/* Textbaustein-Eingabe im Eigenschaften-Panel — Formular-Idiom auf Navy. */
.designer-textarea[b-eoxs7ihbjy] {
    width: 100%;
    resize: vertical;
    background: var(--bp-panel-hover);
    border: 1px solid var(--bp-panel-border);
    border-radius: var(--bp-radius-ctl, 8px);
    color: var(--bp-text);
    font: inherit;
    font-size: 0.85rem;
    line-height: 1.4;
    padding: 0.45rem 0.6rem;
}

.designer-textarea:focus-visible[b-eoxs7ihbjy] {
    outline: 1px solid var(--bp-yellow);
    outline-offset: 1px;
}

/* Datei-Auswahl als Haus-Button: das native Input bleibt (fokussierbar) und liegt unsichtbar
   im Label — Klick aufs Label öffnet den Dateidialog. */
.designer-upload[b-eoxs7ihbjy] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--bp-panel-border);
    border-radius: var(--bp-radius-ctl, 8px);
    color: var(--bp-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease-out, color 120ms ease-out;
}

.designer-upload:hover[b-eoxs7ihbjy] {
    background: var(--bp-panel-hover);
    color: var(--bp-text);
}

.designer-upload:focus-within[b-eoxs7ihbjy] {
    outline: 1px solid var(--bp-yellow);
    outline-offset: 1px;
}

.designer-upload[b-eoxs7ihbjy]  input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

/* Freie Akzentfarbe: nativer Farbwähler im Format der Farbfelder daneben. */
.designer-color[b-eoxs7ihbjy] {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px dashed var(--bp-text-faint);
    background: transparent;
    cursor: pointer;
}

.designer-color[b-eoxs7ihbjy]::-webkit-color-swatch-wrapper { padding: 2px; }
.designer-color[b-eoxs7ihbjy]::-webkit-color-swatch { border: none; }

/* Platzhalter-Chip: Datenschlüssel in Monospace (Code, kein Kostüm); Klick fügt ihn ins
   zuletzt gewählte Textfeld ein, der Tooltip erklärt die Bedeutung. */
.designer-ph[b-eoxs7ihbjy] {
    font-family: var(--bp-font-mono, ui-monospace, monospace);
    font-size: 0.72rem;
    color: var(--bp-text-muted);
    background: var(--bp-panel-hover);
    border: 1px solid var(--bp-panel-border);
    padding: 1px 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 120ms ease-out, border-color 120ms ease-out;
}

.designer-ph:hover[b-eoxs7ihbjy] {
    color: var(--bp-text);
    border-color: rgba(255, 255, 255, 0.16);
}

.designer-ph:focus-visible[b-eoxs7ihbjy] {
    outline: 1px solid var(--bp-yellow);
    outline-offset: 1px;
}

/* Prüfleiste unter der Vorschau. */
.designer-checks[b-eoxs7ihbjy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

/* Ziehgriff der Listen-Zeilen (Spalten/Kopfdaten/Fußzeile): greifbar per Maus (HTML5-Drag)
   UND Tastatur (Pfeiltasten verschieben) — ersetzt die früheren Pfeil-Buttons. */
.designer-row__grip[b-eoxs7ihbjy] {
    flex: none;
    font-size: 0.85rem;
    color: var(--bp-text-faint);
    cursor: grab;
    padding: 0.2rem 0.1rem;
    transition: color 120ms ease-out;
}

.designer-row__grip:hover[b-eoxs7ihbjy] { color: var(--bp-text); }

.designer-row__grip:active[b-eoxs7ihbjy] { cursor: grabbing; }

.designer-row__grip:focus-visible[b-eoxs7ihbjy] {
    outline: 1px solid var(--bp-yellow);
    outline-offset: 1px;
    color: var(--bp-text);
}

/* Ausrichtungs-Knopf der Spaltenzeile: schaltet Auto → Links → Mittig → Rechts weiter. */
.designer-align[b-eoxs7ihbjy] {
    flex: none;
    min-width: 46px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bp-text-muted);
    background: var(--bp-panel-hover);
    border: 1px solid var(--bp-panel-border);
    border-radius: var(--bp-radius-ctl, 8px);
    padding: 3px 6px;
    cursor: pointer;
    transition: color 120ms ease-out, border-color 120ms ease-out;
}

.designer-align:hover:not(:disabled)[b-eoxs7ihbjy] { color: var(--bp-text); border-color: rgba(255, 255, 255, 0.16); }

.designer-align:disabled[b-eoxs7ihbjy] { opacity: 0.45; cursor: default; }

.designer-align:focus-visible[b-eoxs7ihbjy] {
    outline: 1px solid var(--bp-yellow);
    outline-offset: 1px;
}

/* Schrift-je-Element-Zeile (P1): Label + Größe + F/U + Zurücksetzen. Übersteuerte Zeilen
   tragen die CI-gelbe Kante — dieselbe Sprache wie das aktive Band. */
.designer-row--style[b-eoxs7ihbjy] { padding-left: 0.35rem; border-left: 2px solid transparent; }

.designer-row--overridden[b-eoxs7ihbjy] { border-left-color: var(--bp-yellow); }

.designer-row__stylelabel[b-eoxs7ihbjy] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bp-text);
    font-size: 0.82rem;
}

.designer-row__stylesize[b-eoxs7ihbjy] { flex: none; width: 54px; }

.designer-row__stylesize[b-eoxs7ihbjy]  .e-input-group { width: 54px; min-width: 0; }

.designer-style-toggle[b-eoxs7ihbjy] {
    flex: none;
    width: 26px;
    height: 26px;
    font-size: 0.78rem;
    color: var(--bp-text-muted);
    background: var(--bp-panel-hover);
    border: 1px solid var(--bp-panel-border);
    border-radius: var(--bp-radius-ctl, 8px);
    cursor: pointer;
    transition: background 120ms ease-out, color 120ms ease-out;
}

.designer-style-toggle:hover[b-eoxs7ihbjy] { color: var(--bp-text); }

.designer-style-toggle--on[b-eoxs7ihbjy] {
    background: var(--bp-yellow);
    color: var(--bp-black);
    border-color: var(--bp-yellow);
}

.designer-style-toggle:focus-visible[b-eoxs7ihbjy],
.designer-style-reset:focus-visible[b-eoxs7ihbjy] {
    outline: 1px solid var(--bp-yellow);
    outline-offset: 1px;
}

.designer-style-reset[b-eoxs7ihbjy] {
    flex: none;
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
    color: var(--bp-text-faint);
    background: none;
    border: none;
    cursor: pointer;
}

.designer-style-reset:hover:not(:disabled)[b-eoxs7ihbjy] { color: var(--bp-text); }

.designer-style-reset:disabled[b-eoxs7ihbjy] { opacity: 0.35; cursor: default; }

/* Seitenränder (P2): 2×2-Gitter, Beschriftung über dem Feld. */
.designer-margins[b-eoxs7ihbjy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.designer-margins__cell[b-eoxs7ihbjy] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.designer-margins__cell > span[b-eoxs7ihbjy] {
    font-size: 0.72rem;
    color: var(--bp-text-faint);
}

/* „Auf Standardwerte zurücksetzen" am Panel-Ende — leiser Textknopf, kein Primär-Idiom. */
.designer-reset[b-eoxs7ihbjy] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding: 0.4rem 0;
    background: none;
    border: none;
    border-top: 1px solid var(--bp-panel-border);
    color: var(--bp-text-faint);
    font-size: 0.78rem;
    cursor: pointer;
    transition: color 120ms ease-out;
}

.designer-reset:hover[b-eoxs7ihbjy] { color: var(--bp-text); }

.designer-reset:focus-visible[b-eoxs7ihbjy] {
    outline: 1px solid var(--bp-yellow);
    outline-offset: 1px;
}

/* Leiser Link-Knopf im Eigenschaften-Panel („Neue Bankverbindung anlegen"). */
.designer-linkbtn[b-eoxs7ihbjy] {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    color: var(--bp-text-muted);
    font-size: 0.8rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 120ms ease-out;
}

.designer-linkbtn:hover[b-eoxs7ihbjy] { color: var(--bp-text); }

.designer-linkbtn:focus-visible[b-eoxs7ihbjy] {
    outline: 1px solid var(--bp-yellow);
    outline-offset: 1px;
}

/* „Erweitert" je Band: selten gebrauchte Einstellungen eingeklappt, damit das Panel für den
   Normalfall kurz bleibt. Der Kopf ist ein schlichter Textknopf mit Pfeil. */
.designer-advanced[b-eoxs7ihbjy] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--bp-panel-border);
    padding-top: 0.6rem;
}

.designer-advanced__toggle[b-eoxs7ihbjy] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    padding: 0.25rem 0;
    background: none;
    border: none;
    color: var(--bp-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.designer-advanced__toggle:hover[b-eoxs7ihbjy] { color: var(--bp-text); }

.designer-advanced__toggle:focus-visible[b-eoxs7ihbjy] {
    outline: 1px solid var(--bp-yellow);
    outline-offset: 1px;
}

.designer-advanced__toggle .e-icons[b-eoxs7ihbjy] { font-size: 11px; }

/* Basislayout-Kacheln: Miniatur-Skizze des Blattaufbaus statt eines Farbfelds — der Nutzer
   wählt nach dem Bild, nicht nach einem Namen. */
.designer-layouts[b-eoxs7ihbjy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.designer-layout[b-eoxs7ihbjy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.4rem;
    background: none;
    border: 1px solid var(--bp-panel-border);
    border-radius: var(--bp-radius-ctl, 8px);
    color: var(--bp-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 120ms ease-out, border-color 120ms ease-out;
}

.designer-layout:hover[b-eoxs7ihbjy] {
    background: var(--bp-panel-hover);
    color: var(--bp-text);
    border-color: rgba(255, 255, 255, 0.16);
}

.designer-layout--active[b-eoxs7ihbjy],
.designer-layout--active:hover[b-eoxs7ihbjy] {
    border-color: var(--bp-yellow);
    color: var(--bp-text);
}

.designer-layout:focus-visible[b-eoxs7ihbjy] {
    outline: 1px solid var(--bp-yellow);
    outline-offset: 1px;
}

/* Die Skizze: ein weißes Blatt mit angedeuteten Blöcken (Logo, Anschrift, Kopfdaten, Tabelle, Summen). */
.designer-layout__sheet[b-eoxs7ihbjy] {
    position: relative;
    width: 56px;
    height: 79px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.designer-layout__sheet > i[b-eoxs7ihbjy] {
    position: absolute;
    display: block;
    background: #c9cdd2;
}

.designer-layout__sheet > i.is-accent[b-eoxs7ihbjy] { background: var(--sketch-accent, #111111); }