/* =========================================================================
   UDM CardView — Karten-Render-Modus
   - Karten-Stile (Phase 1.4 + 2.3): Full / InlineRow / Compact
   - Layout-Container (Phase 2.4): SingleCard / Grid / List
   ------------------------------------------------------------------------- */


/* ===== Layout-Container (CardView-VE, Phase 2.4) ===== */

/* SingleCard: eine Karte, zentriert, mit Luft */
.udm-cv-layout-single {
    display: flex;
    justify-content: center;
    padding: 1rem;
    flex: 1;
}

.udm-cv-layout-single > * {
    width: 100%;
    max-width: 36em;
}


/* SingleCard-Toolbar: Pfeil-Navigation + hochgehobene RowActions */
.udm-cv-single-toolbar {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.5rem 0.8rem;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    flex-wrap: wrap;
}

.udm-cv-single-navbtn {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    padding: 0.3em 0.55em;
    cursor: pointer;
    color: var(--bs-body-color);
    font-size: 0.9em;
    line-height: 1;
    transition: background-color 0.1s, color 0.1s, border-color 0.1s;
}

.udm-cv-single-navbtn:hover:not(:disabled) {
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.udm-cv-single-navbtn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.udm-cv-single-position {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    padding: 0.3em 0.7em;
    font-size: 0.88em;
    color: var(--bs-secondary-color);
    min-width: 4.5em;
    text-align: center;
}

.udm-cv-single-position strong {
    color: var(--bs-primary);
}

.udm-cv-single-divider {
    width: 1px;
    height: 1.5em;
    background: var(--bs-border-color);
    margin: 0 0.3em;
    flex-shrink: 0;
}

/* Grid: Auto-Fill mit MinCardWidth-Variable (admin-konfigurierbar) */
.udm-cv-layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--udm-cv-min-card-width, 16em), 1fr));
    gap: 0.8rem;
    /* Padding ueber Variable uebersteuerbar (z.B. wenn die CardView als Detail-VE
       eingebettet ist → GdoViewElementDetailReference.DetailPadding setzt
       --udm-cv-grid-padding am Pane-Container). Default 0.8rem unveraendert. */
    padding: var(--udm-cv-grid-padding, 0.8rem);
    align-content: flex-start;
    width: 100%;
}

/* List: vertikal gestapelt, eine Karte je Reihe in voller Breite */
.udm-cv-layout-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}


/* Empty-/Init-State */
.udm-cv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5em 1em;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.9em;
    gap: 0.6em;
    flex: 1;
}

.udm-cv-empty i {
    font-size: 1.8em;
    opacity: 0.4;
    color: var(--bs-primary);
}


/* ===== Legacy Grid-Container (Phase 1.4 — Card-flach, ohne LayoutMode) ===== */

.udm-cv-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.5rem;
    align-content: flex-start;
    width: 100%;
}

.udm-cv-grid--comfortable { gap: 1rem; padding: 0.75rem; }
.udm-cv-grid--compact { gap: 0.4rem; padding: 0.25rem; }


/* Gruppen-Section umschliesst Header + Karten einer Gruppe. */
.udm-cv-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.udm-cv-group-items {
    display: flex;
    flex-wrap: wrap;
    gap: inherit;
}

/* Kompaktmodus: Items als vertikale Liste statt Wrap-Grid. */
.udm-cv-grid--compact-mode .udm-cv-group-items,
.udm-cv-group-items--compact-mode {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
}


/* ===== Gruppen-Header ===== */

.udm-cv-group-header {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.5rem 0.3rem 0.4rem;
    font-size: 0.78em;
    font-weight: 700;
    color: var(--bs-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    user-select: none;
}

.udm-cv-group-header:hover { opacity: 0.85; }

.udm-cv-group-header__chevron {
    font-size: 0.85em;
    transition: transform 0.15s ease;
}

.udm-cv-group-header--collapsed .udm-cv-group-header__chevron {
    transform: rotate(-90deg);
}

.udm-cv-group-header__label {
    flex: 1;
}

.udm-cv-group-header__count {
    font-size: 0.9em;
    font-weight: 500;
    color: var(--bs-secondary-color);
    text-transform: none;
    letter-spacing: 0;
}

.udm-cv-group-header__limit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    padding: 0.1em 0.4em;
    margin-left: 0.4em;
    border-radius: 3px;
    background: rgba(var(--bs-warning-rgb, 234, 88, 12), 0.12);
    color: var(--bs-warning-text-emphasis, #92400e);
    font-size: 0.85em;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}


/* ===== Eyebrow ===== */

.udm-cv-eyebrow {
    display: block;
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
    line-height: 1.3;
    margin-bottom: 0.15em;
}


/* ===== Vollkarte ===== */

.udm-cv-card {
    display: flex;
    flex-direction: column;
    /* min-width / max-width vom Card entfernt — das umgebende Grid steuert
       die Breite via --udm-cv-min-card-width und grid-template-columns:
       repeat(auto-fill, minmax(VAR, 1fr)). Sonst entstehen Konflikte mit
       Admin-konfigurierter MinCardWidth (z.B. 8em). */
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    background: var(--bs-body-bg);
    overflow: hidden;
    transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

.udm-cv-card--clickable { cursor: pointer; }

.udm-cv-card--clickable:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.udm-cv-card--clickable:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}

/* Selected-State: dickerer Primary-Border + dezenter Tint */
.udm-cv-card--selected {
    border: 2px solid var(--bs-primary);
    box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.15);
}
.udm-cv-card--selected.udm-card-accent--bold {
    border-left-width: 4px;
}
.udm-cv-card--selected.udm-card-accent--subtle {
    border-left-width: 3px;
}

/* Selected-State fuer InlineRow + CompactRow (subtilerer Background-Tint) */
.udm-cv-card-inline--selected {
    background: rgba(var(--bs-primary-rgb), 0.06);
    border-left: 3px solid var(--bs-primary) !important;
}
.udm-cv-card-compact--selected {
    background: rgba(var(--bs-primary-rgb), 0.08);
    border-left: 3px solid var(--bs-primary);
}


/* Accent-Varianten — Render-Strategie fuer IntegratedStyle.Backcolor.
   Karten-Farbe kommt aus --udm-card-accent-color (Shells setzen die Variable
   aus Item.IntegratedStyle.Backcolor). Fallback: --bs-primary.

   - Off    : kein Background, kein Balken (Karte neutral; Tooltip/Bold/Italic
              aus IntegratedStyle wirken weiter ueber Inline-Style).
   - Subtle : dezente Toenung im Background + 3px Balken in voller Farbe.
              Shells geben den Backcolor NICHT als Inline-Style, sondern lassen
              den Tint hier via color-mix entstehen.
   - Bold   : Vollflaechen-Background (vom Inline-Style des Shells) + 4px
              dunklerer Balken (color-mix mit Schwarz) fuer Kontrast. */
.udm-card-accent--off {
    /* keine Akzent-Linie, kein Background-Override — IntegratedStyle.Backcolor
       wird vom Shell bewusst NICHT als Inline-Style geschrieben. */
}

.udm-card-accent--subtle {
    background-color: color-mix(in srgb,
        var(--udm-card-accent-color, var(--bs-primary)) 12%,
        transparent);
    border-left: 3px solid var(--udm-card-accent-color, var(--bs-primary));
}

.udm-card-accent--bold {
    /* background-color: vom Shell als Inline-Style geliefert
       (CardViewStyleHelper.ShouldRenderFullBackground(Bold) == true). */
    border-left: 4px solid color-mix(in srgb,
        var(--udm-card-accent-color, var(--bs-primary)) 60%,
        black);
}


/* Header */
.udm-cv-card__header {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem 0.4rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color);
}

.udm-cv-card__icon {
    flex-shrink: 0;
    font-size: 1.25em;
    color: var(--bs-primary);
    padding-top: 0.1em;
    width: 1.6em;
    text-align: center;
}

.udm-cv-card__header-text {
    flex: 1;
    min-width: 0;
}

.udm-cv-card__title {
    font-size: 1em;
    font-weight: 600;
    color: var(--bs-body-color);
    line-height: 1.3;
    /* Ellipsis bei zu schmaler Karte — Title bleibt einzeilig. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.udm-cv-card__subtitle {
    font-size: 0.85em;
    color: var(--bs-secondary-color);
    margin-top: 0.1em;
    line-height: 1.3;
    /* Subtitle ebenfalls einzeilig mit Ellipsis. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.udm-cv-card__right-icons {
    display: flex;
    gap: 0.3em;
    flex-shrink: 0;
    font-size: 0.95em;
    color: var(--bs-secondary-color);
    padding-top: 0.15em;
}


/* Body — Felder */
.udm-cv-card__body {
    flex: 1;
    padding: 0.5rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    /* MaxRows-Beschnitt via CSS-Variable (vom CardViewBuilder gesetzt) */
    --udm-cv-maxrows: 9999;
    overflow: hidden;
}

.udm-cv-field {
    display: flex;
    gap: 0.4em;
    font-size: 0.88em;
    line-height: 1.4;
    /* Default-Textfarbe auf dem Container, damit das Wert-Span sie erben kann.
       Eine Appearance-Forecolor wird per Inline-Style auf diesen Container gelegt
       (FieldInlineStyle) und faerbt damit den Wert mit. */
    color: var(--bs-body-color);
    /* Body-Felder muessen in schmalen Karten umbrechen, nicht ueberlaufen. */
    min-width: 0;
    overflow: hidden;
}

.udm-cv-field--strong .udm-cv-field__value {
    font-weight: 600;
}

.udm-cv-field__label {
    color: var(--bs-secondary-color);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
}

.udm-cv-field__label i {
    opacity: 0.7;
}

.udm-cv-field__value {
    /* erbt die Container-Farbe (Default-Body-Color ODER Appearance-Forecolor),
       statt sie hart zu ueberschreiben — sonst schluckt das Span die Schriftfarbe. */
    color: inherit;
    word-break: break-word;
    min-width: 0;
}


/* TwoColumn-Layout fuer Felder */
.udm-cv-card__body--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem 0.7rem;
}


/* Chips-Layout fuer Felder */
.udm-cv-card__body--chips {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.udm-cv-card__body--chips .udm-cv-field {
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    padding: 0.15em 0.5em;
}


/* Footer */
.udm-cv-card__footer {
    padding: 0.4rem 0.6rem;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    background: var(--bs-body-bg);
}


/* ===== Kompakt-Zeile ===== */

.udm-cv-card-compact {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--bs-border-color);
    transition: background-color 0.1s ease;
    width: 100%;
}

.udm-cv-card-compact--clickable { cursor: pointer; }

.udm-cv-card-compact--clickable:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

/* Accent-Balken + Background-Tint im Compact-Modus (vorher komplett fehlend).
   Render-Strategie identisch zu Full/InlineRow. */
.udm-cv-card-compact.udm-card-accent--subtle {
    background-color: color-mix(in srgb,
        var(--udm-card-accent-color, var(--bs-primary)) 12%,
        transparent);
    border-left: 3px solid var(--udm-card-accent-color, var(--bs-primary));
    padding-left: calc(0.6rem - 3px);
}
.udm-cv-card-compact.udm-card-accent--bold {
    border-left: 4px solid color-mix(in srgb,
        var(--udm-card-accent-color, var(--bs-primary)) 60%,
        black);
    padding-left: calc(0.6rem - 4px);
}

.udm-cv-card-compact__icon {
    flex-shrink: 0;
    width: 1.6em;
    text-align: center;
    font-size: 0.95em;
    color: var(--bs-primary);
}

.udm-cv-card-compact__main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    overflow: hidden;
}

.udm-cv-card-compact__title {
    font-weight: 600;
    font-size: 0.95em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.udm-cv-card-compact__subtitle {
    font-size: 0.82em;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.udm-cv-card-compact__right-icons {
    display: flex;
    gap: 0.3em;
    flex-shrink: 0;
    font-size: 0.85em;
    color: var(--bs-secondary-color);
}


/* ===== Karten-Stil "InlineRow" =====
   Title oben + Felder als Label-Wert-Tabelle pro Datensatz.
   In Kombination mit List-Container = heutige Simple-ListView. */

.udm-cv-card-inline {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.5rem 0.9rem 0.6rem;
    transition: background-color 0.1s ease;
    width: 100%;
    /* Als Grid-Item nicht unter die Content-Breite blockieren — sonst drueckt
       ein langer Titel die Karte in die Nachbarspalte drückt (min-width:auto-Default). */
    min-width: 0;
}

.udm-cv-card-inline--clickable { cursor: pointer; }

.udm-cv-card-inline--clickable:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.udm-cv-card-inline--clickable:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

/* Accent-Balken + Background-Tint links (Render-Strategie wie Vollkarte —
   nur ueberschriebenes padding-left, damit Balken keinen Layout-Sprung erzeugt). */
.udm-cv-card-inline.udm-card-accent--subtle {
    background-color: color-mix(in srgb,
        var(--udm-card-accent-color, var(--bs-primary)) 12%,
        transparent);
    border-left: 3px solid var(--udm-card-accent-color, var(--bs-primary));
    padding-left: calc(0.9rem - 3px);
}
.udm-cv-card-inline.udm-card-accent--bold {
    border-left: 4px solid color-mix(in srgb,
        var(--udm-card-accent-color, var(--bs-primary)) 60%,
        black);
    padding-left: calc(0.9rem - 4px);
}


.udm-cv-card-inline__header {
    display: flex;
    align-items: flex-start;
    gap: 0.4em;
    margin-bottom: 0.3em;
    /* Begrenzt die Header-Breite auf die Karte, damit der Titel umbrechen kann
       statt den Container aufzublähen. */
    min-width: 0;
}

.udm-cv-card-inline__icon {
    color: var(--bs-primary);
    font-size: 0.95em;
    flex-shrink: 0;
}

.udm-cv-card-inline__title {
    font-weight: 600;
    font-size: 1em;
    color: var(--bs-body-color);
    /* Lange Titel umbrechen auf max. 2 Zeilen, danach Ellipsis — Ereignisnamen
       bleiben lesbar, ohne in die Nachbarkarte zu laufen. min-width:0 erlaubt
       das Schrumpfen im Flex-Header, overflow-wrap bricht auch Wortmonster um. */
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.udm-cv-card-inline__subtitle {
    font-size: 0.88em;
    color: var(--bs-secondary-color);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.udm-cv-card-inline__right-icons {
    margin-left: auto;
    display: inline-flex;
    gap: 0.35em;
    color: var(--bs-secondary-color);
    font-size: 0.9em;
    flex-shrink: 0;
}


/* Body als Tabelle Label/Wert — bewusst sehr nah am Simple-ListView-Look */
.udm-cv-card-inline__body {
    width: 100%;
    font-size: 0.9em;
    border-collapse: collapse;
}

.udm-cv-card-inline__body td {
    padding: 0.1em 0.3em 0.1em 0;
    vertical-align: top;
}

.udm-cv-card-inline__label {
    color: var(--bs-secondary-color);
    white-space: nowrap;
    width: 8em;
    padding-right: 0.7em !important;
}

.udm-cv-card-inline__label i {
    margin-right: 0.3em;
    opacity: 0.7;
}

.udm-cv-card-inline__label--strong {
    font-weight: 600;
    color: var(--bs-body-color);
}

.udm-cv-card-inline__value {
    color: var(--bs-body-color);
    word-break: break-word;
}

.udm-cv-card-inline__value--strong {
    font-weight: 600;
}


.udm-cv-card-inline__footer {
    display: flex;
    gap: 0.4em;
    flex-wrap: wrap;
    margin-top: 0.4em;
    padding-top: 0.4em;
    border-top: 1px dashed var(--bs-border-color);
}


/* ===== Overflow-Menue (Drei-Punkte fuer nicht-primaere RowActions) ===== */

.udm-cv-card-overflow {
    display: inline-flex;
    align-items: center;
}

.udm-cv-card-overflow__btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    width: 1.9em;
    height: 1.9em;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.udm-cv-card-overflow__btn:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
    border-color: var(--bs-border-color);
}

/* Outside-Click-Fang. Fixed ueber dem ganzen Viewport, unter dem Panel. */
.udm-cv-card-overflow__backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1050;
}

/* Overflow-Popup. position:fixed + left/top kommen als Inline-Style aus den
   Klick-Koordinaten (Muster UdmLiveChangeIndicator) — entkommt damit dem
   overflow:hidden der Karte und dem Scroll-Container. Hier nur Surface + Layout. */
.udm-cv-card-overflow__panel {
    z-index: 1051;
    min-width: 12em;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 0.25em;
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}


/* ===== Compact-Action-Strip (Inline-Actions rechts) =====
   Im Compact-Stil gibt es keinen klassischen Footer-Bereich. Die Footer-Actions
   + Drei-Punkte-Menue erscheinen inline am rechten Rand neben den RightIcons. */
.udm-cv-card-compact__action-strip {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    flex-shrink: 0;
    margin-left: 0.4em;
}


/* ===== Mode-Toggle ===== */

.udm-cv-mode-toggle {
    display: inline-flex;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    overflow: hidden;
}

.udm-cv-mode-toggle__btn {
    background: transparent;
    border: none;
    padding: 0.3em 0.55em;
    cursor: pointer;
    color: var(--bs-secondary-color);
    font-size: 0.9em;
    line-height: 1;
    transition: background-color 0.1s ease, color 0.1s ease;
}

.udm-cv-mode-toggle__btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
}

.udm-cv-mode-toggle__btn--active {
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
}

.udm-cv-mode-toggle__btn + .udm-cv-mode-toggle__btn {
    border-left: 1px solid var(--bs-border-color);
}