/* ============================================================
   AI Operations Platform - Design System v3
   Modern, Tabler-inspired. Clean, professional, ERP-ready.
   ============================================================ */

@import url('/static/vendor/inter/inter.css');

:root {
    --bg: #F1F4F8;
    --surface: #FFFFFF;
    --surface-alt: #F8FAFC;
    --surface-hover: #EEF2F6;
    --primary: #13263F;
    --primary-dark: #0B1929;
    --primary-light: #E0EBF7;
    --accent: #2456A6;
    --accent-dark: #1B4179;

    /* Clean, elevated white architectural ERP sidebar palette */
    --sidebar-bg: #FFFFFF;
    --sidebar-bg-alt: #F8FAFC;
    --sidebar-text: #334155;
    --sidebar-text-hover: #0F172A;
    --sidebar-active-bg: #EEF3FA;
    --sidebar-active-text: #1B4179;
    --sidebar-section-label: #64748B;
    --sidebar-border: #E2E8F0;

    --text: #1E293B;
    --text-muted: #5B6B82;
    --text-light: #94A3B8;

    --success: #166534;
    --success-light: #F0FDF4;
    --warning: #B45309;
    --warning-light: #FFFBEB;
    --danger: #991B1B;
    --danger-light: #FEF2F2;
    --info: #13263F;
    --info-light: #EEF3FA;

    --border: #CBD5E1;
    --border-dark: #94A3B8;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .04);
    --shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 4px 12px rgba(0, 0, 0, .06);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, .08), 0 16px 40px rgba(0, 0, 0, .12);

    --tap: 44px;
    --nav-h: 60px;
    --top-h: 68px;
    --sidebar-w: 240px;

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    --transition: .15s ease;

    /* Spacing scale - use these for new padding/margin/gap instead of a hand-typed
       value; audit 2026-10-04 found 58 distinct padding, 35 margin and 44 gap
       values hand-typed across this file alone, with no shared vocabulary. */
    --space-1: .25rem;
    --space-2: .4rem;
    --space-3: .5rem;
    --space-4: .65rem;
    --space-5: .75rem;
    --space-6: 1rem;
    --space-7: 1.25rem;
    --space-8: 1.5rem;
    --space-9: 2rem;
    --space-10: 3rem;
}

/* ---- Reset ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.55;
    font-size: 14px;
}

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

h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: .25rem; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 1rem; font-weight: 600; }
h4 { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }

.subtitle { color: var(--text-muted); font-size: .875rem; margin-bottom: 1rem; }

[x-cloak] { display: none !important; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* ---- Top-Bar ---- */
.topbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    height: var(--top-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1rem;
}
@media (min-width: 1024px) {
    .topbar {
        margin-left: var(--sidebar-w);
        width: calc(100% - var(--sidebar-w));
        box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    }
    .topbar__brand {
        display: none !important;
    }
}
.topbar__brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.1rem; color: var(--primary); text-decoration: none; letter-spacing: -.02em; }
.topbar__brand:hover { text-decoration: none; }
.topbar__brand-icon { font-size: 1.3rem; }
.topbar__actions { display: flex; align-items: center; gap: .5rem; }
.topbar__icon-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); width: 2.2rem; height: 2.2rem; cursor: pointer; color: var(--text-muted); text-decoration: none; transition: all var(--transition); flex-shrink: 0; }
.topbar__icon-btn:hover { background: var(--surface-alt); color: var(--primary); border-color: var(--border-dark); text-decoration: none; }
.topbar__user { font-size: .85rem; color: var(--text-muted); display: none; }
@media (min-width: 768px) { .topbar__user { display: inline; } }
.topbar__logout { background: none; border: 1px solid var(--border); color: var(--text-muted); padding: .4rem .8rem; border-radius: var(--radius-sm); cursor: pointer; font-size: .85rem; font-family: var(--font); transition: all var(--transition); }
.topbar__logout:hover { background: var(--surface-alt); color: var(--text); border-color: var(--border-dark); }

/* ---- Brand Logo ---- */
.brand-logo-img {
    height: 48px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}
.brand-logo-img--topbar {
    height: 42px;
}
.brand-logo-img--login {
    height: 150px;
    max-width: 240px;
    margin: 0 auto 1.25rem;
}

/* ---- Layout ---- */
.page {
    padding: 1rem;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 1023px) {
    .page {
        padding: 1rem 1.25rem;
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box;
    }
}
@media (min-width: 1024px) {
    .page {
        padding: 1.5rem 2rem;
        margin-left: var(--sidebar-w);
        width: calc(100% - var(--sidebar-w));
        max-width: calc(100vw - var(--sidebar-w));
        box-sizing: border-box;
    }
}
@media (min-width: 1400px) {
    .page {
        padding: 1.75rem 2.5rem;
        margin-left: var(--sidebar-w);
        width: calc(100% - var(--sidebar-w));
        max-width: 1680px;
    }
}
@media (min-width: 1920px) {
    .page {
        max-width: 1840px;
    }
}

/* Guard against double-nested .page shifting */
.page .page {
    padding: 0 !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* ---- Bottom Nav (Mobile only) ---- */
.bottomnav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    background: var(--surface);
    border-top: 1px solid var(--border);
    height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex; justify-content: space-around; align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.bottomnav__item,
.bottomnav__link {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-decoration: none; color: var(--text-light);
    font-size: .68rem; font-weight: 500; padding: .35rem .5rem;
    min-width: var(--tap); min-height: 44px;
    transition: color var(--transition); white-space: nowrap; position: relative;
    flex-shrink: 0;
}
.bottomnav__item.active,
.bottomnav__link.active { color: var(--primary); }
.bottomnav__icon { display: inline-flex; line-height: 0; }
.bottomnav__badge {
    position: absolute; top: 2px; right: 50%; transform: translateX(20px);
    background: var(--danger); color: #fff; font-size: .6rem; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
}
@media (min-width: 768px) {
    .bottomnav { display: none; }
    body { padding-bottom: 0; }
}
body { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) { body { padding-bottom: 0; } }

/* ---- Desktop Sidebar Base ---- */
.sidebar { display: none; }
@media (min-width: 1024px) {
    .sidebar {
        display: flex; flex-direction: column;
        position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
        background: #FFFFFF !important;
        border-right: 1px solid var(--sidebar-border, #E2E8F0) !important;
        box-shadow: 2px 0 14px rgba(15, 23, 42, 0.05) !important;
        padding: 0;
        z-index: 90;
        overflow-x: hidden;
    }
}


/* ---- FAB ---- */
.fab {
    position: fixed; bottom: calc(var(--nav-h) + 1rem); right: 1rem;
    height: 48px; min-height: 48px; padding: 0 1.25rem;
    border-radius: var(--radius-full);
    background: var(--primary); color: #fff; border: none;
    font-size: .875rem; font-weight: 600; font-family: var(--font);
    cursor: pointer; box-shadow: var(--shadow-lg);
    z-index: 50; display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem; transition: all var(--transition);
    line-height: 1.2; white-space: nowrap;
}
.fab:hover { background: var(--primary-dark); text-decoration: none; }
.fab:active { background: var(--primary-dark); }
.fab:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.fab__label { display: none; }
@media (min-width: 768px) {
    .fab { bottom: 1.5rem; right: 1.5rem; }
    .fab__label { display: inline; }
}
@media (min-width: 768px) {
    .fab { padding: 0 1.5rem; }
}

/* ---- Card (Tabler pattern) ---- */
.card {
    background: var(--surface);
    border: 1px solid #E6EAF1;
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}
.card--accent { border-left: 3px solid var(--primary); }
.card--warning { border-left: 3px solid var(--warning); }
.card--success { border-left: 3px solid var(--success); }
.card--danger { border-left: 3px solid var(--danger); }
.card--clickable { cursor: pointer; text-decoration: none; color: inherit; display: block; }
.card--clickable:hover { box-shadow: var(--shadow); text-decoration: none; }

/* Tabler card sub-components */
.card-header {
    padding: .8rem 1.25rem;
    border-bottom: 1px solid #EEF1F5;
    background: #FAFBFD;
    border-radius: 12px 12px 0 0;
    margin: -1.25rem -1.25rem 1.25rem;
}
.card-body { padding: 0; }
.card-title { font-size: 1rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }

/* ---- KPI Grid ---- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: box-shadow var(--transition), border-color var(--transition);
    box-shadow: var(--shadow-sm);
}
.kpi-card:hover { box-shadow: var(--shadow); text-decoration: none; border-color: var(--border-dark); }
.kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.kpi-value--success { color: var(--success); }
.kpi-value--warning { color: var(--warning); }
.kpi-value--danger { color: var(--danger); }
.kpi-value--info { color: var(--info); }
.kpi-label { color: var(--text-muted); font-size: .75rem; margin-top: .15rem; font-weight: 500; }
.kpi-sub { color: var(--text-muted); font-size: .7rem; margin-top: .25rem; }
.kpi-sub--warning { color: var(--warning); }
.kpi-sub--danger { color: var(--danger); }

/* ---- Page Header ---- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.4rem;
    padding-bottom: .9rem;
    gap: 1rem;
    flex-wrap: wrap;
    min-height: 0;
    border-bottom: 1px solid #E9EDF3;
}
.workorder-edit-form {
    width: 100%;
    max-width: none;
    scroll-margin-top: 1rem;
}
.asset-inline-form {
    scroll-margin-top: 1rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    background: var(--surface);
}
/* Keep action labels visible even while Alpine hydrates x-text bindings. */
button[x-text*="Bedarf speichern"]:empty::after { content: "Bedarf speichern"; }
button[x-text*="Material buchen"]:empty::after { content: "Material buchen"; }
.page-header__title { flex: 1; min-width: 200px; }
.page-header__actions { display: flex; gap: .5rem; flex-shrink: 0; flex-wrap: wrap; }

/* ---- Action Bar ---- */
.action-bar {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ---- Filter Bar ---- */
.filter-bar {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.filter-bar input, .filter-bar select {
    flex: 1;
    min-width: 150px;
}
.filter-bar > input { min-width: 200px; }

/* ---- Tabs ---- */
.tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
}
.tab-btn, .tab {
    background: none;
    border: none;
    padding: .6rem 1rem;
    cursor: pointer;
    font-size: .875rem;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    font-family: var(--font);
    font-weight: 500;
    transition: color var(--transition), border-color var(--transition);
}
.tab-btn--active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.tab-btn:hover, .tab:hover { color: var(--text); }

/* ---- Grid Layouts ---- */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Form ---- */
.form-group { margin-bottom: 1rem; }
label { display: block; font-size: .8rem; font-weight: 500; margin-bottom: .3rem; color: var(--text-muted); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    font-size: .875rem;
    font-family: var(--font);
    background: var(--surface);
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
}
input[type="checkbox"], input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    width: 1.15rem !important;
    height: 1.15rem !important;
    min-width: 1.15rem !important;
    min-height: 1.15rem !important;
    max-width: 1.15rem !important;
    max-height: 1.15rem !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
    accent-color: var(--primary, #2456A6) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, .4);
}
input:disabled { opacity: .6; background: var(--surface-alt); cursor: not-allowed; }
textarea { resize: vertical; min-height: 2.5rem; }

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.form-grid--4 { grid-template-columns: repeat(4, 1fr); }
.form-grid > .full { grid-column: 1 / -1; }
.address-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: .5rem; margin-bottom: .5rem; }
@media (max-width: 600px) {
    .form-grid, .form-grid--3, .form-grid--4 { grid-template-columns: 1fr; }
    .form-grid > .full { grid-column: 1 / -1; }
    .address-grid { grid-template-columns: 1fr 1fr; }
}

.form-section {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border);
}
.form-section--first { margin-top: 0; padding-top: 0; border-top: none; }
.form-section h4 { margin-bottom: .5rem; }

.form-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.checkbox-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .25rem;
}
.checkbox-row input[type="checkbox"] { width: auto; }
.checkbox-row label { margin: 0; }

/* Modal form helpers */
.crud-form-panel {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}
.crud-form-card {
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    margin: auto;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: .6rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.crud-form-card--lg { max-width: 840px !important; }
.crud-form-card--sm { max-width: 440px !important; }
.crud-form-panel .modal__header,
.crud-form-panel .modal__footer { padding: 1rem 1.25rem; }
.crud-form-panel .modal__body { padding: 1.25rem; max-height: calc(90vh - 130px); overflow-y: auto; }
.crud-form-panel .modal__header,
.crud-form-panel .crud-form-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.crud-form-back { margin-right: auto; }
.detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0 0 .75rem;
    color: var(--text-muted);
    font-size: .85rem;
}
.detail-breadcrumb a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}
.detail-breadcrumb a:hover { text-decoration: underline; }

/* Accessible modal dialogs with fixed viewport positioning and backdrop */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}
.modal-overlay > .modal {
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    margin: auto;
    border-radius: .6rem;
    background: var(--surface, #fff);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.modal-overlay > .modal.modal--lg {
    max-width: 840px;
}
.modal-overlay > .modal.modal--sm {
    max-width: 420px;
}
.modal-overlay > .modal > form,
.modal > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.modal-overlay > .modal .modal__body,
.modal .modal__body {
    max-height: calc(88vh - 120px);
    overflow-y: auto !important;
    flex: 1 1 auto;
    min-height: 0;
}
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(15, 23, 42, 0.65);
}
.modal-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.modal-form-grid > .full { grid-column: 1 / -1; }
.modal-form-section {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border);
}
.modal-form-section--first { margin-top: 0; padding-top: 0; border-top: none; }
.modal-form-section h4 { margin-bottom: .5rem; }
@media (max-width: 600px) {
    .modal-form-grid { grid-template-columns: 1fr; }
    .modal-form-grid > .full { grid-column: 1 / -1; }
}

/* ---- Button ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .5rem 1rem; border: 1px solid transparent; border-radius: 8px;
    font-size: .875rem; font-weight: 600; cursor: pointer;
    font-family: var(--font); text-decoration: none;
    min-height: var(--tap);
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
    line-height: 1.2; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn--primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--primary-dark); text-decoration: none; }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-dark); text-decoration: none; }
.btn--success { background: var(--success); color: #fff; }
.btn--success:hover { background: #25703a; text-decoration: none; }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #c02a2a; text-decoration: none; }
.btn--ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn--ghost:hover { background: var(--surface-alt); border-color: var(--border-dark); text-decoration: none; }
.btn--outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); }
.btn--outline:hover { background: var(--primary-light); text-decoration: none; }
.btn--block { width: 100%; }
.btn--sm { padding: .35rem .75rem; font-size: .8rem; min-height: 34px; font-weight: 500; }
.btn--xs { padding: .2rem .5rem; font-size: .75rem; min-height: 28px; font-weight: 500; }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ---- Badge ---- */
.badge {
    display: inline-flex; align-items: center;
    padding: .15rem .5rem; border-radius: var(--radius-full);
    font-size: .75rem; font-weight: 600;
    background: var(--surface-alt); color: var(--text-muted);
    white-space: nowrap; line-height: 1.4;
}
.badge--new { background: var(--surface-alt); color: var(--text-muted); }
.badge--processing { background: var(--info-light); color: var(--info); }
.badge--needs_review, .badge--open, .badge--draft, .badge--scheduled { background: var(--warning-light); color: var(--warning); }
.badge--approved, .badge--active, .badge--completed, .badge--success { background: var(--success-light); color: var(--success); }
.badge--rejected, .badge--failed, .badge--cancelled, .badge--danger, .badge--overdue { background: var(--danger-light); color: var(--danger); }
.badge--info { background: var(--info-light); color: var(--info); }
.badge--warning { background: var(--warning-light); color: var(--warning); }
.badge--sm { font-size: .68rem; padding: .1rem .4rem; }
.badge--primary { background: var(--info-light); color: var(--info); }
.badge--outline { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.badge--urgent { background: var(--danger-light); color: var(--danger); }
.badge--high { background: var(--warning-light); color: var(--warning); }
.badge--normal { background: var(--info-light); color: var(--info); }
.badge--low { background: var(--surface-alt); color: var(--text-muted); }

/* ---- Status indicators (Tabler-style dots) ---- */
.status {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .75rem; font-weight: 600;
    padding: .18rem .65rem; border-radius: var(--radius-full);
    background: var(--surface-alt); white-space: nowrap;
}
.status::before {
    content: ""; display: inline-block;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-light); flex-shrink: 0;
}
.status-green { background: var(--success-light); color: #1F7A33; }
.status-green::before { background: var(--success); }
.status-yellow { background: var(--warning-light); color: #C24A05; }
.status-yellow::before { background: var(--warning); }
.status-red { background: var(--danger-light); color: #C02525; }
.status-red::before { background: var(--danger); }
.status-info { background: var(--info-light); color: #1E3A8A; }
.status-info::before { background: var(--info); }

/* ---- List ---- */
.list { display: flex; flex-direction: column; gap: .5rem; }
.list-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none; color: inherit;
    transition: box-shadow var(--transition), border-color var(--transition);
    box-shadow: var(--shadow-sm);
}
.list-item:hover { box-shadow: var(--shadow); border-color: var(--border-dark); text-decoration: none; }
.list-item--static { cursor: default; }
.list-item--static:hover { box-shadow: var(--shadow-sm); border-color: var(--border); }
.list-item__icon { font-size: 1.5rem; flex-shrink: 0; width: 32px; text-align: center; }
.list-item__main { flex: 1; min-width: 0; }
.list-item__title { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item__meta { color: var(--text-muted); font-size: .8rem; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item__actions { display: flex; gap: .25rem; flex-shrink: 0; }
.list-item__amount { font-weight: 700; font-size: .9rem; flex-shrink: 0; white-space: nowrap; }
.list-item--nested { margin-left: min(calc(var(--depth, 0) * 1.5rem), 30vw); }
@media (max-width: 600px) {
    .list-item--nested { margin-left: min(calc(var(--depth, 0) * .85rem), 20vw); }
}

/* ---- Empty State ---- */
.empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}
.empty__icon { font-size: 3rem; margin-bottom: .5rem; opacity: .5; }
.empty__text { font-size: .875rem; line-height: 1.6; }

/* ---- Breadcrumb ---- */
.breadcrumb { margin-bottom: 1rem; }
.breadcrumb a { text-decoration: none; color: var(--text-muted); font-size: .85rem; transition: color var(--transition); }
.breadcrumb a:hover { color: var(--primary); text-decoration: none; }

/* ---- Key-Value Rows ---- */
.kv-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .5rem 0;
    border-bottom: 1px solid var(--border);
    gap: 1rem;
}
.kv-row:last-child { border-bottom: none; }
.kv-label { color: var(--text-muted); font-size: .8rem; flex-shrink: 0; min-width: 120px; }
.kv-value { flex: 1 1 auto; min-width: 0; font-weight: 600; text-align: right; word-break: break-word; overflow-wrap: anywhere; font-size: .875rem; }
.kv-value--left { text-align: left; }

/* ---- Datagrid (Tabler-style key-value display) ---- */
.datagrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.datagrid__item {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.datagrid__item:nth-last-child(-n+1) { border-bottom: none; }
.datagrid__title { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: .2rem; }
.datagrid__content { font-size: .875rem; font-weight: 600; }

/* Work-order details follow the portal's flat detail layout; information is
   grouped by rows without the legacy nested card container. */
.workorder-stammdaten { max-width: 960px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
.workorder-stammdaten .kv-row { border-bottom: 1px solid var(--border); padding: .7rem 0; min-width: 0; }
.workorder-stammdaten .kv-value { overflow-wrap: anywhere; }
@media (max-width: 700px) { .workorder-stammdaten { grid-template-columns: 1fr; } }

/* ---- Detail Header ---- */
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.detail-header__title { flex: 1; min-width: 200px; }
.detail-header__badges { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.detail-header h1 { margin: 0; }
.detail-header__sub { color: var(--text-muted); margin-top: .25rem; font-size: .85rem; }

/* ---- Capture Area ---- */
.capture {
    border: 2px dashed var(--border-dark); border-radius: var(--radius-lg);
    padding: 2rem 1rem; text-align: center; margin-bottom: 1rem;
    background: var(--surface-alt);
    transition: border-color var(--transition), background var(--transition);
    cursor: pointer;
}
.capture:hover { border-color: var(--primary); background: var(--primary-light); }
.capture--active, .capture--drag { border-color: var(--primary); background: var(--primary-light); }
.capture__icon { font-size: 2.5rem; margin-bottom: .5rem; }
.capture__title { font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.capture__hint { font-size: .8rem; color: var(--text-muted); }
.capture__file { margin-top: .5rem; font-size: .85rem; color: var(--text-muted); }

/* ---- Inbox Items ---- */
.inbox-item { cursor: pointer; }
.inbox-item--processing { border-left: 3px solid var(--info); }
.inbox-item--needs_review { border-left: 3px solid var(--warning); }
.inbox-item--completed { border-left: 3px solid var(--success); }
.inbox-item--failed { border-left: 3px solid var(--danger); }

/* ---- Review ---- */
.review { margin-bottom: 1rem; }
.review__question { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
.review__meta { color: var(--text-muted); font-size: .8rem; margin-bottom: .75rem; }
.review__proposal { font-size: .85rem; color: var(--text-muted); margin-bottom: .75rem; padding: .5rem .75rem; background: var(--surface-alt); border-radius: var(--radius-sm); }
.review__buttons { display: flex; gap: .5rem; margin-top: 1rem; }
.review__buttons .btn { flex: 1; }

/* ---- Login ---- */
.login {
    display: flex; align-items: center; justify-content: center;
    min-height: calc(100vh - 2rem);
    padding: 1rem;
}
.login__card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 2rem;
    max-width: 400px; width: 100%;
    text-align: center;
}
.login__logo { font-size: 3rem; margin-bottom: .5rem; }
.login__title { margin-bottom: .25rem; }
.login__subtitle { color: var(--text-muted); font-size: .85rem; margin-bottom: 1.5rem; }
.login__demo { margin-top: 1.5rem; padding: .75rem; background: var(--surface-alt); border-radius: var(--radius-sm); font-size: .8rem; color: var(--text-muted); text-align: left; }
.login__divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; color: var(--text-muted); font-size: .78rem; }
.login__divider::before, .login__divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.login__social { display: flex; flex-direction: column; gap: .6rem; }
.btn--social {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; padding: .55rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); font-size: .85rem; font-weight: 600;
    text-decoration: none; transition: background .15s, box-shadow .15s;
}
.btn--social:hover { background: var(--surface-alt); box-shadow: var(--shadow-sm); }
.btn--social svg { flex-shrink: 0; }

/* ---- Search ---- */
.search-bar {
    display: flex; gap: .5rem; align-items: center;
}
.search-bar input { flex: 1; }
.search-results { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.search-hit {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}
.search-hit:hover { box-shadow: var(--shadow); }
.search-hit__type { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); margin-bottom: .15rem; }
.search-hit__title { font-weight: 600; font-size: .9rem; }
.search-hit__snippet { color: var(--text-muted); font-size: .8rem; margin-top: .25rem; }

/* ---- Command Bar ---- */
.command-bar {
    position: sticky; top: 0; z-index: 100;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: .5rem 1rem;
}
.command-input {
    flex: 1;
    padding: .5rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .875rem;
    font-family: var(--font);
    background: var(--surface);
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.command-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30, 64, 175, .4); }
.command-result {
    margin-top: .5rem;
    padding: .75rem;
    border-radius: var(--radius);
    background: var(--surface-alt);
    border: 1px solid var(--border);
}

/* ---- Spinner ---- */
.spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--border-dark);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .6s linear infinite;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Animations ---- */
.fade-in { animation: fadeIn .3s ease; }
.slide-out { animation: slideOut .3s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideOut { to { opacity: 0; transform: translateX(100px); } }

/* ---- Flash/Toast ---- */
.flash {
    padding: .65rem 1rem; border-radius: var(--radius-sm);
    font-size: .85rem; font-weight: 500; margin-bottom: 1rem;
    border: 1px solid transparent;
}
.flash--success { background: var(--success-light); color: var(--success); border-color: rgba(47, 158, 68, .2); }
.flash--error { background: var(--danger-light); color: var(--danger); border-color: rgba(224, 49, 49, .2); }

/* ============================================================ MODAL SYSTEM
 * Zentrale Modal-Klassen fuer Desktop + Mobile.
 * [x-cloak] { display: none !important; } verhindert Aufblitzen.
 */

.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(33, 37, 41, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    -webkit-overflow-scrolling: touch;
}
.modal-overlay::-webkit-scrollbar {
    width: 8px;
}
.modal-overlay::-webkit-scrollbar-track {
    background: transparent;
}
.modal-overlay::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
}

.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 560px;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 4rem);
    overflow: hidden;
}

.modal--lg { max-width: 760px; }
.modal--sm { max-width: 420px; }


.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.modal__title { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.modal__close {
    background: none; border: none; font-size: 1.5rem; line-height: 1;
    color: var(--text-muted); cursor: pointer; padding: .25rem .5rem;
    border-radius: var(--radius-sm); transition: all var(--transition);
}
.modal__close:hover { background: var(--surface-alt); color: var(--text); }

.modal__body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
    flex: 1 1 auto;
    min-height: 0;  /* critical for flex children to allow scrolling */
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--surface-alt);
    -webkit-overflow-scrolling: touch;
}

/* When a <form> wraps modal__body + modal__footer, the form must
   participate in the modal's flex column layout, otherwise the body
   grows beyond the modal and content gets clipped without a scrollbar. */
.modal > form,
.modal > div > form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Webkit scrollbar styling - always visible rails */
.modal__body::-webkit-scrollbar {
    width: 12px !important;
}
.modal__body::-webkit-scrollbar-track {
    background: #e9ecef !important;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}
.modal__body::-webkit-scrollbar-thumb {
    background: #6c757d !important;
    border-radius: 6px;
    border: 2px solid #e9ecef;
}
.modal__body::-webkit-scrollbar-thumb:hover {
    background: #495057 !important;
}
/* Firefox */
.modal__body {
    scrollbar-width: auto !important;
    scrollbar-color: #6c757d #e9ecef !important;
}

.modal__footer {
    padding: .75rem 1.5rem 1.25rem;
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .modal-overlay { padding: 3rem 2rem; }
    .modal { margin: 1rem auto; }
}
@media (max-width: 767px) {
    .modal-overlay { padding: 0; align-items: stretch; }
    .modal { margin: 0; max-height: 100vh; max-width: 100%; border-radius: 0; }
    .modal--sm, .modal--lg { max-width: 100%; }
    .modal__body { padding: 1rem; }
    .modal__header, .modal__footer { padding: .75rem 1rem; }
}

/* Final document-shell treatment: headers are information bands, not large
   decorative cards. The accent and aligned metadata create one consistent
   visual hierarchy for customer, asset, project, quote and invoice details. */
.page-header, .ui-page-header, .inventory-header, .detail-header, .record-header, .ui-detail-head {
    position: relative;
    border: 1px solid var(--border, #CBD5E1) !important;
    border-left: 3px solid #13263F !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    padding: 0.35rem 0.75rem !important;
    margin-bottom: 0.5rem !important;
    min-height: 38px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}
.page-header::after, .ui-page-header::after, .inventory-header::after, .detail-header::after, .record-header::after {
    display: none !important;
}
.page-header > *, .ui-page-header > *, .inventory-header > *, .detail-header > *, .record-header > * { position: relative; z-index: 1; }
.detail-header__title, .inventory-header__title { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; min-width: 0; flex: 1 1 auto; }
.detail-header__sub, .inventory-header__title p, .ui-header-meta, .ui-page-header .subtitle, .page-header .subtitle, .ui-header-main p, .record-heading .subtitle, .page-header p, .ui-page-header p, .detail-header p { display: none !important; }
.detail-header__badges, .inventory-toolbar { position: relative; z-index: 1; display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; gap: 0.4rem !important; flex-wrap: nowrap !important; }
.detail-header + .action-bar, .inventory-header + .action-bar, .page-header + .action-bar, .ui-page-header + .action-bar { padding: 0.35rem 0.65rem !important; border: 1px solid var(--border, #CBD5E1) !important; border-radius: 4px !important; background: #f8fafc !important; margin-bottom: 0.5rem !important; }
.quote-detail-header { border-left-color:#2456A6 !important; }
.quote-detail-header .quote-header-total { position:relative; z-index:1; }
.quote-detail-header .quote-header-total strong { font-variant-numeric:tabular-nums; }

/* Quote detail: a deliberate sales-document action hierarchy. */
.quote-breadcrumb { margin:0 0 .65rem .15rem; }
.quote-breadcrumb a { color:#2456A6; font-size:.82rem; font-weight:700; text-decoration:none; }
.quote-breadcrumb a:hover { text-decoration:underline; }
.quote-detail-header { padding:1.25rem 1.5rem !important; }
.quote-detail-header > div { min-width:0; }
.quote-detail-header h1 { letter-spacing:-.025em; }
.quote-header-total { display:flex; min-width:13rem; flex-direction:column; align-items:flex-end; gap:.15rem; padding-left:1.25rem; border-left:1px solid #dbe3ed; }
.quote-header-total span { color:#64748b; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.quote-header-total strong { color:#102a43; font-size:1.65rem; letter-spacing:-.03em; }
.quote-header-total small { color:#64748b; font-size:.76rem; }
.quote-actions { justify-content:space-between; padding:.75rem 1rem !important; border:1px solid #dbe3ed; border-radius:12px; background:#f8fafc; }
.quote-actions__primary,.quote-actions__secondary { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.quote-actions__secondary { justify-content:flex-end; }
.quote-cta { min-height:2.7rem !important; padding:.68rem 1.05rem !important; font-size:.88rem !important; box-shadow:0 5px 12px rgba(37,99,235,.22) !important; }
.quote-cta__icon { display:inline-flex; align-items:center; justify-content:center; width:1.35rem; height:1.35rem; border:1px solid rgba(255,255,255,.45); border-radius:50%; font-size:1rem; }
.quote-actions__hint { color:#64748b; font-size:.76rem; }
@media (max-width:767px) {
    .quote-header-total { width:100%; align-items:flex-start; padding: .75rem 0 0; border-left:0; border-top:1px solid #dbe3ed; }
    .quote-actions,.quote-actions__primary,.quote-actions__secondary { align-items:stretch; flex-direction:column; }
    .quote-actions .btn { width:100%; }
}

/* Odoo-style record shell, shared by every detail route. */
.odoo-detail-page { background:#f4f5f7; }
.odoo-detail-page > .odoo-record { max-width:1440px; margin:0 auto; }
/* By default, all detail records are single-column full-width layouts.
   Every section, header, breadcrumb, tab bar, form, and table flows naturally at 100% width. */
.odoo-record { display: flex; flex-direction: column; width: 100%; gap: 1rem; }
.odoo-record > * { width: 100%; box-sizing: border-box; }

/* ONLY when a real chatter / sidebar column exists (.has-chatter or :has(.odoo-chatter)),
   switch to the 2-column grid layout (left: main content, right: 320px chatter). */
.odoo-record:has(.odoo-chatter),
.odoo-record.has-chatter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.25rem;
    align-items: start;
}
.odoo-record:has(.odoo-chatter) > *,
.odoo-record.has-chatter > * {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
}
.odoo-record:has(.odoo-chatter) > .odoo-lines,
.odoo-record.has-chatter > .odoo-lines {
    grid-column: 1;
}
.odoo-record:has(.odoo-chatter) > .odoo-chatter,
.odoo-record.has-chatter > .odoo-chatter {
    grid-column: 2;
    grid-row: auto;
}
.odoo-record > [x-show] { min-width: 0; }
.odoo-record > .odoo-detail-wrapper { grid-column: 1/-1; width: 100%; }
.odoo-record > .odoo-record-full { grid-column: 1/-1; width: 100%; box-sizing: border-box; }
/* Alpine's x-show (without x-transition) toggles visibility by clearing
   element.style.display directly, which permanently wipes an inline
   `display: grid`/`display: flex` the first time it hides/shows the
   element. Keep the display value in a class instead so it survives. */
.tab-panel-grid { display:grid; }
.tab-panel-flex { display:flex; }
/* Transient highlight for "jump to this field" actions (e.g. Anlagen's
   "Zuordnung bearbeiten" button), so the target is visibly obvious even
   when it was already on screen and nothing else changed. */
.field-highlight { border-radius:6px; animation:field-highlight-pulse 1.6s ease-out; }
@keyframes field-highlight-pulse {
    0% { box-shadow:0 0 0 3px rgba(36, 86, 166,.35); background:#EEF3FA; }
    100% { box-shadow:0 0 0 0 rgba(36, 86, 166,0); background:transparent; }
}
.odoo-record-header { margin-bottom:.55rem !important; }
.odoo-record-actions { margin:0 0 .8rem; padding:.55rem .7rem; border:1px solid #d8dee6; border-radius:6px; background:#fff; }
.odoo-record-tabs { margin:.15rem 0 1rem; border-bottom:1px solid #cfd6df; }
.odoo-record-tabs .tab-btn--active { background:#fff; color:#2456A6; border-bottom:2px solid #2456A6; }
.odoo-record .card,.odoo-record .inventory-card { border-color:#d8dee6; border-radius:6px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.odoo-record .card-header,.odoo-record .inventory-card__header { min-height:2.8rem; padding:.7rem .9rem; background:#f8f9fa; border-bottom:1px solid #d8dee6; }
.odoo-record .odoo-lines { border-top:3px solid #2456A6; }
.odoo-record .odoo-lines .table thead th { background:#f8f9fa; color:#4b5563; font-weight:700; }
.odoo-record .odoo-chatter { border-left:3px solid #c7d2df; background:#fbfcfd; }
.odoo-record .odoo-chatter .card-header { background:#f1f3f5; }
/* Full-width Beleg architecture (Kopf ➔ Positionen ➔ Summen) */
.odoo-form-body { display: block !important; width: 100% !important; }
.odoo-form-main { width: 100% !important; min-width: 0 !important; }
.odoo-form-sidebar {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 1rem !important;
    margin-top: 1.25rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #cbd5e1 !important;
}
.odoo-side-card { padding:.85rem 1rem; border:1px solid #cbd5e1; border-radius:4px; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.odoo-side-card h3 { margin:0 0 .5rem; color:#475569; font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border-bottom:1px solid #e2e8f0; padding-bottom:0.35rem; }
.odoo-side-card p { margin:0; color:#64748b; font-size:.78rem; line-height:1.45; }
.odoo-side-card dl { display:grid; grid-template-columns:1fr; gap:.35rem; margin:0; }
.odoo-side-card dt { color:#64748b; font-size:.7rem; font-weight:600; text-transform:uppercase; }
.odoo-side-card dd { margin:0; color:#0f172a; font-size:.82rem; font-weight:650; }
.odoo-side-status { display:inline-flex; margin-bottom:.5rem; padding:.25rem .5rem; border-radius:4px; background:#eff6ff; color:#1B4179; font-size:.75rem; font-weight:700; }
.odoo-side-link { display:block; overflow:hidden; margin:.35rem 0; color:#13263F; font-size:.82rem; font-weight:650; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; }
.odoo-side-link:hover { text-decoration:underline; }
.odoo-chatter-panel { border-left:3px solid #13263F; }
.odoo-detail-page .odoo-record-actions { background:#fff; }
.odoo-record .breadcrumb,.odoo-record .detail-breadcrumb,.quote-breadcrumb { max-width:100%; margin-bottom:.45rem; }

/* Unified tabs, tables and position dialogs.  These overrides are shared by
   every module so legacy tab/table variants retain one predictable rhythm. */
.tabs, .odoo-record-tabs {
    display:flex;
    align-items:center;
    gap:.3rem;
    padding:.3rem;
    margin-bottom:1rem;
    overflow-x:auto;
    overflow-y:hidden !important;
    border:1px solid #d7dee8;
    border-radius:10px;
    background:#f6f8fb;
}
.tabs .tab-btn, .tabs .tab, .odoo-record-tabs .tab-btn, .odoo-record-tabs .tab {
    flex:0 0 auto;
    margin:0;
    min-height:2.25rem;
    padding:.5rem .85rem;
    border:1px solid transparent;
    border-radius:7px;
    color:#526173;
    font-weight:650;
}
.tabs .tab-btn:hover, .tabs .tab:hover, .odoo-record-tabs .tab-btn:hover, .odoo-record-tabs .tab:hover { background:#e9eef5; color:#243447; }
.tabs .tab-btn--active, .tabs .tab.active, .odoo-record-tabs .tab-btn--active, .odoo-record-tabs .tab.active {
    border-color:#c9d5e3;
    background:#fff;
    color:#2456A6;
    box-shadow:0 1px 2px rgba(15,23,42,.08);
}
.inventory-tabs-container { border-radius:10px; background:#f6f8fb; }
.inventory-tab { flex:0 0 auto; min-height:2.25rem; border:1px solid transparent; border-radius:7px; }
.inventory-tab.active { background:#fff; color:#2456A6; border-color:#c9d5e3; box-shadow:0 1px 2px rgba(15,23,42,.08); }
.table { width:100%; min-width:640px; table-layout:auto; }
.table th, .table td { vertical-align:middle; }
.inventory-card__table-wrap, .scroll-panel--table, .table-responsive { min-width:0; overflow-x:auto; }
.position-item-modal { width:min(960px, calc(100vw - 2rem)); max-width:960px; }
.position-item-form { gap:1rem; }
.position-item-links { display:grid; grid-column:1 / -1; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.85rem; }
.position-item-commercial { display:grid; grid-column:1 / -1; grid-template-columns:repeat(5, minmax(105px,1fr)); gap:.75rem; }
.position-item-form > .full select, .position-item-form > .full input, .position-item-links select, .position-item-commercial input { min-width:0; }
.party-autocomplete { position:relative; }
.party-autocomplete > input[type="search"] { width:100%; min-height:2.65rem; }
.selected-party { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; margin-top:.55rem; padding:.65rem .75rem; border:1px solid #b9d9d4; border-radius:8px; background:#EEF3FA; color:#134e4a; }
.selected-party strong { color:#115e59; }
.selected-party span { flex:1 1 260px; color:#3f625f; font-size:.82rem; }
.selected-party .btn { flex:0 0 auto; }

.contact-child-banner {
    display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; flex-wrap: wrap;
    margin: 0 0 1rem; padding: .85rem 1rem;
    border: 1px solid #99f6e4; border-radius: 10px;
    background: #EEF3FA; color: #134e4a;
}
.contact-child-banner a { color: #2456A6; }
.contact-child-banner a:hover { text-decoration: underline; }

/* Customer / contact organisation hierarchy */
.contact-hierarchy {
    margin: .85rem 0 1.1rem;
    padding: .9rem 1rem 1rem;
    border: 1px solid var(--border, #d7dee8);
    border-radius: 10px;
    background: var(--surface-alt, #f8fafc);
}
.contact-hierarchy__header { margin-bottom: .75rem; }
.contact-hierarchy__path {
    display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .15rem;
    margin: 0 0 .85rem; padding: .45rem .6rem;
    border-radius: 8px; background: #fff; border: 1px solid var(--border, #e2e8f0);
    font-size: .85rem;
}
.contact-hierarchy__crumb a { color: var(--primary, #2456A6); text-decoration: none; font-weight: 600; }
.contact-hierarchy__crumb a:hover { text-decoration: underline; }
.contact-hierarchy__crumb--current { font-weight: 700; color: var(--text, #0f172a); }
.contact-hierarchy__sep { margin: 0 .25rem; color: var(--text-muted, #94a3b8); }
.contact-hierarchy__children { margin-top: .85rem; padding-top: .75rem; border-top: 1px solid var(--border, #e2e8f0); }
.contact-hierarchy__children-head {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-bottom: .45rem;
}
.contact-hierarchy__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.contact-hierarchy__item { margin: 0; }
.contact-hierarchy__item-btn {
    width: 100%; display: flex; align-items: center; gap: .55rem; text-align: left;
    padding: .55rem .65rem; border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
    background: #fff; cursor: pointer; color: inherit;
}
.contact-hierarchy__item-btn:hover { border-color: #94a3b8; background: #f1f5f9; }
.contact-hierarchy__item-btn:focus-visible { outline: 2px solid var(--primary, #2456A6); outline-offset: 2px; }
.contact-name-cell--child { padding-left: .15rem; }
.contact-child-marker { color: var(--text-muted, #94a3b8); font-weight: 600; margin-right: .15rem; }
.contact-parent-link { color: var(--primary, #2456A6); text-decoration: none; font-weight: 600; font-size: .85rem; }
.contact-parent-link:hover { text-decoration: underline; }
.ui-module-shell > .card.p-4[x-show] { border-radius:12px; border:1px solid #d7dee8; box-shadow:0 2px 8px rgba(15,23,42,.05); }
.ui-module-shell > .card.p-4[x-show] > form > .modal__body,
.ui-module-shell > .card.p-4[x-show] > .card-body { padding:0; }
.ui-module-shell > .card.p-4[x-show] .form-grid { gap:1rem; }
@media (max-width:700px) {
    .position-item-links, .position-item-commercial { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
    .position-item-links, .position-item-commercial { grid-template-columns:1fr; }
}

/* One list-view contract for all modules.  Individual pages may add content,
   but the outer rhythm, search row and table frame stay identical. */
.ui-module-shell {
    width:100%;
    max-width:min(1440px, 100%);
    min-width:0;
    margin:0 auto;
    overflow-x:clip;
    box-sizing:border-box;
}
.ui-module-shell > .page-header,
.ui-module-shell > .inventory-header,
.ui-module-shell > .detail-header,
.ui-module-shell > .ui-detail-head {
    min-height:74px;
    padding:1rem 1.25rem;
    border:1px solid #d7dee8;
    border-radius:12px;
    background:#fff;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.ui-module-shell > .page-header h1,
.ui-module-shell > .inventory-header h1,
.ui-module-shell > .detail-header h1,
.ui-module-shell > .ui-detail-head h1 { margin:0; font-size:1.35rem; line-height:1.25; }
.ui-module-shell > .page-header p,
.ui-module-shell > .inventory-header p,
.ui-module-shell > .detail-header p { margin:.3rem 0 0; color:#64748b; font-size:.82rem; }
.ui-module-shell form.ui-search-form,
.ui-module-shell form.ui-filter-bar,
.ui-module-shell .filter-bar,
.ui-module-shell .ui-filter-bar {
    display:flex;
    align-items:center;
    gap:.65rem;
    flex-wrap:wrap;
    margin:0 0 1rem;
    padding:.75rem 1rem;
    border:1px solid #d7dee8;
    border-radius:10px;
    background:#fff;
    box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.ui-module-shell .ui-search-form > input[type="search"],
.ui-module-shell .ui-search-form > input[type="text"],
.ui-module-shell .ui-filter-bar > input[type="search"],
.ui-module-shell .ui-filter-bar > input[type="text"],
.ui-module-shell .filter-bar > input[type="search"],
.ui-module-shell .filter-bar > input[type="text"] { flex:1 1 260px; min-width:220px; }
.ui-module-shell .ui-search-form > select,
.ui-module-shell .ui-filter-bar > select,
.ui-module-shell .filter-bar > select { flex:0 1 190px; min-width:150px; }
.ui-module-shell .ui-search-form > .btn,
.ui-module-shell .ui-filter-bar > .btn,
.ui-module-shell .filter-bar > .btn { flex:0 0 auto; min-height:2.4rem; }
.ui-module-shell > .card:not(.modal),
.ui-module-shell > .inventory-card { border-radius:12px; border-color:#d7dee8; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.ui-module-shell .ui-table-wrap {
    width:100%;
    max-width:100%;
    min-width:0;
    border:1px solid #d7dee8;
    border-radius:10px;
    background:#fff;
    overflow-x:auto;
}
.ui-module-shell .ui-table-wrap.scroll-panel,
.ui-module-shell .scroll-panel.ui-table-wrap {
    overflow:auto; /* keep vertical scroll when JS also adds ui-table-wrap */
}
.ui-module-shell .ui-table-wrap > .ui-data-table,
.ui-module-shell .ui-table-wrap > table { margin:0; border:0; min-width:720px; }
.ui-module-shell .ui-data-table thead th { height:2.65rem; padding:.55rem .75rem; background:#f6f8fb; color:#526173; font-size:.7rem; font-weight:750; letter-spacing:.045em; text-transform:uppercase; white-space:nowrap; }
.ui-module-shell .ui-data-table tbody td { min-height:2.8rem; padding:.6rem .75rem; }
.ui-module-shell .page-header__actions,
.ui-module-shell .inventory-toolbar,
.ui-module-shell .detail-header__actions { gap:.5rem; }
@media (max-width:767px) {
    .ui-module-shell > .page-header,
    .ui-module-shell > .inventory-header,
    .ui-module-shell > .detail-header,
    .ui-module-shell > .ui-detail-head { padding:.85rem; }
    .ui-module-shell .ui-search-form,
    .ui-module-shell .ui-filter-bar,
    .ui-module-shell .filter-bar { align-items:stretch; flex-direction:column; }
    .ui-module-shell .ui-search-form > input,
    .ui-module-shell .ui-search-form > select,
    .ui-module-shell .ui-filter-bar > input,
    .ui-module-shell .ui-filter-bar > select,
    .ui-module-shell .filter-bar > input,
    .ui-module-shell .filter-bar > select,
    .ui-module-shell .ui-search-form > .btn,
    .ui-module-shell .ui-filter-bar > .btn,
    .ui-module-shell .filter-bar > .btn { width:100%; max-width:none; }
}

/* ---- Toast ---- */
.toast {
    position: fixed;
    bottom: 1rem; right: 1rem;
    padding: .75rem 1.25rem;
    background: var(--text); color: white;
    border-radius: var(--radius); z-index: 2000;
    box-shadow: var(--shadow-lg);
    font-size: .85rem; font-weight: 500;
    max-width: 320px;
    animation: fadeIn .3s ease;
}
@media (max-width: 767px) {
    .toast { bottom: calc(var(--nav-h) + 1rem); left: 1rem; right: 1rem; max-width: none; }
}

/* ---- Avatar (Tabler-style initials) ---- */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--radius-full);
    background: var(--primary-light); color: var(--primary-dark);
    font-size: .85rem; font-weight: 600;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.avatar--sm { width: 28px; height: 28px; font-size: .7rem; }

/* ---- Table (Tabler-style) ---- */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.table > thead > tr {
    border-bottom: 1px solid var(--border);
}
.table > thead > tr > th {
    padding: .6rem .75rem;
    font-size: .7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted);
    text-align: left;
    white-space: nowrap;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
}
.table > tbody > tr {
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}
.table > tbody > tr:hover {
    background: var(--surface-alt);
}
.table > tbody > tr:last-child {
    border-bottom: none;
}
.table > tbody > tr > td {
    padding: .65rem .75rem;
    vertical-align: middle;
}
.table-vcenter > tbody > tr > td {
    vertical-align: middle;
}
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* ---- Helpers ---- */
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-sm { font-size: .85rem; }
.text-xs { font-size: .75rem; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.hidden { display: none; }

/* ---- Responsive Helpers ---- */
@media (max-width: 767px) {
    .form-grid, .form-grid--3, .form-grid--4 { grid-template-columns: 1fr 1fr; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    h1 { font-size: 1.25rem; }
    .datagrid { grid-template-columns: 1fr; }
    .datagrid__item { border-right: none; }
}

@media (max-width: 390px) {
    .form-grid, .form-grid--3, .form-grid--4,
    .modal-form-grid { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Print ---- */
@media print {
    .sidebar, .bottomnav, .fab, .topbar__logout { display: none; }
    .page { max-width: 100%; margin: 0; padding: 0; }
    .card { box-shadow: none; border: 1px solid #ccc; }
}

/* ============================================================
   Lager & Materialwirtschaft - Dedicated ERP Design System
   ============================================================ */

.inventory-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Header & Actions Toolbar */
.inventory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
}
.inventory-header__title {
    flex: 1;
    min-width: 0;
}
.inventory-header__title h1 {
    margin: 0 0 0.25rem 0;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.inventory-header__title p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.inventory-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.inventory-toolbar .btn {
    min-height: 36px;
    padding: 0.4rem 0.85rem;
    font-size: 0.825rem;
    font-weight: 600;
}

/* KPI Grid: Exactly 6 symmetrical cards */
.inventory-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    width: 100%;
}
@media (max-width: 1200px) {
    .inventory-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 640px) {
    .inventory-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

.inventory-kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 0.75rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all var(--transition);
}
.inventory-kpi-card:hover {
    border-color: var(--border-dark);
    box-shadow: var(--shadow);
}
.inventory-kpi-card .kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.inventory-kpi-card .kpi-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* Modern Segmented Tab Bar */
.inventory-tabs-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.35rem;
    box-shadow: var(--shadow-sm);
}
.inventory-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    row-gap: 0.45rem;
    width: 100%;
    overflow-x: clip;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.inventory-tabs::-webkit-scrollbar {
    display: none;
}
.inventory-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition);
    flex: 0 0 auto;
    text-align: center;
    font-family: var(--font);
}
.inventory-tab:hover {
    background: var(--surface-alt);
    color: var(--text);
}
.inventory-tab.active {
    background: var(--primary);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(24, 100, 171, 0.25);
}
.inventory-tab.active .badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    border-color: transparent;
}

/* ==================== Warehouse Horizontal ERP Command Ribbon ====================
   Replaces the 220px vertical sidebar and large hero with an authoritative
   horizontal ribbon toolbar with dropdown submenus and direct action buttons. */
.inventory-shell {
    display: block;
    width: 100%;
}
.inventory-main {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.inventory-ribbon-bar {
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 40;
}
.inventory-ribbon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0.65rem;
    background: #ffffff;
    border: 1px solid var(--border, #cbd5e1);
    border-left: 3px solid #13263F;
    border-radius: 4px;
    min-height: 38px;
    box-sizing: border-box;
    flex-wrap: wrap;
}
.inventory-ribbon__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: #0f172a;
    white-space: nowrap;
    margin-right: 0.4rem;
}
.inventory-ribbon__icon {
    font-size: 1.1rem;
    line-height: 1;
}
.inventory-menubar {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
}
.inventory-menu {
    position: relative;
}
.inventory-menu__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
}
.inventory-menu__btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #13263F;
}
.inventory-menu__btn.is-active {
    background: #E0EBF7;
    border-color: #93C5FD;
    color: #13263F;
    font-weight: 700;
}
.inventory-menu__btn .caret {
    font-size: 0.6rem;
    opacity: 0.7;
    margin-left: 0.1rem;
}
.inventory-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
    padding: 0.3rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.inventory-dropdown__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.55rem;
    background: transparent;
    border: none;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #1e293b;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background 0.12s;
    width: 100%;
    box-sizing: border-box;
}
.inventory-dropdown__item:hover {
    background: #f1f5f9;
    color: #13263F;
    text-decoration: none;
}
.inventory-dropdown__item.is-active {
    background: #E0EBF7;
    color: #13263F;
    font-weight: 700;
}
.inventory-dropdown__divider {
    height: 1px;
    background: #e2e8f0;
    margin: 0.25rem 0;
}
.inventory-ribbon__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    flex-wrap: nowrap;
}
.inventory-scanbar {
    margin-top: 0.35rem;
    background: #ffffff;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 4px;
    padding: 0.35rem 0.65rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.inventory-scanbar-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.inventory-scanbar-input {
    flex: 1;
    min-height: 30px;
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    background: #ffffff;
}
.inventory-scanbar-input:focus {
    outline: none;
    border-color: #13263F;
    box-shadow: 0 0 0 2px rgba(11, 48, 86, 0.12);
}
@media (max-width: 992px) {
    .inventory-tab {
        flex: 0 0 auto;
        padding: 0.5rem 0.85rem;
    }
}

/* Card & Table Layout */
.inventory-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    width: 100%;
}
.inventory-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1.25rem;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    gap: 1rem;
    flex-wrap: wrap;
}
.inventory-card__header-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.inventory-card__header-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.inventory-card__table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.inventory-card__table-wrap .table {
    margin-bottom: 0;
    width: 100%;
}
.inventory-card__table-wrap .table th {
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Inventur: mobile Zählliste + Differenzfreigabe */
.inventur-diff-summary {
    margin: 0.75rem 1rem 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
}
.inventur-diff-summary__title {
    font-weight: 700;
    font-size: 0.9rem;
}
.inventur-diff-summary__meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.inventur-diff-summary__list {
    list-style: none;
    margin: 0.55rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.inventur-diff-summary__list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    padding: 0.4rem 0.5rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
}
.inventur-count-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
}
.inventur-count-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 0.75rem 0.85rem;
}
.inventur-count-card--diff,
.inventur-row--diff {
    border-color: #f59e0b;
    background: #fffbeb;
}
.inventur-count-card__head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.65rem;
}
.inventur-count-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 0.75rem;
}
.inventur-count-card__notes {
    grid-column: 1 / -1;
}
.inventur-count-input {
    width: 100%;
    max-width: 10rem;
    text-align: right;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    min-height: 2.5rem;
}
.inventur-notes-input {
    width: 100%;
}
.inventur-count-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(180deg, transparent, var(--surface) 35%);
    border-top: 1px solid var(--border);
}
.inventur-diff {
    font-weight: 600;
}
.inventur-diff--neg { color: #b91c1c; }
.inventur-diff--pos { color: #15803d; }
@media (min-width: 900px) {
    .inventur-count-card__grid {
        grid-template-columns: 1fr 1fr 1fr 1.4fr;
    }
    .inventur-count-card__notes {
        grid-column: auto;
    }
}

/* 2-Column Responsive Grid */
.bridge-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    width: 100%;
}
@media (max-width: 992px) {
    .bridge-grid-2 {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   Voice Command - Standardized Card & Unified Input Group
   ============================================================ */
.voice-command-card,
.card:has(.voice-command) {
    background: var(--surface, #ffffff) !important;
    border: 1px solid var(--border, #cbd5e1) !important;
    border-radius: 4px !important;
    padding: 0.25rem 0.5rem !important;
    margin-bottom: 0.5rem !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}
.voice-command-card .card-body,
.card:has(.voice-command) > .card-body {
    padding: 0 !important;
    margin: 0 !important;
}
.voice-command-card .voice-command,
.card:has(.voice-command) .voice-command {
    margin-bottom: 0 !important;
    padding: 0 !important;
}
.voice-command {
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Input group: text field + mic + send button in one row */
.voice-input-group {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 4px;
    background: var(--surface, #ffffff);
    transition: border-color var(--transition, 0.15s ease), box-shadow var(--transition, 0.15s ease);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}
.voice-input-group:focus-within {
    border-color: var(--primary, #13263F);
    box-shadow: 0 0 0 2px rgba(11, 48, 86, .12);
}
.voice-input-group--listening {
    border-color: var(--danger, #dc2626);
    box-shadow: 0 0 0 3px rgba(192, 42, 42, .12);
}

/* Text input - fills available space, no own border */
.voice-input {
    flex: 1;
    min-width: 0;
    padding: .3rem .6rem;
    border: none;
    background: transparent;
    font-size: .82rem;
    font-family: var(--font, inherit);
    color: var(--text, #1e293b);
    outline: none;
    min-height: 28px;
    max-height: 120px;
    line-height: 1.3;
    resize: vertical;
    box-sizing: border-box;
}
.voice-input:disabled {
    color: var(--text-muted, #94a3b8);
    cursor: not-allowed;
}
.voice-input::placeholder {
    color: var(--text-muted, #94a3b8);
}

/* Mic button - inside the input, right side, before send */
.voice-mic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: auto;
    height: 40px;
    border: none;
    border-left: 1px solid var(--border, #e2e8f0);
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    transition: all var(--transition, 0.15s ease);
    padding: 0 .85rem;
    gap: .4rem;
    white-space: nowrap;
    overflow: hidden;
    font-size: .82rem;
    font-weight: 600;
}
.voice-button-label {
    font-size: .78rem;
    font-weight: 600;
}
.voice-mic-btn:hover:not(:disabled) {
    background: #f1f5f9;
    color: #2456A6;
}
.voice-mic-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.voice-mic-btn--active {
    background: var(--danger, #dc2626);
    color: #fff;
    border-left-color: var(--danger, #dc2626);
}
.voice-mic-btn--active:hover {
    background: #b91c1c;
    color: #fff;
}
.voice-mic-btn--pulse {
    animation: voice-pulse-anim 1.2s ease-in-out infinite;
}
@keyframes voice-pulse-anim {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 42, 42, .4); }
    50% { box-shadow: 0 0 0 6px rgba(192, 42, 42, 0); }
}

/* Send button - rightmost, primary color */
.voice-send-btn {
    flex-shrink: 0;
    border-radius: 0 !important;
    border: none !important;
    border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 1.15rem !important;
    font-weight: 650 !important;
}

/* Listening bar - appears below input when recording */
.voice-listening-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
    padding: .4rem .75rem;
    background: rgba(192, 42, 42, .06);
    border-radius: var(--radius-sm);
    font-size: .85rem;
    color: var(--danger);
}
.voice-listening-text {
    font-weight: 600;
}
.voice-interim {
    color: var(--text-muted);
    font-style: italic;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.voice-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--danger);
    flex-shrink: 0;
    animation: voice-dot-pulse 1s ease-in-out infinite;
}
@keyframes voice-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(.8); }
}

/* Result panel */
.voice-result {
    margin-top: .75rem;
    padding: .75rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-alt);
}
.voice-result--success {
    border-color: var(--success);
    background: rgba(43, 156, 70, .04);
}
.voice-result--warning {
    border-color: var(--warning);
    background: rgba(233, 164, 4, .04);
}
.voice-result__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}
.voice-result__info {
    flex: 1;
    min-width: 0;
}
.voice-result__agent,
.voice-result__confidence,
.voice-result__hint {
    margin-left: .5rem;
    color: var(--text-muted);
    font-size: .8rem;
}
.voice-result__close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    padding: .15rem .35rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    flex-shrink: 0;
}
.voice-result__close:hover {
    background: var(--surface-hover);
    color: var(--text);
}
.voice-result__desc {
    margin: .25rem 0 0;
    color: var(--text-muted);
    font-size: .85rem;
}
.voice-result__target {
    margin-top: .5rem;
    padding: .5rem;
    background: var(--surface);
    border-radius: var(--radius-sm);
}
.voice-result__target-status {
    font-size: .85rem;
}
.voice-result__target-msg {
    font-size: .85rem;
    margin-top: .25rem;
    color: var(--text-muted);
}
.voice-result__target-action {
    margin-top: .5rem;
}

/* Suggestions list */
.voice-suggestions {
    margin-top: .5rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.voice-suggestion {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition);
}
.voice-suggestion:hover {
    background: var(--surface-hover);
}
.voice-suggestion__arrow {
    color: var(--text-muted);
    flex-shrink: 0;
}
.voice-suggestion__main {
    flex: 1;
    min-width: 0;
}
.voice-suggestion__title {
    font-size: .85rem;
    font-weight: 500;
}
.voice-suggestion__desc {
    font-size: .8rem;
    color: var(--text-muted);
}

/* Mobile: keep input group compact */
@media (max-width: 768px) {
    .voice-input-group {
        flex-wrap: nowrap;
    }
    .voice-mic-btn {
        width: 44px;
        height: 44px;
        padding: 0;
        gap: 0;
        overflow: hidden;
    }
    .voice-button-label { display: none; }
    .voice-send-btn {
        padding: .35rem .6rem;
        min-width: 0;
    }
    .voice-input { min-width: 0; }
}

/* ============================================================
   Agent Quick Actions Bar (KI-Schnellbefehle)
   ============================================================ */
.agent-quick-section {
    background: var(--surface-alt, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 8px);
    padding: 0.65rem 0.9rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.agent-quick-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.agent-quick-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main, #1e293b);
}
.agent-quick-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(11, 48, 86, 0.1);
    color: var(--primary, #13263F);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.agent-quick-subtitle {
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    font-weight: normal;
}
.agent-quick-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}
.agent-quick-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #cbd5e1);
    color: var(--text-main, #1e293b);
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    text-decoration: none;
    user-select: none;
}
.agent-quick-chip:hover {
    background: #f1f5f9;
    border-color: var(--primary, #13263F);
    color: var(--primary, #13263F);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
}
.agent-quick-chip:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.agent-quick-chip--loading {
    border-color: var(--primary, #13263F);
    background: rgba(11, 48, 86, 0.04);
}
.agent-quick-chip__icon {
    font-size: 0.95rem;
    line-height: 1;
}
.agent-quick-chip__label {
    white-space: nowrap;
}
.agent-quick-feedback {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(11, 48, 86, 0.06);
    color: var(--primary, #13263F);
}
.agent-quick-feedback--success {
    background: rgba(43, 156, 70, 0.1);
    color: var(--success, #2b9c46);
}
.agent-quick-feedback--error {
    background: rgba(192, 42, 42, 0.1);
    color: var(--danger, #c02a2a);
}

/* ============================================================
   Scrollable Panels - Fixed-height scrollable lists & tables
   Usage: <div class="scroll-panel"> <div class="list">...</div> </div>
   Or:    <div class="scroll-panel scroll-panel--table"> <table>...</table> </div>
   ============================================================ */
.scroll-panel {
    max-height: 480px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: .5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border-dark) transparent;
}
.scroll-panel::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.scroll-panel::-webkit-scrollbar-track {
    background: transparent;
}
.scroll-panel::-webkit-scrollbar-thumb {
    background: var(--border-dark);
    border-radius: 4px;
}
.scroll-panel::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* When wrapping a .list, remove outer border (panel provides it) */
.scroll-panel > .list {
    gap: .35rem;
}

/* Table variant: sticky header */
.scroll-panel--table {
    padding: 0;
    overflow: auto;
}
.scroll-panel--table > .table,
.scroll-panel--table > .table-responsive {
    margin: 0;
    border: none;
    border-radius: 0;
}
.scroll-panel--table > .table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface-alt);
}

/* Compact variant for smaller panels */
.scroll-panel--sm {
    max-height: 320px;
}

/* Tall variant for full-page lists */
.scroll-panel--lg {
    max-height: 65vh;
}

/* Cockpit: 4 panels in 2x2 grid, each independently scrollable */
.cockpit-panels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
@media (max-width: 992px) {
    .cockpit-panels {
        grid-template-columns: 1fr;
    }
}
.cockpit-panel__title {
    font-size: 1rem;
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cockpit-panel__count {
    font-size: .75rem;
    color: var(--text-muted);
    font-weight: 500;
}


/* ============================================================
   Design v4 — Modern component refresh (2026-09)
   Dark sidebar + refined light content. Overrides earlier rules.
   ============================================================ */

:root {
    --bg: #F4F6F8;
    --border: #E3E7EC;
    --border-dark: #D3DAE6;
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow: 0 1px 3px rgba(16, 24, 40, .07), 0 6px 16px rgba(16, 24, 40, .06);
    --shadow-lg: 0 8px 24px rgba(16, 24, 40, .12), 0 24px 48px rgba(16, 24, 40, .10);
    --ring: 0 0 0 3px rgba(36, 86, 166, .35);
}

body { background: var(--bg); }

/* ---------- Buttons ---------- */
.btn {
    border-radius: 7px;
    font-weight: 600;
    letter-spacing: .005em;
    transition: background .13s ease, border-color .13s ease,
                box-shadow .13s ease, color .13s ease;
}

.btn--primary {
    background: var(--primary);
    box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--primary-dark); box-shadow: var(--shadow); }

.btn--accent {
    background: #334155;
    box-shadow: var(--shadow-sm);
}
.btn--accent:hover { background: #1E293B; box-shadow: var(--shadow); }

.btn--success { box-shadow: 0 1px 2px rgba(47, 158, 68, .3); }
.btn--success:hover { box-shadow: 0 3px 8px rgba(47, 158, 68, .35); }
.btn--danger { box-shadow: 0 1px 2px rgba(224, 49, 49, .3); }
.btn--danger:hover { box-shadow: 0 3px 8px rgba(224, 49, 49, .35); }

.btn--ghost {
    background: var(--surface);
    border-color: var(--border-dark);
    box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { background: var(--surface-alt); border-color: #B9C3D4; box-shadow: var(--shadow); }

.btn--outline {
    border-color: rgba(36, 86, 166, .45);
    background: rgba(36, 86, 166, .05);
}
.btn--outline:hover { background: var(--primary-light); border-color: var(--primary); }

.btn--xs, .btn--sm { border-radius: 6px; }
.btn--xs.btn--ghost { box-shadow: none; }

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card--clickable:hover {
    box-shadow: var(--shadow);
    border-color: var(--border-dark);
}
.card-header {
    border-bottom: 1px solid #EEF1F6;
    background: var(--surface-alt);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: .75rem 1.25rem;
}
.card-title { font-weight: 700; letter-spacing: -.01em; }

/* ---------- KPI Cards ---------- */
.kpi-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), border-color var(--transition);
}
.kpi-card:hover {
    box-shadow: var(--shadow);
    border-color: var(--border-dark);
}
.kpi-value { font-size: 1.65rem; font-weight: 700; letter-spacing: -.03em; }
.kpi-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Tables ---------- */
.table > thead > tr > th {
    background: transparent;
    border-bottom: 1.5px solid var(--border-dark);
    font-size: .68rem; font-weight: 700;
    letter-spacing: .07em;
    color: #64748B;
    padding: .55rem .75rem;
}
.table > tbody > tr {
    border-bottom: 1px solid #EEF1F6;
}
.table > tbody > tr:hover { background: #F3F6FB; }
.table > tbody > tr:last-child { border-bottom: none; }
.table > tbody > tr > td { padding: .6rem .75rem; }
.table .sortable:hover { color: var(--primary); }

/* ---------- Forms ---------- */
label { font-size: .78rem; font-weight: 600; color: #475569; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    padding: .52rem .7rem;
    background: #FCFDFE;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
input:hover, select:hover, textarea:hover { border-color: #B9C3D4; }
input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: var(--ring);
    background: var(--surface);
}
input::placeholder, textarea::placeholder { color: #94A3B8; }
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .65rem center;
    padding-right: 1.8rem;
}

/* ---------- Modals ---------- */
.modal-overlay { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); background: rgba(15, 23, 42, .45); }
.modal {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.modal__header { padding: .9rem 1.4rem; border-bottom: 1px solid #EEF1F6; }
.modal__footer { border-top: 1px solid #EEF1F6; }
.modal__close { border-radius: 7px; }

/* ---------- Filter / Tabs — segmented look ---------- */
.filter-bar {
    gap: .35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .35rem;
    display: inline-flex;
    box-shadow: var(--shadow-sm);
}
.filter-bar .btn--sm { border-radius: 7px; min-height: 32px; }
.filter-bar .btn--ghost { border-color: transparent; box-shadow: none; color: var(--text-muted); }
.filter-bar .btn--ghost:hover { background: var(--surface-alt); }
.filter-bar .btn--primary { box-shadow: 0 1px 3px rgba(30,64,175,.3); }

.tabs { border-bottom: 1.5px solid var(--border); gap: .5rem; }
.tab-btn, .tab { font-weight: 500; }
.tab-btn--active { font-weight: 700; }

/* ---------- Badges ---------- */
.badge {
    border-radius: var(--radius-full);
    font-weight: 600;
    letter-spacing: .01em;
    padding: .2rem .6rem;
}

/* ---------- List items ---------- */
.list-item {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: box-shadow .13s ease, border-color .13s ease;
}

/* ---------- Datagrid ---------- */
.datagrid {
    border-color: var(--border);
    border-radius: var(--radius-sm);
}
.datagrid__item { border-color: #EEF1F6; }

/* ---------- Page header ---------- */
.page-header {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.15rem 1.35rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.page-header h1 {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -.025em;
    margin: 0;
    color: #0f172a;
}
.page-header .subtitle {
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 0;
}
.page-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------- Toast ---------- */
.toast {
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
}

/* ---------- Pagination Bar ---------- */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    border-top: 1px solid var(--border);
    background: var(--surface-alt, #f8fafc);
    border-radius: 0 0 var(--radius) var(--radius);
}
.pagination-bar .btn--xs {
    min-height: 28px;
    padding: 0.2rem 0.55rem;
    font-size: 0.78rem;
    border-radius: 6px;
}
.pagination-bar .btn--primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ---------- Empty states ---------- */
.empty { padding: 3rem 1rem; }
.empty__icon { opacity: .4; filter: grayscale(20%); }

/* ---------- Bottom nav (mobile) ---------- */
.bottomnav {
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
}
.bottomnav__item.active { color: var(--primary); font-weight: 600; }
.bottomnav__badge--tasks { background: #2456a6; }
.bottomnav__badge--review { background: #d97706; }

/* ---------- Scroll panels ---------- */
.scroll-panel--table {
    border-radius: var(--radius-sm);
}

/* ---------- Focus visibility global ---------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}


/* ============================================================
   Responsive v4 — Tablet & small laptop optimization
   768–1279px: icon-only sidebar (expand on hover)
   ============================================================ */

/* ============================================================
   Responsive Layout & Sidebar Breakpoints
   ============================================================ */

@media (max-width: 1023px) {
    /* Mobile / Small Tablet: Off-canvas navigation */
    .sidebar {
        display: none;
    }
    .sidebar.mobile-open {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(85vw, 300px) !important;
        background: #FFFFFF !important;
        z-index: 200 !important;
        box-shadow: 8px 0 32px rgba(15, 23, 42, 0.2) !important;
        overflow-y: auto !important;
    }
    .sidebar.mobile-open .sidebar__close-btn {
        display: inline-flex !important;
    }
    .topbar {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .page {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 1rem 1.15rem !important;
    }
    .page-header h1 { font-size: 1.3rem; }
    .card { padding: 1rem; }
    .card-header { padding: .65rem 1rem; margin: -1rem -1rem 1rem; }
    .kpi-value { font-size: 1.45rem; }
    .form-grid, .form-grid--3 { grid-template-columns: 1fr 1fr; }
    .form-grid--4 { grid-template-columns: 1fr 1fr 1fr; }
    .grid-3 { grid-template-columns: 1fr 1fr; }
    .datagrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .table > thead > tr > th { padding: .5rem .6rem; font-size: .65rem; }
    .table > tbody > tr > td { padding: .52rem .6rem; font-size: .83rem; }
    .modal { max-width: 92vw; }
    .modal--lg { max-width: 92vw; }
    .filter-bar { max-width: 100%; overflow-x: auto; }
}

@media (min-width: 1024px) {
    /* Desktop: Permanent visible sidebar with crisp depth */
    .sidebar {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: var(--sidebar-w, 256px) !important;
        background: #FFFFFF !important;
        border-right: 1px solid #E2E8F0 !important;
        box-shadow: 2px 0 16px rgba(15, 23, 42, 0.05) !important;
        z-index: 100 !important;
        overflow-x: hidden !important;
    }
    .topbar {
        margin-left: var(--sidebar-w, 256px) !important;
        width: calc(100% - var(--sidebar-w, 256px)) !important;
    }
    .page {
        margin-left: var(--sidebar-w, 256px) !important;
        width: calc(100% - var(--sidebar-w, 256px)) !important;
        max-width: calc(100vw - var(--sidebar-w, 256px)) !important;
    }
}

/* ============================================================
   Main Navigation — Elevated White Architectural ERP Sidebar
   ============================================================ */
:root {
    --sidebar-w: 256px;
    --sidebar-bg: #FFFFFF;
    --sidebar-bg-alt: #F8FAFC;
    --sidebar-text: #334155;
    --sidebar-text-hover: #0F172A;
    --sidebar-active-bg: #EEF3FA;
    --sidebar-active-text: #1B4179;
    --sidebar-section-label: #64748B;
    --sidebar-border: #E2E8F0;
}

.sidebar {
    width: var(--sidebar-w, 256px);
    background: #FFFFFF !important;
    border-right: 1px solid #E2E8F0 !important;
    box-shadow: 2px 0 16px rgba(15, 23, 42, 0.05) !important;
}
.sidebar__header-row {
    border-bottom: 1px solid #E2E8F0;
    background: #FFFFFF !important;
    min-height: var(--top-h, 56px);
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sidebar__brand {
    height: 60px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
    background: transparent;
}
.sidebar__brand .brand-logo-img {
    height: 42px;
    opacity: 1;
    filter: none !important;
}
.sidebar__nav {
    padding: 0.5rem 0.65rem 1.25rem;
    gap: 0;
    background: #FFFFFF !important;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #E2E8F0 transparent;
}
.sidebar__nav::-webkit-scrollbar { width: 5px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }

.sidebar__section {
    margin-top: 0.85rem;
    padding-top: 0.65rem;
    border-top: 1px solid #F1F5F9;
}
.sidebar__section:first-child {
    margin-top: 0.15rem;
    padding-top: 0;
    border-top: none;
}
.sidebar__section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.32rem 0.55rem;
    margin-bottom: 0.2rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #64748B;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.sidebar__section-label:hover {
    background: #F1F5F9;
    color: #0F172A;
}
.sidebar__section-label-text { flex: 1; text-align: left; }
.sidebar__section-caret {
    flex-shrink: 0;
    font-size: 0.62rem;
    color: #64748B;
    transition: transform 0.16s ease;
}
.sidebar__section-caret.is-collapsed { transform: rotate(-90deg); }
.sidebar__section-body { display: flex; flex-direction: column; }

.sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 38px;
    padding: 0.42rem 0.65rem;
    margin: 1.5px 0;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #334155;
    font-size: 0.845rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.sidebar__link:hover {
    background: #F8FAFC;
    border-color: #E2E8F0;
    color: #0F172A;
    text-decoration: none;
}
.sidebar__link.active {
    background: #EEF3FA !important;
    border-color: #D6E0EE !important;
    border-left: 3px solid #2456A6 !important;
    color: #1B4179 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.sidebar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    flex: 0 0 18px;
    color: #8CA0B6;
    line-height: 0;
}
.sidebar__link:hover .sidebar__icon { color: #334155; }
.sidebar__link.active .sidebar__icon { color: #2456A6; }
.sidebar__badge {
    margin-left: auto;
    min-width: 20px;
    height: 19px;
    padding: 0 0.38rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #DC2626;
    color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.2);
    font-size: 0.63rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.sidebar__badge--tasks { background: #2456A6; box-shadow: 0 1px 3px rgba(36, 86, 166, 0.22); }
.sidebar__badge--review { background: #D97706; box-shadow: 0 1px 3px rgba(217, 119, 6, 0.2); }
.sidebar__footer {
    padding: 0.85rem 1rem 1rem;
    border-top: 1px solid #E2E8F0 !important;
    background: #F8FAFC !important;
    margin-top: auto;
}
.sidebar__user {
    color: #0F172A !important;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.15rem 0.15rem 0.55rem;
}
.sidebar__footer .btn--ghost {
    border-color: #CBD5E1 !important;
    background: #FFFFFF !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.sidebar__footer .btn--ghost:hover {
    background: #F1F5F9 !important;
    color: #0F172A !important;
    border-color: #94A3B8 !important;
}



/* Small laptop landscape tweaks (1024–1279): KPIs still fit */
@media (min-width: 1024px) and (max-width: 1279px) {
    .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* Tablet portrait & large phones (600–767): more breathing room than phone */
@media (min-width: 600px) and (max-width: 767px) {
    .page { padding: 1rem 1.25rem; }
    .form-grid { grid-template-columns: 1fr 1fr; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .modal { max-width: 94vw; margin: 1rem auto; }
}

/* Very small phones (<480): single column forms, compact headers */
@media (max-width: 480px) {
    .page { padding: .75rem .85rem; }
    .page-header { flex-direction: column; align-items: stretch; gap: .6rem; }
    .page-header__actions { width: 100%; }
    .page-header__actions .btn { flex: 1; justify-content: center; }
    .page-header h1 { font-size: 1.25rem; }
    .form-grid, .form-grid--3, .form-grid--4 { grid-template-columns: 1fr !important; }
    .address-grid { grid-template-columns: 1fr !important; }
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .kpi-value { font-size: 1.3rem; }
    .card { padding: .85rem; }
    .card-header { margin: -.85rem -.85rem .85rem; padding: .6rem .85rem; }
    .datagrid { grid-template-columns: 1fr 1fr; }
    .filter-bar { display: flex; max-width: 100%; overflow-x: auto; }
    .modal { max-width: 96vw; margin: .5rem auto; border-radius: 12px; }
    .modal__body { padding: 1rem; }
    .modal__header { padding: .75rem 1rem; }
}

/* ---------- Responsive table columns ---------- */
/* Hide less important columns instead of forcing horizontal scroll */
@media (max-width: 1024px) {
    .col-hide-md { display: none !important; }
}
@media (max-width: 767px) {
    .col-hide-sm { display: none !important; }
}
@media (max-width: 480px) {
    .col-hide-xs { display: none !important; }
}

/* ---------- Button overflow safety ---------- */
@media (max-width: 767px) {
    .btn { min-width: 0; }
    .page-header__actions .btn,
    .action-bar .btn,
    .modal__footer .btn {
        min-width: 0;
        flex-shrink: 1;
    }
}

/* ---------- Tabs v4: enclosed card tabs ---------- */
.tabs {
    display: flex; gap: 2px;
    border-bottom: 1.5px solid var(--border-dark);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
}
.tab-btn, .tab {
    position: relative;
    background: transparent;
    border: 1.5px solid transparent;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    padding: .55rem 1.15rem;
    cursor: pointer;
    font-size: .85rem;
    color: var(--text-muted);
    margin-bottom: -1.5px;
    white-space: nowrap;
    font-family: var(--font);
    font-weight: 500;
    text-decoration: none;
    transition: color .12s ease, background .12s ease, border-color .12s ease;
    flex-shrink: 0;
}
.tab-btn:hover:not(.tab-btn--active), .tab:hover:not(.tab-btn--active) {
    color: var(--text);
    background: var(--surface-alt);
}
.tab-btn--active {
    background: var(--surface);
    border-color: var(--border-dark);
    color: var(--primary);
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 -3px 8px rgba(16, 24, 40, .05);
}
.tab-btn--active::before {
    content: "";
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 3px;
    background: var(--primary);
    border-radius: 3px 3px 0 0;
}
/* Active tab visually covers the tabbar border → connected card look */
.tabs .tab-btn--active { margin-bottom: -1.5px; }

/* ---------- Tabs v5: segmented control — unmistakably tabs ---------- */
.tabs {
    display: inline-flex;
    gap: 3px;
    max-width: 100%;
    background: #E8ECF2;
    border: 1px solid #DBE1EA;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 1.4rem;
    overflow-x: auto;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid #DBE1EA;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04);
}
.tab-btn, .tab {
    position: relative;
    border: none;
    border-radius: 9px;
    padding: .5rem 1.05rem;
    cursor: pointer;
    font-size: .83rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: #64748B;
    background: transparent;
    white-space: nowrap;
    font-family: var(--font);
    text-decoration: none;
    transition: color .12s ease, background .12s ease, box-shadow .12s ease;
    flex-shrink: 0;
    margin-bottom: 0;
    line-height: 1.4;
}
.tab-btn:hover:not(.tab-btn--active), .tab:hover:not(.tab-btn--active) {
    color: #334155;
    background: rgba(255, 255, 255, .65);
}
.tab-btn--active {
    background: var(--surface);
    color: var(--primary);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .14), 0 1px 2px rgba(16, 24, 40, .06);
}
.tab-btn--active::before { display: none; }
/* Keep the row block-level wide on desktop for layout stability */
@media (min-width: 768px) {
    .tabs { display: inline-flex; }
}
@media (max-width: 767px) {
    .tabs { display: flex; width: 100%; }
    .tab-btn, .tab { flex: 0 0 auto; }
}

/* ---------- Tabs v6: crisp high-contrast segmented ---------- */
.tabs {
    display: inline-flex;
    gap: 2px;
    max-width: 100%;
    background: #F2F5F9;
    border: 1px solid #D9E0EA;
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 1.4rem;
    overflow-x: auto;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.tab-btn, .tab {
    position: relative;
    border: none;
    border-radius: 7px;
    padding: .45rem .95rem;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .005em;
    color: #475569;
    background: transparent;
    white-space: nowrap;
    font-family: var(--font);
    text-decoration: none;
    transition: color .12s ease, background .12s ease;
    flex-shrink: 0;
    margin-bottom: 0;
    line-height: 1.35;
}
.tab-btn:hover:not(.tab-btn--active), .tab:hover:not(.tab-btn--active) {
    color: #0F172A;
    background: rgba(255, 255, 255, .8);
}
.tab-btn--active {
    background: #1E293B;
    color: #FFFFFF;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.tab-btn--active::before { display: none; }
@media (max-width: 767px) {
    .tabs { display: flex; width: 100%; }
    .tab-btn, .tab { flex: 0 0 auto; padding: .45rem .8rem; }
}
/* Authoritative German Behörden & ERP system: uniform geometry and high data density */
.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 10px !important;
    border-radius: 3px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    text-decoration: none !important;
    vertical-align: middle !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #1e293b !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease !important;
}
.btn:hover:not(:disabled) {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    transform: none !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1) !important;
}
.btn:active:not(:disabled) {
    background: #e2e8f0 !important;
    transform: none !important;
}
.btn:focus-visible {
    outline: 2px solid #13263F !important;
    outline-offset: 2px !important;
}
.btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
}
.btn--primary, button.btn--primary, a.btn--primary, input.btn--primary,
.btn-primary, button.btn-primary, a.btn-primary, .btn--dominant {
    background: #13263F !important;
    color: #ffffff !important;
    border: 1px solid #0B1929 !important;
    box-shadow: 0 1px 2px rgba(11, 48, 86, 0.25) !important;
}
.btn--primary:hover:not(:disabled), button.btn--primary:hover:not(:disabled), a.btn--primary:hover,
.btn-primary:hover:not(:disabled), button.btn-primary:hover:not(:disabled), a.btn-primary:hover,
.btn--dominant:hover:not(:disabled) {
    background: #0B1929 !important;
    border-color: #08131F !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(11, 48, 86, 0.35) !important;
}
.btn--secondary, button.btn--secondary, a.btn--secondary, input.btn--secondary,
.btn-secondary, button.btn-secondary, a.btn-secondary,
.btn--outline, button.btn--outline, a.btn--outline, input.btn--outline,
.btn-outline, button.btn-outline, a.btn-outline {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #94a3b8 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.btn--secondary:hover:not(:disabled), button.btn--secondary:hover:not(:disabled), a.btn--secondary:hover,
.btn-secondary:hover:not(:disabled), button.btn-secondary:hover:not(:disabled), a.btn-secondary:hover,
.btn--outline:hover:not(:disabled), button.btn--outline:hover:not(:disabled), a.btn--outline:hover {
    background: #f1f5f9 !important;
    border-color: #64748b !important;
    color: #0f172a !important;
}
.btn--ghost, button.btn--ghost, a.btn--ghost,
.btn-ghost, button.btn-ghost, a.btn-ghost {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}
.btn--ghost:hover:not(:disabled), button.btn--ghost:hover:not(:disabled), a.btn--ghost:hover,
.btn-ghost:hover:not(:disabled), button.btn-ghost:hover:not(:disabled), a.btn-ghost:hover {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}
.btn--success, button.btn--success, a.btn--success, .btn-success, button.btn-success, a.btn-success {
    background: #15803d !important;
    color: #ffffff !important;
    border: 1px solid #166534 !important;
    box-shadow: 0 1px 2px rgba(21, 128, 61, 0.25) !important;
}
.btn--success:hover:not(:disabled), button.btn--success:hover:not(:disabled), a.btn--success:hover {
    background: #14532d !important;
    border-color: #052e16 !important;
    color: #ffffff !important;
}
.btn--danger, button.btn--danger, a.btn--danger, .btn-danger, button.btn-danger, a.btn-danger {
    background: #b91c1c !important;
    color: #ffffff !important;
    border: 1px solid #991b1b !important;
    box-shadow: 0 1px 2px rgba(185, 28, 28, 0.25) !important;
}
.btn--danger:hover:not(:disabled), button.btn--danger:hover:not(:disabled), a.btn--danger:hover {
    background: #991b1b !important;
    border-color: #7f1d1d !important;
    color: #ffffff !important;
}
.btn--warning, button.btn--warning, a.btn--warning, .btn-warning, button.btn-warning, a.btn-warning {
    background: #fffbeb !important;
    color: #92400e !important;
    border: 1px solid #f59e0b !important;
}
.btn--warning:hover:not(:disabled), button.btn--warning:hover:not(:disabled), a.btn--warning:hover {
    background: #fef3c7 !important;
    border-color: #d97706 !important;
}
.btn--sm, button.btn--sm, a.btn--sm {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    border-radius: 3px !important;
}
.btn--xs, button.btn--xs, a.btn--xs {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}
/* Folder select rendered as a tiny action — keep it looking like a control */
select.btn--xs { padding: 0 4px 0 8px !important; }
button.btn, a.btn, input.btn, .btn {
    min-height: 30px;
}
.action-bar, .page-actions, .page-header__actions, .ui-action-bar, .detail-header__actions, .record-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
}

/* Cross-module ERP shell: Behörden/ERP desktop layout with high data density */
.page-header, .ui-page-header, .inventory-header, .detail-header, .ui-detail-head {
    min-height: auto !important;
    padding: 0.65rem 0.95rem !important;
    margin-bottom: 0.75rem !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.page-header h1, .ui-page-header h1, .inventory-header h1, .detail-header h1, .ui-detail-head__title {
    margin: 0 !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
}
.page-header .subtitle, .page-header p, .ui-page-header p, .inventory-header p, .detail-header p {
    margin: 0.2rem 0 0 !important;
    color: #64748b !important;
    font-size: 0.8rem !important;
}
.card {
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    background: #ffffff !important;
}
.card-header {
    border-bottom: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    font-weight: 700 !important;
    padding: 0.6rem 0.95rem !important;
    font-size: 12.5px !important;
    color: #0f172a !important;
}
.filter-bar, .ui-filter-bar, .filters {
    padding: 0.5rem 0.75rem !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    background: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    margin-bottom: 0.75rem !important;
}
.filter-bar input, .filter-bar select, .ui-filter-bar input, .ui-filter-bar select {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 8px !important;
    font-size: 12.5px !important;
    border-radius: 3px !important;
    border: 1px solid #cbd5e1 !important;
}
form .form-field label, form label, .form-label, .erp-form-label {
    display: block !important;
    margin-bottom: 0.2rem !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color: #475569 !important;
}
form input:not([type="checkbox"]):not([type="radio"]), form select, .form-control, .form-select, .form-input {
    border: 1px solid #cbd5e1 !important;
    border-radius: 3px !important;
    background: #ffffff !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 8px !important;
    font-size: 12.5px !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
}
form textarea, .form-textarea {
    border: 1px solid #cbd5e1 !important;
    border-radius: 3px !important;
    background: #ffffff !important;
    min-height: 54px !important;
    padding: 6px 8px !important;
    font-size: 12.5px !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
}
form input:not([type="checkbox"]):not([type="radio"]):focus, form select:focus, form textarea:focus,
.form-control:focus, .form-select:focus, .form-input:focus {
    border-color: #13263F !important;
    outline: 2px solid #13263F !important;
    outline-offset: 1px !important;
}
.table thead th, .ui-table thead th {
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 6px 10px !important;
    border-top: 1px solid #cbd5e1 !important;
    border-bottom: 1px solid #cbd5e1 !important;
}
.table tbody td, .ui-table tbody td {
    padding: 6px 10px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-size: 12.5px !important;
    color: #1e293b !important;
    vertical-align: middle !important;
}
.table tbody tr:hover td, .ui-table tbody tr:hover td {
    background: #f8fafc !important;
}
.modal-overlay, .modal-backdrop {
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 1000 !important;
}
/* Nested dialogs (e.g. EAN search over product create) must beat the base overlay. */
.modal-overlay.modal-overlay--stacked {
    z-index: 1100 !important;
}
.modal {
    border: 1px solid #94a3b8 !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25) !important;
    background: #ffffff !important;
    overflow: hidden !important;
}
.modal__header {
    background: #13263F !important;
    border-bottom: 1px solid #0B1929 !important;
    padding: 8px 14px !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.modal__header h2, .modal__header h3, .modal__title {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}
.modal__header .modal__close {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 2px 6px !important;
}
.modal__header .modal__close:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
}
.modal__body {
    padding: 14px 18px !important;
    font-size: 13px !important;
}
.modal__footer {
    background: #f8fafc !important;
    border-top: 1px solid #cbd5e1 !important;
    padding: 8px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
}
.ui-search-form { display:flex; align-items:end; flex-wrap:wrap; gap:.7rem; }
.ui-search-form input[type="search"],.ui-search-form input[name*="search" i],.ui-search-form input[name*="query" i] { min-width:min(28rem,100%); }
.page form:not(.inline-form) { max-width:100%; }
.page form label,.page .form-label { display:block; margin-bottom:.3rem; color:#475569; font-size:.76rem; font-weight:700; }
.page form input:not([type="checkbox"]):not([type="radio"]),.page form select,.page form textarea,.form-control,.form-input,.form-select { box-sizing:border-box; width:100%; min-height:2.45rem; padding:.55rem .65rem; border:1px solid #c7d2e0; border-radius:8px; background:#fff; color:#172b45; }
.page form textarea { min-height:6rem; resize:vertical; }
.page form input:focus,.page form select:focus,.page form textarea:focus,.form-control:focus,.form-input:focus,.form-select:focus { outline:0; border-color:#2456A6; box-shadow:0 0 0 3px rgba(37,99,235,.13); }
.form-grid,.modal-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.form-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.form-field,.form-group { min-width:0; }
.form-field.full,.form-group.full { grid-column:1/-1; }
.form-section,.modal-form-section { padding:1rem 0; border-top:1px solid #e2e8f0; }
.form-section:first-child,.modal-form-section:first-child { border-top:0; padding-top:0; }

@media (max-width: 767px) {
    .ui-page-header,.inventory-header,.detail-header,.ui-detail-head { align-items:flex-start; flex-direction:column; padding:.85rem !important; }
    .ui-page-header__actions,.page-header__actions,.inventory-toolbar,.detail-header__actions { width:100%; justify-content:flex-start; }
    .ui-page-header__actions .btn,.page-header__actions .btn,.inventory-toolbar .btn { flex:1 1 auto; }
    .form-grid,.form-grid--3,.modal-form-grid { grid-template-columns:1fr; }
    .form-field.full,.form-group.full { grid-column:auto; }
}

/* Shared sales record layout: offer, order and invoice. */
.record-header.ui-page-header { display:block !important; min-height:0; padding:1rem 1.25rem !important; background:#fff !important; border-radius:10px !important; box-shadow:0 1px 3px rgba(15,23,42,.06) !important; }
.record-header.page-header { overflow:visible !important; z-index:20; }
.record-header .record-actions { position:relative; z-index:2; }
.record-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1.25rem; flex-wrap:wrap; min-width:0; }
.record-heading > :first-child { flex:1 1 350px; min-width:0; }
.record-heading .subtitle { margin:.4rem 0 0 !important; color:#64748b; }
.record-heading h1 { font-size:1.45rem !important; }
.record-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; width:100%; margin-top:.85rem; padding-top:.8rem; border-top:1px solid #e2e8f0; }
.record-actions .dropdown { flex:0 0 auto; width:auto; max-width:max-content; }
.record-actions .dropdown > button { width:auto !important; }
.record-actions .record-action-menu { position:absolute; top:calc(100% + .25rem); left:0; z-index:50; box-sizing:border-box; width:280px; max-width:calc(100vw - 2rem); max-height:calc(100vh - 1rem); overflow-y:auto; padding:.4rem 0; border:1px solid var(--border); border-radius:8px; background:var(--surface); box-shadow:0 8px 24px rgba(15,23,42,.18); }
.record-actions .btn { min-height:2.15rem !important; padding:.45rem .7rem !important; font-size:.8rem !important; }
.record-actions .btn, .action-bar .btn, .page-actions .btn { box-shadow:none !important; transform:none !important; }
.record-actions .btn:hover, .action-bar .btn:hover, .page-actions .btn:hover { transform:none !important; box-shadow:none !important; }
.record-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1.5rem; padding:.2rem .9rem .65rem; }
.record-facts > .datagrid__item, .record-facts > .kv-row { display:grid; grid-template-columns:minmax(155px,40%) minmax(0,1fr); align-items:start; gap:.8rem; min-width:0; margin:0; padding:.72rem .15rem; border:0; border-bottom:1px solid #edf1f5; background:transparent; }
.record-facts .datagrid__label, .record-facts .kv-label { color:#64748b; font-size:.76rem; font-weight:650; text-align:left; line-height:1.45; }
.record-facts .datagrid__content, .record-facts .kv-value { min-width:0; margin:0; color:#172b45; font-size:.86rem; font-weight:600; text-align:left; overflow-wrap:anywhere; line-height:1.45; }
.record-facts a { color:#2456A6; }
.record-editor { width:100%; max-width:none; }
.record-editor .modal__body { padding:0; }
.record-editor-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:0 0 1.5rem; padding:0 0 1rem; border-bottom:1px solid var(--border); }
.record-editor-heading h2 { margin:0; font-size:1.25rem; }
.record-editor .record-editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:1rem 1.25rem !important; }
.record-editor .record-editor-party { grid-column:1/-1; }
.record-editor .record-editor-party .party-autocomplete { width:100%; max-width:100%; }
.party-autocomplete { z-index:12; }
.party-autocomplete .autocomplete-menu { top:100%; min-width:min(100%,450px); z-index:100; }
.party-autocomplete .autocomplete-empty { padding:.6rem .7rem; color:#64748b; font-size:.82rem; }
.ui-module-shell .record-list-filters, .ui-module-shell form.record-list-filters { display:grid !important; grid-template-columns:minmax(220px,2fr) repeat(3,minmax(140px,1fr)) auto; align-items:end !important; gap:.75rem !important; margin:0 0 1rem; padding:.85rem 1rem !important; border:1px solid #d7e0eb; border-radius:10px; background:#fff !important; }
.ui-module-shell .record-list-filters--short { grid-template-columns:minmax(220px,1fr) minmax(160px,190px) auto; }
.ui-module-shell .record-list-filters--wide, .ui-module-shell form.record-list-filters--wide {
    grid-template-columns:repeat(4,minmax(120px,1fr));
}
.ui-module-shell .record-list-filters--wide .record-filter-field--search { grid-column:1/-1; }
.ui-module-shell .record-list-filters--wide .record-filter-actions { justify-content:flex-start; grid-column:1/-1; }

/* Compact workorder list chrome: one-line hint + collapsible voice. */
.wo-list-toolbar {
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    gap:.5rem 1rem; margin:0 0 .65rem; padding:.45rem .7rem;
    border:1px solid #d7e0eb; border-radius:8px; background:#f8fafc;
}
.wo-list-toolbar__hint { margin:0; line-height:1.4; flex:1 1 14rem; }
.wo-list-toolbar__links { display:flex; flex-wrap:wrap; gap:.3rem; }
.wo-list-voice { margin:0 0 .75rem; border:1px solid #e2e8f0; border-radius:8px; background:#fff; }
.wo-list-voice > summary {
    cursor:pointer; list-style:none; padding:.55rem .85rem; font-size:.82rem; font-weight:600; color:#475569;
}
.wo-list-voice > summary::-webkit-details-marker { display:none; }
.wo-list-voice > summary::before { content:"▸ "; color:#94a3b8; }
.wo-list-voice[open] > summary::before { content:"▾ "; }
.wo-list-voice .voice-command-card { border:0; box-shadow:none; margin:0; }
.wo-list-voice .voice-command-card .card-body,
.wo-list-voice .voice-command { padding:.35rem .85rem .7rem; }
.record-filter-field { display:flex; flex-direction:column; gap:.32rem; min-width:0; }
.record-filter-field label { display:block; margin:0 !important; color:#475569; font-size:.76rem; font-weight:700; white-space:nowrap; }
.record-filter-field input[type="search"], .record-filter-field select { box-sizing:border-box; width:100% !important; min-width:0 !important; max-width:none !important; margin:0; }
.record-filter-search-row { display:flex; align-items:stretch; gap:.4rem; min-width:0; flex-wrap:nowrap; }
.record-filter-search-row input[type="search"] { flex:1 1 auto; min-width:0; width:auto !important; max-width:none !important; }
.record-filter-search-row .btn { flex:0 0 auto; align-self:stretch; white-space:nowrap; min-height:2.35rem; }
.record-filter-actions { display:flex; align-items:center; justify-content:flex-end; gap:.4rem; min-width:0; }
.record-filter-actions .btn { flex:0 0 auto; white-space:nowrap; }
.record-list-card, .record-list-card .scroll-panel--table { width:100%; max-width:100%; min-width:0; }
.record-list-table { width:100%; min-width:840px; }
/* Workorder list: many columns — scroll inside the card, never grow the page. */
.ui-module-shell .record-list-card { overflow-x:auto; }
.ui-module-shell .record-list-table { min-width:960px; }
.ui-module-shell .record-list-table td:nth-child(2) { max-width:14rem; overflow-wrap:anywhere; }
.record-list-table th, .record-list-table td { padding:.65rem .8rem; }
.record-empty { display:grid; place-items:center; min-height:140px; padding:1.5rem; text-align:center; color:#64748b; font-size:.88rem; }
.record-empty p { margin:0; max-width:38rem; line-height:1.5; }
.record-row-link { display:inline-flex; align-items:center; justify-content:center; min-width:2rem; min-height:2rem; color:#475569; text-decoration:none; border-radius:6px; }
.record-row-link:hover, .record-row-link:focus-visible { color:#2456A6; background:#EEF3FA; }
/* Mid widths: keep one compact row for --wide (6 cells). Only stack at tablet. */
@media (max-width:1199px) {
    .ui-module-shell .record-list-filters, .ui-module-shell form.record-list-filters,
    .ui-module-shell .record-list-filters--short { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ui-module-shell .record-list-filters:not(.record-list-filters--wide) .record-filter-field--search,
    .ui-module-shell .record-list-filters--short .record-filter-field--search { grid-column:1/-1; }
    .ui-module-shell .record-list-filters:not(.record-list-filters--wide) .record-filter-actions,
    .ui-module-shell .record-list-filters--short .record-filter-actions { justify-content:flex-start; grid-column:1/-1; }
    /* Wide: full-width search row (input + button), then 4 selects. */
    .ui-module-shell .record-list-filters--wide, .ui-module-shell form.record-list-filters--wide {
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
    .ui-module-shell .record-list-filters--wide .record-filter-field--search { grid-column:1/-1; }
    .ui-module-shell .record-list-filters--wide .record-filter-actions { justify-content:flex-start; grid-column:1/-1; }
}
@media (max-width:899px) {
    .ui-module-shell .record-list-filters--wide, .ui-module-shell form.record-list-filters--wide {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media (max-width:767px) {
    .record-facts { grid-template-columns:1fr; }
    .record-editor .record-editor-grid { grid-template-columns:1fr !important; }
    .ui-module-shell .record-list-filters, .ui-module-shell form.record-list-filters,
    .ui-module-shell .record-list-filters--short,
    .ui-module-shell .record-list-filters--wide { grid-template-columns:minmax(0,1fr); }
    .record-filter-field--search { grid-column:auto; }
    .record-filter-actions { justify-content:flex-start; flex-wrap:wrap; grid-column:auto; }
    .record-filter-search-row { flex-wrap:wrap; }
}

/* Compact record-detail header (Kunden/Produkte/Anlagen/...): the name,
   status badge and action buttons are one slim line, not a decorative
   banner card - overrides the "UI foundation v2" gradient-card treatment
   above for .detail-header/.inventory-header specifically (list-page
   .page-header keeps its look; this is scoped to detail views only). */
.detail-header, .inventory-header {
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 0 .85rem !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.detail-header::after, .inventory-header::after { content: none !important; }
.detail-header h1, .inventory-header h1 { font-size: 1.3rem !important; }
.detail-header__sub, .inventory-header__title p { margin-top: .15rem !important; }

/* product_edit.html (and any other hand-built form) uses these two
   "compact" modifier classes on ~130 fields, but they were never defined -
   .form-control-compact fields silently fell back to the full-size
   .form-control height (2.45rem), breaking alignment against sibling
   elements hand-sized to the intended compact height (e.g. a hardcoded
   34px row next to an un-shrunk 39px select); .form-label-compact labels
   got no styling at all since they're outside the .page/.form-label /
   ".page form label" selectors. Defining them fixes every usage at once. */
.form-control.form-control-compact, select.form-control-compact, textarea.form-control-compact {
    min-height: 2.15rem;
    padding: .4rem .55rem;
    font-size: .85rem;
}
/* Product edit is Alpine-driven (no <form>), so .page form textarea never
   applied — textareas collapsed to the global 2.5rem min-height. */
.odoo-record-full textarea.form-control,
.product-edit-textarea {
    min-height: 7.5rem;
    resize: vertical;
    width: 100%;
    font-size: 0.9rem;
    line-height: 1.45;
    padding: 0.65rem 0.75rem;
}
.form-label-compact {
    display: block;
    margin-bottom: .25rem;
    color: #475569;
    font-size: .76rem;
    font-weight: 700;
}

/* ============================================================
   REPORTDESK UNIFIED UI LAYOUT & CSS FRAMEWORK
   Enterprise B2B Design System: Normalized, Standardized & Coherent
   ============================================================ */

/* 1. Page Shell & Container */
.ui-shell, .ui-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* 2. Standardized Page & Record Header (Compact Single-Row ERP Toolbar) */
.erp-page-header,
.ui-page-header,
.record-header,
.page-header,
.detail-header,
.ui-detail-head {
    background: #ffffff !important;
    border: 1px solid var(--border, #cbd5e1) !important;
    border-left: 3.5px solid #13263F !important;
    border-radius: 4px !important;
    padding: 0.35rem 0.85rem !important;
    margin-bottom: 0.55rem !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.55rem 0.75rem !important;
    min-height: 40px !important;
    position: relative !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}
.erp-page-header::after, .ui-page-header::after, .page-header::after, .record-header::after, .detail-header::after {
    display: none !important;
}
.erp-page-header p,
.ui-page-header p,
.page-header p,
.detail-header p,
.record-header p,
.ui-header-meta,
.ui-page-header .subtitle,
.page-header .subtitle,
.ui-header-main p,
.record-heading .subtitle,
.ui-header-title-area p,
.detail-header__sub {
    display: none !important;
}

/* Suppress redundant "Dashboard / Current" breadcrumb on top-level module headers */
.ui-page-header > nav.ui-breadcrumb,
.erp-page-header > nav.ui-breadcrumb,
.page-header > nav.ui-breadcrumb {
    display: none !important;
}

/* Breadcrumbs: Tiny, clean, inline */
.erp-breadcrumb,
.ui-breadcrumb {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    font-size: 0.78rem !important;
    color: #64748b !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    flex-wrap: wrap !important;
}
.erp-breadcrumb a,
.ui-breadcrumb a {
    color: var(--primary, #13263F) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.2rem !important;
}
.erp-breadcrumb a:hover,
.ui-breadcrumb a:hover {
    text-decoration: underline !important;
}
.erp-breadcrumb .separator,
.ui-breadcrumb .separator,
.ui-breadcrumb .sep {
    color: #94a3b8 !important;
    margin: 0 0.15rem !important;
}

/* Header Left: Breadcrumb / Back button + Title Row */
.erp-page-header__left,
.ui-header-main,
.page-header > div:first-child:not(.page-header__actions) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.65rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.erp-page-header__title-row,
.ui-header-title-area,
.ui-header-title-row {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.erp-page-header__icon {
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

.erp-page-header__title,
.ui-header-title-row h1,
.ui-page-header h1,
.page-header h1,
.detail-header h1,
.record-header h1 {
    margin: 0 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #13263F !important;
    letter-spacing: -0.01em !important;
    /* Emoji glyphs (e.g. ✅ in "Aufgaben") exceed the text line box — a tight
       line-height clipped them at the top. 1.4 leaves room; overflow:visible
       makes sure a glyph can never be cut off by the title box itself. */
    line-height: 1.4 !important;
    overflow: visible !important;
    padding-top: 0.08rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    white-space: nowrap !important;
}

.erp-page-header__badge,
.ui-header-title-row .badge,
.page-header .badge {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 1px 7px !important;
    border-radius: 3px !important;
}

/* Header Right: Actions Toolbar */
.erp-page-header__actions,
.ui-action-bar,
.record-actions,
.page-header__actions,
.detail-header__actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.35rem !important;
    flex-wrap: wrap !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    position: relative !important;
    z-index: 2 !important;
}

.erp-page-header__actions .btn,
.ui-action-bar .btn,
.page-header__actions .btn,
.detail-header__actions .btn,
.record-actions .btn,
.erp-page-header .btn,
.ui-page-header .btn,
.page-header .btn {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 3px !important;
    line-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Alpine x-show sets inline display:none; toolbar rules above use
   display:inline-flex !important and would otherwise keep buttons visible. */
.erp-page-header__actions .btn[style*="display: none"],
.erp-page-header__actions .btn[style*="display:none"],
.ui-action-bar .btn[style*="display: none"],
.ui-action-bar .btn[style*="display:none"],
.page-header__actions .btn[style*="display: none"],
.page-header__actions .btn[style*="display:none"],
.detail-header__actions .btn[style*="display: none"],
.detail-header__actions .btn[style*="display:none"],
.record-actions .btn[style*="display: none"],
.record-actions .btn[style*="display:none"],
.erp-page-header .btn[style*="display: none"],
.erp-page-header .btn[style*="display:none"],
.ui-page-header .btn[style*="display: none"],
.ui-page-header .btn[style*="display:none"],
.page-header .btn[style*="display: none"],
.page-header .btn[style*="display:none"],
.ui-action-bar .btn[hidden],
.page-header__actions .btn[hidden],
.record-actions .btn[hidden] {
    display: none !important;
}

/* Universal ERP Button Defaults: No button is ever unstyled */
.btn, button.btn, a.btn, input[type="button"].btn, input[type="submit"].btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    padding: 0.35rem 0.75rem !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #1e293b !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease !important;
    box-sizing: border-box !important;
}
.btn:hover:not(:disabled) {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* Alpine x-show sets inline display:none; the .btn rule above uses
   display:inline-flex !important and would keep EVERY action button visible
   (Pickaufträge: Reservieren+Starten+Abschluss gleichzeitig → tote Klicks). */
.btn[style*="display: none"],
.btn[style*="display:none"],
button.btn[style*="display: none"],
button.btn[style*="display:none"],
a.btn[style*="display: none"],
a.btn[style*="display:none"],
.btn[hidden],
button.btn[hidden],
a.btn[hidden] {
    display: none !important;
}

/* Back Button in Detail Views */
.erp-back-btn {
    margin-right: 0.35rem !important;
    flex-shrink: 0 !important;
}

/* ERP Modal Design System */
.erp-modal {
    border: 1px solid #94a3b8 !important;
    border-radius: 4px !important;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.3) !important;
    background: #ffffff !important;
    overflow: hidden !important;
}
.erp-modal .modal__header {
    background: #13263F !important;
    border-bottom: 1px solid #0B1929 !important;
    padding: 9px 16px !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
}
.erp-modal .modal__header h2,
.erp-modal .modal__header h3,
.erp-modal .modal__title {
    margin: 0 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.01em !important;
}
.erp-modal .modal__header .modal__close {
    color: rgba(255, 255, 255, 0.8) !important;
}
.erp-modal .modal__header .modal__close:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
}
.erp-modal .modal__body {
    padding: 14px 18px !important;
    background: #ffffff !important;
}
.erp-modal-belegkopf,
.erp-modal .form-section--first {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    padding: 0.75rem 0.9rem !important;
    margin-bottom: 0.85rem !important;
}
.erp-modal-section-title {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #64748b !important;
    margin: 0 0 0.5rem 0 !important;
}
.erp-modal .modal__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
    padding: 8px 16px !important;
    background: #f8fafc !important;
    border-top: 1px solid #cbd5e1 !important;
}
.erp-modal .modal__footer .btn {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 3px !important;
}

.ui-header-main > .ui-action-bar,
.ui-action-bar--inline {
    width: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
}

.page-header:not(:has(.ui-header-main)) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
}
.page-header:not(:has(.ui-header-main)) > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

/* 3. Standardized Filter Toolbar */
.ui-toolbar, .record-list-filters {
    display: flex !important;
    align-items: flex-end !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    margin-bottom: 1.15rem !important;
    padding: 0.85rem 1.15rem !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.ui-toolbar-field, .record-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 150px;
    flex: 1 1 auto;
}
.ui-toolbar-field--search, .record-filter-field--search {
    flex: 2 1 260px;
}
.ui-toolbar-field label, .record-filter-field label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ui-toolbar input, .ui-toolbar select,
.record-filter-field input, .record-filter-field select {
    min-height: 2.35rem !important;
    padding: 0.45rem 0.65rem !important;
    font-size: 0.875rem !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.record-filter-search-row input[type="search"] {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto;
    min-width: 0;
}
.ui-toolbar input:focus, .ui-toolbar select:focus,
.record-filter-field input:focus, .record-filter-field select:focus {
    border-color: #2456A6 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(36, 86, 166, 0.15) !important;
}
.ui-toolbar-actions, .record-filter-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1px;
}

/* 4. Standardized Data Tables */
.ui-table-wrap, .record-list-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    margin-bottom: 1.5rem !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
/* Nested table scroller: never clip vertical scroll via the generic ui-table-wrap rule. */
.record-list-card > .scroll-panel--table,
.ui-table-wrap.scroll-panel--table,
.scroll-panel.ui-table-wrap {
    overflow: auto !important;
    max-width: 100% !important;
}
.ui-table, .record-list-table {
    width: 100% !important;
    min-width: 780px;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 0.875rem !important;
}
.ui-table thead th, .record-list-table thead th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 0.75rem 0.85rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-top: none !important;
    white-space: nowrap !important;
}
.ui-table tbody td, .record-list-table tbody td {
    padding: 0.75rem 0.85rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #1e293b !important;
    vertical-align: middle !important;
}
.ui-table th:last-child, .ui-table td:last-child,
.record-list-table th:last-child, .record-list-table td:last-child {
    min-width: 96px !important;
    text-align: right !important;
}
.ui-table tbody tr:hover, .record-list-table tbody tr:hover {
    background-color: #f8fafc !important;
}
.ui-table tbody tr:last-child td, .record-list-table tbody tr:last-child td {
    border-bottom: none !important;
}
.ui-cell-mono {
    font-family: var(--mono, monospace);
    font-weight: 600;
    color: #2456A6;
}
.ui-cell-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ==========================================================================
   5. CANONICAL BEHÖRDEN & ERP BUTTON SYSTEM (DATEV / SAP / DESTATIS STANDARD)
   Standardized geometry, typography, and authority color language across <button>, <a>, <input>
   ========================================================================== */

.btn,
button.btn,
a.btn,
input[type="button"].btn,
input[type="submit"].btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 12px !important;
    font-family: var(--font, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    border-radius: 4px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #1e293b !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.btn:hover:not(:disabled),
button.btn:hover:not(:disabled),
a.btn:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

.btn:active:not(:disabled),
button.btn:active:not(:disabled),
a.btn:active {
    background: #e2e8f0 !important;
    transform: none !important;
}

.btn:focus-visible,
button.btn:focus-visible,
a.btn:focus-visible {
    outline: 2px solid #13263F !important;
    outline-offset: 2px !important;
}

.btn:disabled,
button.btn:disabled,
a.btn[disabled],
a.btn.disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

/* Button Sizes */
.btn--sm,
button.btn--sm,
a.btn--sm {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    border-radius: 3px !important;
}

.btn--xs,
button.btn--xs,
a.btn--xs {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}

.btn--lg,
button.btn--lg,
a.btn--lg {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
}

/* Semantic Authority Variants */

/* Primary / Dominant Action: Deep Authority Navy */
.btn--primary,
button.btn--primary,
a.btn--primary,
.btn-primary,
button.btn-primary,
a.btn-primary,
.btn--dominant,
button.btn--dominant,
a.btn--dominant {
    background: #13263F !important;
    border-color: #0B1929 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(11, 48, 86, 0.25) !important;
}
.btn--primary:hover:not(:disabled),
button.btn--primary:hover:not(:disabled),
a.btn--primary:hover,
.btn-primary:hover:not(:disabled),
button.btn-primary:hover:not(:disabled),
a.btn-primary:hover,
.btn--dominant:hover:not(:disabled),
button.btn--dominant:hover:not(:disabled),
a.btn--dominant:hover {
    background: #0B1929 !important;
    border-color: #08131F !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(11, 48, 86, 0.35) !important;
}

/* Success / Booking Action: Authoritative German Enterprise Green */
.btn--success,
button.btn--success,
a.btn--success,
.btn-success,
button.btn-success,
a.btn-success {
    background: #15803d !important;
    border-color: #166534 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(21, 128, 61, 0.25) !important;
}
.btn--success:hover:not(:disabled),
button.btn--success:hover:not(:disabled),
a.btn--success:hover,
.btn-success:hover:not(:disabled),
button.btn-success:hover:not(:disabled),
a.btn-success:hover {
    background: #166534 !important;
    border-color: #14532d !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(21, 128, 61, 0.35) !important;
}

/* Secondary / Outline Action: Crisp Steel Surface */
.btn--secondary,
button.btn--secondary,
a.btn--secondary,
.btn-secondary,
button.btn-secondary,
a.btn-secondary,
.btn--outline,
button.btn--outline,
a.btn--outline,
.btn-outline,
button.btn-outline,
a.btn-outline {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.btn--secondary:hover:not(:disabled),
button.btn--secondary:hover:not(:disabled),
a.btn--secondary:hover,
.btn-secondary:hover:not(:disabled),
button.btn-secondary:hover:not(:disabled),
a.btn-secondary:hover,
.btn--outline:hover:not(:disabled),
button.btn--outline:hover:not(:disabled),
a.btn--outline:hover,
.btn-outline:hover:not(:disabled),
button.btn-outline:hover:not(:disabled),
a.btn-outline:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* Ghost / Utility Action: Clean light button surface with subtle border */
.btn--ghost,
button.btn--ghost,
a.btn--ghost,
.btn-ghost,
button.btn-ghost,
a.btn-ghost {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.btn--ghost:hover:not(:disabled),
button.btn--ghost:hover:not(:disabled),
a.btn--ghost:hover,
.btn-ghost:hover:not(:disabled),
button.btn-ghost:hover:not(:disabled),
a.btn-ghost:hover {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

/* Danger / Protected Destructive Action */
.btn--danger,
button.btn--danger,
a.btn--danger,
.btn-danger,
button.btn-danger,
a.btn-danger,
.btn--danger-protected,
button.btn--danger-protected,
a.btn--danger-protected {
    background: #ffffff !important;
    border-color: #fca5a5 !important;
    color: #b91c1c !important;
    box-shadow: 0 1px 2px rgba(185, 28, 28, 0.06) !important;
}
.btn--danger:hover:not(:disabled),
button.btn--danger:hover:not(:disabled),
a.btn--danger:hover,
.btn-danger:hover:not(:disabled),
button.btn-danger:hover:not(:disabled),
a.btn-danger:hover,
.btn--danger-protected:hover:not(:disabled),
button.btn--danger-protected:hover:not(:disabled),
a.btn--danger-protected:hover {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #991b1b !important;
}

/* Danger Solid Fill (irrevocable deletion) */
.btn--danger-fill,
button.btn--danger-fill,
a.btn--danger-fill,
.btn-danger-fill,
button.btn-danger-fill,
a.btn-danger-fill {
    background: #b91c1c !important;
    border-color: #991b1b !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(185, 28, 28, 0.25) !important;
}
.btn--danger-fill:hover:not(:disabled),
button.btn--danger-fill:hover:not(:disabled),
a.btn--danger-fill:hover,
.btn-danger-fill:hover:not(:disabled),
button.btn-danger-fill:hover:not(:disabled),
a.btn-danger-fill:hover {
    background: #991b1b !important;
    border-color: #7f1d1d !important;
    color: #ffffff !important;
}

/* Warning Action */
.btn--warning,
button.btn--warning,
a.btn--warning,
.btn-warning,
button.btn-warning,
a.btn-warning {
    background: #fffbeb !important;
    border-color: #fcd34d !important;
    color: #b45309 !important;
}
.btn--warning:hover:not(:disabled),
button.btn--warning:hover:not(:disabled),
a.btn--warning:hover,
.btn-warning:hover:not(:disabled),
button.btn-warning:hover:not(:disabled),
a.btn-warning:hover {
    background: #fef3c7 !important;
    border-color: #f59e0b !important;
    color: #92400e !important;
}

/* Uniform Toolbar & Action Bar */
.ui-action-bar,
.page-header__actions,
.record-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}
.ui-action-bar .btn,
.page-header__actions .btn,
.record-actions .btn {
    vertical-align: middle !important;
}

/* ==========================================================================
   BEHÖRDEN & ERP BELEG-LAYOUT ARCHITECTURE (KOPF ➔ POSITIONEN ➔ SUMMEN)
   ========================================================================== */

.erp-beleg {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    margin-bottom: 1.5rem;
}

/* Invoice detail: structured Beleg + optional sticky document preview rail */
.invoice-detail-layout {
    display: block;
    margin-bottom: 1.5rem;
}
.invoice-detail-layout--preview-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, min(42%, 520px));
    gap: 1rem;
    align-items: start;
}
.invoice-detail-layout .erp-beleg {
    margin-bottom: 0;
}
.invoice-detail-tabs {
    display: none;
    grid-column: 1 / -1;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}
.invoice-detail-tabs__btn {
    flex: 1;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
}
.invoice-detail-tabs__btn.is-active {
    background: #13263F;
    border-color: #13263F;
    color: #fff;
}
.invoice-doc-rail {
    position: sticky;
    top: 0.75rem;
    align-self: start;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 1.5rem);
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.invoice-doc-rail__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    background: #1e293b;
    border-bottom: 1px solid #334155;
    flex-shrink: 0;
}
.invoice-doc-rail__title {
    font-size: 0.85rem;
    color: #f8fafc;
}
.invoice-doc-rail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}
.invoice-doc-rail__body {
    flex: 1 1 auto;
    min-height: 360px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0.5rem;
    overflow: auto;
    background: #1e293b;
}
.invoice-doc-rail__frame {
    width: 100%;
    min-height: min(70vh, 720px);
    height: 100%;
    border: none;
    border-radius: 4px;
    background: #fff;
}
.invoice-doc-rail__img {
    max-width: 100%;
    max-height: min(70vh, 720px);
    object-fit: contain;
    border-radius: 4px;
    margin: auto;
}
.invoice-doc-rail__empty {
    text-align: center;
    color: #94a3b8;
    padding: 2rem 1rem;
    margin: auto;
}
.invoice-doc-rail__empty strong {
    color: #fff;
}
@media (max-width: 1099px) {
    .invoice-detail-layout--preview-open {
        grid-template-columns: 1fr;
    }
    .invoice-detail-tabs {
        display: flex;
    }
    .invoice-detail-main--narrow-hide,
    .invoice-doc-rail--narrow-hide {
        display: none !important;
    }
    .invoice-doc-rail {
        position: relative;
        top: 0;
        max-height: none;
        min-height: 60vh;
    }
    .invoice-doc-rail__frame {
        min-height: 60vh;
    }
}

/* 1. Beleg-Kopfbereich (Document Header Information Grid) */
.erp-belegkopf {
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border-bottom: 1px solid #cbd5e1;
}

.erp-belegkopf-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.erp-belegkopf-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

.erp-belegkopf-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 1023px) {
    .erp-belegkopf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 639px) {
    .erp-belegkopf-grid {
        grid-template-columns: 1fr;
    }
}

.erp-belegkopf-box {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.erp-belegkopf-box-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.erp-belegkopf-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.erp-belegkopf-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.erp-belegkopf-value {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

/* 2. Beleg-Positionen (Document Line Items Table) */
.erp-belegpositionen {
    padding: 1rem 1.25rem;
}

.erp-positionen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.erp-positionen-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.erp-beleg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.erp-beleg-table th {
    background: #f1f5f9;
    color: #475569;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 7px 10px;
    border-top: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
    text-align: left;
    white-space: nowrap;
}

.erp-beleg-table td {
    padding: 7px 10px;
    border-bottom: 1px solid #e2e8f0;
    color: #1e293b;
    vertical-align: middle;
}

.erp-beleg-table tr:hover td {
    background: #f8fafc;
}

.erp-beleg-table .col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* 3. Beleg-Summen (Commercial Calculation Block) */
.erp-belegsummen-wrap {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    border-top: 1px solid #cbd5e1;
    background: #f8fafc;
}

.erp-belegsummen-box {
    width: 340px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.erp-summen-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #475569;
}

.erp-summen-row strong {
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}

.erp-summen-total {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 2px solid #13263F;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 15px;
    font-weight: 700;
    color: #13263F;
}

/* 4. Beleg-Fussbereich (Terms, Internal Notes) */
.erp-belegfuss {
    padding: 1rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
}

/* 6. Standardized Status Badges */
.ui-badge, .badge, .status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}
.badge--draft, .status-yellow, .badge--new {
    background: #fef9c3 !important;
    color: #854d0e !important;
    border: 1px solid #fef08a !important;
}
.badge--scheduled, .badge--info, .status-info {
    background: #eff6ff !important;
    color: #1B4179 !important;
    border: 1px solid #bfdbfe !important;
}
.badge--active, .status-amber {
    background: #fff7ed !important;
    color: #c2410c !important;
    border: 1px solid #fed7aa !important;
}
.badge--completed, .badge--success, .status-green {
    background: #f0fdf4 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
}
.badge--danger, .status-red, .badge--cancelled {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
}
.badge--ghost {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

/* 7. Standardized Record Editor & Form Grid */
.ui-record-editor, .record-editor {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 1.25rem 1.5rem !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    margin-bottom: 1.5rem !important;
}
.ui-editor-section {
    padding: 1.25rem 0;
    border-top: 1px solid #e2e8f0;
}
.ui-editor-section:first-child {
    border-top: none;
    padding-top: 0;
}
.ui-editor-section h3, .ui-editor-section h4 {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}
.ui-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}
.ui-form-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ui-form-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ui-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}
.ui-form-field.full {
    grid-column: 1 / -1;
}
.ui-form-field label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ui-form-field input, .ui-form-field select, .ui-form-field textarea {
    min-height: 2.35rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.875rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #0f172a;
    box-sizing: border-box;
}
.ui-form-field textarea {
    min-height: 4.5rem;
    resize: vertical;
}
.ui-form-field input:focus, .ui-form-field select:focus, .ui-form-field textarea:focus {
    border-color: #2456A6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(36, 86, 166, 0.15);
}

/* 8. Standardized Tabs (Zero Vertical Overflow) */
.ui-tabs, .tabs, .odoo-record-tabs, .product-tabs, .fs-tabs, .inventory-tabs {
    display: flex !important;
    align-items: flex-end !important;
    flex-wrap: wrap !important;
    gap: 0.2rem !important;
    row-gap: 0.35rem !important;
    border-bottom: 2px solid #e2e8f0 !important;
    margin-bottom: 1.25rem !important;
    overflow-x: clip !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
    min-height: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
}
.ui-tab-btn, .tab-btn, .fs-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding: 0.45rem 0.7rem !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
    margin-bottom: -2px !important;
    text-decoration: none !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
}
.ui-tab-btn:hover, .tab-btn:hover, .fs-tab:hover {
    color: #2456A6 !important;
    background: rgba(36, 86, 166, 0.06) !important;
    border-radius: 6px 6px 0 0 !important;
}
.ui-tab-btn--active, .tab-btn--active, .tab-btn.active, .fs-tab.active {
    color: #2456A6 !important;
    border-bottom-color: #2456A6 !important;
    background: rgba(36, 86, 166, 0.05) !important;
    border-radius: 6px 6px 0 0 !important;
}
/* Badges/Zähler in Tabs kompakt halten */
.ui-tab-btn .badge, .tab-btn .badge, .fs-tab .badge {
    font-size: 0.68rem !important;
    padding: 0.05rem 0.4rem !important;
}
/* Auf schmalen Viewports dürfen Tab-Bars notfalls horizontal scrollen */
@media (max-width: 640px) {
    .ui-tabs, .tabs, .odoo-record-tabs, .product-tabs, .fs-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }
    .ui-tab-btn, .tab-btn, .fs-tab { padding: 0.4rem 0.6rem !important; font-size: 0.8rem !important; }
}

/* 9. Auftragspositionen / Commercial Line Items Table */
.ui-line-items-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}
.ui-line-items-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}
.ui-line-items-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.ui-line-items-summary {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}
.ui-summary-card {
    min-width: 280px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.85rem 1.15rem;
}
.ui-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    font-size: 0.875rem;
    color: #475569;
}
.ui-summary-row--total {
    border-top: 1px solid #cbd5e1;
    margin-top: 0.4rem;
    padding-top: 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #2456A6;
}

/* ============================================================
   STANDARDIZED MODAL & DROPDOWN DESIGN SYSTEM
   ============================================================ */

/* 1. Modal Overlay & Dialogs */
.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.5rem !important;
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

.modal-overlay[style*="display: none"],
.modal-overlay[style*="display:none"],
.modal-overlay[hidden],
[x-cloak].modal-overlay,
[x-cloak] {
    display: none !important;
}

.modal {
    position: relative !important;
    width: 100% !important;
    max-width: 640px !important;
    margin: auto !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25) !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100vh - 3rem) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.modal--sm { max-width: 460px !important; }
.modal--md { max-width: 760px !important; width: 92% !important; }
.modal--lg { max-width: 880px !important; width: 94% !important; }
.modal--xl { max-width: 1080px !important; width: 96% !important; }
.modal--item, .position-item-modal { max-width: 880px !important; width: 94% !important; }

.modal__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    background: #13263F !important;
    border-bottom: 1px solid #0B1929 !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
    border-top-left-radius: 3px !important;
    border-top-right-radius: 3px !important;
}

.modal__header h2,
.modal__header h3,
.modal__title {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.01em !important;
}

.modal__header .modal__close {
    background: transparent !important;
    border: none !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    cursor: pointer !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    transition: background 0.12s, color 0.12s !important;
}

.modal__header .modal__close:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.modal__body,
.record-editor .modal__body,
.modal-overlay .modal__body,
.modal-overlay .modal .modal__body {
    padding: 16px 20px !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    color: #1e293b !important;
}

.modal__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
    padding: 10px 16px !important;
    background: #f8fafc !important;
    border-top: 1px solid #cbd5e1 !important;
    border-bottom-left-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* 2. Dropdowns & Overflow Action Menus */
.dropdown {
    position: relative !important;
    display: inline-block !important;
}

.dropdown-menu,
.record-action-menu {
    position: absolute !important;
    top: calc(100% + 0.35rem) !important;
    right: 0 !important;
    left: auto !important;
    z-index: 1050 !important;
    min-width: 230px !important;
    max-width: calc(100vw - 2rem) !important;
    padding: 0.35rem !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1) !important;
    display: flex;
    flex-direction: column !important;
    gap: 0.15rem !important;
    box-sizing: border-box !important;
}

.dropdown-menu[style*="display: none"],
.dropdown-menu[style*="display:none"],
.record-action-menu[style*="display: none"],
.record-action-menu[style*="display:none"],
.dropdown-menu[hidden],
.record-action-menu[hidden] {
    display: none !important;
}

.dropdown-menu--left {
    right: auto !important;
    left: 0 !important;
}

@media (max-width: 600px) {
    .ui-action-bar .dropdown-menu--right,
    .ui-action-bar .record-action-menu {
        right: auto !important;
        left: 0 !important;
    }
}

.dropdown-item,
.record-action-menu .btn,
.record-action-menu button {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    text-align: left !important;
    justify-content: flex-start !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transform: none !important;
}

.dropdown-item:hover,
.record-action-menu .btn:hover,
.record-action-menu button:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.dropdown-item--danger,
.record-action-menu .btn--danger,
.record-action-menu button[style*="color:#dc2626"],
.record-action-menu button[style*="color: rgb(220, 38, 38)"] {
    color: #dc2626 !important;
}

.dropdown-item--danger:hover,
.record-action-menu button[style*="color:#dc2626"]:hover {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}

.dropdown-divider,
.record-action-menu hr {
    margin: 0.25rem 0 !important;
    border: 0 !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* 3. ERP Item/Position Form Grid & Live Calculation */
.item-form-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.15rem !important;
}

.item-form-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    width: 100% !important;
}

.item-form-field label {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin: 0 !important;
}

.item-form-field input,
.item-form-field select,
.item-form-field textarea {
    width: 100% !important;
    box-sizing: border-box !important;
}

.item-form-metrics {
    display: grid !important;
    grid-template-columns: 140px 100px 1fr 100px 150px !important;
    gap: 0.85rem !important;
    align-items: start !important;
    width: 100% !important;
}

@media (max-width: 768px) {
    .item-form-metrics {
        grid-template-columns: 1fr 1fr !important;
    }
}

.item-calc-preview {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0.85rem 1.25rem !important;
    margin-top: 0.35rem !important;
    box-sizing: border-box !important;
}

.item-calc-preview__item {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.15rem !important;
}

.item-calc-preview__label {
    font-size: 0.72rem !important;
    color: #64748b !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

.item-calc-preview__val {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    font-family: var(--mono, monospace) !important;
}

.item-calc-preview__val--gross {
    color: #2456A6 !important;
    font-size: 1.15rem !important;
}

/* Automation hub + guided setup (visible copy — page-header p is CSS-hidden). */
.auto-lead { color: var(--text-muted, #64748b); margin: 0 0 1.1rem; max-width: 62ch; line-height: 1.45; }
.auto-steps {
  display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; list-style: none; margin: 0 0 1.25rem;
  padding: .85rem 1rem; border: 1px solid var(--border, #d8e0e4); border-radius: 8px;
  background: var(--surface-alt, #f8fafc); counter-reset: auto-step;
}
.auto-steps li { color: var(--text-muted, #64748b); font-size: .9rem; }
.auto-steps li strong { color: var(--text, #0f172a); }
.auto-hub {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .85rem;
}
.auto-hub__card {
  display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.15rem;
  border: 1px solid var(--border, #d8e0e4); border-radius: 10px; background: var(--surface, #fff);
  text-decoration: none; color: inherit; min-height: 8.5rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.auto-hub__card:hover, .auto-hub__card:focus-visible {
  border-color: var(--primary, #2456A6); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #2456A6) 25%, transparent);
  outline: none;
}
.auto-hub__card--primary {
  border-color: var(--primary, #2456A6);
  background: color-mix(in srgb, var(--primary, #2456A6) 8%, white);
}
.auto-hub__card--muted { opacity: .92; }
.auto-hub__kicker {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--primary, #2456A6);
}
.auto-hub__title { font-size: 1.05rem; line-height: 1.25; }
.auto-hub__text { font-size: .88rem; color: var(--text-muted, #64748b); line-height: 1.4; }
.auto-setup {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; align-items: start;
}
.designer-guided-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .85rem; align-items: end;
}
.designer-guided-grid label { display: block; font-size: .85rem; }

.wf-section { margin: 0 0 1.75rem; }
.wf-section__title { font-size: 1.05rem; margin: 0 0 .75rem; display: flex; align-items: center; gap: .5rem; }
.wf-section--muted { margin-top: 1.5rem; color: var(--text-muted, #64748b); }
.wf-section--muted > summary { cursor: pointer; font-weight: 650; list-style: none; }
.wf-section--muted > summary::-webkit-details-marker { display: none; }
.wf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.wf-card {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-start;
  padding: 1rem 1.1rem; border: 1px solid var(--border, #d8e0e4); border-radius: 10px; background: var(--surface, #fff);
}
.wf-card--muted { opacity: .9; background: var(--surface-alt, #f8fafc); }
.wf-card__main { flex: 1 1 16rem; min-width: 0; }
.wf-card__meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .35rem; align-items: center; }
.wf-card__kind { font-size: .75rem; color: var(--text-muted, #64748b); }
.wf-card__title { margin: 0 0 .35rem; font-size: 1.05rem; line-height: 1.3; }
.wf-card__summary { margin: 0; color: var(--text-muted, #64748b); font-size: .9rem; line-height: 1.4; }
.wf-card__steps { margin: .5rem 0 0; font-size: .8rem; color: var(--text-muted, #64748b); }
.wf-card__actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.wf-card--with-runs { align-items: stretch; }
.wf-card__runs {
  margin-top: .75rem; padding-top: .7rem;
  border-top: 1px solid var(--border, #d8e0e4);
}
.wf-card__runs-title {
  margin: 0 0 .4rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted, #64748b);
}
.wf-card__runs-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem;
}
.wf-card__runs-list li {
  display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: baseline;
  font-size: .88rem;
}
.wf-card__runs-list a { font-weight: 650; text-decoration: none; color: var(--primary, #2456A6); }
.wf-card__runs-list a:hover,
.wf-card__runs-list a:focus-visible { text-decoration: underline; outline: none; }
.wf-card__runs-empty {
  margin: 0; font-size: .85rem; color: var(--text-muted, #64748b); line-height: 1.4;
}
.semantic-customizing .fo-new-field label { font-size: .88rem; }
.fo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fo-list__item {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-start;
  justify-content: space-between; width: 100%; text-align: left;
  padding: .9rem 1rem; border: 1px solid var(--border, #d8e0e4); border-radius: 8px;
  background: var(--surface, #fff); cursor: pointer; color: inherit;
  font: inherit;
}
.fo-list__item:hover, .fo-list__item:focus-visible {
  border-color: var(--primary, #2456A6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #2456A6) 20%, transparent);
  outline: none;
}
.fo-list__main { display: grid; gap: .2rem; min-width: 0; flex: 1 1 14rem; }
.fo-list__title { font-size: 1rem; line-height: 1.3; }
.fo-list__key { font-size: .78rem; color: var(--text-muted, #64748b); }
.fo-list__desc { line-height: 1.35; }
.fo-list__meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.fo-list__chevron { color: var(--primary, #2456A6); font-weight: 700; }
.auto-review-dl { display: grid; gap: .55rem; margin: 0; }
.auto-review-dl dt { font-size: .75rem; color: var(--text-muted, #64748b); margin: 0; }
.auto-review-dl dd { margin: .1rem 0 0; font-weight: 600; }
.auto-record-label { display: block; margin-top: 1rem; }
.auto-review-actions { margin-top: 1rem; flex-wrap: wrap; gap: .5rem; }

/* Semantic Studio: connected metadata and the actual reviewed runtime. */
.semantic-tabs { display:flex; gap:.35rem; flex-wrap:wrap; border-bottom:1px solid var(--border); margin:0 0 1.25rem; }
.semantic-tabs a { display:inline-flex; align-items:center; padding:.7rem .95rem; color:var(--text-muted); text-decoration:none; border-bottom:2px solid transparent; font-weight:600; }
.semantic-tabs a:hover, .semantic-tabs a.is-active { color:var(--text); border-bottom-color:var(--primary); }
.semantic-model {
  margin: 0 0 1.35rem; padding: 1rem 1.15rem 1.15rem;
  border: 1px solid var(--border, #d8e0e4);
  border-radius: 10px; background: var(--surface-alt, #f8fafc);
}
.semantic-model__head { margin: 0 0 .9rem; }
.semantic-model__title {
  margin: 0 0 .4rem; font-size: 1rem; font-weight: 700; line-height: 1.3;
}
.semantic-model__diff {
  margin: 0; font-size: .88rem; line-height: 1.45;
  color: var(--text-muted, #64748b); max-width: 70ch;
}
.semantic-model__diff strong { color: var(--text, #0f172a); font-weight: 650; }
.semantic-model__chain {
  list-style: none !important; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem;
  counter-reset: none;
}
.semantic-model__step {
  display: flex; gap: .6rem; align-items: flex-start;
  margin: 0; padding: .8rem .85rem;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d8e0e4); border-radius: 8px;
  list-style: none !important;
}
.semantic-model__step::marker,
.semantic-model__step::before { content: none !important; display: none !important; }
.semantic-model__num {
  flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; line-height: 1; color: #fff;
  background: var(--primary, #2456A6);
}
.semantic-model__body { min-width: 0; flex: 1; }
.semantic-model__label {
  margin: 0 0 .3rem; font-size: .92rem; font-weight: 700; line-height: 1.25;
}
.semantic-model__step p {
  margin: 0 0 .55rem; font-size: .82rem; color: var(--text-muted, #64748b); line-height: 1.4;
}
.semantic-model__link {
  display: inline-block; font-size: .82rem; font-weight: 650;
  color: var(--primary, #2456A6); text-decoration: none;
}
.semantic-model__link:hover,
.semantic-model__link:focus-visible { text-decoration: underline; outline: none; }
.semantic-callout {
  margin: 0 0 1.15rem; padding: .75rem 1rem;
  border-left: 3px solid var(--primary, #2456A6);
  background: color-mix(in srgb, var(--primary, #2456A6) 8%, white);
  border-radius: 0 8px 8px 0;
}
.semantic-callout__title {
  margin: 0 0 .35rem !important; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--primary, #2456A6);
}
.semantic-callout p {
  margin: 0; font-size: .9rem; line-height: 1.45; max-width: 68ch;
  color: var(--text, #0f172a);
}
.semantic-callout__steps {
  display: flex; flex-wrap: wrap; gap: .35rem .55rem;
  list-style: none !important; margin: .15rem 0 0; padding: 0;
  counter-reset: callout-step;
}
.semantic-callout__steps li {
  counter-increment: callout-step;
  display: inline-flex; align-items: center; gap: .35rem;
  margin: 0; padding: .3rem .55rem;
  font-size: .82rem; line-height: 1.3;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d8e0e4); border-radius: 6px;
  list-style: none !important;
}
.semantic-callout__steps li::before {
  content: counter(callout-step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  font-size: .68rem; font-weight: 700; color: #fff;
  background: var(--primary, #2456A6);
}
.semantic-howto {
  margin: 0 0 1.35rem; padding: 0;
  border: 1px solid var(--border, #d8e0e4); border-radius: 8px;
  background: var(--surface, #fff); overflow: hidden;
}
.semantic-howto > summary {
  cursor: pointer; font-weight: 650; list-style: none;
  padding: .7rem 1rem; font-size: .92rem;
}
.semantic-howto > summary::-webkit-details-marker { display: none; }
.semantic-howto > summary::before {
  content: '▸'; display: inline-block; width: 1rem;
  color: var(--text-muted, #64748b); font-weight: 400;
}
.semantic-howto[open] > summary::before { content: '▾'; }
.semantic-howto[open] > summary {
  border-bottom: 1px solid var(--border, #d8e0e4);
  background: var(--surface-alt, #f8fafc);
}
.semantic-howto__steps {
  list-style: none !important; margin: 0; padding: .65rem .85rem .85rem;
  display: grid; gap: .55rem; counter-reset: howto-step;
}
.semantic-howto__steps > li {
  counter-increment: howto-step;
  display: grid; grid-template-columns: 1.5rem 1fr auto;
  grid-template-areas: "num title link" "num text link";
  column-gap: .65rem; row-gap: .1rem; align-items: start;
  margin: 0; padding: .55rem .65rem;
  border: 1px solid var(--border, #d8e0e4); border-radius: 7px;
  background: var(--surface, #fff); list-style: none !important;
}
.semantic-howto__steps > li::before {
  grid-area: num; content: counter(howto-step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  font-size: .72rem; font-weight: 700; color: #fff;
  background: var(--primary, #2456A6);
}
.semantic-howto__step-title {
  grid-area: title; font-size: .88rem; font-weight: 700; line-height: 1.3;
}
.semantic-howto__step-text {
  grid-area: text; font-size: .82rem; color: var(--text-muted, #64748b); line-height: 1.4;
}
.semantic-howto__step-link {
  grid-area: link; align-self: center;
  font-size: .8rem; font-weight: 650; white-space: nowrap;
  color: var(--primary, #2456A6); text-decoration: none;
}
.semantic-howto__step-link:hover,
.semantic-howto__step-link:focus-visible { text-decoration: underline; outline: none; }
@media (max-width: 900px) {
  .semantic-model__chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .semantic-model__chain { grid-template-columns: 1fr; }
  .semantic-howto__steps > li {
    grid-template-columns: 1.5rem 1fr;
    grid-template-areas: "num title" "num text" "num link";
  }
  .semantic-howto__step-link { justify-self: start; margin-top: .15rem; }
}
.semantic-nav-more{position:relative;margin-left:auto;align-self:center;font-size:.84rem;color:var(--text-muted)}
.semantic-nav-more>summary{cursor:pointer;padding:.65rem .8rem;font-weight:600;list-style:none}
.semantic-nav-more>summary::-webkit-details-marker{display:none}
.semantic-nav-more>summary::after{content:' ▾'}
.semantic-nav-more[open]>div{position:absolute;right:0;top:100%;z-index:30;min-width:17rem;padding:.4rem;background:var(--surface,#fff);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(25,45,55,.14)}
.semantic-nav-more[open]>div a{display:block;padding:.55rem .7rem;border:0;border-radius:5px;white-space:nowrap}
.semantic-nav-more[open]>div a:hover{background:var(--surface-alt,#f3f6f7)}
.semantic-chain { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; margin-bottom:.7rem; }
.semantic-chain span:nth-child(odd) { border:1px solid var(--border); border-radius:7px; background:var(--surface); padding:.55rem .7rem; font-size:.83rem; font-weight:650; }
.semantic-chain span:nth-child(even) { color:var(--text-muted); }
.semantic-note { color:var(--text-muted); margin:0 0 1.25rem; max-width:80ch; }
.semantic-workspace { display:grid; grid-template-columns:minmax(180px,230px) minmax(0,1fr); align-items:start; gap:1.15rem; }
.semantic-object-nav, .semantic-model-detail, .semantic-panel { min-width:0; }
.semantic-object-nav { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:1rem; position:sticky; top:1rem; max-height:calc(100vh - 2rem); overflow:auto; }
.semantic-object-nav h2 { font-size:1rem; margin:0; }
.semantic-object-links { display:grid; gap:.1rem; margin-top:.75rem; }
.semantic-object-links a { padding:.55rem .7rem; color:var(--text); text-decoration:none; border-radius:7px; font-size:.88rem; }
.semantic-object-links a:hover, .semantic-object-links a.is-active { background:var(--surface-alt); color:var(--primary); font-weight:650; }
.semantic-mobile-picker { display:none; }
.semantic-model-detail { display:grid; gap:1rem; }
.semantic-model-header { display:flex; align-items:start; justify-content:space-between; gap:1rem; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:1.25rem; }
.semantic-model-header h2 { margin:.15rem 0 .35rem; }
.semantic-model-header p { margin:0; color:var(--text-muted); }
.semantic-eyebrow { color:var(--text-muted); font-size:.72rem; letter-spacing:.055em; text-transform:uppercase; font-weight:700; }
.semantic-object-meta { display:flex; flex-wrap:wrap; gap:.5rem; }
.semantic-object-meta span { background:var(--surface-alt); border:1px solid var(--border); border-radius:6px; padding:.35rem .55rem; font-size:.78rem; font-weight:600; }
.semantic-panel { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:1.25rem; margin-bottom:1rem; }
.semantic-panel__head { display:flex; justify-content:space-between; align-items:start; gap:1rem; margin-bottom:1rem; }
.semantic-panel__head h2, .semantic-panel__head h3 { margin:0 0 .25rem; font-size:1.05rem; }
.semantic-panel__head p { margin:0; color:var(--text-muted); }
.semantic-panel__head a { white-space:nowrap; }
.semantic-table { width:100%; table-layout:fixed; }
.semantic-field-scroll{max-height:32rem;overflow:auto;margin-top:.6rem}
.semantic-field-scroll .semantic-table thead{position:sticky;top:0;background:var(--surface,#fff);z-index:1}
.semantic-direct-editor{border-color:var(--primary,#344c69);background:var(--surface);scroll-margin-top:1.5rem}
.semantic-direct-editor form{max-width:52rem}
.semantic-direct-editor textarea{width:100%;margin:.4rem 0 1rem}
.semantic-direct-editor__details{margin-bottom:1rem}
.semantic-direct-editor__details summary{cursor:pointer}
.semantic-direct-editor__details .grid{gap:1rem;margin-top:.75rem}
.semantic-direct-editor__workflows{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0 1rem}
.semantic-direct-editor #semantic-edit-release{max-width:52rem;border-top:1px solid var(--border);padding-top:1rem;margin-top:1rem}
.semantic-direct-editor #semantic-edit-feedback{margin-top:.75rem}
.semantic-meaning-context{border-top:1px solid var(--border);margin-top:1rem;padding-top:1rem}
.semantic-meaning-context .btn{margin:0 .5rem .5rem 0}
.semantic-object-links{max-height:calc(100vh - 18rem);overflow:auto}
.semantic-table tr[hidden]{display:none}
.semantic-table td, .semantic-table th { vertical-align:top; overflow-wrap:anywhere; }
.semantic-table td small { display:block; color:var(--text-muted); margin-top:.2rem; font-size:.72rem; }
.semantic-table .badge { margin:.3rem .25rem 0 0; }
.semantic-relations { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.6rem; }
.semantic-relations a { display:grid; gap:.25rem; padding:.75rem; border:1px solid var(--border); border-radius:8px; color:var(--text); text-decoration:none; }
.semantic-relations a:hover { border-color:var(--primary); }
.semantic-relations span { color:var(--text-muted); font-size:.78rem; }
.semantic-concepts { margin-top:1rem; }
.semantic-concepts h4 { font-size:.85rem; margin:0 0 .5rem; }
.semantic-concepts .badge { margin:0 .25rem .25rem 0; }
.semantic-process-list, .semantic-gateway-list { display:grid; gap:.8rem; }
.semantic-process-card, .semantic-gateway { border:1px solid var(--border); border-radius:9px; padding:1rem; background:var(--surface); }
.semantic-process-card__title, .semantic-gateway__title { display:flex; justify-content:space-between; align-items:start; gap:1rem; }
.semantic-process-card h4, .semantic-gateway h3 { margin:.15rem 0 .3rem; }
.semantic-process-card p { margin:0; color:var(--text-muted); }
.semantic-process-card__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin-top:1rem; }
.semantic-process-card__grid > div { min-width:0; border-top:1px solid var(--border); padding-top:.65rem; }
.semantic-process-card__grid strong { font-size:.78rem; }
.semantic-process-card__grid ul { margin:.3rem 0 0; padding-left:1.1rem; }
.semantic-process-card__grid li { margin-bottom:.3rem; font-size:.82rem; overflow-wrap:anywhere; }
.semantic-process-card__grid small { color:var(--text-muted); }
.semantic-process-card__actions { display:flex; flex-wrap:wrap; gap:1rem; margin-top:.75rem; font-size:.83rem; font-weight:600; }
.semantic-empty { color:var(--text-muted); background:var(--surface-alt); border-radius:7px; padding:.85rem 1rem; margin:0; }
.semantic-footer-links { display:flex; flex-wrap:wrap; gap:1rem; margin:1rem 0; font-size:.85rem; }
.semantic-engine-notice { border-left:3px solid var(--warning); background:var(--warning-light); padding:.85rem 1rem; border-radius:0 7px 7px 0; margin-bottom:1.2rem; }
.semantic-process-status { margin:1rem 0; padding:.75rem .9rem; background:var(--surface-alt); border-left:3px solid var(--primary); border-radius:0 7px 7px 0; font-size:.87rem; }
.semantic-process-status p { margin:.35rem 0 0; color:var(--text-muted); }
.semantic-run-filters { display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1rem; }
.semantic-run-filters a { padding:.4rem .65rem; border:1px solid var(--border); border-radius:6px; color:var(--text-muted); text-decoration:none; font-size:.8rem; }
.semantic-run-filters a.is-active, .semantic-run-filters a:hover { background:var(--surface-alt); color:var(--primary); border-color:var(--primary); }
.semantic-node-track { display:flex; gap:.5rem; list-style:none; padding:0; overflow-x:auto; margin:1rem 0; }
.semantic-node-track li { display:grid; gap:.2rem; flex:1 0 135px; min-width:0; padding:.7rem; border:1px solid var(--border); border-radius:7px; }
.semantic-node-track__index { color:var(--primary); font-size:.72rem; font-weight:700; }
.semantic-node-track strong { font-size:.82rem; }
.semantic-node-track small { color:var(--text-muted); overflow-wrap:anywhere; font-size:.72rem; }
.wf-flow { margin:1rem 0 1.25rem; overflow:auto; border:1px solid var(--border); border-radius:10px; background:#edf2f4; }
.wf-flow__canvas { position:relative; min-width:100%; background-image:radial-gradient(circle,#cad6da 1px,transparent 1px); background-size:22px 22px; }
.wf-flow__edges { position:absolute; inset:0; pointer-events:none; }
.wf-flow__edge { stroke:#577a86; stroke-width:2.5; }
.wf-flow__node { position:absolute; width:200px; min-height:72px; padding:.55rem .75rem; border:1px solid #9cabb3; border-left:4px solid #4b7680; border-radius:10px; background:#fff; box-shadow:0 3px 10px rgba(27,49,60,.08); display:grid; gap:.2rem; }
.wf-flow__node small { color:#62727a; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; }
.wf-flow__node strong { font-size:.9rem; line-height:1.3; }
.wf-flow__node--start { border-left-color:#2f7a4f; }
.wf-flow__node--end { border-left-color:#697580; }
.wf-flow__node--contract_context { border-left-color:#765993; }
.wf-flow__node--authorization { border-left-color:#9a6b27; }
.wf-flow__node--operation { border-left-color:#287988; }
.run-diagram { margin:1rem 0 1.25rem; }
.run-diagram__canvas { position:relative; overflow:auto; max-height:520px; background:#edf2f4; border:1px solid var(--border); border-radius:8px; background-image:radial-gradient(circle,#cad6da 1px,transparent 1px); background-size:22px 22px; }
.run-diagram__edges { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.run-diagram__edge { stroke:#577a86; stroke-width:2; }
.run-diagram__node { position:absolute; width:208px; min-height:72px; padding:.55rem .7rem; border:1px solid #9cabb3; border-left:4px solid #4b7680; border-radius:9px; background:#fff; box-shadow:0 3px 10px rgba(27,49,60,.08); display:grid; gap:.15rem; }
.run-diagram__node small { color:#62727a; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; }
.run-diagram__node strong { font-size:.86rem; line-height:1.25; }
.run-diagram__node--done { border-left-color:#2f7a4f; background:#f1faf4; }
.run-diagram__node--current { border-left-color:#d4a017; outline:3px solid #d4a017; outline-offset:2px; background:#fffbeb; }
.run-diagram__node--waiting { border-left-color:#9a6b27; background:#fff8eb; }
.run-diagram__node--failed { border-left-color:#b42318; background:#fef3f2; }
.run-diagram__node--pending { opacity:.72; }
.run-diagram__track { display:flex; gap:.5rem; list-style:none; padding:0; margin:0; overflow-x:auto; }
.run-diagram__step { display:grid; gap:.2rem; flex:1 0 140px; min-width:0; padding:.75rem; border:1px solid var(--border); border-radius:8px; background:var(--surface); }
.run-diagram__step--done { border-color:#86c5a0; background:#f1faf4; }
.run-diagram__step--current { border-color:#d4a017; background:#fffbeb; box-shadow:0 0 0 2px rgba(212,160,23,.25); }
.run-diagram__step--waiting { border-color:#c9943a; background:#fff8eb; }
.run-diagram__step--failed { border-color:#f97066; background:#fef3f2; }
.run-diagram__step--pending { opacity:.7; }
.run-diagram__index { color:var(--primary); font-size:.72rem; font-weight:700; }
.run-diagram__step strong { font-size:.84rem; }
.run-diagram__step small { color:var(--text-muted); font-size:.72rem; }
.run-diagram__legend { display:flex; flex-wrap:wrap; gap:.75rem 1.1rem; list-style:none; margin:.75rem 0 0; padding:0; font-size:.78rem; color:var(--text-muted); }
.run-diagram__legend li { display:inline-flex; align-items:center; gap:.35rem; }
.run-diagram__swatch { width:.7rem; height:.7rem; border-radius:2px; border:1px solid var(--border); }
.run-diagram__swatch--done { background:#f1faf4; border-color:#86c5a0; }
.run-diagram__swatch--current { background:#fffbeb; border-color:#d4a017; }
.run-diagram__swatch--waiting { background:#fff8eb; border-color:#c9943a; }
.run-diagram__swatch--pending { background:#fff; opacity:.7; }
.semantic-journal { list-style:none; padding:0; margin:0; border-left:2px solid var(--border); }
.semantic-journal li { margin:0 0 1rem 1rem; padding:0 0 .8rem 1rem; border-bottom:1px solid var(--border); }
.semantic-journal li > div { display:flex; gap:.5rem; align-items:center; }
.semantic-journal small { color:var(--text-muted); }
.semantic-journal dl { display:grid; gap:.35rem; margin:.6rem 0 0; }
.semantic-journal dl div { display:grid; grid-template-columns:minmax(110px,180px) minmax(0,1fr); gap:.5rem; font-size:.78rem; }
.semantic-journal dt { color:var(--text-muted); }
.semantic-journal dd { margin:0; overflow-wrap:anywhere; }
.journal-story { margin:0 0 1.1rem; padding:.9rem 1rem; border-radius:8px; border-left:4px solid var(--primary,#13263F); background:var(--surface-alt,#f4f7f8); }
.journal-story--waiting,.journal-story--pending { border-left-color:#d4a017; background:#fffbeb; }
.journal-story--failed { border-left-color:#b42318; background:#fef3f2; }
.journal-story--succeeded,.journal-story--completed { border-left-color:#2f7a4f; background:#f1faf4; }
.journal-story--cancelled { border-left-color:#697580; background:#f4f6f7; }
.journal-story__headline { margin:0 0 .35rem; font-size:1.05rem; font-weight:700; }
.journal-story__body { margin:0; color:var(--text); }
.journal-story__action { margin:.55rem 0 0; }
.journal-links { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1rem; }
.journal-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin:0 0 1rem; }
.journal-form { margin:0 0 1.1rem; display:grid; gap:.75rem; max-width:36rem; padding:1rem; border:1px solid var(--border); border-radius:8px; background:var(--surface); }
.journal-reviews { margin:0 0 1rem; padding:.75rem .9rem; border:1px solid var(--border); border-radius:8px; }
.journal-reviews ul { margin:.4rem 0 0; padding-left:1.1rem; }
.journal-error { margin:0 0 1rem; padding:.75rem .9rem; border-left:3px solid #b42318; background:#fef3f2; }
.journal-timeline { list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.journal-card { margin:0; padding:.85rem 1rem; border:1px solid var(--border); border-radius:8px; border-left:4px solid #577a86; background:var(--surface); }
.journal-card--done { border-left-color:#2f7a4f; background:#f8fcf9; }
.journal-card--waiting { border-left-color:#d4a017; background:#fffdf5; }
.journal-card--failed { border-left-color:#b42318; background:#fff8f7; }
.journal-card--blocked { border-left-color:#9a6b27; }
.journal-card--info { border-left-color:#4b7680; }
.journal-card__head { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:space-between; }
.journal-card__summary { margin:.45rem 0 .25rem; font-size:.95rem; line-height:1.4; }
.journal-card__time { display:block; color:var(--text-muted); font-size:.78rem; }
.journal-card__links { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:.55rem; }
.journal-facts { display:grid; gap:.3rem; margin:.55rem 0 0; }
.journal-facts div { display:grid; grid-template-columns:minmax(7rem,10rem) minmax(0,1fr); gap:.5rem; font-size:.84rem; }
.journal-facts dt { color:var(--text-muted); margin:0; }
.journal-facts dd { margin:0; overflow-wrap:anywhere; }
.journal-tech { margin-top:.55rem; font-size:.8rem; }
.journal-tech summary { cursor:pointer; color:var(--text-muted); }
.journal-tech dl { display:grid; gap:.3rem; margin:.45rem 0 0; }
.journal-tech dl div { display:grid; grid-template-columns:minmax(7rem,12rem) minmax(0,1fr); gap:.4rem; }
.journal-tech dt { color:var(--text-muted); margin:0; }
.journal-tech dd { margin:0; overflow-wrap:anywhere; font-family:ui-monospace,monospace; font-size:.75rem; }
.journal-tech--block { margin-top:1.25rem; padding-top:.75rem; border-top:1px solid var(--border); }
.semantic-context-binding { padding:.8rem 0; margin:.8rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.semantic-context-binding h3 { margin:0 0 .5rem; font-size:1rem; }
.semantic-context-binding p { margin:.5rem 0; }
.semantic-context-binding code { overflow-wrap:anywhere; }
.semantic-context-sources { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; list-style:none; margin:.5rem 0; padding:0; font-size:.85rem; }
.semantic-customizing .grid--2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.semantic-customizing .grid--2 > label { display:block; min-width:0; }
.semantic-customizing .grid--2 > label.form-check { display:flex; align-items:center; gap:.45rem; }
.semantic-customizing .grid--2 > label .form-control { width:100%; }
.semantic-change-links { display:grid; gap:.5rem; margin-top:1rem; }
.semantic-change-links a { display:grid; gap:.3rem; padding:.75rem; color:var(--text); text-decoration:none; border:1px solid var(--border); border-radius:7px; }
.semantic-change-links a.is-active { background:var(--surface-alt); border-color:var(--primary); }
.semantic-change-links small { color:var(--text-muted); }
.semantic-change-definition { border-bottom:1px solid var(--border); padding:.8rem 0; }
.semantic-change-definition h4 { margin:.25rem 0; }
.semantic-change-definition dl { margin:.5rem 0; display:grid; gap:.35rem; }
.semantic-change-definition dl > div { display:grid; grid-template-columns:minmax(110px,25%) 1fr; gap:1rem; font-size:.86rem; }
.semantic-change-definition dt { color:var(--text-muted); }
.semantic-change-definition dd { margin:0; overflow-wrap:anywhere; }
.semantic-change-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.semantic-change-form > label { min-width:0; }
.semantic-record-fields { min-width:0; margin:.75rem 0; }
.semantic-record-fields__heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.4rem 1rem; margin:0 0 .75rem; padding-top:.75rem; border-top:1px solid var(--border); }
.semantic-record-fields__heading h3 { margin:0; font-size:.92rem; font-weight:650; }
.semantic-record-fields__heading small { display:block; margin-top:.2rem; color:var(--text-muted); font-size:.76rem; }
.semantic-record-fields__configure,.semantic-record-fields__empty { color:var(--text-muted); font-size:.78rem; text-decoration:none; }
.semantic-record-fields__configure:hover,.semantic-record-fields__empty:hover { color:var(--primary); text-decoration:underline; }
.semantic-record-fields__empty { display:inline-flex; margin:.3rem 0; }
.semantic-record-fields__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1rem; }
.semantic-record-fields__control { display:flex; align-items:center; gap:.4rem; }
.semantic-record-fields__control .form-control { min-width:0; flex:1; }
.semantic-record-fields__control .btn { flex:none; }
.semantic-record-fields__status { font-size:.78rem; color:var(--text-muted); margin:.4rem 0 0; }
@media (max-width:700px) { .semantic-record-fields__grid { grid-template-columns:1fr; } }
@media (max-width:900px) {
    .semantic-change-form { grid-template-columns:1fr; }
    .semantic-customizing .grid--2 { grid-template-columns:1fr; }
    .semantic-workspace { grid-template-columns:1fr; }
    .semantic-object-nav { position:static; max-height:none; }
    .semantic-object-links { display:none; }
    .semantic-mobile-picker { display:grid; gap:.35rem; margin-top:.6rem; }
    .semantic-process-card__grid { grid-template-columns:1fr; }
    .semantic-model-header, .semantic-panel__head { flex-direction:column; }
}
@media (max-width:700px) {
    .semantic-node-track { flex-direction:column; overflow:visible; }
    .semantic-node-track li { flex:auto; }
    .semantic-journal li > div { flex-wrap:wrap; }
    .semantic-journal dl div { grid-template-columns:1fr; }
    .semantic-table, .semantic-table tbody, .semantic-table tr, .semantic-table td { display:block; width:100%; box-sizing:border-box; }
    .semantic-table thead { display:none; }
    .semantic-table tr { border:1px solid var(--border); border-radius:8px; margin-bottom:.65rem; padding:.35rem .6rem; }
    .semantic-table td { display:grid; grid-template-columns:92px minmax(0,1fr); gap:.5rem; border:0 !important; padding:.35rem .2rem !important; font-size:.83rem; }
    .semantic-table td::before { content:attr(data-label); color:var(--text-muted); font-size:.72rem; font-weight:650; }
    .semantic-table td { overflow-wrap:anywhere; }
    .semantic-table td > * { grid-column:2; min-width:0; overflow-wrap:anywhere; }
}

/* ==========================================================================
   ERP UX/UI DESIGN SYSTEM & COMPONENT STANDARDS (reportdesk.eu)
   ========================================================================== */

/* 1. Form Sectioning & Cognitive Hierarchy */
.erp-form-section {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.erp-form-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border, #f1f5f9);
}

.erp-form-section__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text, #0f172a);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.erp-form-section__desc {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
}

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

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

.erp-form-grid > .col-full,
.erp-form-grid--3 > .col-full {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .erp-form-grid,
    .erp-form-grid--3 {
        grid-template-columns: 1fr;
    }
}

.erp-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.erp-form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text, #1e293b);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.form-label--required::after,
.erp-form-label--required::after {
    content: " *";
    color: var(--danger, #dc2626);
    font-weight: 700;
}

.erp-form-hint {
    font-size: 0.76rem;
    color: var(--text-muted, #64748b);
    margin-top: 0.15rem;
}

/* Product list: single-line search / filter bar */
.product-list-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.45rem;
    padding: 0.4rem 0.55rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 8px);
    margin-bottom: 0.75rem;
    overflow-x: auto;
}
.product-list-filter-bar input[type="search"],
.product-list-filter-bar select {
    min-height: 2.1rem;
    height: 2.1rem;
    margin: 0;
    padding: 0.3rem 0.55rem;
    font-size: 0.85rem;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 6px;
    background: #fff;
    color: var(--text, #0f172a);
}
.product-list-filter-bar .btn {
    min-height: 2.1rem;
    height: 2.1rem;
    padding: 0 0.7rem;
}
.product-list-filter-meta {
    margin-left: 0.15rem;
    padding-left: 0.55rem;
    border-left: 1px solid var(--border, #e2e8f0);
}
@media (max-width: 767px) {
    .product-list-filter-bar {
        flex-wrap: wrap;
    }
    .product-list-filter-meta {
        width: 100%;
        border-left: 0;
        padding-left: 0;
        margin-left: 0;
    }
}

/* 2. Task-Oriented Quick Filter Pills */
.erp-quick-filters {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.4rem;
    margin-bottom: 1rem;
}

.erp-filter-pill {
    appearance: none;
    border: 1px solid var(--border, #cbd5e1);
    background: var(--surface, #ffffff);
    color: var(--text, #334155);
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: all 0.15s ease;
}

.erp-filter-pill:hover {
    background: var(--surface-alt, #f8fafc);
    border-color: var(--primary, #13263F);
}

.erp-filter-pill.is-active,
.erp-filter-pill--active {
    background: var(--primary, #13263F);
    border-color: var(--primary, #13263F);
    color: #ffffff;
    font-weight: 600;
}

.erp-filter-pill .badge {
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
}

.erp-filter-pill.is-active .badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* 3. Actionable Empty States */
.erp-empty-state {
    background: var(--surface, #ffffff);
    border: 1.5px dashed var(--border, #cbd5e1);
    border-radius: 12px;
    padding: 3rem 1.5rem;
    text-align: center;
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
}

.erp-empty-state__icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.erp-empty-state__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text, #0f172a);
    margin: 0;
}

.erp-empty-state__text {
    font-size: 0.88rem;
    color: var(--text-muted, #64748b);
    max-width: 460px;
    margin: 0;
    line-height: 1.45;
}

.erp-empty-state__actions {
    display: flex;
    gap: 0.65rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* 4. Action Button Prominence & Safety */
.btn--dominant {
    background: var(--primary, #13263F) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(11, 48, 86, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    min-height: 2.35rem;
}

.btn--dominant:hover {
    background: #092543 !important;
    box-shadow: 0 6px 16px rgba(11, 48, 86, 0.35) !important;
}

.btn--danger-protected {
    background: transparent !important;
    color: var(--danger, #dc2626) !important;
    border: 1px solid #fca5a5 !important;
}

.btn--danger-protected:hover {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #f87171 !important;
}

/* ==========================================================================
   5. MOBILE & SMALL-SCREEN RESPONSIVE ARCHITECTURE (< 768px & < 480px)
   ========================================================================== */

/* 5.1 Base Page & Content Clearance */
@media (max-width: 767px) {
    .page {
        padding: 0.85rem 0.65rem !important;
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        /* Ensure content is never hidden behind the fixed mobile bottom bar */
        padding-bottom: calc(var(--nav-h, 56px) + env(safe-area-inset-bottom, 16px) + 2rem) !important;
    }

    body {
        padding-bottom: calc(var(--nav-h, 56px) + env(safe-area-inset-bottom, 16px)) !important;
        overflow-x: hidden !important;
    }
}

@media (max-width: 480px) {
    .page {
        padding: 0.65rem 0.4rem !important;
    }
}

/* 5.2 Responsive Headers & Actions */
@media (max-width: 767px) {
    .ui-header-main,
    .page-header:not(:has(.ui-header-main)) {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .ui-header-title-area,
    .page-header > div:first-child {
        width: 100% !important;
    }

    .ui-header-title-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.4rem 0.65rem !important;
        align-items: center !important;
    }

    .ui-header-title-row h1,
    .ui-page-header h1,
    .page-header h1 {
        font-size: 1.2rem !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
    }

    .ui-header-meta,
    .page-header .subtitle {
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
        gap: 0.35rem 0.65rem !important;
    }

    .ui-header-value-box {
        width: 100% !important;
        min-width: 0 !important;
        align-items: flex-start !important;
        box-sizing: border-box !important;
        margin-top: 0.25rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    .ui-header-main > .ui-action-bar,
    .ui-action-bar,
    .page-header__actions,
    .record-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.45rem !important;
        align-items: center !important;
        padding-top: 0.25rem !important;
    }
}

/* 5.3 Quick Filters Horizontal Touch Carousel */
.erp-quick-filters {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.45rem;
    margin-bottom: 0.85rem;
    scrollbar-width: none; /* Firefox */
}
.erp-quick-filters::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge */
}
.erp-filter-pill {
    flex-shrink: 0;
    white-space: nowrap;
}

/* 5.4 Form Grids and High-Density Inputs: Preserving Desktop ERP Geometry */
.erp-form-section {
    padding: 1rem 1.25rem !important;
    margin-bottom: 1rem !important;
    border-radius: 4px !important;
    border: 1px solid #cbd5e1 !important;
}

@media (max-width: 767px) {
    /* KPI Cards on small screens */
    .kpi-grid,
    .task-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    .kpi-card,
    .task-kpi-card {
        padding: 0.6rem 0.75rem !important;
    }
    .kpi-value {
        font-size: 1.35rem !important;
    }
}

@media (max-width: 480px) {
    .card:not(.card:has(.table)) {
        padding: 0.75rem 0.55rem !important;
        border-radius: 4px !important;
    }
    .kpi-grid,
    .task-kpi-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 5.5 Tablet Grid Step-Downs (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .form-grid--4,
    .form-grid--3,
    div[style*="repeat(4, 1fr)"],
    div[style*="repeat(4,1fr)"],
    div[style*="1fr 1fr 1fr 1fr"],
    div[style*="repeat(3, 1fr)"],
    div[style*="repeat(3,1fr)"],
    div[style*="1fr 1fr 1fr"],
    div[style*="1fr 1fr 1.2fr"],
    div[style*="1fr 1fr 1.4fr"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
}

/* 5.6 ERP Dialog Window Standards (Clean, centered, rectangular 4px) */
@media (max-width: 767px) {
    .modal,
    .crud-form-card,
    .position-item-modal {
        width: 95% !important;
        max-width: 95vw !important;
        margin: auto !important;
        border-radius: 4px !important;
    }
}

/* 5.7 Data Tables & Responsive Overflow */
.scroll-panel--table,
.ui-table-wrap,
.table-responsive,
.portal-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative;
}

@media (max-width: 767px) {
    /* Hide non-essential desktop columns on mobile */
    .col-hide-sm,
    th.col-hide-sm,
    td.col-hide-sm {
        display: none !important;
    }

    .table th,
    .table td {
        padding: 0.5rem 0.4rem !important;
        font-size: 0.8rem !important;
    }

    .table td strong {
        font-size: 0.82rem !important;
    }

    /* Cards containing tables: remove side padding so tables touch edges nicely */
    .card:has(.table),
    .record-list-card {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: hidden !important;
    }
}

@media (max-width: 480px) {
    .col-hide-xs,
    th.col-hide-xs,
    td.col-hide-xs {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    .col-hide-md,
    th.col-hide-md,
    td.col-hide-md {
        display: none !important;
    }
}

/* 5.8 Search Toolbars & Filter Bars */
@media (max-width: 767px) {
    .record-list-filters,
    .ui-toolbar,
    .filter-bar,
    .task-filter-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .record-filter-field,
    .ui-toolbar-field,
    .task-filter-group input,
    .task-filter-group select {
        width: 100% !important;
        max-width: 100% !important;
    }

    .record-filter-actions,
    .ui-toolbar-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}

/* 5.9 Empty States on Mobile */
@media (max-width: 767px) {
    .erp-empty-state {
        padding: 2rem 1rem !important;
        margin: 1rem 0 !important;
    }

    .erp-empty-state__icon {
        font-size: 2rem !important;
    }

    .erp-empty-state__title {
        font-size: 1.05rem !important;
    }

    .erp-empty-state__text {
        font-size: 0.82rem !important;
    }

    .erp-empty-state__actions {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 280px !important;
    }

    .erp-empty-state__actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* 5.10 POS (Point of Sale) & Multi-Panel Stacking */
@media (max-width: 1023px) {
    .pos-container > div[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
}

/* 5.11 Breadcrumbs & Single-Line Navigation */
@media (max-width: 767px) {
    .ui-breadcrumb,
    .breadcrumb,
    .detail-breadcrumb,
    .quote-breadcrumb,
    .portal-breadcrumb {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        scrollbar-width: none !important;
        padding-bottom: 0.2rem !important;
        margin-bottom: 0.45rem !important;
        max-width: 100% !important;
    }
    .ui-breadcrumb::-webkit-scrollbar,
    .portal-breadcrumb::-webkit-scrollbar {
        display: none !important;
    }
    .ui-breadcrumb a,
    .portal-breadcrumb a {
        flex-shrink: 0 !important;
    }
}

/* 5.12 Voice Command & Command Bar on Small Screens */
@media (max-width: 600px) {
    .voice-button-label {
        display: none !important;
    }
    .voice-mic-btn {
        padding: 0 0.65rem !important;
        min-width: 42px !important;
    }
    .voice-send-btn {
        padding: 0 0.85rem !important;
        font-size: 0.82rem !important;
    }
}
.command-bar {
    top: var(--top-h, 56px) !important;
    z-index: 95 !important;
}

/* 5.13 Kanban Board Touch Ergonomics & Scroll-Snap
   Flex + horizontal scroll (not 5-col CSS grid): grid with
   minmax(260px,1fr)×5 either crushes columns or overflows the
   page without a usable swipe surface on phones. */
.task-kanban-board-grid,
.ticket-kanban-board-grid,
.crm-kanban-board {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.task-kanban-board-grid > .card,
.ticket-kanban-board-grid > .card,
.crm-kanban-col {
    flex: 0 0 280px;
    width: 280px;
    max-width: 85vw;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 0;
}
.task-kanban-board-grid > .card,
.ticket-kanban-board-grid > .card {
    max-height: calc(100vh - 220px);
    display: flex;
    flex-direction: column;
}
.task-kanban-board-grid .task-kanban-dropzone,
.ticket-kanban-board-grid .ticket-kanban-dropzone {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 12rem;
}
.task-kanban-mobile-hint {
    display: none;
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    margin: 0 0 0.5rem;
}
.task-kanban-status-select {
    display: none;
    width: 100%;
    margin-top: 0.4rem;
    font-size: 0.8rem;
}
@media (max-width: 767px) {
    .task-kanban-board-grid > .card,
    .ticket-kanban-board-grid > .card,
    .crm-kanban-col {
        flex: 0 0 min(86vw, 300px) !important;
        width: min(86vw, 300px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 200px);
    }
    .task-kanban-board-grid .card-body.task-kanban-dropzone,
    .ticket-kanban-board-grid .card-body.ticket-kanban-dropzone {
        min-height: 10rem !important;
    }
    .task-kanban-mobile-hint {
        display: block;
    }
    .task-kanban-status-select {
        display: block;
    }
    /* HTML5 DnD is unreliable on touch; hide grab cursor noise */
    .task-kanban-card[draggable="true"],
    .ticket-kanban-card[draggable="true"] {
        cursor: pointer;
    }
    .crm-side-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 1rem 0.85rem !important;
    }
}

/* ---- Returns condition matrix (full-width policy editor) ---- */
.returns-matrix-editor {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-alt, #f8fafc);
}
.returns-matrix-editor__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.returns-matrix-editor__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface, #fff);
}
.returns-matrix-table {
    margin: 0;
    font-size: 0.85rem;
    min-width: 920px;
}
.returns-matrix-table th,
.returns-matrix-table td {
    vertical-align: top;
    padding: 0.55rem 0.5rem;
}
.returns-matrix-table__grade {
    width: 3rem;
    font-weight: 700;
    text-align: center;
}
.returns-matrix-table__action {
    text-align: center;
    min-width: 7.5rem;
}
.returns-matrix-table__action select {
    width: 100%;
    max-width: 7rem;
    font-size: 0.78rem;
}
.returns-matrix-cell--default {
    border-color: #2456A6 !important;
    background: #eff6ff;
    font-weight: 600;
}
.returns-matrix-cell--allowed {
    border-color: #10b981 !important;
    background: #ecfdf5;
}
.returns-grade-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Place-name autocomplete (app/static/js/geo_autocomplete.js).
   Menu is teleported to <body> and positioned fixed by JS — do not rely on
   absolute positioning inside overflow:clip/auto ancestors. */
.geo-autocomplete-menu {
    position: fixed; z-index: 1100;
    max-height: 260px; overflow-y: auto;
    background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
}
.geo-autocomplete-option {
    display: block; width: 100%; text-align: left; padding: .5rem .7rem;
    border: 0; border-bottom: 1px solid #eef1f5; background: transparent; cursor: pointer; font-size: .85rem;
}
.geo-autocomplete-option:last-child { border-bottom: 0; }
.geo-autocomplete-option:hover { background: var(--surface-alt, #f1f5f9); }
.geo-autocomplete-option small { color: #64748b; }
.geo-autocomplete-empty { padding: .4rem .1rem; color: #64748b; font-size: .78rem; margin: .25rem 0 0; }

/* ============================================================
   Accessibility baseline (docs/architecture/gui-standards-konzept.md)
   ============================================================ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: .6rem 1rem;
    background: var(--primary, #13263F);
    color: #fff;
    border-radius: 0 0 8px 0;
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Semantic layer map (Abläufe / Prozesskatalog) */
.semantic-layers {
  display: flex; align-items: stretch; gap: .6rem;
}
.semantic-layer {
  flex: 1; display: flex; gap: .7rem;
  border: 1px solid var(--border, #d8e0e4); border-radius: 8px;
  padding: .75rem .85rem; background: var(--surface-alt, #f8fafc);
}
.semantic-layer__num { font-size: 1.3rem; line-height: 1; padding-top: .1rem; }
.semantic-layer__body h3 { margin: 0 0 .25rem; font-size: .95rem; }
.semantic-layer__body p { margin: 0; }
.semantic-layer__links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.semantic-layer__link {
  font-size: .8rem; font-weight: 600; text-decoration: none;
  padding: .18rem .55rem; border-radius: 999px;
  border: 1px solid var(--border, #d8e0e4); background: var(--surface, #fff);
}
.semantic-layer__link:hover { border-color: var(--primary, #13263F); }
.semantic-layer__arrow { align-self: center; color: var(--text-muted, #64748b); font-size: 1.1rem; }
@media (max-width: 900px) {
  .semantic-layers { flex-direction: column; }
  .semantic-layer__arrow { transform: rotate(90deg); align-self: flex-start; margin-left: .9rem; }
}

/* ==========================================================================
   v7 — Solid & Serious Surface Refresh (2026-10-19)
   Final cascade layer. Restates the major surfaces (buttons, tables, cards,
   forms, badges, modals, tabs) in the calmer landing-page palette:
   navy #13263F = structure, blue #2456A6 = interaction.
   !important is intentional — earlier canonical layers use !important on
   the same properties; this block is the last word.
   ========================================================================== */

/* ---------- Buttons: flat, square-ish, blue dominant action ---------- */
.btn, button.btn, a.btn, input[type="button"].btn, input[type="submit"].btn {
    border-radius: 6px !important;
    border-color: #C9D2DF !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
}
.btn:hover:not(:disabled), button.btn:hover:not(:disabled), a.btn:hover {
    background: #F4F6F9 !important;
    border-color: #A8B4C6 !important;
    box-shadow: none !important;
}
.btn:active:not(:disabled), button.btn:active:not(:disabled), a.btn:active {
    background: #E8EDF4 !important;
}
.btn:focus-visible, button.btn:focus-visible, a.btn:focus-visible {
    outline: 2px solid #2456A6 !important;
    outline-offset: 2px !important;
}

.btn--primary, button.btn--primary, a.btn--primary,
.btn-primary, button.btn-primary, a.btn-primary,
.btn--dominant, button.btn--dominant, a.btn--dominant {
    background: #2456A6 !important;
    border-color: #1B4179 !important;
    color: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(27, 65, 121, .18) !important;
}
.btn--primary:hover:not(:disabled), button.btn--primary:hover:not(:disabled), a.btn--primary:hover,
.btn-primary:hover:not(:disabled), button.btn-primary:hover:not(:disabled), a.btn-primary:hover,
.btn--dominant:hover:not(:disabled), button.btn--dominant:hover:not(:disabled), a.btn--dominant:hover {
    background: #1B4179 !important;
    border-color: #15325F !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(27, 65, 121, .22) !important;
}

.btn--secondary, button.btn--secondary, a.btn--secondary,
.btn-secondary, button.btn-secondary, a.btn-secondary,
.btn--outline, button.btn--outline, a.btn--outline,
.btn-outline, button.btn-outline, a.btn-outline,
.btn--ghost, button.btn--ghost, a.btn--ghost,
.btn-ghost, button.btn-ghost, a.btn-ghost {
    background: #FFFFFF !important;
    border-color: #C9D2DF !important;
    color: #26344A !important;
    box-shadow: none !important;
}
.btn--secondary:hover:not(:disabled), button.btn--secondary:hover:not(:disabled), a.btn--secondary:hover,
.btn-secondary:hover:not(:disabled), button.btn-secondary:hover:not(:disabled), a.btn-secondary:hover,
.btn--outline:hover:not(:disabled), button.btn--outline:hover:not(:disabled), a.btn--outline:hover,
.btn-outline:hover:not(:disabled), button.btn-outline:hover:not(:disabled), a.btn-outline:hover,
.btn--ghost:hover:not(:disabled), button.btn--ghost:hover:not(:disabled), a.btn--ghost:hover,
.btn-ghost:hover:not(:disabled), button.btn-ghost:hover:not(:disabled), a.btn-ghost:hover {
    background: #F4F6F9 !important;
    border-color: #A8B4C6 !important;
    color: #13263F !important;
    box-shadow: none !important;
}

.btn--accent, button.btn--accent, a.btn--accent {
    background: #334155 !important;
    border-color: #26354A !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}
.btn--accent:hover:not(:disabled), button.btn--accent:hover:not(:disabled), a.btn--accent:hover {
    background: #1E293B !important;
    border-color: #16202E !important;
}

.btn--success, button.btn--success, a.btn--success,
.btn-success, button.btn-success, a.btn-success {
    background: #166534 !important;
    border-color: #14532D !important;
    color: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(20, 83, 45, .18) !important;
}
.btn--success:hover:not(:disabled), button.btn--success:hover:not(:disabled), a.btn--success:hover,
.btn-success:hover:not(:disabled), button.btn-success:hover:not(:disabled), a.btn-success:hover {
    background: #14532D !important;
    border-color: #0F3D21 !important;
    box-shadow: 0 2px 6px rgba(20, 83, 45, .22) !important;
}

/* ---------- Tables: tinted headers, hairline rows, tabular figures ---------- */
.table thead th, .ui-table thead th, .ui-data-table thead th,
.table > thead > tr > th {
    background: #F4F6F9 !important;
    color: #526173 !important;
    border-top: none !important;
    border-bottom: 1.5px solid #D9E0EA !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
}
.table tbody td, .ui-table tbody td, .ui-data-table tbody td,
.table > tbody > tr > td {
    font-size: 13px !important;
    color: #26344A !important;
    border-bottom: 1px solid #E8ECF2 !important;
    font-variant-numeric: tabular-nums;
}
.table tbody tr, .ui-table tbody tr, .table > tbody > tr {
    border-bottom: 1px solid #E8ECF2 !important;
}
.table tbody tr:hover td, .ui-table tbody tr:hover td,
.table > tbody > tr:hover {
    background: #F5F8FC !important;
}
.scroll-panel--table, .ui-table-wrap, .table-responsive, .portal-table-wrap {
    border: 1px solid #D9E0EA;
    border-radius: 8px;
    background: #FFFFFF;
}

/* ---------- Cards & panels: flat, hairline, quiet ---------- */
.card, .erp-beleg, .ui-record-editor, .record-editor,
.erp-form-section, .auto-hub__card {
    border-color: #DCE3EC !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(19, 38, 63, .05) !important;
}
.card-header {
    background: #F8FAFC;
    border-bottom: 1px solid #E8ECF2;
}
.kpi-value { color: #13263F; }
.page-header { border-bottom-color: #D9E0EA; }

/* ---------- Forms: white inputs, accent focus ring ---------- */
input:not([type="checkbox"]):not([type="radio"]), select, textarea,
.form-control, .form-select, .form-input {
    border: 1px solid #C2CCDA !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
}
input:hover, select:hover, textarea:hover { border-color: #A8B4C6 !important; }
.page form input:focus, .page form select:focus, .page form textarea:focus,
form input:not([type="checkbox"]):not([type="radio"]):focus, form select:focus, form textarea:focus,
input:focus, select:focus, textarea:focus,
.form-control:focus, .form-select:focus, .form-input:focus,
.ui-form-field input:focus, .ui-form-field select:focus, .ui-form-field textarea:focus {
    border-color: #2456A6 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(36, 86, 166, .16) !important;
}
label, .form-label, .page form label, .page .form-label { color: #44516B !important; }

/* ---------- Badges & status: squared pills, hairline tints ---------- */
.ui-badge, .badge, .status {
    border-radius: 5px;
    font-size: .7rem;
    font-weight: 650;
    letter-spacing: .02em;
}
.badge--processing, .badge--info, .badge--scheduled, .badge--primary,
.badge--normal, .status-info {
    background: #EEF3FA !important; color: #1B4179 !important; border: 1px solid #CFDCEE !important;
}
.badge--approved, .badge--active, .badge--completed, .badge--success, .status-green {
    background: #F0FDF4 !important; color: #166534 !important; border: 1px solid #BBDCC6 !important;
}
.badge--needs_review, .badge--open, .badge--draft, .badge--scheduled,
.badge--warning, .badge--high, .status-yellow, .badge--new {
    background: #FFFBEB !important; color: #92400E !important; border: 1px solid #EBD9B0 !important;
}
.badge--rejected, .badge--failed, .badge--cancelled, .badge--danger,
.badge--overdue, .badge--urgent, .status-red {
    background: #FEF2F2 !important; color: #B42318 !important; border: 1px solid #F0C9C9 !important;
}
.badge--low, .badge--ghost, .badge--outline {
    background: #F4F6F9 !important; color: #526173 !important; border: 1px solid #D9E0EA !important;
}

/* ---------- Modals: light header, hairline, soft radius ---------- */
.modal, .crud-form-card, .position-item-modal {
    border: 1px solid #D9E0EA !important;
    border-radius: 10px !important;
    box-shadow: 0 20px 50px rgba(19, 38, 63, .22) !important;
}
.modal__header {
    background: #F8FAFC !important;
    border-bottom: 1px solid #D9E0EA !important;
    color: #13263F !important;
    border-top-left-radius: 9px !important;
    border-top-right-radius: 9px !important;
    padding: 12px 18px !important;
}
.modal__header h2, .modal__header h3, .modal__title {
    color: #13263F !important;
    font-size: 14.5px !important;
    letter-spacing: 0 !important;
}
.modal__header .modal__close {
    color: #64748B !important;
    border-radius: 5px !important;
}
.modal__header .modal__close:hover {
    background: #E8ECF2 !important;
    color: #13263F !important;
}
.modal__footer {
    background: #F8FAFC !important;
    border-top: 1px solid #E8ECF2 !important;
}

/* ---------- Tabs: accent underline, no stray teal ---------- */
.ui-tab-btn:hover, .tab-btn:hover, .fs-tab:hover {
    color: #2456A6 !important;
    background: rgba(36, 86, 166, .06) !important;
}
.ui-tab-btn--active, .tab-btn--active, .tab-btn.active, .fs-tab.active,
.odoo-record-tabs .tab-btn--active, .inventory-tab.active {
    color: #1B4179 !important;
    border-bottom-color: #2456A6 !important;
    background: rgba(36, 86, 166, .05) !important;
}
.odoo-record .odoo-lines { border-top-color: #2456A6; }
.ui-tabs, .tabs, .odoo-record-tabs, .product-tabs, .fs-tabs, .inventory-tabs {
    border-bottom-color: #D9E0EA !important;
}

/* ---------- Topbar: solid, calm ---------- */
.topbar {
    background: #FFFFFF;
    border-bottom-color: #D9E0EA;
}

/* ---------- Links: accent blue ---------- */
a { color: #2456A6; }

/* ---------- Table cells that must never wrap ----------
   Document numbers, dates, amounts and status badges are atomic values;
   wrapping them mid-value was breaking list layouts (e.g. Auftragsnr.).
   Flexible text columns (Bezeichnung, Kunde, …) keep normal wrapping. */
.ui-nowrap { white-space: nowrap !important; }
.ui-cell-mono, .font-mono { font-family: var(--mono); font-size: .92em; }
.table td.ui-cell-mono, .table th.ui-cell-mono,
.table td.font-mono, .table td.col-num, .table th.col-num,
.table td.col-date, .table td.col-status, .table td.ui-nowrap,
.table td.text-right,
.ui-data-table td.ui-cell-mono, .ui-data-table td.col-num,
.ui-data-table td.col-date, .ui-data-table td.ui-nowrap {
    white-space: nowrap !important;
}
.table td:has(> .badge), .table td:has(> .status),
.ui-data-table td:has(> .badge), .ui-data-table td:has(> .status) {
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Mail client — message body + compose editor                         */
/* ------------------------------------------------------------------ */
.mail-body {
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
    padding: 1rem;
    white-space: pre-wrap;
    max-height: 380px;
    overflow-y: auto;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--text);
    word-break: break-word;
}
.mail-body blockquote {
    border-left: 3px solid var(--border);
    margin: .4rem 0;
    padding-left: .75rem;
    color: var(--text-muted);
}
.mail-body a { color: var(--primary); }

.mail-compose { max-width: 720px; }
.mail-editor { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.mail-editor__toolbar {
    display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
    padding: .4rem .5rem; background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
}
.mail-editor__sep { width: 1px; height: 16px; background: var(--border); margin: 0 .35rem; }
.mail-editor__area {
    min-height: 220px; max-height: 420px; overflow-y: auto;
    padding: .9rem 1rem; font-size: .95rem; line-height: 1.55;
    outline: none; background: var(--surface);
}
.mail-editor__area:focus { box-shadow: inset 0 0 0 2px var(--primary); }
.mail-editor__area:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.mail-editor__attach {
    display: flex; flex-wrap: wrap; gap: .4rem;
    padding: .5rem .75rem; border-top: 1px dashed var(--border);
    background: var(--surface-alt);
}
.mail-editor__chip {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 99px; padding: .15rem .6rem; font-size: .8rem;
}
.mail-signature {
    margin-top: .6rem; padding-top: .55rem;
    border-top: 1px dashed var(--border);
    white-space: pre-wrap; color: var(--text-muted); font-size: .82rem;
}

/* Mail list row actions — never clip, keep compact */
.mail-row-actions { white-space: nowrap; }
.mail-row-actions > div { flex-wrap: nowrap; }

/* Mail list — unread rows + sortable headers */
.mail-row--unread td { font-weight: 600; }
.mail-row--unread { background: #eef4ff; }
.mail-row--unread:hover { background: #e3ecfb; }
.mail-unread-dot { color: var(--primary, #2563eb); font-size: .7rem; vertical-align: middle; }
.table th a.sortable {
    color: inherit; text-decoration: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap;
}
.table th a.sortable:hover { color: var(--primary, #2563eb); }

/* ---------- Mail client layout (3-pane) ---------- */
.mail-topbar {
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem 0 .75rem;
    border-bottom: 1px solid var(--border, #e2e8f0);
}
.mail-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.mail-view-switch { display: inline-flex; border: 1px solid var(--border-dark, #cbd5e1); border-radius: 6px; overflow: hidden; }
.mail-view-switch .btn { border-radius: 0; }

.mail-setup-alert {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: .65rem 1rem; margin-top: .75rem;
    border: 1px solid #2563eb; border-radius: 8px;
    background: rgba(37, 99, 235, .05); font-size: .88rem;
}

.mail-app {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    height: calc(100vh - 200px);
    min-height: 420px;
    margin-top: .75rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface, #fff);
}

/* Folder sidebar */
.mail-folders {
    display: flex; flex-direction: column;
    border-right: 1px solid var(--border, #e2e8f0);
    background: var(--surface-alt, #f8fafc);
    overflow-y: auto;
    padding: .5rem .4rem;
}
.mail-folder {
    display: flex; align-items: center; gap: .55rem;
    padding: .45rem .6rem; border-radius: 7px;
    color: var(--text, #0f172a); text-decoration: none;
    font-size: .86rem;
}
.mail-folder:hover { background: rgba(37, 99, 235, .07); }
.mail-folder--active { background: rgba(37, 99, 235, .12); font-weight: 650; }
.mail-folder__icon { width: 1.1rem; text-align: center; }
.mail-folder__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-folder__count {
    font-size: .7rem; color: var(--text-muted, #64748b);
    background: var(--surface, #fff); border-radius: 999px; padding: .05rem .45rem;
}
.mail-folder__count--unread { background: var(--primary, #2563eb); color: #fff; font-weight: 650; }
.mail-folders__status {
    margin-top: auto; padding: .6rem .6rem .3rem;
    border-top: 1px solid var(--border, #e2e8f0);
    font-size: .78rem;
}

/* List pane */
.mail-list-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mail-list-head {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--border, #e2e8f0);
}
.mail-dir-toggle { display: inline-flex; border: 1px solid var(--border-dark, #cbd5e1); border-radius: 6px; overflow: hidden; }
.mail-dir-toggle .btn { border-radius: 0; }

.mail-items { flex: 1; overflow-y: auto; min-height: 0; }
.mail-item {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .55rem .75rem;
    border-bottom: 1px solid #eef1f6;
    cursor: pointer;
}
.mail-item:hover { background: #f3f6fb; }
.mail-item--unread { background: #eef4ff; }
.mail-item--unread .mail-item__sender,
.mail-item--unread .mail-item__subject { font-weight: 650; }
.mail-item--selected, .mail-item--selected:hover { background: #e0eafb; }
.mail-item__star {
    border: none; background: none; padding: .1rem .15rem;
    color: #f59e0b; font-size: .95rem; cursor: pointer; flex-shrink: 0;
}
.mail-item__main { flex: 1; min-width: 0; }
.mail-item__top { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.mail-item__sender { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item__date { font-size: .72rem; color: var(--text-muted, #64748b); white-space: nowrap; }
.mail-item__subject { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item__att { font-size: .72rem; color: var(--text-muted, #64748b); margin-left: .3rem; }
.mail-item__snippet {
    font-size: .76rem; color: var(--text-muted, #64748b);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-list-pager { padding: .5rem .75rem; border-top: 1px solid var(--border, #e2e8f0); }

/* Reading pane */
.mail-preview {
    border-left: 1px solid var(--border, #e2e8f0);
    overflow-y: auto; min-width: 0; min-height: 0;
}
.mail-preview__empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; color: var(--text-muted, #64748b); text-align: center; padding: 2rem;
}
.mail-preview__empty .empty__icon { font-size: 2rem; }
.mail-preview__inner { padding: 1rem 1.25rem; }
.mail-preview__head { display: flex; align-items: flex-start; gap: .75rem; }
.mail-preview__subject { font-size: 1.05rem; margin: 0; }
.mail-preview__meta { flex: 1; min-width: 0; font-size: .84rem; }
.mail-preview__actions { flex-shrink: 0; }
.mail-preview__toolbar {
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    flex-wrap: wrap;
    padding: .6rem 0; margin-top: .5rem;
    border-top: 1px solid var(--border, #e2e8f0);
}
.mail-preview__atts { margin-top: 1rem; border-top: 1px solid var(--border, #e2e8f0); padding-top: .75rem; }

/* side mode: fixed list width; bottom mode: stacked */
.mail-app--side { grid-template-columns: 190px 340px minmax(0, 1fr); }
.mail-app--side .mail-list-pane { border-right: none; }
.mail-app--bottom { grid-template-columns: 190px minmax(0, 1fr); grid-template-rows: 45% 55%; }
.mail-app--bottom .mail-folders { grid-row: 1 / -1; }
.mail-app--bottom .mail-preview { border-left: none; border-top: 1px solid var(--border, #e2e8f0); }

@media (max-width: 1100px) {
    .mail-app--side { grid-template-columns: 170px minmax(280px, 42%) minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .mail-app { grid-template-columns: 160px minmax(0, 1fr) !important; grid-template-rows: 40% 60% !important; }
    .mail-app .mail-folders { grid-row: 1 / -1; }
    .mail-app .mail-preview { border-left: none; border-top: 1px solid var(--border, #e2e8f0); }
    .mail-item__snippet { display: none; }
}

/* Classic mail header in reading pane */
.mail-head { border-bottom: 1px solid var(--border, #e2e8f0); padding-bottom: .75rem; }
.mail-head__subject {
    font-size: 1.1rem; font-weight: 650;
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .7rem; line-height: 1.3;
}
.mail-head__from { display: flex; align-items: flex-start; gap: .65rem; }
.mail-avatar {
    width: 2.15rem; height: 2.15rem; border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff; font-size: .78rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; user-select: none;
}
.mail-head__meta { flex: 1; min-width: 0; }
.mail-head__line { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; font-size: .88rem; }
.mail-head__line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-head__to { font-size: .8rem; margin-top: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Keep the folder-move select compact inside the reading-pane toolbar */
.mail-preview__toolbar select { width: auto !important; min-width: 7.5rem; }

/* Mail drag & drop */
.mail-folder--dragover {
    background: rgba(37, 99, 235, .18);
    outline: 2px dashed var(--primary, #2563eb);
    outline-offset: -2px;
}
.mail-item--dragging { opacity: .45; }
.mail-item[draggable="true"] { cursor: grab; }

/* ---------- Mail client responsive ---------- */
.mail-app { position: relative; }

/* Large screens: keep side layout comfortable */
@media (min-width: 1600px) {
    .mail-app--side { grid-template-columns: 200px 400px minmax(0, 1fr); }
}

/* Tablet: preview below the list */
@media (max-width: 1100px) {
    .mail-app--side { grid-template-columns: 170px minmax(240px, 40%) minmax(0, 1fr); }
    .mail-topbar { flex-wrap: wrap; }
}
@media (min-width: 701px) and (max-width: 900px) {
    .mail-app { grid-template-columns: 160px minmax(0, 1fr) !important; grid-template-rows: 42% 58% !important; }
    .mail-app .mail-folders { grid-row: 1 / -1; }
    .mail-app .mail-preview { border-left: none; border-top: 1px solid var(--border, #e2e8f0); }
    .mail-item__snippet { display: none; }
}

/* Phone: folders become a scroll strip, preview overlays the list */
@media (max-width: 700px) {
    .mail-topbar { flex-wrap: wrap; gap: .4rem; }
    .mail-topbar__actions { margin-left: 0; }
    .mail-view-switch { display: none; }
    .mail-app {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        height: calc(100dvh - 210px);
    }
    .mail-app .mail-folders {
        grid-row: auto;
        flex-direction: row; flex-wrap: nowrap;
        overflow-x: auto; overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid var(--border, #e2e8f0);
        padding: .3rem .35rem;
        -webkit-overflow-scrolling: touch;
    }
    .mail-folder { flex-shrink: 0; padding: .35rem .55rem; }
    .mail-folder__icon { width: auto; }
    .mail-folders__status { display: none; }
    .mail-list-pane { min-height: 0; }
    .mail-item__snippet { display: none; }
    .mail-item__date { font-size: .68rem; }
    .mail-preview {
        position: absolute; inset: 0;
        background: var(--surface, #fff);
        border-left: none; z-index: 6;
        display: none;
    }
    .mail-preview:has(.mail-preview__inner) { display: block; }
    .mail-preview__inner { padding: .75rem .9rem; }
    .mail-head__subject { font-size: 1rem; }
    .mail-setup-alert { font-size: .82rem; }
}

/* ==========================================================================
   UI CONSISTENCY FIXES (audit 2026-10-21)
   - Sibling spacing between stacked cards and tables (previously 0)
   - Margin collapse inside cards (first/last child)
   - .btn--accent restored to blue bg + white label (the generic .btn
     !important overrides had silently flattened it to a white button)
   ========================================================================== */

.card + .card,
.card + .table-responsive,
.card + .table-wrap,
.table-responsive + .card,
.table-wrap + .card {
    margin-top: 1rem;
}

.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

.table-responsive,
.table-wrap {
    margin-bottom: 1rem;
}
.card > .table-responsive:last-child,
.card > .table-wrap:last-child {
    margin-bottom: 0;
}

.btn--accent,
button.btn--accent,
a.btn--accent,
.btn-accent {
    background: var(--accent, #2456A6) !important;
    border-color: var(--accent-dark, #1B4179) !important;
    color: #ffffff !important;
}
.btn--accent:hover:not(:disabled),
button.btn--accent:hover:not(:disabled),
a.btn--accent:hover {
    background: var(--accent-dark, #1B4179) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   TOPBAR: navy header like docs surface (audit 2026-10-21)
   ========================================================================== */
.topbar {
    background: var(--primary, #13263F) !important;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 3px rgba(11, 48, 86, 0.25);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.topbar__brand { color: #ffffff; }
.topbar__brand:hover { color: #ffffff; }
.topbar .brand-logo-img--topbar { filter: brightness(0) invert(1); }

.topbar .topbar__icon-btn,
.topbar .notif__btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
    color: #E2E8F0;
}
.topbar .topbar__icon-btn:hover,
.topbar .notif__btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
}

.topbar .system-menu__trigger,
.topbar .lang-switcher__current {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #E2E8F0;
}
.topbar .system-menu__trigger:hover,
.topbar .lang-switcher__current:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
}

.topbar__user { color: #CBD5E1; }

.topbar__logout {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
    color: #E2E8F0;
}
.topbar__logout:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
}

.topbar .mobile-menu-toggle {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
}
.topbar .topbar__icon-btn:focus-visible,
.topbar .notif__btn:focus-visible,
.topbar .system-menu__trigger:focus-visible,
.topbar .lang-switcher__current:focus-visible,
.topbar .topbar__logout:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
}

/* ==========================================================================
   SIDEBAR HEAD: navy like docs surface + flush with topbar (2026-10-21)
   Both heads sit at viewport top: sidebar fixed left (var(--sidebar-w)
   wide), topbar offset by the same width -> one continuous navy band.
   ========================================================================== */
.sidebar__header-row {
    background: var(--primary, #13263F) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    height: var(--top-h, 56px) !important;
    min-height: var(--top-h, 56px) !important;
    margin-bottom: 0 !important;
}
.sidebar__header-row {
    position: relative;
    justify-content: center !important;
}
.sidebar__header-row .sidebar__brand {
    flex: 1;
    display: flex;
    justify-content: center;
}
.sidebar__header-row .brand-logo-img {
    filter: brightness(0) invert(1) !important;
    height: 48px;
}
.sidebar__header-row .sidebar__close-btn {
    position: absolute;
    right: 0.75rem;
}
.sidebar__header-row .sidebar__close-btn {
    color: #E2E8F0 !important;
}
.sidebar__header-row .sidebar__close-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}
/* Topbar: keep the right-hand action cluster strictly to the right. */
.topbar { justify-content: space-between !important; }
.topbar__actions { margin-left: auto; flex-shrink: 0; }

/* System menu dropdown: icons + group labels */
.system-menu__dropdown { min-width: 220px; }
.system-menu__group {
    padding: 0.55rem 0.7rem 0.25rem;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748B;
}
.system-menu__dropdown .lang-switcher__item { gap: 0.6rem; }
.lang-switcher__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    color: #64748B;
    flex-shrink: 0;
}
.lang-switcher__item:hover .lang-switcher__icon { color: var(--primary, #13263F); }

/* Seamless navy band: the sidebar column's light right border would cut a
   white stripe between sidebar head and topbar. The border is moved off the
   column onto the nav/footer regions below the head. */
.sidebar {
    box-shadow: none !important;
    border-right: none !important;
}
.sidebar__nav,
.sidebar__footer {
    border-right: 1px solid #E2E8F0;
}

/* Tenant brand logo: arbitrary colors on navy need a light pad — the
   white pill keeps any logo readable without image filtering. */
.brand-logo-img.tenant-logo {
    filter: none !important;
    background: rgba(255, 255, 255, 0.94);
    padding: 3px 8px;
    border-radius: 6px;
    max-width: 140px;
    object-fit: contain;
}


/* ---------- Tabs v7: Karteikarten — all tab families unified ----------
   Classic file-card look: tabs hang on the tabbar's bottom border; the
   active card connects to the content below. Covers .tabs/.tab-btn,
   .ui-tabs/.ui-tab-btn, .odoo-record-tabs, .product-tabs, .fs-tabs,
   .inventory-tabs and .tab-strip (button-toggle rows). */

.tabs, .ui-tabs, .odoo-record-tabs, .product-tabs, .fs-tabs,
.inventory-tabs, .tab-strip {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 5px !important;
    max-width: 100% !important;
    padding: 0 10px !important;
    margin: 0 0 1.25rem !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #CFD8E4 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.tab-btn, .ui-tab-btn, .fs-tab, .tab, .inventory-tab,
.tab-strip .btn, .tab-strip > button, .tab-strip > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .5rem 1.05rem .55rem !important;
    margin-bottom: -1px !important;
    background: linear-gradient(180deg, #F3F6FA 0%, #E8EDF4 100%) !important;
    border: 1px solid #D3DBE7 !important;
    border-bottom: none !important;
    border-radius: 10px 10px 0 0 !important;
    color: #536179 !important;
    font-size: .8rem !important;
    font-weight: 500 !important;
    letter-spacing: .02em;
    white-space: nowrap;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.tab-btn:hover:not(.tab-btn--active), .ui-tab-btn:hover:not(.ui-tab-btn--active),
.fs-tab:hover:not(.active), .tab:hover:not(.active),
.inventory-tab:hover:not(.active), .tab-strip .btn:hover:not(.btn--primary) {
    background: linear-gradient(180deg, #FAFBFD 0%, #EFF3F8 100%) !important;
    color: #2E3D52 !important;
    border-color: #C6D1DF !important;
}

/* Active card: connects to the content below (covers the tabbar border) */
.tab-btn--active, .ui-tab-btn--active, .tab.active, .fs-tab.active,
.inventory-tab.active, .tab-strip .btn.btn--primary, .tab-strip .btn.active,
.odoo-record-tabs .tab-btn--active {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFD 100%) !important;
    border-color: #BFCEDD !important;
    border-bottom: 1px solid #FFFFFF !important;
    color: var(--primary, #13263F) !important;
    font-weight: 600 !important;
    box-shadow: 0 -2px 5px rgba(16, 24, 40, .05), inset 0 3px 0 var(--accent, #2456A6) !important;
    z-index: 2;
}

/* Small / xs buttons inside strips keep their padding scale */
.tab-strip .btn--xs, .tabs .btn--xs {
    padding: .3rem .7rem !important;
    font-size: .78rem !important;
}


/* ---------- Alpine x-show guard: inline display:none must beat class !important ----------
   Several module styles (e.g. .ui-module-shell .record-list-filters) set
   display:grid/flex !important, which would override Alpine's inline
   `display: none` from x-show — leaving search/filter bars visible on
   create/detail forms. Force the inline hidden state to win. */
/* Repeated [style] selectors raise specificity above any display !important
   class rule (e.g. .ui-module-shell .record-list-filters). */
[style*="display: none"][style][style][style][style],
[style*="display:none"][style][style][style][style] {
    display: none !important;
}

/* ---------- Autocomplete stacking fix ----------
   .party-autocomplete creates a stacking context (position:relative + z-index:12);
   a sibling autocomplete later in the DOM paints above an open menu.
   Raise the focused autocomplete above its siblings while its menu is open. */
.party-autocomplete:focus-within {
    z-index: 20;
}