:root {
    --es-red: #d90016;
    --es-red-dark: #a80716;
    --es-red-soft: #fff0f2;
    --es-ink: #111827;
    --es-sidebar: #111923;
    --es-sidebar-2: #17212c;
    --es-muted: #667085;
    --es-line: #e4e9ef;
    --es-bg: #f3f5f7;
    --es-card: #ffffff;
    --es-green: #13a965;
    --es-amber: #e9a10b;
    --es-blue: #2878e6;
    --sidebar-width: 248px;
    --topbar-height: 72px;
}

html { font-size: 14px; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 14px; } }
* { box-sizing: border-box; }
body.app-modern {
    margin: 0;
    min-height: 100vh;
    background: var(--es-bg);
    color: var(--es-ink);
    font-family: "Segoe UI", Inter, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--es-red-dark); text-decoration: none; }
a:hover { color: var(--es-red); }

/* ========== SIDEBAR ========== */
.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #121b25 0%, #111923 64%, #0e151e 100%);
    color: #fff;
    box-shadow: 10px 0 35px rgba(19, 29, 40, .09);
}
.sidebar-brand { padding: 22px 18px 15px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand-link { display: block; }
.sidebar-logo { width: 178px; max-width: 100%; height: auto; display: block; }
.sidebar-panel-name { margin: 8px 3px 0; color: #8996a6; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-scroll { flex: 1; overflow-y: auto; padding: 12px 10px 20px; scrollbar-width: thin; scrollbar-color: #43505f transparent; }
.app-sidebar-nav { list-style: none; margin: 0; padding: 0; }
.sidebar-section { padding: 17px 10px 7px; color: #748192; font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; font-weight: 700; }
.app-sidebar .nav-item { list-style: none; margin: 2px 0; }
.app-sidebar .nav-link {
    min-height: 43px;
    padding: 9px 11px;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    align-items: center;
    color: #d4dbe3 !important;
    font-weight: 500;
    transition: .18s ease;
}
.app-sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff !important; transform: translateX(1px); }
.app-sidebar .nav-link.active { background: linear-gradient(90deg, var(--es-red), #be1124); color: #fff !important; box-shadow: 0 7px 20px rgba(217,0,22,.24); }
.nav-symbol {
    width: 25px;
    height: 25px;
    border-radius: 7px;
    flex: 0 0 25px;
    display: inline-grid;
    place-items: center;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
}
.app-sidebar .nav-link.active .nav-symbol { background: rgba(255,255,255,.18); }
.app-sidebar .dropdown-toggle::after { margin-left: auto; opacity: .55; }
.app-sidebar .dropdown-menu.sidebar-submenu,
.app-sidebar .dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100%;
    margin: 3px 0 8px;
    padding: 4px 0 6px 35px;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.app-sidebar .dropdown-item {
    color: #9eabb9;
    padding: 7px 8px;
    border-radius: 6px;
    white-space: normal;
    font-size: .88rem;
}
.app-sidebar .dropdown-item:hover,
.app-sidebar .dropdown-item:focus { color: #fff; background: rgba(255,255,255,.06); }
.app-sidebar .dropdown-divider { border-color: rgba(255,255,255,.08); }
.sidebar-footer { padding: 18px 20px 22px; color: #7c8999; border-top: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; font-size: .72rem; letter-spacing: .04em; }
.sidebar-footer small { margin-top: 3px; color: #596575; }

/* ========== TOP BAR / SHELL ========== */
.app-shell { min-height: 100vh; margin-left: var(--sidebar-width); }
.app-topbar {
    height: var(--topbar-height);
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--es-line);
    backdrop-filter: blur(12px);
}
.topbar-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
.topbar-title { font-size: 1.12rem; font-weight: 750; color: #151d28; line-height: 1.15; }
.topbar-subtitle { font-size: .75rem; color: #8a94a3; margin-top: 3px; }
.sidebar-toggle { display: none; border: 0; background: #f2f4f7; border-radius: 8px; width: 38px; height: 38px; font-size: 1.25rem; color: #27313d; }
.topbar-menu { gap: 8px; margin: 0; padding: 0; }
.topbar-menu .nav-link { color: #3e4855 !important; }
.topbar-menu > .nav-item > .nav-link { padding: 8px 9px; border-radius: 8px; }
.topbar-menu > .nav-item > .nav-link:hover { background: #f4f6f8; }
.user-menu > a { display: flex; align-items: center; gap: 10px; }
.user-avatar { width: 38px; height: 38px; border-radius: 50%; background: #161e28; color: #fff; display: grid; place-items: center; font-weight: 750; }
.user-meta { display: flex; flex-direction: column; line-height: 1.1; min-width: 90px; }
.user-meta strong { font-size: .9rem; color: #19212b; }
.user-meta small { margin-top: 4px; color: #8b95a2; font-size: .72rem; }
.topbar-menu .dropdown-menu { border: 1px solid var(--es-line); border-radius: 11px; box-shadow: 0 14px 36px rgba(28,39,52,.14); padding: 7px; }
.topbar-menu .dropdown-item { border-radius: 7px; padding: 8px 10px; }
.topbar-menu .dropdown-item.active { background: var(--es-red); }

.app-content-wrap { min-height: calc(100vh - var(--topbar-height)); display: flex; flex-direction: column; }
.app-content { width: 100%; max-width: 1450px; margin: 0 auto; padding: 24px 28px 42px; flex: 1; }
.app-content-full { max-width: none; padding: 0; }
.app-footer { min-height: 62px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 30px; color: #8b95a2; font-size: .78rem; border-top: 1px solid var(--es-line); background: #fff; }
.footer-links { display: flex; gap: 18px; }
.footer-links a { color: #667080; }

/* ========== GLOBAL PAGE SKIN ========== */
.app-content h1, .app-content h2, .app-content h3 { color: #17202b; font-weight: 720; letter-spacing: -.02em; }
.app-content h1 { font-size: 2rem; margin-bottom: 20px; }
.app-content h2 { font-size: 1.4rem; }
.app-content .card,
.app-card,
.app-content [style*="background:#f9f9f9"],
.app-content [style*="background: #f9f9f9"] {
    background: #fff !important;
    border: 1px solid var(--es-line) !important;
    border-radius: 13px !important;
    box-shadow: 0 5px 18px rgba(20,32,45,.06) !important;
}
.app-content .card-header { background: #fff; border-bottom: 1px solid var(--es-line); font-weight: 700; }
.app-content .table { --bs-table-bg: transparent; color: #28313d; vertical-align: middle; }
.app-content .table thead th { background: #f6f7f9; color: #566170; border-bottom: 1px solid #dde3e9; font-size: .78rem; text-transform: uppercase; letter-spacing: .035em; padding: 11px 12px; }
.app-content .table tbody td { padding: 11px 12px; border-color: #edf0f3; }
.app-content .table-hover tbody tr:hover { background: #fbfcfd; }
.app-content .form-control,
.app-content .form-select,
.guest-content .form-control,
.guest-content .form-select {
    min-height: 40px;
    border-color: #d7dde4;
    border-radius: 8px;
    box-shadow: none;
}
.app-content .form-control:focus,
.app-content .form-select:focus,
.guest-content .form-control:focus,
.guest-content .form-select:focus { border-color: #df5c69; box-shadow: 0 0 0 3px rgba(217,0,22,.08); }
.app-content .btn, .guest-content .btn { border-radius: 8px; font-weight: 600; }
.app-content .btn-primary, .guest-content .btn-primary { background: var(--es-red); border-color: var(--es-red); }
.app-content .btn-primary:hover, .guest-content .btn-primary:hover { background: var(--es-red-dark); border-color: var(--es-red-dark); }
.app-content .btn-outline-primary { color: var(--es-red); border-color: #e59aa2; }
.app-content .btn-outline-primary:hover { background: var(--es-red); border-color: var(--es-red); color: #fff; }
.app-content .alert { border-radius: 10px; border-width: 1px; box-shadow: 0 3px 10px rgba(20,32,45,.04); }
.app-content .badge { font-weight: 600; }

/* ========== DASHBOARD ========== */
.dashboard-page { display: flex; flex-direction: column; gap: 16px; }
.dashboard-hero {
    position: relative;
    overflow: hidden;
    min-height: 185px;
    border-radius: 15px;
    padding: 31px 34px;
    color: #fff;
    background:
        radial-gradient(circle at 84% 55%, rgba(217,0,22,.40) 0 2%, transparent 28%),
        linear-gradient(118deg, #1b2530 0%, #28323d 54%, #0d1218 100%);
    box-shadow: 0 10px 30px rgba(14,22,31,.17);
}
.dashboard-hero::before {
    content: "";
    position: absolute;
    right: -100px;
    bottom: -120px;
    width: 520px;
    height: 260px;
    border: 3px solid rgba(255,255,255,.08);
    border-radius: 60% 0 0 0;
    transform: rotate(-5deg);
}
.dashboard-hero::after { content: ""; position: absolute; right: 70px; bottom: 40px; width: 250px; height: 3px; background: linear-gradient(90deg, transparent, var(--es-red), transparent); box-shadow: 0 0 18px rgba(217,0,22,.75); }
.hero-eyebrow { color: #ff6c78; text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 700; margin-bottom: 7px; }
.dashboard-hero h1 { color: #fff; font-size: clamp(2rem, 3vw, 3rem); margin: 0 0 8px; max-width: 720px; }
.dashboard-hero p { color: #cbd3dc; margin: 0; max-width: 650px; font-size: 1rem; }
.hero-quote { position: absolute; right: 55px; top: 50px; width: 190px; color: rgba(255,255,255,.66); font-size: 1.15rem; line-height: 1.25; }
.hero-quote::after { content: ""; display: block; width: 44px; height: 2px; background: var(--es-red); margin-top: 15px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 16px; }
.metric-card { grid-column: span 3; background: #fff; border: 1px solid var(--es-line); border-radius: 13px; padding: 18px; display: flex; align-items: center; gap: 14px; min-height: 105px; box-shadow: 0 4px 16px rgba(20,32,45,.05); }
.metric-icon { width: 51px; height: 51px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; background: var(--es-red-soft); color: var(--es-red); flex: 0 0 51px; }
.metric-icon.green { background: #eaf9f1; color: var(--es-green); }
.metric-icon.blue { background: #eaf2ff; color: var(--es-blue); }
.metric-icon.amber { background: #fff6de; color: var(--es-amber); }
.metric-number { font-size: 1.65rem; font-weight: 760; line-height: 1; color: #17202b; }
.metric-label { color: #3d4754; margin-top: 5px; font-size: .88rem; }
.metric-note { color: #98a1ad; margin-top: 3px; font-size: .74rem; }
.dashboard-card { background: #fff; border: 1px solid var(--es-line); border-radius: 13px; box-shadow: 0 4px 16px rgba(20,32,45,.05); overflow: hidden; }
.dashboard-card-header { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #edf0f3; }
.dashboard-card-header h2 { font-size: 1.08rem; margin: 0; display: flex; align-items: center; gap: 9px; }
.dashboard-card-body { padding: 16px 18px; }
.col-4x { grid-column: span 4; } .col-5x { grid-column: span 5; } .col-6x { grid-column: span 6; } .col-7x { grid-column: span 7; } .col-8x { grid-column: span 8; } .col-12x { grid-column: span 12; }
.status-list { display: flex; flex-direction: column; }
.status-row { display: grid; grid-template-columns: minmax(140px, 1.5fr) minmax(100px,.8fr) minmax(135px,1fr) auto; gap: 12px; align-items: center; min-height: 58px; padding: 8px 0; border-bottom: 1px solid #edf0f3; }
.status-row:last-child { border-bottom: 0; }
.status-product { display: flex; align-items: center; gap: 10px; min-width: 0; }
.status-product-icon { width: 38px; height: 38px; border-radius: 9px; background: #17202b; color: #fff; display: grid; place-items: center; font-size: .76rem; font-weight: 800; flex: 0 0 38px; }
.status-product strong { display: block; font-size: .9rem; }
.status-product small { display: block; color: #8a94a2; margin-top: 2px; font-size: .72rem; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 9px; font-size: .73rem; font-weight: 700; width: max-content; }
.status-pill.active { color: #087c48; background: #e8f8f0; }
.status-pill.expired { color: #a56800; background: #fff4d7; }
.status-pill.inactive { color: #687281; background: #f0f2f5; }
.status-pill.keygen { color: #a06a00; background: #fff3d6; }
.status-expiry { color: #5c6775; font-size: .8rem; }
.status-action .btn { white-space: nowrap; font-size: .76rem; }
.online-list { display: flex; flex-wrap: wrap; gap: 8px; }
.online-user { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #dce5df; background: #f8fcfa; border-radius: 8px; color: #314038; font-size: .8rem; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #19b66b; box-shadow: 0 0 0 3px rgba(25,182,107,.11); }
.quick-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.quick-link { min-height: 72px; padding: 12px; border: 1px solid var(--es-line); border-radius: 10px; color: #26313d; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; transition: .17s ease; }
.quick-link:hover { color: #111827; border-color: #e6a0a8; transform: translateY(-1px); box-shadow: 0 5px 13px rgba(20,32,45,.06); }
.quick-link b { display: block; font-size: .84rem; }
.quick-link small { display: block; color: #929ba7; margin-top: 2px; }
.activity-list { list-style: none; padding: 0; margin: 0; }
.activity-list li { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid #edf0f3; font-size: .8rem; }
.activity-list li:last-child { border-bottom: 0; }
.activity-list time { color: #87919f; }
.account-grid { display: grid; grid-template-columns: 125px 1fr; gap: 9px 12px; font-size: .82rem; }
.account-grid dt { color: #8993a0; font-weight: 500; }
.account-grid dd { margin: 0; font-weight: 600; color: #333d49; }

/* ========== GUEST / LOGIN ========== */
.guest-shell { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(circle at 15% 12%, rgba(217,0,22,.08), transparent 26%), #f3f5f7; }
.guest-header { min-height: 75px; background: #fff; border-bottom: 1px solid var(--es-line); display: flex; align-items: center; justify-content: space-between; padding: 12px 28px; }
.guest-header img { width: 165px; height: auto; }
.guest-header .nav-link { color: #3c4652 !important; }
.guest-content { width: 100%; max-width: 600px; margin: auto; padding: 38px 24px; }
.guest-content h1, .guest-content h2 { font-weight: 750; color: #17202b; }
.guest-content > div[style*="background:#f9f9f9"], .guest-content > div > div[style*="background:#f9f9f9"] { background: #fff !important; border: 1px solid var(--es-line); border-radius: 14px !important; box-shadow: 0 12px 38px rgba(20,32,45,.09) !important; }
.guest-footer { padding: 18px 25px; text-align: center; color: #8b95a2; font-size: .78rem; }

.support-btn { position: fixed; right: 23px; bottom: 23px; z-index: 1050; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #fff !important; background: linear-gradient(145deg,var(--es-red),#a90013); font-size: 1.25rem; font-weight: 800; box-shadow: 0 8px 23px rgba(217,0,22,.28); }
.support-btn:hover { transform: translateY(-2px); }

/* Legacy focus ring */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 .15rem rgba(217,0,22,.13); }

@media (max-width: 1100px) {
    .metric-card { grid-column: span 6; }
    .col-4x, .col-5x, .col-7x, .col-8x { grid-column: span 6; }
    .hero-quote { display: none; }
}
@media (max-width: 850px) {
    .app-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
    body.sidebar-open .app-sidebar { transform: translateX(0); }
    .app-shell { margin-left: 0; }
    .sidebar-toggle { display: inline-grid; place-items: center; }
    .app-topbar { padding: 0 15px; }
    .app-content { padding: 18px 14px 36px; }
    .user-meta { display: none; }
    .status-row { grid-template-columns: 1fr auto; }
    .status-expiry { grid-column: 1 / 2; }
    .status-action { grid-column: 2 / 3; grid-row: 1 / 3; }
}
@media (max-width: 620px) {
    .metric-card, .col-4x, .col-5x, .col-6x, .col-7x, .col-8x, .col-12x { grid-column: span 12; }
    .dashboard-hero { padding: 25px 22px; min-height: 165px; }
    .dashboard-hero h1 { font-size: 2rem; }
    .quick-grid { grid-template-columns: 1fr; }
    .app-footer { flex-direction: column; align-items: flex-start; }
}


/* ===== Sidebar: aktuelles Modul + aktuelle Unterseite ===== */
.app-sidebar .nav-link.module-open {
    color: #fff !important;
    background: rgba(255,255,255,.075);
}
.app-sidebar .nav-link.module-open .nav-symbol {
    background: rgba(217,0,22,.28);
}
.app-sidebar .dropdown-item.current-page {
    position: relative;
    color: #fff !important;
    background: rgba(255,255,255,.075);
    font-weight: 800;
}
.app-sidebar .dropdown-item.current-page::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 3px;
    background: var(--es-red);
}

/* ============================================================
   USER DASHBOARD V2.2
   ============================================================ */
.user-summary-card {
    background:#fff;
    border:1px solid var(--es-line);
    border-radius:13px;
    padding:22px 24px;
    min-height:126px;
    display:flex;
    align-items:center;
    gap:18px;
    box-shadow:0 4px 16px rgba(20,32,45,.05);
}
.user-summary-icon {
    width:54px;
    height:54px;
    flex:0 0 54px;
    border-radius:13px;
    display:grid;
    place-items:center;
    font-size:23px;
    font-weight:800;
    background:#f1f4f7;
    color:#293744;
}
.user-summary-icon.amber { background:#fff4d9; color:#a66b00; }
.user-summary-icon.blue { background:#eaf2ff; color:#2768a8; }
.user-summary-content { min-width:0; }
.user-summary-label {
    color:#6c7782;
    font-size:.78rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:3px;
}
.user-summary-value {
    color:#18232d;
    font-size:1.65rem;
    line-height:1.15;
    font-weight:800;
}
.user-summary-note {
    margin-top:6px;
    color:#6f7a84;
    font-size:.88rem;
}
.user-summary-note strong { color:#34414d; }

.access-section-title {
    margin:2px 0 4px;
    padding:0 0 9px;
    color:#687580;
    font-size:.74rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    border-bottom:1px solid #edf0f3;
}
.access-section-title.optional {
    margin-top:18px;
    color:#8a6670;
}
.optional-row .status-product-icon {
    background:#f7eef1;
    color:#9a3f57;
}
.help-mark {
    display:inline-grid;
    place-items:center;
    width:25px;
    height:25px;
    margin-right:4px;
    border-radius:50%;
    background:#eef1f4;
    color:#4d5a65;
    font-size:.9rem;
    font-weight:800;
}

@media (max-width: 760px) {
    .user-summary-card { grid-column:span 12; }
}


/* ============================================================
   ES PERFORMANCE PANEL V2.1
   Unified content design for list, form, log and admin pages
   ============================================================ */

/* Standard page rhythm */
.app-content:not(.app-content-full) {
    --es-page-gap: 18px;
}

.app-content:not(.app-content-full) > h1,
.app-content:not(.app-content-full) > h2 {
    margin: 2px 0 18px;
    padding-bottom: 13px;
    border-bottom: 1px solid #e5eaf0;
}

.app-content:not(.app-content-full) > h1::after,
.app-content:not(.app-content-full) > h2::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 12px;
    border-radius: 999px;
    background: var(--es-red);
}

/* Unified white content surface */
.es-surface,
.app-content [style*="background:#f9f9f9"],
.app-content [style*="background: #f9f9f9"],
.app-content .bg-light.rounded.shadow-sm,
.app-content .table-container {
    background: #fff !important;
    border: 1px solid var(--es-line) !important;
    border-radius: 13px !important;
    box-shadow: 0 4px 16px rgba(20,32,45,.055) !important;
}

.es-surface {
    margin-top: 18px;
    padding: 20px;
}

.app-content [style*="background:#f9f9f9"],
.app-content [style*="background: #f9f9f9"] {
    background: #fff !important;
}

.app-content .table-container {
    padding: 0;
    overflow: hidden;
}

/* Tables across Downloads / Groups / Logs / Module indexes */
.app-content .table {
    margin-bottom: 0;
    border-color: #e8edf2;
}

.app-content .table > :not(caption) > * > * {
    box-shadow: none;
}

.app-content .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: #fbfcfd;
    color: inherit;
}

.app-content .table-bordered > :not(caption) > * {
    border-width: 0 0 1px;
}

.app-content .table thead th:first-child,
.app-content .table tbody td:first-child {
    padding-left: 16px;
}

.app-content .table thead th:last-child,
.app-content .table tbody td:last-child {
    padding-right: 16px;
}

.app-content .table thead a {
    color: #4f5b68;
    font-weight: 800;
}

.app-content .table thead a:hover {
    color: var(--es-red);
}

/* Forms */
.app-content form:not(.d-inline):not([style*="display:inline"]):not([style*="display: inline"]) .form-label,
.app-content form:not(.d-inline) label {
    color: #4c5866;
    font-size: .82rem;
    font-weight: 700;
}

.app-content textarea.form-control {
    min-height: 105px;
}

.app-content .form-check-input:checked {
    background-color: var(--es-red);
    border-color: var(--es-red);
}

/* Buttons: one coherent hierarchy */
.app-content .btn-success {
    background: #178754;
    border-color: #178754;
}
.app-content .btn-success:hover {
    background: #116a42;
    border-color: #116a42;
}

.app-content .btn-warning {
    color: #493600;
    background: #f4c95d;
    border-color: #f4c95d;
}

.app-content .btn-secondary {
    background: #5d6875;
    border-color: #5d6875;
}

.app-content .btn-danger {
    background: #c92d3b;
    border-color: #c92d3b;
}

.app-content .btn-sm {
    border-radius: 7px;
}

/* Tabs */
.app-content .nav-tabs {
    border-bottom: 1px solid #e1e6ec;
    gap: 4px;
}
.app-content .nav-tabs .nav-link {
    color: #66717e;
    border: 0;
    border-radius: 8px 8px 0 0;
    padding: 10px 13px;
    font-weight: 700;
}
.app-content .nav-tabs .nav-link:hover {
    color: #202a35;
    background: #f5f7f9;
}
.app-content .nav-tabs .nav-link.active {
    color: var(--es-red-dark);
    background: #fff;
    box-shadow: inset 0 -3px 0 var(--es-red);
}

/* Pills used by unified user editor */
.app-content .nav-pills .nav-link {
    color: #53606d;
    border-radius: 8px;
    font-weight: 700;
}
.app-content .nav-pills .nav-link.active {
    color: #fff;
    background: var(--es-red);
}

/* Log/pre/code areas */
.app-content pre,
.app-content .log-output {
    background: #151d26;
    color: #e8edf3;
    border: 1px solid #263442;
    border-radius: 10px;
    padding: 14px;
}

/* Empty/info messages */
.es-empty-state {
    padding: 34px 22px;
    text-align: center;
    color: #7b8795;
    background: #fff;
    border: 1px dashed #d9e0e7;
    border-radius: 12px;
}

/* Compact page header utility */
.es-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 2px 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5eaf0;
}
.es-page-header h1,
.es-page-header h2 {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.es-page-header h1::after,
.es-page-header h2::after {
    display: none !important;
}
.es-page-kicker {
    margin-bottom: 5px;
    color: var(--es-red);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.es-page-subtitle {
    margin: 5px 0 0;
    color: #7a8693;
    font-size: .88rem;
}

/* Download disclaimer */
#disclaimerModal > div {
    border: 1px solid var(--es-line);
    border-radius: 14px !important;
    box-shadow: 0 20px 60px rgba(15,23,42,.22) !important;
}

/* Search page */
.app-content .form-search {
    width: min(100%, 620px);
    padding: 28px;
    background: #fff;
    border: 1px solid var(--es-line);
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(20,32,45,.07);
}
.app-content .form-search img {
    max-width: 210px;
    height: auto;
}

/* Pagination */
.app-content .pagination {
    gap: 4px;
}
.app-content .page-link {
    color: #4e5967;
    border-color: #e0e5eb;
    border-radius: 7px !important;
}
.app-content .page-item.active .page-link {
    color: #fff;
    background: var(--es-red);
    border-color: var(--es-red);
}

/* Accordion */
.app-content .accordion-item {
    border-color: var(--es-line);
}
.app-content .accordion-button:not(.collapsed) {
    color: #202a35;
    background: #f8f9fb;
    box-shadow: inset 0 -1px 0 var(--es-line);
}

/* Modal */
.app-content .modal-content {
    border: 1px solid var(--es-line);
    border-radius: 14px;
    box-shadow: 0 18px 55px rgba(15,23,42,.18);
}
.app-content .modal-header {
    border-bottom-color: #e8edf2;
}
.app-content .modal-footer {
    border-top-color: #e8edf2;
}

/* Cards that still come from Bootstrap */
.app-content .card {
    overflow: hidden;
}
.app-content .card-body {
    padding: 20px;
}

/* Keep specialist tool pages usable while bringing their outer shell in line */
.app-content .form-search,
.app-content .maintenance-container,
.app-content .config-container {
    color: var(--es-ink);
}

@media (max-width: 760px) {
    .es-surface {
        padding: 14px;
    }

    .app-content .table {
        min-width: 620px;
    }

    .app-content .table-responsive {
        border-radius: 10px;
    }
}


/* ==========================================================
   ES PERFORMANCE PANEL V2.2 - UNIFIED ALL-PAGES DESIGN SYSTEM
   One visual language for every authenticated MVC page.
   ========================================================== */

.es-standard-page{
    width:100%;
    max-width:1480px;
    margin:0 auto;
    color:#202a35;
}
.es-standard-page > h1:first-child,
.es-standard-page > h2:first-child{
    margin:0 0 20px!important;
    padding:0 0 16px!important;
    color:#202a35!important;
    border-bottom:1px solid #e3e8ee!important;
    font-size:clamp(1.45rem,2vw,1.9rem)!important;
    font-weight:800!important;
    line-height:1.2!important;
}
.es-standard-page > h1:first-child::after,
.es-standard-page > h2:first-child::after{display:none!important}

/* Legacy page containers become the same clean ES card surface. */
.es-standard-page .container:not(.navbar):not(.content-wrapper),
.es-standard-page .container-fluid,
.es-standard-page .table-container,
.es-standard-page div[style*="background:#f9f9f9"],
.es-standard-page div[style*="background: #f9f9f9"],
.es-standard-page div[style*="background:#fff"],
.es-standard-page div[style*="background: #fff"]{
    border-color:#e1e7ed;
}
.es-standard-page .card{
    border:1px solid #e1e7ed!important;
    border-radius:14px!important;
    box-shadow:0 5px 18px rgba(20,32,45,.055)!important;
}
.es-standard-page .card-header{
    padding:15px 18px;
    color:#202a35;
    background:#fbfcfd!important;
    border-bottom:1px solid #e7ecf1!important;
    font-weight:800;
}
.es-standard-page .card-body{padding:18px}

/* Forms */
.es-standard-page label,
.es-standard-page .form-label{color:#566270;font-size:.8rem;font-weight:800}
.es-standard-page .form-control,
.es-standard-page .form-select,
.es-standard-page select:not(.form-select),
.es-standard-page input[type="text"]:not(.form-control),
.es-standard-page input[type="email"]:not(.form-control),
.es-standard-page input[type="password"]:not(.form-control),
.es-standard-page input[type="number"]:not(.form-control),
.es-standard-page input[type="date"]:not(.form-control),
.es-standard-page textarea:not(.form-control){
    border:1px solid #dbe2e9;
    border-radius:8px;
    color:#26313c;
    background:#fff;
}
.es-standard-page .form-control:focus,
.es-standard-page .form-select:focus,
.es-standard-page select:focus,
.es-standard-page input:focus,
.es-standard-page textarea:focus{
    border-color:#aab5c0;
    box-shadow:0 0 0 .2rem rgba(32,42,53,.07);
    outline:0;
}

/* Tables */
.es-standard-page .table,
.es-standard-page table:not(.calendar-table){
    overflow:hidden;
    margin-bottom:0;
    background:#fff;
    border-color:#e6ebf0;
    border-radius:10px;
}
.es-standard-page .table thead th,
.es-standard-page table thead th{
    padding:.72rem .8rem;
    color:#66727e;
    background:#f5f7f9;
    border-bottom:1px solid #e1e7ed;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.02em;
    vertical-align:middle;
}
.es-standard-page .table tbody td,
.es-standard-page table tbody td{
    padding:.72rem .8rem;
    color:#465360;
    border-color:#edf0f3;
    font-size:.8rem;
    vertical-align:middle;
}
.es-standard-page .table-hover tbody tr:hover>*{background:#fafbfc}

/* Consistent buttons */
.es-standard-page .btn{border-radius:8px;font-weight:700}
.es-standard-page .btn-primary,
.es-standard-page .btn-success{
    color:#fff!important;
    background:#d40018!important;
    border-color:#d40018!important;
}
.es-standard-page .btn-primary:hover,
.es-standard-page .btn-success:hover{
    background:#b90015!important;
    border-color:#b90015!important;
}
.es-standard-page .btn-outline-primary{
    color:#c50017;
    border-color:#d7aeb3;
}
.es-standard-page .btn-outline-primary:hover,
.es-standard-page .btn-outline-primary.active{
    color:#fff;
    background:#d40018;
    border-color:#d40018;
}

/* Tabs, pills, pagination */
.es-standard-page .nav-tabs{gap:4px;border-bottom:1px solid #e1e7ed}
.es-standard-page .nav-tabs .nav-link{color:#66727e;border:0;border-radius:8px 8px 0 0;font-size:.8rem;font-weight:700}
.es-standard-page .nav-tabs .nav-link.active{color:#d40018;background:#fff;border-bottom:2px solid #d40018}
.es-standard-page .page-link{color:#566270;border-color:#e1e7ed}
.es-standard-page .page-item.active .page-link{color:#fff;background:#d40018;border-color:#d40018}

/* Alerts and empty states */
.es-standard-page .alert{border-radius:10px;border-width:1px;font-size:.82rem}
.es-standard-page .alert-info{color:#4e5d6b;background:#f5f8fa;border-color:#dce5eb}
.es-standard-page .alert-success{color:#35634f;background:#f2faf6;border-color:#d5eadf}
.es-standard-page .alert-danger{color:#8e2c38;background:#fff5f6;border-color:#f1cdd2}

/* Technical output */
.es-standard-page pre{
    padding:13px 15px;
    color:#dfe7ef;
    background:#151d26;
    border:1px solid #263442;
    border-radius:9px;
    font-family:"Cascadia Mono",Consolas,"Courier New",monospace;
    font-size:.78rem;
    line-height:1.55;
    white-space:pre-wrap;
    overflow:auto;
}

/* Modal / accordion */
.es-standard-page .modal-content{border:1px solid #e1e7ed;border-radius:14px;box-shadow:0 18px 55px rgba(20,32,45,.18)}
.es-standard-page .modal-header{background:#fbfcfd;border-bottom-color:#e7ecf1}
.es-standard-page .accordion-item{overflow:hidden;border-color:#e1e7ed;border-radius:10px!important}
.es-standard-page .accordion-button{color:#35414d;background:#fbfcfd;font-weight:700}
.es-standard-page .accordion-button:not(.collapsed){color:#c50017;background:#fff5f6;box-shadow:none}

/* Existing purpose-built tools keep their own width/design but share outer rhythm. */
.es-standard-page .dataset-page,
.es-standard-page .mqb-page,
.es-standard-page .rdks-page,
.es-standard-page .xor-page,
.es-standard-page .vin-tool-page,
.es-standard-page .iframe-tool-page{margin-top:0}

/* Shared professional header used by migrated pages. */
.es-page-header-v2{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #e3e8ee}
.es-page-header-v2 .kicker{margin-bottom:5px;color:#d40018;font-size:.72rem;font-weight:800;letter-spacing:.09em}
.es-page-header-v2 h1{margin:0!important;padding:0!important;border:0!important;color:#202a35!important;font-size:clamp(1.55rem,2vw,2rem)!important;font-weight:800!important}
.es-page-header-v2 h1::after{display:none!important}
.es-page-header-v2 p{max-width:780px;margin:7px 0 0;color:#778391;font-size:.9rem}
.es-page-status{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;color:#556170;background:#fff;border:1px solid #e1e7ed;border-radius:999px;font-size:.76rem;font-weight:700}
.es-page-status::before{content:"";width:8px;height:8px;background:#22a06b;border-radius:50%;box-shadow:0 0 0 3px rgba(34,160,107,.12)}

@media(max-width:760px){
    .es-standard-page{min-width:0}
    .es-standard-page .table-responsive{border:1px solid #e1e7ed;border-radius:10px}
    .es-page-header-v2{align-items:flex-start}
}


/* V2.2.3: the global page header is now the one and only page title.
   Legacy PageView/PageTitle headings were removed from the Razor views instead
   of being hidden broadly with CSS. */
.es-global-page-header{margin-bottom:20px}


/* ============================================================
   SIDEBAR V2.2.5
   Aktuelles Modul bleibt erkennbar, auch wenn sein Dropdown
   manuell geschlossen wurde.
   ============================================================ */

/* current-module = Route gehört zu diesem Modul.
   Diese Klasse wird serverseitig gesetzt und von der Dropdown-
   Logik nicht entfernt. */
.app-sidebar .nav-link.current-module {
    position: relative;
    color: #fff !important;
    background: rgba(255,255,255,.065);
    font-weight: 800;
}

.app-sidebar .nav-link.current-module .nav-symbol {
    color: #fff;
    background: rgba(217,0,22,.30);
}

/* Rote Markierung links bleibt auch bei geschlossenem Dropdown sichtbar. */
.app-sidebar .nav-link.current-module::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--es-red);
}

/* Geöffnetes aktuelles Modul darf minimal kräftiger wirken. */
.app-sidebar .nav-link.current-module.module-open {
    background: rgba(255,255,255,.09);
}

/* Pfeil bleibt normal nutzbar; current-module beeinflusst nur die Markierung. */


/* ============================================================
   TOPBAR SUPPORT V2.2.6
   Support-Button aus der rechten unteren Ecke in die Topbar
   verschoben, direkt vor die Sprachauswahl.
   ============================================================ */

.app-topbar .topbar-support-link {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-right: 4px;
    padding: 0 !important;
    border-radius: 9px;
    color: #566270 !important;
    background: transparent;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.app-topbar .topbar-support-link:hover,
.app-topbar .topbar-support-link:focus {
    color: #fff !important;
    background: var(--es-red);
    transform: translateY(-1px);
}

.app-topbar .topbar-support-icon {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid #d7dee5;
    border-radius: 50%;
    font-size: .88rem;
    font-weight: 900;
    line-height: 1;
}

.app-topbar .topbar-support-link:hover .topbar-support-icon,
.app-topbar .topbar-support-link:focus .topbar-support-icon {
    border-color: rgba(255,255,255,.65);
}

/* Der alte Floating-Support-Button wird nicht mehr verwendet. */
.support-btn {
    display: none !important;
}


/* ============================================================
   PRIVATE MESSAGES V2.3.0
   ============================================================ */

.topbar-message-link {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-right: 3px;
    padding: 0 !important;
    border-radius: 9px;
    color: #566270 !important;
}
.topbar-message-link:hover { color:#fff !important; background:var(--es-red); }
.topbar-message-icon { font-size:1.15rem; line-height:1; }
.topbar-message-badge {
    position:absolute;
    top:1px;
    right:0;
    min-width:17px;
    height:17px;
    padding:0 4px;
    display:grid;
    place-items:center;
    border-radius:99px;
    background:var(--es-red);
    color:#fff;
    font-size:.62rem;
    font-weight:900;
    border:2px solid #fff;
}
.sidebar-message-badge {
    margin-left:auto;
    min-width:20px;
    padding:2px 6px;
    border-radius:99px;
    background:var(--es-red);
    color:#fff;
    font-size:.68rem;
    font-weight:900;
    text-align:center;
}

.messages-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin-bottom:16px;
}
.messages-tabs {
    display:flex;
    gap:6px;
    padding:4px;
    border:1px solid var(--es-line);
    border-radius:10px;
    background:#fff;
}
.messages-tab {
    padding:8px 14px;
    border-radius:7px;
    color:#61707d;
    font-weight:800;
    text-decoration:none;
}
.messages-tab:hover { color:#18232d; background:#f4f6f8; }
.messages-tab.active { color:#fff; background:#1f2a34; }

.messages-card,
.messages-compose-card,
.messages-reply-card {
    background:#fff;
    border:1px solid var(--es-line);
    border-radius:13px;
    box-shadow:0 4px 16px rgba(20,32,45,.055);
}
.messages-compose-card,
.messages-reply-card { padding:22px; }

.messages-list { overflow:hidden; border-radius:13px; }
.message-row {
    display:grid;
    grid-template-columns:46px minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    padding:14px 17px;
    border-bottom:1px solid #edf0f3;
    color:inherit;
    text-decoration:none;
    transition:background .15s ease;
}
.message-row:last-child { border-bottom:0; }
.message-row:hover { background:#fafbfc; color:inherit; }
.message-row.unread { background:#fff8f8; }
.message-row.unread:hover { background:#fff3f4; }

.message-avatar {
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#eef1f4;
    color:#33414d;
    font-weight:900;
}
.message-row.unread .message-avatar { background:#f9e5e8; color:#a90013; }
.message-main { min-width:0; }
.message-line { display:flex; align-items:center; gap:8px; font-size:.9rem; }
.message-unread-dot { width:7px;height:7px;border-radius:50%;background:var(--es-red); }
.message-to-label { color:#8a949d; font-size:.75rem; font-weight:800; text-transform:uppercase; }
.message-subject {
    margin-top:2px;
    color:#1e2a34;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.message-preview {
    margin-top:2px;
    color:#78838d;
    font-size:.84rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.message-time { color:#8b959e; font-size:.76rem; white-space:nowrap; }

.messages-empty { padding:54px 20px; text-align:center; color:#75818b; }
.messages-empty-icon {
    width:58px;height:58px;margin:0 auto 14px;
    display:grid;place-items:center;border-radius:15px;
    background:#f2f4f6;color:#74808a;font-size:1.5rem;
}
.messages-empty h3 { color:#26333e;font-size:1.1rem;font-weight:800; }
.messages-empty p { margin:0; }

.messages-textarea { min-height:130px; resize:vertical; }

.messages-thread-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}
.message-thread { display:flex; flex-direction:column; gap:11px; margin-bottom:18px; }
.message-bubble-wrap { display:flex; }
.message-bubble-wrap.mine { justify-content:flex-end; }
.message-bubble-wrap.theirs { justify-content:flex-start; }
.message-bubble {
    width:min(760px,86%);
    padding:14px 16px;
    border:1px solid #e3e8ed;
    border-radius:14px;
    background:#fff;
    box-shadow:0 3px 10px rgba(20,32,45,.04);
}
.message-bubble-wrap.mine .message-bubble {
    border-color:#f0cfd3;
    background:#fff8f8;
}
.message-bubble-meta {
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
    color:#7b8791;
    font-size:.75rem;
}
.message-bubble-meta strong { color:#33414c; }
.message-bubble-body {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    color:#26323c;
    line-height:1.55;
}
.messages-thread-actions { display:flex; justify-content:flex-end; margin-top:12px; }

@media(max-width:700px){
    .messages-toolbar { align-items:stretch; flex-direction:column; }
    .messages-toolbar .btn { width:100%; }
    .messages-tabs { width:100%; }
    .messages-tab { flex:1; text-align:center; }
    .message-row { grid-template-columns:38px minmax(0,1fr); }
    .message-avatar { width:34px;height:34px; }
    .message-time { grid-column:2; }
    .messages-thread-top { align-items:flex-start; flex-direction:column; }
    .message-bubble { width:94%; }
}


/* ============================================================
   MESSAGE GROUPS / DIRECTORY V2.3.1
   ============================================================ */
.message-send-mode {
    padding:14px 16px;
    border:1px solid #e2e7ec;
    border-radius:10px;
    background:#f8f9fa;
}
.message-mode-options { display:flex; flex-wrap:wrap; gap:10px 18px; }
.message-mode-options label { display:flex; gap:7px; align-items:center; font-weight:700; cursor:pointer; }

.group-directory-intro { color:#6f7c87; margin-bottom:15px; }
.group-directory-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:16px;
}
.group-directory-card {
    overflow:hidden;
    border:1px solid var(--es-line);
    border-radius:13px;
    background:#fff;
    box-shadow:0 4px 16px rgba(20,32,45,.055);
}
.group-directory-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:17px 18px;
    border-bottom:1px solid #edf0f3;
}
.group-directory-kicker {
    display:block;
    color:var(--es-red);
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}
.group-directory-head h3 { margin:2px 0 0; font-size:1rem; font-weight:900; }
.group-directory-count {
    min-width:30px;
    padding:4px 8px;
    border-radius:99px;
    background:#eef1f4;
    color:#4f5c67;
    text-align:center;
    font-size:.75rem;
    font-weight:900;
}
.group-directory-users { padding:4px 0; }
.group-directory-user {
    display:flex;
    align-items:center;
    gap:11px;
    min-height:52px;
    padding:8px 14px;
    border-bottom:1px solid #f0f2f4;
}
.group-directory-user:last-child { border-bottom:0; }
.group-directory-avatar {
    width:34px;height:34px;
    display:grid;place-items:center;
    border-radius:9px;
    background:#eef1f4;
    color:#394651;
    font-weight:900;
}
.group-directory-name { font-weight:800; color:#27343e; }
.group-directory-you {
    margin-left:auto;
    padding:3px 8px;
    border-radius:99px;
    background:#f1f3f5;
    color:#75808a;
    font-size:.7rem;
    font-weight:800;
}
.group-user-menu {
    width:32px;height:32px;
    display:grid;place-items:center;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#66727c;
    font-size:1.2rem;
    font-weight:900;
}
.group-user-menu:hover { background:#f1f3f5; color:#202c35; }

@media(max-width:600px){
    .group-directory-grid { grid-template-columns:1fr; }
    .message-mode-options { flex-direction:column; align-items:flex-start; }
}


/* ============================================================
   MESSAGE ACTION MENU + GROUP CHATS V2.3.4
   ============================================================ */
.message-row-wrap {
    position:relative;
    display:flex;
    align-items:stretch;
    border-bottom:1px solid #edf0f3;
    background:#fff;
}
.message-row-wrap:last-child { border-bottom:0; }
.message-row-wrap.unread { background:#fffafa; }
.message-row-wrap .message-row {
    flex:1 1 auto;
    min-width:0;
    border-bottom:0 !important;
}
.message-row-link { text-decoration:none !important; }
.message-row-menu {
    flex:0 0 48px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-right:8px;
}
.message-menu-button {
    width:34px;
    height:34px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#65717c;
    font-size:1.3rem;
    font-weight:900;
    line-height:1;
}
.message-menu-button:hover,
.message-menu-button:focus {
    background:#eef1f4;
    color:#202b34;
}
.message-row-menu form { margin:0; }
.message-row-menu .dropdown-item { width:100%; text-align:left; }
.messages-thread-heading {
    display:flex;
    flex-direction:column;
    min-width:0;
}
.messages-thread-heading strong {
    max-width:620px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
@media(max-width:700px) {
    .message-row-menu { flex-basis:42px; padding-right:4px; }
    .messages-thread-top { align-items:flex-start; flex-wrap:wrap; }
    .messages-thread-heading strong { white-space:normal; }
}


/* ============================================================
   WHATSAPP-STYLE CONVERSATION LIST V2.3.5
   ============================================================ */
.conversation-row { min-height:78px; }
.conversation-row.unread { background:#fff8f8; }
.conversation-row.unread .conversation-title-line strong,
.conversation-row.unread .message-subject { font-weight:900; }
.conversation-title-line {
    display:flex;
    align-items:center;
    gap:8px;
}
.conversation-type {
    padding:2px 7px;
    border-radius:999px;
    background:#eef1f4;
    color:#66737e;
    font-size:.65rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.message-avatar.group-avatar {
    font-size:1rem;
    background:#f1f2f4;
}
.conversation-preview {
    display:block;
    max-width:760px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.conversation-you { font-weight:800; color:#6a747d; }
.conversation-meta {
    flex:0 0 auto;
    min-width:112px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    gap:7px;
    padding-left:10px;
}
.conversation-unread-count {
    min-width:22px;
    height:22px;
    padding:0 6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:var(--es-red);
    color:#fff;
    font-size:.68rem;
    font-weight:900;
}
@media(max-width:700px) {
    .conversation-meta { min-width:auto; }
    .conversation-meta .message-time { font-size:.68rem; }
    .conversation-preview { max-width:55vw; }
}


/* ============================================================
   MESSAGE DROPDOWN OVERFLOW FIX V2.3.6
   Dropdown darf die Nachrichtenkarte nach unten überlappen.
   ============================================================ */
.messages-card,
.messages-list,
.conversation-list,
.message-row-wrap {
    overflow: visible !important;
}

.message-row-wrap {
    position: relative;
}

.message-row-menu {
    position: relative;
    z-index: 20;
}

.message-row-menu .dropdown-menu {
    z-index: 1080;
}


/* =========================================================
   SSP result cards
   Global site skin clips all Bootstrap cards with overflow:hidden.
   SSP language dropups must be allowed to overlap neighbouring cards.
   ========================================================= */
.app-content .card.ssp-result-card {
    overflow: visible !important;
    position: relative;
}

.app-content .ssp-result-card .dropup,
.app-content .ssp-result-card .dropdown {
    position: relative;
    z-index: 20;
}

.app-content .ssp-result-card .dropdown-menu {
    z-index: 2000 !important;
}