@charset "utf-8";

/* ==========================================================================
   MicrotronX ERP T&T - CSS Foundation
   Version: 2026-02a
   ========================================================================== */

/* --- CSS Variables (Theme System) --- */
:root {
    /* Colors */
    --mx-primary:       #7C3AED;
    --mx-primary-dark:  #5602D4;
    --mx-primary-light: #D4BFFC;
    --mx-bg:            #F8FAFB;
    --mx-surface:       #FFFFFF;
    --mx-border:        #E2E8F0;
    --mx-text:          #1E293B;
    --mx-text-muted:    #64748B;
    --mx-danger:        #DC2626;
    --mx-success:       #16A34A;
    --mx-warning:       #D97706;

    /* Radii */
    --mx-radius:        4px;
    --mx-radius-lg:     8px;

    /* Font */
    --mx-font:          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mx-font-size:     13px;
    --mx-font-size-sm:  11px;
    --mx-font-size-lg:  15px;

    /* Spacing (6px grid) */
    --mx-spacing:       6px;
    --mx-spacing-2:     12px;
    --mx-spacing-3:     18px;
    --mx-spacing-4:     24px;

    /* Header */
    --mx-header-bg:     #5602D4;
    --mx-header-height: 48px;
}

/* --- Theme Overrides --- */

[data-theme="spedition"] {
    --mx-primary:       #2563EB;
    --mx-primary-dark:  #1D4ED8;
    --mx-primary-light: #BFDBFE;
    --mx-header-bg:     #1D4ED8;
}
[data-theme="spedition"] .mx-header {
    background: linear-gradient(135deg, #1D4ED8, #3B82F6);
}

[data-theme="logistik"] {
    --mx-primary:       #059669;
    --mx-primary-dark:  #047857;
    --mx-primary-light: #A7F3D0;
    --mx-header-bg:     #047857;
}
[data-theme="logistik"] .mx-header {
    background: linear-gradient(135deg, #047857, #10B981);
}

[data-theme="slate"] {
    --mx-primary:       #475569;
    --mx-primary-dark:  #334155;
    --mx-primary-light: #E2E8F0;
    --mx-header-bg:     #334155;
}
[data-theme="slate"] .mx-header {
    background: linear-gradient(135deg, #334155, #475569);
}

[data-theme="carbon"] {
    --mx-primary:       #57534E;
    --mx-primary-dark:  #292524;
    --mx-primary-light: #E7E5E4;
    --mx-header-bg:     #292524;
}
[data-theme="carbon"] .mx-header {
    background: linear-gradient(135deg, #292524, #57534E);
}

/* --- Base Reset & Typography --- */

body {
    font-family: var(--mx-font);
    font-size: var(--mx-font-size);
    color: var(--mx-text);
    background: var(--mx-bg);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--mx-font);
    margin: 0;
    padding: 0;
}
h1 { font-size: 20px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
h4,h5,h6 { font-size: var(--mx-font-size); }

p { margin: 0; padding: 0; line-height: normal; }

table {
    font-size: var(--mx-font-size);
    font-family: var(--mx-font);
    empty-cells: show;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
}
td { empty-cells: show; text-align: left; border: 0; vertical-align: top; }
tr { border: 0; }

/* Legacy table classes (existing templates) */
table.orderstable td { vertical-align: middle; }
table.spedlagertable td { font-size: 12px; vertical-align: middle; }

/* --- Links --- */

a, a:link, a:active, a:visited {
    color: var(--mx-primary);
    cursor: pointer;
    font-weight: normal;
    text-decoration: none;
}
a:hover, a:focus {
    color: var(--mx-primary-dark);
    text-decoration: underline;
}
a.green, a.green:link, a.green:active, a.green:visited { color: var(--mx-primary); text-decoration: none; }
a.green:hover, a.green:focus { text-decoration: underline; }
a.black, a.black:link, a.black:active, a.black:visited { color: #000; text-decoration: none; }
a.black:hover, a.black:focus { color: #333; }
a.navi, a.navi:link, a.navi:active, a.navi:visited { font-weight: bold; color: var(--mx-primary-dark); text-decoration: underline; }
a.navi:hover, a.navi:focus { color: var(--mx-primary); }

/* --- Form Elements (Global) --- */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"] {
    font-family: var(--mx-font);
    font-size: var(--mx-font-size);
    height: 22px;
    padding: 1px 4px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius);
    background: var(--mx-surface);
    color: var(--mx-text);
    box-sizing: border-box;
    transition: border-color 0.15s ease;
    outline: none;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus {
    border-color: var(--mx-primary);
    box-shadow: 0 0 0 2px var(--mx-primary-light);
}

input[type="checkbox"] {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
    accent-color: var(--mx-primary);
}

select {
    font-family: var(--mx-font);
    font-size: var(--mx-font-size);
    height: 22px;
    padding: 1px 4px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius);
    background: var(--mx-surface);
    color: var(--mx-text);
    box-sizing: border-box;
    outline: none;
}
select:focus {
    border-color: var(--mx-primary);
    box-shadow: 0 0 0 2px var(--mx-primary-light);
}

textarea {
    font-family: var(--mx-font);
    font-size: var(--mx-font-size);
    padding: 2px 4px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius);
    background: var(--mx-surface);
    color: var(--mx-text);
    box-sizing: border-box;
    resize: vertical;
    outline: none;
}
textarea:focus {
    border-color: var(--mx-primary);
    box-shadow: 0 0 0 2px var(--mx-primary-light);
}

/* --- Buttons (Global + Template-Engine classes) --- */

button, .mx-btn {
    font-family: var(--mx-font);
    font-size: var(--mx-font-size);
    height: 22px;
    padding: 1px 10px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius);
    background: var(--mx-surface);
    color: var(--mx-text);
    cursor: pointer;
    transition: all 0.15s ease;
    box-sizing: border-box;
    line-height: 1;
}
button:hover, .mx-btn:hover {
    background: #F1F5F9;
    border-color: #CBD5E1;
}

/* Template-Engine button types */
button.success, .mx-btn-primary {
    background: var(--mx-primary);
    color: #fff;
    border-color: var(--mx-primary);
}
button.success:hover, .mx-btn-primary:hover {
    background: var(--mx-primary-dark);
    border-color: var(--mx-primary-dark);
}

button.danger, .mx-btn-danger {
    background: var(--mx-danger);
    color: #fff;
    border-color: var(--mx-danger);
}
button.danger:hover, .mx-btn-danger:hover {
    background: #B91C1C;
    border-color: #B91C1C;
}

button.default {
    background: var(--mx-primary-light);
    color: var(--mx-primary-dark);
    border-color: var(--mx-primary);
}
button.default:hover {
    background: var(--mx-primary);
    color: #fff;
}

button.normal {
    /* inherits base button style */
}

button.back {
    background: var(--mx-surface);
    color: var(--mx-text-muted);
    border-color: var(--mx-border);
}
button.back:hover {
    color: var(--mx-text);
    background: #F1F5F9;
}

button.text_green {
    background: transparent;
    color: var(--mx-primary);
    border-color: var(--mx-primary);
}
button.text_green:hover {
    background: var(--mx-primary-light);
}

/* ==========================================================================
   Layout System (mx-page)
   ========================================================================== */

/* --- Top Menu Layout (Default) --- */

.mx-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.mx-header {
    background: linear-gradient(135deg, #5602D4, #915AE3);
    border-top: none;
    padding: var(--mx-spacing-2) var(--mx-spacing-3);
    flex-shrink: 0;
}

.mx-content {
    flex: 1;
    width: 100%;
    padding: var(--mx-spacing-3);
    box-sizing: border-box;
}

/* --- Sidebar Menu Layout --- */

.mx-page.mx-layout-side {
    flex-direction: row;
}
.mx-page.mx-layout-side .mx-header {
    width: 250px;
    min-height: 100vh;
    flex-shrink: 0;
    border-top: none;
    border-left: none;
    padding: var(--mx-spacing-2) 0;
    overflow-y: auto;
}
.mx-page.mx-layout-side .mx-content {
    flex: 1;
    max-width: none;
}
.mx-page.mx-layout-side .mx-nav {
    padding: 0;
}
.mx-page.mx-layout-side .mx-menu {
    flex-direction: column;
}
.mx-page.mx-layout-side .mx-menu > li > ul {
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: rgba(0,0,0,0.1);
    margin: 0;
    display: block;
}
.mx-page.mx-layout-side .mx-menu-logout {
    margin-left: 0;
    margin-top: var(--mx-spacing-2);
    border-top: 1px solid rgba(255,255,255,0.1);
}
.mx-page.mx-layout-side .mx-menu-desc {
    display: block;
}

/* ==========================================================================
   Navigation (mx-menu - eigene Komponente, kein SmartMenus)
   ========================================================================== */

.mx-nav {
    padding: var(--mx-spacing) 0;
    position: relative;
}

/* Hamburger Button (nur Mobile) */
.mx-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin: 4px 8px;
}
.mx-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255,255,255,0.85);
    margin: 5px 0;
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.mx-menu-toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.mx-menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}
.mx-menu-toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Menu list */
.mx-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
.mx-menu > li {
    position: relative;
}

/* Menu links (top level) */
.mx-menu-link,
.mx-menu-link:link,
.mx-menu-link:visited,
.mx-menu-link:active {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    color: rgba(255,255,255,0.95);
    text-decoration: none;
    border-radius: var(--mx-radius);
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    line-height: 1.3;
    cursor: pointer;
}
.mx-menu-link:hover,
.mx-menu-link:focus {
    background: rgba(255,255,255,0.15);
    color: #fff;
    text-decoration: none;
}

/* Active/current page */
.mx-menu > li.is-current > .mx-menu-link,
.mx-menu > li.is-open > .mx-menu-link {
    background: rgba(255,255,255,0.18);
    color: #fff;
}

/* Dropdown arrow for items with submenus */
.mx-menu > li:has(> ul) > .mx-menu-link::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid rgba(255,255,255,0.5);
    margin-left: 4px;
    flex-shrink: 0;
}
.mx-menu > li.is-open:has(> ul) > .mx-menu-link::after {
    border-top-color: #fff;
}

/* Menu icon */
.mx-menu-icon {
    height: 20px;
    width: 20px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.95;
}
.mx-menu-link:hover .mx-menu-icon,
.mx-menu > li.is-current .mx-menu-icon {
    opacity: 1;
}

/* Menu label */
.mx-menu-label {
    font-size: var(--mx-font-size);
    font-weight: 500;
}

/* Menu description (hidden in top-level, visible in dropdowns) */
.mx-menu-desc {
    display: none;
    font-size: var(--mx-font-size-sm);
    color: var(--mx-text-muted);
    margin-top: 2px;
}

/* Logout item - pushed to far right */
.mx-menu-logout {
    margin-left: auto;
}

/* --- Dropdown Submenus --- */

.mx-menu > li > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    list-style: none;
    margin: 4px 0 0;
    padding: var(--mx-spacing) 0;
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    min-width: 240px;
}
.mx-menu > li.is-open > ul {
    display: block;
}

/* Dropdown menu links */
.mx-menu > li > ul .mx-menu-link {
    color: var(--mx-text);
    padding: 8px 14px;
    border-radius: 0;
    white-space: normal;
    flex-wrap: wrap;
}
.mx-menu > li > ul .mx-menu-link:hover,
.mx-menu > li > ul .mx-menu-link:focus {
    background: var(--mx-primary-light);
    color: var(--mx-primary-dark);
}
.mx-menu > li > ul .mx-menu-label {
    font-weight: 600;
}
.mx-menu > li > ul .mx-menu-desc {
    display: block;
    flex-basis: 100%;
    color: var(--mx-text-muted);
    margin-top: 1px;
    margin-left: 26px;
    font-size: 11px;
    line-height: 1.3;
}
.mx-menu > li > ul .mx-menu-icon {
    height: 18px;
    width: 18px;
}
.mx-menu > li > ul li.is-current > .mx-menu-link {
    background: var(--mx-primary-light);
    color: var(--mx-primary-dark);
    font-weight: 600;
}

/* --- Mobile Responsive (< 768px) --- */

@media (max-width: 768px) {
    .mx-menu-toggle {
        display: block;
    }
    .mx-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background: var(--mx-header-bg);
        border-top: 1px solid rgba(255,255,255,0.1);
        padding: var(--mx-spacing) 0;
    }
    .mx-menu.is-open-mobile {
        display: flex;
    }
    .mx-menu > li > ul {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: rgba(0,0,0,0.15);
        margin: 0;
        padding: 0;
    }
    .mx-menu > li > ul .mx-menu-link {
        color: rgba(255,255,255,0.85);
        padding-left: 32px;
    }
    .mx-menu > li > ul .mx-menu-link:hover {
        background: rgba(255,255,255,0.1);
        color: #fff;
    }
    .mx-menu > li > ul .mx-menu-desc {
        color: rgba(255,255,255,0.5);
    }
    .mx-menu-logout {
        margin-left: 0;
        border-top: 1px solid rgba(255,255,255,0.1);
        margin-top: var(--mx-spacing);
        padding-top: var(--mx-spacing);
    }
}

/* ==========================================================================
   Header Content (page_title.html)
   ========================================================================== */

.mx-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mx-spacing-2);
    margin-bottom: var(--mx-spacing);
}

.mx-header-brand {
    color: #fff;
    font-size: var(--mx-font-size);
    font-weight: 600;
    white-space: nowrap;
}
.mx-header-brand-erp {
    color: var(--mx-primary);
}

.mx-header-logo img {
    height: 40px;
}

.mx-header-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.08);
    border-radius: var(--mx-radius);
    padding: var(--mx-spacing) var(--mx-spacing-2);
    margin-top: var(--mx-spacing);
    font-size: var(--mx-font-size-sm);
    color: rgba(255,255,255,0.7);
}
.mx-header-page {
    color: var(--mx-primary-light);
    font-weight: 500;
}
.mx-header-user {
    color: rgba(255,255,255,0.6);
}
.mx-header-controls {
    display: flex;
    align-items: center;
    gap: var(--mx-spacing-2);
}
.mx-header-lang {
    color: rgba(255,255,255,0.6);
}
.mx-header-theme {
    color: rgba(255,255,255,0.6);
}
.mx-header-theme select {
    height: 22px;
    font-size: var(--mx-font-size-sm);
    padding: 1px 4px;
    border-radius: var(--mx-radius);
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.9);
    cursor: pointer;
}
.mx-header-theme select option {
    background: var(--mx-surface);
    color: var(--mx-text);
}

.mx-header-version {
    font-size: 10px;
    color: rgba(255,255,255,0.3);
}

/* ==========================================================================
   Content Components
   ========================================================================== */

/* --- Sections --- */

.mx-section {
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    padding: var(--mx-spacing-2);
    margin-bottom: var(--mx-spacing-2);
}

.mx-section-title {
    font-size: var(--mx-font-size-lg);
    font-weight: 600;
    color: var(--mx-text);
    padding-bottom: var(--mx-spacing);
    margin-bottom: var(--mx-spacing-2);
    border-bottom: 2px solid var(--mx-primary);
}

/* --- Tables --- */

.mx-table {
    width: 100%;
    font-size: var(--mx-font-size);
    border-collapse: collapse;
}
.mx-table th {
    background: var(--mx-primary);
    color: #fff;
    font-weight: 500;
    text-align: left;
    padding: 8px 10px;
    font-size: var(--mx-font-size-sm);
    white-space: nowrap;
}
.mx-table th:first-child { border-radius: var(--mx-radius) 0 0 0; }
.mx-table th:last-child { border-radius: 0 var(--mx-radius) 0 0; }

.mx-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--mx-border);
    vertical-align: top;
}
.mx-table thead ~ tbody tr:hover td {
    background: var(--mx-primary-light);
}
.mx-table-striped tbody tr:nth-child(even) td {
    background: #F8FAFC;
}
.mx-table-striped tbody tr:hover td {
    background: var(--mx-primary-light);
}

/* --- Auto-Layout Tabelle (Orders, Transports) --- */
.mx-table-auto {
    table-layout: auto;
    width: 100%;
}
.mx-table-auto th,
.mx-table-auto td {
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.mx-table-auto .mx-col-actions {
    white-space: nowrap;
    width: 1%;
}
.mx-table-auto .mx-col-actions a,
.mx-table-auto .mx-col-actions img {
    display: inline-block;
    float: none !important;
    vertical-align: middle;
}
.mx-table-auto .mx-col-narrow {
    max-width: 35px;
    white-space: nowrap;
}
.mx-table-auto .mx-col-number {
    max-width: 65px;
    white-space: nowrap;
    text-align: right;
}
.mx-table-auto .mx-col-date {
    white-space: nowrap;
}
.mx-table-auto thead ~ tbody tr:hover td {
    box-shadow: inset 0 0 0 9999px rgba(0,0,0,0.08);
}

/* --- Card-Grid Layout (Startseite) --- */
.mx-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--mx-spacing-2);
}
.mx-card-grid > .mx-section {
    margin-bottom: 0;
    overflow: hidden;
}
.mx-card-grid > .mx-section input,
.mx-card-grid > .mx-section select {
    max-width: 100%;
}
@media (max-width: 768px) {
    .mx-card-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Summen-Card (Offene Posten) --- */
.mx-summary-card {
    margin-top: var(--mx-spacing-2);
    margin-left: auto;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius);
    overflow: hidden;
    max-width: 500px;
}
.mx-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mx-spacing) var(--mx-spacing-2);
    border-bottom: 1px solid var(--mx-border);
}
.mx-summary-row:last-child {
    border-bottom: none;
}
.mx-summary-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mx-summary-label strong {
    font-size: var(--mx-font-size);
}
.mx-summary-label small {
    font-size: var(--mx-font-size-sm);
    color: var(--mx-text-muted);
}
.mx-summary-amount {
    font-weight: 600;
    font-size: var(--mx-font-size);
    white-space: nowrap;
    padding-left: var(--mx-spacing-2);
}
.mx-summary-row.mx-summary-danger {
    border-left: 3px solid var(--mx-danger);
}
.mx-summary-row.mx-summary-success {
    border-left: 3px solid var(--mx-success);
}
.mx-summary-row.mx-summary-total {
    background: var(--mx-surface);
    padding: var(--mx-spacing-2);
}
.mx-summary-row.mx-summary-total .mx-summary-amount {
    font-size: var(--mx-font-size-lg);
}

/* --- Pagination --- */
.mx-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mx-spacing-2);
    padding: var(--mx-spacing-2) 0;
    font-size: var(--mx-font-size);
    flex-wrap: wrap;
}
.mx-pagination-info {
    color: var(--mx-text-muted);
    font-size: var(--mx-font-size-sm);
}
.mx-pagination-pages {
    font-weight: 600;
}
.mx-pagination-size {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mx-text-muted);
    font-size: var(--mx-font-size-sm);
}
.mx-pagination-size select {
    height: 22px;
    padding: 1px 4px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius);
    background: var(--mx-surface);
    color: var(--mx-text);
    font-size: var(--mx-font-size-sm);
    cursor: pointer;
}
@media (max-width: 480px) {
    .mx-pagination {
        gap: var(--mx-spacing);
        font-size: var(--mx-font-size-sm);
    }
}

/* --- Table Row Helpers --- */

.mx-row-hover:hover td {
    background: var(--mx-primary-light);
}
.mx-cell-middle {
    vertical-align: middle;
}
.mx-row-summary td {
    font-weight: 600;
    background: var(--mx-border);
}
.mx-row {}
.mx-table-row {}
.mx-section-header {
    background: var(--mx-primary-light);
    padding: var(--mx-spacing) var(--mx-spacing-2);
    font-weight: 600;
}

/* --- Form Rows --- */

.mx-form-row {
    display: flex;
    align-items: center;
    gap: var(--mx-spacing-2);
    margin-bottom: var(--mx-spacing);
}
.mx-form-row > label,
.mx-label {
    font-size: var(--mx-font-size-sm);
    color: var(--mx-text-muted);
    font-weight: 500;
    min-width: 120px;
    flex-shrink: 0;
}

/* --- Filter Flexbox Layout (neu) --- */

.mx-filter-flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mx-spacing) var(--mx-spacing-3);
    align-items: flex-end;
    font-size: var(--mx-font-size);
}
.mx-filter-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mx-filter-field .mx-label {
    display: block;
    margin-bottom: 0;
}
/* Groessen-Klassen - Desktop */
.mx-filter-xs { flex: 0 0 auto; width: 60px; }
.mx-filter-sm { flex: 0 0 auto; width: 100px; }
.mx-filter-md { flex: 0 0 auto; width: 220px; }
.mx-filter-lg { flex: 1 1 180px; max-width: 280px; }
.mx-filter-full { flex: 1 1 100%; }
/* Inputs in Feldern volle Breite */
.mx-filter-field input[type="text"],
.mx-filter-field select {
    width: 100%;
    box-sizing: border-box;
}
/* Inline-Felder (z.B. Colli + KG) */
.mx-filter-inline {
    display: flex;
    gap: var(--mx-spacing);
}
.mx-filter-inline input[type="text"] {
    width: auto !important;
    flex: 1;
    min-width: 50px;
}
/* Datum-Range (von - bis) */
.mx-filter-range {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
/* Feld-Gruppe (z.B. Land + Ort zusammen) */
.mx-filter-group {
    display: inline-flex;
    gap: var(--mx-spacing);
    flex-wrap: nowrap;
    align-items: flex-end;
}
.mx-filter-group .mx-filter-field {
    width: auto !important;
    flex: 0 0 auto !important;
}
.mx-filter-group .mx-filter-xs { width: 60px !important; }
.mx-filter-group .mx-filter-sm { width: 100px !important; }
.mx-filter-sep {
    padding: 0 4px;
    line-height: 22px;
}
/* Actions */
.mx-filter-flex .mx-filter-actions {
    display: flex;
    gap: var(--mx-spacing);
    align-items: flex-end;
    padding: 0;
}
/* Legende kompakt */
.mx-filter-legende {
    font-size: 11px;
}
.mx-legende-items {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
}

/* Tablet: etwas enger */
@media (max-width: 900px) {
    .mx-filter-lg { max-width: 200px; }
}

/* Mobile: Felder umbrechen */
@media (max-width: 600px) {
    .mx-filter-flex {
        gap: var(--mx-spacing);
    }
    /* Extra kleine Felder (Land-Codes): schmal */
    .mx-filter-xs {
        width: 25% !important;
        flex: 0 0 auto !important;
        min-width: 50px;
    }
    /* Kleine Felder: neben xs passt (25+70=95%) */
    .mx-filter-sm {
        width: 70% !important;
        flex: 0 0 auto !important;
        min-width: 70px;
    }
    /* Mittlere Felder: volle Breite */
    .mx-filter-md {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
    /* Grosse Felder: neben kleinem Feld */
    .mx-filter-lg {
        width: 55% !important;
        flex: 0 0 auto !important;
        max-width: none;
    }
    /* Volle Breite Felder */
    .mx-filter-full {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
    .mx-filter-flex .mx-filter-actions {
        width: 100%;
        flex: 0 0 auto;
        justify-content: flex-start;
    }
}

/* --- Legacy Filter Grid (fuer bestehende Templates) --- */

.mx-filter-grid {
    width: 100%;
    font-size: var(--mx-font-size);
}
.mx-filter-grid td {
    padding: 0 var(--mx-spacing-2) var(--mx-spacing) 0;
    vertical-align: top;
}
.mx-filter-grid input[type="text"] {
    max-width: 100%;
    box-sizing: border-box;
}
.mx-filter-grid .mx-filter-actions {
    padding: var(--mx-spacing-2) !important;
    vertical-align: middle !important;
    text-align: center;
}

/* --- Detail Views --- */

.mx-detail-grid { font-size: var(--mx-font-size); }
.mx-detail-grid > table {
    width: 100%;
    border-collapse: collapse;
}
.mx-detail-grid > table > tbody > tr > td {
    padding: 2px 0;
    border-bottom: none;
    vertical-align: top;
}

.mx-detail-cell {
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius);
    padding: var(--mx-spacing-2);
    vertical-align: top;
}
.mx-detail-cell-sub {
    padding: var(--mx-spacing) 0;
    vertical-align: top;
}
.mx-detail-label {
    font-size: var(--mx-font-size-sm);
    font-weight: 600;
    color: var(--mx-text);
}
td.mx-detail-section-header,
div.mx-detail-section-header {
    padding: 6px 0 2px 0;
    border-bottom: none;
    vertical-align: middle;
    background: none;
}
.mx-detail-section-title {
    font-size: var(--mx-font-size-sm);
    font-weight: 600;
    color: var(--mx-text-muted);
}
/* Compact table headers for detail sub-tables */
.mx-table-detail th {
    padding: 4px 8px;
    font-size: 10px;
    background: var(--mx-primary-light);
    color: var(--mx-text);
    font-weight: 600;
}

/* --- Data Tables (key-value pairs like welcome page) --- */

.mx-data-table {
    margin: var(--mx-spacing) 0;
    font-size: var(--mx-font-size);
}
.mx-data-table td {
    padding: 3px var(--mx-spacing-2) 3px 0;
    vertical-align: top;
}
.mx-data-label {
    width: 140px;
    color: var(--mx-text-muted);
    font-weight: 500;
    font-size: var(--mx-font-size-sm);
}

/* --- Edit Links & Icons --- */

.mx-edit-link {
    font-size: var(--mx-font-size-sm);
    font-weight: normal;
    margin-left: var(--mx-spacing-2);
}
.mx-edit-icon {
    height: 14px;
    vertical-align: middle;
    border: 0;
}

/* --- Row Icons (in table lines) --- */

.mx-row-icon {
    height: 16px;
    vertical-align: middle;
    float: left;
    margin-right: 4px;
}
.mx-row-icon-right {
    height: 16px;
    vertical-align: middle;
    float: right;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.mx-footer {
    margin-top: var(--mx-spacing-4);
    padding: var(--mx-spacing-2) var(--mx-spacing-3);
    text-align: center;
}

.mx-footer-divider {
    border: none;
    border-top: 1px solid var(--mx-border);
    width: 75%;
    margin: 0 auto var(--mx-spacing-2);
}

.mx-footer-company {
    font-size: var(--mx-font-size-sm);
    color: var(--mx-text-muted);
    margin-bottom: var(--mx-spacing-2);
    text-align: center;
}

.mx-footer-meta {
    font-size: 10px;
    color: #94A3B8;
    text-align: center;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.mx-hide { display: none !important; }
.hide { display: none; }

.mx-text-muted { color: var(--mx-text-muted); }
.mx-text-danger { color: var(--mx-danger); }
.mx-text-success { color: var(--mx-success); }
.mx-text-warning { color: var(--mx-warning); }

.red { color: #CB0A26; }
.green { color: var(--mx-primary); }
.lila { color: #53317d; }

/* --- Alerts --- */

.alert {
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius);
    padding: 8px 14px;
    margin-bottom: var(--mx-spacing);
    font-size: var(--mx-font-size);
}
.alert-success, .mx-alert-success {
    background: #F0FDF4;
    border-color: #BBF7D0;
    color: #166534;
}
.alert-error, .mx-alert-error {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #991B1B;
}
.mx-alert-warning {
    background: #FFFBEB;
    border-color: #FDE68A;
    color: #92400E;
}

/* --- jQuery UI Overlay --- */

.ui-widget-overlay {
    background: black;
    opacity: .7;
}

.mx-modal-container {
    z-index: 9999;
}

/* ==========================================================================
   Login Page
   ========================================================================== */

.mx-login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.mx-login-card {
    width: 500px;
    box-sizing: border-box;
    background: linear-gradient(135deg, var(--mx-header-bg), var(--mx-primary));
    border-radius: var(--mx-radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    padding: 40px 40px 36px;
}

.mx-login-logo {
    text-align: center;
    padding-bottom: 28px;
}
.mx-login-logo img {
    max-width: 360px;
    height: auto;
}

.mx-login-form {
    color: #ffffff;
    font-size: 10pt;
}

.mx-login-field {
    padding: 5px;
}
.mx-login-field label {
    display: inline-block;
    width: 100px;
    color: #ffffff;
}
.mx-login-field input {
    width: 200px;
}
.mx-login-field-lang {
    padding: 10px 5px;
}
.mx-login-field-lang-label {
    display: inline-block;
    width: 100px;
    color: #ffffff;
}

.mx-login-actions {
    display: flex;
    align-items: center;
    padding: 5px 0;
}

.mx-login-error {
    text-align: center;
    font-size: 12pt;
    color: #FF7F7F;
    flex: 1;
}
.mx-login-error:empty {
    display: none;
}

.mx-login-btn {
    margin-left: auto;
    height: 25px;
    width: 80px;
    background: rgba(255,255,255,0.2);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: var(--mx-radius);
    cursor: pointer;
    font-size: var(--mx-font-size);
}
.mx-login-btn:hover {
    background: rgba(255,255,255,0.35);
}

.mx-login-meta {
    text-align: center;
    padding-top: 10px;
    font-size: 8pt;
    color: silver;
}

/* Responsive: auf kleinen Bildschirmen Login skalieren */
@media (max-width: 520px) {
    .mx-login-card {
        width: calc(100% - 2 * var(--mx-spacing-2));
        margin: 0 var(--mx-spacing-2);
        padding: 24px 16px 20px;
    }
    .mx-login-logo img {
        max-width: 160px;
    }
    .mx-login-field label,
    .mx-login-field-lang-label {
        display: block;
        width: auto;
        margin-bottom: 4px;
    }
    .mx-login-field input {
        width: 100%;
        box-sizing: border-box;
    }
    .mx-login-field-lang {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    .mx-login-field-lang-label {
        flex-basis: 100%;
    }
    .mx-login-field-lang select {
        flex: 1;
        min-width: 0;
    }
    .mx-header-theme {
        flex-shrink: 0;
    }
    .mx-login-meta {
        font-size: 7pt;
        word-break: break-all;
    }
}

/* ==========================================================================
   Mobile Responsive (General)
   ========================================================================== */

@media (max-width: 768px) {
    /* Verhindern dass breite Elemente die Seite aufblaehen */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    .mx-page {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Content padding reduzieren */
    .mx-content {
        padding: var(--mx-spacing-2);
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Section padding reduzieren */
    .mx-section {
        padding: var(--mx-spacing);
    }
    .mx-section-title {
        font-size: var(--mx-font-size);
    }

    /* Tabellen-Wrapper fuer horizontales Scrollen */
    .mx-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 calc(-1 * var(--mx-spacing-2));
        padding: 0 var(--mx-spacing-2);
    }

    /* Header kompakter auf Mobile */
    .mx-header {
        padding: var(--mx-spacing);
    }
    .mx-header-bar {
        flex-wrap: nowrap;
        gap: var(--mx-spacing);
        align-items: center;
    }
    .mx-header-brand {
        font-size: var(--mx-font-size-sm);
        white-space: normal;
        flex: 1;
        min-width: 0;
        order: 1;
    }
    .mx-header-version {
        display: none;
    }
    .mx-header-logo {
        order: 2;
    }
    .mx-header-logo img {
        height: 28px;
    }
    /* Hamburger-Menu in Header-Bar verschieben */
    .mx-nav {
        position: absolute;
        top: var(--mx-spacing);
        left: var(--mx-spacing);
        padding: 0;
    }
    .mx-menu-toggle {
        position: static;
        margin: 0;
        padding: 6px;
    }
    .mx-header-bar {
        padding-left: 40px;
    }
    .mx-header-info {
        flex-wrap: wrap;
        gap: var(--mx-spacing);
        padding: var(--mx-spacing);
        font-size: 10px;
    }
    .mx-header-controls {
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start;
        gap: var(--mx-spacing);
    }
    .mx-header-page {
        width: 100%;
    }

    /* Form rows stapeln */
    .mx-form-row {
        flex-wrap: wrap;
    }
    .mx-form-row > label,
    .mx-label {
        min-width: 100%;
        margin-bottom: 4px;
    }
}

@media (max-width: 480px) {
    /* Noch kompakter auf sehr kleinen Bildschirmen */
    .mx-header-brand {
        font-size: 11px;
    }
    .mx-header-logo img {
        height: 24px;
    }

    /* Buttons volle Breite */
    .mx-filter-actions button {
        flex: 1;
        min-width: 0;
    }
}

/* ==========================================================================
   Legacy Support (existing templates, will be removed phase by phase)
   ========================================================================== */

/* OS Confirm (Offene Posten) */
.osconfirmamount { text-align: center; width: 50px; font-size: 12px; font-weight: bold; }
.oshead { text-align: right; vertical-align: middle; height: 20px; color: white; background-color: var(--mx-primary); padding: 2px; font-size: 12px; font-weight: bold; }
.oscell { text-align: right; vertical-align: middle; height: 20px; padding: 2px; font-size: var(--mx-font-size-sm); border-bottom: 1px solid var(--mx-border); border-left: 1px solid var(--mx-border); }

/* Legacy list styles */
ul.std { margin: 0; padding: 0; list-style: none; }
li.std { padding-left: 13px; margin: 0; }
ul.error { margin-left: 10px; padding: 0; list-style-type: square; }