@import 'nav-active.css';
@import 'status-badge.css';
@import 'dashboard.css';
@import 'information.css';

:root {
    --lumo-font-family:           Inter, system-ui, -apple-system, sans-serif;

    --lumo-primary-color:         #1F4E79;
    --lumo-primary-text-color:    #1F4E79;
    --lumo-primary-color-10pct:   rgba(31, 78, 121, 0.10);
    --lumo-primary-color-50pct:   rgba(31, 78, 121, 0.50);

    --lumo-base-color:            #FFFFFF;
    --lumo-tint-5pct:             #F7F9FB;
    --lumo-tint-10pct:            #EAF2F8;

    --lumo-body-text-color:       #1F2933;
    --lumo-secondary-text-color:  #6B7280;
    --lumo-disabled-text-color:   #9CA3AF;

    --lumo-contrast-10pct:        #D9E2EC;
    --lumo-contrast-20pct:        #C4D4E0;

    --lumo-success-color:         #2E7D32;
    --lumo-error-color:           #C62828;

    --lumo-border-radius-s:       4px;
    --lumo-border-radius-m:       8px;
    --lumo-border-radius-l:       12px;

    /* Eigene Tokens */
    --vionex-shadow-s: 0 1px 3px rgba(0, 0, 0, 0.08);
    --vionex-shadow-m: 0 4px 12px rgba(0, 0, 0, 0.10);
}

/* ── Dark Mode ───────────────────────────────────────────────────────────── */
:root[theme~="dark"] {
    --lumo-base-color:            #1F2937;
    --lumo-tint-5pct:             #111827;
    --lumo-tint-10pct:            #1E3A5F;
    --lumo-body-text-color:       #F9FAFB;
    --lumo-secondary-text-color:  #9CA3AF;
    --lumo-contrast-10pct:        #374151;
    --lumo-primary-color:         #5B9BD5;
    --lumo-primary-text-color:    #5B9BD5;
}

/* ── Globale Basis ───────────────────────────────────────────────────────── */
body {
    background-color: var(--lumo-tint-5pct);
    -webkit-font-smoothing: antialiased;
}

/* ── Vollbild-Basis ─────────────────────────────────────────────────────── */
html,
body {
    height: 100%;
    margin: 0;
}

/* Vaadin rendert Views in ein flow-container Host-Element —
   dieses muss ebenfalls Vollbild sein damit login-page 100vh bekommt */
:host,
flow-container {
    display: block;
    height: 100%;
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   LOGIN VIEW
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────────────────────── */
.login-page {
    background: var(--lumo-tint-5pct);
    align-items: center !important;
}

.login-left {
    color: white;
    position: relative;
    overflow: hidden;
}

.login-right {
    padding-left: 6%;
}

/* ── Branding (Logo & Willkommenstext) ───────────────────────────────────── */
.login-vionex-logo {
    margin-left: 10%;
    margin-top: 6vh;
}

.login-welcome {
    color: var(--lumo-primary-color);
    margin-left: 10%;
    margin-top: 4vh;
    margin-bottom: 4vh;
    font-weight: bold;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
}

.login-hero-image {
    width: 100%;
    height: 60vh;
    max-height: 700px;
    object-fit: cover;
    object-position: center;
    margin-top: auto;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;

    -webkit-mask-image:
            linear-gradient(to right, black 50%, transparent 100%),
            linear-gradient(to bottom, transparent 0%, black 10%),
            linear-gradient(to top, transparent 0%, black 10%);
    -webkit-mask-composite: source-in, source-over, source-over;
    mask-composite: intersect;
    mask-image:
            linear-gradient(to right, black 50%, transparent 100%),
            linear-gradient(to bottom, transparent 0%, black 10%),
            linear-gradient(to top, transparent 0%, black 10%);
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.login-card {
    background: var(--lumo-base-color);
    border: 1px solid var(--lumo-contrast-10pct);
    border-radius: var(--lumo-border-radius-l);
    box-shadow: var(--vionex-shadow-m);
    width: 90%;
    max-width: 420px;
    min-height: 560px;
    box-sizing: border-box;
    padding: clamp(40px, 6vh, 80px) clamp(20px, 3vw, 48px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.login-logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: rgba(31, 78, 121, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--lumo-space-l);
}

.login-divider {
    width: 100%;
    height: 1px;
    background: var(--lumo-contrast-10pct);
    margin: var(--lumo-space-l) 0;
}

.login-info {
    width: 100%;
    box-sizing: border-box;
    background: var(--lumo-tint-10pct);
    border-radius: var(--lumo-border-radius-m);
    padding: var(--lumo-space-m);
    font-size: var(--lumo-font-size-s);
    color: var(--lumo-body-text-color);
    line-height: 1.5;
}

.login-error {
    width: 100%;
    box-sizing: border-box;
    background: var(--lumo-error-color-10pct, #FFEBEE);
    color: var(--lumo-error-text-color);
    border-radius: var(--lumo-border-radius-m);
    padding: var(--lumo-space-s) var(--lumo-space-m);
    font-size: var(--lumo-font-size-s);
    text-align: center;
    margin-bottom: var(--lumo-space-m);
}

.login-footer {
    margin-top: var(--lumo-space-xl);
    font-size: var(--lumo-font-size-xs);
    color: var(--lumo-secondary-text-color);
    text-align: center;
}

/* ── SSO Button ──────────────────────────────────────────────────────────── */
.login-sso-btn {
    width: 100%;
    height: 48px;
    border: 1px solid var(--lumo-primary-color, #1F4E79);
    border-radius: var(--lumo-border-radius-m);
    color: var(--lumo-primary-color);
    background-color: transparent;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.login-sso-btn:hover {
    background-color: rgba(31, 78, 121, 0.08);
}

/* ── User Info ───────────────────────────────────────────────────────────── */
.user-info-layout {
    display: flex;
    align-items: center;
    gap: var(--lumo-space-s);
}


/* ── Haupt-Container ─────────────────────────────────────────── */
.tab-navigator {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ── Tab-Leiste ──────────────────────────────────────────────── */
.tab-group-bar {
    flex-shrink: 0;
    border-bottom: 2px solid var(--lumo-contrast-10pct);
    background: var(--lumo-base-color);
}

/* ── Inhaltsbereich ──────────────────────────────────────────── */
.tab-group-content {
    flex: 1;
    overflow: auto;
    padding: var(--lumo-space-m);
    box-sizing: border-box;
    width: 100%;
}

/* ── Schließbarer Tab ────────────────────────────────────────── */
.closeable-tab {
    display: flex;
    align-items: center;
    gap: var(--lumo-space-xs);
    flex-shrink: 0;
    flex-grow: 0;
}

.closeable-tab.tab-active-call {
    box-shadow: inset 0 0 0 2px var(--lumo-success-color);
    border-radius: var(--lumo-border-radius-s);
}

.closeable-tab.tab-active-call::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--lumo-success-color);
    margin-right: 4px;
    flex-shrink: 0;
}

.parked-call-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.closeable-tab.tab-held-call {
    --tab-held-color: #ec7211;
    box-shadow: inset 0 0 0 2px var(--tab-held-color);
    border-radius: var(--lumo-border-radius-s);
}

.closeable-tab.tab-held-call::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--tab-held-color);
    margin-right: 4px;
    flex-shrink: 0;
}

.tab-label {
    display: inline-block;
    width: 140px;
    max-width: 140px;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
    text-align: left;

    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

/* Schließ-Button nur bei Hover sichtbar */
.closeable-tab vaadin-button {
    opacity: 0;
    transition: opacity 0.15s ease;
    margin-left: var(--lumo-space-xs);
    flex-shrink: 0;
}

.closeable-tab[selected] {
    background-color: var(--lumo-primary-color-10pct);
}

.closeable-tab.tab-active-call[selected] {
    background-color: color-mix(in srgb, var(--lumo-success-color) 22%, transparent);
}

.closeable-tab.tab-held-call[selected] {
    background-color: color-mix(in srgb, var(--tab-held-color) 22%, transparent);
}

.closeable-tab.tab-active-call[selected] .tab-label,
.closeable-tab.tab-held-call[selected] .tab-label {
    font-weight: 600;
}

.closeable-tab:hover vaadin-button,
.closeable-tab[selected] vaadin-button {
    opacity: 1;
}

.closeable-tab vaadin-button.tab-close-disabled {
    opacity: 0.35 !important;
    cursor: not-allowed;
    pointer-events: none;
}

.closeable-tab:has(vaadin-button.tab-close-disabled) {
    position: relative;
}

.closeable-tab:has(vaadin-button.tab-close-disabled)::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 2px;
    border-radius: 50%;
    background-color: var(--lumo-error-color);
    opacity: 0.6;
}

/* ══════════════════════════════════════════════════════════════════════════
   SIDE NAVIGATION
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────────────────────── */
.side-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--lumo-space-s) 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

vaadin-app-layout {
    --vaadin-app-layout-drawer-width: 260px;
}

.env-badge {
    flex-shrink: 0;
    align-self: center;
    padding: 0.15em 0.9em;
    border-radius: var(--lumo-border-radius-l);
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1.3;
    color: #ffffff;
}

.env-badge-dev,
.env-badge-local {
    background-color: #e8590c;
}

.env-badge-test {
    background-color: #1b5e20;
}

vaadin-app-layout.env-dev::part(navbar),
vaadin-app-layout.env-local::part(navbar) {
    border-top: 6px solid #e8590c;
}

vaadin-app-layout.env-test::part(navbar) {
    border-top: 6px solid #1b5e20;
}

.sidenav-version-footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 16px 16px;
    font-size: 0.75rem;
    color: var(--lumo-secondary-text-color);
    flex-shrink: 0;
}

.drawer-layout-scrollable {
    overflow-y: auto;
}

/* ── Panel Items (Agent-Cockpit, Admin-Panel) ────────────────────────────── */
.side-nav-panel::part(link) {
    padding: 18px 20px 18px 28px;
    font-size: var(--lumo-font-size-l);
    font-weight: 600;
    color: var(--lumo-primary-color);
    border-radius: 0;
    line-height: 1.3;
}

.side-nav-panel::part(link):hover {
    background-color: var(--lumo-primary-color-10pct);
}

vaadin-side-nav-item.side-nav-panel[current]::part(link) {
    background-color: var(--lumo-primary-color-10pct);
    box-shadow: inset 3px 0 0 0 var(--lumo-primary-color);
    font-weight: 700;
}

.side-nav-panel > [slot="prefix"] {
    color: var(--lumo-primary-color);
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.side-nav-panel > [slot="prefix"] svg {
    width: 29px;
    height: 29px;
}

vaadin-side-nav-item.side-nav-panel[current] > [slot="prefix"] {
    color: var(--lumo-primary-color);
}

/* ── Sub-Items ───────────────────────────────────────────────────────────── */
.side-nav-item::part(link) {
    padding: 10px 20px 10px 48px;
    font-size: var(--lumo-font-size-m);
    font-weight: 400;
    color: var(--lumo-body-text-color);
    border-radius: 0;
    line-height: 1.3;
}

.side-nav-item::part(link):hover {
    background-color: var(--lumo-primary-color-10pct);
    color: var(--lumo-primary-color);
}

vaadin-side-nav-item.side-nav-item[current]::part(link) {
    background-color: var(--lumo-primary-color-10pct);
    box-shadow: inset 3px 0 0 0 var(--lumo-primary-color);
    color: var(--lumo-primary-color);
    font-weight: 500;
}

.side-nav-item > [slot="prefix"] {
    color: var(--lumo-secondary-text-color);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

vaadin-side-nav-item.side-nav-item[current] > [slot="prefix"] {
    color: var(--lumo-primary-color);
}


vaadin-grid-cell-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

vaadin-grid-cell-content:has(vaadin-button) {
    overflow: visible;
    white-space: normal;
}

/* ══════════════════════════════════════════════════════════════════════════
   MESSAGING-HISTORY
   ══════════════════════════════════════════════════════════════════════════ */
.messaging-history-message-cell {
    display: flex;
    align-items: baseline;
    gap: var(--lumo-space-xs);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.messaging-history-message-preview {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messaging-history-message-more-button {
    display: none;
    flex-shrink: 0;
    align-self: center;
}

.messaging-history-message-cell.is-truncated .messaging-history-message-more-button {
    display: inline-flex;
}

.grid-tooltip-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-tip-helper::part(helper-text) {
    color: var(--lumo-error-color);
    font-weight: 600;
}

.field-tip-helper-fallback {
    color: var(--lumo-error-color);
    font-weight: 600;
}

.side-nav-divider {
    border: none;
    border-top: 1px solid var(--lumo-primary-color-10pct);
    margin: var(--lumo-space-xs) var(--lumo-space-m);
}

/* ── Shared ──────────────────────────────────────────────────────────────── */
.side-nav-panel::part(content),
.side-nav-item::part(content) {
    border-radius: 0;
    display: flex;
    align-items: center;
}

.side-nav-panel::part(link):focus-visible,
.side-nav-item::part(link):focus-visible {
    border-radius: 0;
}

.empty-state-icon {
    width: 48px;
    height: 48px;
}

.empty-state-icon svg {
    width: 100%;
    height: 100%;
}

/* ── Tab-Gruppen-Platzhalter (kein offener Tab) ───────────────────────────
   Wird direkt im Content-Bereich einer Tab-Gruppe angezeigt, solange dort
   kein Tab offen ist (z.B. Agent-Cockpit ohne aktiven Call) - NICHT als Tab,
   sondern als zentrierter Hinweis über die volle Fläche.
   ────────────────────────────────────────────────────────────────────── */
.tab-group-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    gap: var(--lumo-space-s);
    color: var(--lumo-secondary-text-color);
    text-align: center;
}

.tab-group-empty-state .empty-state-icon {
    color: var(--lumo-contrast-30pct);
}

.tab-group-empty-state-label {
    font-size: var(--lumo-font-size-m);
    max-width: 320px;
}

/* ══════════════════════════════════════════════════════════════════════════
   AGENT-SOFTPHONE-BAR
   ══════════════════════════════════════════════════════════════════════════ */
.agent-softphone-bar {
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   CASE-ANSICHT: ESKALATIONS-BANNER
   Zeigt ganz oben in der Case-Detailansicht (CaseView) an, ob für den Case
   eine Eskalation läuft oder bereits abgeschlossen ist. Farbe sitzt auf dem
   Banner-Container, das Icon erbt sie über currentColor - kein Java-seitiges
   setColor()/getStyle() nötig, analog zum escalation-header-indicator.
   ══════════════════════════════════════════════════════════════════════════ */
.case-view-escalation-banner {
    display: flex;
    align-items: center;
    gap: var(--lumo-space-s);
    padding: var(--lumo-space-s) var(--lumo-space-m);
    border-radius: var(--lumo-border-radius-m);
    margin-bottom: var(--lumo-space-m);
    background-color: var(--lumo-contrast-5pct);
    font-weight: 600;
}

.case-view-escalation-banner-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.case-view-escalation-banner--open {
    color: var(--lumo-error-color);
}

.case-view-escalation-banner--followup {
    color: var(--lumo-primary-text-color);
}

.case-view-escalation-banner--resolved {
    color: var(--lumo-success-color);
}

.case-view-escalation-subsection {
    margin-top: var(--lumo-space-s);
}

.case-view-escalation-history-row {
    padding: var(--lumo-space-xs) 0;
    border-bottom: 1px solid var(--lumo-contrast-10pct);
}

/* ── Header ───────────────────────────────────────────────────────────────
   Blinkender Header bei Eskalation
   ────────────────────────────────────────────────────────────────────── */
.escalation-header-indicator {
    align-items: center;
    color: var(--lumo-error-color);
    animation: escalation-blink 1s ease-in-out infinite;
}

.follow-up-header-indicator {
    align-items: center;
    cursor: pointer;
    color: var(--lumo-primary-text-color);
    animation: escalation-blink 1s ease-in-out infinite;
}

.follow-up-header-indicator-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
}

.telealarm-header-indicator {
    align-items: center;
    cursor: pointer;
    color: var(--lumo-error-color);
    animation: escalation-blink 1s ease-in-out infinite;
}

@keyframes escalation-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FORMULARE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Abschnitts-Überschriften ─────────────────────────────────────────────
   Gilt global: eine H3/H4-Überschrift, die direkt von einem FormLayout
   gefolgt wird (z. B. Vertrag/Adresse-Abschnitte), bekommt einen engeren
   Abstand nach unten, statt des vollen Lumo-Layout-Spacings.
   ────────────────────────────────────────────────────────────────────── */
h3 + vaadin-form-layout,
h4 + vaadin-form-layout {
    margin-top: var(--lumo-space-xs);
}

/* ── MasterCard-Zeitsteuerung ──────────────────────────────────────────────
   Zeitfenster-Liste und "Zeitfenster hinzufügen"-Button eines Wochentags
   werden um 108px eingerückt, damit sie unter den Checkboxen (aktiv /
   ganztags) der Kopfzeile beginnen statt am linken Rand. Eine einzelne
   Zeitfenster-Zeile (Start-/Endzeit + Entfernen-Button) bekommt etwas
   vertikalen Abstand, damit mehrere Zeitfenster nicht zu eng aneinander-
   stoßen.
   ────────────────────────────────────────────────────────────────────── */
.master-card-time-control-ranges {
    padding-left: 108px;
}

.master-card-time-control-add-range-button {
    margin-left: 108px;
}

.master-card-time-control-range-row {
    padding: 2px 0;
}

/* ── Vertragsdokument-Einträge ─────────────────────────────────────────────
   Titel-Feld, Upload und Entfernen-Button eines Vertragsdokument-Eintrags
   werden gemeinsam von einer gestrichelten Box umschlossen. Der Upload
   bekommt dafür seine eigene Drop-Area-Umrandung entfernt, da der gesamte
   Eintrag bereits umrandet ist.
   ────────────────────────────────────────────────────────────────────── */
.contract-document-entry {
    border: 1px dashed var(--lumo-contrast-30pct);
    border-radius: var(--lumo-border-radius-m);
}

.contract-document-upload {
    border: none;
    padding: 0;
}

.contract-document-upload::part(drop-label) {
    border: none;
}

.contract-document-upload::part(file-list) {
    margin: 0;
}

.contract-document-upload-hide-drop-area::part(drop-label) {
    display: none;
}

.contract-document-upload-hide-drop-area::part(primary-buttons) {
    display: none;
}

.contract-document-file-info {
    display: block;
}

.client-information-meta-text {
    font-size: var(--lumo-font-size-xs);
    color: var(--lumo-secondary-text-color);
}

.line-height-1-dot-2 {
    line-height: 1.2;
}

.force-brake {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.min-width-0 {
    min-width: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   WIDGET-PANEL (SHARED)
   Gemeinsames Grundgerüst für Dashboard-Widgets mit Inhalt + Footer
   (InformationWidget, MasterCardWidget, …): das Widget selbst ist eine
   Flex-Column über die volle Höhe, der Inhalt scrollt innerhalb seines
   Bereichs, der Footer bleibt dadurch immer unten sichtbar - ganz ohne
   "position: sticky" und ohne Java-seitiges getStyle().
   ══════════════════════════════════════════════════════════════════════════ */
.widget-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.widget-content-area {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    min-width: 0;
    box-sizing: border-box;
}

/* Manche Browser zeigen auf scrollbaren Containern einen Fokus-Rahmen an,
   sobald sie den Fokus erhalten (z. B. beim Scrollen per Tastatur) - das
   soll hier nicht sichtbar sein. */
.widget-content-area:focus,
.widget-content-area:focus-visible {
    outline: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   WIDGET-FOOTER (SHARED)
   Einheitlicher Footer für Dashboard-Widgets (z. B. InformationWidget,
   MasterCardWidget). Die Widgets fügen ihrem Footer-Layout nur noch diese
   Klassen hinzu – Aussehen und Verhalten kommen ausschließlich von hier, kein
   Java-seitiges getStyle() mehr nötig. So verhält sich der Footer über alle
   Widgets hinweg garantiert identisch.
   ══════════════════════════════════════════════════════════════════════════ */
.widget-footer {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    border-top: 1px solid var(--lumo-contrast-10pct);
    background: var(--lumo-base-color);
    padding: var(--lumo-space-xs) var(--lumo-space-m);
}

/* Aktionen links/rechts verteilt, z. B. Refresh links / Add rechts */
.widget-footer--space-between {
    justify-content: space-between;
}

/* Aktionen gemeinsam am rechten Rand, z. B. Paginierungs-Buttons */
.widget-footer--end {
    justify-content: flex-end;
    gap: var(--lumo-space-xs);
}

/* ══════════════════════════════════════════════════════════════════════════
   NACHRICHTENVERSAND
   ══════════════════════════════════════════════════════════════════════════ */

.messaging-panel {
    background: var(--lumo-base-color);
    border: 1px solid var(--lumo-contrast-20pct);
    border-radius: var(--lumo-border-radius-m);
    box-shadow: var(--vionex-shadow-s);
}

.messaging-panel-title {
    display: block;
    font-weight: 600;
    padding-bottom: var(--lumo-space-xs);
    margin-bottom: var(--lumo-space-xs);
    border-bottom: 1px solid var(--lumo-contrast-10pct);
}

my-rich-text-editor .ql-container.ql-snow .ql-editor {
    white-space: pre-wrap;
}

.rich-text-content {
    white-space: pre-wrap;
    tab-size: 4;
}

.rich-text-content p {
    margin: 0;
}

.rich-text-content ol,
.rich-text-content ul {
    margin: 0;
    padding-left: 1.5em;
}

.rich-text-content li > .ql-ui {
    display: none;
}

.rich-text-content li[data-list="bullet"] {
    list-style-type: disc;
}

.rich-text-content li[data-list="ordered"] {
    list-style-type: decimal;
}

.rich-text-content li.ql-indent-1 { margin-left: 1.5em; }
.rich-text-content li.ql-indent-2 { margin-left: 3em; }
.rich-text-content li.ql-indent-3 { margin-left: 4.5em; }

a.file-link,
a.mastercard-link {
    color: var(--lumo-primary-text-color, #06c);
    text-decoration: underline;
    cursor: pointer;
}

a.phone-link {
    color: var(--lumo-primary-text-color, #06c);
    text-decoration: none;
    white-space: nowrap;
    cursor: default;
}

a.phone-link::after {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin-left: 0.3em;
    vertical-align: -0.2em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.phone-links-callable a.phone-link {
    cursor: pointer;
    text-decoration: underline;
}

.phone-links-callable a.phone-link:hover {
    color: var(--lumo-primary-color, #06c);
}

/* ══════════════════════════════════════════════════════════════════════════
   MASTERCARD-KOMMUNIKATIONSKANÄLE (WIDGET)
   Zeigt die für eine Mastercard aktivierten Kommunikationskanäle (Anruf,
   E-Mail, SMS, Pager) im Dashboard-Widget als Reihe kleiner Badges über dem
   Template-Inhalt an. Die Zeile umbricht bei Platzmangel, jedes Badge hat
   ein festes Icon-Maß, damit Icon und Text unabhängig vom verwendeten
   Icon-Set sauber auf einer Grundlinie sitzen.
   ══════════════════════════════════════════════════════════════════════════ */
.master-card-communication-channels-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lumo-space-xs);
    margin-bottom: var(--lumo-space-s);
}

.master-card-communication-channel-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: var(--lumo-contrast-5pct);
    border-radius: var(--lumo-border-radius-m);
    padding: 4px 10px;
    box-sizing: border-box;
}

.master-card-communication-channel-badge-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.master-card-communication-channel-badge-label {
    font-size: var(--lumo-font-size-s);
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   MASTERCARD-WIDGET-INHALT (TEMPLATE-FELDER & ESKALATION)
   Formatierung des im MasterCardWidget angezeigten Template-Inhalts:

   - master-card-page-title: Titel der aktuell angezeigten Template-Seite.
   - master-card-toc-link: Link-Button im Inhaltsverzeichnis, linksbündig
     statt der Button-Standardausrichtung (zentriert).
   - master-card-field-row / -nested: jede TOP-LEVEL Feldgruppe bekommt
     spürbaren Abstand nach unten, damit Abschnitte (z. B. "Mandanten-ID",
     "Unternehmensdaten", …) klar voneinander getrennt sind. Verschachtelte
     Kind-Felder bekommen nur einen kleinen Abstand, damit sie optisch bei
     ihrer Elterngruppe bleiben statt wie ein neuer Abschnitt zu wirken.
   - master-card-field-row--depth-*: feste Einrückung pro Verschachtelungs-
     tiefe (ersetzt vormaliges Java-seitiges getStyle("padding-left", …) -
     die Tiefe kommt zwar dynamisch aus den Daten, die Optik dafür kommt
     aber ausschließlich aus diesen festen Klassen).
   - master-card-field-heading: einheitliche fette Überschrift für
     Feldgruppen-Header, Feld-Label und die "Eskalation"-Überschrift.
   - master-card-escalation-step-label--done: durchgestrichene Beschriftung
     eines bereits abgeschlossenen Eskalationsschritts.
   - master-card-escalation-step-reminder: Einrückung der "Nächster
     Reminder"-Zeile unter dem aktuell laufenden Eskalationsschritt.
   - master-card-escalation-step-contacts: Reihe der pro Schritt verlinkten
     Kontakte - MUSS umbrechen (flex-wrap), sonst werden Kontakte am rechten
     Rand des Widgets abgeschnitten statt in die nächste Zeile zu rutschen.
   ══════════════════════════════════════════════════════════════════════════ */
.master-card-page-title {
    display: block;
    font-size: var(--lumo-font-size-xl);
    font-weight: 700;
    line-height: var(--lumo-line-height-s);
    margin-bottom: var(--lumo-space-m);
}

.master-card-toc-link {
    justify-content: flex-start;
}

.master-card-field-heading {
    font-weight: 700;
}

.master-card-field-row {
    margin-bottom: var(--lumo-space-s);
    line-height: var(--lumo-line-height-s);
}

.master-card-field-row-nested {
    margin-bottom: 2px;
}

.master-card-field-row--depth-1 {
    padding-left: 16px;
}

.master-card-field-row--depth-2 {
    padding-left: 32px;
}

.master-card-field-row--depth-3 {
    padding-left: 48px;
}

.master-card-escalation-step {
    margin-bottom: var(--lumo-space-xs);
    line-height: var(--lumo-line-height-s);
}

.master-card-escalation-step-label--done {
    text-decoration: line-through;
}

.master-card-escalation-step-reminder {
    margin-left: var(--lumo-space-xl);
}

.master-card-escalation-step-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lumo-space-xs);
    margin-top: 4px;
    margin-left: var(--lumo-space-xl);
}

/* Gilt für Kontakt-Badges sowohl im Admin-Eskalations-Editor als auch im
   Agent-Widget: ein verlinkter Kontakt, dessen "active"-Feld false ist,
   wird abgeschwächt dargestellt statt gleichwertig neben aktiven
   Kontakten zu stehen - der "(inaktiv)"-Text selbst kommt aus Java. */
.master-card-contact-badge--inactive {
    opacity: 0.55;
}

.master-card-content {
    line-height: var(--lumo-line-height-s);
}

/* ══════════════════════════════════════════════════════════════════════════
   MASTERCARD-PIKETT (ON-CALL) WIDGET
   - master-card-on-call-result-area: Ergebnisbereich der PLZ-Suche, damit
     Kontakt-Badges am rechten Rand nicht bündig mit dem Widget-Rand
     abschließen.
   - master-card-on-call-substitutes-area: Einrückung der (standardmäßig
     ausgeblendeten) Vertretungs-/Eskalationsliste unter dem Haupttechniker.
   - master-card-on-call-channels-row: Kanal-Badges eines Technikers -
     MUSS umbrechen, sonst werden sie am rechten Rand abgeschnitten.
   ══════════════════════════════════════════════════════════════════════════ */
.master-card-on-call-result-area {
    padding-right: var(--lumo-space-m);
    box-sizing: border-box;
}

.master-card-on-call-substitutes-area {
    margin-left: var(--lumo-space-m);
}

.master-card-on-call-channels-row {
    flex-wrap: wrap;
    row-gap: var(--lumo-space-xs);
}

/* icon */

.refresh-icon svg {
    margin-top: 0;
    display: block; /* falls svg als inline-element ungewollten Abstand/Baseline-Versatz hat */
}

.pin-button--muted {
    opacity: 0.4;
}

.pin-button--muted:hover {
    opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════════════════
   ANTWORTSTREIFEN: INTERNE HINWEISE
   Texte, die im Antwortstreifen als "Interner Hinweis" markiert wurden.
   ══════════════════════════════════════════════════════════════════════════ */
.answer-phrase-internal-note {
    color: var(--lumo-error-text-color);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Externe Monitore (bis 1439px) ───────────────────────────────────────
   Betrifft: Login View
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1439px) {
    .login-right {
        padding-left: 0;
    }

    .login-card {
        max-width: 420px;
    }

    .login-welcome {
        font-size: 2rem;
    }
}

/* ── Full-HD Monitore (ab 1440px) ────────────────────────────────────────
   Betrifft: Login View, Side Nav
   ────────────────────────────────────────────────────────────────────── */
@media (min-width: 1440px) {
    /* Login View */
    .login-card {
        max-width: 480px;
    }

    .login-welcome {
        font-size: 2.2rem;
        margin-top: 6vh;
    }

    .login-vionex-logo {
        margin-top: 8vh;
    }

    .login-hero-image {
        height: 65vh;
    }

    /* Side Nav */
    vaadin-app-layout {
        --vaadin-app-layout-drawer-width: 300px;
    }

    .side-nav-panel::part(link) {
        font-size: var(--lumo-font-size-xl);
    }

    .side-nav-item::part(link),
    vaadin-side-nav-item.side-nav-item[current]::part(link) {
        font-size: var(--lumo-font-size-l);
    }
}

/* ── Große Monitore (ab 1920px) ───────────────────────────────────────────
   Betrifft: Login View, Side Nav
   ────────────────────────────────────────────────────────────────────── */
@media (min-width: 1920px) {
    /* Login View */
    .login-card {
        max-width: 500px;
    }

    .login-welcome {
        margin-top: 8vh;
    }

    .login-vionex-logo {
        margin-top: 10vh;
    }

    .login-hero-image {
        height: 70vh;
    }

    /* Side Nav */
    vaadin-app-layout {
        --vaadin-app-layout-drawer-width: 340px;
    }

    .side-nav-panel::part(link) {
        font-size: var(--lumo-font-size-xl);
    }

    .side-nav-panel > [slot="prefix"],
    .side-nav-panel > [slot="prefix"] svg {
        width: 34px;
        height: 34px;
    }

    .side-nav-item::part(link),
    vaadin-side-nav-item.side-nav-item[current]::part(link) {
        font-size: var(--lumo-font-size-l);
    }
}

/* ── Tablet (bis 1024px) ──────────────────────────────────────────────────
   Betrifft: Login View
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .login-page {
        flex-direction: column !important;
        height: 100dvh;
        position: relative;
        overflow: hidden;
    }

    .login-left {
        width: 100% !important;
        height: auto !important;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: static;
        padding-top: 40px;
    }

    .login-hero-image {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        height: 80dvh;
        max-height: none !important;
        margin: 0;
        object-fit: cover;
        object-position: center bottom;
        z-index: 0;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%);
    }

    .login-vionex-logo {
        margin-bottom: 20px;
        position: relative;
        z-index: 2;
        margin-left: 0;
    }

    .login-welcome {
        margin-left: 0;
        text-align: center;
        font-size: clamp(1.4rem, 3vw, 2rem);
        width: 100%;
        box-sizing: border-box;
        position: relative;
        z-index: 2;
    }

    .login-right {
        width: 100% !important;
        flex: 1 1 auto;
        min-height: 0;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center !important;
        padding: 0 0 24px 0;
        position: relative;
        z-index: 2;
    }

    .login-card {
        width: 90%;
        max-width: 480px;
        min-height: auto;
        margin: 0;
        padding: clamp(24px, 4vh, 40px) clamp(24px, 4vw, 40px);
        position: relative;
        z-index: 3;
    }
}

/* ── Phone (bis 768px) ────────────────────────────────────────────────────
   Betrifft: Login View, Header, Page Views (Filter/Pagination/Grid)
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    html, body {
        margin: 0;
        height: 100%;
        overflow: hidden;
    }

    .login-page {
        justify-content: flex-start !important;
    }

    .login-vionex-logo {
        margin-top: 20px;
    }

    .login-welcome {
        font-size: 1.5rem;
    }

    .login-card {
        max-width: 400px;
        padding: 32px 24px;
    }

    .login-right {
        padding-bottom: 16px;
    }

    /* Header (User Info) */
    .user-info-layout span {
        display: none;
    }

    /* Page Views */
    .single-page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
        padding: 0;
    }

    .single-page-header vaadin-button,
    .single-page-header a {
        margin-bottom: 8px;
        width: 100%;
    }

    .pagination-bar {
        flex-direction: column !important;
        align-items: start !important;
        gap: 0 !important;
        padding: 0;
    }

    .page-filter-bar {
        padding: 0;
    }

    .page-grid {
        margin: 0;
    }
}

.reporting-kpi-groups {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lumo-space-m);
    width: 100%;
}

.reporting-kpi-card {
    flex: 1 1 220px;
    min-width: 220px;
    padding: var(--lumo-space-m);
    border: 1px solid var(--lumo-contrast-10pct);
    border-radius: var(--lumo-border-radius-l);
    background: var(--lumo-base-color);
}

.reporting-kpi-card h3 {
    margin-top: 0;
    font-size: var(--lumo-font-size-s);
    color: var(--lumo-secondary-text-color);
}

.reporting-kpi-row {
    display: flex;
    justify-content: space-between;
    gap: var(--lumo-space-s);
    padding: 2px 0;
}
.telealarm-mail-preview {
    width: 100%;
    padding: var(--lumo-space-m);
    border: 1px solid var(--lumo-contrast-10pct);
    border-radius: var(--lumo-border-radius-m);
    background: var(--lumo-contrast-5pct);
}

.telealarm-mail-body {
    margin-top: var(--lumo-space-s);
    padding-top: var(--lumo-space-s);
    border-top: 1px solid var(--lumo-contrast-10pct);
    max-height: 260px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.flow-option-row.v-drag-over-target {
    box-shadow: 0 -2px 0 0 var(--lumo-primary-color);
}

.flow-option-drag-handle {
    cursor: grab;
    color: var(--lumo-secondary-text-color);
}

.on-call-change-period vaadin-date-time-picker {
    min-width: 0;
}

.on-call-change-period vaadin-date-time-picker-date-picker {
    flex: 1 1 auto;
    min-width: 0;
}

.on-call-change-period vaadin-date-time-picker-time-picker {
    flex: 0 0 6.5rem;
    width: 6.5rem;
    min-width: 0;
}

.activity-report-grid::part(case-odd) {
    background-color: var(--lumo-contrast-5pct);
}

.activity-report-grid::part(case-start) {
    border-top: 2px solid var(--lumo-contrast-30pct);
}

.activity-report-grid .case-details {
    font-size: var(--lumo-font-size-s);
    line-height: 1.4;
    padding: var(--lumo-space-xs) 0;
    white-space: normal;
}