: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;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    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;
}

.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 > 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;
}

.m365-mail-header-glyph {
    display: inline-block;
    color: var(--tblr-azure);
    font-family: Arial, sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.status-icon-badge > .m365-mail-header-glyph {
    position: static;
    display: inline-block;
    min-width: 0;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--mspoc-accent);
}

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

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

.session-chip {
    position: absolute;
    top: 50%;
    right: .35rem;
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    max-width: 5.8rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    transform: translateY(-50%);
    background: var(--mspoc-session-bg);
    color: var(--mspoc-session-color);
    font-size: .75rem;
    white-space: nowrap;
}

.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;
}

.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: sticky;
    top: var(--mspoc-topbar-height);
    z-index: 1020;
    border-bottom: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface);
}

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

.app-nav-toggle,
.app-nav-current {
    display: none;
}

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

@media (min-width: 521px) {
    .app-nav-collapse.collapse {
        display: block !important;
        height: auto !important;
        visibility: visible;
    }
}

.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;
}

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

.customer-table th,
.customer-table td {
    vertical-align: top;
}

.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 {
    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;
    }

    .app-search {
        flex: 0 1 min(100%, 36rem);
        min-width: 0;
        max-width: 36rem;
        margin-left: auto;
        order: 10;
    }
}

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

    .app-sidebar {
        position: static;
    }

    .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_core_operations_center:today_important"] .list-group,
[data-dashboard-widget="mspoc_core_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_core_operations_center:today_important"] .list-group-item,
[data-dashboard-widget="mspoc_core_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_core_operations_center:today_important"] .list-group-item > .flex-fill,
[data-dashboard-widget="mspoc_core_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_core_operations_center:today_important"] .list-group-item > .flex-fill hr,
[data-dashboard-widget="mspoc_core_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_core_operations_center:today_important"] .list-group-item form .btn {
    min-width: 5.25rem;
}

.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-flyout {
    width: min(34rem, calc(100vw - 1.5rem));
    padding: 0;
    overflow: hidden;
}

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

.m365-mail-flyout-list {
    max-height: min(31rem, calc(100vh - 10rem));
    overflow-y: auto;
}

.m365-mail-flyout-row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: start;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--tblr-border-color, #dce1e7);
    border-right: 0;
    border-left: 0;
    border-top: 0;
    width: 100%;
    background: transparent;
    text-align: left;
    color: inherit;
    text-decoration: none;
}

.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; }

.m365-mail-flyout-row:hover,
.m365-mail-flyout-row:focus-visible {
    background: var(--tblr-bg-surface-secondary);
    color: inherit;
    outline: 0;
}

.m365-mail-flyout-row .m365-mail-flyout-subject {
    margin-top: .15rem;
    font-weight: 700;
}

.m365-mail-flyout-row .m365-mail-flyout-preview {
    display: -webkit-box;
    margin-top: .2rem;
    overflow: hidden;
    color: var(--tblr-secondary);
    font-size: .78rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

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

.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;
}

.dashboard-widget-chart-card [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-widget-chart-card.dashboard-widget-size-sm .dashboard-kpi-chart-grid {
    grid-template-columns: 1fr;
}

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

.dashboard-widget-chart-card.dashboard-widget-size-sm [data-dashboard-widget-direction] {
    font-size: .75rem;
    line-height: 1.2;
}

[data-dashboard-widget="mspoc_core_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. */
[data-dashboard-widget="mspoc_core_agent:device_distribution"] .dashboard-kpi-chart-grid > :first-child,
[data-dashboard-widget="mspoc_core_agent:backup_status"] .dashboard-kpi-chart-grid > :first-child {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
}

[data-dashboard-widget="mspoc_core_agent:device_distribution"] .dashboard-kpi-chart-grid > :first-child > .subheader,
[data-dashboard-widget="mspoc_core_agent:backup_status"] .dashboard-kpi-chart-grid > :first-child > .subheader {
    align-self: start;
}

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

[data-dashboard-widget="mspoc_core_agent:device_distribution"] [data-dashboard-widget-direction],
[data-dashboard-widget="mspoc_core_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,
    .app-status-badges .header-mobile-flyout .m365-mail-flyout-list {
        max-height: var(--header-mobile-flyout-list-max-height, calc(100dvh - 8rem));
    }

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

    .app-brand img {
        width: 134px;
    }

    .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;
    }

    .side-nav {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: .35rem .75rem;
        align-items: center;
        padding-block: .55rem;
    }

    .app-nav-toggle {
        display: inline-flex;
    }

    .app-nav-current {
        display: block;
        min-width: 0;
        overflow: hidden;
        color: var(--tblr-secondary);
        font-size: .75rem;
        font-weight: 700;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .app-nav-collapse {
        grid-column: 1 / -1;
    }

    .side-nav-main {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: .15rem;
        padding-top: .35rem;
    }

    .side-nav-main .nav-link {
        border-radius: var(--tblr-border-radius);
        padding: .55rem .75rem;
    }

    .side-nav-main .nav-link.active {
        background: var(--tblr-bg-surface-secondary);
    }

    .side-nav-main .nav-item.dropdown {
        width: 100%;
    }

.side-nav-main .dropdown-menu {
        position: static;
        width: 100%;
        margin: .15rem 0 .25rem;
        border: 0;
        box-shadow: none;
    }

    .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;
    }
}