@charset "UTF-8";
:root {
    --brand: #009fee;
    --primary: #007dbb;
    --primary-hover: #006da3;
    --ink: #303c46;
    --heading: #29343d;
    --muted: #667582;
    --line: #e1e7ec;
    --canvas: #f4f7fa;
    --white: #fff;
    --blue-light: #eaf6fd;
    --green: #277451;
    --orange: #9f5815;
    --red: #b23838;
    --radius: .8rem;
    --sidebar-width: 17.5rem;
    --body-font: 'Roboto', Arial, sans-serif;
    --heading-font: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--body-font);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink);
    background: var(--canvas);
}

button, input, select, textarea {
    font: inherit;
}

button, a, input, select, summary {
    -webkit-tap-highlight-color: transparent;
}

button, summary {
    cursor: pointer;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    color: var(--primary-hover);
}

button {
    color: inherit;
}

button:disabled, input:disabled {
    cursor: not-allowed;
}

button:disabled {
    opacity: .62;
}

input:disabled {
    background: #f7f9fb;
}

img, svg {
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 4px;
}

h1,h2,h3,p {
    margin: 0;
}

h1,h2,h3 {
    color: var(--heading);
}

h1 {
    font-family: var(--heading-font);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.025em;
}

h2 {
    font-family: var(--heading-font);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
}

h3 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.icon {
    width: 1.3rem;
    height: 1.3rem;
    stroke-width: 1.8;
    flex-shrink: 0;
    vertical-align: middle;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: -6rem;
    left: 1rem;
    padding: .8rem;
    z-index: 100;
    background: #fff;
}

.skip-link:focus {
    top: 1rem;
}

.eyebrow {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .115em;
    color: var(--muted);
    margin-bottom: .45rem;
}

.eyebrow.light {
    color: #a4dffd;
}

.subtle, .field-hint {
    color: var(--muted);
    font-size: .875rem;
}

.field-hint {
    line-height: 1.55;
}

.orange-text {
    color: var(--orange);
}

.btn {
    min-height: 2.9rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    padding: .75rem 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.3;
    transition: background .15s, border-color .15s;
}

.btn.primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 3px 6px #007dbb14;
}

.btn.primary:hover:not(:disabled) {
    background: var(--primary-hover);
    color: white;
}

.btn.secondary {
    background: white;
    border-color: #d9e1e7;
    color: var(--ink);
}

.btn.secondary:hover {
    background: #f1f6f9;
    border-color: #b9cbd8;
}

.btn.danger {
    background: var(--red);
    color: white;
}

.btn.danger:hover {
    background: #962c2c;
}

.btn.full {
    width: 100%;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: .6rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--muted);
}

.icon-button:hover {
    background: var(--blue-light);
    color: var(--primary);
}

.icon-button.bordered {
    border: 1px solid var(--line);
    background: white;
}

.icon-button.bordered:hover {
    border-color: #a6d7ef;
    background: #f0f9fe;
}

.delete-button:hover {
    color: var(--red) !important;
    background: #fdf0f0 !important;
    border-color: #eac0c0 !important;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .65rem;
    border-radius: .35rem;
    font-size: .8125rem;
    line-height: 1.5;
    font-weight: 500;
    white-space: nowrap;
}

.badge .icon {
    width: 1rem;
    height: 1rem;
}

.badge.positive {
    background: #eaf5ee;
    color: var(--green);
}

.badge.warning, .orange {
    background: #fff3e7;
    color: var(--orange);
}

.badge.neutral {
    background: #eef2f5;
    color: #5a6b78;
}

.badge.blue-badge {
    background: var(--blue-light);
    color: var(--primary);
}

.avatar {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: #eef2f5;
    color: #63727c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.avatar.blue {
    background: var(--blue-light);
    color: var(--primary);
}

.avatar.square {
    border-radius: .65rem;
}

.avatar.large {
    width: 4rem;
    height: 4rem;
    font-size: 1.25rem;
}

.back-link, .text-link {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    font-size: .875rem;
    font-weight: 500;
}

.back-link {
    color: var(--muted);
}

.notice {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 1.1rem;
    border: 1px solid transparent;
    border-radius: .6rem;
    margin-bottom: 1.5rem;
    font-size: .9375rem;
    line-height: 1.6;
}

.notice>.icon {
    margin-top: .15rem;
}

.notice p+p {
    margin-top: .3rem;
}

.notice.info {
    background: #edf7fd;
    border-color: #d3eaf7;
    color: #38657f;
}

.notice.error {
    background: #fff1f0;
    border-color: #f3ceca;
    color: #9a3434;
}

.notice.success {
    background: #edf8f0;
    border-color: #cee8d5;
    color: #306b46;
}

.notice code {
    overflow-wrap: anywhere;
}

/* Navigation */
.app-shell {
    min-height: 100dvh;
}

.sidebar {
    width: var(--sidebar-width);
    background: white;
    border-right: 1px solid var(--line);
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    padding: 2.1rem 1.7rem 1.65rem;
}

.sidebar-brand img {
    display: block;
    width: 100%;
    height: auto;
}

.brand-caption {
    display: block;
    color: #7e8c98;
    font-size: .75rem;
    letter-spacing: .2em;
    font-weight: 500;
    margin-top: 1.3rem;
    padding-top: 1rem;
    border-top: 1px solid #edf1f4;
}

.main-nav {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    padding: 0 .9rem 1rem;
}

.nav-label {
    display: block;
    font-size: .75rem;
    letter-spacing: .095em;
    font-weight: 500;
    color: #7b8a96;
    margin: .55rem .85rem .75rem;
}

.nav-link {
    display: flex;
    width: 100%;
    gap: .8rem;
    align-items: center;
    border: 0;
    background: transparent;
    padding: .82rem .85rem;
    margin: .15rem 0;
    border-radius: .5rem;
    color: #5c6a76;
    font-size: .9375rem;
    text-align: left;
    min-height: 2.9rem;
    line-height: 1.4;
}

.nav-link:hover {
    color: var(--primary);
    background: #f2f8fc;
}

.nav-link.active {
    color: white;
    background: var(--primary);
    box-shadow: 0 3px 6px #007dbb16;
}

.nav-link.active .icon {
    color: white;
}

.nav-group summary {
    list-style: none;
}

.nav-group summary::-webkit-details-marker {
    display: none;
}

.nav-group summary>.icon:last-child {
    width: .95rem;
    height: .95rem;
    margin-left: auto;
}

.nav-group[open] summary>.icon:last-child {
    transform: rotate(180deg);
}

.nav-group .nav-link {
    gap: .65rem;
}

.nav-group .nav-link span {
    flex: 1;
}

.nav-link.group-active {
    color: var(--primary);
    font-weight: 500;
}

.subnav {
    margin: .2rem 0 .65rem 1.4rem;
    padding-left: 1rem;
    border-left: 1px solid #dae6ee;
}

.subnav-link {
    display: block;
    position: relative;
    padding: .68rem .4rem .68rem .55rem;
    border-radius: .35rem;
    color: #6b7782;
    font-size: .875rem;
    line-height: 1.35;
}

.subnav-link.active {
    background: var(--blue-light);
    color: var(--primary);
    font-weight: 500;
}

.subnav-link.active::before {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    left: -1.2rem;
    top: 50%;
}

.subnav-link:hover {
    color: var(--primary);
    background: #f3f9fc;
}

.nav-bottom {
    margin-top: auto;
    padding-top: 1.2rem;
}

.logout:hover {
    color: var(--red);
    background: #fcf1f1;
}

.sidebar-footer {
    display: flex;
    align-items: center;
    gap: .6rem;
    border-top: 1px solid var(--line);
    padding: 1.2rem 1.6rem;
}

.sidebar-footer strong {
    display: block;
    font-size: .8125rem;
    font-weight: 500;
}

.sidebar-footer div>span {
    display: block;
    color: var(--muted);
    font-size: .75rem;
    margin-top: .15rem;
}

.small-logo {
    font-family: var(--heading-font);
    color: var(--brand);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.workspace {
    margin-left: var(--sidebar-width);
    min-width: 0;
}

.topbar {
    min-height: 5.25rem;
    background: white;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 2.5rem;
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-left, .topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.topbar-left {
    font-size: .875rem;
}

.topbar-label {
    color: var(--muted);
}

.breadcrumb-divider {
    color: #b6c1ca;
}

.topbar-page {
    font-weight: 500;
}

.demo-tag {
    display: inline-flex;
    border: 1px solid #d9e6ef;
    color: #617687;
    border-radius: .35rem;
    padding: .3rem .55rem;
    font-size: .75rem;
    white-space: nowrap;
}

.profile-text {
    text-align: right;
    border-left: 1px solid var(--line);
    padding-left: 1rem;
    max-width: 14rem;
    overflow-wrap: anywhere;
}

.profile-text strong {
    display: block;
    font-size: .875rem;
    font-weight: 500;
}

.profile-text>span {
    font-size: .75rem;
    color: var(--muted);
}

.mobile-menu, .sidebar-close {
    display: none;
}

.content {
    min-height: calc(100dvh - 5.25rem);
    padding: 2.5rem 2.5rem 0;
    display: flex;
    flex-direction: column;
}

.content-inner {
    width: 100%;
    max-width: 97rem;
    margin: 0 auto;
    flex: 1;
}

.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.page-heading h1 {
    margin-bottom: .55rem;
}

.page-heading p {
    color: var(--muted);
    font-size: .9375rem;
}

.page-heading .btn {
    flex-shrink: 0;
}

.heading-count {
    font-family: var(--body-font);
    display: inline-block;
    background: #e7edf2;
    font-size: .9375rem;
    line-height: 1;
    padding: .45rem .65rem;
    vertical-align: middle;
    color: #657685;
    border-radius: .4rem;
    margin-left: .45rem;
    letter-spacing: 0;
}

.workspace-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: #7c8a96;
    font-size: .75rem;
    border-top: 1px solid var(--line);
    padding: 1.4rem 0;
    margin-top: 3rem;
}

.footer-version {
    color: #9aa7b1;
}

/* Overview */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 1.15rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.3rem 1.4rem;
    display: flex;
    flex-direction: column;
    color: var(--ink);
}

a.stat-card:hover {
    border-color: #9dd2ec;
    color: var(--ink);
}

.stat-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    color: #586c7b;
    font-size: .875rem;
}

.stat-top .icon {
    color: #8a9ca9;
}

.stat-card>strong {
    font-family: var(--heading-font);
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.03em;
    margin: .55rem 0 .35rem;
    color: #283b49;
}

.stat-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .3rem;
    color: var(--muted);
    font-size: .8125rem;
}

.stat-bottom .icon {
    width: 1rem;
    height: 1rem;
}

.stat-card.accent {
    background: #e9f6fe;
    border-color: #c5e8fa;
}

.stat-card.accent .stat-top, .stat-card.accent>strong, .stat-card.accent .stat-top .icon {
    color: #007fbf;
}

.stat-card.accent .stat-bottom {
    color: #517b93;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0,1.65fr) minmax(19rem,1fr);
    gap: 1.5rem;
    align-items: start;
}

.panel {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    min-width: 0;
    margin-bottom: 1.5rem;
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: 1.35rem 1.5rem;
    border-bottom: 1px solid #e8edf1;
}

.panel-heading .eyebrow {
    font-size: .75rem;
    margin-bottom: .35rem;
}

.panel-heading>.icon {
    color: #91a4b2;
}

.panel-heading .text-link {
    font-size: .8125rem;
}

.panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e8edf1;
    color: var(--muted);
    font-size: .8125rem;
}

.panel-foot .subtle {
    font-size: .8125rem;
}

.panel-body {
    padding: 1.6rem;
}

.compact-order {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    color: var(--ink);
    border-bottom: 1px solid #edf1f4;
}

.compact-order:last-child {
    border-bottom: 0;
}

.compact-order:hover {
    background: #f8fbfd;
}

.object-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    flex-shrink: 0;
    color: #668396;
    background: #f0f5f8;
    border-radius: .6rem;
}

.object-icon.large {
    width: 3.5rem;
    height: 3.5rem;
    background: var(--blue-light);
    color: var(--primary);
}

.object-icon.large .icon {
    width: 1.8rem;
    height: 1.8rem;
}

.object-icon.orange {
    background: #fff3e7;
    color: var(--orange);
}

.compact-order-main {
    min-width: 0;
    flex: 1;
}

.compact-order-main>strong {
    display: block;
    font-size: .9375rem;
    margin: .15rem 0;
}

.compact-order-main>span:last-child {
    display: block;
    color: var(--muted);
    font-size: .8125rem;
}

.compact-order>.icon {
    width: 1rem;
    height: 1rem;
    color: #99a9b4;
}

.record-meta {
    display: block;
    color: var(--muted);
    font-size: .8125rem;
    line-height: 1.5;
    margin-top: .2rem;
}

.record-meta:first-child {
    margin-top: 0;
}

.count-badge {
    min-width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .45rem;
    font-size: .875rem;
}

.complaint-list {
    padding: 0 1.4rem;
}

.complaint {
    display: flex;
    gap: .8rem;
    padding: 1.35rem 0;
    border-bottom: 1px solid #edf1f4;
}

.complaint:last-child {
    border: 0;
}

.complaint-mark {
    color: #ba7b36;
    padding-top: .2rem;
}

.complaint-mark .icon {
    width: 1.05rem;
    height: 1.05rem;
}

.complaint h3 {
    margin: .45rem 0 .4rem;
    font-size: .9375rem;
    font-weight: 500;
}

.complaint p {
    color: var(--muted);
    font-size: .8125rem;
}

.dashboard-note {
    display: flex;
    align-items: center;
    gap: .9rem;
    border-left: 3px solid #a9d8ef;
    padding: 1rem 1.3rem;
    margin-top: .3rem;
    color: #658094;
    background: #edf3f7;
    border-radius: 0 .5rem .5rem 0;
}

.dashboard-note p {
    font-size: .875rem;
    flex: 1;
    color: #64798a;
}

.dashboard-note p strong {
    color: #4e6779;
}

.dashboard-note .text-link {
    font-size: .8125rem;
    flex-shrink: 0;
}

/* Lists and details */
.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: .9375rem;
}

.data-table th {
    background: #f9fbfc;
    color: #6b7b87;
    font-weight: 500;
    font-size: .8125rem;
    line-height: 1.45;
    padding: .95rem 1.25rem;
    border-bottom: 1px solid var(--line);
}

.data-table td {
    padding: 1.4rem 1.25rem;
    vertical-align: middle;
    border-bottom: 1px solid #e9eef2;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background: #fafcfe;
}

.numeric {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.company-cell {
    display: flex;
    gap: .8rem;
    align-items: center;
    min-width: 13rem;
}

.record-title {
    display: block;
    color: var(--heading);
    font-weight: 500;
    line-height: 1.45;
}

.record-title:hover {
    color: var(--primary);
}

.cell-primary {
    display: block;
    font-weight: 500;
    line-height: 1.4;
}

.number-chip {
    display: inline-block;
    border: 1px solid #e0e8ee;
    border-radius: .4rem;
    padding: .25rem .65rem;
    min-width: 2rem;
    color: #5a7285;
    font-size: .875rem;
}

.actions-cell {
    width: 4.4rem;
    text-align: right;
}

.context-nav {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    border-bottom: 1px solid #dce5ec;
    margin: -.6rem 0 2rem;
}

.context-tabs {
    display: flex;
    overflow-x: auto;
    gap: 1.8rem;
}

.context-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem 0 1rem;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    font-size: .9375rem;
    color: #788b99;
    line-height: 1.5;
    white-space: nowrap;
}

.context-tab.active {
    color: var(--primary);
    border-bottom-color: var(--brand);
    font-weight: 500;
}

.context-tab:disabled {
    opacity: 1;
    color: #718491;
}

.soon {
    font-size: .75rem;
    background: #e8eef3;
    border-radius: .3rem;
    padding: .1rem .35rem;
    color: #677d8d;
}

.title-with-avatar {
    display: flex;
    gap: 1.1rem;
    align-items: center;
    min-width: 0;
}

.detail-heading h1 {
    font-size: 2.15rem;
    overflow-wrap: anywhere;
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
    gap: 1.5rem;
}

.detail-list {
    margin: 0;
    padding: .6rem 1.6rem;
}

.detail-list>div {
    display: grid;
    grid-template-columns: minmax(7rem,.7fr) minmax(0,1.3fr);
    gap: 1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid #edf1f4;
}

.detail-list>div:last-child {
    border-bottom: 0;
}

dt {
    color: var(--muted);
    font-size: .875rem;
}

dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.detail-list dd {
    font-size: .9375rem;
}

.contact-card {
    padding: 1.6rem;
}

.contact-card h3 {
    margin: .9rem 0 .25rem;
    font-size: 1.1rem;
}

.contact-card>p {
    color: var(--muted);
    font-size: .875rem;
    margin-bottom: 1.4rem;
}

.contact-line {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: #5a6b78;
    font-size: .9375rem;
    margin-top: .8rem;
    overflow-wrap: anywhere;
}

.contact-line .icon {
    color: #8b9da9;
}

.contact-line span {
    min-width: 0;
}

.summary-strip {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    border: 1px solid var(--line);
    background: white;
    border-radius: var(--radius);
    padding: 1.5rem;
    gap: 1.5rem;
}

.summary-strip>div {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--line);
}

.summary-strip>div:first-child {
    padding-left: 0;
    border: 0;
}

.summary-strip strong {
    display: block;
    font-family: var(--heading-font);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.1;
    color: var(--heading);
}

.summary-strip>div>span:last-child {
    color: var(--muted);
    font-size: .875rem;
}

.mini-details {
    border-top: 1px solid var(--line);
    padding-top: 1rem;
    margin: 1.5rem 0 0;
}

.mini-details>div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .65rem;
    font-size: .9375rem;
}

/* Forms */
input,select,textarea {
    border: 1px solid #cfdbe3;
    background: white;
    color: var(--ink);
    border-radius: .5rem;
    padding: .85rem .95rem;
    min-height: 3rem;
    width: 100%;
    min-width: 0;
    font-size: 1rem;
}

input::placeholder {
    color: #8796a1;
}

input:focus,select:focus,textarea:focus {
    outline: 2px solid #76c9f2;
    outline-offset: 1px;
    border-color: var(--primary);
}

select {
    appearance: none;
    padding-right: 2.8rem;
    background-image: url('../icons/chevron-down.svg');
    background-position: right .9rem center;
    background-size: 1rem;
    background-repeat: no-repeat;
}

select:disabled {
    background-color: #f5f8fa;
    color: #8a9ba6;
    cursor: not-allowed;
}

label {
    display: block;
    font-size: .875rem;
    color: #4b606f;
    font-weight: 500;
}

.required {
    color: var(--primary);
}

.form-stack {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.form-stack>label:not(:first-child) {
    margin-top: .5rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 1.2rem;
}

.form-grid+.form-grid {
    margin-top: .7rem;
}

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

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.form-panel {
    max-width: 70rem;
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .7rem;
    border-top: 1px solid var(--line);
    padding-top: 1.3rem;
    margin-top: 1.3rem;
}

.form-panel .field-hint {
    margin-top: .5rem;
}

.section-gap {
    margin-top: 1.2rem;
}

.password-wrap {
    position: relative;
}

.password-wrap input {
    padding-right: 3.3rem;
}

.password-toggle {
    position: absolute;
    right: .2rem;
    top: 50%;
    transform: translateY(-50%);
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: none;
    background: transparent;
    color: #8195a3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .4rem;
}

.password-toggle:hover {
    color: var(--primary);
}

.role-note {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .95rem;
    border: 1px solid #d9eaf5;
    background: #f4fafe;
    font-size: .875rem;
    color: #4e7188;
    border-radius: .5rem;
    margin-top: .5rem;
}

.protected-user {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #7b8d9a;
    font-size: .75rem;
}

.protected-user .icon {
    width: 1rem;
    height: 1rem;
}

.steps {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 3rem;
    padding: 0 0 1.4rem;
    margin: 0 0 2rem;
    border-bottom: 1px solid #dfe7ee;
}

.steps li {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .9375rem;
    color: #778c9b;
    font-weight: 500;
}

.steps li>span {
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid #d5e0e8;
    background: #f9fbfd;
    color: #7890a0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .75rem;
}

.steps li.current {
    color: var(--primary);
}

.steps li.current>span {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.steps li.complete>span {
    color: var(--green);
    border-color: #d1e7d8;
    background: #e9f6ed;
}

.order-create-grid {
    display: grid;
    grid-template-columns: minmax(0,1.5fr) minmax(17rem,1fr);
    gap: 1.5rem;
    align-items: start;
}

.selection-panel {
    border-top: 3px solid var(--brand);
}

.selection-panel h3 {
    margin: .5rem 0 .6rem;
}

.selection-panel p {
    color: var(--muted);
    font-size: .875rem;
    margin-bottom: .8rem;
}

.selection-divider {
    border-top: 1px solid var(--line);
    margin: 1.5rem 0;
}

.assignment-strip {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.2rem 1.5rem;
    background: white;
    border: 1px solid var(--line);
    border-radius: .65rem;
    margin-bottom: 1.5rem;
}

.assignment-strip>div {
    display: flex;
    gap: .8rem;
    flex: 1;
    align-items: center;
}

.assignment-strip .icon {
    color: #7896aa;
}

.assignment-strip small {
    display: block;
    color: var(--muted);
    font-size: .8125rem;
}

.assignment-strip strong {
    font-size: .9375rem;
    font-weight: 500;
}

.empty-state {
    padding: 4rem 2rem;
    text-align: center;
    min-height: 25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-symbol {
    width: 4.5rem;
    height: 4.5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #edf7fd;
    color: var(--primary);
    border: 1px solid #dceef9;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}

.empty-symbol .icon {
    width: 2rem;
    height: 2rem;
}

.empty-state h2 {
    font-size: 1.8rem;
    margin-bottom: .8rem;
}

.empty-state>p {
    max-width: 34rem;
    color: var(--muted);
    line-height: 1.7;
}

.empty-state>.badge,.empty-state>.btn {
    margin-top: 1.4rem;
    white-space: normal;
}

.empty-state>.field-hint {
    margin-top: 2rem;
    max-width: 31rem;
    font-size: .8125rem;
}

/* Sign in */
.auth-shell {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    min-height: 100dvh;
}

.auth-brand {
    position: relative;
    overflow: hidden;
    background: #18384f;
    padding: 3.5rem 4.5rem 2rem;
    display: flex;
    flex-direction: column;
    color: white;
    border-top: .4rem solid var(--brand);
}

.auth-brand::after {
    content: '';
    position: absolute;
    right: -19rem;
    bottom: -22rem;
    width: 40rem;
    height: 40rem;
    border: 1px solid #315268;
    border-radius: 50%;
    pointer-events: none;
}

.auth-logo {
    display: inline-block;
    width: 20rem;
    max-width: 100%;
    background: white;
    padding: 1.05rem 1.2rem;
    border-radius: .5rem;
    align-self: flex-start;
}

.auth-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.auth-brand-content {
    margin: auto 0;
    padding: 5rem 0;
    position: relative;
    z-index: 1;
}

.auth-brand-content h1 {
    color: white;
    font-family: var(--heading-font);
    font-size: clamp(3rem,4.5vw,5.25rem);
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: 1.08;
    margin: 1.2rem 0 1.5rem;
}

.auth-brand-content>p {
    color: #b6cad8;
    font-size: 1.0625rem;
    line-height: 1.8;
}

.brand-rule {
    width: 3rem;
    height: 3px;
    background: var(--brand);
    margin: 2.2rem 0;
}

.brand-signature {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .875rem;
    color: #b6d1e1;
}

.brand-signature .icon {
    color: #61bde9;
}

.auth-brand-footer {
    font-size: .75rem;
    color: #aac3d3;
    z-index: 1;
}

.auth-panel {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    background: #fbfcfe;
}

.auth-card {
    width: 100%;
    max-width: 28rem;
    margin: auto;
    padding: 3rem 0;
}

.auth-symbol {
    width: 3.3rem;
    height: 3.3rem;
    border-radius: .75rem;
    background: var(--blue-light);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.6rem;
}

.auth-symbol .icon {
    width: 1.4rem;
    height: 1.4rem;
}

.auth-card h2 {
    font-size: 2.4rem;
    letter-spacing: -.025em;
    font-weight: 600;
    margin: .7rem 0 .8rem;
}

.auth-intro {
    color: var(--muted);
    font-size: .9375rem;
    margin-bottom: 2rem;
}

.label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.label-row a {
    font-size: .8125rem;
}

.input-icon {
    position: relative;
}

.input-icon>.icon {
    position: absolute;
    left: .95rem;
    top: 50%;
    transform: translateY(-50%);
    color: #8aa0ae;
    width: 1.1rem;
    height: 1.1rem;
}

.input-icon input {
    padding-left: 2.8rem;
}

.login-submit {
    margin-top: 1.3rem;
}

.auth-note {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    color: #8ca0ac;
    padding-top: 1.6rem;
    margin-top: 1.6rem;
    border-top: 1px solid var(--line);
}

.auth-note p {
    font-size: .8125rem;
    color: #758896;
}

.auth-note .icon {
    width: 1.1rem;
    height: 1.1rem;
}

.auth-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .75rem;
    color: #8395a2;
    max-width: 32rem;
    width: 100%;
    margin: 0 auto;
}

.auth-card>.back-link {
    margin-bottom: 2rem;
    display: flex;
}

.auth-card>.field-hint {
    margin-top: 1rem;
}

/* Confirmation */
.modal {
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: 1.6rem;
    max-width: 29rem;
    width: calc(100% - 2rem);
    color: var(--ink);
    box-shadow: 0 1rem 5rem #17374e33;
}

.modal::backdrop {
    background: #142d4677;
    backdrop-filter: blur(3px);
}

.modal-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.auth-symbol.danger {
    background: #fff0ee;
    color: var(--red);
}

.modal h2 {
    font-size: 1.8rem;
    margin-bottom: .75rem;
}

.modal>p {
    color: var(--muted);
    font-size: .9375rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1.8rem;
}

/* Tablet and mobile */
@media(min-width:1600px) {
    .content {
        padding-top: 3rem;
    }

    .stat-card {
        padding: 1.65rem;
    }
}

@media(max-width:1250px) {
    :root {
        --sidebar-width: 16.4rem;
    }

    .content {
        padding: 2rem 1.5rem 0;
    }

    .topbar {
        padding: 1rem 1.5rem;
    }

    .stat-grid {
        gap: .85rem;
    }

    .stat-card {
        padding: 1.1rem;
    }

    .stat-top {
        min-height: 2.6rem;
    }

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

    .complaint-list {
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 1.4rem;
    }

    .complaint {
        border: 0;
    }

    .dashboard-note {
        flex-wrap: wrap;
    }

    .dashboard-note .text-link {
        margin-left: 2.2rem;
    }

    .order-create-grid {
        grid-template-columns: minmax(0,1.3fr) minmax(16rem,1fr);
    }

    .data-table th,.data-table td {
        padding-left: .9rem;
        padding-right: .9rem;
    }

    .auth-brand {
        padding: 3rem 3rem 2rem;
    }

    .topbar-page {
        display: none;
    }

    .breadcrumb-divider {
        display: none;
    }
}

@media(max-width:1024px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
        width: min(20rem, calc(100vw - 2.5rem));
        z-index: 60;
    }

    body.nav-open {
        overflow: hidden;
    }

    body.nav-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-brand {
        position: relative;
        padding-right: 3rem;
    }

    .sidebar-close {
        display: inline-flex;
        position: absolute;
        right: .1rem;
        top: .7rem;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: #1d354b66;
        z-index: 50;
        backdrop-filter: blur(2px);
    }

    .mobile-menu {
        display: inline-flex;
        margin-left: -.5rem;
    }

    .workspace {
        margin-left: 0;
    }

    .topbar-page {
        display: inline;
    }

    .breadcrumb-divider {
        display: inline;
    }

    .auth-brand {
        padding: 2rem;
    }

    .auth-panel {
        padding: 2rem;
    }

    .auth-footer {
        flex-direction: column;
        gap: .3rem;
    }

    .auth-brand-content h1 {
        font-size: 3.6rem;
    }
}

@media(max-width:760px) {
    h1 {
        font-size: 2.05rem;
    }

    .content {
        padding: 1.5rem 1rem 0;
    }

    .topbar {
        min-height: 4.5rem;
        padding: .7rem 1rem;
    }

    .topbar-left,.topbar-right {
        gap: .65rem;
    }

    .topbar-label {
        display: none;
    }

    .breadcrumb-divider {
        display: none;
    }

    .topbar-page {
        font-size: .875rem;
    }

    .profile-text {
        display: none;
    }

    .page-heading {
        align-items: flex-start;
        margin-bottom: 1.5rem;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .page-heading p {
        font-size: .875rem;
    }

    .page-heading .btn {
        min-height: 2.75rem;
        font-size: .875rem;
        padding: .7rem .9rem;
    }

    .stat-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: .8rem;
        margin-bottom: 1.5rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .stat-top {
        min-height: 2.6rem;
        font-size: .8125rem;
    }

    .stat-top .icon {
        width: 1.15rem;
        height: 1.15rem;
    }

    .stat-card>strong {
        font-size: 2.5rem;
    }

    .stat-bottom {
        font-size: .75rem;
    }

    .panel-heading {
        padding: 1.1rem;
    }

    .panel-heading h2 {
        font-size: 1.25rem;
    }

    .panel-body {
        padding: 1.2rem;
    }

    .panel-foot {
        padding: 1rem 1.1rem;
        flex-wrap: wrap;
    }

    .dashboard-grid,.detail-grid,.order-create-grid {
        grid-template-columns: minmax(0,1fr);
        gap: 0;
    }

    .compact-order {
        padding: 1.1rem;
        gap: .7rem;
        flex-wrap: wrap;
    }

    .compact-order>.object-icon {
        width: 2.3rem;
        height: 2.3rem;
    }

    .compact-order-main {
        flex-basis: calc(100% - 5rem);
    }

    .compact-order>.badge {
        margin-left: 3rem;
    }

    .compact-order>.icon {
        margin-left: auto;
    }

    .complaint-list {
        display: block;
        padding: 0 1.2rem;
    }

    .complaint {
        border-bottom: 1px solid var(--line);
    }

    .dashboard-note {
        padding: 1rem;
        align-items: flex-start;
    }

    .dashboard-note p {
        flex-basis: calc(100% - 3rem);
    }

    .dashboard-note .text-link {
        margin-left: 2.2rem;
    }

    .table-wrap {
        overflow: visible;
    }

    .responsive-table, .responsive-table tbody {
        display: block;
    }

    .responsive-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
    }

    .responsive-table tbody tr {
        display: block;
        padding: 1.2rem;
        border-bottom: 1px solid var(--line);
    }

    .responsive-table tbody tr:last-child {
        border-bottom: 0;
    }

    .responsive-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        gap: 1rem;
        padding: .5rem 0;
        border: 0;
        width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .responsive-table td::before {
        content: attr(data-label);
        color: #788994;
        font-size: .8125rem;
        font-weight: 400;
        text-align: left;
        flex-shrink: 0;
        max-width: 45%;
    }

    .responsive-table td:first-child {
        display: block;
        text-align: left;
        border-bottom: 1px solid #edf1f4;
        margin-bottom: .5rem;
        padding-bottom: 1rem;
    }

    .responsive-table td:first-child::before {
        display: none;
    }

    .responsive-table td[data-label="Ansprechpartner"], .responsive-table td[data-label="Kunde / Objekt"] {
        display: block;
        text-align: left;
    }

    .responsive-table td[data-label="Ansprechpartner"]::before, .responsive-table td[data-label="Kunde / Objekt"]::before {
        display: block;
        margin-bottom: .3rem;
    }

    .responsive-table .company-cell {
        min-width: 0;
    }

    .responsive-table .company-cell>span:last-child {
        min-width: 0;
    }

    .responsive-table .record-meta {
        overflow-wrap: anywhere;
    }

    .responsive-table .actions-cell {
        padding-bottom: 0;
    }

    .context-nav {
        margin-top: 0;
    }

    .context-tabs {
        gap: 1.4rem;
    }

    .detail-heading h1 {
        font-size: 1.9rem;
    }

    .title-with-avatar {
        gap: .8rem;
        align-items: flex-start;
    }

    .title-with-avatar>.avatar {
        width: 3rem;
        height: 3rem;
        font-size: 1rem;
    }

    .detail-list {
        padding: .4rem 1.2rem;
    }

    .summary-strip {
        grid-template-columns: minmax(0,1fr);
        padding: 1.2rem;
        gap: 1rem;
    }

    .summary-strip>div {
        padding: 1rem 0 0;
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .summary-strip strong {
        display: inline;
        margin-right: .5rem;
        font-size: 1.6rem;
    }

    .summary-strip>div>span:last-child {
        display: flex;
        align-items: center;
    }

    .steps {
        gap: 1rem;
    }

    .steps li {
        font-size: .8125rem;
        gap: .5rem;
    }

    .steps li>span {
        width: 1.8rem;
        height: 1.8rem;
    }

    .assignment-strip {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
        padding: 1.2rem;
    }

    .form-grid {
        grid-template-columns: minmax(0,1fr);
        gap: 1rem;
    }

    .form-actions .btn {
        flex: 1;
    }

    .empty-state {
        padding: 3rem 1.2rem;
        min-height: 22rem;
    }

    .empty-state h2 {
        font-size: 1.65rem;
    }

    .workspace-footer {
        flex-direction: column;
        font-size: .75rem;
        gap: .4rem;
        margin-top: 2rem;
    }

    .auth-shell {
        grid-template-columns: minmax(0,1fr);
    }

    .auth-brand {
        padding: 1.25rem 1.5rem;
        min-height: auto;
        border-top-width: .3rem;
        background: white;
        border-bottom: 1px solid var(--line);
    }

    .auth-logo {
        width: 14rem;
        padding: 0;
    }

    .auth-brand-content, .auth-brand-footer, .auth-brand::after {
        display: none;
    }

    .auth-panel {
        padding: 1.5rem;
        min-height: calc(100dvh - 5.25rem);
    }

    .auth-card {
        padding: 1.7rem 0 2.5rem;
        margin: auto;
    }

    .auth-card h2 {
        font-size: 2.15rem;
    }

    .auth-footer {
        text-align: center;
    }
}

@media(max-width:380px) {
    .demo-tag {
        display: none;
    }

    .topbar-page {
        font-size: .8125rem;
    }

    .stat-card {
        padding: .8rem;
    }

    .stat-top .icon {
        display: none;
    }

    .steps {
        flex-direction: column;
        align-items: flex-start;
    }

    .detail-list>div {
        grid-template-columns: minmax(0,1fr);
        gap: .3rem;
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto;
    }

    *,*::before,*::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Kundenverwaltung */
.customer-form {
    max-width: 66rem;
}

.customer-form-note {
    color: var(--muted);
    font-size: .875rem;
    margin: 0 0 1.25rem;
}

.customer-form-fields {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.customer-form .panel-heading>.icon {
    color: var(--primary);
}

.customer-fields-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 1.3rem 1.6rem;
}

.customer-fields-grid .field {
    min-width: 0;
}

.customer-postal-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(7rem,.45fr) minmax(0,1.55fr);
    gap: 1.6rem;
}

.customer-phone-hint {
    align-self: center;
}

.customer-form-actions {
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: white;
    flex-wrap: wrap;
}

.customer-form .has-error input, .customer-form .has-error select {
    border-color: var(--red);
}

.field-error {
    color: var(--red);
    font-size: .875rem;
    margin-top: .15rem;
}

.customer-details {
    gap: 0 1.5rem;
}

.customer-details .detail-list>div {
    grid-template-columns: minmax(0,1fr) minmax(0,1.35fr);
}

.customer-details dt {
    overflow-wrap: anywhere;
}

.customer-demo-label {
    color: var(--orange);
}

@media(max-width:760px) {
    .customer-fields-grid {
        grid-template-columns: minmax(0,1fr);
        gap: 1rem;
    }

    .customer-postal-row {
        gap: 1rem;
    }

    .customer-form-actions {
        padding: 1rem;
    }
}

@media(max-width:380px) {
    .customer-postal-row, .customer-details .detail-list>div {
        grid-template-columns: minmax(0,1fr);
    }
}

/* Objektliste und Räume */
.property-form .property-wide, .room-details .property-wide {
    grid-column: 1 / -1;
}

.property-form .property-section-heading, .room-details .property-section-heading {
    background: #edf1f4;
}

.property-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
}

.property-copy {
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: .8125rem;
    padding: .2rem 0;
    flex-shrink: 0;
}

.property-copy:hover {
    text-decoration: underline;
}

.property-copy-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.2rem;
    padding: .35rem 0 1.5rem;
}

.property-copy-bar strong {
    display: block;
    margin-bottom: .25rem;
}

.cleaning-field legend {
    margin-bottom: 1rem;
    font-weight: 500;
}

.cleaning-field legend .field-hint {
    display: block;
    font-weight: 400;
    margin-top: .25rem;
}

.cleaning-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: .7rem;
}

.cleaning-option {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    font-weight: 400;
    font-size: .875rem;
    line-height: 1.45;
    cursor: pointer;
}

.cleaning-option:hover {
    border-color: #89c6e3;
    background: #f6fbfe;
}

.cleaning-option:has(input:checked) {
    border-color: var(--primary);
    background: var(--blue-light);
}

.cleaning-option input {
    width: 1.1rem;
    height: 1.1rem;
    min-height: 0;
    margin: .1rem 0 0;
    padding: 0;
    flex: 0 0 1.1rem;
    accent-color: var(--primary);
}

.cleaning-option span {
    overflow-wrap: anywhere;
}

.property-form .has-error textarea, .property-form .has-error .cleaning-grid {
    border: 1px solid var(--red);
    border-radius: .5rem;
}

.property-form .has-error .cleaning-grid {
    padding: .6rem;
}

.property-form textarea {
    resize: vertical;
    line-height: 1.6;
}

.property-room-heading {
    flex-wrap: wrap;
}

.property-room-heading .field-hint {
    margin-top: .45rem;
}

.property-cell-text {
    display: inline-block;
    max-width: 22rem;
}

.property-delete-link {
    display: flex;
    justify-content: flex-end;
    margin: .75rem 0 1.5rem;
}

.property-delete-link a {
    color: var(--red);
}

.room-details {
    align-items: start;
}

.room-details dd {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.room-details .panel {
    min-width: 0;
}

.property-form .customer-form-actions {
    position: sticky;
    bottom: .7rem;
    z-index: 5;
    box-shadow: 0 4px 24px #233d5214;
}

@media (max-width: 1250px) {
    .cleaning-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 760px) {
    .property-copy-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .property-copy-bar .btn {
        width: 100%;
    }

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

    .property-form .customer-form-actions {
        position: static;
        box-shadow: none;
    }

    .property-form .customer-form-actions .btn {
        flex: 1 1 100%;
    }

    .property-label {
        flex-wrap: wrap;
        gap: .25rem .75rem;
    }

    .property-room-heading .btn {
        width: 100%;
    }

    .room-details .detail-list>div {
        grid-template-columns: minmax(0,1fr);
        gap: .3rem;
    }
}

/* Sichtbare Hinzufügen-Aktionen im Seitenkopf */
.property-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .75rem;
}

@media (max-width: 760px) {
    .property-heading-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .property-heading-actions .btn {
        flex: 1 1 auto;
    }
}

/* Kundenarchiv und Feldanpassungen */
.customer-list-actions,
.field-option-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
}
.btn.secondary.customer-archive-button {
    color: var(--red);
}
.archive-notice {
    align-items: center;
    flex-wrap: wrap;
}
.archive-notice p {
    flex: 1;
    min-width: 12rem;
}
.field-top-menu {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}
.field-settings-grid {
    display: grid;
    grid-template-columns: minmax(14rem, 19rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.field-settings-content {
    min-width: 0;
}
.field-settings-nav nav {
    padding: .55rem;
}
.field-nav-section {
    display: block;
    padding: 1.1rem .8rem .45rem;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 500;
}
.field-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .9rem .8rem;
    border-radius: .5rem;
    color: var(--ink);
    font-size: .875rem;
    overflow-wrap: anywhere;
}
.field-nav-link.active {
    color: var(--primary);
    background: var(--blue-light);
    font-weight: 500;
}
.field-nav-link:hover {
    background: #f2f8fc;
}
.field-nav-link .icon {
    width: 1rem;
    height: 1rem;
}
.field-option-add,
.field-option-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.field-option-add {
    margin-top: 1.4rem;
    align-items: flex-end;
}
.field-option-add > .field,
.field-option-row > .field {
    flex: 1;
    min-width: 0;
}
.field-option-row {
    padding: 1rem 1.6rem;
    border-top: 1px solid var(--line);
}
.field-option-row .field-hint {
    margin-top: .3rem;
}
.field-option-empty {
    padding: 1.4rem 1.6rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
}
.field-option-actions .icon-button {
    min-height: 2.9rem;
}
.field-option-actions button:disabled {
    color: var(--muted);
}
@media (max-width: 1100px) {
    .field-settings-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .field-settings-nav nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .field-nav-section {
        grid-column: 1 / -1;
    }
}
@media (max-width: 760px) {
    .field-option-add,
    .field-option-row {
        flex-direction: column;
        gap: .8rem;
    }
    .field-option-add > .field,
    .field-option-row > .field,
    .field-option-add > .btn,
    .field-option-actions {
        width: 100%;
    }
    .field-option-row {
        padding: 1rem 1.2rem;
    }
    .field-option-actions .btn {
        flex: 1;
    }
    .field-nav-link {
        font-size: .8125rem;
        padding: .8rem .6rem;
    }
    .archive-notice .text-link {
        margin-left: 2.05rem;
    }
}

/* Materialverwaltung und Lieferanten */
.inventory-tabs {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}
.inventory-filter {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.inventory-filter > .field:first-of-type {
    flex: 1 1 20rem;
}
.inventory-filter > .field {
    flex: 0 1 15rem;
    min-width: 0;
}
.material-thumb {
    width: 4rem;
    height: 4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3f7fa;
    border: 1px solid var(--line);
    border-radius: .6rem;
    overflow: hidden;
    color: #8da2b1;
    flex-shrink: 0;
}
.material-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.material-thumb > .icon {
    width: 1.8rem;
    height: 1.8rem;
}
.material-table td {
    vertical-align: middle;
}
.material-table td:nth-child(3) {
    min-width: 12rem;
}
.material-product-details {
    min-width: 0;
}
.material-stock-form {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 16rem;
	max-width: 100%;
	min-width: 0;
}
.material-stock-actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: .25rem;
}
.material-stock-actions .icon-button {
	width: 2.75rem;
	height: 2.75rem;
	padding: .5rem;
	color: var(--primary);
}
.material-stock-ellipsis {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	transform: translateY(-.2rem);
}
.material-stock-value {
	flex: 1 1 0;
	min-width: 0;
	min-height: 2.75rem;
	padding: .2rem .4rem;
	font-size: 1.65rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
}
.material-stock-value[readonly] {
	border-color: transparent;
	background: transparent;
	cursor: default;
	outline: none;
}
.material-stock-form.is-critical .material-stock-value[readonly] {
	color: var(--orange);
}
.material-stock-form.is-editing .material-stock-value {
	border-color: var(--primary);
}
.material-stock-value.is-long {
	font-size: 1rem;
}
.material-table tr[id] {
	scroll-margin-top: 6rem;
}
.inventory-form .property-wide {
    grid-column: 1 / -1;
}
.inventory-checkbox-field {
    justify-content: flex-end;
}
.inventory-checkbox {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 2.9rem;
    font-weight: 500;
    cursor: pointer;
}
.inventory-checkbox input {
    width: 1.15rem;
    height: 1.15rem;
    min-height: 0;
    flex: 0 0 1.15rem;
    padding: 0;
    accent-color: var(--primary);
}
.inventory-checkbox small {
    display: block;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--muted);
    margin-top: .15rem;
}
.inventory-form .has-error input,
.inventory-form .has-error select {
    border-color: var(--red);
}
.inventory-supplier-link {
    justify-content: center;
    gap: .5rem;
}
.material-image-editor {
    display: flex;
    align-items: flex-start;
    gap: 1.8rem;
}
.material-image-preview {
    width: 15rem;
    height: 15rem;
    flex: 0 0 15rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    overflow: hidden;
    background: #f4f7fa;
}
.material-image-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.material-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: .8rem;
    font-size: .875rem;
    color: var(--muted);
}
.material-image-placeholder > .icon {
    width: 2.8rem;
    height: 2.8rem;
    color: #9cabb6;
}
.material-image-controls {
    flex: 1;
    min-width: 0;
}
.material-image-controls input[type="file"] {
    padding: .7rem;
    font-size: .875rem;
}
.material-image-controls input::file-selector-button {
    border: 0;
    background: var(--blue-light);
    color: var(--primary);
    border-radius: .3rem;
    padding: .5rem;
    margin-right: .6rem;
    cursor: pointer;
}
.material-image-preview.image-removal {
    opacity: .35;
}
.inventory-delete-link {
    margin-top: 1.5rem;
}
.supplier-product-table {
    font-size: .875rem;
}
.supplier-product-table th,
.supplier-product-table td {
    padding: 1.1rem .9rem;
    overflow-wrap: anywhere;
}
.inventory-price {
    white-space: nowrap;
}
@media (max-width: 760px) {
    .inventory-filter {
        align-items: stretch;
    }
    .inventory-filter > .field:first-of-type {
        flex-basis: 100%;
    }
    .inventory-filter > .field {
        flex: 1;
    }
    .material-table td:nth-child(3) {
        min-width: 0;
    }
    .material-table td[data-label="Bestand"] {
        display: block;
        text-align: left;
    }
    .material-table td[data-label="Bestand"]::before {
        display: block;
        margin-bottom: .5rem;
        max-width: none;
    }
    .material-stock-form {
        width: 16rem;
        max-width: 100%;
    }
    .material-image-editor {
        flex-direction: column;
        gap: 1.2rem;
    }
    .material-image-preview {
        align-self: center;
        max-width: 100%;
    }
    .material-image-controls {
        width: 100%;
    }
    .supplier-products .panel-heading .btn {
        width: 100%;
    }
    .supplier-product-table th,
    .supplier-product-table td {
        padding: .5rem 0;
    }
    .inventory-price {
        white-space: normal;
    }
}

/* Mobile Materialliste: Produktbilder, Namen und Bestände. */
@media (max-width: 600px) {
	.material-table tbody {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: .75rem;
		padding: .75rem;
	}
	.material-table tbody tr,
	.material-table tbody tr:last-child {
		display: flex;
		flex-direction: column;
		min-width: 0;
		padding: .5rem;
		border: 1px solid var(--line);
		border-radius: .65rem;
		background: var(--white);
	}
	.material-table td,
	.material-table td:first-child {
		display: block;
		width: 100%;
		min-width: 0;
		padding: 0;
		margin: 0;
		border: 0;
		text-align: left;
	}
	.material-table td::before,
	.material-table td[data-label="Bestand"]::before,
	.material-table .material-manufacturer-cell,
	.material-table .material-details-cell,
	.material-table .record-meta {
		display: none;
	}
	.material-table .material-thumb {
		display: flex;
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		margin-bottom: .65rem;
		background: var(--white);
	}
	.material-table .material-thumb img {
		aspect-ratio: 1;
		height: auto;
		object-fit: contain;
	}
	.material-table .material-thumb > .icon {
		width: 3rem;
		height: 3rem;
	}
	.material-table .material-name-cell {
		flex: 1;
		margin-bottom: .6rem;
	}
	.material-table .record-title {
		font-size: .9375rem;
		font-weight: 600;
		line-height: 1.4;
		overflow-wrap: anywhere;
	}
	.material-stock-form {
		width: 100%;
		gap: .25rem;
	}
	.material-stock-actions {
		gap: .2rem;
	}
	.material-stock-actions .icon-button {
		width: 2rem;
		height: 2.75rem;
		min-width: 2rem;
		padding: .3rem;
	}
	.material-stock-value {
		padding: .2rem;
		font-size: 1.5rem;
	}
	.material-stock-value.is-long {
		font-family: var(--heading-font);
		font-size: .875rem;
	}
	.material-stock-form.is-editing .material-stock-value.is-long {
		font-size: 1rem;
	}
}
@media (max-width: 559px) {
	.material-table tbody {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 359px) {
	.material-table tbody {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 389px) {
	.material-stock-value.is-long[readonly] {
		font-size: .75rem;
	}
}