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

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

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

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

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

@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-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-height: 16rem;
}

.mspoc-chart-host canvas {
    width: 100%;
    height: 16rem;
}

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

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

.dashboard-tint {
    overflow: hidden;
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(24, 36, 51, .06);
}

.dashboard-tint .subheader,
.dashboard-tint .text-secondary {
    color: rgba(24, 36, 51, .66) !important;
}

.dashboard-tint-blue {
    background: #eaf3ff;
}

.dashboard-tint-green {
    background: #eaf9ef;
}

.dashboard-tint-yellow {
    background: #fff4de;
}

.dashboard-tint-indigo {
    background: #edf0ff;
}

.dashboard-tint-red {
    background: #fff0f0;
}

.dashboard-tint-purple {
    background: #f6edff;
}

.dashboard-tint-orange {
    background: #fff1e6;
}

.dashboard-tint-cyan {
    background: #e7fafe;
}

.dashboard-tint-pink {
    background: #fff0f6;
}

.dashboard-tint-lime {
    background: #f1f8e8;
}

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

.dashboard-chart-host canvas {
    height: 18rem;
}

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

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

.dashboard-note {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .65rem .8rem;
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-secondary);
    font-size: .875rem;
}

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

.mappe-lane-card {
    min-height: 18rem;
}

.mappe-list-scroll {
    max-height: calc(100vh - 18rem);
    overflow: auto;
}

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

.mappe-list-item {
    display: block;
    width: 100%;
    min-height: 6.15rem;
    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: grid;
    grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: start;
    width: 100%;
    min-height: 6.15rem;
    padding: .9rem 1rem 1.2rem;
    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-list-meta,
.mappe-list-main {
    display: flex;
    min-width: 0;
}

.mappe-list-meta {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: .35rem;
    align-items: flex-start;
    padding-bottom: .2rem;
}

.mappe-list-main {
    flex-direction: column;
    gap: .1rem;
}

.mappe-list-meta .badge i {
    margin-right: .25rem;
}

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

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

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

.vorgang-modal-section {
    padding: 1rem 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 .85rem;
    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-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,
.vorgang-modal-history {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.vorgang-modal-history {
    max-height: 9.5rem;
    overflow-y: auto;
    gap: 0;
    padding-right: .25rem;
}

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

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

.vorgang-modal-history-row {
    grid-template-columns: 5.6rem 4.5rem minmax(0, 1fr);
    min-height: 0;
    gap: .45rem;
    padding: .28rem 0;
    font-size: .78rem;
    line-height: 1.2;
}

.vorgang-modal-history-actor,
.vorgang-modal-history-message {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vorgang-modal-history-actor {
    color: var(--tblr-secondary);
}

.vorgang-modal-element:last-child,
.vorgang-modal-history-row: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-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;
}

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

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

.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: 920px) {
    .app-topbar-inner {
        flex-wrap: wrap;
        gap: .65rem .45rem;
        padding-block: .75rem;
    }

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

    .app-search {
        flex-basis: 100%;
        min-width: 0;
        order: 10;
    }

    .app-sidebar {
        position: static;
    }

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

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

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

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

@media (max-width: 520px) {
    .app-topbar-inner {
        gap: .6rem .35rem;
    }

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

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

    .side-nav-main {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .15rem;
    }

    .mappe-list-button {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .mappe-list-meta {
        grid-column: 1 / -1;
    }

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

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