:root {
    --mspoc-accent: #27348b;
    --mspoc-session-bg: #edf4ff;
    --mspoc-session-color: #31527a;
    --mspoc-topbar-height: 4rem;
}

body {
    min-height: 100vh;
    background: var(--tblr-bg-surface-secondary);
}

.app-shell {
    min-height: 100vh;
}

.app-frame {
    width: min(100%, 1320px);
    margin-inline: auto;
    padding-inline: .75rem;
}

/* Kopfleiste und Navigation kleben gemeinsam (08.10.2026), egal wie viele
   Zeilen die Kopfleiste gerade braucht. Innerhalb des Blocks liegt die
   Kopfleiste ueber der Navigation, damit ihre Flyouts (Rueckrufe, Suche,
   Benutzer) nicht unter dem Menue verschwinden. */
.app-chrome {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.app-topbar {
    position: relative;
    z-index: 2;
    min-height: var(--mspoc-topbar-height);
    padding: 0;
    background: var(--tblr-bg-surface);
}

.app-topbar-inner {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: var(--mspoc-topbar-height);
}

.app-brand img {
    display: block;
    width: 150px;
    height: auto;
}

.topbar-space {
    flex: 1 1 auto;
    min-width: 1rem;
}

.app-status-badges {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.app-user-menu {
    margin-left: .55rem;
    margin-right: .75rem;
}

/* Klick kopiert den Inhalt (app-copy.js, 09.10.2026). */
.mspoc-copy-on-click {
    cursor: copy;
}

/* Hilfsklasse min-w-0 (09.10.2026). Rund zehn Stellen setzen sie (Dashboard-
   Kacheln, Listen, Rueckrufliste), damit ein Flex-Kind schmaler werden darf
   als sein Inhalt - aber weder Bootstrap noch Tabler bringen sie mit. Sie
   wirkte deshalb nie: Die Befehlszeile der Kachel "Toolbox starten" lief
   trotz text-truncate ueber den Kartenrand hinaus. */
.min-w-0 {
    min-width: 0 !important;
}

.status-icon-badge {
    position: relative;
    overflow: visible;
    color: var(--mspoc-accent);
}

.status-icon-badge.is-missed {
    color: var(--tblr-red);
}

.status-icon-badge.is-missed > span {
    background: var(--tblr-red);
}

.status-icon-badge.is-whatsapp > span {
    background: var(--tblr-green);
}

.status-icon-badge > span {
    position: absolute;
    top: -.55rem;
    right: -.45rem;
    display: inline-grid;
    min-width: 1.15rem;
    height: 1.15rem;
    place-items: center;
    padding: 0 .25rem;
    border-radius: 999px;
    background: var(--tblr-primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
}

.app-search {
    position: relative;
    flex: 0 1 390px;
    min-width: 260px;
}

.app-search .form-control {
    padding-right: 6.25rem;
    border-radius: 999px;
}

/* Schilder rechts im Suchfeld: Sitzungszeit, davor der Toolbox-PIN
   (08.10.2026, seit dem Abend bei jeder Breite). Die Huelle sitzt absolut, die Schilder darin
   reihen sich - so braucht der PIN keinen geratenen Abstand zur Sitzungszeit. */
.app-search-chips {
    position: absolute;
    top: 50%;
    right: .35rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transform: translateY(-50%);
}

.session-chip,
.app-search-pin {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    white-space: nowrap;
}

.session-chip {
    max-width: 5.8rem;
    background: var(--mspoc-session-bg);
    color: var(--mspoc-session-color);
}

.app-search-pin {
    gap: .25rem;
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
    font-variant-numeric: tabular-nums;
}

/* Mit PIN waechst der freie Rand des Feldes, damit Getipptes nicht unter
   die Schilder laeuft; die Mindestbreite haelt dann noch etwa 20 Zeichen
   frei (am Handy hoechstens die ganze Zeile). */
.app-search.has-toolbox-pin {
    min-width: min(20rem, 100%);
}

.app-search.has-toolbox-pin .form-control {
    padding-right: 11.75rem;
}

.global-search-panel {
    position: absolute;
    top: calc(100% + .45rem);
    right: 0;
    z-index: 1100;
    width: min(34rem, calc(100vw - 1.5rem));
    max-height: min(28rem, calc(100vh - 7rem));
    overflow: auto;
    border: 1px solid var(--tblr-border-color);
    border-radius: 8px;
    background: var(--tblr-bg-surface-secondary);
    box-shadow: var(--tblr-box-shadow-lg);
}

.global-search-state {
    padding: .85rem 1rem;
    font-size: .875rem;
}

.global-search-results {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: .55rem;
}

.global-search-result {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-width: 0;
    padding: .65rem .72rem;
    border: 1px solid rgba(24, 36, 51, .08);
    border-radius: 8px;
    background: var(--tblr-bg-surface);
    color: inherit;
    text-align: left;
}

.global-search-result:hover,
.global-search-result:focus-visible,
.global-search-result.active {
    border-color: rgba(32, 107, 196, .24);
    box-shadow: 0 .4rem 1.2rem rgba(24, 36, 51, .08);
    outline: 0;
}

.global-search-card-head {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    justify-content: space-between;
}

/* Kontaktbild vor dem Namen (21.10.2026): Foto aus M365 oder Initialen-Kachel. */
.global-search-avatar {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--tblr-border-radius, 4px);
    object-fit: cover;
}

.global-search-card-head .global-search-main {
    flex: 1 1 auto;
    min-width: 0;
}

.global-search-main {
    display: flex;
    flex-direction: column;
    gap: .06rem;
    min-width: 0;
}

.global-search-title,
.global-search-subtitle {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-title {
    font-weight: 700;
    line-height: 1.25;
    color: var(--tblr-body-color);
}

.global-search-subtitle {
    color: var(--tblr-secondary);
    font-size: .78rem;
    line-height: 1.25;
}

.global-search-sources {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: .2rem;
    justify-content: flex-end;
    max-width: 13rem;
}

.global-search-source {
    flex: 0 0 auto;
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-status-badge {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    height: 1.35rem;
    justify-content: center;
    padding: 0;
    width: 1.35rem;
}

.global-search-phone-list {
    display: flex;
    flex-direction: column;
    gap: .28rem;
}

.global-search-phone-row,
.global-search-mail-row,
.global-search-empty-phone {
    display: grid;
    grid-template-columns: 1.35rem minmax(0, 1fr);
    gap: .4rem;
    align-items: center;
    min-height: 1.85rem;
    padding: .24rem .5rem;
    border: 1px solid rgba(24, 36, 51, .18);
    border-radius: 6px;
    background: var(--tblr-bg-surface-secondary);
    color: inherit;
    font: inherit;
    text-align: left;
}

.global-search-phone-row:hover,
.global-search-phone-row:focus-visible,
.global-search-mail-row:hover,
.global-search-mail-row:focus-visible {
    border-color: rgba(47, 179, 68, .36);
    background: #edf9f1;
    outline: 0;
}

.global-search-phone-row i,
.global-search-mail-row i {
    color: var(--tblr-secondary);
    text-align: center;
}

.global-search-mail-row i {
    color: var(--tblr-blue);
}

.global-search-phone-row[data-phone-kind="mobile"] i {
    color: var(--tblr-blue);
}

.global-search-phone-row[data-phone-kind="business"] i {
    color: var(--tblr-indigo);
}

.global-search-phone-row[data-phone-kind="home"] i {
    color: var(--tblr-green);
}

.global-search-phone-row[data-phone-kind="fax"] i {
    color: var(--tblr-orange);
}

.global-search-phone-row span,
.global-search-mail-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-empty-phone {
    display: block;
    color: var(--tblr-secondary);
    font-size: .8rem;
}

.global-search-preview {
    display: grid;
    gap: .18rem;
    padding: .38rem .5rem;
    border-left: 2px solid rgba(32, 107, 196, .22);
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
}

.global-search-preview span {
    color: var(--tblr-secondary);
    font-size: .75rem;
    line-height: 1.1;
}

.global-search-preview p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--tblr-body-color);
    font-size: .84rem;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.global-search-card-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: -.1rem;
}

.global-search-open {
    gap: .25rem;
}

.app-sidebar {
    position: relative;
    z-index: 1;
    border-bottom: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface);
}

.side-nav {
    padding-block: .45rem;
}

.side-nav-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
}

/* Fokusring im Menue nach innen (11.10.2026, Thomas: "unscharf" am iPhone).
   Tabler zeichnet ihn aussen (0 0 0 .25rem). Safari am iPhone setzt den Fokus
   schon beim Antippen, und die seitlich scrollbare Menuezeile ist genau so
   hoch wie die Knoepfe: oben und unten abgeschnitten blieb links und rechts
   ein eckiger hellblauer Streifen. Innen bleibt er fuer die Tastatur sichtbar. */
.side-nav-main .nav-link:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(var(--tblr-primary-rgb), .35);
}

.workspace {
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: 1rem .75rem;
}

.workspace .page-header {
    margin-bottom: .85rem;
}

.app-toast-container {
    position: fixed;
    top: 5rem;
    right: 1rem;
    z-index: 1080;
    max-width: min(24rem, calc(100vw - 2rem));
}

.mspoc-row-flash {
    animation: mspoc-row-flash 2.4s ease-out;
}

.core-install-summary {
    display: grid;
    gap: .75rem;
}

.core-install-summary-head {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    align-items: baseline;
}

.core-install-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: .65rem;
    margin: 0;
}

.core-install-summary-grid > div {
    min-width: 0;
}

.core-install-summary-grid dt {
    margin-bottom: .15rem;
    color: var(--tblr-secondary);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.core-install-summary-grid dd {
    margin-bottom: 0;
}

.core-install-summary-grid code {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@keyframes mspoc-row-flash {
    0% {
        background-color: #eaf9ef;
    }

    100% {
        background-color: transparent;
    }
}

.maintenance-overlay-active {
    overflow: hidden;
}

.maintenance-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(2px);
}

.maintenance-overlay-panel {
    width: min(38rem, 100%);
    padding: 1rem 1rem 1.35rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: var(--tblr-box-shadow-lg);
    background: var(--tblr-bg-surface);
    text-align: center;
}

.maintenance-overlay-visual,
.login-maintenance {
    position: relative;
    overflow: hidden;
    border-radius: var(--tblr-border-radius);
}

.maintenance-overlay-image {
    display: block;
    width: 100%;
    height: auto;
}

.maintenance-overlay-visual {
    margin-bottom: 1.1rem;
}

.maintenance-overlay-label,
.login-maintenance-label {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    box-shadow: var(--tblr-box-shadow);
    color: var(--mspoc-accent);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.maintenance-overlay-eyebrow {
    margin-bottom: .35rem;
    color: var(--tblr-secondary);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.maintenance-overlay-panel h2 {
    margin-bottom: .45rem;
}

.maintenance-overlay-message {
    margin-bottom: 0;
}

.maintenance-overlay-meta {
    margin-top: .9rem;
    color: var(--tblr-secondary);
    font-size: .875rem;
}

.user-card-header {
    gap: .75rem;
    align-items: flex-end;
    min-height: 3.25rem;
    padding: .5rem 1rem 0;
}

.user-card-header .card-tabs {
    min-width: 0;
}

.user-card-header .nav-tabs {
    border-bottom: 0;
}

.user-card-header .nav-tabs .nav-link {
    margin-bottom: -1px;
}

.user-card-header .nav-tabs .nav-link.active {
    font-weight: 500;
}

.user-card-header .btn {
    margin-bottom: .5rem;
}

.user-card-header + .card-body .card-table thead th {
    background: var(--tblr-bg-surface);
    font-weight: 600;
}

.user-menu-button,
.session-chip {
    transition: box-shadow .15s ease, color .15s ease, background-color .15s ease;
}

.user-menu-button[data-state="online"] {
    box-shadow: inset 0 0 0 2px rgba(47, 179, 68, .22);
}

.user-menu-button[data-state="busy"] {
    box-shadow: inset 0 0 0 2px rgba(245, 159, 0, .34);
}

.user-menu-button[data-state="away"] {
    box-shadow: inset 0 0 0 2px rgba(32, 107, 196, .24);
}

.session-chip[data-state="busy"] {
    background: #fff4de;
    color: #8a5a00;
}

.session-chip[data-state="away"] {
    background: #eaf3ff;
    color: #255986;
}

.session-chip[data-state="offline"] {
    background: #f1f3f5;
    color: #667085;
}

.login-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 1.5rem;
}

.login-card {
    width: min(100%, 420px);
}

.login-logo {
    display: block;
    width: min(320px, 100%);
    height: auto;
    margin: 0 auto 1rem;
}

.login-maintenance {
    margin-bottom: 1rem;
    background: #f6faff;
}

.login-maintenance img {
    display: block;
    width: 100%;
    height: auto;
}

.error-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 1.5rem;
    background: var(--tblr-bg-surface-secondary);
}

.error-panel {
    width: min(46rem, 100%);
    overflow: hidden;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: var(--tblr-box-shadow-lg);
    background: var(--tblr-bg-surface);
}

.error-visual {
    position: relative;
    background: #f6faff;
}

.error-visual img {
    display: block;
    width: 100%;
    height: auto;
}

.error-visual-label {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    box-shadow: var(--tblr-box-shadow);
    color: var(--mspoc-accent);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.error-content {
    padding: 1.35rem;
}

.error-eyebrow {
    margin-bottom: .35rem;
    color: var(--tblr-secondary);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.error-message,
.error-hint {
    color: var(--tblr-secondary);
}

.error-meta {
    display: grid;
    gap: .65rem;
    margin: 1rem 0;
}

.error-meta > div {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: .75rem;
    align-items: baseline;
}

.error-meta dt {
    color: var(--tblr-secondary);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.error-meta dd {
    min-width: 0;
    margin: 0;
}

.error-meta code {
    white-space: normal;
    word-break: break-word;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.error-debug {
    margin: 0 1.35rem 1.35rem;
    padding: 1rem;
    border-radius: var(--tblr-border-radius);
    background: #101828;
    color: #e4e7ec;
}

.error-debug h2 {
    margin-bottom: .75rem;
    font-size: .95rem;
}

.error-debug pre {
    margin: 0;
    overflow: auto;
    color: inherit;
    white-space: pre-wrap;
}

.totp-qr {
    width: min(220px, 100%);
    height: auto;
    padding: .75rem;
}

.log-viewer {
    max-height: 32rem;
    margin: 0;
    padding: 1rem;
    overflow: auto;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background: #101828;
    color: #e4e7ec;
    font-size: .8125rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.mspoc-chart-host {
    position: relative;
    min-width: 0;
    min-height: 16rem;
    width: 100%;
}

.mspoc-chart-surface {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mspoc-chart-host[data-mspoc-chart-state="fallback"] .mspoc-chart-surface {
    display: none;
}

.mspoc-chart-host[data-mspoc-chart-state="empty"] .mspoc-chart-surface {
    display: none;
}

.dashboard-kpi-chart-card .card-body {
    padding-block: .9rem;
}

.dashboard-kpi-chart-grid {
    display: grid;
    grid-template-columns: minmax(8.5rem, auto) minmax(10rem, 1fr);
    gap: 1rem;
    align-items: center;
}

.dashboard-kpi-chart-host {
    min-height: 4.8rem;
}

.mspoc-chart-fallback {
    display: grid;
    gap: .75rem;
    padding-bottom: .75rem;
}

.mspoc-chart-fallback-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
    align-items: center;
}

.mspoc-chart-fallback-row .progress {
    grid-column: 1 / -1;
}

.customer-filter-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: flex-end;
}

/* Kundenliste wie die MSP-Uebersicht (06.10.2026): Kopf mit Suche und
   Filter, ruhige Zeilen, Klick oeffnet die Kundenkarte. */
.customer-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.customer-list-tools {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.customer-list-tools .input-icon {
    width: 260px;
}

.customer-filter-menu {
    width: 18rem;
}

.customer-table {
    min-width: 56rem;
}

.customer-table tr.customer-row {
    cursor: pointer;
}

/* Reiterleiste der Kundenkarte wie in der MSP-Ansicht: fest unter dem
   Kopf, weiss, etwas Luft nach oben; scrollt nicht mit. */
.kundenkarte-reiterleiste {
    flex: 0 0 auto;
    padding-top: .9rem;
    background: var(--tblr-bg-surface);
    /* Ausserhalb einer .card fehlen die Variablen fuer den Rand der
       card-header - die Linie unter den Reitern daher ausdruecklich. */
    border-bottom: 1px solid var(--tblr-border-color);
}

.kundenkarte-reiterleiste .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
}

.kundenkarte-reiterleiste .nav-item {
    flex: 0 0 auto;
}

.customer-name,
.customer-muted {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mappe-lane-card {
    display: flex;
    flex-direction: column;
    min-height: 18rem;
}

.mappe-lane-card:not(.mappe-lane-card-sm) {
    height: calc(100vh - 8rem);
}

.mappe-lane-card-sm {
    height: 28rem;
}

.mappe-list-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
}

.mappe-card-stack {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: .75rem;
}

.mappe-list-item {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    overflow: hidden;
    background: var(--tblr-bg-surface);
}

.mappe-list-button {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    width: 100%;
    min-height: 7.1rem;
    padding: .8rem .95rem;
    font: inherit;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}

.mappe-list-button:hover,
.mappe-list-button:focus-visible {
    background: var(--tblr-bg-surface-secondary);
    outline: 0;
}

.mappe-card-head,
.mappe-card-body,
.mappe-card-row,
.mappe-card-meta {
    display: flex;
    width: 100%;
    min-width: 0;
}

.mappe-card-head {
    align-items: center;
    gap: .75rem;
    padding-bottom: .62rem;
    border-bottom: 1px solid var(--tblr-border-color);
}

.mappe-card-source {
    flex: 0 0 auto;
    width: 2.15rem;
    height: 2.15rem;
}

.mappe-card-party {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .08rem;
    min-width: 0;
    line-height: 1.25rem;
}

.mappe-card-row {
    align-items: center;
    gap: .75rem;
}

.mappe-card-row .badge {
    flex: 0 0 auto;
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mappe-card-customer {
    flex: 1 1 auto;
    font-weight: 600;
}

.mappe-card-contact {
    flex: 1 1 auto;
}

.mappe-card-body {
    flex-direction: column;
    gap: .12rem;
    line-height: 1.25rem;
}

.mappe-card-title {
    font-weight: 700;
}

.mappe-card-title,
.mappe-card-customer,
.mappe-card-contact,
.mappe-card-preview,
.mappe-card-meta-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mappe-card-meta {
    margin-top: .25rem;
    align-items: center;
    gap: .75rem;
    font-size: .75rem;
    justify-content: space-between;
}

.mappe-card-meta-text {
    flex: 1 1 auto;
}

.mappe-card-time {
    flex: 0 0 auto;
    font-size: .75rem;
    white-space: nowrap;
}

.vorgang-modal-loading {
    display: flex;
    align-items: center;
    min-height: 8rem;
    color: var(--tblr-secondary);
}

.mspoc-modal-open,
.vorgang-modal-open {
    overflow: hidden;
}

.modal-backdrop.show.mspoc-modal-backdrop,
.modal-backdrop.show.vorgang-modal-backdrop,
.modal-backdrop.show {
    opacity: .58;
    backdrop-filter: blur(2px);
}

.mspoc-workspace-modal .modal-dialog {
    width: min(95vw, 1240px);
    max-width: min(95vw, 1240px);
    height: calc(100vh - 2rem);
    max-height: calc(100vh - 2rem);
    margin: 1rem auto;
}

.mspoc-workspace-modal .modal-content {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.mspoc-workspace-modal .modal-header {
    flex: 0 0 auto;
    min-height: 3.75rem;
    padding: .85rem 1rem;
}

.mspoc-workspace-modal .modal-title {
    font-size: 1rem;
}

.mspoc-workspace-modal .modal-content > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mspoc-workspace-modal .modal-footer {
    flex: 0 0 auto;
    min-height: 3rem;
    padding: .45rem 1rem;
}

.vorgang-modal-section {
    padding: .7rem 0;
    border-bottom: 1px solid var(--tblr-border-color);
}

.vorgang-modal-section:first-child {
    padding-top: 0;
}

.vorgang-modal-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.vorgang-modal-section h3 {
    margin: 0 0 .6rem;
    font-size: .95rem;
    font-weight: 700;
}

.vorgang-modal-section-head {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .85rem;
}

.vorgang-modal-section-head h3 {
    margin: 0;
}

.vorgang-modal-workbar {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    padding-top: 0;
    padding-bottom: .55rem;
}

.vorgang-workbar-main {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-width: 0;
}

.vorgang-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.vorgang-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: flex-end;
    margin-left: auto;
}

.vorgang-status-line {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .85rem;
    color: var(--tblr-secondary);
    font-size: .76rem;
    line-height: 1.25;
}

.vorgang-mappe-section {
    padding-top: .8rem;
}

.vorgang-control-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: .75rem;
    margin-bottom: .55rem;
}

.vorgang-control-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.vorgang-control-field > span {
    color: var(--tblr-secondary);
    font-size: .7rem;
}

.vorgang-team-choices,
.vorgang-control-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.vorgang-team-choices .btn,
.vorgang-control-chips .btn {
    padding: .25rem .5rem;
    line-height: 1.15;
}

.vorgang-form-row {
    margin-bottom: .55rem;
}

.vorgang-form-row .form-label {
    margin-bottom: .25rem;
}

.vorgang-time-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
}

.vorgang-time-main {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: flex-end;
}

.vorgang-time-main > div {
    min-width: 8.5rem;
    padding: .45rem .7rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface-secondary);
}

.vorgang-time-main > div > span {
    display: block;
    color: var(--tblr-secondary);
    font-size: .7rem;
}

.vorgang-time-main strong {
    display: block;
    font-size: 1.12rem;
    line-height: 1.15;
}

.vorgang-time-main [data-vorgang-live-duration] {
    color: var(--tblr-success);
    font-variant-numeric: tabular-nums;
}

.vorgang-time-billable {
    min-width: 10.75rem;
}

.vorgang-time-adjust {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.vorgang-time-adjust .btn {
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    line-height: 1;
}

.vorgang-time-adjust strong {
    min-width: 5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.vorgang-time-main small {
    display: block;
    margin-top: .15rem;
    font-size: .68rem;
    line-height: 1.1;
}

.vorgang-time-dates {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    color: var(--tblr-secondary);
    font-size: .74rem;
    text-align: right;
}

.vorgang-modal-footer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    width: 100%;
    color: var(--tblr-secondary);
    font-size: .76rem;
}

.vorgang-save-state {
    margin-left: auto;
}

.mspoc-customer-picker {
    position: relative;
}

.mspoc-customer-display,
.mspoc-customer-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .65rem;
    align-items: center;
}

.mspoc-customer-display-with-clear {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.mspoc-customer-current,
.mspoc-customer-query-wrap {
    min-width: 0;
    position: relative;
}

.mspoc-customer-current {
    margin-bottom: .35rem;
    line-height: 1.25;
}

.mspoc-customer-search:not(.d-none) {
    position: relative;
    z-index: 30;
}

.mspoc-customer-results {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 18rem;
    overflow: auto;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface);
    box-shadow: var(--tblr-box-shadow);
}

.mspoc-customer-result {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    width: 100%;
    padding: .65rem .85rem;
    border: 0;
    border-bottom: 1px solid var(--tblr-border-color);
    background: transparent;
    color: inherit;
    text-align: left;
}

.mspoc-customer-result:last-child {
    border-bottom: 0;
}

.mspoc-customer-result:hover,
.mspoc-customer-result:focus-visible,
.mspoc-customer-result.is-active {
    background: var(--tblr-bg-surface-secondary);
    outline: 0;
}

.mspoc-customer-result span {
    color: var(--tblr-secondary);
    font-size: .78rem;
}

.mspoc-customer-empty {
    padding: .65rem .85rem;
    color: var(--tblr-secondary);
    font-size: .82rem;
}

.vorgang-merge-results {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    z-index: 1080;
    max-height: 18rem;
    overflow: auto;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface);
    box-shadow: var(--tblr-box-shadow);
}

.vorgang-merge-results .list-group-item {
    background: var(--tblr-bg-surface);
}

.vorgang-merge-results .list-group-item-action:hover,
.vorgang-merge-results .list-group-item-action:focus-visible {
    background: var(--tblr-bg-surface-secondary);
}

.vorgang-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem 1rem;
    margin: 0;
}

.vorgang-modal-grid dt {
    margin-bottom: .15rem;
    color: var(--tblr-secondary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.vorgang-modal-grid dd {
    margin: 0;
}

.vorgang-modal-description {
    margin-top: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface-secondary);
}

.vorgang-modal-elements {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.vorgang-modal-history {
    max-height: min(12rem, 30vh);
    overflow: auto;
    overscroll-behavior: contain;
}

.vorgang-modal-element {
    display: grid;
    gap: .75rem;
    align-items: start;
    padding: .55rem 0;
    border-bottom: 1px solid var(--tblr-border-color);
}

.vorgang-modal-element {
    grid-template-columns: minmax(0, 1fr) auto;
}

.vorgang-modal-history-item {
    padding: .36rem 0;
    background: transparent;
}

.vorgang-modal-history-main {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    min-width: 0;
}

.vorgang-modal-history-message {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .82rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.vorgang-modal-history-meta {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: .35rem .8rem;
    font-size: .74rem;
    line-height: 1.25;
}

.vorgang-modal-element:last-child {
    border-bottom: 0;
}

.vorgang-modal-element-title {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.vorgang-modal-element-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .65rem;
    align-items: center;
    margin-top: .65rem;
}

.vorgang-modal-element-move {
    display: inline-flex;
    flex: 1 1 28rem;
    gap: .45rem;
    align-items: center;
    min-width: min(100%, 20rem);
}

.vorgang-modal-element-merge {
    flex: 1 1 18rem;
    min-width: min(18rem, 100%);
    margin: 0;
}

.vorgang-modal-element-actions .btn {
    white-space: nowrap;
}

.vorgang-modal-element-note-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    justify-content: space-between;
    margin-top: .45rem;
}

.vorgang-modal-element-main,
.vorgang-modal-element-time {
    min-width: 0;
}

.vorgang-modal-element-time {
    text-align: right;
}

.pbx-live-note-panel {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1500;
    width: min(28rem, calc(100vw - 2rem));
    max-height: min(80vh, 48rem);
    display: flex;
    flex-direction: column;
    gap: .75rem;
    overflow-y: auto;
    padding: .25rem;
    pointer-events: none;
}

.pbx-live-note-card {
    border: 1px solid var(--tblr-border-color, #dce1e7);
    border-radius: 8px;
    background: var(--tblr-bg-surface, #fff);
    box-shadow: 0 .75rem 2rem rgba(24, 36, 51, .18);
    padding: 1rem;
    pointer-events: auto;
}

.pbx-live-note-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
    cursor: move;
}

.pbx-live-note-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.pbx-live-note-head h3 {
    margin: .15rem 0 .1rem;
    font-size: 1rem;
}

.pbx-live-note-head p {
    margin: 0;
    color: var(--tblr-secondary, #667085);
    font-size: .875rem;
}

.pbx-live-note-meta,
.pbx-live-note-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
    color: var(--tblr-secondary, #667085);
    font-size: .8125rem;
}

.pbx-live-note-foot {
    margin-top: .45rem;
    margin-bottom: 0;
}

.pbx-live-note-window-page {
    min-height: 100vh;
    background: var(--tblr-bg-surface-secondary);
}

.pbx-live-note-window {
    min-height: 100vh;
    padding: .75rem;
}

.pbx-live-note-window .card {
    min-height: calc(100vh - 1.5rem);
}

.pbx-live-note-window-textarea {
    min-height: 16rem;
    resize: vertical;
}

@media (max-width: 1050px) {
    .app-topbar-inner {
        flex-wrap: wrap;
        gap: .65rem .45rem;
        padding-block: .75rem;
    }

    /* Quer am Handy und auf schmalen Bildschirmen: die Suche bleibt in der
       Zeile hinter dem Benutzerknopf und nimmt den Rest (08.10.2026). Erst
       wenn dafuer keine 14rem mehr frei sind, rutscht sie in eine eigene
       Zeile. Die Trefferliste hat ihre eigene Breite (.global-search-panel). */
    .topbar-space {
        display: none;
    }

    .app-search {
        flex: 1 1 14rem;
        min-width: 14rem;
        max-width: none;
        margin-left: 0;
        order: 10;
    }
}

@media (max-width: 920px) {
    .app-brand img {
        width: 142px;
    }

    .workspace {
        padding: 1rem .75rem;
    }

    .mappe-list-scroll {
        max-height: none;
    }

    .mappe-lane-card:not(.mappe-lane-card-sm) {
        height: auto;
    }

    .mappe-lane-card-sm {
        height: auto;
    }

    .vorgang-modal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-kpi-chart-grid {
        grid-template-columns: 1fr;
    }

    .customer-filter-actions {
        justify-content: flex-start;
    }
}

.dashboard-widget-card {
    min-height: 6.65rem;
}

/* The PBX callback basket is an operational list. Keep its controls readable
   instead of letting a user-selected small dashboard tile squeeze the rows. */
[data-dashboard-widget$=":missed_calls"] .list-group {
    max-height: min(34rem, calc(100vh - 16rem));
    overflow-y: auto;
}

[data-dashboard-widget$=":missed_calls"] .list-group-item {
    display: grid !important;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
}

[data-dashboard-widget$=":missed_calls"] .list-group-item > .flex-fill {
    min-width: 0;
}

[data-dashboard-widget$=":missed_calls"] .dashboard-list-subtitle-wrap {
    overflow-wrap: anywhere;
    white-space: pre-line;
}

[data-dashboard-widget$=":missed_calls"] .list-group-item > .flex-fill hr {
    margin-block: .45rem;
}

[data-dashboard-widget$=":missed_calls"] .list-group-item .btn {
    min-width: 4.7rem;
}

[data-dashboard-widget="mspoc_ai_assistant:ki_meldungen"] .list-group,
[data-dashboard-widget="mspoc_service_operations:today_important"] .list-group,
[data-dashboard-widget="mspoc_base_mappen:waiting_folders"] .list-group,
[data-dashboard-widget="vorgaenge:waiting_folders"] .list-group {
    max-height: min(34rem, calc(100vh - 16rem));
    overflow-y: auto;
}

[data-dashboard-widget="mspoc_ai_assistant:ki_meldungen"] .list-group-item,
[data-dashboard-widget="mspoc_service_operations:today_important"] .list-group-item,
[data-dashboard-widget="mspoc_base_mappen:waiting_folders"] .list-group-item,
[data-dashboard-widget="vorgaenge:waiting_folders"] .list-group-item {
    display: grid !important;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
}

[data-dashboard-widget="mspoc_ai_assistant:ki_meldungen"] .list-group-item > .flex-fill,
[data-dashboard-widget="mspoc_service_operations:today_important"] .list-group-item > .flex-fill,
[data-dashboard-widget="mspoc_base_mappen:waiting_folders"] .list-group-item > .flex-fill,
[data-dashboard-widget="vorgaenge:waiting_folders"] .list-group-item > .flex-fill {
    min-width: 0;
}

[data-dashboard-widget="mspoc_ai_assistant:ki_meldungen"] .list-group-item > .flex-fill hr,
[data-dashboard-widget="mspoc_service_operations:today_important"] .list-group-item > .flex-fill hr,
[data-dashboard-widget="mspoc_base_mappen:waiting_folders"] .list-group-item > .flex-fill hr,
[data-dashboard-widget="vorgaenge:waiting_folders"] .list-group-item > .flex-fill hr {
    margin-block: .45rem;
}

[data-dashboard-widget="mspoc_ai_assistant:ki_meldungen"] .list-group-item form .btn,
[data-dashboard-widget="mspoc_service_operations:today_important"] .list-group-item form .btn {
    min-width: 5.25rem;
}

/* Kachel-Item mit gerendertem Markdown (KI-Meldungen): wie im Chat, nur kompakter. */
.dashboard-item-html p { margin-bottom: .35rem; }
.dashboard-item-html p:last-child, .dashboard-item-html ul:last-child { margin-bottom: 0; }
.dashboard-item-html ul { padding-left: 1.1rem; margin-bottom: .35rem; }
.dashboard-item-html .ai-markdown-table-wrap { overflow-x: auto; margin: .35rem 0 .5rem; }
.dashboard-item-html .ai-markdown-table { width: 100%; margin: 0; font-size: .8rem; white-space: normal; }
.dashboard-item-html .ai-markdown-table th, .dashboard-item-html .ai-markdown-table td { padding: .3rem .4rem; vertical-align: top; }

.pbx-missed-flyout {
    width: min(34rem, calc(100vw - 1.5rem));
    padding: 0;
    overflow: hidden;
}

.pbx-missed-flyout .dropdown-header {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--tblr-border-color, #dce1e7);
}

.pbx-missed-flyout-list {
    max-height: min(28rem, calc(100vh - 10rem));
    overflow-y: auto;
}

.pbx-missed-flyout-row {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--tblr-border-color, #dce1e7);
}

.pbx-missed-flyout-row:last-child {
    border-bottom: 0;
}

.pbx-missed-flyout-actions {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.pbx-missed-flyout-actions .btn {
    min-width: 4.7rem;
}

.pbx-missed-flyout-footer {
    display: block;
    padding: .65rem 1rem;
    border-top: 1px solid var(--tblr-border-color, #dce1e7);
    text-align: center;
}

.m365-mail-modal-content { white-space: pre-line; line-height: 1.55; }
.m365-mail-modal-block { border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); padding: 1rem; }
.m365-mail-modal-subject { font-size: 1.2rem; line-height: 1.35; font-weight: 700; }

.dashboard-widget-size-sm .card-body {
    padding-block: .85rem;
}

.dashboard-widget-size-sm .h1 {
    font-size: 1.45rem;
}

.dashboard-widget-size-xl .card-body,
.dashboard-widget-size-full .card-body {
    min-height: 7.35rem;
}

.dashboard-widget-chart-card {
    container-type: inline-size;
    height: 6.65rem;
    min-height: 6.65rem;
    overflow: visible;
}

.dashboard-widget-chart-card .card-body {
    height: 100%;
    min-height: 0;
}

.dashboard-widget-chart-card .dashboard-kpi-chart-grid {
    grid-template-columns: minmax(0, 1fr) minmax(4.5rem, 30%);
    align-items: end;
    gap: clamp(.65rem, 4cqi, 1.25rem);
    height: 100%;
}

.dashboard-widget-chart-card .dashboard-kpi-chart-grid > :first-child {
    min-width: 0;
}

/* Nur bei sichtbarem Diagramm (nicht sm): dort teilt sich die Zeile den
   schmalen Platz neben dem Diagramm-Canvas und braucht eigenes Umbruch-
   verhalten. Bei "sm" rendert dashboard.php dieselbe Kachel wie eine
   einfache Zahlen-Kachel und die Zeile soll auch genauso aussehen. */
.dashboard-widget-chart-card:not(.dashboard-widget-size-sm) [data-dashboard-widget-direction] {
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.25;
}

.dashboard-widget-chart-card .dashboard-kpi-chart-host {
    align-self: end;
    justify-self: end;
    height: clamp(3rem, 20cqi, 4.15rem);
    min-height: 0;
    width: 100%;
}

/* dashboard.php rendert bei "sm" (Diagramm ohnehin ausgeblendet) seit
   19.09.2026 dasselbe Markup wie eine einfache Zahlen-Kachel
   (card-body d-flex align-items-center) statt des Chart-Grids - jeder
   CSS-Nachbau der Zentrierung auf dem Grid hinkte dem Original sichtbar
   hinterher. Die Kachel braucht dadurch keine eigene sm-Grid-Regel mehr;
   nur die Kartenhoehe bleibt unten fuer den Zeilen-Stretch wie bei den
   einfachen Kacheln relevant. */
.dashboard-widget-chart-card.dashboard-widget-size-sm {
    height: auto;
    min-height: 6.65rem;
}

[data-dashboard-widget="mspoc_base_agent:backup_status"] [data-dashboard-widget-direction] {
    white-space: nowrap;
}

/* Beide technischen Statuskarten teilen dasselbe Dreizeilen-Raster: so
   bleiben Titel, Kennzahl und Kurzstatus in jeder Widgetbreite deckungsgleich.
   Nur solange das Diagramm tatsaechlich sichtbar ist (Kachelgroesse steuert
   der Nutzer selbst) - bei Groesse "sm" blendet .dashboard-kpi-chart-host
   das Diagramm ohnehin aus (siehe oben), dann soll die Textdarstellung
   wieder dem normalen Fluss der einfachen Zahlen-Kacheln ohne Diagramm
   entsprechen, statt mittig auf eine nicht mehr vorhandene Chart-Hoehe
   ausgerichtet zu bleiben. */
[data-dashboard-widget="mspoc_base_agent:device_distribution"]:not(.dashboard-widget-size-sm) .dashboard-kpi-chart-grid > :first-child,
[data-dashboard-widget="mspoc_base_agent:backup_status"]:not(.dashboard-widget-size-sm) .dashboard-kpi-chart-grid > :first-child {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
}

[data-dashboard-widget="mspoc_base_agent:device_distribution"]:not(.dashboard-widget-size-sm) .dashboard-kpi-chart-grid > :first-child > .subheader,
[data-dashboard-widget="mspoc_base_agent:backup_status"]:not(.dashboard-widget-size-sm) .dashboard-kpi-chart-grid > :first-child > .subheader {
    align-self: start;
}

[data-dashboard-widget="mspoc_base_agent:device_distribution"]:not(.dashboard-widget-size-sm) .dashboard-kpi-chart-grid > :first-child > .h1,
[data-dashboard-widget="mspoc_base_agent:backup_status"]:not(.dashboard-widget-size-sm) .dashboard-kpi-chart-grid > :first-child > .h1 {
    align-self: center;
    margin-bottom: 0 !important;
}

[data-dashboard-widget="mspoc_base_agent:device_distribution"] [data-dashboard-widget-direction],
[data-dashboard-widget="mspoc_base_agent:backup_status"] [data-dashboard-widget-direction] {
    align-self: end;
}

.dashboard-widget-chart-card.dashboard-widget-size-lg,
.dashboard-widget-chart-card.dashboard-widget-size-xl,
.dashboard-widget-chart-card.dashboard-widget-size-full {
    height: 7.25rem;
    min-height: 7.25rem;
}

.dashboard-widget-chart-card.dashboard-widget-size-lg .dashboard-kpi-chart-host,
.dashboard-widget-chart-card.dashboard-widget-size-xl .dashboard-kpi-chart-host,
.dashboard-widget-chart-card.dashboard-widget-size-full .dashboard-kpi-chart-host {
    height: 4.75rem;
}

@container (max-width: 21rem) {
    .dashboard-widget-chart-card .dashboard-kpi-chart-grid {
        grid-template-columns: minmax(0, 1fr) minmax(3.5rem, 26%);
        gap: .5rem;
    }

    .dashboard-widget-chart-card [data-dashboard-widget-direction] { font-size: .8125rem; }

    .dashboard-widget-chart-card .dashboard-kpi-chart-host {
        display: block;
        height: clamp(2.65rem, 18cqi, 3.4rem);
        min-height: 0;
        width: 100%;
    }
}

@container (max-width: 15rem) {
    .dashboard-widget-chart-card .dashboard-kpi-chart-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-widget-chart-card .dashboard-kpi-chart-host {
        display: none;
    }
}

@media (max-width: 520px) {
    .app-status-badges .header-mobile-flyout {
        position: fixed !important;
        right: .75rem !important;
        left: .75rem !important;
        width: auto !important;
        max-width: none;
        margin: 0 !important;
        transform: none !important;
    }

    .app-status-badges .header-mobile-flyout .pbx-missed-flyout-list {
        max-height: var(--header-mobile-flyout-list-max-height, calc(100dvh - 8rem));
    }

    .app-topbar-inner {
        gap: .6rem .35rem;
    }

    /* Hochkant ohne Logo (08.10.2026): Die Knoepfe ruecken in die erste
       Zeile, der Block oben wird eine Zeile flacher. Zurueck geht es ueber
       "Dashboard" im Menue. */
    .app-brand {
        display: none;
    }

    .app-user-menu {
        margin-left: auto;
    }

    .status-icon-badge {
        width: 2rem;
        height: 2rem;
    }

    .app-search {
        flex-basis: 100%;
        max-width: none;
        margin-left: 0;
    }

    .global-search-panel {
        left: 0;
        right: 0;
        width: auto;
    }

    /* Hochkant: das Menue als Zeile aus Symbolknoepfen (08.10.2026), so gross
       wie die Statusknoepfe darueber - ein Tipp direkt aufs Ziel statt erst
       den Menueknopf. Passen nicht alle hinein, laesst sich die Zeile seitlich
       wischen; hinten stehen Controlling und System, die man unterwegs kaum
       braucht. Die Beschriftung bleibt fuer Screenreader im Link. */
    .side-nav {
        padding-block: .5rem;
    }

    .side-nav-main {
        flex-wrap: nowrap;
        gap: .35rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .side-nav-main::-webkit-scrollbar {
        display: none;
    }

    .side-nav-main > .nav-item,
    .side-nav-main > .nav-link {
        flex: 0 0 auto;
    }

    .side-nav-main .nav-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        border: 1px solid var(--tblr-border-color);
        border-radius: var(--tblr-border-radius);
        background: var(--tblr-bg-surface);
        color: var(--mspoc-accent);
    }

    .side-nav-main .nav-link-icon {
        margin: 0;
    }

    .side-nav-main .nav-link-title {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .side-nav-main .nav-link.dropdown-toggle::after {
        display: none;
    }

    .side-nav-main .nav-link.active,
    .side-nav-main .nav-link.show {
        border-color: var(--tblr-primary);
        background: var(--tblr-primary-lt);
        color: var(--tblr-primary);
    }

    /* Die Liste einer Gruppe oeffnet als volle Breite unter dem klebenden
       Block. Fest positioniert, weil die wischbare Zeile sie sonst
       abschneiden wuerde; !important gegen die Lage, die Bootstrap selbst
       setzt. Untermenues (Berichte) klappen darin eingerueckt auf. */
    .side-nav-main > .nav-item > .dropdown-menu {
        position: fixed !important;
        inset: var(--mspoc-chrome-height, 9.5rem) .75rem auto .75rem !important;
        width: auto;
        max-height: calc(100vh - var(--mspoc-chrome-height, 9.5rem) - .75rem);
        max-height: calc(100dvh - var(--mspoc-chrome-height, 9.5rem) - .75rem);
        margin: .25rem 0 0 !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: none !important;
    }

    .side-nav-main .dropdown-menu .dropdown-item {
        padding-block: .6rem;
    }

    .mappe-card-head {
        align-items: flex-start;
    }

    .mappe-card-row {
        align-items: flex-start;
    }

    .mappe-card-row .badge {
        max-width: 6.5rem;
    }

    .mappe-card-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: .1rem;
    }

    .vorgang-modal-grid,
    .vorgang-modal-element,
    .vorgang-control-grid {
        grid-template-columns: 1fr;
    }

    .vorgang-time-panel {
        grid-template-columns: 1fr;
    }

    .vorgang-time-dates {
        text-align: left;
    }

    .vorgang-modal-history-main {
        align-items: flex-start;
        flex-direction: column;
        gap: .08rem;
    }

    .vorgang-modal-element-time {
        text-align: left;
    }

}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}

.dropdown-submenu > .dropdown-menu {
    top: -.5rem;
    left: 100%;
    margin: 0;
}

.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus-within > .dropdown-menu {
    display: block;
}

@media (max-width: 767.98px) {
    .side-nav-main .dropdown-submenu > .dropdown-menu {
        position: static;
        width: 100%;
        margin: .15rem 0 .25rem;
        padding-left: .75rem;
        border: 0;
        box-shadow: none;
    }
}

/* Handy quer (08.10.2026): Die Menuezeile klebt jetzt, ein langes
   Aufklappmenue laesst sich also nicht mehr durch Scrollen der Seite
   erreichen. Es scrollt deshalb in sich, und Untermenues klappen wie
   hochkant eingerueckt nach unten auf - seitlich wuerden sie vom
   scrollenden Menue abgeschnitten. */
@media (min-width: 521px) and (max-height: 560px) {
    .side-nav-main .dropdown-menu {
        max-height: calc(100vh - var(--mspoc-chrome-height, 8rem) - .75rem);
        max-height: calc(100dvh - var(--mspoc-chrome-height, 8rem) - .75rem);
        overflow-y: auto;
    }

    .side-nav-main .dropdown-submenu > .dropdown-menu {
        position: static;
        width: 100%;
        max-height: none;
        margin: .15rem 0 .25rem;
        padding-left: .75rem;
        overflow: visible;
        border: 0;
        box-shadow: none;
    }
}

/* Handy quer (08.10.2026): ohne Logo, damit die Suche mit PIN und
   Sitzungszeit breit genug bleibt. Die geringe Hoehe grenzt auf das Handy
   ein - Tablet und schmales Browserfenster behalten das Logo. */
@media (min-width: 521px) and (max-width: 1050px) and (max-height: 560px) {
    .app-brand {
        display: none;
    }
}

/* Offene Modulmigrationen.
   Modulmigrationen laufen nur bei der Installation; ein aktualisiertes Modul
   bleibt sonst unbemerkt zurueck. Der Rueckstand pulsiert deshalb sowohl am
   Menueknopf der Modulzeile als auch am Eintrag "Migrationen" darin, damit er
   auch dann auffaellt, wenn das Menue schon offen ist. */
@keyframes mspoc-migration-pulse {
    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(247, 103, 7, .45);
    }

    50% {
        opacity: .72;
        box-shadow: 0 0 0 .32rem rgba(247, 103, 7, 0);
    }
}

.mspoc-migration-pulse {
    animation: mspoc-migration-pulse 1.8s ease-in-out infinite;
}

/* Ruhiger Betrieb fuer Nutzer, die Bewegung abbestellt haben: der Hinweis
   bleibt farblich sichtbar, hoert aber auf zu blinken. */
@media (prefers-reduced-motion: reduce) {
    .mspoc-migration-pulse {
        animation: none;
    }
}

/* Bildergalerie (app-galerie.js, 24.09.2026): dunkle Vollbild-Ansicht ueber
   allem, auch ueber offenen Dialogen. */
.mspoc-galerie {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, .96);
    color: #fff;
}
.mspoc-galerie[hidden] {
    display: none;
}
.mspoc-galerie-kopf {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
}
.mspoc-galerie-drehen {
    display: flex;
    gap: .5rem;
    margin-right: .5rem;
}
.mspoc-galerie-drehen[hidden] {
    display: none;
}
.mspoc-galerie-zaehler {
    font-size: .875rem;
    opacity: .8;
    /* "1 / 8" brach auf dem Handy in drei Zeilen um (11.10.2026). */
    white-space: nowrap;
    flex-shrink: 0;
}
/* Handy (11.10.2026): Knoepfe der Kopfleiste nur als Symbol - mit Text
   (Speichern, Herunterladen) und einzeiligem Zaehler schob die Leiste bei
   390 px das X aus dem Bild. Der Text steht weiter in title/aria-label. */
@media (max-width: 575.98px) {
    .mspoc-galerie-kopf {
        gap: .35rem;
        padding: .6rem .75rem;
    }
    .mspoc-galerie-text {
        display: none;
    }
    .mspoc-galerie-kopf .btn .icon {
        margin-right: 0 !important;
    }
}
.mspoc-galerie-buehne {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4rem;
}
/* PDF und Text in der Vorschau (09.10.2026): heller Rahmen, so gross wie die Buehne. */
.mspoc-galerie-rahmen {
    width: 100%;
    height: 100%;
    max-width: 1200px;
    border: 0;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .5);
}
.mspoc-galerie-rahmen[hidden],
.mspoc-galerie-bild[hidden] {
    display: none;
}
.mspoc-galerie-bild {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    transition: transform .2s ease;
    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .5);
    user-select: none;
}
.mspoc-galerie-pfeil {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mspoc-galerie-pfeil:hover,
.mspoc-galerie-pfeil:focus-visible {
    background: rgba(255, 255, 255, .25);
}
.mspoc-galerie-pfeil.is-links {
    left: .75rem;
}
.mspoc-galerie-pfeil.is-rechts {
    right: .75rem;
}
.mspoc-galerie-pfeil[hidden] {
    display: none;
}
.mspoc-galerie-titel {
    min-height: 2.75rem;
    padding: .75rem 1rem;
    text-align: center;
    font-size: .875rem;
    opacity: .85;
}
body.mspoc-galerie-offen {
    overflow: hidden;
}
@media (max-width: 575.98px) {
    .mspoc-galerie-buehne {
        padding: 0 .5rem;
    }
    .mspoc-galerie-pfeil {
        width: 2.25rem;
        height: 2.25rem;
    }
}