/* Shared Wawi styles. See docs/OBERFLAECHE.md for component ownership.
   Shop styles are maintained separately in shop.css. */

:root {
    color-scheme: light;
    --bg: #f4f6f8;
    --panel: #ffffff;
    --panel-soft: #f8fafc;
    --text: #18212f;
    --muted: #617080;
    --border: #d9e0e8;
    --accent: #1f6fb8;
    --accent-soft: #e8f2fb;
    --ok: #126b42;
    --ok-soft: #e7f4ed;
    --warn: #8a5a00;
    --warn-soft: #fff7df;
    --danger: #9d2f2f;
    --danger-soft: #fdecec;
    --code: #eef2f6;
    --wawi-chrome: #f0f3f6;
    --wawi-head: #edf1f5;
    --wawi-line: #cbd3dc;
    --wawi-line-dark: #aeb9c5;
    --wawi-blue: #246aa5;
    --wawi-blue-dark: #194f7c;
    --wawi-blue-soft: #e7f0f8;
    --wawi-focus: #8bb8dc;
    --wawi-input: #ffffff;
}

* {
    box-sizing: border-box;
}

/* Author display rules must not override filtering, tabs or hidden inputs. */

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.35;
}

a {
    color: var(--accent);
    font-weight: 700;
}

.content {
    min-width: 0;
    width: min(1640px, calc(100% - 22px));
    margin: 11px auto 34px;
}

.page-head {
    margin-bottom: 18px;
}

.page-head h1 {
    margin: 0 0 6px;
    font-size: 30px;
}

.page-head p {
    margin: 0;
    color: var(--muted);
}

.dashboard-head h1 {
    font-size: 34px;
}

.hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px;
    align-items: stretch;
}

.hero-panel h2 {
    font-size: 26px;
}

.status-panel {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-soft);
    padding: 18px;
}

.status-panel span {
    color: var(--muted);
    font-weight: 700;
}

.status-panel strong {
    display: block;
    margin: 6px 0;
    font-size: 22px;
}

.ghost-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    text-decoration: none;
}

.action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.action-card {
    display: grid;
    gap: 6px;
    min-height: 124px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    padding: 18px;
    color: var(--text);
    text-decoration: none;
}

.action-card:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.action-card strong {
    font-size: 20px;
}

.action-card span {
    color: var(--muted);
    font-weight: 400;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.admin-card {
    display: grid;
    gap: 8px;
    min-height: 122px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-soft);
    padding: 16px;
    color: var(--text);
    text-decoration: none;
}

.admin-card:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.admin-card strong {
    font-size: 18px;
}

.admin-card span {
    color: var(--muted);
    font-weight: 400;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 22px;
    margin-bottom: 18px;
}

.panel-flash {
    padding: 0;
    border: 0;
    background: transparent;
}

.panel h2 {
    margin: 0 0 12px;
    font-size: 20px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.tile {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
}

.tile strong {
    display: block;
    font-size: 18px;
    margin-bottom: 4px;
}

.tile span {
    color: var(--muted);
}

.tile .metric {
    margin: 8px 0 2px;
    color: var(--text);
    font-size: 20px;
    font-weight: 700;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.module-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    padding: 16px;
}

.module-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.module-card strong {
    font-size: 18px;
}

.module-card p {
    margin: 6px 0;
}

.module-ok {
    border-left: 5px solid var(--ok);
}

.module-warn {
    border-left: 5px solid var(--warn);
}

.module-danger {
    border-left: 5px solid var(--danger);
}

.module-neutral {
    border-left: 5px solid #8b98a7;
}

.notice {
    border: 1px solid #ecd59a;
    background: var(--warn-soft);
    color: var(--warn);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 12px 0;
}

.safe {
    border: 1px solid #acd8bd;
    background: var(--ok-soft);
    color: var(--ok);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 12px 0;
}

.empty-state {
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--panel-soft);
    padding: 18px;
}

.empty-state strong {
    display: block;
    margin-bottom: 5px;
}

.breadcrumb {
    color: var(--muted);
    font-size: 13px;
    margin: 0 0 8px;
}

.toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.toolbar-row form {
    margin: 0;
}

.workspace-shell {
    display: grid;
    gap: 14px;
}

.product-workbench {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.product-sidebar {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    padding: 16px;
}

.product-sidebar h2 {
    margin: 0 0 6px;
    font-size: 18px;
}

.product-sidebar a {
    border-radius: 7px;
    color: var(--text);
    padding: 8px 9px;
    text-decoration: none;
}

.product-sidebar a.active,
.product-sidebar a:hover {
    background: var(--accent-soft);
    color: #174f85;
}

.side-note {
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
    margin-top: 8px;
    padding-top: 12px;
}

.product-main {
    min-width: 0;
}

.product-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.product-list-panel {
    padding-bottom: 0;
}

.table-shell {
    overflow-x: auto;
    margin: 0 -22px;
}

.work-table {
    min-width: 940px;
}

.empty-list {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 42px 18px;
    text-align: center;
}

.empty-list strong {
    font-size: 20px;
}

.empty-list p {
    max-width: 560px;
    color: var(--muted);
    margin: 0;
}

.rule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.rule-grid div {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-soft);
    padding: 13px;
}

.rule-grid strong,
.rule-grid span {
    display: block;
}

.rule-grid span {
    color: var(--muted);
    margin-top: 4px;
}

.workspace-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

button.button-link {
    font: inherit;
    cursor: pointer;
}

.search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
}

.search-form label {
    display: grid;
    gap: 5px;
    min-width: 220px;
}

.search-form-wide label {
    min-width: 170px;
}

.search-form span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.search-form input,
.search-form select,
.edit-form input,
.edit-form select,
.edit-form textarea {
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    padding: 8px 10px;
    font: inherit;
}

.edit-form {
    display: grid;
    gap: 16px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.edit-form label,
.full-field {
    display: grid;
    gap: 6px;
}

.form-grid .full-field {
    grid-column: 1 / -1;
}

.edit-form label span,
.full-field span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.edit-form textarea {
    resize: vertical;
    min-height: 120px;
}

.edit-form label.check-field {
    display: flex;
    align-items: center;
    align-self: end;
    min-height: 38px;
    gap: 8px;
}

.edit-form label.check-field input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-height: 16px;
    flex: 0 0 16px;
    margin: 0;
}

.edit-form small {
    color: var(--muted);
    font-size: 12px;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    padding: 14px 0 0;
}

.pagination a,
.pagination span {
    min-height: 34px;
}

.mini-image {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
}

.detail-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.detail-kpis div {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-soft);
    padding: 13px;
}

.detail-kpis span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.detail-kpis strong {
    display: block;
    margin-top: 4px;
}

.work-table td .badge,
.detail-kpis .badge {
    white-space: nowrap;
}

.work-table td {
    max-width: 360px;
}

.work-table td:nth-child(2) {
    min-width: 220px;
}

.actions-cell {
    white-space: nowrap;
}

.actions-cell a + a {
    margin-left: 10px;
}

.page-head + .panel .notice {
    margin-top: 0;
}

.filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.disabled-control {
    display: grid;
    gap: 5px;
}

.disabled-control span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.disabled-control input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--panel-soft);
    color: var(--muted);
    min-height: 38px;
    padding: 8px 10px;
}

.source-box {
    overflow-x: auto;
}

.source-table {
    min-width: 980px;
}

.workspace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.workspace-section {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-soft);
    padding: 14px;
}

.workspace-section strong {
    display: block;
    margin-bottom: 8px;
}

.workspace-section dl,
.tab-panel dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 5px 10px;
    margin: 0;
}

.workspace-section dt,
.tab-panel dt {
    color: var(--muted);
    font-weight: 700;
}

.workspace-section dd,
.tab-panel dd {
    margin: 0;
}

.detail-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.record-layout {
    margin-bottom: 18px;
}

.record-panel {
    height: 100%;
    margin-bottom: 0;
}

.record-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.record-header h1,
.record-header h2 {
    margin: 0 0 6px;
}

.record-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.record-meta div {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-soft);
    padding: 12px;
}

.record-meta span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.record-meta strong {
    display: block;
    margin-top: 4px;
}

.placeholder-detail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.placeholder-detail div {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-soft);
    padding: 12px;
}

.placeholder-detail span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.placeholder-detail strong {
    display: block;
    margin-top: 4px;
}

.fallback-image {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-soft);
    padding: 16px;
    text-align: center;
}

.fallback-image img {
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.fallback-image figcaption {
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
}

.media-carousel {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-soft);
    padding: 10px;
    text-align: center;
}

.media-carousel-stage {
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
}

.media-carousel-stage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.media-carousel-controls {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    gap: 5px;
    align-items: center;
    margin-top: 6px;
}

.media-carousel-controls > button,
.media-carousel-dots button {
    min-width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
    color: var(--wawi-blue-dark);
    cursor: pointer;
}

.media-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.media-carousel-dots button {
    padding: 2px;
}

.media-carousel-dots button.is-active {
    border-color: var(--wawi-blue);
    box-shadow: 0 0 0 1px var(--wawi-blue);
}

.media-carousel-dots img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.media-carousel figcaption {
    margin-top: 6px;
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabs {
    display: grid;
    gap: 12px;
}

.tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tab-link {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 10px;
    background: #fff;
    text-decoration: none;
    color: var(--text);
    font-size: 13px;
}

.tab-panel {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-soft);
    padding: 16px;
}

.tab-panel h3 {
    margin: 0 0 8px;
}

.tabs-panel {
    display: grid;
    gap: 14px;
}

.tab-panel-head {
    margin-bottom: 10px;
}

.tab-panel-head h3 {
    margin: 0 0 4px;
}

.text-block {
    display: grid;
    gap: 10px;
}

.text-block h4 {
    margin: 0;
    font-size: 15px;
}

.text-block p {
    margin: 0;
    white-space: pre-wrap;
}

.form-section {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-soft);
    padding: 16px;
}

.form-section h2 {
    margin: 0 0 10px;
}

.form-section + .form-section {
    margin-top: 4px;
}

.form-row {
    display: grid;
    gap: 8px;
}

.checkbox-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.save-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.96);
    padding: 14px 0 0;
}

.validation-errors ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted);
    font-size: 13px;
    text-transform: uppercase;
}

code,
.code {
    background: var(--code);
    border-radius: 5px;
    padding: 2px 5px;
    font-family: Consolas, monospace;
}

.compact-list {
    display: grid;
    gap: 6px;
}

.badge {
    display: inline-block;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 700;
}

.badge-ok {
    background: var(--ok-soft);
    color: var(--ok);
}

.badge-warn {
    background: var(--warn-soft);
    color: var(--warn);
}

.badge-danger {
    background: var(--danger-soft);
    color: var(--danger);
}

.badge-neutral {
    background: #eef2f6;
    color: #53606f;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.chip {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 7px;
    background: #ffffff;
    font-size: 13px;
}

.chip-muted {
    background: var(--panel-soft);
    color: var(--text);
}

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

.fallback-note {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.fallback-note img {
    width: 72px;
    height: 72px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

details {
    margin-top: 8px;
}

summary {
    cursor: pointer;
    font-weight: 700;
}

/* OPERATIVE WAWI WORKSPACES */

.wawi-page-head h1 {
    margin-bottom: 2px;
}

.wawi-workspace {
    border: 1px solid var(--wawi-line-dark);
    background: #fff;
    overflow: clip;
}

.wawi-record-strip {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    border-bottom: 1px solid var(--wawi-line-dark);
    background: linear-gradient(#f8fafc, #eef2f6);
}

.record-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.record-thumb {
    flex: 0 0 66px;
    border: 1px solid var(--wawi-line);
    border-radius: 4px;
    background: #fff;
    padding: 5px;
}

.record-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.record-title-block {
    min-width: 0;
}

.record-kicker {
    margin-bottom: 2px;
    color: #6b7886;
    font-weight: 800;
    letter-spacing: .08em;
}

.record-title-block h1 {
    margin: 0;
    max-width: 720px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.record-subline {
    display: flex;
    flex-wrap: wrap;
    color: #536170;
}

.record-subline > * {
    display: inline-flex;
    align-items: center;
}

.record-subline > * + *::before {
    content: "";
    width: 1px;
    height: 12px;
    margin: 0 9px;
    background: var(--wawi-line);
}

.record-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(105px, 1fr));
    min-width: 470px;
    border: 1px solid var(--wawi-line);
    background: #fff;
}

.record-facts > div + div {
    border-left: 1px solid var(--wawi-line);
}

.record-facts span {
    display: block;
    margin-bottom: 3px;
    color: #687686;
    font-weight: 700;
    text-transform: uppercase;
}

.record-facts strong {
    display: flex;
    align-items: center;
    min-height: 22px;
    white-space: nowrap;
}

.status-dot {
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: #8e99a5;
}

.status-dot-ok {
    background: var(--ok);
}

.wawi-edit-form {
    gap: 0;
}

.workspace-tabs {
    min-width: 0;
    min-height: 0;
    background: #fff;
}

.workspace-tabbar {
    align-items: end;
    min-height: 39px;
    border-bottom: 1px solid var(--wawi-line-dark);
}

.workspace-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: #344252;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.workspace-tab.is-active {
    z-index: 1;
}

.workspace-tab.is-active::after {
    content: "";
    position: absolute;
}

.workspace-tab b {
    border-radius: 10px;
    background: #dce3ea;
    color: #506070;
    text-align: center;
}

.workspace-tab.is-active b {
    background: var(--wawi-blue-soft);
    color: var(--wawi-blue-dark);
}

.workspace-panels {
    min-width: 0;
    min-height: 0;
}

.workspace-panel {
    min-width: 0;
    padding: 14px;
}

.workspace-panel[hidden] {
    display: none !important;
}

.wawi-section-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: start;
}

.wawi-section-grid.single-top {
    grid-template-columns: minmax(0, 2fr) minmax(260px, .75fr);
}

.wawi-section {
    min-width: 0;
    border: 1px solid var(--wawi-line);
    background: #fff;
}

.wawi-section.span-2 {
    grid-column: 1;
}

.wawi-section.compact {
    grid-column: 2;
}

.wawi-section.flat {
    border: 0;
}

.wawi-section-head {
    border-bottom: 1px solid var(--wawi-line);
    background: var(--wawi-chrome);
}

.wawi-section-head h2 {
    margin: 0;
}

.wawi-section-head p {
    margin: 2px 0 0;
    color: #6c7886;
}

.wawi-section .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.wawi-field {
    display: grid;
    grid-template-rows: auto auto auto;
    min-width: 0;
}

.wawi-field.field-wide {
    grid-column: 1 / -1;
}

.field-label {
    color: #445260 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.field-label b {
    margin-left: 3px;
    color: var(--danger);
}

.wawi-field input,
.wawi-field select,
.wawi-field textarea {
    width: 100%;
    border: 1px solid var(--wawi-line-dark);
    background: var(--wawi-input);
    color: var(--text);
    font: inherit;
    line-height: 1.35;
    box-shadow: inset 0 1px 2px rgba(24, 33, 47, .04);
}

.wawi-field textarea {
    resize: vertical;
}

.wawi-field input:focus,
.wawi-field select:focus,
.wawi-field textarea:focus {
    outline: 2px solid rgba(36, 106, 165, .18);
    border-color: var(--wawi-focus);
}

.wawi-field input[readonly],
.wawi-field input:disabled,
.wawi-field select:disabled,
.wawi-field textarea:disabled,
.readonly-value {
    background: #f1f3f5;
    color: #687584;
}

.readonly-value {
    border: 1px solid var(--wawi-line);
}

.field-hint,
.field-error {
    min-height: 14px;
    font-size: 10px !important;
    line-height: 1.25;
}

.field-hint {
    color: #778493 !important;
}

.field-error {
    color: var(--danger) !important;
    font-weight: 700;
}

.field-invalid input,
.field-invalid select,
.field-invalid textarea {
    border-color: #c75a5a;
    background: #fff8f8;
}

.field-with-unit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
}

.field-with-unit input {
    border-radius: 3px 0 0 3px;
}

.field-with-unit > span {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wawi-line-dark);
    border-left: 0;
    border-radius: 0 3px 3px 0;
    background: var(--wawi-chrome);
    color: #5f6d7b;
    font-weight: 700;
}

.relation-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 31px;
}

.relation-control input {
    border-radius: 3px 0 0 3px;
}

.relation-button,
.relation-add {
    border: 1px solid var(--wawi-line-dark);
    background: var(--wawi-chrome);
    color: #536170;
    font: inherit;
}

.relation-button {
    border-left: 0;
}

.relation-add {
    border-left: 0;
}

.relation-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px 10px 6px;
}

.relation-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border: 1px solid #b7c8d8;
    border-radius: 3px;
    background: #eef5fb;
    color: #264b6b;
    font-size: 11px;
}

.relation-chip span {
    overflow: hidden;
    padding: 4px 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relation-chip button {
    align-self: stretch;
    border: 0;
    border-left: 1px solid #c7d6e3;
    background: transparent;
}

.relation-empty {
    color: var(--muted);
    font-size: 11px;
}

.relation-actions {
    display: flex;
    gap: 5px;
    padding: 4px 10px 10px;
}

.section-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--wawi-line);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    background: var(--wawi-chrome);
}

.section-toolbar h3 {
    margin: 0;
}

.section-toolbar p {
    margin: 1px 0 0;
    color: #6a7785;
}

.section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.mini-button,
.operation-button {
    border: 1px solid var(--wawi-line-dark);
    background: #fff;
    color: #354454;
    font: inherit;
    font-weight: 700;
}

.mini-button:disabled,
.operation-button:disabled {
    color: #8b96a1;
    background: #f2f4f6;
}

.table-empty {
    padding: 24px !important;
    color: var(--muted);
    text-align: center;
}

.stock-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.stock-kpi {
    min-height: 72px;
    border: 1px solid var(--wawi-line);
    border-radius: 4px;
    background: #fff;
    padding: 9px 11px;
}

.stock-kpi span,
.stock-kpi small {
    display: block;
    color: #6d7a88;
    font-size: 10px;
}

.stock-kpi strong {
    display: block;
    margin-top: 3px;
    font-size: 18px;
}

.vertical-actions {
    display: grid;
    gap: 6px;
    padding: 10px;
}

.operation-button {
    text-align: left;
}

.description-workbench .wawi-section .form-grid {
    grid-template-columns: 1fr;
}

.description-workbench textarea[name="description_short"] {
    min-height: 110px;
}

.description-workbench textarea[name="description_long"] {
    min-height: 330px;
    font-family: Arial, Helvetica, sans-serif;
}

.inline-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid var(--wawi-line);
    border-bottom: 0;
    background: #fff;
}

.inline-status-row span {
    padding: 2px 7px;
    border-radius: 10px;
    background: #eef2f6;
    color: #536170;
    font-size: 10px;
    font-weight: 700;
}

.media-workbench {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--wawi-line);
    background: #fff;
}

.media-card {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 8px;
    border: 1px solid var(--wawi-line);
    border-radius: 4px;
    padding: 7px;
}

.media-preview {
    width: 68px;
    height: 68px;
    border: 1px solid #e0e5ea;
    background: #fafbfc;
    padding: 4px;
}

.media-preview img,
.media-empty img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.media-card-body {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
}

.media-card-body strong,
.media-card-body span,
.media-card-body small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-card-body strong {
    font-size: 11px;
}

.media-card-body span,
.media-card-body small {
    color: var(--muted);
    font-size: 10px;
}

.media-empty {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 35px;
    color: var(--muted);
}

.media-empty img {
    width: 90px;
    height: 90px;
}

.sales-channel-list {
    border: 1px solid var(--wawi-line);
    border-radius: 4px;
    overflow: hidden;
}

.channel-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px 110px;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 8px 10px;
    background: #fff;
}

.channel-row + .channel-row {
    border-top: 1px solid var(--wawi-line);
}

.channel-row strong,
.channel-row span {
    display: block;
}

.channel-row strong {
    font-size: 12px;
}

.channel-row span {
    color: var(--muted);
    font-size: 10px;
}

.missing-fields {
    padding: 10px;
}

.missing-fields > strong {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
}

.missing-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.missing-field-grid > div,
.technical-grid > div {
    border: 1px solid var(--wawi-line);
    border-radius: 3px;
    background: #f7f8fa;
    padding: 6px 7px;
}

.missing-field-grid span,
.missing-field-grid strong,
.missing-field-grid small,
.technical-grid span,
.technical-grid strong {
    display: block;
}

.missing-field-grid span,
.technical-grid span {
    color: var(--muted);
    font-size: 10px;
}

.missing-field-grid strong,
.technical-grid strong {
    font-size: 12px;
}

.missing-field-grid small {
    color: #8a96a2;
    font-size: 9px;
}

.technical-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 10px;
}

.tech-note {
    margin-bottom: 9px;
    border-left: 3px solid #8aa6bd;
    background: #f3f7fa;
    padding: 7px 9px;
    color: #566879;
    font-size: 11px;
}

.wawi-save-bar {
    z-index: 20;
    bottom: 0;
    min-height: 48px;
    justify-content: space-between;
    border-top: 1px solid var(--wawi-line-dark);
    background: rgba(246, 248, 250, .98);
    padding: 7px 10px;
    box-shadow: 0 -2px 8px rgba(24, 33, 47, .06);
}

.save-actions {
    display: flex;
    gap: 7px;
}

.wawi-save-bar .button-link,
.wawi-save-bar .ghost-link {
    min-height: 32px;
    border-radius: 3px;
    padding: 5px 13px;
    font-size: 12px;
}

.dirty-state {
    display: grid;
    grid-template-columns: 10px auto;
    align-items: center;
    column-gap: 6px;
    color: #637180;
    font-size: 11px;
}

.dirty-state small {
    grid-column: 2;
    color: #8a96a2;
    font-size: 9px;
}

.dirty-dot {
    grid-row: 1 / 3;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9aa5af;
}

.dirty-state.is-dirty {
    color: #7b5100;
    font-weight: 700;
}

.dirty-state.is-dirty .dirty-dot {
    background: #d08a00;
    box-shadow: 0 0 0 3px rgba(208, 138, 0, .12);
}

/* SEO command center */
.seo-command-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 24px;
  margin-bottom: 18px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
}
.seo-command-center h2 { margin: 8px 0; font-size: clamp(24px, 3vw, 38px); }
.seo-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.seo-result-preview { padding: 20px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-soft); min-width: 0; }
.seo-result-preview small { display: block; overflow-wrap: anywhere; }
.seo-result-preview h3 { font-size: 21px; margin: 8px 0; }
.seo-code { padding: 16px; max-height: 400px; overflow: auto; border: 1px solid var(--border); }
.seo-launch { padding: 20px; margin-top: 20px; border: 2px solid var(--accent); border-radius: 6px; }
.seo-launch form { display: inline-block; margin: 8px 12px 0 0; }
[data-seo-progress] { margin-left: 12px; }

@media (max-width: 1180px) {
    .wawi-record-strip {
        display: grid;
    }

    .record-facts {
        min-width: 0;
    }

    .wawi-section-grid,
    .wawi-section-grid.single-top {
        grid-template-columns: 1fr;
    }

    .wawi-section.span-2,
    .wawi-section.compact {
        grid-column: 1;
    }
}

@media (max-width: 760px) {
    .record-facts,
    .stock-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .record-facts > div:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--wawi-line);
    }

    .record-facts > div:nth-child(4) {
        border-top: 1px solid var(--wawi-line);
    }

    .wawi-section .form-grid,
    .technical-grid,
    .missing-field-grid,
    .channel-row {
        grid-template-columns: 1fr;
    }
}

/* BOXED RECORD WORKSPACES */

.record-workspace {
    margin-bottom: 18px;
}

.record-strip-generic .record-symbol {
    display: flex;
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wawi-line-dark);
    border-radius: 4px;
    background: #f5f7f9;
    color: #536170;
    font-size: 24px;
    font-weight: 800;
    box-shadow: inset 0 1px 0 #fff;
}

.record-symbol-blue {
    border-color: #9db9d0 !important;
    background: #edf5fb !important;
    color: #245f8e !important;
}

.record-symbol-ok {
    border-color: #a9c7b1 !important;
    background: #f0f8f2 !important;
    color: #34704a !important;
}

.record-symbol-warn {
    border-color: #d3bd8c !important;
    background: #fff9ec !important;
    color: #8a6417 !important;
}

.record-layout-two {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 12px;
}

.record-section {
    overflow: hidden;
}

.record-section-toolbar {
    border: 0;
    border-bottom: 1px solid var(--wawi-line);
    border-radius: 0;
}

.record-section-body {
    min-width: 0;
    background: #fff;
}

.record-info-grid {
    display: grid;
    padding: 4px;
}

.record-info-cols-1 {
    grid-template-columns: 1fr;
}

.record-info-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.record-info-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.record-info-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.record-info-item span,
.record-info-item strong,
.record-info-item small {
    display: block;
}

.record-info-item span {
    margin-bottom: 3px;
    color: #697786;
    font-weight: 700;
}

.record-info-item strong {
    min-height: 18px;
    overflow-wrap: anywhere;
    color: #263442;
}

.record-info-item small {
    margin-top: 2px;
    color: #88939f;
}

.record-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(145px, 1fr));
}

.record-metric {
    border: 1px solid var(--wawi-line);
    background: #fff;
}

.record-metric span,
.record-metric strong,
.record-metric small {
    display: block;
}

.record-metric span {
    color: #6c7987;
    font-weight: 700;
}

.record-metric small {
    margin-top: 2px;
    color: #8a96a2;
}

.mini-button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.record-link {
    color: var(--wawi-blue-dark);
    font-weight: 700;
    text-decoration: none;
}

.record-link:hover {
    text-decoration: underline;
}

.record-table-shell {
    border-width: 1px 0 0;
    border-radius: 0;
}

.relation-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 150px;
    padding: 10px;
}

.relation-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.relation-card-title > span {
    color: #6a7785;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.relation-card-main > strong {
    display: block;
    margin-bottom: 9px;
    font-size: 15px;
}

.relation-card dl {
    display: grid;
    gap: 4px;
    margin: 0;
}

.relation-card dl > div {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    min-height: 22px;
    border-bottom: 1px solid #eef1f4;
    padding: 3px 0;
}

.relation-card dt {
    color: #788593;
    font-size: 10px;
}

.relation-card dd {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
}

.relation-card-actions {
    display: flex;
    min-width: 132px;
    flex-direction: column;
    gap: 6px;
    padding-left: 9px;
    border-left: 1px solid var(--wawi-line);
}

.process-lane {
    display: grid;
    grid-template-columns: auto 32px auto 32px auto 32px auto;
    align-items: center;
    min-height: 92px;
    overflow-x: auto;
    padding: 12px;
}

.process-step {
    display: grid;
    grid-template-columns: 28px minmax(110px, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 145px;
}

.process-step i {
    display: flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid #c6cfd8;
    border-radius: 50%;
    background: #f1f3f5;
    color: #687582;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.process-step span,
.process-step strong {
    display: block;
}

.process-step span {
    color: #72808e;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.process-step strong {
    margin-top: 1px;
    font-size: 11px;
}

.process-ok i {
    border-color: #8fbea0;
    background: #edf8f0;
    color: #2f7047;
}

.process-warn i {
    border-color: #d6b971;
    background: #fff7e4;
    color: #8b6211;
}

.process-connector {
    height: 1px;
    background: #cbd3dc;
}

.workspace-notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    margin: 8px;
    border-left: 3px solid #8da6bb;
    background: #f4f7f9;
    padding: 7px 9px;
    font-size: 10px;
}

.workspace-notice strong {
    font-size: 10px;
}

.workspace-notice span {
    color: #5e6d7b;
}

.notice-warn {
    border-left-color: #c89c3d;
    background: #fff8e9;
}

@media (max-width: 1180px) {
    .record-layout-two {
        grid-template-columns: 1fr;
    }

    .record-info-cols-4,
    .record-info-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .record-metric-grid {
        grid-template-columns: repeat(2, minmax(145px, 1fr));
    }
}

@media (max-width: 760px) {
    .record-info-cols-4,
    .record-info-cols-3,
    .record-info-cols-2,
    .record-metric-grid {
        grid-template-columns: 1fr;
    }

    .relation-card {
        grid-template-columns: 1fr;
    }

    .relation-card-actions {
        border-left: 0;
        border-top: 1px solid var(--wawi-line);
        padding: 8px 0 0;
    }
}

/* OPERATIVE BOXED WORKSPACES */

.workspace-filterbar {
    border-bottom: 1px solid var(--wawi-line);
    background: #f8fafb;
}

.workspace-filterbar .search-form {
    margin: 0;
}

.record-longtext {
    min-height: 90px;
    border-top: 1px solid var(--wawi-line);
    background: #fbfcfd;
    padding: 12px;
    color: #3d4a56;
    font-size: 11px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.button-link.is-disabled,
.ghost-link.is-disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: .48;
    filter: grayscale(.35);
}

.workspace-tabs + .pagination,
.workspace-tabs + nav.pagination {
    margin-top: 10px;
}

.workspace-panel > .record-section:first-child {
    margin-top: 0;
}

.workspace-panel .record-section + .record-section {
    margin-top: 10px;
}

.record-workspace-compact .workspace-panels {
    min-height: 240px;
}

.record-table-shell .badge {
    white-space: nowrap;
}

/* BOXED LIST AND ADMINISTRATION NAVIGATION */

.workspace-command-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.workspace-command {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 8px;
    align-content: center;
    border: 1px solid var(--wawi-line);
    background: #fff;
    color: #2f3e4d;
    text-decoration: none;
}

.workspace-command:hover {
    border-color: #8fb3d0;
    background: #eef5fb;
}

.workspace-command > span {
    font-weight: 800;
}

.workspace-command > strong {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--wawi-blue-dark);
    white-space: nowrap;
}

.workspace-command > small {
    grid-column: 1;
    color: #778493;
    font-weight: 400;
}

.workspace-command.is-disabled {
    cursor: not-allowed;
    background: #f3f5f7;
    color: #8b96a1;
    opacity: .72;
}

.workspace-filter-shell {
    border-bottom: 1px solid var(--wawi-line);
    background: #f8fafb;
}

.workspace-filter-caption {
    margin: 0 0 5px 2px;
    color: #667482;
    font-weight: 800;
    text-transform: uppercase;
}

.workspace-filter-shell .search-form {
    margin: 0;
}

.wawi-table tr.is-clickable {
    cursor: pointer;
}

.wawi-table tr.is-clickable:focus-visible td {
    outline: 2px solid var(--wawi-focus);
    outline-offset: -2px;
}

.wawi-table tr.is-clickable td:last-child {
    white-space: nowrap;
}

.workspace-tabbar {
    top: 0;
    z-index: 12;
}

.system-run-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px;
}

.system-run-box > div {
    display: grid;
    gap: 2px;
}

.system-run-box strong {
    font-size: 12px;
}

.system-run-box span {
    color: #6a7785;
    font-size: 10px;
}

.system-run-box form {
    margin: 0;
}

.record-section .pagination {
    margin: 8px;
}

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

    .system-run-box {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .workspace-command-grid {
        grid-template-columns: 1fr;
    }
}

/* DESKTOP CHROME, NAVIGATION, DENSITY, TABS AND TABLES */

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

.wawi-page-head {
    margin-bottom: 8px;
}

.wawi-page-head .breadcrumb {
    margin: 0 0 3px;
    font-size: 8px;
}

.wawi-page-head .record-header {
    align-items: flex-end;
    min-height: 42px;
}

.wawi-page-head h1 {
    font-size: 20px;
    line-height: 1.08;
}

.wawi-page-head p {
    margin-top: 2px;
    font-size: 10px;
}

.toolbar-row {
    gap: 5px;
}

.ghost-link,
.button-link,
.mini-button,
.operation-button {
    min-height: 29px;
    border-radius: 3px;
    padding: 5px 9px;
    font-size: 10px;
}

.record-metric-grid {
    gap: 5px;
    margin-bottom: 7px;
}

.record-metric {
    min-height: 54px;
    border-radius: 3px;
    padding: 7px 9px;
}

.record-metric span {
    font-size: 8px;
}

.record-metric strong {
    margin-top: 1px;
    font-size: 15px;
}

.record-metric small {
    font-size: 8px;
}

.wawi-workspace,
.record-workspace {
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(24, 33, 47, .05);
}

.wawi-record-strip {
    min-height: 68px;
    gap: 10px;
    padding: 8px 10px;
}

.record-thumb {
    width: 48px;
    height: 48px;
}

.record-symbol {
    width: 38px !important;
    height: 38px !important;
    border-radius: 3px !important;
    font-size: 15px !important;
}

.record-kicker {
    font-size: 8px;
}

.record-title-block h1 {
    margin-top: 1px;
    font-size: 18px;
}

.record-subline {
    margin-top: 2px;
    gap: 5px;
    font-size: 9px;
}

.record-facts {
    border-radius: 3px;
}

.record-facts > div {
    min-width: 92px;
    padding: 5px 8px;
}

.record-facts span {
    font-size: 7px;
}

.record-facts strong {
    margin-top: 1px;
    font-size: 11px;
}

/* Boxed tab navigator */

.workspace-tabnav {
    position: sticky;
    top: 0;
    z-index: 25;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 26px;
    align-items: stretch;
    border-bottom: 1px solid var(--wawi-line-dark);
    background: #e9eef3;
    box-shadow: 0 1px 0 rgba(255,255,255,.7);
}

.workspace-tabbar {
    position: static;
    display: flex;
    min-width: 0;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    background: transparent;
    padding: 3px 2px 0;
    scrollbar-width: auto;
    scroll-behavior: smooth;
}

.workspace-tab-review-item {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: stretch;
}

.workspace-tab-review-item.is-review-pending {
    border-radius: 3px 3px 0 0;
    background: #fff0f3;
    box-shadow: inset 0 3px 0 #d88491;
}

.workspace-review-button {
    align-self: center;
    display: inline-grid;
    place-items: center;
    width: 19px;
    height: 19px;
    margin: 3px 3px 2px 0;
    border: 1px solid #c66f80;
    border-radius: 50%;
    background: #fff;
    color: #a83f52;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.workspace-review-button:hover,
.workspace-review-button:focus-visible {
    border-color: #a83f52;
    background: #ffe1e7;
    outline: 2px solid rgba(168,63,82,.2);
}

.ui-review-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 36px;
    margin: 0 0 8px;
    border: 1px solid #e4aab4;
    border-left: 5px solid #d27687;
    border-radius: 3px;
    background: #fff1f4;
    padding: 6px 9px;
    color: #713442;
    font-size: 11px;
}

.ui-review-bar > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ui-review-bar > div strong {
    display: inline-grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #cf6f80;
    color: #fff;
}

.ui-review-page-form button {
    min-height: 26px;
    border: 1px solid #b95e70;
    border-radius: 3px;
    background: #fff;
    padding: 4px 9px;
    color: #853949;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.review-decision-list,
.review-rule-list {
    display: grid;
    gap: 7px;
}

.review-decision {
    border: 1px solid var(--wawi-line-dark);
    border-radius: 3px;
    background: #fff;
}

.review-decision > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 8px;
    cursor: pointer;
}

.review-decision > summary > span:first-child {
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
}

.review-decision-form,
.review-rule-form {
    display: grid;
    gap: 9px;
    border-top: 1px solid var(--wawi-line);
    padding: 9px;
}

.review-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 7px;
}

.review-proposal-field {
    display: grid;
    gap: 4px;
    border: 1px solid var(--wawi-line);
    border-radius: 3px;
    background: var(--panel-soft);
    padding: 6px;
    color: var(--text);
    font-size: 10px;
    font-weight: 700;
}

.review-proposal-field input[type="text"],
.review-proposal-field input[type="number"] {
    min-height: 29px;
    border: 1px solid var(--wawi-line-dark);
    border-radius: 3px;
    background: #fff;
    padding: 4px 6px;
    font: inherit;
}

.review-rule-form {
    border: 1px solid var(--wawi-line-dark);
    border-radius: 3px;
    background: #fff;
}

.review-rule-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.admin-review-accept button {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid #c66f80;
    border-radius: 50%;
    background: #fff1f4;
    color: #a83f52;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.admin-review-accept button::first-letter {
    font-size: 13px;
}

.workspace-tab-scroll {
    display: grid;
    place-items: center;
    border: 0;
    background: #e4e9ee;
    color: #607080;
    cursor: pointer;
    font: inherit;
}

.workspace-tab-scroll:hover {
    background: #d8e2eb;
    color: var(--wawi-blue-dark);
}

.workspace-tab-scroll span {
    font-size: 18px;
    line-height: 1;
    transform: translateY(-1px);
}

.workspace-tab {
    flex: 0 0 auto;
    min-height: 30px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    padding: 5px 8px;
    font-size: 9px;
    white-space: nowrap;
}

.workspace-tab:hover {
    background: #f6f8fa;
}

.workspace-tab.is-active {
    border-color: var(--wawi-line-dark);
    background: #fff;
    color: var(--wawi-blue-dark);
}

.workspace-tab.is-active::after {
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: #fff;
}

.workspace-tab b {
    min-width: 16px;
    height: 16px;
    padding: 2px 4px;
    font-size: 8px;
}

.workspace-panels {
    padding: 7px;
}

.workspace-panel {
    min-height: 240px;
}

.record-section {
    border-radius: 3px;
}

.record-section-toolbar,
.section-toolbar {
    min-height: 34px;
    padding: 5px 7px;
}

.record-section-toolbar h3,
.section-toolbar h3 {
    font-size: 10px;
}

.record-section-toolbar p,
.section-toolbar p {
    margin-top: 1px;
    font-size: 8px;
}

.record-section-body {
    padding: 0;
}

.record-info-grid {
    gap: 0;
}

.record-info-item {
    min-height: 46px;
    border-right: 1px solid #e2e7ec;
    border-bottom: 1px solid #e2e7ec;
    padding: 6px 8px;
}

.record-info-item span {
    font-size: 8px;
}

.record-info-item strong {
    margin-top: 1px;
    font-size: 11px;
}

.record-info-item small {
    font-size: 8px;
}

.workspace-command-grid {
    gap: 5px;
    padding: 6px;
}

.workspace-command {
    min-height: 52px;
    border-radius: 3px;
    padding: 6px 8px;
}

.workspace-command > span {
    font-size: 10px;
}

.workspace-command > strong {
    font-size: 13px;
}

.workspace-command > small {
    font-size: 8px;
}

/* Dense form controls */

.wawi-section-grid {
    gap: 6px;
}

.wawi-section {
    border-radius: 3px;
}

.wawi-section-head {
    min-height: 33px;
    padding: 5px 7px;
}

.wawi-section-head h2 {
    font-size: 10px;
}

.wawi-section-head p {
    margin-top: 1px;
    font-size: 8px;
}

.wawi-section .form-grid {
    gap: 6px 7px;
    padding: 7px;
}

.wawi-field {
    gap: 2px;
}

.field-label {
    min-height: 11px;
    font-size: 8px;
    letter-spacing: .01em;
}

.wawi-field input,
.wawi-field select,
.wawi-field textarea,
.search-form input,
.search-form select {
    min-height: 29px;
    border-radius: 2px;
    padding: 4px 6px;
    font-size: 10px;
}

.wawi-field textarea {
    line-height: 1.45;
}

.field-with-unit > span {
    min-width: 38px;
    font-size: 9px;
}

.field-hint,
.field-error {
    font-size: 8px;
}

.readonly-value {
    min-height: 29px;
    border-radius: 2px;
    padding: 5px 6px;
    font-size: 10px;
}

.checkbox-field {
    min-height: 29px;
    padding: 4px 6px;
    font-size: 10px;
}

.relation-button,
.relation-add {
    min-height: 29px;
    border-radius: 2px;
    font-size: 9px;
}

/* Wawi data grid
   Horizontal scrolling belongs to the table container. Table headers are
   deliberately not sticky: a sticky header inside an overflow-x container
   uses that container as its scroll ancestor and otherwise detaches from the
   page scroll. */

.wawi-table-shell,
.table-shell {
    position: relative;
    max-width: 100%;
    overflow: visible;
    border: 1px solid var(--wawi-line);
    border-radius: 3px;
}

.table-scroll-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: auto;
    overscroll-behavior-x: contain;
}

.wawi-table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
}

.wawi-table th {
    position: static;
    height: 27px;
    padding: 4px 7px;
    border-right: 1px solid #dfe4e9;
    border-bottom: 1px solid var(--wawi-line-dark);
    background: #edf1f5;
    box-shadow: inset 0 -1px 0 #d8dfe6;
    font-size: 8px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.wawi-table td {
    height: 27px;
    padding: 4px 7px;
    border-right: 1px solid #edf0f3;
    font-size: 9px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

.wawi-table tbody tr:nth-child(even) td {
    background: #fafbfd;
}

.wawi-table tbody tr:hover td,
.wawi-table tr.is-clickable:focus-visible td {
    background: #eaf3fa;
}

.wawi-table tr.is-clickable:focus-visible {
    outline: none;
}

.table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 25px;
    border-top: 1px solid #d9e0e7;
    background: #f5f7f9;
    padding: 4px 7px;
    color: #72808d;
    font-size: 8px;
}

.table-foot strong {
    color: #475766;
}

.wawi-table-shell::before,
.wawi-table-shell::after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    bottom: 25px;
    z-index: 15;
    width: 14px;
    opacity: 0;
    transition: opacity .12s ease;
}

.wawi-table-shell::before {
    left: 0;
    background: linear-gradient(to right, rgba(78, 97, 115, .16), rgba(78, 97, 115, 0));
}

.wawi-table-shell::after {
    right: 0;
    background: linear-gradient(to left, rgba(78, 97, 115, .16), rgba(78, 97, 115, 0));
}

.wawi-table-shell.can-scroll-left::before,
.wawi-table-shell.can-scroll-right::after {
    opacity: 1;
}

.workspace-filter-shell,
.workspace-filterbar {
    padding: 6px;
}

.workspace-filter-caption {
    margin-bottom: 4px;
    font-size: 8px;
}

.search-form,
.search-form-wide {
    gap: 5px;
}

.search-form label > span {
    margin-bottom: 2px;
    font-size: 8px;
}

.search-form button,
.search-form .button-link {
    min-height: 29px;
}

/* Comfortable mode is deliberately optional; compact remains Wawi default. */

body.density-comfortable .content {
    margin-top: 18px;
}

body.density-comfortable .wawi-page-head {
    margin-bottom: 14px;
}

body.density-comfortable .workspace-panels {
    padding: 12px;
}

body.density-comfortable .workspace-command-grid {
    gap: 8px;
    padding: 9px;
}

body.density-comfortable .record-section-toolbar,
body.density-comfortable .section-toolbar {
    padding: 8px 10px;
}

body.density-comfortable .record-info-item {
    min-height: 56px;
    padding: 9px 10px;
}

body.density-comfortable .wawi-section .form-grid {
    gap: 9px 10px;
    padding: 10px;
}

body.density-comfortable .wawi-field input,
body.density-comfortable .wawi-field select,
body.density-comfortable .search-form input,
body.density-comfortable .search-form select {
    min-height: 34px;
    padding: 6px 8px;
}

body.density-comfortable .wawi-table th {
    height: 32px;
    padding: 6px 8px;
    font-size: 9px;
}

body.density-comfortable .wawi-table td {
    height: 34px;
    padding: 6px 8px;
    font-size: 10px;
}

/* Strong keyboard focus across the application. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--wawi-focus);
    outline-offset: 1px;
}

/* Smaller desktop: keep the workspace dense but let navigation remain usable. */

@media (max-width: 1180px) {
    .content {
        width: calc(100% - 14px);
    }

    .record-facts > div {
        min-width: 78px;
    }
}

@media (max-width: 820px) {
    .workspace-toolbar,
    .detail-layout,
    .hero-panel,
    .product-workbench,
    .product-topbar {
        display: grid;
        grid-template-columns: 1fr;
    }

    .product-sidebar {
        position: static;
    }

    .content {
        width: calc(100% - 12px);
        margin-top: 6px;
    }

    .workspace-tabnav {
        top: 0;
    }

    .wawi-table th {
        position: static;
    }
}

/* OPERATIVE CORE MODULES */

.operation-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.operation-link:hover {
    border-color: var(--wawi-blue);
    color: var(--wawi-blue-dark);
    background: var(--wawi-blue-soft);
}

.stock-booking-form .wawi-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 8px 10px;
}

.stock-booking-form .field-wide {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .stock-booking-form .wawi-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Marketing- und SEO-Arbeitsbereich */

.marketing-period {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 8px;
    margin: -8px 0 14px;
}

.marketing-period label {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.marketing-period select {
    min-width: 150px;
    height: 36px;
    padding: 0 34px 0 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
    color: var(--text);
}

.table-subline {
    display: block;
    max-width: 420px;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .marketing-period {
        align-items: stretch;
        justify-content: stretch;
    }

    .marketing-period label,
    .marketing-period select,
    .marketing-period .mini-button {
        width: 100%;
    }
}

/* Mikrokasse und Abholung */

.pos-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 10px;
    margin-bottom: 10px;
}

.pos-main,
.pos-side {
    display: grid;
    align-content: start;
    gap: 10px;
}

.pos-shell .section-toolbar > div {
    display: grid;
    gap: 2px;
}

.pos-shell .section-toolbar small {
    color: var(--muted);
    font-size: 9px;
    font-weight: 500;
}

.pos-search-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px;
}

.pos-search-box input {
    min-height: 42px;
    padding: 8px 12px;
    border: 2px solid var(--wawi-blue);
    border-radius: 3px;
    font-size: 15px;
    font-weight: 700;
}

.pos-search-state {
    display: grid;
    min-width: 90px;
    padding: 0 10px;
    place-items: center;
    border: 1px solid var(--wawi-line-dark);
    background: var(--panel-soft);
    font-size: 10px;
    font-weight: 800;
}

.pos-search-results {
    display: grid;
    max-height: 270px;
    overflow: auto;
    border-top: 1px solid var(--wawi-line);
}

.pos-search-results > p,
.pos-cart-empty {
    margin: 0;
    padding: 16px;
    color: var(--muted);
    text-align: center;
}

.pos-result {
    display: flex;
    min-height: 52px;
    padding: 8px 11px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid var(--wawi-line);
    background: #fff;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.pos-result:hover,
.pos-result:focus-visible {
    background: var(--wawi-blue-soft);
}

.pos-result span {
    display: grid;
    gap: 2px;
}

.pos-result small,
.pos-cart-product span {
    color: var(--muted);
    font-size: 9px;
}

.pos-result b {
    white-space: nowrap;
}

.pos-cart-head,
.pos-cart-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 75px 80px 100px 105px 34px;
    gap: 6px;
    align-items: center;
}

.pos-cart-head {
    padding: 5px 8px;
    border-block: 1px solid var(--wawi-line-dark);
    background: var(--panel-soft);
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.pos-cart-row {
    min-height: 54px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--wawi-line);
}

.pos-cart-row input {
    width: 100%;
    min-height: 31px;
    padding: 4px 6px;
    border: 1px solid var(--wawi-line-dark);
    border-radius: 2px;
    text-align: right;
}

.pos-cart-product {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.pos-cart-product strong,
.pos-cart-product span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-line-total {
    text-align: right;
    white-space: nowrap;
}

.pos-remove {
    width: 30px;
    height: 30px;
    border: 1px solid #d59b9b;
    background: #fff3f3;
    color: #8c1111;
    font-size: 18px;
    cursor: pointer;
}

.pos-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 16px;
    padding: 10px;
}

.pos-details,
.pos-totals {
    display: grid;
    align-content: start;
    gap: 6px;
}

.pos-details label,
.pos-totals label {
    display: grid;
    gap: 3px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
}

.pos-details input,
.pos-details textarea,
.pos-totals input {
    width: 100%;
    min-height: 32px;
    padding: 5px 7px;
    border: 1px solid var(--wawi-line-dark);
}

.pos-totals label,
.pos-totals > div {
    display: grid;
    grid-template-columns: 1fr 130px;
    align-items: center;
    gap: 8px;
}

.pos-totals > div {
    padding: 5px 0;
    border-bottom: 1px solid var(--wawi-line);
    font-size: 10px;
}

.pos-totals strong {
    text-align: right;
}

.pos-received-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
}

.pos-totals label.pos-received {
    grid-template-columns: minmax(0, 1fr) 190px;
}

.pos-received-input .mini-button {
    min-height: 32px;
    white-space: nowrap;
}

.pos-totals .pos-grand {
    border-top: 2px solid var(--wawi-line-dark);
    font-size: 15px;
    font-weight: 800;
}

.pos-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid var(--wawi-line-dark);
    background: var(--panel-soft);
}

.button-link.is-warning {
    background: #a06300;
    border-color: #7c4d00;
}

@media (max-width: 1100px) {
    .pos-shell {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 760px) {
    .pos-cart-table {
        overflow-x: auto;
    }

    .pos-cart-head,
    .pos-cart-row {
        min-width: 780px;
    }

    .pos-bottom-grid {
        grid-template-columns: 1fr;
    }

    .pos-actions,
    .pos-side {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .pos-actions .button-link {
        width: 100%;
    }
}

.sales-folder-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

.sales-folder {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
    color: var(--text);
    text-decoration: none;
    font-size: .84rem;
}

.sales-folder b {
    min-width: 24px;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--panel-soft);
    text-align: center;
    font-size: .75rem;
}

.sales-folder:hover,
.sales-folder.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.variant-product-search,
.variant-group-form {
    display: grid;
    gap: 10px;
}

.variant-product-search {
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: end;
}

.variant-product-search label,
.variant-group-form label {
    display: grid;
    gap: 4px;
}

.variant-item-section {
    overflow-x: auto;
}

.variant-item-table {
    min-width: 1040px;
}

.variant-item-table input[type="text"],
.variant-item-table input[type="number"],
.variant-item-table select {
    width: 100%;
    min-width: 90px;
}

.variant-item-table td small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}

.variant-sort-input {
    max-width: 72px;
}

.compact-action-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

@media (max-width: 760px) {
    .variant-product-search {
        grid-template-columns: 1fr;
    }
}

/* Artikeltexte: kompakter Editor ohne externe Bibliothek. */

.rich-text-field {
    display: grid;
    gap: 5px;
}

.rich-text-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 5px;
    border: 1px solid var(--wawi-line-dark);
    border-bottom: 0;
    background: var(--panel-soft);
}

.rich-text-toolbar button {
    min-height: 28px;
    padding: 3px 8px;
    border: 1px solid var(--wawi-line);
    border-radius: 3px;
    background: var(--panel);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.rich-text-toolbar button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.rich-text-spacer {
    flex: 1 1 24px;
}

.rich-text-surface {
    min-height: 120px;
    max-height: 460px;
    overflow: auto;
    padding: 10px 12px;
    border: 1px solid var(--wawi-line-dark);
    border-radius: 0 0 3px 3px;
    background: #fff;
    color: #17212b;
    line-height: 1.45;
}

.rich-text-surface:focus {
    outline: 2px solid var(--wawi-focus);
    outline-offset: 1px;
}

.rich-text-field:nth-child(2) .rich-text-surface {
    min-height: 260px;
}

.rich-text-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted);
    font-size: 11px;
}

.rich-text-field.is-over-limit .rich-text-surface {
    border-color: #b42318;
}

.rich-text-field.is-over-limit [data-rich-count] {
    color: #b42318;
    font-weight: 700;
}

.product-rich-output {
    line-height: 1.55;
}

.product-rich-output>:first-child {
    margin-top: 0;
}

.product-rich-output>:last-child {
    margin-bottom: 0;
}

.product-rich-output a {
    color: var(--accent);
    text-decoration: underline;
}

.shop-detail-text.product-rich-output {
    max-height: 320px;
    overflow: auto;
}

@media (max-width:760px) {
    .rich-text-spacer {
        display: none;
    }

    .rich-text-toolbar button {
        flex: 1 1 auto;
    }

    .rich-text-surface {
        max-height: none;
    }
}

.invoice-template-preview {
    margin-top: 12px;
}

.invoice-template-preview iframe {
    display: block;
    width: 100%;
    height: 920px;
    border: 1px solid var(--wawi-line);
    background: #fff;
}

@media(max-width:760px) {
    .invoice-template-preview iframe {
        height: 720px;
    }
}

/* Operative Kategorie-, Medien- und Sync-Arbeitsflächen. */

.category-master-grid {
    grid-template-columns: repeat(4,minmax(150px,1fr));
}

.category-product-search {
    display: grid;
    grid-template-columns: minmax(240px,1fr) auto;
    align-items: end;
    gap: 8px;
}

.compact-assignment-results,
.media-manager-actions {
    display: grid;
    gap: 6px;
    margin: 8px 0;
}

.assignment-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--wawi-line);
    background: var(--panel);
}

.assignment-row span,
.assignment-row small,
.media-suggestion {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assignment-row small,
.media-suggestion {
    display: block;
    color: var(--muted);
}

.inline-action-form {
    display: inline-flex;
    margin: 0;
}

.danger-button {
    border-color: #c77!important;
    color: #8c1111!important;
    background: #fff5f5!important;
}

.record-danger-zone {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--wawi-line);
}

.media-table-thumb {
    display: block;
    width: 58px;
    height: 44px;
    object-fit: contain;
    border: 1px solid var(--wawi-line);
    border-radius: 3px;
    background: #fff;
}

.media-thumb-link {
    display: inline-block;
}

.media-manager-grid {
    display: grid;
    grid-template-columns: minmax(180px,280px) minmax(0,1fr);
    gap: 14px;
}

.media-manager-preview {
    display: grid;
    place-items: center;
    min-height: 210px;
    border: 1px solid var(--wawi-line);
    background: #fff;
}

.media-manager-preview img {
    display: block;
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
}

.compact-media-form {
    display: grid;
    grid-template-columns: minmax(220px,1fr) auto;
    align-items: end;
    gap: 8px;
}

.media-remove-form {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.sync-conflict-actions {
    display: grid;
    grid-template-columns: minmax(130px,1fr) auto auto;
    gap: 5px;
    min-width: 390px;
}

.sync-conflict-actions input {
    min-width: 0;
}

.record-table td>strong+small,
.record-table td>a+small {
    display: block;
    margin-top: 3px;
}

@media(max-width:980px) {
    .category-master-grid {
        grid-template-columns: repeat(2,minmax(150px,1fr));
    }

    .media-manager-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:680px) {
    .category-master-grid,
    .category-product-search,
    .compact-media-form,
    .assignment-row,
    .sync-conflict-actions {
        grid-template-columns: 1fr;
    }

    .sync-conflict-actions {
        min-width: 220px;
    }
}

/* Kompakte Stammdaten-Arbeitsplaetze: Auswahl links, Bearbeitung rechts. */

.master-detail-layout {
    display: grid;
    grid-template-columns: minmax(290px,32%) minmax(0,1fr);
    gap: 10px;
    align-items: start;
}

.master-pane,
.detail-pane {
    min-width: 0;
    border: 1px solid var(--wawi-line);
    border-radius: 3px;
    background: var(--panel);
}

.master-pane {
    position: sticky;
    top: 8px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 24px);
    max-height: max(280px, calc(100dvh - 24px));
    overflow: hidden;
}

.master-pane > :not(.master-list):not(.media-master-list) {
    flex: 0 0 auto;
}

.master-pane-toolbar {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 6px;
    align-items: end;
    padding: 7px;
    border-bottom: 1px solid var(--wawi-line);
    background: var(--panel-soft);
}

.quick-filter {
    display: grid;
    gap: 2px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
}

.quick-filter input,
.master-pane-toolbar>input {
    width: 100%;
    min-height: 31px;
    padding: 5px 7px;
    border: 1px solid var(--wawi-line-dark);
    border-radius: 2px;
    background: #fff;
}

.view-switch,
.master-result-count {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 31px;
    padding: 5px 7px;
    border-bottom: 1px solid var(--wawi-line);
    color: var(--muted);
    font-size: 9px;
}

.view-switch span {
    margin-left: auto;
}

.mini-button.is-active,
.mini-button-link.is-active {
    border-color: var(--wawi-blue);
    background: var(--wawi-blue-soft);
    color: var(--wawi-blue-dark);
}

.master-list,
.media-master-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-width: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}

.master-list-item {
    display: grid;
    gap: 2px;
    padding: 7px 9px;
    border-bottom: 1px solid var(--wawi-line);
    color: var(--text);
    text-decoration: none;
}

.master-list-item:hover,
.master-list-item.is-selected {
    background: var(--wawi-blue-soft);
}

.master-list-item.is-selected {
    box-shadow: inset 3px 0 0 var(--wawi-blue);
}

.master-list-title {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: 10px;
    font-weight: 800;
}

.master-list-meta {
    color: var(--muted);
    font-size: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tree-list .master-list-title {
    padding-left: calc(var(--tree-depth,0) * 14px);
}

.tree-line {
    display: inline-block;
    width: 10px;
    height: 9px;
    margin-right: 4px;
    border-left: 1px solid #b8c4cf;
    border-bottom: 1px solid #b8c4cf;
}

.master-filter-empty {
    margin: 0;
    padding: 16px;
    color: var(--muted);
    text-align: center;
}

.detail-pane {
    overflow: hidden;
}

.detail-pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 7px 9px;
    border-bottom: 1px solid var(--wawi-line-dark);
    background: var(--panel-soft);
}

.detail-pane-head>div:first-child {
    min-width: 0;
}

.detail-pane-head span {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.detail-pane-head h2 {
    margin: 2px 0 0;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-statuses {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

.inline-master-form {
    border-bottom: 1px solid var(--wawi-line);
}

.inline-work-section {
    border-bottom: 1px solid var(--wawi-line);
}

.compact-inline-search {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 6px;
    padding: 7px;
}

.compact-inline-search input {
    min-height: 31px;
    padding: 5px 7px;
    border: 1px solid var(--wawi-line-dark);
}

.inline-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
    gap: 6px;
    padding: 7px;
}

.inline-media-grid>a {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 4px;
    border: 1px solid var(--wawi-line);
    color: var(--text);
    text-decoration: none;
}

.inline-media-grid img {
    width: 100%;
    height: 78px;
    object-fit: contain;
    background: #fff;
}

.inline-media-grid span {
    font-size: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 7px;
}

.compact-link-list a {
    padding: 4px 7px;
    border: 1px solid var(--wawi-line);
    border-radius: 2px;
    background: #fff;
    color: var(--text);
    font-size: 9px;
    text-decoration: none;
}

.manufacturer-master-grid {
    grid-template-columns: repeat(3,minmax(150px,1fr));
}

.media-workspace-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 7px;
}

.media-workspace-switch a {
    gap: 7px;
}

.media-workspace-switch b {
    padding: 1px 5px;
    border-radius: 9px;
    background: rgba(0,0,0,.06);
}

.media-master-item {
    display: grid;
    grid-template-columns: 58px minmax(0,1fr);
    gap: 7px;
    align-items: center;
    padding: 5px 7px;
    border-bottom: 1px solid var(--wawi-line);
    color: var(--text);
    text-decoration: none;
}

.media-master-item:hover,
.media-master-item.is-selected {
    background: var(--wawi-blue-soft);
}

.media-master-item.is-selected {
    box-shadow: inset 3px 0 0 var(--wawi-blue);
}

.media-master-item img {
    width: 58px;
    height: 46px;
    object-fit: contain;
    border: 1px solid var(--wawi-line);
    background: #fff;
}

.media-master-item span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.media-master-item strong,
.media-master-item small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-master-item strong {
    font-size: 9px;
}

.media-master-item small {
    color: var(--muted);
    font-size: 8px;
}

.media-inline-manager {
    display: grid;
    grid-template-columns: minmax(250px,42%) minmax(0,1fr);
    gap: 10px;
    padding: 9px;
}

.detail-empty {
    display: grid;
    min-height: 360px;
    place-content: center;
    gap: 5px;
    padding: 20px;
    color: var(--muted);
    text-align: center;
}

.detail-empty strong {
    color: var(--text);
    font-size: 15px;
}

.media-placeholder {
    display: inline-grid;
    width: 46px;
    height: 36px;
    place-items: center;
    border: 1px dashed var(--wawi-line-dark);
    color: var(--muted);
}

.product-list-thumb {
    display: block;
    width: 46px;
    height: 36px;
    object-fit: contain;
    border: 1px solid var(--wawi-line);
    background: #fff;
}

.manufacturer-workspace .wawi-table,
.category-workspace .wawi-table {
    min-width: 620px;
}

@media(max-width:1050px) {
    .master-detail-layout {
        grid-template-columns: minmax(250px,36%) minmax(0,1fr);
    }

    .category-master-grid,
    .manufacturer-master-grid {
        grid-template-columns: repeat(2,minmax(140px,1fr));
    }

    .media-inline-manager {
        grid-template-columns: 1fr;
    }
}

@media(max-width:760px) {
    .master-detail-layout {
        grid-template-columns: 1fr;
    }

    .master-pane {
        position: static;
        max-height: 430px;
    }

    .category-master-grid,
    .manufacturer-master-grid,
    .compact-inline-search {
        grid-template-columns: 1fr;
    }

    .detail-pane-head {
        align-items: flex-start;
    }

    .detail-statuses {
        justify-content: flex-start;
    }
}

.media-display-preview {
    margin: 0;
    min-width: 0;
}

.media-display-preview .media-manager-preview {
    display: flex;
    width: 100%;
    min-height: 260px;
    max-height: 620px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background: repeating-conic-gradient(#f1f1f1 0 25%, #fff 0 50%) 50% / 20px 20px;
    border-radius: 12px;
}

.media-display-preview .media-manager-preview img {
    width: 100%;
    height: 100%;
    max-height: 620px;
}

.media-display-preview figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 8px 2px;
    color: var(--muted, #6d6d6d);
    font-size: 12px;
}

.media-display-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 10px;
}

.media-display-form .button-link {
    grid-column: 1 / -1;
    justify-self: start;
}

.invoice-workflow-form,
.invoice-message-form {
    margin-top: 14px;
}

.invoice-workflow-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 12px;
}

.invoice-workflow-form .button-link {
    grid-column: 1 / -1;
    justify-self: start;
}

.invoice-message-form .workspace-actions {
    margin-top: 8px;
}

.template-editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 14px;
}

.template-editor {
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--wawi-line);
    border-radius: 3px;
}

.template-editor h3 {
    margin-top: 0;
}
/* Anmeldung und Administration: gemeinsame, begrenzte Formbreite. */
.auth-page { grid-column: 1 / -1; display: grid; place-items: start center; padding: clamp(16px, 5vw, 64px); }
.auth-card { width: 100%; max-width: 760px; min-width: 0; box-sizing: border-box; padding: 24px; margin: 0 0 20px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.auth-form { display: grid; gap: 16px; margin: 16px 0; }
.auth-form label, .auth-card > label { display: grid; gap: 6px; }
.auth-form input:not([type=checkbox]), .auth-form select, .auth-card > label input { width: 100%; min-width: 0; min-height: 36px; box-sizing: border-box; border: 1px solid var(--wawi-line-dark); border-radius: 3px; background: var(--wawi-input); color: var(--text); padding: 7px 9px; font: inherit; }
.auth-form button, .auth-card > form > button { min-height: 36px; border: 1px solid var(--wawi-blue-dark); border-radius: 3px; background: var(--wawi-blue); color: white; padding: 8px 12px; font: inherit; cursor: pointer; }
.auth-form input:focus-visible, .auth-form select:focus-visible, .auth-form button:focus-visible { outline: 2px solid var(--wawi-focus); outline-offset: 2px; }
.auth-form fieldset { display: grid; gap: 12px; min-width: 0; border: 1px solid var(--border); padding: 12px; }
.auth-card summary { cursor: pointer; font-weight: 600; overflow-wrap: anywhere; }
.auth-card table { width: 100%; overflow-wrap: anywhere; table-layout: fixed; }
.auth-error { padding: 12px; border: 1px solid #c93c54; background: #fff1f3; color: #8d1532; }
.auth-uri, .auth-codes { overflow-wrap: anywhere; white-space: pre-wrap; user-select: all; }
.auth-qr {
    width: min(100%, 320px);
    margin: 20px auto;
    background: #fff;
    color: #000;
}

.category-workspace .table-pagination {
    flex-wrap: wrap;
    padding: 8px;
    border-top: 1px solid var(--wawi-line);
}
.product-field-list .inline-work-section {
    padding: 12px;
    border: 1px solid var(--wawi-line);
    margin-bottom: 10px;
}
.product-field-list input[readonly] {
    background: var(--panel-soft);
}
.category-workspace .workspace-savebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    font-size: 11px;
}
.category-workspace .empty-note {
    font-size: 12px;
    margin: 8px;
}
.auth-qr svg {
    display: block;
    width: 100%;
    height: auto;
}


/* Kunden und Verkauf: kompakte Arbeitsflächen ohne zusätzliche Unterseiten. */
.customer-overview-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
}

.customer-address-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-address-preview > div {
    min-height: 112px;
    padding: 9px;
    border-right: 1px solid var(--wawi-line);
}

.customer-address-preview > div:last-child { border-right: 0; }
.customer-address-preview address { min-height: 66px; margin: 6px 0; font-style: normal; line-height: 1.45; }
.customer-sales-sections { display: grid; gap: 8px; }

.customer-group-create,
.customer-group-row {
    display: flex;
    align-items: end;
    gap: 7px;
}

.customer-group-create { max-width: 620px; padding: 8px; }
.customer-group-create label { flex: 1 1 280px; }
.customer-group-row input[name="name"] { width: min(280px, 48vw); }
.customer-group-row label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.customer-group-row button { white-space: nowrap; }

.customer-edit-panel { max-width: 1080px; }
.customer-edit-panel form { padding: 9px; }
.customer-master-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.customer-edit-panel .form-actions { display: flex; gap: 8px; padding-top: 9px; }

@media (max-width: 900px) {
    .customer-overview-layout,
    .customer-master-form-grid { grid-template-columns: 1fr; }
    .customer-address-preview { grid-template-columns: 1fr; }
    .customer-address-preview > div { border-right: 0; border-bottom: 1px solid var(--wawi-line); }
}


/* DENSITY V2: echter Kompaktmodus */
@media (min-width: 761px) {
    body:not(.density-comfortable) .wawi-page-head { margin-bottom: 5px; }
    body:not(.density-comfortable) .wawi-page-head .record-header { min-height: 34px; }
    body:not(.density-comfortable) .wawi-page-head h1 { font-size: 18px; }
    body:not(.density-comfortable) .wawi-page-head p { font-size: 9px; }
    body:not(.density-comfortable) .ghost-link,
    body:not(.density-comfortable) .button-link,
    body:not(.density-comfortable) .mini-button,
    body:not(.density-comfortable) .operation-button { min-height: 26px; padding: 3px 7px; font-size: 9px; }
    body:not(.density-comfortable) .wawi-section-grid { gap: 4px; }
    body:not(.density-comfortable) .wawi-section-head { min-height: 29px; padding: 4px 6px; }
    body:not(.density-comfortable) .wawi-section .form-grid { gap: 4px 6px; padding: 5px 6px; }
    body:not(.density-comfortable) .wawi-field { gap: 1px; }
    body:not(.density-comfortable) .wawi-field input,
    body:not(.density-comfortable) .wawi-field select,
    body:not(.density-comfortable) .search-form input,
    body:not(.density-comfortable) .search-form select { min-height: 26px; padding: 3px 5px; font-size: 9px; }
    body:not(.density-comfortable) .record-section-toolbar,
    body:not(.density-comfortable) .section-toolbar { min-height: 30px; padding: 4px 6px; }
    body:not(.density-comfortable) .wawi-table th { height: 24px; padding: 3px 5px; font-size: 8px; }
    body:not(.density-comfortable) .wawi-table td { height: 24px; padding: 3px 5px; font-size: 9px; }
    body:not(.density-comfortable) .badge { padding: 2px 6px; font-size: 9px; }
    body:not(.density-comfortable) .detail-pane-head { min-height: 40px; padding: 5px 7px; }
    body:not(.density-comfortable) .detail-pane-head h2 { font-size: 13px; }
    body:not(.density-comfortable) .master-list-item { padding: 5px 7px; }
}