/* Local-only utility subset for PII-bearing TextilOS admin pages.
 * No remote fonts, styles, or executable third-party assets are required. */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--tx-bg, #f8fafc);
    color: var(--tx-text, #1e293b);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
@media (max-width: 360px) {
    body { font-size: 14px; }
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
img { display: block; max-width: 100%; }
pre { margin: 0; white-space: pre-wrap; }

.block { display: block; }
.hidden { display: none; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gap-1\.5 { gap: .375rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: .125rem; }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: .25rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: .5rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }

.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }
.inset-0 { inset: 0; }
.inset-y-0 { top: 0; bottom: 0; }
.left-0 { left: 0; }
.top-0 { top: 0; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.min-h-screen { min-height: 100vh; }
.min-w-0 { min-width: 0; }
.min-w-full { min-width: 100%; }
.max-w-md { max-width: 28rem; }
.max-w-7xl { max-width: 80rem; }
.max-h-\[70vh\] { max-height: 70vh; }
.w-full { width: 100%; }
.w-2 { width: .5rem; }
.w-4 { width: 1rem; }
.w-8 { width: 2rem; }
.w-9 { width: 2.25rem; }
.w-14 { width: 3.5rem; }
.w-24 { width: 6rem; }
.w-64 { width: 16rem; }
.h-2 { height: .5rem; }
.h-8 { height: 2rem; }
.h-9 { height: 2.25rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-24 { height: 6rem; }
.aspect-square { aspect-ratio: 1 / 1; }

.m-auto, .mx-auto { margin-left: auto; margin-right: auto; }
.mt-auto { margin-top: auto; }
.mt-0\.5 { margin-top: .125rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-1\.5 { margin-bottom: .375rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-8 { margin-bottom: 2rem; }
.ml-1 { margin-left: .25rem; }
.ml-2 { margin-left: .5rem; }
.p-1\.5 { padding: .375rem; }
.p-2 { padding: .5rem; }
.p-3 { padding: .75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-2\.5 { padding-top: .625rem; padding-bottom: .625rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pl-2 { padding-left: .5rem; }
.pl-3 { padding-left: .75rem; }
.pl-5 { padding-left: 1.25rem; }
.pl-10 { padding-left: 2.5rem; }
.pr-3 { padding-right: .75rem; }
.pb-2 { padding-bottom: .5rem; }

.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break-all { word-break: break-all; }
.break-words { overflow-wrap: break-word; }
.object-contain { object-fit: contain; }
.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }

.border { border: 1px solid var(--tx-border); }
.border-b { border-bottom: 1px solid var(--tx-border); }
.border-t { border-top: 1px solid var(--tx-border); }
.border-l { border-left: 1px solid var(--tx-border); }
.border-dashed { border-style: dashed; }
.border-transparent { border-color: transparent; }
.border-tx-border { border-color: var(--tx-border); }
.border-tx-sidebar-border { border-color: var(--tx-sidebar-border); }
.border-tx-danger-ring { border-color: #fecdd3; }
.border-tx-info-ring { border-color: #bae6fd; }
.border-tx-warning-ring { border-color: var(--tx-warning-ring, #fde68a); }
.border-amber-300 { border-color: #fcd34d; }
.rounded { border-radius: .25rem; }
.rounded-md { border-radius: var(--tx-radius-sm); }
.rounded-lg { border-radius: var(--tx-radius-md); }
.rounded-xl { border-radius: var(--tx-radius-lg); }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }
.shadow-tx-card { box-shadow: var(--tx-shadow-sm); }
.ring-2 { box-shadow: 0 0 0 2px currentColor; }
.ring-white { color: #fff; }

.bg-tx-bg { background: var(--tx-bg); }
.bg-tx-surface { background: var(--tx-surface); }
.bg-tx-surface-alt { background: var(--tx-surface-alt); }
.bg-tx-sidebar { background: var(--tx-sidebar); }
.bg-tx-sidebar\/60 { background: rgba(15, 23, 42, .6); }
.bg-tx-accent { background: var(--tx-accent); }
.bg-tx-success { background: var(--tx-success); }
.bg-tx-danger-soft { background: var(--tx-danger-soft); }
.bg-tx-info-soft { background: var(--tx-info-soft); }
.bg-tx-warning-soft { background: var(--tx-warning-soft, #fef3c7); }
.bg-white { background: #fff; }
.bg-white\/70 { background: rgba(255, 255, 255, .7); }
.bg-slate-200 { background: #e2e8f0; }
.bg-amber-50 { background: #fffbeb; }
.bg-amber-100 { background: #fef3c7; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-\[8px\] { font-size: 8px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-xs { font-size: .75rem; }
.text-sm { font-size: .875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.leading-tight { line-height: 1.25; }
.tracking-tight { letter-spacing: -.025em; }
.tracking-wider { letter-spacing: .05em; }
.uppercase { text-transform: uppercase; }
.text-white { color: #fff; }
.text-slate-800 { color: #1e293b; }
.text-amber-900 { color: #78350f; }
.text-red-700 { color: #b91c1c; }
.text-rose-300 { color: #fda4af; }
.text-rose-400 { color: #fb7185; }
.text-tx-accent { color: var(--tx-accent); }
.text-tx-text-strong { color: var(--tx-text-strong); }
.text-tx-text-muted { color: var(--tx-text-muted); }
.text-tx-text-subtle { color: var(--tx-text-subtle); }
.text-tx-sidebar-text { color: var(--tx-sidebar-text); }
.text-tx-sidebar-muted { color: var(--tx-sidebar-muted); }
.text-tx-danger-text { color: var(--tx-danger-text); }
.text-tx-info-text { color: var(--tx-info-text); }
.list-disc { list-style: disc; }

.transition-colors { transition: color .15s, background-color .15s, border-color .15s; }
.hover\:bg-tx-surface-alt:hover { background: var(--tx-surface-alt); }
.hover\:bg-tx-accent-hover:hover { background: var(--tx-accent-hover); }
.hover\:text-tx-text:hover { color: var(--tx-text); }
.disabled\:opacity-50:disabled { opacity: .5; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:flex-row { flex-direction: row; }
  .sm\:items-center { align-items: center; }
  .sm\:justify-between { justify-content: space-between; }
  .sm\:gap-3 { gap: .75rem; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:p-5 { padding: 1.25rem; }
  .sm\:p-6 { padding: 1.5rem; }
  .sm\:p-8 { padding: 2rem; }
  .sm\:pl-3 { padding-left: .75rem; }
  .sm\:text-lg { font-size: 1.125rem; }
  .sm\:text-3xl { font-size: 1.875rem; }
}
@media (min-width: 768px) { .md\:block { display: block; } }
@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:ml-64 { margin-left: 16rem; }
  .lg\:translate-x-0 { transform: translateX(0); }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1280px) { .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ───────────────────────────────────────────────────────────────────
 * Inline-SVG icon styles — used by TextilOS/textilos_icons.php.
 * The registry emits SVGs with stroke="currentColor" + .tx-ic class
 * so the surrounding text colour cascades cleanly through `var(...)`.
 * Avoids the previous dependence on the cdnjs FontAwesome sheet,
 * which is unreachable under CSP `default-src 'self'`.
 * ─────────────────────────────────────────────────────────────────── */
.tx-ic { display: inline-block; flex-shrink: 0; vertical-align: middle; }
.tx-ic[aria-hidden="true"] { pointer-events: none; }
.tx-ic-fallback { opacity: .55; }

/* ───────────────────────────────────────────────────────────────────
 * Sidebar drawer — guarantees the drawer behaves correctly when
 * only this stylesheet is loaded (localOnly mode + CSP).
 * ─────────────────────────────────────────────────────────────────── */
/* ───────────────────────────────────────────────────────────────────
 * E6-D6Y.1.1 — sidebar geometry-locked chrome.
 *
 * The canonical sidebar emitted by TextilOS/app_shell.php uses
 * semantic class names (tx-sidebar-nav__*, tx-app-*) instead of
 * Tailwind utility classes. This guarantees that EVERY admin page
 * — including $localOnly=true pages (E6-D6N.2 security hardening
 * keeps Tailwind CDN off textilos_orders.php and the order detail
 * page) — renders the sidebar with the SAME layout, spacing and
 * active highlight. Masterprompt §11-§14 geometry contract:
 *
 *   - sidebar width = 16rem (--tx-sidebar-width)
 *   - desktop sidebar = pinned left, transform: none (mobile media
 *     query below slides it off-canvas and back via .is-open)
 *   - nav item geometry is identical active/inactive:
 *     border-left is always 2px solid (transparent when inactive,
 *     accent-ring colour when active) so the box-model never shifts
 *   - active state adds only background / text colour / icon colour
 *     — no padding, margin or height changes
 *   - section title spacing, brand block divider, logout and status
 *     footers use one set of tokens so Dashboard and Bestellungen
 *     render at identical Y positions
 *
 * Existing rules below (`.tx-sidebar { transition ... }`, list-reset,
 * mobile drawer, scrollbar) are preserved verbatim — the new rules
 * extend `.tx-sidebar` with positioning/layout/bg/color and add the
 * new semantic selectors.
 * ─────────────────────────────────────────────────────────────────── */
.tx-app-shell {
    display: flex;
    min-height: 100vh;
}
.tx-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: 16rem;
    background-color: var(--tx-sidebar);
    color: var(--tx-sidebar-text);
    display: flex;
    flex-direction: column;
    transition: transform 200ms ease-in-out;
}
.tx-sidebar__brand {
    padding: 1.25rem;
    border-bottom: 1px solid var(--tx-sidebar-border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
.tx-sidebar__brand-mark {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background-color: var(--tx-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tx-sidebar__brand-mark-icon {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
}
.tx-sidebar__brand-text { min-width: 0; flex: 1 1 auto; }
.tx-sidebar__brand-name {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    letter-spacing: -0.025em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tx-sidebar__brand-tag {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tx-sidebar-muted);
}

.tx-sidebar-close-btn {
    padding: 0.375rem;
    border-radius: 0.375rem;
    color: var(--tx-sidebar-text);
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tx-sidebar-close-btn:hover {
    background-color: var(--tx-sidebar-alt);
    color: #fff;
}

.tx-sidebar-nav {
    flex: 1 1 auto;
    padding: 1rem 0.75rem;
    overflow-y: auto;
    font-size: 0.875rem;
    /* Scrollbar styled by the E6-D6Y.1 rules below — keeps the
     * dark, narrow, designed thumb on every admin page. */
}
.tx-sidebar-nav__section-title {
    padding: 0 0.75rem 0.5rem;
    margin: 0;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tx-sidebar-muted);
}
.tx-sidebar-nav__list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}
.tx-sidebar-nav__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    color: var(--tx-sidebar-text);
    /* The 2px left border is ALWAYS reserved so the active item
     * does not change box size when its colour flips from
     * transparent to accent-ring. */
    border-left: 2px solid transparent;
    transition: color 200ms, background-color 200ms;
    text-decoration: none;
    line-height: 1.5;
}
.tx-sidebar-nav__link:hover {
    background-color: var(--tx-sidebar-alt);
    color: #fff;
}
.tx-sidebar-nav__icon {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--tx-sidebar-muted);
}
.tx-sidebar-nav__label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tx-sidebar-nav__link--active {
    background-color: rgba(79, 70, 229, 0.2);
    color: #c7d2fe;
    font-weight: 500;
    border-left-color: var(--tx-accent-ring);
}
.tx-sidebar-nav__link--active:hover {
    background-color: rgba(79, 70, 229, 0.3);
    color: #c7d2fe;
}
.tx-sidebar-nav__icon--active {
    color: #a5b4fc;
}

.tx-sidebar__logout-block {
    padding: 0.75rem;
    border-top: 1px solid var(--tx-sidebar-border);
    flex-shrink: 0;
}
.tx-sidebar__logout-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    color: #fda4af;
    text-decoration: none;
    transition: color 200ms, background-color 200ms;
}
.tx-sidebar__logout-link:hover {
    background-color: rgba(244, 63, 94, 0.1);
    color: #fecdd3;
}
.tx-sidebar__logout-icon {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fb7185;
}

.tx-sidebar__footer-bar {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--tx-sidebar-border);
    font-size: 11px;
    color: var(--tx-sidebar-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.tx-sidebar__status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background-color: var(--tx-success);
    display: inline-block;
    animation: tx-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .tx-sidebar__status-dot { animation: none; }
}
@keyframes tx-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.tx-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.6);
    z-index: 30;
    opacity: 0;
    transition: opacity 200ms ease-in-out;
    pointer-events: none;
}
.tx-sidebar-backdrop[data-state="open"] {
    opacity: 1;
    pointer-events: auto;
}

.tx-app-main-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
@media (min-width: 1024px) {
    .tx-app-main-wrap { margin-left: 16rem; }
}

.tx-app-topbar {
    height: 4rem;
    background-color: var(--tx-surface);
    border-bottom: 1px solid var(--tx-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 20;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .tx-app-topbar { padding: 0 1rem; }
}
.tx-app-topbar__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1 1 auto;
}
.tx-app-topbar__toggle {
    padding: 0.375rem;
    border-radius: 0.375rem;
    color: var(--tx-text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tx-app-topbar__toggle:hover {
    background-color: var(--tx-surface-alt);
}
.tx-app-topbar__headline { min-width: 0; }
.tx-app-topbar__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tx-accent);
    font-weight: 600;
}
.tx-app-topbar__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 12px;
    color: var(--tx-text-muted);
    margin-top: 2px;
}
.tx-app-topbar__breadcrumb-link {
    color: inherit;
    text-decoration: none;
}
.tx-app-topbar__breadcrumb-link:hover { color: var(--tx-text); }
.tx-app-topbar__title-sep {
    display: inline-flex;
    align-items: center;
    color: var(--tx-text-subtle);
}
.tx-app-topbar__title {
    color: var(--tx-text-strong);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tx-app-topbar__user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.tx-app-topbar__user-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--tx-border);
}
@media (min-width: 640px) {
    .tx-app-topbar__user-meta { padding-left: 0.75rem; }
}
.tx-app-topbar__avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background-image: linear-gradient(to bottom right, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #fff, 0 1px 2px 0 rgba(15, 23, 42, 0.05);
}
.tx-app-topbar__user-meta-text { line-height: 1.2; }
.tx-app-topbar__user-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--tx-text-strong);
}
.tx-app-topbar__user-role {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tx-text-subtle);
}
@media (max-width: 767px) {
    .tx-app-topbar__user-meta-text { display: none; }
}

.tx-app-main {
    padding: 1.5rem 1rem;
    max-width: 80rem;
    width: 100%;
    margin: 0 auto;
    flex: 1 1 auto;
}
@media (min-width: 1024px) {
    .tx-app-main { padding: 1.5rem 2rem; }
}

.tx-app-footer {
    margin-top: auto;
    border-top: 1px solid var(--tx-border);
    background-color: var(--tx-surface);
    padding: 1rem 1rem;
    font-size: 11px;
    color: var(--tx-text-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
}
@media (min-width: 1024px) {
    .tx-app-footer { padding: 1rem 2rem; }
}

.tx-sidebar { transition: transform 200ms ease-in-out; }
@media (max-width: 1023px) {
    .tx-sidebar { transform: translateX(-100%); visibility: hidden; }
    .tx-sidebar.is-open {
        transform: translateX(0);
        visibility: visible;
    }
    body.tx-drawer-open,
    body.tx-sidebar-open { overflow: hidden; }
    /* Defensive: ensure the backdrop actually disappears from layout
     * when the drawer is closed (no leftover hit area blocking clicks
     * on the page underneath). */
    body:not(.tx-sidebar-open):not(.tx-drawer-open) .tx-sidebar-backdrop {
        display: none !important;
    }
}
/* Sidebar nav lists: drop browser bullets without touching
 * page-level content lists. The selectors are tightly scoped to
 * the app shell so <ul>/<li> in customer/order/address sections
 * keep their native markers when the project adds them.
 *
 * Defence-in-depth reset. Each rule covers a different fallback:
 *   - list-style:none / list-style-type:none / list-style-image:none
 *     covers the standard CSS bullet mechanism (browsers honour
 *     any of them).
 *   - the ::marker / ::before / ::after zero-out rule nukes any
 *     pseudo-element that downstream stylesheets (Tailwind
 *     preflight, ad-hoc resets, third-party CSS) might inject.
 *   - explicit display:block prevents the browser from rendering
 *     the <li> as a list-item with a marker area even when a
 *     stylesheet sets list-style-position: inside.
 *   - padding-left:0 / margin:0 ensure no marker offset slot. */
#tx-sidebar nav ul,
#tx-sidebar nav ol,
#tx-sidebar nav li,
#tx-sidebar ul,
#tx-sidebar ol,
#tx-sidebar li {
    list-style: none;
    list-style-type: none;
    list-style-image: none;
    list-style-position: outside;
    margin: 0;
    padding: 0;
}
/* Dedicated selector preserved for the E6-D6H regression test (and
 * as a final safety net). */
#tx-sidebar nav li { list-style: none; }
#tx-sidebar nav li,
#tx-sidebar li { display: block; }
#tx-sidebar nav li::marker,
#tx-sidebar nav li::before,
#tx-sidebar nav li::after,
#tx-sidebar li::marker,
#tx-sidebar li::before,
#tx-sidebar li::after {
    content: "";
    font-size: 0;
    width: 0;
    height: 0;
    display: none;
}
#tx-sidebar nav ul,
#tx-sidebar nav ol,
#tx-sidebar ul,
#tx-sidebar ol { padding-left: 0; }
.tx-sidebar-backdrop {
    opacity: 0;
    transition: opacity 200ms ease-in-out;
    pointer-events: none;
}
/* The [hidden] attribute is the authoritative "closed" signal for
 * the backdrop on mobile; it short-circuits the layout entirely so
 * the backdrop cannot absorb clicks while the drawer is closed. */
.tx-sidebar-backdrop[hidden] { display: none !important; }
@media (max-width: 1023px) {
    .tx-sidebar.is-open + .tx-sidebar-backdrop,
    .tx-sidebar-backdrop.is-visible {
        opacity: 1;
        pointer-events: auto;
    }
}
@media (min-width: 1024px) {
    .tx-sidebar-backdrop { display: none !important; }
    .tx-sidebar-close-btn { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .tx-sidebar,
    .tx-sidebar-backdrop { transition: none !important; }
}

/* E6-D6Y.1 — scoped, designed sidebar scrollbar.
 *
 * Only the sidebar's overflow container gets the dark, narrow,
 * rounded scrollbar; nothing else on the page is affected so the
 * default browser scrollbar remains for the main scroll surface.
 *
 * - Webkit / Chromium / Edge / Safari: ::-webkit-scrollbar-* rules
 *   produce a 7px thumb on a transparent track with no buttons.
 * - Firefox: scrollbar-width: thin + scrollbar-color fall back to
 *   the same dark thumb / transparent track.
 * - The track is transparent so the dark sidebar surface shows
 *   through, and the radius is rounded so the thumb reads as a
 *   designed control rather than a legacy OS widget. */
#tx-sidebar nav {
    scrollbar-width: thin;
    scrollbar-color: #475569 transparent;
}
#tx-sidebar nav::-webkit-scrollbar { width: 7px; height: 7px; }
#tx-sidebar nav::-webkit-scrollbar-track { background: transparent; }
#tx-sidebar nav::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 999px;
    /* Inset so the thumb hugs the sidebar edge instead of floating
     * inside the scroll lane. */
    border: 2px solid transparent;
    background-clip: padding-box;
}
#tx-sidebar nav::-webkit-scrollbar-thumb:hover { background: #64748b; }
#tx-sidebar nav::-webkit-scrollbar-thumb:active { background: #94a3b8; }
/* Hide the legacy up/down/left/right buttons on Webkit so the
 * scrollbar stays a single designed thumb, not an OS control. */
#tx-sidebar nav::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
#tx-sidebar nav::-webkit-scrollbar-corner { background: transparent; }

/* ───────────────────────────────────────────────────────────────────
 * Responsive base — eliminates horizontal overflow at narrow
 * viewports. Breakpoints covered: 1440 / 1280 / 1024 / 900 / 768 / 640
 * / 480 / 430 / 390 / 360.
 * ─────────────────────────────────────────────────────────────────── */
html, body { overflow-x: hidden; }
@media (max-width: 640px) {
    .textilos-shell-stack { gap: 0.875rem; }
}
@media (max-width: 480px) {
    .lg\:grid-cols-2, .lg\:grid-cols-3, .lg\:grid-cols-4,
    .lg\:grid-cols-5, .sm\:grid-cols-2 {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* ───────────────────────────────────────────────────────────────────
 * Accordion disclosure — uses native <details>/<summary>. The icon
 * rotates on open; visible focus ring; matches the tx-* palette.
 * Section icon + chevron slide together with the disclosure state.
 * ─────────────────────────────────────────────────────────────────── */
details.tx-disclosure {
    border: 1px solid var(--tx-border, #e2e8f0);
    border-radius: 0.75rem;
    background: var(--tx-surface, #ffffff);
    overflow: hidden;
}
details.tx-disclosure > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.875rem 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--tx-text-strong, #0f172a);
    border-radius: 0.75rem;
}
details.tx-disclosure > summary::-webkit-details-marker { display: none; }
details.tx-disclosure > summary:hover { background: var(--tx-surface-alt, #f1f5f9); }
details.tx-disclosure > summary:focus-visible {
    outline: 2px solid var(--tx-accent-ring, #6366f1);
    outline-offset: 2px;
}
details.tx-disclosure[open] > summary {
    border-bottom: 1px solid var(--tx-border, #e2e8f0);
    border-radius: 0.75rem 0.75rem 0 0;
}
.tx-disclosure__chevron {
    transition: transform 150ms ease-in-out;
    margin-left: auto;
    color: var(--tx-text-muted, #64748b);
}
details.tx-disclosure[open] .tx-disclosure__chevron { transform: rotate(180deg); }
.tx-disclosure__body { padding: 1rem; }
.tx-disclosure__body > :first-child { margin-top: 0; }
.tx-disclosure__body > :last-child { margin-bottom: 0; }

/* ───────────────────────────────────────────────────────────────────
 * Lightbox — vanilla, no third-party deps. Renders into <body>
 * when a thumbnail is clicked. Uses the proxy URL provided via
 * data-proxy-url so no private file path is exposed to JS.
 *
 * Fit-to-Viewport contract:
 *   - the panel never exceeds ~94vw / ~88vh,
 *   - the stage is the visible image area (~78vh),
 *   - the image is sized via max-width / max-height: 100% with
 *     width:auto / height:auto so it always fits inside the stage
 *     when scale = 1,
 *   - the toolbar + caption never overlap the stage,
 *   - opening resets zoom to 1, panX/Y to 0,
 *   - swapping images resets zoom + pan,
 *   - wheel + buttons zoom only within [1, 4],
 *   - pan is disabled while zoom == 1.
 * ─────────────────────────────────────────────────────────────────── */
.tx-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(0.5rem, 2vw, 2rem);
}
.tx-lightbox.is-open { display: flex; }
.tx-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 24, 0.86);
    backdrop-filter: blur(4px);
}
.tx-lightbox__panel {
    position: relative;
    width: min(94vw, 1400px);
    max-width: 94vw;
    height: min(88vh, 980px);
    max-height: 88vh;
    background: #0b1226;
    border-radius: 0.875rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.tx-lightbox__stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: repeating-linear-gradient(45deg, #0b1226, #0b1226 12px, #111a36 12px, #111a36 24px);
    touch-action: none;
    cursor: grab;
}
.tx-lightbox__stage.is-grabbing { cursor: grabbing; }
.tx-lightbox__stage.is-fit { cursor: zoom-in; }
.tx-lightbox__img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;
    transition: transform 80ms linear;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;
}
.tx-lightbox__stage.is-zoomed .tx-lightbox__img {
    /* When the user zooms, drop the centred translate so the
     * user-controlled translate() values are the only positioning
     * transform. The JS layer keeps the translate aligned to the
     * image origin. */
    transform: translate(0, 0) scale(1);
}
.tx-lightbox__toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: rgba(2, 6, 23, 0.92);
    color: #cbd5e1;
    flex-wrap: wrap;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}
.tx-lightbox__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(15, 23, 42, 0.6);
    color: inherit;
    cursor: pointer;
    transition: background-color 120ms ease-in-out, border-color 120ms ease-in-out;
    padding: 0 0.4rem;
    font-size: 0.85rem;
}
.tx-lightbox__btn:hover { background: rgba(15, 23, 42, 0.92); }
.tx-lightbox__btn:focus-visible {
    outline: 2px solid var(--tx-accent-ring, #6366f1);
    outline-offset: 2px;
}
.tx-lightbox__btn:disabled { opacity: .35; cursor: not-allowed; }
.tx-lightbox__title {
    font-size: 0.85rem;
    color: #e2e8f0;
    flex: 1 1 16rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tx-lightbox__counter {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-right: 0.5rem;
    font-variant-numeric: tabular-nums;
}
.tx-lightbox__zoom-display {
    min-width: 3.25rem;
    text-align: center;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: #e2e8f0;
    padding: 0 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 0.5rem;
    background: rgba(15, 23, 42, 0.45);
    line-height: 2.5rem;
    height: 2.5rem;
}
.tx-lightbox__error {
    color: #fda4af;
    font-size: 0.85rem;
    padding: 1.5rem;
    text-align: center;
}
.tx-lightbox__caption {
    padding: 0.5rem 0.85rem;
    background: rgba(2, 6, 23, 0.92);
    color: #94a3b8;
    font-size: 0.75rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    word-break: break-word;
}
.tx-lightbox-blocked {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

body.tx-lightbox-open { overflow: hidden; }

/* ───────────────────────────────────────────────────────────────────
 * Orders list — responsive cards stacked below 900px. The same
 * view-model is reused; only the presentation differs at small
 * widths. Filter bar wraps; pagination buttons stay ≥2.25rem.
 * ─────────────────────────────────────────────────────────────────── */
.textilos-orders-table th, .textilos-orders-table td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--tx-border, #e2e8f0);
    vertical-align: top;
}
.textilos-orders-table th {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tx-text-muted, #64748b);
    background: var(--tx-surface-alt, #f1f5f9);
    position: sticky;
    top: 0;
    z-index: 2;
}
.textilos-orders-table tr:hover td { background: rgba(99, 102, 241, 0.04); }
.textilos-orders-table-wrap { overflow-x: auto; }

.textilos-orders-cards { display: none; }
@media (max-width: 900px) {
    .textilos-orders-table-wrap { display: none; }
    .textilos-orders-cards {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.875rem;
    }
}
.textilos-orders-card {
    border: 1px solid var(--tx-border, #e2e8f0);
    border-radius: 0.75rem;
    background: var(--tx-surface, #ffffff);
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.textilos-orders-card__row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}
.textilos-orders-card__thumb {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0.5rem;
    object-fit: cover;
    background: var(--tx-surface-alt, #f1f5f9);
    border: 1px solid var(--tx-border, #e2e8f0);
    flex-shrink: 0;
}
.textilos-orders-card__placeholder {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0.5rem;
    border: 1px dashed var(--tx-border, #cbd5e1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tx-text-subtle, #94a3b8);
    background: var(--tx-surface-alt, #f1f5f9);
    flex-shrink: 0;
}
.textilos-orders-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.textilos-orders-filter label {
    font-size: 0.75rem;
    color: var(--tx-text-muted, #64748b);
    margin-right: 0.25rem;
}
.textilos-orders-filter input,
.textilos-orders-filter select {
    border: 1px solid var(--tx-border, #e2e8f0);
    border-radius: 0.5rem;
    background: var(--tx-surface, #ffffff);
    padding: 0.4rem 0.6rem;
    font-size: 0.875rem;
    min-height: 2.25rem;
    min-width: 0;
}

.textilos-pagination {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.textilos-pagination a, .textilos-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--tx-border, #e2e8f0);
    padding: 0 0.5rem;
    font-size: 0.875rem;
    color: var(--tx-text, #1e293b);
    background: var(--tx-surface, #ffffff);
}
.textilos-pagination .is-active {
    background: var(--tx-accent, #4f46e5);
    border-color: var(--tx-accent, #4f46e5);
    color: #fff;
}

/* ───────────────────────────────────────────────────────────────────
 * Media gallery — responsive thumbnail grid. object-fit: contain
 * ensures print/artwork files don't get distorted; aspect-ratio
 * keeps tiles even.
 * ─────────────────────────────────────────────────────────────────── */
.textilos-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .textilos-media-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (min-width: 1280px) {
    .textilos-media-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
.textilos-media-tile {
    border: 1px solid var(--tx-border, #e2e8f0);
    border-radius: 0.625rem;
    background: var(--tx-surface, #ffffff);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: zoom-in;
    transition: transform 120ms ease-in-out, border-color 120ms ease-in-out;
}
.textilos-media-tile:hover,
.textilos-media-tile:focus-visible {
    border-color: var(--tx-accent-ring, #6366f1);
    transform: translateY(-1px);
    outline: none;
}
.textilos-media-tile__img,
.textilos-media-tile__placeholder {
    aspect-ratio: 1 / 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tx-surface-alt, #f1f5f9);
    border-bottom: 1px solid var(--tx-border, #e2e8f0);
}
.textilos-media-tile__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}
.textilos-media-tile__placeholder {
    color: var(--tx-text-subtle, #94a3b8);
}
.textilos-media-tile__body {
    padding: 0.5rem 0.65rem;
    font-size: 0.75rem;
    color: var(--tx-text-muted, #64748b);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.textilos-media-tile__name {
    color: var(--tx-text-strong, #0f172a);
    font-weight: 500;
    word-break: break-word;
}

/* ───────────────────────────────────────────────────────────────────
 * Helpers used by both the order detail header and the dashboard
 * to keep label/value pairs readable on narrow screens.
 * ─────────────────────────────────────────────────────────────────── */
.textilos-meta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
}
@media (min-width: 640px) {
    .textilos-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .textilos-meta-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .textilos-meta-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.textilos-meta {
    background: var(--tx-surface-alt, #f1f5f9);
    border: 1px solid var(--tx-border, #e2e8f0);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    min-width: 0;
}
.textilos-meta__label {
    display: block;
    font-size: 0.7rem;
    color: var(--tx-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.15rem;
}
.textilos-meta__value {
    font-size: 0.875rem;
    color: var(--tx-text-strong, #0f172a);
    word-break: break-word;
}
.textilos-meta__value.is-empty {
    color: var(--tx-text-subtle, #94a3b8);
    font-style: italic;
}

/* ───────────────────────────────────────────────────────────────────
 * E6-D6J — Professional Order Workspace
 *
 * The order-detail page is rebuilt as a two-column operations backend:
 *   - desktop ≥ 1180px : 12-col grid, 8/4 split (main + aside)
 *   - tablet            : 2-col where it fits, aside collapses below
 *   - mobile            : single column, aside stacks below main
 *
 * Design tokens are exposed as CSS variables under .tx-order-page so
 * the rest of the app shell can opt in via inheritance.
 * ─────────────────────────────────────────────────────────────────── */
:root {
    --tx-order-radius: 12px;
    --tx-order-radius-lg: 14px;
    --tx-order-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px -4px rgba(15, 23, 42, 0.06);
    --tx-order-shadow-lg: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 24px -8px rgba(15, 23, 42, 0.1);
    --tx-order-bg: #f6f7fb;
    --tx-order-card: #ffffff;
    --tx-order-border: #e5e7eb;
    --tx-order-text: #0f172a;
    --tx-order-text-strong: #020617;
    --tx-order-text-muted: #64748b;
    --tx-order-text-subtle: #94a3b8;
    --tx-order-accent: var(--tx-accent, #4f46e5);
    --tx-order-accent-soft: rgba(79, 70, 229, 0.08);
    --tx-order-spacing-1: 4px;
    --tx-order-spacing-2: 8px;
    --tx-order-spacing-3: 12px;
    --tx-order-spacing-4: 16px;
    --tx-order-spacing-5: 20px;
    --tx-order-spacing-6: 24px;
    --tx-order-spacing-8: 32px;
}

/* Page surface — neutral light background, consistent gutters. */
.tx-order-page {
    background: var(--tx-order-bg);
    color: var(--tx-order-text);
    min-height: 100vh;
    padding: clamp(0.75rem, 1.6vw, 1.5rem) clamp(0.75rem, 1.6vw, 1.5rem) clamp(2rem, 4vw, 3rem);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
.tx-order-page .tx-page-inner {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--tx-order-spacing-5);
}

/* Breadcrumb / back link row above the header card. */
.tx-order-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--tx-order-text-muted);
}
.tx-order-back a {
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.55rem;
    border-radius: 0.5rem;
    border: 1px solid var(--tx-order-border);
    background: var(--tx-order-card);
    transition: background-color 120ms ease-in-out, border-color 120ms ease-in-out;
}
.tx-order-back a:hover { background: var(--tx-accent-soft, rgba(99, 102, 241, 0.08)); border-color: var(--tx-order-accent); color: var(--tx-order-text-strong); }
.tx-order-back .tx-order-back__sep { color: var(--tx-order-text-subtle); }

/* Main header card — order number, provider, dates, status badges,
 * optional safe actions on the right. */
.tx-order-header {
    background: var(--tx-order-card);
    border: 1px solid var(--tx-order-border);
    border-radius: var(--tx-order-radius-lg);
    box-shadow: var(--tx-order-shadow);
    padding: clamp(1rem, 1.6vw, 1.5rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tx-order-spacing-4);
}
@media (min-width: 900px) {
    .tx-order-header { grid-template-columns: minmax(0, 1fr) auto; }
}
.tx-order-header__title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.tx-order-header__title h1 {
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--tx-order-text-strong);
}
.tx-order-header__title .tx-order-header__provider {
    background: var(--tx-surface-alt, #f1f5f9);
    border: 1px solid var(--tx-order-border);
    color: var(--tx-order-text-muted);
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    padding: 0.15rem 0.5rem;
    border-radius: 0.5rem;
}
.tx-order-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    font-size: 0.85rem;
    color: var(--tx-order-text-muted);
}
.tx-order-header__meta strong { color: var(--tx-order-text); font-weight: 600; }
.tx-order-header__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.tx-order-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    align-self: start;
    justify-self: end;
}
.tx-order-header__actions a,
.tx-order-header__actions button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--tx-order-border);
    background: var(--tx-order-card);
    color: var(--tx-order-text);
    font-size: 0.85rem;
    transition: background-color 120ms ease-in-out, border-color 120ms ease-in-out;
}
.tx-order-header__actions a:hover,
.tx-order-header__actions button:hover {
    background: var(--tx-order-accent-soft);
    border-color: var(--tx-order-accent);
}
.tx-order-header__actions a:focus-visible,
.tx-order-header__actions button:focus-visible {
    outline: 2px solid var(--tx-order-accent);
    outline-offset: 2px;
}

/* Status badges (reuse existing tx-* status palette tokens). */
.tx-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
}
.tx-status-badge__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.tx-status-badge--neutral { background: var(--tx-surface-alt, #f1f5f9); color: var(--tx-order-text-muted); border-color: var(--tx-order-border); }
.tx-status-badge--info { background: rgba(59, 130, 246, 0.1); color: #1d4ed8; border-color: rgba(59, 130, 246, 0.25); }
.tx-status-badge--success { background: rgba(16, 185, 129, 0.1); color: #047857; border-color: rgba(16, 185, 129, 0.25); }
.tx-status-badge--warning { background: rgba(245, 158, 11, 0.12); color: #92400e; border-color: rgba(245, 158, 11, 0.3); }
.tx-status-badge--danger { background: rgba(239, 68, 68, 0.1); color: #b91c1c; border-color: rgba(239, 68, 68, 0.25); }

/* E6-D6W.2.2 — canonical method badges (Druck / Stick). Colors
   reused verbatim from the Bestellungen page
   .tx-production-type-badge--print / --embroidery rules so both
   pages speak the same visual language for production methods.
   Same meaning = same color. */
.tx-status-badge--print {
  background: #eef2ff;
  color: #4338ca;
  border-color: #c7d2fe;
}
.tx-status-badge--embroidery {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

/* E6-D6W.2.2 — goods-state tone (logistical, softer than the
   production-waiting warning). Distinct from production_state so
   Ware / Produktion read as separate semantic columns. */
.tx-status-badge--goods-logistics {
  background: rgba(14, 165, 233, 0.1);
  color: #0369a1;
  border-color: rgba(14, 165, 233, 0.3);
}

/* Two-column workspace layout. */
.tx-order-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tx-order-spacing-5);
}
@media (min-width: 1180px) {
    .tx-order-layout {
        grid-template-columns: minmax(0, 8fr) minmax(280px, 4fr);
        align-items: start;
    }
    .tx-order-aside { position: sticky; top: 5rem; align-self: start; }
}
.tx-order-main {
    display: flex;
    flex-direction: column;
    gap: var(--tx-order-spacing-4);
    min-width: 0;
}
.tx-order-aside {
    display: flex;
    flex-direction: column;
    gap: var(--tx-order-spacing-4);
    min-width: 0;
}

/* Card primitive — used by every workspace section. */
.tx-card {
    background: var(--tx-order-card);
    border: 1px solid var(--tx-order-border);
    border-radius: var(--tx-order-radius-lg);
    box-shadow: var(--tx-order-shadow);
    overflow: hidden;
    min-width: 0;
}
.tx-card--flush { box-shadow: none; }
.tx-card__header {
    padding: var(--tx-order-spacing-4) var(--tx-order-spacing-5);
    border-bottom: 1px solid var(--tx-order-border);
    display: flex;
    align-items: center;
    gap: var(--tx-order-spacing-3);
    flex-wrap: wrap;
}
.tx-card__header-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.tx-card__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--tx-order-text-strong);
    margin: 0;
    line-height: 1.3;
}
.tx-card__title-icon {
    display: inline-flex;
    width: 1.6rem;
    height: 1.6rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: var(--tx-order-accent-soft);
    color: var(--tx-order-accent);
    flex-shrink: 0;
}

/* E6-D6W.2.2 — subtle per-section icon accents. Card body stays
   neutral white; only the small section-icon chip carries semantic
   color. Mapping:
     pieces (production)        → indigo
     media / weitere-medien     → violet
     planung                    → cyan
     kunde                      → amber
     lieferung                  → emerald
     id-tag-historie            → slate
     diagnose (admin)           → muted slate
     auftrag                    → indigo (matches command header)
   Tones match the existing tx-status-badge palette so a section
   icon never out-shouts a real badge. */
.tx-card[data-tx-d6v1-pieces] .tx-card__title-icon {
    background: #eef2ff;
    color: #4338ca;
}
.tx-card[data-tx-d6v1-media] .tx-card__title-icon,
.tx-card[data-tx-d6v1-weitere-medien] .tx-card__title-icon {
    background: #f5f3ff;
    color: #6d28d9;
}
.tx-card[data-tx-d6v1-card-planung] .tx-card__title-icon {
    background: #ecfeff;
    color: #0e7490;
}
.tx-card[data-tx-d6v1-card-kunde] .tx-card__title-icon {
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
}
.tx-card[data-tx-d6v1-card-lieferung] .tx-card__title-icon {
    background: #ecfdf5;
    color: #047857;
}
.tx-card[data-tx-d6v1-card-auftrag] .tx-card__title-icon {
    background: #eef2ff;
    color: #4338ca;
}
.tx-card[data-tx-d6v1-id-tag-historie] .tx-card__title-icon {
    background: #f1f5f9;
    color: #475569;
}
/* Admin/disclosure envelope keeps its accent-soft default. */
.tx-card__subtitle {
    font-size: 0.78rem;
    color: var(--tx-order-text-muted);
}
.tx-card__actions { margin-left: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tx-card__body {
    padding: var(--tx-order-spacing-4) var(--tx-order-spacing-5);
    container-type: inline-size;
    container-name: txcard;
}
.tx-card__body--tight { padding: var(--tx-order-spacing-3) var(--tx-order-spacing-4); }
.tx-card__body--flush { padding: 0; }
.tx-card__empty {
    padding: var(--tx-order-spacing-5);
    text-align: center;
    font-size: 0.85rem;
    color: var(--tx-order-text-muted);
}

/* Key-value grid — used for metadata blocks. */
.tx-kv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .tx-kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
    .tx-kv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tx-kv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tx-kv-item {
    background: var(--tx-surface-alt, #f8fafc);
    border: 1px solid var(--tx-order-border);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.tx-kv-item--accent {
    background: var(--tx-order-accent-soft);
    border-color: rgba(79, 70, 229, 0.3);
}
.tx-kv-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tx-order-text-muted);
}
.tx-kv-value {
    font-size: 0.9rem;
    color: var(--tx-order-text-strong);
    word-break: break-word;
    font-weight: 500;
}
.tx-kv-value--mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.82rem;
}
.tx-kv-value--muted { color: var(--tx-order-text-muted); font-weight: 400; font-style: italic; }
.tx-kv-value--empty { color: var(--tx-order-text-subtle); font-weight: 400; }
.tx-kv-value--money { font-variant-numeric: tabular-nums; text-align: right; }
.tx-kv-value--right { text-align: right; }

/* Status flow — horizontal stepper at desktop, vertical at narrow. */
.tx-status-flow {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.tx-status-flow__step {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--tx-order-border);
    border-radius: 0.65rem;
    background: var(--tx-order-card);
    position: relative;
}
@media (min-width: 640px) {
    .tx-status-flow {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 0.5rem;
    }
    .tx-status-flow__step { border-radius: 0.55rem; }
}
@media (min-width: 768px) {
    .tx-status-flow {
        display: grid;
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}
@media (min-width: 960px) {
    .tx-status-flow {
        display: grid;
        grid-template-columns: repeat(5, minmax(0,1fr));
    }
    .tx-status-flow__step { padding: 0.55rem 0.65rem; }
    .tx-status-flow__step-title { font-size: 0.82rem; }
    .tx-status-flow__step-sub { font-size: 0.68rem; }
}
/* E6-D6N.2 — container-aware progress layout. The card body is narrower
 * than the viewport on the order-detail page, so the steps must respond
 * to the card width, not the browser width. Viewport media queries remain
 * as a fallback for browsers without container-query support. */
@container txcard (min-width: 520px) {
    .tx-status-flow {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 0.5rem;
    }
    .tx-status-flow__step { border-radius: 0.55rem; }
}
@container txcard (min-width: 760px) {
    .tx-status-flow {
        display: grid;
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}
@container txcard (min-width: 960px) {
    .tx-status-flow {
        display: grid;
        grid-template-columns: repeat(5, minmax(0,1fr));
    }
    .tx-status-flow__step { padding: 0.55rem 0.65rem; }
    .tx-status-flow__step-title { font-size: 0.82rem; }
    .tx-status-flow__step-sub { font-size: 0.68rem; }
}
.tx-status-flow__step--done {
    background: rgba(16, 185, 129, 0.04);
    border-color: rgba(16, 185, 129, 0.4);
}
.tx-status-flow__step--current {
    background: var(--tx-order-accent-soft);
    border-color: var(--tx-order-accent);
    box-shadow: 0 0 0 1px var(--tx-order-accent) inset;
}
.tx-status-flow__step--blocked {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.4);
}
.tx-status-flow__step-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tx-order-card);
    color: var(--tx-order-text-muted);
    border: 1px solid var(--tx-order-border);
    flex-shrink: 0;
}
.tx-status-flow__step--done .tx-status-flow__step-icon {
    background: var(--tx-success, #10b981);
    color: #fff;
    border-color: transparent;
}
.tx-status-flow__step--current .tx-status-flow__step-icon {
    background: var(--tx-order-accent);
    color: #fff;
    border-color: transparent;
}
.tx-status-flow__step--blocked .tx-status-flow__step-icon {
    background: var(--tx-danger, #ef4444);
    color: #fff;
    border-color: transparent;
}
.tx-status-flow__step-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.tx-status-flow__step-title { font-weight: 600; font-size: 0.9rem; color: var(--tx-order-text-strong); overflow-wrap: anywhere; }
.tx-status-flow__step-sub {
    font-size: 0.75rem;
    color: var(--tx-order-text-muted);
    overflow-wrap: anywhere;
}

/* E6-D6W.1 — Compact operational readiness row inside the top Order
 * Header. Replaces the former standalone "Produktionsfortschritt"
 * 6-step card and the "Nächster Schritt" workspace-action card with
 * a single header-integrated 4-key readiness strip (Ware / Dateien /
 * Produktion / Ausgabe). Same canonical D6W resolver; only the
 * presentation collapsed. Tone mapping reuses the success / info /
 * warning / muted palette. Scoped to .tx-order-page so the class
 * names cannot leak into the rest of the app shell. */
.tx-order-page .tx-order-command-readiness {
    list-style: none;
    margin: var(--tx-order-spacing-3) 0 0;
    padding: var(--tx-order-spacing-3);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    border: 1px solid var(--tx-order-border);
    border-radius: 0.6rem;
    background: var(--tx-surface-alt, #f8fafc);
}
@media (min-width: 768px) {
    .tx-order-page .tx-order-command-readiness {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.5rem;
    }
}
.tx-order-page .tx-order-command-readiness-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.45rem;
    row-gap: 0.05rem;
    align-items: center;
    padding: 0.35rem 0.55rem;
    border-radius: 0.45rem;
    border: 1px solid var(--tx-order-border);
    background: var(--tx-order-card);
    min-width: 0;
}
.tx-order-page .tx-order-command-readiness-item--success {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.3);
}
.tx-order-page .tx-order-command-readiness-item--info {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.3);
}
.tx-order-page .tx-order-command-readiness-item--warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.4);
}
/* E6-D6W.2.2 — neutral/inactive (Ausgabe when not ready) is calmer
   than warning so the strip does not turn into four bright KPI
   boxes. Reuses the surface-alt token, not a hardcoded gray. */
.tx-order-page .tx-order-command-readiness-item--muted {
    background: var(--tx-surface-alt, #f8fafc);
    border-color: var(--tx-order-border);
}
/* E6-D6W.2.2 — attention tone (Dateien when partial / 8 lokal · 9
   ohne Quelle). Distinct from waiting-warning so the operator can
   tell "files need attention" apart from "production blocked". */
.tx-order-page .tx-order-command-readiness-item--attention {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.35);
}
/* E6-D6W.2.2 — logistics tone (Ware when waiting). Softer than the
   waiting-warning that Produktion uses; reads as "in transit" not
   "blocked". */
.tx-order-page .tx-order-command-readiness-item--logistics {
    background: rgba(14, 165, 233, 0.06);
    border-color: rgba(14, 165, 233, 0.35);
}
.tx-order-page .tx-order-command-readiness-icon {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tx-order-text-muted);
    font-size: 0.95rem;
}
.tx-order-page .tx-order-command-readiness-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tx-order-text-muted);
    line-height: 1.15;
}
.tx-order-page .tx-order-command-readiness-value {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--tx-order-text-strong);
    line-height: 1.25;
    word-break: break-word;
}

/* Product table (items) — desktop = structured table, mobile = cards. */
.tx-product-table-wrap {
    overflow-x: auto;
    border-radius: 0;
}
.tx-product-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}
.tx-product-table thead th {
    background: var(--tx-surface-alt, #f8fafc);
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tx-order-text-muted);
    padding: 0.55rem 0.75rem;
    font-weight: 600;
}
.tx-product-table tbody td {
    padding: 0.7rem 0.75rem;
    border-top: 1px solid var(--tx-order-border);
    font-size: 0.85rem;
    vertical-align: top;
    color: var(--tx-order-text);
}
.tx-product-table tbody tr:hover td { background: var(--tx-order-accent-soft); }
.tx-product-cell__title { display: flex; align-items: center; gap: 0.6rem; }
.tx-product-cell__thumb {
    width: 3rem;
    height: 3rem;
    border-radius: 0.45rem;
    border: 1px solid var(--tx-order-border);
    background: var(--tx-surface-alt, #f8fafc);
    object-fit: contain;
    flex-shrink: 0;
}
.tx-product-cell__title-main { font-weight: 600; color: var(--tx-order-text-strong); display: block; word-break: break-word; }
.tx-product-cell__title-sub { font-size: 0.72rem; color: var(--tx-order-text-muted); font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Mobile product cards. Visible only below 900px. */
.tx-product-cards { display: none; }
@media (max-width: 899px) {
    .tx-product-table-wrap { display: none; }
    .tx-product-cards { display: flex; flex-direction: column; gap: 0.75rem; }
}
.tx-product-card {
    border: 1px solid var(--tx-order-border);
    border-radius: 0.75rem;
    background: var(--tx-order-card);
    padding: 0.75rem 0.85rem;
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    box-shadow: var(--tx-order-shadow);
}
.tx-product-card__thumb {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.5rem;
    background: var(--tx-surface-alt, #f8fafc);
    border: 1px solid var(--tx-order-border);
    object-fit: contain;
    flex-shrink: 0;
}
.tx-product-card__body { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 auto; min-width: 0; }
.tx-product-card__title { font-weight: 600; color: var(--tx-order-text-strong); word-break: break-word; }
.tx-product-card__row {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 0.6rem;
    font-size: 0.78rem;
}
.tx-product-card__row dt { color: var(--tx-order-text-muted); font-weight: 600; }
.tx-product-card__row dd { color: var(--tx-order-text); word-break: break-word; margin: 0; }

/* Detail disclosure inside a product card (views / customizations). */
.tx-product-card__details {
    margin-top: 0.5rem;
    border: 1px solid var(--tx-order-border);
    border-radius: 0.55rem;
    padding: 0.55rem 0.7rem;
    background: var(--tx-surface-alt, #f8fafc);
    font-size: 0.78rem;
}
.tx-product-card__details summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    color: var(--tx-order-text-strong);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.tx-product-card__details summary::-webkit-details-marker { display: none; }
.tx-product-card__details[open] summary { margin-bottom: 0.4rem; }
.tx-product-card__details ul { padding-left: 1rem; margin: 0; }

/* Media gallery — capped tile heights so they never spill out of the
 * card. Missing-info tiles collapse to a single compact row. */
.tx-media-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}
@media (min-width: 640px) {
    .tx-media-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .tx-media-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tx-media-group {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.tx-media-group__header {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tx-order-text);
}
.tx-media-group__count { font-size: 0.75rem; font-weight: 500; color: var(--tx-order-text-muted); }

.tx-media-tile {
    border: 1px solid var(--tx-order-border);
    border-radius: 0.65rem;
    background: var(--tx-order-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: zoom-in;
    transition: transform 120ms ease-in-out, border-color 120ms ease-in-out, box-shadow 120ms ease-in-out;
}
.tx-media-tile:hover,
.tx-media-tile:focus-visible {
    border-color: var(--tx-order-accent);
    transform: translateY(-1px);
    box-shadow: var(--tx-order-shadow);
    outline: none;
}
.tx-media-tile__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--tx-surface-alt, #f8fafc);
    border-bottom: 1px solid var(--tx-order-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.tx-media-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}
.tx-media-tile__body {
    padding: 0.55rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: var(--tx-order-text-muted);
}
.tx-media-tile__name {
    color: var(--tx-order-text-strong);
    font-weight: 600;
    word-break: break-word;
    font-size: 0.78rem;
}

.tx-media-missing {
    grid-column: 1 / -1;
    border: 1px dashed var(--tx-order-border);
    border-radius: 0.65rem;
    background: var(--tx-surface-alt, #f8fafc);
    padding: 0.55rem 0.85rem;
    font-size: 0.78rem;
    color: var(--tx-order-text-muted);
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

/* E6-D6V.2.5 — Compact "Weitere Medien" gallery. Lists same-order
 * locally-renderable images as a small thumbnail grid. Each tile is
 * a button (keyboard-focusable) wired to the existing
 * data-tx-lightbox handler; no new JS. */
.tx-production-media__thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}
@media (min-width: 720px) {
    .tx-production-media__thumb-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.65rem;
    }
}
.tx-production-media__thumb {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--tx-order-border, #e2e8f0);
    border-radius: 0.55rem;
    background: var(--tx-surface, #fff);
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    text-align: left;
    font: inherit;
    color: inherit;
}
.tx-production-media__thumb:hover,
.tx-production-media__thumb:focus-visible {
    border-color: var(--tx-accent, #6366f1);
    box-shadow: var(--tx-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
    outline: none;
}
.tx-production-media__thumb-media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: var(--tx-surface-alt, #f8fafc);
    overflow: hidden;
}
.tx-production-media__thumb-media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.tx-production-media__thumb-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.35rem 0.45rem;
    font-size: 0.72rem;
    color: var(--tx-order-text-muted, #475569);
    line-height: 1.2;
}
.tx-production-media__thumb-name {
    color: var(--tx-order-text-strong, #0f172a);
    font-weight: 600;
    word-break: break-word;
}
.tx-production-media__thumb-mime {
    opacity: 0.78;
}

/* E6-D6R — Production Media / Rohes Druckmotiv is the operational
 * anchor of the order detail. Rendered as a wide featured card with
 * a visible PRODUCTION badge so the operator sees the raw artwork at
 * a glance. Other roles (product / mockup / view / logo / document)
 * fall through the standard compact tile grid. */
.tx-media-production {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--tx-order-accent, #6366f1);
    border-radius: 0.85rem;
    background: linear-gradient(180deg, rgba(99,102,241,0.06) 0%, rgba(99,102,241,0.02) 100%);
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.tx-media-production__header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tx-order-text);
}
.tx-media-production__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--tx-order-text-strong);
}
.tx-media-production__sub {
    font-size: 0.75rem;
    color: var(--tx-order-text-muted);
    font-weight: 500;
}
.tx-media-production__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: var(--tx-order-accent, #6366f1);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tx-media-production__main {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 360px;
    background: #fff;
    border: 1px solid var(--tx-order-border);
    border-radius: 0.65rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tx-media-production__main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}
.tx-media-production__more {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.55rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.12);
}
.tx-media-tile--compact {
    padding: 0.45rem;
    background: rgba(255, 255, 255, 0.85);
}
.tx-media-tile--compact .tx-media-tile__media {
    aspect-ratio: 4 / 3;
    max-height: 110px;
}
.tx-media-production__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    font-size: 0.78rem;
    color: var(--tx-order-text-muted);
}
.tx-media-production__open {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.55rem;
    border: 1px solid var(--tx-order-accent, #6366f1);
    color: var(--tx-order-accent, #6366f1);
    background: #fff;
    font-weight: 600;
    cursor: zoom-in;
    transition: background-color 120ms ease-in-out, color 120ms ease-in-out;
}
.tx-media-production__open:hover,
.tx-media-production__open:focus-visible {
    background: var(--tx-order-accent, #6366f1);
    color: #fff;
    outline: none;
}

/* Timeline */
.tx-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.tx-timeline__item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--tx-order-border);
}
.tx-timeline__item:first-child { border-top: none; padding-top: 0; }
.tx-timeline__icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tx-order-accent-soft);
    color: var(--tx-order-accent);
    flex-shrink: 0;
}
.tx-timeline__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 auto; }
.tx-timeline__title { font-size: 0.85rem; font-weight: 600; color: var(--tx-order-text-strong); }
.tx-timeline__meta { font-size: 0.75rem; color: var(--tx-order-text-muted); display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Tables in cards */
.tx-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.tx-data-table th {
    background: var(--tx-surface-alt, #f8fafc);
    text-align: left;
    font-weight: 600;
    color: var(--tx-order-text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem 0.65rem;
}
.tx-data-table td {
    padding: 0.55rem 0.65rem;
    border-top: 1px solid var(--tx-order-border);
    vertical-align: top;
}
.tx-data-table tbody tr:hover td { background: var(--tx-order-accent-soft); }

/* Warning banners — accessible, not alarming. */
.tx-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    border-radius: 0.55rem;
    padding: 0.6rem 0.8rem;
    font-size: 0.82rem;
    border: 1px solid transparent;
}
.tx-banner--info { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.25); color: #1d4ed8; }
.tx-banner--warning { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); color: #92400e; }
.tx-banner--danger { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.25); color: #b91c1c; }
.tx-banner__icon { flex-shrink: 0; margin-top: 0.05rem; }

/* Accordion disclosure inside the new cards (e.g. ID-Tag-Historie). */
.tx-disclosure--in-card {
    border: 1px solid var(--tx-order-border);
    border-radius: 0.65rem;
    background: var(--tx-surface-alt, #f8fafc);
}
.tx-disclosure--in-card > summary {
    padding: 0.55rem 0.75rem;
    border-radius: 0.65rem;
}
.tx-disclosure--in-card > summary:hover { background: var(--tx-order-card); }
.tx-disclosure--in-card[open] > summary {
    border-radius: 0.65rem 0.65rem 0 0;
}
.tx-disclosure--in-card .tx-disclosure__body {
    padding: 0.55rem 0.75rem 0.75rem;
}

/* Address card — structured field layout. */
.tx-address-card {
    border: 1px solid var(--tx-order-border);
    border-radius: 0.65rem;
    padding: 0.7rem 0.85rem;
    background: var(--tx-order-card);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.tx-address-card__title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tx-order-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tx-address-card__line { font-size: 0.85rem; color: var(--tx-order-text); }
.tx-address-card__line--muted { color: var(--tx-order-text-muted); font-style: italic; }

/* Ensure the workspace fits inside the app shell main column. */
.tx-order-page { box-sizing: border-box; }
.tx-order-page *, .tx-order-page *::before, .tx-order-page *::after { box-sizing: border-box; }
.tx-order-page .tx-order-main .tx-card,
.tx-order-page .tx-order-aside .tx-card { width: 100%; }

/* Hide decorative scrollbars on horizontal status flow without
 * removing usability. */
.tx-status-flow::-webkit-scrollbar { height: 6px; }
.tx-status-flow::-webkit-scrollbar-thumb { background: var(--tx-order-border); border-radius: 3px; }
.tx-status-flow::-webkit-scrollbar-track { background: transparent; }

/* ============================================================================
 * E6-D6M — shared UI components for Dashboard / Orders / Calendar / Analytics.
 *
 * Every class is additive: existing rules keep working unchanged. The
 * classes are deliberately namespaced under `.textilos-*` so a
 * accidental collision with the global Tailwind reset is impossible.
 * ============================================================================ */

/* --- Admin disclosure (Smake API & Sync) -------------------------------- */
.textilos-admin-disclosure { transition: border-color 0.15s ease; }
.textilos-admin-disclosure:has(.textilos-disclosure-panel:not([hidden])) {
  border-color: var(--tx-accent);
}
.textilos-disclosure-trigger {
  cursor: pointer;
  user-select: none;
}
.textilos-disclosure-trigger[aria-expanded="true"] {
  background: var(--tx-accent-soft);
  color: var(--tx-accent-soft-text);
  border-color: var(--tx-accent);
}
.textilos-disclosure-panel[hidden] { display: none; }

/* --- Filter card / filter grid ----------------------------------------- */
.textilos-filter-card { margin-block: 0.5rem; }
.textilos-filter-grid { align-items: end; }
.textilos-filter-grid > label > input,
.textilos-filter-grid > label > select {
  height: 2.5rem;
}
.textilos-filter-actions { padding-top: 0.25rem; }

/* --- Toolbar card (orders/admin) ---------------------------------------- */
.textilos-toolbar-card { margin-block: 0.5rem; }

/* --- Data table wrapper + sticky header --------------------------------- */
.textilos-data-table-wrap {
  background: var(--tx-surface);
  border: 1px solid var(--tx-border);
  border-radius: 0.75rem;
  overflow-x: auto;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.textilos-data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
}
.textilos-data-table thead th {
  text-align: left;
  font-weight: 600;
  color: var(--tx-text-muted);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--tx-border);
  position: sticky;
  top: 0;
  background: var(--tx-surface);
  z-index: 1;
}
.textilos-data-table tbody tr { transition: background 0.12s ease; }
.textilos-data-table tbody tr:hover { background: var(--tx-surface-alt); }
.textilos-data-table tbody td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--tx-border);
  vertical-align: top;
}
.textilos-data-table tbody tr:last-child td { border-bottom: 0; }

/* --- Action menu / disclosure ------------------------------------------- */
.textilos-action-menu { gap: 0.5rem; }
.textilos-action-menu__disclosure summary::-webkit-details-marker { display: none; }
.textilos-action-menu__disclosure summary { list-style: none; }
.textilos-action-menu__disclosure[open] > summary {
  background: var(--tx-accent-soft);
  color: var(--tx-accent-soft-text);
  border-color: var(--tx-accent);
}

/* --- Mobile order list (cards) ----------------------------------------- */
.textilos-mobile-list { display: grid; gap: 0.5rem; }
.textilos-order-card {
  background: var(--tx-surface);
  border: 1px solid var(--tx-border);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.textilos-order-card__row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.textilos-order-card__row + .textilos-order-card__row { margin-top: 0.5rem; }
.textilos-order-card__thumb {
  width: 3rem; height: 3rem; border-radius: 0.5rem; object-fit: cover;
  border: 1px solid var(--tx-border);
}
.textilos-order-card__placeholder {
  width: 3rem; height: 3rem; border-radius: 0.5rem;
  border: 1px dashed var(--tx-border); background: var(--tx-surface-alt);
  display: flex; align-items: center; justify-content: center;
  color: var(--tx-text-muted);
}

/* --- Attention list (calendar, dashboard) ------------------------------- */
.textilos-attention-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.textilos-attention-list__item {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--tx-border);
  border-radius: 0.5rem;
  background: var(--tx-surface);
}
.textilos-attention-list__label { font-weight: 500; }
.textilos-attention-list__meta { display: flex; gap: 0.5rem; align-items: center; }

/* --- Calendar shell ----------------------------------------------------- */
.textilos-calendar-shell {
  background: var(--tx-surface);
  border: 1px solid var(--tx-border);
  border-radius: 0.75rem;
  padding: 0.5rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.textilos-calendar-shell .fc { font-family: inherit; }

/* --- Analytics grid ----------------------------------------------------- */
.textilos-analytics-grid { display: grid; gap: 0.75rem; }

/* --- Empty state (shared) ----------------------------------------------- */
.textilos-empty-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.5rem; padding: 1.5rem 1rem; text-align: center;
  background: var(--tx-surface-alt);
  border: 1px dashed var(--tx-border);
  border-radius: 0.75rem;
  color: var(--tx-text-muted);
}
.textilos-empty-state__title { font-weight: 600; color: var(--tx-text-strong); }

/* --- Page header -------------------------------------------------------- */
.textilos-page-header { display: flex; flex-direction: column; gap: 0.25rem; }
.textilos-page-subtitle { color: var(--tx-text-muted); font-size: 0.875rem; max-width: 60ch; }

/* --- Responsive helpers ------------------------------------------------- */
/* Show the desktop table ≥900px; the mobile card list is the default. */
@media (min-width: 900px) {
  .textilos-orders-table-wrap { display: block; }
  .textilos-orders-cards { display: none; }
}
@media (max-width: 899.98px) {
  .textilos-orders-table-wrap { display: none; }
  .textilos-orders-cards { display: grid; gap: 0.5rem; }
}

/* ============================================================
 * E6-D6N — Professional Order Workspace
 * Compact header, filter toolbar, reduced table, preview stack,
 * action menu, mobile cards, summary disclosure, progress grid,
 * compact media empty-state, product placeholder.
 * Re-uses --tx-order-* design tokens; no global resets.
 * ============================================================ */

/* --- Orders header (compact, two-column) ------------------------------- */
.tx-orders-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin-top: 0.25rem;
  padding: 0.25rem 0 0.5rem;
}
.tx-orders-header__title h1 { margin: 0; line-height: 1.15; }
.tx-orders-header__title p { margin: 0.25rem 0 0; max-width: 56ch; }
.tx-orders-header__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.tx-orders-header__count {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--tx-order-border);
  border-radius: 0.6rem;
  background: var(--tx-surface-alt);
  font-size: 0.78rem;
  color: var(--tx-order-text-strong);
}
.tx-orders-header__count-sep { color: var(--tx-order-text-subtle); }

/* --- Filter toolbar (compact, responsive, single row ≥1024px) ----------- */
.tx-order-filter-toolbar {
  background: var(--tx-surface);
  border: 1px solid var(--tx-order-border);
  border-radius: 0.75rem;
  padding: 0.65rem 0.85rem;
  box-shadow: var(--tx-card-shadow, 0 1px 2px rgba(15,23,42,0.04));
}
.tx-order-filter-toolbar__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  align-items: stretch;
}
.tx-order-filter-toolbar__field { display: block; min-width: 0; }
.tx-order-filter-toolbar__field--search { min-width: 0; }
.tx-order-filter-toolbar__field--date input { font-variant-numeric: tabular-nums; }
.tx-order-filter-toolbar__input {
  width: 100%;
  height: 2.4rem;
  padding: 0 0.7rem;
  border: 1px solid var(--tx-order-border);
  border-radius: 0.5rem;
  background: var(--tx-bg);
  color: var(--tx-order-text-strong);
  font-size: 0.85rem;
  line-height: 1.2;
}
.tx-order-filter-toolbar__input:focus {
  outline: 2px solid var(--tx-accent, #4f46e5);
  outline-offset: 1px;
}
.tx-order-filter-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.tx-order-filter-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border-radius: 0.5rem;
  font-size: 0.82rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
}
.tx-order-filter-toolbar__btn--primary {
  background: var(--tx-accent, #4f46e5);
  color: #fff;
  border-color: var(--tx-accent, #4f46e5);
}
.tx-order-filter-toolbar__btn--primary:hover { filter: brightness(0.95); }
.tx-order-filter-toolbar__btn--secondary {
  background: var(--tx-surface);
  color: var(--tx-order-text-strong);
  border-color: var(--tx-order-border);
}
.tx-order-filter-toolbar__btn--secondary:hover { background: var(--tx-surface-alt); }
/* E6-D6T.5 — filter toolbar now has 5 input/select fields + actions:
 *   1) search (2fr), 2) Quelle, 3) Produktionsstatus (slightly
 *      wider so "Teilweise in Produktion" doesn't crush), 4) from,
 *      5) to, 6) actions (auto).
 *   Total grid columns: search + 3 selects + 2 dates + actions = 7
 *   track columns. Source/Production-status share `1fr`; status
 *   gets a `1.4fr` to keep the long German label legible.
 */
@media (min-width: 640px) {
  .tx-order-filter-toolbar__row {
    grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto;
    gap: 0.5rem;
  }
  .tx-order-filter-toolbar__field--search { grid-column: 1 / 2; }
  .tx-order-filter-toolbar__actions { justify-content: flex-end; }
}
@media (min-width: 1024px) {
  .tx-order-filter-toolbar__row {
    grid-template-columns: minmax(220px, 2.4fr) minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto;
  }
}

/* --- Order table (7 main columns, row hover, clickable row) ------------ */
.tx-order-table-wrap {
  background: var(--tx-surface);
  border: 1px solid var(--tx-order-border);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--tx-card-shadow, 0 1px 2px rgba(15,23,42,0.04));
}
.tx-order-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
}
.tx-order-table thead th {
  position: sticky;
  top: 0;
  background: var(--tx-surface-alt);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tx-order-text-muted);
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--tx-order-border);
  text-align: left;
  white-space: nowrap;
  z-index: 1;
}
.tx-order-table tbody td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--tx-order-border);
  vertical-align: top;
  color: var(--tx-order-text-strong);
}
.tx-order-table tbody tr:last-child td { border-bottom: 0; }
.tx-order-row { cursor: pointer; transition: background 0.12s ease; }
.tx-order-row:hover td { background: var(--tx-order-accent-soft, rgba(79,70,229,0.06)); }
.tx-order-row:focus-within td { background: var(--tx-order-accent-soft, rgba(79,70,229,0.06)); }
.tx-order-row__number {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  color: var(--tx-accent, #4f46e5);
  text-decoration: none;
  word-break: break-all;
}
.tx-order-row__number:hover { text-decoration: underline; }
.tx-order-row__provider {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.1rem 0.4rem;
  background: var(--tx-surface-alt);
  border: 1px solid var(--tx-order-border);
  border-radius: 0.35rem;
  font-size: 0.65rem;
  color: var(--tx-order-text-muted);
  letter-spacing: 0.03em;
}
.tx-order-row__customer {
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 18rem;
}
.tx-order-row__contact {
  font-size: 0.72rem;
  color: var(--tx-order-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 18rem;
}
.tx-order-row__status-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 0.35rem;
  border: 1px solid var(--tx-order-border);
  font-size: 0.72rem;
  font-weight: 600;
}
/* E6-D6W.2.5 — quantitative production progress count.
 *
 * E6-D6W.2.5.2 — hierarchy inversion.
 *
 * The count is now the PRIMARY visual element in the STATUS cell —
 * it sits ABOVE the German status badge and uses the same mono
 * font + bold weight as `.tx-order-row__scope-num` (the Umfang
 * primary quantity "21" in the next column). This makes the
 * STATUS column read with the same hierarchy as the Umfang column:
 *
 *     STATUS                        UMFANG
 *     17 / 21   ← primary, bold     21 Textilien   ← primary, bold
 *     [Teilweise vorbereitet]       [Druck]
 *
 * The badge keeps its existing tone-class styling so the
 * "what does this mean" colour cue is still visible on the
 * secondary line. Colour is NOT applied to the count itself —
 * the number stays neutral so it reads the same way as the
 * Umfang quantity regardless of status tone. */
.tx-order-row__status-progress {
  display: block;
  margin-top: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--tx-order-text);
  line-height: 1.2;
}
.tx-order-row__status-progress-count { white-space: nowrap; }
/* Badge sits directly below the count with a small gap. The
 * inline-block keeps the badge from stretching the cell width. */
.tx-order-row__status-badge {
  display: inline-block;
  margin-top: 0.2rem;
}
.tx-order-row__production {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.7rem;
  color: var(--tx-order-text-muted);
}
.tx-order-row__scope {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  font-size: 0.85rem;
}
.tx-order-row__scope-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
}
.tx-order-row__scope-unit {
  font-size: 0.72rem;
  color: var(--tx-order-text-muted);
}
.tx-order-row__decoration {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.3rem;
}
.tx-order-row__decoration-badge {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border-radius: 0.3rem;
  border: 1px solid var(--tx-order-border);
  font-size: 0.65rem;
}
/* E6-D6T — production type badges (Druck / Stick) under Umfang column.
   Shared by the desktop table row and the mobile card so the visual
   contract is identical across breakpoints. Flex-wrap guarantees the
   badges wrap on 390 px without horizontal overflow. */
.tx-production-type-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.3rem;
  min-width: 0;
}
.tx-production-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.05rem 0.4rem;
  border-radius: 0.3rem;
  border: 1px solid var(--tx-order-border);
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.tx-production-type-badge i {
  font-size: 0.62rem;
  line-height: 1;
}
.tx-production-type-badge--print {
  border-color: #c7d2fe;
  background: #eef2ff;
  color: #4338ca;
}
.tx-production-type-badge--embroidery {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}
.tx-production-type-badge--neutral {
  border-color: var(--tx-order-border);
  background: var(--tx-order-surface-alt);
  color: var(--tx-order-text-muted);
}
.tx-order-row__total {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tx-order-row__updated {
  font-size: 0.7rem;
  color: var(--tx-order-text-muted);
  margin-top: 0.2rem;
}
.tx-order-table__col--preview  { width: 200px; }
/* E6-D6T.4 — STATUS / SCOPE / TOTAL / ACTION column widths are owned by
 * the D6T.4 layout block at the end of the file. The 180/140/120 px rules
 * live there so the desktop 6-column balance survives the polish without
 * duplicating stale declarations here. */
/* E6-D6T.3 — STATUS column width is owned by the D6T.3 visual polish
 * block further down in the file. The 150 px rule lives there so the
 * longest live label ("Wartet auf Ware") fits on a single line at
 * 1440 px without overflowing the table. */

/* --- Preview stack ----------------------------------------------------- */
.tx-order-preview-stack {
  display: flex;
  gap: 0.3rem;
  flex-wrap: nowrap;
  align-items: center;
}
.tx-order-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 0.45rem;
  border: 1px solid var(--tx-order-border);
  background: var(--tx-surface-alt);
  overflow: hidden;
  object-fit: contain;
  flex-shrink: 0;
}
.tx-order-preview--placeholder {
  color: var(--tx-order-text-subtle);
}
.tx-order-preview--more {
  width: 36px;
  height: 36px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tx-order-text-strong);
  background: var(--tx-surface);
}
@media (min-width: 1024px) {
  .tx-order-preview { width: 64px; height: 64px; }
  .tx-order-preview--more { width: 40px; height: 40px; font-size: 0.8rem; }
}

/* --- Action menu (Details + disclosure) --------------------------------- */
.tx-order-action-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.tx-order-action-menu__primary {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 0.45rem;
  background: var(--tx-accent, #4f46e5);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
}
.tx-order-action-menu__primary:hover { filter: brightness(0.95); text-decoration: none; }
.tx-order-action-menu__disclosure { position: relative; }
.tx-order-action-menu__disclosure summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--tx-order-border);
  border-radius: 0.45rem;
  background: var(--tx-surface-alt);
  color: var(--tx-order-text-strong);
}
.tx-order-action-menu__disclosure summary::-webkit-details-marker { display: none; }
.tx-order-action-menu__disclosure summary::marker { content: ""; }
.tx-order-action-menu__disclosure[open] > summary {
  background: var(--tx-accent-soft, rgba(79,70,229,0.12));
  color: var(--tx-accent, #4f46e5);
  border-color: var(--tx-accent, #4f46e5);
}
.tx-order-action-menu__pop {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  min-width: 11rem;
  background: var(--tx-surface);
  border: 1px solid var(--tx-order-border);
  border-radius: 0.5rem;
  box-shadow: var(--tx-card-shadow, 0 4px 12px rgba(15,23,42,0.08));
  padding: 0.3rem;
  z-index: 10;
}
.tx-order-action-menu__item {
  display: block;
  padding: 0.4rem 0.65rem;
  border-radius: 0.35rem;
  font-size: 0.8rem;
  color: var(--tx-order-text-strong);
  text-decoration: none;
}
.tx-order-action-menu__item:hover { background: var(--tx-surface-alt); text-decoration: none; }

/* --- Pin button (desktop) -----------------------------------------------
 * E6-D6S.1 — proper icon button for the pin toggle on the orders list.
 * The button is 32px square on desktop with a single fa-thumbtack icon;
 * the --pinned modifier painted via the CSS variable for the accent token
 * keeps the visual pin/unpin state in one place. Aria-pressed drives
 * the contrast. */
.tx-order-row__pin-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--tx-order-border);
  border-radius: 0.5rem;
  background: var(--tx-surface);
  color: var(--tx-order-text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.tx-order-row__pin-btn:hover {
  background: var(--tx-accent-soft, rgba(79,70,229,0.1));
  color: var(--tx-accent, #4f46e5);
  border-color: var(--tx-accent, #4f46e5);
}
.tx-order-row__pin-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--tx-surface), 0 0 0 4px var(--tx-accent, #4f46e5);
  border-color: var(--tx-accent, #4f46e5);
}
.tx-order-row__pin-btn[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}
.tx-order-row__pin-btn--pinned {
  background: var(--tx-accent, #4f46e5);
  color: #fff;
  border-color: var(--tx-accent, #4f46e5);
}
.tx-order-row__pin-btn--pinned:hover {
  background: var(--tx-accent-hover, #4338ca);
  border-color: var(--tx-accent-hover, #4338ca);
  color: #fff;
}
.tx-order-row__pin-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}
.tx-order-row__pin-btn--pinned .tx-order-row__pin-btn__icon {
  transform: rotate(0deg);
}
@media (max-width: 899px) {
  /* On mobile the same class falls under the larger mobile card pin
   * rules below; keep the desktop defaults but bump the touch target. */
  .tx-order-row__pin-btn { width: 2.25rem; height: 2.25rem; }
}

/* --- Mobile order cards (refined) -------------------------------------- */
.tx-mobile-order-cards {
  display: grid;
  gap: 0.5rem;
}
/* E6-D6N — desktop ≥900px shows the orders table, hides the mobile cards.
 * The legacy .textilos-orders-table-wrap / .textilos-orders-cards pair
 * is preserved for any node still carrying those class names; the new
 * .tx-order-table-wrap / .tx-mobile-order-cards classes are the
 * authoritative names going forward.
 */
.tx-order-table-wrap { display: none; }
.tx-mobile-order-cards { display: grid; }
@media (min-width: 900px) {
  .tx-order-table-wrap { display: block; }
  .tx-mobile-order-cards { display: none; }
}
.tx-mobile-order-card {
  background: var(--tx-surface);
  border: 1px solid var(--tx-order-border);
  border-radius: 0.75rem;
  padding: 0.7rem 0.85rem;
  box-shadow: var(--tx-card-shadow, 0 1px 2px rgba(15,23,42,0.04));
}
.tx-mobile-order-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  padding: 0.3rem 0;
}
.tx-mobile-order-card__row--head {
  border-bottom: 1px solid var(--tx-order-border);
  padding-bottom: 0.55rem;
  margin-bottom: 0.3rem;
}
.tx-mobile-order-card__row--actions { padding-top: 0.55rem; border-top: 1px solid var(--tx-order-border); }
.tx-mobile-order-card__thumb-wrap {
  display: block;
  flex-shrink: 0;
}
.tx-mobile-order-card__thumb {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
  border-radius: 0.5rem;
  border: 1px solid var(--tx-order-border);
  background: var(--tx-surface-alt);
}
.tx-mobile-order-card__placeholder {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px dashed var(--tx-order-border);
  background: var(--tx-surface-alt);
  color: var(--tx-order-text-subtle);
}
.tx-mobile-order-card__title-wrap {
  flex: 1 1 auto;
  min-width: 0;
}
.tx-mobile-order-card__number {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--tx-accent, #4f46e5);
  text-decoration: none;
  word-break: break-all;
}
.tx-mobile-order-card__provider {
  display: inline-block;
  margin: 0.15rem 0.35rem 0 0;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--tx-order-border);
  border-radius: 0.3rem;
  background: var(--tx-surface-alt);
  font-size: 0.65rem;
  color: var(--tx-order-text-muted);
  letter-spacing: 0.03em;
}
.tx-mobile-order-card__status {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
  border: 1px solid var(--tx-order-border);
  font-size: 0.7rem;
  font-weight: 600;
  margin-top: 0.25rem;
}
/* E6-D6W.2.5 — mobile parity for the quantitative progress count.
 *
 * E6-D6W.2.5.2 — mobile count-first hierarchy.
 *
 * Same count-first hierarchy as the desktop STATUS cell above. The
 * count is the primary visual element (bold mono), the badge sits
 * directly below with a small gap. Sized slightly smaller than the
 * desktop count (0.78rem vs 0.85rem) to fit narrow breakpoints
 * without horizontal overflow. */
.tx-mobile-order-card__status-progress {
  display: block;
  margin-top: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--tx-order-text);
  line-height: 1.2;
}
.tx-mobile-order-card__status-progress-count { white-space: nowrap; }
.tx-mobile-order-card__status {
  display: inline-block;
  margin-top: 0.15rem;
}
.tx-mobile-order-card__total-wrap {
  margin-left: auto;
  text-align: right;
}
.tx-mobile-order-card__total {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.95rem;
}
.tx-mobile-order-card__items {
  font-size: 0.7rem;
  color: var(--tx-order-text-muted);
}
.tx-mobile-order-card__customer {
  font-weight: 600;
  font-size: 0.85rem;
}
.tx-mobile-order-card__decoration {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.tx-mobile-order-card__decoration-badge {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border-radius: 0.3rem;
  border: 1px solid var(--tx-order-border);
  font-size: 0.65rem;
}
.tx-mobile-order-card__updated {
  font-size: 0.7rem;
  color: var(--tx-order-text-muted);
  margin-left: auto;
}
.tx-mobile-order-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 0.45rem;
  font-size: 0.8rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
}
.tx-mobile-order-card__btn--primary {
  background: var(--tx-accent, #4f46e5);
  color: #fff;
  border-color: var(--tx-accent, #4f46e5);
}
.tx-mobile-order-card__btn--primary:hover { filter: brightness(0.95); text-decoration: none; }
.tx-mobile-order-card__btn--secondary {
  background: var(--tx-surface-alt);
  color: var(--tx-order-text-strong);
  border-color: var(--tx-order-border);
}
.tx-mobile-order-card__btn--secondary:hover { background: var(--tx-surface); }

/* E6-D6S.1 — Mobile-card pin variant. Touch target ≥36px, pill style,
 *   icon rotates to show the pinned state. The class is shared with
 *   the desktop button so the JS handler can toggle a single state. */
.tx-mobile-order-card__btn--pin {
  background: var(--tx-surface);
  color: var(--tx-order-text-muted);
  border: 1px solid var(--tx-order-border);
  min-height: 2.25rem;
  padding: 0.45rem 0.85rem;
  font-weight: 500;
}
.tx-mobile-order-card__btn--pin:hover {
  background: var(--tx-accent-soft, rgba(79,70,229,0.1));
  color: var(--tx-accent, #4f46e5);
  border-color: var(--tx-accent, #4f46e5);
}
.tx-mobile-order-card__btn--pin:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--tx-surface), 0 0 0 4px var(--tx-accent, #4f46e5);
  border-color: var(--tx-accent, #4f46e5);
}
.tx-mobile-order-card__btn--pin[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}
.tx-mobile-order-card__btn--pinned {
  background: var(--tx-accent, #4f46e5);
  color: #fff;
  border-color: var(--tx-accent, #4f46e5);
}
.tx-mobile-order-card__btn--pinned:hover {
  background: var(--tx-accent-hover, #4338ca);
  border-color: var(--tx-accent-hover, #4338ca);
  color: #fff;
}
.tx-mobile-order-card__btn--pin-icon { display: inline-flex; align-items: center; justify-content: center; transform: rotate(-45deg); transition: transform 120ms ease; }
.tx-mobile-order-card__btn--pinned .tx-mobile-order-card__btn--pin-icon { transform: rotate(0deg); }

/* E6-D6S.1 — Planung card (canonical render path). Uses the existing
 *   tx-card system; these classes only target the new bits (pin toggle,
 *   countdown row, save/clear buttons, feedback). */
.tx-planning-card__body { display: flex; flex-direction: column; gap: 0.75rem; }
.tx-planning-card__row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.tx-planning-pin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--tx-order-border);
  border-radius: 0.55rem;
  background: var(--tx-surface);
  color: var(--tx-order-text-strong);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.tx-planning-pin-btn:hover {
  background: var(--tx-accent-soft, rgba(79,70,229,0.1));
  color: var(--tx-accent, #4f46e5);
  border-color: var(--tx-accent, #4f46e5);
}
.tx-planning-pin-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--tx-surface), 0 0 0 4px var(--tx-accent, #4f46e5);
  border-color: var(--tx-accent, #4f46e5);
}
.tx-planning-pin-btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.tx-planning-pin-btn--pinned {
  background: var(--tx-accent, #4f46e5);
  color: #fff;
  border-color: var(--tx-accent, #4f46e5);
}
.tx-planning-pin-btn--pinned:hover {
  background: var(--tx-accent-hover, #4338ca);
  border-color: var(--tx-accent-hover, #4338ca);
  color: #fff;
}
.tx-planning-pin-btn__icon { display: inline-flex; }
.tx-planning-pin-btn--pinned .tx-planning-pin-btn__icon { transform: rotate(0deg); }
.tx-planning-pin-btn:not(.tx-planning-pin-btn--pinned) .tx-planning-pin-btn__icon { transform: rotate(-45deg); }
.tx-planning-card__field { display: flex; flex-direction: column; gap: 0.3rem; }
.tx-planning-card__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tx-order-text-muted, #64748b);
  font-weight: 600;
}
.tx-planning-card__input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--tx-order-border);
  border-radius: 0.45rem;
  background: var(--tx-surface);
  color: var(--tx-order-text-strong);
  font-size: 0.85rem;
  font-family: inherit;
  min-height: 2.25rem;
}
.tx-planning-card__input:focus {
  outline: none;
  border-color: var(--tx-accent, #4f46e5);
  box-shadow: 0 0 0 3px var(--tx-accent-soft, rgba(79,70,229,0.18));
}
.tx-planning-card__help {
  font-size: 0.72rem;
  color: var(--tx-order-text-muted, #64748b);
}
.tx-planning-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tx-planning-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--tx-order-border);
  border-radius: 0.55rem;
  background: var(--tx-surface);
  color: var(--tx-order-text-strong);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
}
.tx-planning-btn:hover {
  background: var(--tx-surface-alt);
  border-color: var(--tx-order-border-strong, #cbd5e1);
}
.tx-planning-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--tx-surface), 0 0 0 4px var(--tx-accent, #4f46e5);
  border-color: var(--tx-accent, #4f46e5);
}
.tx-planning-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.tx-planning-btn--primary {
  background: var(--tx-accent, #4f46e5);
  color: #fff;
  border-color: var(--tx-accent, #4f46e5);
}
.tx-planning-btn--primary:hover {
  background: var(--tx-accent-hover, #4338ca);
  border-color: var(--tx-accent-hover, #4338ca);
  color: #fff;
}
.tx-planning-card__countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-family: var(--tx-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  color: var(--tx-order-text-muted, #64748b);
}
.tx-planning-card__countdown-label { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.tx-planning-card__countdown-value { color: var(--tx-order-text-strong, #0f172a); font-weight: 600; }
.tx-planning-card__countdown-value--terminal { color: var(--tx-success, #10b981); }
.tx-planning-card__countdown-sep { color: var(--tx-order-text-muted, #64748b); }
.tx-planning-card__feedback {
  font-size: 0.75rem;
  color: var(--tx-order-text-muted, #64748b);
  min-height: 1rem;
}
.tx-planning-card__feedback--success { color: var(--tx-success, #10b981); }
.tx-planning-card__feedback--error { color: var(--tx-danger, #dc2626); }
.tx-planning-card__feedback--info { color: var(--tx-accent, #4f46e5); }

/* E6-D6S.1 — priority unpin button. Same dimensions as the card pin
 *   button so the affordance is consistent across the two pages. */
.tx-priority-unpin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
}
.tx-priority-unpin-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--tx-surface), 0 0 0 4px var(--tx-danger, #dc2626);
}

/* --- Priority Board (E6-D6S.4.2) ---------------------------------------- */
/* Component anatomy:                                                        */
/*   .tx-priority-summary                                                    */
/*     .tx-priority-summary__chip  (alias: .tx-priority-summary__item)        */
/*       .tx-priority-summary__chip-dot (alias: .tx-priority-summary__dot)    */
/*       .tx-priority-summary__chip-label (alias: __label)                   */
/*       .tx-priority-summary__chip-count (alias: __count)                   */
/*   .tx-priority-card                                                        */
/*     header.tx-priority-card__header (alias: __head)                        */
/*       .tx-priority-card__identity                                         */
/*       .tx-priority-card__header-actions (alias: __head-right)             */
/*         .tx-priority-card__deadline                                       */
/*         .tx-priority-unpin-btn                                            */
/*     .tx-priority-card__ready  data-state="planned|empty"                  */
/*     .tx-priority-card__status-row                                         */
/*       .tx-priority-card__badge.status-badge.tone-*                        */
/*     footer.tx-priority-card__footer                                       */
/*       .tx-priority-card__updated                                          */
/*       .tx-priority-card__details                                          */
/*                                                                           */
/* Every selector below is scoped to .tx-priority-* so nothing leaks into    */
/* other pages. The `--tx-*` design tokens remain the only source of colour.  */
/* No `!important`, no global badge / button / section overrides.            */

/* ------------------------------------------------------------------------- */
/* Summary strip                                                              */
/* ------------------------------------------------------------------------- */
/* E6-D6S.4.4 — responsive summary grid. At >=1280px we force 7 equal
 * columns so the longest label ("Abgeschlossen" / "Diese Woche") never
 * has to ellipsize on the standard operator viewport. Below 1280px we
 * drop to auto-fit so the strip wraps cleanly (4+3 on tablets, 2 per
 * row on phones, 1+1+… on sub-380 viewports). */
.tx-priority-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
  .tx-priority-summary { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@media (min-width: 1024px) {
  .tx-priority-summary { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (min-width: 1280px) {
  /* Force exactly 7 equal columns on the operator desktop. minmax(0,1fr)
   * lets the columns shrink to label width so the count badge never
   * crowds the label. */
  .tx-priority-summary {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.5rem;
  }
}
.tx-priority-summary__chip,
.tx-priority-summary__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: var(--tx-surface, #ffffff);
  border: 1px solid var(--tx-border, #e2e8f0);
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  color: var(--tx-text, #1e293b);
  min-width: 0;
}
.tx-priority-summary__chip-dot,
.tx-priority-summary__dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  flex: 0 0 auto;
  background: var(--tx-border-strong, #cbd5e1);
}
.tx-priority-summary__chip-label,
.tx-priority-summary__label {
  color: var(--tx-text, #1e293b);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  font-size: 0.8125rem;
  line-height: 1.2;
}
/* E6-D6S.4.4 — on the operator desktop (>=1280px) we force 7 equal
 * columns so the longest label never has to ellipsize. The
 * minmax(0,1fr) lets the column shrink to its content, so the count
 * badge never crowds the label. */
@media (min-width: 1280px) {
  .tx-priority-summary__chip-label,
  .tx-priority-summary__label {
    overflow: visible;
    text-overflow: clip;
  }
}
.tx-priority-summary__chip-count,
.tx-priority-summary__count {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--tx-text-strong, #0f172a);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: var(--tx-surface-alt, #f1f5f9);
  border: 1px solid var(--tx-border, #e2e8f0);
  flex: 0 0 auto;
}

/* Per-group chip tint (background + border + ring). */
.tx-priority-summary__chip[data-group="overdue"],
.tx-priority-summary__item[data-group="overdue"] {
  background: var(--tx-danger-soft, #ffe4e6);
  border-color: var(--tx-danger-ring, #fecdd3);
}
.tx-priority-summary__chip[data-group="today"],
.tx-priority-summary__item[data-group="today"] {
  background: var(--tx-warning-soft, #fef3c7);
  border-color: var(--tx-warning-ring, #fde68a);
}
.tx-priority-summary__chip[data-group="tomorrow"],
.tx-priority-summary__item[data-group="tomorrow"] {
  background: var(--tx-accent-soft, #eef2ff);
  border-color: var(--tx-accent-ring, #6366f1);
}
.tx-priority-summary__chip[data-group="this_week"],
.tx-priority-summary__item[data-group="this_week"] {
  background: var(--tx-info-soft, #e0f2fe);
  border-color: var(--tx-info-ring, #bae6fd);
}
.tx-priority-summary__chip[data-group="later"],
.tx-priority-summary__item[data-group="later"] {
  background: var(--tx-violet-soft, #ede9fe);
  border-color: var(--tx-violet-ring, #ddd6fe);
}
.tx-priority-summary__chip[data-group="no_date"],
.tx-priority-summary__item[data-group="no_date"] {
  background: var(--tx-surface, #ffffff);
  border-color: var(--tx-border, #e2e8f0);
}
.tx-priority-summary__chip[data-group="completed"],
.tx-priority-summary__item[data-group="completed"] {
  background: var(--tx-success-soft, #d1fae5);
  border-color: var(--tx-success-ring, #a7f3d0);
}

/* Per-group chip dot (CSS-only fallback for groups whose Tailwind token
 * may be absent — `later`=neutral, `completed`=shipped). */
.tx-priority-summary__chip-dot[data-group="overdue"],
.tx-priority-summary__dot[data-group="overdue"],
.tx-priority-summary__chip-dot--overdue {
  background: var(--tx-danger, #e11d48);
}
.tx-priority-summary__chip-dot[data-group="today"],
.tx-priority-summary__dot[data-group="today"],
.tx-priority-summary__chip-dot--today {
  background: var(--tx-warning, #d97706);
}
.tx-priority-summary__chip-dot[data-group="tomorrow"],
.tx-priority-summary__dot[data-group="tomorrow"],
.tx-priority-summary__chip-dot--tomorrow {
  background: var(--tx-accent, #4f46e5);
}
.tx-priority-summary__chip-dot[data-group="this_week"],
.tx-priority-summary__dot[data-group="this_week"],
.tx-priority-summary__chip-dot--this_week {
  background: var(--tx-info, #0284c7);
}
.tx-priority-summary__chip-dot[data-group="later"],
.tx-priority-summary__dot[data-group="later"],
.tx-priority-summary__chip-dot--later {
  background: var(--tx-violet, #7c3aed);
}
.tx-priority-summary__chip-dot[data-group="no_date"],
.tx-priority-summary__dot[data-group="no_date"],
.tx-priority-summary__chip-dot--no_date {
  background: var(--tx-border-strong, #cbd5e1);
}
.tx-priority-summary__chip-dot[data-group="completed"],
.tx-priority-summary__dot[data-group="completed"],
.tx-priority-summary__chip-dot--completed {
  background: var(--tx-success, #10b981);
}

/* Old shorthand — kept as defensive alias so any stale markup or future
 * tone-routed helper still resolves to a visible dot color. */
.tx-priority-summary__chip-dot[data-tone="neutral"],
.tx-priority-summary__dot[data-tone="neutral"] {
  background: var(--tx-border-strong, #cbd5e1);
}
.tx-priority-summary__chip-dot[data-tone="shipped"],
.tx-priority-summary__dot[data-tone="shipped"] {
  background: var(--tx-success, #10b981);
}
.tx-priority-summary__chip-dot[data-tone="danger"],
.tx-priority-summary__dot[data-tone="danger"]  { background: var(--tx-danger, #e11d48); }
.tx-priority-summary__chip-dot[data-tone="warning"],
.tx-priority-summary__dot[data-tone="warning"] { background: var(--tx-warning, #d97706); }
.tx-priority-summary__chip-dot[data-tone="accent"],
.tx-priority-summary__dot[data-tone="accent"]  { background: var(--tx-accent, #4f46e5); }
.tx-priority-summary__chip-dot[data-tone="info"],
.tx-priority-summary__dot[data-tone="info"]    { background: var(--tx-info, #0284c7); }
.tx-priority-summary__chip-dot[data-tone="success"],
.tx-priority-summary__dot[data-tone="success"] { background: var(--tx-success, #10b981); }

/* ------------------------------------------------------------------------- */
/* Group card grid                                                            */
/* ------------------------------------------------------------------------- */
.tx-priority-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  /* E6-D6S.4.2 — single-card desktop full-width contract. When a group
   * holds exactly one card the grid collapses to one column so the
   * card can use the full available width instead of being stuck at
   * 50 % with empty space on the right. */
  .tx-priority-grid[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .tx-priority-grid:not([data-count="1"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------------- */
/* Card shell                                                                 */
/* ------------------------------------------------------------------------- */
.tx-priority-card {
  background: var(--tx-surface, #ffffff);
  border: 1px solid var(--tx-border, #e2e8f0);
  border-radius: 0.75rem;
  /* E6-D6S.4.4 — density: padding was 1rem 1.125rem, now 0.75rem 1rem
   * to bring cards ~15-20% closer together without crushing
   * information density. */
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  /* E6-D6S.4.4 — gap was 0.875rem, now 0.625rem. Three gaps × 4px saved
   * = 12px off the vertical flow. */
  gap: 0.625rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tx-priority-card:hover {
  border-color: var(--tx-border-strong, #cbd5e1);
  box-shadow: var(--tx-shadow-sm, 0 1px 2px 0 rgba(15, 23, 42, 0.05));
}

/* Per-group card border-left (anchors group colour on the card itself). */
.tx-priority-card[data-group="overdue"]   { border-left: 4px solid var(--tx-danger,  #e11d48); }
.tx-priority-card[data-group="today"]     { border-left: 4px solid var(--tx-warning, #d97706); }
.tx-priority-card[data-group="tomorrow"]  { border-left: 4px solid var(--tx-accent,  #4f46e5); }
.tx-priority-card[data-group="this_week"] { border-left: 4px solid var(--tx-info,    #0284c7); }
.tx-priority-card[data-group="later"]     { border-left: 4px solid var(--tx-violet,  #7c3aed); }
.tx-priority-card[data-group="no_date"]   { border-left: 4px solid var(--tx-border-strong, #cbd5e1); }
.tx-priority-card[data-group="completed"] { border-left: 4px solid var(--tx-success, #10b981); }

/* ------------------------------------------------------------------------- */
/* Card header (identity + actions)                                          */
/* ------------------------------------------------------------------------- */
.tx-priority-card__header,
.tx-priority-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.625rem;
}
.tx-priority-card__identity {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  min-width: 0;
  flex: 1 1 auto;
}
.tx-priority-card__identity-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.tx-priority-card__order-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}
.tx-priority-card__pin {
  color: var(--tx-accent, #4f46e5);
  flex: 0 0 auto;
  margin-top: 0.125rem;
}
.tx-priority-card__external {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--tx-text-strong, #0f172a);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-priority-card__internal {
  display: inline-block;
  font-size: 0.6875rem;
  color: var(--tx-text-subtle, #94a3b8);
  font-family: var(--tx-font-mono, ui-monospace, SFMono-Regular, monospace);
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex: 0 0 auto;
}
.tx-priority-card__customer {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--tx-text, #1e293b);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.tx-priority-card__header-actions,
.tx-priority-card__head-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
  max-width: 100%;
}

/* ------------------------------------------------------------------------- */
/* Deadline pill                                                              */
/* ------------------------------------------------------------------------- */
.tx-priority-card__deadline {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--tx-surface-alt, #f1f5f9);
  color: var(--tx-text-strong, #0f172a);
  border: 1px solid var(--tx-border, #e2e8f0);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tx-priority-card__deadline-icon { font-size: 0.7rem; }
.tx-priority-card__deadline-text {
  white-space: nowrap;
}
.tx-priority-card__deadline--neutral {
  background: var(--tx-surface-alt, #f1f5f9);
  color: var(--tx-text-muted, #64748b);
  border-color: var(--tx-border, #e2e8f0);
  font-weight: 600;
}
.tx-priority-card[data-group="overdue"] .tx-priority-card__deadline {
  background: var(--tx-danger-soft, #ffe4e6);
  color: var(--tx-danger-text, #be123c);
  border-color: var(--tx-danger, #e11d48);
}
.tx-priority-card[data-group="today"] .tx-priority-card__deadline {
  background: var(--tx-warning-soft, #fef3c7);
  color: var(--tx-warning-text, #b45309);
  border-color: var(--tx-warning, #d97706);
}
.tx-priority-card[data-group="tomorrow"] .tx-priority-card__deadline {
  background: var(--tx-accent-soft, #eef2ff);
  color: var(--tx-accent-soft-text, #4338ca);
  border-color: var(--tx-accent, #4f46e5);
}
.tx-priority-card[data-group="this_week"] .tx-priority-card__deadline {
  background: var(--tx-info-soft, #e0f2fe);
  color: var(--tx-info-text, #0369a1);
  border-color: var(--tx-info, #0284c7);
}
.tx-priority-card[data-group="later"] .tx-priority-card__deadline {
  background: var(--tx-violet-soft, #ede9fe);
  color: var(--tx-violet-text, #6d28d9);
  border-color: var(--tx-violet, #7c3aed);
}
.tx-priority-card[data-group="completed"] .tx-priority-card__deadline {
  background: var(--tx-success-soft, #d1fae5);
  color: var(--tx-success-text, #047857);
  border-color: var(--tx-success, #10b981);
}

/* ------------------------------------------------------------------------- */
/* Ready block (planned pickup)                                              */
/* ------------------------------------------------------------------------- */
.tx-priority-card__ready {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  background: var(--tx-surface-alt, #f1f5f9);
  border: 1px solid var(--tx-border, #e2e8f0);
  border-radius: 0.625rem;
  /* E6-D6S.4.4 — density: padding was 0.625rem 0.875rem, now 0.5rem
   * 0.75rem to bring the ready block ~3px shorter vertically. */
  padding: 0.5rem 0.75rem;
}
.tx-priority-card__ready-label {
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tx-text-muted, #64748b);
}
.tx-priority-card__ready-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tx-text-strong, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
.tx-priority-card[data-group="overdue"] .tx-priority-card__ready {
  background: var(--tx-danger-soft, #ffe4e6);
  border-color: var(--tx-danger, #e11d48);
}
.tx-priority-card[data-group="today"] .tx-priority-card__ready {
  background: var(--tx-warning-soft, #fef3c7);
  border-color: var(--tx-warning, #d97706);
}
.tx-priority-card[data-group="tomorrow"] .tx-priority-card__ready {
  background: var(--tx-accent-soft, #eef2ff);
  border-color: var(--tx-accent, #4f46e5);
}
.tx-priority-card[data-group="this_week"] .tx-priority-card__ready {
  background: var(--tx-info-soft, #e0f2fe);
  border-color: var(--tx-info, #0284c7);
}
.tx-priority-card[data-group="later"] .tx-priority-card__ready {
  background: var(--tx-violet-soft, #ede9fe);
  border-color: var(--tx-violet, #7c3aed);
}
.tx-priority-card[data-group="completed"] .tx-priority-card__ready {
  background: var(--tx-success-soft, #d1fae5);
  border-color: var(--tx-success, #10b981);
}
.tx-priority-card[data-group="no_date"] .tx-priority-card__ready,
.tx-priority-card__ready[data-state="empty"],
.tx-priority-card__ready--empty {
  background: var(--tx-surface-alt, #f1f5f9);
  border-color: var(--tx-border, #e2e8f0);
}

/* Mobile stack: ready block goes vertical, label on top of value.
   Breakpoint raised to 639px so Chrome headless (min viewport 500px)
   and common tablet-portrait sizes still get the mobile contract. */
@media (max-width: 639px) {
  .tx-priority-card__ready {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }
  .tx-priority-card__ready-value {
    text-align: left;
  }
}

/* ------------------------------------------------------------------------- */
/* Status row + badges                                                       */
/* ------------------------------------------------------------------------- */
.tx-priority-card__status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.tx-priority-card__badge,
.tx-priority-card .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  /* E6-D6S.4.4 — status labels are now human-readable
   * ("Created" / "Awaiting goods" / "3 Positionen") rendered from
   * priority.php. Drop the S.4.2 uppercase transform so the badges
   * read as prose, not as raw enum tokens. Keep weight + tracking. */
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid var(--tx-border, #e2e8f0);
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.tx-priority-card__badge.tone-queued,
.tx-priority-card .status-badge.tone-queued {
  background: rgba(56, 189, 248, 0.14);
  color: #075985;
  border-color: rgba(56, 189, 248, 0.4);
}
.tx-priority-card__badge.tone-work,
.tx-priority-card .status-badge.tone-work {
  background: rgba(245, 158, 11, 0.14);
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.4);
}
.tx-priority-card__badge.tone-ready,
.tx-priority-card .status-badge.tone-ready {
  background: rgba(16, 185, 129, 0.14);
  color: #065f46;
  border-color: rgba(16, 185, 129, 0.4);
}
.tx-priority-card__badge.tone-shipped,
.tx-priority-card .status-badge.tone-shipped {
  background: rgba(79, 70, 229, 0.14);
  color: #3730a3;
  border-color: rgba(79, 70, 229, 0.4);
}
.tx-priority-card__badge.tone-error,
.tx-priority-card .status-badge.tone-error {
  background: rgba(225, 29, 72, 0.14);
  color: #9f1239;
  border-color: rgba(225, 29, 72, 0.4);
}
.tx-priority-card__badge.tone-neutral,
.tx-priority-card .status-badge.tone-neutral {
  background: var(--tx-surface-alt, #f1f5f9);
  color: var(--tx-text-strong, #0f172a);
  border-color: var(--tx-border, #e2e8f0);
}

/* ------------------------------------------------------------------------- */
/* Footer                                                                     */
/* ------------------------------------------------------------------------- */
.tx-priority-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  border-top: 1px solid var(--tx-border, #e2e8f0);
  /* E6-D6S.4.4 — density: padding-top was 0.625rem, now 0.5rem. */
  padding-top: 0.5rem;
  margin-top: auto;
}
.tx-priority-card__updated {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--tx-text-muted, #64748b);
  font-family: var(--tx-font-mono, ui-monospace, SFMono-Regular, monospace);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.tx-priority-card__updated-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tx-priority-card__details {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* E6-D6S.4.4 — details button compact padding so the footer row
   * stays a single visual line on desktop. */
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--tx-border, #e2e8f0);
  background: var(--tx-surface-alt, #f1f5f9);
  color: var(--tx-text-strong, #0f172a);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  flex: 0 0 auto;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tx-priority-card__details:hover {
  border-color: var(--tx-accent, #4f46e5);
  color: var(--tx-accent, #4f46e5);
  background: var(--tx-accent-soft, #eef2ff);
}
.tx-priority-card__details:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--tx-surface, #fff), 0 0 0 4px var(--tx-accent, #4f46e5);
}

/* ------------------------------------------------------------------------- */
/* Responsive: mobile card header stacks identity above actions             */
/* Breakpoint raised to 639px so Chrome headless (min viewport 500px)      */
/* and common tablet-portrait sizes still get the mobile contract.         */
/* ------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .tx-priority-card__header,
  .tx-priority-card__head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .tx-priority-card__header-actions,
  .tx-priority-card__head-right {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .tx-priority-card {
    padding: 0.625rem 0.75rem;
    gap: 0.5rem;
  }
  .tx-priority-card__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .tx-priority-card__details {
    justify-content: center;
  }
}

/* Sub-380px viewport: drop summary to 1 column so the longest label
 * ("Abgeschlossen" / "Diese Woche") can never ellipsize, even on the
 * narrowest operator phones. */
@media (max-width: 379px) {
  .tx-priority-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Order detail: operative summary ----------------------------------- */
.tx-summary-primary {
  display: grid;
  gap: 0.4rem 0.85rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .tx-summary-primary { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 960px) {
  .tx-summary-primary { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* --- Production progress: responsive, no horizontal scroll ------------- */
.tx-progress-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}
.tx-progress-grid__step {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--tx-order-border);
  border-radius: 0.55rem;
  background: var(--tx-surface);
}
.tx-progress-grid__step-icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--tx-surface-alt);
  color: var(--tx-order-text-strong);
}
.tx-progress-grid__step--done .tx-progress-grid__step-icon { background: #10b981; color: #fff; }
.tx-progress-grid__step--current .tx-progress-grid__step-icon { background: var(--tx-accent, #4f46e5); color: #fff; }
.tx-progress-grid__step--blocked .tx-progress-grid__step-icon { background: #b91c1c; color: #fff; }
.tx-progress-grid__step-title { font-weight: 600; font-size: 0.85rem; }
.tx-progress-grid__step-sub { font-size: 0.72rem; color: var(--tx-order-text-muted); }
@media (min-width: 640px) {
  .tx-progress-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .tx-progress-grid__step--full { grid-column: span 2; }
}
@media (min-width: 960px) {
  .tx-progress-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0.5rem; }
  .tx-progress-grid__step--full { grid-column: auto; }
  .tx-progress-grid__step { padding: 0.5rem 0.55rem; }
  .tx-progress-grid__step-icon { width: 1.65rem; height: 1.65rem; }
  .tx-progress-grid__step-title { font-size: 0.78rem; }
  .tx-progress-grid__step-sub { font-size: 0.65rem; }
}
/* Timeline fallback for very narrow viewports */
.tx-progress-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* --- Compact media empty-state ----------------------------------------- */
.tx-media-empty-compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  border: 1px dashed var(--tx-order-border);
  border-radius: 0.55rem;
  background: var(--tx-surface-alt);
  font-size: 0.8rem;
  color: var(--tx-order-text-muted);
}

/* --- Product placeholder ----------------------------------------------- */
.tx-product-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tx-surface-alt);
  border: 1px dashed var(--tx-order-border);
  color: var(--tx-order-text-subtle);
}

/* =========================================================================
 * E6-D6V.1 — Produktionsstücke rows
 * E6-D6W.2 — Compact scannable production-row layout. Each
 * `.tx-production-piece` reads as a real production instruction:
 *   L1 identity (SKU + variant size/color + qty) — article truth
 *   L2 methods (Druck / Stick / mixed) — production instruction
 *   L3 ID-Tag — physical unit identity
 *   L4 single primary piece status — one badge, not a state stack
 * E6-D6W.2.1 — Tightened density: SKU is the primary identity (no
 * repeated label + title fallback); size · color combined into a
 * single compact variant line. Mixed production reads as one
 * instruction group (Druck + Stick side-by-side, no "Mixed" collapse).
 * E6-D6W.2.4 — Single status badge replaces the previous stacked
 * Ware / Produktion state rows. The header strip already carries
 * the goods/production readiness aggregates ("0 / 3 eingegangen",
 * "0 / 3 bereit") and the main top badge carries the overall order
 * status. Repeating both a separate Ware block ("Ware bestellt")
 * and a Produktion block on every piece was four labels to say
 * one thing; it is now one. Goods + production state fields stay
 * in the read model and remain exposed via
 * data-tx-d6w2-piece-{goods,prod}-* attributes so future per-piece
 * divergence is rendered correctly when the data supports it.
 * ========================================================================= */
.tx-production-piece-list {
  display: flex;
  flex-direction: column;
  gap: var(--tx-order-spacing-2);
}

.tx-production-piece {
  display: grid;
  /* E6-D6W.2.4 — column redistribution after L4 collapse to one
     badge. identity stays dominant; methods + tag keep breathing
     room; the single status column gets a bit more width than the
     old state column had so the warning/success badge does not
     truncate on narrow tablets. */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.45fr);
  grid-template-areas:
    "identity methods tag state";
  gap: var(--tx-order-spacing-3);
  align-items: center;
  padding: var(--tx-order-spacing-2) var(--tx-order-spacing-3);
  border: 1px solid var(--tx-order-border);
  border-radius: var(--tx-order-radius);
  background: var(--tx-order-card);
  box-shadow: var(--tx-order-shadow);
}

/* E6-D6W.2.2 — mixed-piece accent retired. The canonical Druck /
   Stick badges (tx-status-badge--print / --embroidery) now carry
   the same two colors as the Bestellungen page, so a mixed piece
   is visually obvious from the badges alone. A separate left
   border was redundant visual noise. The class is preserved in
   markup for test selectors; it has no visual effect. */
.tx-production-piece--mixed {
  /* intentionally empty — see comment above */
}

.tx-production-piece__identity {
  grid-area: identity;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.tx-production-piece__identity-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
  min-width: 0;
}

.tx-production-piece__title {
  font-weight: 600;
  color: var(--tx-order-text-strong);
  word-break: break-word;
  font-size: 0.82rem;
}

/* E6-D6W.2.1 — SKU is the primary identity text. Drop the small
   uppercase "SKU" prefix label and render the value itself in strong,
   operator-readable type. Letter-spacing/uppercase were redundant
   decoration; size + weight carries the visual priority. */
.tx-production-piece__sku {
  font-size: 0.95rem;
  color: var(--tx-order-text-strong);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

/* E6-D6W.2.1 — Variant line "XL · Black" collapses the previous
   size/color chip pair into a single readable expression. Subtle,
   non-bold so it does not compete with the SKU above. */
.tx-production-piece__variant {
  font-size: 0.82rem;
  color: var(--tx-order-text);
  font-weight: 500;
  white-space: normal;
}

.tx-production-piece__qty {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.35rem;
  border-radius: 0.3rem;
  background: var(--tx-surface-alt);
  color: var(--tx-order-text);
  font-size: 0.74rem;
  font-weight: 600;
  border: 1px solid var(--tx-order-border);
}

/* Legacy chip class kept for test selectors; the production-piece row
   no longer uses pill chips for size/color (D6W.2.1 merges them into
   the compact variant line above). */
.tx-production-piece__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  background: var(--tx-surface-alt);
  color: var(--tx-order-text);
  font-size: 0.78rem;
  border: 1px solid var(--tx-order-border);
}

.tx-production-piece__methods {
  grid-area: methods;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-width: 0;
  align-items: center;
}

.tx-production-piece__methods-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.tx-production-piece__tag {
  grid-area: tag;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-width: 0;
  align-items: center;
}

/* E6-D6W.2.4 — L4 state cell collapses to a single primary
   status badge. The previous `state-row` (label + badge) and
   `state-label` (uppercase Ware/Produktion key) sub-rules are
   retired — the row no longer stacks two labeled badges. The cell
   itself still anchors the `state` grid area and right-aligns
   the single badge so the row reads as:
     IDENTITY | METHODS | ID TAG | STATUS. */
.tx-production-piece__state {
  grid-area: state;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

/* E6-D6W.2.4 — `state-row` and `state-label` are retired. They are
   preserved as no-op rules so any external selector or stress test
   that still queries them does not see a null reference. */
.tx-production-piece__state-row,
.tx-production-piece__state-label,
.tx-production-piece__readiness-summary {
  display: none;
}

@media (max-width: 980px) {
  .tx-production-piece {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "identity state"
      "methods tag";
    gap: var(--tx-order-spacing-2);
  }
  .tx-production-piece__state {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .tx-production-piece {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "identity"
      "methods"
      "tag"
      "state";
  }
  .tx-production-piece__state {
    justify-content: flex-start;
  }
}

/* Legacy class names preserved for test selectors but no longer used
   in the new layout. They keep their visibility so any leftover
   querySelector in the admin disclosure or stress tests does not
   surface a null reference. */
.tx-production-piece__meta,
.tx-production-piece__badges,
.tx-production-piece__status {
  display: none;
}

/* --- Compact D6V.1 source-line + summary strip ------------------------ */
.tx-order-header__source {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--tx-order-text-subtle);
}

.tx-order-header__badges {
  flex-wrap: wrap;
  align-items: center;
}

/* =========================================================================
 * E6-D6P — Dashboard KPI drill-down link chrome
 * =========================================================================
 *
 * The dashboard KPI cards are rendered inside an <a> tag so the
 * whole card is the tap target. The .tx-kpi-drilldown class only
 * defines the interactive feedback (hover, focus, transition) —
 * the visual structure of the card itself is owned by
 * .tx-kpi-card (defined elsewhere in this stylesheet).
 *
 * Touch-friendly: hover is desktop-only (no hover on touch).
 * Keyboard: clear focus ring, no outline reset.
 *
 * T3.10 — the 5 Group B "Heute / Teile & ID-Tags heute" cards
 * (Produktion gestartet, QC erreicht, Abholbereit geworden,
 * Versendet, Teile bewegt) ALSO use this class for their
 * drill-down links to `textilos_today_id_tags.php`. The class
 * is reused as-is — no new selectors, no new colors, no
 * oversized movement. Cards stay static (no href, no class)
 * when the viewer lacks the `id_tags.view` permission, so the
 * hover/focus behaviour here only applies to operators who can
 * actually open the drilldown.
 */

.tx-kpi-drilldown {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 0.85rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              border-color 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
  outline: none;
}
.tx-kpi-drilldown:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  text-decoration: none;
}
.tx-kpi-drilldown:focus-visible {
  outline: 2px solid var(--tx-accent, #6366f1);
  outline-offset: 2px;
}
.tx-kpi-drilldown:active {
  transform: translateY(0);
}

/* --- Attention drill-down row ------------------------------------------
 *
 * Each row is the entire <a> tag — the whole line is the tap target.
 * The arrow is a visual affordance; do not use it as a separate link.
 */
.tx-attention-drilldown-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--tx-border);
  background: var(--tx-surface-alt);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              transform 0.1s ease;
  cursor: pointer;
  outline: none;
}
.tx-attention-drilldown-row:hover {
  background: var(--tx-surface, #fff);
  border-color: var(--tx-accent, #6366f1);
  transform: translateX(2px);
  text-decoration: none;
}
.tx-attention-drilldown-row:focus-visible {
  outline: 2px solid var(--tx-accent, #6366f1);
  outline-offset: 2px;
}
.tx-attention-drilldown-row--danger:hover { border-color: var(--tx-danger, #dc2626); }
.tx-attention-drilldown-row--warning:hover { border-color: var(--tx-warning, #f59e0b); }
.tx-attention-drilldown-row__arrow {
  color: var(--tx-text-muted, #6b7280);
  font-size: 0.875rem;
  margin-left: auto;
}
.tx-attention-drilldown-row:hover .tx-attention-drilldown-row__arrow {
  color: var(--tx-accent, #6366f1);
}

/* --- Smart Insight drill-down ------------------------------------------
 *
 * Same affordance as the attention row: deterministic insights
 * (those with a `drilldown_key`) become real <a> tags so the whole
 * card is the tap target. Statistical insights without a key
 * remain plain <div> cards.
 */
.tx-insight-drilldown {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              border-color 0.15s ease;
  cursor: pointer;
  outline: none;
}
.tx-insight-drilldown:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  text-decoration: none;
}
.tx-insight-drilldown:focus-visible {
  outline: 2px solid var(--tx-accent, #6366f1);
  outline-offset: 2px;
}
.tx-insight-drilldown__arrow {
  color: var(--tx-text-muted, #6b7280);
  font-size: 0.875rem;
  align-self: center;
}
.tx-insight-drilldown:hover .tx-insight-drilldown__arrow {
  color: var(--tx-accent, #6366f1);
}

/* --- Active filter chip (orders page) ---------------------------------
 *
 * The chip shows the currently active dashboard preset. The "×"
 * link removes the preset but preserves every other user filter
 * (search, source, from, to, per_page, …).
 */
.tx-active-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--tx-border);
  border-radius: 0.65rem;
  background: var(--tx-surface-alt, #f8f8fb);
  font-size: 0.85rem;
}
.tx-active-filter--invalid { border-color: var(--tx-warning, #f59e0b); }
.tx-active-filter__label {
  color: var(--tx-text-muted, #6b7280);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
}
.tx-active-filter__hint {
  color: var(--tx-text-muted, #6b7280);
  font-size: 0.75rem;
}

.tx-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.55rem 0.25rem 0.6rem;
  border: 1px solid var(--tx-border);
  border-radius: 999px;
  background: var(--tx-surface, #fff);
  color: var(--tx-text-strong, #111827);
  font-weight: 500;
  font-size: 0.8rem;
  white-space: nowrap;
}
.tx-filter-chip--info    { border-color: rgba(59, 130, 246, 0.45);  color: #1d4ed8; }
.tx-filter-chip--success { border-color: rgba(16, 185, 129, 0.45); color: #047857; }
.tx-filter-chip--warning { border-color: rgba(245, 158, 11, 0.45); color: #b45309; }
.tx-filter-chip--danger  { border-color: rgba(220, 38, 38, 0.45);  color: #b91c1c; }
.tx-filter-chip--accent  { border-color: rgba(99, 102, 241, 0.45); color: #4338ca; }
.tx-filter-chip--neutral { border-color: var(--tx-border); color: var(--tx-text-muted, #6b7280); }
.tx-filter-chip__label { line-height: 1.2; }
.tx-filter-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1;
  margin-left: 0.15rem;
  transition: background-color 0.15s ease;
}
.tx-filter-chip__remove:hover {
  background: rgba(0, 0, 0, 0.08);
  text-decoration: none;
}
.tx-filter-chip__remove:focus-visible {
  outline: 2px solid var(--tx-accent, #6366f1);
  outline-offset: 1px;
}

/* --- Mobile wrap rules ------------------------------------------------
 *
 * On narrow viewports the chip must wrap cleanly inside the
 * active-filter row without horizontal overflow.
 */
@media (max-width: 480px) {
  .tx-active-filter { font-size: 0.8rem; }
  .tx-filter-chip { font-size: 0.75rem; }
  .tx-kpi-drilldown:active { transform: translateY(0); }
}

/* ============================================================================
 * E6-D6T.3 — Orders list visual polish.
 *
 * Goal: keep the E6-D6T / D6T.1 / D6T.2 contracts (Druck / Stick badges,
 * German production_status, mobile parity, 6-column layout, SMAKE_2021
 * invisible) and make the badges more readable at a glance:
 *
 *   - STATUS cell: German production_status badge gets a small inline-SVG
 *     icon, white-space: nowrap (so "Wartet auf Ware" stays one line on
 *     desktop), and a refined colour palette per status group.
 *
 *   - PRODUCTION-TYPE cell: Druck + Stick badges get a small inline-SVG
 *     icon (fa-print / fa-needle), bumped padding/font/height. Mixed
 *     orders still render Druck before Stick.
 *
 *   - The status column gets a tiny width bump (130 → 150 px) so the
 *     longest live label fits on a single line on desktop.
 *
 *   - Mobile cards use the same helper classes for parity (no duplicate
 *     mapping logic).
 *
 * No new priority overrides. No global resets. No new colour families —
 * every colour maps to an existing --tx-* / --tx-order-* token.
 *
 * The actual class names emitted by `TextilOSProductionStatus::toneClass()`
 * are unchanged: `border-sky-400/40 bg-sky-500/10 text-sky-200` etc.
 * This block only adds the icon slot and the typography/dimension polish.
 * ============================================================================ */

/* --- Status badge typography + dimensions ------------------------------- */
.tx-order-row__status-badge,
.tx-mobile-order-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: auto;
  min-height: 1.65rem;
  padding: 0.3rem 0.7rem;
  border-radius: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.005em;
  white-space: nowrap;
  max-width: 100%;
}
.tx-order-row__status-badge .tx-status-icon,
.tx-mobile-order-card__status .tx-status-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  margin-left: -0.05rem;
}
.tx-order-row__status-badge .tx-status-icon svg,
.tx-mobile-order-card__status .tx-status-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* E6-D6T.3 — desktop status column width. Was 130px (which made
 * "Wartet auf Ware" wrap). Bumped to 150px so the longest live label
 * fits on a single line at 1440px without overflowing the table. */
.tx-order-table__col--status { width: 150px; }

/* --- Status tone adjustments (Wartet auf Ware = amber) ----------------- */
/*
 * The Tailwind chains emitted by TextilOSProductionStatus::toneClass() are
 * the canonical source. This block reuses them and adds:
 *   - a slightly warmer border for the amber tone (Wartet auf Ware),
 *   - a slightly more visible border for the rose tone (Storniert),
 *   so they don't read as "another generic grey chip".
 */
.tx-order-row__status-badge.border-amber-400\/40,
.tx-mobile-order-card__status.border-amber-400\/40 {
  /* Wartet auf Ware — slightly stronger border so the amber reads warmer. */
  border-color: rgba(251, 191, 36, 0.55);
}
.tx-order-row__status-badge.border-rose-400\/40,
.tx-mobile-order-card__status.border-rose-400\/40 {
  /* Storniert — slight emphasis on the rose ring without going neon. */
  border-color: rgba(251, 113, 133, 0.55);
}

/* --- Production-type badge — Druck + Stick (visual upgrade) ---------- */
/*
 * E6-D6T.3 — Druck and Stick badges get:
 *   - a small inline-SVG icon (always rendered, no more text-only Stick),
 *   - bumped padding (5–8 px horizontal),
 *   - bumped font-size to 0.72rem and font-weight 600,
 *   - height around 26 px so the row doesn't explode,
 *   - icon-text gap of 4–5 px.
 *
 * Existing class names (.tx-production-type-badge,
 * .tx-production-type-badge--print, .tx-production-type-badge--embroidery)
 * are preserved — only the dimensions / typography / icon slot are
 * upgraded. Existing regression tests that assert those class names
 * stay green.
 */
.tx-production-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.55rem;
  padding: 0.25rem 0.55rem;
  border-radius: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.tx-production-type-badge .tx-production-type-badge__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.85rem;
  height: 0.85rem;
}
.tx-production-type-badge .tx-production-type-badge__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Mobile badge parity ---------------------------------------------- */
/*
 * The mobile card already renders the badge inside
 * `.tx-mobile-order-card__row` which has `flex-wrap: wrap`. We just need
 * to make sure the production-type-badges wrapper also wraps cleanly
 * without horizontal overflow on the narrowest viewports.
 */
@media (max-width: 389px) {
  .tx-production-type-badges {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* --- Row height safety net -------------------------------------------- */
/*
 * Bump row vertical padding ever so slightly (0.6 → 0.65) so the new
 * badge height (~26 px) doesn't crowd the row baseline. The diff is
 * ~2 px per row — within the "minimal row height explosion" budget.
 */
.tx-order-table tbody td {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

/* E6-D6T.3 — FA <i> -> inline-SVG visual swap. Existing markup keeps
 * `<i class="fa-solid fa-...">` tags so the JS handler at the bottom
 * of textilos_orders.php (which queries `btn.querySelector('i')`) still
 * works unchanged. CSS paints the glyph via mask-image so the literal
 * `fa-*` token is hidden and the proper inline-SVG shape is shown.
 *
 * The mask source is a tiny data: URL containing the same path geometry
 * shipped by `textilos_icon('fa-thumbtack')` / etc. in the inline-SVG
 * registry. Decorative-only; the <i> tag stays aria-hidden. */
.fa-solid.fa-thumbtack {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4l6 6-3 1-2 7-7-7-2-2 7-2 1-3z'/><path d='M9 17l-4 4'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4l6 6-3 1-2 7-7-7-2-2 7-2 1-3z'/><path d='M9 17l-4 4'/></svg>") no-repeat center / contain;
  font-size: 0;
  color: inherit;
}
.fa-solid.fa-thumbtack::before { content: ''; }


/* ============================================================================
 * E6-D6T.4 — Orders table layout polish.
 *
 * No data, no DB, no JS, no schema, no business writes. The 6-column contract
 * is preserved. The presenter (TextilOSProductionStatus::toneClass) is FROZEN
 * — colour hardening is purely CSS, keyed off the data-tx-production-status
 * attribute already emitted on the badge element in textilos_orders.php.
 *
 * Targets at 1440 px viewport (approx, available width ~1380 px inside the
 * card):
 *   Order    10-11 %  (140 px ish, narrow first column)
 *   Customer 25-27 %  (~360 px, cap inner span at 14rem)
 *   Status   13-14 %  (150 px — D6T.3 width preserved)
 *   Umfang   16-18 %  (180 px — widened from 140 so Druck+Stick render inline-first)
 *   Gesamt   17-18 %  (140 px — tightened from 150 px)
 *   Aktion   12-14 %  (120 px — tightened from 130 px)
 *
 * Vertical alignment: every .tx-order-table tbody td { vertical-align: middle }
 * so the row optically centres. The status badge, scope block, and action menu
 * then share the same baseline.
 *
 * Status colour hardening: per-tone CSS overrides on the badge element, keyed
 * off the data-tx-production-status attribute already emitted by the template.
 *
 * No !important. No global button/span/td selectors (tbody td{} inside
 * .tx-order-table is allowed because it is scoped).
 * ============================================================================ */

/* --- Column widths at 1440 px (D6T.4) ------------------------------- */
.tx-order-table__col--order    { width: 140px; max-width: 12%; }
.tx-order-table__col--customer { width: auto; min-width: 260px; }
.tx-order-table__col--scope    { width: 180px; }
.tx-order-table__col--total    { width: 140px; }
.tx-order-table__col--action   { width: 120px; }
@media (max-width: 1279px) {
  .tx-order-table__col--scope  { width: 160px; }
  .tx-order-table__col--action { width: 110px; }
}

/* --- Customer inner span cap (was 18 rem; now 14 rem) -------------- */
.tx-order-row__customer { max-width: 14rem; }
.tx-order-row__contact  { max-width: 14rem; }

/* --- Vertical alignment: row optically centred --------------------- */
.tx-order-table tbody td { vertical-align: middle; }

/* --- Production badge wrapper presence (D6T.3 dimensions preserved) -
   Wider gap (0.4rem) + slightly more breathing room above (0.45rem)
   so the mixed Druck + Stick badges sit on a clean two-row block. */
.tx-production-type-badges { gap: 0.4rem; margin-top: 0.45rem; }

/* --- Status colour hardening (per-tone CSS overrides) --------------
   The Tailwind chains in TextilOSProductionStatus::toneClass() are
   FROZEN. These attribute selectors override the background, border
   and text colour on a per-status basis so every label reads clearly.
   All values are picked to be visible on the dark slate card surface.
   Rule of thumb: keep status colour surface stronger than the
   production badge surface (Druck indigo, Stick emerald). */
.tx-order-row__status-badge[data-tx-production-status="awaiting_goods"],
.tx-mobile-order-card__status[data-tx-production-status="awaiting_goods"] {
  background-color: rgba(251, 146, 60, 0.18);
  border-color: rgba(217, 119, 6, 0.55);
  color: #b45309;
}
.tx-order-row__status-badge[data-tx-production-status="prepared"],
.tx-mobile-order-card__status[data-tx-production-status="prepared"] {
  background-color: rgba(14, 165, 233, 0.18);
  border-color: rgba(2, 132, 199, 0.55);
  color: #0c4a6e;
}
/* E6-D6Z.1.3 — "Teilweise vorbereitet" is the cyan sibling of
   Vorbereitet (sky above). Same hue family, lighter and more
   turquoise, so the partial preparation phase reads as its own
   workflow step and is unmistakably distinct from QC (amber). */
.tx-order-row__status-badge[data-tx-production-status="partially_prepared"],
.tx-mobile-order-card__status[data-tx-production-status="partially_prepared"] {
  background-color: rgba(34, 211, 238, 0.18);
  border-color: rgba(6, 182, 212, 0.55);
  color: #155e75;
}
.tx-order-row__status-badge[data-tx-production-status="in_production"],
.tx-mobile-order-card__status[data-tx-production-status="in_production"] {
  background-color: rgba(99, 102, 241, 0.18);
  border-color: rgba(67, 56, 202, 0.55);
  color: #3730a3;
}
.tx-order-row__status-badge[data-tx-production-status="partially_in_production"],
.tx-mobile-order-card__status[data-tx-production-status="partially_in_production"] {
  background-color: rgba(124, 58, 237, 0.16);
  border-color: rgba(109, 40, 217, 0.55);
  color: #5b21b6;
}
.tx-order-row__status-badge[data-tx-production-status="ready"],
.tx-order-row__status-badge[data-tx-production-status="ready_for_pickup"],
.tx-order-row__status-badge[data-tx-production-status="packed"],
.tx-mobile-order-card__status[data-tx-production-status="ready"],
.tx-mobile-order-card__status[data-tx-production-status="ready_for_pickup"],
.tx-mobile-order-card__status[data-tx-production-status="packed"] {
  background-color: rgba(16, 185, 129, 0.20);
  border-color: rgba(5, 150, 105, 0.55);
  color: #065f46;
}
.tx-order-row__status-badge[data-tx-production-status="completed"],
.tx-order-row__status-badge[data-tx-production-status="finished"],
.tx-mobile-order-card__status[data-tx-production-status="completed"],
.tx-mobile-order-card__status[data-tx-production-status="finished"] {
  background-color: rgba(5, 150, 105, 0.25);
  border-color: rgba(4, 120, 87, 0.65);
  color: #064e3b;
}
.tx-order-row__status-badge[data-tx-production-status="cancelled"],
.tx-order-row__status-badge[data-tx-production-status="canceled"],
.tx-mobile-order-card__status[data-tx-production-status="cancelled"],
.tx-mobile-order-card__status[data-tx-production-status="canceled"] {
  background-color: rgba(244, 63, 94, 0.20);
  border-color: rgba(225, 29, 72, 0.65);
  color: #9f1239;
}

/* --- Mobile parity (D6T.4) ------------------------------------------ */
@media (max-width: 1023px) {
  .tx-order-table-wrap { overflow-x: auto; }
}

/* --- E6-D6X.2 admin bulk order deletion --------------------------- */
/* E6-D6X.2.1 — compact column + table-aligned bar + danger styling.   */

/* Compact selection column (44–48px). Header + rows share width.      */
.tx-order-table__col--bulk,
.tx-order-table__cell--bulk {
  width: 2.875rem;          /* 46px */
  min-width: 2.875rem;
  max-width: 2.875rem;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  vertical-align: middle;
}
.tx-order-table__col--bulk input[type="checkbox"],
.tx-order-table__cell--bulk input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--tx-accent, #4f46e5);
}

/* Subtle selected-row state (E6-D6X.2.1) — tokens only, no loud color. */
.tx-order-row.tx-bulk-row-selected > td {
  background: var(--tx-order-accent-soft, rgba(79, 70, 229, 0.08));
}
.tx-order-row.tx-bulk-row-selected:hover > td {
  background: var(--tx-order-accent-soft, rgba(79, 70, 229, 0.12));
}
.tx-mobile-order-card.tx-bulk-row-selected {
  border-color: var(--tx-accent, #4f46e5);
  box-shadow: 0 0 0 1px var(--tx-accent, #4f46e5);
}

/* Mobile checkbox — slim, single tap target. */
.tx-mobile-order-card__bulk-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  border-radius: 0.4rem;
  border: 1px solid var(--tx-border, #e5e7eb);
  background: var(--tx-surface-alt, #f8fafc);
  cursor: pointer;
  margin-right: auto;
}
.tx-mobile-order-card__bulk-check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--tx-accent, #4f46e5);
}

/* Bulk action bar — lives INSIDE the Orders content column, directly   *
 * above pagination, not as a viewport-fixed footer. The container is   *
 * .tx-orders-bulk-anchor (see textilos_orders.php).                    */
.tx-orders-bulk-anchor {
  margin-top: 0.75rem;
}
.tx-bulk-action-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--tx-surface, #ffffff);
  border: 1px solid var(--tx-border, #e5e7eb);
  border-left: 3px solid var(--tx-danger, #e11d48);
  border-radius: var(--tx-radius-md, 0.5rem);
  box-shadow: var(--tx-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
  padding: 0.55rem 0.85rem;
  flex-wrap: wrap;
  width: 100%;
}
.tx-bulk-action-bar[hidden] { display: none !important; }

/* Left: count + scope context. */
.tx-bulk-action-bar__count {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--tx-text-strong, #0f172a);
}
.tx-bulk-action-bar__count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.45rem;
  border-radius: 9999px;
  background: var(--tx-danger, #e11d48);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tx-bulk-action-bar__count-scope {
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--tx-text-muted, #64748b);
}
.tx-bulk-action-bar__clear {
  border: none;
  background: transparent;
  color: var(--tx-text-muted, #64748b);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.tx-bulk-action-bar__clear:hover { color: var(--tx-text-strong, #0f172a); }
.tx-bulk-action-bar__clear:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--tx-surface, #fff), 0 0 0 4px var(--tx-accent, #4f46e5);
  border-radius: 0.25rem;
}

/* Right: actions. */
.tx-bulk-action-bar__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.tx-bulk-action-bar__btn {
  border: 1px solid transparent;
  border-radius: var(--tx-radius-md, 0.5rem);
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.tx-bulk-action-bar__btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Primary action button — uses danger family since this is the path  *
 * to a destructive delete. E6-D6X.2.1 explicit.                       */
.tx-bulk-action-bar__btn--danger {
  background: var(--tx-danger, #e11d48);
  color: #fff;
  border-color: var(--tx-danger, #e11d48);
}
.tx-bulk-action-bar__btn--danger:hover:not([disabled]) {
  filter: brightness(0.94);
}
.tx-bulk-action-bar__btn--danger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--tx-surface, #fff),
              0 0 0 4px var(--tx-danger-ring, rgba(225, 29, 72, 0.45));
}

/* Preview panel (unchanged surface; tighter spacing). */
.tx-bulk-preview {
  margin-top: 0.5rem;
}
.tx-bulk-preview[hidden] { display: none !important; }
.tx-bulk-preview__body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.tx-bulk-preview__heading {
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0;
  color: var(--tx-text-strong, #0f172a);
}
.tx-bulk-preview__totals {
  background: var(--tx-surface-alt, #f8fafc);
  border: 1px solid var(--tx-border, #e5e7eb);
  border-radius: var(--tx-radius-md, 0.5rem);
  padding: 0.6rem 0.8rem;
}
.tx-bulk-preview__totals[hidden] { display: none !important; }
.tx-bulk-preview__dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.4rem 1rem;
  margin: 0.4rem 0 0 0;
}
.tx-bulk-preview__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  padding: 0.2rem 0;
  border-bottom: 1px dashed var(--tx-border, #e5e7eb);
}
.tx-bulk-preview__row dt {
  color: var(--tx-text-muted, #64748b);
}
.tx-bulk-preview__row dd {
  margin: 0;
  font-weight: 700;
  color: var(--tx-text-strong, #0f172a);
  font-variant-numeric: tabular-nums;
}
.tx-bulk-preview__orders {
  background: var(--tx-surface, #ffffff);
  border: 1px solid var(--tx-border, #e5e7eb);
  border-radius: var(--tx-radius-md, 0.5rem);
  padding: 0.6rem 0.8rem;
  max-height: 12rem;
  overflow-y: auto;
}
.tx-bulk-preview__orders[hidden] { display: none !important; }
.tx-bulk-preview__list {
  margin: 0.4rem 0 0 0;
  padding: 0;
  list-style: none;
}
.tx-bulk-preview__item {
  font-size: 0.78rem;
  padding: 0.2rem 0;
  border-bottom: 1px dashed var(--tx-border, #e5e7eb);
}
.tx-bulk-preview__item:last-child { border-bottom: none; }
.tx-bulk-preview__item--missing { color: var(--tx-text-muted, #64748b); }
.tx-bulk-preview__confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.4rem;
}
.tx-bulk-preview__confirm[hidden] { display: none !important; }
.tx-bulk-preview__label {
  flex: 1 1 100%;
  font-size: 0.82rem;
  color: var(--tx-text-strong, #0f172a);
}
.tx-bulk-preview__label code {
  background: var(--tx-danger-soft, rgba(225, 29, 72, 0.10));
  border: 1px solid var(--tx-danger-soft, rgba(225, 29, 72, 0.25));
  color: var(--tx-danger, #e11d48);
  padding: 0.1rem 0.35rem;
  border-radius: 0.35rem;
  font-family: var(--tx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.78rem;
  font-weight: 700;
}
.tx-bulk-preview__input {
  flex: 1 1 14rem;
  border: 1px solid var(--tx-border, #e5e7eb);
  border-radius: var(--tx-radius-md, 0.5rem);
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  background: var(--tx-surface, #ffffff);
  color: var(--tx-text-strong, #0f172a);
}
.tx-bulk-preview__input:focus-visible {
  outline: none;
  border-color: var(--tx-danger, #e11d48);
  box-shadow: 0 0 0 2px var(--tx-surface, #fff), 0 0 0 4px var(--tx-danger, #e11d48);
}

/* Trash icon (textile-OS inline glyph). No new library. */
.tx-bulk-action-bar__btn-icon {
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
  display: inline-block;
}

/* Mobile: stacked buttons, no overflow, no sidebar-overlap. */
@media (max-width: 640px) {
  .tx-orders-bulk-anchor { margin-top: 0.5rem; }
  .tx-bulk-action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.6rem 0.7rem;
  }
  .tx-bulk-action-bar__count {
    justify-content: space-between;
  }
  .tx-bulk-action-bar__actions {
    margin-left: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .tx-bulk-action-bar__btn { width: 100%; justify-content: center; }
  .tx-bulk-action-bar__count-scope { display: none; }
}

/* E6-D6D.1 — Dashboard Command Center (scoped .tx-dashboard-* family) */
.tx-dashboard-flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tx-dashboard-flow__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--tx-border, #e5e7eb);
  border-radius: var(--tx-radius-md, 0.6rem);
  background: var(--tx-surface-alt, #f8fafc);
  min-height: 3.6rem;
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.tx-dashboard-flow__stage:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -10px rgba(15, 23, 42, 0.22);
  border-color: var(--tx-border-strong, rgba(15, 23, 42, 0.18));
}
.tx-dashboard-flow__stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tx-tone, var(--tx-border, #e5e7eb));
  opacity: 0.85;
}
.tx-dashboard-flow__stage--orange   { --tx-tone: #f59e0b; }
.tx-dashboard-flow__stage--cyan     { --tx-tone: #06b6d4; }
.tx-dashboard-flow__stage--blue     { --tx-tone: #3b82f6; }
.tx-dashboard-flow__stage--violet   { --tx-tone: #8b5cf6; }
.tx-dashboard-flow__stage--amber    { --tx-tone: #facc15; }
.tx-dashboard-flow__stage--green    { --tx-tone: #22c55e; }
.tx-dashboard-flow__stage--emerald  { --tx-tone: #10b981; }
.tx-dashboard-flow__stage--red      { --tx-tone: #ef4444; }
.tx-dashboard-flow__stage--gray     { --tx-tone: #94a3b8; }
.tx-dashboard-flow__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tx-text-muted, #64748b);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.tx-dashboard-flow__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tx-text-strong, #0f172a);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.tx-dashboard-flow__detail {
  font-size: 0.74rem;
  color: var(--tx-text-muted, #64748b);
}
.tx-dashboard-flow__stage--empty .tx-dashboard-flow__value {
  color: var(--tx-text-muted, #94a3b8);
  font-weight: 500;
}
.tx-dashboard-flow__stage a:focus-visible {
  outline: 2px solid var(--tx-tone, currentColor);
  outline-offset: 2px;
  border-radius: 0.4rem;
}
@media (max-width: 1100px) {
  .tx-dashboard-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tx-dashboard-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tx-dashboard-distribution {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tx-dashboard-distribution__row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.tx-dashboard-distribution__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--tx-text-strong, #0f172a);
  font-weight: 500;
}
.tx-dashboard-distribution__count {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--tx-text-muted, #64748b);
  font-weight: 600;
}
.tx-dashboard-distribution__track {
  position: relative;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--tx-surface-alt, rgba(15, 23, 42, 0.05));
  overflow: hidden;
  border: 1px solid var(--tx-border, rgba(15, 23, 42, 0.08));
}
.tx-dashboard-distribution__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 240ms ease;
  background: var(--tx-bar-tone, var(--tx-border, #cbd5e1));
}
.tx-dashboard-distribution__bar--orange  { --tx-bar-tone: linear-gradient(90deg, #f59e0b, #fb923c); }
.tx-dashboard-distribution__bar--cyan    { --tx-bar-tone: linear-gradient(90deg, #06b6d4, #22d3ee); }
.tx-dashboard-distribution__bar--blue    { --tx-bar-tone: linear-gradient(90deg, #3b82f6, #60a5fa); }
.tx-dashboard-distribution__bar--violet  { --tx-bar-tone: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.tx-dashboard-distribution__bar--amber   { --tx-bar-tone: linear-gradient(90deg, #facc15, #fbbf24); }
.tx-dashboard-distribution__bar--green   { --tx-bar-tone: linear-gradient(90deg, #22c55e, #4ade80); }
.tx-dashboard-distribution__bar--emerald { --tx-bar-tone: linear-gradient(90deg, #10b981, #34d399); }
.tx-dashboard-distribution__bar--red     { --tx-bar-tone: linear-gradient(90deg, #ef4444, #f87171); }
.tx-dashboard-distribution__bar--gray    { --tx-bar-tone: linear-gradient(90deg, #94a3b8, #cbd5e1); }

/* Compact stage card (the deployed markup uses .tx-dashboard-stage) */
.tx-dashboard-stage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--tx-border, #e5e7eb);
  border-radius: var(--tx-radius-md, 0.6rem);
  background: var(--tx-surface-alt, #f8fafc);
  min-width: 0;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.tx-dashboard-stage:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -10px rgba(15, 23, 42, 0.22);
  border-color: var(--tx-border-strong, rgba(15, 23, 42, 0.18));
}
.tx-dashboard-stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tx-tone, var(--tx-border, #e5e7eb));
  opacity: 0.85;
}
.tx-dashboard-stage--orange   { --tx-tone: #f59e0b; }
.tx-dashboard-stage--cyan     { --tx-tone: #06b6d4; }
.tx-dashboard-stage--blue     { --tx-tone: #3b82f6; }
.tx-dashboard-stage--violet   { --tx-tone: #8b5cf6; }
.tx-dashboard-stage--amber    { --tx-tone: #facc15; }
.tx-dashboard-stage--green    { --tx-tone: #22c55e; }
.tx-dashboard-stage--emerald  { --tx-tone: #10b981; }
.tx-dashboard-stage--red      { --tx-tone: #ef4444; }
.tx-dashboard-stage--gray     { --tx-tone: #94a3b8; }
.tx-dashboard-stage__top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.tx-dashboard-stage__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.6rem;
  background: var(--tx-tone, currentColor);
  color: #fff;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.tx-dashboard-stage__count {
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tx-text-strong, #0f172a);
  line-height: 1;
}
.tx-dashboard-stage__label {
  display: -webkit-box;
  width: 100%;
  margin-top: 0;
  font-size: 0.85rem;
  color: var(--tx-text-muted, #64748b);
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  /* T3.6: label gets full card width below the icon+count row.
     Natural word-break; allow overflow-wrap as a last resort only.
     Controlled 2-line clamp as safety net for very narrow widths. */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================================
 * E6-D6D.7 — Workflow Fokus operator cockpit polish (T3.7)
 * =========================================================================
 *
 * Workflow Fokus is the "where do I look next?" decision surface.
 * The 6 cards answer one question in plain German:
 *
 *   Priorität            priorisierte Aufträge
 *   Gepinnt              gepinnte Aufträge
 *   Überfällig           Liefertermin überschritten
 *   Blockiert            explizit blockierte Aufträge
 *   Ohne Fortschritt …   aktive Aufträge ohne Bewegung seit 24h
 *   Unbekannte ID-Tags   nicht zugeordnete ID-Tags der letzten 24h
 *
 * Routine cards (Priorität / Gepinnt / Überfällig) read calmer;
 * attention cards (Blockiert / Stalled / Unmapped) feel more
 * operationally significant when their count is non-zero.
 *
 * The shared .tx-kpi-drilldown class continues to own hover lift,
 * focus ring and click affordance — only the visual chrome of the
 * card itself is owned by .tx-dashboard-focus-card. The shared
 * textilos_app_shell_kpi_card helper (used by Heute) is NOT
 * modified by these rules.
 */
.tx-dashboard-focus__subtitle {
  margin-top: -0.4rem;
  margin-bottom: 0;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--tx-text-muted, #64748b);
  /* T3.7: visually secondary, never another heading. */
  word-break: normal;
  overflow-wrap: break-word;
}
.tx-dashboard-focus__grid {
  /* Inherits the surrounding grid + gap. No layout changes vs T3.6. */
  margin-top: 0.25rem;
}
.tx-dashboard-focus-card {
  display: flex;
  flex-direction: column;
  /* T3.7 card chrome: equal padding across all 6 cards, equal min
     height so the long bottom-row sublines do not break the row. */
  padding: 1rem 1.0625rem;
  min-height: 112px;
  border: 1px solid var(--tx-border, #e5e7eb);
  border-radius: var(--tx-radius-md, 0.65rem);
  background: var(--tx-surface, #ffffff);
  box-shadow: var(--tx-shadow-card, 0 1px 2px rgba(15, 23, 42, 0.04));
  text-decoration: none;
  color: inherit;
  position: relative;
  /* T3.7 hierarchy inside the card:
       label/icon head   (small)
       big number        (1.875rem, weight 700)
       operator subline  (small muted)
     Gap rhythm is tight to keep cards compact. */
  gap: 0.45rem;
}
.tx-dashboard-focus-card:hover {
  border-color: var(--tx-border-strong, rgba(15, 23, 42, 0.18));
  box-shadow: 0 6px 16px -10px rgba(15, 23, 42, 0.22);
}
.tx-dashboard-focus-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}
.tx-dashboard-focus-card__label {
  /* T3.7: NOT uppercase tracking-wider. Operators read this title
     as a sentence-word, not a technical label. */
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tx-text-strong, #0f172a);
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
}
.tx-dashboard-focus-card__icon {
  /* T3.7 icon container: 36×36, soft tone-aware surface, white
     glyph. Container stays slightly lighter than Produktionsflow
     (40×40) so Workflow Fokus does not visually compete with the
     pipeline strip. Glyph is 16px (textilos_icon sm). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.85);
}
.tx-dashboard-focus-card__value {
  /* T3.7 number is the strongest element on the card.
     1.875rem / weight 700 / tabular-nums / line-height 1. */
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--tx-text-strong, #0f172a);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  word-break: normal;
}
.tx-dashboard-focus-card__subline {
  /* T3.7 subline: operator-readable German, same readable contrast
     principle already applied successfully to Heute. Long copies
     wrap on natural word boundaries (no break-all, no nowrap, no
     ellipsis). */
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tx-text-muted, #64748b);
  word-break: normal;
  overflow-wrap: normal;
  hyphens: auto;
  white-space: normal;
}

/* T3.7 tone variants — softer surface + colored icon container.
   "neutral"  = calm routine (Priorität, Gepinnt, Blockiert zero)
   "info"     = calm routine (Gepinnt non-zero)
   "success"  = calm routine (Überfällig zero)
   "warning"  = operational risk (Priorität/Blockiert/Stalled/Unmapped non-zero)
   "danger"   = overdue (non-zero) */
.tx-dashboard-focus-card--neutral {
  background: var(--tx-surface, #ffffff);
  color: var(--tx-text-subtle, #94a3b8);
}
.tx-dashboard-focus-card--neutral .tx-dashboard-focus-card__icon {
  color: var(--tx-text-subtle, #94a3b8);
  background: var(--tx-surface-alt, #f1f5f9);
  border-color: var(--tx-border, #e5e7eb);
}
.tx-dashboard-focus-card--info {
  background: var(--tx-info-soft, #e0f2fe);
  color: var(--tx-info-text, #0369a1);
}
.tx-dashboard-focus-card--info .tx-dashboard-focus-card__icon {
  color: var(--tx-info-text, #0369a1);
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(3, 105, 161, 0.28);
}
.tx-dashboard-focus-card--success {
  background: var(--tx-success-soft, #d1fae5);
  color: var(--tx-success-text, #047857);
}
.tx-dashboard-focus-card--success .tx-dashboard-focus-card__icon {
  color: var(--tx-success-text, #047857);
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(4, 120, 87, 0.28);
}
.tx-dashboard-focus-card--warning {
  background: var(--tx-warning-soft, #fef3c7);
  color: var(--tx-warning-text, #b45309);
}
.tx-dashboard-focus-card--warning .tx-dashboard-focus-card__icon {
  color: var(--tx-warning-text, #b45309);
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(180, 83, 9, 0.30);
}
.tx-dashboard-focus-card--danger {
  background: var(--tx-danger-soft, #ffe4e6);
  color: var(--tx-danger-text, #be123c);
}
.tx-dashboard-focus-card--danger .tx-dashboard-focus-card__icon {
  color: var(--tx-danger-text, #be123c);
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(190, 18, 60, 0.30);
}

/* T3.9 — operator-readable method breakdown under the
   "Produktion gestartet" KPI. Visually subordinate to the
   existing subline. Wraps naturally on narrow screens. Only
   rendered for the Produktion gestartet card. */
.tx-kpi-method-breakdown {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tx-text-muted, #64748b);
  word-break: normal;
  overflow-wrap: normal;
  hyphens: auto;
  white-space: normal;
}
.tx-kpi-method-bucket {
  display: inline;
  white-space: nowrap;
}
.tx-kpi-method-sep {
  color: var(--tx-text-subtle, #94a3b8);
  margin: 0 0.15rem;
  user-select: none;
}

.tx-dashboard-diagnostics__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--tx-border, rgba(15, 23, 42, 0.12));
  background: var(--tx-surface-alt, rgba(15, 23, 42, 0.04));
  color: var(--tx-text-strong, #0f172a);
}
.tx-dashboard-diagnostics__pill--success { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.35); color: #047857; }
.tx-dashboard-diagnostics__pill--warning { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.35); color: #b45309; }
.tx-dashboard-diagnostics__pill--danger  { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.35); color: #b91c1c; }
.tx-dashboard-diagnostics__disclosure {
  border-top: 1px dashed var(--tx-border, rgba(15, 23, 42, 0.12));
  padding-top: 0.75rem;
  margin-top: 0.4rem;
}
.tx-dashboard-diagnostics__summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tx-text-strong, #0f172a);
  list-style: none;
  padding: 0.4rem 0;
}
.tx-dashboard-diagnostics__summary::-webkit-details-marker { display: none; }
.tx-dashboard-diagnostics__summary::before {
  content: "\25B8";
  display: inline-block;
  transition: transform 120ms ease;
  color: var(--tx-text-muted, #64748b);
  font-size: 0.75rem;
}
.tx-dashboard-diagnostics__disclosure[open] .tx-dashboard-diagnostics__summary::before {
  transform: rotate(90deg);
}
.tx-dashboard-diagnostics__summary-meta {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--tx-text-muted, #64748b);
}
.tx-dashboard-diagnostics__content {
  border-radius: var(--tx-radius-md, 0.6rem);
}

/* =====================================================================
 * E6-D7A.1.1 — Customer module scoped visual language.
 *
 * These classes live exclusively under the `.tx-customers` root
 * container emitted by every customer module page (list, new, edit,
 * detail). All selectors below are prefixed with `.tx-customers` so
 * they never leak into the Orders / Dashboard / Admin chrome.
 *
 * Shared TextilOS tokens (--tx-accent, --tx-success-soft, …) come
 * from the inline `:root` block in TextilOS/app_shell.php. Tone
 * modifiers below add four small surface colors for the KPI strip
 * (Gesamt / Aktiv / Firma / Privatkunden) without touching the
 * global palette.
 * ===================================================================*/

.tx-customers {
  --tx-customer-accent: #4f46e5;
  --tx-customer-accent-soft: #eef2ff;
  --tx-customer-accent-ring: #c7d2fe;
  --tx-customer-success: #047857;
  --tx-customer-success-soft: #d1fae5;
  --tx-customer-success-ring: #a7f3d0;
  --tx-customer-info: #0369a1;
  --tx-customer-info-soft: #e0f2fe;
  --tx-customer-info-ring: #bae6fd;
  --tx-customer-violet: #6d28d9;
  --tx-customer-violet-soft: #ede9fe;
  --tx-customer-violet-ring: #ddd6fe;
  /* E6-D7A.1.2.2 — danger tone for the encrypted-recovery "Fehler" KPI. */
  --tx-customer-danger: #b91c1c;
  --tx-customer-danger-soft: #fee2e2;
  --tx-customer-danger-ring: #fecaca;
  --tx-customer-muted: #475569;
  --tx-customer-muted-soft: #f1f5f9;
  --tx-customer-muted-ring: #cbd5e1;
  --tx-customer-card: #ffffff;
  --tx-customer-border: #e2e8f0;
  --tx-customer-border-strong: #cbd5e1;
  --tx-customer-text: #1e293b;
  --tx-customer-text-strong: #0f172a;
  --tx-customer-text-muted: #64748b;
  --tx-customer-text-subtle: #94a3b8;
  --tx-customer-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --tx-customer-shadow-lg: 0 4px 14px -2px rgba(15, 23, 42, 0.08);
  --tx-customer-radius-sm: 0.45rem;
  --tx-customer-radius-md: 0.6rem;
  --tx-customer-radius-lg: 0.85rem;
}

/* ---------- Page header (title / subtitle / CTA) ----------------- */
.tx-customers .tx-customer-header {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.25rem 0 1.1rem;
}
@media (min-width: 768px) {
  .tx-customers .tx-customer-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.tx-customers .tx-customer-header__breadcrumb {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-customer-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.tx-customers .tx-customer-header__breadcrumb a {
  color: var(--tx-customer-text-muted);
  transition: color 120ms ease;
}
.tx-customers .tx-customer-header__breadcrumb a:hover { color: var(--tx-customer-accent); }
.tx-customers .tx-customer-header__breadcrumb-sep {
  color: var(--tx-customer-text-subtle);
}
.tx-customers .tx-customer-header__breadcrumb-current {
  color: var(--tx-customer-text-strong);
  font-weight: 600;
}
.tx-customers .tx-customer-header__title {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tx-customer-text-strong);
  margin: 0.2rem 0 0;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .tx-customers .tx-customer-header__title { font-size: 2rem; }
}
.tx-customers .tx-customer-header__subtitle {
  margin: 0.4rem 0 0;
  font-size: 0.92rem;
  color: var(--tx-customer-text-muted);
  max-width: 60ch;
  line-height: 1.45;
}
.tx-customers .tx-customer-header__pills {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.tx-customers .tx-customer-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* ---------- Toolbar (search / filter / buttons) ------------------- */
.tx-customers .tx-customer-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.95rem 1.1rem;
  background: var(--tx-customer-card);
  border: 1px solid var(--tx-customer-border);
  border-radius: var(--tx-customer-radius-lg);
  box-shadow: var(--tx-customer-shadow);
}
.tx-customers .tx-customer-toolbar__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  align-items: end;
}
@media (min-width: 768px) {
  .tx-customers .tx-customer-toolbar__row {
    grid-template-columns: minmax(220px, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.85rem;
  }
}
.tx-customers .tx-customer-toolbar__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.tx-customers .tx-customer-toolbar__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tx-customer-text-muted);
}
.tx-customers .tx-customer-toolbar__input,
.tx-customers .tx-customer-toolbar__select {
  width: 100%;
  min-height: 2.4rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--tx-customer-border-strong);
  border-radius: var(--tx-customer-radius-md);
  background: var(--tx-customer-card);
  color: var(--tx-customer-text-strong);
  font-size: 0.88rem;
  line-height: 1.3;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.tx-customers .tx-customer-toolbar__input:focus,
.tx-customers .tx-customer-toolbar__select:focus {
  outline: none;
  border-color: var(--tx-customer-accent);
  box-shadow: 0 0 0 3px var(--tx-customer-accent-soft);
}
.tx-customers .tx-customer-toolbar__input::placeholder {
  color: var(--tx-customer-text-subtle);
}
.tx-customers .tx-customer-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}
@media (min-width: 768px) {
  .tx-customers .tx-customer-toolbar__actions { justify-content: flex-end; }
}
.tx-customers .tx-customer-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border-radius: var(--tx-customer-radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
  text-decoration: none;
  white-space: nowrap;
}
.tx-customers .tx-customer-btn--primary {
  background: var(--tx-customer-accent);
  color: #ffffff;
  border-color: var(--tx-customer-accent);
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25);
}
.tx-customers .tx-customer-btn--primary:hover { background: #4338ca; border-color: #4338ca; }
.tx-customers .tx-customer-btn--secondary {
  background: var(--tx-customer-card);
  color: var(--tx-customer-text-strong);
  border-color: var(--tx-customer-border-strong);
}
.tx-customers .tx-customer-btn--secondary:hover {
  background: var(--tx-customer-muted-soft);
  border-color: var(--tx-customer-text-muted);
}
.tx-customers .tx-customer-btn--ghost {
  background: transparent;
  color: var(--tx-customer-text-muted);
  border-color: transparent;
}
.tx-customers .tx-customer-btn--ghost:hover {
  color: var(--tx-customer-text-strong);
  background: var(--tx-customer-muted-soft);
}
.tx-customers .tx-customer-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tx-customer-accent-soft);
  border-color: var(--tx-customer-accent);
}
.tx-customers .tx-customer-toolbar__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--tx-customer-text-muted);
}

/* ---------- KPI strip --------------------------------------------- */
.tx-customers .tx-customer-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}
@media (min-width: 640px) {
  .tx-customers .tx-customer-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tx-customers .tx-customer-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  background: var(--tx-customer-card);
  border: 1px solid var(--tx-customer-border);
  border-radius: var(--tx-customer-radius-lg);
  box-shadow: var(--tx-customer-shadow);
  position: relative;
  overflow: hidden;
}
.tx-customers .tx-customer-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.25rem;
  background: var(--tx-customer-tone, var(--tx-customer-accent));
  opacity: 0.85;
}
.tx-customers .tx-customer-kpi--neutral  { --tx-customer-tone: var(--tx-customer-accent); }
.tx-customers .tx-customer-kpi--success  { --tx-customer-tone: var(--tx-customer-success); }
.tx-customers .tx-customer-kpi--info     { --tx-customer-tone: var(--tx-customer-info); }
.tx-customers .tx-customer-kpi--violet   { --tx-customer-tone: var(--tx-customer-violet); }
.tx-customers .tx-customer-kpi--danger   { --tx-customer-tone: var(--tx-customer-danger); }
.tx-customers .tx-customer-kpi__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-customer-text-muted);
  margin-left: 0.35rem;
}
.tx-customers .tx-customer-kpi__value {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  color: var(--tx-customer-text-strong);
  font-variant-numeric: tabular-nums;
  margin-left: 0.35rem;
}

/* ---------- Table surface ---------------------------------------- */
.tx-customers .tx-customer-table-wrap {
  background: var(--tx-customer-card);
  border: 1px solid var(--tx-customer-border);
  border-radius: var(--tx-customer-radius-lg);
  box-shadow: var(--tx-customer-shadow);
  overflow: hidden;
}
.tx-customers .tx-customer-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tx-customers .tx-customer-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.86rem;
  color: var(--tx-customer-text);
  min-width: 760px;
}
.tx-customers .tx-customer-table thead th {
  background: var(--tx-customer-muted-soft);
  color: var(--tx-customer-text-muted);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.7rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--tx-customer-border);
  white-space: nowrap;
}
.tx-customers .tx-customer-table tbody td {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--tx-customer-border);
  vertical-align: middle;
}
.tx-customers .tx-customer-table tbody tr:last-child td { border-bottom: none; }
.tx-customers .tx-customer-table tbody tr {
  transition: background-color 120ms ease;
}
.tx-customers .tx-customer-table tbody tr:hover {
  background: rgba(79, 70, 229, 0.035);
}
.tx-customers .tx-customer-table__num {
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  color: var(--tx-customer-text-strong);
}
.tx-customers .tx-customer-table__name {
  font-weight: 600;
  color: var(--tx-customer-text-strong);
  display: block;
}
.tx-customers .tx-customer-table__name:hover { color: var(--tx-customer-accent); }
.tx-customers .tx-customer-table__sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--tx-customer-text-muted);
  font-weight: 400;
}
.tx-customers .tx-customer-table__contact {
  font-size: 0.85rem;
  color: var(--tx-customer-text);
}
.tx-customers .tx-customer-table__contact-sub {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.74rem;
  color: var(--tx-customer-text-muted);
}
.tx-customers .tx-customer-table__cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tx-customers .tx-customer-table__action {
  text-align: right;
  white-space: nowrap;
}
.tx-customers .tx-customer-table__link {
  color: var(--tx-customer-accent);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.82rem;
}
.tx-customers .tx-customer-table__link:hover { text-decoration: underline; }

/* ---------- Pills (status / type / counts) ----------------------- */
.tx-customers .tx-customer-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tx-customers .tx-customer-pill--success {
  background: var(--tx-customer-success-soft);
  color: var(--tx-customer-success);
  border-color: var(--tx-customer-success-ring);
}
.tx-customers .tx-customer-pill--muted {
  background: var(--tx-customer-muted-soft);
  color: var(--tx-customer-muted);
  border-color: var(--tx-customer-muted-ring);
}
.tx-customers .tx-customer-pill--info {
  background: var(--tx-customer-info-soft);
  color: var(--tx-customer-info);
  border-color: var(--tx-customer-info-ring);
}
.tx-customers .tx-customer-pill--violet {
  background: var(--tx-customer-violet-soft);
  color: var(--tx-customer-violet);
  border-color: var(--tx-customer-violet-ring);
}
.tx-customers .tx-customer-pill--neutral {
  background: var(--tx-customer-muted-soft);
  color: var(--tx-customer-text-strong);
  border-color: var(--tx-customer-border-strong);
}

/* ---------- Pagination ------------------------------------------- */
.tx-customers .tx-customer-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.85rem 0 0;
  font-size: 0.85rem;
  color: var(--tx-customer-text-muted);
}
.tx-customers .tx-customer-pagination__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ---------- Empty states (true vs filtered) ---------------------- */
.tx-customers .tx-customer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.tx-customers .tx-customer-empty__icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--tx-customer-accent-soft);
  color: var(--tx-customer-accent);
  font-size: 1.2rem;
}
.tx-customers .tx-customer-empty__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tx-customer-text-strong);
  margin: 0;
}
.tx-customers .tx-customer-empty__message {
  font-size: 0.86rem;
  color: var(--tx-customer-text-muted);
  max-width: 38rem;
  margin: 0;
  line-height: 1.45;
}
.tx-customers .tx-customer-empty__actions {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

/* ---------- Section card (forms + detail) ------------------------- */
.tx-customers .tx-customer-section {
  background: var(--tx-customer-card);
  border: 1px solid var(--tx-customer-border);
  border-radius: var(--tx-customer-radius-lg);
  box-shadow: var(--tx-customer-shadow);
  padding: 1.1rem 1.2rem 1.25rem;
  margin-top: 1rem;
}
.tx-customers .tx-customer-section + .tx-customer-section { margin-top: 1.1rem; }
.tx-customers .tx-customer-section__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.95rem;
  border-bottom: 1px solid var(--tx-customer-border);
}
.tx-customers .tx-customer-section__icon {
  display: inline-flex;
  width: 1.85rem;
  height: 1.85rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.55rem;
  background: var(--tx-customer-accent-soft);
  color: var(--tx-customer-accent);
  flex-shrink: 0;
}
.tx-customers .tx-customer-section__icon--muted {
  background: var(--tx-customer-muted-soft);
  color: var(--tx-customer-text-muted);
}
.tx-customers .tx-customer-section__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tx-customer-text-strong);
  margin: 0;
  line-height: 1.2;
}
.tx-customers .tx-customer-section__hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--tx-customer-text-muted);
}
.tx-customers .tx-customer-section__actions {
  margin-left: auto;
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.tx-customers .tx-customer-section__body {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

/* ---------- Form grid + controls --------------------------------- */
.tx-customers .tx-customer-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.95rem 1rem;
}
@media (min-width: 768px) {
  .tx-customers .tx-customer-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tx-customers .tx-customer-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.tx-customers .tx-customer-form__row--full { grid-column: 1 / -1; }
.tx-customers .tx-customer-form__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tx-customer-text-strong);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.tx-customers .tx-customer-form__label-required::after {
  content: "*";
  color: var(--tx-customer-accent);
  font-weight: 700;
}
.tx-customers .tx-customer-form__hint {
  font-size: 0.75rem;
  color: var(--tx-customer-text-muted);
}
.tx-customers .tx-customer-form__input,
.tx-customers .tx-customer-form__select,
.tx-customers .tx-customer-form__textarea {
  width: 100%;
  min-height: 2.45rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--tx-customer-border-strong);
  border-radius: var(--tx-customer-radius-md);
  background: var(--tx-customer-card);
  color: var(--tx-customer-text-strong);
  font-size: 0.9rem;
  line-height: 1.35;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.tx-customers .tx-customer-form__textarea {
  min-height: 5.5rem;
  resize: vertical;
  font-family: inherit;
}
.tx-customers .tx-customer-form__input:focus,
.tx-customers .tx-customer-form__select:focus,
.tx-customers .tx-customer-form__textarea:focus {
  outline: none;
  border-color: var(--tx-customer-accent);
  box-shadow: 0 0 0 3px var(--tx-customer-accent-soft);
}
.tx-customers .tx-customer-form__input::placeholder,
.tx-customers .tx-customer-form__textarea::placeholder {
  color: var(--tx-customer-text-subtle);
}
.tx-customers .tx-customer-form__checkrow {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--tx-customer-text);
}
.tx-customers .tx-customer-form__checkrow label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}
.tx-customers .tx-customer-form__checkrow input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--tx-customer-accent);
}

/* Provider block — quieter visual weight than primary sections. */
.tx-customers .tx-customer-section--provider {
  background: linear-gradient(180deg, var(--tx-customer-muted-soft), var(--tx-customer-card));
  border-style: dashed;
  border-color: var(--tx-customer-border-strong);
}
.tx-customers .tx-customer-section--provider .tx-customer-section__icon {
  background: var(--tx-customer-info-soft);
  color: var(--tx-customer-info);
}
.tx-customers .tx-customer-form__identity {
  margin-top: 0.6rem;
  padding: 0.85rem 0.95rem;
  border-radius: var(--tx-customer-radius-md);
  background: var(--tx-customer-info-soft);
  border: 1px solid var(--tx-customer-info-ring);
  color: var(--tx-customer-info);
  font-size: 0.85rem;
  line-height: 1.45;
}
.tx-customers .tx-customer-form__identity a {
  color: var(--tx-customer-info);
  font-weight: 600;
  text-decoration: underline;
}

/* Action bar — bottom-right form buttons. */
.tx-customers .tx-customer-form__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--tx-customer-border);
  margin-top: 0.3rem;
}

/* Validation / alert surface — local styled wrapper. */
.tx-customers .tx-customer-alert {
  padding: 0.7rem 0.9rem;
  border-radius: var(--tx-customer-radius-md);
  border: 1px solid var(--tx-customer-border);
  background: var(--tx-customer-muted-soft);
  color: var(--tx-customer-text);
  font-size: 0.85rem;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  line-height: 1.4;
}
.tx-customers .tx-customer-alert--error {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}
.tx-customers .tx-customer-alert--warning {
  background: var(--tx-customer-muted-soft);
  border-color: #fde68a;
  color: #b45309;
}

/* ---------- Detail page hero + summary --------------------------- */
.tx-customers .tx-customer-hero {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.1rem 1.2rem;
  background: var(--tx-customer-card);
  border: 1px solid var(--tx-customer-border);
  border-radius: var(--tx-customer-radius-lg);
  box-shadow: var(--tx-customer-shadow);
}
@media (min-width: 768px) {
  .tx-customers .tx-customer-hero { flex-direction: row; align-items: center; justify-content: space-between; }
}
.tx-customers .tx-customer-hero__primary { min-width: 0; }
.tx-customers .tx-customer-hero__number {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--tx-customer-text-muted);
  letter-spacing: 0.04em;
}
.tx-customers .tx-customer-hero__name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tx-customer-text-strong);
  margin: 0.2rem 0 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .tx-customers .tx-customer-hero__name { font-size: 1.75rem; }
}
.tx-customers .tx-customer-hero__pills {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.tx-customers .tx-customer-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.tx-customers .tx-customer-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.9rem;
}
@media (min-width: 768px) {
  .tx-customers .tx-customer-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.tx-customers .tx-customer-summary__item {
  padding: 0.7rem 0.9rem;
  background: var(--tx-customer-card);
  border: 1px solid var(--tx-customer-border);
  border-radius: var(--tx-customer-radius-md);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.tx-customers .tx-customer-summary__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tx-customer-text-muted);
  font-weight: 600;
}
.tx-customers .tx-customer-summary__value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tx-customer-text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* ---------- Address + contact card mini layout ------------------- */
.tx-customers .tx-customer-mini {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
@media (min-width: 640px) {
  .tx-customers .tx-customer-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tx-customers .tx-customer-mini__card {
  padding: 0.85rem 1rem;
  background: var(--tx-customer-muted-soft);
  border: 1px solid var(--tx-customer-border);
  border-radius: var(--tx-customer-radius-md);
}
.tx-customers .tx-customer-mini__title {
  font-weight: 600;
  color: var(--tx-customer-text-strong);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.tx-customers .tx-customer-mini__meta {
  margin-top: 0.25rem;
  color: var(--tx-customer-text-muted);
  font-size: 0.82rem;
}
.tx-customers .tx-customer-mini__flags {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* ---------- Activity timeline ------------------------------------ */
.tx-customers .tx-customer-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.tx-customers .tx-customer-timeline__item {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px dashed var(--tx-customer-border);
  align-items: start;
}
.tx-customers .tx-customer-timeline__item:last-child { border-bottom: none; }
.tx-customers .tx-customer-timeline__when {
  font-size: 0.78rem;
  color: var(--tx-customer-text-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.tx-customers .tx-customer-timeline__what {
  font-size: 0.88rem;
  color: var(--tx-customer-text);
}
.tx-customers .tx-customer-timeline__actor {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: var(--tx-customer-text-muted);
}

/* ---------- Generic helpers --------------------------------------- */
.tx-customers .tx-customer-muted { color: var(--tx-customer-text-muted); }
.tx-customers .tx-customer-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.84rem;
}
.tx-customers .tx-customer-danger-link {
  color: #b91c1c;
  font-weight: 600;
  text-decoration: none;
  margin-left: 0.7rem;
  font-size: 0.82rem;
}
.tx-customers .tx-customer-danger-link:hover { text-decoration: underline; }

/* Responsive — when customer list table is too wide for small
   screens, fall back to stacked "cards" via the data attribute. */
@media (max-width: 720px) {
  .tx-customers .tx-customer-table { min-width: 0; }
  .tx-customers .tx-customer-table thead { display: none; }
  .tx-customers .tx-customer-table tbody tr {
    display: block;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--tx-customer-border);
  }
  .tx-customers .tx-customer-table tbody td {
    display: block;
    padding: 0.25rem 0;
    border-bottom: none;
  }
  .tx-customers .tx-customer-table__cell-num,
  .tx-customers .tx-customer-table__action { text-align: left; }
}

/* ---------- Modals (contact / address / provider) ----------------- */
.tx-customers .tx-customer-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 50;
  padding: 4vh 1rem;
  overflow-y: auto;
}
.tx-customers .tx-customer-modal.is-open { display: flex; }
.tx-customers .tx-customer-modal__card {
  width: 100%;
  max-width: 36rem;
  background: var(--tx-customer-card);
  border: 1px solid var(--tx-customer-border);
  border-radius: var(--tx-customer-radius-lg);
  box-shadow: var(--tx-customer-shadow-lg);
  overflow: hidden;
}
.tx-customers .tx-customer-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--tx-customer-border);
}
.tx-customers .tx-customer-modal__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tx-customer-text-strong);
  margin: 0;
}
.tx-customers .tx-customer-modal__close {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--tx-customer-text-muted);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.4rem;
}
.tx-customers .tx-customer-modal__close:hover {
  background: var(--tx-customer-muted-soft);
  color: var(--tx-customer-text-strong);
}
.tx-customers .tx-customer-form__body {
  padding: 1.1rem 1.15rem 1.2rem;
}

/* =====================================================================
   E6-D7A.1.3 — Customer 360 master-data surfaces
   - Master edit/new form layout helpers
   - First-class billing/shipping address cards on the detail page
   - First-class contact cards on the detail page
   - Other-addresses subsection
   All scoped under .tx-customers so they cannot leak to other pages.
   ===================================================================== */

.tx-customers .tx-customer-form--master {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tx-customers .tx-customer-form--master > .tx-customer-section {
  margin-bottom: 0;
}

/* Address section gets a tinted variant that pairs with the
   side-by-side card grid on the detail page. */
.tx-customers .tx-customer-section--address {
  background: linear-gradient(180deg, var(--tx-customer-card) 0%, var(--tx-customer-muted-soft) 100%);
}

/* Narrow columns used by postal code + ISO-2 country. */
.tx-customers .tx-customer-form__row--postal {
  flex: 0 0 8rem;
  max-width: 8rem;
}
.tx-customers .tx-customer-form__input--country {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Full-width standalone checkrow (used for "entspricht Rechnungsadresse"). */
.tx-customers .tx-customer-form__checkrow--standalone {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.85rem;
  background: var(--tx-customer-muted-soft);
  border: 1px solid var(--tx-customer-border);
  border-radius: var(--tx-customer-radius);
  font-weight: 500;
  color: var(--tx-customer-text-strong);
}
.tx-customers .tx-customer-form__checkrow--standalone input[type="checkbox"] {
  margin: 0;
}

/* =====================================================================
   Detail page — first-class billing/shipping address cards
   ===================================================================== */

.tx-customers .tx-customer-address-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 900px) {
  .tx-customers .tx-customer-address-grid {
    grid-template-columns: 1fr;
  }
}

.tx-customers .tx-customer-address-card {
  display: flex;
  flex-direction: column;
  background: var(--tx-customer-card);
  border: 1px solid var(--tx-customer-border);
  border-radius: var(--tx-customer-radius-lg);
  box-shadow: var(--tx-customer-shadow);
  overflow: hidden;
}
.tx-customers .tx-customer-address-card--billing {
  border-top: 3px solid var(--tx-customer-accent, #0f766e);
}
.tx-customers .tx-customer-address-card--shipping {
  border-top: 3px solid var(--tx-customer-info, #2563eb);
}

.tx-customers .tx-customer-address-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.05rem 0.6rem;
  border-bottom: 1px solid var(--tx-customer-border);
  background: var(--tx-customer-muted-soft);
}
.tx-customers .tx-customer-address-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-customer-text-muted);
  font-weight: 600;
}
.tx-customers .tx-customer-address-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--tx-customer-accent-soft, #ccfbf1);
  color: var(--tx-customer-accent-strong, #0f766e);
  border: 1px solid var(--tx-customer-accent-ring, #99f6e4);
}
.tx-customers .tx-customer-address-card__pill--info {
  background: var(--tx-customer-info-soft, #dbeafe);
  color: var(--tx-customer-info-strong, #1d4ed8);
  border-color: var(--tx-customer-info-ring, #bfdbfe);
}

.tx-customers .tx-customer-address-card__body {
  padding: 0.9rem 1.05rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.92rem;
  color: var(--tx-customer-text-strong);
}
.tx-customers .tx-customer-address-card__street {
  font-weight: 600;
}
.tx-customers .tx-customer-address-card__street-2 {
  color: var(--tx-customer-text-muted);
}
.tx-customers .tx-customer-address-card__city {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  color: var(--tx-customer-text-strong);
}
.tx-customers .tx-customer-address-card__country {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--tx-customer-text-muted);
  letter-spacing: 0.02em;
}
.tx-customers .tx-customer-address-card__footnote {
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--tx-customer-border);
  font-size: 0.78rem;
  color: var(--tx-customer-text-muted);
}
.tx-customers .tx-customer-address-card__empty {
  padding: 1rem 1.05rem;
  font-size: 0.85rem;
  color: var(--tx-customer-text-muted);
  font-style: italic;
}

/* =====================================================================
   Detail page — first-class contact cards
   ===================================================================== */

.tx-customers .tx-customer-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 0.9rem;
}
.tx-customers .tx-customer-contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.85rem 1rem 0.95rem;
  background: var(--tx-customer-card);
  border: 1px solid var(--tx-customer-border);
  border-radius: var(--tx-customer-radius-lg);
  box-shadow: var(--tx-customer-shadow);
}
.tx-customers .tx-customer-contact-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.tx-customers .tx-customer-contact-card__name {
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--tx-customer-text-strong);
}
.tx-customers .tx-customer-contact-card__role {
  font-size: 0.82rem;
  color: var(--tx-customer-text-muted);
}
.tx-customers .tx-customer-contact-card__primary {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--tx-customer-info-soft, #dbeafe);
  color: var(--tx-customer-info-strong, #1d4ed8);
  border: 1px solid var(--tx-customer-info-ring, #bfdbfe);
}
.tx-customers .tx-customer-contact-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.86rem;
  color: var(--tx-customer-text-strong);
}
.tx-customers .tx-customer-contact-card__row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--tx-customer-text-muted);
}
.tx-customers .tx-customer-contact-card__row--missing {
  font-style: italic;
  color: var(--tx-customer-text-muted);
}

/* =====================================================================
   Detail page — "Weitere Adressen" subsection
   ===================================================================== */

.tx-customers .tx-customer-address-others {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--tx-customer-border);
}
.tx-customers .tx-customer-address-others__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}
.tx-customers .tx-customer-address-others__title {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tx-customer-text-muted);
  margin: 0;
}

/* =====================================================================
 * E6-D7A.2 — Customer Asset Library additions
 *
 * All classes scoped under .tx-customers / .tx-card / .tx-customer-form
 * to inherit the existing design tokens. Minimal additions; no new
 * design system, no new framework, no dark-mode overrides.
 * =====================================================================*/

.tx-customers .tx-customer-version {
  display: inline-block;
  font-weight: 600;
  color: var(--tx-customer-text);
}

.tx-customers .tx-customer-text-sm {
  font-size: 0.85rem;
  line-height: 1.35;
}

.tx-customers .tx-customer-pill--inline {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  vertical-align: middle;
}

.tx-customers .tx-customer-table--assets tbody tr td,
.tx-customers .tx-customer-table--versions tbody tr td {
  vertical-align: top;
}

.tx-customers .tx-customer-table__link--success {
  color: var(--tx-customer-success, #1b8a3d);
  font-weight: 600;
}

.tx-customers .tx-customer-form__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.tx-customers .tx-customer-form__radio {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.tx-customers .tx-customer-form--asset-upload [data-asset-mode] {
  transition: opacity 120ms ease;
}

/* Compact client-side filter (e.g. asset type dropdown) */
.tx-customers .tx-customer-form__select {
  width: 100%;
  max-width: 320px;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--tx-customer-border);
  border-radius: 6px;
  background: var(--tx-customer-surface);
  color: var(--tx-customer-text);
}

/* Order detail — Kunden-Assets usage list */
.tx-card__link {
  color: var(--tx-customer-primary, #2c5dab);
  text-decoration: none;
  font-weight: 500;
}
.tx-card__link:hover {
  text-decoration: underline;
}

.tx-asset-usage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tx-asset-usage-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--tx-customer-border, #e2e5ea);
  border-radius: 8px;
  background: var(--tx-customer-surface, #fff);
}

/* ─── E6-D7A.3 — Customer Production Memory ────────────────────────── */

.tx-card[data-tx-d7a3-production-memory] .tx-card__title-icon {
  color: var(--tx-customer-violet, #6c4ad6);
}

.tx-d7a3-memory-row {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.tx-d7a3-memory-row > .inline-flex,
.tx-d7a3-memory-row > .tx-customer-mono,
.tx-d7a3-memory-row > .tx-customer-pill,
.tx-d7a3-memory-row > .tx-customer-muted,
.tx-d7a3-memory-row > span,
.tx-d7a3-memory-row > a {
  display: inline-flex;
}

.tx-d7a3-color-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.tx-d7a3-color-chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--tx-surface-alt, #f1f5f9);
  border: 1px solid var(--tx-customer-border, #e2e5ea);
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--tx-customer-text, #1f2937);
}

.tx-d7a3-notes-inline {
  font-size: 0.85rem;
  color: var(--tx-customer-muted, #6b7280);
  font-style: italic;
  max-width: 360px;
}

.tx-d7a3-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}

.tx-d7a3-actions details.tx-disclosure {
  margin: 0;
}

.tx-d7a3-actions summary.tx-customer-link-button {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--tx-customer-border, #e2e5ea);
  background: var(--tx-surface-alt, #f1f5f9);
  color: var(--tx-customer-text, #1f2937);
  font-size: 0.85rem;
}

.tx-d7a3-actions summary.tx-customer-link-button::-webkit-details-marker { display: none; }
.tx-d7a3-actions summary.tx-customer-link-button:hover { background: #e2e8f0; }

.tx-d7a3-form {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px dashed var(--tx-customer-border, #e2e5ea);
  border-radius: 8px;
  background: var(--tx-surface-alt, #f8fafc);
}

.tx-d7a3-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
}

.tx-d7a3-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
}

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

.tx-d7a3-field > span {
  color: var(--tx-customer-muted, #6b7280);
  font-weight: 500;
}

.tx-d7a3-field input,
.tx-d7a3-field select,
.tx-d7a3-field textarea {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--tx-customer-border, #e2e5ea);
  border-radius: 6px;
  background: var(--tx-customer-surface, #fff);
  color: var(--tx-customer-text, #1f2937);
  font-size: 0.85rem;
}

.tx-d7a3-field textarea { resize: vertical; min-height: 3rem; }

.tx-d7a3-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.tx-d7a3-recommendation {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  background: linear-gradient(0deg, rgba(99,102,241,0.06), rgba(99,102,241,0.06)), var(--tx-customer-surface, #fff);
}

.tx-d7a3-recommendation__head { display: inline-flex; align-items: center; }

.tx-d7a3-recommendation__body {
  flex: 1 1 240px;
  min-width: 240px;
}

.tx-d7a3-recommendation__reason {
  margin: 0 0 0.25rem 0;
  font-weight: 500;
  color: var(--tx-customer-text, #1f2937);
  font-size: 0.9rem;
}

.tx-d7a3-recommendation__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: 0.8rem;
  color: var(--tx-customer-muted, #4b5563);
}

.tx-d7a3-recommendation__meta strong { color: var(--tx-customer-text, #1f2937); font-weight: 600; }

@media (max-width: 800px) {
  .tx-d7a3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tx-d7a3-recommendation { flex-direction: column; align-items: stretch; }
}

.tx-customer-section__subtitle {
  margin: 0.75rem 0 0.4rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tx-customer-text, #1f2937);
}

.tx-customer-grid--top-assets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
  margin: 0.6rem 0;
}

.tx-customer-mini-card {
  border: 1px solid var(--tx-customer-border, #e2e5ea);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  background: var(--tx-customer-surface, #fff);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tx-customer-mini-card__head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.85rem;
}

.tx-customer-mini-card__list {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  font-size: 0.8rem;
}

.tx-customer-mini-card__list > div {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.tx-customer-mini-card__list dt {
  color: var(--tx-customer-muted, #6b7280);
  margin: 0;
}

.tx-customer-mini-card__list dd {
  margin: 0;
  color: var(--tx-customer-text, #1f2937);
  text-align: right;
}

/* ─────────────────────────────────────────────────────────────────────
   E6-D7A.3.1 — Customer Production Preset UI
   - .tx-d7a31-preset-card         Order Detail "Standard & Wie letztes Mal"
   - .tx-d7a31-presets-section     Asset View management section
   - .tx-d7a31-preset-summary      Customer View summary card
   - .tx-d7a31-preset-row          per-usage row inside Order Detail
   - .tx-d7a31-preset-actions      inline action button cluster
   - .tx-d7a31-deviation           "Abweichung gegenüber Kunden-Preset"
                                    banner (warning tone, with field list)
   - .tx-d7a31-deviation--none     no-deviation success variant
   ───────────────────────────────────────────────────────────────────── */

[data-tx-d7a31-preset-card] .tx-card__title-icon {
  color: var(--tx-customer-accent, #2563eb);
}

.tx-d7a31-preset-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.25rem;
  border-top: 1px solid var(--tx-customer-border, #e5e7eb);
}

.tx-d7a31-preset-row:first-child {
  border-top: none;
}

.tx-d7a31-preset-row > .inline-flex,
.tx-d7a31-preset-row > .tx-customer-mono,
.tx-d7a31-preset-row > .tx-customer-pill,
.tx-d7a31-preset-row > .tx-customer-muted,
.tx-d7a31-preset-row > span,
.tx-d7a31-preset-row > a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.tx-d7a31-preset-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.tx-d7a31-preset-actions form {
  display: inline-block;
  margin: 0;
}

.tx-d7a31-deviation {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tx-d7a31-deviation__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.tx-d7a31-deviation__count {
  font-size: 0.85rem;
  color: #9a3412;
}

.tx-d7a31-deviation__fields {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.85rem;
  color: #9a3412;
}

.tx-d7a31-deviation--none {
  background: #ecfdf5;
  border-color: #6ee7b7;
}

.tx-d7a31-deviation--none .tx-customer-pill {
  background: #d1fae5;
}

/* Asset View section header actions stay right-aligned. */
[data-tx-d7a31-presets-section] > .tx-customer-section__head {
  align-items: flex-start;
}

[data-tx-d7a31-presets-section] .tx-customer-section__actions {
  margin-left: auto;
}

/* Customer View summary pills in the section head. */
[data-tx-d7a31-preset-summary] > .tx-customer-section__head {
  align-items: flex-start;
}

[data-tx-d7a31-preset-summary] .tx-customer-section__pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-left: auto;
}