/* =========================================================================
   Postbox design tokens
   Bootstrap 5.3 reads its own --bs-* custom properties, so overriding them
   here restyles the framework components without a Sass build step.
   ========================================================================= */
:root {
    color-scheme: light;

    --pb-accent: #2f5bd7;
    --pb-accent-strong: #1f43a8;
    --pb-accent-soft: #eaf0ff;

    --pb-bg: #eef1f6;
    --pb-surface: #ffffff;
    --pb-surface-muted: #f7f9fc;
    --pb-surface-sunken: #e9edf4;

    --pb-border: #dde3ec;
    --pb-border-strong: #c4cddc;

    --pb-text: #16202e;
    --pb-text-muted: #5f6d80;
    --pb-text-faint: #8996a8;

    --pb-unread: #d92d20;
    --pb-read: #2f5bd7;
    --pb-done: #12805c;

    --pb-radius: 8px;
    --pb-radius-lg: 12px;
    --pb-shadow-sm: 0 1px 2px rgba(16, 30, 54, .06);
    --pb-shadow: 0 2px 8px rgba(16, 30, 54, .08);
    --pb-shadow-lg: 0 12px 32px rgba(16, 30, 54, .14);

    --pb-topbar-height: 3.5rem;
    --pb-sidebar-width: 16rem;
    --pb-list-width: 24rem;

    --bs-primary: var(--pb-accent);
    --bs-primary-rgb: 47, 91, 215;
    --bs-body-bg: var(--pb-bg);
    --bs-body-color: var(--pb-text);
    --bs-border-color: var(--pb-border);
    --bs-secondary-color: var(--pb-text-muted);
    --bs-border-radius: var(--pb-radius);
    --bs-border-radius-sm: 6px;
    --bs-body-font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: 0.9375rem;
    --bs-link-color: var(--pb-accent);
    --bs-link-color-rgb: 47, 91, 215;
    --bs-link-hover-color: var(--pb-accent-strong);
}

/* =========================================================================
   Base
   ========================================================================= */
body {
    background-color: var(--pb-bg);
    color: var(--pb-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em;
}

.text-muted {
    color: var(--pb-text-muted) !important;
}

.tabular {
    font-variant-numeric: tabular-nums;
}

/* Focus ring that stays visible on every interactive surface. */
:focus-visible {
    outline: 2px solid var(--pb-accent);
    outline-offset: 2px;
}

/* =========================================================================
   Top bar
   ========================================================================= */
.pb-topbar {
    height: var(--pb-topbar-height);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1rem;
    background: #101828;
    color: #e7ebf2;
    box-shadow: var(--pb-shadow);
    position: relative;
    z-index: 30;
}

.pb-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
    font-size: 1.1875rem;
    letter-spacing: -0.02em;
    color: #fff;
    text-decoration: none;
}

.pb-topbar__brand:hover {
    color: #fff;
}

.pb-topbar__mark {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 9px;
    background: linear-gradient(140deg, #6d97ff, #2f5bd7 65%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 2px 6px rgba(16, 30, 54, .45);
    display: grid;
    place-items: center;
    color: #fff;
}

.pb-topbar__mark svg {
    width: 1.3rem;
    height: 1.3rem;
    display: block;
}

.pb-topbar__nav {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-right: auto;
}

.pb-topbar__link {
    padding: .35rem .7rem;
    border-radius: var(--pb-radius);
    color: #aab6c8;
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
}

.pb-topbar__link:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.pb-topbar__link.is-active {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.pb-topbar__badge {
    display: inline-block;
    min-width: 1.25rem;
    margin-left: .25rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
}

.pb-topbar__right {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.pb-topbar__user {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: #c3cddb;
}

.pb-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #2f5bd7;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.pb-topbar__signout {
    border: 1px solid rgba(255, 255, 255, .25);
    background: transparent;
    color: #e7ebf2;
    border-radius: var(--pb-radius);
    font-size: .8125rem;
    padding: .25rem .7rem;
}

.pb-topbar__signout:hover {
    background: rgba(255, 255, 255, .12);
}

/* =========================================================================
   Page shell (everything except the mail client)
   ========================================================================= */
.pb-page {
    max-width: 78rem;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 3rem;
}

.pb-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.pb-page-header h1 {
    font-size: 1.625rem;
    font-weight: 600;
    margin: 0;
}

.pb-page-header p {
    margin: .3rem 0 0;
    color: var(--pb-text-muted);
    font-size: .9375rem;
}

.card {
    border-color: var(--pb-border);
    border-radius: var(--pb-radius-lg);
    box-shadow: var(--pb-shadow-sm);
}

.card-header {
    background: var(--pb-surface-muted);
    border-bottom-color: var(--pb-border);
    font-weight: 600;
    font-size: .875rem;
}

.table > :not(caption) > * > * {
    padding: .6rem .75rem;
}

.table > thead {
    color: var(--pb-text-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.form-label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--pb-text-muted);
    margin-bottom: .25rem;
}

.form-control, .form-select {
    border-color: var(--pb-border-strong);
}

.form-control:focus, .form-select:focus {
    border-color: var(--pb-accent);
    box-shadow: 0 0 0 3px rgba(47, 91, 215, .15);
}

/* Fixed values from the delivery: visibly not editable, no focus ring. */
.form-control[readonly] {
    background: var(--pb-surface-sunken);
    color: var(--pb-text-muted);
    border-color: transparent;
    box-shadow: none;
    cursor: default;
}

.pb-no-resize {
    resize: none;
}

.btn {
    font-weight: 500;
}

/* =========================================================================
   Mail client shell
   ========================================================================= */
body.pb-app {
    height: 100vh;
    overflow: hidden;
}

.pb-workspace {
    height: calc(100vh - var(--pb-topbar-height));
    display: grid;
    grid-template-columns: var(--pb-sidebar-width) var(--pb-list-width) minmax(0, 1fr);
    background: var(--pb-bg);
}

.pb-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-right: 1px solid var(--pb-border);
    background: var(--pb-surface);
}

.pb-pane:last-child {
    border-right: 0;
}

.pb-pane__header {
    flex: 0 0 auto;
    padding: .75rem .875rem;
    border-bottom: 1px solid var(--pb-border);
    background: var(--pb-surface);
}

.pb-pane__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.pb-pane__footer {
    flex: 0 0 auto;
    padding: .5rem .875rem;
    border-top: 1px solid var(--pb-border);
    background: var(--pb-surface-muted);
    font-size: .78rem;
    color: var(--pb-text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

/* ---------- Column 1: folders ---------- */
.pb-sidebar {
    background: var(--pb-surface-muted);
}

.pb-sidebar .pb-pane__header,
.pb-sidebar .pb-pane__footer {
    background: var(--pb-surface-muted);
}

.pb-sidebar__section {
    padding: .75rem .5rem .25rem;
}

.pb-sidebar__title {
    padding: 0 .625rem .375rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pb-text-faint);
}

.pb-folder {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .625rem;
    margin: 0 .125rem 1px;
    border-radius: var(--pb-radius);
    color: var(--pb-text);
    text-decoration: none;
    font-size: .875rem;
    line-height: 1.3;
}

.pb-folder:hover {
    background: rgba(47, 91, 215, .07);
    color: var(--pb-text);
}

.pb-folder.is-active {
    background: var(--pb-accent);
    color: #fff;
    font-weight: 600;
}

.pb-folder.is-active .pb-folder__count,
.pb-folder.is-active .pb-folder__icon,
.pb-folder.is-active .pb-folder__access {
    color: #fff;
}

.pb-folder__icon {
    flex: 0 0 auto;
    width: 1rem;
    text-align: center;
    color: var(--pb-text-faint);
    font-size: .875rem;
}

.pb-folder__label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-folder__access {
    flex: 0 0 auto;
    font-size: .75rem;
    color: var(--pb-text-faint);
}

.pb-folder__count {
    flex: 0 0 auto;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    color: var(--pb-text-faint);
}

.pb-folder__count.is-unread {
    background: var(--pb-unread);
    color: #fff;
    border-radius: 999px;
    padding: 0 .375rem;
    min-width: 1.25rem;
    text-align: center;
    font-weight: 600;
}

.pb-folder.is-active .pb-folder__count.is-unread {
    background: #fff;
    color: var(--pb-accent);
}

/* ---------- Column 2: message list ---------- */
.pb-listbar {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.pb-listbar h2 {
    font-size: .9375rem;
    font-weight: 600;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-search {
    position: relative;
    margin-top: .5rem;
}

.pb-search input {
    width: 100%;
    border: 1px solid var(--pb-border-strong);
    border-radius: var(--pb-radius);
    padding: .3rem .5rem .3rem 1.9rem;
    font-size: .8125rem;
    background: var(--pb-surface-muted);
}

.pb-search input:focus {
    outline: none;
    border-color: var(--pb-accent);
    box-shadow: 0 0 0 3px rgba(47, 91, 215, .15);
    background: var(--pb-surface);
}

.pb-search__icon {
    position: absolute;
    left: .55rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pb-text-faint);
    font-size: .8125rem;
    pointer-events: none;
}

.pb-chip {
    border: 1px solid var(--pb-border-strong);
    background: var(--pb-surface);
    border-radius: 999px;
    padding: .1rem .55rem;
    font-size: .75rem;
    color: var(--pb-text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.pb-chip:hover {
    border-color: var(--pb-accent);
    color: var(--pb-accent);
}

.pb-chip.is-active {
    background: var(--pb-accent-soft);
    border-color: var(--pb-accent);
    color: var(--pb-accent-strong);
    font-weight: 600;
}

.pb-icon-button {
    border: 1px solid var(--pb-border-strong);
    background: var(--pb-surface);
    border-radius: var(--pb-radius);
    color: var(--pb-text-muted);
    width: 1.85rem;
    height: 1.85rem;
    display: grid;
    place-items: center;
    font-size: .875rem;
    line-height: 1;
    flex: 0 0 auto;
}

.pb-icon-button:hover {
    border-color: var(--pb-accent);
    color: var(--pb-accent);
}

.pb-icon-button.is-active {
    background: var(--pb-accent-soft);
    border-color: var(--pb-accent);
    color: var(--pb-accent-strong);
}

.pb-daygroup {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: .3rem .875rem;
    background: var(--pb-surface-sunken);
    border-bottom: 1px solid var(--pb-border);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pb-text-muted);
}

.pb-message {
    display: block;
    position: relative;
    padding: .625rem .875rem .625rem 1.125rem;
    border-bottom: 1px solid var(--pb-border);
    color: var(--pb-text);
    text-decoration: none;
    cursor: pointer;
}

.pb-message:hover {
    background: var(--pb-surface-muted);
    color: var(--pb-text);
}

.pb-message.is-selected {
    background: var(--pb-accent-soft);
}

.pb-message.is-selected::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--pb-accent);
}

.pb-message.is-unread .pb-message__subject,
.pb-message.is-unread .pb-message__sender {
    font-weight: 700;
}

.pb-message.is-unread .pb-message__dot {
    background: var(--pb-unread);
}

.pb-message__dot {
    position: absolute;
    left: .45rem;
    top: .95rem;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: transparent;
}

.pb-message__top {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.pb-message__sender {
    flex: 1 1 auto;
    font-size: .8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-message__time {
    flex: 0 0 auto;
    font-size: .72rem;
    color: var(--pb-text-faint);
    font-variant-numeric: tabular-nums;
}

.pb-message__subject {
    font-size: .875rem;
    margin-top: .1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-message__meta {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-top: .2rem;
    font-size: .72rem;
    color: var(--pb-text-faint);
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
}

.pb-message__meta > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-tag {
    border-radius: 4px;
    padding: 0 .3rem;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}

.pb-tag--personal {
    background: #f3e8ff;
    border-color: #d8b4fe;
    color: #6b21a8;
}

.pb-tag--done {
    background: #dcfce7;
    border-color: #86efac;
    color: #14532d;
}

.pb-tag--unread {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #7f1d1d;
}

.pb-tag--approval {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #78350f;
}

.pb-tag--approval-mine {
    background: #f59e0b;
    border-color: #d97706;
    color: #fff;
}

.pb-tag--doc {
    background: var(--pb-surface-sunken);
    border-color: var(--pb-border-strong);
    color: var(--pb-text-muted);
}

.pb-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--pb-text-faint);
}

/* Right-click menu on a list row ("Als gelesen/ungelesen markieren"). */
.pb-context-menu {
    position: fixed;
    z-index: 1050;
    min-width: 12rem;
    background: var(--pb-surface);
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius);
    box-shadow: var(--pb-shadow-lg);
    padding: .25rem;
}

.pb-context-menu button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: .45rem .6rem;
    border-radius: 6px;
    font-size: .8125rem;
    color: var(--pb-text);
}

.pb-context-menu button:hover:not(:disabled) {
    background: var(--pb-surface-sunken);
}

.pb-context-menu button:disabled {
    color: var(--pb-text-faint);
    cursor: default;
}

.pb-empty__icon {
    font-size: 2rem;
    opacity: .5;
    display: block;
    margin-bottom: .5rem;
}

/* ---------- Column 3: preview ---------- */
.pb-preview {
    background: var(--pb-surface);
}

/* The partial is swapped in as a whole, but its children have to stay direct
   flex items of the pane, so the wrapper itself must not create a box. */
.pb-preview__root {
    display: contents;
}

[data-viewer-config] {
    display: none;
}

/* Validation summaries render an empty <ul> when there is nothing to report. */
.alert.validation-summary-valid {
    display: none;
}

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

.pb-preview__header {
    flex: 0 0 auto;
    padding: .875rem 1.125rem;
    border-bottom: 1px solid var(--pb-border);
}

.pb-preview__title {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.35;
}

.pb-preview__meta {
    margin-top: .3rem;
    font-size: .8125rem;
    color: var(--pb-text-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
}

.pb-preview__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    margin-top: .625rem;
}

/* Viewer and side column sit next to each other; both scroll on their own so the
   header stays put. */
.pb-preview__body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.pb-preview__main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.pb-tabs {
    display: flex;
    gap: .25rem;
    padding: 0 1.125rem;
    border-bottom: 1px solid var(--pb-border);
    background: var(--pb-surface);
    flex: 0 0 auto;
}

.pb-tabs button {
    border: 0;
    background: transparent;
    padding: .5rem .75rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--pb-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.pb-tabs button:hover {
    color: var(--pb-text);
}

.pb-tabs button.is-active {
    color: var(--pb-accent);
    border-bottom-color: var(--pb-accent);
}

.pb-tabpanel {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}

.pb-tabpanel.is-active {
    display: flex;
}

.pb-viewer-toolbar {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    padding: .5rem 1.125rem;
    border-bottom: 1px solid var(--pb-border);
    background: var(--pb-surface-muted);
}

.pb-viewer-toolbar .form-select,
.pb-viewer-toolbar .form-control {
    height: 1.85rem;
    padding-top: 0;
    padding-bottom: 0;
    font-size: .8125rem;
    width: auto;
}

.pb-viewer-toolbar .form-control-color {
    width: 2.25rem;
    padding: .15rem;
}

.pb-viewer-stage {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: var(--pb-surface-sunken);
    padding: 1.25rem;
    text-align: center;
}

.pb-form-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.125rem;
}

.pb-aside {
    flex: 0 0 22rem;
    min-width: 0;
    overflow-y: auto;
    border-left: 1px solid var(--pb-border);
    background: var(--pb-surface);
}

.pb-aside__section {
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--pb-border);
}

.pb-aside__section:last-child {
    border-bottom: 0;
}

.pb-aside__title {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pb-text-muted);
    margin-bottom: .5rem;
}

.pb-aside__count {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 0;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--pb-surface-muted);
    color: var(--pb-text-muted);
}

.pb-aside__row {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .8125rem;
}

.pb-aside .form-label {
    font-size: .75rem;
    margin-bottom: .15rem;
    color: var(--pb-text-muted);
}

.pb-aside .form-text {
    margin-top: .2rem;
    line-height: 1.3;
}

.pb-aside .pb-kv {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.pb-aside .pb-kv dd {
    word-break: break-word;
}

/* Attachment thumbnails. The canvas is painted by pdf-annotator.js; until it is,
   the fallback badge shows through. */
.pb-thumbs {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.pb-thumb {
    display: flex;
    gap: .625rem;
    padding: .5rem;
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius);
    background: var(--pb-surface);
}

.pb-thumb.is-current {
    border-color: var(--pb-accent);
    background: var(--pb-accent-soft);
}

.pb-thumb__preview {
    position: relative;
    flex: 0 0 auto;
    width: 4.5rem;
    height: 6rem;
    padding: 0;
    border: 1px solid var(--pb-border);
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    display: grid;
    place-items: center;
}

.pb-thumb__preview:hover {
    border-color: var(--pb-accent);
}

.pb-thumb__preview canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.pb-thumb__fallback {
    position: absolute;
    font-size: .6rem;
    font-weight: 700;
    color: #b42318;
    background: #fdecec;
    border: 1px solid #f8c9c5;
    border-radius: 3px;
    padding: .1rem .3rem;
}

.pb-thumb__preview.is-rendered .pb-thumb__fallback {
    display: none;
}

.pb-thumb__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.pb-thumb__name {
    font-size: .8125rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-thumb__meta {
    font-size: .72rem;
    color: var(--pb-text-faint);
}

.pb-thumb__actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .72rem;
}

.pb-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pb-timeline li {
    position: relative;
    padding: 0 0 .875rem 1.125rem;
    border-left: 2px solid var(--pb-border);
    font-size: .8125rem;
}

.pb-timeline li::before {
    content: "";
    position: absolute;
    left: -.3rem;
    top: .35rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--pb-border-strong);
}

.pb-timeline li:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.pb-timeline__when {
    color: var(--pb-text-faint);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
}

.pb-timeline__change {
    color: var(--pb-text-muted);
    word-break: break-word;
}

.pb-kv {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: .3rem .75rem;
    font-size: .8125rem;
}

.pb-kv dt {
    color: var(--pb-text-muted);
    font-weight: 500;
}

.pb-kv dd {
    margin: 0;
}

/* =========================================================================
   Status pills, dashboard, PDF stage
   ========================================================================= */
.pb-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-radius: 999px;
    padding: .05rem .55rem;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.pb-status::before {
    content: "";
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: currentColor;
}

.pb-status--unread {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b42318;
}

.pb-status--read {
    background: var(--pb-accent-soft);
    border-color: #b8caff;
    color: var(--pb-accent-strong);
}

.pb-status--done {
    background: #dcfce7;
    border-color: #86efac;
    color: #12805c;
}

.pb-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .875rem;
    margin-bottom: 2rem;
}

.pb-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1.125rem 1.25rem 1rem;
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius-lg);
    background: var(--pb-surface);
    box-shadow: var(--pb-shadow-sm);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

/* Colour is carried by a top rule so the card itself stays calm. */
.pb-kpi::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--pb-border-strong);
}

.pb-kpi--unread::before { background: var(--pb-unread); }
.pb-kpi--open::before { background: var(--pb-accent); }
.pb-kpi--done::before { background: var(--pb-done); }
.pb-kpi--approval::before { background: #d97706; }

.pb-kpi:hover {
    box-shadow: var(--pb-shadow);
    border-color: var(--pb-border-strong);
    transform: translateY(-1px);
    color: inherit;
}

.pb-kpi__value {
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.pb-kpi--unread .pb-kpi__value { color: var(--pb-unread); }
.pb-kpi--open .pb-kpi__value { color: var(--pb-accent); }
.pb-kpi--done .pb-kpi__value { color: var(--pb-done); }
.pb-kpi--approval .pb-kpi__value { color: #b45309; }

.pb-kpi__label {
    font-weight: 600;
    font-size: .875rem;
}

.pb-kpi__hint {
    font-size: .78rem;
    color: var(--pb-text-faint);
}

.pb-section-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .75rem;
}

.pb-section-head h2 {
    margin: 0;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pb-text-muted);
}

.pb-section-head__count {
    font-size: .7rem;
    font-weight: 600;
    color: var(--pb-text-faint);
    background: var(--pb-surface-sunken);
    border-radius: 999px;
    padding: .05rem .45rem;
}

.pb-section-head + .pb-stat-grid {
    margin-bottom: 2rem;
}

.pb-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 1rem;
}

.pb-stat-card {
    background: var(--pb-surface);
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius-lg);
    box-shadow: var(--pb-shadow-sm);
    padding: 1.125rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .875rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

a.pb-stat-card:hover {
    box-shadow: var(--pb-shadow);
    border-color: var(--pb-border-strong);
    transform: translateY(-1px);
    color: inherit;
}

.pb-stat-card.is-empty {
    background: var(--pb-surface-muted);
}

.pb-stat-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

.pb-stat-card__name {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-stat-card__code {
    font-size: .72rem;
    color: var(--pb-text-faint);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.pb-stat-card__badge {
    flex: none;
    font-size: .7rem;
    font-weight: 600;
    border-radius: 999px;
    padding: .1rem .5rem;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #b42318;
}

.pb-stat-card__desc {
    margin: -.375rem 0 0;
    font-size: .82rem;
    color: var(--pb-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pb-stat-card__quiet {
    margin: 0;
    font-size: .82rem;
    color: var(--pb-text-faint);
}

.pb-stat-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .78rem;
    color: var(--pb-text-muted);
    white-space: nowrap;
}

.pb-stat-card__age.is-warn {
    color: #b54708;
    font-weight: 600;
}

.pb-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    text-align: center;
}

.pb-stat-row__value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.pb-stat-row__label {
    font-size: .72rem;
    color: var(--pb-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pb-stat--unread { color: var(--pb-unread); }
.pb-stat--read { color: var(--pb-read); }
.pb-stat--done { color: var(--pb-done); }

.pb-progress {
    height: .375rem;
    border-radius: 999px;
    background: var(--pb-surface-sunken);
    overflow: hidden;
    display: flex;
}

.pb-progress span {
    display: block;
    height: 100%;
}

.pdf-stage {
    position: relative;
    display: inline-block;
    line-height: 0;
    background: #fff;
    box-shadow: var(--pb-shadow-lg);
    border-radius: 2px;
}

.pdf-stage canvas {
    display: block;
    border-radius: 2px;
}

.annotation-layer {
    position: absolute;
    inset: 0;
    cursor: crosshair;
}

.annotation-box {
    position: absolute;
    pointer-events: auto;
    cursor: move;
}

/* The tint lives on a child so the resize handles stay fully opaque. */
.annotation-box__fill {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(0, 0, 0, .35);
    opacity: .45;
    pointer-events: none;
}

/* The note itself, laid over the tint. Clipped when the box is too small — the full
   text stays reachable through the element's title. */
.annotation-box__text {
    position: absolute;
    inset: 0;
    padding: 1px 2px;
    overflow: hidden;
    font-size: .6875rem;
    line-height: 1.35;
    color: #101828;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    pointer-events: none;
}

.annotation-box__text > span {
    background: rgba(255, 255, 255, .85);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0 2px;
    border-radius: 2px;
}

.annotation-box.is-selected {
    outline: 2px dashed #101828;
    outline-offset: 1px;
    z-index: 1;
}

.annotation-box.is-selected .annotation-box__fill {
    opacity: .7;
}

/* The rubber band while a new annotation is being drawn. */
.annotation-box.is-preview {
    border: 2px solid rgba(0, 0, 0, .35);
    opacity: .45;
    pointer-events: none;
}

.annotation-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    background: #fff;
    border: 1px solid #101828;
    border-radius: 2px;
    pointer-events: auto;
}

.annotation-handle--nw { top: 0; left: 0; cursor: nwse-resize; }.annotation-handle--n { top: 0; left: 50%; cursor: ns-resize; }
.annotation-handle--ne { top: 0; left: 100%; cursor: nesw-resize; }
.annotation-handle--e { top: 50%; left: 100%; cursor: ew-resize; }
.annotation-handle--se { top: 100%; left: 100%; cursor: nwse-resize; }
.annotation-handle--s { top: 100%; left: 50%; cursor: ns-resize; }
.annotation-handle--sw { top: 100%; left: 0; cursor: nesw-resize; }
.annotation-handle--w { top: 50%; left: 0; cursor: ew-resize; }

/* Note editor, anchored below its annotation inside the page stage. */
.annotation-editor {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: .5rem;
    line-height: 1.4;
    text-align: left;
    background: var(--pb-surface);
    border: 1px solid var(--pb-border-strong);
    border-radius: var(--pb-radius);
    box-shadow: var(--pb-shadow-lg);
    cursor: default;
}

.annotation-editor__input {
    width: 100%;
    resize: vertical;
    font-size: .8125rem;
    padding: .375rem .5rem;
    border: 1px solid var(--pb-border);
    border-radius: 4px;
}

.annotation-editor__actions {
    display: flex;
    align-items: center;
    gap: .375rem;
}

.annotation-editor__hint {
    margin-right: auto;
    font-size: .68rem;
    color: var(--pb-text-faint);
}

/* =========================================================================
   Sign-in
   ========================================================================= */
.pb-login {
    min-height: calc(100vh - var(--pb-topbar-height));
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background: radial-gradient(120% 120% at 50% 0%, #1d2b45 0%, #101828 55%, #0b111d 100%);
    overflow: auto;
}

.pb-login__card {
    width: 100%;
    max-width: 23rem;
    background: var(--pb-surface);
    border-radius: var(--pb-radius-lg);
    box-shadow: var(--pb-shadow-lg);
    padding: 1.75rem;
}

.pb-login__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.pb-login__brand .pb-topbar__mark {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
}

.pb-login__brand .pb-topbar__mark svg {
    width: 1.7rem;
    height: 1.7rem;
}

/* =========================================================================
   Responsive: collapse to two, then one column
   ========================================================================= */
@media (max-width: 1400px) {
    :root {
        --pb-sidebar-width: 14rem;
        --pb-list-width: 21rem;
    }

    /* Not enough width for a side column: stack it under the viewer and let the
       whole body scroll as one. */
    .pb-preview__body {
        flex-direction: column;
        overflow-y: auto;
    }

    .pb-preview__main {
        flex: 0 0 auto;
        min-height: 26rem;
    }

    .pb-aside {
        flex: 0 0 auto;
        overflow-y: visible;
        border-left: 0;
        border-top: 1px solid var(--pb-border);
    }
}

@media (max-width: 1200px) {
    .pb-workspace {
        grid-template-columns: var(--pb-list-width) minmax(0, 1fr);
    }

    .pb-sidebar {
        position: fixed;
        top: var(--pb-topbar-height);
        bottom: 0;
        left: 0;
        width: var(--pb-sidebar-width);
        z-index: 25;
        transform: translateX(-100%);
        transition: transform .18s ease;
        box-shadow: var(--pb-shadow-lg);
    }

    .pb-workspace.folders-open .pb-sidebar {
        transform: none;
    }

    .pb-sidebar-toggle {
        display: grid !important;
    }
}

@media (max-width: 900px) {
    .pb-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .pb-list {
        display: flex;
    }

    .pb-preview {
        display: none;
    }

    .pb-workspace.has-selection .pb-list {
        display: none;
    }

    .pb-workspace.has-selection .pb-preview {
        display: flex;
    }

    .pb-back-to-list {
        display: inline-flex !important;
    }
}

.pb-sidebar-toggle,
.pb-back-to-list {
    display: none;
}

/* ---- approvals (Genehmigungen) in the preview side column --------------- */
.pb-approvals {
    list-style: none;
    margin: 0 0 .25rem;
    padding: 0;
}

.pb-approval {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem 0;
    border-bottom: 1px solid var(--pb-border);
}

.pb-approval:last-child {
    border-bottom: 0;
}

.pb-approval__body {
    flex: 1 1 auto;
    min-width: 0;
}

.pb-approval__name {
    font-size: .8125rem;
    font-weight: 500;
}

.pb-approval__state {
    font-size: .75rem;
    color: #92400e;
}

.pb-approval.is-approved .pb-approval__state {
    color: var(--pb-done);
}

.pb-approval__actions {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.pb-approval__actions form {
    margin: 0;
}

.pb-approval-picker > summary {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--pb-accent);
    cursor: pointer;
}

.pb-approval-picker[open] > summary {
    margin-bottom: .375rem;
}

.pb-approval-picker__list {
    max-height: 12rem;
    overflow-y: auto;
    margin-bottom: .375rem;
    padding: .25rem .5rem;
    border: 1px solid var(--pb-border-strong);
    border-radius: var(--pb-radius);
    background: var(--pb-surface);
}

.pb-approval-picker__option {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .2rem 0;
    font-size: .8125rem;
    cursor: pointer;
}

.pb-approval-picker__option .form-check-input {
    margin-top: 0;
}

/* ---- popups (<dialog>) ------------------------------------------------- */
.pb-dialog {
    width: 40rem;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 4rem);
    padding: 0;
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius-lg);
    background: var(--pb-surface);
    color: var(--pb-text);
    box-shadow: var(--pb-shadow-lg);
}

.pb-dialog::backdrop {
    background: rgba(16, 30, 54, .45);
}

.pb-dialog__header,
.pb-dialog__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
}

.pb-dialog__header {
    border-bottom: 1px solid var(--pb-border);
}

.pb-dialog__footer {
    border-top: 1px solid var(--pb-border);
    font-size: .875rem;
}

.pb-dialog__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.pb-related {
    list-style: none;
    margin: 0;
    padding: 0 1rem;
    overflow-y: auto;
    max-height: calc(100vh - 12rem);
}

.pb-related__item {
    padding: .625rem 0;
    border-bottom: 1px solid var(--pb-border);
}

.pb-related__item:last-child {
    border-bottom: 0;
}

.pb-related__item.is-current {
    color: var(--pb-text-muted);
}

.pb-related__item.is-restricted .pb-related__title {
    color: var(--pb-text-faint);
    font-style: italic;
}

.pb-related__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    font-size: .875rem;
    font-weight: 500;
}

.pb-related__meta {
    font-size: .75rem;
    color: var(--pb-text-muted);
}