@font-face {
    font-family: "Open Sans";
    src: url("/assets/fonts/open-sans-regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("/assets/fonts/open-sans-semibold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("/assets/fonts/open-sans-bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --font-family: "Open Sans", Arial, sans-serif;
    --bg: #d6d1cb;
    --panel: #f4f1ec;
    --topbar: #f4f1ec;
    --border: #c9c1b7;
    --divider: #ddd6cd;
    --selected: #e7e1d8;
    --text: #131210;
    --text-form: #302d29;
    --muted: #606060;
    --muted-soft: #7b7771;
    --placeholder: #99938b;
    --nav: #606060;
    --primary: #131210;
    --primary-hover: #35312c;
    --primary-active: #131210;
    --warning: #c99528;
    --warning-hover: #a8771a;
    --danger: #b04942;
    --danger-bg: #f4dfdb;
    --ok-bg: #dfe8d9;
    --summary: #606060;
    --summary-strong: #131210;
    --radius-control: 999px;
    --radius-card: 24px;
    /* A pill is right for a 38px control and wrong for a 56px one: at that height the radius eats the
       whole side. Used where a tall control sits inside a card-shaped panel (TRART-0098). */
    --radius-button-soft: 14px;
    --shadow-topbar: 0 12px 32px rgba(67, 56, 43, 0.10);
    --shadow-card: 0 14px 34px rgba(67, 56, 43, 0.09);
    --shadow-button: 0 6px 14px rgba(19, 18, 16, 0.16);
    --page-max-width: 1400px;
    --page-gutter: 20px;
    --field-height: 56px;
    --button-height: 40px;
    --icon-button-size: 36px;
    --row-title-size: 17px;
    --control-pad-x: 13px;
    --button-pad-x: 16px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
}

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

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

/* TRART-0121: with eight entries the links no longer fit between about 900 and
   1180 px. The bar already solved this below 900 px — it becomes a horizontally
   scrollable strip with the scrollbar hidden — so the same treatment applies at
   every width rather than a second mechanism. Wrapping was tried first and made
   the bar two rows tall (100 px instead of 56) across that whole band. */
.topbar {
    min-height: 56px;
    display: flex;
    align-items: center;
    width: min(calc(100% - 64px), var(--page-max-width));
    max-width: none;
    gap: 4px;
    margin: 18px auto 0;
    padding: 6px 8px;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--topbar);
    color: var(--nav);
    box-shadow: var(--shadow-topbar);
    border: 1px solid rgba(19, 18, 16, 0.05);
    border-radius: var(--radius-card);
}

/* Paired with the overflow above: the strip scrolls, the scrollbar never shows.
   This lived only inside the 900 px media query while the overflow did too. */
.topbar::-webkit-scrollbar { display: none; }

.topbar-auth {
    width: 58px;
    min-width: 58px;
    border-radius: 999px;
}

.topbar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    background: transparent;
    color: var(--text);
    margin-right: 28px;
}

.topbar-logo {
    display: block;
    width: auto;
    max-width: 33px;
    height: 33px;
}

.topbar-nav {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 2px;
    /* TRART-0121: keep the links at their natural size and let the bar scroll,
       the behaviour it already had below 900 px. Do not add flex-wrap here —
       measured, it turns the bar into two rows between 900 and 1180 px. */
    flex: 0 0 auto;
}

.topbar a,
.topbar button {
    color: var(--nav);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.topbar-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 15px;
    border-radius: 999px;
}

.topbar a:hover,
.topbar button:hover { color: var(--text); }

.topbar-nav a.is-active {
    background: var(--primary);
    color: #ffffff;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.topbar-actions form {
    margin: 0;
}

.topbar-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.topbar-icon::before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    background: currentColor;
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
    mask-size: 20px 20px;
    -webkit-mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 20px 20px;
}

.topbar-icon.is-active,
.topbar-icon:hover {
    background: var(--selected);
    color: var(--text);
}

.icon-settings::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65-2-3.46-2.49 1a7.2 7.2 0 0 0-1.69-.98L15 3h-4l-.36 2.93c-.6.24-1.17.56-1.69.98l-2.49-1-2 3.46 2.11 1.65c-.04.32-.07.65-.07.98s.02.66.07.98l-2.11 1.65 2 3.46 2.49-1c.52.4 1.08.74 1.69.98L11 21h4l.36-2.93c.6-.24 1.17-.56 1.69-.98l2.49 1 2-3.46-2.11-1.65ZM13 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65-2-3.46-2.49 1a7.2 7.2 0 0 0-1.69-.98L15 3h-4l-.36 2.93c-.6.24-1.17.56-1.69.98l-2.49-1-2 3.46 2.11 1.65c-.04.32-.07.65-.07.98s.02.66.07.98l-2.11 1.65 2 3.46 2.49-1c.52.4 1.08.74 1.69.98L11 21h4l.36-2.93c.6-.24 1.17-.56 1.69-.98l2.49 1 2-3.46-2.11-1.65ZM13 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z'/%3E%3C/svg%3E");
}

.icon-logout::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3h8a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-8v-2h8V5h-8V3ZM9 8l-1.4 1.4L9.2 11H3v2h6.2l-1.6 1.6L9 16l4-4-4-4Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3h8a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-8v-2h8V5h-8V3ZM9 8l-1.4 1.4L9.2 11H3v2h6.2l-1.6 1.6L9 16l4-4-4-4Z'/%3E%3C/svg%3E");
}

.wrap {
    width: min(calc(100% - 64px), var(--page-max-width));
    max-width: none;
    margin: 30px auto 48px;
    padding: 0;
}

.auth-wrap { max-width: 400px; }

.wrap.page-form-wide { width: min(calc(100% - 64px), var(--page-max-width)); max-width: none; }

.auth-wrap { width: min(calc(100% - 40px), 400px); }

.panel {
    background: var(--panel);
    border: 1px solid rgba(19, 18, 16, 0.06);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 24px;
}

.page-form-wide > .panel {
    width: 100%;
    max-width: none;
    padding: 24px;
}


.panel + .panel,
.grid2 + .panel,
.panel + .grid2 { margin-top: 16px; }

h1 {
    margin: 0 0 24px;
    color: var(--text);
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.16;
    font-weight: 650;
}

h2 {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 20px;
    line-height: 1.35;
    font-weight: 650;
}

.panel > h1,
.modal-panel h1 {
    margin-bottom: 16px;
    font-size: 22px;
    line-height: 28px;
}

.section-title {
    margin: 24px 0 12px;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 600;
}

label {
    display: block;
    margin: 14px 0 6px;
    color: var(--muted);
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
    width: 100%;
    min-height: var(--field-height);
    padding: 0 var(--control-pad-x);
    border: 1px solid rgba(19, 18, 16, 0.12);
    border-radius: var(--radius-control);
    background: #fbfaf7;
    color: var(--text-form);
    font: inherit;
    font-size: 16px;
    line-height: 22px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select {
    height: var(--field-height);
}

select {
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: calc(100% - 13px) 50%;
    background-size: 16px 16px;
    background-repeat: no-repeat;
}

textarea {
    min-height: 76px;
    padding: 13px var(--control-pad-x);
    border-radius: var(--radius-button-soft);
    resize: vertical;
}

input::placeholder,
textarea::placeholder { color: var(--placeholder); opacity: 1; }

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(19, 18, 16, 0.12);
    outline: 0;
}

.btn,
.btn-sm {
    height: var(--button-height);
    min-height: var(--button-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-control);
    background: var(--primary);
    color: #ffffff;
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    text-decoration: none;
    box-shadow: var(--shadow-button);
    cursor: pointer;
    white-space: nowrap;
}

.btn { padding: 0 18px; }

.btn-sm {
    margin-top: 0;
    padding: 0 var(--button-pad-x);
}

.btn:hover,
.btn-sm:hover {
    border-color: var(--primary-hover);
    background: var(--primary-hover);
    color: #ffffff;
}

.pill-link {
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary-hover);
    box-shadow: none;
}

.pill-link:hover {
    background: var(--primary);
    color: #ffffff;
}

.danger-link {
    border-color: var(--danger);
    color: var(--danger);
}

.danger-link:hover {
    border-color: var(--danger);
    background: var(--danger);
    color: #ffffff;
}

.btn-dark {
    border-color: var(--summary-strong);
    background: var(--summary-strong);
}

.btn-dark:hover {
    border-color: #333333;
    background: #333333;
}

.btn-secondary {
    border-color: #777777;
    background: #777777;
}

.btn-secondary:hover {
    border-color: #5f5f5f;
    background: #5f5f5f;
}

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

.btn-danger:hover {
    border-color: #a82424;
    background: #a82424;
}

button:disabled,
a[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

.alert {
    padding: 10px 12px;
    border-radius: var(--radius-control);
    margin: 12px 0;
    font-size: 14px;
}

.alert-error { background: var(--danger-bg); color: var(--danger); }
.alert-ok { background: var(--ok-bg); color: var(--primary-active); }
.field-error { color: var(--danger); font-size: 12px; margin-top: 4px; }
.muted { color: var(--muted); font-size: 13px; }
.auth-link { margin-top: 16px; }

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

.toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 16px 0;
    flex-wrap: wrap;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 28px 0 32px;
}

.page-header h1 {
    margin: 0;
    flex: 1 1 auto;
}

.page-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 43px;
    min-width: 34px;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.page-back-button:hover {
    color: var(--text);
    background: transparent;
}

.page-back-button::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background: currentColor;
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
    mask-size: 22px 22px;
    -webkit-mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 22px 22px;
}

.icon-back::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.2 5.2 7.4 12l6.8 6.8 1.3-1.3-5.5-5.5 5.5-5.5-1.3-1.3Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.2 5.2 7.4 12l6.8 6.8 1.3-1.3-5.5-5.5 5.5-5.5-1.3-1.3Z'/%3E%3C/svg%3E");
}

.table-toolbar {
    min-height: 92px;
    align-items: center;
    padding: 16px;
    background: var(--panel);
    border: 1px solid #eeeeee;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.table-toolbar label {
    margin: 0;
}

.table-toolbar input[type="text"],
.table-toolbar input[type="search"] {
    width: min(100%, 400px);
}

.table-toolbar select {
    width: auto;
    min-width: 180px;
}

.table-toolbar .btn,
.table-toolbar .btn-sm {
    height: var(--field-height);
    min-height: var(--field-height);
}

table.list {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    margin-top: 12px;
    background: var(--panel);
    border: 1px solid #eeeeee;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

table.list th,
table.list td {
    height: 68px;
    padding: 0 16px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--divider);
    color: var(--text-form);
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.list th {
    height: 64px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

table.list tr:last-child td,
table.list tr:last-child th { border-bottom: none; }

table.list td.num,
table.list th.num { text-align: right; }

.archive-details {
    margin-top: 14px;
    color: var(--muted);
    font-size: 13px;
}

.archive-details summary {
    cursor: pointer;
    font-weight: 600;
}

.archive-details .archive-list {
    margin-top: 10px;
    box-shadow: none;
}

.archive-details table.list th,
.archive-details table.list td {
    height: 52px;
    color: var(--muted);
}

.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--selected);
    color: var(--muted-soft);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.tag.on { background: var(--ok-bg); color: var(--primary-active); }

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

/* Rechnung draft editor */
.page-form-wide #rechnung-form > .grid2 {
    grid-template-columns: minmax(520px, 1fr) minmax(230px, 360px);
    column-gap: 98px;
    align-items: flex-end;
}

table.pos-table {
    display: block;
    margin-top: 0;
    table-layout: fixed;
    border: 0;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    counter-reset: position-row;
    overflow: visible;
}

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

table.pos-table tbody,
table.pos-table tfoot,
table.pos-table tr,
table.pos-table td {
    display: block;
}

table.pos-table tbody {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-bottom: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.pos-row {
    counter-increment: position-row;
    position: relative;
    display: grid !important;
    grid-template-columns: 48px minmax(420px, 1fr) 78px 122px 86px 118px 34px;
    gap: 8px;
    align-items: start;
    min-height: 154px;
    padding: 32px 22px 22px 40px;
    border-bottom: 1px solid var(--divider);
}

.pos-row::before {
    content: counter(position-row);
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: #eeeeee;
    color: #444444;
    font-size: 14px;
    font-weight: 600;
}

table.pos-table td {
    position: relative;
    height: auto;
    padding: 0;
    border-bottom: 0;
    overflow: visible;
}

table.pos-table td::before {
    position: absolute;
    z-index: 1;
    margin: -10px 0 0 10px;
    padding: 0 4px;
    background: #ffffff;
    color: #777777;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

table.pos-table td.pos-main::before { content: "Artikel"; }
.pos-row > td.pos-qty::before { content: "Menge"; }
.pos-row > td.pos-price::before { content: "VK (Netto)"; }
.pos-row > td.pos-discount::before { content: "Rabatt"; }

table.pos-table td.pos-main { width: auto; }

.pos-row .pos-main { grid-column: 2; }
.pos-row .pos-qty { grid-column: 3; }
.pos-row .pos-price { grid-column: 4; }
.pos-row .pos-discount { grid-column: 5; }
.pos-row .pos-desc {
    grid-column: 2 / 6;
    grid-row: 2;
}
.pos-row .pos-total {
    grid-column: 6;
    grid-row: 1;
}
.pos-row .pos-delete {
    grid-column: 7;
    grid-row: 1;
}

.pos-main input[data-name] {
    width: 100%;
    font-weight: 400;
}

.pos-main .art-combobox { position: relative; }

.pos-main .art-combobox input {
    width: 100%;
    font-weight: 400;
}

.pos-main .art-results {
    position: absolute;
    z-index: 20;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--panel);
    box-shadow: var(--shadow-card);
}

.pos-main .art-results button {
    display: block;
    width: 100%;
    min-height: var(--button-height);
    padding: 9px 10px;
    border: 0;
    background: transparent;
    text-align: left;
    color: var(--text);
    cursor: pointer;
}

.pos-main .art-results button:hover,
.pos-main .art-results button[aria-selected="true"] { background: var(--ok-bg); }

.pos-desc textarea[data-desc] {
    width: 100%;
    min-height: 96px;
    overflow: hidden;
    padding: 13px;
    font-size: 15px;
    line-height: 22px;
    resize: none;
}

.pos-desc textarea[data-desc][hidden] { display: none; }

.pos-table input[type="text"] {
    min-height: var(--field-height);
    padding: 0 var(--control-pad-x);
    font-size: 15px;
}

.pos-table input[data-qty],
.pos-table input[data-price],
.pos-table input[data-disc] {
    width: 100%;
    text-align: right;
}

.pos-price input[data-price],
.pos-discount input[data-disc] {
    padding-right: 30px;
}

.pos-price::after,
.pos-discount::after {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-soft);
    font-size: 15px;
    line-height: 22px;
    pointer-events: none;
}

.pos-price::after { content: "€"; }
.pos-discount::after { content: "%"; }

.pos-row td[data-line-total] {
    padding-top: 9px;
    color: #212121;
    font-size: 16px;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.pos-row td[data-line-total]::after { content: " €"; }

.pos-summary td {
    padding: 0;
    border: 0;
}

.invoice-summary {
    min-height: 86px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px 150px 220px;
    align-items: stretch;
    overflow: hidden;
    border-radius: 0 0 16px 16px;
    color: #ffffff;
    background: #666666;
}

.invoice-summary__net { grid-column: 2; }
.invoice-summary__tax { grid-column: 3; }
.invoice-summary__gross { grid-column: 4; }

.invoice-summary__net,
.invoice-summary__tax,
.invoice-summary__gross {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 14px 28px;
}

.invoice-summary__net {
    background: #666666;
}

.invoice-summary__tax {
    align-items: center;
    padding-inline: 12px;
    background: #666666;
    color: #eeeeee;
}

.invoice-summary__gross {
    background: var(--summary-strong);
    font-weight: 700;
}

.invoice-summary span {
    color: #eeeeee;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    letter-spacing: 0;
}

.invoice-summary strong {
    color: #ffffff;
    font-size: 31px;
    line-height: 38px;
    font-weight: 400;
}

.invoice-summary__gross strong {
    font-weight: 700;
}

.invoice-summary strong::after { content: " €"; }

.pos-row.is-nonarticle [data-qty],
.pos-row.is-nonarticle [data-price],
.pos-row.is-nonarticle [data-disc] { opacity: 0.4; }

.pos-add-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    margin: 16px 0;
}

.del-row {
    width: var(--icon-button-size);
    height: var(--icon-button-size);
    min-width: var(--icon-button-size);
    min-height: var(--icon-button-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--muted);
    line-height: 1;
    cursor: pointer;
    font-size: 0;
}

.del-row:hover {
    border-color: var(--danger);
    color: var(--danger);
}

.del-row::before,
.btn-icon-glyph::before {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    background: currentColor;
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
    mask-size: 18px 18px;
    -webkit-mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 18px 18px;
}

.btn-icon {
    gap: 8px;
}

.contact-select-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 8px;
    align-items: stretch;
}

.contact-select-row .btn-sm {
    height: var(--field-height);
    min-height: var(--field-height);
    border-color: #777777;
    background: #777777;
    color: #ffffff;
}

.contact-select-row .btn-sm:hover {
    border-color: #5f5f5f;
    background: #5f5f5f;
}

.modal-backdrop {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: 48px 16px;
    background: rgba(33, 33, 33, 0.45);
    overflow-y: auto;
}

.modal-backdrop[hidden] { display: none; }

.modal-panel {
    width: min(720px, 100%);
    border: 1px solid #eeeeee;
    border-radius: var(--radius-card);
    background: var(--panel);
    box-shadow: var(--shadow-card);
    padding: 16px;
}

.modal-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
}

.belege-create-actions,
.contacts-create-actions,
.dashboard-create-actions,
.items-create-actions,
.inline-create-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.belege-create-actions {
    position: relative;
    justify-content: flex-end;
    align-items: flex-start;
    min-width: 390px;
}

.contacts-create-actions,
.dashboard-create-actions,
.items-create-actions {
    justify-content: flex-end;
    margin-left: auto;
}

.correction-menu {
    position: relative;
}

.correction-menu > summary.btn-sm,
.belege-create-actions > button.btn-sm {
    border-color: var(--warning);
    background: var(--warning);
}

.correction-menu > summary.btn-sm:hover {
    border-color: var(--warning-hover);
    background: var(--warning-hover);
}

.correction-menu summary {
    list-style: none;
}

.correction-menu summary::-webkit-details-marker { display: none; }

.correction-menu summary.is-disabled {
    pointer-events: none;
}

.correction-picker {
    position: absolute;
    z-index: 10;
    top: calc(100% + 8px);
    right: 0;
    width: min(430px, calc(100vw - 48px));
    padding: 14px;
    border: 1px solid #dddddd;
    border-radius: var(--radius-card);
    background: var(--panel);
    box-shadow: var(--shadow-card);
}

.correction-picker label {
    margin-top: 0;
}

.correction-picker .btn-sm {
    width: 100%;
    margin-top: 10px;
}

.inline-create-form select { min-width: 280px; }

.belege-filter {
    min-height: 74px;
    align-items: stretch;
    gap: 10px;
}

.belege-filter label {
    display: flex;
    align-items: center;
    margin: 0 0 0 0;
}

.belege-filter input[type="search"],
.belege-filter select {
    height: var(--field-height);
    min-height: var(--field-height);
}

.belege-filter .btn-sm {
    height: var(--field-height);
    min-height: var(--field-height);
    border-color: #777777;
    background: #777777;
    box-shadow: none;
}

.belege-filter .btn-sm:hover {
    border-color: #5f5f5f;
    background: #5f5f5f;
}

.belege-count {
    margin: 14px 0 10px;
    color: var(--muted);
    font-size: 14px;
}

.belege-list {
    background: var(--panel);
    border: 1px solid #eeeeee;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.contacts-list {
    background: var(--panel);
    border: 1px solid #eeeeee;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.items-list {
    background: var(--panel);
    border: 1px solid #eeeeee;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.dashboard-section h2 {
    margin: 0 0 12px;
    font-size: 18px;
}

.settings-overview-content {
    display: grid;
    gap: 16px;
}

.settings-overview-content .dashboard-section { margin: 0; }

.settings-maintenance {
    display: grid;
    gap: 10px;
}

.settings-maintenance form { margin: 0; }

.system-state-report {
    display: grid;
    gap: 1px;
    padding: 0;
    overflow: hidden;
}

.system-state-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--divider);
}

.system-state-row:last-child { border-bottom: 0; }
.system-state-row strong { font-size: 11px; }
.system-state-ok strong { color: var(--primary); }
.system-state-warn strong { color: var(--warning-hover); }
.system-state-fail strong { color: var(--danger); }

.dashboard-belege-list {
    background: var(--panel);
    border: 1px solid #eeeeee;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.dashboard-beleg-header,
.dashboard-beleg-row {
    display: grid;
    grid-template-columns: 130px minmax(180px, 1fr) 120px 130px 110px 184px;
    gap: 16px;
    align-items: center;
    padding: 0 16px;
}

.dashboard-beleg-header {
    min-height: 42px;
    border-bottom: 1px solid #d8d8d8;
    background: #f7f7f7;
    color: #8a8a8a;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.dashboard-beleg-row {
    min-height: 78px;
    padding-block: 14px;
    border-bottom: 1px solid #d8d8d8;
    background: #ffffff;
}

.dashboard-beleg-row:last-child { border-bottom: none; }

.dashboard-beleg-number {
    color: var(--muted);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.dashboard-beleg-client {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: var(--row-title-size);
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-beleg-date {
    color: var(--muted);
    font-size: 15px;
    white-space: nowrap;
}

.dashboard-beleg-amount {
    color: var(--muted-soft);
    font-size: 18px;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.dashboard-beleg-status {
    display: flex;
    justify-content: flex-start;
}

.document-detail-wrap {
    width: min(calc(100% - 72px), 1500px);
    max-width: 1500px;
}

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

.document-detail-main {
    min-width: 0;
}

.document-detail-sidebar {
    position: sticky;
    top: 62px;
}

.document-detail-sidebar h2 {
    margin: 0 0 14px;
    font-size: 18px;
}

.document-detail-sidebar h3 {
    margin: 18px 0 10px;
    font-size: 14px;
}

.document-email-history {
    margin-top: 18px;
}

.email-history-list {
    display: grid;
    gap: 10px;
}

.email-history-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.email-history-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.document-action-group {
    padding: 0 0 16px;
    border-bottom: 1px solid var(--border);
}

.document-action-group + .document-action-group {
    margin-top: 16px;
}

.document-action-group-payment {
    padding-bottom: 6px;
}

.document-action {
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
}

.document-payment-form {
    margin-top: 8px;
}

.document-payment-form input,
.document-payment-form select {
    width: 100%;
}

.document-secondary-actions form {
    margin: 0;
}

.item-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px 128px 140px;
    gap: 16px;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border-bottom: 1px solid #d8d8d8;
    background: #f7f7f7;
    color: #8a8a8a;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.item-header-main {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(120px, 1fr);
    gap: 16px;
    min-width: 0;
}

.item-header-price {
    text-align: right;
}

.beleg-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 120px 184px;
    gap: 16px;
    align-items: center;
    min-height: 88px;
    padding: 14px 16px;
    border-bottom: 1px solid #d8d8d8;
    background: #ffffff;
}

.beleg-row:last-child { border-bottom: none; }

.contact-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 16px;
    align-items: center;
    min-height: 78px;
    padding: 14px 16px;
    border-bottom: 1px solid #d8d8d8;
    background: #ffffff;
}

.contact-row:last-child { border-bottom: none; }

.item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px 128px 140px;
    gap: 16px;
    align-items: center;
    min-height: 78px;
    padding: 14px 16px;
    border-bottom: 1px solid #d8d8d8;
    background: #ffffff;
}

.item-row:last-child { border-bottom: none; }

.beleg-main {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 4px 16px;
    align-items: baseline;
    min-width: 0;
    color: var(--text);
}

.beleg-main:hover {
    color: var(--text);
}

.contact-main {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 3px 16px;
    align-items: baseline;
    min-width: 0;
    color: var(--text);
}

.contact-main:hover {
    color: var(--text);
}

.item-main {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(120px, 1fr);
    gap: 16px;
    align-items: baseline;
    min-width: 0;
    color: var(--text);
}

.item-main:hover {
    color: var(--text);
}

/* Thumbnail in the staged-rows table. The class sits on the <img> itself, so it
   must be matched as such: an earlier `.artwork-preview img` descendant selector
   never matched anything and left the staged image at its natural size, which
   stretched each table row to the height of a full artwork photo (TRART-0078).
   The box is deliberately small — the point of this table is to scan a list. */
img.artwork-preview {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: contain;
    border: 1px solid var(--border);
    background: var(--selected);
}

.artwork-card-main {
    /* The media column is a fixed slot: a square, portrait or landscape image all
       fit inside it, so the data column never shifts with the artwork. */
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    gap: 32px 48px;
    align-items: start;
}

.artwork-card-tables {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 48px;
    align-items: start;
    margin-top: 32px;
}

.artwork-card-tables .section-title { margin-top: 0; }

.artwork-card-id {
    color: var(--muted);
    font-weight: 400;
}

.artwork-card-name {
    color: var(--text);
    font-weight: 700;
    text-transform: uppercase;
}

.artwork-card-media {
    /* TRART-0127: an explicit square slot. The image is centred inside it in
       every orientation, and the slot's height comes from the square, not from
       the image — the data column beside it can never shift, which is the
       reason the slot is fixed in the first place. At <=900px the square is
       capped so a full-width media column cannot grow the modal. */
    margin: 0;
    aspect-ratio: 1 / 1;
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    align-items: center;
}
.artwork-card-media img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    border: 1px solid var(--border);
    object-fit: contain;
}

.artwork-card-drive { margin-top: 14px; }

.artwork-card-file-problem {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: var(--radius-control);
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 13px;
}

.artwork-card-file-problem a { margin-left: 6px; }

.artwork-card-details { margin: 0; }
.artwork-edit-top {
    display: grid;
    grid-template-columns: minmax(260px, 30%) minmax(0, 1fr);
    gap: 36px 48px;
    align-items: start;
}

.artwork-image-editor,
.artwork-core-editor,
.artwork-secondary-editor,
.artwork-file-actions {
    margin-top: 0;
}

.artwork-image-editor h2,
.artwork-core-editor h2,
.artwork-secondary-editor h2 { margin-bottom: 16px; }

.artwork-edit-preview,
.artwork-edit-preview-empty {
    width: 100%;
    min-height: 220px;
    max-height: 440px;
    display: block;
    margin: 0 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: #f4f4f4;
    object-fit: contain;
}

.artwork-edit-preview-empty {
    display: grid;
    place-items: center;
    padding: 24px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.artwork-image-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 0 16px;
}

.artwork-image-actions .icon-button { margin: 0; }
.artwork-image-delete { color: var(--danger); }
.artwork-image-delete:hover { border-color: var(--danger); color: var(--danger); }

.artwork-id-value {
    display: grid;
    gap: 4px;
    margin: 0 0 16px;
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
}

.artwork-id-value span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.artwork-core-fields { margin-top: 0; }

.artwork-inch-value {
    min-height: 18px;
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 18px;
}

.artwork-secondary-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 40px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.artwork-description-editor {
    margin-top: 24px;
    padding: 22px 24px 24px;
    border: 1px solid var(--divider);
    border-radius: var(--radius-card);
    background: #fafafa;
}

.artwork-description-editor h2 {
    margin: 0 0 16px;
}

.artwork-ai-description {
    margin-top: 0;
}

.artwork-ai-description label {
    display: block;
    margin: 16px 0 6px;
}

.artwork-ai-description textarea {
    width: 100%;
    min-height: 96px;
    resize: vertical;
}

.artwork-ai-output {
    margin-top: 20px;
    padding: 16px;
    border: 2px solid #4f7c45;
    border-radius: 14px;
    background: #ffffff;
}

.artwork-ai-output label {
    margin-top: 0;
}

.artwork-ai-output textarea {
    min-height: 150px;
    border-color: #b9cdb2;
    background: #ffffff;
}

.artwork-ai-output textarea:focus {
    border-color: #4f7c45;
    box-shadow: 0 0 0 3px rgba(79, 124, 69, 0.16);
}

.artwork-ai-description .muted {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.45;
}

.artwork-description-editor .form-actions { margin-top: 16px; }

.artwork-description-editor .artwork-ai-generate {
    border-color: #4f7c45;
    background: #4f7c45;
}

.artwork-description-editor .artwork-ai-generate:hover {
    border-color: #416638;
    background: #416638;
}

.artwork-description-editor .artwork-ai-apply {
    border-color: #4f7c45;
    background: transparent;
    color: #416638;
    box-shadow: none;
}

.artwork-description-editor .artwork-ai-apply:hover {
    border-color: #416638;
    background: #eef4eb;
    color: #416638;
}

.page-header .artwork-save-button {
    border-color: #4f7c45;
    background: #4f7c45;
}

.page-header .artwork-save-button:hover {
    border-color: #416638;
    background: #416638;
}

.artwork-ai-status {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.45;
}

.artwork-ai-status.is-loading {
    color: #6e5f4d;
}

.artwork-ai-status.is-success {
    color: #416638;
}

.artwork-ai-status.is-error {
    color: #9c3e32;
}

.artwork-description-editor .artwork-ai-generate[aria-busy="true"] {
    cursor: wait;
    opacity: .72;
}


.artwork-secondary-card {
    padding: 22px 24px 24px;
    border: 1px solid var(--divider);
    border-radius: var(--radius-card);
    background: #fafafa;
}

.artwork-field-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; margin-bottom: 8px; }
.artwork-field-label label { margin: 0; }
.artwork-quick-create-button { height: 32px; min-height: 32px; margin: 0; padding: 0 12px; font-size: 12px; white-space: nowrap; }
.artwork-quick-create-modal { width: min(560px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--divider); border-radius: var(--radius-card); box-shadow: 0 20px 60px rgba(0, 0, 0, .2); }
.artwork-quick-create-modal::backdrop { background: rgba(33, 33, 33, .45); }
.artwork-quick-create-modal form { padding: 20px 24px 24px; }
.artwork-quick-create-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -20px -24px 18px; padding: 16px 20px; border-bottom: 1px solid var(--divider); }
.artwork-quick-create-header h2 { margin: 0; font-size: 20px; }
.artwork-quick-create-modal .modal-actions { margin-top: 22px; }
.artwork-quick-create-subheading { padding-top: 8px; font-weight: 700; border-top: 1px solid var(--divider); }

.artwork-notes-editor { grid-column: 1 / -1; }
.artwork-notes-editor > label { margin-top: 0; }
.artwork-delete-editor { display: flex; align-items: center; justify-content: flex-end; gap: 24px; margin-top: 24px; padding-top: 0; }
.artwork-delete-editor .btn-danger {
    flex: 0 0 auto;
    border-color: #131210;
    background: #131210;
}
.artwork-delete-editor .btn-danger:hover {
    border-color: #35312c;
    background: #35312c;
}
.artwork-drop-zone {
    padding: 14px;
    border: 2px dashed #b5b5b5;
    border-radius: var(--radius-card);
    background: #f7f7f7;
}
.artwork-drop-zone.is-dragging { border-color: var(--primary); background: var(--ok-bg); }
.artwork-drop-zone progress { width: min(100%, 360px); display: block; margin-top: 10px; }

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

.profile-section {
    padding: 18px 0 24px;
    border-top: 1px solid var(--border);
}

.profile-section:first-of-type {
    border-top: 0;
}

.ai-draft-form {
    margin: 18px 0;
}

.prebox {
    background: #f4f4f4;
    border: 1px solid var(--border);
    overflow: auto;
    padding: 12px;
    white-space: pre-wrap;
}

.detail-list {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 12px 20px;
}

.detail-list dt {
    color: var(--muted);
    font-weight: 700;
}

.detail-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.beleg-number {
    color: var(--primary-hover);
    font-size: 15px;
    font-weight: 600;
}

.contact-number {
    color: var(--muted);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.beleg-title {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: var(--row-title-size);
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-title {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: var(--row-title-size);
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-title {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: var(--row-title-size);
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-description,
.contact-address {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-address {
    grid-column: 2;
}

.item-price {
    color: var(--muted-soft);
    font-size: 18px;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.beleg-meta {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beleg-amount {
    color: var(--muted-soft);
    font-size: 18px;
    text-align: right;
    white-space: nowrap;
}

.beleg-status {
    display: flex;
    justify-content: flex-start;
}

.beleg-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.contact-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.item-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.beleg-actions form {
    margin: 0;
}

.contact-actions form {
    margin: 0;
}

.item-actions form {
    margin: 0;
}

.icon-button {
    width: var(--icon-button-size);
    height: var(--icon-button-size);
    min-width: var(--icon-button-size);
    min-height: var(--icon-button-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d6d6d6;
    border-radius: var(--radius-control);
    background: #ffffff;
    color: #4d4d4d;
    font-size: 0;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.icon-button::before {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    background: currentColor;
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
    mask-size: 18px 18px;
    -webkit-mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 18px 18px;
}

.icon-button:hover {
    border-color: #bdbdbd;
    background: #f4f4f4;
    color: var(--text);
}

.icon-edit::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 17.25V20h2.75L17.8 8.95l-2.75-2.75L4 17.25Zm15.7-10.4a1 1 0 0 0 0-1.4L18.55 4.3a1 1 0 0 0-1.4 0l-.9.9L19 7.95l.7-.7Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 17.25V20h2.75L17.8 8.95l-2.75-2.75L4 17.25Zm15.7-10.4a1 1 0 0 0 0-1.4L18.55 4.3a1 1 0 0 0-1.4 0l-.9.9L19 7.95l.7-.7Z'/%3E%3C/svg%3E");
}

.icon-print::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h10v5H7V3Zm-1 7h12a3 3 0 0 1 3 3v4h-4v4H7v-4H3v-4a3 3 0 0 1 3-3Zm3 6v3h6v-3H9Zm9-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h10v5H7V3Zm-1 7h12a3 3 0 0 1 3 3v4h-4v4H7v-4H3v-4a3 3 0 0 1 3-3Zm3 6v3h6v-3H9Zm9-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z'/%3E%3C/svg%3E");
}

.icon-trash::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3h6l1 2h5v2H3V5h5l1-2Zm-2 6h10l-.8 12H7.8L7 9Zm2.2 2 .55 8h4.5l.55-8H9.2Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3h6l1 2h5v2H3V5h5l1-2Zm-2 6h10l-.8 12H7.8L7 9Zm2.2 2 .55 8h4.5l.55-8H9.2Z'/%3E%3C/svg%3E");
}

.icon-mail::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5h18v14H3V5Zm2 3.2V17h14V8.2l-7 4.6-7-4.6ZM6.8 7l5.2 3.4L17.2 7H6.8Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5h18v14H3V5Zm2 3.2V17h14V8.2l-7 4.6-7-4.6ZM6.8 7l5.2 3.4L17.2 7H6.8Z'/%3E%3C/svg%3E");
}

.icon-duplicate::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 7V3h14v14h-4v4H3V7h4Zm2 0h8v8h2V5H9v2Zm-4 2v10h10V9H5Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 7V3h14v14h-4v4H3V7h4Zm2 0h8v8h2V5H9v2Zm-4 2v10h10V9H5Z'/%3E%3C/svg%3E");
}

.icon-button:disabled,
.icon-button.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.belege-empty {
    min-height: 82px;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.contacts-empty {
    min-height: 82px;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.items-empty {
    min-height: 82px;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 18px;
}

.page-header .artwork-editor-actions {
    flex: 0 0 auto;
    margin: 0;
}

.contact-editor-header { margin-bottom: 22px; }
.contact-editor-header + .artwork-secondary-card { margin-top: 0; }
.contact-editor-header ~ .artwork-secondary-card { margin-top: 18px; }
.contact-type-toggle { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 18px; }
.contact-type-toggle > span { font-weight: 700; }
.contact-type-toggle label { margin: 0; }

.form-actions .btn,
.form-actions .btn-sm,
.finalize-form .btn,
.modal-actions .btn,
.modal-actions .btn-sm {
    height: var(--button-height);
    min-height: var(--button-height);
    margin-top: 0;
}

.inline-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
}

.finalize-form,
.stacked-form { margin-top: 16px; }

.rechnung-actions .finalize-form {
    margin-top: 0;
}

.totals-block {
    margin: 16px 0;
    text-align: right;
    color: var(--text-form);
    line-height: 1.65;
}

.code-input {
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.5;
}

hr {
    border: 0;
    border-top: 1px solid var(--divider);
    margin: 24px 0;
}

.dashboard-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.period-form {
    display: flex;
    gap: 8px;
    align-items: end;
}

.period-form label { margin: 0; }
.period-form input { width: 110px; }

@media (max-width: 900px) {
    .artwork-card-main { grid-template-columns: 1fr; }
    .artwork-card-media { max-height: 420px; }
    .artwork-card-tables { grid-template-columns: 1fr; }
    .artwork-edit-top,
    .artwork-secondary-editor { grid-template-columns: 1fr; }
    .artwork-secondary-editor { gap: 24px; }
    .artwork-delete-editor { align-items: stretch; flex-direction: column; }
    .artwork-delete-editor .btn-danger { align-self: flex-end; }
    .topbar {
        gap: 16px;
        align-items: flex-start;
        padding: 10px 16px;
        overflow-x: auto;
    }

    .wrap,
    .auth-wrap {
        width: calc(100% - 32px);
        margin-top: 28px;
    }

    .grid2 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .page-form-wide #rechnung-form > .grid2 { grid-template-columns: 1fr; }

    .page-header {
        flex-wrap: wrap;
    }

    .table-toolbar {
        flex-direction: column;
    }

    table.list {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .pos-row {
        grid-template-columns: 38px minmax(0, 1fr) 34px;
        padding: 28px 16px 20px;
    }

    .pos-row .pos-main,
    .pos-row .pos-qty,
    .pos-row .pos-price,
    .pos-row .pos-discount,
    .pos-row .pos-desc,
    .pos-row .pos-total {
        grid-column: 2;
        grid-row: auto;
    }

    .pos-row .pos-delete {
        grid-column: 3;
        grid-row: 1;
    }

    .invoice-summary {
        grid-template-columns: 1fr;
        border-radius: 0 0 12px 12px;
    }

    .invoice-summary__net,
    .invoice-summary__tax,
    .invoice-summary__gross {
        grid-column: 1;
    }

    .invoice-summary__tax,
    .invoice-summary__gross { align-items: flex-end; }

    .contact-select-row,
    .inline-create-form {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .inline-create-form select { min-width: 0; }

    .belege-create-actions,
    .contacts-create-actions,
    .dashboard-create-actions,
    .items-create-actions {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
    }

    .correction-menu,
    .correction-menu summary,
    .correction-picker {
        width: 100%;
    }

    .correction-picker {
        position: static;
        margin-top: 8px;
    }

    .belege-filter {
        align-items: stretch;
    }

    .belege-filter label,
    .belege-filter select,
    .belege-filter input[type="search"],
    .belege-filter .btn-sm {
        width: 100%;
    }

    .beleg-row,
    .contact-row,
    .dashboard-beleg-header,
    .dashboard-beleg-row,
    .item-header,
    .item-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .beleg-main,
    .contact-main,
    .item-header-main,
    .item-main {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .beleg-meta,
    .contact-address {
        grid-column: 1;
    }

    .beleg-amount,
    .beleg-status,
    .beleg-actions,
    .contact-actions,
    .dashboard-beleg-amount,
    .dashboard-beleg-status,
    .item-header-price,
    .item-price,
    .item-actions {
        justify-content: flex-start;
        text-align: left;
    }

    .document-detail-layout {
        grid-template-columns: 1fr;
    }

    .document-detail-sidebar {
        position: static;
    }
}

/* Artworks list (TRART-0036; extended 2026-08-01: created-at column, per-row
   selection checkbox and bulk-actions control) */
.artworks-page {
    --artwork-checkbox-col: 40px;
    --artwork-row-gap: 12px;
    --artwork-row-columns:
        78px
        72px
        minmax(180px, 1fr)
        108px
        140px
        minmax(120px, 150px)
        120px
        minmax(130px, 170px);
}

.artworks-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(160px, 200px) 1fr max-content;
    gap: 10px;
    margin: 16px 0;
}

.artworks-toolbar .artworks-page-size {
    grid-column: 4;
    width: auto;
    min-width: max-content;
    justify-self: end;
}

.artworks-bulk-form {
    display: grid;
    /* Tracks are sized to their content and packed to the left, so the free space collects on the
       right where further bulk controls are expected to go. A fixed 360px first column matched the
       search field above it, but with only a short count in it that read as a large empty margin
       (TRART-0097). */
    grid-template-columns: max-content minmax(170px, 220px) minmax(170px, 220px) minmax(88px, max-content);
    justify-content: start;
    align-items: end;
    column-gap: 12px;
    row-gap: 8px;
    margin: 0 0 16px;
    padding: 12px 20px;
    border: 1px solid var(--divider);
    /* The same shape as the list table below it, not the pill shape of the fields inside it. */
    border-radius: var(--radius-card);
    background: var(--selected);
}

.artworks-bulk-form[hidden] {
    display: none !important;
}

.artworks-bulk-form label[hidden] {
    display: none !important;
}

/* The panel is a row of controls with captions above them, so the row has two possible baselines:
   the caption line and the control line. Everything that has no caption — the selection count and
   Apply — must sit on the control line, or it drifts below it. Giving them the same height as a
   field and centring their content puts all three on one centre line without magic numbers
   (TRART-0096). */
.artworks-bulk-form strong {
    grid-column: 1;
    align-self: end;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: var(--field-height);
    padding-right: 8px;
    color: var(--text);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.artworks-bulk-form label {
    display: grid;
    /* The generic label rule carries 14px/6px margins. Inside this row they push the control off the
       shared baseline by exactly that 6px, which is what made Apply and the count look unaligned no
       matter what those two were set to (TRART-0096). */
    margin: 0;
    gap: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.artworks-bulk-form select {
    min-width: 0;
}

.artworks-bulk-form .btn {
    align-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--field-height);
    justify-self: center;
    border-radius: var(--radius-button-soft);
}

.artworks-bulk-form .btn[hidden] {
    display: none !important;
}

.artworks-toolbar input[type="search"],
.artworks-toolbar select,
.artworks-toolbar .btn-sm {
    width: 100%;
    min-width: 0;
}

.artworks-toolbar .artworks-bulk-actions {
    width: auto;
    min-width: 170px;
    justify-self: end;
}

.artworks-list-header {
    display: grid;
    grid-template-columns: var(--artwork-checkbox-col) minmax(0, 1fr) 82px 48px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--divider);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: var(--selected);
    color: var(--muted);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.artworks-table {
    overflow: visible;
    border: 1px solid var(--divider);
    border-radius: var(--radius-card);
    background: var(--panel);
}

.artworks-list-header-cols {
    display: grid;
    grid-template-columns: var(--artwork-row-columns);
    align-items: center;
    gap: var(--artwork-row-gap);
    min-width: 0;
    padding-left: 12px;
}

.artworks-list-header > span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.artworks-list-header > span:first-child input {
    margin: 0;
}

.artworks-list {
    display: grid;
    gap: 0;
}

.artworks-list .artwork-row {
    display: grid;
    grid-template-columns: var(--artwork-checkbox-col) minmax(0, 1fr) 82px 48px;
    align-items: stretch;
    border: 0;
    border-bottom: 1px solid var(--divider);
    border-radius: 0;
    background: var(--panel);
    transition: background-color 120ms ease;
}

.artworks-list .artwork-row:last-child {
    border-bottom: 0;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.artworks-list .artwork-row:hover {
    background: var(--selected);
}

.artworks-list .artwork-row:has(.artwork-list-checkbox input:checked) {
    background: var(--selected);
}

/* The header's select-all cell shares these rules rather than carrying its own.
   Two parallel rule sets is how the header checkbox came to sit 4 px off after
   it was moved into the right column: the row's box carries a 6 px left padding
   and a 16 px input, the header's fell back to the generic 18 px one. */
.artwork-list-checkbox,
.artworks-list-header > .artwork-list-checkbox-col {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding-left: 6px;
    cursor: pointer;
}

.artwork-list-checkbox input,
.artworks-list-header > .artwork-list-checkbox-col input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.artwork-row-link {
    display: grid;
    grid-template-columns: var(--artwork-row-columns);
    gap: var(--artwork-row-gap);
    align-items: center;
    min-width: 0;
    padding: 8px 0 8px 12px;
    color: var(--text);
}

.artwork-row-link:hover { color: var(--text); }

.artwork-list-channel-header,
.artwork-channel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.artwork-list-channel-header {
    color: var(--muted);
}

.artwork-channel-controls {
    position: relative;
    min-width: 0;
}

.artwork-channel-toggle {
    position: relative;
    display: inline-flex;
    width: 28px;
    height: 28px;
    margin: 0;
    cursor: pointer;
}

.artwork-channel-toggle input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.artwork-channel-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--divider);
    border-radius: 8px;
    color: var(--muted);
    background: var(--panel);
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.artwork-channel-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.artwork-channel-icon-instagram svg circle:last-child {
    fill: currentColor;
    stroke: none;
}

.artwork-channel-toggle input:checked + .artwork-channel-icon {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--selected);
}

.artwork-channel-toggle input:focus-visible + .artwork-channel-icon {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.artwork-channel-toggle:active .artwork-channel-icon {
    transform: scale(0.94);
}

.artwork-channel-controls.is-saving .artwork-channel-icon {
    opacity: 0.5;
}

.artwork-channel-controls.is-error .artwork-channel-icon {
    border-color: var(--danger, #b44);
}

.artwork-channel-status {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 2;
    width: max-content;
    max-width: 180px;
    padding: 4px 7px;
    border: 1px solid var(--divider);
    border-radius: 6px;
    color: var(--text);
    background: var(--panel);
    box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
    font-size: 11px;
    line-height: 1.25;
}

.artwork-channel-status[data-error="1"] {
    color: var(--danger, #b44);
}

.artwork-list-id {
    color: var(--text-form);
    font-size: 13px;
    white-space: nowrap;
}

.artwork-list-preview {
    width: 68px;
    height: 70px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f0f0f0;
    border-radius: 0;
}

.artwork-list-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 0;
}

.artwork-list-preview-empty {
    padding: 8px;
    color: var(--muted-soft);
    font-size: 12px;
    text-align: center;
}

.artwork-list-created {
    color: var(--text-form);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.artwork-list-title {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artwork-list-dimensions {
    display: grid;
    gap: 2px;
    color: var(--text-form);
    font-size: 13px;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}

.artwork-list-status {
    display: flex;
    align-items: center;
}

.artwork-list-status .tag {
    flex: 0 0 10ch;
    box-sizing: content-box;
    min-height: 26px;
    width: 10ch;
    padding: 4px 11px;
    border-radius: var(--radius-control);
    background: var(--selected);
    color: #ffffff;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}

.artwork-list-status .status-for-sale { background: #5e7252; color: #ffffff; }
.artwork-list-status .status-on-hold { background: var(--warning); color: #ffffff; }
.artwork-list-status .status-sold { background: var(--danger); color: #ffffff; }
.artwork-list-status .status-not-for-sale { background: var(--muted-soft); color: #ffffff; }
.artwork-list-status .status-archived { background: var(--summary); color: #ffffff; }

.artwork-list-price {
    color: var(--text);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.artworks-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

.artworks-pagination a:not(.btn),
.artworks-pagination-current {
    display: grid;
    min-width: 30px;
    min-height: 30px;
    place-items: center;
    border-radius: var(--radius-control);
}

.artworks-pagination-current {
    background: var(--selected);
    color: var(--text);
    font-weight: 700;
}

.artwork-list-location {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-form);
    font-size: 14px;
}

.artwork-list-location > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artwork-list-location-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 18px 18px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 18px 18px;
}

.artwork-row-menu {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.artwork-row-menu > summary {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-control);
    color: var(--muted);
    list-style: none;
    cursor: pointer;
}

.artwork-row-menu > summary::-webkit-details-marker { display: none; }

.artwork-row-menu > summary::before {
    content: "";
    width: 18px;
    height: 4px;
    background:
        radial-gradient(circle 2px at 2px 2px, currentColor 100%, transparent 0) 0 0/7px 4px repeat-x;
}

.artwork-row-menu > summary:hover,
.artwork-row-menu[open] > summary {
    background: var(--selected);
    color: var(--text);
}

.artwork-row-menu-panel {
    position: absolute;
    z-index: 20;
    top: calc(50% + 22px);
    right: 6px;
    width: 150px;
    overflow: hidden;
    border: 1px solid var(--divider);
    border-radius: var(--radius-card);
    background: var(--panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.artwork-row-menu-panel a {
    display: block;
    padding: 10px 12px;
    color: var(--text);
    font-size: 14px;
}

.artwork-row-menu-panel a + a { border-top: 1px solid var(--divider); }

.artwork-row-menu-panel a:hover {
    background: var(--bg);
    color: var(--text);
}

/* Contacts list and shared card (TRART-0061; table style aligned with the
   Artworks list 2026-08-01 — TRART-0079 pattern). */
.contacts-page {
    --contact-row-gap: 12px;
    --contact-row-columns:
        minmax(200px, 1fr)
        minmax(180px, 240px)
        150px
        minmax(120px, 160px)
        minmax(160px, 180px);
}

.contacts-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 360px);
    gap: 10px;
    margin: 16px 0;
}

.contacts-toolbar input,
.contacts-toolbar select,
.contacts-toolbar .btn-sm { width: 100%; min-width: 0; }

.contacts-list-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--divider);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: var(--selected);
    color: var(--muted);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.contacts-table {
    overflow: visible;
    border: 1px solid var(--divider);
    border-radius: var(--radius-card);
    background: var(--panel);
}

.contacts-list-header-cols {
    display: grid;
    grid-template-columns: var(--contact-row-columns);
    gap: var(--contact-row-gap);
    min-width: 0;
    padding-left: 16px;
}

.contacts-list {
    display: grid;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.contacts-list .contact-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: stretch;
    min-width: 0;
    border: 0;
    border-bottom: 1px solid var(--divider);
    border-radius: 0;
    background: var(--panel);
    transition: background-color 120ms ease;
}

.contacts-list .contact-row:last-child {
    border-bottom: 0;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.contacts-list .contact-row:hover {
    background: var(--selected);
}

.contact-row-link {
    display: grid;
    grid-template-columns: var(--contact-row-columns);
    gap: var(--contact-row-gap);
    align-items: center;
    min-width: 0;
    padding: 8px 0 8px 16px;
    color: var(--text);
}

.contact-row-link:hover { color: var(--text); }

.contact-list-name,
.contact-list-email,
.contact-list-phone,
.contact-list-place,
.contact-list-category {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-list-name { display: grid; gap: 3px; }
.contact-list-name strong { color: var(--text); font-size: 14px; line-height: 1.3; font-weight: 700; }
.contact-list-name span,
.contact-list-email,
.contact-list-phone,
.contact-list-place { color: var(--text-form); font-size: 13px; }

.contact-list-category {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-list-category .tag {
    min-height: 26px;
    width: 160px;
    min-width: 160px;
    padding: 4px 11px;
    border-radius: var(--radius-control);
    background: var(--selected);
    color: #ffffff;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}

.contact-email-copy {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--text-form);
    font: inherit;
    font-size: 13px;
    text-decoration: underline dotted;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 120ms ease;
}

.contact-email-copy:hover {
    color: var(--primary);
    text-decoration-color: currentColor;
}

.contact-email-copy:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.contact-email-copy.is-copied {
    color: #5e7252;
    text-decoration-color: currentColor;
}

.contact-list-category .type-gallery { background: #5e7252; }
.contact-list-category .type-museum { background: #5f7d91; }
.contact-list-category .type-collector { background: #73668c; }
.contact-list-category .type-buyer { background: var(--danger); }
.contact-list-category .type-exhibition-organiser { background: #4e7d74; }
.contact-list-category .type-workshop { background: var(--warning); }
.contact-list-category .type-studio { background: #8d6a4f; }
.contact-list-category .type-other { background: var(--muted-soft); }

.contact-row-menu {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-row-menu > summary {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-control);
    color: var(--muted);
    list-style: none;
    cursor: pointer;
}

.contact-row-menu > summary::-webkit-details-marker { display: none; }
.contact-row-menu > summary::before {
    content: "";
    width: 18px;
    height: 4px;
    background: radial-gradient(circle 2px at 2px 2px, currentColor 100%, transparent 0) 0 0/7px 4px repeat-x;
}

.contact-row-menu > summary:hover,
.contact-row-menu[open] > summary { background: var(--selected); color: var(--text); }

.contact-row-menu-panel {
    position: absolute;
    z-index: 20;
    top: calc(50% + 22px);
    right: 6px;
    width: 150px;
    overflow: hidden;
    border: 1px solid var(--divider);
    border-radius: var(--radius-card);
    background: var(--panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.contact-row-menu-panel a,
.contact-row-menu-panel button {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-top: 1px solid var(--divider);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.contact-row-menu-panel a:first-child { border-top: 0; }
.contact-row-menu-panel a:hover,
.contact-row-menu-panel button:hover { background: var(--bg); color: var(--text); }

.contact-card-main { display: grid; gap: 28px; }
.contact-card-section h2 { margin: 0 0 14px; font-size: 17px; }
.contact-card-section .detail-list { max-width: 760px; }

.contact-addresses {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.contact-address-card {
    min-height: 142px;
    padding: 16px;
    border: 1px solid var(--divider);
    border-radius: var(--radius-card);
    background: var(--bg);
}

.contact-address-card h3 { margin: 0 0 10px; font-size: 14px; }
.contact-address-card p { margin: 0; line-height: 1.5; }
.contact-card-notes p { max-width: 900px; margin: 0; line-height: 1.55; }

.contact-card-name { color: var(--text); font-weight: 700; }
.contact-card-person { margin-left: 9px; color: var(--muted); font-size: 0.82em; font-weight: 400; }

.contact-modal {
    width: min(1120px, calc(100vw - 48px));
    max-width: none;
    max-height: calc(100vh - 64px);
    padding: 0;
    border: 1px solid var(--divider);
    border-radius: var(--radius-card);
    background: var(--panel);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    overflow: auto;
}

.contact-modal::backdrop { background: rgba(33, 33, 33, 0.45); }
.contact-modal-body { padding: 20px 24px 24px; }

.contact-modal-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: -20px -24px 20px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--divider);
    background: var(--panel);
}

.contact-modal-header h1 { margin: 0; font-size: 22px; line-height: 28px; }
.contact-modal-actions { display: flex; align-items: center; gap: 10px; }

.contact-modal-close {
    width: var(--icon-button-size);
    height: var(--icon-button-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.contact-modal-close:hover { background: var(--selected); color: var(--text); }

.artwork-modal {
    /* Deliberately roomier than the current contents: the two tables below are
       expected to grow, and reserved empty space is preferable to a window that
       resizes every time a row is added. */
    width: min(1416px, calc(100vw - 48px));
    min-height: min(880px, calc(100vh - 64px));
    max-width: none;
    max-height: calc(100vh - 64px);
    padding: 0;
    border: 1px solid var(--divider);
    border-radius: var(--radius-card);
    background: var(--panel);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    overflow: auto;
}

.artwork-modal::backdrop { background: rgba(33, 33, 33, 0.45); }

.artwork-modal-body { padding: 20px 24px 24px; }

.artwork-modal-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: -20px -24px 20px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--divider);
    background: var(--panel);
}

.artwork-modal-header h1 {
    margin: 0;
    font-size: 22px;
    line-height: 28px;
}

.artwork-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.artwork-modal-close {
    width: var(--icon-button-size);
    height: var(--icon-button-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.artwork-modal-close:hover {
    background: var(--selected);
    color: var(--text);
}

.settings-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(420px, 100vw);
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--divider);
    background: var(--panel);
    box-shadow: -12px 0 36px rgba(0, 0, 0, 0.22);
    animation: settings-drawer-in 240ms ease-out;
}

.settings-drawer::backdrop { background: rgba(33, 33, 33, 0.45); }

.settings-drawer-body {
    height: 100%;
    overflow: auto;
    padding: 28px 24px;
}

@keyframes settings-drawer-in {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 1180px) {
    .artworks-page {
        --artwork-checkbox-col: 36px;
        --artwork-row-gap: 10px;
        --artwork-row-columns:
            70px
            60px
            minmax(160px, 1fr)
            100px
            130px
            minmax(110px, 140px)
            112px
            minmax(120px, 150px);
    }

    .artwork-list-preview { width: 60px; height: 68px; }
    .artwork-row-link { padding-left: 10px; }
    .artworks-list-header-cols { padding-left: 10px; }
}

@media (max-width: 900px) {
    .artworks-toolbar {
        grid-template-columns: 1fr;
    }

    .artworks-toolbar .artworks-bulk-actions {
        width: 100%;
        min-width: 0;
        justify-self: stretch;
    }

    .artworks-toolbar .artworks-page-size {
        grid-column: auto;
        width: 100%;
        justify-self: stretch;
    }

    .artworks-bulk-form {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .artworks-list-header { display: none; }

    .artworks-list .artwork-row {
        grid-template-columns: var(--artwork-checkbox-col) minmax(0, 1fr) 72px 42px;
    }

    .artwork-channel-controls {
        align-items: flex-start;
        padding-top: 12px;
    }

    .artwork-row-link {
        grid-template-columns: 84px minmax(0, 1fr) auto;
        grid-template-areas:
            "preview title title"
            "preview dimensions status"
            "preview price location"
            "id id created";
        row-gap: 10px;
        padding: 12px 12px 12px 14px;
    }

    .artwork-list-preview { grid-area: preview; align-self: start; }
    .artwork-list-title { grid-area: title; white-space: normal; }
    .artwork-list-dimensions { grid-area: dimensions; }
    .artwork-list-status { grid-area: status; justify-content: flex-end; }
    .artwork-list-price { grid-area: price; }
    .artwork-list-location { grid-area: location; justify-content: flex-end; }
    .artwork-list-id { grid-area: id; font-size: 12px; }
    .artwork-list-created { grid-area: created; font-size: 12px; }

    .artwork-row-menu { align-items: flex-start; padding-top: 10px; }
    .artwork-row-menu-panel { top: 46px; }

    .artwork-modal {
        width: calc(100vw - 24px);
        min-height: auto;
        max-height: calc(100vh - 32px);
    }

    .artwork-modal-body { padding: 16px; }
    .artwork-modal-header { margin: -16px -16px 16px; padding: 14px 16px; }

    .contacts-toolbar { grid-template-columns: 1fr; }
    .contacts-list-header { display: none; }
    .contact-row-link {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name name"
            "email email"
            "phone place"
            "type type";
        row-gap: 10px;
        padding: 12px 12px 12px 14px;
    }
    .contact-list-name { grid-area: name; }
    .contact-list-email { grid-area: email; }
    .contact-list-phone { grid-area: phone; }
    .contact-list-place { grid-area: place; text-align: right; }
    .contact-list-category { grid-area: type; }
    .contact-row-menu { align-items: flex-start; padding-top: 10px; }
    .contact-row-menu-panel { top: 46px; }
    .contact-addresses { grid-template-columns: 1fr; }
    .contact-modal { width: calc(100vw - 24px); max-height: calc(100vh - 32px); }
    .contact-modal-body { padding: 16px; }
    .contact-modal-header { margin: -16px -16px 16px; padding: 14px 16px; }

    .settings-drawer { width: 100vw; }
    .settings-drawer-body { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .settings-drawer { animation: none; }
}

/* TRART-0067 — warm editorial dashboard system. These common surfaces deliberately
   sit at the end of the stylesheet so older feature-specific views inherit the same
   presentation without changing their templates or behaviour. */
.page-header {
    margin: 30px 0 22px;
}

.table-toolbar,
table.list,
.belege-list,
.items-list,
.dashboard-belege-list,
.modal-panel,
.correction-picker,
.artwork-secondary-card,
.contact-address-card,
.artwork-quick-create-modal,
.contact-modal,
.artwork-modal,
.settings-drawer,
.prebox {
    border-color: rgba(19, 18, 16, 0.07);
    background: var(--panel);
    box-shadow: var(--shadow-card);
}

.table-toolbar,
.modal-panel,
.artwork-secondary-card,
.contact-address-card,
.prebox {
    padding: 22px;
}

.table-toolbar {
    min-height: 0;
    border-radius: var(--radius-card);
}

.dashboard-section {
    margin: 20px 0;
    padding: 24px;
    border: 1px solid rgba(19, 18, 16, 0.07);
    border-radius: var(--radius-card);
    background: var(--panel);
    box-shadow: var(--shadow-card);
}

.dashboard-section h2,
.contact-card-section h2,
.artwork-image-editor h2,
.artwork-core-editor h2,
.artwork-secondary-editor h2 {
    font-size: 18px;
    letter-spacing: -0.01em;
}

.dashboard-beleg-header,
.item-header {
    border-color: var(--divider);
    background: var(--selected);
    color: var(--muted);
}

.dashboard-beleg-row,
.beleg-row,
.contact-row,
.item-row,
table.list th,
table.list td {
    border-color: var(--divider);
    background: transparent;
}

.dashboard-beleg-row:hover,
.beleg-row:hover,
.contact-row:hover,
.item-row:hover,
table.list tbody tr:hover {
    background: rgba(255, 255, 255, 0.32);
}

.artwork-edit-preview,
.artwork-edit-preview-empty,
.artwork-card-media img,
img.artwork-preview {
    border-color: rgba(19, 18, 16, 0.08);
    border-radius: calc(var(--radius-control) + 2px);
    background: var(--selected);
}

.artwork-list-status .tag,
.tag {
    border-radius: 999px;
    background: var(--selected);
    color: var(--muted);
}

.artwork-list-status .tag {
    color: #ffffff;
}

.artwork-list-status .status-for-sale { background: #5e7252; }
.artwork-list-status .status-on-hold { background: var(--warning); }
.artwork-list-status .status-sold { background: var(--danger); }
.artwork-list-status .status-not-for-sale { background: var(--muted-soft); }
.artwork-list-status .status-archived { background: var(--summary); }

.icon-button,
.del-row,
.contact-modal-close,
.artwork-modal-close {
    border-color: rgba(19, 18, 16, 0.10);
    border-radius: 50%;
    background: #fbfaf7;
    color: var(--muted);
}

.icon-button:hover,
.del-row:hover,
.contact-modal-close:hover,
.artwork-modal-close:hover {
    border-color: rgba(19, 18, 16, 0.18);
    background: var(--selected);
    color: var(--text);
}

.settings-drawer {
    border-left-color: rgba(19, 18, 16, 0.08);
    border-radius: 28px 0 0 28px;
}

.settings-drawer-body {
    padding: 30px 28px;
}

.contact-modal,
.artwork-modal,
.artwork-quick-create-modal {
    border-color: rgba(19, 18, 16, 0.08);
    border-radius: 28px;
}

.contact-modal-header,
.artwork-modal-header,
.artwork-quick-create-header {
    border-color: var(--divider);
    background: var(--panel);
}

.contact-address-card,
.artwork-secondary-card,
.prebox,
.artwork-drop-zone {
    background: rgba(255, 255, 255, 0.30);
}

.notice,
.alert {
    border: 1px solid rgba(19, 18, 16, 0.08);
    border-radius: var(--radius-control);
}

input[type="file"] {
    width: 100%;
    min-height: var(--field-height);
    padding: 12px;
    border: 1px dashed rgba(19, 18, 16, 0.22);
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.30);
    color: var(--muted);
    font: inherit;
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: #ffffff;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 900px) {
    .topbar {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
        min-height: 54px;
        gap: 2px;
        margin-top: 12px;
        padding: 6px;
        align-items: center;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .topbar::-webkit-scrollbar { display: none; }
    .topbar.topbar-auth { width: 58px; min-width: 58px; }
    .topbar-nav { flex: 0 0 auto; }
    .topbar-nav a { padding-inline: 13px; }
    .topbar-actions { flex: 0 0 auto; margin-left: 0; }
    .topbar-brand,
    .topbar-icon { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }

    .wrap,
    .auth-wrap { width: calc(100% - 28px); margin-top: 24px; }

    .panel,
    .page-form-wide > .panel,
    .dashboard-section,
    .table-toolbar { padding: 18px; }

    .settings-drawer { border-radius: 0; }
}

/* TRART-0068 — hierarchy and interaction polish. */
:root {
    --link: #8f5d3b;
    --link-hover: #6f442a;
    --button-primary: #a8663f;
    --button-primary-hover: #884d2d;
    --button-secondary: #69765d;
    --button-secondary-hover: #536047;
    --button-dark: #272522;
    --button-dark-hover: #131210;
    --shadow-topbar: none;
    --shadow-card: none;
    --shadow-button: none;
}

/* Navigation labels are 20% larger than the previous 13px treatment. */
.topbar a,
.topbar button { font-size: 16px; }

/* Headings use the requested Avenir Next 600 treatment and an editorial uppercase hierarchy. */
h1,
h2,
h3,
.section-title { font-weight: 600; text-transform: uppercase; }

/* Buttons use a 15% larger 14px label and distinct warm action colours. */
.btn,
.btn-sm,
input[type="file"]::file-selector-button { font-size: 14px; }

.btn,
.btn-sm {
    border-color: var(--button-primary);
    background: var(--button-primary);
}

.btn:hover,
.btn-sm:hover {
    border-color: var(--button-primary-hover);
    background: var(--button-primary-hover);
}

.btn-secondary,
.contact-select-row .btn-sm {
    border-color: var(--button-secondary);
    background: var(--button-secondary);
}

.btn-secondary:hover,
.contact-select-row .btn-sm:hover {
    border-color: var(--button-secondary-hover);
    background: var(--button-secondary-hover);
}

.btn-dark {
    border-color: var(--button-dark);
    background: var(--button-dark);
}

.btn-dark:hover {
    border-color: var(--button-dark-hover);
    background: var(--button-dark-hover);
}

.pill-link {
    border-color: var(--link);
    background: transparent;
    color: var(--link);
}

.pill-link:hover {
    border-color: var(--link);
    background: var(--link);
    color: #ffffff;
}

/* Ordinary links deliberately share one recognisable colour; navigation and buttons keep their action states. */
a:not(.btn):not(.btn-sm):not(.topbar-brand):not(.topbar-icon):not(.topbar-nav a) { color: var(--link); }
a:not(.btn):not(.btn-sm):not(.topbar-brand):not(.topbar-icon):not(.topbar-nav a):hover { color: var(--link-hover); }

/* Decorative elevation is removed from all application surfaces and menus. */
.topbar,
.panel,
.table-toolbar,
table.list,
.belege-list,
.items-list,
.dashboard-belege-list,
.modal-panel,
.correction-picker,
.artwork-secondary-card,
.contact-address-card,
.artwork-quick-create-modal,
.contact-modal,
.artwork-modal,
.settings-drawer,
.prebox,
.dashboard-section,
.contact-row-menu-panel,
.artwork-row-menu-panel { box-shadow: none; }

/* Popups decisively separate their content from the page beneath them. */
.modal-backdrop {
    background: rgba(19, 18, 16, 0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.artwork-quick-create-modal::backdrop,
.contact-modal::backdrop,
.artwork-modal::backdrop,
.settings-drawer::backdrop {
    background: rgba(19, 18, 16, 0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* TRART-0069 — shared type and pill controls. */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
}

.filters input[type="search"],
.toolbar input[type="search"],
.table-toolbar input[type="search"] {
    width: min(100%, 360px);
    min-width: 0;
}

@media (max-width: 900px) {
    .filters input[type="search"],
    .toolbar input[type="search"],
    .table-toolbar input[type="search"] { width: 100%; }
}

/* TRART-0070 — every full page shares the Events-style outer surface. */
.wrap {
    padding: 24px;
    border: 1px solid rgba(19, 18, 16, 0.06);
    border-radius: var(--radius-card);
    background: var(--panel);
}

/* Existing page panels become the content of the shared outer surface rather than a second page shell. */
.wrap > .panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* TRART-0071 — list searches are controls, not a second rounded panel. */
.artworks-toolbar,
.contacts-toolbar {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* Contact rows use the same table presentation as the Artworks list (TRART-0079);
   the shared surface groups above no longer style them. */

@media (max-width: 900px) {
    .wrap,
    .auth-wrap { padding: 18px; }
}

/* TRART-0089 — artwork card: square image, and the list's status badge reused in the card.
   Appended deliberately: these override earlier rules by cascade order, and keeping them at the
   end of the file leaves the smallest possible conflict surface for concurrent edits above. */
.artwork-card-media img {
    border-radius: 0;
}

/* TRART-0127: a painting is not a UI card — the edit-page preview loses its
   rounding too, by the same cascade mechanism as the card image above. The
   empty placeholder keeps its rounding: it is a UI element, not the painting. */
.artwork-edit-preview {
    border-radius: 0;
}

.artwork-card-details .tag.status-for-sale { background: #5e7252; color: #ffffff; }
.artwork-card-details .tag.status-sold { background: var(--danger); color: #ffffff; }
.artwork-card-details .tag.status-not-for-sale { background: var(--muted-soft); color: #ffffff; }
.artwork-card-details .tag.status-archived { background: var(--summary); color: #ffffff; }